/* ═══════════════════════════════════════════
   MYPOD — DESIGN SYSTEM v3
   Luxury · Premium · Golden
   ═══════════════════════════════════════════ */

/* ── Visually hidden but accessible to screen readers / SEO crawlers ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ══════════════════════════════════════════
   UNIVERSAL SAFE-AREA — Newer Android + iOS
   edge-to-edge / notched / punch-hole devices
   Applies a top offset to the html element so
   nothing sits under the OS status bar. Bottom
   sheets & overlays keep their own paddings.
   ══════════════════════════════════════════ */
html { padding-top: env(safe-area-inset-top); background: #0e0e0e; }
body { padding-bottom: env(safe-area-inset-bottom); }

/* Full-screen overlays and bottom sheets that cover the whole viewport
   need their internal close-button pinned below the notch */
.cf-sheet.svc-detail-sheet-inner .svc-detail-close-btn,
#loc-picker-overlay .loc-picker-sheet .loc-picker-close,
.gs-overlay .gs-sheet .gs-close,
.trk-rating-overlay .trk-rating-sheet .trk-rating-close,
.blog-article-overlay .blog-article-close {
  margin-top: env(safe-area-inset-top);
}

/* Boot splash overlay (shown at first paint, hidden when JS is ready) */
#boot-splash {
  position:fixed;inset:0;background:#0e0e0e;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:22px;
  z-index:99999;transition:opacity .35s ease;
}
#boot-splash.hidden { opacity:0; pointer-events:none; }
#boot-splash .bs-mark {
  width:120px;height:120px;
  background-image:url('/customer/assets/logo-icon.svg?v=20260717c');
  background-size:contain;background-position:center;background-repeat:no-repeat;
  animation:bsPulse 1.4s ease-in-out infinite;
}
@keyframes bsPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.06);opacity:.88} }

/* ══════════════════════════════════════════
   DESKTOP / TABLET — Constrain the mobile PWA
   to a centered phone-frame column so home,
   booking, profile, cafe, etc. don't stretch
   across wide screens (was making cards huge
   and blank on Computer/desktop/tablet view).
   ══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   TABLET (768–1023px, or any touch device):
   Keep the phone-frame column look
   ══════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 1023px), (min-width: 768px) and (pointer: coarse) {
  body {
    background-color: #0a0a0a;
  }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, rgba(245,197,24,0.04), transparent 60%);
    pointer-events: none;
    z-index: 0;
  }
  #page-home,
  #page-onboarding,
  #page-login,
  #page-booking,
  #page-track,
  #page-profile,
  #page-services,
  #page-blog,
  #page-terms,
  #page-cancel,
  #page-contact {
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--blk);
    box-shadow: 0 0 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
    border-radius: 0;
    overflow-x: hidden;
    position: relative;
    z-index: 10;
  }
  .bottom-nav.bn-pill {
    left: 50% !important;
    transform: translateX(-50%);
    max-width: 460px !important;
  }
  .gs-sheet,
  .cf-sheet,
  .loc-picker-sheet,
  .trk-rating-sheet {
    max-width: 480px !important;
  }
}

/* ══════════════════════════════════════════
   DESKTOP (≥1024 px, hover-capable, pointer:fine)
   Full-width professional layout — no phone frame
   ══════════════════════════════════════════ */
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  body { background:#0A0A0A; }
  /* Full-width pages — remove the phone-frame constraint entirely */
  #page-home,
  #page-services,
  #page-blog,
  #page-track,
  #page-profile,
  #page-terms,
  #page-cancel,
  #page-contact,
  #page-booking { max-width: none !important; margin: 0; box-shadow:none; }

  /* Hide the floating mobile pill nav on desktop — top nav takes over */
  .bottom-nav.bn-pill { display:none !important; }

  /* Wide home container */
  #page-home { padding: 0 !important; }
  #page-home .hm-header { padding: 24px 48px 12px !important; max-width:1240px; margin:0 auto; }
  #page-home .hm-header-top { justify-content: space-between; }
  #page-home .hm-brand { transform: scale(1.15); transform-origin: left; }
  #page-home .hm-user-avatar { transform: scale(1.1); }
  /* Enlarge searchbar */
  #page-home .hm-searchbar { max-width: 720px; margin: 12px auto 20px; padding: 14px 22px !important; font-size: 15px !important; }

  /* Category tiles: 5 in a row */
  #page-home .hm-cats,
  #page-home #hmCats,
  #page-home .home-scroll-cards,
  #page-home .home-category-scroll,
  #page-home #home-categories,
  #page-home [data-testid="categories-scroll"] {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    max-width: 1240px;
    margin: 0 auto 32px;
    padding: 0 48px;
    overflow: visible !important;
  }
  #page-home .hm-cats > *,
  #page-home #hmCats > *,
  #page-home .home-scroll-cards > *,
  #page-home #home-categories > *,
  #page-home [data-testid="categories-scroll"] > * {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Hero banner carousel — full-width, taller */
  #page-home .banner-carousel,
  #page-home .popart-carousel,
  #page-home #banner-carousel-inner {
    max-width: 1240px !important;
    margin: 0 auto 40px !important;
    padding: 0 48px !important;
  }
  #page-home .banner-carousel-item,
  #page-home .popart-card { min-height: 340px !important; border-radius: 20px !important; }

  /* Popular Services: 4-column grid */
  #page-home .hm-pop-srv-scroll,
  #page-home #dash-srv-scroll {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px !important;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 48px !important;
    overflow: visible !important;
  }
  #page-home .hm-pop-srv-scroll > *,
  #page-home #dash-srv-scroll > * {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Section headings */
  #page-home .hm-section-head,
  #page-home .section-title { max-width: 1240px; margin: 40px auto 20px !important; padding: 0 48px !important; font-size: 24px !important; }

  /* Hub tabs (Car Wash / Cafe / Events) - center on desktop */
  #page-home .hub-tabs { max-width: 1240px; margin: 0 auto; padding: 0 48px; }

  /* Wider search overlay + sheets on desktop */
  .gs-sheet, .cf-sheet, .loc-picker-sheet, .trk-rating-sheet {
    max-width: 640px !important;
  }
  /* Booking wizard container gets wider */
  .bw-container { max-width: 900px !important; padding: 60px 32px 100px !important; }
}
.cf-addr-details{
  display:flex;flex-direction:column;gap:8px;
  margin-top:10px;
}
.cf-addr-row{display:flex;gap:8px;}
.cf-addr-input{
  flex:1;min-width:0;
  background:#0F0F0F;border:1px solid #2A2A2A;border-radius:12px;
  padding:12px 14px;
  font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;color:#fff;
  outline:none;transition:border-color .18s ease,background .18s ease;
}
.cf-addr-input::placeholder{color:#666;font-weight:400;}
.cf-addr-input:focus{border-color:#F5C518;background:#141414;}
.cf-addr-input-flat{max-width:42%;}
.cf-addr-hint{
  display:flex;align-items:center;gap:6px;
  font-family:'Outfit',sans-serif;font-size:11px;color:#7BC96F;
  margin-top:2px;letter-spacing:.2px;
}
.cf-addr-hint i{font-size:13px;}

/* ══════════════════════════════════════════
   GLOBAL SEARCH — Swiggy-style bottom sheet
   ══════════════════════════════════════════ */
.gs-overlay{
  position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:none;align-items:flex-end;justify-content:center;
}
.gs-overlay.open{display:flex;animation:gsFade .25s ease;}
@keyframes gsFade{from{opacity:0}to{opacity:1}}
.gs-sheet{
  width:100%;max-width:640px;max-height:88vh;
  background:#0F0F0F;border-top-left-radius:24px;border-top-right-radius:24px;
  display:flex;flex-direction:column;
  box-shadow:0 -10px 50px rgba(0,0,0,.6);
  animation:gsSlide .28s cubic-bezier(.4,1.2,.4,1);
  padding-bottom:env(safe-area-inset-bottom);
}
@keyframes gsSlide{from{transform:translateY(28px);opacity:.4}to{transform:translateY(0);opacity:1}}
.gs-sheet-handle{
  width:42px;height:4px;border-radius:2px;background:#2A2A2A;
  margin:10px auto 6px;flex-shrink:0;
}
.gs-header{
  display:flex;align-items:center;gap:10px;
  padding:8px 16px 12px;border-bottom:1px solid rgba(255,255,255,.06);
}
.gs-input-wrap{
  position:relative;flex:1;display:flex;align-items:center;
  background:#1A1A1A;border:1px solid #2A2A2A;border-radius:14px;
  padding:0 12px;height:46px;
}
.gs-input-icon{color:#A0A0A0;font-size:18px;flex-shrink:0;}
.gs-input{
  flex:1;background:transparent;border:none;outline:none;color:#fff;
  font-family:'Outfit',sans-serif;font-size:14px;font-weight:500;
  padding:0 10px;min-width:0;
}
.gs-input::placeholder{color:#666;}
.gs-input-clear{
  background:#2A2A2A;border:none;color:#A0A0A0;font-size:18px;line-height:1;
  width:24px;height:24px;border-radius:50%;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.gs-close{
  background:none;border:none;color:#F5C518;
  font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;cursor:pointer;
  padding:6px 4px;
}
.gs-results{flex:1;overflow-y:auto;padding:12px 16px 24px;}
.gs-suggest-label,.gs-section-label{
  font-family:'Outfit',sans-serif;font-size:11px;font-weight:600;
  color:#A0A0A0;text-transform:uppercase;letter-spacing:1.2px;
  margin:16px 4px 8px;
}
.gs-suggest-label:first-child{margin-top:4px;}
.gs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.gs-chip{
  background:#1A1A1A;border:1px solid #2A2A2A;color:#fff;
  font-family:'Outfit',sans-serif;font-size:13px;font-weight:500;
  padding:8px 14px;border-radius:999px;cursor:pointer;
  transition:all .18s ease;-webkit-tap-highlight-color:transparent;
}
.gs-chip:active{transform:scale(.95);background:#222;border-color:#F5C518;}
.gs-list{display:flex;flex-direction:column;gap:6px;}
.gs-row{
  display:flex;align-items:center;gap:12px;
  background:#1A1A1A;border:1px solid transparent;border-radius:14px;
  padding:12px 14px;cursor:pointer;text-align:left;width:100%;
  transition:all .18s ease;-webkit-tap-highlight-color:transparent;
}
.gs-row:active{background:#222;border-color:#F5C518;transform:scale(.99);}
.gs-row-icon{
  width:38px;height:38px;border-radius:10px;background:#0F0F0F;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  color:#F5C518;font-size:18px;
}
.gs-row-info{flex:1;min-width:0;}
.gs-row-title{
  font-family:'Outfit',sans-serif;font-size:14px;font-weight:600;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gs-row-sub{
  font-family:'Outfit',sans-serif;font-size:12px;color:#A0A0A0;
  margin-top:2px;
}
.gs-row-arrow{color:#666;font-size:16px;flex-shrink:0;}
.gs-empty{
  text-align:center;padding:40px 20px;color:#A0A0A0;
  font-family:'Outfit',sans-serif;font-size:14px;
}
.gs-empty strong{color:#F5C518;}


@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  --y: #F5C518;
  --y-hover: #FFD700;
  --y-glow: rgba(245,197,24,0.3);
  --d: #1E1E1E;
  --dk: #1A1A1A;
  --blk: #0F0F0F;
  --w: #FFFFFF;
  --g: #A0A0A0;
  --blue: #4A9EFF;
  --green: #4CAF7D;
  --red: #F87171;
  --purple: #A78BFA;
  --border: rgba(255,255,255,0.08);
  --card: rgba(26,26,26,0.6);
  --card-solid: #1A1A1A;
  --card-border: #2A2A2A;
  --fh: 'Outfit', sans-serif;
  --fm: 'Manrope', sans-serif;
  --r: 16px;
  --r-lg: 24px;
  --shadow: 0 2px 16px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
  --glass: rgba(25,25,25,0.6);
  --glass-border: rgba(255,255,255,0.06);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--blk);
  background-image:radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:24px 24px;
  color:var(--w);
  font-family:var(--fm);
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  font-size:14px;
  line-height:1.6;
}

/* ── CURSOR (desktop only) ── */
@media(pointer:fine){
  body{cursor:none;}
  #cur{width:10px;height:10px;background:var(--y);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .15s,height .15s;}
  #cur-r{width:32px;height:32px;border:1.5px solid var(--y);border-radius:50%;position:fixed;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:all .16s ease;opacity:.5;}
}
@media(pointer:coarse){
  #cur,#cur-r{display:none!important;}
  body{cursor:auto;}
  button,a,[onclick],.time-slot,.pay-opt{cursor:pointer;}
}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;
  background:rgba(15,15,15,.92);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
.logo-img{width:36px;height:36px;border-radius:8px;object-fit:contain;flex-shrink:0;}
/* ── Brand mark: crisp SVG (scales cleanly across all device DPIs, Swiggy-style icon-only in-app) ── */
.logo-sq{
  width:36px;height:36px;flex-shrink:0;
  background-image:url('/customer/assets/logo-icon.svg?v=20260717c');
  background-size:contain;background-position:center;background-repeat:no-repeat;
}
.logo-txt{font-family:var(--fh);font-size:22px;font-weight:700;letter-spacing:1px;color:var(--y);}
.logo-txt span{color:var(--w);}
nav ul{display:flex;gap:24px;list-style:none;}
nav ul a{
  color:var(--g);text-decoration:none;
  font-size:13px;font-weight:500;letter-spacing:0.5px;
  transition:color .2s;padding:4px 0;
  border-bottom:2px solid transparent;
}
nav ul a:hover,nav ul a.active{color:var(--y);border-bottom-color:var(--y);}
.nav-book{
  background:var(--y);color:var(--blk)!important;
  padding:8px 20px!important;font-weight:600;font-size:13px!important;
  border-radius:var(--r);
  border-bottom:none!important;
  transition:transform .2s,opacity .2s;
}
.nav-book:hover{opacity:.88;transform:translateY(-1px);}
.hamburger{display:none;flex-direction:column;gap:5px;padding:4px;cursor:pointer;}
.hamburger span{display:block;width:22px;height:2px;background:var(--y);border-radius:2px;}

/* ── CANVAS BG ── */
#bg-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;}

/* ── PAGES ── */
.page{display:none;min-height:100vh;position:relative;z-index:10;}
.page.active{display:block;animation:pageIn .35s ease;}

/* ── COMMON ── */
.container{max-width:1200px;margin:0 auto;padding:0 24px;}
.sec{padding:72px 0;}
.sec-label{font-size:11px;letter-spacing:3px;color:var(--y);text-transform:uppercase;margin-bottom:12px;font-weight:600;}
.sec-title{font-family:var(--fh);font-size:clamp(28px,4vw,48px);font-weight:700;line-height:1.1;margin-bottom:40px;}
.sec-title span{color:var(--y);}
.yellow{color:var(--y);}

/* ── HERO ── */
.hero{
  min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding:120px 48px 80px;
  position:relative;overflow:hidden;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,193,7,.08);border:1px solid rgba(255,193,7,.2);
  padding:8px 16px;font-size:11px;letter-spacing:2px;color:var(--y);
  text-transform:uppercase;margin-bottom:24px;border-radius:24px;
  opacity:0;animation:fup .7s .2s forwards;font-weight:600;
}
.hero-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--y);}
.hero-title{
  font-family:var(--fh);
  font-size:clamp(48px,9vw,100px);
  font-weight:800;line-height:1;letter-spacing:-1px;
  opacity:0;animation:fup .7s .4s forwards;
}
.hero-title .accent{color:var(--y);position:relative;display:inline-block;}
.hero-sub{
  max-width:500px;margin-top:24px;font-size:15px;line-height:1.7;
  color:var(--g);opacity:0;animation:fup .7s .6s forwards;
}
.hero-btns{
  display:flex;gap:16px;align-items:center;margin-top:40px;flex-wrap:wrap;
  opacity:0;animation:fup .7s .8s forwards;
}
.btn-y{
  background:var(--y);color:var(--blk);font-family:var(--fh);
  font-weight:600;font-size:13px;letter-spacing:0.5px;
  padding:14px 28px;border:none;cursor:inherit;border-radius:var(--r);
  transition:transform .2s,opacity .2s,box-shadow .2s;display:inline-block;text-decoration:none;
  box-shadow:0 4px 16px rgba(255,193,7,.2);
}
.btn-y:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(255,193,7,.3);}
.btn-y:active{transform:scale(.97);}
.btn-ghost{
  border:1px solid rgba(255,193,7,.3);color:var(--y);
  font-family:var(--fm);font-size:13px;font-weight:500;
  letter-spacing:0.5px;padding:13px 28px;cursor:inherit;background:none;
  transition:all .2s;display:inline-block;text-decoration:none;border-radius:var(--r);
}
.btn-ghost:hover{background:rgba(255,193,7,.06);border-color:var(--y);}
.btn-ghost:active{transform:scale(.97);}
.hero-scroll{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:10px;letter-spacing:2px;color:rgba(255,255,255,.2);text-transform:uppercase;
}
.hero-scroll::after{
  content:'';width:1px;height:50px;background:linear-gradient(to bottom,rgba(255,193,7,.4),transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}

/* STATS ROW */
.stats-row{
  display:flex;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  opacity:0;animation:fup .7s 1s forwards;
}
.stat-item{
  flex:1;padding:28px 32px;border-right:1px solid var(--border);
  position:relative;overflow:hidden;transition:background .3s;
}
.stat-item:last-child{border-right:none;}
.stat-item:hover{background:rgba(255,193,7,.03);}
.stat-item::after{
  content:'';position:absolute;bottom:0;left:0;
  width:0;height:2px;background:var(--y);transition:width .4s;
}
.stat-item:hover::after{width:100%;}
.stat-n{font-family:var(--fh);font-size:36px;font-weight:700;color:var(--y);}
.stat-l{font-size:11px;color:var(--g);margin-top:4px;}

/* SERVICE HIGHLIGHTS */
.highlights-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.hl-card{
  background:var(--card);padding:32px 24px;position:relative;overflow:hidden;
  transition:all .3s;border-radius:var(--r);border:1px solid var(--border);
}
.hl-card:hover{background:rgba(255,193,7,.04);border-color:rgba(255,193,7,.2);transform:translateY(-2px);box-shadow:var(--shadow);}
.hl-icon{
  width:48px;height:48px;background:rgba(255,193,7,.1);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;margin-bottom:16px;color:var(--y);
}
.hl-name{font-family:var(--fh);font-size:18px;font-weight:600;margin-bottom:8px;}
.hl-desc{font-size:13px;line-height:1.7;color:var(--g);}
.hl-num{
  position:absolute;top:12px;right:16px;font-family:var(--fh);
  font-size:48px;font-weight:800;color:rgba(255,193,7,.04);line-height:1;
}

/* HOW IT WORKS */
.hiw{background:rgba(255,193,7,.01);}
.hiw-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative;}
.hiw-steps::before{
  content:'';position:absolute;top:36px;left:10%;right:10%;
  height:1px;background:linear-gradient(to right,transparent,rgba(255,193,7,.3),transparent);z-index:0;
}
.hiw-step{text-align:center;position:relative;z-index:1;}
.hiw-dot{
  width:72px;height:72px;border:2px solid rgba(255,193,7,.3);border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;
  background:var(--blk);font-family:var(--fh);font-size:24px;font-weight:700;color:var(--y);
  position:relative;
}
.hiw-dot::after{
  content:'';position:absolute;inset:-8px;border-radius:50%;
  border:1px solid rgba(255,193,7,.12);animation:ping 2.5s ease-out infinite;
}
.hiw-step:nth-child(2) .hiw-dot::after{animation-delay:.5s;}
.hiw-step:nth-child(3) .hiw-dot::after{animation-delay:1s;}
.hiw-step:nth-child(4) .hiw-dot::after{animation-delay:1.5s;}
.hiw-label{font-family:var(--fh);font-size:15px;font-weight:600;margin-bottom:8px;}
.hiw-text{font-size:13px;line-height:1.7;color:var(--g);}

/* PRICING PREVIEW */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.price-card{
  background:var(--card);padding:40px 28px;border-radius:var(--r);
  transition:all .3s;position:relative;overflow:hidden;border:1px solid var(--border);
}
.price-card.featured{background:var(--y);border-color:var(--y);}
.price-card.featured *{color:var(--blk)!important;}
.price-card:hover:not(.featured){border-color:rgba(255,193,7,.3);transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.price-tier{font-size:11px;letter-spacing:2px;color:var(--g);text-transform:uppercase;margin-bottom:12px;font-weight:500;}
.price-name{font-family:var(--fh);font-size:24px;font-weight:700;margin-bottom:16px;}
.price-amt{font-family:var(--fh);font-size:48px;font-weight:800;color:var(--y);line-height:1;margin-bottom:4px;}
.price-amt span{font-size:20px;vertical-align:top;margin-top:8px;display:inline-block;}
.price-per{font-size:12px;color:var(--g);margin-bottom:24px;}
.price-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:28px;}
.price-list li{font-size:13px;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.7);}
.price-list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--y);flex-shrink:0;}
.price-card.featured .price-list li::before{background:var(--blk);}
.price-card.featured .price-amt{color:var(--blk);}
.featured-badge{
  position:absolute;top:16px;right:16px;
  background:var(--blk);color:var(--y);font-size:10px;letter-spacing:1px;font-weight:600;
  padding:4px 12px;border-radius:20px;
}

/* TESTIMONIALS */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.testi-card{
  border:1px solid var(--border);padding:28px;border-radius:var(--r);
  transition:all .3s;position:relative;background:var(--card);
}
.testi-card:hover{border-color:rgba(255,193,7,.3);box-shadow:var(--shadow);}
.testi-stars{color:var(--y);font-size:14px;letter-spacing:2px;margin-bottom:16px;}
.testi-text{font-size:14px;line-height:1.7;color:var(--g);margin-bottom:20px;font-style:italic;}
.testi-name{font-family:var(--fh);font-size:15px;font-weight:600;color:var(--y);}
.testi-car{font-size:12px;color:var(--g);}
.testi-quote{
  position:absolute;top:12px;right:16px;font-size:56px;
  color:rgba(255,193,7,.06);font-family:serif;line-height:1;
}

/* TICKER */
.ticker{background:var(--y);padding:12px 0;overflow:hidden;border-radius:0;}
.ticker-inner{display:flex;gap:0;animation:tick 22s linear infinite;}
.tick-item{
  font-family:var(--fh);font-size:14px;font-weight:600;
  color:var(--blk);white-space:nowrap;display:flex;align-items:center;gap:24px;padding:0 16px;
}
.tick-item::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--blk);opacity:.3;}

/* ══════ SERVICES PAGE ══════ */
.srv-hero{
  padding:120px 24px 60px;
  border-bottom:1px solid var(--border);
}
.srv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.srv-card{
  background:var(--card);padding:40px 28px;border-radius:var(--r);
  transition:all .3s;position:relative;overflow:hidden;border:1px solid var(--border);
}
.srv-card:hover{border-color:rgba(255,193,7,.3);transform:translateY(-2px);box-shadow:var(--shadow);}
.srv-icon-big{
  width:56px;height:56px;background:rgba(255,193,7,.1);
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:20px;color:var(--y);
}
.srv-name{font-family:var(--fh);font-size:24px;font-weight:700;margin-bottom:6px;}
.srv-tagline{font-size:12px;color:var(--y);font-weight:500;margin-bottom:16px;}
.srv-body{font-size:13px;line-height:1.8;color:var(--g);margin-bottom:24px;}
.srv-feats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;}
.srv-feat-tag{
  font-size:11px;font-weight:500;
  border:1px solid var(--border);padding:6px 14px;color:var(--g);border-radius:20px;
}
.srv-price-from{font-size:12px;color:var(--g);}
.srv-price-from strong{font-family:var(--fh);font-size:28px;font-weight:700;color:var(--y);margin-left:6px;}

/* SUBSCRIPTION PLANS */
.sub-plans{background:rgba(255,193,7,.01);padding:72px 0;border-top:1px solid var(--border);}
.sub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.sub-card{
  border:1px solid var(--border);padding:36px 28px;border-radius:var(--r);
  transition:all .3s;position:relative;background:var(--card);
}
.sub-card.featured-sub{border-color:var(--y);background:rgba(255,193,7,.04);}
.sub-card:hover:not(.featured-sub){border-color:rgba(255,193,7,.3);box-shadow:var(--shadow);}
.sub-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--y);color:var(--blk);font-size:10px;letter-spacing:1px;font-weight:600;
  padding:4px 16px;border-radius:20px;white-space:nowrap;
}
.sub-name{font-family:var(--fh);font-size:22px;font-weight:700;margin-bottom:8px;}
.sub-freq{font-size:12px;color:var(--g);margin-bottom:20px;}
.sub-price{font-family:var(--fh);font-size:44px;font-weight:800;color:var(--y);line-height:1;margin-bottom:4px;}
.sub-price span{font-size:18px;}
.sub-period{font-size:12px;color:var(--g);margin-bottom:20px;}
.sub-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:24px;}
.sub-list li{font-size:13px;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:10px;}
.sub-list li::before{content:'✓';color:var(--y);font-weight:700;}

/* ══════ BOOKING WIZARD ══════ */
.bw-container{
  padding:80px 20px 120px;max-width:640px;margin:0 auto;
  position:relative;z-index:10;min-height:100vh;
  overflow-x:hidden;
}
.bw-steps-bar{
  display:flex;align-items:center;justify-content:center;gap:0;
  padding:12px 0 8px;margin-bottom:4px;
}
.bw-step-ind{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  opacity:.35;transition:opacity .3s;
}
.bw-step-ind.active{opacity:1;}
.bw-step-ind.done{opacity:.7;}
.bw-step-num{
  width:30px;height:30px;border-radius:50%;
  border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fh);font-size:13px;font-weight:600;color:var(--g);
  transition:all .3s;
}
.bw-step-ind.active .bw-step-num{border-color:var(--y);color:var(--y);background:rgba(255,193,7,.1);}
.bw-step-ind.done .bw-step-num{border-color:var(--y);background:var(--y);color:var(--blk);}
.bw-step-lbl{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--g);font-weight:500;}
.bw-step-ind.active .bw-step-lbl{color:var(--y);}
.bw-step-line{flex:1;max-width:40px;height:1px;background:var(--border);margin:0 6px;}
.bw-step-counter{
  text-align:center;font-size:12px;letter-spacing:1px;
  color:var(--g);margin-bottom:28px;font-weight:500;
}
.bw-step{display:none;animation:pageIn .3s ease;}
.bw-step.active{display:block;}
.bw-step-title{
  font-family:var(--fh);font-size:clamp(24px,5vw,32px);
  font-weight:700;line-height:1.15;margin-bottom:8px;
}
.bw-step-sub{font-size:14px;color:var(--g);margin-bottom:24px;}

