/* ==========================================================================
   Gozili Multi-Vertical Dynamic Theme Styles
   - Food: Red (Brand #810100)
   - Grocery: Green (#059669 / #10B981)
   - Cab: Yellow (#EAB308 / #CA8A04)
   - Service: Blue (#2563EB / #1D4ED8)
   ========================================================================== */
/* ── 1. GROCERY: FRESH GREEN THEME (#008000) ── */
[data-theme="grocery"],
[data-home-mode="grocery"],
body.theme--grocery,
.theme--grocery {
  --brand: #008000 !important;
  --brand-dark: #006600 !important;
  --brand-deep: #004d00 !important;
  --brand-muted: #009900 !important;
  --brand-light: #16a34a !important;
  --brand-soft: rgba(0, 128, 0, 0.14) !important;
  --brand-softer: rgba(0, 128, 0, 0.07) !important;
  --brand-rgb: 0, 128, 0 !important;

  --green: #008000 !important;
  --green-dark: #006600 !important;
  --green-muted: #009900 !important;
  --green-light: #16a34a !important;
  --green-shadow: rgba(0, 128, 0, 0.32) !important;
  --green-glow: rgba(0, 128, 0, 0.5) !important;

  --orange: #008000 !important;
  --orange-dark: #006600 !important;

  --shadow-hover: 0 8px 24px rgba(0, 128, 0, 0.24) !important;
  --shadow-float: 0 14px 34px rgba(0, 128, 0, 0.22) !important;
  --ui-ring: 0 0 0 3px rgba(0, 128, 0, 0.28) !important;
  --cat-brand: #008000 !important;
  --dl-primary: #008000 !important;
  --dl-primary-dark: #006600 !important;
  --dl-primary-light: #f0fdf4 !important;
}

