/* =========================================
   CLOTHSY - CRED-STYLE 3D NEUMORPHIC THEME
   (Mapped to your existing home.php classes)
   ========================================= */

   :root {
    /* Soft cool-grey background essential for 3D depth */
    --bg-color: #f0f3f8; 
    --text-main: #1e293b;
    --text-muted: #64748b;
    
    /* Neumorphic Shadows */
    --shadow-light: #ffffff;
    --shadow-dark: #d1d9e6;
    
    /* Brand Colors */
    --accent-blue: #4f46e5;
    --primary-color: #0088cc;
}

body {
    background-color: var(--bg-color) !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text-main);
    padding-bottom: 120px;
    overflow-x: hidden;
}

/* === UTILITIES === */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.scroll-spacer { height: 120px; }

/* === HEADER === */
.app-header {
    background: rgba(240, 243, 248, 0.85) !important;
    padding: 15px 20px;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: none !important; /* Removes flat shadow */
}

/* === 3D LOCATION PILL === */
.location-pill {
    padding: 8px 16px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    background: var(--bg-color) !important;
    /* Pop-out outer shadow */
    box-shadow: 4px 4px 10px var(--shadow-dark), -4px -4px 10px var(--shadow-light) !important;
    color: var(--text-main);
    transition: all 0.2s ease;
    border: none !important;
}
.location-pill:active {
    /* Push-in inner shadow */
    box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -4px -4px 10px var(--shadow-light) !important;
}

.eta-badge {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent-blue) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    display: inline-block;
}

/* 3D Profile Button (Overrides inline style) */
.profile-btn div {
  background: var(--bg-color) !important; /* Cool grey base */
  color: var(--accent-blue) !important;   /* Indigo text */
  /* 3D Floating Shadow */
  box-shadow: 5px 5px 12px var(--shadow-dark), -5px -5px 12px var(--shadow-light) !important;
  border: 2px solid rgba(255,255,255,0.6) !important;
  transition: all 0.15s ease;
}

/* Physical push-in effect when clicked */
.profile-btn div:active {
  box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -4px -4px 10px var(--shadow-light) !important;
  transform: scale(0.95);
  border-color: transparent !important;
}

/* === 3D RECESSED SEARCH BAR === */
.search-wrapper {
    position: relative;
    margin: 20px 0;
}
.search-input {
    width: 100%;
    padding: 18px 20px 18px 52px;
    border-radius: 20px;
    border: none;
    background: var(--bg-color) !important;
    /* Inset shadow creates the "carved into the screen" effect */
    box-shadow: inset 5px 5px 12px var(--shadow-dark), inset -5px -5px 12px var(--shadow-light) !important;
    font-size: 1rem;
    font-weight: 600;
    outline: none;
    color: var(--text-main);
}
.search-input::placeholder { color: #94a3b8; font-weight: 500; }
.search-icon {
    position: absolute; 
    left: 22px; 
    top: 50%; 
    transform: translateY(-50%);
    color: #64748b; 
    font-size: 1.2rem; 
    font-weight: bold;
}

/* === 3D EXTRUDED CATEGORIES (Fixes the broken grid) === */
.premium-cat-container {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px 15px !important;
  margin-bottom: 35px;
  padding: 0 5px;
}
.premium-cat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    gap: 12px;
}
.premium-cat-icon {
    width: 65px !important;
    height: 65px !important;
    background-color: var(--bg-color) !important;
    border-radius: 20px !important; /* Modern Squircle */
    /* Outer shadow creates the physical button look */
    box-shadow: 7px 7px 15px var(--shadow-dark), -7px -7px 15px var(--shadow-light) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease-in-out;
    border: 2px solid rgba(255,255,255,0.4) !important;
    margin-bottom: 0 !important;
}
/* The satisfying physical button press effect */
.premium-cat-item:active .premium-cat-icon {
    box-shadow: inset 5px 5px 10px var(--shadow-dark), inset -5px -5px 10px var(--shadow-light) !important;
    border: 2px solid transparent !important;
    transform: scale(0.95);
}
.premium-cat-icon i, 
.premium-cat-icon svg {
    color: #4f46e5 !important; /* Premium Deep Indigo */
    font-size: 1.6rem !important;
    filter: drop-shadow(2px 2px 3px rgba(79, 70, 229, 0.2)); /* Soft glowing shadow */
}
.premium-cat-text {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    color: var(--text-main) !important;
    text-align: center;
    line-height: 1.2;
    letter-spacing: -0.2px;
}