/* Service Type Cards */
.bw-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;width:100%;}
.bw-type-card{
  background:var(--card);border:1.5px solid var(--border);border-radius:16px;
  padding:24px 16px;text-align:center;cursor:pointer;transition:all .25s;
  -webkit-tap-highlight-color:transparent;position:relative;
  min-width:0;overflow:hidden;
}
.bw-type-title,.bw-type-sub,.bw-type-detail{
  overflow:hidden;text-overflow:ellipsis;
}
.bw-type-card:active{transform:scale(.97);}
.bw-type-card.selected{border-color:var(--y);background:rgba(255,193,7,.06);box-shadow:0 0 0 1px var(--y);}
.bw-type-card.selected .bw-type-icon{color:var(--y);}
.bw-type-icon{color:var(--g);margin-bottom:12px;transition:color .25s;}
.bw-type-title{font-family:var(--fh);font-size:17px;font-weight:600;color:var(--w);margin-bottom:4px;}
.bw-type-sub{font-size:12px;color:var(--y);font-weight:500;margin-bottom:8px;}
.bw-type-detail{font-size:12px;color:var(--g);line-height:1.5;}
.bw-type-card.selected::after{
  content:'';position:absolute;top:10px;right:10px;width:20px;height:20px;
  background:var(--y);border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230F0F0F' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px;
}
/* Station info card */
.bw-station-card{
  background:rgba(255,193,7,.04);border:1px solid rgba(255,193,7,.15);border-radius:var(--r);
  padding:16px;margin-top:12px;
}
.bw-station-name{font-family:var(--fh);font-size:15px;font-weight:600;color:var(--y);margin-bottom:4px;}
.bw-station-addr{font-size:13px;color:var(--g);line-height:1.5;margin-bottom:10px;}
.bw-station-dir{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--y);font-weight:500;
  background:rgba(255,193,7,.08);padding:8px 16px;border-radius:24px;cursor:pointer;
  text-decoration:none;border:1px solid rgba(255,193,7,.2);transition:all .2s;
}
.bw-station-dir:hover{background:rgba(255,193,7,.15);}
/* Service type badge */
.bw-stype-badge{
  display:inline-block;font-size:10px;font-weight:600;
  padding:3px 10px;border-radius:12px;
}
.bw-stype-badge.doorstep{background:rgba(59,130,246,.12);color:#60a5fa;}
.bw-stype-badge.drive_through{background:rgba(34,197,94,.12);color:#4ade80;}

/* Pay Now / Pay Later */
.bw-pay-options{display:flex;gap:12px;margin-top:20px;}
.bw-pay-now-btn,.bw-pay-later-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:16px;border-radius:var(--r);font-family:var(--fh);
  font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;
  -webkit-tap-highlight-color:transparent;border:none;
}
.bw-pay-now-btn{
  background:var(--y);color:var(--blk);box-shadow:0 4px 16px rgba(255,193,7,.2);
}
.bw-pay-now-btn:hover{box-shadow:0 6px 24px rgba(255,193,7,.3);transform:translateY(-1px);}
.bw-pay-now-btn:active{transform:scale(.97);}
.bw-pay-later-btn{
  background:transparent;color:var(--w);border:1.5px solid var(--border);
}
.bw-pay-later-btn:hover{border-color:var(--g);background:rgba(255,255,255,.02);}
.bw-pay-later-btn:active{transform:scale(.97);}
.bw-pay-later-btn svg{stroke:var(--g);}

.bw-service-grid{display:flex;flex-direction:column;gap:12px;}
.bw-srv-card{
  border:1px solid var(--border);padding:20px;border-radius:var(--r);
  display:flex;align-items:center;gap:16px;background:var(--card);
  cursor:pointer;transition:all .2s;position:relative;
}
.bw-srv-card:hover{border-color:rgba(255,193,7,.3);box-shadow:var(--shadow);}
.bw-srv-card.selected{border-color:var(--y);background:rgba(255,193,7,.04);box-shadow:0 0 0 1px var(--y);}
.bw-srv-card.selected::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--y);border-radius:3px 0 0 3px;
}
.bw-srv-icon{
  width:48px;height:48px;flex-shrink:0;
  background:rgba(255,193,7,.08);border:1px solid rgba(255,193,7,.12);
  display:flex;align-items:center;justify-content:center;
  color:var(--y);border-radius:12px;
}
.bw-srv-icon svg{width:22px;height:22px;}
/* NEW: Service card image (Jul 17, 2026) — replaces flat icon with actual hero image */
.bw-srv-img{
  width:64px;height:64px;flex-shrink:0;border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 100%);
  border:1px solid rgba(255,193,7,.14);
  display:flex;align-items:center;justify-content:center;
}
.bw-srv-img img{width:100%;height:100%;object-fit:cover;display:block;}
.bw-srv-img svg{width:26px;height:26px;color:var(--y);}
.bw-srv-info{flex:1;min-width:0;}
.bw-srv-name{font-family:var(--fh);font-size:16px;font-weight:600;}
.bw-srv-desc{font-size:12px;color:var(--g);margin-top:2px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.bw-srv-price{
  font-family:var(--fh);font-size:20px;font-weight:700;color:var(--y);
  white-space:nowrap;
}
.bw-srv-dur{font-size:11px;color:var(--g);margin-top:2px;}

/* ── Step 2: Selected Service + Add-ons ── */
.bw-selected-svc{
  background:var(--card);border:1px solid var(--y);border-radius:var(--r);
  padding:20px;position:relative;box-shadow:0 0 0 1px var(--y);
}
.bw-selected-svc::before{
  content:'SELECTED';position:absolute;top:-9px;left:16px;
  font-size:9px;font-weight:700;letter-spacing:2px;color:var(--blk);
  background:var(--y);padding:2px 10px;border-radius:6px;
}
.bw-selected-svc-header{display:flex;align-items:center;gap:14px;}
.bw-selected-svc-icon{
  width:52px;height:52px;flex-shrink:0;
  background:rgba(255,193,7,.08);border:1px solid rgba(255,193,7,.12);
  display:flex;align-items:center;justify-content:center;
  color:var(--y);border-radius:14px;
}
.bw-selected-svc-icon svg{width:24px;height:24px;}
/* NEW: Selected service card image (Jul 17, 2026) — swaps flat icon for actual hero */
.bw-selected-svc-img{
  width:72px;height:72px;flex-shrink:0;border-radius:16px;overflow:hidden;
  background:linear-gradient(135deg,#1a1a1a 0%,#2a2a2a 100%);
  border:1px solid rgba(255,193,7,.18);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.bw-selected-svc-img img{width:100%;height:100%;object-fit:cover;display:block;}
.bw-selected-svc-img svg{width:28px;height:28px;color:var(--y);}
.bw-selected-svc-info{flex:1;min-width:0;}
.bw-selected-svc-name{font-family:var(--fh);font-size:18px;font-weight:700;}
.bw-selected-svc-desc{font-size:12px;color:var(--g);margin-top:2px;}
.bw-selected-svc-price{text-align:right;flex-shrink:0;}
.bw-selected-svc-amount{font-family:var(--fh);font-size:22px;font-weight:700;color:var(--y);}
.bw-selected-svc-dur{font-size:11px;color:var(--g);margin-top:2px;}
.bw-change-srv-btn{
  margin-top:14px;width:100%;padding:10px;border-radius:10px;
  background:transparent;border:1px solid var(--border);color:var(--g);
  font-size:13px;font-weight:500;cursor:pointer;transition:all .2s;
}
.bw-change-srv-btn:hover{border-color:var(--y);color:var(--y);}

.bw-no-svc{
  background:var(--card);border:2px dashed var(--border);border-radius:var(--r);
  padding:28px;display:flex;align-items:center;gap:16px;cursor:pointer;transition:all .2s;
}
.bw-no-svc:hover{border-color:var(--y);}
.bw-no-svc-icon{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:rgba(255,193,7,.08);color:var(--y);
  display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:300;
}
.bw-no-svc-title{font-family:var(--fh);font-size:16px;font-weight:600;}
.bw-no-svc-sub{font-size:12px;color:var(--g);margin-top:2px;}

.bw-addons-section{margin-top:24px;}
.bw-addons-label{font-family:var(--fh);font-size:15px;font-weight:600;letter-spacing:1px;margin-bottom:2px;}
.bw-addons-sub{font-size:12px;color:var(--g);margin-bottom:14px;}
.bw-addon-card{
  border:1px solid var(--border);padding:16px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--card);cursor:pointer;transition:all .2s;margin-bottom:8px;
}
.bw-addon-card:hover{border-color:rgba(255,193,7,.25);}
.bw-addon-card.selected{border-color:var(--y);background:rgba(255,193,7,.04);}
.bw-addon-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0;}
.bw-addon-check{
  width:24px;height:24px;border-radius:6px;flex-shrink:0;
  border:1.5px solid var(--border);display:flex;align-items:center;
  justify-content:center;font-size:13px;color:var(--y);font-weight:700;
  transition:all .2s;
}
.bw-addon-card.selected .bw-addon-check{border-color:var(--y);background:rgba(255,193,7,.15);}
.bw-addon-info{flex:1;min-width:0;}
.bw-addon-name{font-size:14px;font-weight:600;}
.bw-addon-desc{font-size:11px;color:var(--g);margin-top:1px;}
.bw-addon-price{font-family:var(--fh);font-size:15px;font-weight:700;color:var(--y);white-space:nowrap;}

.bw-sub-upsell{
  margin-top:24px;border:1px solid rgba(255,193,7,.15);border-radius:var(--r);
  background:linear-gradient(135deg,rgba(255,193,7,.04) 0%,transparent 60%);
  padding:20px;position:relative;overflow:hidden;
}
.bw-sub-badge{
  position:absolute;top:12px;right:12px;
  font-size:9px;font-weight:700;letter-spacing:2px;
  color:var(--blk);background:var(--y);
  padding:3px 10px;border-radius:6px;
}
.bw-sub-content{}
.bw-sub-title{font-family:var(--fh);font-size:18px;font-weight:700;margin-bottom:4px;}
.bw-sub-desc{font-size:12px;color:var(--g);line-height:1.6;margin-bottom:16px;max-width:80%;}
.bw-sub-plans{display:flex;gap:10px;}
.bw-sub-plan{
  flex:1;padding:14px;border:1px solid var(--border);border-radius:12px;
  background:var(--card);position:relative;
}
.bw-sub-plan--pop{border-color:rgba(255,193,7,.3);}
.bw-sub-plan-tag{
  position:absolute;top:-8px;right:10px;
  font-size:8px;font-weight:700;letter-spacing:1.5px;
  color:var(--blk);background:var(--y);
  padding:2px 8px;border-radius:4px;
}
.bw-sub-plan-name{font-size:13px;font-weight:600;margin-bottom:4px;}
.bw-sub-plan-price{font-family:var(--fh);font-size:22px;font-weight:700;color:var(--y);}
.bw-sub-plan-price span{font-size:12px;font-weight:400;color:var(--g);}
.bw-sub-plan-feat{font-size:10px;color:var(--g);margin-top:4px;line-height:1.4;}

.bw-srv-picker{margin-bottom:16px;}
.bw-srv-picker-title{font-family:var(--fh);font-size:14px;font-weight:600;color:var(--g);margin-bottom:12px;letter-spacing:1px;}

/* Vehicle Cards */
.bw-veh-card{
  border:1px solid var(--border);padding:16px;margin-bottom:10px;border-radius:var(--r);
  display:flex;align-items:center;gap:14px;background:var(--card);
  cursor:pointer;transition:all .2s;position:relative;
}
.bw-veh-card:hover{border-color:rgba(255,193,7,.3);}
.bw-veh-card.selected{border-color:var(--y);background:rgba(255,193,7,.04);box-shadow:0 0 0 1px var(--y);}
.bw-veh-card.selected::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--y);border-radius:3px 0 0 3px;
}
.bw-veh-icon{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:rgba(255,193,7,.08);border:1px solid rgba(255,193,7,.12);
  display:flex;align-items:center;justify-content:center;color:var(--y);
}
.bw-veh-icon svg{width:18px;height:18px;}
.bw-veh-info{flex:1;}
.bw-veh-model{font-family:var(--fh);font-size:15px;font-weight:600;}
.bw-veh-meta{font-size:12px;color:var(--g);margin-top:2px;}
.bw-veh-surcharge{
  font-size:11px;font-weight:500;color:var(--y);
  border:1px solid rgba(255,193,7,.3);padding:3px 10px;border-radius:16px;white-space:nowrap;
}
.bw-add-veh-btn{
  border:1px dashed var(--border);padding:16px;margin-bottom:10px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;transition:all .2s;color:var(--g);font-size:13px;font-weight:500;
}
.bw-add-veh-btn:hover{border-color:var(--y);color:var(--y);background:rgba(255,193,7,.03);}
.bw-add-vehicle-form{
  border:1px solid var(--border);padding:24px;margin-top:12px;border-radius:var(--r);
  background:var(--card);
}
.bw-form-title{font-family:var(--fh);font-size:17px;font-weight:600;color:var(--y);margin-bottom:16px;}
.bw-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px;}
.bw-form-actions{display:flex;gap:12px;margin-top:16px;justify-content:flex-end;}

/* Date Strip & Slots */
.bw-date-strip{
  display:flex;gap:10px;overflow-x:auto;padding-bottom:8px;margin-bottom:20px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.bw-date-strip::-webkit-scrollbar{display:none;}
.bw-date-card{
  min-width:72px;flex-shrink:0;border:1px solid var(--border);border-radius:var(--r);
  padding:14px 10px;text-align:center;cursor:pointer;transition:all .2s;background:var(--card);
}
.bw-date-card:hover{border-color:rgba(255,193,7,.3);}
.bw-date-card.selected{border-color:var(--y);background:rgba(255,193,7,.06);box-shadow:0 0 0 1px var(--y);}
.bw-date-day{font-size:11px;color:var(--g);font-weight:500;}
.bw-date-num{font-family:var(--fh);font-size:24px;font-weight:700;color:var(--y);line-height:1.2;}
.bw-date-mon{font-size:11px;color:var(--g);}
.bw-slots-label{
  font-size:13px;color:var(--g);
  text-align:center;padding:24px 0;
}
.bw-slots-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.bw-slot-chip{
  border:1px solid var(--border);padding:12px 8px;text-align:center;border-radius:12px;
  font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;color:var(--g);background:var(--card);
}
.bw-slot-chip:hover:not(.unavailable){border-color:rgba(255,193,7,.4);color:var(--y);}
.bw-slot-chip.selected{border-color:var(--y);color:var(--y);background:rgba(255,193,7,.06);box-shadow:0 0 0 1px var(--y);}
.bw-slot-chip.unavailable{opacity:.35;pointer-events:none;text-decoration:line-through;filter:grayscale(1);}
/* Demand tags on slot chips (Jul 17, 2026) — customer sees FILLING FAST / 1 LEFT / FULL */
.bw-slot-chip{position:relative;overflow:visible;}
.bw-slot-tag{
  position:absolute;top:-8px;right:6px;
  font-size:8px;letter-spacing:1px;font-weight:800;
  padding:2px 6px;border-radius:6px;line-height:1;
  font-family:'Outfit',sans-serif;text-transform:uppercase;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  pointer-events:none;
}
.bw-slot-tag-medium{background:#F5C518;color:#0F0F0F;}
.bw-slot-tag-high  {background:#F97316;color:#fff;}
.bw-slot-tag-full  {background:#EF4444;color:#fff;}
.bw-slot-chip.bw-slot-high{border-color:rgba(249,115,22,.4);}
.bw-slot-chip.bw-slot-medium{border-color:rgba(245,197,24,.35);}
.bw-slot-chip.bw-slot-full{border-color:rgba(239,68,68,.35);}

/* Location */
.bw-loc-options{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;}
.bw-loc-opt{
  border:1px solid var(--border);padding:18px 20px;border-radius:var(--r);
  display:flex;align-items:center;gap:14px;
  cursor:pointer;transition:all .2s;background:var(--card);
  color:var(--g);font-family:var(--fm);font-size:14px;
  width:100%;text-align:left;
}
.bw-loc-opt:hover{border-color:var(--y);color:var(--y);background:rgba(255,193,7,.03);}
.bw-loc-opt svg{color:var(--y);flex-shrink:0;}
.bw-search-wrap{position:relative;margin-bottom:16px;}
.bw-search-wrap .loc-dropdown{position:absolute;top:100%;left:0;right:0;z-index:50;}
.bw-addr-confirm{margin-top:16px;}
.bw-addr-card{
  border:1px solid var(--y);padding:18px;border-radius:var(--r);
  background:rgba(255,193,7,.03);
}
.bw-addr-card-top{display:flex;align-items:flex-start;gap:12px;}
.bw-addr-text{flex:1;font-size:14px;line-height:1.6;color:var(--w);}
.bw-addr-edit{
  background:none;border:1px solid var(--border);padding:6px;border-radius:8px;
  cursor:pointer;color:var(--g);transition:all .2s;flex-shrink:0;
}
.bw-addr-edit:hover{border-color:var(--y);color:var(--y);}
.bw-save-check{
  display:flex;align-items:center;gap:10px;margin-top:14px;
  font-size:13px;color:var(--g);cursor:pointer;
}
.bw-save-check input{accent-color:var(--y);}

/* Manual address details (Jul 17, 2026) — Building/Flat + Landmark editable after GPS */
.bw-addr-manual{margin-top:14px;padding-top:14px;border-top:1px dashed var(--border);
  display:flex;flex-direction:column;gap:12px;}
.bw-addr-manual-row{display:flex;flex-direction:column;gap:6px;}
.bw-addr-manual-label{font-family:'Outfit',sans-serif;font-size:11px;letter-spacing:1px;
  color:var(--y);text-transform:uppercase;font-weight:700;}
.bw-addr-required{color:#EF4444;}
.bw-addr-optional{color:#888;font-weight:400;letter-spacing:.5px;text-transform:none;}
.bw-addr-manual-input{background:#0f0f0f;border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;color:var(--w);font-family:'Manrope',sans-serif;font-size:14px;
  outline:none;transition:border-color .15s ease;}
.bw-addr-manual-input:focus{border-color:var(--y);}
.bw-addr-manual-input::placeholder{color:#666;}
.bw-save-labels{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.bw-save-label{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;
  border-radius:20px;border:1px solid var(--border);background:transparent;color:#a0a0a0;
  font-family:'Outfit',sans-serif;font-size:12px;font-weight:600;cursor:pointer;
  transition:all .15s ease;}
.bw-save-label .ti{font-size:14px;}
.bw-save-label:hover{border-color:var(--y);color:#e0e0e0;}
.bw-save-label.active{background:rgba(245,197,24,.14);border-color:var(--y);color:var(--y);}
body.theme-light .bw-addr-manual-input{background:#F9F9F9;color:#0F0F0F;}
body.theme-light .bw-save-label{color:#666;}
body.theme-light .bw-save-label.active{color:var(--y);}

/* Confirm */
.bw-summary{
  border:1px solid var(--border);padding:20px;margin-bottom:16px;border-radius:var(--r);
  display:flex;flex-direction:column;gap:14px;background:var(--card);
}
.bw-sum-row{display:flex;justify-content:space-between;align-items:flex-start;}
.bw-sum-label{font-size:11px;letter-spacing:1px;color:var(--y);text-transform:uppercase;font-weight:600;}
.bw-sum-value{font-size:14px;color:var(--w);text-align:right;max-width:60%;}
.bw-pricing{
  border:1px solid var(--border);padding:20px;margin-bottom:16px;border-radius:var(--r);
  background:rgba(255,193,7,.02);
}
.bw-price-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;color:var(--g);}
.bw-price-row.total{
  border-top:1px solid var(--border);padding-top:14px;margin-top:6px;
  font-family:var(--fh);font-size:20px;font-weight:700;color:var(--y);
}
.bw-price-row.discount{color:#4ade80;}
.bw-promo-row{display:flex;gap:10px;margin-bottom:8px;}
.bw-promo-row .form-input{flex:1;}
.bw-promo-msg{font-size:13px;margin-bottom:12px;min-height:18px;}
.bw-promo-msg.success{color:#4ade80;}
.bw-promo-msg.error{color:#ef4444;}
.bw-est-time{
  text-align:center;font-size:12px;
  color:var(--g);padding:12px 0;font-weight:500;
}

/* Sticky Bottom Bar */
.bw-bottom-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:500;
  background:rgba(15,15,15,.96);border-top:1px solid var(--border);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
  display:flex;gap:12px;align-items:center;
  max-width:640px;margin:0 auto;
}
.bw-back-btn{
  background:none;border:1px solid var(--border);color:var(--g);border-radius:var(--r);
  font-family:var(--fm);font-size:13px;font-weight:500;
  padding:14px 20px;cursor:pointer;display:flex;align-items:center;gap:6px;
  transition:all .2s;
}
.bw-back-btn:hover{border-color:var(--y);color:var(--y);}
.bw-continue-btn{
  flex:1;background:var(--y);color:var(--blk);border-radius:var(--r);
  font-family:var(--fh);font-weight:600;
  font-size:14px;
  padding:14px 20px;border:none;cursor:pointer;
  transition:all .2s;box-shadow:0 4px 16px rgba(255,193,7,.2);
}
.bw-continue-btn:hover{box-shadow:0 6px 24px rgba(255,193,7,.3);}
.bw-continue-btn:disabled{opacity:.35;pointer-events:none;}

/* Success Screen */
.bw-success-screen{text-align:center;padding:40px 0;}
.bw-success-check{margin-bottom:24px;animation:fup .5s ease;}
.bw-success-title{
  font-family:var(--fh);font-size:clamp(28px,6vw,40px);
  font-weight:700;color:var(--y);margin-bottom:12px;
}
.bw-success-id{font-size:14px;color:var(--g);margin-bottom:20px;}
.bw-success-id strong{color:var(--y);font-weight:600;}
.bw-success-details{
  border:1px solid var(--border);padding:20px;margin-bottom:24px;border-radius:var(--r);
  text-align:left;background:var(--card);
}
.bw-success-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

@media(max-width:480px){
  .bw-form-row{grid-template-columns:1fr;}
  .bw-slots-grid{grid-template-columns:repeat(2,1fr);}
  .bw-steps-bar{gap:0;}
  .bw-step-lbl{display:none;}
}

/* ══════ FORMS ══════ */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-group.full{grid-column:1/-1;}
.form-label{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--y);font-weight:600;}
.form-input,.form-select,.form-textarea{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  color:var(--w);font-family:var(--fm);font-size:14px;
  padding:14px 16px;outline:none;transition:border-color .2s,background .2s,box-shadow .2s;
  width:100%;-webkit-appearance:none;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--y);background:rgba(255,193,7,.04);box-shadow:0 0 0 3px rgba(255,193,7,.1);
}
.form-input::placeholder{color:var(--g);font-size:13px;}
.form-select option{background:var(--dk);color:var(--w);}
.form-textarea{resize:vertical;min-height:100px;}
.time-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.time-slot{
  border:1px solid var(--border);padding:10px;text-align:center;border-radius:12px;
  font-size:12px;cursor:pointer;transition:all .2s;color:var(--g);
}
.time-slot:hover,.time-slot.selected{border-color:var(--y);color:var(--y);background:rgba(255,193,7,.06);}
.pay-opts{display:flex;gap:16px;flex-wrap:wrap;}
.pay-opt{
  flex:1;border:1px solid var(--border);padding:18px;cursor:pointer;border-radius:var(--r);
  transition:all .2s;position:relative;min-width:140px;
}
.pay-opt:hover,.pay-opt.selected{border-color:var(--y);background:rgba(255,193,7,.04);}
.pay-opt-name{font-family:var(--fh);font-size:16px;font-weight:600;margin-bottom:4px;}
.pay-opt-desc{font-size:12px;color:var(--g);}
.pay-opt .pay-check{
  position:absolute;top:12px;right:12px;width:14px;height:14px;
  border:1px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;
}
.pay-opt.selected .pay-check::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--y);}
.form-divider{
  grid-column:1/-1;height:1px;background:var(--border);
  position:relative;margin:8px 0;
}
.form-divider::before{
  content:attr(data-label);position:absolute;top:50%;left:0;transform:translateY(-50%);
  background:var(--blk);padding-right:16px;font-size:11px;letter-spacing:2px;
  color:var(--y);text-transform:uppercase;font-weight:600;
}
.form-submit{
  background:var(--y);color:var(--blk);font-family:var(--fh);
  font-weight:600;font-size:14px;
  padding:16px 40px;border:none;cursor:pointer;width:100%;margin-top:16px;
  border-radius:var(--r);transition:all .2s;box-shadow:0 4px 16px rgba(255,193,7,.2);
}
.form-submit:hover{box-shadow:0 6px 24px rgba(255,193,7,.3);transform:translateY(-1px);}
.form-submit:active{transform:scale(.98);}
.form-note{font-size:12px;color:var(--g);text-align:center;margin-top:12px;}

/* ══════ BLOG ══════ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.blog-card{
  border:1px solid var(--border);border-radius:var(--r);
  transition:all .3s;overflow:hidden;background:var(--card);
}
.blog-card:hover{border-color:rgba(255,193,7,.3);transform:translateY(-2px);box-shadow:var(--shadow);}
.blog-img{
  height:180px;background:linear-gradient(135deg,rgba(255,193,7,.1),rgba(255,193,7,.02));
  display:flex;align-items:center;justify-content:center;
  font-size:48px;position:relative;overflow:hidden;
}
.blog-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent,rgba(15,15,15,.5));
}
.blog-body{padding:20px;}
.blog-cat{font-size:11px;letter-spacing:1px;color:var(--y);font-weight:600;margin-bottom:8px;}
.blog-title{font-family:var(--fh);font-size:17px;font-weight:600;line-height:1.3;margin-bottom:8px;}
.blog-excerpt{font-size:13px;line-height:1.7;color:var(--g);margin-bottom:16px;}
.blog-meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--g);}
.blog-read{color:var(--y);font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;}
.blog-read::after{content:'→';}
.blog-card{cursor:pointer;}

/* Blog Article Overlay */
.blog-article-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.85);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.blog-article-overlay.active{opacity:1;pointer-events:auto;}
.blog-article-viewer{
  width:100%;max-width:720px;max-height:90vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:40px;position:relative;
  animation:baSlideUp .3s ease;
}
@keyframes baSlideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.blog-article-close{
  position:sticky;top:0;float:right;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--border);
  color:var(--w);font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;z-index:2;
}
.blog-article-close:hover{background:rgba(255,193,7,.15);border-color:var(--y);color:var(--y);}
.blog-article-cat{font-size:11px;letter-spacing:2px;color:var(--y);font-weight:600;margin-bottom:12px;text-transform:uppercase;}
.blog-article-title{font-family:var(--fh);font-size:28px;font-weight:700;line-height:1.2;margin-bottom:12px;}
.blog-article-meta{font-size:12px;color:var(--g);margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--border);}
.blog-article-content h3{font-family:var(--fh);font-size:18px;font-weight:600;color:var(--y);margin:24px 0 10px;}
.blog-article-content p{font-size:14px;line-height:1.85;color:rgba(255,255,255,.75);margin-bottom:14px;}
.blog-article-content strong{color:var(--w);font-weight:600;}
@media(max-width:768px){
  .blog-article-viewer{padding:24px 20px;max-height:95vh;border-radius:16px 16px 0 0;align-self:flex-end;margin:0;}
  .blog-article-title{font-size:22px;}
}
.blog-featured{
  grid-column:1/-1;border:1px solid var(--border);padding:40px;border-radius:var(--r);
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  transition:all .3s;margin-bottom:16px;background:var(--card);
}
.blog-featured:hover{border-color:rgba(255,193,7,.3);box-shadow:var(--shadow);}
.bf-label{font-size:11px;letter-spacing:2px;color:var(--y);font-weight:600;margin-bottom:12px;}
.bf-title{font-family:var(--fh);font-size:32px;font-weight:700;line-height:1.15;margin-bottom:16px;}
.bf-text{font-size:14px;line-height:1.8;color:var(--g);margin-bottom:24px;}
.bf-img{
  height:280px;background:linear-gradient(135deg,rgba(255,193,7,.15),rgba(255,193,7,.03));
  display:flex;align-items:center;justify-content:center;font-size:72px;
  border-radius:var(--r);
}

/* ══════ ABOUT ══════ */
.about-hero{
  padding:120px 24px 0;display:grid;grid-template-columns:1fr 1fr;
  gap:64px;align-items:center;border-bottom:1px solid var(--border);padding-bottom:64px;
}
.about-img-box{
  height:380px;background:linear-gradient(135deg,rgba(255,193,7,.15),rgba(255,193,7,.03));
  border-radius:20px;
  display:flex;align-items:center;justify-content:center;font-size:80px;
}
.about-body{font-size:15px;line-height:1.8;color:var(--g);margin-bottom:20px;}
.about-values{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:48px;}
.av-card{border-left:3px solid var(--y);padding:20px 24px;background:var(--card);border-radius:0 var(--r) var(--r) 0;}
.av-name{font-family:var(--fh);font-size:18px;font-weight:600;margin-bottom:8px;}
.av-text{font-size:13px;line-height:1.7;color:var(--g);}
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.team-card{
  border:1px solid var(--border);padding:32px;text-align:center;border-radius:var(--r);
  transition:all .3s;background:var(--card);
}
.team-card:hover{border-color:rgba(255,193,7,.3);box-shadow:var(--shadow);}
.team-avatar{
  width:72px;height:72px;border-radius:50%;background:rgba(255,193,7,.1);
  border:2px solid var(--y);display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:600;margin:0 auto 16px;color:var(--y);font-family:var(--fh);
}
.team-name{font-family:var(--fh);font-size:18px;font-weight:600;margin-bottom:4px;}
.team-role{font-size:12px;color:var(--y);font-weight:500;margin-bottom:12px;}
.team-bio{font-size:13px;color:var(--g);line-height:1.7;}

/* ══════ CONTACT ══════ */
.contact-wrap{
  padding:120px 24px 72px;display:grid;
  grid-template-columns:1fr 1fr;gap:64px;
}
.contact-info{padding-right:20px;}
.contact-info-title{font-family:var(--fh);font-size:clamp(32px,5vw,52px);font-weight:800;line-height:1.1;margin-bottom:32px;}
.ci-block{margin-bottom:32px;border-left:3px solid var(--y);padding-left:20px;}
.ci-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--y);margin-bottom:6px;font-weight:600;}
.ci-value{font-size:15px;color:var(--w);line-height:1.6;}
.ci-value a{color:var(--w);text-decoration:none;}
.ci-value a:hover{color:var(--y);}
.contact-social{display:flex;gap:12px;margin-top:32px;}
.social-btn{
  width:44px;height:44px;border:1px solid var(--border);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;cursor:pointer;transition:all .2s;text-decoration:none;color:var(--g);font-weight:600;
}
.social-btn:hover{border-color:var(--y);color:var(--y);background:rgba(255,193,7,.06);}
.contact-form-wrap{background:var(--card);border:1px solid var(--border);padding:40px;border-radius:var(--r);}
.map-placeholder{
  margin-top:40px;height:200px;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:12px;
}
.map-placeholder .map-icon{font-size:36px;}
.map-placeholder .map-text{font-size:13px;color:var(--g);font-weight:500;}

/* ══════ LEGAL PAGES ══════ */
.legal-wrap{max-width:800px;margin:0 auto;padding:120px 24px 72px;}
.legal-title{font-family:var(--fh);font-size:clamp(36px,5vw,64px);font-weight:800;line-height:1.1;margin-bottom:16px;}
.legal-date{font-size:12px;color:var(--g);margin-bottom:48px;padding-bottom:28px;border-bottom:1px solid var(--border);}
.legal-sec{margin-bottom:40px;}
.legal-h{font-family:var(--fh);font-size:20px;font-weight:600;color:var(--y);margin-bottom:14px;padding-left:16px;border-left:3px solid var(--y);}
.legal-p{font-size:14px;line-height:1.8;color:var(--g);margin-bottom:14px;}
.legal-list{padding-left:20px;margin-bottom:14px;}
.legal-list li{font-size:14px;line-height:1.8;color:var(--g);margin-bottom:6px;}

/* ══════ TRACK BOOKING ══════ */
.trk-container{
  padding:80px 20px 120px;max-width:640px;margin:0 auto;
  position:relative;z-index:10;min-height:100vh;
}
.trk-empty{text-align:center;padding:60px 20px;}
.trk-empty-icon{margin-bottom:20px;}
.trk-empty-title{
  font-family:var(--fh);font-size:22px;font-weight:700;
  color:var(--y);margin-bottom:12px;
}
.trk-empty-desc{font-size:14px;color:var(--g);max-width:300px;margin:0 auto 24px;line-height:1.7;}

.trk-header{margin-bottom:28px;}
.trk-header-label{font-size:11px;letter-spacing:2px;color:var(--y);text-transform:uppercase;margin-bottom:6px;font-weight:600;}
.trk-header-id{
  font-family:var(--fh);font-size:20px;font-weight:700;letter-spacing:1px;
  color:var(--w);
}

/* Timeline */
.trk-timeline{
  display:flex;align-items:flex-start;gap:0;margin-bottom:24px;
  padding:20px 0;overflow-x:auto;
}
.trk-tl-step{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  position:relative;text-align:center;
}
.trk-tl-dot{
  width:32px;height:32px;border-radius:50%;
  border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:var(--g);position:relative;z-index:2;
  background:var(--card);transition:all .3s;font-weight:600;
}
.trk-tl-step.done .trk-tl-dot{border-color:var(--y);background:var(--y);color:var(--blk);}
.trk-tl-step.active .trk-tl-dot{border-color:var(--y);box-shadow:0 0 0 4px rgba(255,193,7,.15);}
.trk-tl-step.active .trk-tl-dot .trk-pulse{
  position:absolute;width:100%;height:100%;border-radius:50%;
  border:2px solid var(--y);animation:trkPulse 1.5s infinite;
}
@keyframes trkPulse{0%{transform:scale(1);opacity:.6;}100%{transform:scale(1.8);opacity:0;}}
.trk-tl-label{font-size:9px;letter-spacing:1px;color:var(--g);margin-top:8px;text-transform:uppercase;font-weight:500;}
.trk-tl-step.done .trk-tl-label{color:var(--y);}
.trk-tl-step.active .trk-tl-label{color:var(--y);font-weight:600;}
.trk-tl-line{
  position:absolute;top:15px;left:calc(50% + 18px);right:calc(-50% + 18px);
  height:2px;background:var(--border);z-index:1;
}
.trk-tl-step.done .trk-tl-line{background:var(--y);}

/* Status Message */
.trk-status-msg{
  border:1px solid var(--border);padding:20px;margin-bottom:20px;border-radius:var(--r);
  text-align:center;position:relative;overflow:hidden;background:var(--card);
}
.trk-status-msg .trk-msg-text{font-size:15px;color:var(--w);line-height:1.6;font-weight:500;}
.trk-status-msg .trk-msg-sub{font-size:13px;color:var(--g);margin-top:6px;}
.trk-status-msg.pulse::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(255,193,7,.02);animation:trkMsgPulse 2s infinite;
}
@keyframes trkMsgPulse{0%,100%{opacity:0;}50%{opacity:1;}}

/* Rider Info */
/* OTP Card for Customer */
.trk-booking-switcher{
  display:flex;gap:8px;padding:0 20px;margin-bottom:16px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.trk-booking-switcher::-webkit-scrollbar{display:none;}
.trk-switcher-tab{
  flex:0 0 auto;padding:10px 16px;border-radius:12px;
  background:var(--card);border:1px solid var(--border);
  color:var(--g);font-size:12px;cursor:pointer;transition:all .2s;
  text-align:left;min-width:120px;
}
.trk-switcher-tab.active{border-color:var(--y);background:rgba(255,193,7,.06);}
.trk-sw-service{display:block;font-weight:600;color:var(--w);font-size:13px;margin-bottom:2px;}
.trk-switcher-tab.active .trk-sw-service{color:var(--y);}
.trk-sw-status{font-size:10px;letter-spacing:1px;text-transform:uppercase;}
.trk-otp-box{
  background:linear-gradient(135deg,rgba(255,193,7,.08),rgba(255,193,7,.03));
  border:1px solid rgba(255,193,7,.2);border-radius:var(--r);
  padding:24px 20px;margin-bottom:20px;text-align:center;
}
.trk-otp-title{font-size:11px;font-weight:600;letter-spacing:2px;color:var(--g);margin-bottom:14px;text-transform:uppercase;}
.trk-otp-digits{display:flex;justify-content:center;gap:12px;margin-bottom:14px;}
.trk-otp-d{
  width:52px;height:62px;display:flex;align-items:center;justify-content:center;
  background:var(--card);border:2px solid rgba(255,193,7,.3);border-radius:12px;
  font-size:28px;font-weight:800;color:var(--y);font-family:var(--fh);
  letter-spacing:2px;
}
.trk-otp-hint{font-size:12px;color:var(--g);}
.trk-rider{
  border:1px solid var(--border);padding:18px;margin-bottom:20px;border-radius:var(--r);
  display:flex;align-items:center;gap:14px;background:var(--card);
}
.trk-rider-avatar{
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,193,7,.1);border:2px solid var(--y);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fh);font-size:15px;font-weight:600;color:var(--y);
}
.trk-rider-info{flex:1;}
.trk-rider-name{font-family:var(--fh);font-size:16px;font-weight:600;}
.trk-rider-rating{font-size:13px;color:var(--y);margin-top:2px;}
.trk-rider-call{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--y);display:flex;align-items:center;justify-content:center;
  color:var(--y);transition:all .2s;text-decoration:none;
}
.trk-rider-call:hover{background:var(--y);color:var(--blk);}