/* Grocery Header / Hero & Page Chrome */
[data-theme="grocery"] .home-hero,
[data-theme="grocery"] .home-zone--cream,
[data-theme="grocery"] .page-top,
[data-home-mode="grocery"] .home-hero,
[data-home-mode="grocery"] .home-zone--cream,
[data-home-mode="grocery"] .page-top,
body.theme--grocery .home-hero,
body.theme--grocery .home-zone--cream,
body.theme--grocery .page-top {
  background:
    radial-gradient(120% 80% at 100% -10%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(90% 60% at 0% 20%, rgba(0, 0, 0, 0.15), transparent 50%),
    linear-gradient(180deg, #009900 0%, #008000 42%, #006600 100%) !important;
  box-shadow: 0 16px 36px rgba(0, 128, 0, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
}

[data-theme="grocery"] .home-mode-cta__btn,
[data-home-mode="grocery"] .home-mode-cta__btn {
  background: linear-gradient(180deg, #009900 0%, #008000 100%) !important;
  box-shadow: 0 10px 22px rgba(0, 128, 0, 0.28) !important;
}

/* Grocery Primary Buttons, Add buttons & CTAs */
[data-theme="grocery"] .btn-primary,
[data-home-mode="grocery"] .btn-primary,
body.theme--grocery .btn-primary,
[data-theme="grocery"] .bz-auth__cta,
[data-home-mode="grocery"] .bz-auth__cta,
[data-theme="grocery"] .btn-add,
[data-home-mode="grocery"] .btn-add,
[data-theme="grocery"] .cat-top__tab.is-active {
  background: linear-gradient(135deg, #009900 0%, #008000 46%, #006600 100%) !important;
  box-shadow: 0 6px 18px rgba(0, 128, 0, 0.28) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}

/* Grocery Category Rail Active Item - matches Food styling with clean white bg and green indicator */
[data-theme="grocery"] .cat-rail__item.is-active,
[data-theme="grocery"] .cat-rail__item.is-active:hover {
  background: #ffffff !important;
  color: #006600 !important;
  box-shadow: none !important;
}

[data-theme="grocery"] .cat-rail__item.is-active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: #008000 !important;
}

[data-theme="grocery"] .cat-rail__item.is-active .cat-rail__thumb {
  border-color: #008000 !important;
  box-shadow: 0 0 0 2px rgba(0, 128, 0, 0.20) !important;
}

[data-theme="grocery"] .cat-rail__item.is-active .cat-rail__label {
  color: #006600 !important;
  font-weight: 800 !important;
}

[data-theme="grocery"] .btn-add:hover,
[data-home-mode="grocery"] .btn-add:hover,
[data-theme="grocery"] .btn-primary:hover,
[data-home-mode="grocery"] .btn-primary:hover {
  box-shadow: 0 8px 22px rgba(0, 128, 0, 0.38) !important;
}

/* Grocery Floating Cart Dock */
[data-theme="grocery"] .cart-glass,
[data-home-mode="grocery"] .cart-glass,
body.theme--grocery .cart-glass {
  background: linear-gradient(180deg,
      rgba(0, 153, 0, 0.94) 0%,
      rgba(0, 128, 0, 0.92) 48%,
      rgba(0, 102, 0, 0.95) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 28px rgba(0, 128, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="grocery"] .cart-glass__btn,
[data-home-mode="grocery"] .cart-glass__btn {
  background: #FFFFFF !important;
  color: #004d00 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Grocery Accent Highlights & Badges */
[data-theme="grocery"] .home-hero__search-ico,
[data-home-mode="grocery"] .home-hero__search-ico,
[data-theme="grocery"] .home-hero__search-filter,
[data-home-mode="grocery"] .home-hero__search-filter,
[data-theme="grocery"] .section-link,
[data-home-mode="grocery"] .section-link,
[data-theme="grocery"] .deals-bar__tag,
[data-home-mode="grocery"] .deals-bar__tag {
  color: #006600 !important;
}

[data-theme="grocery"] .home-hero__prompt-em,
[data-home-mode="grocery"] .home-hero__prompt-em {
  color: #16a34a !important;
}

[data-theme="grocery"] .deals-bar,
[data-home-mode="grocery"] .deals-bar {
  border-left-color: #008000 !important;
}

[data-theme="grocery"] .deal-card__badge,
[data-home-mode="grocery"] .deal-card__badge {
  background: #008000 !important;
  color: #FFFFFF !important;
}

[data-theme="grocery"] .bottom-nav__item--active,
[data-home-mode="grocery"] .bottom-nav__item--active {
  color: #006600 !important;
}

[data-theme="grocery"] .bottom-nav__item--active svg,
[data-home-mode="grocery"] .bottom-nav__item--active svg {
  stroke: #006600 !important;
}

/* ── 2. CAB / RIDE: ENERGETIC YELLOW THEME ── */
[data-theme="cab"],
[data-home-mode="cab"],
body.theme--cab,
body[data-page="ride"],
.theme--cab {
  --brand: #EAB308 !important;
  --brand-dark: #CA8A04 !important;
  --brand-deep: #854D0E !important;
  --brand-muted: #FACC15 !important;
  --brand-light: #FDE047 !important;
  --brand-soft: rgba(234, 179, 8, 0.16) !important;
  --brand-softer: rgba(234, 179, 8, 0.08) !important;
  --brand-rgb: 234, 179, 8 !important;

  --green: #EAB308 !important;
  --green-dark: #CA8A04 !important;
  --green-muted: #FACC15 !important;
  --green-light: #FDE047 !important;
  --green-shadow: rgba(234, 179, 8, 0.35) !important;
  --green-glow: rgba(234, 179, 8, 0.5) !important;

  --orange: #EAB308 !important;
  --orange-dark: #CA8A04 !important;

  --ride-orange: #EAB308 !important;
  --shadow-hover: 0 8px 24px rgba(202, 138, 4, 0.28) !important;
  --shadow-float: 0 14px 34px rgba(202, 138, 4, 0.25) !important;
  --ui-ring: 0 0 0 3px rgba(234, 179, 8, 0.32) !important;
  --dl-primary: #CA8A04 !important;
  --dl-primary-dark: #A16207 !important;
  --dl-primary-light: #fefce8 !important;
}

/* Cab Header / Hero & Page Chrome: Rich warm taxi amber/gold so white text is crisp */
[data-theme="cab"] .home-hero,
[data-theme="cab"] .home-zone--cream,
[data-theme="cab"] .page-top,
[data-home-mode="cab"] .home-hero,
[data-home-mode="cab"] .home-zone--cream,
[data-home-mode="cab"] .page-top,
body.theme--cab .home-hero,
body.theme--cab .home-zone--cream,
body.theme--cab .page-top,
body[data-page="ride"] .home-hero,
body[data-page="ride"] .home-zone--cream,
body[data-page="ride"] .page-top {
  background:
    radial-gradient(120% 80% at 100% -10%, rgba(255, 255, 255, 0.22), transparent 55%),
    radial-gradient(90% 60% at 0% 20%, rgba(0, 0, 0, 0.18), transparent 50%),
    linear-gradient(180deg, #F59E0B 0%, #D97706 42%, #B45309 100%) !important;
  box-shadow: 0 16px 36px rgba(217, 119, 6, 0.30), inset 0 -1px 0 rgba(255, 255, 255, 0.12) !important;
}

[data-theme="cab"] .home-mode-cta__btn,
[data-home-mode="cab"] .home-mode-cta__btn,
body[data-page="ride"] .home-mode-cta__btn {
  background: linear-gradient(180deg, #FDE047 0%, #EAB308 100%) !important;
  color: #111827 !important;
  box-shadow: 0 10px 22px rgba(202, 138, 4, 0.32) !important;
}

/* Cab Buttons & CTAs: Bold dark text on bright yellow for maximum readability */
[data-theme="cab"] .btn-primary,
[data-home-mode="cab"] .btn-primary,
body.theme--cab .btn-primary,
body[data-page="ride"] .btn-primary,
[data-theme="cab"] .bz-auth__cta,
[data-home-mode="cab"] .bz-auth__cta,
body.theme--cab .bz-auth__cta,
body[data-page="ride"] .bz-auth__cta,
body[data-page="ride"] .rf-btn,
body[data-page="ride"] .rf-submit-btn,
body[data-page="ride"] .rf-book-btn,
body[data-page="ride"] .ride-book__submit,
body[data-page="ride"] .rf-cta {
  background: linear-gradient(135deg, #FDE047 0%, #FACC15 50%, #EAB308 100%) !important;
  box-shadow: 0 6px 18px rgba(234, 179, 8, 0.38) !important;
  color: #111827 !important;
  font-weight: 800 !important;
  border-color: transparent !important;
}

/* Cab Floating Cart Dock */
[data-theme="cab"] .cart-glass,
[data-home-mode="cab"] .cart-glass,
body.theme--cab .cart-glass,
body[data-page="ride"] .cart-glass {
  background: linear-gradient(180deg,
      rgba(253, 224, 71, 0.96) 0%,
      rgba(250, 204, 21, 0.94) 48%,
      rgba(234, 179, 8, 0.96) 100%) !important;
  color: #111827 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 10px 28px rgba(202, 138, 4, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="cab"] .cart-glass .cart-glass__label,
[data-theme="cab"] .cart-glass .cart-glass__sub,
[data-theme="cab"] .cart-glass .cart-glass__arrow,
body[data-page="ride"] .cart-glass .cart-glass__label,
body[data-page="ride"] .cart-glass .cart-glass__sub,
body[data-page="ride"] .cart-glass .cart-glass__arrow {
  color: #111827 !important;
}

[data-theme="cab"] .cart-glass__btn,
[data-home-mode="cab"] .cart-glass__btn,
body[data-page="ride"] .cart-glass__btn {
  background: #111827 !important;
  color: #FDE047 !important;
  font-weight: 800 !important;
}

[data-theme="cab"] .home-hero__search-ico,
[data-home-mode="cab"] .home-hero__search-ico,
[data-theme="cab"] .home-hero__search-filter,
[data-home-mode="cab"] .home-hero__search-filter,
body[data-page="ride"] .home-hero__search-ico,
body[data-page="ride"] .home-hero__search-filter {
  color: #CA8A04 !important;
}

[data-theme="cab"] .home-hero__prompt-em,
[data-home-mode="cab"] .home-hero__prompt-em,
body[data-page="ride"] .home-hero__prompt-em {
  color: #FEF08A !important;
}

/* Selected ride quotes on /ride.php */
body[data-page="ride"] .rf-quote--selected,
body[data-page="ride"] .rf-quote.is-active,
body[data-page="ride"] .quote-card.is-selected {
  border-color: #EAB308 !important;
  background: #FEFCE8 !important;
  box-shadow: 0 0 0 2px #EAB308, 0 8px 20px rgba(234, 179, 8, 0.22) !important;
}

body[data-page="ride"] .mode-nav__link.is-active,
body[data-page="ride"] .bottom-nav__item--active {
  color: #CA8A04 !important;
}

body[data-page="ride"] .mode-nav__link.is-active i,
body[data-page="ride"] .bottom-nav__item--active svg {
  color: #CA8A04 !important;
  stroke: #CA8A04 !important;
}

/* ── 3. SERVICE: ROYAL BLUE THEME ── */
[data-theme="service"],
[data-theme="services"],
[data-home-mode="services"],
[data-home-mode="service"],
body.theme--service,
body.theme--services,
body[data-page="home-service"],
.theme--service {
  --brand: #2563EB !important;
  --brand-dark: #1D4ED8 !important;
  --brand-deep: #1E3A8A !important;
  --brand-muted: #3B82F6 !important;
  --brand-light: #60A5FA !important;
  --brand-soft: rgba(37, 99, 235, 0.12) !important;
  --brand-softer: rgba(37, 99, 235, 0.06) !important;
  --brand-rgb: 37, 99, 235 !important;

  --green: #2563EB !important;
  --green-dark: #1D4ED8 !important;
  --green-muted: #3B82F6 !important;
  --green-light: #60A5FA !important;
  --green-shadow: rgba(37, 99, 235, 0.28) !important;
  --green-glow: rgba(37, 99, 235, 0.45) !important;

  --orange: #2563EB !important;
  --orange-dark: #1D4ED8 !important;

  --hs-green: #2563EB !important;
  --hs-green-dark: #1D4ED8 !important;
  --hs-orange: #2563EB !important;
  --hs-orange-soft: rgba(37, 99, 235, 0.12) !important;

  --shadow-hover: 0 8px 24px rgba(37, 99, 235, 0.24) !important;
  --shadow-float: 0 14px 34px rgba(37, 99, 235, 0.2) !important;
  --ui-ring: 0 0 0 3px rgba(37, 99, 235, 0.25) !important;
  --dl-primary: #2563EB !important;
  --dl-primary-dark: #1D4ED8 !important;
  --dl-primary-light: #eff6ff !important;
}

/* Service Header / Hero & Page Chrome */
[data-theme="service"] .home-hero,
[data-theme="service"] .home-zone--cream,
[data-theme="service"] .page-top,
[data-theme="services"] .home-hero,
[data-theme="services"] .home-zone--cream,
[data-theme="services"] .page-top,
[data-home-mode="service"] .home-hero,
[data-home-mode="service"] .home-zone--cream,
[data-home-mode="service"] .page-top,
[data-home-mode="services"] .home-hero,
[data-home-mode="services"] .home-zone--cream,
[data-home-mode="services"] .page-top,
body.theme--service .home-hero,
body.theme--service .home-zone--cream,
body.theme--service .page-top,
body.theme--services .home-hero,
body.theme--services .home-zone--cream,
body.theme--services .page-top,
body[data-page="home-service"] .home-hero,
body[data-page="home-service"] .home-zone--cream,
body[data-page="home-service"] .page-top {
  background:
    radial-gradient(120% 80% at 100% -10%, rgba(255, 255, 255, 0.16), transparent 55%),
    radial-gradient(90% 60% at 0% 20%, rgba(0, 0, 0, 0.15), transparent 50%),
    linear-gradient(180deg, #3B82F6 0%, #2563EB 42%, #1D4ED8 100%) !important;
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.28), inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}

[data-theme="service"] .home-mode-cta__btn,
[data-theme="services"] .home-mode-cta__btn,
[data-home-mode="services"] .home-mode-cta__btn,
body[data-page="home-service"] .home-mode-cta__btn {
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%) !important;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28) !important;
}

/* Service Buttons & CTAs */
[data-theme="service"] .btn-primary,
[data-theme="services"] .btn-primary,
[data-home-mode="services"] .btn-primary,
body.theme--service .btn-primary,
body[data-page="home-service"] .btn-primary,
[data-theme="service"] .bz-auth__cta,
[data-theme="services"] .bz-auth__cta,
[data-home-mode="services"] .bz-auth__cta,
body.theme--service .bz-auth__cta,
body[data-page="home-service"] .bz-auth__cta,
body[data-page="home-service"] .hs-book-btn,
body[data-page="home-service"] .hs-cta-btn,
.hs-uc__spot-cta {
  background: linear-gradient(135deg, #3B82F6 0%, #2563EB 46%, #1D4ED8 100%) !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.28) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}

/* Service Floating Cart Dock */
[data-theme="service"] .cart-glass,
[data-theme="services"] .cart-glass,
[data-home-mode="services"] .cart-glass,
[data-home-mode="service"] .cart-glass,
body.theme--service .cart-glass,
body.theme--services .cart-glass,
body[data-page="home-service"] .cart-glass {
  background: linear-gradient(180deg,
      rgba(59, 130, 246, 0.94) 0%,
      rgba(37, 99, 235, 0.90) 48%,
      rgba(29, 78, 216, 0.94) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 28px rgba(37, 99, 235, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="service"] .cart-glass__btn,
[data-theme="services"] .cart-glass__btn,
[data-home-mode="services"] .cart-glass__btn,
body[data-page="home-service"] .cart-glass__btn {
  background: #FFFFFF !important;
  color: #1D4ED8 !important;
  font-weight: 800 !important;
}

[data-theme="service"] .home-hero__search-ico,
[data-theme="services"] .home-hero__search-ico,
[data-home-mode="services"] .home-hero__search-ico,
[data-theme="service"] .home-hero__search-filter,
[data-theme="services"] .home-hero__search-filter,
[data-home-mode="services"] .home-hero__search-filter,
body[data-page="home-service"] .home-hero__search-ico,
body[data-page="home-service"] .home-hero__search-filter {
  color: #2563EB !important;
}

[data-theme="service"] .home-hero__prompt-em,
[data-theme="services"] .home-hero__prompt-em,
[data-home-mode="services"] .home-hero__prompt-em,
body[data-page="home-service"] .home-hero__prompt-em {
  color: #93C5FD !important;
}

body[data-page="home-service"] .mode-nav__link.is-active,
body[data-page="home-service"] .bottom-nav__item--active,
[data-theme="service"] .bottom-nav__item--active,
[data-home-mode="services"] .bottom-nav__item--active {
  color: #2563EB !important;
}

body[data-page="home-service"] .mode-nav__link.is-active i,
body[data-page="home-service"] .bottom-nav__item--active svg,
[data-theme="service"] .bottom-nav__item--active svg,
[data-home-mode="services"] .bottom-nav__item--active svg {
  color: #2563EB !important;
  stroke: #2563EB !important;
}

/* ── 4. CRYSTALIX TABS: ALL TABS MATCH THE ACTIVE SECTION'S COLOR ──
   - Food open: All tabs Red, active Food tab is light cream/red
   - Grocery open: All tabs Green, active Grocery tab is light cream/green
   - Cab open: All tabs Yellow, active Cab tab is light cream/yellow
   - Services open: All tabs Blue, active Services tab is light cream/blue
   ========================================================================== */

/* Base crystalix tabs */
.crystalix__tab {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), height 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease, box-shadow 0.3s ease !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   1. FOOD SECTION ACTIVE: ALL TABS RED
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="food"] .crystalix__tab,
[data-home-mode="food"] .crystalix__tab,
body:not([data-theme="grocery"]):not([data-theme="cab"]):not([data-theme="service"]):not([data-theme="services"]):not([data-home-mode="grocery"]):not([data-home-mode="cab"]):not([data-home-mode="services"]) .crystalix__tab {
  background: linear-gradient(180deg, #9e1614 0%, #810100 48%, #5c0000 100%) !important;
  --crystalix-ring: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 50%, transparent 100%) !important;
  color: #FFFFFF !important;
}

[data-theme="food"] .crystalix__tab .crystalix__label,
[data-home-mode="food"] .crystalix__tab .crystalix__label,
body:not([data-theme="grocery"]):not([data-theme="cab"]):not([data-theme="service"]):not([data-theme="services"]):not([data-home-mode="grocery"]):not([data-home-mode="cab"]):not([data-home-mode="services"]) .crystalix__tab .crystalix__label {
  color: #FFFFFF !important;
}

/* Active Food Tab */
[data-theme="food"] .crystalix__tab.is-active,
[data-home-mode="food"] .crystalix__tab.is-active,
body:not([data-theme="grocery"]):not([data-theme="cab"]):not([data-theme="service"]):not([data-theme="services"]):not([data-home-mode="grocery"]):not([data-home-mode="cab"]):not([data-home-mode="services"]) .crystalix__tab.is-active {
  --crystalix-ring: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(129, 1, 0, 0.28) 30%, transparent 100%) !important;
  background: linear-gradient(180deg, #FFF5F5 0%, #FEE2E2 42%, #FECACA 100%) !important;
  color: #810100 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 -4px 18px rgba(129, 1, 0, 0.20) !important;
}

[data-theme="food"] .crystalix__tab.is-active .crystalix__label,
[data-home-mode="food"] .crystalix__tab.is-active .crystalix__label,
body:not([data-theme="grocery"]):not([data-theme="cab"]):not([data-theme="service"]):not([data-theme="services"]):not([data-home-mode="grocery"]):not([data-home-mode="cab"]):not([data-home-mode="services"]) .crystalix__tab.is-active .crystalix__label {
  color: #810100 !important;
  font-weight: 800 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   2. GROCERY SECTION ACTIVE: ALL TABS GREEN (#008000)
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="grocery"] .crystalix__tab,
[data-home-mode="grocery"] .crystalix__tab,
body.theme--grocery .crystalix__tab {
  background: linear-gradient(180deg, #009900 0%, #008000 48%, #006600 100%) !important;
  --crystalix-ring: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 30%, transparent 50%, transparent 100%) !important;
  color: #FFFFFF !important;
}

[data-theme="grocery"] .crystalix__tab .crystalix__label,
[data-home-mode="grocery"] .crystalix__tab .crystalix__label,
body.theme--grocery .crystalix__tab .crystalix__label {
  color: #FFFFFF !important;
}

/* Active Grocery Tab */
[data-theme="grocery"] .crystalix__tab.is-active,
[data-home-mode="grocery"] .crystalix__tab.is-active,
body.theme--grocery .crystalix__tab.is-active {
  --crystalix-ring: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(0, 128, 0, 0.35) 30%, transparent 100%) !important;
  background: linear-gradient(180deg, #F0FDF4 0%, #DCFCE7 42%, #BBF7D0 100%) !important;
  color: #004d00 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 -4px 18px rgba(0, 128, 0, 0.25) !important;
}

[data-theme="grocery"] .crystalix__tab.is-active .crystalix__label,
[data-home-mode="grocery"] .crystalix__tab.is-active .crystalix__label,
body.theme--grocery .crystalix__tab.is-active .crystalix__label {
  color: #004d00 !important;
  font-weight: 800 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   3. CAB SECTION ACTIVE: ALL TABS YELLOW
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="cab"] .crystalix__tab,
[data-home-mode="cab"] .crystalix__tab,
body.theme--cab .crystalix__tab,
body[data-page="ride"] .crystalix__tab {
  background: linear-gradient(180deg, #FDE047 0%, #EAB308 48%, #CA8A04 100%) !important;
  --crystalix-ring: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.2) 30%, transparent 50%, transparent 100%) !important;
  color: #111827 !important;
}

[data-theme="cab"] .crystalix__tab .crystalix__label,
[data-home-mode="cab"] .crystalix__tab .crystalix__label,
body.theme--cab .crystalix__tab .crystalix__label,
body[data-page="ride"] .crystalix__tab .crystalix__label {
  color: #111827 !important;
  font-weight: 800 !important;
}

/* Active Cab Tab */
[data-theme="cab"] .crystalix__tab.is-active,
[data-home-mode="cab"] .crystalix__tab.is-active,
body.theme--cab .crystalix__tab.is-active,
body[data-page="ride"] .crystalix__tab.is-active {
  --crystalix-ring: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(202, 138, 4, 0.45) 30%, transparent 100%) !important;
  background: linear-gradient(180deg, #FEFCE8 0%, #FEF08A 42%, #FDE047 100%) !important;
  color: #854D0E !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 -4px 18px rgba(234, 179, 8, 0.32) !important;
}

[data-theme="cab"] .crystalix__tab.is-active .crystalix__label,
[data-home-mode="cab"] .crystalix__tab.is-active .crystalix__label,
body.theme--cab .crystalix__tab.is-active .crystalix__label,
body[data-page="ride"] .crystalix__tab.is-active .crystalix__label {
  color: #854D0E !important;
  font-weight: 800 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   4. SERVICES SECTION ACTIVE: ALL TABS BLUE
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="service"] .crystalix__tab,
[data-theme="services"] .crystalix__tab,
[data-home-mode="service"] .crystalix__tab,
[data-home-mode="services"] .crystalix__tab,
body.theme--service .crystalix__tab,
body.theme--services .crystalix__tab,
body[data-page="home-service"] .crystalix__tab {
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 48%, #1D4ED8 100%) !important;
  --crystalix-ring: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.15) 30%, transparent 50%, transparent 100%) !important;
  color: #FFFFFF !important;
}

[data-theme="service"] .crystalix__tab .crystalix__label,
[data-theme="services"] .crystalix__tab .crystalix__label,
[data-home-mode="service"] .crystalix__tab .crystalix__label,
[data-home-mode="services"] .crystalix__tab .crystalix__label,
body.theme--service .crystalix__tab .crystalix__label,
body.theme--services .crystalix__tab .crystalix__label,
body[data-page="home-service"] .crystalix__tab .crystalix__label {
  color: #FFFFFF !important;
}

/* Active Services Tab */
[data-theme="service"] .crystalix__tab.is-active,
[data-theme="services"] .crystalix__tab.is-active,
[data-home-mode="service"] .crystalix__tab.is-active,
[data-home-mode="services"] .crystalix__tab.is-active,
body.theme--service .crystalix__tab.is-active,
body.theme--services .crystalix__tab.is-active,
body[data-page="home-service"] .crystalix__tab.is-active {
  --crystalix-ring: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(37, 99, 235, 0.35) 30%, transparent 100%) !important;
  background: linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 42%, #BFDBFE 100%) !important;
  color: #1E40AF !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 -4px 18px rgba(37, 99, 235, 0.22) !important;
}

[data-theme="service"] .crystalix__tab.is-active .crystalix__label,
[data-theme="services"] .crystalix__tab.is-active .crystalix__label,
[data-home-mode="service"] .crystalix__tab.is-active .crystalix__label,
[data-home-mode="services"] .crystalix__tab.is-active .crystalix__label,
body.theme--service .crystalix__tab.is-active .crystalix__label,
body.theme--services .crystalix__tab.is-active .crystalix__label,
body[data-page="home-service"] .crystalix__tab.is-active .crystalix__label {
  color: #1E40AF !important;
  font-weight: 800 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   5. SEARCH PAGE: DYNAMIC VERTICAL THEME (GROCERY = GREEN, FOOD = RED)
   ───────────────────────────────────────────────────────────────────────── */

.search-chip,
.search-cat,
.page-search__go,
.page-search__shell,
.page-search__icon,
.cart-glass,
.section-head .section-title::before {
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

/* 5.1 GROCERY SEARCH THEME (GREEN) */
[data-theme="grocery"] .search-page-top,
[data-home-mode="grocery"] .search-page-top {
  border-bottom-color: rgba(0, 128, 0, 0.15) !important;
}

[data-theme="grocery"] .page-search__shell,
[data-home-mode="grocery"] .page-search__shell {
  border: 1.5px solid rgba(0, 128, 0, 0.32) !important;
}

[data-theme="grocery"] .page-search__shell:focus-within,
[data-home-mode="grocery"] .page-search__shell:focus-within {
  border-color: #008000 !important;
  box-shadow: 0 0 0 3px rgba(0, 128, 0, 0.18) !important;
}

[data-theme="grocery"] .page-search__icon,
[data-home-mode="grocery"] .page-search__icon {
  color: #006600 !important;
}

[data-theme="grocery"] .page-search__go,
[data-home-mode="grocery"] .page-search__go {
  background: linear-gradient(135deg, #009900 0%, #008000 50%, #006600 100%) !important;
  box-shadow: 0 4px 14px rgba(0, 128, 0, 0.35) !important;
  color: #FFFFFF !important;
}

[data-theme="grocery"] .search-chip.is-active,
[data-home-mode="grocery"] .search-chip.is-active {
  background: linear-gradient(135deg, #009900 0%, #008000 50%, #006600 100%) !important;
  border-color: #006600 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(0, 128, 0, 0.28) !important;
}

[data-theme="grocery"] .search-cat.is-active,
[data-home-mode="grocery"] .search-cat.is-active {
  background: rgba(0, 128, 0, 0.14) !important;
  color: #004d00 !important;
  border: 1px solid rgba(0, 128, 0, 0.28) !important;
}

[data-theme="grocery"] .section-head .section-title::before,
[data-theme="grocery"] .section>.section-title:first-child::before,
[data-theme="grocery"] #searchResultsTitle::before,
[data-home-mode="grocery"] .section-head .section-title::before,
[data-home-mode="grocery"] .section>.section-title:first-child::before,
[data-home-mode="grocery"] #searchResultsTitle::before {
  background: linear-gradient(180deg, #009900 0%, #008000 45%, #006600 100%) !important;
}

[data-theme="grocery"] .search-page-suggest a,
[data-theme="grocery"] #searchSuggestLink,
[data-home-mode="grocery"] .search-page-suggest a,
[data-home-mode="grocery"] #searchSuggestLink {
  color: #006600 !important;
}

[data-theme="grocery"] .search-recent__head span,
[data-home-mode="grocery"] .search-recent__head span {
  color: #004d00 !important;
}

[data-theme="grocery"] .search-clear-btn,
[data-home-mode="grocery"] .search-clear-btn {
  background: #008000 !important;
  color: #FFFFFF !important;
}

[data-theme="grocery"] .product-card__add .btn-add--io,
[data-home-mode="grocery"] .product-card__add .btn-add--io {
  background: linear-gradient(135deg, #009900 0%, #008000 46%, #006600 100%) !important;
  box-shadow: 0 4px 12px rgba(0, 128, 0, 0.25) !important;
  color: #FFFFFF !important;
}

[data-theme="grocery"] .product-card__add .btn-add--io.btn-add--in-cart,
[data-home-mode="grocery"] .product-card__add .btn-add--io.btn-add--in-cart {
  background: #004d00 !important;
}

[data-theme="grocery"] .product-card__add .btn-add--io .btn-add__icon,
[data-home-mode="grocery"] .product-card__add .btn-add--io .btn-add__icon {
  color: #006600 !important;
}

[data-theme="grocery"] .product-card__add .btn-add--io .btn-add__icon .icon,
[data-theme="grocery"] .product-card__add .btn-add--io .btn-add__icon .fi,
[data-home-mode="grocery"] .product-card__add .btn-add--io .btn-add__icon .icon,
[data-home-mode="grocery"] .product-card__add .btn-add--io .btn-add__icon .fi {
  color: #006600 !important;
}

[data-theme="grocery"] .cart-glass .cart-glass__arrow,
[data-home-mode="grocery"] .cart-glass .cart-glass__arrow {
  color: #004d00 !important;
}

[data-theme="grocery"] .gozili-nav-bar.is-on::after,
[data-home-mode="grocery"] .gozili-nav-bar.is-on::after {
  background: #008000 !important;
}

/* 5.2 FOOD SEARCH THEME (RED) */
[data-theme="food"] .page-search__shell,
[data-home-mode="food"] .page-search__shell {
  border: 1.5px solid rgba(129, 1, 0, 0.16) !important;
}

[data-theme="food"] .page-search__shell:focus-within,
[data-home-mode="food"] .page-search__shell:focus-within {
  border-color: #810100 !important;
  box-shadow: 0 0 0 3px rgba(129, 1, 0, 0.12) !important;
}

[data-theme="food"] .page-search__icon,
[data-home-mode="food"] .page-search__icon {
  color: #810100 !important;
}

[data-theme="food"] .page-search__go,
[data-home-mode="food"] .page-search__go {
  background: linear-gradient(135deg, #9e1614 0%, #810100 50%, #5c0000 100%) !important;
  box-shadow: 0 4px 14px rgba(129, 1, 0, 0.32) !important;
  color: #FFFFFF !important;
}

[data-theme="food"] .search-chip.is-active,
[data-home-mode="food"] .search-chip.is-active {
  background: linear-gradient(135deg, #9e1614 0%, #810100 50%, #5c0000 100%) !important;
  border-color: #810100 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(129, 1, 0, 0.25) !important;
}

[data-theme="food"] .search-cat.is-active,
[data-home-mode="food"] .search-cat.is-active {
  background: rgba(129, 1, 0, 0.10) !important;
  color: #810100 !important;
  border: 1px solid rgba(129, 1, 0, 0.20) !important;
}

[data-theme="food"] .section-head .section-title::before,
[data-theme="food"] .section>.section-title:first-child::before,
[data-theme="food"] #searchResultsTitle::before,
[data-home-mode="food"] .section-head .section-title::before,
[data-home-mode="food"] .section>.section-title:first-child::before,
[data-home-mode="food"] #searchResultsTitle::before {
  background: linear-gradient(180deg, #9e1614 0%, #810100 50%, #5c0000 100%) !important;
}

[data-theme="food"] .search-page-suggest a,
[data-theme="food"] #searchSuggestLink,
[data-home-mode="food"] .search-page-suggest a,
[data-home-mode="food"] #searchSuggestLink {
  color: #810100 !important;
}

[data-theme="food"] .product-card__add .btn-add--io,
[data-home-mode="food"] .product-card__add .btn-add--io {
  background: linear-gradient(135deg, #9e1614 0%, #810100 50%, #5c0000 100%) !important;
  color: #FFFFFF !important;
}

[data-theme="food"] .product-card__add .btn-add--io.btn-add--in-cart,
[data-home-mode="food"] .product-card__add .btn-add--io.btn-add--in-cart {
  background: #5c0000 !important;
}

[data-theme="food"] .product-card__add .btn-add--io .btn-add__icon,
[data-home-mode="food"] .product-card__add .btn-add--io .btn-add__icon {
  color: #810100 !important;
}

[data-theme="food"] .product-card__add .btn-add--io .btn-add__icon .icon,
[data-theme="food"] .product-card__add .btn-add--io .btn-add__icon .fi,
[data-home-mode="food"] .product-card__add .btn-add--io .btn-add__icon .icon,
[data-home-mode="food"] .product-card__add .btn-add--io .btn-add__icon .fi {
  color: #810100 !important;
}

[data-theme="food"] .cart-glass,
[data-home-mode="food"] .cart-glass {
  background: linear-gradient(180deg,
      rgba(158, 22, 20, 0.94) 0%,
      rgba(129, 1, 0, 0.92) 48%,
      rgba(92, 0, 0, 0.95) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 28px rgba(129, 1, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

[data-theme="food"] .cart-glass .cart-glass__arrow,
[data-home-mode="food"] .cart-glass .cart-glass__arrow {
  color: #810100 !important;
}

[data-theme="food"] .gozili-nav-bar.is-on::after,
[data-home-mode="food"] .gozili-nav-bar.is-on::after {
  background: #810100 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   6. CART & CHECKOUT PAGES: DYNAMIC VERTICAL THEME (GROCERY = GREEN, FOOD = RED)
   ───────────────────────────────────────────────────────────────────────── */

/* 6.1 GROCERY BASKET & CHECKOUT (GREEN) */
[data-theme="grocery"] .cart-cta,
[data-home-mode="grocery"] .cart-cta,
[data-theme="grocery"] .btn-checkout,
[data-home-mode="grocery"] .btn-checkout,
[data-theme="grocery"] .empty-cart__cta,
[data-home-mode="grocery"] .empty-cart__cta {
  background: linear-gradient(135deg, #009900 0%, #008000 46%, #006600 100%) !important;
  box-shadow: 0 10px 24px rgba(0, 128, 0, 0.32) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}

[data-theme="grocery"] .bz-auth__cta--io .bz-auth__cta-icon svg,
[data-home-mode="grocery"] .bz-auth__cta--io .bz-auth__cta-icon svg {
  color: #004d00 !important;
  fill: #004d00 !important;
}

[data-theme="grocery"] .qty-control,
[data-home-mode="grocery"] .qty-control {
  background: rgba(0, 128, 0, 0.12) !important;
  border: 1px solid rgba(0, 128, 0, 0.20) !important;
}

[data-theme="grocery"] .qty-control button,
[data-home-mode="grocery"] .qty-control button {
  color: #004d00 !important;
}

[data-theme="grocery"] .qty-control span,
[data-home-mode="grocery"] .qty-control span {
  color: #004d00 !important;
  font-weight: 800 !important;
}

[data-theme="grocery"] .cart-item__price,
[data-home-mode="grocery"] .cart-item__price,
[data-theme="grocery"] .summary-total span:last-child,
[data-home-mode="grocery"] .summary-total span:last-child,
[data-theme="grocery"] .checkout-total-val,
[data-home-mode="grocery"] .checkout-total-val,
[data-theme="grocery"] .checkout-summary__total-val,
[data-home-mode="grocery"] .checkout-summary__total-val {
  color: #004d00 !important;
}

[data-theme="grocery"] .secure-note svg,
[data-home-mode="grocery"] .secure-note svg {
  color: #006600 !important;
}

[data-theme="grocery"] .pairing-card__price,
[data-home-mode="grocery"] .pairing-card__price {
  color: #004d00 !important;
}

[data-theme="grocery"] .checkout-badge--active,
[data-home-mode="grocery"] .checkout-badge--active {
  background: #008000 !important;
  color: #FFFFFF !important;
}

/* Floating Cart Dock explicit theme attribute */
.cart-glass[data-cart-theme="grocery"] {
  background: linear-gradient(180deg,
      rgba(0, 153, 0, 0.94) 0%,
      rgba(0, 128, 0, 0.92) 48%,
      rgba(0, 102, 0, 0.95) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 10px 28px rgba(0, 128, 0, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

.cart-glass[data-cart-theme="grocery"] .cart-glass__arrow {
  color: #004d00 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   6.2 CHECKOUT LIVE LOCATION BUTTON
   ───────────────────────────────────────────────────────────────────────── */
.btn-location-live {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #810100 !important;
  background: #FFF1F2 !important;
  border: 1.5px solid #FECDD3 !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 6px rgba(129, 1, 0, 0.08) !important;
  line-height: 1 !important;
}

.btn-location-live:hover {
  background: #FFE4E6 !important;
  border-color: #810100 !important;
  color: #810100 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(129, 1, 0, 0.16) !important;
}

.btn-location-live .live-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #810100 !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  position: relative !important;
  box-shadow: 0 0 0 0 rgba(129, 1, 0, 0.7) !important;
  animation: liveLocPulseFood 1.8s infinite cubic-bezier(0.45, 0, 0.2, 1) !important;
}

.btn-location-live i {
  font-size: 13px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

.btn-location-live.is-locating {
  opacity: 0.85 !important;
  cursor: wait !important;
  pointer-events: none !important;
}

.btn-location-live.is-locating i {
  animation: liveLocSpin 0.9s linear infinite !important;
}

@keyframes liveLocSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes liveLocPulseFood {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(129, 1, 0, 0.7);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 7px rgba(129, 1, 0, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(129, 1, 0, 0);
  }
}

@keyframes liveLocPulseGrocery {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.75);
  }

  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 7px rgba(22, 163, 74, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
  }
}

/* Grocery Theme Variant */
[data-theme="grocery"] .btn-location-live,
[data-cart-theme="grocery"] .btn-location-live,
body.theme--grocery .btn-location-live {
  background: #F0FDF4 !important;
  color: #15803D !important;
  border-color: #86EFAC !important;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.12) !important;
}

[data-theme="grocery"] .btn-location-live:hover,
[data-cart-theme="grocery"] .btn-location-live:hover,
body.theme--grocery .btn-location-live:hover {
  background: #DCFCE7 !important;
  border-color: #22C55E !important;
  color: #166534 !important;
  box-shadow: 0 4px 10px rgba(34, 197, 94, 0.22) !important;
}

[data-theme="grocery"] .btn-location-live .live-dot,
[data-cart-theme="grocery"] .btn-location-live .live-dot,
body.theme--grocery .btn-location-live .live-dot {
  background: #16A34A !important;
  animation: liveLocPulseGrocery 1.8s infinite cubic-bezier(0.45, 0, 0.2, 1) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   6.3 RIDE / CAB PAGE OVERFLOW SAFETY
   ───────────────────────────────────────────────────────────────────────── */
body[data-page="ride"] .app-main:has(.rf[data-step="search"]) {
  overflow-x: hidden !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   7. 3D LIQUID GLASS CAPSULE BOTTOM NAVIGATION BAR
   Ultra-realistic VisionOS liquid glass pill matching user reference:
   - Full capsule stadium shape (border-radius: 9999px)
   - Luminous glowing glass rim with specular highlights
   - Crystal clear refraction body with ambient vertical color pool
   - Soft diffuse drop shadow with theme underglow
   - Top lens glare (::before) & bottom bevel reflection (::after)
   ───────────────────────────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed !important;
  z-index: 150 !important;
  bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
  left: 14px !important;
  right: 14px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: calc(100% - 28px) !important;
  max-width: calc(var(--max-width, 430px) - 28px) !important;
  height: 58px !important;
  border-radius: 9999px !important;
  border: 1.5px solid var(--nav-border, rgba(239, 68, 68, 0.35)) !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  isolation: isolate !important;

  /* 3D Liquid glass: clearly visible light pastel background matching active vertical/tab */
  background: var(--nav-bg, linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(254, 215, 215, 0.94) 100%)) !important;

  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;

  /* Natural neutral floating drop shadow + inner specular bevels (ZERO outer color glow) */
  box-shadow:
    0 10px 24px -4px rgba(17, 24, 39, 0.10),
    0 4px 8px -2px rgba(17, 24, 39, 0.05),
    inset 0 1.5px 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 2px 0 rgba(0, 0, 0, 0.04),
    inset 1px 0 2px 0 rgba(255, 255, 255, 0.5),
    inset -1px 0 2px 0 rgba(255, 255, 255, 0.5) !important;

  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease !important;
}

/* 3D Top Lens Glare Reflection */
.bottom-nav::before {
  content: "" !important;
  position: absolute !important;
  top: 1px !important;
  left: 24px !important;
  right: 24px !important;
  height: 38% !important;
  border-radius: 9999px 9999px 50px 50px !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.65) 0%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.55 !important;
}

/* 3D Bottom Bevel Specular Reflection Edge */
.bottom-nav::after {
  content: "" !important;
  position: absolute !important;
  bottom: 2px !important;
  left: 36px !important;
  right: 36px !important;
  height: 1.5px !important;
  border-radius: 9999px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.75) 50%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.8 !important;
}

.bottom-nav__inner {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  height: 100% !important;
  padding: 0 4px !important;
  min-height: 56px !important;
}

.bottom-nav__item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 4px 2px !important;
  text-decoration: none !important;
  border-radius: 9999px !important;
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.4, 1), opacity 0.15s ease !important;
}

.bottom-nav__item:active {
  transform: scale(0.92) !important;
}

.bottom-nav__icon-wrap {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 28px !important;
  border-radius: 9999px !important;
  background: transparent !important;
  color: #4B5563 !important;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.4, 1) !important;
}

.bottom-nav__icon-wrap svg,
.bottom-nav__icon-wrap .icon,
.bottom-nav__icon-wrap .fi {
  width: 20px !important;
  height: 20px !important;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.4, 1), color 0.18s ease !important;
}

.bottom-nav__label {
  font-size: 10.5px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  color: #4B5563 !important;
  text-align: center !important;
  letter-spacing: -0.01em !important;
  transition: color 0.18s ease, font-weight 0.18s ease !important;
}

/* Active tab pill & vibrant icon glow */
.bottom-nav__item--active .bottom-nav__icon-wrap {
  background: var(--nav-active-pill, rgba(129, 1, 0, 0.14)) !important;
  box-shadow: inset 0 1px 1.5px rgba(255, 255, 255, 0.6) !important;
}

.bottom-nav__item--active .bottom-nav__icon-wrap svg,
.bottom-nav__item--active .bottom-nav__icon-wrap .icon,
.bottom-nav__item--active .bottom-nav__icon-wrap .fi {
  color: var(--nav-active-text, #810100) !important;
  transform: scale(1.08) !important;
}

.bottom-nav__item--active .bottom-nav__label {
  color: var(--nav-active-text, #810100) !important;
  font-weight: 750 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   7.1 SERVICES VERTICAL TAB (Fresh Light Ice/Sky Blue Glass)
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="service"],
[data-theme="services"],
[data-home-mode="service"],
[data-home-mode="services"],
body[data-page="home-service"],
body[data-page="home-services"],
body.theme--service {
  --nav-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(224, 242, 254, 0.95) 100%) !important;
  --nav-border: rgba(14, 165, 233, 0.35) !important;
  --nav-active-pill: rgba(2, 132, 199, 0.14) !important;
  --nav-active-text: #0284C7 !important;
}

[data-theme="service"] .bottom-nav,
[data-theme="services"] .bottom-nav,
[data-home-mode="service"] .bottom-nav,
[data-home-mode="services"] .bottom-nav,
body[data-page="home-service"] .bottom-nav,
body[data-page="home-services"] .bottom-nav,
body.theme--service .bottom-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(224, 242, 254, 0.95) 100%) !important;
  border-color: rgba(14, 165, 233, 0.35) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   7.2 GROCERY VERTICAL TAB (Fresh Light Emerald/Mint Green Glass)
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="grocery"],
[data-home-mode="grocery"],
[data-cart-theme="grocery"],
body.theme--grocery {
  --nav-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(209, 250, 229, 0.95) 100%) !important;
  --nav-border: rgba(34, 197, 94, 0.35) !important;
  --nav-active-pill: rgba(0, 128, 0, 0.14) !important;
  --nav-active-text: #008000 !important;
}

[data-theme="grocery"] .bottom-nav,
[data-home-mode="grocery"] .bottom-nav,
[data-cart-theme="grocery"] .bottom-nav,
body.theme--grocery .bottom-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(209, 250, 229, 0.95) 100%) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   7.3 CAB / RIDE VERTICAL TAB (Warm Light Amber/Gold Honey Glass)
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="cab"],
[data-theme="ride"],
[data-home-mode="cab"],
[data-home-mode="ride"],
body[data-page="ride"],
body[data-page="rides"],
body.theme--cab {
  --nav-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(254, 240, 138, 0.95) 100%) !important;
  --nav-border: rgba(234, 179, 8, 0.35) !important;
  --nav-active-pill: rgba(202, 138, 4, 0.16) !important;
  --nav-active-text: #A16207 !important;
}

[data-theme="cab"] .bottom-nav,
[data-theme="ride"] .bottom-nav,
[data-home-mode="cab"] .bottom-nav,
[data-home-mode="ride"] .bottom-nav,
body[data-page="ride"] .bottom-nav,
body[data-page="rides"] .bottom-nav,
body.theme--cab .bottom-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(254, 240, 138, 0.95) 100%) !important;
  border-color: rgba(234, 179, 8, 0.35) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   7.4 DEFAULT / FOOD VERTICAL TAB (Warm Light Crimson/Blush Rose Glass)
   ───────────────────────────────────────────────────────────────────────── */
[data-theme="food"],
[data-home-mode="food"],
:root,
body {
  --nav-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(254, 215, 215, 0.95) 100%);
  --nav-border: rgba(239, 68, 68, 0.35);
  --nav-active-pill: rgba(129, 1, 0, 0.14);
  --nav-active-text: #810100;
}

[data-theme="food"] .bottom-nav,
[data-home-mode="food"] .bottom-nav,
.bottom-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(254, 215, 215, 0.95) 100%) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   7.5 OTHER BOTTOM NAV PAGES (Wishlist, Chat, Profile)
   ───────────────────────────────────────────────────────────────────────── */
body[data-page="wishlist"] .bottom-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(254, 215, 215, 0.95) 100%) !important;
  border-color: rgba(244, 63, 94, 0.35) !important;
}
body[data-page="wishlist"] .bottom-nav__item--active .bottom-nav__icon-wrap {
  background: rgba(225, 29, 72, 0.14) !important;
}
body[data-page="wishlist"] .bottom-nav__item--active .bottom-nav__icon-wrap svg,
body[data-page="wishlist"] .bottom-nav__item--active .bottom-nav__icon-wrap .icon,
body[data-page="wishlist"] .bottom-nav__item--active .bottom-nav__label {
  color: #E11D48 !important;
}

body[data-page="chat"] .bottom-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(224, 231, 255, 0.95) 100%) !important;
  border-color: rgba(99, 102, 241, 0.35) !important;
}
body[data-page="chat"] .bottom-nav__item--active .bottom-nav__icon-wrap {
  background: rgba(79, 70, 229, 0.14) !important;
}
body[data-page="chat"] .bottom-nav__item--active .bottom-nav__icon-wrap svg,
body[data-page="chat"] .bottom-nav__item--active .bottom-nav__icon-wrap .icon,
body[data-page="chat"] .bottom-nav__item--active .bottom-nav__label {
  color: #4F46E5 !important;
}

body[data-page="profile"] .bottom-nav {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(241, 245, 249, 0.96) 100%) !important;
  border-color: rgba(148, 163, 184, 0.40) !important;
}
body[data-page="profile"] .bottom-nav__item--active .bottom-nav__icon-wrap {
  background: rgba(71, 85, 105, 0.14) !important;
}
body[data-page="profile"] .bottom-nav__item--active .bottom-nav__icon-wrap svg,
body[data-page="profile"] .bottom-nav__item--active .bottom-nav__icon-wrap .icon,
body[data-page="profile"] .bottom-nav__item--active .bottom-nav__label {
  color: #334155 !important;
}