/* Apply specific colors to specific category icons */
.premium-cat-item:nth-child(n) .premium-cat-icon i,
.premium-cat-item:nth-child(n) .premium-cat-icon svg { 
    color: #4f46e5 !important; 
}


/* === FLOATING GLASSMORPHISM PROMO BANNERS (Ultra-Compact & Premium) === */
.premium-promo-scroll {
  display: flex; 
  overflow-x: auto; 
  gap: 14px; 
  padding-bottom: 20px; /* Space for the floating shadow */
  scroll-snap-type: x mandatory; 
  scrollbar-width: none;
  margin-top: 0px; 
}
.premium-promo-scroll::-webkit-scrollbar { display: none; }

.premium-promo-card {
  flex: 0 0 85%; /* Shows a peek of the next card */
  scroll-snap-align: center;
  border-radius: 18px !important;
  padding: 16px 20px !important; /* Snug padding */
  color: white;
  position: relative;
  overflow: hidden;
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  align-items: flex-start; /* Aligns text and button neatly to the left */
  height: 120px; /* Strictly controlled compact height */
  border: none !important; /* Cleaner without the white border */
}

/* Vibrant, App-Like Gradients (Matches your screenshots) */
.bg-luxury-dark {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
  box-shadow: 0 10px 20px -6px rgba(37, 99, 235, 0.4) !important; 
}
.bg-luxury-bronze {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  box-shadow: 0 10px 20px -6px rgba(234, 88, 12, 0.4) !important;
}

/* Overrides the inline HTML styles to perfectly center the icon on the right edge */
.premium-promo-card i.position-absolute {
  font-size: 6.5rem !important; 
  right: -15px !important; 
  top: 50% !important; 
  transform: translateY(-50%) !important; /* Perfect vertical centering */
  opacity: 0.15 !important;
  line-height: 1 !important;
}

.premium-promo-content { 
  z-index: 2; 
  width: 100%;
}
.premium-promo-title { 
  font-size: 1.2rem !important; /* Clean, readable size */
  font-weight: 800 !important; 
  margin-bottom: 2px !important; 
  letter-spacing: -0.3px;
  text-shadow: none !important; /* Flat text is more modern */
}
.premium-promo-desc { 
  font-size: 0.8rem !important; 
  font-weight: 500 !important; 
  opacity: 0.9; 
  margin-bottom: 12px !important; /* Tighter gap above button */
  max-width: 70%; /* Prevents text from overlapping the background icon */
  line-height: 1.2;
}

.premium-promo-btn {
  background: #ffffff !important; 
  color: #2563eb !important; /* Brand blue text for high contrast */
  font-size: 0.75rem !important; 
  font-weight: 800 !important;
  padding: 8px 18px !important; /* Cute, compact pill shape */
  border-radius: 50px !important; 
  display: inline-block; 
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; 
  width: fit-content; 
  z-index: 2; 
  transition: transform 0.1s;
}
.bg-luxury-bronze .premium-promo-btn {
  color: #ea580c !important; /* Makes the orange card button text orange */
}

.premium-promo-btn:active { 
  transform: translateY(2px); 
  box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; 
}


