/* Booking funnel. Added by funnel.py, not by the page generator.
   Tokens and button classes come from style.css, so this file stays small. */
/* Floating buttons, no strip behind them (Zaydan, 21 Oct 2026). The bar itself is see-through
   and lets taps fall through to the page; only the buttons catch them. */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;pointer-events:none;
  padding:0 var(--gutter) calc(14px + env(safe-area-inset-bottom));
  transform:translateY(140%);transition:transform .18s ease-out;visibility:hidden}
.cta-bar[data-on]{transform:none;visibility:visible}
@media (prefers-reduced-motion:reduce){.cta-bar{transition:none}}
.cta-bar-in{max-width:1120px;margin:0 auto;display:flex;gap:10px;align-items:center;justify-content:center}
.cta-bar .btn{pointer-events:auto;flex:0 1 auto;justify-content:center;min-height:52px;white-space:nowrap;
  box-shadow:0 6px 22px rgba(19,26,28,.32)}
.cta-num{display:none}
@media (min-width:560px){.cta-num{display:inline}}
/* Room for the bar goes inside the footer, so the green runs all the way down
   behind it instead of leaving a pale strip under the last line. */
body[data-cta] .foot{padding-bottom:calc(var(--cta-h,84px) + 16px)}

.next{background:var(--ground);color:#fff;border-radius:var(--r);padding:24px;margin:28px 0 0}
.next h2{color:#fff;font-size:clamp(21px,3.6vw,26px);margin:0 0 10px;display:block}
.next .eyebrow{color:var(--signal);margin:0 0 6px}
.next p{margin:0 0 14px;color:#dbe7e0;max-width:62ch}
.next .next-offer{color:#fff}
.next .next-offer strong{color:var(--signal)}
.next-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.next-actions .btn{min-height:48px}
.next-actions .btn--ghost{border-color:rgba(255,255,255,.5);color:#fff}
.next-actions .btn--ghost:hover{background:rgba(255,255,255,.12)}
.next-fine{font-size:14px;color:#b4cdbf;margin:14px 0 0}

/* Back to the booking (task PL04, W74): only on a guide opened from the booking page. */
.back-bar{background:var(--tint);border-bottom:1px solid var(--line)}
.back-book{display:flex;align-items:center;gap:8px;max-width:1120px;min-height:48px;margin:0 auto;
  padding:6px var(--gutter);color:var(--mark);font-size:15px;font-weight:700;line-height:1.35;text-decoration:none}
.back-book .t{text-decoration:underline;text-underline-offset:3px}
.back-book:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}

@media print{.back-bar{display:none}.cta-bar{display:none}body[data-cta] .foot{padding-bottom:0}
  .next{background:none;color:var(--ink);border:1px solid var(--line)}
  .next h2,.next p,.next .next-offer,.next-fine{color:var(--ink)}}

/* Always light, on white, like the booking page (Zaydan, 27 Oct 2026). A phone in dark mode used to
   turn the library dark green. style.css loads after this file, so each rule here is one step more
   specific (html:root, html .x) and wins whatever the phone's setting. */
html:root{--paper:#ffffff;color-scheme:light}
@media (prefers-color-scheme:dark){
  html:root{--paper:#ffffff;--surface:#ffffff;--text:#131a1c;--muted:#525c56;--line:#d9e1d8;
    --tint:#e9f0e7;--mark:#2a7a24;--glance-k:#b4cdbf;
    --hero-bg:var(--signal);--hero-ink:var(--ink);--frame:var(--ink);
    --shadow:0 1px 2px rgba(19,26,28,.05),0 6px 20px rgba(19,26,28,.06);color-scheme:light}
  html .call--ink,html .hero .call--ink{background:var(--ink);color:#fff}
  html .search input{border-color:var(--ink)}
  html .search input:focus{box-shadow:0 0 0 4px rgba(19,26,28,.22)}
  html .tile-snip mark{background:rgba(0,255,56,.35)}
}