/* Shared site chrome (header, mobile menu, footer, floating buttons, FAQ
   popup) — used on every page via inc/site_header.php and
   inc/site_footer.php, so index.php and booking.php (and any page added
   later) look and behave identically (confirmed 2026-09-20). Requires the
   :root variables and base reset already defined in each page's own
   <style> block (--blue-light, --orange, --orange-dark, --ink,
   --fondboxbleu, --fondboutonbleu, --grey, --grey-light, --white,
   --radius, --shadow). */

/* ===== HEADER ===== */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e2e8f0;
}
.nav-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo img { height: 46px; display: block; }
.logo-text { font-size: 25px; font-weight: 800; letter-spacing: -0.01em; }
.logo-text .l-ski { color: var(--ink); }
.logo-text .l-cab { color: var(--orange); font-style: italic; }
.logo-text .l-com { color: var(--ink); }
/* Staff-only reminder shown next to the logo while @spay (record a booking
   with no payment taken) is active on the current URL — confirmed
   2026-09-23. */
.spay-indicator {
  width: 11px; height: 11px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.25);
  margin-left: 4px; flex-shrink: 0;
}
/* Same idea for @quote (send-a-quote workflow) — red, never both at once
   in practice, but each renders independently regardless (confirmed
   2026-09-23). */
.quote-indicator {
  width: 11px; height: 11px; border-radius: 50%;
  background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.25);
  margin-left: 4px; flex-shrink: 0;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 28px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}
nav ul li a:hover { color: var(--orange); }
/* Airports/Train Stations/Cities each open a short dropdown of their most
   requested destinations on hover, ending with a link to that category's
   own generic page (confirmed 2026-09-24). Ski Resorts stays a plain link
   for now, to get the same treatment later. */
.nav-drop { position: relative; }
.nav-drop-chev { margin-left: 2px; vertical-align: 1px; transition: transform .15s ease; }
.nav-drop:hover .nav-drop-chev, .nav-drop.open .nav-drop-chev { transform: rotate(180deg); }
.nav-dropdown {
  /* Flush against the nav item's own bottom edge (no gap, no margin) so the
     mouse never crosses a dead zone between the two while moving down from
     the link into the dropdown — a gap there was breaking :hover entirely
     (confirmed 2026-09-24). */
  display: block; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  background: white; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: var(--shadow);
  min-width: 190px; padding: 8px;
  list-style: none;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease;
  z-index: 150;
}
.nav-drop:hover .nav-dropdown, .nav-drop:focus-within .nav-dropdown, .nav-drop.open .nav-dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
}
.nav-dropdown li { display: block; }
.nav-dropdown li a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap;
}
.nav-dropdown li a:hover { background: var(--grey-light); color: var(--orange); }
/* Non-clickable section heading inside a dropdown, e.g. "France" over the
   11 French resort links in the Ski Resorts menu (confirmed 2026-09-24) —
   same idea as .section-head's eyebrow, scaled down for a nav dropdown. */
.nav-dropdown-label {
  padding: 10px 12px 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--orange);
}
.nav-dropdown-label:first-child { padding-top: 4px; }
/* The Ski Resorts dropdown lists every resort page grouped by country
   (confirmed 2026-09-24) rather than the 4-5 items every other nav
   dropdown has, so it needs its own scroll cap instead of spilling off
   the bottom of the screen. */
.nav-dropdown-scroll { max-height: 70vh; overflow-y: auto; }
.nav-cta {
  background: var(--fondboutonbleu);
  color: white;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
}
.nav-right { display: flex; align-items: center; gap: 7px; }
.nav-cta-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: var(--fondboutonbleu);
  color: white;
  border-radius: 999px;
}
.hamburger-btn {
  display: none;
  color: var(--ink);
  cursor: pointer;
  padding: 6px;
}
.mobile-menu-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8,16,32,0.55);
  z-index: 399;
}
.mobile-menu-overlay.open { display: block; }
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(320px, 85vw);
  box-sizing: border-box;
  background: white;
  z-index: 400;
  display: flex;
  flex-direction: column;
  padding: 20px 28px 32px;
  overflow-y: auto;
  box-shadow: -10px 0 40px rgba(0,0,0,0.25);
  transform: translateX(100%);
  transition: transform .3s ease;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu-close {
  align-self: flex-end;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 12px;
}
.mobile-menu-close:hover { color: var(--orange); }
.mobile-menu a {
  padding: 14px 4px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.mobile-menu a:hover { color: var(--orange); }
/* Login icon, name/"Log in" label and the "My booking" pill all stacked
   and centered at the top of the mobile menu (confirmed 2026-09-24) —
   replaces the previous two side-by-side icon+label rows. The overrides
   below beat .mobile-menu a's own padding/border-bottom/color via a more
   specific selector rather than !important. */
.mobile-menu-profile {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 8px 0 24px; border-bottom: 1px solid #f1f5f9; margin-bottom: 8px;
}
.mobile-menu .mobile-menu-profile #loginMobile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0; border-bottom: none; color: var(--ink);
}
.mobile-menu .mobile-menu-profile .nav-cta {
  /* .nav-cta is display:none below 500px so the desktop header can swap
     it for .nav-cta-icon instead (confirmed 2026-09-20) — that rule still
     applies here since nothing above it touches `display`, so it has to
     be undone explicitly rather than just overriding padding/color. */
  display: inline-block; padding: 12px 32px; border-bottom: none; color: white;
}
/* Same Airports/Train Stations/Cities dropdowns as the desktop nav, as a
   tap-to-expand accordion instead of hover (confirmed 2026-09-24). */