/* === 3D LAUNDRY CARDS (Applied globally to all lists) === */
#laundryList .card, 
#popularLaundriesList .card, 
#search-cards-list .card {
    background: var(--bg-color) !important;
    border-radius: 28px !important;
    box-shadow: 7px 7px 15px var(--shadow-dark), -7px -7px 15px var(--shadow-light) !important;
    border: 2px solid rgba(255,255,255,0.6) !important;
    transition: all 0.15s ease;
}

#laundryList .card:active, 
#popularLaundriesList .card:active, 
#search-cards-list .card:active {
    transform: scale(0.98);
}

/* 3D Inner Avatar inside card */
#laundryList .flex-shrink-0 > .d-flex,
#popularLaundriesList .flex-shrink-0 > .d-flex,
#search-cards-list .flex-shrink-0 > .d-flex {
    background: var(--bg-color) !important;
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light) !important;
    border: none !important;
}

/* Recessed Price Pill */
#laundryList .card .d-flex[style*="background: #f8fafc"],
#popularLaundriesList .card .d-flex[style*="background: #f8fafc"],
#search-cards-list .card .d-flex[style*="background: #f8fafc"] {
    background: var(--bg-color) !important;
    box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light) !important;
    border: none !important;
}

/* 3D View Store Button */
#laundryList .card button,
#popularLaundriesList .card button,
#search-cards-list .card button {
    background: var(--bg-color) !important;
    color: var(--accent-blue) !important;
    box-shadow: 4px 4px 10px var(--shadow-dark), -4px -4px 10px var(--shadow-light) !important;
    border: 1px solid rgba(255,255,255,0.6) !important;
    transition: all 0.1s ease;
}

#laundryList .card button:active,
#popularLaundriesList .card button:active,
#search-cards-list .card button:active {
    box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -4px -4px 10px var(--shadow-light) !important;
}

/* === FLOATING BOTTOM NAV (CRED Style) === */
.bottom-nav {
  position: fixed; 
  bottom: 20px; 
  left: 50%; 
  transform: translateX(-50%);
  width: 90%; 
  max-width: 400px;
  background: var(--bg-color) !important; /* Matched to the 3D background */
  border-radius: 40px !important; 
  padding: 10px 10px !important;
  display: flex; 
  justify-content: space-around; 
  align-items: center;
  /* 3D Elevated Shadow */
  box-shadow: 10px 10px 30px var(--shadow-dark), -10px -10px 30px var(--shadow-light) !important;
  z-index: 1000; 
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
  border: 2px solid rgba(255,255,255,0.6) !important;
}
.bottom-nav.nav-hidden { 
  transform: translate(-50%, 150%); 
}
.nav-item {
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  text-decoration: none;
  color: #94a3b8 !important; 
  font-size: 0.7rem !important; 
  gap: 4px; 
  font-weight: 700 !important; 
  flex: 1; 
  transition: all 0.2s ease;
  padding: 10px 0;
  border-radius: 24px;
}
.nav-item i { 
  font-size: 1.4rem !important; 
  transition: all 0.2s ease;
}
/* The physical "pressed-down" look for the active tab */
.nav-item.active { 
  color: var(--accent-blue) !important; 
  background: var(--bg-color);
  box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
}
.nav-item.active i { 
  transform: translateY(-2px); 
  filter: drop-shadow(0 4px 6px rgba(79, 70, 229, 0.3)); 
}