/* Map */
.trk-map-wrap{margin-bottom:20px;}
.trk-eta{
  font-family:var(--fh);font-size:18px;font-weight:700;
  color:var(--y);margin-bottom:10px;text-align:center;
}
.trk-map{
  height:240px;border:1px solid var(--border);border-radius:var(--r);
  position:relative;overflow:hidden;z-index:1;
}
.trk-map .leaflet-tile-pane{filter:brightness(0.7) contrast(1.1) saturate(0.3);}
.trk-map .leaflet-control-attribution{font-size:7px;background:rgba(15,15,15,.6) !important;color:rgba(255,255,255,.15) !important;padding:1px 4px !important;line-height:1.2;}
.trk-map .leaflet-control-attribution a{color:rgba(255,193,7,.2) !important;text-decoration:none !important;}
.trk-map-legend{
  display:flex;justify-content:center;gap:24px;
  padding:10px 0;font-size:12px;color:var(--g);
}
.trk-legend-item{display:flex;align-items:center;gap:6px;}
.trk-legend-dot{width:10px;height:10px;border-radius:50%;}
.trk-legend-dot.rider{background:var(--y);}
.trk-legend-dot.you{background:#60a5fa;}

/* Timer */
.trk-timer-wrap{
  border:1px solid var(--y);padding:32px;margin-bottom:20px;border-radius:var(--r);
  text-align:center;background:rgba(255,193,7,.03);
}
.trk-timer-label{font-size:11px;letter-spacing:2px;color:var(--y);text-transform:uppercase;margin-bottom:8px;font-weight:600;}
.trk-timer{
  font-family:var(--fh);font-size:48px;font-weight:800;
  color:var(--y);line-height:1;
}
.trk-timer-sub{font-size:12px;color:var(--g);margin-top:8px;}

/* Booking Details */
.trk-details{
  border:1px solid var(--border);padding:20px;margin-bottom:20px;border-radius:var(--r);background:var(--card);
}
.trk-details-title{
  font-size:11px;letter-spacing:2px;color:var(--y);text-transform:uppercase;font-weight:600;
  margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border);
}
.trk-det-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px;}
.trk-det-label{color:var(--g);}
.trk-det-value{color:var(--w);text-align:right;max-width:55%;}

/* Rating Overlay */
.trk-rating-overlay{
  position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
  display:flex;align-items:flex-end;justify-content:center;
}
.trk-rating-sheet{
  background:var(--card);border:1px solid var(--border);
  border-radius:24px 24px 0 0;border-bottom:none;width:100%;max-width:500px;
  padding:12px 24px calc(32px + env(safe-area-inset-bottom));
  animation:slideUp .3s ease;
}
.trk-rating-handle{
  width:40px;height:4px;border-radius:2px;background:var(--border);
  margin:0 auto 20px;
}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.trk-rating-title{
  font-family:var(--fh);font-size:22px;font-weight:700;
  margin-bottom:8px;
}
.trk-rating-sub{font-size:14px;color:var(--g);margin-bottom:24px;}
.trk-stars{display:flex;justify-content:center;gap:16px;}
.trk-star{
  cursor:pointer;color:var(--border);transition:all .2s;
  padding:6px;border-radius:50%;
  -webkit-tap-highlight-color:transparent;
}
.trk-star:active{transform:scale(1.2);}
.trk-star.active{color:var(--y);}
.trk-star.active svg{fill:var(--y);}
.trk-rating-label{
  text-align:center;font-size:15px;color:var(--y);
  font-family:var(--fh);font-weight:600;
  margin-top:12px;min-height:20px;
}
.trk-reason-chips{margin-top:16px;animation:fadeIn .25s ease;}
.trk-reason-hint{font-size:13px;color:var(--g);font-weight:500;margin-bottom:10px;}
.trk-chips-wrap{display:flex;flex-wrap:wrap;gap:8px;}
.trk-chip{
  background:transparent;border:1px solid var(--border);color:var(--g);
  padding:8px 16px;border-radius:24px;font-size:13px;font-family:var(--fm);
  cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent;
}
.trk-chip.selected{border-color:var(--y);color:var(--y);background:rgba(255,193,7,.08);}
.trk-chip:active{transform:scale(.96);}
.track-status-bar{display:flex;justify-content:space-between;margin:32px 0;position:relative;}
.track-status-bar::before{content:'';position:absolute;top:16px;left:0;right:0;height:2px;background:var(--border);}
.track-step{text-align:center;position:relative;z-index:1;flex:1;}
.track-dot{
  width:32px;height:32px;border-radius:50%;border:2px solid var(--border);
  background:var(--blk);display:flex;align-items:center;justify-content:center;
  margin:0 auto 8px;font-size:12px;transition:all .3s;
}
.track-step.done .track-dot{border-color:var(--y);background:var(--y);color:var(--blk);}
.track-step.active .track-dot{border-color:var(--y);box-shadow:0 0 12px rgba(255,193,7,.3);}
.track-step-label{font-size:10px;color:var(--g);text-transform:uppercase;font-weight:500;}
.track-step.done .track-step-label,.track-step.active .track-step-label{color:var(--y);}

/* ══════ PROFILE PAGE ══════ */
.prf-container{
  padding:80px 20px 120px;max-width:640px;margin:0 auto;
  position:relative;z-index:10;min-height:100vh;
}
.prf-user-card{
  display:flex;align-items:center;gap:16px;
  border:1px solid var(--border);padding:24px;margin-bottom:8px;border-radius:var(--r);
  background:var(--card);position:relative;
}
.prf-avatar{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;
  background:rgba(255,193,7,.1);border:2px solid var(--y);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fh);font-size:20px;font-weight:600;color:var(--y);
  overflow:hidden;
}
.prf-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.prf-user-details{flex:1;min-width:0;}
.prf-name{font-family:var(--fh);font-size:18px;font-weight:600;color:var(--w);}
.prf-email{font-size:13px;color:var(--g);margin-top:2px;}
.prf-phone{font-size:13px;color:var(--y);font-weight:500;margin-top:4px;}
.prf-edit-btn{
  position:absolute;top:16px;right:16px;
  background:none;border:1px solid var(--border);padding:8px;border-radius:10px;
  color:var(--g);cursor:pointer;transition:all .2s;
}
.prf-edit-btn:hover{border-color:var(--y);color:var(--y);}
.prf-edit-form{
  border:1px solid var(--border);border-top:none;padding:20px;border-radius:0 0 var(--r) var(--r);
  background:var(--card);margin-bottom:8px;
}
.prf-edit-actions{display:flex;gap:10px;margin-top:16px;justify-content:flex-end;}

/* Sections */
.prf-section{margin-bottom:8px;}
.prf-sec-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border:1px solid var(--border);cursor:pointer;border-radius:var(--r);
  transition:all .2s;background:var(--card);
}
.prf-sec-header:hover{background:rgba(255,193,7,.02);border-color:rgba(255,193,7,.15);}
.prf-sec-title{
  display:flex;align-items:center;gap:12px;
  font-family:var(--fh);font-size:15px;font-weight:600;
}
.prf-sec-arrow{font-size:18px;color:var(--g);transition:transform .2s;}
.prf-sec-arrow.open{transform:rotate(90deg);}
.prf-sec-body{
  border:1px solid var(--border);border-top:none;
  padding:16px;background:rgba(255,193,7,.01);border-radius:0 0 var(--r) var(--r);
}

/* Booking list */
.prf-bk-item{
  display:flex;align-items:center;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--border);cursor:pointer;transition:opacity .2s;
}
.prf-bk-item:hover{opacity:.8;}
.prf-bk-item:last-child{border-bottom:none;}
.prf-bk-info{flex:1;min-width:0;}
.prf-bk-name{font-size:14px;color:var(--w);font-weight:500;}
.prf-bk-meta{font-size:12px;color:var(--g);margin-top:3px;}
.prf-bk-right{text-align:right;flex-shrink:0;}
.prf-bk-price{font-family:var(--fh);font-size:18px;font-weight:700;color:var(--y);}
.prf-bk-badge{
  display:inline-block;font-size:10px;font-weight:600;
  padding:3px 10px;margin-top:4px;border-radius:12px;
}
.prf-bk-badge.completed{color:#4ade80;background:rgba(74,222,128,.1);}
.prf-bk-badge.pending,.prf-bk-badge.accepted{color:var(--y);background:rgba(255,193,7,.1);}
.prf-bk-badge.on_the_way,.prf-bk-badge.washing{color:#60a5fa;background:rgba(96,165,250,.1);}
.prf-bk-badge.cancelled{color:#ef4444;background:rgba(239,68,68,.1);}

/* Vehicle list */
.prf-veh-item{
  display:flex;align-items:center;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--border);
}
.prf-veh-item:last-child{border-bottom:none;}
.prf-veh-icon{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:rgba(255,193,7,.08);border:1px solid rgba(255,193,7,.12);
  display:flex;align-items:center;justify-content:center;color:var(--y);
}
.prf-veh-icon svg{width:16px;height:16px;}
.prf-veh-info{flex:1;}
.prf-veh-model{font-size:14px;color:var(--w);font-weight:500;}
.prf-veh-meta{font-size:12px;color:var(--g);margin-top:2px;}
.prf-del-btn{
  background:none;border:1px solid var(--border);padding:6px;border-radius:8px;
  color:var(--g);cursor:pointer;transition:all .2s;
}
.prf-del-btn:hover{border-color:#ef4444;color:#ef4444;}

.prf-add-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px;border:1px dashed var(--border);margin-top:12px;border-radius:var(--r);
  cursor:pointer;color:var(--g);font-size:13px;font-weight:500;
  transition:all .2s;width:100%;background:none;
}
.prf-add-btn:hover{border-color:var(--y);color:var(--y);}
.prf-add-form{border:1px solid var(--border);padding:16px;margin-top:12px;background:var(--card);border-radius:var(--r);}
.prf-add-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

.prf-addr-item{
  display:flex;align-items:flex-start;gap:12px;padding:14px 0;
  border-bottom:1px solid var(--border);
}
.prf-addr-item:last-child{border-bottom:none;}
.prf-addr-label{font-size:11px;color:var(--y);font-weight:600;text-transform:uppercase;}
.prf-addr-text{font-size:13px;color:var(--g);margin-top:3px;line-height:1.5;}

.prf-sub-card{
  border:1px solid var(--y);padding:20px;text-align:center;border-radius:var(--r);
  background:rgba(255,193,7,.03);
}
.prf-sub-plan{font-family:var(--fh);font-size:20px;font-weight:700;color:var(--y);}
.prf-sub-desc{font-size:13px;color:var(--g);margin-top:6px;margin-bottom:16px;}

.prf-wallet-balance{
  border:1px solid var(--y);padding:24px;text-align:center;border-radius:var(--r);
  background:rgba(255,193,7,.03);margin-bottom:16px;
}
.prf-wallet-amt{font-family:var(--fh);font-size:36px;font-weight:800;color:var(--y);}
.prf-wallet-label{font-size:11px;letter-spacing:2px;color:var(--g);text-transform:uppercase;margin-bottom:6px;font-weight:500;}
.prf-txn-item{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--border);font-size:14px;
}
.prf-txn-item:last-child{border-bottom:none;}
.prf-txn-label{color:var(--g);}
.prf-txn-date{font-size:11px;color:rgba(255,255,255,.2);margin-top:2px;}
.prf-txn-amt.credit{color:#4ade80;}
.prf-txn-amt.debit{color:#ef4444;}

.prf-ref-card{text-align:center;padding:8px 0;}
.prf-ref-msg{font-size:14px;color:var(--g);margin-bottom:16px;line-height:1.6;}
.prf-ref-code-box{
  border:2px dashed var(--y);padding:16px;margin-bottom:16px;border-radius:var(--r);
  background:rgba(255,193,7,.03);
}
.prf-ref-code{font-family:var(--fh);font-size:28px;font-weight:700;letter-spacing:3px;color:var(--y);}
.prf-ref-copy{font-size:12px;color:var(--g);margin-top:4px;cursor:pointer;}
.prf-wa-btn{
  display:inline-flex;align-items:center;gap:10px;
  background:#25D366;color:#fff;font-weight:600;font-size:14px;
  padding:14px 28px;border:none;cursor:pointer;border-radius:var(--r);
  transition:all .2s;text-decoration:none;
}
.prf-wa-btn:hover{opacity:.85;transform:translateY(-1px);}

.prf-toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--border);
}
.prf-toggle-row:last-child{border-bottom:none;}
.prf-toggle-label{font-size:14px;color:var(--w);font-weight:500;}
.prf-toggle-sub{font-size:12px;color:var(--g);margin-top:2px;}
.prf-toggle{position:relative;width:44px;height:24px;flex-shrink:0;}
.prf-toggle input{opacity:0;width:0;height:0;}
.prf-toggle-slider{
  position:absolute;inset:0;cursor:pointer;
  background:var(--border);transition:all .2s;border-radius:24px;
}
.prf-toggle-slider::before{
  content:'';position:absolute;width:18px;height:18px;
  left:3px;bottom:3px;background:var(--g);border-radius:50%;
  transition:all .2s;
}
.prf-toggle input:checked + .prf-toggle-slider{background:var(--y);}
.prf-toggle input:checked + .prf-toggle-slider::before{transform:translateX(20px);background:var(--blk);}

.prf-logout-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:16px;border:1px solid rgba(239,68,68,.2);border-radius:var(--r);
  background:rgba(239,68,68,.04);color:#ef4444;
  font-family:var(--fm);font-size:14px;font-weight:500;
  cursor:pointer;transition:all .2s;
}
.prf-logout-btn:hover{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.4);}

.prf-modal-overlay{
  position:fixed;inset:0;z-index:900;
  background:rgba(0,0,0,.7);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.prf-modal{
  background:var(--card);border:1px solid var(--border);border-radius:20px;
  width:100%;max-width:500px;max-height:80vh;overflow-y:auto;
}
.prf-modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--border);
}
.prf-modal-title{font-family:var(--fh);font-size:17px;font-weight:600;color:var(--y);}
.prf-modal-close{
  background:none;border:none;color:var(--g);font-size:24px;
  cursor:pointer;transition:color .2s;padding:0 4px;
}
.prf-modal-close:hover{color:var(--y);}
.prf-modal-body{padding:20px;}
.prf-modal-row{
  display:flex;justify-content:space-between;padding:10px 0;
  border-bottom:1px solid var(--border);font-size:14px;
}
.prf-modal-row:last-child{border-bottom:none;}
.prf-modal-label{color:var(--g);}
.prf-modal-value{color:var(--w);text-align:right;max-width:55%;}

@media(max-width:480px){
  .prf-add-form-grid{grid-template-columns:1fr;}
}
.profile-card{border:1px solid var(--border);padding:28px;margin-bottom:24px;background:var(--card);border-radius:var(--r);}
.profile-avatar{
  width:72px;height:72px;border-radius:50%;background:var(--y);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fh);font-size:28px;font-weight:700;color:var(--blk);
  margin-bottom:16px;
}
.profile-name{font-family:var(--fh);font-size:24px;font-weight:700;margin-bottom:4px;}
.profile-email{font-size:13px;color:var(--g);margin-bottom:24px;}
.profile-field{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--border);}
.profile-field:last-child{border-bottom:none;}
.profile-field-label{font-size:11px;letter-spacing:1px;color:var(--y);text-transform:uppercase;font-weight:600;}
.profile-field-value{font-size:14px;color:var(--g);}
.profile-bookings-title{font-family:var(--fh);font-size:18px;font-weight:600;color:var(--y);margin-bottom:16px;}
.profile-booking-item{
  border:1px solid var(--border);padding:20px;margin-bottom:12px;border-radius:var(--r);
  display:flex;justify-content:space-between;align-items:center;
  transition:all .2s;background:var(--card);
}
.profile-booking-item:hover{border-color:rgba(255,193,7,.3);}
.profile-booking-service{font-family:var(--fh);font-size:16px;font-weight:600;}
.profile-booking-meta{font-size:12px;color:var(--g);margin-top:4px;}
.profile-booking-status{
  font-size:10px;font-weight:600;padding:6px 14px;
  border:1px solid var(--y);color:var(--y);border-radius:20px;
}
.profile-booking-status.completed{border-color:#4ade80;color:#4ade80;}

/* ══════ ONBOARDING ══════ */
.ob-screen{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:40px 24px;position:relative;z-index:10;
  overflow:hidden;touch-action:pan-y;
}
.ob-skip{
  position:absolute;top:24px;right:24px;
  background:none;border:1px solid var(--border);border-radius:24px;
  color:var(--g);font-family:var(--fm);
  font-size:12px;font-weight:500;
  padding:8px 20px;cursor:pointer;transition:all .2s;z-index:5;
}
.ob-skip:hover{border-color:var(--y);color:var(--y);}
.ob-slides{position:relative;width:100%;max-width:420px;overflow:hidden;}
.ob-slide{
  display:none;flex-direction:column;align-items:center;
  text-align:center;padding:0 16px;animation:obIn .4s ease;
}
.ob-slide.active{display:flex;}
@keyframes obIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
.ob-icon-wrap{
  width:120px;height:120px;border-radius:50%;
  border:2px solid rgba(255,193,7,.3);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:40px;position:relative;
  background:rgba(255,193,7,.04);
}
.ob-icon-wrap::after{
  content:'';position:absolute;inset:-12px;border-radius:50%;
  border:1px solid rgba(255,193,7,.1);animation:ping 2.5s ease-out infinite;
}
.ob-icon{font-size:48px;line-height:1;}
.ob-title{
  font-family:var(--fh);
  font-size:clamp(28px,6vw,36px);font-weight:700;
  line-height:1.15;margin-bottom:20px;
}
.ob-title span{color:var(--y);}
.ob-desc{font-size:15px;line-height:1.7;color:var(--g);max-width:340px;}
.ob-dots{display:flex;gap:10px;margin-top:48px;margin-bottom:32px;}
.ob-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.12);
  transition:all .3s;cursor:pointer;
}
.ob-dot.active{background:var(--y);width:28px;border-radius:4px;}
.ob-next-btn{
  background:var(--y);color:var(--blk);
  font-family:var(--fh);font-weight:600;
  font-size:14px;
  padding:16px 48px;border:none;cursor:pointer;border-radius:var(--r);
  transition:all .2s;min-width:200px;
  box-shadow:0 4px 16px rgba(255,193,7,.2);
}
.ob-next-btn:hover{box-shadow:0 6px 24px rgba(255,193,7,.3);transform:translateY(-1px);}
.ob-next-btn:active{transform:scale(.97);}

/* ══════ LOGIN PAGE ══════ */
.login-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;position:relative;z-index:10;
}
.login-card{
  width:100%;max-width:400px;
  background:var(--card);
  border:1px solid var(--border);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:48px 36px;border-radius:24px;
  text-align:center;box-shadow:var(--shadow-lg);
}
.login-logo{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  margin-bottom:8px;
}
.login-tagline{
  font-size:13px;letter-spacing:2px;
  color:var(--g);margin-bottom:40px;
}
.login-divider-text{position:relative;margin-bottom:28px;}
.login-divider-text::before{
  content:'';position:absolute;top:50%;left:0;right:0;height:1px;
  background:var(--border);
}
.login-divider-text span{
  position:relative;z-index:1;
  background:var(--card);padding:0 16px;
  font-size:12px;letter-spacing:1px;color:var(--g);font-weight:500;
}
.login-google-btn{
  width:100%;display:flex;align-items:center;justify-content:center;gap:14px;
  background:var(--blk);border:1px solid var(--border);border-radius:var(--r);
  color:var(--w);font-family:var(--fm);font-size:14px;font-weight:600;
  padding:16px 24px;cursor:pointer;
  transition:all .2s;
}
.login-google-btn:hover{border-color:var(--y);background:rgba(255,193,7,.04);box-shadow:var(--shadow);}
.login-google-btn:active{transform:scale(.98);}
.login-google-btn svg{flex-shrink:0;}
.login-footer-text{margin-top:32px;}
.login-footer-text p{font-size:12px;color:var(--g);line-height:1.8;}
.login-footer-text a{color:var(--y);text-decoration:none;font-weight:500;}
.login-footer-text a:hover{text-decoration:underline;}

/* Auth loading spinner */
.auth-loading{
  position:fixed;inset:0;z-index:10000;
  background:var(--blk);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:20px;
}
.auth-spinner{
  width:40px;height:40px;border:3px solid var(--border);
  border-top-color:var(--y);border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.auth-loading-text{font-size:13px;color:var(--g);font-weight:500;}

/* ══════ BOTTOM NAV (Mobile PWA) ══════ */
.bottom-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:600;
  background:rgba(18,18,18,.92);
  border-top:1px solid var(--glass-border);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  padding:8px 0 calc(8px + env(safe-area-inset-bottom));
}
.bottom-nav-inner{
  display:flex;justify-content:space-around;align-items:center;
  max-width:500px;margin:0 auto;
}
.bottom-nav-item{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 12px;cursor:pointer;color:rgba(255,255,255,.3);
  transition:all .25s;text-decoration:none;-webkit-tap-highlight-color:transparent;
}
.bottom-nav-item.active{color:var(--y);}
.bottom-nav-item:hover{color:var(--y);}
.bottom-nav-icon{font-size:20px;line-height:1;}
.bottom-nav-label{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;font-family:var(--fm);font-weight:600;}
.bottom-nav-item.active .bottom-nav-icon{transform:scale(1.1);}
.bottom-nav-item.active::after{
  content:'';display:block;width:4px;height:4px;border-radius:50%;
  background:var(--y);margin-top:2px;box-shadow:0 0 8px var(--y-glow);
}

/* ══════ PWA INSTALL BANNER ══════ */
.pwa-install{
  display:none;position:fixed;bottom:80px;left:16px;right:16px;z-index:550;
  background:var(--card);border:1px solid var(--y);padding:16px 20px;border-radius:var(--r);
  display:none;align-items:center;gap:16px;box-shadow:var(--shadow-lg);
  animation:fup .4s ease;
}
.pwa-install-text{flex:1;font-size:13px;color:var(--g);font-weight:500;}
.pwa-install-btn{
  background:var(--y);color:var(--blk);font-family:var(--fh);
  font-weight:600;font-size:12px;
  padding:10px 20px;border:none;cursor:pointer;white-space:nowrap;border-radius:var(--r);
}
.pwa-install-close{
  color:var(--g);background:none;border:none;font-size:18px;cursor:pointer;
  padding:4px;
}

/* ══════ OFFLINE INDICATOR ══════ */
.offline-bar{
  display:none;position:fixed;top:0;left:0;right:0;z-index:9000;
  background:rgba(239,68,68,.9);color:#fff;text-align:center;
  padding:8px;font-size:12px;font-weight:500;border-radius:0 0 var(--r) var(--r);
}
.offline-bar.show{display:block;}

