/* ═══════════════════════════════════════════════════════════════
   stars.css — Stars Taxi website styles
   Extracted from index.html. Two original <style> blocks merged in
   their original order: base styles first, then Flatpickr theme
   overrides. Loaded AFTER the Flatpickr CDN CSS so the theme wins.
   ═══════════════════════════════════════════════════════════════ */

/* ── Block 1: base styles (was first <style> in index.html) ── */

/* ═══════════════════════════════════════════════════════════════
   מוניות הכוכבים — דף הבית v4
   פלטה: כחול לילה עמוק + זהב חם על רקע קרם בהיר
   עקרונות: רגיעה · אמינות · זרימה · נגישות 5568 AA · מובייל ראשון
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  --bg:            #FEFDFB;
  --bg-soft:       #F8FAFC;
  --bg-sky:        #F0F9FF;
  --bg-sky-2:      #E0F2FE;
  --surface:       #FFFFFF;
  --primary:       #0C4A6E;
  --primary-dark:  #082F49;
  --primary-light: #0369A1;
  --primary-softer:#38BDF8;
  --accent:        #F59E0B;
  --accent-bright: #FBBF24;
  --accent-gold:   #F5C518;
  --accent-soft:   #FEF3C7;
  --accent-pale:   #FFFBEB;
  --text:          #0F172A;
  --text-muted:    #64748B;
  --text-light:    #94A3B8;
  --border:        #E2E8F0;
  --border-light:  #F1F5F9;
  --success:       #059669;
  --success-light: #D1FAE5;
  --danger:        #DC2626;
  --whatsapp:      #25D366;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius:    16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.05), 0 2px 12px rgba(12,74,110,.05);
  --shadow-md: 0 2px 8px rgba(15,23,42,.06), 0 12px 40px rgba(12,74,110,.09);
  --shadow-lg: 0 4px 16px rgba(15,23,42,.08), 0 30px 80px rgba(12,74,110,.16);
  --shadow-gold: 0 12px 32px rgba(245,158,11,.3);

  --ease:      cubic-bezier(.16,1,.3,1);
  --ease-in:   cubic-bezier(.4,0,.2,1);
  --t-fast:    .18s var(--ease-in);
  --t-med:     .35s var(--ease);
  --t-slow:    .6s var(--ease);

  --nav-h: 72px;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  /* עידן 19.8 (החלקת-טפסים): scroll-behavior:smooth על ה-html גרם לגלילות-דף
     "מלוטפות/צפות" בכל scrollIntoView בזמן מילוי-הטופס (הרגשת-ריחוף/קפיצה).
     ברירת-המחדל auto — כל אנימציית-גלילה שבאמת רוצים נעשית מפורשות בקוד. */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

ul { list-style: none; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.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;
}

.skip-link {
  position: absolute;
  top: -100px; right: 0;
  background: var(--primary);
  color: white;
  padding: 12px 20px;
  border-radius: 0 0 0 8px;
  font-weight: 700;
  z-index: 9999;
  transition: top var(--t-fast);
}
.skip-link:focus { top: 0; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Tabular nums for prices */
.tnum { font-variant-numeric: tabular-nums; }

/* ═══ פלטות חלופיות (דמו) ═══ */
body[data-palette="b"] {
  --bg: #F8F3E4;
  --bg-soft: #F4EEDC;
  --bg-sky: #FBF6E8;
  --bg-sky-2: #F7EFD4;
  --primary: #1A1A1A;
  --primary-dark: #000000;
  --primary-light: #2D2D2D;
  --primary-softer: #525252;
  --accent: #F5C518;
  --accent-bright: #FFD84D;
  --accent-soft: #FFF4B8;
  --accent-pale: #FDF7D8;
}
body[data-palette="b"] .hero {
  background:
    /* Soft warm glow high-center */
    radial-gradient(1200px 700px at 50% 15%, #FFF8E0 0%, transparent 65%),
    /* Subtle gold wash on right */
    radial-gradient(800px 500px at 85% 60%, #FAF0D0 0%, transparent 60%),
    /* Ivory base gradient */
    linear-gradient(180deg, #FBF6E8 0%, #F8F3E4 50%, var(--bg) 100%);
}
body[data-palette="b"] .banner-curve .curve-fill {
  fill: #FBF6E8;
}
body[data-palette="c"] {
  --bg: #FFFDF5;
  --bg-soft: #FFFBEB;
  --bg-sky: #FEF9C3;
  --bg-sky-2: #FDE68A;
  --primary: #1F2937;
  --primary-dark: #111827;
  --primary-light: #374151;
  --primary-softer: #9CA3AF;
}

/* ═══ Demo Bar ═══ */
.demo-bar {
  background: var(--primary);
  color: white;
  font-size: 12px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.demo-bar span { opacity: .7; }
.demo-bar button {
  background: rgba(255,255,255,.14);
  color: white;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  transition: background var(--t-fast);
  min-height: 28px;
}
.demo-bar button:hover:not(.active) { background: rgba(255,255,255,.25); }
.demo-bar button.active { background: var(--accent-gold); color: var(--primary-dark); }
.demo-close {
  margin-inline-start: 8px;
  width: 26px; height: 26px;
  padding: 0 !important;
  background: rgba(255,255,255,.12) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1;
}
.demo-bar.hidden { display: none; }
/* Admin bar trigger — hidden in normal use. Re-enable by adding
   #admin to the URL (e.g. https://stars-taxi.co.il/#admin), which the
   JS at the bottom of the file watches for. */
.demo-show { display: none !important; }

/* ═════════ Login modal ═════════
   Standalone two-stage login: phone → OTP → setLogged. Lives at body
   level (sibling of the booking overlay) so it can open from anywhere
   without conflict. */
.login-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: bfModalFade .25s ease-out;
}
.login-modal[hidden] { display: none !important; }
.login-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55);
}
.login-modal-card {
  position: relative;
  background: #fff;
  border-radius: 22px;
  padding: 28px 24px 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 30px 80px rgba(0,0,0,.4);
  animation: popIn .3s var(--ease, cubic-bezier(.16,1,.3,1)) both;
}
.login-modal-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 14px;
  width: 34px; height: 34px;
  background: transparent;
  border: 0;
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--t-fast, .15s) ease;
}
.login-modal-close:hover { background: rgba(0,0,0,.06); }
.login-modal-header {
  text-align: center;
  margin-bottom: 18px;
}
.login-modal-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.login-modal-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary, #0B1E3F);
  margin: 0 0 4px;
}
.login-modal-subtitle {
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  margin: 0;
  line-height: 1.5;
}
.login-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-stage[hidden] { display: none !important; }
.login-phone-input {
  font-size: 16px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.login-btn-primary {
  width: 100%;
  margin-top: 8px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--primary, #0B1E3F), var(--primary-dark, #071633));
  color: #fff;
  border: 0;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--t-fast, .15s) ease, box-shadow var(--t-fast, .15s) ease, opacity var(--t-fast, .15s) ease;
  box-shadow: 0 8px 24px rgba(11,30,63,.22);
}
.login-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(11,30,63,.28);
}
.login-btn-primary:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.login-btn-link {
  width: 100%;
  margin-top: 4px;
  padding: 8px;
  background: transparent;
  border: 0;
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.login-hint {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  text-align: center;
  line-height: 1.5;
}
.login-otp-prompt {
  font-size: 13px;
  color: var(--primary, #0B1E3F);
  text-align: center;
  margin: 0 0 4px;
}
.login-otp-prompt strong { font-weight: 800; }
.login-otp-boxes {
  display: grid;
  /* 6 columns — backend issues 6-digit codes (OTP_LENGTH=6). Shai's HTML
     ships 4 login boxes; the Next shell (lib/stars-page.tsx) injects boxes
     5+6 at runtime, so a 4-col grid wraps them to 4+2 ("8 boxes" look).
     Keep 6 so the injected boxes lay out on one row. */
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  max-width: 300px;
  margin: 0 auto;
}
.login-otp-box {
  width: 100%;
  aspect-ratio: 1;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid rgba(0,0,0,.12);
  border-radius: 10px;
  background: #fff;
  color: var(--primary, #0B1E3F);
  transition: border-color var(--t-fast, .15s) ease, box-shadow var(--t-fast, .15s) ease, background var(--t-fast, .15s) ease;
}
.login-otp-box:focus {
  outline: none;
  border-color: var(--accent-gold, #F5C518);
  box-shadow: 0 0 0 3px rgba(245,197,24,.18);
}
.login-otp-box.filled {
  background: linear-gradient(180deg, rgba(245,197,24,.10), #fff);
  border-color: var(--accent-gold, #F5C518);
}
@media (max-width: 480px) {
  .login-modal-card { padding: 22px 18px 18px; border-radius: 18px; }
  .login-otp-box { font-size: 18px; }
}

/* Customer-mode admin panel — hidden by default. Opens when the user
   taps the 👁️ button in the corner. Three modes for reviewing the
   site in different customer states. */
.bf-mode-panel {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  background: linear-gradient(180deg, #0B1E3F, #071633);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.bf-mode-panel.hidden { display: none; }
.bf-mode-panel-title {
  opacity: .7;
  font-size: 10.5px;
  margin-inline-end: 4px;
}
.bf-mode-btn {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast, .15s) ease, color var(--t-fast, .15s) ease, border-color var(--t-fast, .15s) ease;
  min-height: 26px;
}
.bf-mode-btn:hover {
  background: rgba(255,255,255,.18);
}
.bf-mode-btn.active {
  background: var(--accent-gold, #F5C518);
  color: var(--primary-dark, #071633);
  border-color: var(--accent-gold, #F5C518);
}
.bf-mode-panel-close {
  margin-inline-start: 6px;
  background: transparent;
  border: 0;
  color: rgba(255,255,255,.7);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background var(--t-fast, .15s) ease, color var(--t-fast, .15s) ease;
}
.bf-mode-panel-close:hover { background: rgba(255,255,255,.10); color: #fff; }
/* The 👁️ trigger — always visible, top-right. Hidden when the panel is open. */
.bf-mode-show {
  position: fixed;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 99;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--primary, #0B1E3F);
  color: #fff;
  border: 0;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(12,74,110,.3);
  transition: transform var(--t-fast, .15s) ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bf-mode-show:hover { transform: scale(1.1); }
.bf-mode-show.hidden { display: none; }
@media (max-width: 480px) {
  .bf-mode-panel { padding: 5px 8px; gap: 4px; font-size: 10px; }
  .bf-mode-panel-title { display: none; }
  .bf-mode-btn { padding: 3px 10px; font-size: 10px; min-height: 22px; }
  .bf-mode-show { width: 32px; height: 32px; font-size: 14px; top: 8px; inset-inline-end: 8px; }
}
body.bf-admin-mode .demo-show {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 60;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 16px;
  box-shadow: 0 6px 16px rgba(12,74,110,.3);
  transition: transform var(--t-fast);
}
body.bf-admin-mode .demo-show:hover { transform: scale(1.1); }

/* ═══ Navbar ═══ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(254,253,251,.95);
  /* The colored 1-pixel "short-circuit" flicker that appeared at the
     nav-to-hero seam was caused by sticky + backdrop-filter compositing
     race conditions. The previous gentle fix (isolation + translateZ +
     will-change) helped on Chrome desktop but didn't catch every case on
     mobile WebKit. Hard fix:
       • Drop backdrop-filter entirely. The glass-blur look isn't worth
         the cost — most customers won't notice; the flicker IS noticed.
       • Replace the 1px border-bottom with a 1px box-shadow so there's
         no painted line at the seam to leak pixels.
       • Keep contain + transform hints so the layer stays stable. */
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(12,74,110,.07);
  isolation: isolate;
  transform: translateZ(0);
  /* contain:paint was here to nail the flicker but it clipped the
     dropdown user menu (position:absolute extending below the nav).
     Drop it — isolation + transform are enough to stabilize the layer
     without forcing overflow:hidden semantics. */
}
.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.logo-link {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--primary);
  transition: transform var(--t-med);
}
.logo-link:hover { transform: translateY(-1px); }
.logo-img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(12,74,110,.22)) drop-shadow(0 1px 3px rgba(245,197,24,.2));
  transition: filter var(--t-med);
}
.logo-link:hover .logo-img {
  filter: drop-shadow(0 6px 16px rgba(12,74,110,.3)) drop-shadow(0 2px 6px rgba(245,197,24,.35));
}
.logo-text {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.01em;
  background: linear-gradient(180deg, var(--primary) 30%, var(--primary-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-text small {
  display: block;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--text-light);
  font-weight: 700;
  margin-top: 3px;
  background: none;
  -webkit-text-fill-color: var(--text-light);
}
.nav-links {
  display: flex;
  gap: 32px;
  font-weight: 500;
  font-size: 15px;
}
.nav-links a {
  color: var(--text);
  position: relative;
  padding: 4px 0;
  transition: color var(--t-fast);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; right: 0;
  width: 0; height: 2.5px;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent));
  border-radius: 2px;
  transition: width var(--t-med);
  box-shadow: 0 0 8px rgba(245,197,24,.3);
}
.nav-links a:hover { color: var(--primary); }
.nav-links a:hover::after { width: 100%; }
.nav-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-soft);
  color: var(--text);
  border: 1px solid var(--border-light);
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.chip-btn .label { white-space: nowrap; }
/* Icon follows the chip's text color — otherwise the person SVG (no fill set)
   defaults to black and vanishes on the navy logged-in chip. */
.chip-btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }
.chip-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: translateY(-1px);
}
.user-chip {
  background: var(--accent-gold);
  color: var(--primary-dark);
  border-color: var(--accent-gold);
}
.user-chip:hover {
  background: var(--accent-bright);
  color: var(--primary-dark);
  border-color: var(--accent-bright);
}
.user-chip.logged {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.user-chip.logged:hover { background: var(--primary-dark); }
.bell-btn {
  position: relative;
  width: 40px; height: 40px;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
}
.bell-btn.visible { display: inline-flex; }
.bell-badge {
  position: absolute;
  top: 7px; left: 7px;
  width: 9px; height: 9px;
  background: var(--accent);
  border-radius: 50%;
  border: 2px solid var(--bg);
  display: none;            /* shown only when there are unread notifications */
}
.bell-badge.has-unread { display: block; }

/* ═══ Hero ═══ */
.hero {
  position: relative;
  padding: 0 0 60px;
  background:
    radial-gradient(1000px 500px at 15% 55%, var(--bg-sky-2) 0%, transparent 65%),
    radial-gradient(900px 500px at 85% 70%, var(--bg-sky) 0%, transparent 60%),
    var(--bg);
  overflow: hidden;
}

.hero-banner {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  /* Lock the banner into its own GPU layer + stacking context. The
     slowZoom animation on banner-bg below was causing the seam between
     the banner and the next section to flicker as sub-pixel rendering
     drifted with the scale. Pinning the layer makes the seam stable. */
  isolation: isolate;
  transform: translateZ(0);
}
.banner-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  z-index: 0;
  /* slowZoom animation removed — multiple flicker-fix attempts on it
     didn't help, so we're killing it as the diagnostic / final answer.
     The static airplane shot is plenty atmospheric on its own; no one
     was going to miss the 6% scale drift. */
  /* animation: slowZoom 22s ease-in-out infinite alternate; */
}
/* Replacement subtle motion — opacity/scale only, no translate.
   The flicker was caused by translate-based animations drifting
   sub-pixel positioning at the seam. These don't move ANY edges:
     • banner-logo: scale 1 → 1.04 → 1, centered (gentle "breathing")
     • curve-line:  opacity 0.45 → 0.75 → 0.45 (the gold accent shimmers)
   Both run after the initial heroFadeUp so the entrance still
   completes cleanly. */
/* Pulse animation kicks in on MOBILE only (per-device user preference:
   mobile = 240/120 + pulse, desktop = 200 + float-only). Desktop keeps
   the gentle float defined in .banner-logo below. */
@media (max-width: 780px) {
  .banner-logo {
    animation:
      heroFadeUp .9s var(--ease) both,
      bannerLogoPulse 5.5s ease-in-out infinite 1s !important;
    transform-origin: center;
    will-change: transform;
  }
}
@keyframes bannerLogoPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.04); }
}
.banner-curve .curve-line {
  animation: bannerCurveShimmer 4s ease-in-out infinite;
}
@keyframes bannerCurveShimmer {
  0%, 100% { opacity: .45; }
  50%      { opacity: .75; }
}
.banner-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Dark vignette at top for logo contrast */
    radial-gradient(ellipse 65% 85% at 50% 38%, rgba(0,0,0,.32) 0%, transparent 68%),
    /* Subtle top darkening */
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, transparent 30%);
}
/* Delivery banner —
     • Desktop: photo is scaled DOWN (so the hands feel distant) and a
       BLURRED copy of the same photo paints behind it via ::before to
       fill the edges seamlessly — no flat navy gap. The blurred bg is
       darkened so the sharp foreground stays the focal point.
     • Mobile: keep the photo full-bleed with a brightness boost (no
       blurred bg, no scale — the small banner doesn't have room for
       letterboxing). object-position pushed to 95% so the hands sit
       near the TOP of the 160px banner, away from the centred logo. */
/* Airport — full-bleed cover on every viewport (default .banner-bg
   styles handle it; no tab-specific airport rules). */

/* Delivery — full-bleed cover. Subject (hands + package) sits roughly
   mid-frame, so a slight downward bias keeps the action centred. */
body[data-banner-mode="delivery"] .banner-bg {
  object-fit: cover;
  object-position: center 55%;
  filter: brightness(1.08) contrast(1.05) saturate(1.05);
}
@media (max-width: 780px) {
  /* Mobile delivery — zoom the photo 50% and pan LEFT so the box-
     handing action sits on the LEFT side of the banner. The logo
     itself is NOT touched. */
  body[data-banner-mode="delivery"] .banner-bg {
    transform: scale(1.5) translateX(-18%);
    transform-origin: center center;
    filter: brightness(1.05) contrast(1.05) saturate(1.05);
  }
}

/* Organic asymmetric curve — "flight path" separator */
.banner-curve {
  position: absolute;
  /* Pull the curve down 1px past the banner's bottom edge so its
     fill physically OVERLAPS the next section's start, eliminating the
     1-pixel transparent seam where the navbar / banner / hero-content
     compositors used to flicker. */
  inset: auto 0 -1px 0;
  width: 100%;
  height: 118px;
  z-index: 2;
  pointer-events: none;
  display: block;
  /* Pin to its own GPU layer — without this the curve's bottom row of
     pixels drifted between integer and half-pixel positions as the
     compositor re-paints during scroll. */
  transform: translateZ(0);
  backface-visibility: hidden;
}
.banner-curve .curve-fill {
  fill: var(--bg);
}
.banner-curve .curve-line {
  stroke: var(--accent);
  stroke-width: 2;
  opacity: .55;
  /* drop-shadow filter was causing chromatic-aberration flicker at the
     curve's seam during scroll. The gold line is a tiny accent — works
     fine without the glow, no flicker. */
}
.banner-logo {
  position: absolute;
  top: 50%; left: 50%;
  /* Desktop default = compact 200px (no pulse, just float). Mobile
     overrides this back up to 240→120 + pulse via the @media block
     further down — confirmed user preference per device class. */
  width: 200px;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 3;
  filter:
    drop-shadow(0 20px 45px rgba(0,0,0,.55))
    drop-shadow(0 6px 12px rgba(0,0,0,.35));
  animation: heroFadeUp .9s var(--ease) both, gentleFloat 5s ease-in-out infinite 1s;
}
@keyframes heroFadeUp {
  from { opacity: 0; transform: translate(-50%,-40%); }
  to   { opacity: 1; transform: translate(-50%,-50%); }
}
@keyframes gentleFloat {
  0%,100% { transform: translate(-50%,-50%); }
  50%     { transform: translate(-50%,calc(-50% - 8px)); }
}

.hero-content {
  padding-top: 20px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.hero-title {
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--primary);
  margin-bottom: 12px;
  text-wrap: balance;
  animation: fadeUp .7s var(--ease) both .1s;
}
.hero-title .accent {
  background: linear-gradient(135deg, var(--primary-light), var(--primary-softer));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  display: inline-block;
}
.hero-title .accent::after {
  content: '';
  position: absolute;
  inset: auto -4px 4px -4px;
  height: 10px;
  background: linear-gradient(90deg, var(--accent-gold), var(--accent), var(--accent-gold));
  opacity: .28;
  border-radius: 5px;
  z-index: -1;
  animation: shimmerLine 3s ease-in-out infinite;
}
.hero-tagline {
  font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent-gold), #D4950A);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: .03em;
  margin-bottom: 20px;
  animation: fadeUp .7s var(--ease) both .2s;
}
.hero-stars {
  display: none;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ Quote Card ═══ */
.quote-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  max-width: 1100px;
  margin: 0 auto;
  box-shadow:
    0 6px 20px rgba(15,23,42,.06),
    0 30px 80px rgba(12,74,110,.14),
    0 0 0 1px rgba(12,74,110,.04);
  border: none;
  position: relative;
  overflow: hidden;
  animation: fadeUp .9s var(--ease) both .4s;
}
/* When the city autocomplete dropdown is open, two things kill its
   visibility on the homepage:
     1. .quote-card has overflow:hidden so the dropdown gets clipped at
        the card's bottom edge.
     2. .direct-booking is a sibling that comes AFTER .quote-card in the
        DOM, so with both at z-index:auto the yellow direct-buttons
        render on TOP of the card content.
   Both conditions only matter while the dropdown is open. We use :has()
   to scope the override so the gold corner accent + clean stacking come
   right back the moment the customer picks a city. */
.quote-card:has(.bf-city-suggestions:not([hidden])) {
  overflow: visible;
  z-index: 10;
}
.quote-card::before {
  content: '';
  position: absolute;
  top: 0; inset-inline: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--accent), var(--primary-softer), var(--primary));
  box-shadow: 0 2px 12px rgba(245,197,24,.3);
}

.q-tabs {
  display: flex;
  padding: 18px 18px 0;
  gap: 16px;
  position: relative;
  z-index: 2;
  align-items: stretch;
}
/* Gold dot divider between tabs — contrasts with any tab color (airport, intercity, delivery, business) */
.q-tabs .q-tab + .q-tab::before {
  content: '';
  position: absolute;
  inset-inline-start: -10px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-gold, #F5C518);
  transform: translateY(-50%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.6);
  pointer-events: none;
}
.q-tabs .q-tab { position: relative; }
.q-tab {
  flex: 1;
  min-height: 52px;
  padding: 13px 12px;
  border-radius: 14px 14px 0 0;
  font-weight: 800;
  font-size: 14px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: color var(--t-fast), background var(--t-med), transform var(--t-fast);
  border: 1.5px solid transparent;
  border-bottom: none;
}
.q-tab svg {
  width: 20px; height: 20px;
  fill: currentColor;
  transition: transform var(--t-med), filter var(--t-med);
}
.q-tab::after {
  content: '';
  position: absolute;
  bottom: 0; inset-inline: 0;
  height: 3px;
  background: transparent;
  border-radius: 3px 3px 0 0;
  transition: background var(--t-med);
}
.q-tab:hover:not(.active):not(:disabled) {
  color: var(--primary);
  background: rgba(12,74,110,.04);
  transform: translateY(-1px);
}
.q-tab:hover:not(.active):not(:disabled) svg { transform: scale(1.15); }

/* Tab active — per-mode color */
.q-tab.active {
  color: white;
  border-color: rgba(255,255,255,.15);
  box-shadow:
    0 6px 20px rgba(12,74,110,.3),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.q-tab.active svg { filter: drop-shadow(0 0 6px rgba(255,255,255,.5)); }
.q-tab.active::after { background: rgba(255,255,255,.5); }

/* Active colors per tab */
.q-tab.active[data-mode="airport"] {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 100%);
}
.q-tab.active[data-mode="intercity"] {
  background: linear-gradient(180deg, #0D9488 0%, #0F766E 100%);
}
.q-tab.active[data-mode="delivery"] {
  background: linear-gradient(180deg, #EA580C 0%, #C2410C 100%);
}
/* Urban (עירוני) tab — violet/purple, distinct from amber (airport),
   teal (intercity), orange (delivery), indigo (business). The urban tab is
   feature-flag-gated by the shell (SiteSetting urban_taxi_enabled) and its
   pane is wired to /intercity-prices/lookup (DB-or-nothing). Added back on
   top of Shai's redesign — his base dropped the urban mode. */
.q-tab.active[data-mode="urban"] {
  background: linear-gradient(180deg, #7C3AED 0%, #5B21B6 100%);
}

.q-tab.locked {
  opacity: .4;
  cursor: not-allowed;
  font-size: 12px;
}
.q-tab.locked::before { content: '🔒'; font-size: 10px; margin-inline-end: 3px; }

.q-body {
  padding: 16px 26px 20px;
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(0,0,0,.08);
  margin-top: 10px;
}
/* Subtle shadow line between tabs and body title, styled per active tab */
.quote-card[data-active="airport"] .q-body { border-top-color: rgba(12,74,110,.18); }
.quote-card[data-active="intercity"] .q-body { border-top-color: rgba(13,148,136,.25); }
.quote-card[data-active="delivery"] .q-body { border-top-color: rgba(194,65,12,.25); }
.quote-card[data-active="business"] .q-body { border-top-color: rgba(245,197,24,.4); }
.q-card-title {
  text-align: center;
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 18px;
  letter-spacing: -.025em;
  line-height: 1.08;
  position: relative;
}
.q-card-title .q-icon {
  display: inline-block;
  vertical-align: middle;
  width: 28px; height: 28px;
  margin-inline-end: 6px;
  fill: var(--accent-gold);
  filter: drop-shadow(0 2px 6px rgba(245,197,24,.5));
  animation: pulseStar 3s ease-in-out infinite;
}
@keyframes pulseStar {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.15) rotate(8deg); }
}
.q-card-title .q-year-num {
  font-weight: 900;
  font-size: 1.15em;
  background: linear-gradient(135deg, var(--accent-gold), #FFD700, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
  letter-spacing: -.01em;
}
.q-card-title .q-year-num::after {
  content: '';
  position: absolute;
  inset: auto -4px -4px -4px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-gold), var(--accent));
  border-radius: 2px;
  animation: shimmerLine 3s ease-in-out infinite;
}
@keyframes shimmerLine {
  0%,100% { opacity: .5; }
  50%     { opacity: 1; }
}

/* Pane system — show only active pane */
.q-pane { display: none; }
.q-pane.active { display: block; }