/* === SEARCH OVERLAY === */
.search-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-color) !important; z-index: 2000;
    transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex; flex-direction: column;
}
.search-overlay.active { transform: translateY(0); }
.search-header { 
    background: rgba(240, 243, 248, 0.85) !important; 
    backdrop-filter: blur(15px);
    padding: 15px 20px; display: flex; align-items: center; gap: 15px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
}
.search-back-btn { border: none; background: transparent; font-size: 1.3rem; color: #0f172a; padding: 0; }
.real-search-input {
    border: none; 
    background: var(--bg-color) !important; 
    border-radius: 12px; padding: 12px 15px;
    width: 100%; font-weight: 600; font-size: 1rem; color: #0f172a; outline: none;
    /* Inset shadow */
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light) !important;
}
.real-search-input::placeholder { color: #94a3b8; font-weight: 500; }
.search-content { flex: 1; overflow-y: auto; padding: 20px; }
.rec-title { font-size: 0.85rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 15px; }

/* === AUTOCOMPLETE SUGGESTIONS === */
.suggestion-box {
    background: var(--bg-color) !important; 
    border-radius: 16px; padding: 5px; margin-bottom: 20px;
    box-shadow: 5px 5px 12px var(--shadow-dark), -5px -5px 12px var(--shadow-light) !important; 
    border: 1px solid rgba(255,255,255,0.4);
}
.suggestion-item {
    padding: 12px 15px; font-weight: 600; color: var(--text-main);
    border-bottom: 1px solid rgba(209, 217, 230, 0.5); cursor: pointer; display: flex; align-items: center; transition: 0.2s;
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:active { background: rgba(209, 217, 230, 0.3); }


/* === PUSH NOTIFICATION TOAST === */
.push-toast-container {
    position: fixed; top: -100px; left: 50%; transform: translateX(-50%); width: 90%; max-width: 400px;
    background: var(--bg-color) !important; border-radius: 16px; 
    box-shadow: 7px 7px 15px var(--shadow-dark), -7px -7px 15px var(--shadow-light) !important; 
    padding: 15px; display: flex; align-items: center; gap: 15px; z-index: 9999;
    transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); border-left: 5px solid #10b981;
}
.push-toast-container.show { top: 20px; }
.push-icon {
    width: 45px; height: 45px; background: var(--bg-color); color: #10b981; border-radius: 50%; 
    box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0;
}
.push-content { flex-grow: 1; }
.push-title { font-weight: 800; color: var(--text-main); font-size: 1rem; margin-bottom: 2px; }
.push-desc { font-size: 0.8rem; color: #64748b; margin: 0; }

/* === HOW IT WORKS TIMELINE === */
.hiw-wrapper {
    background: var(--bg-color) !important; border-radius: 20px; padding: 20px 15px; margin-top: 25px; 
    box-shadow: 7px 7px 15px var(--shadow-dark), -7px -7px 15px var(--shadow-light) !important; 
    position: relative;
    border: 2px solid rgba(255,255,255,0.5);
}
.hiw-header { text-align: center; margin-bottom: 20px; }
.hiw-header h6 { font-weight: 800; font-size: 1.1rem; margin: 0; color: var(--text-main); }
.hiw-header p { font-size: 0.8rem; color: #64748b; margin: 0; }
.hiw-container { display: flex; justify-content: space-between; position: relative; }
.hiw-path {
    position: absolute; top: 22px; left: 10%; right: 10%; height: 2px;
    background: repeating-linear-gradient(90deg, #d1d9e6, #d1d9e6 5px, transparent 5px, transparent 10px); z-index: 1;
}
.hiw-progress {
    position: absolute; top: 22px; left: 10%; height: 2px; background: var(--accent-blue); z-index: 1; width: 0%; animation: fillPath 6s infinite;
}
.hiw-step { display: flex; flex-direction: column; align-items: center; z-index: 2; width: 25%; }
.hiw-icon {
    width: 45px; height: 45px; border-radius: 50%; background: var(--bg-color); color: var(--accent-blue); 
    box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 8px; transition: 0.3s;
}
.hiw-text { font-size: 0.75rem; font-weight: 700; color: var(--text-main); text-align: center; line-height: 1.2; }

@keyframes fillPath {
    0% { width: 0%; opacity: 1; }
    25% { width: 25%; }
    50% { width: 50%; }
    75% { width: 80%; }
    90% { width: 80%; opacity: 1; }
    100% { width: 80%; opacity: 0; } 
}

/* === STICKY CART LOGIC === */
.sticky-cart {
    position: fixed; bottom: 0; left: 0; width: 100%;
    background: rgba(240, 243, 248, 0.95) !important; backdrop-filter: blur(15px);
    padding: 24px; box-shadow: 0 -10px 30px rgba(0,0,0,0.08);
    z-index: 1000; border-top-left-radius: 30px; border-top-right-radius: 30px;
    flex-direction: column; gap: 16px; display: none;
}
.sticky-cart.show { display: flex; animation: slideUp 0.3s ease-out;}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.btn-schedule {
    background: var(--bg-color) !important;
    color: var(--accent-blue) !important;
    border: none;
    width: 100%;
    padding: 18px;
    border-radius: 18px;
    font-weight: 800;
    font-size: 1.05rem;
    box-shadow: 7px 7px 15px var(--shadow-dark), -7px -7px 15px var(--shadow-light) !important;
    border: 2px solid rgba(255,255,255,0.4);
    transition: 0.1s;
}
.btn-schedule:active {
    box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -4px -4px 10px var(--shadow-light) !important;
    border-color: transparent;
}
.btn-change {
    text-align: center; color: var(--accent-blue); font-size: 0.9rem; cursor: pointer; font-weight: 800;
}

body.selection-mode .bottom-nav,
body.selection-mode .sticky-cta {
    display: none !important;
}

/* === 3D STICKY CTA (Marketing) === */
.sticky-cta {
  position: fixed;
  bottom: 20px;
  left: 50%;
  width: 90%;
  max-width: 400px;
  background: var(--bg-color) !important;
  padding: 16px 20px;
  border-radius: 24px;
  /* 3D Floating Shadow */
  box-shadow: 7px 7px 15px var(--shadow-dark), -7px -7px 15px var(--shadow-light) !important;
  border: 2px solid rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 999;
  /* Bouncy spring animation */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease-in-out;
  
  /* Hidden state (Pushed down and invisible) */
  transform: translate(-50%, 150%);
  opacity: 0;
  pointer-events: none;
}

/* Visible state (Triggered by JS on scroll) */
.sticky-cta.cta-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

/* 3D Push Button for the CTA */
.cta-btn-small {
  background: var(--bg-color) !important;
  color: var(--accent-blue) !important;
  border: 2px solid rgba(255,255,255,0.6) !important;
  padding: 10px 18px;
  border-radius: 20px;
  font-weight: 800;
  font-size: 0.85rem;
  /* Floating 3D shadow */
  box-shadow: 7px 7px 15px var(--shadow-dark), -7px -7px 15px var(--shadow-light) !important;
  transition: all 0.15s ease;
  white-space: nowrap;
  cursor: pointer;
}

/* Physical push-in effect when clicked */
.cta-btn-small:active {
  transform: scale(0.96);
  box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -4px -4px 10px var(--shadow-light) !important;
  border-color: transparent !important;
}

/* Ensure text inside fits the theme */
.sticky-cta .text-dark {
  color: var(--text-main) !important;
  letter-spacing: -0.2px;
}
.sticky-cta .text-muted {
  font-size: 0.75rem;
  font-weight: 600;
}

/* === SEARCH OVERLAY === */
.search-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: var(--bg-color) !important; z-index: 2000;
  transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex; flex-direction: column;
}
.search-overlay.active { transform: translateY(0); }

/* Neumorphic Header */
.search-header { 
  background: rgba(240, 243, 248, 0.85) !important; 
  backdrop-filter: blur(15px);
  padding: 15px 20px; display: flex; align-items: center; gap: 15px; 
  box-shadow: 0 10px 20px rgba(0,0,0,0.03); 
  z-index: 10;
}
.search-back-btn { border: none; background: transparent; font-size: 1.4rem; color: var(--text-main); padding: 0; }

/* 3D Recessed Input */
.real-search-input {
  border: none; 
  background: var(--bg-color) !important; 
  border-radius: 14px; padding: 14px 18px;
  width: 100%; font-weight: 700; font-size: 1rem; color: var(--text-main); outline: none;
  /* Inset shadow makes it look carved in */
  box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light) !important;
}
.real-search-input::placeholder { color: #94a3b8; font-weight: 600; }
.search-content { flex: 1; overflow-y: auto; padding: 20px; }
.rec-title { font-size: 0.85rem; font-weight: 800; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 18px; }

/* === MISSING: SEARCH BANNER === */
.search-banner {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
  border-radius: 20px; 
  padding: 20px; 
  color: white; 
  margin-bottom: 30px;
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  box-shadow: 0 10px 20px -5px rgba(14, 165, 233, 0.4);
}

/* === MISSING: SERVICES GRID & 3D CHIPS === */
.services-grid { 
  display: grid; 
  grid-template-columns: repeat(2, 1fr); 
  gap: 16px; 
  margin-bottom: 35px; 
}
.service-chip {
  background: var(--bg-color) !important; 
  border-radius: 18px; 
  padding: 16px; 
  display: flex; 
  align-items: center; 
  gap: 14px; 
  cursor: pointer; 
  transition: all 0.2s ease;
  /* 3D Extruded Button Look */
  box-shadow: 6px 6px 12px var(--shadow-dark), -6px -6px 12px var(--shadow-light) !important;
  border: 2px solid rgba(255,255,255,0.6);
}
.service-chip:active { 
  transform: scale(0.96); 
  /* 3D Pressed Look */
  box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light) !important;
  border-color: transparent;
}
.chip-icon { 
  width: 44px; 
  height: 44px; 
  background: var(--bg-color); 
  /* Recessed well for the icon */
  box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
  border-radius: 12px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 1.3rem; 
  color: var(--accent-blue);
}
/* Force specific colors for icons if needed */
.service-chip:nth-child(3) .chip-icon { color: #eab308; }
.service-chip:nth-child(4) .chip-icon { color: #22c55e; }

.chip-name { 
  font-weight: 800; 
  font-size: 0.95rem; 
  color: var(--text-main); 
  line-height: 1.2; 
}

/* === AUTOCOMPLETE SUGGESTIONS === */
.suggestion-box {
  background: var(--bg-color) !important; 
  border-radius: 18px; padding: 5px; margin-bottom: 20px;
  box-shadow: 6px 6px 15px var(--shadow-dark), -6px -6px 15px var(--shadow-light) !important; 
  border: 2px solid rgba(255,255,255,0.5);
}
.suggestion-item {
  padding: 14px 18px; font-weight: 700; color: var(--text-main); font-size: 0.95rem;
  border-bottom: 1px solid rgba(209, 217, 230, 0.5); cursor: pointer; display: flex; align-items: center; transition: 0.2s;
}
.suggestion-item:last-child { border-bottom: none; }
.suggestion-item:active { background: rgba(209, 217, 230, 0.3); }

/* Adds a 3D shadow to the white arrow button inside the blue banner */
.search-banner .rounded-circle {
  box-shadow: 4px 4px 10px rgba(0,0,0,0.15) !important;
  color: #0ea5e9 !important; /* Makes the arrow match the blue theme instead of red */
}

/* === 3D NEUMORPHIC MODAL (Address Selection) === */

/* The Modal Container */
#addressModal .modal-content {
  background: var(--bg-color) !important;
  border-radius: 28px !important;
  box-shadow: 10px 10px 40px rgba(0,0,0,0.15), inset 2px 2px 0 rgba(255,255,255,0.8) !important;
  border: 2px solid rgba(255,255,255,0.6) !important;
}

#addressModal h5 {
  color: var(--text-main) !important;
  font-size: 1.3rem !important;
  letter-spacing: -0.3px;
}

/* Saved Address 3D Cards (Overrides .bg-light) */
#addressModal .bg-light {
  background: var(--bg-color) !important;
  border-radius: 20px !important;
  box-shadow: 6px 6px 15px var(--shadow-dark), -6px -6px 15px var(--shadow-light) !important;
  border: 2px solid rgba(255,255,255,0.5) !important;
  transition: all 0.15s ease;
}

/* Physical push effect when selecting an address */
#addressModal .bg-light:active {
  transform: scale(0.97);
  box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -4px -4px 10px var(--shadow-light) !important;
  border-color: transparent !important;
}

