/* ============================================================
   HOLA HOLIDAYS — AIRBNB DESIGN SYSTEM OVERRIDES (2026)
   Loaded LAST among all stylesheets so these tokens and
   component overrides win the cascade without a !important war
   on every rule.

   Strategy:
   1. Re-map the global brand tokens (colours, type, radii, shadows)
      to the Airbnb palette → every surface that references the
      brand variables re-skins for free.
   2. Re-map the scoped header (#siteHeaderMount) and footer
      (.ae-footer) variables → those large surfaces re-skin for free.
   3. Explicitly fix the handful of rules that hardcode
      white-on-navy colours so they read on the new light chrome.

   Brand, name, logo, copy and SEO URLs are intentionally preserved.
   We only adopt Airbnb's VISUAL LANGUAGE (Rausch coral CTA, fog/grey
   neutrals, Inter type, 12px radii, soft shadows, pill buttons, airy
   spacing, heart favourites, category rail). No proprietary Airbnb
   assets are copied — Inter stands in for Cereal and the palette is
   approximated.
   ============================================================ */

/* ---- 1. GLOBAL TOKEN RE-MAP (Airbnb palette) ---------------- */
:root {
  /* Typography → Inter (Cereal substitute) */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Brand → Airbnb palette.
     Rausch coral #FF385C = primary CTA / accent.
     #222222 = primary text & structure (replaces navy).
     #717171 = secondary text. #DDDDDD = hairlines. Fog #F7F7F7 = fill. */
  --brand-navy: #222222;
  --brand-navy-deep: #222222;
  --brand-navy-soft: #484848;
  --brand-navy-light: #484848;
  --brand-red: #FF385C;
  --brand-red-tint: #FFE9EE;
  --brand-accent: #FF385C;
  --brand-accent-light: #FF5A7A;
  --brand-accent-dark: #E00B41;
  --brand-gold: #FF385C;
  --brand-gold-dark: #222222;   /* rating stars → dark like Airbnb, not gold */
  --brand-gold-light: #FF5A7A;
  --brand-green: #008A05;       /* Airbnb-style "available / included" green */
  --brand-green-dark: #006914;
  --brand-green-light: #E3F0E4;
  --brand-sand: #F7F7F7;
  --brand-cream: #FFFFFF;
  --brand-text: #222222;
  --brand-muted: #717171;
  --brand-border: #DDDDDD;
  --white: #FFFFFF;

  --color-primary: #222222;
  --color-primary-light: #F7F7F7;
  --color-primary-dark: #222222;
  --color-secondary: #484848;
  --color-secondary-light: #F7F7F7;
  --color-secondary-dark: #484848;
  --color-accent: #FF385C;
  --color-accent-light: #FFE9EE;
  --color-accent-dark: #E00B41;
  --color-gold: #FF385C;
  --color-gold-light: #FFE9EE;
  --color-gold-dark: #222222;
  --color-green: #008A05;
  --color-green-light: #E3F0E4;
  --color-green-dark: #006914;
  --color-sunset: #FF385C;
  --color-sand: #F7F7F7;
  --color-sage: #008A05;

  --color-dark: #222222;
  --color-dark-80: #484848;
  --color-gray: #717171;
  --color-gray-light: #717171;
  --color-gray-lighter: #DDDDDD;
  --color-white: #FFFFFF;
  --color-off-white: #FFFFFF;

  --surface-muted: #F7F7F7;
  --surface-muted-2: #EBEBEB;

  /* Radii → Airbnb (12px cards, soft rounding, pill controls) */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* Shadows → soft Airbnb depth */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.10);
  --shadow-md: 0 3px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.18);
  --shadow-up: 0 -2px 12px rgba(0, 0, 0, 0.10);
  --shadow-card-hover: 0 6px 16px rgba(0, 0, 0, 0.12);
}