/* Tab-specific accent bars */
.quote-card[data-active="airport"]::before { background: linear-gradient(90deg, var(--accent), var(--primary-softer), var(--primary)); }
.quote-card[data-active="intercity"]::before { background: linear-gradient(90deg, #0D9488, #5EEAD4, #0D9488); }
.quote-card[data-active="delivery"]::before { background: linear-gradient(90deg, #EA580C, #FDBA74, #EA580C); }

/* Tab-specific body background tints */
.quote-card[data-active="intercity"] .q-body {
  background: linear-gradient(180deg, #F0FDFA 0%, var(--surface) 60%);
}
.quote-card[data-active="delivery"] .q-body {
  background: linear-gradient(180deg, #FFF7ED 0%, var(--surface) 60%);
}
.quote-card[data-active="intercity"] .q-card-title { color: #0F766E; }
.quote-card[data-active="delivery"] .q-card-title { color: #C2410C; }

/* Full-width row */
.q-row.full { grid-template-columns: 1fr; }

/* Quad row — 4 equal columns */
.q-row.quad { grid-template-columns: repeat(4, 1fr); }

/* Triple row — 3 columns */
.q-row.triple { grid-template-columns: repeat(3, 1fr); }

/* From-to row with swap button */
/* From → To pair: stacked vertically (one row per field + swap pill
   between them) so each field gets the full container width. The
   previous side-by-side 3-column layout truncated long labels like
   "כתובת איסוף" / "כתובת מסירה" on narrow viewports. Used by both
   the intercity and delivery tabs in the quote card. */
/* From → To pair: stacked vertically (one row per field + swap pill
   between them) so each field gets the full container width.
   For intercity & delivery the labels are visually hidden — the
   placeholders ("עיר מוצא…" / "כתובת איסוף…") already convey the
   purpose, so removing the labels pulls "לאן" closer to the swap
   button (symmetric vertical balance the user asked for). */
.q-row.from-to {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 4px;
}
.q-row.from-to .q-field { gap: 2px; }
/* Hide the labels visually but keep them readable for screen readers. */
.q-pane[data-pane="intercity"] .q-row.from-to .q-label,
.q-pane[data-pane="delivery"] .q-row.from-to .q-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.swap-btn {
  width: 44px;
  height: 44px;
  justify-self: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--accent-gold);
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  box-shadow: 0 4px 10px rgba(12,74,110,.25);
  transition: transform var(--t-med), background var(--t-med);
}
.swap-btn:hover {
  transform: rotate(180deg) scale(1.08);
  background: var(--primary-light);
}

/* Price hidden/visible animation */
.price-hidden {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--t-med), max-height var(--t-med);
  pointer-events: none;
}
.price-visible {
  opacity: 1;
  max-height: 400px;
  overflow: visible;
  pointer-events: auto;
  animation: priceReveal .6s var(--ease) both;
}

/* DB-or-nothing apology (intercity + urban): when /intercity-prices/lookup
   returns {found:false} we show the admin-editable "מתנצלים…" message here
   instead of a number — NEVER synthesize a price. Referenced by Shai's
   index.html (.price-no-service-msg) but his stars.css shipped no styling,
   so the message rendered unstyled. See feedback_intercity_no_synthesis. */
.price-no-service-msg {
  margin-top: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.04));
  border: 1px solid rgba(245, 158, 11, 0.30);
  color: #92400E;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  font-weight: 600;
}
.price-no-service-msg.price-visible { display: block; }
.price-no-service-msg.price-hidden { display: none; margin-top: 0; }

/* Hint shown above city input until a city is picked */
.q-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
  text-align: center;
  letter-spacing: .02em;
  animation: hintPulse 2.4s ease-in-out infinite;
}
.q-hint.hidden { display: none; }
@keyframes hintPulse {
  0%, 100% { opacity: .55; transform: translateY(-2px); }
  50%      { opacity: 1; transform: translateY(2px); }
}

/* Progressive reveal — details row hides until city is picked */
.q-details-hidden {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  pointer-events: none;
  transition: opacity var(--t-med), max-height var(--t-med), margin var(--t-med);
}
/* Small "exact price — complete the details" hint above the pax row.
   Compact font but a gold-tinted pill so it pops against the white card
   without competing with the price numbers right above it. */
.q-exact-price-hint {
  display: inline-block;
  margin: 0 auto 10px;
  padding: 5px 12px;
  background: linear-gradient(135deg, rgba(245,197,24,.18), rgba(245,197,24,.08));
  border: 1px solid rgba(245,197,24,.45);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: var(--primary, #0B1E3F);
  letter-spacing: .01em;
  text-align: center;
  width: fit-content;
}
.q-details {
  /* Center the pill within the details block (.q-details has width:100% by
     default; we use display:block with text-align so the inline-block pill
     sits centered). */
  text-align: center;
}
.q-details > .q-row { text-align: start; }
/* The airport details block now uses a stacked layout: row 1 = pax + split
   luggage, row 2 = wheel-trigger spanning full width. Each inner row is
   its own grid so columns size independently. */
.q-details > .q-row + .q-row { margin-top: 12px; }
.q-row-pax-lug {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
}
.q-row-when {
  display: grid;
  grid-template-columns: 1fr;
}
/* Intercity uses the SAME wheel-trigger button as airport (single
   full-width row), so no override needed here — the base .q-row-when
   1fr layout applies. */
/* Delivery package counts: 3 small selects across one row */
.q-row-pkg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 480px) { .q-row-pkg { gap: 6px; } }

/* Delivery speed picker — two clickable options replacing the
   airport-style direction chips that don't apply to deliveries. */
.del-speed-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}
.del-speed-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  background: var(--surface, #fff);
  border: 2px solid var(--border, #E2E8F0);
  border-radius: 14px;
  font-family: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.del-speed-option:hover {
  border-color: rgba(12,74,110,.45);
  background: rgba(12,74,110,.03);
}
.del-speed-option.active {
  border-color: var(--accent, #F59E0B);
  background: linear-gradient(135deg, rgba(245,197,24,.10), rgba(245,197,24,.02));
  box-shadow: 0 4px 14px rgba(245,158,11,.18);
}
.del-speed-head { font-size: 15px; font-weight: 800; color: var(--primary, #0B1E3F); }
.del-speed-sub  { font-size: 12px; color: var(--text-muted, #64748B); font-weight: 600; }
.del-speed-price {
  margin-top: 4px;
  font-size: 22px;
  font-weight: 900;
  color: var(--primary, #0B1E3F);
}
.del-speed-price .currency { font-size: 14px; opacity: .8; margin-inline-end: 2px; }

.del-summary-line {
  font-size: 12px;
  color: var(--text-muted, #64748B);
  font-weight: 600;
  text-align: center;
  margin-bottom: 6px;
}
/* Homepage luggage split — same look as the booking form's bf-luggage-split,
   but built around plain selects (no +/- steppers on the homepage; the
   booking overlay handles upgrade flows). */
.q-luggage-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.q-luggage-split .bf-luggage-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.q-luggage-split .bf-stepper-select {
  width: 100%;
  min-height: 48px;
  padding: 10px 8px;
  border: 1px solid var(--border, rgba(0,0,0,.12));
  border-radius: 12px;
  background: #fff;
  font-weight: 800;
  font-size: 15px;
  text-align: center;
  color: var(--primary, #0B1E3F);
  appearance: none;
  -webkit-appearance: none;
}
.q-luggage-split .bf-stepper-select:focus {
  outline: none;
  border-color: var(--accent-gold, #F5C518);
  box-shadow: 0 0 0 3px rgba(245,197,24,.18);
}
/* Luggage allowance hint — small note that pops below the luggage row
   when the picked combination exceeds what fits in the regular vehicle
   for the picked pax. FYI; the booking overlay does the actual upgrade. */
.q-luggage-hint {
  margin: 6px 0 0;
  padding: 6px 10px;
  background: linear-gradient(135deg, rgba(245,197,24,.16), rgba(245,197,24,.05));
  border: 1px solid rgba(245,197,24,.42);
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary, #0B1E3F);
  line-height: 1.4;
}
.q-luggage-hint[hidden] { display: none !important; }
/* "סוג רכב: [שם]" line below the passengers field — calm, no gold. */
.q-vehicle-type {
  margin: 7px 2px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted, #64748B);
  line-height: 1.4;
}
.q-vehicle-type strong { color: var(--primary, #0C4A6E); font-weight: 800; }
.q-vehicle-type[hidden] { display: none !important; }
/* "+ יותר מזוודות" popup — collect full load (large + trolleys) with live preview */
.bf-lugpop { display: flex; flex-direction: column; gap: 14px; }
.bf-lugpop-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.bf-lugpop-label { font-size: 15px; font-weight: 700; color: var(--text, #0F172A); }
.bf-lugpop-stepper { display: inline-flex; align-items: center; gap: 10px; }
.bf-lugpop-btn {
  width: 44px; height: 44px; border-radius: 10px;
  border: 1px solid var(--border, #E2E8F0); background: #fff;
  font-size: 22px; font-weight: 800; line-height: 1;
  color: var(--primary, #0C4A6E); cursor: pointer;
  transition: background var(--t-fast, .15s), transform .08s;
}
.bf-lugpop-btn:hover { background: var(--bg-sky, #F0F9FF); }
.bf-lugpop-btn:active { transform: scale(.94); }
.bf-lugpop-num {
  min-width: 30px; text-align: center;
  font-size: 18px; font-weight: 800; color: var(--text, #0F172A);
}
.bf-lugpop-preview {
  margin-top: 4px; padding: 10px 12px;
  background: var(--bg-sky, #F0F9FF); border: 1px solid var(--border, #E2E8F0);
  border-radius: 10px; font-size: 14px; font-weight: 600;
  color: var(--primary-dark, #082F49); text-align: center; line-height: 1.5;
}
.bf-lugpop-preview strong { color: var(--primary, #0C4A6E); font-weight: 800; }
/* Stop rows (#bfStopsList) — address grows full width, ✕ fixed (44px tap),
   status drops to its own line below so it never squeezes the input. */
.bf-stop-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  margin-bottom: 10px;
}
/* Shay 13.7: address gets a full line of its own; controls drop below. */
/* שי 20.7: עוטף את שדה-הכתובת כדי שהדרופדאון-ההצעות (position:absolute)
   ייצמד מתחתיו ברוחב מלא, ובמובייל ייפתח נוח מעל שאר-הטופס. */
.bf-stop-addr-wrap { flex: 1 1 100%; min-width: 0; position: relative; }
/* 145 (שי 29.7): קוביית-חיפוש גדולה יותר + placeholder קטן שלא ייחתך */
.bf-stop-row .bf-stop-addr { width: 100%; min-width: 0; font-size: 16px; padding: 13px 12px; }
.bf-stop-row .bf-stop-addr::placeholder { font-size: 13px; }
/* 145: תפריט-ההצעות של Google Places — RTL, מעל האוברליי, טאצ'-נוח */
.pac-container {
  z-index: 100000 !important;
  direction: rtl;
  text-align: right;
  font-family: inherit;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
}
.pac-item { font-size: 14px; padding: 9px 12px; line-height: 1.45; cursor: pointer; }
.pac-item-query { font-size: 14px; }
/* 145ב (שי 31.7): "התיבה החתוכה" — תפריט-ההצעות נגזר כי מכולות-האב של בלוק-
   העצירות היו עם overflow שאינו visible (details/גוף-הבלוק/השורה). מבטיחים
   שרשרת-visible + מרווח-תחתון כדי שהרשימה תיפתח במלואה גם בשורה האחרונה. */
#bfStopsBlock, #bfStopsBlock .bf-strollers-body, #bfStopsList,
.bf-stop-row, .bf-stop-row .bf-stop-main { overflow: visible !important; }
#bfStopsList { padding-bottom: 4px; }
.pac-container { max-width: calc(100vw - 24px); }
.bf-stop-suggestions { text-align: right; }
.bf-stop-remove {
  flex: 0 0 auto; width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #E2E8F0); border-radius: 10px;
  background: #fff; color: var(--text-muted, #64748B);
  font-size: 15px; cursor: pointer;
  transition: background var(--t-fast, .15s), color var(--t-fast, .15s), border-color var(--t-fast, .15s);
}
.bf-stop-remove:hover { background: #FEF2F2; color: #DC2626; border-color: #FECACA; }
.bf-stop-status { flex: 1 1 auto; min-width: 0; }
.bf-stop-status:empty { display: none; }
/* Empty modal title (e.g. the homepage Shabbat card carries its own header) —
   collapse it so it leaves no gap above the body. */
.bf-modal-title:empty { display: none; }
@media (max-width: 480px) {
  .q-row-pax-lug { grid-template-columns: 1fr 1.3fr; gap: 8px; }
  .q-luggage-split { gap: 6px; }
  .q-luggage-split .bf-stepper-select { font-size: 14px; padding: 8px 6px; }
}
.q-details-visible {
  opacity: 1;
  max-height: 300px;
  pointer-events: auto;
  animation: detailsReveal .5s var(--ease) both;
}
@keyframes detailsReveal {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes priceReveal {
  0%   { opacity: 0; transform: translateY(16px) scale(.96); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Price attention glow after reveal */
.price-glow .price-option {
  animation: priceGlow 4s ease-out forwards;
}
@keyframes priceGlow {
  0%   { box-shadow: 0 0 0 0 rgba(245,197,24,.7), var(--shadow-md); }
  20%  { box-shadow: 0 0 40px 12px rgba(245,197,24,.5), var(--shadow-md); }
  50%  { box-shadow: 0 0 25px 6px rgba(245,197,24,.35), var(--shadow-md); }
  100% { box-shadow: 0 0 0 0 rgba(245,197,24,0), var(--shadow-md); }
}

/* Price number pop */
.price-pop .val {
  animation: numPop .5s var(--ease) both;
}
@keyframes numPop {
  0%   { transform: scale(.7); opacity: 0; }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* Single price card (intercity/delivery) */
.price-single {
  margin-top: 8px;
}
/* When hidden via .price-hidden, also kill the margin so the empty
   state of the form (e.g. intercity/delivery before cities are
   filled) collapses cleanly without phantom space below the city
   row. */
.price-single.price-hidden { margin-top: 0; }
.price-option.wide {
  max-width: 400px;
  margin: 0 auto;
}
/* Make price-single work as a clickable button */
button.price-single.price-option-btn {
  font: inherit;
  color: inherit;
  border: none;
  background: transparent;
  padding: 0;
  width: 100%;
  cursor: pointer;
  display: block;
}
button.price-single.price-option-btn .price-option {
  cursor: pointer;
  text-align: center;
  transition: border-color var(--t-med), transform var(--t-med), box-shadow var(--t-med);
}
button.price-single.price-option-btn:hover .price-option {
  border-color: var(--accent-gold);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(245,197,24,.2), 0 4px 14px rgba(12,74,110,.08);
}
button.price-single.price-option-btn:focus-visible {
  outline: 3px solid var(--accent-gold);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}
button.price-single.price-option-btn:hover .option-cta {
  transform: translateX(-3px);
}

/* Bigger "from / to" labels for intercity & delivery */
.q-from-to-big .q-label {
  font-size: 13px;
  letter-spacing: .3px;
}
.q-from-to-big .q-input {
  font-size: 16px;
}

/* Business login pane */
.biz-login {
  text-align: center;
  padding: 20px 10px 10px;
}
.biz-login-icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  background: var(--bg-sky);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.biz-login-icon svg { width: 34px; height: 34px; }
.biz-login-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 6px;
}
.biz-login-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
  max-width: 380px;
  margin-inline: auto;
}
.biz-form {
  max-width: 340px;
  margin: 0 auto;
  text-align: start;
}
.biz-submit {
  width: 100%;
  margin-top: 18px;
  min-height: 52px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  font-weight: 800;
  font-size: 16px;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(12,74,110,.3);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.biz-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(12,74,110,.42);
}
.biz-help {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 14px;
}
.biz-help a {
  color: var(--accent);
  font-weight: 700;
}

/* Business tab active color */
.q-tab.active[data-mode="business"] {
  background: linear-gradient(180deg, #4338CA 0%, #3730A3 100%);
}
.quote-card[data-active="business"]::before { background: linear-gradient(90deg, #4338CA, #818CF8, #4338CA); }
.quote-card[data-active="urban"]::before { background: linear-gradient(90deg, #5B21B6, #A78BFA, #5B21B6); }
.quote-card[data-active="business"] .q-body {
  background: linear-gradient(180deg, #EEF2FF 0%, var(--surface) 60%);
}
.quote-card[data-active="business"] .q-card-title { color: #3730A3; }

.q-form {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}
.q-row { display: grid; gap: 12px; }
.q-row.city-pax { grid-template-columns: 1fr 120px; }
.q-row.date-time { grid-template-columns: 1fr 1fr; }

.q-field { position: relative; }
.q-label {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Bumped 11→13 — the previous 11px was below the WCAG body-text
     floor and the labels (נוסעים / תאריך / שעה / מאיפה לאסוף וכו')
     looked thin against the much-larger inputs underneath. */
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.q-label svg { width: 15px; height: 15px; fill: var(--primary-light); }
.q-input,
.q-select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  /* 16px (not 15) so iOS Safari doesn't zoom-on-focus — this is the first
     field a customer taps, and a zoom jump disorients older users. 48px is
     a comfortable tap target. */
  font-size: 16px;
  font-weight: 600;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.q-input::placeholder { color: var(--text-light); font-weight: 500; }
.q-input:hover,
.q-select:hover {
  border-color: var(--primary-softer);
  box-shadow: 0 2px 8px rgba(12,74,110,.06);
}
.q-input:focus,
.q-select:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 4px rgba(245,197,24,.2), 0 2px 12px rgba(245,197,24,.1);
}
.q-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230C4A6E' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  padding-inline-start: 36px;
  color: var(--primary);
  font-weight: 800;
  text-align: center;
  cursor: pointer;
}

/* Rate tag */
.rate-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 6px 14px;
  background: var(--accent-pale);
  color: #b4710a;
  border: 1px solid rgba(245,158,11,.32);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  width: fit-content;
  margin: 0 auto 10px;
}
.rate-tag svg { width: 14px; height: 14px; fill: currentColor; }

/* Price cards — day + night shown simultaneously */
.price-pair {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 12px;
}
.price-option {
  background: linear-gradient(180deg, var(--bg-sky), var(--surface));
  /* עידן 21.7 (הדגשה): מסגרת-אמבר + רקע-אמבר-עדין + צל קבועים — הכפתורים
     "לנתב״ג"/"חזרה מנתב״ג" בולטים בברור גם בלי hover (חוזק מ-.55 ל-full). */
  border: 2px solid var(--accent-gold, #F5C518);
  background: linear-gradient(180deg, rgba(245, 197, 24, .10), rgba(255, 255, 255, .6));
  box-shadow: 0 4px 16px rgba(245, 197, 24, .22), 0 1px 5px rgba(12, 74, 110, .06);
  border-radius: var(--radius-lg);
  padding: 16px 14px 14px;
  text-align: center;
  position: relative;
  transition: border-color var(--t-med), transform var(--t-med), box-shadow var(--t-med);
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  display: block;
}
.price-option:focus-visible {
  outline: 3px solid var(--accent-gold);
  outline-offset: 2px;
}
.option-cta {
  margin-top: 10px;
  display: inline-block;
  font-size: 13px;
  font-weight: 900;
  color: var(--primary-dark);
  background:
    radial-gradient(ellipse 100% 140% at 50% -20%, rgba(255,255,255,.35) 0%, transparent 60%),
    linear-gradient(180deg, #F5C518 0%, #E8A708 40%, #D4950A 100%);
  padding: 9px 20px;
  border-radius: 999px;
  letter-spacing: .3px;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow:
    0 6px 16px rgba(245,197,24,.4),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(180,120,0,.2);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.price-option:hover .option-cta {
  transform: translateX(-3px);
  box-shadow:
    0 10px 22px rgba(245,197,24,.55),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(180,120,0,.2);
}
.price-option::before {
  content: '';
  position: absolute;
  top: 0; inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-gold), var(--primary-softer), var(--accent-gold));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.price-option:hover {
  border-color: var(--accent-gold);
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(245,197,24,.2), 0 4px 14px rgba(12,74,110,.08);
}
.option-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-gold);
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(12,74,110,.3);
  border: 1px solid rgba(245,197,24,.2);
  text-shadow: 0 0 10px rgba(245,197,24,.3);
}
.option-label svg { width: 15px; height: 15px; fill: var(--accent-gold); }
.price-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
}
.price-row .time {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}
.price-row .val {
  font-size: 24px;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.price-row .val .currency {
  font-size: 14px;
  color: var(--accent);
  margin-inline-end: 2px;
}
/* "סה״כ" suffix — hidden until extras (luggage / peak / shabbat) make
   the displayed price a TOTAL. Sits AFTER the number (small + muted)
   so the eye lands on the price first and reads "סה״כ" as a label, not
   a prefix. white-space: nowrap on .val keeps it on the same line as
   the number — never pushed below on mobile. updateAirportPrice flips
   .price-option.has-surcharge on each option independently so the
   to- and from-airport sides can suffix differently when only one
   direction crosses into peak hours.                                  */
.price-row .val { white-space: nowrap; }
.price-row .val .price-total-label {
  display: none;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted, #64748B);
  letter-spacing: .02em;
  margin-inline-start: 4px;       /* small gap to the LEFT of "סה״כ" (RTL = after the number) */
  vertical-align: 2px;
}
.price-option.has-surcharge .price-row .val .price-total-label {
  display: inline;
}
/* Mobile: when the "סה״כ" suffix is showing the row gets crowded, so
   hide the day/night label ("☀️ יום" / "🌙 לילה") to free space. The
   day/night info isn't lost — the row's currency colour and the
   surcharge-note line below still convey it. */
@media (max-width: 780px) {
  .price-option.has-surcharge .price-row .time { display: none; }
}
.price-row.night .val { color: var(--primary-light); }
/* שי 2026-06-18 (המלצת עידן): בדף הבית מציגים תמיד גם יום וגם לילה — לא מסתירים מחיר.
   כשנבחרה שעה, התעריף התואם מודגש (גדול+מודגש) והשני מעומעם כרפרנס (שקיפות).
   Toggle פר-כיוון (על ה-.price-option) — ב-19:50 "לנתב״ג" עדיין יום אבל "מנתב״ג" כבר לילה.
   RULE (Shai standing order, feedback_homepage_always_show_both_prices):
   the homepage ALWAYS shows BOTH day+night. Emphasize the matching row by
   size/weight ONLY — NEVER opacity/display:none/visibility:hidden the other
   rate. The old `opacity:.5` dim on the non-matching row was removed (it read
   as a confusing "price drop"); the reference row stays fully visible. */
.price-option.price-time-day   .price-row.day .val,
.price-option.price-time-night .price-row.night .val { font-size: 28px; font-weight: 800; }

/* Surcharge note — small line(s) below the price showing what
   add-ons made the price higher (luggage tier, peak hours, etc).
   Visible only when at least one surcharge is active. */
.price-surcharge-note {
  margin: 6px 0 0;
  padding: 0 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  line-height: 1.45;
  text-align: center;
}
.price-surcharge-note[hidden] { display: none !important; }
.price-surcharge-note > span { display: block; }

/* 572 (שי 10.9): אחרי בחירת-זמן נשארת שורה-אחת בלבד — "כבר לא צריך
   יום/לילה כי כבר בחרנו את הזמן". לפני-הבחירה (בלי price-time-*) שתי
   השורות מוצגות תמיד (הכלל-הקבוע של דף-הבית). */
.price-option.price-time-day  .price-row.night,
.price-option.price-time-night .price-row.day { display: none; }

/* 572 (שי 10.9): פס-סה"כ-לתשלום תחתון בתוך אופציית-מחיר — מוצג רק אחרי
   בחירת-זמן וכשיש תוספות; השורה-הראשית נשארת בסיס-נקי (יום/לילה). */
.price-option .price-total-strip {
  margin: 8px -4px 0;
  padding: 7px 10px 6px;
  border-top: 1px dashed rgba(11, 30, 63, .18);
  background: rgba(245, 197, 24, .12);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary, #0B1E3F);
  text-align: center;
  line-height: 1.3;
}
.price-option .price-total-strip b {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  margin-inline-start: 4px;
}
.price-surcharge-note .ps-amt {
  display: inline !important;
  color: var(--accent, #ca8a04);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* Hide the homepage surcharge notes whenever the booking overlay is
   open. Without this, the notes were visually leaking into the form
   on top of the overlay (a stacking-context edge case where the
   .price-option's transform-on-hover state combined with .quote-card's
   own stacking context placed the notes above the overlay backdrop).
   The form has its own breakdown — the homepage notes are redundant
   while the customer is already inside the booking flow. */
body:has(.overlay.open) .price-surcharge-note { display: none !important; }
/* Hide the form's own breakdown chip strip too — it was overlapping
   the street autocomplete suggestions when surcharges applied (peak
   hours, luggage tier). The bottom price button (bfBtnPriceSummary)
   already itemizes the same surcharges in a cleaner layout, so the
   chips below the input were redundant noise. */
.bf-pd-breakdown { display: none !important; }
.option-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.price-divider {
  align-self: stretch;
  border-inline-start: 2px dashed rgba(245,197,24,.35);
  width: 1px;
}

.q-disclaimer {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 10px;
}
.q-disclaimer strong { color: var(--primary); font-weight: 700; }

.updated-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--success-light);
  color: var(--success);
  border: 1px solid rgba(5,150,105,.28);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  width: fit-content;
  margin: 0 auto;
}
.updated-chip svg { width: 14px; height: 14px; fill: currentColor; }

/* Direct booking (skip price check) */
.direct-booking {
  max-width: 1100px;
  margin: 32px auto 0;
  padding: 0 4px;
}
.direct-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.direct-label::before,
.direct-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}
.direct-label span { white-space: nowrap; }
.direct-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.direct-buttons[hidden] { display: none !important; }
/* When one slot is an ACTIVE-booking card, don't sit it side-by-side with
   the "book a taxi" CTA — a status card next to an action button looks off.
   Stack them in a single centered column so the active booking reads as
   "your existing trip", with the booking CTA beneath it. */
.direct-buttons:has(.direct-btn--active) {
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
}

/* ── CTA chooser — segmented chips + single adaptive button ──
   Default state for guests / logged-no-booking customers. The chips
   look like an iOS segmented control; the single button below is the
   regular gold direct-btn with content swapped by JS. */
/* 226-א חלופה-ה' (שי 12.8): הבורר + כפתור-ההזמנה = **כרטיס אחד**. הטוגל למעלה
   (נבחר = מילוי-נייבי + טקסט-זהב · לא-נבחר = נייבי מלא על רצועה בהירה, לא אפור-דהוי
   12.5px), וכפתור-הזהב צמוד מתחת. הכי חשוב אחרי שדה-העיר. */
.cta-chooser {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1.5px solid #DCE6F0;
  background: #FBFDFF;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 3px 14px rgba(12,74,110,.10);
}
.cta-chooser[hidden] { display: none !important; }
.cta-chips {
  display: flex;
  gap: 0;
  padding: 4px;
  background: #EAF2F8;
  border: 0;
  border-radius: 999px;
  width: 100%;
  margin-inline: 0;
  max-width: 100%;
}
.cta-chip {
  flex: 1;
  padding: 11px 6px;
  min-height: 44px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #0C4A6E;
  cursor: pointer;
  transition: opacity, transform, color, background-color, border-color, box-shadow var(--t-fast, .15s) ease;
  white-space: nowrap;
  text-align: center;
  letter-spacing: -.01em;
}
.cta-chip:hover:not(.cta-chip--active) {
  background: rgba(12,74,110,.06);
}
.cta-chip--active {
  background: linear-gradient(135deg, #0C4A6E, #082F49);
  color: #FDE68A;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(12,74,110,.28);
}
@media (max-width: 480px) {
  .cta-chip { padding: 10px 6px; font-size: 14px; }
}

/* The single adaptive button — same look as direct-btn (gold gradient
   etc.) but stretches full width since it's the only button in its row. */
.cta-main-btn {
  width: 100%;
}
.cta-main-icon {
  /* Airplane / takeoff-landing video icon hidden per user request —
     keep the markup so the JS chip swap still works (it rewrites
     #ctaMainIcon's innerHTML), just don't render it. */
  display: none !important;
}
.direct-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* allow grid cell to shrink */
}
/* Small "+ הזמנה נוספת לנתב״ג" link below the active-card button. Subtle
   on purpose — the active card is the dominant visual; this is just an
   escape hatch for "I want to book another trip in this direction". */
.direct-extra-link {
  background: transparent;
  border: 1px dashed rgba(212,149,10,.45);
  border-radius: 10px;
  padding: 7px 12px;
  color: var(--primary, #0B1E3F);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity, transform, color, background-color, border-color, box-shadow .15s ease;
  align-self: stretch;
  text-align: center;
}
.direct-extra-link:hover {
  background: rgba(245,197,24,.08);
  border-color: rgba(212,149,10,.7);
  border-style: solid;
}
/* "Active booking" variant of the big direct-btn — the slot has a real
   booking on file, so we replace the "make a booking" CTA with a card
   that summarises the existing trip and invites view/edit. Override
   the gold v2-hero rules with !important since those carry high
   specificity from `body[data-hero="v2"]`. */
.direct-btn.direct-btn--active,
body[data-hero="v2"] .direct-btn.direct-btn--active {
  background:
    radial-gradient(ellipse 100% 140% at 50% -20%, rgba(255,255,255,.12) 0%, transparent 60%),
    linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 100%) !important;
  color: #064E3B !important;
  text-shadow: none !important;
  box-shadow:
    0 10px 28px rgba(5,150,105,.18),
    0 2px 6px rgba(5,150,105,.12),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(5,150,105,.15) !important;
  border: 1.5px solid rgba(5,150,105,.4) !important;
  grid-template-columns: 44px 1fr 28px;
  text-align: start;
  animation: none !important;
  padding: 12px 16px;
}
.direct-btn.direct-btn--active::after,
.direct-btn.direct-btn--active::before,
body[data-hero="v2"] .direct-btn.direct-btn--active::after,
body[data-hero="v2"] .direct-btn.direct-btn--active::before {
  display: none !important;
}
.direct-btn.direct-btn--active:hover,
body[data-hero="v2"] .direct-btn.direct-btn--active:hover {
  background:
    radial-gradient(ellipse 100% 140% at 50% -20%, rgba(255,255,255,.15) 0%, transparent 60%),
    linear-gradient(180deg, #D1FAE5 0%, #A7F3D0 100%) !important;
  transform: translateY(-1px);
  filter: none !important;
}
.direct-btn--active .ab-card-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-column: 1;
  justify-self: center;
  position: relative;
  background: #fff;
  box-shadow:
    0 2px 6px rgba(5,150,105,.18),
    inset 0 0 0 1.5px rgba(5,150,105,.35);
}
.direct-btn--active .ab-card-icon video {
  width: 44px;
  height: 44px;
  object-fit: cover;
  display: block;
}
/* Landing video — same flip the regular reverse button uses, so the
   plane visually lands toward the destination instead of taking off. */
.direct-btn-reverse.direct-btn--active .ab-card-icon video {
  transform: scaleX(-1);
}
.direct-btn--active .ab-card-body {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: center;
  align-items: center;
}
.direct-btn--active .ab-card-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #047857;
  text-transform: none;
}
.direct-btn--active .ab-card-route {
  font-size: 14.5px;
  font-weight: 900;
  color: #064E3B;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.direct-btn--active .ab-card-meta {
  font-size: 12px;
  color: #065F46;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.direct-btn--active .ab-card-meta span { white-space: nowrap; }
.direct-btn--active .direct-btn-arrow {
  grid-column: 3;
  color: #047857;
  font-size: 18px;
  font-weight: 900;
}

/* Cancelled-booking variant — same active-card layout, but red theme so
   the customer sees at a glance "this booking is NOT live; tap to restore
   or pick a new one". Sits on top of the .direct-btn--active rules so
   it overrides only the colours, keeping spacing/grid identical. */
.direct-btn.direct-btn--active.direct-btn--cancelled,
body[data-hero="v2"] .direct-btn.direct-btn--active.direct-btn--cancelled {
  background:
    radial-gradient(ellipse 100% 140% at 50% -20%, rgba(255,255,255,.12) 0%, transparent 60%),
    linear-gradient(180deg, #FEF2F2 0%, #FEE2E2 100%) !important;
  color: #7F1D1D !important;
  border: 1.5px solid rgba(220,38,38,.4) !important;
  box-shadow:
    0 10px 28px rgba(220,38,38,.15),
    0 2px 6px rgba(220,38,38,.10),
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(220,38,38,.15) !important;
}
.direct-btn.direct-btn--active.direct-btn--cancelled:hover,
body[data-hero="v2"] .direct-btn.direct-btn--active.direct-btn--cancelled:hover {
  background:
    radial-gradient(ellipse 100% 140% at 50% -20%, rgba(255,255,255,.15) 0%, transparent 60%),
    linear-gradient(180deg, #FEE2E2 0%, #FECACA 100%) !important;
}
.direct-btn--cancelled .ab-card-icon {
  box-shadow:
    0 2px 6px rgba(220,38,38,.15),
    inset 0 0 0 1.5px rgba(220,38,38,.4);
  filter: grayscale(.55);
}
.direct-btn--cancelled .ab-card-badge { color: #B91C1C; }
.direct-btn--cancelled .ab-card-route {
  color: #7F1D1D;
  /* Subtle line-through to reinforce "this is cancelled" without making
     the address unreadable — kept short on purpose. */
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(127,29,29,.4);
}
.direct-btn--cancelled .ab-card-meta { color: #991B1B; }
.direct-btn--cancelled .direct-btn-arrow { color: #B91C1C; }
/* When cancelled, swap the small "+ הזמנה נוספת" affordance for a more
   active "+ הזמנה חדשה" pill so the customer sees there's a fresh-start
   path that's separate from restoring the cancelled one. */
.direct-extra-link.direct-extra-link--fresh {
  border: 1.5px solid rgba(5,150,105,.45);
  border-style: solid;
  background: rgba(5,150,105,.06);
  color: #047857;
}
.direct-extra-link.direct-extra-link--fresh:hover {
  background: rgba(5,150,105,.12);
  border-color: rgba(5,150,105,.7);
}
.direct-btn {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  min-height: 58px;
  padding: 12px 20px;
  position: relative;
  background:
    radial-gradient(ellipse 100% 140% at 50% -20%, rgba(255,255,255,.18) 0%, transparent 60%),
    linear-gradient(180deg, #F5C518 0%, #E8A708 40%, #D4950A 100%);
  border: none;
  color: var(--primary-dark);
  font-weight: 900;
  font-size: 17px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  letter-spacing: -.01em;
  transition: transform var(--t-med), box-shadow var(--t-med);
  text-shadow: 0 1px 0 rgba(255,255,255,.3);
  box-shadow:
    0 16px 40px rgba(245,197,24,.45),
    0 4px 12px rgba(200,140,0,.3),
    inset 0 2px 0 rgba(255,255,255,.45),
    inset 0 -2px 0 rgba(180,120,0,.25);
}
/* Top glass highlight */
.direct-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, transparent 100%);
  border-radius: 18px 18px 50% 50%;
  pointer-events: none;
}
/* Diamond shimmer sweep */
.direct-btn::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 -120%;
  width: 70%;
  background: linear-gradient(105deg,
    transparent 25%,
    rgba(255,255,255,.7) 45%,
    rgba(255,255,255,.9) 50%,
    rgba(255,255,255,.7) 55%,
    transparent 75%);
  transition: inset-inline-start 1s var(--ease);
  pointer-events: none;
  z-index: 1;
}
/* Animated plane video icons */
.direct-btn-emoji {
  width: 52px;
  height: 52px;
  z-index: 1;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  justify-self: center;
}
/* Takeoff icon — right column (col 1 in RTL grid) */
.direct-btn[data-booking="to"] .direct-btn-emoji {
  grid-column: 1;
  grid-row: 1;
}
/* Landing icon — left column (col 3 in RTL grid) */
.direct-btn[data-booking="from"] .direct-btn-emoji {
  grid-column: 3;
  grid-row: 1;
}
.direct-btn-emoji video {
  width: 52px;
  height: 52px;
  max-width: 100%;   /* 526: iPhone Safari חוסם autoplay ומציג פריים בגודל-טבעי — לכלוא בגבול-הכפתור */
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  display: block;
  border-radius: 50%;
  background: transparent;
}
/* Emoji fallback shown when the takeoff/landing .mp4 fails to load (e.g. on an
   integration that doesn't serve the video file). Fills the icon circle in
   both the single-icon and split (round-trip) layouts. */
.plane-emoji-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 30px;
  line-height: 1;
}
.direct-btn-emoji-half .plane-emoji-fallback { font-size: 24px; }
/* Big emoji inside direct-btn-emoji circle (for non-airport tabs) */
.direct-btn-emoji .btn-emoji {
  font-size: 30px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.15));
}
.direct-btn-emoji .btn-emoji.flip {
  transform: scaleX(-1);
}
/* Remove white background from video via blend */
@supports (mix-blend-mode: multiply) {
  .direct-btn-emoji {
    background: linear-gradient(135deg, #E8A708, #D4950A);
    isolation: isolate;
  }
  .direct-btn-emoji video {
    mix-blend-mode: multiply;
  }
}
.direct-btn:hover .direct-btn-emoji {
  transform: scale(1.12);
  transition: transform var(--t-med);
}

/* Landing button — video flipped to land leftward */
.direct-btn-reverse .direct-btn-emoji video {
  transform: scaleX(-1);
}

/* ── Round-trip variant ──
   Same gold gradient as the regular direct-btn, but with subtle weight
   shifts that the eye picks up subconsciously without the brain noticing
   "we're being sold to":
     • Slightly deeper, broader drop shadow (suggests "weight" / "value")
     • Tiny inner highlight that catches more light at the top
     • Two icons (takeoff + landing) instead of one — communicates the
       round-trip nature without a label saying so
     • No "RECOMMENDED" tag, no "save 5%" badge, no different colour.
   Hidden completely once the customer has any active booking — at that
   point the natural CTA is whichever leg is missing, not "book both
   from scratch". */
.direct-btn-roundtrip {
  box-shadow:
    0 22px 48px rgba(245,197,24,.55),
    0 6px 18px rgba(200,140,0,.38),
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(180,120,0,.30);
  transform: translateY(-1px);   /* a hair higher than its siblings */
}
.direct-btn-roundtrip:hover {
  transform: translateY(-3px);
}
/* Two-icon avatar — overlapping circles, takeoff on top-right (RTL),
   landing peeking out top-left, so the eye reads "outbound + return"
   without parsing any words. */
.direct-btn-emoji-pair {
  width: 60px;
  height: 52px;
  position: relative;
  display: inline-block;
  justify-self: center;
  z-index: 1;
}
.direct-btn-emoji-half {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  top: 6px;
  display: block;
}
.direct-btn-emoji-half video {
  width: 40px;
  height: 40px;
  object-fit: cover;
  display: block;
}
/* RTL: takeoff (the one heading FROM home TO airport) sits on the
   right, landing on the left, slightly behind. */
.direct-btn-emoji-half-takeoff {
  inset-inline-start: 18px;
  z-index: 2;
}
.direct-btn-emoji-half-landing {
  inset-inline-start: 0;
  z-index: 1;
  opacity: .92;
}
.direct-btn-emoji-half-landing video {
  transform: scaleX(-1);
}
/* Override the v2-hero theme rules so the round-trip's deeper shadow
   sticks (those rules use !important). */
body[data-hero="v2"] .direct-btn-roundtrip {
  box-shadow:
    0 22px 48px rgba(245,197,24,.55),
    0 6px 18px rgba(200,140,0,.38),
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(180,120,0,.30) !important;
}
body[data-hero="v2"] .direct-btn-roundtrip:hover {
  filter: brightness(1.03) saturate(1.04);
}
.direct-btn-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  z-index: 1;
  min-width: 0;
  text-align: center;
  grid-column: 2;
}
.direct-btn-label {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.direct-btn-sub {
  font-size: 12px;
  font-weight: 600;
  opacity: .65;
  letter-spacing: .02em;
}
.direct-btn-arrow {
  display: none;
}
.direct-btn span {
  position: relative;
  z-index: 1;
}
.direct-btn:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 50px rgba(245,197,24,.55),
    0 6px 16px rgba(200,140,0,.35),
    inset 0 2px 0 rgba(255,255,255,.5),
    inset 0 -2px 0 rgba(180,120,0,.25),
    0 0 60px rgba(245,197,24,.2);
}
.direct-btn:hover::before { inset-inline-start: 140%; }
.direct-btn:hover svg {
  transform: translateX(-5px) scale(1.08);
}
.direct-btn:active { transform: translateY(-1px); }

/* Subtle breathing glow on booking buttons */
@keyframes btnGlow {
  0%, 100% { box-shadow: 0 16px 40px rgba(245,197,24,.4), 0 4px 12px rgba(200,140,0,.3), inset 0 2px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(180,120,0,.25); }
  50%      { box-shadow: 0 16px 40px rgba(245,197,24,.4), 0 4px 12px rgba(200,140,0,.3), inset 0 2px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(180,120,0,.25), 0 0 30px 6px rgba(245,197,24,.25); }
}
.direct-btn { animation: btnGlow 3s ease-in-out infinite; }
.direct-btn:hover { animation: none; }

/* Emphasized return button (when user has outbound only) */
.direct-btn.emphasized {
  animation: btnGlowStrong 1.8s ease-in-out infinite;
  transform: scale(1.04);
  background:
    radial-gradient(ellipse 100% 140% at 50% -20%, rgba(255,255,255,.22) 0%, transparent 60%),
    linear-gradient(180deg, #FFD700 0%, #F5C518 40%, #E8A708 100%);
}
@keyframes btnGlowStrong {
  0%, 100% { box-shadow: 0 16px 40px rgba(245,197,24,.5), 0 0 0 0 rgba(245,197,24,0); }
  50%      { box-shadow: 0 20px 50px rgba(245,197,24,.6), 0 0 40px 10px rgba(245,197,24,.35); }
}
.direct-btn.muted {
  opacity: .6;
  animation: none;
  filter: saturate(.7);
}

/* Action arrow — bounces between price and booking buttons */
/* Color themes for booking bar */
.active-booking-bar[data-theme="green"] { border-color: rgba(5,150,105,.4); box-shadow: 0 8px 28px rgba(5,150,105,.12); }
.active-booking-bar[data-theme="green"] .ab-badge { background: linear-gradient(135deg, #059669, #047857); }
.active-booking-bar[data-theme="green"] .ab-action { background: linear-gradient(135deg, #059669, #047857); box-shadow: 0 6px 18px rgba(5,150,105,.3); }

.active-booking-bar[data-theme="blue"] { border-color: rgba(12,74,110,.4); box-shadow: 0 8px 28px rgba(12,74,110,.12); }
.active-booking-bar[data-theme="blue"] .ab-badge { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.active-booking-bar[data-theme="blue"] .ab-action { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 6px 18px rgba(12,74,110,.3); }

.active-booking-bar[data-theme="gold"] { border-color: rgba(212,149,10,.45); box-shadow: 0 8px 28px rgba(245,197,24,.15); }
.active-booking-bar[data-theme="gold"] .ab-badge { background: linear-gradient(135deg, #D4950A, #B7800A); }
.active-booking-bar[data-theme="gold"] .ab-action { background: linear-gradient(135deg, #D4950A, #B7800A); box-shadow: 0 6px 18px rgba(212,149,10,.3); }

/* Active booking bar — card style */
.active-booking-bar {
  max-width: 1100px;
  margin: 22px auto 0;
  padding: 20px 24px;
  background: var(--surface);
  border: 2px solid rgba(5,150,105,.4);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  animation: fadeUp .4s var(--ease) both;
  box-shadow: 0 8px 28px rgba(5,150,105,.12);
}
.ab-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ab-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #059669, #047857);
  color: white;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 999px;
  width: fit-content;
  letter-spacing: .3px;
}
.ab-badge::before {
  content: '✈';
  font-size: 13px;
}
.ab-route {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -.01em;
}
.ab-details {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 600;
  display: flex;
  gap: 12px;
}
.ab-details span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ab-left {
  flex-shrink: 0;
}
.ab-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #059669, #047857);
  color: white;
  font-weight: 800;
  font-size: 14px;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(5,150,105,.3);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  text-decoration: none;
}
.ab-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(5,150,105,.4);
}
.ab-action::after {
  content: '←';
  font-size: 16px;
}

.booking-note {
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 18px;
}
.booking-note strong {
  color: var(--primary);
  font-weight: 700;
}

.service-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 20px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: rgba(255,255,255,.92);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  width: fit-content;
  margin-inline: auto;
  box-shadow: 0 6px 20px rgba(12,74,110,.25);
  letter-spacing: .01em;
}
.service-badge strong {
  color: var(--accent-gold);
  font-weight: 800;
}
.service-badge-dot {
  width: 8px;
  height: 8px;
  background: #22C55E;
  border-radius: 50%;
  flex-shrink: 0;
  animation: dotPulse 2s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(34,197,94,.6);
}
@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .6; transform: scale(.8); }
}

/* ═══ App Promo ═══ */
.app-promo {
  background: linear-gradient(135deg, var(--bg-soft), var(--surface));
  padding: 24px 0;
  border-top: 1px solid var(--border-light);
}
.app-promo-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.app-promo-text {
  display: flex;
  align-items: center;
  gap: 14px;
}
.app-promo-icon {
  width: 40px;
  height: 40px;
  padding: 8px;
  background: var(--primary);
  border-radius: 12px;
  fill: var(--accent-gold);
  flex-shrink: 0;
}
.app-promo-text strong {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: var(--primary);
}
.app-promo-text small {
  font-size: 13px;
  color: var(--text-muted);
}
.app-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.app-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #000;
  color: white;
  padding: 10px 18px 10px 16px;
  border-radius: 12px;
  min-height: 54px;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.app-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.app-badge svg {
  width: 26px;
  height: 26px;
  fill: white;
  flex-shrink: 0;
}
.app-badge-text small {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,.85);
  letter-spacing: .3px;
  line-height: 1.1;
  margin-bottom: 2px;
}
.app-badge-text strong {
  font-size: 16px;
  font-weight: 700;
  color: white;
  line-height: 1.1;
}

/* ═══ Trust Strip ═══ */
.trust {
  background: var(--surface);
  padding: 36px 0;
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}
.trust-inner {
  display: flex;
  justify-content: space-around;
  gap: 28px;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Highlight the first trust item (4.7 בגוגל) — applies on every
   viewport. Wraps the chip in a soft amber tint + 1px amber border,
   recolours the icon box gold, and bumps the score font. Mobile
   overrides below add full-width row + extra padding. */
.trust-item:first-child {
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(245,158,11,.06));
  border: 1px solid rgba(245,158,11,.35);
  border-radius: 14px;
}
.trust-item:first-child .trust-icon {
  background: linear-gradient(135deg, #F5C518, #D4950A);
}
.trust-item:first-child .trust-icon svg { fill: #fff; }
.trust-item:first-child .trust-text strong { font-size: 17px; }
.trust-icon {
  width: 48px; height: 48px;
  background: var(--bg-sky);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.trust-icon svg { width: 22px; height: 22px; fill: var(--primary-light); }
.trust-text strong {
  display: block;
  color: var(--primary);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
}
.trust-text small {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

/* ═══ Sections ═══ */
.section { padding: 110px 0; scroll-margin-top: calc(var(--nav-h) + 20px); }
.section-kicker {
  text-align: center;
  color: var(--accent);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.section-title {
  text-align: center;
  font-size: clamp(32px, 4.2vw, 46px);
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 16px;
  letter-spacing: -.025em;
  line-height: 1.1;
  text-wrap: balance;
}
.section-sub {
  text-align: center;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto 60px;
  font-size: 17px;
  text-wrap: pretty;
}

/* How it works */
.how-wrap { background: linear-gradient(180deg, var(--bg), var(--bg-soft)); }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.step {
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 44px 30px;
  text-align: center;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  position: relative;
}
.step:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: rgba(56,189,248,.4);
}
.step-icon-wrap {
  width: 78px; height: 78px;
  background: linear-gradient(135deg, var(--bg-sky), var(--bg-sky-2));
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
  position: relative;
}
.step-num {
  position: absolute;
  top: -10px; inset-inline-start: -10px;
  width: 34px; height: 34px;
  background: var(--accent);
  color: var(--primary-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  box-shadow: var(--shadow-sm);
}
.step-icon-wrap > svg { width: 36px; height: 36px; fill: var(--primary); }
.step h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 10px;
}
.step p {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.75;
}

/* Pricing */
.pricing-wrap { background: var(--surface); }
.pricing-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -36px auto 44px;
  padding: 10px 20px;
  background: var(--success-light);
  color: var(--success);
  border: 1px solid rgba(16,185,129,.35);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  width: fit-content;
}
.pricing-badge svg { width: 16px; height: 16px; fill: currentColor; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.price-card {
  background: var(--surface);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  overflow: hidden;
}
.price-card:hover:not(.featured) {
  border-color: var(--primary-softer);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.price-card h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 6px;
}
.price-card .region-note {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 20px;
}
.region-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 15px;
}
.region-list li:last-child { border-bottom: none; }
.region-list .city { font-weight: 500; }
.region-list .amount {
  font-weight: 800;
  color: var(--primary);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.region-list .amount .currency {
  color: var(--accent);
  font-size: 14px;
  margin-inline-end: 2px;
}
.price-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 22px;
  padding: 14px;
  background: var(--bg-soft);
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  min-height: 48px;
}
.price-card-cta svg { width: 14px; height: 14px; fill: currentColor; }
.price-card-cta:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
.price-disclaimer {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.85;
  margin-top: 44px;
  max-width: 620px;
  margin-inline: auto;
}

/* Reviews */
.reviews-wrap {
  background: linear-gradient(180deg, var(--bg-sky), var(--bg));
  position: relative;
  overflow: hidden;
}
.reviews-wrap::before {
  content: '';
  position: absolute;
  top: -100px; inset-inline-end: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(56,189,248,.14), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

/* Google rating bar */
.google-rating-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px 36px;
  background: var(--surface);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  width: fit-content;
  margin: 0 auto 52px;
  flex-wrap: wrap;
  border: 1.5px solid rgba(251,188,4,.3);
}
.google-logo { height: 24px; width: auto; flex-shrink: 0; }
.google-stars { color: #FBBC04; font-size: 24px; letter-spacing: 2px; line-height: 1; }
.google-score { font-size: 42px; font-weight: 900; color: var(--primary); line-height: 1; }
.google-count { font-size: 15px; color: var(--text-muted); font-weight: 600; }
.google-count strong { color: var(--primary); }
.google-link {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-light);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bg-sky);
  transition: background var(--t-fast), color var(--t-fast);
}
.google-link:hover { background: var(--primary); color: white; }

/* Reviews carousel */
.reviews-carousel {
  position: relative;
  overflow: hidden;
}
.reviews-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 4px 20px;
}
.reviews-track::-webkit-scrollbar { display: none; }

.review-card {
  flex: 0 0 540px;
  scroll-snap-align: start;
  background: var(--surface);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-md);
  transition: transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  min-height: 260px;
}
.review-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(251,188,4,.4);
}

.rc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.rc-avatar {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(12,74,110,.2);
}
.rc-name { font-weight: 800; font-size: 18px; color: var(--primary); }
.rc-meta { font-size: 14px; color: var(--text-muted); }
.rc-stars {
  margin-inline-start: auto;
  color: #FBBC04;
  font-size: 22px;
  letter-spacing: 3px;
}
.rc-text {
  font-size: 17px;
  line-height: 1.85;
  color: var(--text);
  text-wrap: pretty;
}

.reviews-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}
.reviews-nav-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border);
  color: var(--primary);
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  box-shadow: var(--shadow-sm);
}
.reviews-nav-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: scale(1.08);
}

/* Google floating badge */
.google-float {
  position: fixed;
  bottom: 28px;
  inset-inline-end: 20px;
  z-index: 39;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px;
  background: var(--surface);
  border: 2px solid rgba(251,188,4,.4);
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.04);
  text-decoration: none;
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.google-float:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,.28), 0 0 20px rgba(251,188,4,.15);
}
.google-float img { width: 34px; height: 34px; flex-shrink: 0; }
.gf-stars { color: #FBBC04; font-size: 22px; letter-spacing: 2px; line-height: 1; }
.gf-score { font-size: 16px; color: var(--text-muted); font-weight: 600; }
.gf-score strong { color: var(--primary); font-weight: 900; font-size: 20px; }

/* FAQ */
.faq-wrap { background: var(--surface); }
.faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq-item {
  background: var(--bg-soft);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.faq-item:hover { border-color: var(--primary-softer); }
.faq-item[open] {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.faq-q {
  width: 100%;
  padding: 22px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: start;
  font-weight: 700;
  font-size: 16px;
  color: var(--primary);
  cursor: pointer;
  list-style: none;
  min-height: 56px;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 300;
  color: var(--primary);
  transition: transform var(--t-med), background var(--t-fast);
  margin-inline-start: 12px;
  flex-shrink: 0;
}
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  background: var(--accent);
}
.faq-a {
  padding: 0 28px 24px;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.85;
}

/* About */
.about-wrap { background: linear-gradient(180deg, var(--bg-soft), var(--bg)); }
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about-visual {
  height: 420px;
  background: linear-gradient(135deg, var(--bg-sky), var(--bg-sky-2));
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(12,74,110,.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-visual::before {
  content: '';
  position: absolute;
  top: -60px; inset-inline-end: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(245,158,11,.24), transparent 70%);
}
.about-logo-img {
  position: relative;
  width: 70%;
  max-width: 280px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 50px rgba(12,74,110,.22));
  animation: gentleFloatSimple 4s ease-in-out infinite;
  margin: 0 auto;
}
@keyframes gentleFloatSimple {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
.about-content h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 20px;
  letter-spacing: -.025em;
  line-height: 1.15;
  text-wrap: balance;
}
.about-content h2 span { color: var(--accent); }
.about-content p {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.9;
  margin-bottom: 18px;
  text-wrap: pretty;
}
.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.about-stat {
  text-align: center;
}
.about-stat .label {
  white-space: nowrap;
}
@media (max-width: 640px) {
  .about-stats { grid-template-columns: repeat(2, 1fr); gap: 22px 12px; }
  .about-stat .num { font-size: 26px; }
  .about-stat .label { font-size: 12px; }
}
.about-stat .num {
  font-size: 38px;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.about-stat .num span { color: var(--accent); }
.about-stat .label {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* Footer */
.footer {
  background: var(--primary-dark);
  color: rgba(255,255,255,.85);
  padding: 76px 0 28px;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0; inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: 48px;
  margin-bottom: 56px;
}
.footer-brand .logo-link { color: white; margin-bottom: 18px; }
.footer-brand .logo-text small { color: rgba(255,255,255,.5); }
.footer-brand p {
  color: rgba(255,255,255,.65);
  font-size: 14px;
  line-height: 1.85;
  max-width: 340px;
  text-wrap: pretty;
}
.footer-col h4 {
  color: white;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 20px;
}
.footer-col ul li { margin-bottom: 12px; }
.footer-col a {
  color: rgba(255,255,255,.6);
  font-size: 14px;
  transition: color var(--t-fast);
}
.footer-col a:hover { color: var(--accent); }
.footer-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 14px;
  color: rgba(255,255,255,.72);
}
.footer-contact-item svg {
  width: 16px; height: 16px;
  fill: var(--accent);
  flex-shrink: 0;
}
.footer-phone-link {
  text-decoration: none;
  padding: 8px 14px;
  background: rgba(245,197,24,.12);
  border-radius: 10px;
  border: 1px solid rgba(245,197,24,.25);
  transition: background var(--t-fast), border-color var(--t-fast);
  font-weight: 700;
  color: var(--accent-gold);
}
.footer-phone-link:hover {
  background: rgba(245,197,24,.22);
  border-color: rgba(245,197,24,.45);
  color: var(--accent-gold);
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: rgba(255,255,255,.52);
  flex-wrap: wrap;
  gap: 12px;
}

/* בס״ד — small religious notation, top-right */
.bsd {
  position: fixed;
  top: calc(var(--nav-h) + 8px);
  right: 14px;
  z-index: 55;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 1px;
  opacity: .6;
  pointer-events: none;
  user-select: none;
}

/* Shabbat floating badge — royal/dignified */
.shabbat-badge {
  position: fixed;
  top: calc(var(--nav-h) + 46px);
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px 11px 20px;
  background:
    linear-gradient(135deg, #0a2540 0%, #0C4A6E 50%, #082F49 100%);
  color: var(--accent-gold);
  border-radius: 999px 0 0 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  box-shadow:
    0 10px 30px rgba(12,74,110,.4),
    0 2px 8px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(245,197,24,.3),
    inset 0 -1px 0 rgba(0,0,0,.3);
  border: 1px solid rgba(245,197,24,.55);
  border-right: none;
  text-shadow: 0 0 12px rgba(245,197,24,.35);
  overflow: hidden;
  pointer-events: auto;
}
.shabbat-badge::before {
  content: '';
  position: absolute;
  inset: 2px 2px 2px 2px;
  border-radius: 999px 0 0 999px;
  border: 1px solid rgba(245,197,24,.25);
  border-right: none;
  pointer-events: none;
}
.shabbat-badge::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(245,197,24,.15) 50%,
    transparent 70%);
  animation: shimmerRoyal 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmerRoyal {
  0%, 100% { transform: translateX(-120%); }
  50%      { transform: translateX(120%); }
}
.shabbat-badge svg {
  width: 16px;
  height: 16px;
  fill: var(--accent-gold);
  filter: drop-shadow(0 0 6px rgba(245,197,24,.6));
  position: relative;
  z-index: 1;
}
.shabbat-badge span {
  position: relative;
  z-index: 1;
}

/* Accessibility widget — small, right side, cool */
.a11y-btn {
  position: fixed;
  top: calc(var(--nav-h) + 106px);
  right: 12px;
  z-index: 45;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.3) 0%, transparent 50%),
    linear-gradient(135deg, #2563EB 0%, #1E40AF 60%, #1E3A8A 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 6px 20px rgba(30,64,175,.4),
    0 0 0 2px rgba(255,255,255,.95),
    inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.a11y-btn svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.a11y-btn:hover {
  transform: scale(1.1);
  box-shadow:
    0 10px 26px rgba(30,64,175,.55),
    0 0 0 2px rgba(255,255,255,.95),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* Cookie consent bar — dark & standout */
.cookie-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 55;
  max-width: 680px;
  width: calc(100% - 32px);
  background: linear-gradient(135deg, #0a2540, var(--primary-dark) 50%, #0a2540);
  border: 1.5px solid rgba(245,197,24,.42);
  border-radius: var(--radius-lg);
  box-shadow:
    0 24px 60px rgba(0,0,0,.35),
    0 6px 16px rgba(12,74,110,.25),
    inset 0 1px 0 rgba(245,197,24,.15);
  padding: 18px 22px;
  animation: cookieSlide .5s var(--ease) both;
  color: white;
}
@keyframes cookieSlide {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.cookie-bar.hidden { display: none; }
.cookie-content {
  display: flex;
  align-items: center;
  gap: 18px;
}
.cookie-icon {
  font-size: 36px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 10px rgba(245,197,24,.35));
}
.cookie-text { flex: 1; min-width: 0; }
.cookie-text strong {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: var(--accent-gold);
  margin-bottom: 3px;
  text-shadow: 0 0 12px rgba(245,197,24,.3);
}
.cookie-text p {
  font-size: 13px;
  color: rgba(255,255,255,.78);
  line-height: 1.5;
}
.cookie-text a {
  color: var(--accent-gold);
  font-weight: 700;
  text-decoration: underline;
}
.cookie-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-btn {
  min-height: 42px;
  padding: 10px 22px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.cookie-decline {
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.2);
}
.cookie-decline:hover { background: rgba(255,255,255,.15); }
.cookie-accept {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: var(--primary-dark);
  box-shadow: 0 6px 18px rgba(245,158,11,.5);
}
.cookie-accept:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(245,158,11,.6);
}

/* Floating actions */
.floating {
  position: fixed;
  bottom: 28px;
  inset-inline-start: 28px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  transition: opacity .18s ease;
}
/* כשחלון-ההזמנה פתוח — הצפים (וואטסאפ/טלפון/תג-גוגל) מוסתרים כדי לא
   להתנגש עם הטופס ולא לגנוב הקלקות (שי 2026-07-02). ה-class נוסף ב-JS
   (openOverlay/reallyCloseOverlay) — אמין יותר מ-:has בכל הדפדפנים. */
body.bf-overlay-open .floating,
body.bf-overlay-open .google-float {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* WhatsApp — big, always labeled */
.float-wa {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 16px;
  background: var(--whatsapp);
  color: white;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  box-shadow:
    0 12px 30px rgba(37,211,102,.45),
    0 4px 10px rgba(0,0,0,.12);
  transition: transform var(--t-med), box-shadow var(--t-med);
  animation: pulseGreen 2.5s ease-in-out infinite;
  text-decoration: none;
  letter-spacing: -.01em;
}
.float-wa svg { width: 28px; height: 28px; fill: white; flex-shrink: 0; }
.float-wa:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 18px 40px rgba(37,211,102,.55),
    0 0 0 6px rgba(37,211,102,.15);
}
@keyframes pulseGreen {
  0%,100% { box-shadow: 0 12px 30px rgba(37,211,102,.4), 0 4px 10px rgba(0,0,0,.12); }
  50%     { box-shadow: 0 12px 30px rgba(37,211,102,.6), 0 0 0 10px rgba(37,211,102,.1), 0 4px 10px rgba(0,0,0,.12); }
}

/* Phone — tiny, discreet */
.float-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(100,116,139,.15);
  color: var(--text-muted);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: transform var(--t-med), background var(--t-med), color var(--t-med);
  text-decoration: none;
}
.float-phone svg { width: 20px; height: 20px; fill: currentColor; }
.float-phone:hover {
  background: var(--primary);
  color: white;
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(12,74,110,.3);
}

/* Booking flow overlay (demo) */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,47,73,.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-top: calc(20px + env(safe-area-inset-top, 0px) + 20px); /* extra top space for mobile browser URL bar */
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  animation: fadeIn .28s var(--ease) both;
}
.overlay.open { display: flex; }
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.overlay-card {
  background: var(--surface);
  width: 100%;
  /* Make the card a column flex container so the bottom button bar
     (.overlay-nav-single) can use margin-top:auto to push to the
     very bottom on short screens (summary, OTP) — without it, the
     button floats just below the (short) content. */
  display: flex;
  flex-direction: column;
  min-height: 70vh;
  min-height: 70dvh;
  max-height: 92vh;
  max-height: 92dvh; /* dynamic viewport — shrinks when mobile keyboard opens */
  overflow-y: auto;
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  position: relative;
  animation: popIn .4s var(--ease) both;
  box-shadow: 0 40px 100px rgba(0,0,0,.4);
  scroll-padding-bottom: 100px;
}
/* Push the bottom button bar to the end of the flex column on screens
   2-4 (summary / OTP / success) where the form content is short. On
   screen 1 (long form) margin-top:auto has no effect — the content
   already fills the column. */
.overlay-card > .overlay-nav-single { margin-top: auto; }
@keyframes popIn {
  from { transform: scale(.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
/* Wrap container holds card + floating buttons sticking out */
.overlay-wrap {
  position: relative;
  max-width: 540px;
  width: 100%;
}
/* Wrap container holds card + floating buttons sticking out.
   Shared geometry only — colors diverge below so the user can tell
   the destructive close (×) from the friendly back (←) at a glance. */
.overlay-close,
.overlay-back-floating {
  position: absolute;
  top: -16px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 2px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
  z-index: 10;
}
.overlay-close { inset-inline-start: -14px; }
.overlay-back-floating { inset-inline-end: -14px; }

/* Close — destructive (cancel + lose data) → muted navy so it doesn't
   invite a careless tap. */
.overlay-close {
  background: rgba(12, 74, 110, .7);
  color: white;
}

/* Back — friendly navigation (returns to previous step, keeps data) →
   gold so it stands out as an inviting "go back" action. */
.overlay-back-floating {
  background: var(--accent-gold, #F5C518);
  color: var(--primary-dark, #082F49);
}

.overlay-close:hover {
  background: var(--danger);
  color: white;
  transform: scale(1.05);
}
.overlay-back-floating:hover {
  background: #E0AC0E;        /* slightly darker gold for hover feedback */
  color: var(--primary-dark);
  transform: scale(1.05);
}
.overlay-back-floating[hidden],
.overlay-close[hidden] { display: none !important; }

.overlay-progress-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
  margin-bottom: 4px;
  padding: 0 6px;
  letter-spacing: -0.01em;
}
.overlay-progress-labels span {
  flex: 1;
  text-align: center;
  transition: color .2s ease;
}
.overlay-progress-labels span.current {
  color: var(--primary, #0B1E3F);
  font-weight: 800;
}
.overlay-progress-labels span.done {
  color: var(--accent, #F5C518);
}
.overlay-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
}
.overlay-progress .dot {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  transition: background var(--t-med);
}
.overlay-progress .dot.done { background: var(--accent); }
.overlay-progress .dot.current { background: var(--primary); }

.overlay-step-label {
  font-size: 12px;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.overlay-title {
  font-size: 26px;
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 6px;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.overlay-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 22px;
  text-wrap: pretty;
}
.overlay-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 12px;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.overlay-info:hover { border-color: var(--primary-softer); background: var(--bg-soft); }
.overlay-info-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.overlay-info-left > svg { width: 20px; height: 20px; fill: var(--primary-light); flex-shrink: 0; }
.overlay-info-text { min-width: 0; }
.overlay-info-text .k {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.overlay-info-text .v {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overlay-edit {
  font-size: 13px;
  color: var(--accent);
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 8px;
}
.overlay-edit:hover { background: var(--accent-pale); }

.overlay-hello {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, var(--accent-pale), #FFFBEF);
  border-radius: 16px;
  margin-bottom: 20px;
}
.overlay-hello .av {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 900;
  flex-shrink: 0;
}
.overlay-hello strong {
  display: block;
  font-size: 20px;
  color: var(--primary);
}
.overlay-hello p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}

.overlay-gate {
  text-align: center;
  padding: 22px 8px;
}
.overlay-gate h4 {
  font-size: 18px;
  color: var(--primary);
  margin-bottom: 6px;
}
.overlay-gate p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.gate-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.gate-btn {
  padding: 16px;
  font-weight: 800;
  font-size: 14px;
  border-radius: 13px;
  transition: opacity, transform, color, background-color, border-color, box-shadow var(--t-fast);
  min-height: 52px;
}
.gate-btn.primary {
  background: var(--bg-soft);
  color: var(--primary);
  border: 2px solid var(--border);
}
.gate-btn.primary:hover { background: var(--primary); color: white; border-color: var(--primary); }
.gate-btn.secondary {
  background: var(--accent-pale);
  color: #9a6400;
  border: 2px solid rgba(245,158,11,.3);
}
.gate-btn.secondary:hover { background: var(--accent); color: white; border-color: var(--accent); }

.overlay-nav {
  display: flex;
  gap: 12px;
  margin-top: 26px;
}
.overlay-nav-single { display: flex; flex-direction: column; gap: 8px; }
.overlay-nav-single .overlay-next { flex: 1; }
/* Secondary CTA stacked below the main price button. Slimmer + lower
   visual weight so the price button stays the obvious primary action. */
.bf-go-to-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 12px 18px;
  background: #fff;
  color: var(--primary, #0B1E3F);
  border: 2px solid var(--primary, #0B1E3F);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.bf-go-to-summary:hover { background: var(--primary, #0B1E3F); color: #fff; transform: translateY(-1px); }
.bf-go-to-summary svg { width: 16px; height: 16px; fill: currentColor; }
.bf-go-to-summary[hidden] { display: none !important; }

/* Edit-mode secondary: "חזור בלי לשמור" — a quiet text link, NOT a CTA, so it
   never competes with the primary "💾 שמור שינויים" button above it. */
.bf-go-to-summary.bf-gts-back {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted, #64748B);
  font-size: 13px;
  font-weight: 700;
  min-height: 40px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bf-go-to-summary.bf-gts-back:hover {
  background: transparent;
  color: var(--primary, #0B1E3F);
  transform: none;
}
.bf-go-to-summary.bf-gts-back svg { display: none; }

/* Price summary INSIDE the המשך button — replaces the 'המשך' text once
   we have a calculated cost. Three optional rows: main / extras / return. */
.bf-btn-price-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  text-align: center;
  line-height: 1.25;
}
.bf-btn-price-summary[hidden] { display: none !important; }
.bf-btn-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-inline: 4px;
}
.bf-btn-price-row.main {
  font-size: 15px;
  font-weight: 800;
}
.bf-btn-price-row.main strong {
  font-size: 19px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.bf-btn-price-row.category {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.88;
}
.bf-btn-price-row.category strong {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bf-btn-price-row.main {
  border-top: 1px dashed rgba(11,30,63,0.25);
  padding-top: 4px;
  margin-top: 2px;
}
.bf-btn-price-row.main.no-border {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.bf-btn-price-row.return {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.92;
  padding-top: 2px;
}
.bf-btn-price-row.return strong {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bf-btn-price-row[hidden] { display: none !important; }
@media (max-width: 480px) {
  .bf-btn-price-row.main { font-size: 13px; }
  .bf-btn-price-row.main strong { font-size: 16px; }
  .bf-btn-price-row.extras,
  .bf-btn-price-row.return { font-size: 11px; }
}
/* (Removed: bf-price-info-row CSS — reverted with the layout) */
.overlay-back,
.overlay-next {
  min-height: 54px;
  padding: 16px 20px;
  font-weight: 800;
  font-size: 15px;
  border-radius: 14px;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.overlay-back {
  flex: 0 0 auto;
  background: var(--bg-soft);
  color: var(--primary);
  border: 2px solid var(--border);
}
.overlay-back:hover { background: var(--border); }
.overlay-next {
  flex: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: var(--primary-dark);
  box-shadow: var(--shadow-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.overlay-next:hover { transform: translateY(-2px); }
.overlay-next svg { width: 18px; height: 18px; fill: currentColor; }

.overlay-terms {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 14px;
}
.overlay-terms a { color: var(--accent); font-weight: 700; }
.overlay-help-call {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 6px;
  margin-bottom: 0;
  font-weight: 500;
}
.overlay-help-call a { color: var(--accent); font-weight: 800; text-decoration: none; }

/* Missing field highlight when user tries to book without filling */
/* Missing-field gold — set longhands separately so var() in border-color resolves cleanly */
input.bf-field-missing,
select.bf-field-missing,
button.bf-field-missing,
.bf-field-missing input,
.bf-field-missing select,
input.bf-input.bf-field-missing,
.bf-tp-wheel-trigger.bf-field-missing {
  border-width: 2px !important;
  border-style: solid !important;
  border-color: #F5C518 !important;
  background-color: rgba(245,197,24,.22) !important;
  box-shadow: 0 0 0 4px rgba(245,197,24,.30) !important;
  color: #071633 !important;
  animation: bfShake .4s ease-in-out;
}
@keyframes bfShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Inline toast near the quote card */
.q-toast {
  position: absolute;
  bottom: 20px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  background: var(--primary-dark);
  color: var(--accent-gold);
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-med);
  z-index: 10;
  white-space: nowrap;
}
.q-toast.show {
  opacity: 1;
  transform: translateX(50%) translateY(-10px);
}

/* ═══════════════════════════════════════════════════
   Edit-booking banner + cancel-booking link
   Shown only when the form was opened via "צפייה ועריכה" on the
   active-booking bar. The banner makes the mode clear at a glance;
   the cancel link sits below the primary CTA on screen 1.
   ═══════════════════════════════════════════════════ */
.bf-edit-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, rgba(245,197,24,.13), rgba(245,197,24,.05));
  border: 1px solid rgba(245,197,24,.45);
  border-radius: 12px;
}
/* Cancel-booking link inside the banner — always visible at the top in
   edit mode. Muted-red so it doesn't compete with the primary message. */
.bf-edit-banner-cancel {
  margin-inline-start: auto;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(220, 38, 38, .35);
  border-radius: 999px;
  color: #dc2626;
  font-size: 11.5px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
  transition: background var(--t-fast, .15s) ease;
  white-space: nowrap;
}
.bf-edit-banner-cancel:hover {
  background: rgba(220, 38, 38, .07);
}
@media (max-width: 480px) {
  /* Stack the banner vertically on small phones — strong on top, hint
     below, cancel as a third row aligned-end. */
  .bf-edit-banner { flex-wrap: wrap; }
  .bf-edit-banner-cancel { margin-top: 4px; align-self: flex-end; }
}
.bf-edit-banner[hidden] { display: none !important; }
.bf-edit-banner-icon {
  font-size: 18px;
  flex: 0 0 auto;
}
.bf-edit-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.35;
}
.bf-edit-banner-text strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary, #0B1E3F);
}
.bf-edit-banner-text small {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
}
.bf-cancel-booking-link {
  display: block;
  margin: 14px auto 0;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid rgba(220, 38, 38, .35);
  border-radius: 999px;
  color: #dc2626;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast, .15s) ease;
}
.bf-cancel-booking-link:hover {
  background: rgba(220, 38, 38, .07);
}
.bf-cancel-booking-link[hidden] { display: none !important; }

/* Discreet "free until HH:MM" notice. Lives below the cancel link, in a
   muted neutral style — it's important info but should NOT shout, since
   most customers won't end up canceling. Underline + chevron tells them
   it's tappable. Mode-specific colors come from .bf-cxl-notice-mode-*. */
.bf-cxl-notice {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 10px auto 0;
  padding: 6px 12px;
  background: transparent;
  border: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  border-radius: 6px;
  transition: background var(--t-fast, .15s) ease, color var(--t-fast, .15s) ease;
}
.bf-cxl-notice:hover { background: rgba(0,0,0,.04); color: var(--primary, #0B1E3F); }
.bf-cxl-notice[hidden] { display: none !important; }
.bf-cxl-notice-chev { font-size: 14px; opacity: .55; }

/* "Call the dispatch center" button — shown in the cancel sheet once the
   free-cancellation window has closed (no self-service cancel past then). */
.bf-cxl-call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 14px 18px;
  background: var(--success, #059669);
  color: #fff;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: .2px;
  box-shadow: 0 6px 18px rgba(5,150,105,.28);
  transition: transform var(--t-fast, .15s) ease, box-shadow var(--t-fast, .15s) ease;
}
.bf-cxl-call-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(5,150,105,.34); }
.bf-cxl-call-btn:active { transform: translateY(0); }
/* Once we're past the free window, swap to amber/red so the customer
   sees that they're now in fee territory. */
.bf-cxl-notice.bf-cxl-notice-mode-fee-25 {
  color: #92400e;
  text-decoration-color: #f59e0b;
}
.bf-cxl-notice.bf-cxl-notice-mode-fee-50 {
  color: #991b1b;
  text-decoration-color: #dc2626;
}

/* Cancellation policy tooltip — shown from the inline notice or from the
   cancel-confirmation modal. Full-screen scrim, centered card. The card
   itself scrolls internally when content is taller than the viewport
   (rather than forcing the body to scroll, which used to land the user
   at the top of the document with the card title above the fold). */
.bf-cxl-tooltip {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1500;
  padding: 20px;
  animation: bfModalFade .2s ease-out;
  overflow-y: auto;            /* scrim itself can scroll on tiny viewports */
  -webkit-overflow-scrolling: touch;
}
.bf-cxl-tooltip[hidden] { display: none !important; }
.bf-cxl-tooltip-card {
  background: #fff;
  border-radius: 18px;
  padding: 24px 22px 20px;
  max-width: 420px;
  width: 100%;
  /* Cap height + own scroll so the title is always visible at top
     and the customer can scroll WITHIN the card to read more. */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: auto;                /* keeps card vertically centered when shorter than viewport */
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  position: relative;
  animation: popIn .3s var(--ease, cubic-bezier(.16,1,.3,1)) both;
}
.bf-cxl-tooltip-close {
  position: absolute;
  top: 10px;
  inset-inline-end: 12px;
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--t-fast, .15s) ease;
}
.bf-cxl-tooltip-close:hover { background: rgba(0,0,0,.06); }
.bf-cxl-tooltip-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary, #0B1E3F);
  margin: 0 0 12px;
  padding-inline-end: 28px;
}
.bf-cxl-tooltip-intro {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--primary, #0B1E3F);
  margin: 0 0 14px;
}
.bf-cxl-tooltip-tiers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.bf-cxl-tier-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-soft, #f8f6f0);
  font-size: 13px;
}
.bf-cxl-tier-row.bf-cxl-tier-current {
  background: linear-gradient(135deg, rgba(245,197,24,.18), rgba(245,197,24,.06));
  border: 1px solid rgba(245,197,24,.5);
  font-weight: 700;
}
.bf-cxl-tier-when { color: var(--primary, #0B1E3F); }
.bf-cxl-tier-fee {
  font-weight: 800;
  color: var(--primary-dark, #071633);
  font-variant-numeric: tabular-nums;
}
.bf-cxl-tier-fee.free { color: #047857; }
.bf-cxl-tier-fee.warn { color: #92400e; }
.bf-cxl-tier-fee.high { color: #991b1b; }
.bf-cxl-tooltip-payout {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  text-align: center;
  margin: 0;
  line-height: 1.5;
}
.bf-cxl-tooltip-payout strong { color: var(--primary, #0B1E3F); }

/* "השינויים נשמרו" toast — appears at the bottom of the viewport after
   the customer saves an edit, then fades out on its own. Body-level so
   it survives the overlay closing. */
.bf-edit-saved-toast {
  position: fixed;
  inset-inline: 0;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  margin: 0 auto;
  width: max-content;
  max-width: calc(100vw - 32px);
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 14px 36px rgba(5,150,105,.32);
  z-index: 1500;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .25s ease, transform .25s ease;
}
.bf-edit-saved-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════
   Booking Flow — Step 1: Pickup Details
   ═══════════════════════════════════════════════════ */

/* Trip Summary Card (pre-filled from homepage) */
.trip-summary {
  background: linear-gradient(135deg, rgba(245,197,24,.08), rgba(12,74,110,.05));
  border: 1.5px solid rgba(245,197,24,.3);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 22px;
  position: relative;
}
.ts-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
}
.ts-row + .ts-row { border-top: 1px dashed rgba(0,0,0,.06); }
.ts-icon {
  width: 24px;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  text-align: center;
}
.ts-text {
  flex: 1;
  color: var(--primary);
  letter-spacing: -.005em;
}
.ts-row-price .ts-text {
  color: var(--accent-gold);
  font-weight: 800;
  font-size: 17px;
}
.ts-row-missing .ts-text {
  color: var(--accent);
  font-weight: 700;
}
.ts-missing-text {
  color: var(--accent);
  font-weight: 700;
  border-bottom: 1px dashed var(--accent);
  cursor: pointer;
}
.ts-row-missing { background: rgba(245,158,11,.05); border-radius: 8px; }
.ts-edit {
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.ts-edit:hover {
  background: var(--primary);
  color: var(--accent-gold);
  border-color: var(--primary);
}
.ts-edit svg { width: 12px; height: 12px; fill: currentColor; }

/* Progressive reveal — trip details after city is picked */
.bf-details-group {
  opacity: 1;
  max-height: 600px;
  overflow: visible;
  transition: opacity var(--t-med), max-height var(--t-med), margin var(--t-med);
}
.bf-details-hidden {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  pointer-events: none;
}
.bf-details-visible {
  opacity: 1;
  max-height: 600px;
  animation: bfDetailsReveal .5s var(--ease) both;
}
@keyframes bfDetailsReveal {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Multi-screen wizard */
.bf-screen { display: none; }
.bf-screen.active {
  display: block;
  animation: bfScreenIn .3s ease-out both;
}
@keyframes bfScreenIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Mini summary shown on later screens */
.bf-mini-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-soft);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}
.bf-mini-summary .bf-mini-icon { font-size: 16px; line-height: 1; }
.bf-mini-summary .bf-mini-text { flex: 1; }
.bf-mini-edit {
  background: transparent;
  border: none;
  color: var(--accent-gold);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.bf-mini-edit:hover { background: rgba(245,197,24,.1); }

/* Phone input with country code prefix */
.bf-phone-wrap {
  position: relative;
}
.bf-phone-prefix {
  position: absolute;
  top: 50%;
  inset-inline-end: 14px;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 800;
  color: var(--accent-gold);
  background: var(--primary);
  padding: 5px 10px;
  border-radius: 8px;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
  letter-spacing: .5px;
  font-family: 'Inter', sans-serif;
}
.bf-phone-input {
  padding-inline-end: 72px !important;
  direction: ltr;
  text-align: start;
}

/* OTP screen */
.bf-otp-intro {
  text-align: center;
  margin-bottom: 24px;
}
.bf-otp-phone {
  font-size: 15px;
  color: var(--text);
  margin-bottom: 4px;
}
.bf-otp-phone strong {
  color: var(--primary);
  font-weight: 800;
}
.bf-otp-channel {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}
/* TEMP master-code hint (until SMS is wired) — gentle gold pill so it reads as
   a dev note, not part of the real product. Remove with STX_MASTER_OTP. */
.bf-otp-master, .login-otp-master {
  margin: 10px auto 0;
  max-width: 300px;
  padding: 7px 12px;
  background: var(--accent-soft, #FEF3C7);
  border: 1px dashed var(--accent, #F59E0B);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: #92660A;
  text-align: center;
}
.bf-otp-master strong, .login-otp-master strong { letter-spacing: .12em; font-size: 14px; }
/* Wrong-code flash on the OTP boxes (both login + booking). */
.bf-otp-box.otp-error, .login-otp-box.otp-error {
  border-color: #DC2626 !important;
  background: #FEE2E2 !important;
  animation: bfShake .4s;
}
.bf-otp-boxes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 220px;
  margin: 0 auto 16px;
  direction: ltr;
}
.bf-otp-box {
  width: 100%;
  height: 46px;
  padding: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
  color: var(--primary);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 8px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  font-family: inherit;
}
.bf-otp-demo-hint {
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(245,197,24,.1);
  border: 1px dashed var(--accent-gold);
  border-radius: 8px;
  text-align: center;
  font-size: 12px;
  color: var(--primary-dark);
  font-weight: 700;
}
@media (max-width: 400px) {
  .bf-otp-boxes { max-width: 220px; gap: 4px; }
  .bf-otp-box { height: 44px; font-size: 16px; }
}
.bf-otp-box:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 4px rgba(245,197,24,.18);
  transform: scale(1.05);
}
.bf-otp-box.filled {
  border-color: var(--accent-gold);
  background: rgba(245,197,24,.06);
}
.bf-otp-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.bf-otp-resend,
.bf-otp-alt {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
}
.bf-otp-resend:disabled {
  color: var(--text-muted);
  cursor: default;
}
.bf-otp-resend:not(:disabled):hover { background: rgba(12,74,110,.06); }
.bf-otp-alt {
  color: #25D366;
  border: 1px solid rgba(37,211,102,.3);
}
.bf-otp-alt:hover {
  background: rgba(37,211,102,.08);
}
.bf-otp-timer {
  color: var(--text-light);
  font-weight: 500;
}

/* Expandable cards (screen 5) */
.bf-expand-card {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--t-med), box-shadow var(--t-med);
}
.bf-expand-card.open {
  border-color: var(--accent-gold);
  box-shadow: 0 4px 14px rgba(245,197,24,.15);
}
.bf-expand-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: none;
  cursor: pointer;
  text-align: start;
  transition: background var(--t-fast);
}
.bf-expand-head:hover { background: var(--bg-soft); }
.bf-expand-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.bf-expand-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bf-expand-title strong {
  font-size: 14px;
  color: var(--primary);
  font-weight: 800;
}
.bf-expand-title small {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}
.bf-expand-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-gold);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  transition: transform var(--t-fast);
}
.bf-expand-card.open .bf-expand-arrow {
  transform: rotate(45deg);
}
.bf-expand-body {
  max-height: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height var(--t-med), padding var(--t-med);
  background: var(--bg-sky);
}
.bf-expand-card.open .bf-expand-body {
  max-height: 700px;
  padding: 16px;
}

/* Checkbox (for return address) */
.bf-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}
.bf-checkbox input { width: 18px; height: 18px; accent-color: var(--accent-gold); }

/* Inside the return-trip body — give the wheel trigger and the two
   checkboxes ("יציאה מהירה" + "חזרה לאותה כתובת") clear breathing room
   between them, plus a bit more padding so they feel like separate decisions. */
#bfReturnBody .bf-tp-wheel-trigger { margin-bottom: 14px; }
#bfReturnBody .bf-return-checkbox {
  padding: 10px 12px;
  margin-top: 12px;
  background: rgba(11,30,63,.03);
  border: 1px solid rgba(11,30,63,.08);
  border-radius: 10px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
#bfReturnBody .bf-return-checkbox:has(input:checked) {
  background: rgba(245,197,24,.10);
  border-color: rgba(245,197,24,.40);
}

/* Extras list */
.bf-extras-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bf-extra-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.bf-extra-option:hover { border-color: var(--accent-gold); }
.bf-extra-option input {
  margin-top: 2px;
  width: 18px; height: 18px;
  accent-color: var(--accent-gold);
}
.bf-extra-option input:checked + .bf-extra-text {
  color: var(--primary);
}
.bf-extra-option:has(input:checked) {
  background: rgba(245,197,24,.06);
  border-color: var(--accent-gold);
}
.bf-extra-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bf-extra-text strong { font-size: 13px; font-weight: 800; color: var(--primary); }
.bf-extra-text small { font-size: 12.5px; color: var(--text-muted); }
.bf-extras-call {
  margin-top: 10px;
  padding: 10px;
  background: rgba(245,158,11,.1);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary-dark);
  text-align: center;
}
.bf-extras-call a { color: var(--accent); font-weight: 900; text-decoration: none; }

/* Total price */
.bf-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 20px 0;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: var(--accent-gold);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(12,74,110,.3);
}
.bf-total-label {
  font-size: 15px;
  font-weight: 700;
}
.bf-total-amount {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.02em;
}

/* Payment options */
.bf-payment-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bf-payment-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  background: var(--surface);
  transition: opacity, transform, color, background-color, border-color, box-shadow var(--t-fast);
}
.bf-payment-option:hover { border-color: var(--accent-gold); }
.bf-payment-option input { display: none; }
.bf-payment-option:has(input:checked),
.bf-payment-option.active {
  border-color: var(--accent-gold);
  background: rgba(245,197,24,.08);
}
.bf-payment-icon {
  font-size: 24px;
  line-height: 1;
}
.bf-payment-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bf-payment-text strong { font-size: 14px; font-weight: 800; color: var(--primary); }
.bf-payment-text small { font-size: 12.5px; color: var(--text-muted); }

/* Success screen */
.bf-success {
  text-align: center;
  padding: 20px 0;
}
.bf-success-icon {
  width: 84px;
  height: 84px;
  margin: 0 auto 20px;
  animation: bfBounce .8s ease-out;
}
.bf-success-icon svg { width: 100%; height: 100%; }
.bf-success-circle {
  fill: var(--accent-gold);
  opacity: .2;
}
.bf-success-check {
  stroke: var(--accent-gold);
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: bfCheckDraw .6s ease-out .3s forwards;
}
@keyframes bfBounce {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes bfCheckDraw {
  to { stroke-dashoffset: 0; }
}
.bf-success-title {
  font-size: 28px;
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 8px;
}
.bf-success-desc {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.bf-success-desc strong { color: var(--primary); font-weight: 700; }
.bf-success-box {
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 18px;
  text-align: start;
}
.bf-success-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
}
.bf-success-row + .bf-success-row { border-top: 1px dashed var(--border); }
.bf-success-k { color: var(--text-muted); font-weight: 600; }
.bf-success-v { color: var(--primary); font-weight: 800; }
.bf-success-total .bf-success-v { color: var(--accent-gold); font-size: 16px; }
.bf-success-reminder {
  background: rgba(245,197,24,.1);
  border: 1px dashed var(--accent-gold);
  color: var(--primary-dark);
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  text-align: start;
  line-height: 1.5;
}
/* Cancellation policy notice on the success screen — discreet pill that
   tells the customer the free-cancellation deadline up-front, with a
   tooltip for full details. Sits below the receipt reminder. */
.bf-cxl-success-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(11,30,63,.04);
  border: 1px solid rgba(11,30,63,.10);
  border-radius: 12px;
  cursor: pointer;
  text-align: start;
  transition: background var(--t-fast, .15s) ease, border-color var(--t-fast, .15s) ease;
}
.bf-cxl-success-notice:hover {
  background: rgba(11,30,63,.07);
  border-color: rgba(11,30,63,.18);
}
.bf-cxl-success-notice[hidden] { display: none !important; }
.bf-cxl-success-icon { font-size: 18px; flex: 0 0 auto; }
.bf-cxl-success-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.bf-cxl-success-text strong {
  font-size: 13px;
  color: var(--primary, #0B1E3F);
  font-weight: 800;
}
.bf-cxl-success-text small {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  font-weight: 600;
  margin-top: 2px;
}
/* Per-leg cancellation row inside the notice — outbound + return get
   their own line so the cutoffs read independently. */
.bf-cxl-success-legs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0;
}
.bf-cxl-leg {
  font-size: 12.5px;
  color: var(--primary, #0B1E3F);
  font-weight: 700;
}
.bf-cxl-leg-icon { display: inline-block; margin-inline-end: 2px; }
/* Per-leg payment rows — sit in the same column structure as the regular
   rows. Slightly muted vs the grand-total row below. */
.bf-success-leg-row .bf-success-v { color: var(--primary); font-weight: 700; }
.bf-success-leg-row[hidden] { display: none !important; }
/* "לצפייה בהזמנה" CTA — secondary action below the success card. Lives in
   normal flow (not sticky) since this is the final screen. */
.bf-success-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  min-height: 48px;
  padding: 12px 18px;
  background: #fff;
  color: var(--primary, #0B1E3F);
  border: 2px solid var(--primary, #0B1E3F);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.bf-success-view-btn:hover {
  background: var(--primary, #0B1E3F);
  color: #fff;
  transform: translateY(-1px);
}

/* ═════════ NEW: Unified form — summary rows, toggle, chips, trust ═════════ */
.bf-summary-block {
  background: var(--bg-soft, #f8f6f0);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.bf-summary-head {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bf-row {
  display: flex;
  flex-direction: column;
}
.bf-row + .bf-row {
  border-top: 1px dashed rgba(0,0,0,.08);
  margin-top: 8px;
  padding-top: 8px;
}
.bf-row-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  min-height: 32px;
}
.bf-row-display[hidden],
.bf-row-editor[hidden],
.bf-toggle-body[hidden] { display: none !important; }
.bf-row-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.bf-row-text {
  flex: 1;
  color: var(--primary, #0B1E3F);
  font-weight: 700;
  font-size: 14px;
}
.bf-row-edit {
  border: 1px solid var(--border, rgba(0,0,0,.15));
  background: #fff;
  color: var(--primary, #0B1E3F);
  font-weight: 700;
  /* 14px (was 12) + taller pad so the "שינוי" pill is legible and hittable
     for older users — 12px Hebrew in a sub-30px target was too small. */
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity, transform, color, background-color, border-color, box-shadow .15s ease;
  flex-shrink: 0;
}
.bf-row-edit:hover {
  background: var(--accent-gold, #F5C518);
  border-color: var(--accent-gold, #F5C518);
  color: var(--primary, #0B1E3F);
}
.bf-row-editor {
  padding: 8px 0 4px;
}
.bf-row-done {
  border: none;
  background: var(--primary, #0B1E3F);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 6px;
  transition: background .15s ease;
}
.bf-row-done:hover { background: var(--primary-dark, #071633); }

/* Guest-only block — hidden when user is logged-in */
.bf-guest-block { /* shown/hidden via JS */ }

/* Return trip toggle */
.bf-toggle-row {
  background: #fff;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  transition: border-color .15s ease;
}
/* Highlighted return-trip toggle — bigger, gold accent, soft halo */
#bfReturnRow {
  background: linear-gradient(135deg, rgba(245,197,24,0.14) 0%, rgba(245,197,24,0.05) 100%);
  border: 2px solid var(--accent-gold, #F5C518);
  padding: 16px 18px;
  box-shadow: 0 4px 16px rgba(245,197,24,0.18), 0 1px 3px rgba(0,0,0,0.04);
  position: relative;
}
#bfReturnRow::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 14px;
  border: 2px solid rgba(245,197,24,0.35);
  pointer-events: none;
  animation: bfReturnPulse 2.4s ease-in-out infinite;
}
@keyframes bfReturnPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0;    transform: scale(1.03); }
}
#bfReturnRow .bf-toggle-text strong {
  font-size: 16px;
  color: var(--primary-dark, #071633);
}
#bfReturnRow .bf-toggle-text small {
  font-size: 13px;
  color: var(--text, #1f2a44);
}
/* When the toggle is ON: outer card KEEPS the gold treatment (so users can
   still see at a glance that they added a return), but the pulsing halo
   stops — its job is done. The body inside (date/time/address) stays on a
   plain white surface so the inputs feel like every other field. */
#bfReturnRow:has(#bfReturnToggle:checked)::before {
  animation: none;
  opacity: 0;
  display: none;
}
/* Once opened, the OUTER card keeps the gold treatment exactly like before
   the click. The body itself stays transparent so the gold can show through
   on the "promise" area at top. The actual input fields live in a separate
   .bf-return-form-area below — that one has a solid white background so the
   gold tint doesn't bleed onto the inputs. */
#bfReturnRow:has(#bfReturnToggle:checked) .bf-toggle-body {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 14px;
  border-top: 1px dashed rgba(0,0,0,.1);
  padding-top: 14px;
}
/* The white "form area" — separates the gold marketing zone (toggle +
   "איך החזרה עובדת" promise) from the actual input fields below.
   We use negative margins to BREAK OUT of the outer gold card's padding,
   so the white area sits flush with the card edges and the gold gradient
   stops at the dividing line. Only the bottom corners stay rounded so it
   looks like a separate box "growing out" of the gold one above it. */
.bf-return-form-area {
  background: #fff;
  border: 0;
  border-top: 2px solid var(--accent-gold, #F5C518);
  border-radius: 0 0 12px 12px;
  /* Negative inline + bottom margins eat the outer #bfReturnRow padding
     (16px 18px) so the white area sits flush with the gold border, making
     a clean visual split between the gold "header" and the white "form". */
  margin-inline: -18px;
  margin-bottom: -16px;
  margin-top: 16px;
  padding: 16px 18px;
}
.bf-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.bf-toggle input { display: none; }
.bf-toggle-switch {
  width: 44px;
  height: 24px;
  background: #d0d3da;
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
  transition: background .2s ease;
}
.bf-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-end: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: inset-inline-end .2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.bf-toggle input:checked + .bf-toggle-switch {
  background: var(--accent-gold, #F5C518);
}
.bf-toggle input:checked + .bf-toggle-switch::after {
  inset-inline-end: 22px;
}
.bf-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.bf-toggle-text strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary, #0B1E3F);
}
.bf-toggle-text small {
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
}
.bf-toggle-body {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(0,0,0,.1);
}

/* localStorage draft-restored toast — appears at the top of the overlay
   whenever a saved draft was loaded. Quiet, decorative, dismissible. */
.bf-draft-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: -8px 0 12px;
  background: linear-gradient(135deg, rgba(245,197,24,.16) 0%, rgba(245,197,24,.04) 100%);
  border: 1px solid rgba(245,197,24,.45);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dark, #071633);
  transition: opacity .6s ease;
}
.bf-draft-toast.faded { opacity: 0.45; }
.bf-draft-toast .bf-dt-icon { font-size: 18px; flex-shrink: 0; }
.bf-draft-toast .bf-dt-text { flex: 1; line-height: 1.4; }
.bf-draft-toast .bf-dt-reset {
  background: transparent;
  border: 1px solid var(--primary, #0B1E3F);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--primary, #0B1E3F);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.bf-draft-toast .bf-dt-reset:hover { background: var(--primary, #0B1E3F); color: #fff; }

/* Return-trip service promise */
/* ── From-airport intro removed (rolled back 2026-05-14 by user
   request). Flight number lives only in the original return-toggle
   body now. Whatever rules referenced #bfFromIntro / #bfFromFlightNo
   below are gone. */

/* ── Luggage pill — collapsed-by-default for intercity mode. Airport mode
   keeps the field visible (luggage is the typical case). Intercity mostly
   doesn't have luggage, so we hide the field behind a pill the user clicks
   to expand. Delivery never shows passengers/luggage step at all. */
.bf-lug-expand-pill {
  display: none;
  width: fit-content;
  margin: 8px 0 0;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(12,74,110,.05), rgba(12,74,110,.02));
  border: 1px dashed rgba(12,74,110,.32);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary, #0B1E3F);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.bf-lug-expand-pill:hover { background: rgba(12,74,110,.08); border-color: rgba(12,74,110,.55); }
/* Intercity: hide the luggage field, show the pill */
.overlay-card.bf-card[data-mode="intercity"]:not(.lug-expanded) #bfLuggageField { display: none; }
.overlay-card.bf-card[data-mode="intercity"]:not(.lug-expanded) .bf-lug-expand-pill { display: inline-block; }
/* Intercity: a "✕ סגירה" link to collapse the (optional) luggage field back —
   visible only once it's been expanded. Airport always shows luggage, so no
   close affordance there. */
.bf-lug-collapse { display: none; }
.overlay-card.bf-card[data-mode="intercity"].lug-expanded #bfLugCollapse {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-inline-start: 8px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-muted, #64748B);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.bf-lug-collapse:hover { color: var(--primary, #0C4A6E); }

/* Intercity: destination-city field. Hidden by default (airport collects ONE
   city → נתב״ג); shown only when the overlay is in intercity mode. */
#s1CityToField { display: none; }
.overlay-card.bf-card[data-mode="intercity"] #s1CityToField,
.overlay-card.bf-card[data-mode="urban"] #s1CityToField { display: block; }

/* Two-address blocks (the second/destination street address in step 2 + the
   "כתובת מוצא/איסוף" mini-header). Shown for intercity, urban AND delivery —
   all have a pickup address AND a drop-off address (urban is city-to-city,
   same layout as intercity). Label text is set per-mode in JS. */
.bf-twoaddr { display: none; }
.overlay-card.bf-card[data-mode="intercity"] .bf-twoaddr,
.overlay-card.bf-card[data-mode="urban"] .bf-twoaddr,
.overlay-card.bf-card[data-mode="delivery"] .bf-twoaddr { display: block; }
.bf-addr-grouplabel { font-size: 13px; font-weight: 800; color: var(--primary, #0C4A6E); margin: 2px 0 6px; }
.bf-dest-addr-wrap { margin-top: 14px; }

/* ══════════ DELIVERY OVERLAY ══════════
   Delivery reuses the airport step flow but swaps several fields:
   pax+luggage → speed picker + package counts; adds a recipient block
   and a payer (sender/recipient) toggle; shows the destination field
   (relabeled "עיר מסירה" in JS). */
.bf-del-only { display: none; }
.overlay-card.bf-card[data-mode="delivery"] .bf-del-only { display: block; }
.overlay-card.bf-card[data-mode="delivery"] #s1CityToField { display: block; }
.overlay-card.bf-card[data-mode="delivery"] #bfPaxField,
.overlay-card.bf-card[data-mode="delivery"] #bfLuggageField,
.overlay-card.bf-card[data-mode="delivery"] .bf-lug-expand-pill,
.overlay-card.bf-card[data-mode="delivery"] .bf-luggage-hint,
.overlay-card.bf-card[data-mode="delivery"] #bfLugSurcharge,
.overlay-card.bf-card[data-mode="delivery"] #bfExtrasWrap { display: none !important; }

/* Package counts — three compact selects in a row */
.bf-field-third { flex: 1; min-width: 0; }
.bf-pkg-row { display: flex; gap: 8px; }
.bf-label-sm { font-size: 13px; }
.bf-pkg-hint {
  margin: 8px 0 0; font-size: 12.5px; font-weight: 600;
  color: #B45309;
  background: rgba(245,158,11,.08); border-radius: 10px; padding: 7px 10px;
}

/* Payer toggle (who pays — sender / recipient) */
.bf-payer-toggle { margin: 0 0 14px; }
.bf-payer-q { font-size: 13.5px; font-weight: 700; color: var(--text-muted,#64748B); margin-bottom: 7px; }
.bf-payer-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bf-payer-option {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 12px; border: 2px solid var(--border,#E2E8F0); border-radius: 12px;
  font-size: 14px; font-weight: 700; color: var(--primary,#0C4A6E);
  cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast);
}
.bf-payer-option input { position: absolute; opacity: 0; pointer-events: none; }
.bf-payer-option.active {
  border-color: var(--accent,#F59E0B);
  background: linear-gradient(135deg, rgba(245,197,24,.10), rgba(245,197,24,.02));
}

/* Recipient block */
.bf-recipient-block { margin-bottom: 6px; }
.bf-recipient-sep {
  text-align: center; font-size: 12.5px; font-weight: 700;
  color: var(--text-muted,#64748B); margin: 16px 0 10px;
}

/* ── From-airport intro (visible only when overlay direction = 'from').
   Replaces the "add return trip" toggle further down — when the WHOLE
   booking IS a return-from-airport, there's no separate "return" to
   add, so the flight-number + service promise live up here as main
   fields. */
.bf-from-intro {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Return toggle hidden only for delivery mode (airport TO/FROM/round
   and intercity all keep it visible — the customer either uses it or
   ignores it). */
.overlay-card.bf-card[data-mode="delivery"] #bfReturnRow { display: none; }

/* Flight number field (inside the return-toggle body) makes no sense
   for intercity/delivery — hide it there. */
.overlay-card.bf-card:not([data-mode="airport"]) .bf-field-flight,
.overlay-card.bf-card:not([data-mode="airport"]) #bfQuickExitRow {
  display: none !important;
}

/* ── From-airport booking ('חזרה מנתב״ג' button) ─────────────────────────
   The WHOLE trip IS the return, so there's nothing to "also add" — asking
   "צריכים גם חזרה?" is nonsense here. Hide the toggle question and show the
   "איך החזרה עובדת" promise + flight number directly. Drop the redundant
   return-leg date/time, address and price: the main city + landing time
   already capture the trip, and its price IS the main (only) price. */
.overlay-card.bf-card[data-direction="from"] #bfReturnRow {
  background: #fff;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  box-shadow: none;
  padding: 0;
}
.overlay-card.bf-card[data-direction="from"] #bfReturnRow::before { display: none !important; }
.overlay-card.bf-card[data-direction="from"] #bfReturnRow .bf-toggle { display: none !important; }
.overlay-card.bf-card[data-direction="from"] #bfReturnRow .bf-toggle-body,
.overlay-card.bf-card[data-direction="from"] #bfReturnRow .bf-toggle-body[hidden] {
  display: block !important;
}
.overlay-card.bf-card[data-direction="from"] .bf-return-form-area {
  border-top: 0;
  border-radius: 14px;
  margin: 0;
  padding: 16px;
}
.overlay-card.bf-card[data-direction="from"] #bfReturnBody .bf-tp-current-row,
.overlay-card.bf-card[data-direction="from"] #bfReturnBody .bf-tp-native-ret,
.overlay-card.bf-card[data-direction="from"] #bfReturnBody .bf-tp-wheel-trigger-ret,
.overlay-card.bf-card[data-direction="from"] #bfReturnBody #bfRetShabbatHost,
.overlay-card.bf-card[data-direction="from"] #bfReturnBody .bf-return-checkbox:has(#bfSameAddr),
.overlay-card.bf-card[data-direction="from"] #bfReturnBody #bfReturnAddrField,
.overlay-card.bf-card[data-direction="from"] #bfReturnBody #bfReturnLegPrice,
.overlay-card.bf-card[data-direction="from"] #bfReturnBody #bfReturnGapWarning,
.overlay-card.bf-card[data-direction="from"] #bfReturnBody #bfReturnDoubleNote {
  display: none !important;
}

.bf-return-promise {
  background: linear-gradient(180deg, rgba(12,74,110,.06), rgba(12,74,110,.02));
  border: 1px solid rgba(12,74,110,.14);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.bf-return-promise-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary, #0B1E3F);
  margin-bottom: 8px;
}
.bf-return-promise ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bf-return-promise li {
  font-size: 12px;
  line-height: 1.5;
  color: var(--primary-dark, #071633);
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.bf-return-promise li span { flex-shrink: 0; }

/* Double-booking warning */
.bf-return-warning {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(192,57,43,.06);
  border: 1.5px solid rgba(192,57,43,.28);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 14px;
}
.bf-rw-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.bf-return-warning strong {
  display: block;
  font-size: 13px;
  font-weight: 900;
  color: #8e2a1f;
  margin-bottom: 4px;
}
.bf-return-warning p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--primary-dark, #071633);
  margin: 0;
}
.bf-return-warning p strong { display: inline; color: #8e2a1f; margin: 0; font-size: 12px; }

/* Softer info note (double-booking reminder) */
.bf-return-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(12,74,110,.05);
  border: 1px solid rgba(12,74,110,.18);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 10px;
}
/* `display: flex` above wins over the browser's [hidden] default — restore it */
.bf-return-note[hidden],
.bf-return-warning[hidden] { display: none !important; }
.bf-rn-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.bf-return-note p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--primary-dark, #071633);
  margin: 0;
}
.bf-return-note p strong { color: var(--primary-dark, #071633); font-weight: 900; }

/* Align return date + time row (time's extra baseline space) */
#bfReturnBody .bf-field-row { align-items: start; }
#bfReturnBody .bf-time-split { margin-top: 0; }
.bf-time-format-hint {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  margin-top: 4px;
  display: block;
}

/* Time-of-day badge below time selects */
.bf-time-period {
  display: none;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(12,74,110,.05);
  border: 1px solid rgba(12,74,110,.15);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary, #0B1E3F);
  line-height: 1.4;
}
.bf-time-period.visible { display: block; }
.bf-time-period .tp-emoji { margin-inline-end: 4px; }
.bf-time-period .tp-note {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
}
.bf-time-period.danger {
  background: rgba(245,158,11,.08);
  border-color: rgba(245,158,11,.32);
}
.bf-time-period.danger .tp-note {
  color: #8a5a0a;
  font-weight: 700;
}

/* Shabbat / Chag blocker — respectful card that matches the brand's
   "תחנה שומרת שבת" identity. Header (greeting) + body (statement +
   optional quote) + footer (when service resumes). Lives in the dedicated
   #s1ShabbatHost / #bfRetShabbatHost element so it always appears BELOW
   the date/time field regardless of picker mode. */
.bf-shabbat-host.bf-shabbat-block {
  background: transparent;
  border: 0;
  padding: 0;
}
.bf-shabbat-block .bf-sb-card {
  background: linear-gradient(160deg, #fff 0%, rgba(245,197,24,.10) 100%);
  border: 1.5px solid var(--accent-gold, #F5C518);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 4px 20px rgba(11,30,63,.06);
  text-align: center;
}
.bf-shabbat-block .bf-sb-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 900;
  color: var(--primary-dark, #071633);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(245,197,24,.45);
}
.bf-shabbat-block .bf-sb-icon { font-size: 24px; line-height: 1; }
.bf-shabbat-block .bf-sb-h-text { letter-spacing: .5px; }
.bf-shabbat-block .bf-sb-body {
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #1f2a44);
  line-height: 1.7;
}
.bf-shabbat-block .bf-sb-body p { margin: 0 0 8px; }
.bf-shabbat-block .bf-sb-body p:last-child { margin-bottom: 0; }
.bf-shabbat-block .bf-sb-quote {
  font-style: italic;
  font-weight: 800;
  color: var(--primary-dark, #071633);
  margin-top: 10px !important;
  font-size: 13px;
  border-inline-start: 3px solid var(--accent-gold, #F5C518);
  padding-inline-start: 12px;
}
.bf-shabbat-block .bf-sb-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(245,197,24,.45);
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-dark, #071633);
}
/* Dim the price summary + Continue while in a Shabbat/Chag blackout — the
   user can still scroll and review, but the obvious next-step button is
   visibly inactive so they know they need to change the date/time first. */
body[data-shabbat-blocked] .overlay-next {
  opacity: .45;
  filter: grayscale(.6);
  cursor: not-allowed;
}
body[data-shabbat-blocked] .bf-go-to-summary {
  opacity: .45;
  cursor: not-allowed;
}

/* Quick-exit checkbox row — only shown when no large luggage */
.bf-checkbox[hidden] { display: none !important; }

/* Return-leg live price (inside return toggle body) */
.bf-return-leg-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(245,197,24,.14), rgba(245,197,24,.04));
  border: 1.5px solid rgba(245,197,24,.45);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary, #0B1E3F);
}
.bf-return-leg-price[hidden] { display: none !important; }
.bf-rlp-label { font-weight: 700; }
.bf-rlp-amount {
  font-size: 18px;
  font-weight: 900;
  color: var(--primary-dark, #071633);
  font-variant-numeric: tabular-nums;
}
.bf-rlp-rate {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  margin-inline-start: 4px;
}

/* Live luggage surcharge hint below the luggage field */
.bf-lug-surcharge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(245,197,24,.12);
  border: 1px solid rgba(245,197,24,.4);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary, #0B1E3F);
  animation: bfLugSurchargeIn .25s ease;
}
.bf-lug-surcharge[hidden] { display: none !important; }
.bf-lug-sur-text { flex: 1; }
.bf-lug-sur-price {
  font-size: 14px;
  font-weight: 900;
  color: var(--primary-dark, #071633);
  white-space: nowrap;
}
@keyframes bfLugSurchargeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Gold pulse highlight for "look here!" — used on the return-trip row after the suggestion */
.bf-highlight-pulse {
  animation: bfHighlightPulse 1.1s ease-in-out 3;
  border-color: var(--accent-gold, #F5C518) !important;
}
@keyframes bfHighlightPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,197,24,.55); }
  50%      { box-shadow: 0 0 0 12px rgba(245,197,24,0); }
}

/* Per-leg price rows in summary (when return is included) */
.bf-confirm-leg-row { background: rgba(12,74,110,.04); border-radius: 8px; padding: 10px; }
.bf-confirm-leg-row + .bf-confirm-leg-row { margin-top: 4px; }
.bf-confirm-leg-row .bf-confirm-icon { font-size: 18px; font-weight: 900; color: var(--primary, #0B1E3F); }
.bf-confirm-leg-amt {
  font-size: 16px !important;
  text-align: end;
  color: var(--primary, #0B1E3F);
  font-variant-numeric: tabular-nums;
}
.bf-confirm-leg-row .bf-confirm-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bf-confirm-leg-row .bf-confirm-label small {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
}
.bf-two-orders-note {
  margin: 12px 0 0;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  background: rgba(12,74,110,.04);
  border: 1px dashed rgba(12,74,110,.2);
  border-radius: 10px;
  line-height: 1.5;
}
.bf-two-orders-note[hidden] { display: none !important; }

/* Confirmation summary screen — symmetric grid */
.bf-confirm-summary { margin-bottom: 14px; }
.bf-confirm-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: start;
  gap: 10px;
  padding: 12px 4px;
}
.bf-confirm-row + .bf-confirm-row { border-top: 1px solid rgba(0,0,0,.06); }
.bf-confirm-row[hidden] { display: none !important; }
/* Order-number row sits at the top as the booking's identifier — make the
   number itself read as a reference code (monospace-ish tnum, accent color). */
.bf-confirm-ordernum-row .bf-confirm-value { color: var(--primary-light, #0369A1); letter-spacing: .04em; }
/* Pax + luggage + stroller rows belong to ONE visual group ("נוסעים + כבודה")
   — drop the dividing line between them so it reads as a single block,
   with reduced vertical padding so it stays compact. The line BEFORE the
   first row of the group (above bfCfmPax) and AFTER the last visible row
   in the group (above bfCfmReturnRow / bfCfmExtrasRow / bfCfmPayment) stays. */
#bfCfmLugLargeRow,
#bfCfmLugSmallRow,
#bfCfmStrollerBuggyRow,
#bfCfmStrollerPramRow {
  border-top: 0 !important;
  padding-top: 4px;
  padding-bottom: 4px;
}
.bf-confirm-icon {
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
}
.bf-confirm-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
  align-self: center;
}
.bf-confirm-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary, #0B1E3F);
  text-align: start;
  line-height: 1.5;
  word-break: break-word;
  align-self: center;
}
/* Some confirmation rows (payment, dates) read better on a single line. */
.bf-confirm-value-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 480px) {
  .bf-confirm-row { grid-template-columns: 96px 1fr; gap: 8px; padding: 11px 4px; }
  .bf-confirm-label { font-size: 11px; }
  .bf-confirm-value { font-size: 13px; }
}
.bf-confirm-total-row {
  background: linear-gradient(180deg, rgba(245,197,24,.14), rgba(245,197,24,.04));
  border-radius: 10px;
  margin-top: 8px;
  padding: 14px 10px;
  border-top: none !important;
}
.bf-confirm-total { font-size: 22px; color: var(--primary-dark, #071633); text-align: end; }
.bf-confirm-total-row .bf-confirm-label { font-weight: 800; color: var(--primary-dark, #071633); }
.bf-cfm-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--border, rgba(0,0,0,.15));
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary, #0B1E3F);
  cursor: pointer;
  transition: opacity, transform, color, background-color, border-color, box-shadow .15s ease;
}
.bf-cfm-edit-btn:hover {
  background: var(--bg-soft, #f8f6f0);
  border-color: var(--primary, #0B1E3F);
}
.bf-cfm-edit-btn svg { fill: currentColor; }

/* Flex container for the inline edit + cancel pair. Centers both pills
   with a comfortable gap; on tight viewports they wrap onto two rows. */
.bf-cfm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
  /* Clear gap below so the bottom "סגור" CTA doesn't crowd the
     עריכה / ביטול הזמנה pills above it. */
  margin-bottom: 24px;
}
.bf-cfm-actions .bf-cfm-cancel-btn { margin-inline-start: 0; }

/* viewMode primary look — fill the pill with the brand color so it
   reads as the main action ("עריכה") next to the destructive cancel pill. */
.bf-cfm-edit-btn.bf-cfm-edit-btn-primary {
  background: var(--primary, #0B1E3F);
  border-color: var(--primary, #0B1E3F);
  color: #fff;
  padding: 10px 18px;
  font-size: 14px;
}
.bf-cfm-edit-btn.bf-cfm-edit-btn-primary:hover {
  background: var(--primary-dark, #071633);
  border-color: var(--primary-dark, #071633);
}

/* Cancel-booking link inside the summary screen — discreet, sits next to
   the pencil/edit button as the secondary destructive action. Visible
   only in viewMode. */
.bf-cfm-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: 10px;
  padding: 10px 18px;
  background: transparent;
  border: 1px solid rgba(192,57,43,.35);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #991b1b;
  cursor: pointer;
  transition: opacity, transform, color, background-color, border-color, box-shadow .15s ease;
}
.bf-cfm-cancel-btn:hover {
  background: rgba(192,57,43,.06);
  border-color: rgba(192,57,43,.55);
}

/* Restore pill — same shape as the cancel pill but green, signalling
   "bring this booking back to life". Visible only when viewing a
   cancelled booking. */
.bf-cfm-restore-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #059669, #047857);
  border: 1px solid #047857;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  cursor: pointer;
  transition: opacity, transform, color, background-color, border-color, box-shadow .15s ease;
  box-shadow: 0 4px 12px rgba(5,150,105,.25);
}
.bf-cfm-restore-btn:hover {
  background: linear-gradient(135deg, #047857, #065F46);
  box-shadow: 0 6px 16px rgba(5,150,105,.35);
  transform: translateY(-1px);
}

/* The three confirm-screen pills use display:inline-flex which overrides
   the browser's default [hidden] {display:none}. Force hiding when the
   attribute is set so the JS toggles actually do what they say. */
.bf-cfm-edit-btn[hidden],
.bf-cfm-cancel-btn[hidden],
.bf-cfm-restore-btn[hidden] { display: none !important; }

/* Per-field error note — inserted directly UNDER the offending field
   by bfFlashMissing. Stays visible until the user interacts with the
   field. This is now the primary error UX; the toast (.bf-inline-error)
   is kept only for legacy calls.                                     */
.bf-field-error-note {
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(192, 57, 43, .08);
  border: 1px solid rgba(192, 57, 43, .35);
  border-radius: 8px;
  color: #8e2a1f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  animation: bfErrorNoteIn .2s ease;
}
@keyframes bfErrorNoteIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Inline error toast (legacy) — kept for any code path still calling
   bfShowInlineError directly. Per-field note is preferred.           */
.bf-inline-error {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(192,57,43,.96);
  border: 1.5px solid rgba(192,57,43,.55);
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 700;
  color: white;
  text-align: center;
  max-width: calc(100% - 32px);
  box-shadow: 0 12px 32px rgba(192,57,43,.35), 0 4px 12px rgba(0,0,0,.18);
  z-index: 9999;
  animation: bfInlineErrorIn .25s cubic-bezier(.16,1,.3,1);
  pointer-events: auto;
}
.bf-inline-error[hidden] { display: none !important; }
@keyframes bfInlineErrorIn {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Extras chips */
.bf-extras-block {
  background: #fff;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.bf-extras-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  flex-wrap: wrap;
  gap: 6px;
}
.bf-extras-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary, #0B1E3F);
}
.bf-extras-sub {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  font-weight: 600;
}
.bf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
  align-items: center;
}
.bf-chips .bf-chip { flex: 0 0 auto; }
.bf-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border: 1px solid var(--border, rgba(0,0,0,.15));
  border-radius: 999px;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary, #0B1E3F);
  cursor: pointer;
  transition: opacity, transform, color, background-color, border-color, box-shadow .15s ease;
  user-select: none;
}
.bf-chip input { display: none; }
.bf-chip small {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  font-weight: 600;
}
.bf-chip:hover { border-color: var(--accent-gold, #F5C518); }
.bf-chip:has(input:checked) {
  background: var(--accent-gold, #F5C518);
  border-color: var(--accent-gold, #F5C518);
  color: var(--primary, #0B1E3F);
}
.bf-chip:has(input:checked) small { color: var(--primary, #0B1E3F); }

/* Collapsible driver note */
.bf-note-block {
  background: #fff;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  border-radius: 14px;
  padding: 0;
  margin-top: 16px;
  margin-bottom: 16px;
  overflow: hidden;
}
.bf-note-block summary {
  padding: 12px 16px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 22px;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary, #0B1E3F);
}
.bf-note-block summary::-webkit-details-marker { display: none; }
/* The header line itself (icon + "הערה לנהג") — first column. */
.bf-note-summary-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* Examples line — sits BELOW the header inside the summary, visible
   even when the block is collapsed. Spans both columns of the summary
   grid so it doesn't get pushed by the +/× toggle on the right. */
.bf-note-examples {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #6b7280);
  line-height: 1.5;
  letter-spacing: -.005em;
  margin-top: 2px;
}
.bf-note-block summary small {
  font-weight: 600;
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  margin-inline-start: auto;
}
.bf-note-block summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: var(--text-muted, #6b7280);
  transition: transform .2s ease;
  /* Anchor top-right of the summary grid so the examples line wraps
     beneath without pushing the toggle around. */
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  line-height: 1;
}
.bf-note-block[open] summary::after { transform: rotate(45deg); }
.bf-note-block[open] { padding-bottom: 14px; }
.bf-note-block textarea {
  margin: 0 16px;
  width: calc(100% - 32px);
  resize: vertical;
}
.bf-note-block .bf-hint { padding: 0 16px; }
.bf-extras-block .bf-chips { padding: 4px 16px 6px; }
.bf-extras-block .bf-extras-call { margin: 8px 16px 0; }

/* Highway 6 info (inside extras — collapsible "learn more") */
.bf-highway6-info {
  margin: 10px 16px 0;
  padding: 0;
  background: rgba(12,74,110,.04);
  border: 1px dashed rgba(12,74,110,.24);
  border-radius: 10px;
  overflow: hidden;
}
.bf-h6-standalone {
  margin: 12px 0 12px;
}
.bf-highway6-info summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--primary, #0B1E3F);
  list-style: none;
}
.bf-highway6-info summary::-webkit-details-marker { display: none; }
.bf-highway6-info summary small {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  margin-inline-start: 4px;
}
.bf-highway6-info summary::after {
  content: '+';
  margin-inline-start: auto;
  font-size: 18px;
  font-weight: 400;
  color: var(--text-muted, #6b7280);
  transition: transform .2s ease;
}
.bf-highway6-info[open] summary::after { transform: rotate(45deg); }
.bf-h6-summary-icon { font-size: 16px; line-height: 1; }
.bf-h6-body { padding: 0 14px 12px; }
.bf-h6-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--primary, #0B1E3F);
  margin-bottom: 6px;
}
.bf-highway6-info p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--primary-dark, #071633);
  margin: 0 0 8px;
}
.bf-highway6-info p strong { font-weight: 800; }
.bf-h6-rates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
@media (max-width: 440px) {
  .bf-h6-rates { grid-template-columns: 1fr; }
}
.bf-h6-rate-group {
  background: #fff;
  border-radius: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(0,0,0,.06);
}
.bf-h6-rate-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-gold, #F5C518);
  margin-bottom: 3px;
  letter-spacing: .03em;
}
.bf-h6-rate-row {
  font-size: 12px;
  color: var(--primary-dark, #071633);
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
}
.bf-h6-rate-row strong {
  color: var(--primary, #0B1E3F);
  font-weight: 900;
}
.bf-note-block summary strong { font-size: 14px; font-weight: 800; }
.bf-note-block summary small {
  display: block;
  font-weight: 600;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  line-height: 1.4;
  margin-top: 3px;
  flex-basis: 100%;
  order: 3;
}
.bf-note-block summary {
  flex-wrap: wrap;
}

/* Payment block wrapper */
.bf-payment-block {
  background: #fff;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

/* Trust strip — just above CTA */
.bf-trust-strip {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 8px;
  background: linear-gradient(180deg, rgba(245,197,24,.08), rgba(245,197,24,.02));
  border: 1px solid rgba(245,197,24,.3);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.bf-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.bf-trust-item strong {
  font-size: 15px;
  font-weight: 900;
  color: var(--primary, #0B1E3F);
  line-height: 1;
}
.bf-trust-item small {
  font-size: 10px;
  color: var(--text-muted, #6b7280);
  font-weight: 600;
}
.bf-trust-sep {
  width: 1px;
  height: 28px;
  background: rgba(0,0,0,.1);
  flex-shrink: 0;
}

/* Mobile bottom bar: price+button in one tight strip (no sticky price card) */
@media (max-width: 640px) {
  .bf-price-display { display: none !important; }  /* full card hidden in mobile */
  /* Breakdown shows as a tiny muted line above the sticky CTA */
  .bf-pd-breakdown {
    padding: 6px 14px 2px;
    margin: 0;
    text-align: center;
    background: transparent;
    font-size: 11px;
    color: var(--text-muted, #6b7280);
  }
  .overlay-nav-single {
    /* Sticky only on the long-form screen (screen 1). Screens 2/3/4
       have short content — sticking the button creates a "floating" feel
       the customer doesn't expect. There the button just sits at the end
       of the content, pushed to the bottom by margin-top:auto. */
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 24%);
    padding: 14px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    margin-inline: -16px;
    z-index: 10;
    transition: opacity .18s ease, transform .18s ease;
  }
  body[data-active-screen="1"] .overlay-nav-single {
    position: sticky;
    bottom: 0;
  }
  /* When an autocomplete dropdown is open, hide the sticky bar AND the
     terms-text line so the suggestions list isn't covered. They return
     automatically on close. */
  body.bf-sug-open .overlay-nav-single,
  body.bf-sug-open .overlay-terms {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
  }
  .overlay-next { position: relative; }
  .bf-mobile-price-chip[hidden] { display: none !important; }
  .overlay-terms {
    /* Customer reported: when the summary screen is long enough to scroll,
       the terms line was sticking to the bottom of the viewport ("floating
       with me as I scroll"). They want it anchored at the END of the
       content, not as a sticky overlay. Drop position:sticky → it falls
       back to default static flow, ending up below the action button. */
    position: static;
    background: transparent;
    margin: 0;
    transition: opacity .18s ease, transform .18s ease;
  }
}

/* Touch-action + tabular-nums for clean number alignment */
.bf-chip, .bf-row-edit, .overlay-next, .chip-btn,
.bf-cfm-edit-btn, .bf-row-done, .bf-payment-option,
.bf-immediate-btn, .bf-book-for-other, .bf-cancel-other {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bf-pd-amount, #bfTotal, .bf-price-val, .bf-confirm-total,
.bf-h6-rate-row strong, .bf-bd-item .tnum {
  font-variant-numeric: tabular-nums;
}

/* Focus-visible rings (a11y) */
.bf-login-chip:focus-visible,
.bf-chip:focus-visible,
.bf-row-edit:focus-visible,
.bf-cfm-edit-btn:focus-visible,
.bf-book-for-other:focus-visible,
.bf-cancel-other:focus-visible {
  outline: 2px solid var(--accent-gold, #F5C518);
  outline-offset: 2px;
}

/* Autofill background override — keeps the gold palette even when browser autofills */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px #fff inset;
  -webkit-text-fill-color: var(--primary, #0B1E3F);
  transition: background-color 5000s ease-in-out 0s;
}

/* Compact display-mode summary rows on mobile (less vertical space) */
@media (max-width: 640px) {
  .bf-summary-block { padding: 10px 14px; margin-bottom: 10px; }
  .bf-summary-head { margin-bottom: 6px; font-size: 12px; }
  .bf-row + .bf-row { margin-top: 6px; padding-top: 6px; }
  .bf-row-display { min-height: 28px; padding: 4px 0; }
  .bf-step { padding: 10px 14px; margin-bottom: 10px; }
  .bf-login-pill {
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 12px;
  }
  /* 273-5 (אישור-שי 17.8): "התחבר" = הקיצור הכי שימושי ללקוח-חוזר — 44px, בולט (היה 29px/12px). */
  .bf-login-chip { padding: 10px 18px; font-size: 15px; min-height: 44px; }
  .bf-login-pill { font-size: 14px; }
}

/* Progress dots: paired with a small text label */
.bf-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  margin-bottom: 4px;
}
.bf-progress-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
}

/* Price display (outside button) — was a duplicate "סה״כ" summary
   shown on desktop only (mobile already hid it). User feedback noted
   it just repeats the same total that's visible in the button below,
   wrapped in a yellow card that competes with the form's main CTA.
   Now hidden on every breakpoint. */
.bf-price-display { display: none !important; }
.bf-price-display[hidden] { display: none !important; }
.bf-pd-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.bf-pd-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary, #0B1E3F);
}
.bf-pd-amount {
  font-size: 24px;
  font-weight: 900;
  color: var(--primary-dark, #071633);
  letter-spacing: .01em;
}
.bf-pd-rate {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-dark, #071633);
  background: rgba(12,74,110,.08);
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-block;
}
.bf-pd-rate[hidden] { display: none !important; }
.bf-pd-breakdown {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-dark, #071633);
  opacity: .82;
  line-height: 1.4;
}
.bf-pd-breakdown[hidden] { display: none !important; }
.bf-pd-breakdown .bf-bd-item { white-space: nowrap; }
.bf-pd-breakdown .bf-bd-sep { margin: 0 4px; opacity: .5; }

/* Max-price subtle reassurance */
.bf-max-price-note {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  margin-top: 6px;
  text-align: center;
}

/* Continue button — simpler, just a label */
.overlay-next { padding: 14px 22px !important; font-size: 16px; font-weight: 900; }
#bfBtnPriceWrap[hidden] { display: none !important; }

/* ═════════ City autocomplete suggestions ═════════ */
.bf-city-wrap {
  position: relative;
  width: 100%;
  /* Create our own stacking context so the absolute-positioned suggestions
     dropdown reliably renders above siblings (homepage price-buttons etc).
     Without this, the "list behind the buttons" bug appears as soon as any
     sibling creates a stacking context. */
  z-index: 50;
}
/* Lift the wrap higher while the dropdown is open — :has() lets us watch
   the suggestions visibility directly, so we don't need every JS path
   that toggles `hidden` to also flip a class. */
.bf-city-wrap:has(.bf-city-suggestions:not([hidden])) { z-index: 1100; }
/* Leave room at the top when the browser auto-scrolls the input into view */
.bf-city-wrap input[role="combobox"] { scroll-margin-top: 24px; }
.bf-city-suggestions {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--border, rgba(0,0,0,.12));
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
  z-index: 1000;          /* beats the sticky CTA bar (z-index: 10) */
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  animation: bfCitySugIn .18s ease;
}
/* When there's no room below the input, render the dropdown ABOVE it */
.bf-city-suggestions.above {
  top: auto;
  bottom: calc(100% + 6px);
  animation: bfCitySugInUp .18s ease;
  box-shadow: 0 -10px 28px rgba(0,0,0,.16), 0 -2px 8px rgba(0,0,0,.08);
}
@keyframes bfCitySugInUp {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bfCitySugIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bf-city-suggestions[hidden] { display: none !important; }
.bf-city-sug {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: start;
  transition: background .12s ease, transform .08s ease;
  min-height: 48px;
}
.bf-city-sug + .bf-city-sug { margin-top: 2px; }
.bf-city-sug:hover,
.bf-city-sug:focus-visible {
  background: var(--bg-soft, #f8f6f0);
  outline: none;
}
.bf-city-sug:active { transform: scale(.98); }
.bf-city-sug-name {
  font-weight: 800;
  color: var(--primary, #0B1E3F);
  font-size: 15px;
}
.bf-city-sug-price {
  font-size: 12px;
  font-weight: 800;
  color: #047857;
  background: rgba(5,150,105,.12);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
/* Flight picker — flight code (start) + origin-city tag (end) */
.bf-flight-sug-code {
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}
.bf-flight-sug-city {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted, #64748B);
  white-space: nowrap;
}
.bf-flight-hint {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted, #64748B);
  line-height: 1.4;
}
.bf-flight-hint.matched { color: var(--success, #059669); }
.bf-flight-hint.unknown { color: #B45309; }
/* "המספר לא מופיע? רשמו ידנית" — footer escape hatch in the dropdown */
.bf-flight-manual {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 11px 14px;
  background: var(--bg-soft, #f8f6f0);
  border: none;
  border-top: 1px dashed var(--border, rgba(0,0,0,.14));
  border-radius: 0 0 8px 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary-light, #0369A1);
  cursor: pointer;
  transition: background .12s ease;
}
.bf-flight-manual:hover,
.bf-flight-manual:focus-visible {
  background: rgba(3,105,161,.08);
  outline: none;
}
/* Single result → bigger, bordered, clearly the choice */
.bf-city-suggestions.single-result { padding: 6px; }
.bf-city-suggestions.single-result .bf-city-sug {
  padding: 16px 18px;
  min-height: 60px;
  background: linear-gradient(180deg, rgba(245,197,24,.12), rgba(245,197,24,.04));
  border: 2px solid var(--accent-gold, #F5C518);
  border-radius: 12px;
  font-size: 16px;
}
.bf-city-suggestions.single-result .bf-city-sug-name::before {
  content: '✓ ';
  color: var(--success, #059669);
  font-weight: 900;
}
.bf-city-suggestions.single-result .bf-city-sug-price {
  background: var(--success, #059669);
  color: #fff;
  font-size: 13px;
}

/* Split street row: name grows, number is a small box spaced apart */
.bf-street-row {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 12px;
  align-items: end;
}
@media (max-width: 360px) {
  .bf-street-row { grid-template-columns: 1fr 80px; gap: 8px; }
}
.bf-input-num {
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.bf-field-street-num.needs-number .bf-label,
#bfRetStreetField.needs-number .bf-field-street-num .bf-label {
  color: var(--primary, #0B1E3F);
  font-weight: 900;
}
.bf-field-street-num.needs-number .bf-input-num,
#bfRetStreetField.needs-number .bf-field-street-num .bf-input-num {
  border-color: var(--accent-gold, #F5C518);
  background: rgba(245,197,24,.08);
  animation: bfNumberPulse 1s ease-in-out 2;
}

/* Number-hint in street label — highlights after street is picked, no number yet */
.bf-number-hint {
  transition: opacity, transform, color, background-color, border-color, box-shadow .2s ease;
  display: inline-block;
}
.bf-step.needs-number .bf-number-hint,
#bfRetStreetField.needs-number .bf-number-hint {
  color: var(--primary, #0B1E3F);
  font-weight: 900;
  background: rgba(245,197,24,.28);
  padding: 2px 8px;
  border-radius: 6px;
  animation: bfNumberPulse 1s ease-in-out 2;
}
@keyframes bfNumberPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* Empty state */
.bf-city-sug-empty {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--text-muted, #6b7280);
  text-align: center;
  font-weight: 600;
}
.bf-city-sug-hint {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-muted, #6b7280);
  text-align: center;
  font-weight: 600;
  font-style: italic;
  opacity: 0.85;
  animation: bfHintFade .25s ease;
}
@keyframes bfHintFade {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 0.85; transform: translateY(0); }
}

/* Mobile refinements */
@media (max-width: 640px) {
  .bf-city-sug { min-height: 52px; font-size: 16px; padding: 14px 16px; }
  .bf-city-suggestions.single-result .bf-city-sug { min-height: 64px; }
}

/* ═════════ Progressive booking flow ═════════ */
.bf-step {
  background: #fff;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 12px;
  transition: opacity .25s ease, transform .25s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
/* Single-screen: ALL steps are visible at once, so the old per-step gold
   halo made the whole form glow yellow ("נבלע בין הלבן והזהוב"). Calm it
   to a light sky-tinted card; reserve a subtle NAVY focus ring for the one
   field the user is actually editing — that's the real "where am I" cue
   (שי 2026-06-25). */
.bf-step:not(.bf-step-locked):has(> .bf-step-editor:not([hidden])):not(:focus-within) {
  border-color: #E2E8F0;
  background: #F8FAFC;
  box-shadow: 0 1px 3px rgba(12,74,110,.06);
}
.bf-step:not(.bf-step-locked):has(> .bf-step-editor:not([hidden])):focus-within {
  border-color: var(--primary-light, #0369A1);
  background: #F8FAFC;
  box-shadow: none;
}
.bf-step-locked {
  display: none !important;
}
.bf-step[data-step] { animation: bfStepFadeIn .3s ease; }
@keyframes bfStepFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bf-step-display {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
}
.bf-step-display[hidden] { display: none !important; }
.bf-step-editor[hidden] { display: none !important; }
.bf-step .bf-field { margin-bottom: 0; }
.bf-step .bf-field + .bf-field,
.bf-step .bf-field-row { margin-top: 12px; }
.bf-step .bf-field-row > .bf-field + .bf-field { margin-top: 0; }
.bf-field-row { align-items: start; }

/* Login pill at top — guest only */
.bf-login-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(12,74,110,.05), rgba(12,74,110,.02));
  border: 1px dashed rgba(12,74,110,.3);
  border-radius: 12px;
  margin-bottom: 14px;
  font-size: 13px;
}
.bf-login-pill[hidden],
.bf-contact-display[hidden],
.bf-contact-editor[hidden] { display: none !important; }
.bf-login-text { color: var(--primary, #0B1E3F); font-weight: 700; }
.bf-login-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px; /* 273-5 */
  padding: 10px 18px;
  background: var(--primary, #0B1E3F);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px; /* 273-5 */
  cursor: pointer;
  transition: opacity, transform, color, background-color, border-color, box-shadow .15s ease;
  white-space: nowrap;
}
.bf-login-chip:hover { background: var(--primary-dark, #071633); transform: translateX(-2px); }
.bf-login-chip svg { width: 12px; height: 12px; fill: currentColor; }

/* Contact block at the end */
.bf-contact-block {
  background: var(--bg-soft, #f8f6f0);
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.bf-contact-block .bf-summary-head { margin-bottom: 12px; }
.bf-contact-display .bf-row + .bf-row {
  border-top: 1px dashed rgba(0,0,0,.08);
  margin-top: 8px;
  padding-top: 8px;
}

/* Optional alt-contact details — collapsible "add a second phone the
   driver can call if you don't pick up". Replaces the older "מזמינים
   למישהו אחר" CTA, which conflated "fallback contact" with "book on
   someone else's behalf". */
.bf-alt-contact {
  margin-top: 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.bf-alt-contact[open] {
  border-color: rgba(245,197,24,.45);
  background: linear-gradient(180deg, rgba(245,197,24,.04), #fff);
}
.bf-alt-contact > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary, #0B1E3F);
  user-select: none;
}
.bf-alt-contact > summary::-webkit-details-marker { display: none; }
.bf-alt-contact > summary::after {
  content: '+';
  margin-inline-start: auto;
  font-size: 18px;
  font-weight: 800;
  color: var(--text-muted, #6b7280);
  transition: transform var(--t-fast, .15s) ease;
}
.bf-alt-contact[open] > summary::after { content: '−'; }
.bf-alt-contact-fields {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bf-alt-contact-note {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-muted, #6b7280);
  font-weight: 500;
  line-height: 1.4;
}

/* Book-for-other button (legacy — element removed from DOM but the
   CSS is left in case it's still referenced elsewhere; safe to delete
   later when nothing else relies on it). */
.bf-book-for-other {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  margin-top: 14px;
  background: #fff;
  border: 1.5px dashed var(--accent-gold, #F5C518);
  border-radius: 12px;
  cursor: pointer;
  text-align: start;
  transition: opacity, transform, color, background-color, border-color, box-shadow .15s ease;
}
.bf-book-for-other:hover {
  background: rgba(245,197,24,.08);
  border-style: solid;
}
.bf-bfo-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.bf-bfo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bf-bfo-text strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary, #0B1E3F);
}
.bf-bfo-text small {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  line-height: 1.3;
}

/* Cancel "book for other" */
.bf-cancel-other {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border, rgba(0,0,0,.15));
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
  cursor: pointer;
  transition: opacity, transform, color, background-color, border-color, box-shadow .15s ease;
}
.bf-cancel-other:hover {
  background: rgba(0,0,0,.04);
  color: var(--primary, #0B1E3F);
}
.bf-cancel-other[hidden] { display: none !important; }

.bf-label-optional {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #6b7280);
  margin-inline-start: 4px;
}

/* User-chip dropdown menu (logout etc.) */
.user-chip-wrap { position: relative; display: inline-block; }
.user-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 200px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
  padding: 6px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(-4px) scale(.98);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.user-chip-wrap.menu-open .user-menu {
  /* !important here is intentional — the open-state rule was being lost
     to some cascade interaction we couldn't pinpoint (transitions firing
     with no transitionstart event, inline opacity:1 !important still
     computing as 0). The menu visibility is critical UX so we just lock
     it in. */
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}
.user-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary, #0B1E3F);
  cursor: pointer;
  text-align: start;
  transition: background .12s ease;
}
.user-menu-item:hover { background: var(--bg-soft, #f8f6f0); }
.user-menu-item.danger { color: #c0392b; }
.user-menu-item.danger:hover { background: rgba(192,57,43,.08); }
.user-menu-sep {
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 4px 6px;
}

/* Full-page mode — overlay fills entire viewport */
body[data-booking-mode="fullpage"] .overlay.open {
  background: var(--surface);
  padding: 0;
}
body[data-booking-mode="fullpage"] .overlay-card {
  max-width: 680px;
  margin: 0 auto;
  min-height: 100vh;
  border-radius: 0;
  box-shadow: none;
  padding-top: 80px;
  padding-bottom: 40px;
}

/* Missing fields form */
.bf-missing-form {
  margin-bottom: 22px;
}
.bf-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.bf-field-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.bf-field-half, .bf-field-third { margin-bottom: 0; min-width: 0; }
@media (max-width: 480px) {
  /* Tighter gutter between pax and luggage on small phones so each column
     gets every available pixel — without this the 2-stepper luggage block
     can run past the right edge on 360–375px viewports. */
  .bf-field-row { gap: 8px; }
}

/* Luggage — single label, split into large + small */
.bf-luggage-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-width: 0;  /* let the columns shrink inside the half-row instead of overflowing */
}
.bf-luggage-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.bf-luggage-col .bf-luggage-stepper {
  /* Override .bf-stepper inline-flex so it shrinks to the column width
     (a grid column of 1fr inside .bf-luggage-split). Without this the
     stepper sticks out at its intrinsic width on narrow viewports. */
  display: flex;
  width: 100%;
  max-width: 100%;
  justify-content: space-between;
}
.bf-luggage-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 600;
}
.bf-input-small {
  padding: 10px 8px !important;
  font-size: 15px !important;
  min-height: 52px !important;
  text-align: center;
  width: 100%;
}
/* Even tighter on small screens */
@media (max-width: 480px) {
  .bf-input-small {
    padding: 10px 4px !important;
    font-size: 14px !important;
  }
  .bf-time-colon { font-size: 18px; padding: 0 1px; }
}

/* Time — split into hour + minute + immediate button */
.bf-time-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4px;
}
/* Visual order: minute on the right, colon middle, HOUR on the left.
   DOM order stays hour-first so Tab starts with hour and moves to minute. */
/* Hours on LEFT, minutes on RIGHT (RTL: column 3 = visual left, column 1 = visual right) */
.bf-time-split > select[id$="TimeHour"],
.bf-time-split > input[id$="TimeHour"]  { grid-column: 3; grid-row: 1; }
.bf-time-split > .bf-time-colon          { grid-column: 2; grid-row: 1; }
.bf-time-split > select[id$="TimeMin"],
.bf-time-split > input[id$="TimeMin"]   { grid-column: 1; grid-row: 1; }
.bf-time-colon {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary);
  padding: 0 2px;
}
.bf-immediate-btn {
  margin-top: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 1px dashed rgba(11,30,63,.22);
  color: var(--text-muted, #6b7280);
  font-size: 12px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.bf-immediate-btn:hover {
  background: rgba(245,197,24,.08);
  border-color: var(--accent-gold);
  color: var(--primary-dark);
}
.bf-immediate-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: var(--primary-dark);
  border-style: solid;
  border-color: var(--accent-gold);
  font-weight: 800;
}

/* Price preview — responsive (mobile: stack rows, no divider) */
@media (max-width: 480px) {
  .bf-price-preview {
    padding: 10px 12px;
  }
  .bf-price-preview { display: block !important; }
  .bf-price-row {
    display: flex;
    justify-content: center;
    padding: 4px 0;
  }
  .bf-price-row + .bf-price-row {
    border-inline-start: none !important;
    border-top: none !important;
  }
  .bf-price-row .bf-price-val { font-size: 18px; }
  .bf-price-single .bf-price-val { font-size: 22px; }
}

/* Screen 1 date+time row — stack vertically on small mobile so each
   field gets the full width (date readable, hour/min digits big).
   Applies BOTH to the outbound row (first .bf-field-row in screen 1) and
   to the return-trip row (inside #bfReturnBody) so they look identical. */
@media (max-width: 480px) {
  .bf-screen[data-screen="1"] .bf-field-row:first-of-type,
  #bfReturnBody .bf-field-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .bf-screen[data-screen="1"] .bf-field-row:first-of-type .bf-time-split,
  #bfReturnBody .bf-field-row .bf-time-split {
    gap: 8px;
    grid-template-columns: 1fr auto 1fr;
    max-width: 280px;  /* don't let hour/min stretch absurdly wide */
  }
  .bf-screen[data-screen="1"] .bf-field-row:first-of-type .bf-time-split .bf-input-small,
  #bfReturnBody .bf-field-row .bf-time-split .bf-input-small {
    padding: 12px 6px !important;
    font-size: 20px !important;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    min-width: 0;
  }
  .bf-screen[data-screen="1"] .bf-field-row:first-of-type .bf-time-colon,
  #bfReturnBody .bf-field-row .bf-time-colon {
    font-size: 22px;
    padding: 0 4px;
  }
}
/* Tablet (481-640px): side-by-side but with time getting slightly more */
@media (min-width: 481px) and (max-width: 640px) {
  .bf-screen[data-screen="1"] .bf-field-row:first-of-type,
  #bfReturnBody .bf-field-row {
    grid-template-columns: 1fr 1.3fr;
    gap: 8px;
  }
  .bf-screen[data-screen="1"] .bf-field-row:first-of-type .bf-time-split,
  #bfReturnBody .bf-field-row .bf-time-split {
    gap: 6px;
  }
  .bf-screen[data-screen="1"] .bf-field-row:first-of-type .bf-time-split .bf-input-small,
  #bfReturnBody .bf-field-row .bf-time-split .bf-input-small {
    padding: 12px 4px !important;
    font-size: 22px !important;
    font-variant-numeric: tabular-nums;
  }
}
/* (Removed: persistent price-strip CSS — single-panel form moved the
   price into the bf-price-preview card below the city.) */

/* Total-price chip embedded inside the המשך button (desktop + mobile) */
.bf-mobile-price-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: 10px;
  padding: 4px 12px;
  background: rgba(255,255,255,.20);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.bf-mobile-price-chip[hidden] { display: none !important; }

/* Custom time picker popup — opens below the hour/min input on focus.
   Desktop: user can also type to filter. Mobile: input is readonly so
   no keyboard, only the dropdown is interactive. */
.bf-field-half { position: relative; }
.bf-time-popup {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  inset-inline-end: 0;
  margin-top: 6px;
  max-height: 240px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border, rgba(11,30,63,0.15));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08);
  z-index: 1100;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 10px;
  animation: bfTimePopupIn .15s ease;
}
.bf-time-popup[hidden] { display: none; }
@keyframes bfTimePopupIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bf-time-opt {
  background: #fff;
  border: 1px solid transparent;
  padding: 12px 4px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--primary, #0B1E3F);
  cursor: pointer;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transition: background .12s ease, border-color .12s ease;
}
.bf-time-opt:hover, .bf-time-opt:focus-visible {
  background: rgba(245,197,24,0.12);
  border-color: rgba(245,197,24,0.45);
  outline: none;
}
.bf-time-opt.selected {
  background: var(--accent-gold, #F5C518);
  color: var(--primary-dark, #071633);
  border-color: var(--accent-gold);
}

/* ═════════════════════════════════════════════════════════════════════════
   ALTERNATE TIME PICKERS (toggleable from demo bar)
   - body[data-tp="current"]  → existing date + hour/min selects (default)
   - body[data-tp="native"]   → native <input type="datetime-local">
   - body[data-tp="wheel"]    → custom day-wheel + hour-wheel popup
   The default markup is always rendered; CSS just shows/hides the right one.
   ═════════════════════════════════════════════════════════════════════════ */
/* When NOT current, hide the existing date+time row.
   Applies to BOTH outbound (data-step="3" .bf-field-row) and return (any
   .bf-tp-current-row inside #bfReturnBody). */
body[data-tp="native"] .bf-step[data-step="3"] .bf-step-editor > .bf-field-row,
body[data-tp="native"] .bf-step[data-step="3"] .bf-step-editor > .bf-time-period,
body[data-tp="wheel"]  .bf-step[data-step="3"] .bf-step-editor > .bf-field-row,
body[data-tp="wheel"]  .bf-step[data-step="3"] .bf-step-editor > .bf-time-period,
body[data-tp="native"] #bfReturnBody .bf-tp-current-row,
body[data-tp="wheel"]  #bfReturnBody .bf-tp-current-row { display: none !important; }
/* Dedicated host for the Shabbat/Chag block message — sits BELOW the
   date/time field (works the same in current/native/wheel modes). Hidden
   by default, shown when populated by bfRefreshShabbatBlockerFor(). */
.bf-shabbat-host {
  margin-top: 12px;
  display: none;
}
.bf-shabbat-host.visible { display: block; }
/* And hide the native + wheel containers when on "current" */
body[data-tp="current"] .bf-tp-native,
body[data-tp="current"] .bf-tp-wheel-trigger { display: none !important; }
body[data-tp="native"]  .bf-tp-wheel-trigger { display: none !important; }
body[data-tp="wheel"]   .bf-tp-native        { display: none !important; }

/* ── Approach 1: Native datetime-local ── */
.bf-tp-native {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bf-tp-native input {
  padding: 14px 12px;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  border-radius: 12px;
  background: #fff;
  color: var(--primary, #0B1E3F);
  width: 100%;
  min-height: 52px;
  text-align: start;
  direction: ltr;
}
.bf-tp-native input:focus {
  outline: none;
  border-color: var(--accent-gold, #F5C518);
  box-shadow: 0 0 0 3px rgba(245,197,24,0.18);
}
.bf-tp-native .bf-tp-native-hint {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  font-weight: 600;
}

/* ── Approach 2: Wheel picker ── */
.bf-tp-wheel-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--border, rgba(0,0,0,.1));
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary, #0B1E3F);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
  text-align: start;
}
.bf-tp-wheel-trigger:hover { border-color: var(--accent-gold, #F5C518); }
.bf-tp-wheel-trigger:focus { outline: none; border-color: var(--accent-gold, #F5C518); box-shadow: 0 0 0 3px rgba(245,197,24,0.18); }
.bf-tp-wheel-trigger .bf-tp-wt-label {
  display: flex; align-items: center; gap: 8px;
}
.bf-tp-wheel-trigger .bf-tp-wt-icon { font-size: 18px; }
.bf-tp-wheel-trigger .bf-tp-wt-value {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}
/* Empty-state prompt: just a readable navy prompt (not muted grey that
   vanished, not a special highlight — date/time is a field like the others). */
.bf-tp-wheel-trigger.empty .bf-tp-wt-value {
  color: var(--primary, #0C4A6E);
  font-weight: 600;
}
/* In the "missing field" error state the prompt text must POP (otherwise the
   muted empty-state grey on the light-yellow highlight reads as not-an-error).
   Make it dark + bold so the date/time error is as obvious as the passengers
   field. */
.bf-tp-wheel-trigger.bf-field-missing .bf-tp-wt-value,
.bf-tp-wheel-trigger.bf-field-missing.empty .bf-tp-wt-value {
  color: #071633 !important;
  font-weight: 800;
}
.bf-tp-wheel-trigger .bf-tp-wt-chev { font-size: 12px; opacity: .5; }

/* Wheel popup overlay */
.bf-tp-wheel-popup {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,.45);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.bf-tp-wheel-popup.open { opacity: 1; pointer-events: auto; }
.bf-tp-wheel-popup .bf-tp-wp-card {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 18px 18px 0 0;
  /* תמיד ≥16px ריפוד תחתון + תוספת safe-area במכשירים עם notch. הקודם
     env(...,16px) התפרק ל-0 בכל מכשיר בלי safe-area (ה-fallback חל רק אם env
     לא נתמך), ואז כפתור "אישור" נצמד לתחתית המסך ונראה חתוך. */
  padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 32px rgba(0,0,0,.2);
  transform: translateY(100%);
  transition: transform .25s cubic-bezier(.2,.9,.3,1);
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* גובה הגלגלת כמשתנה — כך אפשר לכווץ אותו במסכים נמוכים בלי לשבור את מתמטיקת
     המרכוז (ריפוד = (גובה-44)/2). cap לגובה החלון כדי שכפתור "אישור" לא ייחתך. */
  --tpwh: 220px;
  max-height: 96vh;
  max-height: 96dvh;
}
.bf-tp-wheel-popup.open .bf-tp-wp-card { transform: translateY(0); }
/* מסכים נמוכים (נחיתת-מקלדת/לנדסקייפ) — לכווץ את הגלגלת כך שכל הכרטיס נכנס. */
@media (max-height: 640px) {
  .bf-tp-wheel-popup .bf-tp-wp-card { --tpwh: 132px; gap: 10px; padding-top: 12px; }
}
@media (max-height: 470px) {
  .bf-tp-wheel-popup .bf-tp-wp-card { --tpwh: 100px; gap: 8px; }
}
@media (min-width: 600px) {
  .bf-tp-wheel-popup { align-items: center; }
  .bf-tp-wheel-popup .bf-tp-wp-card { border-radius: 18px; max-width: 420px; }
}
.bf-tp-wp-header {
  display: flex; justify-content: space-between; align-items: center;
}
.bf-tp-wp-title { font-size: 15px; font-weight: 800; color: var(--primary, #0B1E3F); }
.bf-tp-wp-cancel {
  background: transparent; border: 0;
  font-size: 14px; font-weight: 700;
  color: var(--text-muted, #6b7280);
  cursor: pointer; padding: 6px 10px;
}
.bf-tp-wp-wheels {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  /* גובה אוטומטי — הטורים גבוהים יותר בדסקטופ כדי להכיל את רצועות החצים מעל/מתחת
     לגלגלת. הגלגלת עצמה נשארת בגובה ‎--tpwh, ולכן מתמטיקת-המרכוז לא משתנה. */
  grid-template-rows: auto;
  gap: 8px;
  position: relative;
  background: linear-gradient(180deg, #fff 0%, #f6f6f8 50%, #fff 100%);
  border-radius: 12px;
  overflow: hidden;
}
.bf-tp-wp-wheels::before,
.bf-tp-wp-wheels::after {
  content: ''; position: absolute; left: 0; right: 0;
  height: calc((var(--tpwh, 220px) - 44px) / 2); pointer-events: none; z-index: 2;
}
.bf-tp-wp-wheels::before {
  top: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.bf-tp-wp-wheels::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.bf-tp-wp-selection-line {
  position: absolute;
  left: 8px; right: 8px;
  top: 50%;
  height: 44px;
  margin-top: -22px;
  border-top: 1px solid rgba(245,197,24,.6);
  border-bottom: 1px solid rgba(245,197,24,.6);
  background: rgba(245,197,24,.06);
  border-radius: 8px;
  pointer-events: none;
  z-index: 1;
}
.bf-tp-wp-wheel {
  height: var(--tpwh, 220px);
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  text-align: center;
  /* ריפוד = (גובה-44)/2 כדי שהפריט הראשון/אחרון יוכל לשבת על קו-הבחירה המרכזי.
     נגזר מ-‎--tpwh כך שהמרכוז נשאר נכון גם כשהגלגלת מתכווצת במסך נמוך. */
  padding: calc((var(--tpwh, 220px) - 44px) / 2) 0;
  position: relative;
  z-index: 3;
}
.bf-tp-wp-wheel::-webkit-scrollbar { display: none; }
/* Keyboard focus ring — the wheel is now a role="spinbutton" reachable by Tab.
   Only show on keyboard focus (:focus-visible), not on touch/scroll. */
.bf-tp-wp-wheel:focus { outline: none; }
.bf-tp-wp-wheel:focus-visible {
  outline: 3px solid var(--accent, #F5C518);
  outline-offset: -3px;
  border-radius: 10px;
}
/* Column wrapper — flex stack: ▲ arrow · wheel · ▼ arrow. The arrows live in
   their OWN bands above/below the wheel (not absolutely on top of it), so they
   never hide the day/time values. */
.bf-tp-wp-col {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* Stepper arrows — דסקטופ בלבד (עכבר בלי גלגלת). יושבים מעל/מתחת לגלגלת בתוך
   רצועה משלהם, כך שאינם מסתירים את הערכים. במובייל מגלגלים באצבע → מוסתרים. */
.bf-tp-wp-arrow {
  display: none;
  flex: 0 0 auto;
  align-self: center;
  width: 44px; height: 26px;
  align-items: center; justify-content: center;
  background: var(--primary, #0B1E3F);
  border: 0;
  border-radius: 9px;
  color: #F5C518;
  font-size: 13px; line-height: 1;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 2px 6px rgba(11,30,63,.25);
  transition: background .12s ease, transform .08s ease;
}
.bf-tp-wp-arrow.up   { margin-bottom: 4px; }
.bf-tp-wp-arrow.down { margin-top: 4px; }
.bf-tp-wp-arrow:hover  { background: var(--primary-light, #0369A1); }
.bf-tp-wp-arrow:active { transform: scale(.9); }
/* דסקטופ בלבד (עכבר בלי גלגלת) — מוצגים מעל/מתחת לגלגלת, לא עליה. */
@media (hover: hover) and (pointer: fine) {
  .bf-tp-wp-arrow { display: flex; }
}
/* רמז חד-פעמי בפתיחה: הגלגלת עצמה "קופצת" קלות אנכית — משדר "אפשר לגלגל" גם במגע,
   בלי שום כפתור שמסתיר ערכים. עדין, פעמיים, ומכובד ל-prefers-reduced-motion. */
.bf-tp-wheel-popup.just-opened .bf-tp-wp-wheel { animation: bfTpScrollHint .55s ease 2; }
@keyframes bfTpScrollHint {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}
@media (prefers-reduced-motion: reduce) {
  .bf-tp-wheel-popup.just-opened .bf-tp-wp-wheel { animation: none; }
}
.bf-tp-wp-wheel-item {
  scroll-snap-align: center;
  height: 44px;
  line-height: 44px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-muted, #6b7280);
  font-variant-numeric: tabular-nums;
  transition: color .12s ease, transform .12s ease, background .12s ease;
  /* Never wrap — keeps the wheel rows aligned even if labels grow */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 6px;
  cursor: pointer;
  border-radius: 6px;
}
.bf-tp-wp-wheel-item:hover { background: rgba(245,197,24,.10); color: var(--primary, #0B1E3F); }
.bf-tp-wp-wheel-item:active { background: rgba(245,197,24,.18); }
.bf-tp-wp-wheel-item.selected {
  color: var(--primary-dark, #071633);
  font-weight: 900;
  font-size: 19px;
  transform: scale(1.05);
}
.bf-tp-wp-wheel-item.disabled {
  color: rgba(0,0,0,.18);
  pointer-events: none;
  cursor: not-allowed;
}
.bf-tp-wp-other-date {
  width: 100%;
  min-height: 42px;
  background: transparent;
  color: var(--primary, #0B1E3F);
  border: 1px dashed rgba(11,30,63,.2);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.bf-tp-wp-other-date:hover {
  background: rgba(245,197,24,.08);
  border-color: var(--accent-gold, #F5C518);
  border-style: solid;
}
.bf-tp-wp-confirm {
  width: 100%;
  min-height: 50px;
  background: linear-gradient(135deg, var(--accent-gold, #F5C518) 0%, #FFD748 100%);
  color: var(--primary-dark, #071633);
  border: 0;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .12s ease;
}
.bf-tp-wp-confirm:hover { transform: translateY(-1px); }
.bf-tp-wp-confirm:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* Demo-bar time-picker buttons share styling with palette buttons */
.demo-bar .time-picker-btn { /* uses .demo-bar button base */ }
.demo-bar .time-picker-btn.active { background: var(--accent-gold); color: var(--primary-dark); }

/* Time split — more breathing room with selects slightly taller */
.bf-time-split {
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
}
/* Desktop time-split — match height of the date input next to it,
   centered tabular digits, refined focus state. */
.bf-time-split .bf-input-small {
  padding: 12px 8px !important;
  font-size: 17px !important;
  min-height: 52px !important;
  font-weight: 800;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  text-align: center;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid var(--border, rgba(11,30,63,0.12));
  transition: border-color .15s ease, box-shadow .15s ease;
}
.bf-time-split .bf-input-small:hover {
  border-color: rgba(245,197,24,0.55);
}
.bf-time-split .bf-input-small:focus {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 4px rgba(245,197,24,0.18);
  outline: none;
}
.bf-time-colon {
  font-size: 18px;
  padding: 0 2px;
  font-weight: 900;
  color: var(--primary);
  align-self: center;
  line-height: 1;
}
@media (max-width: 480px) {
  .bf-time-split .bf-input-small {
    padding: 12px 6px !important;
    font-size: 16px !important;
    min-height: 50px !important;
  }
  .bf-time-colon { font-size: 16px; }
}
/* Price preview — matches homepage price-option style */
.bf-price-preview {
  margin-top: 12px;
  padding: 12px 16px;
  background: linear-gradient(180deg, var(--bg-sky), var(--surface));
  border: 2px solid var(--border);
  border-radius: 14px;
  text-align: center;
  position: relative;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity var(--t-med), max-height var(--t-med), margin-top var(--t-med), padding var(--t-med), border-color var(--t-med);
}
.bf-price-preview.show {
  opacity: 1;
  max-height: 140px;
}
.bf-price-preview.show {
  border-color: var(--accent-gold);
  box-shadow: 0 8px 22px rgba(245,197,24,.15);
}
.bf-price-preview::before {
  content: '';
  position: absolute;
  top: 0; inset-inline: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-gold), var(--primary-softer), var(--accent-gold));
  border-radius: 14px 14px 0 0;
}
.bf-price-row {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  font-weight: 800;
}
.bf-price-row + .bf-price-row {
  border-inline-start: 2px dashed rgba(245,197,24,.35);
}
.bf-price-row .bf-price-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}
.bf-price-row .bf-price-val {
  font-size: 22px;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.bf-price-row .bf-price-val .bf-price-currency {
  font-size: 13px;
  color: var(--accent);
  margin-inline-end: 2px;
}
.bf-price-row.night .bf-price-val { color: var(--primary-light); }
.bf-price-single {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
}
.bf-price-single .bf-price-label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 600;
}
.bf-price-single .bf-price-val {
  font-size: 28px;
  color: var(--primary);
  letter-spacing: -.02em;
}
.bf-price-single .bf-price-currency {
  font-size: 16px;
  color: var(--accent);
  margin-inline-end: 2px;
}
.bf-price-preview .bf-price-top {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
}
.bf-price-preview .bf-price-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.bf-price-preview .bf-price-item strong {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
}
/* (Removed: bf-price-card / bf-price-dual / bf-price-precise / bf-price-rate-tag —
    rolled back to the original bf-price-row + bf-price-single styles
    that the user preferred.) */
.bf-price-preview .bf-price-route {
  font-size: 12px;
  font-weight: 600;
  opacity: .75;
  letter-spacing: .3px;
}

/* Direction toggle buttons */
.bf-direction-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bf-direction-btn {
  padding: 16px 14px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--primary);
  cursor: pointer;
  transition: opacity, transform, color, background-color, border-color, box-shadow var(--t-fast);
}
.bf-direction-btn:hover {
  border-color: var(--accent-gold);
  background: rgba(245,197,24,.06);
}
.bf-direction-btn.active {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: var(--primary-dark);
  border-color: var(--accent-gold);
  box-shadow: 0 4px 14px rgba(245,197,24,.3);
}

/* Booking Flow Fields */
.bf-field { margin-bottom: 18px; }
.bf-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 8px;
}
.bf-label-icon { font-size: 16px; }
.bf-label-required { color: var(--accent); font-size: 13px; }
/* Vehicle / free-spots chip — sits inline inside the "👥 נוסעים" label
   so it doesn't add a row on mobile. Hidden when there's no gear
   constraint (default). Auto-shrinks the chip text on narrow viewports. */
.bf-pax-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
  padding: 3px 9px;
  background: linear-gradient(135deg, #0C4A6E, #082F49);
  color: #F5C518;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .01em;
  white-space: nowrap;
  line-height: 1.4;
}
.bf-pax-chip[hidden] { display: none; }
@media (max-width: 480px) {
  .bf-pax-chip { font-size: 10.5px; padding: 2px 7px; }
}
.bf-input {
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 12px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  font-family: inherit;
}
.bf-input:focus {
  outline: none;
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 4px rgba(245,197,24,.12);
}
.bf-input::placeholder { color: var(--text-muted); font-weight: 500; }
.bf-hint {
  margin-top: 6px;
  /* 13px (was 12) — these carry real instructions ("נשלח קוד קצר לאישור"),
     readable for the senior persona without crowding the layout. */
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}
.bf-hint-warning {
  color: var(--accent);
  font-weight: 700;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 8px;
}
/* Email typo-fix hint — sits below the email input as a tappable pill.
   Shown only when bfSuggestEmailFix detected a likely typo. Tap once
   to swap the value; tap × to dismiss. */
.bf-email-typo-fix {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(245,197,24,.18), rgba(245,197,24,.07));
  border: 1px solid rgba(245,197,24,.45);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary, #0B1E3F);
  text-align: start;
  cursor: pointer;
  transition: background var(--t-fast, .15s) ease, border-color var(--t-fast, .15s) ease;
  direction: ltr;
}
.bf-email-typo-fix:hover {
  background: rgba(245,197,24,.28);
  border-color: rgba(245,197,24,.7);
}
.bf-email-typo-fix[hidden] { display: none !important; }
.bf-email-typo-fix .bf-typo-icon { font-size: 14px; }
.bf-email-typo-fix .bf-typo-text { flex: 1; word-break: break-all; }
.bf-email-typo-fix .bf-typo-suggestion { color: #047857; }

/* Luggage hint as multi-line list */
.bf-luggage-hint {
  margin: 8px 0 0;
  padding: 10px 14px;
  list-style: none;
  background: var(--bg-soft);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
}
.bf-luggage-hint li {
  position: relative;
  padding-inline-start: 16px;
}
.bf-luggage-hint li::before {
  content: '•';
  position: absolute;
  inset-inline-start: 2px;
  color: var(--accent-gold);
  font-weight: 900;
}
.bf-luggage-hint li + li { margin-top: 2px; }
.bf-luggage-hint strong { color: var(--primary); font-weight: 800; }
.bf-luggage-hint .muted { color: var(--text-muted); font-weight: 500; }

/* Strollers — collapsible block under luggage */
.bf-strollers-block {
  margin-top: 10px;
  background: var(--bg-soft);
  border-radius: 10px;
  /* היררכיה שני-צירים (שי 2026-06-28): מסגרת אמיתית #E2E8F0 (במקום 8%-שקיפות
     שנבלעה) + צל-עומק עדין סימטרי (RTL-safe). כל בלוק-תוספת קורא עכשיו ככרטיס
     נפרד מהמיכל הלבן, לא נבלע. */
  border: 1.5px solid var(--border, #E2E8F0);
  box-shadow: 0 1px 3px rgba(11,30,63,.06);
  overflow: hidden;
}
.bf-strollers-block > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  user-select: none;
}
.bf-strollers-block > summary::-webkit-details-marker { display: none; }
.bf-strollers-block > summary::after {
  content: '▾';
  margin-inline-start: auto;
  font-size: 11px;
  color: var(--text-muted);
  transition: transform var(--t-fast);
}
.bf-strollers-block[open] > summary::after { transform: rotate(180deg); }
.bf-strollers-block > summary small {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-inline-start: 6px;
}
/* 225/226 #2 (שי): כל קטגוריית-ציוד = שורה נקייה עם אייקון + תת-תיאור-קבוע
   (כמו .ex במוקאפ) — אין ערימת-אקורדיונים סתומה, רואים מיד מה בפנים. */
.bf-ex-ic { font-size: 16px; line-height: 1; flex: 0 0 auto; }
.bf-ex-desc {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  margin-inline-start: 4px;
}
.bf-strollers-block[open] > summary .bf-ex-desc { opacity: .55; }
.bf-strollers-body {
  padding: 8px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border-soft, rgba(11,30,63,.06));
}
.bf-stroller-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}
.bf-stroller-name {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.bf-stroller-name small {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}
/* Outer "תוספות" wrapper that contains all extras blocks */
.bf-extras-wrap {
  margin-top: 14px;
  background: var(--bg-soft, #f7f4eb);
  border: 1px solid rgba(11,30,63,0.08);
  border-radius: 12px;
  overflow: hidden;
}
.bf-extras-wrap > summary.bf-extras-wrap-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-weight: 800;
  color: var(--primary, #0B1E3F);
}
.bf-extras-wrap > summary::-webkit-details-marker { display: none; }
.bf-extras-wrap > summary.bf-extras-wrap-summary::after {
  content: '▾';
  margin-inline-start: auto;
  font-size: 13px;
  color: var(--text-muted);
  transition: transform var(--t-fast);
}
.bf-extras-wrap[open] > summary.bf-extras-wrap-summary::after { transform: rotate(180deg); }
.bf-extras-wrap > summary.bf-extras-wrap-summary small {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  margin-inline-start: 8px;
}
/* 3-line symmetric category list inside the תוספות summary */
.bf-extras-wrap-cats {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: start;
  line-height: 1.3;
}
.bf-extras-wrap-cats span { display: block; }
.bf-extras-wrap-body {
  padding: 0 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border-top: 1px solid rgba(11,30,63,0.06);
}
.bf-extras-wrap-body .bf-strollers-block {
  margin-top: 10px;
}

/* Small explanatory note at the top of a block (e.g., "we provide the seats") */
.bf-block-note {
  font-size: 12px;
  color: var(--text);
  background: rgba(11,30,63,0.04);
  border-inline-start: 3px solid var(--accent-gold, #F5C518);
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 6px;
  line-height: 1.4;
}
.bf-block-note strong { color: var(--primary, #0B1E3F); }

.bf-stepper {
  display: inline-flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--border, rgba(11,30,63,.15));
  border-radius: 999px;
  overflow: hidden;
}
.bf-stepper-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--primary);
  cursor: pointer;
  transition: background var(--t-fast);
}
.bf-stepper-btn:hover:not(:disabled) { background: rgba(245,197,24,.12); }
.bf-stepper-btn:disabled { opacity: .35; cursor: not-allowed; }
.bf-stepper-val {
  min-width: 28px;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  font-size: 14px;
}

/* "+ disabled" hint — only shown when the customer hits the per-vehicle
   maximum on a safety seat (1 infant, 2 carseats, 2 boosters). Sits
   directly under the stepper as a small grey note so they understand
   why the + button stopped responding. */
.bf-stepper-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.bf-stepper-max-hint {
  font-size: 11px;
  color: var(--text-muted, #6b7280);
  font-weight: 600;
  white-space: nowrap;
  text-align: end;
  opacity: .85;
}
.bf-stepper-max-hint[hidden] { display: none !important; }

/* ── Luggage steppers — same look-and-feel as the other extras (strollers,
   safety, sport gear) so the form has one consistent stepper style. The
   middle value stays a real <select> so power-users can also tap to choose
   from a dropdown — the +/- buttons are the friendly default.             */
.bf-luggage-stepper .bf-stepper-select {
  border: 0;
  background: transparent;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--primary, #0B1E3F);
  text-align: center;
  font-size: 16px;
  min-width: 24px;
  /* Cap the closed-state width — the "+ עוד מזוודות" option is now shown
     always at the end of the list, but when the *closed* select shows a
     digit (the picked count), keep it tight so the two luggage columns
     fit inside the half-row on a 360–375px viewport. */
  max-width: 56px;
  padding: 0 2px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
/* Tighten the +/- buttons on small screens so the two luggage columns
   (each containing a 3-cell stepper) don't overflow the half-row. */
@media (max-width: 480px) {
  /* שי 2026-06-25: סף-מגע ≥44 + גופן אחיד 16 (היה 40/13). */
  .bf-luggage-stepper .bf-stepper-btn { width: 44px; height: 44px; font-size: 18px; }
  .bf-luggage-stepper .bf-stepper-select { font-size: 16px; min-width: 22px; }
}
.bf-luggage-stepper .bf-stepper-select:focus {
  background: rgba(245,197,24,.10);
  border-radius: 6px;
}

/* Upgrade modal (vehicle class change) */
.bf-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  animation: bfModalFade .2s ease-out;
}
.bf-modal.open { display: flex; }
@keyframes bfModalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.bf-modal-card {
  background: var(--surface);
  border-radius: 20px;
  padding: 32px 28px 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: bfModalSlide .3s ease-out;
  text-align: center;
  /* long content scrolls inside the body; title+actions stay on screen
     (Shay 7.7 bug: close button vanished behind long order history). */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
}
.bf-modal-title, .bf-modal-actions { flex-shrink: 0; }
@keyframes bfModalSlide {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.bf-modal-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 14px;
  line-height: 1.3;
}
.bf-modal-body {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 22px;
  text-align: start;
  /* the body is the scroll area, not the card (close-vanishes bug) */
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.bf-modal-body p {
  margin: 0 0 10px;
}
.bf-modal-body strong {
  color: var(--accent-gold);
  font-weight: 800;
}
.bf-modal-note {
  font-size: 12px !important;
  color: var(--text-muted);
  background: var(--bg-soft);
  padding: 10px 12px;
  border-radius: 8px;
  margin-top: 12px !important;
}
.bf-modal-cost {
  font-size: 14px !important;
  font-weight: 800;
  color: var(--primary-dark, #071633);
  background: linear-gradient(135deg, rgba(245,197,24,0.18), rgba(245,197,24,0.08));
  border: 1.5px solid rgba(245,197,24,0.55);
  padding: 10px 14px;
  border-radius: 10px;
  margin-top: 12px !important;
  text-align: center;
}
.bf-modal-cost strong {
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
  font-size: 16px;
  margin-inline-start: 6px;
}
.bf-modal-cost-breakdown {
  background: linear-gradient(135deg, rgba(245,197,24,0.15), rgba(245,197,24,0.06));
  border: 1.5px solid rgba(245,197,24,0.55);
  padding: 10px 14px;
  border-radius: 10px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bf-modal-cost-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
}
.bf-modal-cost-row strong {
  font-size: 15px;
  color: var(--primary-dark);
}
.bf-modal-cost-row.total {
  border-top: 1px dashed rgba(11,30,63,0.20);
  padding-top: 6px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 900;
}
.bf-modal-cost-row.total strong { font-size: 17px; }
.bf-modal-actions {
  display: flex;
  gap: 10px;
}
.bf-modal-cancel,
.bf-modal-confirm {
  flex: 1;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast);
}
.bf-modal-cancel {
  background: var(--bg-soft);
  color: var(--text);
  border: 2px solid var(--border);
}
.bf-modal-cancel:hover { background: var(--border); }
.bf-modal-confirm {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
  color: var(--primary-dark);
  border: none;
  box-shadow: 0 6px 18px rgba(245,197,24,.3);
}
.bf-modal-confirm:hover { transform: translateY(-2px); }

/* ── Profile modal: 4 editable fields ── */
.bf-profile-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 4px 0;
}
.bf-profile-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bf-profile-row-split {
  flex-direction: row;
  gap: 8px;
}
.bf-profile-half {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.bf-profile-half-num { flex: 0 0 80px; }
.bf-profile-lbl {
  font-size: 12.5px;
  color: var(--text-muted, #6b7280);
  font-weight: 700;
}
.bf-profile-row input,
.bf-profile-half input {
  width: 100%;
  min-width: 0;          /* let the input shrink inside its flex column */
  box-sizing: border-box; /* keep padding inside the box so it never overflows */
  padding: 11px 14px;
  border: 1.5px solid var(--border, #E2E8F0);
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #0F172A);
  background: var(--surface, #FFFFFF);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.bf-profile-row input:focus,
.bf-profile-half input:focus {
  outline: none;
  border-color: var(--primary, #0C4A6E);
  box-shadow: 0 0 0 3px rgba(12,74,110,.1);
}
.bf-profile-row input[readonly] {
  background: var(--bg-soft, #F8FAFC);
  color: var(--text-muted, #64748B);
  cursor: not-allowed;
}
.bf-profile-hint {
  font-size: 11.5px;
  color: var(--text-muted, #6b7280);
  margin-top: 2px;
}

/* ── Orders modal: list of past + active bookings ── */
.bf-orders-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 4px -4px 0;
  padding: 0 4px 4px;
}
/* עידן 21.7 — "ההזמנות שלי" נוח וברור, בלי פסי-גלילה מיותרים:
   1) בתוך המודל גולל מיכל אחד בלבד (גוף-המודל) — הרשימה הפנימית מפסיקה
      לגלול לבד, וכך נעלם פס-הגלילה הכפול שנראה רע במיוחד במובייל.
   2) פס-הגלילה שנשאר: דק, מעוגל ושקוף-למחצה — קיים כשצריך, לא צועק.
   3) גלילת-מומנטום ב-iOS + overscroll-contain כדי שהגלילה לא "תברח"
      לעמוד שמאחורי המודל. */
.bf-modal-body .bf-orders-list {
  max-height: none;
  overflow: visible;
}
.bf-modal-body {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, .35) transparent;
}
.bf-modal-body::-webkit-scrollbar { width: 5px; }
.bf-modal-body::-webkit-scrollbar-track { background: transparent; }
.bf-modal-body::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, .35);
  border-radius: 999px;
}
.bf-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .55); }
/* כרטיס-הזמנה: הפרדה רכה יותר בין שורות — קריא בגלילה מהירה */
.bf-orders-row {
  box-shadow: 0 1px 4px rgba(12, 74, 110, .05);
}
/* עידן 21.7 — "כל הבמה לטבלת-ההזמנות":
   במובייל המודל נמתח כמעט-לרוחב-המסך והריפוד מצטמצם — הכרטיסים רחבים,
   שוליים מינימליים. יישור אחיד לכל סוגי-הכרטיסים (בודד/הלוך-חזור). */
@media (max-width: 640px) {
  /* גם עטיפת-המודל (padding:20px) כבלה את הרוחב — מצטמצמת ל-6px. */
  .bf-modal { padding: 6px; }
  .bf-modal-card {
    max-width: none;
    width: 100%;
    padding: 20px 10px 14px;
  }
  .bf-orders-row { padding: 12px 12px; }
}
.bf-orders-row,
.bf-orders-leg-wrap,
.bf-orders-row-round {
  direction: rtl;
  text-align: start;
}
.bf-orders-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface, #FFFFFF);
  border: 1.5px solid var(--border, #E2E8F0);
  border-radius: 12px;
  cursor: pointer;
  text-align: start;
  font: inherit;
  transition: opacity, transform, color, background-color, border-color, box-shadow var(--t-fast);
}
.bf-orders-row:hover {
  background: var(--bg-soft, #F8FAFC);
  border-color: var(--primary, #0C4A6E);
  transform: translateY(-1px);
}
.bf-orders-row-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.bf-orders-row-route {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--primary, #0C4A6E);
  letter-spacing: -.01em;
  /* שי 2026-06-21: היעד נחתך ל"נת..." — מציגים מלא (גלישה לשורה, לא ellipsis) */
  white-space: normal;
  overflow-wrap: anywhere;
}
.bf-orders-row-meta {
  font-size: 12px;
  color: var(--text-muted, #64748B);
  font-weight: 600;
}
.bf-orders-row-ordernum {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--primary-light, #0369A1);
  letter-spacing: .01em;
  margin-top: 2px;
}
/* Round-trip "trip chapter" — header + two SEPARATELY-editable leg buttons */
.bf-orders-row-round {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  cursor: default;                 /* the container isn't clickable; the legs are */
}
.bf-orders-row-round:hover {
  background: var(--surface, #FFFFFF);
  border-color: var(--border, #E2E8F0);
  transform: none;
}
.bf-orders-trip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bf-orders-row-trip {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--accent, #B7800A);
  letter-spacing: .2px;
}
.bf-orders-row-single { padding: 0; border: 0; background: transparent; }
.bf-orders-row-single:hover { transform: none; }
.bf-orders-leg-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  background: var(--bg-soft, #F8FAFC);
  border: 1.5px solid var(--border, #E2E8F0);
  border-radius: 10px;
  cursor: pointer;
  text-align: start;
  font: inherit;
  transition: opacity, transform, color, background-color, border-color, box-shadow var(--t-fast);
}
.bf-orders-row-single .bf-orders-leg-btn { flex: 1; }
.bf-orders-leg-btn:hover {
  background: #fff;
  border-color: var(--primary, #0C4A6E);
  transform: translateY(-1px);
}
.bf-orders-leg-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.bf-orders-leg-edit {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary-light, #0369A1);
  white-space: nowrap;
  flex-shrink: 0;
}
.bf-orders-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.bf-orders-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.bf-orders-badge-active   { background: #D1FAE5; color: #065F46; }
.bf-orders-badge-cancelled{ background: #FEE2E2; color: #991B1B; }
.bf-orders-row-arrow {
  font-size: 16px;
  color: var(--text-muted, #94A3B8);
  font-weight: 900;
}
.bf-orders-empty {
  text-align: center;
  padding: 20px 8px;
  color: var(--text-muted, #6b7280);
  line-height: 1.6;
}
.bf-orders-empty small {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
}

/* ── History section — collapsed by default, read-only, with "הזמן שוב" ── */
.bf-orders-history {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1.5px dashed var(--border, #E2E8F0);
}
.bf-orders-history-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-soft, #F8FAFC);
  border: 1.5px solid var(--border, #E2E8F0);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-muted, #64748B);
  transition: opacity, transform, color, background-color, border-color, box-shadow var(--t-fast);
}
.bf-orders-history-toggle:hover { background: #fff; border-color: var(--primary, #0C4A6E); color: var(--primary, #0C4A6E); }
.bf-orders-history-chev { font-size: 13px; transition: transform var(--t-fast); }
.bf-orders-history.open .bf-orders-history-chev { transform: rotate(180deg); }
.bf-orders-history-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
  margin-top: 10px;
  padding: 0 2px 2px;
}
.bf-orders-history-body[hidden] { display: none; }
/* Past trips read dimmer than active ones — they're reference, not actionable. */
.bf-orders-row-hist { opacity: .92; cursor: default; }
.bf-orders-row-hist:hover { transform: none; background: var(--surface, #FFFFFF); border-color: var(--border, #E2E8F0); }
.bf-orders-row-single.bf-orders-row-hist { border: 0; background: transparent; }
.bf-orders-hist-leg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  background: var(--bg-soft, #F8FAFC);
  border: 1.5px solid var(--border, #E2E8F0);
  border-radius: 10px;
}
.bf-orders-hist-leg .bf-orders-row-route { color: var(--text, #0F172A); }
/* "🔁 הזמן שוב" — משני וקטן (שי 2026-06-21): "הזמנות שלי" נועד בעיקר להיזכר,
   לא להזמין שוב — אז כפתור מתאר עדין, לא כפתור כהה בולט. */
.bf-orders-rebook-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  background: #fff;
  color: var(--primary, #0C4A6E);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.bf-orders-rebook-btn:hover { background: #F1F5F9; border-color: var(--primary-light, #0369A1); }
.bf-orders-rebook-btn:active { background: #E2E8F0; }
/* כפתור-השחזור (במבוטלת) — חיובי/ירוק, להבדיל מ"ערוך" */
.bf-orders-leg-btn-cancelled .bf-orders-leg-edit { color: #059669; }

/* ── Notifications panel (🔔 bell + 📬 הודעות) ── */
.bf-notif-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
  margin: 4px -4px 0;
  padding: 0 4px 4px;
}
.bf-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 13px;
  background: var(--surface, #FFFFFF);
  border: 1.5px solid var(--border, #E2E8F0);
  border-radius: 12px;
}
/* Unread → soft tinted card + a gold left rail (RTL: right edge). */
.bf-notif-item.unread {
  background: var(--bg-sky, #F0F9FF);
  border-color: #BAE6FD;
  border-inline-start: 4px solid var(--accent, #F59E0B);
}
.bf-notif-icon { font-size: 20px; line-height: 1.2; flex-shrink: 0; }
.bf-notif-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.bf-notif-title { font-size: 14px; font-weight: 800; color: var(--primary, #0C4A6E); }
.bf-notif-body  { font-size: 12.5px; color: var(--text, #0F172A); line-height: 1.45; }
.bf-notif-time  { font-size: 11px; color: var(--text-muted, #94A3B8); font-weight: 600; margin-top: 2px; }
.bf-notif-empty {
  text-align: center;
  padding: 22px 8px;
  color: var(--text-muted, #6b7280);
  line-height: 1.6;
}
.bf-notif-empty small { display: block; margin-top: 8px; font-size: 12.5px; }

/* ── Dispatcher: attribution banner + customer picker ── */
.user-menu-item.user-menu-admin { color: var(--primary-light, #0369A1); font-weight: 800; }
.bf-dispatch-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(3,105,161,.10), rgba(3,105,161,.04));
  border: 1.5px solid var(--primary-light, #0369A1);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--primary, #0C4A6E);
}
.bf-dispatch-banner[hidden] { display: none !important; }
.bf-dispatch-banner-icon { font-size: 18px; flex-shrink: 0; }
.bf-dispatch-banner-text strong { font-weight: 800; }
.bf-disp-pick { display: flex; flex-direction: column; gap: 10px; }
.bf-disp-search, .bf-disp-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1.5px solid var(--border, #E2E8F0);
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
}
.bf-disp-search:focus, .bf-disp-input:focus { outline: none; border-color: var(--primary, #0C4A6E); }
.bf-disp-results { display: flex; flex-direction: column; gap: 6px; max-height: 34vh; overflow-y: auto; }
.bf-disp-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  background: var(--bg-soft, #F8FAFC);
  border: 1.5px solid var(--border, #E2E8F0);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  text-align: start;
  transition: opacity, transform, color, background-color, border-color, box-shadow var(--t-fast);
}
.bf-disp-result:hover { background: #fff; border-color: var(--primary, #0C4A6E); transform: translateY(-1px); }
.bf-disp-result-name { font-weight: 800; color: var(--primary, #0C4A6E); }
.bf-disp-result-phone { font-size: 13px; color: var(--text-muted, #64748B); font-weight: 700; }
.bf-disp-empty { text-align: center; padding: 12px 8px; color: var(--text-muted, #6b7280); font-size: 13px; }
.bf-disp-new {
  margin-top: 4px;
  padding: 12px;
  border: 1.5px dashed var(--border, #E2E8F0);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bf-disp-new-title { font-size: 13px; font-weight: 800; color: var(--text-muted, #64748B); }
.bf-disp-start {
  width: 100%;
  padding: 12px;
  background: var(--primary, #0C4A6E);
  color: #fff;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.bf-disp-start:hover { background: var(--primary-dark, #082F49); transform: translateY(-1px); }
.bf-success-dispatch {
  margin: 6px auto 0;
  max-width: 340px;
  padding: 9px 14px;
  background: var(--bg-sky, #F0F9FF);
  border: 1.5px solid #BAE6FD;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--primary, #0C4A6E);
  text-align: center;
}
.bf-success-dispatch[hidden] { display: none !important; }

/* Optional chips */
.bf-optional {
  margin: 22px 0 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
}
.bf-optional-title {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: .3px;
}
.bf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bf-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 16px;
  background: var(--bg-soft);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity, transform, color, background-color, border-color, box-shadow var(--t-fast);
}
.bf-chip:hover {
  background: var(--surface);
  border-color: var(--accent-gold);
  color: var(--accent-gold);
}
.bf-chip.active {
  background: var(--primary);
  color: var(--accent-gold);
  border-color: var(--primary);
}
.bf-chip-plus {
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.bf-chip.active .bf-chip-plus { transform: rotate(45deg); transition: transform var(--t-fast); }

/* Extra fields that expand */
.bf-extra {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bf-extra:empty { display: none; }
.bf-extra-field {
  animation: bfExtraSlide .25s ease-out both;
}
@keyframes bfExtraSlide {
  from { opacity: 0; transform: translateY(-4px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0); max-height: 200px; }
}
.bf-extra-field .bf-label { font-size: 12px; margin-bottom: 4px; }
.bf-extra-field .bf-input { min-height: 44px; padding: 10px 14px; font-size: 14px; }
.bf-extra textarea.bf-input {
  resize: vertical;
  min-height: 64px;
  line-height: 1.5;
}

/* Login shortcut */
.bf-login-link {
  margin-top: 22px;
  padding: 14px 18px;
  background: rgba(12,74,110,.04);
  border: 1px dashed var(--primary-softer);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.bf-login-text {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 600;
}
.bf-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--primary);
  color: var(--accent-gold);
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast);
}
.bf-login-btn:hover {
  background: var(--primary-dark);
  transform: translateX(-2px);
}
.bf-login-btn svg { width: 14px; height: 14px; fill: currentColor; }

/* Responsive */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .about-inner { grid-template-columns: 1fr; gap: 40px; }
  .about-visual { height: 320px; }
}

@media (max-width: 780px) {
  :root { --nav-h: 72px; }
  .container { padding: 0 16px; }
  .section { padding: 70px 0; }

  .demo-bar { font-size: 10px; padding: 4px 10px; gap: 4px; }
  .demo-bar button { padding: 3px 8px; font-size: 9px; min-height: 22px; }

  .nav-inner { height: var(--nav-h); gap: 10px; }
  .logo-img { width: 42px; height: 42px; }
  .logo-link { gap: 8px; }
  .logo-text { font-size: 14px; line-height: 1.05; }
  .logo-text small { display: none; }
  .nav-right { gap: 8px; }
  .chip-btn { height: 36px; padding: 0 12px; font-size: 12px; }
  .chip-btn svg { width: 13px; height: 13px; }
  .user-chip .label { display: none; }
  .user-chip::after { content: 'התחברות'; font-size: 11px; font-weight: 700; }
  .user-chip.logged::after { content: none; }
  .user-chip.logged .label {
    display: inline-block;
    white-space: nowrap;
    font-size: 11px;
  }
  .user-chip.logged { padding: 0 10px; gap: 6px; }
  .user-chip.logged svg { width: 12px; height: 12px; }

  .hero { padding: 0 0 28px; }
  .hero-banner { height: 160px; }
  .banner-logo { width: 120px; }
  .hero-content { padding-top: 14px; }
  .hero-title { margin-bottom: 4px; padding: 0 4px; font-size: 22px; }
  .hero-tagline { margin-bottom: 10px; font-size: 13px; }

  .q-card-title { font-size: 18px; margin-bottom: 10px; }
  .q-row.quad { grid-template-columns: 1fr 1fr; gap: 8px; }
  .q-row.triple { grid-template-columns: 1fr 1fr 1fr; }
  /* Stack from/to vertically on mobile too — single-column matches the
     desktop layout updated 2026-05-13 (avoids cropped "כתובת איסוף" labels). */
  .q-row.from-to { grid-template-columns: 1fr; }
  .q-from-to-big .q-input { font-size: 13px; padding-inline: 10px; }
  .swap-btn { width: 38px; height: 38px; font-size: 17px; justify-self: center; }

  .bsd { top: calc(var(--nav-h) + 4px); right: 8px; font-size: 9px; }
  .shabbat-badge {
    top: calc(var(--nav-h) + 20px);
    gap: 5px;
    font-size: 12px;
    padding: 7px 12px 7px 10px;
  }
  .shabbat-badge svg { width: 13px; height: 13px; }

  .a11y-btn {
    top: calc(var(--nav-h) + 62px);
    inset-inline-end: 12px;
    width: 30px;
    height: 30px;
  }
  .a11y-btn svg { width: 14px; height: 14px; }

  .app-promo { padding: 20px 0; }
  .app-promo-inner { justify-content: center; gap: 18px; }
  .app-promo-text { width: 100%; justify-content: center; text-align: center; }
  .app-promo-text strong { font-size: 15px; }
  .app-promo-text small { font-size: 12px; }
  .app-badges { gap: 10px; }
  .app-badge { padding: 8px 14px 8px 12px; min-height: 48px; }
  .app-badge svg { width: 22px; height: 22px; }
  .app-badge-text small { font-size: 12px; }
  .app-badge-text strong { font-size: 14px; }

  .cookie-bar { bottom: 12px; padding: 14px 16px; width: calc(100% - 16px); }
  .cookie-content { flex-wrap: wrap; gap: 12px; }
  .cookie-icon { font-size: 26px; }
  .cookie-text strong { font-size: 14px; }
  .cookie-text p { font-size: 12px; }
  .cookie-actions { width: 100%; justify-content: space-between; }
  .cookie-btn { flex: 1; padding: 10px 14px; font-size: 13px; }

  .quote-card { border-radius: var(--radius-xl); }
  .q-tabs { padding: 14px 14px 0; gap: 3px; }
  /* 273-3 (קלוד-של-שי, אישור-שי 17.8): טאבי-הסוג 11px→14px במובייל (יש מקום — 343px לשלושה). */
  .q-tab { font-size: 14px; padding: 8px 6px; min-height: 44px; border-radius: 10px 10px 0 0; }
  .q-tab svg { width: 16px; height: 16px; }
  .q-tab.locked { font-size: 13px; }
  .direct-btn { font-size: 15px; padding: 18px 18px; min-height: 60px; }
  .direct-btn svg { width: 22px; height: 22px; }
  .q-body { padding: 14px 14px 16px; }
  .q-row.city-pax { grid-template-columns: 1fr 104px; gap: 10px; }
  .q-row.date-time { gap: 10px; }
  .q-input, .q-select { min-height: 42px; font-size: 14px; padding: 10px 12px; }
  .q-select { padding-inline-start: 30px; background-position: left 11px center; }

  .price-pair { gap: 10px; }
  .price-option { padding: 18px 12px 16px; }
  .option-label { font-size: 12px; padding: 6px 12px; margin-bottom: 10px; }
  .price-row .val { font-size: 22px; }
  .price-row .val .currency { font-size: 13px; }
  .price-row .time { font-size: 12px; }
  .option-meta { font-size: 12px; }

  .direct-booking { margin-top: 26px; }
  .direct-buttons { grid-template-columns: 1fr; gap: 10px; }
  .direct-btn { font-size: 14px; padding: 10px 14px; min-height: 50px; }
  .direct-label { font-size: 12px; margin-bottom: 12px; }

  .trust-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 12px;
    justify-content: initial;
  }
  .trust-item { gap: 10px; justify-content: flex-start; }
  .trust-item:first-child {
    grid-column: 1 / -1;
    justify-content: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(245,158,11,.06));
    border: 1px solid rgba(245,158,11,.35);
    border-radius: 14px;
    margin-bottom: 4px;
  }
  .trust-item:first-child .trust-icon {
    background: linear-gradient(135deg, #F5C518, #D4950A);
    width: 46px; height: 46px;
  }
  .trust-item:first-child .trust-icon svg { fill: #fff; width: 22px; height: 22px; }
  .trust-item:first-child .trust-text strong { font-size: 17px; }
  .trust-item:first-child .trust-text small { font-size: 12px; font-weight: 600; }
  .trust-icon { width: 42px; height: 42px; }
  .trust-icon svg { width: 20px; height: 20px; }
  .trust-text strong { font-size: 14px; }
  .trust-text small { font-size: 12px; }

  .steps, .pricing-grid { grid-template-columns: 1fr; }
  .review-card { flex: 0 0 300px; padding: 24px; min-height: 180px; }
  .rc-text { font-size: 14px; }
  .rc-avatar { width: 42px; height: 42px; font-size: 17px; }
  .google-rating-bar { padding: 16px 20px; gap: 12px; border-radius: 20px; }
  .google-score { font-size: 28px; }
  .google-stars { font-size: 20px; }
  .google-count { font-size: 13px; }
  .google-link { font-size: 12px; padding: 5px 12px; }
  .google-float { display: none; }
  .direct-btn { grid-template-columns: 40px 1fr 40px; min-height: 48px; padding: 10px 12px; }
  .direct-btn-emoji { width: 44px; height: 44px; }
  .direct-btn-emoji video { width: 44px; height: 44px; }
  .direct-btn-label { font-size: 15px; }
  .direct-btn-sub { font-size: 12px; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .floating { bottom: 20px; inset-inline-start: 16px; }
  .floating { bottom: 12px; inset-inline-start: 10px; gap: 6px; flex-direction: row; align-items: center; }
  .float-wa {
    padding: 8px 14px 8px 10px;
    font-size: 12px;
    gap: 6px;
    border-radius: 999px;
    background: rgba(37,211,102,.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(37,211,102,.2);
    animation: none;
  }
  .float-wa:active, .float-wa:hover {
    background: var(--whatsapp);
    box-shadow: 0 10px 24px rgba(37,211,102,.45);
  }
  .float-wa svg { width: 20px; height: 20px; }
  .float-phone { width: 30px; height: 30px; background: rgba(100,116,139,.22); }
  .float-phone svg { width: 14px; height: 14px; }

  .overlay-card { padding: 28px 22px; }
  .overlay-title { font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Desktop Hero V2 — compact variant (toggleable via demo bar).
   Activates only when body[data-hero="v2"] AND viewport ≥ 769px.
   Goal: pull the booking widget above the fold by trimming hero, the
   "מחירון" headline, and the direct-booking buttons' visual weight.
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* 1. Banner: full-width "cover" (image spans the screen).
        Plane sits on the LEFT side of the image — anchor the image
        to its left edge so the plane stays visible; the in-image taxi
        logo on the right gets cropped (no problem — we have a separate
        overlay banner-logo on top anyway). */
  body[data-hero="v2"] .hero-banner { height: 280px; }
  body[data-hero="v2"] .banner-bg { object-position: 0% 50%; }
  body[data-hero="v2"] .banner-logo { width: 195px; }
  body[data-hero="v2"] .banner-curve { height: 95px; }
  body[data-hero="v2"] .hero { padding-bottom: 40px; }
  body[data-hero="v2"] .hero-content { padding-top: 12px; }

  /* 2. Title + tagline — slightly smaller and tighter (the size that
        felt right in earlier iteration). Title still readable, tagline
        smaller, stars compact. */
  body[data-hero="v2"] .hero-title { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 6px; }
  body[data-hero="v2"] .hero-tagline { font-size: 14px; margin-bottom: 6px; }
  body[data-hero="v2"] .hero-stars { font-size: 14px; margin-bottom: 12px; }

  /* 3. "מחירון 2026" — medium ribbon (eye-catching but not 36px-loud).
        Gold gradient background, primary text, slight glow halo. */
  body[data-hero="v2"] .q-card-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary);
    margin: 0 auto 16px;
    padding: 10px 24px;
    background: linear-gradient(135deg, rgba(245,197,24,0.22), rgba(245,197,24,0.10));
    border: 1.5px solid rgba(245,197,24,0.55);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
    box-shadow: 0 4px 14px rgba(245,197,24,0.18);
  }
  body[data-hero="v2"] .q-card-title .q-icon { width: 20px; height: 20px; margin-inline-end: 0; }
  body[data-hero="v2"] .q-card-title .q-year-num { font-size: 1.05em; }
  body[data-hero="v2"] .q-card-title .q-year-num::after { display: none; }
  body[data-hero="v2"] .q-body { text-align: center; }
  body[data-hero="v2"] .q-body > *:not(.q-card-title) { text-align: initial; }

  /* 4. Direct-booking buttons — "polished topaz" treatment.
        Layered gradients: a radial highlight (top-left) over a rich
        diagonal gold gradient. The radial creates the "stone catching
        light" effect; the linear gives depth. Thin dark-gold rim acts
        like a jeweler's setting. Soft warm halo, deep navy text. */
  body[data-hero="v2"] .direct-booking { margin-top: 18px; position: relative; }
  body[data-hero="v2"] .direct-btn {
    background:
      radial-gradient(ellipse 70% 90% at 22% 18%, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0) 55%),
      linear-gradient(135deg, #FAD45D 0%, #F5C518 35%, #E2A800 72%, #CFA00C 100%) !important;
    border: 1px solid #B8860B;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.55),
      inset 0 -2px 3px rgba(184,134,11,0.35),
      0 6px 20px rgba(245,197,24,0.32),
      0 1px 3px rgba(0,0,0,0.10);
    color: var(--primary-dark);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  }
  body[data-hero="v2"] .direct-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.04) saturate(1.05);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.65),
      inset 0 -2px 3px rgba(184,134,11,0.40),
      0 12px 28px rgba(245,197,24,0.42),
      0 0 0 1px rgba(184,134,11,0.20),
      0 2px 6px rgba(0,0,0,0.12);
  }
  body[data-hero="v2"] .direct-btn:active {
    transform: translateY(0);
    box-shadow:
      inset 0 2px 4px rgba(184,134,11,0.30),
      0 2px 8px rgba(245,197,24,0.25);
  }
  body[data-hero="v2"] .direct-btn { position: relative !important; overflow: hidden !important; }
  body[data-hero="v2"] .direct-btn::before { display: none !important; }
  /* Slow shimmer — a thin diagonal light streak that sweeps across
     the button every ~6s with a long pause; mimics light catching a
     polished gem. Uses transform: translateX (GPU-accelerated, always
     animates reliably) instead of `left:` percentages. */
  body[data-hero="v2"] .direct-btn::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 30% !important;
    height: 100% !important;
    border-radius: 0 !important;
    background: linear-gradient(
      115deg,
      transparent 0%,
      rgba(255,255,255,0.42) 50%,
      transparent 100%) !important;
    pointer-events: none;
    animation: bfV2Shimmer 4.5s linear infinite !important;
    z-index: 2;
    will-change: transform;
  }
  /* 5. Hide the redundant "↑ בחרו עיר ותקבלו מחיר מיידי" hint —
        the value prop lives in the input placeholder now. */
  body[data-hero="v2"] #cityHint { display: none; }
}

/* Keyframes must live OUTSIDE @media so they're available at all sizes
   (both desktop v2 and mobile v2 use the same shimmer animation). */
@keyframes bfV2Shimmer {
  0%   { transform: translateX(-200%) skewX(-20deg); }
  30%  { transform: translateX(450%)  skewX(-20deg); }
  100% { transform: translateX(450%)  skewX(-20deg); }
}

/* ═══════════════════════════════════════════════════════════════════
   Mobile Hero V2 — same toggle (body[data-hero="v2"]), tuned values
   for ≤ 768px. Goal: same compact hero + ribbon + premium buttons,
   adapted to mobile constraints.
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1. Banner: 160 → 130px, slightly bigger logo than first attempt */
  body[data-hero="v2"] .hero-banner { height: 130px; }
  body[data-hero="v2"] .banner-bg { object-position: 0% 50%; }
  body[data-hero="v2"] .banner-logo { width: 105px; }
  body[data-hero="v2"] .banner-curve { height: 55px; }
  body[data-hero="v2"] .hero { padding: 0 0 18px; }
  body[data-hero="v2"] .hero-content { padding-top: 8px; }

  /* 2. Title + tagline — slightly bumped per user feedback (was 20/12) */
  body[data-hero="v2"] .hero-title { font-size: 24px; margin-bottom: 6px; }
  body[data-hero="v2"] .hero-tagline { font-size: 13px; margin-bottom: 8px; }
  body[data-hero="v2"] .hero-stars { font-size: 13px; margin-bottom: 10px; }

  /* 3. "מחירון 2026" — small gold ribbon (smaller than desktop's 20px) */
  body[data-hero="v2"] .q-card-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary);
    margin: 0 auto 12px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(245,197,24,0.22), rgba(245,197,24,0.10));
    border: 1px solid rgba(245,197,24,0.55);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
    box-shadow: 0 2px 8px rgba(245,197,24,0.18);
  }
  body[data-hero="v2"] .q-card-title .q-icon { width: 14px; height: 14px; margin-inline-end: 0; }
  body[data-hero="v2"] .q-card-title .q-year-num { font-size: 1em; }
  body[data-hero="v2"] .q-card-title .q-year-num::after { display: none; }
  body[data-hero="v2"] .q-body { text-align: center; }
  body[data-hero="v2"] .q-body > *:not(.q-card-title) { text-align: initial; }

  /* 4. Direct-booking buttons — same polished-topaz feel as desktop,
        with a slightly softer shadow (mobile already has tighter spacing). */
  body[data-hero="v2"] .direct-booking { margin-top: 14px; position: relative; }
  body[data-hero="v2"] .direct-btn {
    background:
      radial-gradient(ellipse 70% 90% at 22% 18%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%),
      linear-gradient(135deg, #FAD45D 0%, #F5C518 35%, #E2A800 72%, #CFA00C 100%) !important;
    border: 1px solid #B8860B;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.50),
      inset 0 -2px 3px rgba(184,134,11,0.30),
      0 4px 14px rgba(245,197,24,0.28),
      0 1px 3px rgba(0,0,0,0.08);
    color: var(--primary-dark);
    text-shadow: 0 1px 0 rgba(255,255,255,0.30);
    position: relative !important;
    overflow: hidden !important;
  }
  body[data-hero="v2"] .direct-btn::before { display: none !important; }
  body[data-hero="v2"] .direct-btn::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 30% !important;
    height: 100% !important;
    border-radius: 0 !important;
    background: linear-gradient(
      115deg,
      transparent 0%,
      rgba(255,255,255,0.42) 50%,
      transparent 100%) !important;
    pointer-events: none;
    animation: bfV2Shimmer 4.5s linear infinite !important;
    z-index: 2;
    will-change: transform;
  }

  /* 5. Hide the redundant city hint on mobile too */
  body[data-hero="v2"] #cityHint { display: none; }

  /* 6. Tighten the white space below the city input so the
        "הזמנת מונית" button sits higher on the screen. */
  body[data-hero="v2"] .q-body { padding-bottom: 8px; }
  body[data-hero="v2"] .q-form { margin-bottom: 6px; }
  body[data-hero="v2"] .direct-booking { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .banner-logo { animation: none; }
  .banner-bg { animation: none; }
  .float-wa { animation: none; }
}


/* ── Block 2: Flatpickr theme overrides (was second <style>) ── */

/* Flatpickr — Stars Taxi theme (navy + gold) */
.flatpickr-calendar {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(12,74,110,.2), 0 0 0 4px rgba(245,197,24,.1);
  font-family: inherit;
  padding: 6px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after { border-bottom-color: var(--border); }
.flatpickr-months {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: 12px;
  padding: 10px 8px;
  margin-bottom: 8px;
}
.flatpickr-current-month { color: var(--accent-gold) !important; font-weight: 800; font-size: 16px; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--accent-gold) !important;
  font-weight: 800;
}
.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--accent-gold) !important;
  fill: var(--accent-gold) !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: var(--accent-gold); }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { color: white !important; fill: white !important; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: white; }
.flatpickr-weekdays { background: var(--bg-soft); border-radius: 8px; margin-bottom: 4px; }
.flatpickr-weekday { color: var(--primary) !important; font-weight: 800 !important; font-size: 12px; }
.flatpickr-day {
  color: var(--text);
  border-radius: 10px;
  border: none;
  font-weight: 600;
  transition: background var(--t-fast), color var(--t-fast);
}
.flatpickr-day:hover:not(.disabled):not(.selected) {
  background: rgba(245,197,24,.15);
  color: var(--primary);
}
/* Today marker — stays visible even next to the selected one */
.flatpickr-day.today {
  border: 2px solid var(--accent-gold);
  background: rgba(245,197,24,.15);
  color: var(--primary);
  font-weight: 900;
  position: relative;
}
.flatpickr-day.today::after {
  content: '';
  position: absolute;
  bottom: 3px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  background: var(--accent-gold);
  border-radius: 50%;
}
.flatpickr-day.today:hover { background: rgba(245,197,24,.28); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright)) !important;
  color: var(--primary-dark) !important;
  font-weight: 900;
  border: 2px solid var(--accent-gold);
  box-shadow: 0 4px 12px rgba(245,197,24,.4);
}
.flatpickr-day.selected.today::after { display: none; }

/* 'היום' helper button appended to the calendar */
.fp-today-btn {
  display: block;
  width: calc(100% - 16px);
  margin: 8px;
  padding: 10px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}
.fp-today-btn:hover { background: var(--primary-dark); }
.flatpickr-day.disabled,
.flatpickr-day.flatpickr-disabled {
  color: #ccc !important;
  background: transparent !important;
  cursor: not-allowed;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--text-light); }

/* Time picker */
.flatpickr-time {
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  margin-top: 6px;
}
.flatpickr-time input {
  color: var(--primary) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  background: var(--bg-soft) !important;
  border-radius: 8px !important;
}
.flatpickr-time input:hover,
.flatpickr-time input:focus {
  background: rgba(245,197,24,.12) !important;
}
.flatpickr-time .flatpickr-time-separator { color: var(--accent-gold); font-weight: 900; }
.flatpickr-time .arrowUp, .flatpickr-time .arrowDown { fill: var(--accent-gold); }

/* Hide native calendar icon (since Flatpickr provides its own UI) */
.bf-input[type="date"]::-webkit-calendar-picker-indicator,
.bf-input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: .4;
}

/* ════════════════════════════════════════════════════════════════
   v2 — opt-in improvements with old/new toggles in the demo bar
   ════════════════════════════════════════════════════════════════ */

/* Demo-bar styling for v2 toggle pairs */
.v2-section-title {
  opacity: 1 !important;
  font-weight: 700;
  color: var(--accent-gold, #F59E0B);
  font-size: 12px;
}
.v2-pair {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px 3px 4px;
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
}
.v2-pair .v2-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: var(--accent-gold, #F59E0B);
  color: var(--primary-dark, #082F49);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
  opacity: 1 !important;
}
.v2-pair .v2-label {
  font-size: 11px;
  font-weight: 600;
  opacity: .92 !important;
  margin: 0 2px;
  white-space: nowrap;
}
.demo-bar .v2-pair button.v2-btn {
  padding: 3px 10px;
  min-height: 22px;
  font-size: 10px;
  border-radius: 999px;
}

/* ─── Mobile: legally / functionally required minimums ─────────
   1. Inputs ≥16px → prevents iOS Safari from auto-zooming on focus
   2. A11y button ≥44×44 → Israeli Standard 5568 tap-target rule
   Form aesthetic deliberately stays compact otherwise.            */
@media (max-width: 780px) {
  .q-input,
  .q-select { font-size: 16px; }
  .q-from-to-big .q-input { font-size: 16px; }
  .a11y-btn { width: 44px; height: 44px; }
  .a11y-btn svg { width: 18px; height: 18px; }
}

/* ─── Tab improvements (saved from v2 #6) ──────────────────────
   a. Active tab is slightly wider so it doesn't get lost.
   b. Delivery tab tints orange on hover — hints different service.
   c. Business tab hidden until B2B ships (placeholder = empty promise).
   When B2B is ready: remove the `display: none` rule below.        */
.q-tab {
  /* עידן 19.8 (החלקה): פעם ה-active גדל דרך flex:1.1 → דחף את הטאבים השכנים
     הצידה (רעד אופקי במעבר). עכשיו מדגישים ב-transform:scale (לא משנה רוחב,
     לא reflow) — הטאבים נשארים במקום וההדגשה חלקה. */
  transition: transform .25s var(--ease), background var(--t-fast), color var(--t-fast);
}
.q-tabs .q-tab.active { transform: scale(1.06); z-index: 1; }
.q-tab[data-mode="business"] { display: none; }
@media (hover: hover) {
  .q-tab[data-mode="delivery"]:hover:not(.active) {
    color: #C2410C;
    background: rgba(194, 65, 12, .06);
  }
}


/* ════════════════════════════════════════════════════════════════
   /business — B2B landing page
   Reuses the global typography + palette; layout is intentionally
   simple (single column, generous whitespace) so the page reads as
   "professional service offering" not "marketing site".
   ════════════════════════════════════════════════════════════════ */

.biz-page { background: var(--bg, #FEFDFB); }

/* Nav-right phone CTA on the business page only */
.biz-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--primary, #0C4A6E);
  color: white;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--t-fast);
}
.biz-nav-cta:hover { background: var(--primary-dark, #082F49); }

/* ─── Hero ─────────────────────────────────────────────────── */
.biz-hero {
  padding: 90px 0 60px;
  background:
    radial-gradient(ellipse 800px 400px at 50% 0%, rgba(245,197,24,.08), transparent 60%),
    linear-gradient(180deg, #F8FAFC 0%, var(--bg, #FEFDFB) 100%);
  text-align: center;
}
.biz-hero-eyebrow {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(12, 74, 110, .08);
  color: var(--primary, #0C4A6E);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 22px;
}
.biz-hero-title {
  font-size: 44px;
  font-weight: 900;
  color: var(--text, #0F172A);
  line-height: 1.15;
  margin: 0 0 18px;
  max-width: 780px;
  margin-inline: auto;
}
.biz-accent { color: var(--primary, #0C4A6E); }
.biz-hero-sub {
  font-size: 18px;
  color: var(--text-muted, #64748B);
  line-height: 1.55;
  max-width: 620px;
  margin: 0 auto 32px;
}
.biz-hero-ctas {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.biz-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--primary, #0C4A6E);
  color: white;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(12,74,110,.25);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.biz-cta-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(12,74,110,.32);
}
.biz-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: transparent;
  color: var(--primary, #0C4A6E);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  border: 1.5px solid rgba(12, 74, 110, .25);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.biz-cta-secondary:hover {
  background: rgba(12, 74, 110, .04);
  border-color: rgba(12, 74, 110, .45);
}
.biz-hero-trust {
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted, #64748B);
  font-weight: 600;
}

/* ─── Section title shared ─────────────────────────────────── */
.biz-section-title {
  font-size: 32px;
  font-weight: 900;
  color: var(--text, #0F172A);
  text-align: center;
  margin: 0 0 36px;
}

/* ─── Benefits ─────────────────────────────────────────────── */
.biz-benefits { padding: 70px 0; background: white; }
.biz-benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}
.biz-benefit-card {
  background: var(--bg, #FEFDFB);
  border: 1px solid rgba(12, 74, 110, .08);
  border-radius: 16px;
  padding: 28px 24px;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.biz-benefit-card:hover {
  border-color: rgba(245, 197, 24, .35);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(12,74,110,.08);
}
.biz-benefit-icon {
  font-size: 32px;
  margin-bottom: 14px;
}
.biz-benefit-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text, #0F172A);
  margin: 0 0 10px;
}
.biz-benefit-card p {
  font-size: 14.5px;
  color: var(--text-muted, #64748B);
  line-height: 1.6;
  margin: 0;
}

/* ─── Use cases ────────────────────────────────────────────── */
.biz-usecases { padding: 70px 0; background: #F8FAFC; }
.biz-usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}
.biz-usecase {
  background: white;
  border-right: 3px solid var(--accent-gold, #F5C518);
  border-radius: 4px 12px 12px 4px;
  padding: 18px 22px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.biz-usecase strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary, #0C4A6E);
}
.biz-usecase span {
  font-size: 13px;
  color: var(--text-muted, #64748B);
  line-height: 1.5;
}

/* ─── Testimonials ─────────────────────────────────────────── */
.biz-testimonials { padding: 70px 0; background: white; }
.biz-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}
.biz-testimonial {
  background: var(--bg, #FEFDFB);
  border-radius: 16px;
  padding: 26px 24px;
  border: 1px solid rgba(12, 74, 110, .06);
  position: relative;
}
.biz-testimonial::before {
  content: '"';
  position: absolute;
  top: 6px;
  inset-inline-start: 18px;
  font-size: 64px;
  font-weight: 900;
  color: rgba(245, 197, 24, .18);
  line-height: 1;
  font-family: serif;
}
.biz-testimonial-quote {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text, #0F172A);
  margin: 0 0 18px;
  position: relative;
  z-index: 1;
}
.biz-testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 14px;
  border-top: 1px solid rgba(12, 74, 110, .08);
}
.biz-testimonial-author strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--primary, #0C4A6E);
}
.biz-testimonial-author span {
  font-size: 12.5px;
  color: var(--text-muted, #64748B);
}

/* ─── Contact form ─────────────────────────────────────────── */
.biz-contact {
  padding: 70px 0 90px;
  background:
    radial-gradient(ellipse 800px 400px at 50% 0%, rgba(245,197,24,.06), transparent 60%),
    linear-gradient(180deg, #F8FAFC 0%, var(--bg, #FEFDFB) 100%);
}
.biz-contact-sub {
  text-align: center;
  font-size: 16px;
  color: var(--text-muted, #64748B);
  max-width: 520px;
  margin: -22px auto 36px;
  line-height: 1.55;
}
.biz-form {
  max-width: 640px;
  margin: 0 auto;
  background: white;
  padding: 32px 30px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(12,74,110,.10);
  border: 1px solid rgba(12, 74, 110, .06);
}
.biz-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.biz-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.biz-field-full { margin-bottom: 16px; }
.biz-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary, #0C4A6E);
}
.biz-req { color: #DC2626; }
.biz-field input,
.biz-field select,
.biz-field textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 11px 14px;
  border: 1.5px solid rgba(12, 74, 110, .15);
  border-radius: 10px;
  background: white;
  color: var(--text, #0F172A);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
.biz-field input:focus,
.biz-field select:focus,
.biz-field textarea:focus {
  outline: none;
  border-color: var(--accent-gold, #F5C518);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, .18);
}
.biz-field textarea { resize: vertical; min-height: 80px; }
.biz-submit {
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(180deg, var(--primary, #0C4A6E) 0%, var(--primary-dark, #082F49) 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 8px;
  box-shadow: 0 8px 22px rgba(12,74,110,.25);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.biz-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(12,74,110,.32);
}
.biz-submit:disabled { cursor: default; }
.biz-form-disclaimer {
  font-size: 12px;
  color: var(--text-muted, #64748B);
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.5;
}
.biz-form-disclaimer a { color: var(--primary, #0C4A6E); }

/* ─── Mobile ───────────────────────────────────────────────── */
@media (max-width: 780px) {
  .biz-hero { padding: 50px 0 40px; }
  .biz-hero-title { font-size: 28px; }
  .biz-hero-sub { font-size: 15px; }
  .biz-hero-trust { flex-direction: column; gap: 8px; }
  .biz-section-title { font-size: 24px; margin-bottom: 26px; }
  .biz-benefit-grid,
  .biz-usecase-grid,
  .biz-testimonial-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .biz-benefits, .biz-usecases, .biz-testimonials, .biz-contact {
    padding: 50px 0;
  }
  .biz-form { padding: 24px 20px; }
  .biz-form-row { grid-template-columns: 1fr; gap: 14px; }
  .biz-field input,
  .biz-field select,
  .biz-field textarea { font-size: 16px; }   /* iOS no-zoom */
  .biz-cta-primary,
  .biz-cta-secondary { padding: 14px 22px; font-size: 15px; }
  .biz-nav-cta span { display: none; }
  .biz-nav-cta { padding: 8px; }
}

@media (min-width: 781px) and (max-width: 1024px) {
  .biz-benefit-grid,
  .biz-usecase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .biz-testimonial-grid {
    grid-template-columns: 1fr;
  }
}

/* Footer link to /business — slightly emphasized so business owners
   spot it without it screaming. Gold accent matches the page brand. */
.footer-biz-link {
  color: var(--accent-gold, #F5C518) !important;
  font-weight: 700;
}
.footer-biz-link:hover { text-decoration: underline; }

/* ─── Compact + centered (saved from v2 #8) ────────────────────
   1. City wrap (airport pane) capped at ~55% and centered. By
      shrinking the WRAP — not just the input — both the visible
      field and its suggestions dropdown share the same width.
   2. Direct-booking button capped at 520px, centered.
   Desktop only. Mobile keeps its current layout.                  */
@media (min-width: 781px) {
  .q-pane[data-pane="airport"] .q-from-to-big .bf-city-wrap {
    max-width: 55%;
    margin-inline: auto;
  }
  .cta-main-btn {
    max-width: 520px;
    margin-inline: auto;
  }
}

/* ─── Tagline as a pale-gold chip (saved from v2 #12) ──────────
   The previous gradient-text tagline read like a hyperlink under‑
   line. The chip treatment gives it a confident place of its own
   without competing with the H1.                                   */
.hero-tagline {
  display: inline-block;
  background: rgba(245, 197, 24, .15);
  -webkit-background-clip: border-box;
          background-clip:  border-box;
  color: var(--primary-dark, #082F49) !important;
  border: 1px solid rgba(245, 197, 24, .42);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 14px !important;
  letter-spacing: .01em;
}
@media (min-width: 781px) {
  .hero-tagline {
    font-size: 17px !important;
    padding: 6px 18px;
  }
}




/* ════════════════════════════════════════════════════════════════
   Accessibility widget — תקנה 35 / WCAG 2.0 AA / תקן ישראלי 5568
   Floating ♿ toggle + side-panel with persistent settings.
   ════════════════════════════════════════════════════════════════ */

/* Side panel */
.a11y-panel {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  justify-content: flex-end;
}
.a11y-panel[hidden] { display: none; }
.a11y-panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  animation: a11yBackdropIn .2s ease;
}
.a11y-panel-inner {
  position: relative;
  width: min(360px, 100%);
  height: 100%;
  background: white;
  overflow-y: auto;
  padding: 22px 22px 30px;
  box-shadow: -8px 0 30px rgba(0, 0, 0, .18);
  animation: a11yPanelIn .25s cubic-bezier(.16,1,.3,1);
  z-index: 1;
}
@keyframes a11yBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes a11yPanelIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }

.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(12, 74, 110, .12);
}
.a11y-panel-header h2 {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary, #0C4A6E);
  margin: 0;
}
.a11y-panel-close {
  width: 44px;
  height: 44px;
  background: rgba(12, 74, 110, .08);
  border: none;
  border-radius: 50%;
  font-size: 22px;
  font-weight: 600;
  color: var(--primary, #0C4A6E);
  cursor: pointer;
  line-height: 1;
}
.a11y-panel-close:hover { background: rgba(12, 74, 110, .18); }
.a11y-panel-close:focus-visible {
  outline: 3px solid var(--accent-gold, #F5C518);
  outline-offset: 2px;
}

.a11y-section { margin-bottom: 20px; }
.a11y-section h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted, #64748B);
  margin: 0 0 10px;
  letter-spacing: .03em;
  text-transform: none;
}

/* Font size +/- row */
.a11y-control-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(12, 74, 110, .04);
  border-radius: 999px;
  padding: 4px;
}
.a11y-control-btn {
  flex: 0 0 64px;
  height: 48px;
  background: white;
  border: 1px solid rgba(12, 74, 110, .14);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  color: var(--primary, #0C4A6E);
  cursor: pointer;
  font-family: inherit;
}
.a11y-control-btn:hover {
  background: rgba(245, 197, 24, .14);
  border-color: var(--accent-gold, #F5C518);
}
.a11y-control-btn:focus-visible {
  outline: 3px solid var(--accent-gold, #F5C518);
  outline-offset: 2px;
}
.a11y-value {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--primary, #0C4A6E);
  font-feature-settings: 'tnum';
}

/* Toggle rows (contrast / links / reduce-motion / big cursor) */
.a11y-toggle-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: white;
  border: 1.5px solid rgba(12, 74, 110, .12);
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  text-align: right;
  font-family: inherit;
  font-size: 15px;
  color: var(--text, #0F172A);
  transition: background .15s ease, border-color .15s ease;
  min-height: 48px;
}
.a11y-toggle-row:hover {
  background: rgba(245, 197, 24, .08);
  border-color: rgba(245, 197, 24, .45);
}
.a11y-toggle-row:focus-visible {
  outline: 3px solid var(--accent-gold, #F5C518);
  outline-offset: 2px;
}
.a11y-toggle-row[aria-pressed="true"] {
  background: rgba(245, 197, 24, .15);
  border-color: var(--accent-gold, #F5C518);
}
.a11y-toggle-icon { font-size: 20px; flex: 0 0 24px; text-align: center; }
.a11y-toggle-label { flex: 1; font-weight: 600; }
.a11y-toggle-state {
  font-size: 13px;
  color: var(--text-muted, #64748B);
  font-weight: 700;
}
.a11y-toggle-row .a11y-toggle-state::before { content: 'כבוי'; }
.a11y-toggle-row[aria-pressed="true"] .a11y-toggle-state::before { content: 'פעיל ✓'; }
.a11y-toggle-row[aria-pressed="true"] .a11y-toggle-state {
  color: var(--accent, #F59E0B);
}

/* Reset button */
.a11y-reset-btn {
  width: 100%;
  padding: 12px 18px;
  background: rgba(220, 38, 38, .08);
  border: 1px solid rgba(220, 38, 38, .25);
  border-radius: 12px;
  color: rgb(185, 28, 28);
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
}
.a11y-reset-btn:hover { background: rgba(220, 38, 38, .14); }
.a11y-reset-btn:focus-visible {
  outline: 3px solid var(--accent-gold, #F5C518);
  outline-offset: 2px;
}

/* Footer */
.a11y-panel-footer {
  border-top: 1px solid rgba(12, 74, 110, .12);
  padding-top: 16px;
  font-size: 13px;
  color: var(--text-muted, #64748B);
  line-height: 1.6;
}
.a11y-panel-footer-title {
  font-weight: 800;
  color: var(--primary, #0C4A6E);
  margin: 0 0 4px;
}
.a11y-panel-footer p { margin: 3px 0; }
.a11y-panel-footer a { color: var(--primary, #0C4A6E); font-weight: 700; }
.a11y-statement-link { display: inline-block; margin-top: 8px; }


/* ─── Body classes that change global behavior ─────────────────── */

/* Font scaling — `zoom` scales every element including absolute-px
   font-sizes (the codebase mostly uses px, so a `font-size: 110%` on
   <html> didn't propagate). zoom is non-standard but widely supported
   across Chrome/Edge/Safari/Firefox 126+ and triggers a real layout
   reflow, which is exactly what we want for an accessibility scale. */
html.a11y-font-110 { zoom: 1.10; }
html.a11y-font-125 { zoom: 1.25; }
html.a11y-font-140 { zoom: 1.40; }
html.a11y-font-160 { zoom: 1.60; }

/* High contrast — yellow on black, force-overrides everything */
body.a11y-contrast {
  background: #000 !important;
  color: #FFEE00 !important;
}
body.a11y-contrast :not(.a11y-panel):not(.a11y-panel *) {
  background-color: #000 !important;
  color: #FFEE00 !important;
  border-color: #FFEE00 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
body.a11y-contrast a:not(.a11y-panel a),
body.a11y-contrast button:not(.a11y-panel button) {
  text-decoration: underline !important;
}
body.a11y-contrast img:not(.a11y-panel img),
body.a11y-contrast video {
  filter: grayscale(1) contrast(1.4);
}

/* Highlighted links — bold + underline + outline */
body.a11y-highlight-links a:not(.a11y-panel a) {
  text-decoration: underline !important;
  font-weight: 800 !important;
  outline: 2px solid var(--accent-gold, #F5C518) !important;
  outline-offset: 2px !important;
  background: rgba(245, 197, 24, .12) !important;
}

/* Reduce motion — stops animations and transitions globally */
body.a11y-reduce-motion *,
body.a11y-reduce-motion *::before,
body.a11y-reduce-motion *::after {
  animation-duration: .001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001s !important;
  scroll-behavior: auto !important;
}

/* Big cursor — uses an inline SVG to avoid extra HTTP request */
body.a11y-big-cursor,
body.a11y-big-cursor :not(input):not(textarea) {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><polygon points="2,2 2,42 13,32 23,46 30,42 20,28 35,28" fill="black" stroke="white" stroke-width="2.5" stroke-linejoin="round"/></svg>') 0 0, auto !important;
}

/* Readable font — stronger weight + tighter letter-spacing for dyslexia */
body.a11y-readable-font,
body.a11y-readable-font * {
  font-family: 'Heebo', 'Open Sans', Arial, sans-serif !important;
  letter-spacing: 0.04em !important;
  word-spacing: 0.12em !important;
  line-height: 1.7 !important;
}

/* Mobile panel — full screen */
@media (max-width: 480px) {
  .a11y-panel-inner {
    width: 100%;
    padding: 18px 16px 24px;
  }
  .a11y-panel-header h2 { font-size: 18px; }
}

/* ─── Accessibility widget — round 2 improvements ─────────────── */

/* Close button — now with "סגור" label, clearer affordance */
.a11y-panel-close {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  min-width: 64px;
  height: 44px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: rgba(12, 74, 110, .08);
  font-size: 14px;
  font-weight: 700;
}
.a11y-close-x {
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
}
.a11y-close-text {
  font-size: 14px;
}

/* Hint at top — explains instant-apply */
.a11y-panel-hint {
  font-size: 13px;
  color: var(--text-muted, #64748B);
  background: rgba(12, 74, 110, .04);
  padding: 10px 14px;
  border-radius: 10px;
  margin: 0 0 18px;
  line-height: 1.55;
}

/* Mark desktop-only controls subtly on touch devices (no real way to
   detect "no-cursor" perfectly — use hover capability as a proxy).   */
@media (hover: none) {
  .a11y-toggle-row.a11y-desktop-only {
    opacity: .5;
  }
}
.a11y-toggle-row.a11y-desktop-only small {
  display: block;
  font-size: 11px;
  color: var(--text-muted, #64748B);
  font-weight: 500;
}

/* Color invert — flips all colors for low-vision users who prefer
   dark mode but with full color information preserved.              */
html.a11y-invert {
  filter: invert(1) hue-rotate(180deg);
  background: white;
}
html.a11y-invert img,
html.a11y-invert video,
html.a11y-invert iframe {
  filter: invert(1) hue-rotate(180deg);
}

/* Grayscale — strips color, helpful for color-blind users */
html.a11y-grayscale {
  filter: grayscale(1);
}

/* Combo: invert + grayscale */
html.a11y-invert.a11y-grayscale {
  filter: invert(1) hue-rotate(180deg) grayscale(1);
}

/* Highlight headings — adds outline to all h1-h4 so they stand out.
   Useful for screen-reader users who navigate by headings.          */
body.a11y-highlight-headings h1,
body.a11y-highlight-headings h2,
body.a11y-highlight-headings h3,
body.a11y-highlight-headings h4 {
  outline: 2px dashed var(--accent-gold, #F5C518) !important;
  outline-offset: 4px !important;
  background: rgba(245, 197, 24, .05) !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
}

/* Reduce motion — strengthen: also stop the slow zoom on hero banner
   and the gentle float on the logo, which were not covered before.   */
body.a11y-reduce-motion .banner-bg,
body.a11y-reduce-motion .banner-logo,
body.a11y-reduce-motion .float-wa,
body.a11y-reduce-motion .shabbat-badge,
body.a11y-reduce-motion .shabbat-badge::after {
  animation: none !important;
  transform: none !important;
}

/* Readable font — strengthen so the change is actually noticeable.
   Previous values (0.04em letter-spacing) were almost invisible.    */
body.a11y-readable-font,
body.a11y-readable-font * {
  font-family: 'Heebo', 'Open Sans', Arial, sans-serif !important;
  letter-spacing: 0.06em !important;
  word-spacing: 0.16em !important;
  line-height: 1.85 !important;
  font-weight: 600 !important;
}
/* But keep sub-elements at lighter weight where it matters */
body.a11y-readable-font small,
body.a11y-readable-font .a11y-toggle-state {
  font-weight: 500 !important;
}

/* Toggle button focus + hover — reinforce visibility */
.a11y-btn:focus-visible {
  outline: 3px solid var(--accent-gold, #F5C518);
  outline-offset: 3px;
}
.a11y-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(12, 74, 110, .35);
}

/* ─── Tap targets — 44×44 minimum (saved from v2 tap-targets) ────
   Israeli Standard 5568 / WCAG 2.0 AA tap-target rule. Element
   families bumped from 36-40px → 44px:
     • .q-tab           (form tabs: נתב״ג / בינעירוני / משלוחים)
     • .cta-chip        (direction chips above the gold CTA)
     • .user-menu-item  (logged-in user dropdown items)
     • .chip-btn        (header chips: התחברות / EN)                 */
.q-tab          { min-height: 44px; }
.cta-chip       { min-height: 44px; padding: 11px 16px; }
.user-menu-item { min-height: 44px; padding: 11px 14px; }
.chip-btn       { min-height: 44px; padding: 8px 14px; }
@media (max-width: 780px) {
  .q-tab { min-height: 44px; padding: 10px 6px; }
}

/* ════════════════════════════════════════════════════════════════
   Booking-form audit upgrades (saved defaults)
   Kept: title swap (HTML), title size, neutral price preview,
   bigger progress labels, wider desktop form. Rejected and removed:
   placeholder swap "מס׳→12" (#3) and microcopy hint (#6).
   ════════════════════════════════════════════════════════════════ */

/* Wider form on desktop */
@media (min-width: 781px) {
  .overlay-card.bf-card {
    max-width: 580px;
    width: 580px;
  }
}

/* Neutral price preview — was gold-bordered, now navy-tinted */
.bf-price-preview {
  background: rgba(12, 74, 110, .05) !important;
  border: 1px solid rgba(12, 74, 110, .14) !important;
  box-shadow: none !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
}
.bf-price-preview .bf-price-day,
.bf-price-preview .bf-price-night {
  font-size: 14px !important;
}

/* Progress labels: 10px → 12.5px (תקן 5568 readable threshold) */
.overlay-progress-labels span {
  font-size: 12.5px !important;
  letter-spacing: .01em;
}

/* Title: tighten size to 22px without ⭐ */
.overlay-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
}

/* ─── Flatpickr — make month/year clickable + show both arrows ───
   Original styling left "מאי" looking like flat text and hid the
   "previous month" chevron. Now both navigators are pill-style
   buttons with background + chevron, and both prev/next arrows
   render visibly on each side of the header.                       */

/* (Flatpickr month/year clickability tweak removed — the chevron
   background-image stacked on top of the native select arrow and the
   numInputWrapper arrows on the year, producing visual chaos. Sticking
   with Flatpickr's defaults for the calendar header.)              */

/* ════════════════════════════════════════════════════════════════
   Booking-form audit round 2 — saved defaults
   Approved: city pill (#7), inline autocomplete error (#8),
             progress bar hidden (#9). Rejected: slim inline price (#3).
   ════════════════════════════════════════════════════════════════ */

/* City pill — pre-filled cities read as "chosen, click to change".
   Pill style applies only when the field is non-empty (uses
   :not(:placeholder-shown)) so an empty city still shows as a
   regular input that invites typing. All bg props in one rule
   so !important shorthand can't reset bg-repeat to "repeat".
   Applies to BOTH city fields — origin (#s1City) and the
   intercity/delivery destination (#s1CityTo) — so the two bubbles
   match instead of one being a pill and the other a plain box. */
#s1City:not(:placeholder-shown):not(:focus),
#s1CityTo:not(:placeholder-shown):not(:focus) {
  /* "chosen city" = navy STROKE on white, not navy-on-navy fill (which
     failed contrast + got swallowed). Council 2026-06-25. */
  background-color: #fff !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%230C4A6E'><path d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 010-5 2.5 2.5 0 010 5z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  border: 2px solid rgba(12, 74, 110, .45) !important;
  border-radius: 12px !important;
  padding: 14px 40px 14px 18px !important;
  font-weight: 800;
  color: var(--primary, #0C4A6E) !important;
  min-height: 52px !important;
  box-shadow: none !important;
}

/* Autocomplete "no match" empty state inline, not absolute overlay */
.bf-city-sug-empty,
.bf-city-suggestions:has(.bf-city-sug-empty:only-child) {
  position: static !important;
  margin-top: 6px;
  box-shadow: none !important;
  border: 1px dashed rgba(12, 74, 110, .25);
  background: rgba(12, 74, 110, .04);
  font-size: 12.5px;
  text-align: center;
  padding: 8px 12px;
  border-radius: 8px;
}

/* 3-step progress bar hidden — was misleading; the form is actually
   1.5 screens, not 3. Close button stays. */
.overlay-progress,
.overlay-progress-labels {
  display: none !important;
}
.overlay-card.bf-card {
  /* Reclaim the space the progress bar used */
  padding-top: 18px;
}

/* (City-pill transition animation removed — the 280ms morph wasn't
   visible enough in practice to justify the toggle. The pill swap
   between focused/unfocused stays instant, which reads as crisp.) */

/* ─── Flatpickr — desktop polish ───────────────────────────────
   On desktop, hide the year selector entirely (we only support
   bookings within the next ~14 months — switching years is never
   useful) and make the prev/next month arrows prominent so the
   user clearly sees how to advance the calendar.                 */
@media (min-width: 781px) {
  /* Hide year input + its up/down spinner wrapper */
  .flatpickr-current-month input.cur-year,
  .flatpickr-current-month .numInputWrapper {
    display: none !important;
  }
  /* The month label widens to fill the space — keep it centered */
  .flatpickr-current-month .flatpickr-monthDropdown-months {
    font-size: 17px !important;
  }

  /* Prev / next month arrows — pill-shaped buttons */
  .flatpickr-months .flatpickr-prev-month,
  .flatpickr-months .flatpickr-next-month {
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .14) !important;
    margin: 0 8px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background .15s ease, transform .15s ease;
  }
  .flatpickr-months .flatpickr-prev-month:hover,
  .flatpickr-months .flatpickr-next-month:hover {
    background: rgba(255, 255, 255, .28) !important;
    transform: scale(1.06);
  }
  .flatpickr-months .flatpickr-prev-month svg,
  .flatpickr-months .flatpickr-next-month svg {
    width: 16px !important;
    height: 16px !important;
    fill: var(--accent-gold) !important;
  }
  .flatpickr-months .flatpickr-prev-month:hover svg,
  .flatpickr-months .flatpickr-next-month:hover svg {
    fill: white !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   v2 two-column desktop form — opt-in via body.v2-twocol
   Wide card on desktop with form on left + sticky summary on right.
   Mobile: card stays single-column, summary panel hidden.
   ════════════════════════════════════════════════════════════════ */

/* Floating toggle (re-uses styling from earlier audits) */
.v2-form-toggle {
  position: fixed;
  bottom: 18px;
  inset-inline-start: 18px;
  z-index: 2500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 14px;
  background: var(--primary, #0C4A6E);
  color: white;
  border: 2px solid white;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .15);
  transition: background .2s ease, transform .15s ease;
  min-height: 44px;
}
.v2-form-toggle:hover { transform: translateY(-1px); }
.v2-form-toggle:focus-visible {
  outline: 3px solid var(--accent-gold, #F5C518);
  outline-offset: 2px;
}
.v2-form-toggle-pill {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
}
.v2-form-toggle-label strong { font-weight: 900; }
body.v2-twocol .v2-form-toggle {
  background: var(--accent-gold, #F5C518);
  color: var(--primary-dark, #082F49);
}
body.v2-twocol .v2-form-toggle-pill { background: var(--primary-dark, #082F49); }
@media (max-width: 480px) {
  .v2-form-toggle {
    bottom: 14px;
    inset-inline-start: 14px;
    padding: 8px 14px 8px 12px;
    font-size: 12px;
  }
}


/* Summary panel — hidden in mobile and when toggle is off */
.bf-summary-panel { display: none; }

@media (min-width: 781px) {
  /* Wide the card to make room for the right panel.
     Header items each get their own grid row spanning both columns
     so they STACK normally instead of overlapping (which happens when
     multiple elements share a single grid-area).
     `grid-auto-flow: dense` lets the panel backfill the column-2 hole
     that opens up after the spanning header rows; without it the panel
     auto-places AFTER all column-1 form items (since it's last in DOM)
     and ends up at the bottom of the grid instead of beside the form. */
  /* The wrap defaults to max-width:540px, which is too narrow for the
     two-column card. Bump it to match the card width so the card can
     centre inside the wrap (and the wrap centres inside the overlay
     via flex). */
  body.v2-twocol .overlay-wrap {
    max-width: min(880px, calc(100vw - 20px));
  }
  body.v2-twocol .overlay-card.bf-card {
    /* רוחב גמיש (שי 2026-07-02): 880 קבוע גלש ברוחבי-ביניים (781–900px)
       והפאנל-הצדדי נחתך בקצה המסך (ה-₪ של הסה"כ נעלם). */
    max-width: min(880px, calc(100vw - 20px)) !important;
    width: min(880px, calc(100vw - 20px)) !important;
    display: grid;
    grid-template-columns: 1fr 280px;
    grid-auto-flow: dense;
    gap: 0 24px;
    align-items: start;
  }
  /* DEFAULT: every direct child of bf-card lives in the form column.
     The few exceptions below override this. Without this baseline,
     children with no explicit grid-column (overlay-nav, bf-price-display,
     bf-cancel-booking-link, etc.) auto-placed into random cells and
     pushed the form layout around.                                    */
  body.v2-twocol .overlay-card.bf-card > * {
    grid-column: 1 / 2;
  }
  /* Header items span BOTH columns (their own row each). */
  body.v2-twocol .overlay-card.bf-card > .overlay-progress-labels,
  body.v2-twocol .overlay-card.bf-card > .overlay-progress,
  body.v2-twocol .overlay-card.bf-card > .overlay-step-label,
  body.v2-twocol .overlay-card.bf-card > .overlay-title,
  body.v2-twocol .overlay-card.bf-card > .overlay-desc {
    grid-column: 1 / -1;
  }
  /* Summary panel — only thing in column 2. */
  body.v2-twocol .overlay-card.bf-card > .bf-summary-panel {
    grid-column: 2 / 3;
    grid-row: span 100;            /* fill the right column alongside form */
  }
  /* Login pill / edit-banner inside screen 1 also stay in form column */

  /* Show summary panel inside the right column (the grid-column rule
     above pins it to column 2; this just makes it visible + sticky). */
  body.v2-twocol .bf-summary-panel {
    display: block;
    position: sticky;
    top: 18px;
    background: linear-gradient(180deg, rgba(12, 74, 110, .04), rgba(12, 74, 110, .02));
    border: 1px solid rgba(12, 74, 110, .14);
    border-radius: 14px;
    padding: 18px 16px 16px;
    margin-top: 8px;
  }
  body.v2-twocol .bf-summary-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary, #0C4A6E);
    margin: 0 0 14px;
    letter-spacing: .02em;
  }
  body.v2-twocol .bf-summary-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 13.5px;
    color: var(--text, #0F172A);
  }
  body.v2-twocol .bf-summary-icon {
    flex: 0 0 24px;
    text-align: center;
    font-size: 16px;
    color: var(--primary, #0C4A6E);
  }
  body.v2-twocol .bf-summary-text {
    flex: 1;
    font-weight: 600;
  }
  body.v2-twocol .bf-summary-divider {
    height: 1px;
    background: rgba(12, 74, 110, .12);
    margin: 12px 0 10px;
  }
  body.v2-twocol .bf-summary-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 4px 0 8px;
  }
  body.v2-twocol .bf-summary-price-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted, #64748B);
  }
  body.v2-twocol .bf-summary-price-amount {
    font-size: 28px;
    font-weight: 900;
    color: var(--primary-dark, #082F49);
    font-feature-settings: 'tnum';
  }
  body.v2-twocol .bf-summary-note {
    font-size: 11px;
    color: var(--text-muted, #64748B);
    line-height: 1.5;
    margin: 8px 0 0;
    text-align: center;
  }
}

/* Two-column summary panel — price breakdown lines */
@media (min-width: 781px) {
  body.v2-twocol .bf-summary-section-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-muted, #64748B);
    margin: 0 0 8px;
    letter-spacing: .03em;
    text-transform: none;
  }
  body.v2-twocol .bf-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    font-size: 13px;
  }
  body.v2-twocol .bf-summary-line[hidden] { display: none !important; }
  body.v2-twocol .bf-summary-line-label {
    color: var(--text, #0F172A);
    font-weight: 600;
  }
  body.v2-twocol .bf-summary-line-amount {
    color: var(--primary, #0C4A6E);
    font-weight: 700;
  }
}

/* Two-column summary panel — empty-state + dynamic dividers */
@media (min-width: 781px) {
  body.v2-twocol .bf-summary-empty {
    font-size: 12.5px;
    color: var(--text-muted, #64748B);
    margin: 0;
    padding: 8px 0 4px;
    line-height: 1.55;
    text-align: center;
  }
  body.v2-twocol .bf-summary-empty[hidden] { display: none !important; }
  body.v2-twocol .bf-summary-row[hidden],
  body.v2-twocol .bf-summary-line[hidden],
  body.v2-twocol .bf-summary-divider[hidden],
  body.v2-twocol .bf-summary-section-title[hidden],
  body.v2-twocol .bf-summary-price[hidden] {
    display: none !important;
  }
}

/* Grand total for round-trips — small + muted (per user feedback:
   "the combined total is a less important detail"). */
@media (min-width: 781px) {
  body.v2-twocol .bf-summary-grand {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(12, 74, 110, .12);
    opacity: .85;
  }
  body.v2-twocol .bf-summary-grand .bf-summary-line-label {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--text-muted, #64748B) !important;
  }
  body.v2-twocol .bf-summary-grand .bf-summary-line-amount {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text-muted, #64748B) !important;
  }
}

/* "ובחזרה" line — slightly more prominent than the other extras */
@media (min-width: 781px) {
  body.v2-twocol #bfSumLineReturn {
    margin-top: 6px;
    font-size: 14.5px !important;
  }
  body.v2-twocol #bfSumLineReturn .bf-summary-line-label {
    font-weight: 800;
    color: var(--primary-dark, #082F49) !important;
  }
  body.v2-twocol #bfSumLineReturn .bf-summary-line-amount {
    font-weight: 800;
    color: var(--primary-dark, #082F49) !important;
  }
}

/* Return line placeholder — round-trip selected but no time yet.
   The amount cell shows "מחושב לפי שעת החזרה" instead of ₪X. Style
   it as muted helper text so it doesn't read as a price.            */
@media (min-width: 781px) {
  body.v2-twocol #bfSumLineReturn.is-placeholder .bf-summary-line-amount {
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: var(--text-muted, #64748B) !important;
    font-style: italic;
  }
  body.v2-twocol #bfSumLineReturn.is-placeholder .bf-summary-line-label {
    font-weight: 700 !important;
    color: var(--text-muted, #64748B) !important;
  }
}

/* "ובחזרה" — section sub-title above the return-leg breakdown */
@media (min-width: 781px) {
  body.v2-twocol .bf-summary-return-title {
    margin-top: 14px !important;
    color: var(--primary, #0C4A6E) !important;
    font-size: 13.5px !important;
    padding-top: 8px;
    border-top: 1px dashed rgba(12, 74, 110, .12);
  }
}

/* ─── Continue-button breakdown — desktop simplification ────────
   Desktop now shows the full breakdown in the side summary panel,
   so the in-button breakdown can drop the per-category extras and
   relabel the main row "סה״כ להלוך" (it is the outbound total).
   Mobile is unaffected — keeps full per-category breakdown.       */

/* Default: show the mobile label "עלות הנסיעה", hide the desktop one */
.bf-btn-label-desktop { display: none; }
.bf-btn-label-mobile  { display: inline; }

@media (min-width: 781px) {
  .bf-btn-label-mobile  { display: none; }
  .bf-btn-label-desktop { display: inline; }
  /* Drop the per-category lines from the in-button breakdown — they
     duplicate the side panel's price breakdown.                     */
  .bf-btn-price-row.category { display: none !important; }
}

/* Logo + banner-logo size toggles were removed — preferences saved
   as device defaults (desktop: navbar 68px / banner 200px, mobile:
   navbar 42px / banner 120px + pulse). The CSS above the @media
   blocks handles desktop; the @media (max-width: 780px) block in
   the navbar section handles mobile. */


/* ════════════════════════════════════════════════════════════════
   Mobile typography bumps — saved as defaults per user feedback.
   Smallest UI text (sub-headers, time labels, CTA buttons, fine
   print) lifted to תקן 5568 / WCAG 2.0 AA minimums so it reads cleanly
   on small screens. The floating ישן/חדש toggle was retired once the
   "חדש" sizes were confirmed as the preferred default for mobile.
   ════════════════════════════════════════════════════════════════ */

/* "סה״כ" suffix — desktop+mobile: 11→12 (WCAG body-text floor). */
.price-row .val .price-total-label { font-size: 12px; }

@media (max-width: 780px) {
  .hero-tagline      { font-size: 14px; }
  .price-row .time   { font-size: 13px; }
  .price-card-cta    { font-size: 16px; }
  /* .price-card .region-note + .price-disclaimer mobile bumps were
     promoted to the base rules above (14 everywhere) — line-height
     stays at the default 1.7 set inline. */
  .price-disclaimer  { line-height: 1.7; }
}

/* ═══ Kept tweaks the owner approved ═══ */

/* (1) "שירות, אמינות ומחירים שלא הכרתם" — clean PLAIN gold text under the
   title (no chip frame/pill). */
.hero-tagline.hero-tagline-plain {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: #92660A !important;
  margin-top: 4px;
}

/* (2) "מאיפה לאסוף" label — visually hidden (the placeholder carries the
   prompt), but KEPT in the accessibility tree so #city stays properly
   named for screen readers (תקן 5568 / WCAG). */
.q-label[for="city"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* (3) Highlight the "בחרו עיר וקבלו מחיר מיידי" field — BLUE accent so it pops
   against the site's gold (gold-on-gold blended in). Bigger + sky tint +
   gentle blue lift; not a loud ring. */
#city {
  font-size: 17px;
  font-weight: 600;
  min-height: 54px;
  padding: 15px 16px;
  border-color: rgba(3,105,161,.45);            /* refined ×2: gentle brand blue */
  background: #F0F9FF;                           /* faint sky tint — cool "island" */
  box-shadow: 0 2px 9px rgba(3,105,161,.10);
}
#city::placeholder {
  color: #475569;
  font-weight: 600;
  opacity: 1;
}
#city:focus {
  border-color: var(--primary, #0C4A6E);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(3,105,161,.20), 0 2px 12px rgba(3,105,161,.15);
}

/* (3b) Same highlight for the other tabs' primary fields, each in ITS color:
   intercity = teal, delivery = orange (matches each tab's theme). */
#cityFrom, #cityTo, #delFrom, #delTo {
  font-size: 16px;
  font-weight: 600;
  min-height: 54px;
  padding: 14px 14px;
}
/* Intercity — teal */
#cityFrom, #cityTo {
  border-color: rgba(13,148,136,.40);          /* refined ×2: gentle teal */
  background: #F0FDFA;
  box-shadow: 0 2px 9px rgba(13,148,136,.10);
}
#cityFrom:focus, #cityTo:focus {
  border-color: #0F766E;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(13,148,136,.20), 0 2px 12px rgba(13,148,136,.15);
}
/* Delivery — orange */
#delFrom, #delTo {
  border-color: rgba(234,88,12,.35);           /* refined ×2: gentle orange (hottest → softest) */
  background: #FFF7ED;
  box-shadow: 0 2px 9px rgba(234,88,12,.08);
}
#delFrom:focus, #delTo:focus {
  border-color: #C2410C;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(234,88,12,.20), 0 2px 12px rgba(234,88,12,.15);
}

/* Intercity + urban homepage: luggage was removed, so the passengers row is
   now a single full-width field (was a 2-col pax+luggage grid). Urban shares
   the intercity city-to-city layout. */
.q-pane[data-pane="intercity"] .q-row-pax-lug,
.q-pane[data-pane="urban"] .q-row-pax-lug { grid-template-columns: 1fr; }


/* ═══════════════════════════════════════════════════════════════════
   הדגשת-טופס מחדש — שי 2026-06-25
   הטופס היה "לבן-על-לבן" שטוח אחרי ניקוי האימוג'י. כאן מחזירים היררכיה:
   כרטיסי-מקטע בגוון תכלת-עדין · שדות לבנים שבולטים בתוכם · כותרות+אייקוני-קו
   ב-navy (לא אימוג'י) · טוגל-חזרה בהדגשת-זהב. אפס שינוי במבנה/לוגיקה.
   ═══════════════════════════════════════════════════════════════════ */

/* כרטיסי-מקטע: מילוי תכלת-עדין שמבדיל מהמשטח הלבן ומהשדות שבתוכו */
.bf-card .bf-step,
.bf-card .bf-payment-block,
.bf-card .bf-note-block,
.bf-card .bf-toggle-row,
.bf-card #bfExtrasWrap {
  background: #F8FAFC;
  border-color: #E2E8F0;
  /* subtle symmetric lift — gives cards a real edge off the white surface
     (RTL-safe: no horizontal offset). Council: "vision detects edges". */
  box-shadow: 0 1px 3px rgba(12,74,110,.06);
}

/* date/time trigger = a field like the others (not a special highlight):
   match the field border so it doesn't get swallowed either. */
.bf-card .bf-tp-wheel-trigger { border-width: 2px; border-color: #CBD7E6; }

/* שדות ממולאים: לבן + מסגרת ברורה → בולטים בתוך הכרטיס המגוון */
.bf-card .bf-step .bf-input,
.bf-card .bf-payment-block .bf-input { background: #fff; border-color: #CBD7E6; }
/* פוקוס: השדה שעורכים כרגע מקבל מסגרת+טבעת navy — רמז "איפה אני" ברור,
   והיררכיית-פעולות. (גובר על מסגרת-השדה-הממולא לעיל.) */
.bf-card .bf-step .bf-input:focus,
.bf-card .bf-payment-block .bf-input:focus {
  border-color: var(--primary-light, #0369A1);
  box-shadow: 0 0 0 3px rgba(3,105,161,.14);
  outline: none;
}

/* כותרות-מקטע ב-navy במקום אפור-מעומעם */
.bf-card .bf-summary-head { color: var(--primary, #0C4A6E); }

/* אייקוני-קו כעוגן ויזואלי לכל מקטע (מונוכרום navy) */
.bf-card label[for="s1City"]::before,
.bf-card label[for="streetName"]::before,
.bf-card label[for="s1Pax"]::before,
.bf-card .bf-tp-wt-label::before,
.bf-card #bfContactHead::before,
.bf-card .bf-payment-block .bf-summary-head::before {
  content: ""; flex: 0 0 auto; width: 16px; height: 16px;
  background-position: center; background-repeat: no-repeat; background-size: contain;
}
.bf-card label[for="s1City"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-6-5.7-6-10a6 6 0 0112 0c0 4.3-6 10-6 10z'/><circle cx='12' cy='11' r='2'/></svg>"); }
.bf-card label[for="streetName"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 11l9-8 9 8'/><path d='M5 10v10h14V10'/></svg>"); }
.bf-card label[for="s1Pax"]::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75'/></svg>"); }
.bf-card .bf-tp-wt-label::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>"); }
.bf-card .bf-payment-block .bf-summary-head::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><path d='M2 10h20'/></svg>"); }
.bf-card #bfContactHead::before { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }

/* טוגל-החזרה: כרטיס רגוע ככל השאר (זהב שמור ל-CTA בלבד — מונע הצפת-צהוב).
   דורס את גרדיאנט-הזהב + הצל-הזהב הישנים של #bfReturnRow. ההדגשה מגיעה
   ממתג-הטוגל עצמו ומהטקסט המודגש, לא מרקע זהוב. */
.bf-card #bfReturnRow {
  background: #F8FAFC;
  border-color: #CBD7E6;
  box-shadow: 0 1px 3px rgba(12,74,110,.06);
}
/* כיבוי טבעת-הזהב הפועמת סביב טוגל-החזרה — רעש זהוב שמתנגש עם הרוגע. */
.bf-card #bfReturnRow::before { display: none; }

/* הדגשת כרטיס-החזרה (שי 2026-07-02) — מנוע-הכנסה: מסגרת+רקע זהב עדינים */
#bfReturnRow {
  border: 1.5px solid rgba(212, 168, 83, .55) !important;
  background: linear-gradient(180deg, rgba(250, 204, 21, .07), rgba(250, 204, 21, .03)) !important;
  box-shadow: 0 1px 6px rgba(212, 168, 83, .12);
}

/* ═══ 🏢 business-mode (עידן 30.7) — סקין עסקי לטופס המשותף ═══ */
.overlay-card.bf-card.business-mode { border-top: 4px solid #7c3aed; }
#stxBizBanner {
  background: linear-gradient(135deg, #f5f3ff, #ede9fe);
  border-bottom: 1px solid #ddd6fe;
  padding: 10px 16px;
  font-size: 13.5px;
  color: #4c1d95;
  border-radius: 14px 14px 0 0;
}
#stxBizBanner .stx-biz-line1 { font-weight: 600; }
#stxBizBanner .stx-biz-line2 { margin-top: 3px; font-size: 13px; color: #5b21b6; }
#stxBizBanner .stx-biz-arrow { opacity: .6; margin: 0 4px; }
#stxBizExit {
  margin-top: 7px; padding: 5px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid #c4b5fd; background: rgba(255,255,255,.75);
  color: #5b21b6; font-size: 12.5px; font-weight: 600;
}
#stxBizExit:hover { background: #fff; }
/* (עידן 30.7) מצב-עסקי מציג אך-ורק מחירים עסקיים; הרגיל מוסתר רק כשמוצג
   עסקי בפועל (data-stx-covered / .stx-biz-hide נקבעים ב-JS בלבד) */
[data-stx-covered="1"] { display: none !important; }
.stx-biz-amt { color: #6d28d9; }
#s1PricePreview.stx-biz-hide > :not(#stxBizPreviewLine) { display: none !important; }
#s1PricePreview.stx-biz-hide #stxBizPreviewLine { font-size: 16px; padding: 10px 12px; }
body.stx-biz-on #bfSumPriceTitle,
body.stx-biz-on #bfSumLineMain, body.stx-biz-on #bfSumLinePeak,
body.stx-biz-on #bfSumLineStrollers, body.stx-biz-on #bfSumLineSafety,
body.stx-biz-on #bfSumLineSport, body.stx-biz-on #bfSumLineLuggage,
body.stx-biz-on #bfSumLineBit, body.stx-biz-on #bfSumLineReturn,
body.stx-biz-on #bfSumLineReturnExtras, body.stx-biz-on #bfSumLineReturnBit { display: none !important; }
@media (prefers-color-scheme: dark) { .stx-biz-amt { color: #c4b5fd; } }
/* (עידן 30.7) תשלום עסקי = ארנק/אשראי בלבד; מזומן/ביט מוסתרים במצב-עסקי */
body.stx-biz-on .bf-payment-option:not(.stx-biz-payopt) { display: none !important; }
.stx-biz-payopt { border-color: #c4b5fd; }
.stx-biz-payopt:has(input:checked) { border-color: #7c3aed; background: #f5f3ff; }
@media (prefers-color-scheme: dark) { .stx-biz-payopt:has(input:checked) { background: #2e1065; } }
/* 113ב (שי 30.7): כתובת גמישה — מילוט-רחוב + ויתור-מספר */
.stx-street-escape {
  display: block; margin: 4px 2px 0; padding: 0; border: 0; background: none;
  color: #64748b; font-size: 12px; text-decoration: underline; cursor: pointer; text-align: right;
}
.stx-street-escape.on { color: #059669; text-decoration: none; font-weight: 600; }
.stx-no-number {
  display: flex; align-items: center; gap: 6px; margin: 4px 2px 0;
  color: #64748b; font-size: 12.5px; cursor: pointer; user-select: none;
}
.stx-no-number input { width: 15px; height: 15px; accent-color: #F5A623; margin: 0; }
@media (prefers-color-scheme: dark) {
  .stx-street-escape { color: #94a3b8; }
  .stx-street-escape.on { color: #34d399; }
  .stx-no-number { color: #94a3b8; }
}
@media (prefers-color-scheme: dark) {
  #stxBizBanner { background: linear-gradient(135deg, #2e1065, #4c1d95); color: #ede9fe; border-bottom-color: #6d28d9; }
  #stxBizBanner .stx-biz-line2 { color: #ddd6fe; }
}
#stxBizPreviewLine {
  margin-top: 6px; padding: 6px 10px; border-radius: 10px;
  background: #f5f3ff; border: 1px solid #ddd6fe;
  color: #5b21b6; font-size: 13.5px; font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  #stxBizPreviewLine { background: #2e1065; border-color: #6d28d9; color: #ddd6fe; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   🔎 162 — נראות שדות-הטופס (אושר ע"י שי 2.8; מוקאפ: _fields-visibility-proposal.html)
   ─────────────────────────────────────────────────────────────────────────
   הבעיה שנמדדה בחי: כל השדות `background:#fff` על כרטיס `#fff` — המפריד
   היחיד היה מסגרת בהירה; ושדה-המועד היה נמוך מהשאר (52px מול 58px) ולכן
   "נבלע". שי מפספס אותו.

   ⚠️ **עיצוב בלבד — אפס נגיעה בלוגיקה, בוולידציה או בתמחור.** רק צבע, מסגרת,
   גובה, ומשקל-גופן. שום כלל כאן לא משנה display/visibility של שדה, כדי שלא
   נחזור על רגרסיית "המחיר האחר נעלם".
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --stx-well: #F4F7FB;        /* רקע-שקע לשדה */
  --stx-wellline: #B9CADD;    /* מסגרת-שדה */
  --stx-gold: #F5C518;
  --stx-ink: #0B1E3F;         /* ערך שמולא — נייבי מודגש */
  --stx-ink-soft: #9AA8B8;    /* placeholder */
  --stx-field-h: 58px;
}

/* (1) רקע-שקע + מסגרת — עיקר התיקון: סוף ללבן-על-לבן */
.overlay-card .bf-input,
.overlay-card .bf-select,
.overlay-card select.bf-input,
.overlay-card .bf-tp-wheel-trigger,
.overlay-card .bf-input-num {
  background: var(--stx-well) !important;
  border: 2px solid var(--stx-wellline) !important;
  border-radius: 12px;
  color: var(--stx-ink);
  font-weight: 700;
}

/* (4) גובה אחיד — כולל טריגר-הגלגל שהיה נמוך ב-5px */
.overlay-card .bf-input,
.overlay-card .bf-select,
.overlay-card select.bf-input,
.overlay-card .bf-tp-wheel-trigger {
  min-height: var(--stx-field-h) !important;
}

/* (5) ערך-שמולא בנייבי מודגש מול placeholder אפור-בהיר */
.overlay-card .bf-input::placeholder { color: var(--stx-ink-soft); font-weight: 500; }
.overlay-card .bf-tp-wheel-trigger .bf-tp-wheel-value:not(.has-value) { color: var(--stx-ink-soft); font-weight: 500; }

/* (6) טבעת-פוקוס זהובה — גם נגישות (ניגודיות ברורה על הרקע החדש) */
.overlay-card .bf-input:focus,
.overlay-card .bf-select:focus,
.overlay-card select.bf-input:focus,
.overlay-card .bf-tp-wheel-trigger:focus-visible,
.overlay-card .bf-input-num:focus {
  outline: none !important;
  border-color: var(--stx-gold) !important;
  box-shadow: 0 0 0 4px rgba(245,197,24,.28) !important;
  background: #fff !important;   /* השדה הפעיל מתבהר — סימן-מיקוד נוסף */
}

/* (2) שדה-חובה ריק — זהב עם פס-קצה; מולא → ניטרלי + וי ירוק.
   ה-hook הוא data-stx-req/data-stx-filled שנכתב ע"י הסקריפט (162), כדי
   שלא ניגע בלוגיקת-הוולידציה עצמה. */
.overlay-card [data-stx-req="1"][data-stx-filled="0"] {
  border-color: var(--stx-gold) !important;
  background: color-mix(in oklab, var(--stx-gold) 9%, var(--stx-well)) !important;
  box-shadow: inset 3px 0 0 var(--stx-gold);
}
/* מולא → **ניטרלי לגמרי, בלי שום סימן** (הכרעת-שי 2.8): לא פס ירוק ולא ✓. */
.overlay-card [data-stx-req="1"][data-stx-filled="1"] { box-shadow: none; }
.stx-field-wrap { position: relative; }
.stx-field-ok { display: none !important; }

/* (3) ⛔ אייקונים הוסרו לבקשת-שי (2.8, עדכון 162) — יחד עם הווי הירוק.
   השדה מסתמך על הרקע/המסגרת/הזהב בלבד, בלי קישוט נוסף. */

/* מובייל — אותם כללים; רק מוודאים שהגובה לא נחתך במסכים צרים */
@media (max-width: 480px) {
  :root { --stx-field-h: 56px; }
  .stx-field-wrap[data-stx-icon]::before { inset-inline-end: 12px; }
}

/* מצב-כהה — שומרים על אותו עיקרון (שקע כהה יותר מהכרטיס) */
@media (prefers-color-scheme: dark) {
  :root { --stx-well: #16233A; --stx-wellline: #2E4560; --stx-ink: #E6EDF7; --stx-ink-soft: #7C8CA3; }
  .overlay-card .bf-input:focus,
  .overlay-card .bf-tp-wheel-trigger:focus-visible { background: #1B2C42 !important; }
}

/* ── 245-1: סה״כ-משוער דביק במסך-המילוי (16.8) ─────────────────────────── */
.bf-live-total{
  position:sticky;bottom:0;z-index:6;width:100%;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;margin-top:8px;border:0;cursor:pointer;
  background:linear-gradient(135deg,#1c2434,#0F172A);
  border-top:2px solid #F5A623;color:#fff;font-family:inherit;
  border-radius:14px 14px 0 0;box-shadow:0 -6px 18px rgba(15,23,42,.25);
  text-align:start;
}
/* 281 (קלוד-של-שי): display:flex דרס את hidden ⇒ הפוטר נשאר גלוי במסכים 2/4. */
.bf-live-total[hidden],.bf-lt-breakdown[hidden]{display:none !important}
.bf-live-total .bf-lt-label{font-size:13px;color:#cbd5e1;font-weight:600}
.bf-live-total .bf-lt-amt{font-size:20px;font-weight:800;color:#F5A623;margin-inline-start:auto}
.bf-live-total .bf-lt-hint{font-size:11px;color:#94a3b8}
.bf-live-total.bf-lt-flash .bf-lt-amt{animation:bfGoldFlash .9s ease}
@keyframes bfGoldFlash{
  0%{color:#fff;text-shadow:0 0 14px rgba(245,166,35,.95);transform:scale(1.12)}
  60%{color:#F5A623;text-shadow:0 0 6px rgba(245,166,35,.5)}
  100%{color:#F5A623;text-shadow:none;transform:scale(1)}
}
.bf-lt-breakdown{
  position:sticky;bottom:0;z-index:5;background:#111a2b;color:#e2e8f0;
  border-inline:2px solid #F5A623;border-bottom:2px solid #F5A623;
  border-radius:0 0 14px 14px;padding:10px 14px;font-size:13px;
}
.bf-lt-breakdown .bf-lt-row{display:flex;justify-content:space-between;padding:3px 0}
.bf-lt-breakdown .bf-lt-row.total{border-top:1px solid #334155;margin-top:6px;padding-top:7px;font-weight:800;color:#F5A623}

/* ── 271 (הכרעת-שי 17.8): טופס-מובייל = דף-מסך-מלא, לא "בועה" ────────────────
   נמדד ב-375px: הכרטיס 309px, 33px שוליים כהים, ריפוד כבד ⇒ שדות 63% מהמסך.
   במובייל (≤600px) ה-overlay נפרש לרוחב-מלא, בלי-רדיוס/צל, רקע-לבן, כותרת+X
   דביקים, פוטר-הסה"כ/המשך דביק. בדסקטופ הבועה נשארת. הפריסה הפנימית לא נוגעים. */
@media (max-width: 600px) {
  .overlay {
    padding: 0 !important;
    background: var(--surface, #fff) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    align-items: stretch !important; justify-content: stretch !important;
  }
  .overlay-wrap { max-width: none !important; width: 100% !important; margin: 0 !important; }
  /* 288 (חוסם, שי 18.8 02:30): min-height בלי max-height מתח את הכרטיס לגובה-התוכן (2037px) ⇒
     לא היה מה לגלול והתוכן נשפך מחוץ למסך. הכרטיס = **מיכל-הגלילה** בגובה-מסך קבוע
     (100dvh, overflow-y:auto); הכותרת/X והפוטר נשארים sticky בתוכו. */
  .overlay-card {
    width: 100% !important; max-width: none !important;
    height: 100vh !important; height: 100dvh !important;
    min-height: 0 !important; max-height: 100vh !important; max-height: 100dvh !important;
    overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    margin: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    padding: 12px 16px 24px !important;
    padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    animation: none !important;
  }
  /* 289: ה-X (fixed 10/10, 40px) ישב על כותרת "פרטי הנסיעה" — מרווח-פנימי בצד ה-X. */
  /* ה-X ב-inset-inline-start (=ימין ב-RTL) והכותרת מתחילה מימין ⇒ המרווח חייב להיות inline-START (נמדד: טקסט 235-359, X 325-365). */
  .overlay-card .overlay-title, .overlay-card #ovTitle, .overlay-card .bf-screen-title { padding-inline-start: 52px !important; }
  /* כותרת + X דביקים למעלה */
  .overlay-card > .bf-header, .overlay-card > .overlay-header, .overlay-card .bf-screen-title { position: sticky; top: 0; z-index: 7; background: var(--surface, #fff); }
  .overlay-close { position: fixed !important; top: calc(10px + env(safe-area-inset-top, 0px)) !important; inset-inline-start: 10px !important; z-index: 8; }
  /* 293: פס-תשלום אחד דביק למטה — משמאל הסכום (flex:1), מימין כפתור "המשך". הפירוט
     (#bfLiveTotalBd) דביק מעל הפס. */
  .overlay-card > .bf-pay-bar, .bf-lt-breakdown { position: sticky; bottom: 0; }
  .overlay-card > .bf-pay-bar {
    z-index: 6; background: var(--surface, #fff);
    display: flex; align-items: stretch; gap: 8px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    /* 🎯 עידן 19.8 (ריצוד — אירנה): גובה-מינימום קבוע כדי שהפס לא "יברח למעלה/
       למטה" כשתוכן משתנה (כפתור מופיע/נעלם, סכום מתעדכן). */
    min-height: 56px;
  }
  .bf-pay-bar .bf-live-total { position: static; flex: 1 1 auto; margin: 0; border-radius: 12px; }
  .bf-pay-bar .overlay-nav-single { position: static; flex: 0 0 auto; margin: 0; padding: 0; min-width: 40%; }
  .bf-lt-breakdown { z-index: 6; background: var(--surface, #fff); }
  /* .bf-step מוסיף 16+16 ריפוד-פנימי (כפילות עם ריפוד-הכרטיס) ⇒ שדה 309px=82%.
     מאפסים ⇒ 343px = 91% (קריטריון-שי ≥90%). */
  .overlay-card .bf-step { padding-left: 0 !important; padding-right: 0 !important; }
}

/* ── 459 (שי 26.8): פירוט-המחיר מעל פס-התשלום — קיבוע ה-hotfix מ-design_custom_css
   בקוד, במובייל בלבד (בדסקטופ הפאנל בתחתית-הכרטיס בלי חפיפה — נשאר כהה).
   הפאנל הפך לבן ⇒ הטקסט חייב להתכהות (הישן #e2e8f0 על לבן = "אפור-דהוי" —
   בדיוק תלונת-שי על שורת רכב-למזוודות). */
@media (max-width: 600px) {
  .bf-lt-breakdown {
    bottom: 64px; z-index: 7;
    background: var(--surface, #fff); color: #0f172a;
    border-inline: 0; border-bottom: 0;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -6px 18px rgba(15, 40, 80, .14);
    padding: 12px 16px; margin-bottom: 0;
  }
  .bf-lt-breakdown .bf-lt-row { padding: 5px 0; font-size: 13.5px; color: #334155; font-weight: 500; }
  .bf-lt-breakdown .bf-lt-row.total { border-top: 1px solid #e2e8f0; color: #b45309; }
}

/* ── 477 (שי 31.8, GOLIVE-1B): חלון-ההיסטוריה יציב — "הזזה אחת" בלבד ────────
   במובייל גרירה הזיזה גם את הגיליון/רקע וגם את התוכן ("שתי הזזות"). הגלילה
   שייכת אך-ורק ל-.bf-modal-body: השכבות שמעליה לא מקבלות מחוות-מגע, והגלילה
   הפנימית לא משתרשרת לרקע (overscroll chaining / rubber-band). */
.bf-modal.open { touch-action: none; overscroll-behavior: contain; }
.bf-modal.open .bf-modal-card { touch-action: pan-y; }
.bf-modal.open .bf-modal-body {
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}