/* Recessed Icon Well (Overrides .bg-white) */
#addressModal .bg-white.rounded-circle {
  background: var(--bg-color) !important;
  box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light) !important;
  color: var(--accent-blue) !important;
  border: none !important;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Typography inside the card */
#addressModal .text-dark { color: var(--text-main) !important; }
#addressModal .text-muted { color: var(--text-muted) !important; }

/* Edit Icon */
#addressModal .text-secondary {
  color: #64748b !important;
  padding: 8px;
  border-radius: 50%;
  transition: 0.2s;
}
#addressModal .text-secondary:active {
  background: rgba(209, 217, 230, 0.4);
}

/* 3D "Add New Address" Button */

#addressModal .btn-primary {
  background: var(--bg-color) !important;
  color: var(--accent-blue) !important;
  border: 2px solid rgba(255,255,255,0.6) !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  font-size: 1rem !important;
  /* Floating 3D shadow */
  box-shadow: 7px 7px 15px var(--shadow-dark), -7px -7px 15px var(--shadow-light) !important;
  transition: all 0.15s ease;
  padding: 14px !important;
  margin-top: 15px !important;
}

/* Physical push-in effect when clicked */
#addressModal .btn-primary:active {
  transform: scale(0.98);
  box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -4px -4px 10px var(--shadow-light) !important;
  border-color: transparent !important;
}

