body { background:#f7f9fc; }

.page-header {
  background:#fff;
  padding:14px;
  border-radius:16px;
  box-shadow:0 2px 10px rgba(0,0,0,0.05);
  margin-bottom:16px;
}

.service-option {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  
  /* Change to block so children stack vertically (Header top, Body bottom) */
  display: block; 
  position: relative; /* Good practice for contained elements */
  
  cursor: pointer;
  margin-bottom: 12px;
  transition: all 0.2s ease;
}

.service-option.active {
  border:2px solid #1e88e5;
  background:#e3f2fd;
}

.service-title {
  font-weight:700;
  color:#263238;
}

.service-desc {
  font-size:13px;
  color:#607d8b;
}

.continue-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 14px;
  background: #fff;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
  z-index: 1000; /* Ensures it stays on top */
  
  /* Adds padding for iPhone Home Indicator area */
  padding-bottom: calc(14px + env(safe-area-inset-bottom)); 
}

.continue-btn button {
  width:100%;
  background:linear-gradient(135deg,#1e88e5,#42a5f5);
  border:none;
  border-radius:14px;
  padding:12px;
  font-weight:700;
  color:#fff;
}

.quantity-box,
.price-box {
  background:#ffffff;
  border-radius:16px;
  padding:16px;
  box-shadow:0 4px 14px rgba(0,0,0,0.06);
}

.quantity-label {
  font-weight:700;
  color:#263238;
  margin-bottom:10px;
}

.quantity-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.quantity-controls button {
  width:42px;
  height:42px;
  border:none;
  border-radius:50%;
  background:#e3f2fd;
  color:#1e88e5;
  font-size:20px;
  font-weight:700;
}

#qtyValue {
  font-size:18px;
  font-weight:700;
  min-width:32px;
  text-align:center;
}

.quantity-hint {
  text-align:center;
  font-size:12px;
  color:#607d8b;
  margin-top:6px;
}

.price-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:16px;
}

.price-row strong {
  color:#1e88e5;
}

.service-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
  }
  
  .service-body {
    margin-top:12px;
  }
  
  .qty-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  
  .qty-controls {
    display:flex;
    gap:12px;
    align-items:center;
  }
  
  .qty-controls button {
    width:36px;
    height:36px;
    border-radius:50%;
    border:none;
    background:#e3f2fd;
    color:#1e88e5;
    font-weight:700;
    font-size:18px;
  }
  
 /* =========================
   FIXED IMAGE SCROLLING
   ========================= */
.image-preview {
  display: flex;
  gap: 10px;
  
  /* CRITICAL FOR SCROLLING: */
  overflow-x: auto;          /* Enables horizontal scroll */
  flex-wrap: nowrap;         /* Forces images to stay in one line */
  white-space: nowrap;       /* Secondary prevention of wrapping */
  
  padding: 8px 4px;          /* Padding for touch area */
  margin-top: 8px;
  
  /* Smooth scrolling experience */
  -webkit-overflow-scrolling: touch; 
  
  /* Optional: Hide scrollbar */
  scrollbar-width: none; 
}

.image-preview::-webkit-scrollbar { 
  display: none; 
}
  .image-thumb {
    position:relative;
    width:70px;
    height:70px;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 6px rgba(0,0,0,0.15);
  }
  
  .image-thumb img {
    width:100%;
    height:100%;
    object-fit:cover;
  }
  
  /* .remove-img {
    position:absolute;
    top:4px;
    right:4px;
    background:rgba(0,0,0,0.7);
    color:#fff;
    width:20px;
    height:20px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    cursor:pointer;
  } */
  
  .selected-laundry {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  }
  
  .laundry-name {
    font-weight: 700;
    font-size: 15px;
    color: #263238;
  }
  
  .laundry-address {
    font-size: 13px;
    color: #607d8b;
    margin-top: 2px;
  }
  
  .laundry-meta {
    font-size: 12px;
    color: #455a64;
    margin-top: 4px;
  }
  
  .change-laundry {
    font-size: 13px;
    font-weight: 600;
    color: #1e88e5;
    text-decoration: none;
  }
  
  
  .img-wrapper {
    flex: 0 0 auto;  /* IMPORTANT: Prevents images from shrinking/squishing */
    width: 70px;
    height: 70px;
    position: relative;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
  }
  
  .img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }
  
/* Ensure the close button stays positioned correctly */
.remove-img {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ff4d4f;
  color: #fff;
  border: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  z-index: 10; /* Ensures it sits on top */
}
  

/* =========================
   SCROLL SPACER
   ========================= */
   .scroll-spacer {
    height: 150px; /* Large enough to clear the fixed footer */
    width: 100%;
    clear: both;
  }