.mobile-nav-group { border-bottom: 1px solid #f1f5f9; }
.mobile-menu .mobile-nav-group .mobile-nav-parent {
  border-bottom: none; display: flex; align-items: center; justify-content: space-between;
}
/* The trigger turns orange while its submenu is open (confirmed
   2026-09-24), so it's obvious which section you're looking at — the
   chevron picks it up for free since its stroke is currentColor. */
.mobile-nav-group.open > .mobile-nav-parent { color: var(--orange); }
.mobile-nav-chev { transition: transform .2s ease; flex-shrink: 0; }
.mobile-nav-group.open .mobile-nav-chev { transform: rotate(180deg); }
/* Expanded options sit inside their own light grey, slightly raised card
   (confirmed 2026-09-24) — same white-card-on-shadow language as
   .nav-dropdown on desktop, just in grey, so it's obvious at a glance
   which section you've opened instead of the plain list this used to be.
   margin only applies once open, since a fixed margin on the collapsed
   (max-height:0) element would otherwise show as dead space. */
.mobile-submenu {
  max-height: 0; overflow: hidden;
  transition: max-height .25s ease, margin .25s ease;
  background: var(--grey-light); border-radius: 12px; box-shadow: var(--shadow);
}
.mobile-nav-group.open .mobile-submenu { max-height: 300px; margin: 10px 0 18px; }
/* Ski Resorts lists every resort page grouped by country (confirmed
   2026-09-24) rather than the 4-5 items every other mobile submenu has,
   so its accordion needs a much taller cap than the shared 300px above —
   the surrounding .mobile-menu itself already scrolls, so this only needs
   to be tall enough not to clip the last link. */
.mobile-nav-group.open .mobile-submenu.mobile-submenu-tall { max-height: 1400px; }
.mobile-menu .mobile-submenu a {
  display: block; padding: 12px 16px; font-size: 14px; font-weight: 500; border-bottom: 1px solid rgba(15,23,42,0.08);
}
.mobile-menu .mobile-submenu a:last-child { border-bottom: none; }
/* Non-clickable section heading inside a mobile submenu, mirroring
   .nav-dropdown-label on desktop (confirmed 2026-09-24). */
.mobile-submenu-label {
  padding: 12px 16px 4px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--orange);
}
.login-header-link { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.login-header-icon { flex-shrink: 0; }
@media (max-width: 1024px) {
  nav { display: none; }
  .hamburger-btn { display: block; }
  /* Space is tight once the hamburger shows — collapse "Log in" to just
     the icon so it's still one click away without opening the menu, but
     keep showing a logged-in customer's firstname so they can tell at a
     glance who's connected (confirmed 2026-09-20). */
  .login-header-link:not(.logged-in) .login-header-label { display: none; }
  /* The label just disappeared above, so the plain icon was left stranded
     at its small inline size next to the much bigger "My booking" pill
     until the page also happened to cross the 550px breakpoint below —
     enlarge it here instead, right when the label itself goes (confirmed
     2026-09-24). Logged-in keeps its label (and the icon at inline size)
     until 550px, where the rule below still applies. */
  .login-header-link:not(.logged-in) .login-header-icon { width: 38px; height: 38px; }
}
@media (max-width: 600px) {
  .nav-right a:not(.nav-cta):not(.nav-cta-icon):not(.login-header-link) { display: none; }
}
@media (max-width: 550px) {
  /* The firstname competing for space with the "My booking" pill was
     wrapping it onto two lines at this width — hiding it here (rather
     than waiting for the 500px breakpoint below) keeps "My booking" on
     one line the whole way down to where it becomes an icon anyway
     (confirmed 2026-09-20). Sized to match the "My booking" icon's 38px
     circle once collapsed, instead of staying at its inline size. */
  .login-header-link.logged-in .login-header-label { display: none; }
  .login-header-icon { width: 38px; height: 38px; }
  /* 24px of padding each side was actually overflowing past the
     viewport at phone widths once both icons + hamburger are showing —
     shrinking it frees enough room to fit cleanly instead of clipping
     (confirmed 2026-09-20). */
  .nav-wrap { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 500px) {
  .nav-cta { display: none; }
  .nav-cta-icon { display: flex; }
  .nav-right { gap: 8px; }
  /* The hamburger's own padding already adds visual space around its
     lines, so the gap-driven spacing before it reads as too wide next to
     the tighter login-icon/booking-icon pairing — pull it in specifically
     rather than shrinking every gap further (confirmed 2026-09-20). */
  .hamburger-btn { margin-left: -6px; }
}

/* ===== FOOTER ===== */
footer.site-footer { background: var(--fondboxbleu); color: rgba(255,255,255,0.6); padding: 56px 24px 0; font-size: 13.5px; }
.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
}
.footer-col h4 { color: white; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 16px; }
.footer-col a, .footer-col p { display: block; color: rgba(255,255,255,0.6); margin-bottom: 10px; line-height: 1.6; }
.footer-col a:hover { color: var(--orange); }
.footer-logo-row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.footer-logo-row img { height: 40px; }
.footer-logo-row .logo-text { font-size: 19px; }
.footer-logo-row .l-ski, .footer-logo-row .l-com { color: white; }
.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social a {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0;
}
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; }
}

