/* ─── Reset ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  { font-family: "IBM Plex Sans Arabic", sans-serif; }

/* ─── Hero backgrounds ───────────────────────── */
.hero-wasaly  { background: linear-gradient(150deg,#0a1628 0%,#1e3a8a 45%,#1d4ed8 100%); }
.hero-wasalny { background: linear-gradient(150deg,#0c1a2e 0%,#164e63 45%,#06b6d4 100%); }
.hero-enqalny { background: linear-gradient(150deg,#020617 0%,#0f172a 55%,#1e3a8a 100%); }
/* Slim value strip on the Wasaly catalog tab -- the storefront below now
   serves the browsing purpose the full phone-mockup hero used to carry,
   so only Wasalny/Enqalny (no catalog) keep the full treatment. */
#hero.hero-slim {
  min-height: auto;
  padding-top: 110px;
  padding-bottom: 24px;
}
#hero.hero-slim .hero-copy .mt-9,
#hero.hero-slim .flex-shrink-0.float-anim {
  display: none;
}
.mesh-overlay {
  background:
    radial-gradient(ellipse 60% 50% at 10% 60%, rgba(59,130,246,.22) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 90% 20%, rgba(6,182,212,.14) 0%, transparent 65%),
    radial-gradient(ellipse 70% 40% at 50% 110%, rgba(0,0,0,.90) 0%, transparent 55%);
}

/* ─── Nav ────────────────────────────────────── */
.nav-base {
  background: rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(37,99,235,.2) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.nav-tab {
  padding: 5px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.5); cursor: pointer;
  transition: all .2s; border: 1px solid transparent; white-space: nowrap;
}
.nav-tab:hover { color: rgba(255,255,255,.85); }
.nav-tab.t-wasaly  { background:rgba(37,99,235,.22); border-color:rgba(37,99,235,.5); color:#93c5fd; }
.nav-tab.t-wasalny { background:rgba(6,182,212,.18); border-color:rgba(6,182,212,.5); color:#67e8f9; }
.nav-tab.t-enqalny { background:rgba(30,58,138,.35); border-color:rgba(30,58,138,.6); color:#93c5fd; }
.user-chip { display:none; align-items:center; gap:8px; padding:5px 10px; border-radius:100px; }
.user-chip.show { display:flex; }
.uc-name { font-size:12px; color:#93c5fd; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uc-btn  { background:none; border:none; cursor:pointer; color:rgba(255,255,255,.4); font-size:12px; padding:0 2px; font-family:inherit; transition:color .15s; }
.uc-btn:hover { color:rgba(255,255,255,.8); }

/* ─── Glass panel (matches lib/core/widgets/glass_panel.dart exactly) ── */
.glass-panel {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(37,99,235,.2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 16px;
}
.glass-panel.selected {
  background: rgba(255,255,255,.22);
  border-color: rgba(96,165,250,.7);
}
.user-chip.glass-panel { border-radius: 100px; }

/* ─── Vehicle selector chips (booking form, "اختر نوع المركبة") ──────
   Previously plain .glass-panel buttons -- that class sets no explicit
   color, and Tailwind's Preflight reset (loaded via the CDN <script> tag
   up top) makes <button> inherit color from its ancestors. Nothing up
   that chain sets one either, so it fell through to the browser's
   near-black UA default against this page's dark background: text that
   was there but functionally invisible. Dedicated class instead of
   patching .glass-panel itself, which is also used elsewhere (nav chips,
   the "Hide map" button, persona cards) for cases that don't necessarily
   want this same treatment. */
.vehicle-chip {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px;
  color: rgba(255,255,255,.8);
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .18s, background .18s, color .18s, transform .15s;
}
.vehicle-chip:hover { border-color: rgba(255,255,255,.5); }
.vehicle-chip.selected {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(59,130,246,.35), 0 0 14px rgba(59,130,246,.4);
}

/* ─── Category rail: hidden native scrollbar + smooth drag/touch scroll,
       plus glassmorphic desktop nav arrows overlaid on its edges ──────── */
.category-rail-scroller {
  scroll-behavior: smooth;
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge/IE */
}
.category-rail-scroller::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.rail-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
  z-index: 5;
  transition: background .15s;
}
.rail-arrow:hover { background: rgba(255,255,255,.22); }
.rail-arrow-left  { left: -4px; }
.rail-arrow-right { right: -4px; }

/* ─── Language toggle ────────────────────────── */
.lang-toggle { display:flex; align-items:center; gap:2px; padding:2px; border-radius:100px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.lang-btn { padding:4px 10px; border-radius:100px; font-size:11px; font-weight:600; font-family:"IBM Plex Mono",monospace; color:rgba(255,255,255,.45); background:none; border:none; cursor:pointer; transition:all .18s; }
.lang-btn:hover { color:rgba(255,255,255,.8); }
.lang-btn.active { background:#2563eb; color:#fff; }

/* ─── Buttons ────────────────────────────────── */
.btn-p {
  background:#2563eb; color:#fff; font-weight:600;
  font-family:"IBM Plex Sans Arabic",sans-serif;
  border-radius:8px; padding:11px 26px; font-size:14px;
  transition:background .18s, transform .15s;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  text-decoration:none; cursor:pointer; border:none;
}
.btn-p:hover   { background:#1d4ed8; transform:translateY(-1px); }
.btn-p:active  { transform:translateY(0); }
.btn-p:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.btn-p.cyan    { background:#0891b2; }
.btn-p.cyan:hover { background:#0e7490; }
.btn-p.navy    { background:#1e3a8a; }
.btn-p.navy:hover { background:#1e40af; }
.btn-g {
  background:transparent; color:rgba(255,255,255,.75); font-weight:500;
  font-family:"IBM Plex Sans Arabic",sans-serif;
  border:1px solid rgba(255,255,255,.22); border-radius:8px;
  padding:11px 26px; font-size:14px;
  transition:border-color .18s, color .18s, background .18s, transform .15s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer;
}
.btn-g:hover { border-color:rgba(255,255,255,.4); color:#fff; background:rgba(255,255,255,.05); transform:translateY(-1px); }

/* ─── Service tab panes ──────────────────────── */
.svc-pane { display:none; }
.svc-pane.active { display:block; }

/* ─── Phone mockup ───────────────────────────── */
.phone-wrap {
  width:200px; height:400px; border-radius:32px;
  border:5px solid rgba(255,255,255,.12); background:#111827;
  overflow:hidden; position:relative;
  box-shadow:0 40px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  flex-shrink:0;
}
.phone-notch {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:70px; height:20px; background:#111827;
  border-radius:0 0 14px 14px; z-index:10;
}
.phone-slide { width:100%; height:100%; display:none; padding:26px 10px 10px; overflow:hidden; flex-direction:column; gap:6px; }
.phone-slide.active { display:flex; }
.mock-bar { height:10px; border-radius:5px; background:rgba(255,255,255,.08); }
.mock-card { background:rgba(255,255,255,.06); border:1px solid rgba(59,130,246,.18); border-radius:8px; padding:8px 10px; display:flex; align-items:center; gap:8px; }
.mock-ava  { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.mock-chip { display:inline-flex; align-items:center; padding:1px 6px; border-radius:100px; font-size:8px; font-weight:600; }
.mock-map  { background:linear-gradient(135deg,#0c3547,#0a2233); border-radius:8px; height:110px; position:relative; border:1px solid rgba(6,182,212,.2); overflow:hidden; }
.mock-grid-h { position:absolute; left:0; right:0; height:1px; background:rgba(6,182,212,.1); }
.mock-grid-v { position:absolute; top:0; bottom:0; width:1px; background:rgba(6,182,212,.1); }
.mock-cargo  { background:rgba(255,255,255,.05); border:1px solid rgba(30,58,138,.3); border-radius:7px; padding:7px 10px; display:flex; align-items:center; gap:7px; font-size:10px; color:rgba(255,255,255,.65); }
.mock-cargo.sel { border-color:rgba(59,130,246,.6); background:rgba(59,130,246,.15); color:#93c5fd; }

/* ─── Simulator result ───────────────────────── */
.sim-result { background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.22); border-radius:12px; padding:16px; margin-top:12px; display:none; }
.sim-result.show { display:block; }

/* ─── How-it-works steps ─────────────────────── */
.step-num { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }

/* ─── Persona cards ──────────────────────────── */
.persona-card { border-radius:16px; padding:28px 22px; cursor:pointer; transition:transform .2s, box-shadow .2s; text-align:center; }
.persona-card:hover { transform:translateY(-5px); }

/* ─── Scroll reveal ──────────────────────────── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.reveal.vis { opacity:1; transform:none; }

/* ─── Animations ─────────────────────────────── */
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.float-anim { animation:floatY 5s ease-in-out infinite; }
@keyframes pulseRing { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.9);opacity:0} }
.pulse-ring { animation:pulseRing 2s ease-out infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ─── Modal ──────────────────────────────────── */
.modal-ov {
  position:fixed; inset:0; z-index:200;
  background:rgba(2,7,20,.86);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:16px;
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.modal-ov.open { opacity:1; pointer-events:all; }
.modal-card {
  background:#0a1628;
  background-image:linear-gradient(rgba(59,130,246,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,.05) 1px,transparent 1px);
  background-size:44px 44px;
  border:1px solid rgba(59,130,246,.2); border-radius:18px;
  padding:32px 28px; width:100%; max-width:430px; position:relative;
  box-shadow:0 40px 100px rgba(0,0,0,.65);
  transform:translateY(18px) scale(.95); opacity:0;
  transition:transform .38s cubic-bezier(0.16,1,0.3,1), opacity .22s ease;
  max-height:90vh; overflow-y:auto;
}
.modal-ov.open .modal-card { transform:translateY(0) scale(1); opacity:1; }
.modal-close {
  position:absolute; top:12px; left:12px; width:30px; height:30px; border-radius:8px;
  background:rgba(255,255,255,.06); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s; color:rgba(255,255,255,.45); font-size:16px; font-family:inherit;
}
.modal-close:hover { background:rgba(255,255,255,.12); color:rgba(255,255,255,.8); }
.step-bar { display:flex; gap:4px; margin-bottom:22px; }
.step-bar span { flex:1; height:3px; border-radius:2px; background:rgba(59,130,246,.18); }
.step-bar span.done { background:#2563eb; }

/* ─── Form elements ──────────────────────────── */
.f-lbl  { display:block; font-size:12px; font-weight:600; color:rgba(255,255,255,.58); margin-bottom:5px; text-align:right; }
.f-inp  { width:100%; background:rgba(0,0,0,.3); border:1px solid rgba(59,130,246,.22); border-radius:9px; padding:10px 13px; font-size:13px; font-family:"IBM Plex Sans Arabic",sans-serif; color:rgba(255,255,255,.88); outline:none; transition:border-color .18s; }
.f-inp:focus { border-color:rgba(59,130,246,.55); }
.f-inp::placeholder { color:rgba(255,255,255,.22); }
.f-inp option { background:#0a1628; color:rgba(255,255,255,.88); }
.f-hlp  { font-size:11px; color:rgba(255,255,255,.35); margin-top:4px; text-align:right; }

/* ─── Booking pickup/dropoff pin cards ───────────
   Clickable stand-ins for a text input (they open the map, not a
   keyboard), so they borrow .f-inp's exact background/border/radius to
   read as "a form field" rather than plain text, then layer on a
   pointer cursor + hover lift matching .btn-g/.btn-google's existing
   -1px convention elsewhere on this page. */
.pin-card {
  display:flex; align-items:center; gap:10px; width:100%;
  background:rgba(0,0,0,.3); border:1px solid rgba(59,130,246,.22);
  border-radius:12px; padding:10px 13px; cursor:pointer; text-align:start;
  font-family:"IBM Plex Sans Arabic",sans-serif;
  transition:border-color .18s, background .18s, transform .15s;
}
.pin-card:hover { border-color:rgba(59,130,246,.55); background:rgba(255,255,255,.06); transform:translateY(-1px); }
/* Active/dimmed states -- only applied while #bookingMapWrap is actually
   open (see _updateActiveCardHighlight()); neither card looks special
   before the map has ever been opened. Glow color matches that pin's own
   badge/marker color so "which card is active" reads at a glance without
   needing to look at the map itself. */
.pin-card-active-a { border-color:#60a5fa; background:rgba(96,165,250,.1); box-shadow:0 0 0 2px rgba(96,165,250,.35), 0 0 16px rgba(96,165,250,.25); }
.pin-card-active-b { border-color:#f97316; background:rgba(249,115,22,.1); box-shadow:0 0 0 2px rgba(249,115,22,.35), 0 0 16px rgba(249,115,22,.25); }
.pin-card-dimmed { opacity:.55; }
.pin-card-text { min-width:0; flex:1; }
/* Caption ("نقطة الانطلاق"/"وجهة الوصول") is the headline -- role + icon,
   always the same regardless of pin state. Value (placeholder, then the
   resolved address once picked) is the secondary line underneath it. */
.pin-card-caption { display:block; font-size:16px; font-weight:700; color:#fff; margin-bottom:3px; line-height:1.25; }
.pin-card-value { display:block; font-size:12px; color:rgba(255,255,255,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pin-badge {
  flex-shrink:0; width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:13px;
}
.pin-badge-a { background:rgba(96,165,250,.18); border:1px solid #60a5fa; color:#60a5fa; }
.pin-badge-b { background:rgba(249,115,22,.18); border:1px solid #f97316; color:#f97316; }

/* ─── Places Autocomplete search box overlaid on #bookingMap ────────
   google.maps.places.Autocomplete (the classic <input>-attached widget,
   themed via its injected .pac-container/.pac-item) was tried first here
   and dropped: Google silently returns zero predictions from that class
   for any Cloud project that hadn't already enabled Places before March
   1st 2025 (confirmed against this project's key -- it had only ever
   used the separate Geocoding API before this feature). Replaced with
   the current google.maps.places.PlaceAutocompleteElement, a real custom
   element (<gmp-place-autocomplete>, see _initBookingPlacesSearch())
   appended into #bookingMapSearchWrap -- themed via its documented
   --gmp-mat-* custom properties (Shadow DOM means .pac-*-style class
   overrides can't reach inside it at all). */
#bookingMapSearchWrap { position:absolute; top:10px; inset-inline:10px; z-index:5; }
.booking-map-search-el {
  display:block; width:100%;
  --gmp-mat-color-surface: #0a1628;
  --gmp-mat-color-on-surface: #ffffff;
  --gmp-mat-color-on-surface-variant: rgba(255,255,255,.6);
  --gmp-mat-color-primary: #60a5fa;
  --gmp-mat-color-secondary-container: rgba(59,130,246,.18);
  --gmp-mat-color-on-secondary-container: #60a5fa;
  --gmp-mat-color-outline-decorative: rgba(59,130,246,.3);
  --gmp-mat-font-family: "IBM Plex Sans Arabic", sans-serif;
  border-radius: 10px;
  border: 1px solid rgba(59,130,246,.22);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.f-err  { background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.25); border-radius:8px; padding:9px 12px; font-size:12px; color:#fca5a5; text-align:center; display:none; }
.f-err.show { display:block; }
.f-ok   { background:rgba(37,99,235,.12); border:1px solid rgba(37,99,235,.25); border-radius:10px; padding:18px; text-align:center; display:none; color:#fff; }
.f-ok.show { display:flex; flex-direction:column; align-items:center; gap:10px; }
.spinner { width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.2); border-top-color:#fff; animation:spin .7s linear infinite; display:none; }
.spinner.show { display:inline-block; }
.auth-tabs { display:flex; border-bottom:1px solid rgba(59,130,246,.15); margin-bottom:20px; }
.auth-tab  { flex:1; padding:9px; font-size:13px; font-weight:500; background:none; border:none; cursor:pointer; color:rgba(255,255,255,.35); border-bottom:2px solid transparent; transition:color .18s, border-color .18s; font-family:"IBM Plex Sans Arabic",sans-serif; }
.auth-tab.active { color:#60a5fa; border-bottom-color:#2563eb; }
.role-toggle-row { display:flex; gap:8px; margin-bottom:16px; }
.role-toggle-btn { flex:1; padding:8px 4px; font-size:12px; font-weight:600; border-radius:8px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); color:rgba(255,255,255,.5); cursor:pointer; transition:all .15s; font-family:"IBM Plex Sans Arabic",sans-serif; }
.role-toggle-btn.active { background:rgba(37,99,235,.15); border-color:#2563eb; color:#60a5fa; }
.divider { display:flex; align-items:center; gap:10px; margin:14px 0; color:rgba(255,255,255,.22); font-size:12px; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.1); }
.btn-google { width:100%; display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; color:#1e293b; font-weight:600; font-size:14px; font-family:"IBM Plex Sans Arabic",sans-serif; border:none; border-radius:9px; padding:11px; cursor:pointer; transition:background .15s, transform .15s; }
.btn-google:hover { background:#f1f5f9; transform:translateY(-1px); }
.btn-google:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.svc-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:100px; font-size:11px; font-weight:500; }
.svc-on  { background:rgba(37,99,235,.2); color:#93c5fd; border:1px solid rgba(37,99,235,.35); }
.svc-off { background:rgba(255,255,255,.05); color:rgba(255,255,255,.3); border:1px solid rgba(255,255,255,.1); text-decoration:line-through; }
.cap-sec { display:none; }
.cap-sec.show { display:block; }

/* ─── Roadmap + community voting ─────────────── */
.roadmap-card { padding:24px; transition:transform .2s, box-shadow .2s; background:rgba(10,22,40,.55); }
.rm-idea-panel { background:rgba(10,22,40,.55); }
.rm-eyebrow-chip { display:inline-block; background:rgba(10,22,40,.55); padding:4px 14px; border-radius:100px; }
.roadmap-card:hover { transform:translateY(-3px); box-shadow:0 8px 24px rgba(0,0,0,.06); }
.rm-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:100px; font-size:10px; font-weight:600; white-space:nowrap; }
.rm-live     { background:rgba(34,197,94,.18); color:#86efac; }
.rm-progress { background:rgba(245,158,11,.18); color:#fde68a; }
.rm-soon     { background:rgba(148,163,184,.18); color:#e2e8f0; }
.rm-vote-btn { display:inline-flex; align-items:center; gap:6px; background:rgba(37,99,235,.15); border:1px solid rgba(37,99,235,.4); color:#93c5fd; font-weight:600; font-size:12px; border-radius:100px; padding:6px 14px; cursor:pointer; transition:all .15s; font-family:inherit; }
.rm-vote-btn:hover:not(:disabled) { background:rgba(37,99,235,.25); transform:translateY(-1px); }
.rm-vote-btn.voted, .rm-vote-btn:disabled { background:#2563eb; border-color:#2563eb; color:#fff; cursor:default; transform:none; }
.rm-vote-arrow { font-size:10px; }
.rm-try-link { font-size:12px; font-weight:600; color:#bfdbfe; cursor:pointer; background:none; border:none; font-family:inherit; padding:0; }
.rm-form-err { display:none; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.35); border-radius:8px; padding:9px 12px; font-size:12px; color:#fecaca; text-align:center; }
.rm-form-err.show { display:block; }
.rm-form-ok { display:none; background:rgba(59,130,246,.12); border:1px solid rgba(59,130,246,.35); border-radius:10px; padding:14px; text-align:center; color:#dbeafe; font-size:13px; font-weight:600; }
.rm-form-ok.show { display:block; }

/* ─── Responsive ─────────────────────────────── */
@media(max-width:768px){
  .phone-wrap{width:160px;height:320px;}
  .modal-card{padding:24px 18px;}
}
@media(prefers-reduced-motion:reduce){
  .float-anim,.pulse-ring{animation:none;}
  .reveal{opacity:1;transform:none;}
}

/* ─── Auth-resume overlay ─────────────────────
   Hidden by default; html.auth-resuming (set synchronously below, before
   first paint) hides every other body child and shows this instead, so
   returning from the Google redirect never flashes the login modal or a
   blank page while getRedirectResult()/handleGoogleAuthSuccess resolve. */
#authResumeOverlay{
  display:none; position:fixed; inset:0; z-index:9999;
  background:#0D1B2A; align-items:center; justify-content:center;
}
html.auth-resuming #authResumeOverlay{ display:flex; }
html.auth-resuming body > *:not(#authResumeOverlay){ display:none !important; }
.auth-resume-spinner{
  width:40px; height:40px; border-radius:50%;
  border:3px solid rgba(255,255,255,.18); border-top-color:#60a5fa;
  animation:auth-resume-spin .8s linear infinite;
}
@keyframes auth-resume-spin{ to{ transform:rotate(360deg); } }