/* --- NEW: Search Filter Pills --- */
.search-filters {
  display: flex; gap: 8px; overflow-x: auto; padding: 12px 20px;
  background: var(--card); border-bottom: 1px solid #E2E8F0;
  scrollbar-width: none; position: sticky; top: 80px; z-index: 9;
}
.search-filters::-webkit-scrollbar { display: none; }
/* Default State (Popping Out) */
.filter-pill {
  flex: 0 0 auto;
  background: var(--bg-color) !important;
  color: var(--text-muted) !important;
  font-size: 0.85rem;
  font-weight: 800;
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
  /* 3D Floating Shadow */
  box-shadow: 5px 5px 12px var(--shadow-dark), -5px -5px 12px var(--shadow-light) !important;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

/* Physical Click Interaction */
.filter-pill:active {
  transform: scale(0.95);
  box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -4px -4px 10px var(--shadow-light) !important;
  border-color: transparent !important;
}

/* Active Filter State (Pressed In & Colored) */
.filter-pill.active {
  color: var(--accent-blue) !important;
  /* Recessed carved shadow */
  box-shadow: inset 4px 4px 10px var(--shadow-dark), inset -4px -4px 10px var(--shadow-light) !important;
  border-color: transparent !important;
}

/* Special styling for the 'Instant Only' toggle when active */
.filter-pill.instant-toggle.active {
  color: #ea580c !important; /* Premium deep orange to match the lightning bolt */
}

/* === FILTER PILL ICONS (Unified Premium Theme) === */
.filter-pill i {
  color: var(--accent-blue) !important; /* Unified Deep Indigo */
  font-size: 1.15rem;
  filter: drop-shadow(1px 1px 3px rgba(79, 70, 229, 0.3)); /* Soft glowing shadow */
  transition: all 0.2s ease;
  margin-right: 2px;
}

/* Make the lightning bolt premium orange to match the express theme */
.filter-pill.instant-toggle i {
  color: #ea580c !important;
  filter: drop-shadow(1px 1px 3px rgba(234, 88, 12, 0.3));
}

/* Subtle bounce effect on the icon when the pill is active */
.filter-pill.active i {
  transform: scale(1.15);
}