/* ---- 1b. SKIP LINK ------------------------------------------ */
/* Every listing and hub page ships a `.skip-link`, but the only rule that
   styled one lived in home.css and was scoped to `.market-home`. On every
   other template the link therefore rendered as a plain blue underlined link
   sitting over the header at 8,8. Hide it off-screen and slide it in on focus.
   `.market-home .skip-link` (0,2,0) still outranks this (0,1,0), so the
   homepage keeps its own treatment. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1001;
  padding: 10px 16px;
  border-radius: 10px;
  background: #222222;
  color: #FFFFFF;
  font-weight: 650;
  font-size: 0.9rem;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform 120ms ease;
}
.skip-link:focus { transform: none; }
.skip-link:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; }

/* ============================================================
   2. HEADER — palette only

   Every component style for the header (mega menus, fly-outs, feature
   cards, integrated search, drawer) now lives in
   assets/css/header-2026.css, which is built directly on this palette.
   This sheet only re-asserts the tokens — it loads last, so the header
   can never drift back to the legacy navy surface, and any page that
   loads this sheet keeps the right colours even without the header sheet.

   The previous block of `.ae-header__*` component overrides was removed:
   it targeted classes that no longer exist after the 2026 header rebuild
   (`.ae-header__mega-menu`, `.ae-header__mega-column`,
   `.ae-header__search-trigger`, `.ae-header__mobile-quick-action`,
   `.ae-header__mobile-group`, `.ae-header__mobile-submenu`).
   ============================================================ */
#siteHeaderMount {
  --header-surface: #FFFFFF;
  --header-surface-alt: #F7F7F7;
  --header-surface-hover: #F2F2F2;
  --header-text: #222222;
  --header-muted: #717171;
  --header-border: #EBEBEB;
  --header-border-strong: #DDDDDD;
  --header-accent: #FF385C;
  --header-accent-dark: #E00B41;
  --header-focus: #FF385C;
  --header-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
  --header-shadow-panel: 0 8px 28px rgba(0, 0, 0, 0.14);
}

/* ============================================================
   3. FOOTER — palette only
   Component styling lives in footer-2026.css, which is the single
   owner of the footer. This block only re-asserts the tokens so the
   footer re-skins with the rest of the site.
   ============================================================ */
.ae-footer,
.ae-footer-cta {
  --footer-bg: #FFFFFF;
  --footer-bg-deep: #F7F7F7;
  --footer-text: #222222;
  --footer-muted: #717171;
  --footer-line: #EBEBEB;
  --footer-line-strong: #DDDDDD;
  --footer-brand: #FF385C;
}

/* ============================================================
   4. HOMEPAGE TOKENS (body.home-page scope)
   ============================================================ */
body.home-page {
  --hm-navy: #222222;
  --hm-navy-deep: #222222;
  --hm-navy-soft: #484848;
  --hm-red: #FF385C;
  --hm-red-light: #FF5A7A;
  --hm-gold: #FF385C;
  --hm-ink: #222222;
  --hm-bg: #FFFFFF;
  --hm-white: #FFFFFF;
  --hm-border: #DDDDDD;
  --hm-muted: #717171;
  --hm-orange: #222222;
  --hm-orange-bright: #FF385C;
  --hm-orange-dark: #222222;
  --hm-green: #FF385C;
  --hm-olive: #FF5A7A;
  --hm-green-deep: #484848;
  --hm-neutral: #DDDDDD;
  --hm-sand: #DDDDDD;
  --hm-radius: 16px;
  --hm-radius-lg: 24px;
  --hm-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  --hm-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.16);
  --hm-font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --hm-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  background: #FFFFFF;
}

/* Hero sits on a dark image — keep its white text legible (was set to a
   dark navy via --hm-green-deep, invisible against the photo). */