/* ══════ BROWSE SERVICES ══════ */
.browse-header{
  padding:80px 0 20px;position:relative;z-index:10;
  border-bottom:1px solid var(--border);
}
.browse-title{
  font-family:var(--fh);font-size:clamp(28px,6vw,44px);
  font-weight:700;line-height:1.1;margin-bottom:8px;
}
.browse-sub{font-size:14px;color:var(--g);}
.browse-filters{
  position:sticky;top:56px;z-index:300;
  background:rgba(15,15,15,.95);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:14px 0;
}
.filter-scroll{
  display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.filter-scroll::-webkit-scrollbar{display:none;}
.filter-chip{
  flex-shrink:0;background:none;border:1px solid var(--border);
  color:var(--g);font-family:var(--fm);
  font-size:12px;font-weight:500;
  padding:9px 20px;cursor:pointer;transition:all .2s;
  white-space:nowrap;border-radius:24px;
}
.filter-chip:hover{border-color:rgba(255,193,7,.4);color:var(--y);}
.filter-chip.active{
  background:var(--y);color:var(--blk);border-color:var(--y);font-weight:600;
}
.browse-list{padding:24px 0 40px;position:relative;z-index:10;}

.bsrv-card{
  border:1px solid var(--border);padding:20px;margin-bottom:12px;border-radius:var(--r);
  display:flex;gap:16px;align-items:flex-start;background:var(--card);
  cursor:pointer;transition:all .3s;position:relative;overflow:hidden;
}
.bsrv-card:hover{border-color:rgba(255,193,7,.3);box-shadow:var(--shadow);transform:translateY(-1px);}
.bsrv-icon{
  width:52px;height:52px;flex-shrink:0;
  background:rgba(255,193,7,.08);border:1px solid rgba(255,193,7,.12);
  display:flex;align-items:center;justify-content:center;
  color:var(--y);border-radius:14px;
}
.bsrv-icon svg{width:24px;height:24px;}
.bsrv-body{flex:1;min-width:0;}
.bsrv-name{font-family:var(--fh);font-size:17px;font-weight:600;margin-bottom:4px;}
.bsrv-desc{font-size:13px;line-height:1.7;color:var(--g);margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.bsrv-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.bsrv-price{font-family:var(--fh);font-size:22px;font-weight:700;color:var(--y);}
.bsrv-dur{font-size:11px;color:var(--g);font-weight:500;border:1px solid var(--border);padding:4px 12px;border-radius:16px;}
.bsrv-book{
  font-size:12px;color:var(--y);font-weight:600;
  display:flex;align-items:center;gap:4px;
}
.bsrv-book::after{content:'→';}
.bsrv-empty{text-align:center;padding:48px 20px;color:var(--g);font-size:14px;}

/* ══════ DASHBOARD HOME ══════ */
.dash-location-bar{
  position:fixed;top:56px;left:0;right:0;z-index:400;
  background:rgba(15,15,15,.95);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:10px 20px;
}
.dash-location-inner{
  display:flex;align-items:center;gap:10px;max-width:600px;margin:0 auto;position:relative;
}
.dash-loc-icon{font-size:16px;flex-shrink:0;display:flex;align-items:center;color:var(--y);}
.dash-loc-input{
  flex:1;background:var(--card);border:1px solid var(--border);border-radius:12px;
  color:var(--w);font-family:var(--fm);font-size:13px;
  padding:10px 14px;outline:none;transition:border-color .2s;
  -webkit-appearance:none;
}
.dash-loc-input:focus{border-color:var(--y);}
.dash-loc-input::placeholder{color:var(--g);font-size:12px;}
.dash-loc-btn{
  background:var(--y);color:var(--blk);
  font-weight:600;font-size:12px;border-radius:10px;
  padding:10px 16px;border:none;cursor:pointer;white-space:nowrap;
  transition:all .2s;
}
.dash-loc-btn:hover{opacity:.88;}
.loc-dropdown{
  position:absolute;top:100%;left:0;right:0;
  background:rgba(26,26,26,.98);border:1px solid var(--border);border-radius:var(--r);
  max-height:260px;overflow-y:auto;z-index:450;
  display:none;margin-top:4px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow-lg);
}
.loc-dropdown.show{display:block;}
.loc-item{
  padding:14px 16px;font-size:13px;color:var(--g);
  cursor:pointer;border-bottom:1px solid var(--border);
  transition:background .2s,color .2s;
  display:flex;align-items:flex-start;gap:10px;
  font-family:var(--fm);line-height:1.5;
}
.loc-item:hover{background:rgba(255,193,7,.04);color:var(--w);}
.loc-item:last-child{border-bottom:none;}
.loc-item-pin{flex-shrink:0;color:var(--y);margin-top:2px;}
.loc-item-text{flex:1;}
.loc-item-sub{font-size:11px;color:var(--g);margin-top:2px;display:block;}
.loc-searching{padding:16px;text-align:center;font-size:13px;color:var(--g);}
.bottom-nav-icon{display:flex;align-items:center;justify-content:center;}
.bottom-nav-icon svg{width:20px;height:20px;}
.ob-icon{display:flex;align-items:center;justify-content:center;}
.ob-icon svg{width:48px;height:48px;stroke:var(--y);}
.dsb-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--y);}
.dsb-icon svg{width:32px;height:32px;}

.dash-greeting{padding:130px 0 20px;position:relative;z-index:10;}
.dash-hello{
  font-family:var(--fh);font-size:clamp(28px,6vw,36px);
  font-weight:300;line-height:1.1;letter-spacing:-.5px;
}
.dash-hello-sub{font-size:14px;color:var(--g);margin-top:6px;font-weight:400;letter-spacing:.2px;}

/* Banner Carousel */
.dash-banners{padding:16px 0 8px;position:relative;z-index:10;overflow:hidden;}
.banner-track{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 20px;
}
.banner-track::-webkit-scrollbar{display:none;}
.banner-slide{
  flex:0 0 calc(100% - 16px);scroll-snap-align:center;
  border-radius:16px;overflow:hidden;cursor:pointer;
  position:relative;min-height:160px;
  -webkit-tap-highlight-color:transparent;transition:transform .2s;
}
.banner-slide:active{transform:scale(.98);}

/* ── Vector Banner Base ── */
.vb{position:relative;width:100%;height:160px;border-radius:16px;overflow:hidden;display:flex;align-items:center;justify-content:flex-start;padding:24px 28px;}
.vb__shapes{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.vb__text{position:relative;z-index:2;display:flex;flex-direction:column;gap:4px;}
.vb__tag{font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--y);opacity:.9;}
.vb__title{font-family:var(--fh);font-size:26px;font-weight:800;color:var(--w);line-height:1.1;}
.vb__subtitle{font-size:13px;color:rgba(255,255,255,.65);font-weight:500;margin-top:2px;}
.vb__code{display:inline-block;margin-top:6px;padding:5px 14px;border:1.5px dashed var(--y);border-radius:8px;font-size:14px;font-weight:700;letter-spacing:2px;color:var(--y);width:fit-content;}

/* ── Banner 1: Summer Wash ── */
.vb--wash{background:linear-gradient(135deg,#0a1628 0%,#0f1f3d 50%,#0a1628 100%);}
.vb__car{position:absolute;right:16px;bottom:20px;width:130px;height:auto;opacity:.7;animation:vbFloat 4s ease-in-out infinite;}
.vb__drop{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(100,180,255,.5);animation:vbDrop 2.5s ease-in infinite;}
.vb__drop--1{top:10%;right:20%;animation-delay:0s;}
.vb__drop--2{top:5%;right:35%;animation-delay:.5s;}
.vb__drop--3{top:15%;right:50%;animation-delay:1s;}
.vb__drop--4{top:8%;right:60%;animation-delay:1.5s;}
.vb__drop--5{top:20%;right:25%;animation-delay:2s;}
.vb__circle{position:absolute;border-radius:50%;border:1px solid rgba(100,180,255,.12);}
.vb__circle--1{width:180px;height:180px;right:-40px;top:-60px;animation:vbPulse 6s ease-in-out infinite;}
.vb__circle--2{width:100px;height:100px;right:20px;bottom:-30px;animation:vbPulse 5s ease-in-out infinite .5s;}
.vb__circle--3{width:60px;height:60px;right:80px;top:10px;animation:vbPulse 4s ease-in-out infinite 1s;}
.vb__line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(100,180,255,.15),transparent);animation:vbSweep 4s linear infinite;}
.vb__line--1{width:200px;top:40%;right:-60px;animation-delay:0s;}
.vb__line--2{width:150px;top:65%;right:-30px;animation-delay:2s;}

/* ── Banner 2: First Wash Free ── */
.vb--promo{background:linear-gradient(135deg,#1a0a2e 0%,#2d1450 50%,#1a0a2e 100%);}
.vb__hex{position:absolute;width:60px;height:60px;border:1px solid rgba(168,85,247,.2);transform:rotate(30deg);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);animation:vbSpin 12s linear infinite;}
.vb__hex--1{right:30px;top:15px;width:80px;height:80px;}
.vb__hex--2{right:80px;bottom:10px;animation-delay:-4s;opacity:.5;}
.vb__ring{position:absolute;border-radius:50%;border:1px solid rgba(168,85,247,.15);}
.vb__ring--1{width:120px;height:120px;right:-20px;top:-30px;animation:vbPulse 5s ease-in-out infinite;}
.vb__ring--2{width:80px;height:80px;right:60px;bottom:-20px;animation:vbPulse 4s ease-in-out infinite 1s;}
.vb__sparkle{position:absolute;color:rgba(168,85,247,.5);font-size:18px;font-weight:300;animation:vbTwinkle 2s ease-in-out infinite;}
.vb__sparkle--1{right:25px;top:50%;animation-delay:0s;}
.vb__sparkle--2{right:100px;top:20%;animation-delay:.7s;}
.vb__sparkle--3{right:60px;bottom:15%;animation-delay:1.4s;}

/* ── Banner 3: Refer & Earn ── */
.vb--refer{background:linear-gradient(135deg,#0a2818 0%,#0f3d22 50%,#0a2818 100%);}
.vb__gift{position:absolute;right:28px;top:50%;transform:translateY(-50%);width:72px;height:72px;opacity:.65;animation:vbBounce 3s ease-in-out infinite;}
.vb__arc{position:absolute;border-radius:50%;border:1px solid rgba(52,211,153,.15);}
.vb__arc--1{width:200px;height:200px;right:-60px;top:-80px;animation:vbPulse 6s ease-in-out infinite;}
.vb__arc--2{width:140px;height:140px;right:10px;bottom:-50px;animation:vbPulse 5s ease-in-out infinite .8s;}
.vb__dot{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(52,211,153,.35);animation:vbFloat 3s ease-in-out infinite;}
.vb__dot--1{right:20%;top:15%;animation-delay:0s;}
.vb__dot--2{right:40%;top:70%;animation-delay:.8s;}
.vb__dot--3{right:55%;top:30%;animation-delay:1.6s;}
.vb__dot--4{right:30%;bottom:20%;animation-delay:2.2s;}

/* ── Banner 4: Ceramic Shield ── */
.vb--ceramic{background:linear-gradient(135deg,#1a1400 0%,#2e2200 50%,#1a1400 100%);}
.vb__shield{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:80px;height:80px;opacity:.6;animation:vbBreathe 4s ease-in-out infinite;}
.vb__shield svg{width:100%;height:100%;}
.vb__glow{position:absolute;border-radius:50%;filter:blur(30px);animation:vbGlow 4s ease-in-out infinite;}
.vb__glow--1{width:100px;height:100px;right:10px;top:10px;background:rgba(255,193,7,.08);}
.vb__glow--2{width:80px;height:80px;right:50px;bottom:0;background:rgba(255,193,7,.06);animation-delay:2s;}
.vb__particle{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,193,7,.4);animation:vbRise 3s ease-out infinite;}
.vb__particle--1{right:35%;bottom:20%;animation-delay:0s;}
.vb__particle--2{right:50%;bottom:10%;animation-delay:.8s;}
.vb__particle--3{right:25%;bottom:30%;animation-delay:1.5s;}
.vb__particle--4{right:45%;bottom:5%;animation-delay:2.2s;}

/* ── Vector Banner Animations ── */
@keyframes vbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes vbPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.05);opacity:1}}
@keyframes vbDrop{0%{opacity:0;transform:translateY(-10px)}50%{opacity:1}100%{opacity:0;transform:translateY(30px)}}
@keyframes vbSweep{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}
@keyframes vbSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes vbTwinkle{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
@keyframes vbBounce{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 8px))}}
@keyframes vbBreathe{0%,100%{transform:translateY(-50%) scale(1);opacity:.6}50%{transform:translateY(-50%) scale(1.08);opacity:.85}}
@keyframes vbGlow{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes vbRise{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(-40px)}}

.banner-dots{display:flex;justify-content:center;gap:6px;margin-top:12px;}
.banner-dot{
  width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.1);
  transition:all .3s ease;
}
.banner-dot.active{width:20px;background:var(--y);}

/* Active Booking Banner */
.dash-active-booking{padding:0 0 8px;position:relative;z-index:10;}
.dab-card{
  background:rgba(255,193,7,.04);border:1px solid var(--y);border-radius:var(--r);
  padding:18px 20px;display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;transition:all .2s;
}
.dab-card:hover{background:rgba(255,193,7,.08);}
.dab-left{display:flex;align-items:center;gap:14px;}
.dab-pulse{
  width:12px;height:12px;border-radius:50%;background:var(--y);
  box-shadow:0 0 8px rgba(255,193,7,.5);
  animation:dabPulse 1.5s ease-in-out infinite;flex-shrink:0;
}
@keyframes dabPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.dab-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--y);margin-bottom:2px;font-weight:600;}
.dab-service{font-family:var(--fh);font-size:17px;font-weight:600;}
.dab-status{font-size:12px;color:var(--g);margin-top:2px;text-transform:capitalize;}
.dab-track-btn{
  font-family:var(--fh);font-size:15px;font-weight:600;
  color:var(--y);white-space:nowrap;
}

/* Services Scroll */
.dash-services{padding:24px 0 8px;position:relative;z-index:10;}
.dash-sec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.dash-see-all{
  font-size:12px;color:var(--y);font-weight:600;
  cursor:pointer;text-decoration:none;
}
.dash-srv-grid{
  display:grid;grid-template-columns:1fr;gap:12px;
}
@media(min-width:480px){.dash-srv-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:900px){.dash-srv-grid{grid-template-columns:1fr 1fr 1fr;}}
.dash-srv-card{
  border:1px solid var(--glass-border);padding:20px;border-radius:var(--r-lg);
  transition:all .3s;cursor:pointer;
  position:relative;overflow:hidden;
  background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.dash-srv-card:hover{border-color:rgba(212,175,55,.25);box-shadow:0 0 24px rgba(212,175,55,.08);transform:translateY(-2px);}
.dash-srv-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.dash-srv-icon{display:flex;align-items:center;color:var(--y);}
.dash-srv-icon svg{width:28px;height:28px;stroke-width:1.5;}
.dash-srv-name{font-family:var(--fh);font-size:16px;font-weight:500;margin-bottom:6px;letter-spacing:-.3px;}
.dash-srv-desc{font-size:12px;color:var(--g);line-height:1.6;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.dash-srv-meta{display:flex;gap:8px;align-items:baseline;}
.dash-srv-price{font-family:var(--fh);font-size:18px;font-weight:700;color:var(--y);}
.dash-srv-dur{font-size:10px;color:var(--g);font-weight:500;}
.dash-srv-book{
  font-size:11px;font-weight:600;letter-spacing:.5px;
  padding:6px 14px;border-radius:20px;
  background:linear-gradient(135deg,var(--y),#B5952F);color:var(--blk);
  display:inline-flex;align-items:center;gap:4px;transition:all .2s;
  box-shadow:0 0 12px var(--y-glow);
}
.dash-srv-book:hover{box-shadow:0 0 20px rgba(212,175,55,.4);transform:scale(1.03);}
.dash-srv-book::after{content:'→';}
.dash-srv-skeleton{
  height:140px;
  background:rgba(212,175,55,.02);border:1px solid var(--glass-border);border-radius:var(--r-lg);
  animation:skPulse 1.2s ease-in-out infinite;
}
@keyframes skPulse{0%,100%{opacity:.3}50%{opacity:.6}}

/* Vehicles Strip */
.dash-vehicles{padding:16px 0;position:relative;z-index:10;}
.dash-veh-strip{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;}
.dash-veh-strip::-webkit-scrollbar{display:none;}
.dash-veh-card{
  min-width:160px;flex-shrink:0;
  border:1px solid var(--border);padding:16px;border-radius:var(--r);
  display:flex;align-items:center;gap:12px;background:var(--card);
  transition:all .2s;
}
.dash-veh-card:hover{border-color:rgba(255,193,7,.3);}
.dash-veh-icon{
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,193,7,.08);border:1px solid rgba(255,193,7,.12);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;color:var(--y);
}
.dash-veh-icon svg{width:18px;height:18px;}
.dash-veh-info{overflow:hidden;}
.dash-veh-model{font-family:var(--fh);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-veh-plate{font-size:11px;color:var(--g);}
.dash-veh-add{
  min-width:120px;flex-shrink:0;
  border:1px dashed var(--border);padding:16px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;gap:8px;
  cursor:pointer;transition:all .2s;color:var(--g);
  font-size:12px;font-weight:500;
}
.dash-veh-add:hover{border-color:var(--y);color:var(--y);background:rgba(255,193,7,.03);}

/* Subscription Banner */
.dash-sub-banner{padding:16px 0;position:relative;z-index:10;}
.dsb-card{
  background:linear-gradient(135deg,rgba(255,193,7,.06),rgba(255,193,7,.02));
  border:1px solid var(--border);padding:20px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;transition:all .2s;
}
.dsb-card:hover{border-color:var(--y);background:rgba(255,193,7,.06);box-shadow:var(--shadow);}
.dsb-left{display:flex;align-items:center;gap:16px;}
.dsb-icon{font-size:32px;flex-shrink:0;}
.dsb-title{font-family:var(--fh);font-size:17px;font-weight:600;color:var(--y);}
.dsb-desc{font-size:13px;color:var(--g);margin-top:2px;}
.dsb-arrow{font-family:var(--fh);font-size:24px;font-weight:700;color:var(--y);}

/* ═══ HUB TABS (Carwash / Cafe / Events) ═══ */
.hub-tabs{padding:0 0 4px;}
.hub-tab-row{display:flex;gap:4px;padding:0 20px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.hub-tab-row::-webkit-scrollbar{display:none;}
.hub-tab{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:14px 16px;border-radius:16px;border:1px solid var(--glass-border);
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--g);font-size:13px;font-weight:600;
  font-family:var(--fh);cursor:pointer;transition:all .3s;white-space:nowrap;
  letter-spacing:.3px;
}
.hub-tab svg{stroke-width:1.5;}
.hub-tab.active{
  background:linear-gradient(135deg,var(--y),#B5952F);
  color:var(--blk);border-color:var(--y);
  box-shadow:0 0 20px var(--y-glow);
}
.hub-tab.active svg{stroke:var(--blk);}
.hub-tab:not(.active):hover{border-color:rgba(212,175,55,.2);color:var(--y);}
.hub-tab:not(.active):hover svg{stroke:var(--y);}

.hub-panel{display:none;}
.hub-panel.active{display:block;animation:fadeIn .3s ease;}

/* ═══ CAFE TAB ═══ */
.cafe-hero{padding:16px 0 8px;}
.cafe-hero-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;padding:32px 24px;
  background:linear-gradient(135deg,rgba(139,90,43,.2),rgba(80,40,10,.35));
  border:1px solid rgba(139,90,43,.15);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.cafe-hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(212,175,55,.08),transparent 60%);}
.cafe-hero-text{position:relative;z-index:1;}
.cafe-hero-tag{font-size:9px;font-weight:700;letter-spacing:3px;color:var(--y);background:rgba(212,175,55,.1);padding:4px 12px;border-radius:6px;font-family:var(--fm);}
.cafe-hero-title{display:block;font-family:var(--fh);font-size:24px;font-weight:300;margin-top:12px;letter-spacing:-.5px;}
.cafe-hero-sub{display:block;font-size:13px;color:var(--g);margin-top:6px;}

.cafe-cats{padding:14px 0 4px;}
.cafe-cat-row{display:flex;gap:8px;padding:0 20px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.cafe-cat-row::-webkit-scrollbar{display:none;}
.cafe-cat{
  padding:9px 20px;border-radius:24px;border:1px solid var(--glass-border);
  background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--g);font-size:12px;font-weight:600;
  cursor:pointer;transition:all .25s;white-space:nowrap;font-family:var(--fm);
}
.cafe-cat.active{background:linear-gradient(135deg,var(--y),#B5952F);color:var(--blk);border-color:var(--y);box-shadow:0 0 14px var(--y-glow);}

.cafe-menu{padding:8px 0;}
.cafe-grid{display:flex;flex-direction:column;gap:12px;}
.cafe-item{
  display:flex;gap:14px;padding:16px;
  background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);border-radius:20px;transition:all .25s;
}
.cafe-item:hover{border-color:rgba(212,175,55,.15);box-shadow:0 0 16px rgba(212,175,55,.05);}
.cafe-item-img{
  width:72px;height:72px;border-radius:14px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.cafe-item-info{flex:1;min-width:0;}
.cafe-item-name{font-family:var(--fh);font-size:15px;font-weight:500;letter-spacing:-.2px;}
.cafe-item-desc{font-size:11px;color:var(--g);margin-top:2px;line-height:1.4;}
.cafe-item-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
.cafe-item-price{font-family:var(--fh);font-size:16px;font-weight:700;color:var(--y);}
.cafe-add-btn{
  padding:7px 18px;border-radius:20px;border:1px solid var(--y);
  background:transparent;color:var(--y);font-size:12px;font-weight:700;
  cursor:pointer;transition:all .25s;font-family:var(--fm);letter-spacing:.3px;
}
.cafe-add-btn:hover{background:linear-gradient(135deg,var(--y),#B5952F);color:var(--blk);box-shadow:0 0 14px var(--y-glow);}

/* ═══ EVENTS TAB ═══ */
.events-hero{padding:16px 0 8px;}
.events-hero-card{
  position:relative;border-radius:var(--r-lg);overflow:hidden;padding:32px 24px;
  background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(80,40,180,.25));
  border:1px solid rgba(139,92,246,.12);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.events-hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(139,92,246,.1),transparent 60%);}
.events-hero-text{position:relative;z-index:1;}
.events-hero-tag{font-size:9px;font-weight:700;letter-spacing:3px;color:var(--purple);background:rgba(139,92,246,.1);padding:4px 12px;border-radius:6px;font-family:var(--fm);}
.events-hero-title{display:block;font-family:var(--fh);font-size:24px;font-weight:300;margin-top:12px;letter-spacing:-.5px;}
.events-hero-sub{display:block;font-size:13px;color:var(--g);margin-top:6px;}

.events-list{padding:8px 0;}
.event-card{
  display:flex;gap:14px;padding:18px;margin-bottom:12px;
  background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);border-radius:20px;
  cursor:pointer;transition:all .25s;
}
.event-card:hover{border-color:rgba(139,92,246,.2);box-shadow:0 0 16px rgba(139,92,246,.06);}
.event-date-badge{
  width:56px;height:60px;border-radius:14px;flex-shrink:0;
  background:rgba(139,92,246,.08);
  border:1px solid rgba(139,92,246,.15);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.event-day{font-family:var(--fh);font-size:22px;font-weight:700;color:var(--purple);line-height:1;}
.event-month{font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--g);margin-top:2px;}
.event-info{flex:1;min-width:0;}
.event-tag{
  display:inline-block;font-size:9px;font-weight:700;letter-spacing:1.5px;
  padding:3px 10px;border-radius:6px;
  background:rgba(239,68,68,.08);color:#F87171;margin-bottom:6px;font-family:var(--fm);
}
.event-tag.car-meet{background:rgba(59,130,246,.08);color:#60A5FA;}
.event-tag.workshop{background:rgba(34,197,94,.08);color:#4ADE80;}
.event-name{font-family:var(--fh);font-size:15px;font-weight:500;margin-bottom:4px;letter-spacing:-.2px;}
.event-venue{font-size:11px;color:var(--g);display:flex;align-items:center;gap:4px;}
.event-bottom{display:flex;align-items:center;gap:12px;margin-top:10px;}
.event-price{font-family:var(--fh);font-size:15px;font-weight:700;color:var(--y);}
.event-seats{font-size:11px;color:var(--g);}

/* ═══ QUICK ACCESS ═══ */
.dash-quick{padding:20px 0;}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 20px;}
.quick-item{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:18px 8px;border-radius:20px;
  background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);cursor:pointer;transition:all .25s;
}
.quick-item:hover{border-color:rgba(212,175,55,.2);box-shadow:0 0 14px var(--y-glow);}
.quick-item svg{stroke:var(--y);stroke-width:1.5;}
.quick-item span{font-size:10px;font-weight:600;color:var(--g);letter-spacing:.3px;}

/* ═══ REDESIGNED HOME v4 ═══ */

/* Search Bar */
.mp-search{display:flex;align-items:center;gap:10px;padding:6px 20px 14px;position:relative;z-index:10;margin-top:62px;}
.mp-search-input{flex:1;background:var(--card-solid);border:1px solid var(--card-border);border-radius:12px;padding:10px 14px;color:var(--g);font-size:13px;display:flex;align-items:center;gap:8px;position:relative;}
.mp-search-input input{background:transparent;border:none;outline:none;color:var(--w);font-size:13px;font-family:var(--fm);flex:1;width:100%;}
.mp-search-input input::placeholder{color:var(--g);}
.mp-search-input i{font-size:15px;color:rgba(255,255,255,.3);flex-shrink:0;}
.mp-search-input .loc-dropdown{position:absolute;top:100%;left:0;right:0;z-index:50;}
.mp-gps-btn{width:40px;height:40px;flex-shrink:0;background:var(--y);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .2s;}
.mp-gps-btn:hover{opacity:.85;}
.mp-gps-btn i{font-size:18px;color:var(--blk);}

/* Greeting */
.mp-greeting{padding:4px 20px 14px;position:relative;z-index:10;}
.mp-greeting h1{font-family:var(--fh);font-size:26px;font-weight:700;color:var(--w);line-height:1.2;}
.mp-greeting p{font-size:13px;color:var(--g);margin-top:3px;}

/* Quick Grid */
.mp-quick-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:0 20px;margin-bottom:20px;position:relative;z-index:10;}
.mp-quick-card{background:var(--card-solid);border:1px solid var(--card-border);border-radius:14px;padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;transition:all .2s;-webkit-tap-highlight-color:transparent;}
.mp-quick-card.active-v{border-color:var(--y);}
.mp-quick-card:active{transform:scale(.97);}
.mp-qi{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;}
.mp-qi.yellow{background:rgba(245,197,24,0.15);}
.mp-qi.blue{background:rgba(74,158,255,0.15);}
.mp-qi.pink{background:rgba(255,100,140,0.15);}
.mp-qi i{font-size:22px;}
.mp-qi.yellow i{color:var(--y);}
.mp-qi.blue i{color:#4A9EFF;}
.mp-qi.pink i{color:#FF648C;}
.mp-ql{font-size:11px;font-weight:600;color:var(--g);text-align:center;}
.mp-qs{font-size:10px;color:rgba(255,255,255,.25);text-align:center;}

/* Tab Switcher */
.mp-tabs{display:flex;gap:8px;padding:0 20px 16px;position:relative;z-index:10;}
.mp-tab{display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:30px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;border:1.5px solid transparent;-webkit-tap-highlight-color:transparent;font-family:var(--fm);}
.mp-tab.active{background:var(--y);color:var(--blk);}
.mp-tab:not(.active){background:var(--card-solid);border-color:var(--card-border);color:var(--g);}
.mp-tab:not(.active):hover{border-color:rgba(245,197,24,.3);color:var(--y);}
.mp-tab i{font-size:14px;}

/* Active Booking */
.mp-active-booking{margin:0 20px 16px;background:var(--card-solid);border:1px solid var(--card-border);border-left:3px solid var(--y);border-radius:12px;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:10;}
.mp-ab-left{display:flex;flex-direction:column;gap:2px;cursor:pointer;}
.mp-ab-label{font-size:10px;font-weight:600;letter-spacing:0.8px;color:var(--y);text-transform:uppercase;}
.mp-ab-title{font-size:15px;font-weight:600;color:var(--w);font-family:var(--fh);}
.mp-ab-status{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--g);margin-top:2px;}
.mp-ab-dot{width:7px;height:7px;border-radius:50%;background:var(--green);}
.mp-ab-track{font-size:13px;font-weight:600;color:var(--y);cursor:pointer;}

/* Promo Banner */
.mp-promo-section{padding:0 20px;position:relative;z-index:10;}
.mp-promo-card{background:linear-gradient(135deg,#1C2A6B 0%,#0F1744 100%);border-radius:16px;padding:20px;position:relative;overflow:hidden;min-height:110px;cursor:pointer;transition:transform .2s;}
.mp-promo-card:active{transform:scale(.98);}
.mp-promo-badge{display:inline-block;background:rgba(245,197,24,0.2);color:var(--y);font-size:10px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:3px 8px;border-radius:4px;margin-bottom:6px;}
.mp-promo-title{font-family:var(--fh);font-size:20px;font-weight:800;color:var(--w);line-height:1.2;}
.mp-promo-sub{font-size:12px;color:rgba(255,255,255,0.6);margin-top:3px;}
.mp-promo-car{position:absolute;right:-10px;bottom:8px;opacity:0.5;}
.mp-promo-dots{display:flex;gap:6px;justify-content:center;margin:10px 0 18px;}
.mp-promo-dot{width:6px;height:3px;border-radius:2px;background:var(--card-border);}
.mp-promo-dot.active{width:20px;background:var(--y);}

/* Section Header */
.mp-sec-header{display:flex;align-items:center;justify-content:space-between;padding:0 20px;margin-bottom:12px;}
.mp-sec-title{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--g);letter-spacing:1.2px;text-transform:uppercase;}
.mp-sec-title::before{content:'//';color:var(--y);}
.mp-see-all{font-size:12px;color:var(--y);font-weight:600;cursor:pointer;}

/* Service Card (v4) */
.mp-service-card{margin:0 20px 10px;background:var(--card-solid);border:1px solid var(--card-border);border-radius:14px;padding:16px;cursor:pointer;transition:all .2s;}
.mp-service-card:hover{border-color:rgba(245,197,24,.2);}
.mp-service-card:active{transform:scale(.98);}
.mp-svc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.mp-svc-icon{width:36px;height:36px;border-radius:10px;background:rgba(245,197,24,0.1);display:flex;align-items:center;justify-content:center;}
.mp-svc-icon i{font-size:18px;color:var(--y);}
.mp-svc-price{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--w);font-family:var(--fh);}
.mp-svc-dur{font-size:11px;font-weight:500;color:var(--g);background:rgba(34,34,34,1);padding:2px 7px;border-radius:6px;}
.mp-svc-name{font-size:15px;font-weight:700;color:var(--w);font-family:var(--fh);margin-bottom:4px;}
.mp-svc-desc{font-size:12px;color:var(--g);line-height:1.5;}
.mp-svc-link{margin-top:10px;font-size:12px;font-weight:700;color:var(--y);display:flex;align-items:center;gap:4px;}

/* Skeleton */
.mp-srv-skeleton{margin:0 20px 10px;height:120px;background:linear-gradient(110deg,var(--card-solid) 30%,rgba(255,255,255,.03) 50%,var(--card-solid) 70%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:14px;border:1px solid var(--card-border);}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Cafe Scroll */
.mp-cafe-scroll{display:flex;gap:12px;padding:0 20px;overflow-x:auto;scrollbar-width:none;margin-bottom:20px;-webkit-overflow-scrolling:touch;}
.mp-cafe-scroll::-webkit-scrollbar{display:none;}
.mp-cafe-card{min-width:140px;flex-shrink:0;background:var(--card-solid);border:1px solid var(--card-border);border-radius:14px;padding:12px;cursor:pointer;transition:all .2s;}
.mp-cafe-card:hover{border-color:rgba(245,197,24,.2);}
.mp-cafe-img{width:100%;height:70px;border-radius:8px;background:rgba(34,34,34,1);display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.mp-cafe-name{font-size:13px;font-weight:600;color:var(--w);margin-bottom:2px;}
.mp-cafe-price{font-size:12px;color:var(--y);font-weight:700;}
.mp-cafe-tag{font-size:10px;color:rgba(255,255,255,.3);background:rgba(34,34,34,1);padding:2px 6px;border-radius:4px;display:inline-block;margin-top:4px;}

/* Event Card */
.mp-event-card{margin:0 20px 10px;background:var(--card-solid);border:1px solid var(--card-border);border-radius:14px;padding:14px 16px;display:flex;gap:14px;align-items:center;cursor:pointer;transition:all .2s;}
.mp-event-card:hover{border-color:rgba(245,197,24,.2);}
.mp-event-card:active{transform:scale(.98);}
.mp-ev-date{min-width:44px;border-radius:10px;background:rgba(245,197,24,0.1);padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:1px;}
.mp-ev-month{font-size:9px;font-weight:700;color:var(--y);text-transform:uppercase;letter-spacing:0.5px;}
.mp-ev-day{font-size:22px;font-weight:800;color:var(--w);font-family:var(--fh);line-height:1;}
.mp-ev-info{flex:1;}
.mp-ev-name{font-size:14px;font-weight:700;color:var(--w);font-family:var(--fh);margin-bottom:3px;}
.mp-ev-loc{font-size:11px;color:var(--g);display:flex;align-items:center;gap:4px;}
.mp-ev-loc i{font-size:12px;}
.mp-ev-price{background:rgba(76,175,125,0.15);color:var(--green);font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap;}

/* Bottom nav active dot */
.bnav-dot{width:4px;height:4px;border-radius:50%;background:var(--y);margin-top:-2px;}
.bottom-nav-icon i{font-size:22px;}

/* ══════ KEYFRAMES ══════ */
@keyframes fup{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes ping{0%{opacity:.6;transform:scale(1)}70%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
@keyframes scrollPulse{0%,100%{opacity:.3}50%{opacity:.8}}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ══════ RESPONSIVE ══════ */
@media(max-width:900px){
  nav ul{display:none;}
  .nav-profile-btn{display:flex;}
  .bottom-nav{display:block;}
  body{padding-bottom:72px;}
  nav{padding:12px 20px;}
  .dash-location-bar{top:52px;}
  .dash-greeting{padding-top:124px;}
  .highlights-grid,.hiw-steps,.pricing-grid,.testi-grid,.blog-grid{grid-template-columns:1fr;}
  .srv-grid,.sub-grid,.team-grid,.about-hero,.contact-wrap,.form-grid{grid-template-columns:1fr;}
  .blog-featured{grid-template-columns:1fr;}
  .hero{padding:100px 20px 80px;min-height:calc(100vh - 72px);}
  .hero-title{font-size:clamp(36px,10vw,64px);}
  .hero-sub{font-size:14px;}
  .container,.srv-hero,.book-hero,.legal-wrap,.form-wrap,.contact-wrap,.track-hero,.track-content{padding-left:20px;padding-right:20px;}
  .stats-row{flex-wrap:wrap;padding:0 20px!important;}
  .stat-item{flex:1 1 50%;border-right:none;border-bottom:1px solid var(--border);padding:20px 16px;}
  .stat-n{font-size:28px;}
  .time-slots{grid-template-columns:repeat(2,1fr);}
  .pay-opts{flex-direction:column;}
  .pricing-grid{margin:0 20px!important;}
  .about-values{grid-template-columns:1fr;}
  .sec{padding:48px 0;}
  .sec-title{font-size:clamp(24px,6vw,40px);margin-bottom:28px;}
  .hero-scroll{display:none;}
  .hl-card{padding:24px 20px;}
  .srv-card{padding:28px 20px;}
  .blog-featured{padding:24px;}
  .bf-title{font-size:24px;}
  .bf-img{height:200px;}
  .contact-wrap{gap:32px;padding-top:100px;}
  .about-hero{padding-top:100px;gap:32px;}
  .about-img-box{height:240px;}
  .track-input-wrap{flex-direction:column;}
  .track-status-bar{flex-wrap:wrap;gap:8px;}
  .track-step{flex:none;width:calc(50% - 4px);}
  .book-hero,.srv-hero,.track-hero{padding-top:100px;}
  .form-wrap{padding:32px 20px;}
  .pwa-install{bottom:88px;}
}

@media(max-width:480px){
  .hero-title{font-size:clamp(32px,12vw,48px);}
  .btn-y,.btn-ghost{font-size:12px;padding:12px 20px;}
  .highlights-grid{gap:12px;}
  .pricing-grid{gap:12px;}
  .blog-card .blog-body{padding:16px;}
}

/* ════════════════════════════════════════════════
   SWIGGY-STYLE ELEVATED ICON TABS (Quick Grid)
   ════════════════════════════════════════════════ */
.mp-quick-grid.swiggy{
  display:flex; gap:6px;
  padding:8px 12px 0; margin-bottom:0;
  overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  position:relative; z-index:10;
}
.mp-quick-grid.swiggy::-webkit-scrollbar{display:none;}
.mp-quick-grid.swiggy .mp-quick-card{
  min-width:0; flex:1 1 0;
  background:transparent;
  border:none;
  border-radius:0;
  padding:10px 4px 12px;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  cursor:pointer; transition:all .25s cubic-bezier(.4,0,.2,1);
  border-bottom:2px solid transparent;
  position:relative;
  overflow:visible;
}
.mp-quick-grid.swiggy .mp-quick-card.active-v{
  background:transparent;
  border-bottom-color:var(--y);
  transform:translateY(-2px);
}
.mp-quick-grid.swiggy .mp-quick-card .mp-qi3d{
  width:88px; height:88px;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  border:none;
  box-shadow:none;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), filter .25s;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,0.55));
}
.mp-quick-grid.swiggy .mp-quick-card .mp-qi3d img{
  width:100%; height:100%; object-fit:contain;
  display:block;
}
.mp-quick-grid.swiggy .mp-quick-card.active-v .mp-qi3d{
  transform:translateY(-4px) scale(1.06);
}
.mp-quick-grid.swiggy .mp-quick-card[data-tab="carwash"].active-v .mp-qi3d{filter:drop-shadow(0 10px 18px rgba(245,197,24,0.45));}
.mp-quick-grid.swiggy .mp-quick-card[data-tab="cafe"].active-v .mp-qi3d{filter:drop-shadow(0 10px 18px rgba(74,158,255,0.45));}
.mp-quick-grid.swiggy .mp-quick-card[data-tab="events"].active-v .mp-qi3d{filter:drop-shadow(0 10px 18px rgba(255,122,182,0.45));}

.mp-quick-grid.swiggy .mp-quick-card .mp-qi{
  width:54px; height:64px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  background:rgba(245,197,24,0.10);
  box-shadow:0 2px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
  transition:transform .2s, filter .2s;
  overflow:hidden;
}
.mp-quick-grid.swiggy .mp-quick-card .mp-qi.img{
  background:transparent;
  box-shadow:none;
  width:64px; height:80px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.45));
}
.mp-quick-grid.swiggy .mp-quick-card .mp-qi.img img{
  width:100%; height:100%; object-fit:contain;
  display:block;
}
.mp-quick-grid.swiggy .mp-quick-card.active-v .mp-qi{
  transform:scale(1.04);
  box-shadow:0 4px 14px rgba(245,197,24,0.20), inset 0 1px 0 rgba(255,255,255,0.08);
}
.mp-quick-grid.swiggy .mp-quick-card.active-v .mp-qi.img{
  transform:translateY(-3px) scale(1.06);
  box-shadow:none;
  filter:drop-shadow(0 8px 18px rgba(245,197,24,0.35));
}
.mp-quick-grid.swiggy .mp-quick-card[data-tab="cafe"].active-v .mp-qi.img{filter:drop-shadow(0 8px 18px rgba(74,158,255,0.45));}
.mp-quick-grid.swiggy .mp-quick-card[data-tab="events"].active-v .mp-qi.img{filter:drop-shadow(0 8px 18px rgba(255,122,182,0.45));}
.mp-quick-grid.swiggy .mp-qi.yellow{color:var(--y); background:rgba(245,197,24,0.13);}
.mp-quick-grid.swiggy .mp-qi.blue{color:var(--blue); background:rgba(74,158,255,0.11);}
.mp-quick-grid.swiggy .mp-qi.pink{color:#FF7AB6; background:rgba(255,122,182,0.11);}
.mp-quick-grid.swiggy .mp-ql{
  font-family:var(--fh); font-size:12px; font-weight:700;
  letter-spacing:.2px; color:var(--w);
  white-space:nowrap;
}
.mp-quick-grid.swiggy .mp-qs{
  font-size:8.5px; color:var(--g); letter-spacing:.3px;
  text-transform:uppercase; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}
.mp-quick-grid.swiggy .mp-quick-card:active{transform:scale(.96);}

/* Tighter on smaller phones */
@media (max-width:380px){
  .mp-quick-grid.swiggy{gap:4px; padding:6px 8px 0;}
  .mp-quick-grid.swiggy .mp-quick-card{padding:10px 4px 8px;}
  .mp-quick-grid.swiggy .mp-quick-card .mp-qi{width:48px; height:58px; font-size:16px; border-radius:10px;}
  .mp-quick-grid.swiggy .mp-quick-card .mp-qi.img{width:56px; height:70px;}
  .mp-quick-grid.swiggy .mp-ql{font-size:11px;}
  .mp-quick-grid.swiggy .mp-qs{font-size:8px;}
}

/* ════════════════════════════════════════════════
   CAFÉ — Toolbar (status + veg toggle)
   ════════════════════════════════════════════════ */
.cf-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:8px 20px 4px;
}
.cf-status-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:20px;
  font-size:11px; font-weight:700; letter-spacing:.5px;
  text-transform:uppercase;
}
.cf-status-badge.open{
  background:rgba(76,175,125,0.15); color:var(--green);
  border:1px solid rgba(76,175,125,0.3);
}
.cf-status-badge.open::before{
  content:''; width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 8px var(--green);
  animation:pulse-dot 2s ease infinite;
}
.cf-status-badge.closed{
  background:rgba(248,113,113,0.12); color:var(--red);
  border:1px solid rgba(248,113,113,0.3);
}
@keyframes pulse-dot{0%,100%{opacity:1;}50%{opacity:.4;}}

.cf-veg-toggle{
  display:flex; align-items:center; gap:6px;
  padding:6px 10px; background:var(--card-solid);
  border:1px solid var(--card-border); border-radius:20px;
  cursor:pointer; user-select:none;
  font-size:11px; font-weight:700; letter-spacing:.5px;
  color:var(--g);
}
.cf-veg-toggle .cf-veg-text{transition:color .15s;}
.cf-veg-toggle .cf-veg-switch{
  width:24px; height:14px; background:rgba(255,255,255,0.1);
  border-radius:10px; position:relative; transition:background .15s;
}
.cf-veg-toggle .cf-veg-switch::after{
  content:''; position:absolute; left:2px; top:2px;
  width:10px; height:10px; border-radius:50%; background:var(--g);
  transition:all .2s;
}
.cf-veg-toggle.on{border-color:rgba(76,175,125,0.5);}
.cf-veg-toggle.on .cf-veg-text{color:var(--green);}
.cf-veg-toggle.on .cf-veg-switch{background:rgba(76,175,125,0.3);}
.cf-veg-toggle.on .cf-veg-switch::after{
  left:12px; background:var(--green); box-shadow:0 0 4px var(--green);
}

/* Veg/Non-veg dot */
.cf-veg-dot{
  display:inline-block; width:12px; height:12px;
  border:1.5px solid currentColor;
  border-radius:3px; position:relative;
  flex-shrink:0;
}
.cf-veg-dot::after{
  content:''; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:5px; height:5px; border-radius:50%;
}
.cf-veg-dot.veg{color:var(--green);}
.cf-veg-dot.veg::after{background:var(--green);}
.cf-veg-dot.nonveg{color:var(--red);}
.cf-veg-dot.nonveg::after{background:var(--red);}

/* Café search */
.cf-search{
  display:flex; align-items:center; gap:10px;
  margin:8px 20px 14px;
  background:var(--card-solid);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:11px 14px;
}
.cf-search i{font-size:15px; color:var(--g);}
.cf-search input{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--w); font-size:13px; font-family:var(--fm);
}
.cf-search input::placeholder{color:var(--g);}