/* ===== FAQ ===== */
.faq-float-btn {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 300;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--fondboxbleu);
  color: white;
  border: 1.5px solid var(--orange);
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 10px 25px -6px rgba(0,0,0,0.35);
}
.faq-float-btn .q-circle {
  width: 22px; height: 22px;
  border: 1.5px solid var(--orange);
  color: var(--orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.faq-float-btn.open {
  width: 54px;
  height: 54px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
.faq-float-btn.open .faq-btn-label { display: none; }
.whatsapp-float-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 300;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 25px -6px rgba(0,0,0,0.35);
}
.whatsapp-float-btn:hover { filter: brightness(1.05); }
/* Stacked directly above the WhatsApp button, same size, so the two read
   as a single pair of floating contact buttons (confirmed 2026-09-24). */
.instagram-float-btn {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: 300;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 25px -6px rgba(0,0,0,0.35);
}
.instagram-float-btn:hover { filter: brightness(1.05); }
.faq-float-btn.open .q-circle {
  width: auto; height: auto;
  border: none;
  color: white;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.faq-popup {
  position: fixed;
  left: 24px;
  bottom: 92px;
  z-index: 299;
  width: 380px;
  max-width: calc(100vw - 48px);
  height: min(560px, 70vh);
  display: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4), 0 0 40px rgba(255,255,255,0.18), 0 25px 60px -15px rgba(0,0,0,0.45);
  border-radius: 20px;
}
.faq-popup.open { display: block; }
.faq-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.faq-card-header {
  flex-shrink: 0;
  background: var(--fondboxbleu);
  padding: 30px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.faq-card-header h2 { color: white; font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.faq-card-header p { color: rgba(255,255,255,0.7); font-size: 13px; }
.faq-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 14px;
}
.faq-close:hover { background: rgba(255,255,255,0.25); }
.btn-ask {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: white;
  border: 1.5px solid var(--orange);
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
}
.btn-ask .q-circle {
  width: 18px; height: 18px;
  border: 1.5px solid var(--orange);
  color: var(--orange);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 800;
}
.faq-card-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-top: 18px;
}
.faq-search-wrap { flex-shrink: 0; padding: 0 32px; }
.faq-search {
  display: flex; align-items: center; gap: 10px;
  background: var(--grey-light);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 4px;
  color: var(--grey);
}
.faq-search input {
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 14px; color: var(--ink); width: 100%;
}
.faq-search input::placeholder { color: #94a3b8; }
.faq-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 32px 0; }
.faq-list { display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; }
.faq-item {
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 0 16px;
}
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 2px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
  gap: 12px;
}
.faq-q .chev { color: var(--grey); transition: transform .2s; flex-shrink: 0; }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-item.open { border-color: var(--orange); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
  font-size: 13.5px;
  color: var(--grey);
  line-height: 1.6;
}
.faq-item.open .faq-a { max-height: 200px; padding-bottom: 16px; }
.faq-contact-wrap {
  flex-shrink: 0;
  border-top: 1px solid #e2e8f0;
  padding: 7px 32px 16px;
  background: var(--grey-light);
  box-shadow: 0 -6px 12px -8px rgba(15,23,42,0.2);
}
.faq-contact-form-title {
  display: none;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  text-align: center;
  margin-bottom: 8px;
}
.faq-contact-form { display: none; flex-direction: column; gap: 6px; margin-top: 4px; text-align: left; }
.faq-contact-wrap.form-open .faq-contact-text { display: none; }
.faq-contact-wrap.form-open .faq-contact-form-title { display: block; }
.faq-contact-wrap.form-open .faq-contact-form { display: flex; }
.faq-contact-input, .faq-contact-textarea {
  width: 100%;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  resize: none;
  transition: border-color .15s;
}
.faq-contact-input::placeholder, .faq-contact-textarea::placeholder { color: #94a3b8; }
.faq-contact-input:focus, .faq-contact-textarea:focus { border-color: var(--blue-light); }
.faq-contact-send {
  background: var(--orange);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 9px;
  font-weight: 700;
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}
.faq-contact-send:hover:not(:disabled) { background: var(--orange-dark); }
.faq-contact-send:disabled { background: #fdd3a8; cursor: not-allowed; }

/* Shared with the quote page's own "Got a special request?" row (same
   markup pattern) — moved here because the FAQ popup's "Another question?"
   row reuses these same classes and was rendering unstyled on any page
   that doesn't also carry index.php's own inline quote-box styles
   (confirmed 2026-09-20, booking.php was missing this entirely). */
.quote-contact {
  display: flex;
  align-items: center;
  gap: 10px;
}
.quote-contact-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--grey);
}
.quote-contact-icons { display: flex; align-items: center; gap: 8px; }
.quote-contact-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #e0e9f2;
  color: var(--ink);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.quote-contact-icon:hover { background: var(--ink); color: white; }
.quote-contact-icon.whatsapp { background: #d2f4df; color: #1DA851; }
.quote-contact-icon.whatsapp:hover { background: #25D366; color: white; }

/* Honeypot anti-spam field (used by the FAQ contact form, the quote page's
   special-request form, and booking-view.php's message form): off-screen,
   not display:none, so most bots that skip hidden inputs still fill it in,
   but real users never see it. Also missing from booking.php before this
   move (confirmed 2026-09-20). Its `readonly` HTML attribute (confirmed
   2026-09-23, after a real Chrome user's own address-autofill silently
   filled it) blocks Chrome's autofill specifically — name="company" is one
   of the field names Chrome's address-autofill heuristic recognizes and
   fills despite autocomplete="off", exactly like the booking form's own
   Country field earlier. readonly doesn't weaken the honeypot itself: a
   scripted bot sets .value via JS, which ignores readonly same as it
   already ignores hidden/off-screen positioning. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

/* ===== LOGIN MODAL ===== */
.login-modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(8,16,32,0.55);
  z-index: 500;
}
.login-modal-overlay.open { display: block; }
.login-modal {
  display: none;
  position: fixed;
  /* Pinned just below the sticky header rather than centered — stays in
     the same spot whether the visitor is scrolled down or not. 90px
     confirmed to sit right (2026-09-20). */
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  width: min(400px, 85vw);
  background: white;
  border-radius: 20px;
  box-shadow: var(--shadow);
  z-index: 501;
  padding: 30px 24px 24px;
}
.login-modal.open { display: block; }
.login-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--grey-light);
  color: var(--grey);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.login-modal-close:hover { background: #e2e8f0; color: var(--ink); }
.login-modal h3 { font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.login-modal-sub { font-size: 13px; color: var(--grey); margin-bottom: 16px; }
/* The Contact modal's own address block — one line per address part, with
   an icon in front of the phone (call + WhatsApp) and email lines
   (confirmed 2026-09-24). */
.login-modal-contact-line { display: inline-flex; align-items: center; gap: 5px; }
.login-modal-contact-line a { color: inherit; text-decoration: none; }
.login-modal-contact-line a:hover { text-decoration: underline; }
.login-modal-contact-line svg { flex-shrink: 0; color: #e97207; }
.login-modal form { display: flex; flex-direction: column; gap: 10px; }
.login-modal input, .login-modal textarea {
  border: 1.5px solid #e2e8f0; border-radius: 10px;
  padding: 11px 14px; font-size: 14px; font-family: inherit; color: var(--ink);
  outline: none; width: 100%; resize: vertical;
}
.login-modal input:focus, .login-modal textarea:focus { border-color: var(--blue-light); }
.login-error { font-size: 12.5px; color: #ef4444; font-weight: 600; }
.login-success { font-size: 12.5px; color: #16a34a; font-weight: 600; text-align: center; }

/* ===== CONTENT MODAL ===== */
/* Wide, scrollable centered modal for anything longer than the small
   login-modal fits — reviews, and the footer's About us / Secured
   payments / Terms & Conditions / Privacy policy (confirmed 2026-09-24).
   Moved out of index.php, where it started as reviews-only, so every page
   can reuse the exact same chrome via toggleContentModal() in
   js/site_chrome.js. */
.content-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(8,16,32,0.55);
  z-index: 400;
}
.content-modal-overlay.open { display: block; }
.content-modal {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, 92vw);
  max-height: 80vh;
  background: white;
  border-radius: 20px;
  box-shadow: var(--shadow);
  z-index: 401;
  overflow: hidden;
}
.content-modal.open { display: flex; }
.content-modal-header {
  flex-shrink: 0;
  padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #e2e8f0;
}
.content-modal-header h3 { font-size: 18px; font-weight: 800; color: var(--ink); }
.content-modal-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--grey-light);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--grey);
  flex-shrink: 0;
}
.content-modal-close:hover { background: #e2e8f0; color: var(--ink); }
.content-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 24px; }
.content-modal-body p { font-size: 13.5px; line-height: 1.6; color: var(--ink); margin-bottom: 12px; text-align: justify; }
/* Each sub-heading inside About us/Secured payments/Terms & Conditions/
   Privacy policy (inc/legal_content.php) is a <strong> at the start of its
   own <p>, orange to stand out from the justified body text below it
   (confirmed 2026-09-24, matching .e-title's own orange in the emails). */
.content-modal-body p > strong:first-child { display: block; color: #e97207; margin-bottom: 4px; text-align: left; }

/* Same legal_content.php text, shown as a full indexable page instead of a
   modal (about-us-skicab.php etc., confirmed 2026-09-24) — same justified
   body/orange sub-heading rules as .content-modal-body, just without the
   fixed-height/overflow mechanics a modal needs. */
.legal-page-card { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 28px; }
.legal-page-card h1 { font-size: 22px; font-weight: 800; color: var(--ink); margin-bottom: 20px; }
.legal-page-card p { font-size: 14px; line-height: 1.7; color: var(--ink); margin-bottom: 14px; text-align: justify; }
.legal-page-card p > strong:first-child { display: block; color: #e97207; margin-bottom: 4px; text-align: left; font-size: 15px; }

/* sitemap.php's own destination groups (confirmed 2026-09-24) — same
   content as the pre-redesign site's sitemap_inc.php, wrapped in a
   responsive multi-column layout instead of the legacy left-hand list. */
.sitemap-groups { columns: 220px 4; column-gap: 24px; }
.sitemap-groups .groupe { break-inside: avoid; margin-bottom: 20px; display: flex; flex-direction: column; }
.sitemap-groups .cat { font-size: 13px; font-weight: 800; color: #e97207; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
.sitemap-groups .liste { font-size: 13.5px; color: var(--ink); padding: 3px 0; }
.sitemap-groups .liste:hover { text-decoration: underline; }
.sitemap-groups .dropdown-menu-titre { color: var(--grey); }
.content-modal-item { padding: 16px 0; border-bottom: 1px solid #f1f5f9; }
.content-modal-item:last-child { border-bottom: none; }
.content-modal-footer { flex-shrink: 0; padding: 16px 24px; text-align: center; border-top: 1px solid #e2e8f0; }
.content-modal-empty { text-align: center; color: var(--grey); padding: 24px 0; font-size: 14px; }

/* Shared breadcrumb (Home > current page) and "Back to home" button, moved
   here from being copy-pasted per page (pay-balance-result.php,
   payment_result.php etc.) so every sitemap-linked page (about-us-skicab.php
   and friends) can use the exact same markup/look (confirmed 2026-09-24). */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.bc-step { color: #94a3b8; }
.bc-step.done { color: var(--ink); cursor: pointer; }
.bc-step.done:hover { text-decoration: underline; }
.bc-step.active { color: var(--orange-dark); }
.bc-sep { color: #cbd5e1; }
/* Size and shape live on the plain and :visited states only. They used to sit
   in the same rule as :hover, and a :hover rule is more specific than a page's
   own .result-btn rule, so on a page that sizes these buttons differently
   (account.php) the shared width/padding/margin took over on hover and the
   buttons visibly grew under the mouse (reported 2026-09-25). Only the colours
   stay in the :hover rule, to keep them from changing on hover. */
.result-btn, .result-btn:visited {
  display: inline-block; width: 210px; text-align: center;
  border: none; padding: 13px 20px; border-radius: 12px; font-size: 14px; font-weight: 700;
  cursor: pointer; margin: 0 6px 8px;
}
.result-btn, .result-btn:hover, .result-btn:visited {
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color: white;
}
.result-btn-secondary, .result-btn-secondary:visited {
  display: inline-block; width: 210px; text-align: center;
  padding: 13px 20px; border-radius: 12px; font-size: 14px; font-weight: 700; margin: 0 6px 8px;
}
.result-btn-secondary, .result-btn-secondary:hover, .result-btn-secondary:visited {
  background: var(--ink); color: white;
}
.legal-page-footer-nav { text-align: center; margin-top: 24px; }

/* ===== LOCATION PAGES (airport-transfers/chambery/, transfers/val-d-isere/
   and future destination pages, confirmed 2026-09-24) — a small shared
   template so every new location page looks consistent without each one
   re-declaring the same hero/quote-cta/info-grid rules. The interactive
   quote engine itself stays on index.php (autocomplete, live pricing,
   calendars — all of that lives only there); a location page's own
   "quick quote" is a simpler, honest link into it with the from/to
   already chosen, not a duplicate booking widget. */
.loc-hero {
  position: relative;
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
  min-height: 56vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  padding: 60px 24px;
}
.loc-hero-inner { position: relative; max-width: 720px; }
.loc-hero h1 { font-size: clamp(28px, 4.5vw, 44px); font-weight: 800; line-height: 1.15; margin: 14px 0; letter-spacing: -0.02em; }
.loc-hero p { font-size: 16px; color: rgba(255,255,255,0.88); line-height: 1.6; max-width: 620px; margin: 0 auto; }
/* Wraps a real embedded inc/quote_widget.php on a destination page —
   .quote-card already styles itself (white, shadow, rounded, own padding),
   this just centers and overlaps it onto the hero the same way
   .loc-quote-cta used to (confirmed 2026-09-23). */
.loc-quote-widget-wrap { max-width: 900px; margin: -40px auto 0; position: relative; padding: 0 16px; }
.loc-quote-cta {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: -32px auto 0;
  position: relative;
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.loc-quote-cta-text { text-align: left; }
.loc-quote-cta-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grey); margin-bottom: 2px; }
.loc-quote-cta-value { font-size: 17px; font-weight: 800; color: var(--ink); }
.loc-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0; }
@media (max-width: 700px) { .loc-info-grid { grid-template-columns: 1fr; } }
.loc-info-card { background: white; border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 24px; }
.loc-info-card h2 { font-size: 16px; font-weight: 800; color: var(--ink); border-bottom: 3px solid var(--orange); padding-bottom: 10px; margin-bottom: 12px; display: inline-block; }
.loc-info-card p { font-size: 14px; line-height: 1.7; color: var(--ink); text-align: justify; }
.loc-reviews-section { margin: 32px 0; }
.loc-reviews-section h2 { font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 4px; }
.loc-reviews-section > p { font-size: 13.5px; color: var(--grey); margin-bottom: 16px; }

/* @quote's "Send a quote" popup only: the copyable resume-link row
   (readonly field + Copy button), same idea as payment_result.php's own
   @spay copy-link row but sized to fit inside the narrow login-modal
   popup (confirmed 2026-09-23). */
.send-quote-link-row { display: flex; gap: 8px; }
.send-quote-link-row input {
  flex: 1; min-width: 0; font-size: 12px; background: var(--grey-light);
}
.send-quote-copy-btn {
  flex-shrink: 0; background: var(--grey-light); border: 1.5px solid #e2e8f0; color: var(--ink);
  padding: 0 14px; border-radius: 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.send-quote-copy-btn:hover { border-color: var(--blue-light); }

/* Small "x" clear button inside a text field, shown only once it has
   content — this is index.php's own long-established quote-form pattern
   (.field-clear, moved here 2026-09-21 so it's shared instead of duplicated
   in index.php's own <style>), now the default for every text field going
   forward. Wrap any input/textarea in .field-clearable with a sibling
   .field-clear span and js/site_chrome.js wires it up automatically — no
   per-field JS needed. */
/* width:100% on both the wrapper and the field itself: a bare <div> with no
   explicit width can still end up shrink-to-fit as a flex item in some
   contexts (same class of bug already hit on .page-wrap elsewhere), which
   left the "x" floating outside the field's own right edge instead of
   inside it (confirmed 2026-09-21). */
.field-clearable { position: relative; width: 100%; }
.field-clearable input, .field-clearable textarea { width: 100%; box-sizing: border-box; padding-right: 40px; }
.field-clear {
  display: none;
  position: absolute;
  right: 14px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--grey);
  cursor: pointer;
  background: var(--grey-light);
}
.field-clear:hover { background: #e2e8f0; color: var(--ink); }
.field-clear.show { display: flex; }
.login-submit {
  background: var(--orange); color: white; border: none;
  padding: 12px; border-radius: 10px; font-weight: 700; font-size: 14px;
  font-family: inherit; cursor: pointer; transition: background .15s; width: 100%;
}
.login-submit:hover:not(:disabled) { background: var(--ink); }
.login-submit:disabled { background: #fdd3a8; cursor: not-allowed; }
/* "Send my password" specifically: blue instead of the site's usual orange
   CTA, so it doesn't read as the same action as "Back to log in" right
   below it (confirmed 2026-09-23). */
.login-submit-blue { background: var(--blue-light); }
.login-submit-blue:hover:not(:disabled) { background: var(--ink); }
.login-submit-blue:disabled { background: #bfdbfe; }

/* Shared by every email field on the site (FAQ contact, quote special
   request, login): red border once the visitor leaves the field with a
   non-empty but invalid address, cleared as soon as they start typing
   again (confirmed 2026-09-20). */
.email-invalid { border-color: #ef4444 !important; }
/* Every message textarea (FAQ contact, Contact modal, quote special
   request): green border once it reaches the minimum length, confirmed
   2026-09-24. */
.field-valid { border-color: #16a34a !important; }
.login-forgot { display: block; text-align: center; margin-top: 14px; font-size: 12.5px; font-weight: 700; color: var(--orange); }
.login-forgot:hover { color: var(--orange-dark); }
/* "Back to log in" on the forgot-password panel: a real button like
   .login-submit rather than a small text link, same visual weight as the
   "Log in" button itself (confirmed 2026-09-23) — .login-submit's own rules
   already give it the fill/padding/radius, this just resets <a>-specific
   defaults and restores .login-forgot's own top spacing. */
.login-forgot-btn { display: block; text-align: center; text-decoration: none; margin-top: 14px; box-sizing: border-box; }

/* ===== SHARED PAGE SECTIONS (generic <section>/eyebrow/heading pattern,
   the "Ski resorts & destinations" two-card grid, and the reviews
   carousel) — extracted from index.php's own <style> block so a
   destination page can embed inc/reviews_section.php or build its own
   .zone-card grid with the exact same look (confirmed 2026-09-23). */
section { padding: 80px 24px; }
.section-wrap { max-width: 1200px; margin: 0 auto; }
.section-head { text-align: center; max-width: 600px; margin: 0 auto 48px; }
.eyebrow {
  color: var(--orange); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; display: block;
}
.section-head h2 { font-size: clamp(26px,3.5vw,36px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.section-head p { color: var(--grey); font-size: 15.5px; line-height: 1.6; }

.dest-strip { background: var(--fondboxbleu); color: white; }
.zones-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .zones-grid { grid-template-columns: 1fr; } }
.zone-card { background: white; border: 1.5px solid #e2e8f0; border-radius: var(--radius); padding: 26px 28px; }
.zone-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--orange); }
.zone-card p { font-size: 13.5px; color: var(--grey); line-height: 1.6; margin-bottom: 14px; }
/* Grid rather than flex-wrap so every chip in a row shares the same
   width and height, whether it's "Vars" or "Saint Martin de Belleville"
   (confirmed 2026-09-24) — flex-wrap let each pill hug its own text,
   which looked uneven once the ski-transfers country pages introduced
   chip rows mixing very short and very long resort names.
   Fixed at exactly 2 columns (same technique as .zones-grid above)
   rather than auto-fill, since auto-fill picks however many 140px+
   columns happen to fit the card's width — for 4 chips that meant 3 in
   one row and a lone 4th dangling on its own row, which the user flagged
   as broken 2026-09-24. Two fixed columns means an even chip count
   always fills complete rows, and an odd one only ever leaves a single
   trailing chip, never a "row of 3 then a row of 1". */
.zone-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Single line with an ellipsis for anything that overflows (e.g. "Les
   Contamines Montjoie" becomes "Les Contamines...") rather than wrapping
   onto a second line — confirmed 2026-09-24 after a trial run on
   ski-transfers.php alone, then rolled out here once the user asked for
   the same fix on ski-transfers-italy.php's "Gressoney La Trinite" chip.
   min-width:0 is required alongside the usual nowrap/overflow/ellipsis
   trio because a grid item's default min-width:auto sizes it to fit its
   content's full unwrapped width, which was silently overriding the 1fr
   track and letting text wrap again despite text-overflow — a classic
   CSS Grid/Flexbox pitfall, confirmed 2026-09-24 (e.g. "Bourg St Maurice
   station" still wrapped onto two lines without this). */
.zone-links a { display: block; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--grey-light); padding: 10px 14px; border-radius: 8px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Text turns orange on hover, background stays the same grey (confirmed
   2026-09-24) — the user found the previous solid-orange hover fill too
   strong once the chips started carrying much longer resort names. */
.zone-links a:hover { background: var(--grey-light); color: var(--orange); }

.reviews-scroll { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 12px; margin-top: 40px; }
.review-card { flex: 0 0 300px; background: var(--grey-light); border-radius: var(--radius); padding: 22px 24px; }
.review-stars { color: var(--orange); font-size: 14px; margin-bottom: 10px; }
.review-card p, .content-modal-item p { font-size: 13.5px; line-height: 1.6; color: var(--ink); margin-bottom: 8px; }
.review-who { font-size: 12.5px; font-weight: 700; color: var(--grey); }
.review-route { font-size: 11.5px; color: var(--orange); font-weight: 600; margin-top: 2px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.review-route-item { display: inline-flex; align-items: center; gap: 3px; }
.review-route-item svg { width: 12px; height: 12px; flex-shrink: 0; color: var(--ink); }
.btn-see-all {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--ink); color: var(--ink);
  padding: 11px 24px; border-radius: 999px; font-weight: 700; font-size: 13.5px;
  cursor: pointer; background: none; font-family: inherit;
}
.btn-see-all:hover { background: var(--ink); color: white; }

/* .loc-hero h1's own emphasized word (matches .hero h1 em on index.php,
   confirmed 2026-09-23) — e.g. "Chambery <em>Airport</em> Transfers". */
.loc-hero h1 em { font-style: normal; color: var(--orange); }

/* ===== HERO (moved out of index.php, confirmed 2026-09-24) — the exact
   same full-width, fixed-background hero used on the homepage, now also
   used by destination pages instead of the smaller .loc-hero. A page sets
   its own photo by redeclaring `.hero { background-image: ...url(...); }`
   in its own <style> block AFTER this file is linked, which overrides just
   the image half of the `background:` shorthand below (same trick already
   used for .loc-hero) — index.php itself doesn't need to since its own
   photo is the one declared here. */
.hero {
  position: relative;
  background:
    linear-gradient(160deg, rgba(13,43,82,0.82), rgba(13,43,82,0.6) 55%, rgba(13,43,82,0.85)),
    url('../images/hero_transfert_station.jpg');
  background-size: cover;
  background-position: center 30%;
  background-attachment: fixed;
  min-height: 92vh;
  /* .hero is a flex item of <body> (display:flex; flex-direction:column),
     alongside .page-wrap's own flex:1 0 auto sticky-footer rule — without
     this, .hero's default flex-shrink:1 lets it shrink below its own
     content height (breadcrumb + hero-content + the quote widget +
     trust-row can exceed 92vh), overflowing the trust-row past .hero's
     visible dark background and onto the white content below (confirmed
     2026-09-24). */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 70px 24px 60px;
}
/* Contact forms: red "Error ✕" state of the send button (showSendError() in
   js/site_chrome.js), shown when a message could not be sent. */
.send-error { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; opacity: 1 !important; }

/* Phones and tablets: no fixed background. Mobile browsers (iPhone Safari in
   particular) don't support background-attachment: fixed together with
   background-size: cover, and the hero photo simply did not show up behind the
   quote widget on any page (reported 2026-09-25 from a real phone, the image
   files themselves were online and fine). A scrolling background gives the
   same look without the bug. Desktop keeps the fixed (parallax) effect. */
@media (max-width: 1024px), (hover: none) {
  .hero, .loc-hero { background-attachment: scroll; }
  /* The photo is a 3:2 landscape. On a tall portrait screen (iPad) a hero as
     high as 92% of the screen forced "cover" to enlarge it enormously, showing
     only sky and a blurred mountain. Capping the height keeps most of the
     picture (station, van, people) in view. */
  .hero { min-height: min(92vh, 1000px); }
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.10) 0, transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(249,115,22,0.18) 0, transparent 45%);
}
.hero-content { position: relative; max-width: 760px; text-align: center; color: white; margin-bottom: 44px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
  padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; margin-bottom: 22px;
}
.hero-phrase { white-space: nowrap; }
.hero h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 18px; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero p { font-size: 17px; color: rgba(255,255,255,0.85); line-height: 1.6; max-width: 560px; margin: 0 auto; }

.trust-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 12px;
  max-width: 840px; margin: 40px auto 0; color: rgba(255,255,255,0.8);
  font-size: 13.5px; font-weight: 500; position: relative;
}
.trust-row span {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
  padding: 7px 16px; border-radius: 999px;
}
@media (min-width: 840px) { .trust-row { grid-template-columns: repeat(4, 1fr); } }
.trust-check { color: var(--orange); flex-shrink: 0; }

/* A destination page's .breadcrumb sits directly on top of .hero's own
   photo, no added background bar (confirmed 2026-09-24), white "Home" +
   orange current page (confirmed 2026-09-24, refined) so it reads against
   the dark photo — like Performance Ski School's reference. Positioned
   absolutely (top:0/left:0/right:0 is relative to .hero's own padding
   edge, ignoring its 24px side padding) with the exact same
   max-width:1200px + margin:auto + padding:0 24px box model as .nav-wrap,
   so the home icon lines up under the logo above it at every viewport
   width, not just coincidentally on narrow ones. */
.hero > .breadcrumb {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.hero > .breadcrumb .bc-step.done { color: white; }
.hero > .breadcrumb .bc-sep { color: rgba(255,255,255,0.5); }

/* ===== PRINT (Print / Save as PDF from a browser) =====
   Site-wide, not specific to any one page. Two real print bugs found on
   404.php/403.php on 2026-09-27 that turn out to affect every page sharing
   this header/footer:
   1. A print page is narrow enough to trigger the mobile layout, and the
      off-canvas mobile menu (.mobile-menu) is only hidden by
      transform:translateX(100%), never display:none — a browser's print
      engine can flatten position:fixed elements without honouring that
      transform, printing the drawer in place as a solid panel over the
      page (confirmed with a headless Chrome print, reproduced on an
      existing page too, e.g. contact-skicab.php, so not new). Every
      overlay/floating UI element is hidden here explicitly with
      display:none rather than relying on how each normally hides itself,
      since Safari's print engine was ALSO seen ignoring some of those
      (login/content modals appeared, fully expanded, in a Safari-exported
      PDF) even though Chrome's headless print did not — different bugs,
      same fix.
   2. The footer's light text on its dark background can print unreadably
      pale, since some browsers (Safari in particular) do not print
      background colours by default (a "print backgrounds" option most
      visitors never enable). print-color-adjust forces it regardless of
      that option, and only changes anything for a visitor who prints the
      page. Applied to every element (not just the footer): a card's own
      soft box-shadow (blur 50px, spread -12px) rasterized as a solid grey
      rectangle overlapping the next card in Chrome's print output, so
      shadows are dropped for print too, cleanest done the same broad way. */
@media print {
  .mobile-menu-overlay, .mobile-menu, .hamburger-btn,
  .faq-float-btn, .faq-popup, .whatsapp-float-btn, .instagram-float-btn,
  .login-modal-overlay, .login-modal,
  .content-modal-overlay, .content-modal {
    display: none !important;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    box-shadow: none !important;
  }
}