.hm-hero__eyebrow { color: rgba(255, 255, 255, 0.95) !important; }
.hm-hero__title span { color: #FF5A7A; }

/* ============================================================
   5. CARDS — Airbnb listing style
   ============================================================ */
.market-card { border-color: #EBEBEB; box-shadow: none; }
.market-card:hover {
  border-color: transparent;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.market-card:focus-within {
  border-color: #222222;
  box-shadow: 0 0 0 3px rgba(34, 34, 34, 0.16);
}
.market-card__title a:hover { color: #222222; }
.market-card__meta-item i { color: #222222; }

/* Heart favourite — the Airbnb signature: ghost heart on the photo,
   fills coral when saved. */
.market-card__wish {
  background: transparent;
  color: #FFFFFF;
  border: 0;
  box-shadow: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.market-card__wish:hover { background: transparent; transform: scale(1.08); }
.market-card__wish[aria-pressed="true"] { color: #FF385C; }
.market-card__wish[aria-pressed="true"]:hover { color: #E00B41; }

/* Tour-variant card title uses a serif in the base sheet — normalise to
   Inter so the whole catalogue shares one voice. */
.market-card[data-discovery-category="tour"] .market-card__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.market-card[data-discovery-category="tour"] .market-card__title a:hover {
  color: #222222;
}

/* ============================================================
   6. BUTTONS / CTAs — coral pill
   ============================================================ */
.btn-primary,
a.btn-primary,
.hm-btn--primary,
.tours-hero__cta.btn-primary {
  background: #FF385C !important;
  border-color: #FF385C !important;
  color: #FFFFFF !important;
}
.btn-primary:hover,
.hm-btn--primary:hover,
.tours-hero__cta.btn-primary:hover {
  background: #E00B41 !important;
  border-color: #E00B41 !important;
  color: #FFFFFF !important;
}
.hm-btn { border-radius: var(--radius-full); }
.hm-btn--primary { border-radius: var(--radius-full); }
.hm-btn--ghost { border-color: #222222; color: #222222; }

.hm-search__submit {
  background: #FF385C;
  color: #FFFFFF;
  border-radius: var(--radius-full);
}

.hh-search__submit { border-radius: var(--radius-full); }
.hh-state__action { background: #FF385C; border-color: #FF385C; color: #FFFFFF; }
.hh-state__action:hover { background: #E00B41; border-color: #E00B41; }

.hh-chip-btn[aria-pressed="true"] {
  background: #FF385C;
  border-color: #FF385C;
  color: #FFFFFF;
}

/* ============================================================
   7. HOMEPAGE SEARCH PILL (Airbnb-style centered search)
   ============================================================ */
.hm-search { border-bottom-color: #EBEBEB; }
.hm-search__panel { border: 2px solid #222222; }
.hm-search__field + .hm-search__field { border-left-color: #EBEBEB; }

/* ============================================================
   8. COMPONENT TINTS (hh-* layer) — keep them Airbnb-consistent
   ============================================================ */
.hh-breadcrumbs a { color: #222222; }
.hh-breadcrumbs a:hover { color: #FF385C; }
.hh-section-head__link:hover { color: #FF385C; }
.hh-trust__item i { color: #FFFFFF; }
.hh-rating__stars { color: #222222; }
.hh-faq__item[open] { border-color: rgba(34, 34, 34, 0.28); }
.hh-faq__item > summary::after { color: #222222; }
.hh-sort { 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='%23222222' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); }

/* ============================================================
   9. CATEGORY RAIL (Airbnb-style horizontal scroller) — used on the
   listing page. No JS change needed; markup added in the listing task.
   ============================================================ */
.hh-cat-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 14px;
  margin: 0 0 8px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.hh-cat-rail::-webkit-scrollbar { height: 6px; }
.hh-cat-rail::-webkit-scrollbar-thumb { background: #DDDDDD; border-radius: 999px; }
.hh-cat {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 76px;
  padding: 12px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #222222;
  font-family: var(--font-ui, 'Inter', sans-serif);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: color 160ms ease, border-color 160ms ease;
}
.hh-cat i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: #F7F7F7;
  color: #FF385C;
  font-size: 1.15rem;
  transition: background-color 160ms ease, transform 160ms ease;
}
.hh-cat:hover i { background: #FFE9EE; transform: translateY(-2px); }
.hh-cat[aria-pressed="true"] { color: #222222; border-bottom-color: #222222; }
.hh-cat[aria-pressed="true"] i { background: #FF385C; color: #FFFFFF; }

/* ============================================================
   10. FOCUS RINGS — coral for the whole system
   ============================================================ */
.hh-breadcrumbs a:focus-visible,
.hh-faq__item > summary:focus-visible,
.hh-sheet__close:focus-visible,
.hh-modal__close:focus-visible,
.hh-mobile-book__cta:focus-visible,
.hh-search__submit:focus-visible,
.hh-state__action:focus-visible,
.hh-chip-btn:focus-visible,
.hh-cat:focus-visible {
  outline: 3px solid rgba(255, 56, 92, 0.40);
  outline-offset: 3px;
}

/* ============================================================
   11. PDP / MANAGED-TOUR RE-SKIN (cascade over managed-tour.css)
   The .mt-page tokens already resolve to the Airbnb palette through the
   :root remap above (coral CTAs, #222 text, #008A05 green). This section
   fixes the handful of HARDCODED navy/sand/cream values and swaps the
   Fraunces serif headings for Inter so the PDP finishes the system.
   All selectors intentionally repeat managed-tour.css's and win on
   load order (this sheet is last) — no !important war.
   ============================================================ */

/* Inter everywhere + white canvas + neutralise the hard dark token */
.mt-page {
  --mt-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mt-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mt-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mt-blue-dark: #222222;
  background: #FFFFFF;
}

/* Tour/activity hero "Popular" pill → coral tint (was navy tint) */
.mt-page:is([data-mt-layout="tour"], [data-mt-layout="activity"]) .mt-hero__badge {
  background: rgba(255, 56, 92, .10);
  border-color: rgba(255, 56, 92, .28);
  color: #E00B41;
}

/* Rating star in the hero meta → dark like Airbnb (was old red-light) */
.mt-page .mt-chip--rating i { color: #222222; }

/* Gallery overlays were navy → neutral black for a clean photo-grid feel */
.mt-shot::after { background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .42)); }
.mt-shot__more { background: rgba(0, 0, 0, .62); }
.mt-lightbox { background: rgba(0, 0, 0, .92); }

/* Info note → light fog callout with a coral left accent (was sand) */
.mt-note {
  background: #F7F7F7;
  border: 1px solid #EBEBEB;
  border-left: 4px solid #FF385C;
}
.mt-note h3 { color: #222222; }

/* Booking card head + summary → fog/white (was cream gradient / cream) */
.mt-book__head { background: #F7F7F7; }
.mt-book .booking-summary-card { background: #F7F7F7; border-color: #EBEBEB; }

/* "Not included" panel + list → neutral grey (was hard red) */
.mt-panel--no h3 i { color: #717171; }
.mt-list--no li::before { color: #717171; }

/* FAQ open border → neutral hairline (was sand) */
.mt-faq details[open] { border-color: #DDDDDD; }

/* Related section (activity) bg + card hover border → fog / hairline */
.mt-page[data-mt-layout="activity"] .mt-related { background: #F7F7F7; }
.mt-related-card:hover { border-color: #DDDDDD; }

/* Timeline rail → hairline (was navy) */
.mt-timeline::before { background: #DDDDDD; }

/* Step-number watermark → neutral; activity keeps a coral tint (was navy/red) */
.mt-step::before { color: rgba(34, 34, 34, .08); }
.mt-page[data-mt-layout="activity"] .mt-step::before { color: rgba(255, 56, 92, .12); }

/* Bottom CTA band → light fog, dark text, coral primary button */
.mt-cta { background: #F7F7F7; color: #222222; }
.mt-page[data-mt-layout="activity"] .mt-cta { background: #F7F7F7; }
.mt-cta h2 { color: #222222; }
.mt-cta p { color: #717171; }
.mt-page .mt-cta .mt-btn--solid {
  background: #FF385C;
  border-color: #FF385C;
  color: #FFFFFF;
}
.mt-page .mt-cta .mt-btn--solid:hover {
  background: #E00B41;
  border-color: #E00B41;
  color: #FFFFFF;
}
.mt-page .mt-cta .mt-btn--outline-light {
  background: transparent;
  border-color: #DDDDDD;
  color: #222222;
}
.mt-page .mt-cta .mt-btn--outline-light:hover {
  background: #EBEBEB;
  color: #222222;
}

/* Mobile sticky "Book" bar + sticky price bar CTA → coral (was navy) */
.mt-page .mobile-booking-bar .btn {
  background: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: #fff !important;
}
.mt-stickybar__cta { background: var(--brand-red); color: #fff; }

/* Booking widget inputs → coral focus ring (was navy) — scoped to the
   tour booking rail so the contact form is untouched. */
.mt-book .booking-input:focus,
.mt-book .booking-select:focus,
.mt-book .booking-textarea:focus {
  border-color: #FF385C;
  box-shadow: 0 0 0 4px rgba(255, 56, 92, .16);
}