/* Deal cards row */
.cf-deals{
  display:flex; gap:12px; padding:0 20px 18px;
  overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.cf-deals::-webkit-scrollbar{display:none;}
.cf-deal-card{
  min-width:140px; flex-shrink:0;
  border-radius:16px; padding:16px 14px;
  display:flex; flex-direction:column; justify-content:space-between;
  position:relative; overflow:hidden;
  min-height:104px;
  cursor:pointer; transition:transform .2s;
}
.cf-deal-card:active{transform:scale(.96);}
.cf-deal-card.d1{background:linear-gradient(135deg,#3A2E0A 0%,#1A1A1A 100%); border:1px solid rgba(245,197,24,0.25);}
.cf-deal-card.d2{background:linear-gradient(135deg,#1F3A2A 0%,#1A1A1A 100%); border:1px solid rgba(76,175,125,0.25);}
.cf-deal-card.d3{background:linear-gradient(135deg,#1A2A4A 0%,#1A1A1A 100%); border:1px solid rgba(74,158,255,0.25);}
.cf-deal-card.d4{background:linear-gradient(135deg,#3A1A2C 0%,#1A1A1A 100%); border:1px solid rgba(255,122,182,0.25);}
.cf-deal-title{font-size:11px; color:var(--g); text-transform:uppercase; letter-spacing:.8px; font-weight:600;}
.cf-deal-sub{font-family:var(--fh); font-size:20px; font-weight:800; color:var(--w); margin-top:4px;}
.cf-deal-tag{font-size:9px; color:var(--y); letter-spacing:.6px; font-weight:700; margin-top:6px;}
.cf-deal-card.d2 .cf-deal-tag{color:var(--green);}
.cf-deal-card.d3 .cf-deal-tag{color:var(--blue);}
.cf-deal-card.d4 .cf-deal-tag{color:#FF7AB6;}

/* Bestsellers horizontal scroll */
.cf-bestsellers{
  display:flex; gap:12px; padding:0 20px 18px;
  overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.cf-bestsellers::-webkit-scrollbar{display:none;}
.cf-best-card{
  min-width:170px; flex-shrink:0;
  background:var(--card-solid);
  border:1px solid var(--card-border);
  border-radius:16px; overflow:hidden;
  cursor:pointer; transition:all .2s;
  position:relative;
}
.cf-best-card:active{transform:scale(.97);}
.cf-best-card:hover{border-color:rgba(245,197,24,0.3);}
.cf-best-img{
  height:90px; background:linear-gradient(135deg, rgba(245,197,24,0.08), rgba(26,26,26,1));
  display:flex; align-items:center; justify-content:center;
  position:relative;
  font-size:32px; color:var(--y);
  overflow:hidden;
}
.cf-best-img.has-photo{background:#0c0c0c;}
.cf-best-img img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.cf-best-img .cf-veg-dot{
  position:absolute; top:8px; left:8px;
  background:rgba(0,0,0,0.5); padding:1px; border-radius:3px;
}
.cf-best-info{padding:10px 12px;}
.cf-best-name{
  font-size:13px; font-weight:700; color:var(--w);
  font-family:var(--fh); margin-bottom:4px;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
  overflow:hidden;
}
.cf-best-row{display:flex; align-items:center; justify-content:space-between;}
.cf-best-price{font-size:13px; font-weight:700; color:var(--y);}
.cf-best-tag{
  font-size:9px; color:var(--y); font-weight:700;
  display:inline-flex; align-items:center; gap:3px;
  letter-spacing:.4px;
}
.cf-best-tag i{font-size:11px;}
.cf-best-qty{
  background:rgba(76,175,125,0.15); color:var(--green);
  font-size:10px; font-weight:700; padding:4px 10px;
  text-align:center; letter-spacing:.5px;
}

/* Category pills */
.cf-cat-pills{
  display:flex; gap:8px; padding:0 20px 14px;
  overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.cf-cat-pills::-webkit-scrollbar{display:none;}
.cf-cat-pill{
  padding:8px 14px; border-radius:18px;
  background:var(--card-solid); border:1px solid var(--card-border);
  color:var(--g); font-size:12px; font-weight:600;
  font-family:var(--fm); cursor:pointer;
  white-space:nowrap; transition:all .15s;
  -webkit-tap-highlight-color:transparent;
}
.cf-cat-pill:active{transform:scale(.95);}
.cf-cat-pill.active{
  background:var(--y); border-color:var(--y); color:var(--blk);
}

/* Item rows */
.cf-items-grid{padding:0 20px;}
.cf-empty{padding:30px 20px; text-align:center; color:var(--g); font-size:13px;}
.cf-item-row{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px 0; border-bottom:1px solid var(--border);
}
.cf-item-row:last-child{border-bottom:none;}
.cf-item-info{flex:1; cursor:pointer; min-width:0;}
.cf-item-head{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.cf-best-pill{
  font-size:9px; padding:2px 6px; border-radius:4px;
  background:rgba(245,197,24,0.12); color:var(--y);
  font-weight:700; letter-spacing:.4px;
}
.cf-item-name{font-size:14px; font-weight:700; color:var(--w); font-family:var(--fh); margin-bottom:2px;}
.cf-item-price{font-size:13px; font-weight:700; color:var(--y); margin-bottom:4px;}
.cf-item-desc{
  font-size:11.5px; color:var(--g); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.cf-item-action{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:96px; flex-shrink:0; position:relative;
}
.cf-item-thumb{
  width:96px; height:96px; border-radius:14px;
  background:linear-gradient(135deg, rgba(245,197,24,0.08), rgba(26,26,26,1));
  border:1px solid var(--card-border);
  display:flex; align-items:center; justify-content:center;
  font-size:36px; color:var(--y);
  overflow:hidden;
}
.cf-item-thumb.has-photo{background:#0c0c0c;}
.cf-item-thumb img{width:100%; height:100%; object-fit:cover;}
.cf-add-btn{
  position:absolute; bottom:-12px; left:50%; transform:translateX(-50%);
  background:var(--card-solid); color:var(--green);
  border:1.5px solid var(--green);
  padding:6px 24px; border-radius:8px;
  font-family:var(--fh); font-size:12px; font-weight:800;
  letter-spacing:1px; cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
  transition:transform .15s;
  white-space:nowrap;
}
.cf-add-btn:active{transform:translateX(-50%) scale(.95);}
.cf-add-btn:hover:not(.disabled){background:var(--green); color:#fff;}
.cf-add-btn.disabled{opacity:.4; cursor:not-allowed; color:var(--g); border-color:var(--g);}

.cf-qty-ctrl{
  position:absolute; bottom:-12px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:0;
  background:var(--green); border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
  overflow:hidden;
}
.cf-qty-ctrl button{
  background:transparent; border:none; color:#fff;
  width:30px; height:30px; font-size:18px; font-weight:700;
  cursor:pointer; transition:background .15s;
}
.cf-qty-ctrl button:active{background:rgba(0,0,0,0.2);}
.cf-qty-ctrl span{
  color:#fff; font-weight:800; font-size:13px; min-width:22px; text-align:center;
}
.cf-qty-ctrl.small{position:static; transform:none;}
.cf-qty-ctrl.small button{width:26px; height:26px; font-size:15px;}
.cf-qty-ctrl.big{position:static; transform:none; width:auto;}
.cf-qty-ctrl.big button{width:44px; height:44px; font-size:22px;}
.cf-qty-ctrl.big span{font-size:18px; padding:0 16px;}

/* ════════════════════════════════════════════════
   CART FAB
   ════════════════════════════════════════════════ */
.cf-cart-fab{
  position:fixed;
  left:16px; right:16px; bottom:88px;
  background:var(--green); color:#fff;
  border-radius:14px; padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--fh); font-weight:700; font-size:14px;
  box-shadow:0 8px 28px rgba(76,175,125,0.4), 0 0 0 1px rgba(255,255,255,0.05);
  z-index:300; cursor:pointer;
  animation:slideUpFab .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes slideUpFab{from{transform:translateY(120%);opacity:0;}to{transform:translateY(0);opacity:1;}}
.cf-cart-fab:active{transform:scale(.97);}
.cf-fab-left{display:flex; align-items:center; gap:10px;}
.cf-fab-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:24px; padding:0 8px;
  background:rgba(0,0,0,0.25); border-radius:12px;
  font-size:12px; font-weight:800;
}
.cf-fab-text{letter-spacing:.4px;}
.cf-fab-right{display:flex; align-items:center; gap:4px; font-size:13px; letter-spacing:.5px;}

/* ── Bottom padding so the last menu item isn't hidden behind the cart FAB + bottom nav ── */
#hub-cafe{ padding-bottom: 180px; }
#hub-cafe.has-cart-fab{ padding-bottom: 220px; }

/* ── Cart sheet: unified "Proceed to Checkout" button ── */
.cf-cart-proceed{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:14px; padding:15px; margin-bottom:8px;
}
.cf-cart-proceed i{ font-size:18px; }

/* ── Delivery address card (Swiggy-style) ── */
.cf-address-card{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--card-border); border-radius:14px;
}
.cf-address-card > i:first-child{ color:var(--y); font-size:22px; flex-shrink:0; }
.cf-address-text{ flex:1; font-size:13px; color:var(--w); line-height:1.45; word-break:break-word; }
.cf-address-change{
  background:transparent; border:1px solid rgba(245,197,24,0.4); color:var(--y);
  border-radius:8px; padding:6px 12px; font-size:11px; font-weight:800;
  letter-spacing:1.2px; text-transform:uppercase; cursor:pointer;
  flex-shrink:0; transition:background .15s;
}
.cf-address-change:hover{ background:rgba(245,197,24,0.1); }
.cf-address-empty{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  background:rgba(255,90,90,0.05);
  border:1px dashed rgba(255,90,90,0.35); border-radius:14px;
  cursor:pointer; transition:background .15s;
}
.cf-address-empty:hover{ background:rgba(255,90,90,0.10); }
.cf-address-empty > i:first-child{ color:#FF7B7B; font-size:22px; flex-shrink:0; }
.cf-address-empty-title{ font-size:13px; font-weight:700; color:var(--w); }
.cf-address-empty-sub{ font-size:11px; color:var(--g); margin-top:2px; }
.cf-address-empty > i:last-child{ color:var(--g); font-size:18px; }

/* ── Payment method radio list (Swiggy-style) ── */
.cf-pay-radio-list{ display:flex; flex-direction:column; gap:8px; }
.cf-pay-radio{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--card-border); border-radius:14px;
  cursor:pointer; transition:border-color .15s, background .15s;
  position:relative;
}
.cf-pay-radio:hover{ border-color:rgba(245,197,24,0.35); }
.cf-pay-radio.selected{ border-color:var(--y); background:rgba(245,197,24,0.06); }
.cf-pay-radio input[type=radio]{ display:none; }
.cf-pay-radio-icon{ font-size:22px; color:var(--y); flex-shrink:0; }
.cf-pay-radio-info{ flex:1; min-width:0; }
.cf-pay-radio-title{ font-size:14px; font-weight:700; color:var(--w); }
.cf-pay-radio-sub{ font-size:11px; color:var(--g); margin-top:2px; }
.cf-pay-radio-check{
  width:22px; height:22px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.2);
  display:grid; place-items:center;
  font-size:13px; color:transparent; transition:all .15s;
  flex-shrink:0;
}
.cf-pay-radio.selected .cf-pay-radio-check{
  border-color:var(--y); background:var(--y); color:#0A0A0A;
}

body.theme-light .cf-address-card,
body.theme-light .cf-pay-radio{ background:#FAFAFA; border-color:#E5E5E5; }
body.theme-light .cf-pay-radio.selected{ background:#FFFBEA; border-color:var(--y); }

/* ════════════════════════════════════════════════
   BOTTOM SHEET
   ════════════════════════════════════════════════ */
.cf-sheet-overlay{
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.7); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:none; align-items:flex-end; justify-content:center;
  animation:fadeInSheet .2s ease;
}
.cf-sheet-overlay.show{display:flex;}
@keyframes fadeInSheet{from{opacity:0;}to{opacity:1;}}
.cf-sheet{
  width:100%; max-width:520px;
  background:#171717;
  border-top-left-radius:24px; border-top-right-radius:24px;
  padding:14px 20px 30px;
  max-height:88vh; overflow-y:auto;
  animation:slideUpSheet .3s cubic-bezier(.34,1.56,.64,1);
  position:relative;
}
@keyframes slideUpSheet{from{transform:translateY(100%);}to{transform:translateY(0);}}
.cf-sheet-handle{
  width:48px; height:4px; background:rgba(255,255,255,0.18);
  border-radius:2px; margin:0 auto 14px;
}
.cf-sheet-close{
  position:absolute; top:14px; right:18px;
  background:rgba(255,255,255,0.08); border:none; color:var(--w);
  width:32px; height:32px; border-radius:50%;
  font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.cf-sheet-thumb{
  width:100%; height:160px; border-radius:16px;
  background:linear-gradient(135deg, rgba(245,197,24,0.1), rgba(26,26,26,1));
  display:flex; align-items:center; justify-content:center;
  font-size:64px; color:var(--y); margin-bottom:16px;
  overflow:hidden;
}
.cf-sheet-thumb.has-photo{background:#0c0c0c;}
.cf-sheet-thumb img{width:100%; height:100%; object-fit:cover;}
.cf-sheet-veg{display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--g); font-weight:600; margin-bottom:8px;}
.cf-sheet-name{font-family:var(--fh); font-size:22px; font-weight:700; color:var(--w); margin-bottom:4px;}
.cf-sheet-price{font-size:18px; font-weight:800; color:var(--y); margin-bottom:10px;}
.cf-sheet-desc{font-size:13px; color:var(--g); line-height:1.6; margin-bottom:14px;}
.cf-sheet-tag{display:inline-block; padding:4px 10px; background:rgba(245,197,24,0.12); color:var(--y); font-size:11px; font-weight:700; border-radius:14px; margin-bottom:18px;}
.cf-sheet-action{display:flex; justify-content:center; margin-top:12px;}
.cf-sheet-add{width:100%; max-width:280px; font-size:14px; padding:14px;}
.cf-sheet-add.disabled{opacity:.5; cursor:not-allowed;}

/* Cart sheet */
.cf-cart-sheet-inner{max-height:92vh;}
.cf-sheet-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
  font-family:var(--fh); font-size:14px; font-weight:800;
  letter-spacing:1px; color:var(--w);
}
.cf-cart-items{margin-bottom:18px;}
.cf-cart-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--border);
}
.cf-cart-row:last-child{border-bottom:none;}
.cf-cart-name{flex:1; font-size:13px; color:var(--w); font-weight:600;}
.cf-cart-price{font-weight:700; color:var(--y); font-size:13px; min-width:50px; text-align:right;}
.cf-cart-summary{
  background:var(--card-solid); border:1px solid var(--card-border);
  border-radius:12px; padding:14px 16px; margin-bottom:14px;
}
.cf-cart-line{
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color:var(--g); padding:4px 0;
}
.cf-cart-line.total{
  margin-top:8px; padding-top:10px; border-top:1px solid var(--border);
  font-family:var(--fh); font-size:16px; font-weight:800; color:var(--w);
}
.cf-cart-line.total span:last-child{color:var(--y);}

.cf-pay-options{display:flex; flex-direction:column; gap:10px; margin-bottom:12px;}
.cf-pay-opt{
  display:flex; align-items:center; gap:12px;
  background:var(--card-solid); border:1.5px solid var(--card-border);
  padding:14px 16px; border-radius:14px;
  cursor:pointer; transition:all .15s;
  text-align:left; width:100%;
  color:var(--w); font-family:var(--fm);
}
.cf-pay-opt:active{transform:scale(.98);}
.cf-pay-opt:hover{border-color:var(--y); background:rgba(245,197,24,0.05);}
.cf-pay-opt i{font-size:24px; color:var(--y); flex-shrink:0;}
.cf-pay-title{font-family:var(--fh); font-size:14px; font-weight:700; color:var(--w); margin-bottom:2px;}
.cf-pay-sub{font-size:11px; color:var(--g);}

.cf-cart-clear{
  width:100%; background:transparent; border:1px solid var(--card-border);
  color:var(--g); font-size:12px; font-weight:600; padding:10px;
  border-radius:10px; cursor:pointer; transition:all .15s;
}
.cf-cart-clear:hover{color:var(--red); border-color:rgba(248,113,113,0.4);}

/* ════════════════════════════════════════════════
   ORDER SUCCESS OVERLAY
   ════════════════════════════════════════════════ */
.cf-success-overlay{
  position:fixed; inset:0; z-index:1100;
  background:rgba(0,0,0,0.85); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.cf-success-overlay.show{display:flex;}
.cf-success-card{
  background:#171717; border:1px solid var(--card-border);
  border-radius:24px; padding:36px 28px;
  max-width:380px; width:100%;
  text-align:center;
  animation:popIn .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes popIn{from{transform:scale(.85); opacity:0;}to{transform:scale(1); opacity:1;}}
.cf-success-check{
  width:72px; height:72px; border-radius:50%;
  background:rgba(76,175,125,0.15); color:var(--green);
  display:flex; align-items:center; justify-content:center;
  font-size:38px; margin:0 auto 18px;
  box-shadow:0 0 30px rgba(76,175,125,0.3);
}
.cf-success-card h2{
  font-family:var(--fh); font-size:24px; font-weight:800;
  letter-spacing:2px; color:var(--y); margin-bottom:14px;
}
.cf-success-num{font-size:12px; color:var(--g); margin-bottom:6px; letter-spacing:.8px;}
.cf-success-num::before{content:'Order #'; color:var(--w); font-weight:700;}
.cf-success-total{font-family:var(--fh); font-size:24px; font-weight:800; color:var(--w); margin-bottom:10px;}
.cf-success-method{font-size:12px; color:var(--g); margin-bottom:22px;}
/* ════════════════════════════════════════════════
   TRACK PAGE — Section Headers (Carwash + Café)
   ════════════════════════════════════════════════ */.trk-section-header{
  display:flex; align-items:center; gap:10px;
  font-family:var(--fh); font-weight:800;
  font-size:11px; letter-spacing:2px;
  color:var(--g); text-transform:uppercase;
  margin:8px 0 16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--card-border);
}
.trk-section-header i{ font-size:18px; color:var(--y); }
.trk-cafe-section{ margin-top:28px; }
.trk-cafe-section #trk-cafe-list{ display:flex; flex-direction:column; gap:12px; }
body.theme-light .trk-section-header{ color:#555; border-color:#E5E5E5; }

/* ════════════════════════════════════════════════
   SERVICES PAGE — 3D PARALLAX MODULE HEROES
   ════════════════════════════════════════════════ */
.svc-modules-wrap{ padding: 12px 0 8px; }
.svc-modules-wrap .container{ display:flex; flex-direction:column; gap:16px; }

.svc-module-card{
  position:relative; overflow:hidden;
  border-radius:24px;
  padding:22px 22px 22px;
  min-height:200px;
  cursor:pointer;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s;
  perspective: 800px;
  isolation:isolate;
}
.svc-module-card:active{ transform:scale(.985); }
.svc-module-card::before{
  /* sheen overlay (parallax depth feel) */
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.25) 100%);
  pointer-events:none; z-index:1;
}

/* Halftone pop-art texture */
.sm-halftone{
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.18) 1.5px, transparent 0);
  background-size: 18px 18px;
  opacity:.22; pointer-events:none; z-index:0;
  mix-blend-mode: overlay;
}

/* Floating 3D illustration */
.sm-illu{
  position:absolute; right:-18px; bottom:-12px;
  width:175px; height:175px;
  z-index:2; pointer-events:none;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45));
  transition: transform .55s cubic-bezier(.34,1.56,.64,1);
}
.sm-illu img{ width:100%; height:100%; object-fit:contain; }
.sm-illu-3d{ animation: smFloat 6s ease-in-out infinite; }
@keyframes smFloat {
  0%, 100% { transform: translateY(0px) rotate(-3deg); }
  50%      { transform: translateY(-10px) rotate(3deg); }
}
.svc-module-card:hover .sm-illu{ transform: translateY(-6px) scale(1.06) rotate(0deg); }

.sm-content{ position:relative; z-index:3; max-width: 62%; }
.sm-tag{
  display:inline-block;
  background:rgba(0,0,0,0.35); color:#FFE17A;
  font-family:var(--fh); font-size:10px; font-weight:800;
  letter-spacing:1.6px; padding:5px 10px; border-radius:6px;
  margin-bottom:10px; backdrop-filter:blur(6px);
}
.sm-title{
  font-family:var(--fh); font-size:32px; font-weight:900;
  color:#fff; line-height:0.95; letter-spacing:1px;
  text-shadow: 0 3px 0 rgba(0,0,0,0.20);
  margin-bottom:8px;
}
.sm-title-hi{ display:inline-block; color:#0A0A0A; background:#FFE17A; padding:0 8px; border-radius:6px; transform:skewX(-6deg); }
.sm-title-hi.sm-hi-yellow{ background:#F5C518; }
.sm-sub{ font-size:12.5px; color:rgba(255,255,255,0.85); line-height:1.4; margin-bottom:12px; max-width:230px; }
.sm-meta{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.sm-meta-pill{
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(0,0,0,0.4); color:#fff;
  font-size:10px; font-weight:700; padding:5px 9px;
  border-radius:999px; backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.1);
}
.sm-meta-pill i{ font-size:13px; }
.sm-cta{
  display:inline-flex; align-items:center; gap:6px;
  background:#FFD300; color:#0A0A0A;
  font-family:var(--fh); font-weight:900; font-size:12px;
  letter-spacing:1.4px; padding:11px 18px;
  border-radius:999px;
  box-shadow: 0 6px 16px rgba(255,211,0,0.35), inset 0 -2px 0 rgba(0,0,0,0.18);
  transition: transform .15s;
}
.sm-cta-blue{ background:#5CB6FF; color:#fff; box-shadow:0 6px 16px rgba(92,182,255,0.4), inset 0 -2px 0 rgba(0,0,0,0.18); }
.sm-cta-pink{ background:#FF5DC7; color:#fff; box-shadow:0 6px 16px rgba(255,93,199,0.4), inset 0 -2px 0 rgba(0,0,0,0.18); }
.svc-module-card:hover .sm-cta{ transform: translateX(3px); }
.sm-arrow{ font-size:16px; line-height:0; }

/* Color variants — match home popart carousel */
.sm-yellow{
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,0.16) 0%, transparent 50%),
    linear-gradient(135deg, #1A1A28 0%, #1F2434 100%);
  border: 1px solid rgba(255, 211, 0, 0.2);
  box-shadow: 0 10px 30px rgba(255, 211, 0, 0.08);
}
.sm-blue{
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(92,182,255,0.18) 0%, transparent 55%),
    linear-gradient(135deg, #0E1B2C 0%, #19314E 100%);
  border: 1px solid rgba(92, 182, 255, 0.25);
  box-shadow: 0 10px 30px rgba(92, 182, 255, 0.10);
}
.sm-pink{
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255,93,199,0.20) 0%, transparent 55%),
    linear-gradient(135deg, #1E1024 0%, #3A1B45 100%);
  border: 1px solid rgba(255, 93, 199, 0.25);
  box-shadow: 0 10px 30px rgba(255, 93, 199, 0.10);
}

/* Section header under modules */
.svc-section-header{ padding: 22px 0 8px; }
.svc-section-title{
  font-family:var(--fh); font-size:11px; font-weight:800;
  letter-spacing:2px; color:var(--g); text-transform:uppercase;
}

body.theme-light .sm-tag{ background:rgba(0,0,0,0.25); }
body.theme-light .sm-sub{ color:rgba(255,255,255,0.92); }

.cf-success-card .btn-y{width:100%;}

/* ════════════════════════════════════════════════
   SERVICE DETAIL SHEET (Hoora-style)
   ════════════════════════════════════════════════ */
.svc-detail-sheet-inner{ max-height:95vh; padding:0; }
.svc-detail-close-btn{
  position:absolute; top:14px; right:14px; z-index:5;
  width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,0.55); color:#fff; font-size:24px;
  border:0; cursor:pointer; backdrop-filter:blur(8px);
  display:grid; place-items:center; line-height:1;
}
.svc-detail-close-btn:hover{ background:rgba(0,0,0,0.75); }

/* Pop-art hero */
.svc-detail-hero{
  position:relative; overflow:hidden;
  height:240px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255,211,0,0.18) 0%, transparent 55%),
    linear-gradient(135deg, #1A1A28 0%, #2A1F3D 100%);
  border-radius:20px 20px 0 0;
}
.svc-detail-hero-halftone{
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.20) 1.5px, transparent 0);
  background-size: 16px 16px;
  opacity:.30; pointer-events:none;
}
.svc-detail-hero-burst{
  position:absolute; top:28px; left:24px;
  font-family:var(--fh); font-weight:900; font-size:42px;
  color:#FFD300; letter-spacing:-1px; line-height:1;
  text-shadow: 3px 3px 0 #000, 6px 6px 0 rgba(255,93,199,0.4);
  transform: rotate(-8deg);
  z-index:2; pointer-events:none;
}
.svc-detail-hero-img{
  position:absolute; right:-20px; bottom:-15px;
  width:240px; height:240px; object-fit:contain;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.45));
  animation: smFloat 6s ease-in-out infinite;
  z-index:1; pointer-events:none;
}
.svc-detail-hero-tag{
  position:absolute; bottom:18px; left:18px;
  background:#FFD300; color:#0A0A0A;
  font-family:var(--fh); font-size:11px; font-weight:900;
  letter-spacing:1.6px; padding:7px 12px;
  border-radius:6px; z-index:3;
  box-shadow: 0 4px 12px rgba(255,211,0,0.45);
}

/* Content */
.svc-detail-content{ padding:22px 22px 0; overflow-y:auto; max-height: calc(95vh - 240px); }
.svc-detail-title{
  font-family:var(--fh); font-size:22px; font-weight:800;
  color:var(--w); line-height:1.2; margin:0 0 12px;
}
.svc-detail-meta-row{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:12px 0 18px;
  border-bottom:1px solid var(--card-border);
  margin-bottom:18px;
}
.svc-detail-price{
  font-family:var(--fh); font-size:26px; font-weight:900;
  color:var(--y); letter-spacing:.5px;
}
.svc-detail-dur, .svc-detail-rating{
  display:flex; align-items:center; gap:6px;
  font-size:13px; color:var(--g); font-weight:600;
}
.svc-detail-dur i{ color:var(--y); font-size:16px; }
.svc-detail-rating i{ color:#FFC107; font-size:14px; }
.svc-detail-ratings-n{ color:var(--g); font-weight:400; font-size:12px; }

.svc-detail-section{ margin-bottom:22px; }
.svc-detail-section-title{
  font-family:var(--fh); font-size:13px; font-weight:800;
  letter-spacing:1.4px; color:var(--w); text-transform:uppercase;
  margin-bottom:14px;
  display:flex; align-items:center; gap:8px;
}
.svc-detail-section-icon{ font-size:18px; }
.svc-detail-section-hint{ font-weight:500; color:var(--y); font-size:11px; letter-spacing:1px; }

.svc-included-list{
  background:rgba(76,175,125,0.06);
  border:1px solid rgba(76,175,125,0.25);
  border-radius:14px; padding:12px 14px;
}
.svc-included-row{
  display:flex; gap:12px; align-items:flex-start;
  padding:8px 0; border-bottom:1px dashed rgba(255,255,255,0.06);
}
.svc-included-row:last-child{ border-bottom:0; }
.svc-included-check{
  width:22px; height:22px; flex-shrink:0;
  background:rgba(76,175,125,0.20);
  color:var(--green); border-radius:50%;
  display:grid; place-items:center; font-size:14px;
}
.svc-included-text{ font-size:13.5px; line-height:1.4; color:var(--w); }

.svc-addon-list{ display:flex; flex-direction:column; gap:10px; }
.svc-addon-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--card-border); border-radius:12px;
  transition: border-color .15s, background .15s;
}
.svc-addon-row.selected{
  border-color:rgba(245,197,24,0.45); background:rgba(245,197,24,0.06);
}
.svc-addon-info{ flex:1; min-width:0; }
.svc-addon-name{ font-size:13.5px; font-weight:700; color:var(--w); margin-bottom:2px; }
.svc-addon-desc{ font-size:11.5px; color:var(--g); line-height:1.35; }
.svc-addon-price{
  font-family:var(--fh); font-size:14px; font-weight:800; color:var(--y);
  flex-shrink:0;
}
.svc-addon-btn{
  flex-shrink:0; min-width:72px;
  background:transparent; color:var(--y);
  border:1.5px solid rgba(245,197,24,0.4);
  border-radius:8px; padding:7px 10px;
  font-family:var(--fh); font-size:11px; font-weight:800;
  letter-spacing:1.2px; cursor:pointer;
  transition: all .15s;
}
.svc-addon-btn:hover{ background:rgba(245,197,24,0.1); }
.svc-addon-btn.on{ background:var(--y); color:#0A0A0A; border-color:var(--y); }
.svc-addon-btn i{ font-size:13px; vertical-align:-2px; }

/* Sticky bottom CTA */
.svc-detail-sticky-cta{
  position:sticky; bottom:0; left:0; right:0; z-index:10;
  display:flex; align-items:center; gap:14px;
  padding:14px 22px;
  background:linear-gradient(180deg, rgba(20,20,28,0.0) 0%, rgba(20,20,28,0.98) 30%, var(--card-bg, #14141C) 100%);
  border-top:1px solid var(--card-border);
  margin-top:-96px; padding-top:24px;
}
.svc-detail-sticky-info{ flex:1; min-width:0; }
.svc-detail-sticky-price{
  font-family:var(--fh); font-size:22px; font-weight:900; color:var(--y);
}
.svc-detail-sticky-sub{ font-size:11px; color:var(--g); margin-top:2px; }
.svc-detail-book-btn{
  flex-shrink:0; display:flex; align-items:center; gap:8px;
  background:#0A0A0A; color:#FFFFFF;
  border:1px solid var(--y);
  font-family:var(--fh); font-weight:900; font-size:13px;
  letter-spacing:1.2px; padding:13px 22px;
  border-radius:999px; cursor:pointer;
  transition: transform .12s;
  box-shadow: 0 4px 14px rgba(245,197,24,0.25), inset 0 -2px 0 rgba(255,211,0,0.18);
}
.svc-detail-book-btn:active{ transform:scale(.96); }

body.theme-light .svc-included-list{ background:rgba(46,160,67,0.06); border-color:rgba(46,160,67,0.25); }
body.theme-light .svc-addon-row{ background:#FAFAFA; border-color:#E5E5E5; }
body.theme-light .svc-detail-sticky-cta{ background:#FFFFFF; }

/* ════════════════════════════════════════════════
   PROFILE — Help & Support rows
   ════════════════════════════════════════════════ */
.prf-section-help .prf-sec-body{ padding:6px 0 12px; }
.prf-help-list{ display:flex; flex-direction:column; gap:10px; }
.prf-help-row{
  display:flex; align-items:center; gap:14px;
  padding:14px 16px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--card-border);
  border-radius:14px;
  text-decoration:none; color:inherit;
  transition:border-color .15s, transform .12s, background .15s;
}
.prf-help-row:hover{ border-color:rgba(245,197,24,.45); background:rgba(245,197,24,.04); }
.prf-help-row:active{ transform:scale(.985); }
.prf-help-icon{
  width:42px; height:42px; flex:0 0 42px;
  display:grid; place-items:center;
  background:rgba(245,197,24,.10);
  border:1px solid rgba(245,197,24,.30);
  border-radius:12px;
  color:var(--y); font-size:20px;
}
.prf-help-info{ flex:1; min-width:0; }
.prf-help-label{
  font-family:var(--fh); font-size:10px; font-weight:800;
  letter-spacing:1.6px; color:var(--g); text-transform:uppercase;
  margin-bottom:3px;
}
.prf-help-value{
  font-size:14px; font-weight:600; color:var(--w);
  letter-spacing:.2px; word-break:break-all;
}
.prf-help-arrow{ color:var(--g); font-size:18px; flex-shrink:0; }
body.theme-light .prf-help-row{ background:#FAFAFA; border-color:#E5E5E5; }
body.theme-light .prf-help-row:hover{ background:#FFFBEA; border-color:rgba(212,160,23,.45); }
body.theme-light .prf-help-icon{ background:rgba(212,160,23,.10); border-color:rgba(212,160,23,.30); color:#B8860B; }

/* ════════════════════════════════════════════════
   EVENTS MODULE
   ════════════════════════════════════════════════ */
.ev-loading{ padding:8px 0; }
.ev-empty{
  text-align:center; padding:48px 24px; color:var(--g);
  background:rgba(255,255,255,0.02); border:1px dashed var(--card-border);
  border-radius:18px; margin:8px 0;
}
.ev-empty i{ font-size:42px; color:var(--y); opacity:.6; display:block; margin-bottom:12px; }
.ev-empty-sub{ font-size:12px; opacity:.7; margin-top:6px; }

.ev-card{ position:relative; overflow:hidden; cursor:pointer; transition:transform .12s; }
.ev-card:active{ transform:scale(.985); }
.ev-card-cover{
  position:absolute; inset:0; opacity:.18; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.95) 70%);
  z-index:0;
}
.ev-card-cover img{ width:100%; height:100%; object-fit:cover; }
.ev-card > *{ position:relative; z-index:1; }
.ev-seats-tag{
  display:inline-block; margin-top:4px;
  font-size:10px; font-weight:800; letter-spacing:.8px;
  background:rgba(255,193,7,.18); color:var(--y);
  padding:3px 8px; border-radius:6px;
}
.ev-seats-tag.sold-out{ background:rgba(255,90,90,.18); color:#FF7B7B; }
.mp-ev-price.free{ color:var(--green); }

/* Event detail sheet */
.ev-detail-sheet-inner{ max-height:92vh; }
.ev-detail-cover{
  width:100%; height:200px; background:#111;
  overflow:hidden; position:relative;
}
.ev-detail-cover img{ width:100%; height:100%; object-fit:cover; }
.ev-detail-cover-empty{
  display:grid; place-items:center;
  background:linear-gradient(135deg, rgba(245,197,24,.12), rgba(245,197,24,.02));
}
.ev-detail-cover-empty i{ font-size:64px; color:var(--y); opacity:.5; }
.ev-detail-content{ padding:20px 22px 28px; }
.ev-detail-title{
  font-family:var(--fh); font-size:24px; font-weight:800;
  color:var(--w); letter-spacing:.5px; line-height:1.15; margin:0 0 16px;
}
.ev-detail-meta{
  background:rgba(255,255,255,0.03); border:1px solid var(--card-border);
  border-radius:14px; padding:12px 16px; margin-bottom:18px;
}
.ev-detail-meta-row{
  display:flex; align-items:center; gap:12px; padding:6px 0;
  font-size:13px; color:var(--w);
}
.ev-detail-meta-row i{ color:var(--y); font-size:18px; flex-shrink:0; }
.ev-detail-section{ margin-bottom:18px; }
.ev-detail-section-title{
  font-family:var(--fh); font-size:11px; font-weight:800;
  letter-spacing:1.6px; color:var(--g); text-transform:uppercase;
  margin-bottom:10px;
}
.ev-detail-desc{ font-size:13px; line-height:1.65; color:var(--g); margin:0; white-space:pre-wrap; }
.ev-media-link{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; background:rgba(255,255,255,0.03);
  border:1px solid var(--card-border); border-radius:14px;
  color:var(--w); text-decoration:none; font-weight:600; font-size:14px;
  transition:border-color .15s, background .15s;
}
.ev-media-link:hover{ border-color:var(--media-color, var(--y)); background:rgba(245,197,24,.04); }
.ev-media-link > i:first-child{ color:var(--media-color, var(--y)); font-size:22px; }
.ev-media-link > i:last-child{ margin-left:auto; color:var(--g); font-size:18px; }

.ev-qty-section{ margin-top:8px; }
.ev-qty-row{
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; background:rgba(255,255,255,0.03);
  border:1px solid var(--card-border); border-radius:14px;
}
.ev-qty-btn{
  width:38px; height:38px; flex-shrink:0;
  background:rgba(245,197,24,.12); border:1px solid rgba(245,197,24,.30);
  color:var(--y); font-size:20px; font-weight:700;
  border-radius:10px; cursor:pointer; transition:transform .1s, background .15s;
}
.ev-qty-btn:hover{ background:rgba(245,197,24,.22); }
.ev-qty-btn:active{ transform:scale(.94); }
.ev-qty-display{
  font-family:var(--fh); font-size:22px; font-weight:800; color:var(--w);
  width:36px; text-align:center;
}
.ev-qty-meta{ margin-left:auto; font-size:12px; color:var(--g); }

.ev-detail-cta-wrap{
  background:rgba(245,197,24,0.06); border:1px solid rgba(245,197,24,0.25);
  border-radius:14px; padding:14px 16px; margin-top:8px;
}
.ev-total-line{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px; font-size:13px; color:var(--g);
}
.ev-total-line strong{ font-family:var(--fh); font-size:18px; color:var(--y); }
.ev-book-btn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:14px; padding:14px;
}
.ev-soldout-banner{
  background:rgba(255,90,90,.10); border:1px solid rgba(255,90,90,.30);
  border-radius:14px; padding:18px; text-align:center;
  color:#FF7B7B; font-weight:700; letter-spacing:.5px;
}

/* Event success overlay (QR codes) */
.ev-success-card{
  text-align:center; max-width:420px;
}
.ev-success-check{
  width:64px; height:64px; margin:0 auto 14px;
  background:rgba(76,175,125,0.18); border:2px solid rgba(76,175,125,0.5);
  color:var(--green); border-radius:50%;
  display:grid; place-items:center; font-size:32px;
}
.ev-success-title{
  font-family:var(--fh); font-size:32px; font-weight:800;
  letter-spacing:2px; color:var(--y); margin:0 0 10px;
}
.ev-success-event-title{
  font-size:16px; font-weight:700; color:var(--w); margin-bottom:4px;
}
.ev-success-event-when{
  font-size:12px; color:var(--g); margin-bottom:6px;
}
.ev-success-bn{
  font-family:var(--fh); font-size:11px; letter-spacing:1.2px;
  color:var(--y); margin-bottom:18px;
}
.ev-qr-list{
  display:flex; gap:14px; overflow-x:auto;
  padding:8px 0 16px; margin:0 -8px;
  scroll-snap-type:x mandatory;
}
.ev-qr-card{
  flex:0 0 200px; scroll-snap-align:center;
  background:#FFF; color:#0A0A0A;
  padding:14px 14px 12px; border-radius:14px;
  text-align:center; border:2px solid var(--y);
}
.ev-qr-card img{ width:172px; height:172px; display:block; margin:0 auto; }
.ev-qr-num{ font-family:var(--fh); font-size:12px; font-weight:800; letter-spacing:1.2px; margin-top:8px; color:#0A0A0A; }
.ev-qr-code{ font-family:monospace; font-size:10px; color:#666; letter-spacing:.5px; margin-top:2px; }
.ev-success-hint{
  background:rgba(255,255,255,0.04); border:1px solid var(--card-border);
  border-radius:12px; padding:12px 14px;
  font-size:12px; color:var(--g); line-height:1.55;
  margin:0 0 16px;
}
.ev-success-hint i{ color:var(--y); margin-right:6px; }
.ev-success-card .btn-y{ width:100%; }

/* Track tab: event tickets */
.trk-events-section{ margin-top:28px; }
.trk-event-ticket-card{
  background:rgba(255,255,255,0.03); border:1px solid var(--card-border);
  border-radius:14px; padding:14px 16px; margin-bottom:12px;
  display:flex; gap:14px; align-items:center; cursor:pointer;
  transition:border-color .15s, background .15s;
}
.trk-event-ticket-card:hover{ border-color:rgba(245,197,24,.45); }
.trk-event-ticket-qr{ width:64px; height:64px; flex-shrink:0; background:#FFF; border-radius:8px; padding:4px; }
.trk-event-ticket-qr img{ width:100%; height:100%; }
.trk-event-ticket-info{ flex:1; min-width:0; }
.trk-event-ticket-title{ font-weight:700; color:var(--w); font-size:14px; margin-bottom:3px; }
.trk-event-ticket-when{ font-size:12px; color:var(--g); }
.trk-event-ticket-qty{ font-size:11px; color:var(--y); font-weight:600; margin-top:3px; }
.trk-event-ticket-status{
  font-family:var(--fh); font-size:10px; letter-spacing:1.2px;
  padding:5px 10px; border-radius:6px;
  background:rgba(76,175,125,0.18); color:var(--green);
}
.trk-event-ticket-status.pending{ background:rgba(255,193,7,.18); color:var(--y); }

body.theme-light .ev-detail-meta,
body.theme-light .ev-media-link,
body.theme-light .ev-qty-row{ background:#FAFAFA; border-color:#E5E5E5; }
body.theme-light .trk-event-ticket-card{ background:#FAFAFA; border-color:#E5E5E5; }


/* ════════════════════════════════════════════════
   DELIVERY REVIEW SHEET (Pay at Delivery flow)
   ════════════════════════════════════════════════ */
.cf-review-sheet-inner #cf-review-body{ padding:18px 20px 28px; }
.cf-review-eta{
  display:flex; gap:14px; align-items:center;
  background:linear-gradient(135deg, rgba(76,175,125,0.14), rgba(76,175,125,0.05));
  border:1px solid rgba(76,175,125,0.35);
  border-radius:18px; padding:16px 16px; margin-bottom:18px;
}
.cf-review-eta i{ font-size:30px; color:var(--green); }
.cf-review-eta-title{ font-family:var(--fh); font-weight:800; font-size:15px; color:var(--w); letter-spacing:.4px;}
.cf-review-eta-sub{ font-size:12px; color:var(--g); margin-top:2px;}
.cf-review-section{ margin-bottom:18px; }
.cf-review-section-title{
  font-family:var(--fh); font-size:11px; font-weight:800;
  letter-spacing:1.6px; color:var(--g); text-transform:uppercase;
  margin-bottom:10px;
}
.cf-review-items{ background:rgba(255,255,255,0.02); border:1px solid var(--card-border); border-radius:14px; padding:8px 12px; }
.cf-review-row{
  display:grid; grid-template-columns:14px 1fr auto;
  gap:10px; align-items:center;
  padding:8px 0; border-bottom:1px dashed rgba(255,255,255,0.06);
}
.cf-review-row:last-child{ border-bottom:0; }
.cf-review-name{ font-size:14px; color:var(--w); font-weight:500;}
.cf-review-qty{ color:var(--g); font-weight:400; }
.cf-review-price{ font-family:var(--fh); font-weight:700; font-size:14px; color:var(--y); }

.cf-promo-row{ display:flex; gap:8px; }
.cf-promo-input{
  flex:1; background:rgba(255,255,255,0.04); border:1px solid var(--card-border);
  border-radius:12px; padding:12px 14px; color:var(--w);
  font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
  outline:none; transition:border-color .15s;
}
.cf-promo-input:focus{ border-color:var(--y); }
.cf-promo-apply{
  background:var(--y); color:#0A0A0A; border:0;
  border-radius:12px; padding:0 18px; font-weight:800;
  font-size:13px; letter-spacing:.5px; cursor:pointer;
  text-transform:uppercase; transition:transform .1s;
}
.cf-promo-apply:active{ transform:scale(.96); }
.cf-promo-applied{
  display:flex; align-items:center; gap:10px; flex:1;
  background:rgba(76,175,125,0.10); border:1px solid rgba(76,175,125,0.35);
  border-radius:12px; padding:10px 14px; color:var(--w); font-size:13px;
}
.cf-promo-applied i{ color:var(--green); font-size:20px; }
.cf-promo-applied b{ color:var(--y); letter-spacing:.5px; }
.cf-promo-remove{
  margin-left:auto; background:transparent; border:0;
  color:var(--g); font-size:12px; font-weight:700;
  letter-spacing:.5px; cursor:pointer; text-transform:uppercase;
}
.cf-promo-remove:hover{ color:#FF6B6B; }
.cf-promo-msg{ font-size:12px; color:var(--g); margin-top:8px; min-height:16px; }
.cf-promo-msg.err{ color:#FF6B6B; }

.cf-review-bill{ background:rgba(255,255,255,0.02); border:1px solid var(--card-border); border-radius:14px; padding:14px 16px; }
.cf-review-line{
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color:var(--g); padding:5px 0;
}
.cf-review-line.discount{ color:var(--green); }
.cf-review-line.discount span:last-child{ color:var(--green); font-weight:700;}
.cf-review-line.total{
  border-top:1px solid var(--card-border);
  margin-top:6px; padding-top:10px;
  color:var(--w); font-size:15px; font-weight:700;
}
.cf-review-line.total span:last-child{ color:var(--y); font-family:var(--fh); font-size:18px; font-weight:800;}

.cf-review-confirm{
  width:100%; margin-top:6px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:14px; padding:16px;
}
.cf-review-confirm i{ font-size:18px; }
.cf-review-confirm:disabled{ opacity:.6; cursor:not-allowed; }

/* Light theme overrides */
body.theme-light .cf-review-eta{
  background:linear-gradient(135deg, rgba(46,160,67,0.10), rgba(46,160,67,0.03));
  border-color:rgba(46,160,67,0.30);
}
body.theme-light .cf-review-items,
body.theme-light .cf-review-bill{ background:#FAFAFA; border-color:#E5E5E5; }
body.theme-light .cf-promo-input{ background:#FFF; border-color:#E5E5E5; color:#0A0A0A; }
body.theme-light .cf-promo-applied{ background:rgba(46,160,67,0.06); border-color:rgba(46,160,67,0.25); color:#0A0A0A; }

/* ════════════════════════════════════════════════
   PROFILE NAV BUTTON & POPOVER (replaces hamburger)
   ════════════════════════════════════════════════ */
.nav-profile-btn{
  display:flex;
  width:38px; height:38px; border-radius:50%;
  background:linear-gradient(135deg, rgba(245,197,24,0.15), rgba(245,197,24,0.05));
  border:1.5px solid rgba(245,197,24,0.35);
  color:var(--y); cursor:pointer; padding:0;
  align-items:center; justify-content:center;
  font-size:18px; transition:all .2s;
  position:relative;
}
@media(min-width:901px){
  .nav-profile-btn{display:none;}
}
.nav-profile-btn:active{transform:scale(.94);}
.nav-profile-btn:hover{background:rgba(245,197,24,0.20); border-color:var(--y);}
.nav-profile-btn::after{
  content:''; position:absolute; top:2px; right:2px;
  width:8px; height:8px; border-radius:50%;
  background:var(--green);
  border:2px solid var(--bg);
  opacity:0; transition:opacity .2s;
}
.nav-profile-btn.online::after{opacity:1;}

.nav-profile-pop{
  position:fixed;
  top:60px; right:12px;
  width:300px; max-width:calc(100vw - 24px);
  background:#171717;
  border:1px solid var(--card-border);
  border-radius:16px;
  box-shadow:0 12px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(245,197,24,0.05);
  padding:8px;
  z-index:1500;
  opacity:0; pointer-events:none;
  transform:translateY(-8px) scale(.96);
  transition:all .18s cubic-bezier(.34,1.56,.64,1);
}
.nav-profile-pop.show{
  opacity:1; pointer-events:auto;
  transform:translateY(0) scale(1);
}
.np-header{
  display:flex; align-items:center; gap:12px;
  padding:12px 12px 14px;
  border-bottom:1px solid var(--border);
  margin-bottom:6px;
}
.np-avatar{
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg, var(--y), #C99F12);
  color:var(--blk);
  display:flex; align-items:center; justify-content:center;
  font-size:20px; flex-shrink:0;
}
.np-name{
  font-family:var(--fh); font-size:14px; font-weight:700;
  color:var(--w); letter-spacing:.2px;
}
.np-sub{font-size:11px; color:var(--g); margin-top:2px;}

.np-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:10px;
  color:var(--w); text-decoration:none;
  font-size:13px; font-weight:500;
  transition:background .15s;
  cursor:pointer;
}
.np-item:hover{background:rgba(255,255,255,0.04);}
.np-item:active{background:rgba(255,255,255,0.08);}
.np-item > i:first-child{color:var(--g); font-size:18px; width:20px; text-align:center;}
.np-item > span{flex:1;}
.np-arrow{font-size:14px; color:var(--g);}
.np-logout > i:first-child{color:var(--red);}
.np-logout{color:var(--red);}
.np-signin > i:first-child{color:var(--y);}
.np-signin{color:var(--y); font-weight:700;}

.np-divider{
  height:1px; background:var(--border);
  margin:6px 8px;
}

.np-toggle{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:10px;
  cursor:pointer; user-select:none;
  position:relative;
  transition:background .15s;
}
.np-toggle:hover{background:rgba(255,255,255,0.04);}
.np-toggle input{
  position:absolute; opacity:0; pointer-events:none;
}
.np-icon-wa{color:#25D366; font-size:18px;}
.np-icon-bell{color:var(--y); font-size:18px;}
.np-toggle-info{flex:1;}
.np-toggle-title{font-size:13px; font-weight:600; color:var(--w);}
.np-toggle-desc{font-size:10.5px; color:var(--g); margin-top:1px;}
.np-toggle-switch{
  width:36px; height:20px; border-radius:12px;
  background:rgba(255,255,255,0.12);
  position:relative; transition:background .2s;
  flex-shrink:0;
}
.np-toggle-switch::after{
  content:''; position:absolute; left:2px; top:2px;
  width:16px; height:16px; border-radius:50%;
  background:#fff; transition:all .22s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 1px 4px rgba(0,0,0,0.4);
}
.np-toggle input:checked ~ .np-toggle-switch{background:var(--green);}
.np-toggle input:checked ~ .np-toggle-switch::after{left:18px;}

/* WhatsApp toggle uses brand color when on */
.np-toggle[data-testid="np-whatsapp-toggle"] input:checked ~ .np-toggle-switch{background:#25D366;}

/* ════════════════════════════════════════════════
   POP-ART SERVICE CAROUSEL (replaces summer fest banner)
   Comic-book/Lichtenstein-inspired: bold flat colors,
   halftone dots, thick black borders, exclamation bursts
   ════════════════════════════════════════════════ */
.popart-section{
  padding:14px 16px 18px;
  position:relative;
}
.popart-track{
  display:flex;
  gap:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:6px 2px;
}
.popart-track::-webkit-scrollbar{display:none;}

.popart-card{
  flex:0 0 100%;
  scroll-snap-align:center;
  position:relative;
  height:148px;
  border-radius:18px;
  border:3px solid #0c0c0c;
  box-shadow:6px 6px 0 #0c0c0c, 0 0 0 1px rgba(255,255,255,0.06);
  overflow:hidden;
  cursor:pointer;
  transition:transform .15s ease;
  display:flex;
  align-items:center;
  user-select:none;
}
.popart-card:active{transform:translate(2px,2px); box-shadow:4px 4px 0 #0c0c0c;}

/* Color variants — bold, saturated, Lichtenstein-style flats */
.popart-card.pa-yellow{background:#F5C518;}
.popart-card.pa-blue{background:#3B6FE0;}
.popart-card.pa-pink{background:#E84B8A;}

/* Halftone dot overlay (the iconic Lichtenstein dots) */
.popart-halftone{
  position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,0.30) 1.4px, transparent 1.6px);
  background-size:10px 10px;
  mix-blend-mode:overlay;
  opacity:.7;
  pointer-events:none;
}
.popart-card.pa-yellow .popart-halftone{
  background-image:radial-gradient(circle, rgba(255,80,30,0.40) 1.4px, transparent 1.6px);
  mix-blend-mode:multiply;
  opacity:.55;
}

/* "WOW!"/"BAM!"/"YUM!" comic-burst */
.popart-burst{
  position:absolute;
  top:-2px; right:18px;
  background:#fff;
  color:#E84B8A;
  font-family:var(--fh);
  font-weight:900;
  font-size:18px;
  letter-spacing:1px;
  padding:8px 14px 6px;
  border:3px solid #0c0c0c;
  border-radius:50%;
  transform:rotate(12deg);
  box-shadow:3px 3px 0 #0c0c0c;
  text-shadow:none;
  white-space:nowrap;
  z-index:3;
  animation:popartWobble 3.5s ease-in-out infinite;
}
.popart-burst.pa-burst-blue{color:#3B6FE0;}
.popart-burst.pa-burst-pink{color:#E84B8A;}
@keyframes popartWobble{
  0%, 100%{transform:rotate(12deg) scale(1);}
  50%{transform:rotate(8deg) scale(1.08);}
}

/* Content (left side) */
.popart-content{
  position:relative;
  z-index:2;
  padding:16px 0 14px 18px;
  max-width:60%;
}
.popart-tag{
  display:inline-block;
  background:#0c0c0c;
  color:#F5C518;
  font-family:var(--fh);
  font-weight:800;
  font-size:9.5px;
  letter-spacing:1.4px;
  padding:4px 9px;
  border-radius:4px;
  margin-bottom:8px;
}
.popart-card.pa-blue .popart-tag{color:#fff;}
.popart-card.pa-pink .popart-tag{color:#fff;}

.popart-title{
  font-family:var(--fh);
  font-weight:900;
  font-size:22px;
  line-height:1.0;
  letter-spacing:.5px;
  color:#0c0c0c;
  text-shadow:2px 2px 0 rgba(255,255,255,0.55);
  margin-bottom:8px;
}
.popart-title-hi{
  display:inline-block;
  background:#fff;
  color:#E84B8A;
  padding:0 6px;
  border:2.5px solid #0c0c0c;
  border-radius:6px;
  box-shadow:2px 2px 0 #0c0c0c;
  transform:rotate(-2deg);
  margin-top:2px;
}
.popart-title-hi.pa-hi-yellow{color:#F5C518;}

.popart-sub{
  font-family:var(--fm);
  font-size:11.5px;
  color:#0c0c0c;
  font-weight:600;
  margin-bottom:10px;
  opacity:.85;
}
.popart-sub strong{font-weight:800;}

.popart-cta{
  display:inline-flex; align-items:center; gap:6px;
  background:#0c0c0c;
  color:#F5C518;
  font-family:var(--fh);
  font-weight:800;
  font-size:11px;
  letter-spacing:1px;
  padding:7px 14px;
  border-radius:18px;
  border:2px solid #0c0c0c;
  box-shadow:2px 2px 0 rgba(0,0,0,0.45);
}
.popart-cta.pa-cta-blue{color:#fff;}
.popart-cta.pa-cta-pink{color:#fff;}
.popart-arrow{font-size:13px; line-height:1;}

/* Illustration (right side) */
.popart-illu{
  position:absolute;
  right:-8px; bottom:-6px;
  width:135px; height:152px;
  z-index:1;
  filter:drop-shadow(-3px 3px 0 rgba(0,0,0,0.6));
}
.popart-illu img{
  width:100%; height:100%;
  object-fit:contain;
  object-position:bottom right;
  transform:rotate(-5deg);
}
.popart-card.pa-blue .popart-illu img{transform:rotate(3deg);}
.popart-card.pa-pink .popart-illu img{transform:rotate(-3deg);}

/* Dots */
.popart-dots{
  display:flex;
  justify-content:center;
  gap:7px;
  margin-top:10px;
}
.popart-dot{
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,0.25);
  border:none;
  padding:0; cursor:pointer;
  transition:all .25s;
}
.popart-dot.active{
  background:var(--y);
  width:22px;
  border-radius:4px;
}

/* Smaller phones */
@media (max-width:380px){
  .popart-card{height:138px;}
  .popart-title{font-size:19px;}
  .popart-illu{width:120px; height:138px;}
  .popart-burst{font-size:15px; padding:6px 11px 4px;}
}

/* ════════════════════════════════════════════════
   MY ORDERS — Customer Order Tracking
   ════════════════════════════════════════════════ */
.cf-orders-sheet-inner{max-height:92vh;}
.cf-success-close-btn{
  width:100%; margin-top:10px;
  background:transparent; border:1px solid var(--card-border);
  color:var(--g); font-family:var(--fh); font-weight:700;
  font-size:12px; letter-spacing:1px;
  padding:10px; border-radius:8px; cursor:pointer;
}
.cf-success-close-btn:hover{color:var(--w); border-color:rgba(255,255,255,0.3);}

.cf-order-card{
  background:var(--card-solid);
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:14px;
  margin-bottom:10px;
  transition:border-color .25s, box-shadow .25s;
}
.cf-order-card.active{border-color:rgba(245,197,24,0.3);}
.cf-order-card.highlight{
  border-color:var(--y);
  box-shadow:0 0 0 3px rgba(245,197,24,0.15);
  animation:cfPulse 2s ease 2;
}
@keyframes cfPulse{0%,100%{box-shadow:0 0 0 3px rgba(245,197,24,0.15);}50%{box-shadow:0 0 0 5px rgba(245,197,24,0.3);}}

.cf-order-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.cf-order-num{font-family:var(--fm); font-size:11px; color:var(--g); letter-spacing:.5px; font-weight:600;}
.cf-order-meta{font-size:10.5px; color:var(--g); margin-top:3px;}
.cf-order-total{text-align:right;}
.cf-order-status{
  display:inline-block;
  font-size:9.5px; font-weight:800; letter-spacing:.8px;
  padding:3px 9px; border-radius:10px;
  text-transform:uppercase;
  margin-bottom:5px;
}
.cf-order-status.placed{background:rgba(245,158,11,0.15); color:#F59E0B;}
.cf-order-status.preparing{background:rgba(59,130,246,0.15); color:#3B82F6;}
.cf-order-status.ready{background:rgba(34,197,94,0.18); color:#22C55E;}
.cf-order-status.served{background:rgba(148,163,184,0.15); color:#94A3B8;}
.cf-order-status.cancelled{background:rgba(244,63,94,0.15); color:#F43F5E;}
.cf-order-amount{font-family:var(--fh); font-weight:800; color:var(--y); font-size:18px;}

.cf-order-timeline{
  display:flex; align-items:center;
  margin:14px 0 10px;
  padding:4px 2px;
}
.cf-tl-step{display:flex; flex-direction:column; align-items:center; flex-shrink:0; min-width:54px;}
.cf-tl-dot{
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,0.18);
  border:2px solid transparent;
  transition:all .3s;
}
.cf-tl-step.done .cf-tl-dot{background:var(--green); box-shadow:0 0 8px rgba(76,175,125,0.4);}
.cf-tl-step.current .cf-tl-dot{
  background:var(--y); border-color:rgba(245,197,24,0.4);
  box-shadow:0 0 12px rgba(245,197,24,0.6);
  animation:cfTlPulse 1.5s ease-in-out infinite;
}
@keyframes cfTlPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.25);}}
.cf-tl-label{
  font-size:9px; color:var(--g); margin-top:6px;
  text-align:center; font-weight:600; letter-spacing:.3px;
  text-transform:uppercase; white-space:nowrap;
}
.cf-tl-step.done .cf-tl-label{color:var(--w);}
.cf-tl-step.current .cf-tl-label{color:var(--y);}
.cf-tl-line{flex:1; height:2px; background:rgba(255,255,255,0.1); margin:0 4px; margin-bottom:18px;}

.cf-order-items{
  background:rgba(0,0,0,0.25); border-radius:8px;
  padding:10px 12px; margin-top:6px;
}
.cf-order-item-row{
  display:flex; justify-content:space-between;
  font-size:12px; padding:3px 0;
  color:var(--w);
}
.cf-order-item-row span:last-child{color:var(--g);}
.cf-order-cancelled{
  margin-top:8px; padding:8px 12px;
  background:rgba(244,63,94,0.1); color:#F43F5E;
  border-radius:8px; font-size:11.5px; text-align:center;
}

/* ════════════════════════════════════════════════
   ETA BADGES on Booking Wizard Type Cards
   ════════════════════════════════════════════════ */
.bw-eta{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px;
  padding:5px 10px 5px 8px;
  border-radius:20px;
  font-size:11px; font-weight:700;
  letter-spacing:.2px;
  white-space:nowrap;
  position:relative;
}
.bw-eta-text{font-weight:500;}
.bw-eta-text strong{font-weight:800;}
.bw-eta .bw-eta-dot{
  width:6px; height:6px; border-radius:50%;
  display:inline-block;
}
.bw-eta i{font-size:13px;}

/* GREEN ECO style for Doorstep */
.bw-eta-eco{
  background:rgba(46,160,67,0.14);
  color:#3FB950;
  border:1px solid rgba(46,160,67,0.35);
}
.bw-eta-eco .bw-eta-dot{
  background:#3FB950;
  box-shadow:0 0 8px #3FB950;
  animation:bwEtaPulse 1.8s ease-in-out infinite;
}
.bw-eta-eco i{color:#3FB950;}

/* FAST style (lightning blue) for Drive-through */
.bw-eta-fast{
  background:rgba(74,158,255,0.14);
  color:#4A9EFF;
  border:1px solid rgba(74,158,255,0.35);
}
.bw-eta-fast .bw-eta-dot{
  background:#4A9EFF;
  box-shadow:0 0 8px #4A9EFF;
  animation:bwEtaPulse 1.4s ease-in-out infinite;
}
.bw-eta-fast i{color:#FFD700;}

@keyframes bwEtaPulse{
  0%, 100%{opacity:1; transform:scale(1);}
  50%{opacity:.5; transform:scale(1.4);}
}

/* ════════════════════════════════════════════════
   NAV THEME TOGGLE (Dark ↔ Light) — pill swipe
   ════════════════════════════════════════════════ */
.nav-theme-btn{
  display:flex;
  width:54px; height:28px;
  border-radius:18px;
  background:rgba(245,197,24,0.08);
  border:1.5px solid rgba(245,197,24,0.25);
  cursor:pointer;
  padding:0 4px;
  align-items:center; justify-content:space-between;
  position:relative;
  margin-right:10px;
  transition:all .25s;
}
.nav-theme-btn:hover{border-color:rgba(245,197,24,0.5);}
.nav-theme-btn i{
  font-size:13px;
  z-index:2;
  transition:opacity .25s, color .25s;
}
.nav-theme-i-sun{color:#F5C518; opacity:.55;}
.nav-theme-i-moon{color:#A0A0A0; opacity:1;}
.nav-theme-knob{
  position:absolute;
  top:50%; left:3px;
  transform:translateY(-50%);
  width:20px; height:20px;
  border-radius:50%;
  background:#0F0F0F;
  box-shadow:0 2px 6px rgba(0,0,0,0.5);
  transition:left .28s cubic-bezier(.34,1.56,.64,1), background .25s;
  z-index:1;
}
body.theme-light .nav-theme-btn{
  background:rgba(245,197,24,0.18);
  border-color:rgba(245,197,24,0.5);
}
body.theme-light .nav-theme-knob{
  left:29px; background:#FFFFFF;
}
body.theme-light .nav-theme-i-sun{opacity:1;}
body.theme-light .nav-theme-i-moon{opacity:.45;}
body.theme-light .nav-theme-btn:hover{background:rgba(245,197,24,0.28);}

@media(min-width:901px){
  .nav-theme-btn{display:none;}
}

/* ────────────────────────────────────────────
   LIGHT THEME (variable overrides)
   ──────────────────────────────────────────── */
body.theme-light{
  --blk: #FAFAFA;
  --w: #0F0F0F;
  --g: #5A5A5A;
  --d: #F0F0F0;
  --dk: #F4F4F4;
  --border: rgba(0,0,0,0.08);
  --card: rgba(255,255,255,0.7);
  --card-solid: #FFFFFF;
  --card-border: #E5E5E5;
  --glass: rgba(255,255,255,0.7);
  --glass-border: rgba(0,0,0,0.06);
  background:#FAFAFA;
  background-image:radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px);
  color:#0F0F0F;
}
body.theme-light nav{background:rgba(250,250,250,0.92); border-bottom-color:rgba(0,0,0,0.06);}
body.theme-light nav .logo span{color:#0F0F0F;}
body.theme-light .dash-location-bar{background:#fff; border-bottom:1px solid #EAEAEA;}
body.theme-light .mp-search input{color:#0F0F0F;}
body.theme-light .bottom-nav{background:rgba(255,255,255,0.98); border-top-color:rgba(0,0,0,0.08);}
body.theme-light .bottom-nav-item{color:#5A5A5A;}
body.theme-light .bottom-nav-item.active{color:#0F0F0F;}
body.theme-light .mp-quick-grid.swiggy .mp-quick-card .mp-ql{color:#0F0F0F;}
body.theme-light .mp-quick-grid.swiggy .mp-quick-card .mp-qs{color:#5A5A5A;}
body.theme-light .mp-sec-title{color:#0F0F0F;}
body.theme-light .cf-search,
body.theme-light .cf-best-card,
body.theme-light .cf-item-thumb,
body.theme-light .cf-cat-pill{
  background:#FFFFFF; border-color:#E5E5E5; color:#0F0F0F;
}
body.theme-light .cf-cat-pill{color:#5A5A5A;}
body.theme-light .cf-cat-pill.active{background:var(--y); color:#0F0F0F;}
body.theme-light .cf-item-name,
body.theme-light .cf-best-name{color:#0F0F0F;}
body.theme-light .cf-item-desc,
body.theme-light .cf-best-row{color:#5A5A5A;}
body.theme-light .nav-profile-pop{background:#fff; border-color:#E5E5E5;}
body.theme-light .np-name,
body.theme-light .np-toggle-title,
body.theme-light .np-item{color:#0F0F0F;}
body.theme-light .np-sub,
body.theme-light .np-toggle-desc{color:#5A5A5A;}
body.theme-light .np-divider{background:#E5E5E5;}
body.theme-light .np-item:hover,
body.theme-light .np-toggle:hover{background:rgba(0,0,0,0.04);}
body.theme-light .cf-sheet{background:#fff;}
body.theme-light .cf-success-card{background:#fff; border-color:#E5E5E5;}
body.theme-light .cf-order-card{background:#fff; border-color:#E5E5E5;}
body.theme-light .cf-order-num{color:#5A5A5A;}
body.theme-light .cf-tl-label{color:#5A5A5A;}
body.theme-light .cf-tl-step.done .cf-tl-label{color:#0F0F0F;}
body.theme-light .cf-tl-line{background:rgba(0,0,0,0.1);}
body.theme-light .cf-tl-dot{background:rgba(0,0,0,0.18);}
body.theme-light .popart-section{}
body.theme-light .mp-tabs,
body.theme-light .mp-tab{color:#5A5A5A; background:#fff;}
body.theme-light .mp-srv-skeleton,
body.theme-light .dash-srv-skeleton{background:#F0F0F0;}
body.theme-light .bw-type-card{background:#fff; border-color:#E5E5E5;}
body.theme-light .bw-type-title{color:#0F0F0F;}
body.theme-light .bw-type-detail{color:#5A5A5A;}
body.theme-light .cf-order-items{background:#F4F4F4;}
body.theme-light .cf-order-item-row{color:#0F0F0F;}
body.theme-light .cf-order-item-row span:last-child{color:#5A5A5A;}
body.theme-light .mp-sec-header .mp-see-all{color:var(--y);}
body.theme-light .cf-toolbar .cf-status-badge.closed{background:rgba(248,113,113,0.12); color:#DC2626;}
body.theme-light .cf-sheet-header{color:#0F0F0F;}
body.theme-light .cf-sheet-close{background:rgba(0,0,0,0.06); color:#0F0F0F;}
body.theme-light .cf-sheet-handle{background:rgba(0,0,0,0.15);}


/* ═════════════════════════════════════════════
   HOME v5 — Super App Redesign (Feb 19 2026)
   Matches uploaded mockup exactly
═════════════════════════════════════════════ */

/* Top header: logo + greeting + location + avatar */
.hm-header{padding:14px 16px 8px;position:relative}
.hm-header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.hm-brand{display:flex;align-items:center;gap:8px}
.hm-avatar{position:relative;width:44px;height:44px;border-radius:50%;border:2px solid var(--y);
  background:linear-gradient(135deg,#2a2a2a,#1a1a1a);color:#fff;font-family:'Outfit',sans-serif;
  font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;padding:0;box-shadow:0 0 0 3px rgba(245,197,24,.12)}
.hm-avatar-initial{position:relative;z-index:1}
.hm-avatar-dot{position:absolute;top:2px;right:2px;width:9px;height:9px;background:var(--y);
  border-radius:50%;border:2px solid #0F0F0F;z-index:2}
.hm-greeting{font-family:'Outfit',sans-serif;font-weight:700;font-size:22px;color:#fff;
  margin-bottom:6px;line-height:1.2;letter-spacing:-.3px}
.hm-wave{display:inline-block;animation:hmWave 2.4s ease-in-out infinite;transform-origin:70% 70%}
@keyframes hmWave{0%,60%,100%{transform:rotate(0)}10%,30%,50%{transform:rotate(15deg)}20%,40%{transform:rotate(-10deg)}}
.hm-location{display:flex;align-items:center;gap:6px;color:var(--y);font-size:14px;font-weight:600;
  cursor:pointer;font-family:'Manrope',sans-serif}
.hm-location .ti-map-pin{font-size:18px;color:var(--y)}
.hm-location .hm-location-chev{font-size:14px;color:#888;margin-left:2px}
#hm-location-text{color:#fff;font-weight:500}
.loc-dropdown-anchor{position:relative}

/* Search bar */
.hm-searchbar{margin:16px 16px 14px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:30px;
  display:flex;align-items:center;padding:6px 6px 6px 18px;gap:10px;cursor:pointer;
  transition:border-color .2s ease,background .2s ease}
.hm-searchbar:hover{border-color:#3a3a3a}
.hm-search-icon{color:#888;font-size:18px}
.hm-search-ph{flex:1;color:#888;font-size:14px;font-weight:500;font-family:'Manrope',sans-serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-search-mic{width:42px;height:42px;border-radius:50%;background:var(--y);color:#0F0F0F;
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:18px;flex-shrink:0;transition:transform .15s ease}
.hm-search-mic:active{transform:scale(.92)}

/* 5-card horizontal categories scroller */
.hm-cats-wrap{padding:4px 0 14px}
.hm-cats{display:flex;gap:10px;padding:0 16px;overflow-x:auto;overflow-y:visible;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hm-cats::-webkit-scrollbar{display:none}
.hm-cat{flex:0 0 auto;width:100px;cursor:pointer;text-align:center;scroll-snap-align:start}
.hm-cat-icon{width:100px;height:100px;background:#171717;border:1px solid #262626;border-radius:18px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.hm-cat-icon img{width:72px;height:72px;object-fit:contain;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.4))}
.hm-cat:hover .hm-cat-icon{transform:translateY(-2px);border-color:#3a3a3a;
  box-shadow:0 8px 18px rgba(0,0,0,.5)}
.hm-cat:active .hm-cat-icon{transform:scale(.96)}
.hm-cat-label{margin-top:8px;font-family:'Manrope',sans-serif;font-size:13px;font-weight:600;
  color:#e8e8e8;letter-spacing:.1px}
.hm-cats-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.hm-cdot{width:6px;height:6px;border-radius:50%;background:#3a3a3a;transition:all .25s ease}
.hm-cdot.active{background:var(--y);width:18px;border-radius:3px}

/* Popular Services — horizontal scroll cards */
.hm-pop-srv-scroll{display:flex;gap:12px;padding:4px 16px 12px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hm-pop-srv-scroll::-webkit-scrollbar{display:none}
.hm-pop-srv-card{flex:0 0 78%;max-width:300px;background:#141414;border:1px solid #232323;
  border-radius:18px;padding:14px;position:relative;cursor:pointer;scroll-snap-align:start;
  transition:transform .2s ease,border-color .2s ease;display:flex;flex-direction:column}
.hm-pop-srv-card:hover{transform:translateY(-2px);border-color:#3a3a3a}
.hm-pop-srv-card:active{transform:scale(.985)}
.hm-pop-srv-drop{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;
  justify-content:center;font-size:16px;color:#fff;flex-shrink:0}
.hm-pop-srv-drop.c0{background:linear-gradient(135deg,#F5C518,#D9A800)}
.hm-pop-srv-drop.c1{background:linear-gradient(135deg,#9747FF,#6E2EE0)}
.hm-pop-srv-drop.c2{background:linear-gradient(135deg,#FF7847,#E04E1C)}
.hm-pop-srv-drop.c3{background:linear-gradient(135deg,#5096FF,#2E6FDF)}
.hm-pop-srv-drop.c4{background:linear-gradient(135deg,#FF5A96,#E03872)}
.hm-pop-srv-img{flex:1;display:flex;align-items:center;justify-content:center;padding:14px 4px;
  min-height:120px}
.hm-pop-srv-img img{max-width:100%;max-height:130px;object-fit:contain;
  filter:drop-shadow(0 12px 20px rgba(245,197,24,.18))}
.hm-pop-srv-name{font-family:'Outfit',sans-serif;font-weight:700;font-size:17px;color:#fff;
  margin-top:4px;letter-spacing:-.2px}
.hm-pop-srv-desc{font-family:'Manrope',sans-serif;font-size:12.5px;color:#888;margin-top:2px;
  margin-bottom:12px}
.hm-pop-srv-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto}
.hm-pop-srv-dur{font-family:'Manrope',sans-serif;font-size:12px;color:#a0a0a0;display:flex;
  align-items:center;gap:4px}
.hm-pop-srv-dur .ti{font-size:14px}
.hm-pop-srv-price{font-family:'Outfit',sans-serif;font-weight:800;font-size:16px;color:#fff;
  margin-left:auto;margin-right:10px}
.hm-pop-srv-add{width:32px;height:32px;border-radius:9px;background:var(--y);color:#0F0F0F;
  border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;line-height:1;transition:transform .15s ease;flex-shrink:0;
  box-shadow:0 4px 10px rgba(245,197,24,.3)}
.hm-pop-srv-add:active{transform:scale(.88)}

.hm-pop-srv-skel{flex:0 0 78%;max-width:300px;height:240px;background:#141414;border-radius:18px;
  border:1px solid #232323;position:relative;overflow:hidden}
.hm-pop-srv-skel::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.03),transparent);
  animation:srvShimmer 1.4s linear infinite}
@keyframes srvShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* MyPod Membership cards */
.hm-mem-section{margin-top:18px}
.hm-mem-cards{display:flex;gap:12px;padding:4px 16px 12px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hm-mem-cards::-webkit-scrollbar{display:none}
.hm-mem-card{flex:0 0 calc(33.333% - 8px);min-width:140px;max-width:200px;border-radius:16px;
  padding:14px 12px;text-align:center;cursor:pointer;position:relative;overflow:hidden;
  scroll-snap-align:start;border:1px solid;
  transition:transform .2s ease,box-shadow .25s ease;display:flex;flex-direction:column;align-items:center}
.hm-mem-card:active{transform:scale(.97)}
.hm-mem-card.tier-basic{background:radial-gradient(ellipse at top,#3d2c08 0%,#1a1208 40%,#0c0805 100%);
  border-color:rgba(245,197,24,.35);box-shadow:0 10px 25px rgba(245,197,24,.12)}
.hm-mem-card.tier-pro{background:radial-gradient(ellipse at top,#2a2a3a 0%,#15151f 40%,#0a0a14 100%);
  border-color:rgba(200,200,220,.35);box-shadow:0 10px 25px rgba(200,200,220,.12)}
.hm-mem-card.tier-ult{background:radial-gradient(ellipse at top,#4a2c08 0%,#2a1808 40%,#150c04 100%);
  border-color:rgba(255,170,40,.5);box-shadow:0 10px 25px rgba(255,170,40,.18)}
.hm-mem-shine{position:absolute;top:-40%;left:-20%;width:140%;height:80%;
  background:radial-gradient(ellipse,rgba(255,255,255,.1) 0%,transparent 50%);
  pointer-events:none;animation:memShine 6s ease-in-out infinite}
@keyframes memShine{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:.8;transform:translateY(8px)}}
.hm-mem-badge{width:80px;height:80px;display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;margin-bottom:6px}
.hm-mem-badge img{width:78px;height:78px;object-fit:contain;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.5))}
.hm-mem-name{font-family:'Outfit',sans-serif;font-weight:800;font-size:13.5px;color:#fff;
  letter-spacing:1.2px;margin-top:2px;position:relative;z-index:1}
.hm-mem-price{margin-top:6px;position:relative;z-index:1}
.hm-mem-amt{font-family:'Outfit',sans-serif;font-weight:800;font-size:18px;color:var(--y)}
.hm-mem-per{font-family:'Manrope',sans-serif;font-size:12px;color:#a0a0a0;margin-left:2px}
.hm-mem-off{margin-top:10px;background:rgba(0,0,0,.45);border:1px solid rgba(245,197,24,.25);
  border-radius:30px;padding:5px 12px;font-family:'Manrope',sans-serif;font-size:11px;
  font-weight:600;color:var(--y);letter-spacing:.3px;position:relative;z-index:1}

/* 5-tab bottom nav with elevated center Track button */
.bottom-nav-inner.bn-5{display:grid;grid-template-columns:1fr 1fr 1.2fr 1fr 1fr;
  align-items:flex-end;padding:6px 8px 8px}
.bn-5 .bottom-nav-item{font-size:11px}
.bn-5 .bottom-nav-label{font-size:10.5px;font-weight:600;letter-spacing:.2px;text-transform:none}
.bn-5 .bottom-nav-icon{font-size:22px;margin-bottom:3px}

.bnav-center{position:relative;transform:translateY(-8px)}
.bnav-center .bnav-center-orb{width:54px;height:54px;border-radius:50%;background:var(--y);
  color:#0F0F0F;display:flex;align-items:center;justify-content:center;font-size:24px;
  box-shadow:0 8px 20px rgba(245,197,24,.45),0 0 0 4px #0F0F0F,0 0 0 5px #1f1f1f;
  margin:0 auto 4px;transition:transform .15s ease}
.bnav-center:active .bnav-center-orb{transform:scale(.92)}
.bnav-center.active .bnav-center-orb{box-shadow:0 8px 24px rgba(245,197,24,.6),0 0 0 4px #0F0F0F,0 0 0 5px var(--y)}
.bnav-center .bottom-nav-label{color:var(--y);font-weight:700}
.bottom-nav-item:not(.active):not(.bnav-center) .bottom-nav-icon{color:#7a7a7a}
.bottom-nav-item:not(.active):not(.bnav-center) .bottom-nav-label{color:#7a7a7a}
.bottom-nav-item.active:not(.bnav-center) .bottom-nav-icon,
.bottom-nav-item.active:not(.bnav-center) .bottom-nav-label{color:var(--y)}

/* Mobile tweaks */
@media (max-width:480px){
  .hm-cat{width:90px}
  .hm-cat-icon{width:90px;height:90px}
  .hm-cat-icon img{width:64px;height:64px}
  .hm-pop-srv-card{flex-basis:82%}
  .hm-mem-card{flex-basis:calc(33.333% - 8px);padding:12px 8px}
  .hm-mem-amt{font-size:16px}
  .hm-mem-badge{width:64px;height:64px}
  .hm-mem-badge img{width:62px;height:62px}
}

/* Light theme adjustments */
body.theme-light .hm-cat-icon{background:#F4F4F4;border-color:#E5E5E5}
body.theme-light .hm-avatar{background:linear-gradient(135deg,#F4F4F4,#E5E5E5);color:#0F0F0F}
body.theme-light .hm-greeting{color:#0F0F0F}
body.theme-light #hm-location-text{color:#0F0F0F}
body.theme-light .hm-searchbar{background:#F4F4F4;border-color:#E5E5E5}
body.theme-light .hm-pop-srv-card{background:#fff;border-color:#E5E5E5}
body.theme-light .hm-pop-srv-name{color:#0F0F0F}

/* Override section title style for the new Swiggy-style home v5 (no // prefix, sentence case) */
#page-home .mp-sec-header{padding:0 16px;margin:18px 0 12px}
#page-home .mp-sec-title{font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;
  color:#fff;letter-spacing:-.3px;text-transform:none;display:inline-flex;align-items:center;gap:6px}
#page-home .mp-sec-title::before{content:none}
#page-home .mp-see-all{color:var(--y);font-size:13px;font-weight:600;cursor:pointer;
  font-family:'Manrope',sans-serif}
body.theme-light #page-home .mp-sec-title{color:#0F0F0F}

/* ── Location Picker Bottom Sheet ── */
.loc-picker-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1900;
  display:none;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px);
  animation:fadeIn .2s ease}
.loc-picker-overlay.show{display:flex}
.loc-picker-sheet{background:#1a1a1a;border-radius:24px 24px 0 0;padding:8px 18px 28px;
  width:100%;max-width:520px;max-height:90vh;min-height:50vh;overflow-y:auto;
  padding-bottom:calc(28px + env(safe-area-inset-bottom));
  animation:sheetSlideUp .25s cubic-bezier(.34,1.56,.64,1)}
@keyframes sheetSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.loc-picker-head{display:flex;justify-content:space-between;align-items:center;margin:8px 0 16px}
.loc-picker-head h3{font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;color:#fff;margin:0}
.loc-picker-gps-btn{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;
  background:rgba(245,197,24,.08);border:1px solid rgba(245,197,24,.3);border-radius:14px;
  cursor:pointer;color:#fff;text-align:left;transition:background .2s ease}
.loc-picker-gps-btn:hover{background:rgba(245,197,24,.12)}
.loc-picker-gps-btn:active{transform:scale(.98)}
.loc-picker-gps-btn .ti-current-location{font-size:24px;color:var(--y)}
.loc-picker-gps-title{font-family:'Outfit',sans-serif;font-weight:700;font-size:14px;color:#fff}
.loc-picker-gps-sub{font-family:'Manrope',sans-serif;font-size:12px;color:#888;margin-top:2px}
.loc-picker-divider{display:flex;align-items:center;gap:10px;margin:16px 0;
  font-family:'Manrope',sans-serif;font-size:11px;color:#666;letter-spacing:2px;font-weight:600}
.loc-picker-divider::before,.loc-picker-divider::after{content:'';flex:1;height:1px;background:#2a2a2a}
.loc-picker-input-wrap{display:flex;align-items:center;gap:10px;background:#0f0f0f;
  border:1px solid #2a2a2a;border-radius:14px;padding:0 14px;transition:border-color .2s ease}
.loc-picker-input-wrap:focus-within{border-color:var(--y)}
.loc-picker-input-wrap .ti{color:#888;font-size:18px}
.loc-picker-input-wrap input{flex:1;padding:14px 0;background:transparent;border:none;
  outline:none;color:#fff;font-family:'Manrope',sans-serif;font-size:14px}
.loc-picker-input-wrap input::placeholder{color:#666}
.loc-picker-results{margin-top:12px;max-height:300px;overflow-y:auto}
.loc-picker-result-item{padding:12px 14px;border-radius:10px;cursor:pointer;
  display:flex;align-items:flex-start;gap:10px;transition:background .15s ease}
.loc-picker-result-item:hover{background:rgba(255,255,255,.04)}
.loc-picker-result-item .ti{color:var(--y);font-size:16px;margin-top:2px;flex-shrink:0}
.loc-picker-result-item div{font-family:'Manrope',sans-serif;font-size:13px;color:#e0e0e0;line-height:1.4}

body.theme-light .loc-picker-sheet{background:#fff}
body.theme-light .loc-picker-head h3{color:#0F0F0F}
body.theme-light .loc-picker-input-wrap{background:#F4F4F4;border-color:#E5E5E5}
body.theme-light .loc-picker-input-wrap input{color:#0F0F0F}
body.theme-light .loc-picker-result-item div{color:#0F0F0F}
body.theme-light .loc-picker-result-item:hover{background:#F4F4F4}

/* Saved + Recent sections (Swiggy-style) */
.loc-picker-section{margin-top:18px}
.loc-picker-section-title{font-family:'Outfit',sans-serif;font-size:10px;letter-spacing:2px;
  color:var(--y);text-transform:uppercase;font-weight:700;padding:0 4px;margin-bottom:8px}
.loc-picker-section-body{display:flex;flex-direction:column;gap:4px}
.loc-picker-saved-item, .loc-picker-recent-item{display:flex;align-items:flex-start;gap:14px;
  padding:12px 12px;border-radius:12px;cursor:pointer;transition:background .15s ease}
.loc-picker-saved-item:hover, .loc-picker-recent-item:hover{background:rgba(255,255,255,.04)}
.loc-picker-saved-item:active, .loc-picker-recent-item:active{background:rgba(245,197,24,.08)}
.loc-picker-saved-item > .ti, .loc-picker-recent-item > .ti{color:#a0a0a0;font-size:20px;margin-top:2px;flex-shrink:0}
.loc-picker-saved-item > .ti.ti-home, .loc-picker-saved-item > .ti.ti-briefcase{color:var(--y)}
.loc-picker-saved-body{flex:1;min-width:0}
.loc-picker-saved-label{font-family:'Outfit',sans-serif;font-weight:700;font-size:14px;color:#fff;margin-bottom:2px}
.loc-picker-saved-addr{font-family:'Manrope',sans-serif;font-size:12px;color:#888;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.loc-picker-recent-text{font-family:'Manrope',sans-serif;font-size:13px;color:#d0d0d0;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
body.theme-light .loc-picker-saved-label{color:#0F0F0F}
body.theme-light .loc-picker-saved-addr, body.theme-light .loc-picker-recent-text{color:#666}
body.theme-light .loc-picker-saved-item:hover, body.theme-light .loc-picker-recent-item:hover{background:#F4F4F4}

/* ═════ Luxury Branded Tiles (Jun 19, 2026) ═════ */
.hm-cat.luxury-tile{width:120px;text-align:center;padding:0}
.hm-cat.luxury-tile > img{width:120px;height:120px;object-fit:contain;display:block;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 8px 20px rgba(245,197,24,.18))}
.hm-cat.luxury-tile:hover > img{transform:translateY(-3px) scale(1.03);
  filter:drop-shadow(0 12px 30px rgba(245,197,24,.35))}
.hm-cat.luxury-tile:active > img{transform:scale(.95)}
/* Hide the CSS label since the tile image already has an embedded label */
.hm-cat.luxury-tile .hm-cat-label{display:none}

@media (max-width:480px){
  .hm-cat.luxury-tile{width:108px}
  .hm-cat.luxury-tile > img{width:108px;height:108px}
}
@media (max-width:360px){
  .hm-cat.luxury-tile{width:96px}
  .hm-cat.luxury-tile > img{width:96px;height:96px}
}

/* ═════ Full-bleed Banner (Admin-Uploaded Image Mode) ═════
   When admin uploads an image, the image becomes the entire slide
   (no big text overlay) to prevent visual duplication with text
   that's already baked into the image design. */
.popart-card.popart-fullimg{
  position:relative;background:transparent;padding:0;overflow:hidden;
}
.popart-card.popart-fullimg .popart-fullimg-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;border-radius:inherit;
}
.popart-card.popart-fullimg .popart-fullimg-cta{
  position:absolute;bottom:14px;right:14px;z-index:2;
  background:#0F0F0F;color:#F5C518;border:none;cursor:pointer;
  padding:10px 18px;border-radius:28px;font-family:'Outfit',sans-serif;
  font-weight:800;font-size:13px;letter-spacing:.4px;
  display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  transition:transform .15s ease, box-shadow .2s ease;
}
.popart-card.popart-fullimg .popart-fullimg-cta:active{transform:scale(.94)}
.popart-card.popart-fullimg .popart-fullimg-cta:hover{
  box-shadow:0 8px 22px rgba(245,197,24,.4);
}
.popart-card.popart-fullimg .popart-fullimg-cta .popart-arrow{
  font-size:16px;line-height:1;
}

/* ═════ 4-tab Bottom Nav (slimmer, transparent — Feb 19 2026) ═════ */
.bottom-nav-inner.bn-4{
  display:grid;grid-template-columns:1fr 1fr 1.3fr 1fr 1fr;
  align-items:end;padding:4px 6px 4px;
}
/* Reorder visually so center Track sits between Explore and Profile */
.bn-4 .bottom-nav-item[data-nav="home"]    { grid-column:1; }
.bn-4 .bottom-nav-item[data-nav="services"]{ grid-column:2; }
.bn-4 .bottom-nav-item.bnav-center         { grid-column:3; }
.bn-4 .bottom-nav-item[data-nav="profile"] { grid-column:5; }
.bn-4 .bottom-nav-item{font-size:11px;padding:4px 6px}
.bn-4 .bottom-nav-label{font-size:10px;font-weight:600;letter-spacing:.2px;text-transform:none}
.bn-4 .bottom-nav-icon{font-size:20px;margin-bottom:2px}
.bn-4 .bottom-nav-item.active::after{display:none}

/* Override the bottom-nav container to be slimmer + more transparent */
.bottom-nav{
  background:linear-gradient(to top, rgba(15,15,15,.92) 0%, rgba(15,15,15,.78) 60%, rgba(15,15,15,.55) 100%);
  border-top:none;
  padding:2px 0 calc(2px + env(safe-area-inset-bottom));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
@media (max-width:480px){
  .bn-4 .bottom-nav-icon{font-size:18px}
  .bn-4 .bottom-nav-label{font-size:9.5px}
}

/* ═════ Carwash Booking — Café-style Checkout body (Step 6) ═════ */
.bw-checkout-body{padding:0 0 24px}
.bw-checkout-body .cf-review-section{margin-top:18px}
.bw-checkout-body .cf-review-confirm{margin-top:18px}
.bw-checkout-body .ti-spin{animation:spinRot .9s linear infinite;display:inline-block}
@keyframes spinRot{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* ═════ Bottom Nav — Floating Pill (Feb 19 2026) ═════
   These rules reset the legacy .bottom-nav container so the pill
   floats independently with no extra wrapper styling. */
.bottom-nav.bn-pill{
  position:fixed !important;left:50% !important;right:auto !important;transform:translateX(-50%);
  bottom:calc(12px + env(safe-area-inset-bottom)) !important;
  background:rgba(20,20,20,.85) !important;
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:999px !important;padding:5px !important;
  box-shadow:0 14px 34px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3);
  width:auto !important;max-width:calc(100% - 28px) !important;z-index:90;
  display:block;
}
/* Hide bottom pill when the booking wizard is active (its sticky Continue/Back bar takes over) */
body.is-booking .bottom-nav,
body.is-booking .bottom-nav.bn-pill,
body.is-loc-picker .bottom-nav,
body.is-loc-picker .bottom-nav.bn-pill{display:none !important;}
.bottom-nav.bn-pill .bottom-nav-inner.bn-pill-inner{
  display:flex !important;gap:2px;padding:0;background:transparent;border-top:none;
  flex-direction:row;align-items:center;
}
.bn-pill-inner .bottom-nav-item{
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;
  padding:10px 12px;border-radius:999px;color:#a8a8a8;
  font-family:'Outfit',sans-serif;font-size:13px;font-weight:600;
  text-transform:none;letter-spacing:.1px;
  transition:background .22s ease, color .22s ease, transform .15s ease;
  white-space:nowrap;cursor:pointer;text-decoration:none;
  min-width:46px;height:42px;box-sizing:border-box;
}
.bn-pill-inner .bottom-nav-item:active{transform:scale(.92)}
.bn-pill-inner .bottom-nav-icon{margin:0;font-size:20px;display:inline-flex;line-height:1}
.bn-pill-inner .bottom-nav-label{font-size:13px;font-weight:700;display:inline-block;line-height:1}
/* Inactive: icon only */
.bn-pill-inner .bottom-nav-item:not(.active) .bottom-nav-label{display:none}
.bn-pill-inner .bottom-nav-item:not(.active){padding:10px 14px;min-width:46px}
/* Active state: yellow pill */
.bn-pill-inner .bottom-nav-item.active{
  background:var(--y);color:#0F0F0F;
  padding:10px 18px;
  box-shadow:0 4px 12px rgba(245,197,24,.4);
}
.bn-pill-inner .bottom-nav-item.active .bottom-nav-icon{color:#0F0F0F;font-size:18px;display:inline-flex !important;visibility:visible !important;}
.bn-pill-inner .bottom-nav-item.active .bottom-nav-icon i{display:inline-block;}
.bn-pill-inner .bottom-nav-item.active .bottom-nav-label{color:#0F0F0F}

@media (max-width:380px){
  .bn-pill-inner .bottom-nav-item{padding:9px 11px;min-width:42px;height:40px;gap:5px}
  .bn-pill-inner .bottom-nav-item.active{padding:9px 14px}
  .bn-pill-inner .bottom-nav-item.active .bottom-nav-label{font-size:12px}
  .bn-pill-inner .bottom-nav-icon{font-size:18px}
}

/* ═════ Popular Services — Hoora-style 2-column grid ═════ */
.hm-pop-srv-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  padding:8px 16px 24px;
}
.hp-card{
  background:#FAFAFC;border-radius:18px;overflow:hidden;cursor:pointer;
  border:1px solid #E8E8EE;
  transition:transform .2s ease, box-shadow .25s ease;
  display:flex;flex-direction:column;
}
.hp-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18)}
.hp-card:active{transform:scale(.99)}
.hp-card-banner{
  position:relative;width:100%;aspect-ratio:1/1;background:#EFEFF3;overflow:hidden;
}
.hp-card-img{width:100%;height:100%;object-fit:cover;display:block}
.hp-card-tag{
  position:absolute;top:10px;left:10px;z-index:2;
  background:rgba(0,0,0,.55);color:#fff;font-family:'Outfit',sans-serif;
  font-size:11px;font-weight:700;padding:5px 10px;border-radius:6px;
  backdrop-filter:blur(6px);letter-spacing:.2px;
}
.hp-card-body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:8px}
.hp-card-title{
  font-family:'Outfit',sans-serif;font-weight:700;font-size:15px;
  color:#0F0F0F;line-height:1.25;margin:0;letter-spacing:-.2px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:38px;
}
.hp-card-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 10px;border-radius:8px;
  font-family:'Manrope',sans-serif;font-size:11.5px;font-weight:500;line-height:1.2;
  max-width:100%;
}
.hp-card-pill > span{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hp-pill-included{background:#E8F5E9;color:#1B5E20}
.hp-pill-included .ti{color:#2E7D32;font-size:14px;flex-shrink:0}
.hp-card-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px}
.hp-card-price{
  font-family:'Outfit',sans-serif;font-weight:800;font-size:20px;color:#0F0F0F;
  letter-spacing:-.4px;
}
.hp-card-book{
  background:var(--y);color:#0F0F0F;border:none;cursor:pointer;
  padding:8px 14px;border-radius:8px;
  font-family:'Outfit',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.1px;transition:transform .15s ease, box-shadow .2s ease;
  box-shadow:0 2px 6px rgba(245,197,24,.25);
}
.hp-card-book:active{transform:scale(.94)}
.hp-card-monthly{
  display:flex;align-items:center;gap:8px;margin-top:6px;cursor:pointer;
  padding:8px 10px;border-radius:8px;
  background:#E8F5E9;transition:background .15s ease;
}
.hp-card-monthly:hover{background:#D4EDD7}
.hp-monthly-off{
  background:#2E7D32;color:#fff;font-family:'Outfit',sans-serif;
  font-weight:700;font-size:10.5px;padding:3px 7px;border-radius:5px;
  letter-spacing:.3px;
}
.hp-monthly-label{
  flex:1;font-family:'Manrope',sans-serif;font-weight:600;font-size:12px;
  color:#1B5E20;display:flex;align-items:center;gap:4px;
}
.hp-monthly-label .ti{font-size:13px}

/* Mobile responsive */
@media (max-width:380px){
  .hm-pop-srv-grid{grid-template-columns:1fr 1fr;gap:10px;padding:8px 12px 22px}
  .hp-card-title{font-size:14px;min-height:34px}
  .hp-card-price{font-size:18px}
  .hp-card-book{padding:7px 11px;font-size:12px}
}

/* Dark theme: keep cards light for the Hoora look (white-on-dark contrast pop) */
body.theme-light .hp-card{background:#FAFAFC;border-color:#E8E8EE}

/* On dark theme the section title is white — keep that */

/* ═══════════════════════════════════════════════════════════
   COMING-SOON BADGE ON CATEGORY TILE  (Membership tile)
   ═══════════════════════════════════════════════════════════ */
.hm-cat.hm-cat-soon{position:relative;}
.hm-cat.hm-cat-soon > img{filter:saturate(.72) brightness(.86);}
.hm-cat-soon-badge{
  position:absolute; top:6px; right:6px;
  background:linear-gradient(135deg,#FFD86B 0%,#F5B840 100%);
  color:#0a0a0a; font-family:'Manrope',sans-serif; font-weight:800;
  font-size:9px; letter-spacing:.6px; padding:3px 7px; border-radius:999px;
  box-shadow:0 3px 10px rgba(245,184,64,.35),0 0 0 1.5px rgba(0,0,0,.25);
  text-transform:uppercase; z-index:2; pointer-events:none;
  animation:hmSoonPulse 2.4s ease-in-out infinite;
}
@keyframes hmSoonPulse{
  0%,100%{transform:translateY(0);box-shadow:0 3px 10px rgba(245,184,64,.35),0 0 0 1.5px rgba(0,0,0,.25);}
  50%{transform:translateY(-1px);box-shadow:0 5px 14px rgba(245,184,64,.55),0 0 0 1.5px rgba(0,0,0,.25);}
}
@media (max-width:480px){ .hm-cat-soon-badge{font-size:8px;padding:2px 6px;top:4px;right:4px;} }

/* ═══════════════════════════════════════════════════════════
   OFFERS / PROMO CODES BOTTOM SHEET
   ═══════════════════════════════════════════════════════════ */
.pr-sheet-inner{
  max-height:82vh; overflow:hidden; display:flex; flex-direction:column;
}
.pr-sheet-body{
  padding:14px 18px 28px; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.pr-intro{
  font-family:'Manrope',sans-serif; font-size:13px; color:#A3A3A3;
  margin-bottom:14px; line-height:1.5;
}
.pr-list{display:flex; flex-direction:column; gap:12px;}

.pr-skeleton{
  height:96px; border-radius:14px;
  background:linear-gradient(90deg,#1a1a1a 0%,#242424 50%,#1a1a1a 100%);
  background-size:200% 100%; animation:prShimmer 1.4s linear infinite;
}
@keyframes prShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.pr-card{
  display:grid;
  grid-template-columns: 92px 1fr auto;
  gap:12px; align-items:stretch;
  background:linear-gradient(135deg,#141414 0%,#191919 100%);
  border:1px solid #262626; border-radius:16px; padding:14px 12px;
  position:relative; overflow:hidden;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pr-card::before{
  content:''; position:absolute; left:80px; top:-4px; bottom:-4px;
  width:0; border-left:1.5px dashed #2c2c2c;
}
.pr-card:hover{transform:translateY(-1px); border-color:#3a3a3a; box-shadow:0 8px 24px rgba(0,0,0,.35);}

.pr-card-left{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#FFD86B 0%,#F5B840 100%);
  border-radius:10px; padding:8px 4px; color:#0a0a0a;
}
.pr-value{
  font-family:'Manrope',sans-serif; font-weight:900; font-size:18px; line-height:1;
  letter-spacing:-.3px;
}
.pr-scope{
  font-family:'Manrope',sans-serif; font-weight:800; font-size:8.5px;
  letter-spacing:.6px; margin-top:6px; opacity:.85; text-align:center;
}

.pr-card-mid{
  display:flex; flex-direction:column; justify-content:center; min-width:0;
  padding-left:6px;
}
.pr-desc{
  font-family:'Manrope',sans-serif; font-weight:600; font-size:13.5px;
  color:#F5F5F5; line-height:1.35; margin-bottom:4px;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.pr-meta{
  font-family:'Manrope',sans-serif; font-size:11px; color:#8A8A8A;
  letter-spacing:.2px; line-height:1.5;
}
.pr-expiry{color:#A3A3A3;}

.pr-card-right{
  display:flex; flex-direction:column; align-items:stretch; justify-content:center;
  gap:6px; min-width:96px;
}
.pr-code{
  font-family:'JetBrains Mono','Menlo',monospace;
  font-weight:700; font-size:12px; color:#FFD86B;
  background:rgba(255,216,107,.08); border:1.5px dashed rgba(255,216,107,.35);
  border-radius:8px; padding:6px 8px; text-align:center; letter-spacing:.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pr-copy{
  font-family:'Manrope',sans-serif; font-weight:800; font-size:10.5px;
  letter-spacing:.7px; background:#FFD86B; color:#0a0a0a;
  border:none; border-radius:8px; padding:7px 10px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  transition:transform .12s ease, background .18s ease;
}
.pr-copy i{font-size:13px;}
.pr-copy:hover{background:#FFDE85;}
.pr-copy:active{transform:scale(.96);}
.pr-copy.copied{background:#4ADE80; color:#052e12;}

.pr-empty{
  padding:36px 12px; text-align:center; color:#A3A3A3;
}
.pr-empty-emoji{font-size:44px; margin-bottom:10px;}
.pr-empty-title{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:15px;
  color:#F5F5F5; margin-bottom:6px;
}
.pr-empty-sub{
  font-family:'Manrope',sans-serif; font-size:12.5px; line-height:1.5;
}

/* Light theme adjustments */
body.theme-light .pr-card{background:#FFFFFF;border-color:#E5E5E5;}
body.theme-light .pr-desc{color:#171717;}
body.theme-light .pr-empty-title{color:#171717;}
body.theme-light .pr-code{color:#8A5A00;background:rgba(245,184,64,.12);border-color:rgba(245,184,64,.55);}
body.theme-light .pr-skeleton{
  background:linear-gradient(90deg,#EEE 0%,#F6F6F6 50%,#EEE 100%);
  background-size:200% 100%;
}

/* Compact on small screens */
@media (max-width:420px){
  .pr-card{grid-template-columns:78px 1fr auto; padding:12px 10px; gap:10px;}
  .pr-card-left{padding:6px 2px;}
  .pr-value{font-size:16px;}
  .pr-card-right{min-width:88px;}
  .pr-desc{font-size:12.5px;}
}