/* ===== MOTION TOKENS =====
   Adapted from Airbnb's spring system. linear() encodes a critically-damped
   spring (mass=1, damping=35, stiffness=300) — fast attack, soft settle,
   no overshoot. Used for the header expand/collapse morph. */
:root {
  --motion-spring-fast-duration: 452ms;
  --motion-spring-fast-easing: linear(
    0, 0.1856, 0.4653, 0.6823, 0.8223, 0.9050,
    0.9513, 0.9764, 0.9896, 0.9965, 1
  );
  /* Aggressive front-loaded spring used for the search-bar content
     cross-fade (expanded fields ↔ compact pill). Snaps to 47.5%
     within 13.9% of duration, then settles softly. Rubber-band feel,
     no overshoot. Sampled from Airbnb's View Transitions output. */
  --motion-spring-content-duration: 400ms;
  --motion-spring-content-easing: linear(
    0 0%, 0.005 0.9%, 0.019 1.8%, 0.08 4%,
    0.475 13.9%, 0.575 16.85%, 0.66 19.8%,
    0.734 22.75%, 0.797 25.7%, 0.848 29.1%,
    0.89 32.7%, 0.925 36.7%, 0.951 41.3%,
    0.97 46.4%, 0.984 52.5%, 0.992 59.4%,
    0.997 68.3%, 1 100%
  );
  --motion-standard-curve: cubic-bezier(0.2, 0, 0, 1);
  --motion-exit-curve: cubic-bezier(0.4, 0, 1, 1);
}

/* ===== SCREEN READER ONLY (SEO h1) ===== */
.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;
}

/* ===== RESET & BASE ===== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: var(--font-inter), sans-serif;
  color: #2C3E50;
  background: #F7F7F7;
  -webkit-font-smoothing: antialiased;
}

body {
  min-width: 1280px;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button, input {
  font-family: inherit;
  border: none;
  outline: none;
  background: none;
  cursor: pointer;
}

/* ===== KEYBOARD FOCUS (A5) =====
   Sitewide visible focus ring, keyboard only (mouse/touch clicks stay clean
   since :focus-visible skips pointer-triggered focus in supporting browsers).
   Component styles with their own :focus-visible treatment take precedence
   over this rule through selector specificity, so this is a safety net for
   every plain button, link and custom tabindex control that has no
   dedicated focus style. */
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #14171C;
  outline-offset: 2px;
}

/* Text fields get NO added ring (double-outline against the field's own
   rounded border reads as broken). The field's existing border simply
   turns charcoal on focus instead. Components with their own box-shadow
   focus ring keep winning via selector specificity. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: #14171C;
}

img {
  display: block;
  max-width: 100%;
}

/* ===== HEADER ===== */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: #F7F7F7;
  padding: 49px 40px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  /* Header padding + gap morph in sync with the search-bar pill spring. */
  transition:
    padding var(--motion-spring-fast-duration) var(--motion-spring-fast-easing),
    gap var(--motion-spring-fast-duration) var(--motion-spring-fast-easing),
    box-shadow var(--motion-spring-fast-duration) var(--motion-spring-fast-easing);
}

.header > * {
  max-width: 1360px;
  width: 100%;
}

.header--compact {
  padding-top: 12px;
  padding-bottom: 8px;
  gap: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}


.header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.header__logo img {
  display: block;
}

.header__logo img.header__logo-mark {
  display: none;
}

@media (max-width: 949px) {
  .header__logo img.header__logo-full {
    display: none;
  }
  .header__logo img.header__logo-mark {
    display: block;
  }
}

.header__actions {
  display: flex;
  align-items: center;
  /* 12px between List-with-us, the currency switcher + the account icon —
     matches the search-bar ↔ Filters-button gap so the whole header row reads
     as one evenly-spaced cluster. */
  gap: 12px;
}

.btn-outline-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 46px to match the compact search bar pill so the right-side
     header cluster (search pill | Filters chip | List with us) reads
     as one row of equal-height controls. Was 34px (logo height) but
     that left it visibly shorter than the search bar on hover. */
  height: 46px;
  padding: 0 20px;
  border-radius: 118px;
  font-size: 16px;
  font-weight: 400;
  color: #2C3E50;
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}

.btn-outline-pill:hover {
  background: #2454FF;
  color: #FFFFFF;
  border-color: #2454FF;
}

.btn-outline-pill--active,
.btn-outline-pill--active:hover {
  background: #2823FF;
  color: #FFFFFF;
  border-color: #2823FF;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 118px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
/* In the header cluster, menu + user icons sit next to the filter chip
   (46px height). Match their size so all three buttons read as one
   visually-aligned group on desktop too. Scoped to .header__actions
   so any other icon-btn in the app keeps the default 40px. Color
   styling (grey bg, brand-blue active) is tablet-only — desktop keeps
   the original transparent default + dark-blue `#2823FF` active. */
.header__actions .icon-btn {
  width: 46px;
  height: 46px;
  /* Header icon buttons (hamburger + account) read as Airbnb-style grey
     circles: light-grey by default, a touch darker on hover, glyph stays
     dark. Scoped to the header so the global .icon-btn (auth pages) is
     untouched. */
  background: #EDEEF0;
}
.header__actions .icon-btn:hover {
  background: #DEE0E4;
}
.header__actions .icon-btn:hover svg line,
.header__actions .icon-btn:hover svg circle,
.header__actions .icon-btn:hover svg path {
  stroke: #2C3E50;
}
.header__actions .icon-btn--active {
  background: #DEE0E4;
}
.header__actions .icon-btn--active svg line,
.header__actions .icon-btn--active svg circle,
.header__actions .icon-btn--active svg path {
  stroke: #2C3E50;
}

.icon-btn:hover {
  background: #2454FF;
}

.icon-btn:hover svg line,
.icon-btn:hover svg circle,
.icon-btn:hover svg path {
  stroke: #FFFFFF;
}

.icon-btn--active {
  background: #2823FF;
}

.icon-btn--active svg line,
.icon-btn--active svg circle,
.icon-btn--active svg path {
  stroke: #FFFFFF;
}

/* Mobile Search Bar (hidden by default, shown on mobile)
   Sized to match Airbnb's mobile spec:
   - height 56px, padding 10px 19px, radius 40px
   - 1px solid #DDD border + drop shadow
   - icon 12×12 + 8px gap to text
   - text 14px/500/lineHeight 18px */
.search-bar-mobile {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 56px;
  min-height: 56px;
  padding: 10px 19px;
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  border-radius: 40px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  transition: box-shadow 0.2s;
  box-sizing: border-box;
}

.search-bar-mobile:active {
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.search-bar-mobile__icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.search-bar-mobile__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #9B9B9B;
}

/* Mobile Bottom Nav — hidden on desktop, shown at <=1025px via media query */
.bnav {
  display: none;
}


/* Mobile Menu (combined sheet, hidden by default) */
.mmenu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.3);
}

.mmenu--open {
  display: flex;
  align-items: flex-end;
}

.mmenu__sheet {
  width: 100%;
  background: #FFFFFF;
  border-radius: 24px 24px 0 0;
  padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mmenu__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.mmenu__nav {
  display: flex;
  flex-direction: column;
  padding-top: 40px;
}

.mmenu__item {
  font-size: 18px;
  font-weight: 400;
  color: #2C3E50;
  padding: 18px 0;
  text-decoration: none;
  display: block;
}

.mmenu__item:active {
  color: #2454FF;
}

.mmenu__divider {
  height: 1px;
  background: rgba(217, 217, 217, 0.5);
}

/* Mobile Search Overlay (accordion-style, hidden by default) */
.msearch {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 2500;
  background: #F7F7F7;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  overflow: hidden;
  overscroll-behavior: contain;
  height: 100dvh;
  /* Airbnb-style: slide down from above when opened. Visibility delay on close
     keeps the panel rendered while it slides back up, then yanks it from the
     accessibility tree once the transition finishes. */
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 480ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 480ms;
}
/* While the overlay is open, lock the html/body so the page underneath
   doesn't rubber-band-scroll when the inner country list reaches its end. */
html:has(.msearch.msearch--open),
body:has(.msearch.msearch--open) {
  overflow: hidden !important;
  overscroll-behavior: none !important;
  height: 100dvh !important;
}

.msearch--open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 480ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s 0s;
}

/* While the mobile search overlay is open, hide the bottom nav so the
   overlay's "Clear All" / "Show Results" footer is visible. */
body:has(.msearch.msearch--open) .bnav { display: none !important; }
/* Account sheet (mmenu) is a full-screen overlay — hide the bnav so its
   z-index:9999 can't punch through and cover the sheet's bottom items. */
body:has(.mmenu.mmenu--open) .bnav { display: none !important; }

/* Header: back button + tab name */
.msearch__header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 16px;
  flex-shrink: 0;
}

/* Back-arrow inside the open mobile search overlay — visually matches
   the closed-search-bar back arrow (transparent bg, dark icon, no
   border). 44px tap-target for accessibility, but no hover state
   (this is mobile-only chrome, hover is meaningless on touch). On
   tap (:active) a soft grey halo confirms the press, like the
   .filter-opt active feedback. */
.msearch__back {
  position: absolute;
  left: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #2C3E50;
  transition: background 0.1s ease;
}
.msearch__back svg path { stroke: currentColor; }
.msearch__back:active { background: #F3F4F6; }

.msearch__tabs {
  display: flex;
  gap: 32px;
}

.msearch__filter {
  position: absolute;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E1E5EA;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.msearch__filter:active { background: #F0F2F5; }
.msearch__filter img {
  display: block;
  width: 20px;
  height: 20px;
  /* SVG asset has white fills; brightness(0) flattens to the dark icon
     color shared by every other secondary control on the page. */
  filter: brightness(0);
}
.msearch__filter-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #2454FF;
  color: #FFFFFF;
  border: 1px solid #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.msearch__filter-badge[hidden] { display: none; }

.msearch__tab {
  font-size: 16px;
  font-weight: 400;
  color: #C6C6C6;
  padding-bottom: 4px;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.2s;
}

.msearch__tab--active {
  font-weight: 700;
  color: #2C3E50;
  border-bottom-color: #2454FF;
}

/* Accordion cards container — no scroll, expanded card shrinks to fit */
.msearch__cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 16px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tab-switch crossfade — when the user taps Camps/Lessons/Spots the
   labels and placeholders swap text. Without an animation the old text
   disappears instantly and reads as a "blink"; this transition + a JS
   pause between fade-out and text swap gives Airbnb's smooth feel.
   Applied to BOTH mobile overlay (.msearch__card-*) and desktop search
   bar (.search-bar__label/placeholder, .search-bar-compact__*) so tab
   switching feels identical at every breakpoint and page. */
.msearch__card-label,
.msearch__card-value,
.search-bar__label,
.search-bar__placeholder,
.search-bar-compact__label,
.search-bar-compact__value {
  transition: opacity 150ms ease;
}
/* JS toggles this class for ~150ms (the fade-out window) on each tab
   click before swapping the textContent, then removes it to fade in. */
.tab-swap--fading,
.msearch__text--swapping {
  opacity: 0;
}
/* Honor reduced-motion preference — kill the transition entirely. */
@media (prefers-reduced-motion: reduce) {
  .msearch__card-label,
  .msearch__card-value,
  .search-bar__label,
  .search-bar__placeholder,
  .search-bar-compact__label,
  .search-bar-compact__value { transition: none; }
}

/* Individual card */
.msearch__card {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow 0.2s;
  flex-shrink: 0;
}

.msearch__card--expanded {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* Mobile card height stays constant when toggling Dates ↔ Flexible
   (Airbnb pattern, no jump). The default `flex: 1 1 0` already gives
   the card the same height in both modes — Flexible content is shorter
   so it just sits with extra empty space below, which is intentional. */

/* Card header (collapsed row: label left, value right) */
.msearch__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 28px 12px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  flex-shrink: 0;
}

.msearch__card-label {
  font-size: 16px;
  font-weight: 700;
  color: #2C3E50;
}

.msearch__card-value {
  font-size: 16px;
  font-weight: 400;
  color: #C6C6C6;
  display: flex;
  align-items: center;
  gap: 6px;
}

.msearch__card-value--filled {
  color: #2C3E50;
}

.msearch__card-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  background: none;
  cursor: pointer;
  color: #C6C6C6;
  padding: 0;
  flex-shrink: 0;
}

.msearch__card-clear:hover {
  color: #2C3E50;
}

/* Card body (expanded content) */
.msearch__card-body {
  display: none;
  padding: 0 12px 20px;
}

/* The card itself uses flex: 1 1 0 when expanded (above), which snaps
   the height. We animate the BODY CONTENT only — slide up + fade in —
   so the card frame snaps to size but the contents enter smoothly.
   Less fluid than a true continuous height morph, but doesn't break
   the layout (other cards stay visible at their header height).
   Timing matches the advanced filter modal's bottom-sheet slide
   (480ms, cubic-bezier(0.32, 0.72, 0, 1)) so accordion-expand and
   modal-open feel like the same gesture family. */
.msearch__card--expanded .msearch__card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  animation: msearchBodyEnter 700ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes msearchBodyEnter {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .msearch__card--expanded .msearch__card-body { animation: none; }
}

/* Fixed bottom bar */
.msearch__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  flex-shrink: 0;
  background: #FFFFFF;
  border-top: 1px solid rgba(217, 217, 217, 0.3);
}

.msearch__clear {
  font-size: 16px;
  font-weight: 400;
  color: #C6C6C6;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0;
}

.msearch__clear--active {
  color: #2C3E50;
  text-decoration: underline;
}

.msearch__submit {
  font-size: 16px;
  font-weight: 500;
  color: #FFFFFF;
  background: #2454FF;
  border: none;
  border-radius: 24px;
  padding: 12px 32px;
  cursor: pointer;
  transition: background 0.2s;
}

.msearch__submit:active {
  background: #2823FF;
}

/* Short-viewport mobile (iPhone SE ≤667px tall): tighten vertical
   rhythm inside the mobile search overlay so the Where + When + Who
   cards + footer all fit without scrolling. Reductions are surgical —
   only spacing values, font sizes stay readable. */
@media (max-width: 743px) and (max-height: 700px) {
  /* Card headers: 28→14 vertical padding shaves ~28px per card (×3 = 84px). */
  .msearch__card-header { padding: 14px 12px; }
  /* Calendar mode (Dates / Flexible tabs) inside the When card. */
  .msearch__card-body .calendar__mode { margin-top: 0; margin-bottom: 0; }
  .msearch__card-body .calendar__tabs { padding: 0 0 8px; }
  /* Flexible panel: tighten headings + outer padding. */
  .msearch__card-body .calendar__panel--flexible { padding: 4px 12px 12px; }
  .msearch__card-body .calendar__flex-heading { margin: 8px 0 8px; font-size: 14px; }
  /* Stay pills: slightly shorter so they don't dominate the column. */
  .calendar__flex-stay { gap: 8px; }
  .flex-stay-btn { padding: 8px 18px; font-size: 14px; }
  /* Month cards: shorter padding to compress the strip vertically. */
  .flex-month-btn { padding: 10px 8px; }
  .flex-month-btn__icon { width: 20px; height: 20px; }
}

/* Tablet: add side padding like Airbnb */
@media (min-width: 481px) {
  .msearch__header {
    padding: 20px 16px;
  }
  .msearch__cards {
    padding: 12px 160px;
  }
  .msearch__bottom {
    padding: 16px 16px;
  }
  .msearch__card-header {
    padding: 28px 24px;
  }
  .msearch__card-body {
    padding: 0 24px 24px;
  }
}

/* Override dropdown styles when inside mobile card body */
.msearch__card-body .dropdown {
  position: static !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  max-height: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: auto !important;
  transition: none !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 1;
  min-height: 0;
}

/* Where dropdown inside mobile card — flex chain: tabs + search pinned, list scrolls, footer pinned */
.msearch__card-body .dropdown--where {
  min-width: 0 !important;
}

.msearch__card-body .dropdown__tabs {
  justify-content: center;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.msearch__card-body .dropdown__search {
  margin-bottom: 8px;
  flex-shrink: 0;
}

/* Show the magnifying-glass icon on mobile too — was hidden when the
   icon was a back-arrow (which didn't make sense in this context).
   The new search-loop icon is informative on every breakpoint. */
.msearch__card-body .dropdown__search-icon {
  display: block;
}

/* Country/region list scrolls */
.msearch__card-body .dropdown__tab-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* All directions — pinned at bottom */
.msearch__card-body .dropdown__footer {
  flex-shrink: 0;
  padding: 8px 0 0;
  background: #FFFFFF;
}

/* Calendar inside mobile card — flex chain: tabs pinned, months scroll, flex/quick pinned */
.msearch__card-body .dropdown--calendar {
  padding: 0 !important;
}

/* Hide desktop calendar grid on mobile — replaced by scrollable version */
.msearch__card-body .calendar__grid-section {
  display: none !important;
}

/* Calendar tabs (One Date / Period) — pinned at top */
.msearch__card-body .calendar__tabs {
  justify-content: center;
  gap: 24px;
  padding: 0 0 12px;
  border-bottom: none;
  flex-shrink: 0;
}
/* Inside the mobile accordion, the 18px desktop tab font reads too
   large for the narrower card. Drop to 15px (matches .filter-section
   __title) and tighten the underline accordingly. Applies to both
   tab strips: One-Date/Period (lessons) and Dates/Flexible (camps). */
.msearch__card-body .dropdown__tab,
.msearch__card-body .calendar__mode-tab {
  font-size: 15px;
}
.msearch__card-body .dropdown__tab--active::after,
.msearch__card-body .calendar__mode-tab--active::after {
  width: 32px;
}
/* Tighten the gap between the card header ("Booking period") and the
   tab strip — the desktop margin (24px) was too generous inside the
   smaller mobile card. */
.msearch__card-body .calendar__mode {
  margin-top: 4px;
  margin-bottom: 4px;
}

/* Mobile scrollable calendar — scrolls within card */
.mobile-cal-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-cal-scroll .calendar__month {
  width: 100%;
  max-width: 380px;
  margin: 0 auto 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-cal-scroll .calendar__month-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
}

.mobile-cal-scroll .calendar__month-name {
  font-size: 16px;
  font-weight: 700;
  color: #2C3E50;
}

.mobile-cal-scroll .calendar__nav {
  display: none;
}

.mobile-cal-scroll .calendar__nav-placeholder {
  display: none;
}

.mobile-cal-scroll .calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.mobile-cal-scroll .calendar__weekdays span {
  width: auto;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: #9B9B9B;
  text-transform: capitalize;
}

.mobile-cal-scroll .calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.mobile-cal-scroll .cal-day,
.mobile-cal-scroll .cal-empty {
  width: auto;
  height: 44px;
  font-size: 15px;
  font-weight: 400;
  line-height: 130%;
}

/* Flex/quick buttons at bottom — horizontal scroll on mobile */
.msearch__card-body .calendar__flex-section,
.msearch__card-body .calendar__quick-section {
  padding: 16px 0 0;
  flex-shrink: 0;
  max-width: 380px;
  margin: 0 auto;
  width: 100%;
}

.msearch__card-body .calendar__flex-buttons {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex-wrap: nowrap;
}

.msearch__card-body .flex-btn {
  flex-shrink: 0;
}

/* Guests inside mobile card — short content, don't stretch */
.msearch__card-body .dropdown--guests {
  padding: 0 !important;
  flex: none;
}

.msearch__card-body .guests__row {
  padding: 12px 0;
}

.msearch__card-body .guests__row:first-child {
  padding-top: 0;
}

/* Months inside mobile card — short content, don't stretch */
.msearch__card-body .dropdown--months {
  flex: none;
}

.msearch__card-body .months__scroll {
  max-height: none;
}

.msearch__card-body .months__flex {
  flex-shrink: 0;
  padding-top: 12px;
}

/* Skill inside mobile card — short content, don't stretch */
.msearch__card-body .dropdown--skill {
  padding: 0 !important;
  flex: none;
}

/* Search Area */
.header__search-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  position: relative;
  transition: gap 360ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Container — transparent layout box only. The visible white pill is
   on .search-bar-pill-bg below, so the container itself can snap its
   width/height between states without a CSS transition; the pill BG
   handles the visual morph via a JS RAF spring (FLIP technique). */
.search-bar-container {
  position: relative;
  width: 100%;
  max-width: 828px;
  height: 66px;
  background: transparent;
}

/* The visible white pill. Filled to the container via inset:0 so its
   "natural" size = current container size. Border-radius 9999px keeps
   it perfectly pill-shaped at any size (no per-frame radius math
   needed — the corner caps at half the smallest dimension). The JS
   FLIP animation sets/animates `transform` directly. transform-origin
   is top-center so the top edge stays anchored when shrinking (per
   Airbnb's spec) and the bottom edge does the visible work. */
.search-bar-pill-bg {
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  border-radius: 9999px;
  transform-origin: 50% 0;
  z-index: 0;
  will-change: transform;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: box-shadow 175ms var(--motion-standard-curve);
}

.search-bar-container:hover .search-bar-pill-bg {
  box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.16);
}

.header--compact .search-bar-container {
  width: max-content;
  min-width: 340px;
  max-width: 760px;
  height: 46px;
}
/* Hide pill-bg in compact state — the compact pill itself has its own
   background now, so the pill-bg (which fills the oversized container)
   is no longer needed. The FLIP animation still uses it during transitions. */
.header--compact .search-bar-pill-bg {
  opacity: 0;
}

/* Tabs */
.header__tabs {
  display: flex;
  gap: 32px;
  max-height: 40px;
  opacity: 1;
  transform: translateY(0);
  /* Entrance (compact → expanded): tabs appear AFTER the pill has grown,
     in sync with field labels. Sequential handoff prevents tabs from
     appearing while the compact text is still fading out. */
  transition:
    opacity 160ms ease-out 240ms,
    transform 200ms var(--motion-spring-fast-easing) 240ms,
    max-height var(--motion-spring-fast-duration) var(--motion-spring-fast-easing);
  position: relative;
  padding-bottom: 6px;
}

.header--compact .header__tabs {
  /* Collapse: tabs fade out together with field labels — both gone by
     t≈140ms so the pill is visibly empty during its shrink. */
  transition:
    opacity 140ms var(--motion-exit-curve),
    max-height var(--motion-spring-fast-duration) var(--motion-spring-fast-easing);
}

.header--compact .header__tabs {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}


.header--compact .header__search-area {
  gap: 0;
  padding-bottom: 22px;
}


.tab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  /* 16px matches Figma "Label 1 16/Auto" / Airbnb header spec. */
  font-size: 16px;
  font-weight: 400;
  color: #C6C6C6;
  position: relative;
  line-height: 1.17;
  cursor: pointer;
}

.tab-btn--active {
  font-weight: 700;
  font-size: 16px;
  color: #2C3E50;
}

.tab-slider {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: #2454FF;
  border-radius: 1px;
  transition:
    left var(--motion-spring-fast-duration) var(--motion-spring-fast-easing),
    width var(--motion-spring-fast-duration) var(--motion-spring-fast-easing);
}

/* ===== FULL SEARCH BAR (expanded form layer) =====
   Sits on top of the morphing container as a transparent layer. On
   collapse it slides UP out of the header (translateY) and fades —
   matching Airbnb's "expanded form leaves the chrome" pattern. */
.search-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  width: 100%;
  max-width: 966px;
  height: 100%;
  background: transparent;
  display: flex;
  align-items: center;
  padding: 0;
  z-index: 1;
  opacity: 1;
  /* Sequential morph (Airbnb pattern): on expand, fields appear LAST —
     after the pill BG has already grown to full width. Without the delay,
     the labels would be readable while the pill is still mid-shrink, and
     the compact text underneath would still be fading out, producing the
     overlapping double-text seen on collapse. 240ms delay matches the
     "empty pill" handoff window. */
  transition: opacity 140ms ease-out 240ms;
}

.header--compact .search-bar {
  /* On collapse, field labels fade out FAST and FIRST — by t≈140ms they
     are gone and the pill BG (still mid-shrink) is visually empty until
     the compact text fades in at t=240ms. */
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease-out;
}

/* During the morph, clip field overflow inside .search-bar. Without this,
   the field text (taller than the 48px compact container) would visibly
   overflow above/below the shrinking pill. Permanent `overflow: hidden`
   would clip the dropdowns (which live inside .search-bar and extend
   ~550px below), so the .morphing class is added by JS only for the
   morph duration when no dropdown is open. */
.search-bar.morphing {
  overflow: hidden;
}


.search-bar__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
  padding: 8px 20px;
  border-radius: 24px;
  position: relative;
  z-index: 1;
}

/* When a dropdown is open: bar turns gray, sliding pill highlights active field */
.search-bar--has-active .search-bar__divider {
  opacity: 0;
}

/* Sliding white pill behind active field */
.search-bar__slider {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #FFFFFF;
  border-radius: 42px;
  box-shadow: -1px -1px 4px rgba(0, 0, 0, 0.05), 1px 1px 4px rgba(0, 0, 0, 0.08);
  transition: left 0.3s ease, width 0.3s ease;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

.search-bar--has-active .search-bar__slider {
  opacity: 1;
}


/* Field padding: When and Who get a tighter 24px because they sit
   between dividers (the dividers themselves create breathing room).
   Where needs more — it sits flush against the pill's rounded left
   corner, which eats ~16px of visual space; 36px keeps Where's content
   optically aligned with the others instead of crammed against the
   curve. */
.search-bar__field--where,
.search-bar__field--dates,
.search-bar__field--guests {
  min-width: 0;
}
.search-bar__field--where { flex: 1; padding-left: 36px; }
.search-bar__field--dates { flex: 1.3; padding-left: 24px; }
.search-bar__field--guests { flex: 1; padding-left: 24px; }

.search-bar__label {
  /* 16px matches Figma header spec (Label 1 16/Auto). */
  font-size: 16px;
  font-weight: 400;
  color: #2C3E50;
  line-height: 1.17;
}

.search-bar__placeholder {
  font-size: 16px;
  font-weight: 400;
  color: #C6C6C6;
  line-height: 1.17;
}

.search-bar__placeholder--filled {
  color: #2C3E50;
  font-weight: 500;
}

.search-bar__value-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-bar__chevron {
  flex-shrink: 0;
  /* Hidden visually but kept in the DOM — script.js queries this class
     to toggle date-display state (line 1097, 1144). Removing the element
     null-references and crashes the tab switch handler. */
  display: none;
}

/* Clear button on fields */
.search-bar__clear {
  display: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.15s;
}

.search-bar__clear:hover {
  background: #EEEEF2;
}

/* Show clear button whenever the field has a value */
.search-bar__field--has-value .search-bar__clear {
  display: flex;
}


.search-bar__dates {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-bar__dates-dash {
  font-size: 16px;
  color: #C6C6C6;
}

.search-bar__divider {
  width: 1px;
  height: 46px;
  background: #C6C6C6;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition: opacity 0.2s ease;
}

/* Round icon-only search button (Airbnb-style). Was a 144×48 pill with
   "Search" text; now a 48×48 circle with a magnifying-glass icon — frees
   up horizontal space for the fields and matches the Airbnb mental model. */
.search-bar__btn {
  margin-left: auto;
  margin-right: 16px;
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  background: #2454FF;
  color: #FFFFFF;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
  border: none;
  padding: 0;
}

.search-bar__btn:hover {
  background: #1a44e0;
}

/* ===== COMPACT SEARCH BAR ===== */
.search-bar-compact {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  background: transparent;
  display: flex;
  align-items: center;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  /* On expand, compact text fades out FAST and FIRST — gone by t≈140ms,
     leaving an empty pill while it grows. Field labels then fade in at
     t=240ms (see .search-bar). */
  transition: opacity 140ms ease-out;
}

.header--compact .search-bar-compact__pill {
  background: #FFFFFF;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.header--compact .search-bar-compact__pill:hover {
  box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.16);
}
.header--compact .search-bar-compact {
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: auto;
  /* On collapse, compact text appears LAST — after the pill BG has shrunk
     to its compact size. Delay aligns with the "empty pill" handoff so
     the new text never overlaps the outgoing field labels. */
  transition: opacity 140ms ease-out 240ms;
}

.search-bar-compact__pill {
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 6px 0 14px;
  cursor: pointer;
  gap: 0;
  background: transparent;
  border-radius: 24px;
}

.search-bar-compact__segment {
  display: flex;
  align-items: center;
  padding: 0 12px;
  height: 46px;
  gap: 6px;
}

.search-bar-compact__label {
  font-size: 14px;
  font-weight: 700;
  color: #1A2B48;
  white-space: nowrap;
}

.search-bar-compact__value {
  font-size: 14px;
  font-weight: 400;
  color: #1A2B48;
  white-space: nowrap;
}

.search-bar-compact__divider {
  width: 1px;
  height: 16px;
  background: #C6C6C6;
  flex-shrink: 0;
}

.search-bar-compact__search-icon {
  width: 32px;
  height: 32px;
  background: #2454FF;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 10px;
  border: none;
  cursor: pointer;
}

.search-bar-compact__filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  background: #2454FF;
  color: #FFFFFF;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  flex-shrink: 0;
  margin-left: 20px;
  border: none;
  cursor: pointer;
}
.search-bar-compact__filter:hover { background: #1e47d9; }

.search-bar-compact__filter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  background: #2454FF;
  color: #FFFFFF;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  margin-left: 20px;
  flex-shrink: 0;
}
.search-bar-compact__filter-btn:hover { background: #1e47d9; }

/* Standalone variant — used on /search.html where the Filter button sits
   next to the compact pill. Filter is a SECONDARY action (the pill's
   Search button is primary), so the chip uses the same neutral white +
   grey-outline pattern as .filter-opt: white bg, dark text, light-grey
   border that darkens on hover. Brand-blue is reserved for primary
   CTAs (Search, Apply, Book). The badge stays blue + white so the
   "active filters" cue still has a single accent moment.
   Only visible when the header is in COMPACT state. */
.search-bar-compact__filter-btn--standalone {
  height: 46px;
  padding: 0 18px;
  background: #FFFFFF;
  color: #2C3E50;
  /* No border — the box-shadow's 1px ring is what draws the visible
     edge, matching the search-bar pill so the two chips read as the
     same component family. */
  border: none;
  border-radius: 32px;
  font-size: 14px;
  font-weight: 500;
  margin-left: 12px;
  /* Same base shadow as `.search-bar-pill-bg` / `.header--compact
     .search-bar-compact__pill` — subtle drop + 1px ring outline. */
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.04);
  transition: box-shadow 150ms ease;
}
/* Hover: same asymmetric 4-corner soft shadow as the search pill's
   hover state — pure "lift", no outline color flip. */
.search-bar-compact__filter-btn--standalone:hover {
  background: #FFFFFF;
  box-shadow:
    -2px -2px 6px rgba(0, 0, 0, 0.1),
     2px  2px 6px rgba(0, 0, 0, 0.16);
}
.search-bar-compact__filter-btn--standalone .search-bar-compact__filter-icon {
  width: 20px;
  height: 20px;
  /* SVG asset has white fills; brightness(0) flattens to black so the
     icon matches the button's dark text color. */
  filter: brightness(0);
}
/* Airbnb pattern: the Filter chip is only visible in COMPACT (scrolled)
   state, sitting to the right of the compact pill. In expanded state the
   user is editing the search query — the filter chip would compete for
   attention, so hide it there. */
.header:not(.header--compact) .search-bar-compact__filter-btn--standalone {
  display: none;
}
/* Below 1128px (tablet + mobile) the Filters chip shrinks to an icon-only
   46x46 circle — matches the size of the menu/user icon-btns next to it
   so all three buttons in the header cluster read as one row of equal
   circles. Above 1127px the chip expands to its full "Filters" pill. */
@media (max-width: 1127px) {
  .search-bar-compact__filter-btn--standalone {
    padding: 0;
    width: 46px;
    justify-content: center;
  }
  .search-bar-compact__filter-btn--standalone > span:not(.search-bar-compact__filter-badge) {
    display: none;
  }
}
.search-bar-compact__filter-icon { width: 24px; height: 24px; display: block; }
.search-bar-compact__filter-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  /* Brand-blue badge so "active filters" still has a single accent
     moment now that the chip itself is neutral. White text + 2px
     white border keep the badge readable at any backdrop. */
  background: #2454FF;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFFFFF;
  box-sizing: border-box;
  line-height: 1;
}
.search-bar-compact__filter-badge[hidden] { display: none; }

/* ===== DROPDOWNS ===== */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99;
}

.overlay--visible {
  display: block;
}

.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  background: #FFFFFF;
  z-index: 200;
  opacity: 0;
  /* Airbnb-style: dropdown slides DOWN from above (-24px) into position
     when opened. Matches the 480ms timing of the filter modal + listing
     sheet for a consistent motion language across the app. */
  transform: translateY(-24px);
  pointer-events: none;
  transition: opacity 320ms ease-out, transform 480ms cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.16);
}

.dropdown--open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Calendar needs centering preserved through both default and open states. */
.dropdown--calendar.dropdown--open {
  transform: translateX(-50%) translateY(0);
}

/* ───────── Switch-between-dropdowns transition (Airbnb spring) ─────────
   When the user moves laterally between filters (Where → When → Guests),
   JS adds --from-{right,left} on the incoming panel and
   --closing-{right,left} on the outgoing one. Values mirror Airbnb's
   Framer Motion config: position uses a spring approximation
   {mass:1, damping:35, stiffness:300} ≈ 450ms decay, while opacity
   transitions on a separate, much shorter timeline — 150ms in (with a
   50ms delay so the slide reads first) and 75ms out. The mismatch
   between the long position decay and the quick opacity change is what
   gives the motion its "soft glide" rather than a sharp snap.

   Slide distance is 100px to match Airbnb's enter/exit offset. */
/* OPTION A: Morphing shell that travels between filter dropdowns.
   `.dropdown-shell` is a single empty div that owns the chrome
   (background, border-radius, shadow). JS measures each dropdown's
   bounding box and animates the shell to match — so visually one
   continuous container morphs from filter to filter. The dropdown
   panels themselves keep their content but lose their chrome while
   the shell is active, so we don't end up with two stacked white
   boxes. Content cross-fades within the morphing shell.

   The shell sits in the same coordinate context as .dropdown
   (absolute, anchored to the search bar), so its left/top/width/height
   are direct percentages of that context. */
.dropdown-shell {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: 0;
  height: 0;
  background: #FFFFFF;
  border-radius: 40px;
  box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.16);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transform-origin: top left;
  /* All four box properties transition in lockstep so the right edge
     stays exactly at left+width through every frame. If only width
     transitioned, left would jump and the right edge would overshoot
     mid-flight. Same easing across all four = no visible drift. */
  transition:
    left 480ms cubic-bezier(0.32, 0.72, 0, 1),
    top 480ms cubic-bezier(0.32, 0.72, 0, 1),
    width 480ms cubic-bezier(0.32, 0.72, 0, 1),
    height 480ms cubic-bezier(0.32, 0.72, 0, 1),
    opacity 220ms linear;
}
.dropdown-shell--visible {
  opacity: 1;
}

/* When the shell is active, dropdowns lose their own chrome — the shell
   provides it. Content stays. We strip background/shadow/border-radius
   so we're not painting two white frames on top of each other. */
.search-bar--shell-active .dropdown {
  background: transparent !important;
  box-shadow: none !important;
}

/* OPTION B: Pure cross-fade between filters.
   No spatial slide on the panel — each dropdown sits in its own anchored
   position. Switching is communicated by:
     1. The white pill in the search bar morphing (already smooth)
     2. The outgoing panel fading out
     3. The incoming panel fading in (with a small overlap)
   The result: one quick, calm content swap. No "runner overshoot" feeling
   because nothing is moving spatially — only luminance.

   Note: transform is explicitly locked to translateY(0) (and -50% for
   calendar) on every state so the panel does NOT snap back to the
   default .dropdown translateY(-24px) during the cross-fade. */
.dropdown--from-right,
.dropdown--from-left {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: none;
}
.dropdown--from-right.dropdown--open,
.dropdown--from-left.dropdown--open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 220ms linear 80ms;
}

/* Calendar keeps its centering through every cross-fade state. */
.dropdown--calendar.dropdown--from-right,
.dropdown--calendar.dropdown--from-left {
  transform: translateX(-50%) translateY(0);
}
.dropdown--calendar.dropdown--from-right.dropdown--open,
.dropdown--calendar.dropdown--from-left.dropdown--open {
  transform: translateX(-50%) translateY(0);
}

/* Outgoing — fade out only, no movement. */
.dropdown--closing-left,
.dropdown--closing-right {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: opacity 180ms linear;
}
.dropdown--calendar.dropdown--closing-left,
.dropdown--calendar.dropdown--closing-right {
  transform: translateX(-50%) translateY(0);
}


/* WHERE DROPDOWN */
.dropdown--where {
  left: 0;
  border-radius: 40px;
  padding: 32px;
  min-width: 398px;
  height: 555px;
  display: flex;
  flex-direction: column;
}

.dropdown--where .dropdown__tab-content {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.dropdown__tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
}

.dropdown__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  font-size: 18px;
  font-weight: 400;
  color: #C6C6C6;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1.17;
}

.dropdown__tab--active {
  color: #2C3E50;
}

.dropdown__tab--active::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: #FA824C;
  border-radius: 1px;
}

.dropdown__search {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px;
  width: 100%;
  height: 48px;
  border: 1px solid #D9DBE9;
  border-radius: 24px;
  margin-bottom: 14px;
}

.dropdown__search-icon {
  flex-shrink: 0;
}

.dropdown__search-input {
  flex: 1;
  font-size: 16px;
  font-weight: 400;
  color: #2C3E50;
  border: none;
  outline: none;
  background: none;
}

.dropdown__search-input::placeholder {
  color: #C6C6C6;
}

.dropdown__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 334px;
}

/* JS adds --empty when the user's search query matches zero items in
   this section's list (added 2026-05-16). Hide the entire section —
   including its "All countries" / "All regions" label and divider —
   so we don't show a stray header with nothing under it. */
.dropdown__section--empty {
  display: none;
}

.dropdown__section-label {
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  line-height: 1.17;
}

.dropdown__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dropdown__item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  width: 334px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 400;
  color: #2C3E50;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.dropdown__item:hover {
  background: #EEEEF2;
}

.dropdown__divider {
  width: 334px;
  height: 1px;
  background: rgba(217, 217, 217, 0.7);
  margin: 4px 0;
}

/* Tab content switching */
.dropdown__tab-content {
  display: none;
}

.dropdown__tab-content--active {
  display: flex;
  flex-direction: column;
}

/* Scrollable destination lists */
#countriesList,
#regionsList {
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
}

#countriesList::-webkit-scrollbar,
#regionsList::-webkit-scrollbar {
  width: 4px;
}

#countriesList::-webkit-scrollbar-track,
#regionsList::-webkit-scrollbar-track {
  background: transparent;
}

#countriesList::-webkit-scrollbar-thumb,
#regionsList::-webkit-scrollbar-thumb {
  background: #D9DBE9;
  border-radius: 2px;
}

/* Region icons */
.dropdown__region-icon {
  margin-right: 8px;
  font-size: 18px;
}

/* "All directions" item */
.dropdown__item--all {
  color: #FA824C;
  font-weight: 500;
}

/* Sticky footer in Where dropdown */
.dropdown__footer {
  flex-shrink: 0;
  background: #FFFFFF;
}

/* Hidden items (search filter) */
.dropdown__item--hidden {
  display: none;
}

/* No results message */
.dropdown__no-results {
  padding: 10px 12px;
  font-size: 14px;
  color: #999;
}

/* CALENDAR DROPDOWN */
.dropdown--calendar {
  left: 50%;
  transform: translateX(-50%) translateY(-24px);
  border-radius: 40px;
  box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.16);
  width: 764px;
  /* Locked min-height matches the Dates panel's natural height so the
     container doesn't jump when toggling between Dates and Flexible
     (Airbnb pattern). Flexible content is shorter and just sits with
     extra empty space below — that's intentional. */
  min-height: 540px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Transition the height in lockstep with the shell so a 5↔6 row month
     navigation morphs both the visible chrome AND the content together.
     reflowDropdownShell() in script.js sets explicit pixel height for
     ~480ms then clears it back to auto. Same easing as the shell. */
  transition: height 480ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Dates / Flexible mode switcher — reuses the same orange-underline
   active-state pattern as the lessons calendar's One-Date / Period
   tabs (.dropdown__tab) so the calendar dropdown speaks one tab
   language regardless of mode. */
.calendar__mode {
  display: flex;
  align-self: center;
  justify-content: center;
  gap: 12px;
  /* No bottom margin — let .calendar__grid-section's 14px top padding
     define the gap to the calendar grid (matches the One-Date/Period
     spacing pattern on lessons mode for consistency). */
  margin: 24px auto 0;
}
.calendar__mode-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  font-size: 18px;
  font-weight: 400;
  color: #C6C6C6;
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1.17;
  transition: color 150ms ease;
}
.calendar__mode-tab:not(.calendar__mode-tab--active):hover {
  color: #2C3E50;
}
.calendar__mode-tab--active {
  color: #2C3E50;
}
.calendar__mode-tab--active::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: #FA824C;
  border-radius: 1px;
}

/* Panels — only one is visible at a time. Hidden via [hidden] is fine
   here because the morphing height transition reads the visible
   panel's natural size. */
.calendar__panel { display: contents; }
.calendar__panel[hidden] { display: none; }

/* Calendar panels (Dates / Flexible) — opacity transition orchestrated
   by setCalendarMode() in script.js for a smooth cross-fade when the
   user toggles tabs. The morphDropdownAround height animation runs in
   parallel so container height + panel opacity change together. */
.calendar__panel {
  transition: opacity 180ms ease-out;
}

/* Flexible panel content */
.calendar__panel--flexible {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 40px 32px;
  background: #FFFFFF;
  border-radius: 0 0 40px 40px;
}
/* Mobile (≤743px): match the Dates panel's padding inside .msearch__card-body
   (12px sides) instead of inheriting the desktop 40px sides, which left
   the month strip cramped inside the narrow card. Drop the bottom radius
   too — on mobile the panel sits inside a flat-edged card. */
@media (max-width: 743px) {
  .msearch__card-body .calendar__panel--flexible {
    padding: 8px 12px 20px;
    border-radius: 0;
  }
}
/* Headings sit at 15px to match .filter-section__title — was 18px which
   read as "shoutier" than every other heading in the system. */
.calendar__flex-heading {
  font-size: 15px;
  font-weight: 700;
  color: #2C3E50;
  margin: 16px 0 12px;
  text-align: center;
}
.calendar__flex-stay {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}
/* Stay-length pills reuse the .filter-opt visual language: white +
   light-grey border default, brand-blue fill + white text when active.
   Same hover ramp (border darkens to #CDD6E0). */
.flex-stay-btn {
  appearance: none;
  background: #FFFFFF;
  border: 1px solid #EEF0F3;
  border-radius: 40px;
  padding: 0 18px;
  height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: #2C3E50;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.flex-stay-btn:hover { border-color: #CDD6E0; }
.flex-stay-btn--active {
  background: #2454FF;
  border-color: #2454FF;
  color: #FFFFFF;
}

/* Months strip is a horizontally scrollable list. Width is locked to
   the wrap, the inner strip overflows to the right and snap-scrolls
   so 6 months are visible at a time. The native scrollbar is hidden;
   the chevron button on the right offers a discoverable way to advance. */
.calendar__flex-months-wrap {
  position: relative;
  width: 100%;
}
.calendar__flex-months {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 4px 8px;
  margin: 0 -4px;
}
.calendar__flex-months::-webkit-scrollbar { display: none; }
/* Month cards: vertical layout (icon + month + year) kept as the
   distinctive Airbnb-flexible pattern, but recolored to match the
   .filter-opt active state — brand-blue fill + white text + white
   icon when selected. Inactive uses the same #EEF0F3 border as the
   filter pills so it reads as one design system. */
.flex-month-btn {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  /* Fixed-width cards: 3.2 visible at once (3 full + 20% of 4th peeks)
     — matches Airbnb's flexible month strip. Math: 3.2 cards + 3 gaps
     (2 between full cards + 1 between 3rd and the peeking 4th) at
     12px each = 36px gap total. (100% - 36px) / 3.2 = card width. */
  flex: 0 0 calc((100% - 36px) / 3.2);
  padding: 16px 8px;
  background: #FFFFFF;
  border: 1px solid #EEF0F3;
  border-radius: 16px;
  cursor: pointer;
  color: #2C3E50;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  scroll-snap-align: start;
}
.flex-month-btn:hover { border-color: #CDD6E0; }

/* Chevron nav buttons — match the map zoom-control shape (32×32
   white pill, subtle shadow) AND the unified secondary-icon color
   (#2C3E50). Hover is a soft grey fill, no brand-color flip — see
   the .mapboxgl-ctrl zoom rules above for the same pattern. */
.calendar__flex-months-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: #FFFFFF;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  color: #2C3E50;
  /* Floating-pill family: hover lifts with shadow, never flips BG. */
  transition: box-shadow 0.15s ease;
}
.calendar__flex-months-nav[hidden] { display: none; }
.calendar__flex-months-nav--prev { left: -16px; }
.calendar__flex-months-nav--next { right: -16px; }
.calendar__flex-months-nav svg path { stroke: currentColor; }
.calendar__flex-months-nav:hover {
  background: #FFFFFF;
  box-shadow:
    -2px -2px 6px rgba(0, 0, 0, 0.1),
     2px  2px 6px rgba(0, 0, 0, 0.16);
}
.calendar__flex-months-nav:active {
  background: #F3F4F6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.flex-month-btn--active {
  background: #2454FF;
  border-color: #2454FF;
  color: #FFFFFF;
}
.flex-month-btn__icon {
  width: 28px;
  height: 28px;
  color: inherit;
}
.flex-month-btn__name {
  font-size: 14px;
  /* Matches .flex-stay-btn weight (400) so the month cards and the
     stay-length pills read at the same visual rank. Was 600. */
  font-weight: 400;
  color: inherit;
}
.flex-month-btn__year {
  font-size: 13px;
  color: #6B7280;
}
.flex-month-btn--active .flex-month-btn__year {
  color: rgba(255, 255, 255, 0.85);
}

/* Calendar date-mode tabs (One Date / Period) — lessons only */
.calendar__tabs {
  display: none;
  justify-content: center;
  gap: 12px;
  padding: 32px 40px 14px;
  background: #FFFFFF;
  border-radius: 40px 40px 0 0;
}

.calendar--show-tabs .calendar__tabs {
  display: flex;
}

/* On lessons mode the One-Date / Period tabs replace the Dates /
   Flexible toggle (lessons don't have a flexible window concept), so
   hide the .calendar__mode strip whenever .calendar--show-tabs is on
   the dropdown. Also force the Flexible panel hidden + Dates panel
   visible in case the user had switched modes on the camps tab and
   then jumped to lessons. */
.calendar--show-tabs .calendar__mode { display: none; }
.calendar--show-tabs .calendar__panel--flexible { display: none; }
.calendar--show-tabs .calendar__panel--dates { display: contents; }

/* When tabs are visible, remove top border-radius and reduce top padding from grid */
.calendar--show-tabs .calendar__grid-section {
  border-radius: 0;
  padding-top: 0;
}

.calendar__grid-section {
  display: flex;
  gap: 32px;
  /* Top: 14px so the calendar grid sits close to the Dates/Flexible
     tab strip (matches the lessons One-Date/Period gap pattern via
     .calendar--show-tabs override).
     Bottom: 8px so the date grid sits closer to the preset toolbar.
     Combined with the flex-section's 4px top, total gap ≈12px. */
  padding: 14px 20px 8px 40px;
  background: #FFFFFF;
  border-radius: 40px 40px 0 0;
  flex: 1;
  /* Top-align the month columns so each one sizes to its own content
     instead of stretching to fill the dropdown body's height. Without
     this, the grid-section's flex:1 was making each .calendar__month
     stretch ~46px below its days grid, which leaked through as a fake
     "gap" between the calendar and the preset toolbar below. */
  align-items: flex-start;
}

.calendar__month {
  width: 336px;
  display: flex;
  flex-direction: column;
  /* No flex gap — the date grid has no row-gap, so the weekday header
     should also sit flush against the first date row (reads as one
     continuous grid). Spacing under the month-name title is handled
     by .calendar__month-header's margin-bottom below. */
}
.calendar__month-header {
  margin-bottom: 12px;
}

.calendar__month-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calendar__month-name {
  font-size: 16px;
  font-weight: 500;
  color: #2C3E50;
  text-align: center;
  flex: 1;
}

.calendar__nav {
  /* "Floating white pill" family — same idle + hover treatment as the
     search-bar pill, standalone Filters chip, filter-modal close, and
     carousel scroll arrows. 32×32 hit-target with the 24px SVG centered. */
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}
/* Hover: keep BG white, deepen to the asymmetric 4-corner shadow so
   the button "lifts" instead of dissolving into the calendar card
   background (the old `background: #F3F4F6` hover was nearly the
   same color as the surrounding gray, making the button vanish). */
.calendar__nav:hover {
  background: #FFFFFF;
  box-shadow:
    -2px -2px 6px rgba(0, 0, 0, 0.1),
     2px  2px 6px rgba(0, 0, 0, 0.16);
}
.calendar__nav:active {
  background: #F3F4F6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.calendar__nav--disabled {
  cursor: default;
  opacity: 0.4;
}
.calendar__nav--disabled:hover {
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.calendar__nav-placeholder {
  width: 32px;
  height: 32px;
}

.calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 48px);
  text-align: center;
}

.calendar__weekdays span {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 400;
  color: #C6C6C6;
}

.calendar__days {
  display: grid;
  grid-template-columns: repeat(7, 48px);
}

.cal-day, .cal-empty {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  color: #2C3E50;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s;
}

.cal-day:hover {
  background: transparent;
  border-radius: 50%;
  outline: 2px solid #2454FF;
  outline-offset: -2px;
}

.cal-selected:hover {
  background: rgba(191, 215, 255, 0.24);
  border-radius: 0;
  outline: none;
}

.cal-range-end:hover {
  outline: none;
}

.cal-range-start:hover {
  background: linear-gradient(to right, transparent 50%, rgba(191, 215, 255, 0.24) 50%);
  border-radius: 0;
  outline: none;
}

.cal-range-finish:hover {
  background: linear-gradient(to left, transparent 50%, rgba(191, 215, 255, 0.24) 50%);
  border-radius: 0;
  outline: none;
}

.cal-selected {
  border-radius: 0;
  background: rgba(191, 215, 255, 0.24);
}

.cal-empty {
  cursor: default;
}

.cal-disabled {
  color: #C6C6C6;
  cursor: default;
}

.cal-disabled:hover {
  background: none;
  outline: none;
}

/* Today's date — no special outline */
.cal-today {
  color: #2C3E50;
  font-weight: 500;
}

/* Selected range background */

/* Check-in / check-out endpoints — filled circle */
.cal-range-end {
  position: relative;
  color: #FFFFFF;
  font-weight: 500;
}

.cal-range-end::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2454FF;
  z-index: 0;
}

.cal-range-end span {
  position: relative;
  z-index: 1;
}

/* Range start (check-in) — right half highlight */
.cal-range-start {
  background: linear-gradient(to right, transparent 50%, rgba(191, 215, 255, 0.24) 50%);
  border-radius: 0;
}

/* Range end (checkout) — left half highlight */
.cal-range-finish {
  background: linear-gradient(to left, transparent 50%, rgba(191, 215, 255, 0.24) 50%);
  border-radius: 0;
}

/* First in-range cell on a row — rounded left edge */
.cal-row-start {
  border-radius: 50% 0 0 50%;
}

/* Last in-range cell on a row — rounded right edge */
.cal-row-end {
  border-radius: 0 50% 50% 0;
}

.calendar__flex-section {
  /* Tightened top padding so the preset buttons sit closer to the
     calendar grid (the grid-section already contributes 20px of bottom
     padding, which was being doubled by the flex-section's 20px top —
     the combined ~40px gap read as a disconnected island). 4px keeps a
     little breathing room without the buttons feeling welded to the grid. */
  padding: 4px 40px 40px;
  background: #FFFFFF;
}

/* Quick-select buttons (Today / Tomorrow) — lessons single-date mode only */
.calendar__quick-section {
  display: none;
  padding: 4px 40px 40px;
  background: #FFFFFF;
}

.calendar__flex-buttons {
  display: flex;
  gap: 8px;
}

.flex-btn {
  padding: 12px 32px;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 400;
  color: #2C3E50;
  border: 1px solid rgba(217, 217, 217, 0.7);
  background: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

/* Hover: dark outline (same Airbnb-style chip pattern as `.filter-opt`
   in the advanced filters modal). The previous hover flipped to a
   filled blue, which collided with the active state — clicking a chip
   didn't visibly do anything until the cursor moved away. */
.flex-btn:hover {
  border-color: #1A2B48;
}

.flex-btn--active {
  background: #2454FF;
  color: #FFFFFF;
  border-color: #2454FF;
}

/* Active + hover: stay filled blue (no border-color flip — the chip is
   already chosen, hover shouldn't compete for attention). */
.flex-btn--active:hover {
  background: #2454FF;
  border-color: #2454FF;
}

/* MONTHS DROPDOWN (Spots tab) */
.dropdown--months {
  left: 50%;
  transform: translateX(-60%) translateY(-24px);
  border-radius: 40px;
  padding: 32px 32px 24px;
  min-width: 398px;
  height: 555px;
  display: flex;
  flex-direction: column;
}

.dropdown--months.dropdown--open {
  transform: translateX(-60%) translateY(0);
}

.months__scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.dropdown--months .dropdown__item--selected {
  background: #EEEEF2;
  font-weight: 500;
}

.months__flex {
  flex-shrink: 0;
  padding-top: 20px;
}

/* SKILL LEVEL DROPDOWN (Spots tab) */
.dropdown--skill {
  right: 52px;
  border-radius: 16px;
  padding: 20px;
  width: 358px;
}

.skill__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.skill__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  width: 100%;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 400;
  color: #2C3E50;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.skill__item:hover {
  background: #EEEEF2;
}

.skill__item--active {
  font-weight: 500;
}

.skill__item--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.skill__item--disabled:hover {
  background: none;
}

.skill__check {
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #2454FF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.skill__item:hover .skill__check {
  background: #2454FF;
  border-color: #2454FF;
}

.skill__item:hover .skill__check svg path {
  stroke: white;
}

.skill__item--active .skill__check {
  background: #2454FF;
  border-color: #2454FF;
}

.skill__item--disabled .skill__check {
  border-color: #C6C6C6;
}

.skill__item--disabled:hover .skill__check {
  background: none;
  border-color: #C6C6C6;
}

.skill__item--disabled:hover .skill__check svg path {
  stroke: transparent;
}

/* GUESTS DROPDOWN */
.dropdown--guests {
  /* `right: 101px` aligns the Guests dropdown's right edge with the
     Calendar's right edge (Calendar is centered, width 764, so its right
     edge is 101px from the search bar's right). With both right edges
     matched, the When↔Who morph keeps the right border anchored and only
     the width shrinks — the visual feel is "container becomes shorter
     from the left," which is what we want.

     Width bumped to 398px and padding to 32px to match the Where
     dropdown — same internal padding ⇒ rows have the same breathing
     room as Where's destination list. Right edge still anchored, so
     the morph alignment is preserved. */
  right: 101px;
  border-radius: 16px;
  padding: 32px;
  width: 398px;
  box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.16);
}

.guests__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.guests__row + .guests__row {
  margin-top: 16px;
}

.guests__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.guests__label {
  font-size: 14px;
  font-weight: 500;
  color: #2C3E50;
  line-height: 1.17;
}

.guests__sublabel {
  font-size: 12px;
  font-weight: 400;
  color: #C6C6C6;
  line-height: 1.17;
}

.guests__counter {
  display: flex;
  align-items: center;
}

.guests__btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2454FF;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.guests__btn--minus {
  border-radius: 8px 0 0 8px;
}

.guests__btn--plus {
  border-radius: 0 8px 8px 0;
}

.guests__btn--disabled {
  background: #C6C6C6;
  cursor: default;
}

.guests__value {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F7F7F7;
  font-size: 18px;
  font-weight: 400;
  color: #2C3E50;
}

/* Toggle */
.toggle {
  position: relative;
  width: 49px;
  height: 24px;
  cursor: pointer;
}

.toggle__input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle__slider {
  position: absolute;
  inset: 0;
  background: #C6C6C6;
  border-radius: 47px;
  transition: background 0.2s;
}

.toggle__slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.2s;
}

.toggle__input:checked + .toggle__slider {
  background: #2454FF;
}

.toggle__input:checked + .toggle__slider::before {
  transform: translateX(25px);
}

/* ===== SECTIONS ===== */
.section {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 0 0 40px;
}

.section + .section {
  margin-top: 120px;
}

#camps {
  margin-top: 40px;
}

.section__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  padding-right: 40px;
}

.section__titles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section__subheading {
  font-size: 16px;
  font-weight: 500;
  color: #2454FF;
  line-height: 1.17;
}

.section__heading {
  font-size: 40px;
  font-weight: 700;
  color: #2C3E50;
  line-height: 1.17;
}

.link-blue {
  font-size: 16px;
  font-weight: 400;
  color: #2454FF;
  line-height: 1.17;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.link-blue:hover {
  opacity: 0.7;
}

/* ===== CARD SCROLL ===== */
.card-scroll-wrap {
  position: relative;
  overflow: visible;
}

.card-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.card-scroll::-webkit-scrollbar {
  display: none;
}

/* Scroll Button */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 118, 255, 0.5);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: background 0.15s, box-shadow 0.15s, opacity 0.2s;
}

.scroll-btn:hover {
  background: #2823FF;
}

.scroll-btn:active {
  background: #2823FF;
}

.scroll-btn--right {
  right: 40px;
}

.scroll-btn--left {
  left: 0;
  right: auto;
}

.scroll-btn--hidden {
  opacity: 0;
  pointer-events: none;
}

/* ===== HOME CARD ===== */
.home-card {
  flex-shrink: 0;
  width: 500px;
  height: 500px;
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-size: cover;
  background-position: center;
  position: relative;
  scroll-snap-align: start;
  transition: box-shadow 0.2s;
}

.home-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.12);
  transition: background 0.2s;
}

@media (hover: hover) {
  .home-card:hover {
    box-shadow: -4px -4px 12px rgba(0, 0, 0, 0.2), 4px 4px 12px rgba(0, 0, 0, 0.32);
  }
}

.home-card__label {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  height: 34px;
  padding: 0 24px;
  border-radius: 51px;
  background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 400;
  display: inline-flex;
  align-items: center;
  line-height: 1.17;
  backdrop-filter: blur(4px);
}

.home-card__title {
  position: relative;
  z-index: 1;
  font-size: 32px;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.17;
}

/* ===== SPOT CARDS ===== */
.spot-card {
  flex-shrink: 0;
  width: 500px;
  height: 500px;
  border-radius: 24px;
  overflow: hidden;
  display: block;
  transition: box-shadow 0.2s;
  scroll-snap-align: start;
}

@media (hover: hover) {
  .spot-card:hover {
    box-shadow: -4px -4px 12px rgba(0, 0, 0, 0.2), 4px 4px 12px rgba(0, 0, 0, 0.32);
  }
}

.spot-card__title {
  display: none;
}

.spot-card__svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== PARTNER SECTION ===== */
.partner {
  max-width: 1360px;
  margin: 120px auto 0;
  background: #FFFFFF;
  border-radius: 24px;
  padding: 80px 180px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 112px;
}

.partner__text {
  max-width: 576px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.partner__heading {
  font-size: 48px;
  font-weight: 700;
  color: #2C3E50;
  line-height: 1.17;
}

.partner__body {
  font-size: 18px;
  font-weight: 400;
  color: #2C3E50;
  line-height: 1.5;
}

.btn-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2454FF;
  color: #FFFFFF;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-blue:hover {
  background: #1a44e0;
}

.btn-blue--lg {
  height: 48px;
  padding: 12px 32px;
  font-size: 18px;
  align-self: flex-start;
}

/* Partner Photos */
.partner__photos {
  position: relative;
  width: 430px;
  height: 368px;
  flex-shrink: 0;
}

.partner__photo-grid {
  position: relative;
  width: 100%;
  height: 100%;
}

.partner__img {
  position: absolute;
  border-radius: 12px;
  object-fit: cover;
}

.partner__img--2 {
  width: 79px;
  height: 68px;
  top: 0;
  left: 30px;
}

.partner__img--4 {
  width: 85px;
  height: 80px;
  top: 0;
  right: 34px;
}

.partner__img--6 {
  width: 207px;
  height: 189px;
  top: 37px;
  left: 130px;
}

.partner__img--3 {
  width: 132px;
  height: 124px;
  bottom: 0;
  left: 0;
}

.partner__img--1 {
  width: 100px;
  height: 94px;
  bottom: 0;
  left: 207px;
}

.partner__img--5 {
  width: 79px;
  height: 74px;
  bottom: 41px;
  right: 10px;
}

.partner__tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 400;
  white-space: nowrap;
}

.partner__tag--dark {
  background: #2C3E50;
  color: #FFFFFF;
  padding: 10px 24px;
  bottom: 110px;
  left: -20px;
}

.partner__tag--orange {
  background: #FA824C;
  color: #FFFFFF;
  padding: 10px 12px;
  bottom: 75px;
  right: 10px;
}

/* ===== FOOTER ===== */
/* The blue footer band is retired (Olya, 2026-07-16) — the canonical Footer
   skin is the only one we use now. Its background lives in
   recolor-overrides.css, and in footer-canonical.css for pages still on this
   legacy stylesheet. Do not reintroduce a background here. */
.footer {
  width: 100%;
  margin-top: 80px;
}

.footer__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 60px 40px 0;
}

.footer__content {
  display: flex;
  justify-content: space-between;
  gap: 163px;
}

.footer__logo {
  flex-shrink: 0;
}

.footer__columns {
  display: flex;
  justify-content: space-between;
  flex: 1;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer__col--newsletter {
  width: 320px;
  gap: 12px;
}

.footer__col-title {
  font-size: 16px;
  font-weight: 500;
  color: #2C3E50;
  line-height: 1.17;
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__links a {
  font-size: 14px;
  font-weight: 400;
  color: #2C3E50;
  line-height: 1.17;
  transition: color 0.2s;
}

.footer__links a:hover {
  color: #2454FF;
}

.footer__links--arrows a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.footer__links--arrows a::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.66667 9C1.46667 9 1.33333 8.93333 1.2 8.8C0.933333 8.53333 0.933333 8.13333 1.2 7.86667L7.86667 1.2C8.13333 0.933333 8.53333 0.933333 8.8 1.2C9.06667 1.46667 9.06667 1.86667 8.8 2.13333L2.13333 8.8C2 8.93333 1.86667 9 1.66667 9Z' fill='%232C3E50'/%3E%3Cpath d='M8.35518 8.11073C7.96731 8.11073 7.70873 7.85215 7.70873 7.4643V2.29286H2.53708C2.14921 2.29286 1.89062 2.03429 1.89062 1.64643C1.89062 1.25857 2.14921 1 2.53708 1H8.35518C8.74306 1 9.00164 1.25857 9.00164 1.64643V7.4643C9.00164 7.85215 8.74306 8.11073 8.35518 8.11073Z' fill='%232C3E50'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.footer__links--arrows a:hover::after {
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.66667 9C1.46667 9 1.33333 8.93333 1.2 8.8C0.933333 8.53333 0.933333 8.13333 1.2 7.86667L7.86667 1.2C8.13333 0.933333 8.53333 0.933333 8.8 1.2C9.06667 1.46667 9.06667 1.86667 8.8 2.13333L2.13333 8.8C2 8.93333 1.86667 9 1.66667 9Z' fill='%232454FF'/%3E%3Cpath d='M8.35518 8.11073C7.96731 8.11073 7.70873 7.85215 7.70873 7.4643V2.29286H2.53708C2.14921 2.29286 1.89062 2.03429 1.89062 1.64643C1.89062 1.25857 2.14921 1 2.53708 1H8.35518C8.74306 1 9.00164 1.25857 9.00164 1.64643V7.4643C9.00164 7.85215 8.74306 8.11073 8.35518 8.11073Z' fill='%232454FF'/%3E%3C/svg%3E");
}

.footer__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__input {
  width: 320px;
  height: 48px;
  border-radius: 108px;
  border: 1px solid #D9DBE9;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 400;
  color: #2C3E50;
  background: #FFFFFF;
  transition: box-shadow 0.2s;
}

.footer__input:hover,
.footer__input:focus {
  box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.1), 2px 2px 6px rgba(0, 0, 0, 0.16);
  outline: none;
}

.footer__input:-webkit-autofill,
.footer__input:-webkit-autofill:hover,
.footer__input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset;
  -webkit-text-fill-color: #2C3E50;
}

.footer__input::placeholder {
  color: #C6C6C6;
}

.footer__subscribe {
  width: 320px;
  height: 48px;
  font-size: 16px;
}

.footer__copyright {
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  padding: 40px 0 20px;
  line-height: 1.17;
}

/* ===== HEADER MENUS ===== */
.header__actions {
  position: relative;
}

/* Header dropdowns (.main-menu, .user-menu) — moved 2026-05-27 to
 * src/components/header-dropdown.css so they ride Next.js's bundle
 * hashing and dodge the cache mess that styles.css?v=N inherited.
 * Do not re-add them here. */

.user-menu__item--login:hover {
  background: #F7F7F7;
  color: #2C3E50;
}

/* ===== RESPONSIVE 1440px (partner section) ===== */
@media (max-width: 1440px) {
  /* === PARTNER === */
  .partner { padding: 80px 80px; gap: 80px; }
  .partner__photos { width: 400px; height: 342px; }
  .partner__img--2 { width: 74px; height: 64px; left: 28px; }
  .partner__img--4 { width: 79px; height: 74px; right: 32px; }
  .partner__img--6 { width: 193px; height: 176px; top: 34px; left: 121px; }
  .partner__img--3 { width: 123px; height: 116px; }
  .partner__img--1 { width: 92px; height: 86px; left: 191px; }
  .partner__img--5 { width: 72px; height: 68px; bottom: 38px; right: 10px; }
}

/* ===== RESPONSIVE 1024px (tablet — mobile search, bottom nav) ===== */
@media (max-width: 1024px) {

  /* === BASE === */
  body { min-width: 320px; }

  /* === HEADER — tablet/mobile padding === */
  .header { padding: 32px 40px 20px; }

  /* === BOTTOM NAV — Figma 390/menu spec ===
     ZERO dynamic values. No env(), no dvh, no CSS vars, no viewport units.
     Glued to bottom:0 with a hard-locked 76px height. Chrome can resize
     its URL bar all day long — the bnav cannot move, grow, or shrink.
     iOS home-indicator clearance handled by the bottom 12px padding,
     which the indicator overlays (icons sit above it). */
  /* Bnav — anchored to the JS-tracked actual visible viewport top.
     --vh-real is set by VhLock.tsx to window.innerHeight, which
     reflects the actual iframe area even in Chrome iOS sims that
     report viewport units smaller (e.g. iPhone SE: svh=667 but
     innerH=694). Fallback to 100svh for the initial render (before
     JS) and for environments where VhLock didn't run. */
  .bnav {
    display: flex;
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #FFFFFF;
    align-items: stretch;
    border-radius: 40px 40px 0 0;
    height: auto;
    box-sizing: border-box;
    padding: 0 0 env(safe-area-inset-bottom, 0px) 0;
    border-top: 1px solid rgba(20, 23, 28, 0.11);
    box-shadow: 0 -10px 28px -14px rgba(20, 23, 28, 0.14);
  }

  .bnav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    color: #1A2B48;
    margin: 0;
    /* Each item is locked at 76px so the icon+label region sits in a
       fixed-height row at the TOP of the bnav (which itself stretches to
       bottom:0 for background coverage). Items can never grow or shrink. */
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
  }
  .bnav__label {
    display: block;
  }

  .bnav__item--active { color: #2454FF; }
  .bnav__icon { width: 20px; height: 20px; display: block; flex-shrink: 0; }
  .bnav__icon-wrap { position: relative; display: inline-flex; }
  .bnav__badge-dot {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #14171C;
    border: 1.5px solid #FFFFFF;
  }
  .bnav__label { font-size: 12px; font-weight: 400; line-height: normal; flex-shrink: 0; }

  /* === SECTIONS === */
  .section { padding: 0 0 0 40px; }
  .section__header { padding-right: 40px; }
  .section__heading { font-size: 32px; }
  #camps { margin-top: 36px; }
  .section + .section { margin-top: 116px; }

  /* === CARDS === */
  .home-card { width: 460px; height: 460px; padding: 28px; }
  .home-card__title { font-size: 28px; }
  .spot-card { width: 460px; height: 460px; }

  /* === SCROLL BUTTONS === */
  .scroll-btn--right { right: 40px; }

  /* === PARTNER SECTION === */
  .partner { margin: 116px 40px 0; padding: 60px 40px; gap: 60px; }
  .partner__text { max-width: 420px; }
  .partner__heading { font-size: 36px; }
  .partner__photos { width: 340px; height: 290px; }
  .partner__img--2 { width: 62px; height: 54px; left: 24px; }
  .partner__img--4 { width: 67px; height: 63px; right: 27px; }
  .partner__img--6 { width: 164px; height: 149px; top: 29px; left: 103px; }
  .partner__img--3 { width: 104px; height: 98px; }
  .partner__img--1 { width: 79px; height: 74px; left: 163px; }
  .partner__img--5 { width: 62px; height: 58px; bottom: 32px; right: 8px; }
  .partner__tag--dark { bottom: 87px; left: -16px; }
  .partner__tag--orange { bottom: 59px; right: 8px; }

  /* === FOOTER === */
  .footer { margin-top: 64px; }
  .footer__inner { padding: 60px 40px 0; }
  .footer__content { gap: 60px; }
  .footer__col--newsletter { width: 280px; }
  .footer__input { width: 280px; }
  .footer__subscribe { width: 280px; }
  .footer__links--arrows { width: 92px; }
  .footer__links--arrows a { justify-content: space-between; width: 100%; gap: 10px; }
}

/* ===== MOBILE-ONLY header (≤743px) — Airbnb pattern: pill row first,
   tabs row below. Logo and actions hidden to match Airbnb's mobile
   layout (just pill + tabs + content + bottom nav). ===== */
@media (max-width: 743px) {
  .header { flex-direction: column; gap: 16px; }
  .header__logo { display: none; }
  .header__actions { display: none; }
  /* On mobile, .search-bar-mobile sits as a direct child of .header
     (not inside .header__search-area), so .header__search-area becomes
     an empty wrapper. Hiding it removes the extra flex slot + gap that
     was inflating the space between the pill and the tabs. */
  .header__search-area { display: none; }
  .header__top { order: 1; justify-content: center; padding: 0 64px; }
  /* Tabs row: 12px label with brand-blue 3px underline (matches the
     Airbnb mobile spec but recolored to our brand). */
  .header__tabs { gap: 0; justify-content: space-between; flex: 1; }
  .header__tabs .tab-btn {
    font-size: 12px;
    line-height: 10px;
    color: rgb(106, 106, 106);
    padding: 0;
  }
  .header__tabs .tab-btn--active {
    font-size: 12px;
    font-weight: 700;
    color: #2C3E50;
  }
  .header__tabs .tab-slider {
    height: 3px;
    background: #2454FF;
    border-radius: 1.5px;
    bottom: -8px;
  }
  .header--compact .header__top { display: none; }
  .header--compact { padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important; padding-bottom: 12px !important; gap: 0 !important; }
  .header--compact .header__search-area { padding-bottom: 0; }
  .header--compact .search-bar-compact { display: none !important; }
  .header--compact .search-bar-mobile { display: flex; }
  .search-bar-container { display: none; }
  .search-bar-mobile { display: flex; order: 0; }

  /* Destination pages: the pre-fill script in peniche.html updates
     .search-bar-mobile__text with the region name on DOMContentLoaded.
     No extra CSS needed — the mobile search bar shows "Camp: Peniche" automatically. */

  /* Search-page mobile pill: back arrow + 2-line pill + filter circle */
  .search-bar-mobile--search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: auto;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: default;
  }
  .search-bar-mobile--search .search-bar-mobile__back {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    color: #2C3E50;
    text-decoration: none;
  }
  .search-bar-mobile--search .search-bar-mobile__pill {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 56px;
    padding: 0 16px;
    background: #FFFFFF;
    border-radius: 100px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
    cursor: pointer;
    text-align: center;
  }
  /* line1 is the activity-type anchor — alone on its row, bold, dark,
     centered. line2 carries "Anywhere · Anytime · Guests" at the
     softer secondary style. */
  .search-bar-mobile--search .search-bar-mobile__line1 {
    font-size: 14px;
    font-weight: 600;
    color: #2C3E50;
    line-height: 1.2;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
  }
  .search-bar-mobile--search .search-bar-mobile__line2 {
    font-size: 12px;
    font-weight: 400;
    color: #6B6B6B;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
  }
  .search-bar-mobile--search .search-bar-mobile__dot {
    color: #6B6B6B;
  }
  /* Mobile filter button — matches the desktop standalone filter chip:
     white bg, light-grey border, dark icon. Brand-blue is reserved for
     primary CTAs; secondary chrome stays neutral. Badge keeps the brand
     blue so "active filters" still has a single accent moment. */
  .search-bar-mobile--search .search-bar-mobile__filter {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #EEF0F3;
    background: #FFFFFF;
    cursor: pointer;
  }
  .search-bar-mobile--search .search-bar-mobile__filter img {
    width: 20px;
    height: 20px;
    /* SVG asset has white fills; brightness(0) flattens to dark. */
    filter: brightness(0);
  }
  .search-bar-mobile--search .search-bar-mobile__filter-badge:not([hidden]) {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #2454FF;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Search page mobile (≤743): Airbnb-style default — map fullscreen,
     listing as a draggable bottom sheet (peek → half → full). */
  .search-page .search { padding: 16px 0 24px; }
  .search-page .search__inner { padding: 0 16px; }
  .search-page .search__breadcrumb { display: none; }
  .search-page .search__count { font-size: 20px; }
  .search-page .search__toolbar { gap: 12px; flex-wrap: wrap; }
  .search-page .search__layout {
    display: block;
  }
  .search-page .search__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  /* Map mounted full-viewport behind the sheet. */
  .search-page .search__map {
    display: block !important;
    position: fixed !important;
    top: var(--header-h, 62px) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--header-h, 62px) - var(--bnav-h, 82px)) !important;
    border-radius: 0 !important;
    z-index: 2050 !important;
    visibility: visible;
    pointer-events: auto;
  }
  .search-page .search__map-inner { border-radius: 0 !important; height: 100% !important; }
  .search-page { padding-bottom: 0 !important; }
  /* Bump the header (and the dropdowns inside it) above the fullscreen
     map's z-index 2050. Without this, opening the calendar/where/who
     dropdown at iPad portrait map-view shows only its top sliver — the
     rest is hidden behind the map. */
  .search-page .header { z-index: 2100 !important; }
}

/* Very narrow phones: collapse list to 1 column */
@media (max-width: 480px) {
  .search-page .search__list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ===== RESPONSIVE 788px ===== */
@media (max-width: 834px) {

  /* === BASE === */
  body { min-width: 320px; }

  /* === HEADER === */
  .header { padding: 32px 24px 20px; }
  .header--compact { box-shadow: none; }

  /* === SECTIONS === */
  .section { padding: 0 0 0 24px; }
  .section__header { padding-right: 24px; }
  .section__heading { font-size: 24px; line-height: 28px; }
  #camps { margin-top: 32px; }
  .section + .section { margin-top: 98px; }

  /* === CARDS === */
  .home-card { width: 340px; height: 340px; padding: 24px; }
  .home-card__title { font-size: 24px; line-height: 28px; }
  .spot-card {
    width: 340px;
    height: 340px;
  }

  /* === SCROLL BUTTONS === */
  .scroll-btn--right { right: 24px; }

  /* === PARTNER SECTION === */
  .partner {
    margin: 98px 32px 0;
    padding: 62px 32px;
    gap: auto;
  }
  .partner__text { max-width: 330px; gap: 24px; }
  .partner__heading { font-size: 36px; }
  .partner__body { font-size: 17px; }
  .partner__photos { width: 256px; height: 218px; }
  .partner__img--2 { width: 47px; height: 41px; left: 18px; }
  .partner__img--4 { width: 50px; height: 47px; right: 20px; }
  .partner__img--6 { width: 123px; height: 112px; top: 22px; left: 78px; }
  .partner__img--3 { width: 78px; height: 74px; }
  .partner__img--1 { width: 59px; height: 56px; left: 123px; }
  .partner__img--5 { width: 47px; height: 44px; bottom: 24px; right: 6px; }
  .partner__tag--dark { bottom: 87px; left: -16px; }
  .partner__tag--orange { bottom: 59px; right: 8px; }

  /* === FOOTER === */
  .footer { margin-top: 62px; }
  .footer__inner { padding: 48px 32px 28px; }
  .footer__content { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
  .footer__columns { display: contents; }
  .footer__col--newsletter { grid-column: 1 / -1; width: auto; align-items: center; text-align: center; }
  .footer__form { align-items: center; }
  .footer__copyright { padding: 48px 0 0; margin: 0; }
  .footer__input { width: 340px; }
  .footer__subscribe { width: 340px; }

  /* === CALENDAR DROPDOWN === */
  .dropdown--calendar { width: 642px; height: auto; }
  .dropdown--where { max-height: 443px; padding: 24px; }
  .dropdown--guests { width: 240px; padding: 20px; }
  .dropdown--months { max-height: 443px; height: auto; }
  .dropdown__tab { font-size: 15px; }
  .dropdown__search-input { font-size: 13px; }
  .dropdown__section-label { font-size: 10px; }
  .dropdown__item { font-size: 13px; width: 100%; }
  .calendar__grid-section { gap: 20px; padding: 24px 30px 0 32px; }
  .calendar__month { flex: 1; width: auto; gap: 0; }
  .calendar__weekdays { grid-template-columns: repeat(7, 40px); }
  .calendar__days { grid-template-columns: repeat(7, 40px); }
  .cal-day, .cal-empty { width: 40px; height: 40px; font-size: 13px; }
  .calendar__month-name { font-size: 15px; }
  .calendar__weekdays span { width: 40px; height: 40px; font-size: 11px; }
  .cal-range-end::before { width: 34px; height: 34px; }
  .calendar__flex-section { padding: 4px 32px 32px; }
  .flex-btn { font-size: 14px; padding: 10px 24px; }
  .calendar__tabs { padding: 24px 32px 12px; }
  .calendar__quick-section { padding: 4px 32px 32px; }
}

/* ===== RESPONSIVE 390px ===== */
@media (max-width: 480px) {

  /* === BASE === */
  body { min-width: 390px; }

  /* === HEADER === */
  .header { padding: 16px 16px 16px; gap: 16px; }
  .header--compact { gap: 8px; padding-top: 12px; padding-bottom: 12px; }
  .header--compact .header__search-area { gap: 0; padding-bottom: 0; }
  .header__logo img { width: 120px; height: auto; }
  .header__actions { gap: 8px; }
  .icon-btn { width: 36px; height: 36px; }
  .header__tabs { gap: 12px; padding-bottom: 0; }
  .tab-btn { padding: 10px; }
  .header__search-area { order: 0; }

  /* === SECTIONS === */
  .section { padding: 0 0 0 16px; }
  .section__header { padding-right: 16px; margin-bottom: 20px; }
  .section__titles { gap: 12px; }
  .section__subheading { font-size: 14px; }
  .section__heading { font-size: 20px; line-height: 24px; }
  .link-blue { font-size: 14px; }
  #camps { margin-top: 24px; }
  .section + .section { margin-top: 64px; }

  /* === CARDS === */
  .card-scroll { gap: 12px; }
  .home-card { width: 300px; height: 380px; padding: 20px; border-radius: 20px; }
  .home-card::before { border-radius: 20px; }
  .home-card__label { height: 28px; padding: 0 16px; font-size: 12px; }
  .home-card__title { font-size: 22px; line-height: 26px; }

  /* === SPOT CARDS === */
  .spot-card {
    width: 208px;
    height: 300px;
    padding: 20px;
    border-radius: 20px;
    position: relative;
    background: rgba(0, 118, 255, 0.05);
  }
  .spot-card__title {
    display: block;
    position: relative;
    z-index: 1;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
    color: #2C3E50;
  }
  .spot-card picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .spot-card .spot-card__svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }

  /* === SCROLL BUTTONS === */
  .scroll-btn { width: 36px; height: 36px; }
  .scroll-btn--right { right: 16px; }
  .scroll-btn svg { width: 18px; height: 18px; }

  /* === PARTNER === */
  .partner {
    margin: 64px 16px 0;
    padding: 32px 14px;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    border-radius: 20px;
  }
  .partner__text { max-width: 330px; gap: 20px; align-items: center; text-align: center; }
  .partner__heading { font-size: 28px; }
  .partner__body { font-size: 17px; }
  .btn-blue--lg { align-self: stretch; font-size: 14px; height: 48px; padding: 12px 32px; justify-content: center; }
  .partner__photos { width: 300px; height: 256px; }
  .partner__img--2 { width: 62px; height: 54px; top: 0; left: 24px; }
  .partner__img--4 { width: 67px; height: 63px; top: 0; right: 0; }
  .partner__img--6 { width: 170px; height: 130px; top: 44px; left: 60px; }
  .partner__img--3 { width: 100px; height: 94px; bottom: 0; left: -10px; }
  .partner__img--1 { width: 76px; height: 71px; bottom: 0; left: 140px; }
  .partner__img--5 { width: 62px; height: 58px; top: 100px; right: -10px; }
  .partner__tag--dark { bottom: 30px; left: 40px; }
  .partner__tag--orange { top: 70px; left: -10px; bottom: auto; right: auto; }

  /* === FOOTER === */
  .footer { margin-top: 64px; }
  .footer__inner { padding: 32px 16px 0; }
  .footer__content { display: flex; flex-direction: column; gap: 32px; }
  .footer__logo { flex-shrink: 0; }
  .footer__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .footer__col { gap: 14px; }
  .footer__links--arrows {
    width: 87px;
  }
  .footer__links--arrows a {
    justify-content: space-between;
    width: 100%;
    gap: 8px;
  }
  .footer__col--newsletter {
    grid-column: 1 / -1;
    width: 100%;
    align-items: flex-start;
    text-align: left;
    margin-top: 24px;
  }
  .footer__col-title { font-size: 15px; }
  .footer__form { align-items: stretch; width: 100%; }
  .footer__input { width: 100%; }
  .footer__subscribe { width: 100%; }
  .footer__copyright { padding: 75px 0 16px; }

  /* === MENUS === */
  .main-menu { right: 0; width: calc(100vw - 32px); max-width: 280px; }
  .user-menu { width: calc(100vw - 32px); max-width: 280px; }

  /* === DROPDOWNS === */
  .dropdown--where {
    min-width: auto;
    width: calc(100vw - 32px);
    left: 50%;
    transform: translateX(-50%) translateY(-24px);
    border-radius: 24px;
    padding: 24px;
    height: 420px;
  }
  .dropdown--where.dropdown--open {
    transform: translateX(-50%) translateY(0);
  }
  .dropdown__section { width: 100%; }
  .dropdown__item { width: 100%; }
  .dropdown__divider { width: 100%; }

  .dropdown--calendar {
    width: calc(100vw - 32px);
    height: auto;
    border-radius: 24px;
  }
  .dropdown--calendar.dropdown--open {
    transform: translateX(-50%) translateY(0);
  }
  .calendar__grid-section {
    flex-direction: column;
    gap: 24px;
    padding: 24px 16px 16px;
  }
  .calendar__month { width: 100%; }
  .calendar__month:last-child { display: none; }
  .calendar__weekdays { grid-template-columns: repeat(7, 1fr); }
  .calendar__weekdays span { width: auto; height: 40px; }
  .calendar__days { grid-template-columns: repeat(7, 1fr); }
  .cal-day, .cal-empty { width: auto; height: 40px; font-size: 14px; }
  .calendar__nav-placeholder { display: none; }
  .calendar__month-header { justify-content: center; gap: 16px; }
  .calendar__flex-section { padding: 12px 16px 20px; }
  .calendar__quick-section { padding: 12px 16px 20px; }
  .flex-btn { padding: 10px 20px; font-size: 14px; }

  .dropdown--guests {
    width: calc(100vw - 32px);
    left: 50%;
    transform: translateX(-50%) translateY(-24px);
    border-radius: 24px;
  }
  .dropdown--guests.dropdown--open {
    transform: translateX(-50%) translateY(0);
  }

  .dropdown--months {
    width: calc(100vw - 32px);
    left: 50%;
    transform: translateX(-50%) translateY(-24px);
    border-radius: 24px;
  }
  .dropdown--months.dropdown--open {
    transform: translateX(-50%) translateY(0);
  }

  .dropdown--skill {
    width: calc(100vw - 32px);
    left: 50%;
    transform: translateX(-50%) translateY(-24px);
    border-radius: 24px;
  }
  .dropdown--skill.dropdown--open {
    transform: translateX(-50%) translateY(0);
  }

}

@media (min-width: 744px) and (max-width: 1127px) {
  .footer { padding-bottom: 80px; }

  /* iPad Mini (~768px) breathing room. The tablet inherits the ≤1024
     rule `.header { padding: 32px 40px 20px }` — 40px sides eat 80px
     total and crowd the right-side icon cluster (filter chip + hamburger
     + profile). Drop horizontal padding to 24px and tighten internal
     gaps so the cluster doesn't feel jammed against the search bar.
     Destination pages get the same treatment (overrides their Figma
     `body.destination-page .header { padding: 24px 40px 7px }` rule
     at this breakpoint) so the header looks identical to /search. */
  .header,
  body.destination-page .header {
    padding: 16px 24px !important;
    gap: 8px;
  }
  /* Search bar at iPad widths: cap at 560px so it doesn't dominate the
     row and shoves the icons out of view. Was inheriting min(100%, 828px)
     from the ≥744 rule which at 768px viewport leaves ~640px and the
     icons end up squeezed. */
  .header .search-bar-container {
    max-width: 560px;
  }
  /* Filter chip sits closer to the search bar at this width — 12px gap
     becomes 6px so the right cluster reads as one unit. Kept white as
     a proper button, BUT the 1px border is removed: at tablet the chip
     is icon-only (46x46) sitting next to the menu/user pills (also
     46x46, borderless). With the border, the chip's visible edge sat
     ~45px inside the 46x46 box and made the chip look smaller than
     the menu pills. Removing the border equalizes the visible diameter. */
  .search-bar-compact__filter-btn--standalone {
    margin-left: 6px;
    border: none;
  }
  /* Hamburger + user icons — grey pill, no border, darker on hover.
     Quieter than the filter chip (intentional — they're utility).
     45px (1px smaller than the filter chip's 46x46) to compensate for
     the saturated active-blue color visually expanding the pill. */
  .header__actions .icon-btn {
    width: 45px;
    height: 45px;
    background: #F7F7F7;
    border: none;
    border-radius: 32px;
    transition: background 150ms ease;
  }
  /* Active (menu open): brand blue (same #2454FF as the logo + search
     submit button) with white icon. !important on both background AND
     stroke so they flip together — Tailwind preflight's `button {
     background: none }` was beating the bg, and the inline `stroke="#2C3E50"`
     attributes on the hamburger/user SVG lines were beating the
     stroke (CSS specificity normally wins over presentation attrs,
     but pairing both !important guarantees they change in the same
     paint frame). */
  .header__actions .icon-btn--active {
    background-color: #2454FF !important;
    /* No transition on background-color so the color change is instant
       — matches the instant stroke flip below. */
    transition: none;
  }
  .header__actions .icon-btn--active svg line,
  .header__actions .icon-btn--active svg circle,
  .header__actions .icon-btn--active svg path {
    stroke: #FFFFFF !important;
  }
  /* Override the global `.icon-btn:hover` rule (which would flip the
     stroke to white) so the hamburger/user icons keep their dark stroke
     even if the breakpoint is loaded on a hover-capable device. */
  .header__actions .icon-btn:hover {
    background: #F7F7F7;
  }
  .header__actions .icon-btn:hover svg line,
  .header__actions .icon-btn:hover svg circle,
  .header__actions .icon-btn:hover svg path {
    stroke: #2C3E50;
  }
  /* Tight gap between the two icon buttons to match the 6px gap I set
     between the filter chip and the search bar — whole cluster reads
     as one tightly-spaced group. */
  .header__actions {
    gap: 6px;
  }
}

/* ============================================= */
/* SEARCH RESULTS PAGE                            */
/* ============================================= */
.search-page .header { position: sticky; top: 0; background: #F7F7F7; z-index: 100; }

/* Search page expanded state: keep search-area flex-row so the Filter
   button sits to the right of the 828px search bar instead of stacking
   below it. The compact-state rule (line ~3388) already uses flex-row,
   so this just extends that behavior to the expanded state. */
.search-page .header:not(.header--compact) .header__search-area {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.search-page .header.header--compact { padding-top: 49px; }

/* ===== TEST: Airbnb-style single-row header (applies to home + search) ===== */
@media (min-width: 744px) {
  .header {
    padding-top: 16px !important;
    padding-bottom: 16px;
    gap: 12px;
    /* Without an explicit min-height, the header snaps from expanded → 80
       the moment .header__search-area becomes position:absolute, so the
       grey BG races ahead of the morphing pill. Lock min-height to the
       expanded total (16 padTop + 48 top row + 32 gap + 66 bar + 16 padBot)
       and transition it on the same spring as the pill so BG and pill
       shrink together (Airbnb behavior). */
    min-height: 178px;
    transition:
      padding var(--motion-spring-fast-duration) var(--motion-spring-fast-easing),
      gap var(--motion-spring-fast-duration) var(--motion-spring-fast-easing),
      box-shadow var(--motion-spring-fast-duration) var(--motion-spring-fast-easing),
      min-height var(--motion-spring-content-duration) var(--motion-spring-content-easing);
  }
  .header.header--compact {
    min-height: 80px;
  }
  .header .header__top {
    position: relative;
    min-height: 48px;
  }
  /* COMPACT: search pill centered on top row */
  .header.header--compact .header__search-area {
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: auto !important;
    max-width: none !important;
    padding: 0;
    margin: 0;
    pointer-events: none;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }
  .header.header--compact .header__search-area > * {
    pointer-events: auto;
  }
  /* Tabs slide WAY up (off the top of the header) and fade out together
     over 220ms ease-out. The big translate (-48px ≈ tab row height +
     padding) makes the row visibly exit out the top, mirroring Airbnb's
     wrapper translateY(-87px) effect. Triggered by EITHER `.tabs-hiding`
     (the brief "phase 1" hold class — tabs hide BEFORE the bar starts
     morphing) OR `.header--compact` (the final state). */
  .header.header--compact .header__tabs {
    position: absolute;
    top: 16px;
    left: 50%;
    /* Tabs fade in place (no lift) — pure opacity transition keeps them
       visually anchored as everything else morphs. Override max-height
       from the mobile rule (which snaps it to 0 with no transition,
       clipping the tabs to 0 height instantly and killing the visible
       fade). With absolute positioning the height doesn't affect layout. */
    transform: translateX(-50%) translateY(0);
    max-height: 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease-out;
  }
  .header.header--compact .search-bar-container {
    padding: 0;
    margin: 0;
    width: max-content;
    min-width: 340px;
    max-width: 760px;
    height: 46px;
  }

  /* Container has an explicit width at all times so the width
     transition stays stable through the parent's static→absolute swap.
     Width 828px matches Airbnb's desktop spec (was 966px). On narrower
     iPads the bar shrinks to fit via min(100%, 828px). */
  .header .search-bar-container {
    width: min(100%, 828px);
    max-width: 828px;
  }

  /* With the bar at 828px (was 966px) each field is narrower; values
     and labels nowrap and clip with ellipsis if needed so they stay
     on one line and don't push the field height out of the 66px pill. */
  .header .search-bar__label,
  .header .search-bar__placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header .search-bar__field {
    overflow: hidden;
  }
  .header .search-bar__value-row {
    flex-wrap: nowrap;
  }

  /* EXPANDED: tabs centered on top row, search bar on row below.
     Visible gap = margin-top (20) + flex gap (12) − tab overhang (16) = 16px.
     Tabs absolute `top: 16px` inside .header__top (which is 48px tall) make
     them protrude 16px below .header__top into the gap zone. */
  .header:not(.header--compact) .header__search-area {
    position: static;
    padding-top: 0;
    margin-top: 20px;
  }
  /* Expanded steady state. `:not(.tabs-hiding)` is required because the
     tabs-hiding state class adds NO `header--compact`, so without this
     extra exclusion the expanded rule would still match (same specificity
     as `.header.tabs-hiding .header__tabs`, but later in source = wins
     the tie). The exclusion makes the tabs-hiding rule the only one
     matching during phase 1.
     `top: 0` (was 16px) aligns the tab row with .header__top so tab
     centers match logo/actions vertical center on the top row. */
  .header:not(.header--compact):not(.tabs-hiding) .header__tabs {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    height: 48px;
    margin: 0;
    padding-bottom: 0;
    max-height: none;
    display: flex;
    align-items: center;
    z-index: 2;
  }
  /* (Previously had @starting-style here for a tabs slide-down entrance.
     Removed because it left tabs stuck at opacity:0 on initial page load.
     Entrance is now opacity-only via the existing transition.) */
  .header:not(.header--compact) .header__tabs .tab-slider {
    /* Sit 4px below the active tab's text baseline (was 4px from
       .header__tabs bottom = ~9px from text — too loose). */
    bottom: 9px;
  }
}
/* ===== END TEST ===== */

/* Tablet (744–1024px) inherits the desktop ≥744px rules: full Airbnb-style
   header with logo + 3 icon tabs + actions on top row, full 3-field search
   bar below. Search bar shrinks to fit via `width: min(100%, 966px)`. On
   scroll, collapses to compact pill via the same FLIP animation as desktop.

   "List with us" is hidden on iPad — at these widths the row gets cramped
   in expanded state (the pill wraps the label) and the centered compact
   pill would collide with the wider right-side actions. Without it, the
   default 505px viewport-centered compact pill fits cleanly between logo
   and remaining actions (menu + profile). */
@media (min-width: 744px) and (max-width: 1024px) {
  .header .btn-outline-pill {
    display: none;
  }
  /* iPad sizes (744–1024): When and Who use tighter 20px (they sit
     between dividers, which create their own visual breathing room).
     Where needs more — it's flush against the rounded left corner of
     the pill, which eats ~16px of visual space; 32px keeps Where's
     content optically aligned with the others. */
  .header .search-bar__field--dates,
  .header .search-bar__field--guests {
    padding-left: 20px;
  }
  .header .search-bar__field--where {
    padding-left: 32px;
  }
  .header .search-bar__field {
    padding-right: 12px;
    overflow: hidden;
  }
  .header .search-bar__label,
  .header .search-bar__placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Search bar pill height matches Airbnb's desktop spec (66px) — the
     desktop default is now also 66px so this is just for safety; iPad
     inherits cleanly. Update header min-height so the gray BG transitions
     to compact height without a jump. */
  .header .search-bar-container {
    height: 66px;
  }
  .header {
    min-height: 162px;
  }
  /* Compact pill width on iPad: Airbnb's spec is 400px (the new desktop
     default). 400px also fits cleanly between logo and right actions at
     iPad Air (820), no override needed unless we hit overlap at smaller
     iPads — left at default. */
}

.search { background: #F7F7F7; min-height: 60vh; padding: 32px 0 80px; }
.search__inner { max-width: 1440px; margin: 0 auto; padding: 0 40px; }

.search__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666666;
  margin-bottom: 16px;
}
.search__breadcrumb a { color: #666666; }
.search__breadcrumb a:hover { color: #2454FF; }
.search__breadcrumb-sep { color: #C6C6C6; }

.search__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* Reserve the sort button's height (64px) on the toolbar even when
     the sort is hidden — keeps the H1 vertically centered at the
     same y-position across tabs. Without this, switching to Spots
     (which hides the sort) collapses the toolbar to the H1's height
     and the title appears to jump up by ~16px. */
  min-height: 64px;
}

.search__count {
  font-size: 28px;
  font-weight: 700;
  color: #2C3E50;
  margin: 0;
}

.search__sort-wrap {
  position: relative;
}
.search__sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 306px;
  height: 64px;
  background: #FFFFFF;
  border: 1px solid #EEF0F3;
  border-radius: 20px;
  padding: 20px 20px 20px 40px;
  cursor: pointer;
  font-size: 16px;
  color: #2C3E50;
  font-family: inherit;
}
.search__sort strong {
  color: #2C3E50;
  font-weight: 400;
}
.search__sort:hover { border-color: #D0D5DD; }
.search__sort-icon { width: 24px; height: 24px; flex-shrink: 0; }

.search__sort-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  /* 223px wide, uniform 10px padding on all four sides so the
     hover/active background of an option is inset 10px from the menu
     edges (matches the vertical breathing room above + below the
     options). Without this the active background spanned the full
     menu width and felt visually too "loud". */
  width: 223px;
  list-style: none;
  margin: 0;
  padding: 10px;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: none;
  flex-direction: column;
  gap: 5px;
  z-index: 50;
}
.search__sort-menu.search__sort-menu--open {
  display: flex;
}
.search__sort-option {
  height: 48px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  border-radius: 12px;
  font-size: 14px;
  color: #2C3E50;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.search__sort-option:hover {
  background: #F3F5F9;
}
.search__sort-option--active,
.search__sort-option--active:hover {
  background: #2454FF;
  color: #FFFFFF;
}

/* ≤1127px: sort becomes a 64x64 icon-only square (Figma 768 spec) */
@media (max-width: 1127px) {
  .search__sort {
    width: 64px;
    height: 64px;
    padding: 20px;
    justify-content: center;
    gap: 0;
  }
  .search__sort > span { display: none; }
  .search__sort-icon { width: 24px; height: 24px; }
  /* Sort menu width is consistent across all breakpoints (223px). */
}

/* 744–1127px: Airbnb-style default — map fullscreen, listing as draggable sheet. */
@media (min-width: 744px) and (max-width: 1127px) {
  .search-page .search__layout {
    display: block;
  }
  .search-page .search__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .search-page .search__map {
    display: block !important;
    position: fixed !important;
    top: var(--header-h, 100px) !important;
    right: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100dvh - var(--header-h, 100px) - var(--bnav-h, 82px)) !important;
    border-radius: 0 !important;
    z-index: 2050 !important;
    visibility: visible;
    pointer-events: auto;
  }
  .search-page .search__map-inner { border-radius: 0 !important; height: 100% !important; }
  .search-page { padding-bottom: 0 !important; }
  /* Header sits above ALL other map-view chrome so dropdowns inside it
     (calendar / where / who) clear the entire stack. Tablet-range
     z-index stack at /search:
       map (.search__map)              = 2050
       listings sheet (.search__left)  = 2200
       map toggle pill (sheet--full)   = 2300
     Header needs to beat all of them so dropdowns aren't clipped by
     the sheet (which previously cut off the country list at the sheet's
     top edge). 2400 = above everything. */
  .search-page .header { z-index: 2400 !important; }
}

/* Set --bnav-h per breakpoint so the sheet, map, and pill all sit above
   the bottom nav (which is now always visible on tablet/mobile). */
:root { --bnav-h: 0px; }
/* Bnav is only shown at ≤743 (mobile-only). On tablet the header still
   has the hamburger + account icons, so the bnav would duplicate them. */
@media (max-width: 743px) {
  :root { --bnav-h: 62px; }
  /* Reserve space below content for the bnav (mobile-only). */
  body { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }

  /* On scrollable pages (destination/home), constrain html to viewport
     and let body be the scroll container. This prevents document scroll
     from triggering Chrome's iOS URL bar simulation (which resizes the
     visual viewport mid-scroll and makes `bottom: 0` on the bnav
     appear to clip / move). /search achieves the same effect via
     overflow:hidden on body + inner scrollable sheet.
     Uses 100dvh (dynamic viewport height) instead of 100svh: the
     small-viewport value (svh) is shorter than the actual visible
     iframe at some Chrome devtools mobile sims (e.g. iPhone SE:
     svh=667 but innerH=694) — that 27px gap rendered as empty space
     below the bnav. Because we kill document scroll via overflow:hidden,
     the URL-bar transition that normally makes dvh unstable never
     triggers — dvh stays equal to the visible viewport. */
  html:has(body.destination-page),
  html:has(body:not(.search-page):not(.signup-page):not(.destination-page)) {
    overflow: hidden;
    height: 100dvh;
  }
  body.destination-page,
  body:not(.search-page):not(.signup-page) {
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  /* When the map is "expanded" on mobile — meaning the sheet is in
     peek state OR a pin preview card is open — the user is focused on
     the map. Hide the bottom nav so the map gets the full viewport,
     and zero out --bnav-h so the sheet/pill geometry doesn't reserve
     space for nav that isn't there. Applies across camps/lessons/spots
     because the body classes are tab-agnostic. */
  body.search-page--map-view:not(.sheet--half):not(.sheet--full),
  body.search-page--map-view.pin-card-open {
    --bnav-h: 0px;
    padding-bottom: 0;
  }
  body.search-page--map-view:not(.sheet--half):not(.sheet--full) .bnav,
  body.search-page--map-view.pin-card-open .bnav {
    display: none !important;
  }
}
@media (min-width: 744px) and (max-width: 1127px) {
  .bnav { display: none !important; }
}

/* Floating map/list toggle pill button — visible only at <=1127.
   Default split view: anchored to the map/list boundary so it doesn't block cards.
   Fullscreen --map-view: anchored to the bottom (above bnav) so the bottom sheet
   has room to drag up. */
.search__map-toggle {
  display: none;
  position: fixed;
  left: 50%;
  bottom: auto;
  top: calc(var(--header-h, 100px) + (100dvh - var(--header-h, 100px) - var(--bnav-h, 82px)) / 2 - 21px);
  transform: translateX(-50%);
  z-index: 2100;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  background: #1A2B48;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(26, 43, 72, 0.3);
}
.search-page--map-view .search__map-toggle {
  top: auto;
  bottom: calc(var(--bnav-h, 0px) + 16px + env(safe-area-inset-bottom));
}

/* Pin card — appears when a price-pill marker is tapped in map-view (≤1127px).
   Anchored to viewport bottom above the bnav. Reuses .camp-card markup inside.
   X close button floats above the card on the map (per Figma spec). */
.map-pin-card { display: none; }
@media (max-width: 1127px) {
  .search-page--map-view .map-pin-card:not([hidden]) {
    display: block;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--bnav-h, 0px) + 12px + env(safe-area-inset-bottom));
    z-index: 2200;
    background: transparent;
    pointer-events: none;
    transform: translateY(24px);
    opacity: 0;
    transition: opacity 200ms ease-out, transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .search-page--map-view .map-pin-card.map-pin-card--shown {
    transform: translateY(0);
    opacity: 1;
  }
  .map-pin-card__slot {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    pointer-events: auto;
  }
  /* Mobile pin card layout — matches Figma "390 card surf camps" /
     "390 card lessons" (358 × 341–363 px). Vertical: image on top
     (163px tall, rounded top corners), body below (white, 12px padding,
     rounded bottom corners). All paddings, font sizes, and spacing
     mirror the Figma 390 spec exactly. */
  .map-pin-card .camp-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
  }
  /* Image height pulled down from Figma's 163 → 120 for actual mobile
     ergonomics. The Figma is aspirational (looks great in isolation),
     but at 390×844 the original 340px total card covered ~40% of
     viewport. 120px image + ~120px body = ~240px total, in line with
     Airbnb's pin card ergonomics. Image still feels generous. */
  .map-pin-card .camp-card__img-link {
    width: 100%;
    height: 120px;
    align-self: stretch;
    aspect-ratio: auto;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
    flex: 0 0 120px;
  }
  .map-pin-card .camp-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .map-pin-card .camp-card__body {
    background: #FFFFFF;
    border-radius: 0 0 20px 20px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 12px;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
  }
  /* Title (Heading 5): 16px SemiBold, dark navy. */
  .map-pin-card .camp-card__title {
    font-size: 16px;
    font-weight: 600;
    color: #1A2B48;
    line-height: 1.2;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Location row (left side of location/reviews) — pin icon + main
     "City, Country" text + sub "1 km from the ocean" line. */
  .map-pin-card .camp-card__location { gap: 4px; }
  .map-pin-card .camp-card__location svg { width: 16px; height: 16px; }
  .map-pin-card .camp-card__location-name { font-size: 12px; color: #666666; }
  .map-pin-card .camp-card__distance { font-size: 9px; color: #C6C6C6; }
  /* Right side: rating star + 14px Bold value + 10px reviews count. */
  .map-pin-card .camp-card__rating {
    font-size: 14px;
    font-weight: 700;
    color: #2C3E50;
    gap: 4px;
  }
  .map-pin-card .camp-card__rating > svg { width: 16px; height: 16px; }
  .map-pin-card .camp-card__reviews { font-size: 10px; color: #666666; }
  /* Highlights row — inline " · " separated 9px labels. */
  .map-pin-card .camp-card__tags {
    font-size: 9px;
    color: #666666;
  }
  /* Bottom row: rooms / instructor list (10px) + price section. */
  .map-pin-card .camp-card__beds li {
    font-size: 10px;
    color: #2C3E50;
  }
  .map-pin-card .camp-card__more {
    font-size: 10px;
    color: #C6C6C6;
  }
  .map-pin-card .camp-card__price-amount {
    font-size: 18px;
    font-weight: 700;
    color: #2C3E50;
  }
  .map-pin-card .camp-card__price-unit {
    font-size: 12px;
    color: #2C3E50;
  }
  /* Lesson subtitle ("Group lesson") — small dark navy text under the
     school name, per Figma 390 card lessons. */
  .map-pin-card .lesson-card__subtitle {
    font-size: 12px;
    font-weight: 400;
    color: #1A2B48;
  }
  /* Lesson offerings list mirrors camps' "available rooms" column on
     the bottom-left. 10px Regular #2C3E50. */
  .map-pin-card .lesson-card__offerings li {
    font-size: 10px;
    color: #2C3E50;
  }
  /* Hide tags row only — Figma puts the highlights inline; tags row
     is a different visual that doesn't appear in the on-map card. */
  .map-pin-card .lesson-card__tags {
    display: none !important;
  }
  .map-pin-card__close {
    position: absolute;
    top: -44px;
    right: 4px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #2454FF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    pointer-events: auto;
  }
  /* When pin card is open, hide the bottom sheet and the map-toggle pill.
     `body` prefix raises specificity above the `.search-page.search-page--map-view`
     sheet rule (which also uses `!important`). */
  body.search-page--map-view.pin-card-open .search__left { display: none !important; }
  body.search-page--map-view.pin-card-open .search__map-toggle { display: none !important; }

  /* Spot pin card — same .spot-result-card markup as the search list
     (photo background, glass chips top-left, heart top-right, country
     + region overlay at bottom, dark gradient overlays). Just shorter
     than the listing card so it fits over the map without dominating
     the viewport. All other styling (gradients, chip glass effect,
     heart button, title positioning) inherits from the existing
     .spot-result-card rules — no duplication. */
  .map-pin-card .spot-result-card {
    height: 250px !important;
    border-radius: 20px;
  }
}

/* Tablet (744–1127): pin card is a horizontal card — image on the left, content on
   the right — per Figma "Card on map (iPad)" spec. */
@media (min-width: 744px) and (max-width: 1127px) {
  .search-page--map-view .map-pin-card:not([hidden]) {
    /* Center, with a comfortable max-width so it doesn't stretch edge-to-edge. */
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 24px);
    width: min(720px, calc(100vw - 24px));
  }
  .search-page--map-view .map-pin-card.map-pin-card--shown {
    transform: translate(-50%, 0);
  }
  .map-pin-card__slot { border-radius: 24px; }
  .map-pin-card .camp-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 240px;
  }
  .map-pin-card .camp-card__img-link {
    flex: 0 0 262px;
    width: 262px;
    aspect-ratio: auto;
    height: auto;
    align-self: stretch;
    border-radius: 16px 0 0 16px;
    overflow: hidden;
  }
  .map-pin-card .camp-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .map-pin-card .camp-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 24px 28px;
    gap: 14px;
    min-width: 0;
  }
  .map-pin-card .camp-card__title { font-size: 22px; font-weight: 700; line-height: 1.2; }
  .map-pin-card .camp-card__sub { gap: 16px; }
  .map-pin-card .camp-card__location-name { font-size: 16px; }
  .map-pin-card .camp-card__distance { font-size: 13px; }
  .map-pin-card .camp-card__rating { font-size: 18px; font-weight: 700; }
  .map-pin-card .camp-card__rating > svg { width: 20px; height: 20px; }
  .map-pin-card .camp-card__reviews { font-size: 14px; }
  .map-pin-card .camp-card__tags { font-size: 14px; }
  .map-pin-card .camp-card__bottom { margin-top: auto; align-items: flex-end; }
  .map-pin-card .camp-card__beds li { font-size: 15px; }
  .map-pin-card .camp-card__more { font-size: 15px; }
  .map-pin-card .camp-card__price-amount { font-size: 28px; font-weight: 700; }
  .map-pin-card .camp-card__price-unit { font-size: 14px; }
}
/* Lock page scroll while in map view — body becomes fixed-positioned viewport */
body.search-page--map-view {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  overflow: hidden !important;
  height: 100vh !important;
  width: 100vw !important;
}
/* Collapse the search container so its grey bg + min-height + padding don't
   show through behind the fixed map. Map is position:fixed so it stays visible. */
.search-page.search-page--map-view .search {
  background: transparent !important;
  min-height: 0 !important;
  padding: 0 !important;
}
.search-page.search-page--map-view .search__inner {
  padding: 0 !important;
}
.search-page.search-page--map-view .search__breadcrumb {
  display: none !important;
}
/* The "Found N camps/lessons/spots" H1 stays visible inside the sheet
   on tablet/mobile, but tightened to 20px (per Figma — see @media rule
   below) and left-aligned next to the sort dropdown. Earlier we hid it
   here to avoid duplicating the sheet-grabber count chip; the user
   prefers having an explicit headline above the cards, so we restore
   it. */
/* Hide injected footer in map-view */
.search-page.search-page--map-view #footer-slot,
.search-page.search-page--map-view footer,
.search-page.search-page--map-view .footer {
  display: none !important;
}

/* Hide marketing footer on the search results page at tablet/mobile widths.
   The bottom nav + "Show map" pill already occupy the bottom; the marketing
   footer just clutters the results flow. Desktop keeps the footer. */
@media (max-width: 1127px) {
  .search-page #footer-slot,
  .search-page > footer,
  .search-page .footer {
    display: none !important;
  }
}

/* Bottom drawer sheet — only visible inside map-view at 744-1127 (and ≤743 if needed) */
.search__sheet-grabber { display: none; }

@media (max-width: 1127px) {
  /* Override the default hide: turn .search__left into a bottom sheet.
     Sits above the bottom nav (which stays visible at all times).
     Peek height is sized to fit JUST the grabber + toolbar (no card
     peek-through above it) — the user reads the visual as "expand map
     for full-screen map exploration", not "peek of cards". */
  .search-page.search-page--map-view .search__left {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: var(--bnav-h, 73px) !important;
    height: 72px;
    background: #F7F7F7;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    z-index: 2200;
    overflow: hidden;
    padding: 0;
    margin: 0;
    gap: 0;
    transition: height 480ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .search-page.search-page--map-view.sheet--half .search__left {
    /* True 50/50 split between map and sheet within the usable area
       (viewport minus the sticky header and bottom nav). */
    height: calc((100dvh - var(--header-h, 100px) - var(--bnav-h, 82px)) / 2);
  }
  .search-page.search-page--map-view.sheet--full .search__left {
    height: calc(100dvh - var(--header-h, 100px) - var(--bnav-h, 73px));
    border-radius: 0;
  }
  /* When sheet is fully expanded, surface the map toggle pill above it */
  .search-page.search-page--map-view.sheet--full .search__map-toggle {
    display: inline-flex !important;
    z-index: 2300 !important;
  }
  .search-page.search-page--map-view.sheet--full .search__map-toggle .search__map-toggle-list-icon { display: none; }
  .search-page.search-page--map-view.sheet--full .search__map-toggle .search__map-toggle-map-icon { display: inline; }
  /* Drag handle bar at top of sheet — tightened so the toolbar +
     grabber together don't dominate the peek-state visible area when
     the map is expanded. With the count chip removed, the grabber
     only needs enough vertical room to be tappable without crowding
     the H1 just below it. */
  .search-page.search-page--map-view .search__sheet-grabber {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    padding: 8px 0 4px;
    cursor: grab;
    user-select: none;
    touch-action: none;
    position: relative;
  }
  .search-page.search-page--map-view .search__sheet-grabber::before {
    content: '';
    width: 36px;
    height: 4px;
    background: #D0D5DD;
    border-radius: 2px;
    margin-bottom: 0;  /* count chip is hidden, no need for spacing below */
  }
  /* Sheet-grabber count chip is hidden — the H1 inside the toolbar
     ("Found N camps/lessons/spots") is now the single source of truth
     for the result count above the cards. The drag handle bar (the
     ::before pseudo above) stays so the sheet is still draggable. */
  .search-page.search-page--map-view .search__sheet-count {
    display: none !important;
  }
  /* Hide pagination inside the sheet — only the list shows.
     The toolbar stays visible so the sort dropdown is reachable; we
     restyle it below to be a slim sort-only row (the H1 inside is
     hidden by the .search__count rule above). */
  .search-page.search-page--map-view .search__pagination {
    display: none !important;
  }
  /* Toolbar inside the sheet: H1 count on the left, sort text on the
     right, vertically centered. 16px top padding gives the "Found N"
     line breathing room from the drag handle above (consistent across
     peek/half/full states). 14px bottom padding maintains the gap
     between the toolbar and the cards/sheet edge below. */
  .search-page.search-page--map-view .search__toolbar {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex: 0 0 auto;
    padding: 16px 16px 14px;
    margin: 0;
    border: none;
    background: transparent;
  }
  /* Peek state ("Expand map" / sheet collapsed): only the count is
     visible — sort dropdown fades out, count centers, list hides.
     Once the user pulls the sheet up to half/full, sort fades back in
     and toolbar reverts to space-between. Applies across camps /
     lessons / spots. */
  /* Soft fade-in/fade-out for the sort-wrap when the sheet state
     changes. Using opacity + visibility (instead of display:none) so
     the transition runs in both directions; pointer-events:none stops
     it from intercepting taps while invisible. Layout-wise the sort
     still occupies space — H1 remains positioned by the surrounding
     justify-content rules below. */
  .search-page.search-page--map-view .search__sort-wrap {
    transition: opacity 220ms ease, visibility 220ms ease;
  }
  body.search-page--map-view:not(.sheet--half):not(.sheet--full) .search__sort-wrap {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Take the sort out of the flex flow so H1 is the only sibling
       and centers truly in the toolbar. Without this, visibility:hidden
       still reserves ~120px of layout space on the right, leaving the
       H1 visually off-center (slightly left). Absolute positioning
       collapses that footprint while the opacity/visibility transition
       still plays. */
    position: absolute;
    right: 16px;
  }
  body.search-page--map-view:not(.sheet--half):not(.sheet--full) .search__toolbar {
    justify-content: center !important;
    /* Generous top padding so the "Found N ..." line breathes from
       the drag handle bar above. Bottom padding pushes the (hidden)
       list further down so even a 1-pixel slack doesn't reveal cards. */
    padding: 16px 16px 18px !important;
  }
  body.search-page--map-view:not(.sheet--half):not(.sheet--full) .search__count {
    margin-right: 0 !important;
    text-align: center;
  }
  /* Belt-and-suspenders: hide the cards list entirely in peek state.
     The sheet's overflow: hidden already clips anything below the
     toolbar, but on some viewports the sheet fixed height leaves a
     slim band where the first card's image leaks through. Forcing
     display:none on the list eliminates the leak deterministically. */
  body.search-page--map-view:not(.sheet--half):not(.sheet--full) .search__list {
    display: none !important;
  }
  .search-page.search-page--map-view .search__count {
    display: block !important;
    /* Airbnb-style: smaller bold result count. Frees the toolbar for
       the H1 + a tight "Sort" text-button next to it (see .search__sort
       overrides below). */
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin: 0 !important;
    margin-right: auto !important;  /* push sort to far right */
  }
  .search-page.search-page--map-view .search__sort-wrap {
    position: relative;
  }
  .search-page.search-page--map-view .search__sort {
    /* Airbnb-style: tight text-only sort button — no icon, small
       padding, just enough white pill background to read as tappable.
       Visually balances the slim H1 on the left without taking the
       full toolbar height. */
    height: auto;
    width: auto;
    padding: 6px 10px;
    gap: 4px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
  }
  .search-page.search-page--map-view .search__sort-icon {
    display: none;  /* icon hidden — text label carries the affordance */
  }
  /* Restore the text label that the small-screen icon-only rule hides. */
  .search-page.search-page--map-view .search__sort > span {
    display: inline !important;
  }
  /* Sort menu opens BELOW the sort button in map-view (default
     direction). It used to be clipped by the sheet's overflow:hidden,
     but we now portal it to body when opened (see search.html sort
     button click handler), which escapes the sheet's clipping context.
     The JS sets fixed-position coords; CSS just provides the visuals. */
  /* The list area becomes scrollable inside the sheet. Top padding
     matches the card-to-card gap so the gap between toolbar and the
     first row of cards reads as the same rhythm as the gap between
     cards (12px tablet camps/lessons, 16px mobile, 20px spots —
     mobile + spots overrides further down).
     Bottom padding clears the floating "Expand map" toggle pill so
     the last card can be fully scrolled into view (button is
     position: fixed at bottom + 16px + bnav, ~46px tall = ~110px of
     dead zone otherwise). */
  .search-page.search-page--map-view .search__list {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px 96px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: max-content;
    align-content: start;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
  }
  /* Hide the old pill toggle in map-view; the sheet replaces it */
  .search-page.search-page--map-view .search__map-toggle {
    display: none !important;
  }
}

/* Mobile (≤743px): single column inside the bottom sheet — 2-col is too cramped */
@media (max-width: 743px) {
  .search-page.search-page--map-view .search__list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    /* Match the 16px row gap so the toolbar→first-card spacing reads
       identical to the gap between subsequent cards. */
    padding-top: 16px !important;
    /* Mobile bnav sits at the bottom + Expand map pill on top of it,
       so the last card needs ~120px of scroll-end clearance. */
    padding-bottom: 120px !important;
  }
}
.search__map-toggle:hover { background: #2C3E50; }
.search__map-toggle svg { width: 18px; height: 18px; }
.search__map-toggle .search__map-toggle-list-icon,
.search-page--map-view .search__map-toggle .search__map-toggle-map-icon { display: none; }
.search-page--map-view .search__map-toggle .search__map-toggle-list-icon { display: inline; }

@media (min-width: 744px) and (max-width: 1127px) {
  .search-page .search__map-toggle { display: inline-flex; }
}

.search__toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.search__toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.search__toggle-slider {
  width: 36px;
  height: 20px;
  background: #D9DBE9;
  border-radius: 20px;
  position: relative;
  transition: background 0.2s;
}
.search__toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #FFFFFF;
  border-radius: 50%;
  transition: transform 0.2s;
}
.search__toggle-input:checked + .search__toggle-slider { background: #2454FF; }
.search__toggle-input:checked + .search__toggle-slider::after { transform: translateX(16px); }
.search__toggle-label { font-size: 14px; color: #2C3E50; }

.search__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.search__left {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.search__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.search__map {
  position: sticky;
  top: calc(var(--header-h, 120px) + 16px);
  height: var(--map-h, calc(100vh - var(--header-h, 120px) - 32px));
  border-radius: 20px;
  overflow: hidden;
  background: #E6EEF7;
  align-self: start;
  z-index: 1;
}
.search__map-inner {
  width: 100%;
  height: 100%;
  background: #E8F1FF;
}
.search__map-img { width: 100%; height: 100%; object-fit: cover; display: none; }

/* Custom map zoom controls — pill 32x64, white bg, blue +/- icons (18.67px) */
.search__map .mapboxgl-ctrl-top-right { top: 16px; right: 16px; }
.search__map .mapboxgl-ctrl-group {
  width: 32px;
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: none;
  overflow: hidden;
}
.search__map .mapboxgl-ctrl-group:not(:empty) { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.search__map .mapboxgl-ctrl-group button {
  width: 32px;
  height: 32px;
  background-color: #FFFFFF;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.search__map .mapboxgl-ctrl-group button + button { border-top: none; }
.search__map .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18.67px 18.67px;
}
/* Zoom +/- icons in the same dark-grey-navy as the menu/account/X
   icons (#2C3E50). Brand-blue is reserved for primary CTAs and
   active-state cues — secondary chrome stays neutral. Hover is a
   soft grey fill instead of brand-blue + white inversion. */
.search__map .mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path d='M15.0013 16.9993H6.66797V14.9993H15.0013V6.66602H17.0013V14.9993H25.3346V16.9993H17.0013V25.3327H15.0013V16.9993Z' fill='%232C3E50'/></svg>") !important;
}
.search__map .mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'><path d='M6.66797 17V15H25.3346V17H6.66797Z' fill='%232C3E50'/></svg>") !important;
}
.search__map .mapboxgl-ctrl-group button:not(:disabled):hover { background-color: #F3F4F6 !important; }
.search__map .mapboxgl-ctrl-group button .mapboxgl-ctrl-icon { background-color: transparent !important; }

/* Price pill map marker — compact by default, expands on hover */
/* Spot pin: visually paired with the camps/lessons .map-price-pill
   (white pill, drop shadow, brand-color content) for consistency, but
   shows the Soltar logo mark instead of price/score because spots are
   destinations to discover, not bookable items.
   - Default state (zoom < 6): icon-only round white pill, ~32px square
   - Zoomed-in state (zoom >= 6, body.map-spot-pin--expanded set by JS):
     pill expands horizontally to fit the region name beside the icon */
.map-spot-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  width: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  font-family: inherit;
  color: #2C3E50;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: width 0.18s ease, padding 0.18s ease, transform 0.15s ease;
  transform-origin: center;
}
.map-spot-pin:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}
.map-spot-pin__icon { display: block; flex-shrink: 0; }
.map-spot-pin__name {
  display: none;  /* hidden until zoom passes threshold */
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Expanded pill — body class flipped by JS via updateSpotPinZoomState
   when map.getZoom() crosses SPOT_PIN_NAME_ZOOM. */
body.map-spot-pin--expanded .map-spot-pin {
  width: auto;
  padding: 0 12px 0 8px;
}
body.map-spot-pin--expanded .map-spot-pin__name {
  display: inline;
}

.map-price-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 0;
  background: #FFFFFF;
  color: #2C3E50;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: box-shadow 160ms ease;
  white-space: nowrap;
  transform-origin: center bottom;
}
.map-price-pill__expanded {
  display: none;
}
.map-price-pill:hover,
.map-price-pill--hover {
  border-radius: 18px;
  padding: 10px 16px;
  min-width: 200px;
  height: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 3;
}
.map-price-pill:hover .map-price-pill__compact,
.map-price-pill--hover .map-price-pill__compact {
  display: none;
}
.map-price-pill:hover .map-price-pill__expanded,
.map-price-pill--hover .map-price-pill__expanded {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  text-align: left;
}
.map-price-pill__title {
  font-size: 15px;
  font-weight: 700;
  color: #2C3E50;
  line-height: 1.2;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map-price-pill__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.map-price-pill__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  color: #2C3E50;
}
.map-price-pill__new {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: #2C3E50;
}
.map-price-pill__full-price {
  font-size: 15px;
  font-weight: 700;
  color: #2454FF;
}

/* Card hover highlight (triggered by marker hover) */
.camp-card--hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* Empty state shown when RPC returns 0 camps */
/* Skeleton bar for the search-page heading ("Found 12 camps"). Rendered
   in place of the heading text while the RPC is in flight so the user
   never sees the "Searching..." text flash before the real count.
   Matches Airbnb's pattern — skeleton bars where text will be. */
.search__count-skeleton {
  display: inline-block;
  width: 180px;
  height: 24px;
  border-radius: 6px;
  background: #EEF0F3;
  animation: searchSkeletonPulse 1.4s ease-in-out infinite;
  vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) {
  .search__count-skeleton { animation: none; }
}

/* Skeleton card shown while the search RPC is in flight. Same shape as
   .camp-card (image block + title block + meta block) so the layout
   doesn't reflow when real cards arrive. Subtle pulse via opacity. */
.search-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
}
.search-skeleton__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  background: #EEF0F3;
}
.search-skeleton__line {
  height: 14px;
  border-radius: 6px;
  background: #EEF0F3;
}
.search-skeleton__line--short { width: 40%; }
.search-skeleton__line--mid   { width: 70%; }
.search-skeleton__line--long  { width: 90%; }
.search-skeleton__img,
.search-skeleton__line {
  animation: searchSkeletonPulse 1.4s ease-in-out infinite;
}
@keyframes searchSkeletonPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  .search-skeleton__img,
  .search-skeleton__line { animation: none; }
}

.search-empty {
  padding: 48px 24px;
  text-align: center;
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #EAECEF;
}
.search-empty__title {
  font-size: 18px;
  font-weight: 700;
  color: #2C3E50;
  margin-bottom: 8px;
}
.search-empty__msg {
  font-size: 14px;
  color: #6B7280;
  line-height: 1.5;
}

/* Pagination */
.search__pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  /* 24px breathing room from the last row of cards before the pager. */
  margin-top: 24px;
}
.search__page {
  min-width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-size: 16px;
  color: #2C3E50;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.search__page:hover { color: #2454FF; }
.search__page--active {
  background: #2454FF;
  color: #FFFFFF;
}
.search__page--active:hover { color: #FFFFFF; }
.search__page--arrow { color: #9CA3AF; }
.search__page--arrow:hover { color: #2454FF; background: transparent; }

/* === CAMP CARD === */
.camp-card {
  display: flex;
  gap: 20px;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 0 20px 0 0;
  border: 1px solid #EEF0F3;
  height: 258px;
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.camp-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
}

.camp-card__img-link {
  display: block;
  position: relative;
  flex-shrink: 0;
  width: 256px;
  align-self: stretch;
  overflow: hidden;
}
.camp-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #FFFFFF;
  background: #2C3E50;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.camp-card__badge--staff_pick { background: #FF7335; }
.camp-card__badge--new { background: #1E88E5; }
.camp-card__badge--eco { background: #2E7D32; }
.camp-card__badge--women_run { background: #C2185B; }
.camp-card__badge--last_spots { background: #D32F2F; }
.camp-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.camp-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 0;
}

.camp-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.camp-card__title {
  font-size: 22px;
  font-weight: 600;
  color: #1A2B48;
  margin: 0;
  line-height: 1.25;
}

.camp-card__fav {
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.camp-card__fav svg { display: block; }
.camp-card__fav-path {
  fill: #666666;
  transition: fill 0.15s ease;
}
.camp-card__fav:hover .camp-card__fav-path {
  fill: #4A4A4A;
}
/* Saved state (Figma 3368:27630 — 768/icon favourite, "Active"):
   solid orange heart, NO background disc. */
.camp-card__fav--saved .camp-card__fav-path,
.camp-card__fav[aria-pressed="true"] .camp-card__fav-path {
  fill: #FF7335;
  stroke: #FF7335;
}

/* ===== Vertical card (≤1127px): image on top, body below ===== */
@media (max-width: 1127px) {
  .camp-card {
    flex-direction: column;
    height: auto;
    padding: 0;
    gap: 0;
    position: relative;
  }
  .camp-card__img-link {
    width: 100%;
    height: 191px;
    align-self: auto;
    border-radius: 20px 20px 0 0;
  }
  .camp-card__body {
    padding: 12px;
    gap: 8px;
  }
  .camp-card__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
  }
  .camp-card__sub {
    margin-top: 0;
    gap: 8px;
  }
  .camp-card__location {
    font-size: 12px;
    color: #2C3E50;
    gap: 4px;
  }
  .camp-card__location svg { width: 14px; height: 14px; }
  .camp-card__location-name { color: #2C3E50; font-size: 12px; }
  .camp-card__location-text .camp-card__distance,
  .camp-card__distance {
    font-size: 10px;
    color: #9CA3AF;
  }
  .camp-card__rating { font-size: 16px; font-weight: 700; gap: 4px; color: #2C3E50; }
  .camp-card__rating > svg { width: 24px; height: 24px; }
  .camp-card__reviews { font-size: 12px; color: #9CA3AF; }
  .camp-card__new-badge { font-size: 14px; }
  .camp-card__tags { font-size: 10px; margin-top: 4px; color: #666666; }
  .camp-card__bottom { padding-top: 8px; gap: 8px; }
  .camp-card__beds { gap: 1px; }
  .camp-card__beds li { font-size: 11px; color: #666666; }
  .camp-card__more { font-size: 11px; color: #9CA3AF; margin-top: 1px; }
  .camp-card__price-amount { font-size: 18px; font-weight: 700; color: #2C3E50; font-family: var(--font-inter), system-ui, sans-serif; }
  .camp-card__price-unit { font-size: 11px; color: #666666; }
  .camp-card__fav {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    background: none;
    border-radius: 0;
    z-index: 2;
    box-shadow: none;
  }
  .camp-card__fav svg { width: 24px; height: 24px; }
}


.camp-card__sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 2px;
}
.camp-card__location {
  display: flex;
  /* Centre the pin icon vertically across both text lines (address +
     "X km from the ocean") rather than aligning it to the first line.
     Reads better as a single visual unit — the pin "labels" the entire
     location block, not just the address. */
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #6B7280;
}
.camp-card__location svg { flex-shrink: 0; }
.camp-card__location-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.camp-card__location-name { color: #6B7280; }

.camp-card__rating {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  line-height: 1;
  color: #2C3E50;
  font-weight: 700;
  flex-shrink: 0;
}
.camp-card__rating > svg { flex-shrink: 0; }
.camp-card__reviews { font-size: 14px; color: #666666; font-weight: 400; }

.camp-card__new-badge {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  line-height: 1;
  color: #2C3E50;
  font-weight: 700;
  flex-shrink: 0;
}

.camp-card__distance {
  font-size: 12px;
  color: #9CA3AF;
}

.camp-card__tags {
  font-family: var(--font-inter), -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #2C3E50;
  margin-top: 14px;
}

.camp-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-top: auto;
  padding-top: 16px;
}

.camp-card__beds {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.camp-card__beds li {
  font-size: 14px;
  color: #2C3E50;
}
.camp-card__more {
  font-size: 14px;
  color: #9CA3AF;
  text-decoration: none;
  margin-top: 2px;
  display: inline-block;
}
.camp-card__more:hover { color: #2454FF; }

.camp-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}
/* Desktop-only price sizing. Wrapped in @min-1128 so the smaller @max-1127
   mobile rules (font-size 18 / 11) win at tablet/mobile widths regardless
   of source order — both rules previously had the same specificity. */
@media (min-width: 1128px) {
  .camp-card__price-amount {
    font-size: 26px;
    font-weight: 700;
    color: #2C3E50;
  }
  .camp-card__price-unit {
    font-size: 14px;
    color: #6B7280;
  }
}

/* ==========================================================================
   Lesson card — sibling of .camp-card. Reuses the .camp-card BEM scaffold
   (image/title/location/rating + .camp-card__bottom + .camp-card__beds),
   and adds three lesson-specific bits:
     - .lesson-card__subtitle  (small grey "Group lesson" line under title)
     - .lesson-card__offerings (offerings list, styled on top of __beds)
     - .lesson-card__price     (from / amount / person bottom-right block)
   ========================================================================== */
.camp-card.lesson-card .camp-card__img-link { position: relative; }
.camp-card.lesson-card .camp-card__header { align-items: flex-start; }

.lesson-card__heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.lesson-card__subtitle {
  font-size: 16px;
  color: #6B7280;
  line-height: 1.3;
}

/* Offerings list — uses .camp-card__beds layout (column). Each row:
   stripped title on the left + a small clock icon + duration on the
   right. The duration chip sits on the same baseline as the title and
   is colored grey so the title stays the primary read. */
.lesson-card__offerings {
  /* As a flex child of .camp-card__bottom (row, space-between), the
     default min-width: auto makes the <ul> claim the full width of its
     widest <li>. With nowrap titles like "Beginner private surf lesson"
     that pushes the right-side price block off-screen / overlapping.
     min-width: 0 lets the <ul> shrink so the title-ellipsis can engage,
     while .lesson-card__price stays at its intrinsic width via
     flex-shrink: 0. */
  min-width: 0;
  flex: 1 1 auto;
}

/* Wider breathing room between the offerings list (with the duration
   chip on its right edge) and the "from €X person" price block. The
   shared .camp-card__bottom gap was too tight on every breakpoint —
   the duration number sat right next to the "from" label with no
   visual pause. Doubling the gap (lesson card only, all breakpoints)
   gives the eye a clear separation between "row of offerings" and
   "what it costs". Camps cards don't have a duration chip on the same
   baseline so they keep the original gap. */
.camp-card.lesson-card .camp-card__bottom {
  gap: 32px;          /* desktop default (was 16px) */
}
@media (max-width: 1127px) {
  .camp-card.lesson-card .camp-card__bottom {
    gap: 16px;        /* tablet + mobile (was 8px) */
  }
}
.lesson-card__offerings li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.lesson-card__offering-title {
  flex: 1 1 auto;
  min-width: 0;
  /* Truncate with ellipsis instead of wrapping when the offering name
     overflows the available space (Wave Loft "Beginner private surf
     lesson" was wrapping to two lines, which broke the row rhythm).
     min-width: 0 above is the critical bit — flex children otherwise
     refuse to shrink below their intrinsic content width. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lesson-card__offering-duration {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  color: #6B7280;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.lesson-card__offering-clock {
  display: block;
  flex-shrink: 0;
}

/* Price block — mirrors .camp-card__price: an inline, baseline-aligned
   row of [from] [€70] [person]. Same typography scale as the camps card
   (amount 26px desktop / 18px tablet+mobile, unit 14px / 11px) so both
   tabs read as one design system. */
.lesson-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-shrink: 0;
}
.lesson-card__price-from {
  font-size: 14px;
  color: #6B7280;
  font-weight: 400;
}
.lesson-card__price-amount {
  font-size: 18px;
  font-weight: 700;
  color: #2C3E50;
  font-family: var(--font-inter), system-ui, sans-serif;
}
.lesson-card__price-unit {
  font-size: 11px;
  color: #6B7280;
}
@media (min-width: 1128px) {
  .lesson-card__price-from { font-size: 14px; }
  .lesson-card__price-amount { font-size: 26px; }
  .lesson-card__price-unit { font-size: 14px; }
}

/* ==========================================================================
   Spot result card  (search-page Spots tab — separate from the homepage
   .spot-card carousel). Full-bleed image with overlay chips + text.
   Different visual language from .camp-card / .lesson-card because these
   are destinations, not bookable items: no price, no rating row, no
   beds list. Just imagery + place + counts.
   ========================================================================== */
.spot-result-card {
  position: relative;
  display: block;
  /* 24px corner radius matches Figma `1024 spot card v2` and
     `768 spot card v2` (both have borderRadius: 24px). */
  border-radius: 24px;
  overflow: hidden;
  /* Fixed 480px height per Figma. With the 3-col grid at desktop the
     card width comes out at ~400-410px, giving an effective ~10:12
     aspect — close to the original 4:5 spec but locked to a consistent
     vertical rhythm so all cards line up regardless of grid width. */
  height: 480px;
  background: #1A2B48;        /* fallback while image loads */
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
@media (hover: hover) {
  .spot-result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  }
}

.spot-result-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Brightness/saturation lift on top of the source-baked auto=enhance.
     Source photos already had imgix enhancement at upload time; this is the
     final card-only polish to make images pop in the search grid. Keep
     subtle — too much and shadows blow out / colors look fake. */
  filter: brightness(1.1) saturate(1.05) contrast(1.02);
}

/* Per Figma fill stack (Screenshot 2026-05-03 at 14.00.25): the cover
   image has a #000000 at 12% layer on top of the Image at 100%. The
   12% black tint gives the photo a slightly cinematic, more muted feel
   AND raises baseline contrast against the white chips/heart/text on
   top — without dimming so much that the photo feels gray. */
.spot-result-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  pointer-events: none;
  z-index: 1;
}

/* Top + bottom dual gradient overlay. Stacked together in one
   pseudo-element via multi-background:
   - top fade darkens the upper third so chips + heart stay readable on
     covers with bright skies (most surf photos!)
   - bottom fade darkens the lower third so the country/region title
     reads cleanly when the photo's lower edge is bright sand or foam. */
.spot-result-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.25) 0%,
      rgba(0, 0, 0, 0.08) 25%,
      transparent 45%
    ),
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.4) 0%,
      rgba(0, 0, 0, 0.15) 30%,
      transparent 50%
    );
  pointer-events: none;
  z-index: 1;
}

.spot-result-card__chips {
  position: absolute;
  /* Per spec: chips inset 32px from the top + left card edges on desktop.
     Tablet/mobile drops to 14px (see media query) so cards don't feel
     hollow at smaller widths. */
  top: 32px;
  left: 32px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.spot-result-card__chip {
  display: inline-flex;
  align-items: center;
  /* Per Figma: chip W=hug × H=34, padding 8h/0v, gap 4, radius 51,
     fill card/white/10%. Icon 20×20, number 14px regular (per spec). */
  gap: 4px;
  height: 34px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.spot-result-card__chip svg {
  flex-shrink: 0;
}

.spot-result-card__fav {
  position: absolute;
  /* Desktop: 28px gap from edges, matching the body padding rhythm.
     Tablet/mobile drops to 14px (see media query below) so the small card
     doesn't feel hollow with a tiny heart floating in a sea of margin. */
  top: 28px;
  right: 28px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}
.spot-result-card__fav svg { display: block; }
/* Match camp/lesson cards: gray fill + white outline (set in SVG markup),
   orange when pressed. Drop-shadow keeps it readable on light backgrounds. */
.spot-result-card__fav-path {
  fill: #666666;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
  transition: fill 0.15s ease;
}
.spot-result-card__fav:hover .spot-result-card__fav-path {
  fill: #4A4A4A;
}
/* Saved state (Figma 3368:27630): solid orange heart, no disc.
   Keep the drop-shadow for legibility against bright photo backgrounds. */
.spot-result-card__fav--saved .spot-result-card__fav-path,
.spot-result-card__fav[aria-pressed="true"] .spot-result-card__fav-path {
  fill: #FF7335;
  stroke: #FF7335;
}

.spot-result-card__body {
  position: absolute;
  /* Per spec: region name 32px from card edges on desktop. Tablet/mobile
     drops to 14px (see media query) so the smaller card doesn't waste
     space and the title can stretch wider. */
  bottom: 32px;
  left: 32px;
  right: 32px;
  z-index: 2;
}
.spot-result-card__country {
  /* Per spec: smaller title (country name) is 14px regular at every
     viewport — don't shrink on mobile. */
  font-size: 14px;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: 2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.spot-result-card__title {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* iPad-landscape tier (≤1024px) — matches Figma "1024 spot card card v2"
   (node 3904-73199). 1024 aligns with the project's existing breakpoint
   (the same one used elsewhere for iPad-landscape sizing). */
@media (max-width: 1024px) {
  .spot-result-card__title { font-size: 30px; }
  .spot-result-card__country { font-size: 12px; }
  .spot-result-card__chip {
    height: auto;
    padding: 8px;
    gap: 4px;
    font-size: 12px;
  }
  .spot-result-card__chip svg { width: 16px; height: 16px; }
  .spot-result-card__chips { top: 28px; left: 28px; }
  .spot-result-card__fav {
    top: 28px;
    right: 28px;
    width: 32px;
    height: 32px;
  }
  .spot-result-card__body { bottom: 28px; left: 28px; right: 28px; }
}

/* iPad-portrait + phone tier (≤768px) — matches Figma "768 spot card
   card v2" (node 3904-76456). Note: at this size the Figma actually
   bumps the title/country BACK to the 1440 desktop sizes (32/14),
   trades to 12×12 chip icons + 10px chip text, and uses 24px insets
   with a 36×36 heart. Aligns with the project's 743/744 boundary. */
@media (max-width: 768px) {
  .spot-result-card__title { font-size: 32px; }
  .spot-result-card__country { font-size: 14px; }
  .spot-result-card__chip { font-size: 10px; padding: 8px; gap: 4px; }
  .spot-result-card__chip svg { width: 12px; height: 12px; }
  .spot-result-card__chips { top: 24px; left: 24px; }
  .spot-result-card__fav {
    top: 24px;
    right: 24px;
    width: 36px;
    height: 36px;
  }
  .spot-result-card__body { bottom: 24px; left: 24px; right: 24px; }
}

/* Phone-specific (≤480): the 768 Figma is for iPad portrait, not iPhone.
   On actual phones the cards become single-column and the region title
   shrinks to 20px so it doesn't dominate the smaller card. Country name
   shrinks proportionally. */
@media (max-width: 480px) {
  .spot-result-card__title { font-size: 20px; }
  .spot-result-card__country { font-size: 12px; }
}

/* Spots tab: hide the sort-by dropdown entirely on all viewports.
   Spots are surf REGIONS, not bookable inventory — they have no price
   and the sort dimensions are marginal compared to the where/when/level
   filters. The default 'best_conditions' sort still applies under the
   hood; we just don't surface a control for it. */
.search-page--spots .search__sort-wrap,
.search-page--spots .search__sort {
  display: none !important;
}
/* With sort gone, the H1 count is the only toolbar content on Spots.
   Center it in every sheet state (peek/half/full) so it doesn't sit
   awkwardly left-aligned with no sibling on the right. Mobile/tablet
   only — desktop spots view doesn't show the map-view toolbar. */
@media (max-width: 1127px) {
  .search-page--spots.search-page--map-view .search__toolbar {
    justify-content: center !important;
  }
  .search-page--spots.search-page--map-view .search__count {
    margin-right: 0 !important;
    text-align: center;
  }
}

/* Spots tab — discovery-first browsing.
   Per the product framing: spots are surf REGIONS the user is exploring
   ("where could I go?"), not bookable items. The map matters because
   it answers the geographic question the search itself is asking. So:
   - Desktop ≥1128: list (60%) + map (40%) split, cards 2-col on left
   - Tablet/mobile ≤1127: cards-only, full-width, no map (the photo
     grid is the discovery surface; map is a desktop feature for now)

   `.search-page--spots` is the body modifier applied by JS when the
   active tab is spots. */
/* Tablet/mobile spots: layout collapses to full-screen map + bottom
   sheet (per the camps/lessons map-view pattern). The default
   `.search-page--map-view` styles handle that; nothing tab-specific
   needed here beyond the card-height tweak below. */
/* Desktop split: cards take 60% (3fr), map takes 40% (2fr) so 2 cards
   fit per row in the list panel and the map is wide enough to read. */
@media (min-width: 1128px) {
  .search-page--spots .search__layout {
    grid-template-columns: 3fr 2fr !important;
  }
  .search-page--spots .search__map {
    display: block !important;
  }
}
.search-page--spots .search__list,
.search__list--spots {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  flex-direction: initial !important;
  /* Toolbar→first-card spacing matches the 20px gap between cards so
     it reads as the same vertical rhythm. Used on desktop split-view;
     tablet/mobile sheet adds padding-top on top of this (overridden
     to be additive-zero since the sheet uses its own padding rule). */
  margin-top: 20px;
}
/* Inside the sheet, padding-top on the list controls the toolbar→cards
   gap; clear margin-top so it doesn't double up. */
@media (max-width: 1127px) {
  .search-page--spots.search-page--map-view .search__list {
    margin-top: 0;
    padding-top: 20px !important;
  }
}
/* Desktop ≥1128: list panel narrower (60%); 2 cards per row instead of
   the 3 we had when the list took full width. */
@media (min-width: 1128px) {
  .search-page--spots .search__list,
  .search__list--spots {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ==========================================================================
   /destinations INDEX PAGE
   Browsable list of every active country + its child regions, grouped by
   part of the world. Renders in the (static) layout — no destination-page
   body class, scrolls normally via document.
   ========================================================================== */
.dest-index {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 40px 80px;
}
.dest-index__hero {
  padding: 24px 0 32px;
  border-bottom: 1px solid #EEF0F3;
  margin-bottom: 32px;
}
.dest-index__title {
  font-family: var(--font-inter), sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.05;
  color: #1A2B48;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}
.dest-index__sub {
  font-size: 16px;
  color: #6B7280;
  margin: 0;
  max-width: 640px;
}
.dest-index__group { margin-bottom: 48px; }
.dest-index__group-title {
  font-size: 24px;
  font-weight: 700;
  color: #1A2B48;
  margin: 0 0 20px;
}
.dest-index__countries {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}
.dest-index__country {
  background: #FFFFFF;
  border: 1px solid #EEF0F3;
  border-radius: 16px;
  padding: 20px;
  transition: border-color 150ms ease, transform 150ms ease;
}
.dest-index__country:hover { border-color: #CDD6E0; }
.dest-index__country-link {
  color: inherit;
  text-decoration: none;
  display: block;
}
.dest-index__country-name {
  font-size: 18px;
  font-weight: 700;
  color: #1A2B48;
  margin: 0 0 12px;
}
.dest-index__country-link:hover .dest-index__country-name { color: #2454FF; }
.dest-index__regions {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #F3F4F6;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dest-index__region-link {
  display: block;
  font-size: 14px;
  color: #6B7280;
  text-decoration: none;
  padding: 2px 0;
  transition: color 150ms ease;
}
.dest-index__region-link:hover { color: #2454FF; }
@media (max-width: 743px) {
  .dest-index { padding: 16px 16px 80px; }
  .dest-index__title { font-size: 32px; }
  .dest-index__group { margin-bottom: 36px; }
  .dest-index__group-title { font-size: 20px; margin-bottom: 16px; }
  .dest-index__countries { gap: 16px; grid-template-columns: 1fr; }
  .dest-index__country { padding: 16px; }
}
/* Mobile ≤480: 1 column (cards become unreadable below this width
   with 2 columns + gap). Matches the existing camps/lessons mobile
   pattern. */
@media (max-width: 480px) {
  .search-page--spots .search__list,
  .search__list--spots {
    grid-template-columns: 1fr !important;
  }
}
/* Tablet (744-1127) and mobile (≤743): on spots tab, follow the same
   map-view pattern as camps/lessons — full-screen map with a draggable
   bottom sheet showing the cards. The default `.search-page--map-view`
   rules already do this; we just shrink the spot cards to fit nicer
   inside the sheet (480px portrait would only fit one card per
   viewport in the half-sheet state). */
@media (max-width: 1127px) {
  /* Compact spot card height inside the sheet so 2+ are visible at
     once. Reduces from 480px desktop → 320px tablet/mobile sheet. */
  .search-page--spots.search-page--map-view .spot-result-card {
    height: 320px;
  }
}

/* iPad/tablet (744–1127): align toolbar, list, and pagination L/R padding
   with the page header (40px). Default rules earlier in the file leave
   them at 16px, which makes the cards visibly inset from the header
   logo + tabs. Phone (≤743) keeps the existing 16px since 40px crowds
   small viewports. Applies to all tabs (camps/lessons/spots). */
@media (min-width: 744px) and (max-width: 1127px) {
  .search-page.search-page--map-view .search__toolbar {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .search-page.search-page--map-view .search__list {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  .search-page--spots.search-page--map-view .search__pagination {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
  /* Map zoom controls (Mapbox top-right) move from the default 16px
     inset to 40px so they align with the right edge of the cards
     above and the right edge of the header tabs. */
  .search__map .mapboxgl-ctrl-top-right {
    right: 40px !important;
  }
}

/* ==========================================================================
   Advanced Filter Modal
   ========================================================================== */
.filter-modal {
  position: fixed;
  inset: 0;
  /* Higher than the mobile .bnav z-index (9999 in @media ≤1024).
     The hide rule below should already remove bnav when the modal
     opens, but raising the modal layer too means even an unhidden
     bnav (e.g. a brief frame during open-animation, or a stylesheet
     conflict) can't cover the modal foot. */
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.filter-modal[hidden] { display: none; }
.filter-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(44, 62, 80, 0.55);
  backdrop-filter: blur(2px);
  opacity: 1;
  transition: opacity 360ms ease-out;
}
.filter-modal__card {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 80px);
  /* White card (standing rule: every popup has a WHITE background). The
     unselected `.filter-opt` pills carry a light-gray border (#D2D6DB) so they
     still read on white; selected pills are solid charcoal; the "Selected"
     chips are outlined. */
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(44, 62, 80, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Tablet + desktop (≥744px): Airbnb-style modal animation.
   - Card starts slightly smaller (scale 0.96) and lifted 8px from
     below with 0 opacity — a subtle hint of motion, not a "pop".
   - On open, eases to scale(1) + translateY(0) + opacity 1 over 280ms
     with Airbnb's signature cubic-bezier(0.32, 0.72, 0, 1) curve.
   - Backdrop fades in over 200ms for a near-instant darken.
   - Origin is the card's center, not the trigger button — Airbnb's
     modal always opens from where it lands, no flying-out-of-button.
   Mobile (≤743px) overrides this with a slide-up bottom-sheet in the
   block below. */
@media (min-width: 744px) {
  .filter-modal__backdrop {
    opacity: 0;
    transition: opacity 200ms ease-out;
  }
  .filter-modal__card {
    transform-origin: center;
    transform: translateY(8px) scale(0.96);
    opacity: 0;
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
                opacity 200ms ease-out;
    will-change: transform, opacity;
  }
  .filter-modal--shown .filter-modal__backdrop { opacity: 1; }
  .filter-modal--shown .filter-modal__card {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Mobile / tablet (≤1127): the modal is a full-height bottom-sheet — full width,
   slides up from below on open. The bnav is hidden while the modal is open so
   the Show Results / Clear All footer occupies the bottom of the viewport
   without competing with the menu bar. */
/* Bottom-sheet style is for MOBILE only (≤743px). At iPad portrait
   (744–1127px) the 100dvh sheet leaves a huge empty band below the
   content because the filter list is shorter than the viewport.
   Tablets use the desktop centered modal (max-width: 600px, scales
   with content) instead. */
@media (max-width: 743px) {
  .filter-modal {
    inset: 0;
    /* Constrain the modal container itself to --vh-real (actual visible
       viewport from VhLock). Without this `inset: 0` makes the modal
       fill the LAYOUT viewport (694 in iPhone SE sim) — the card aligns
       to its flex-end bottom = 694, but the visible iframe ends at 667,
       so the card's bottom 27px (containing the Show Results / Clear
       All foot) clips below visible. Forcing the modal to --vh-real
       puts its bottom at the actual visible edge, and the foot lands
       inside the visible area. */
    height: var(--vh-real, 100dvh);
    bottom: auto;
    align-items: flex-end;
    padding: 0;
  }
  .filter-modal__card {
    max-width: none;
    width: 100vw;
    /* Use --vh-real (set by VhLock to window.innerHeight) instead of
       100dvh. In some Chrome iOS sims dvh resolves smaller than the
       actual visible iframe (e.g. iPhone SE: dvh=667 but innerH=694),
       leaving the card short and the foot clipped behind devtools
       chrome. Falls back to 100dvh on environments without VhLock. */
    height: var(--vh-real, 100dvh);
    max-height: var(--vh-real, 100dvh);
    border-radius: 24px 24px 0 0;
    transform: translateY(100%);
    transition: transform 480ms cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    /* Foot is anchored absolutely to the card (not the viewport) so it
       sits at card-bottom = visible-viewport-bottom (since the card
       height = --vh-real = the actual visible area). */
    position: relative;
    overflow: hidden;
  }
  .filter-modal__body {
    /* Reserve room for the absolute-positioned foot (~70px tall:
       padding 14px*2 + button height ~42px). */
    padding-bottom: 80px;
  }
  .filter-modal--shown .filter-modal__foot {
    /* Position absolute INSIDE the card. Card height is --vh-real
       (actual visible viewport), so bottom: 0 of the card lands at the
       actual visible viewport bottom — not the layout-viewport bottom
       (which is below the visible area in Chrome iOS sims). This
       guarantees the Show Results / Clear All buttons are always fully
       visible regardless of devtools sim quirks. */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    padding-bottom: max(14px, env(safe-area-inset-bottom, 14px));
  }
  .filter-modal__backdrop { opacity: 0; }
  /* Triggered by JS one frame after `hidden` is removed, so the transform
     transitions from 100% → 0 instead of snapping. */
  .filter-modal--shown .filter-modal__card { transform: translateY(0); }
  .filter-modal--shown .filter-modal__backdrop { opacity: 1; }
}

/* Hide the bottom nav while the filter modal is open at any breakpoint.
   The modal owns the bottom of the screen during filter editing.
   `body.filter-modal-open .bnav` already has !important but the bnav's
   own `.bnav { z-index: 9999 }` at @media (max-width: 1024) sometimes
   wins on specificity tiebreakers (esp. with `body:has(...)` rules in
   destination.css) — so explicitly visibility:hidden too as a belt-
   and-braces guarantee the bnav doesn't overlap the modal foot on
   destination pages. */
body.filter-modal-open .bnav,
html body.filter-modal-open .bnav {
  display: none !important;
  visibility: hidden !important;
}
.filter-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 0;
  flex-shrink: 0;
}
.filter-modal__title {
  margin: 0;
  font-family: var(--font-inter), sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #2C3E50;
  line-height: 1.2;
}
/* Modal close (X) — neutral plain icon to match every other secondary
   control on the page (calendar nav, map zoom, back arrow, filter
   chip). Transparent bg, dark X, soft grey halo on hover/tap. Brand
   blue is reserved for primary CTAs and the active-filter badge. */
/* Matches the canonical .calendar__nav "floating white pill" treatment
   — white bg + subtle shadow at rest, light-gray hover. Olya
   2026-05-27: unified all modal close buttons to this style. */
.filter-modal__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2C3E50;
  /* Same idle shadow as the search-bar pill / standalone Filters
     chip — the "floating white pill" family across the site. */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.15s ease;
}
.filter-modal__close svg { width: 12px; height: 12px; }
.filter-modal__close svg path { stroke: currentColor; }
/* Hover: keep background white, deepen to the asymmetric 4-corner
   shadow used by the search pill on hover. Avoids the previous
   "vanishing button" effect where the hover gray (#F3F4F6) matched
   the page background (#F7F7F7) and the button visually disappeared. */
.filter-modal__close:hover {
  background: #FFFFFF;
  box-shadow:
    -2px -2px 6px rgba(0, 0, 0, 0.1),
     2px  2px 6px rgba(0, 0, 0, 0.16);
}
.filter-modal__close:active {
  background: #F3F4F6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.filter-modal__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 24px 0;
  flex-shrink: 0;
}
.filter-modal__chips[hidden] { display: none; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 6px 0 10px;
  background: #2454FF;
  color: #FFFFFF;
  border-radius: 40px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  white-space: nowrap;
}
.filter-chip__remove {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #FFFFFF;
  padding: 0;
  margin-left: 2px;
}
.filter-chip__remove svg { display: block; }

.filter-modal__body {
  overflow-y: auto;
  padding: 20px 24px;
  flex: 1 1 auto;
  /* Required for the body to shrink below its content's intrinsic
     height inside the flex column (card). Without min-height: 0 the
     body refuses to shrink, pushing the foot below the viewport on
     mobile — visible as "Clear All / Show Results buttons are cut
     off". Classic flexbox gotcha; the fix is documented as `min-
     height: 0` for any flex item that needs `overflow: auto`. */
  min-height: 0;
}

.filter-section {
  padding-bottom: 20px;
  border-bottom: 1px solid #EEF0F3;
  margin-bottom: 20px;
}
.filter-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.filter-section__title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  color: #2C3E50;
}
.filter-section__title-hint {
  font-weight: 400;
  font-size: 13px;
  color: #6B7280;
  margin-left: 4px;
}
.filter-section__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.filter-section__options--grid {
  gap: 10px;
}

.filter-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 42px;
  padding: 0 18px;
  background: #FFFFFF;
  border: 1px solid #D2D6DB;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 400;
  color: #2C3E50;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.filter-opt--nobadge,
.filter-opt--any {
  height: 40px;
  padding: 0 18px;
}
.filter-opt__icon {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}
/* Hover: darken the outline meaningfully (Airbnb-style chip pattern).
   Goes from the near-invisible #EEF0F3 idle border to the dark text
   color, so the chip reads as "this is interactive, click me" without
   competing with the active state (filled blue). Border-width stays
   at 1px to avoid layout shift between idle and hover. */
.filter-opt:hover {
  border-color: #1A2B48;
}
.filter-opt--active {
  background: #2454FF;
  color: #FFFFFF;
  border-color: #2454FF;
}
.filter-opt--active .filter-opt__icon {
  filter: brightness(0) invert(1);
}
.filter-opt--hidden { display: none; }
.filter-section--expanded .filter-opt--hidden { display: inline-flex; }

.filter-showmore {
  margin-top: 12px;
  background: none;
  border: none;
  padding: 0;
  color: #2454FF;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  display: block;
  margin-left: auto;
}
.filter-showmore:hover { color: #1e47d9; }

/* Price range dual slider */
.filter-range {
  padding-top: 8px;
}
/* Price-distribution histogram (Airbnb pattern). Sits directly above
   the slider track. Bars are absolutely-positioned divs spanning the
   same horizontal extent as the track, so each bar's left/width maps
   1:1 to a price bucket. The active range (between the two thumbs)
   uses brand-blue; out-of-range bars stay light grey. JS rebuilds
   bar heights when results change, and recolors them on slider drag. */
.filter-range__histogram {
  position: relative;
  height: 56px;
  /* Overlap the upper half of the slider track so bars appear to rise
     directly from the track line (Airbnb pattern) rather than sitting
     above it with a gap. The track is 20px tall; -10px pulls the
     histogram baseline onto the track's centre line. */
  margin: 0 10px -10px;
  /* Inset the bars by the thumb's radius (10px = half of the 20px thumb)
     so bar 0's left edge aligns with the min-thumb's leftmost centre and
     bar N's right edge aligns with the max-thumb's rightmost centre.
     Without this, native range inputs clamp the thumb center to
     (inputWidth - thumbWidth), making the rightmost bar extend past the
     thumb when its travelled to max. */
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  pointer-events: none;
}
.filter-range__histogram-bar {
  flex: 1;
  min-width: 0;
  background: #DDE1E6;
  border-radius: 1px 1px 0 0;
  transition: background 0.12s ease, height 0.2s ease;
}
.filter-range__histogram-bar--active {
  background: #2454FF;
}
.filter-range__track {
  position: relative;
  height: 20px;
  margin: 0 10px;
}
.filter-range__track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: #EEF0F3;
  border-radius: 2px;
}
.filter-range__fill {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: #2454FF;
  border-radius: 2px;
  pointer-events: none;
}
.filter-range__input {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 20px;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
  margin: 0;
}
.filter-range__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #2454FF;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(44, 62, 80, 0.2);
}
.filter-range__input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #2454FF;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 6px rgba(44, 62, 80, 0.2);
}
.filter-range__input::-webkit-slider-runnable-track { background: transparent; }
.filter-range__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding: 0 10px;
}
.filter-range__label { display: flex; flex-direction: column; gap: 2px; }
.filter-range__label--right { align-items: flex-end; }
.filter-range__label-key { font-size: 12px; color: #6B7280; }
.filter-range__label-val { font-size: 14px; font-weight: 600; color: #2C3E50; }

.filter-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid #EEF0F3;
  flex-shrink: 0;
  background: #FFFFFF;
}
.filter-modal__clear {
  background: none;
  border: none;
  padding: 0;
  color: #6B7280;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
}
.filter-modal__clear:hover { color: #2C3E50; }
.filter-modal__apply {
  height: 40px;
  padding: 0 22px;
  background: #2454FF;
  color: #FFFFFF;
  border: none;
  border-radius: 40px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.filter-modal__apply:hover { background: #1e47d9; }

body.filter-modal-open { overflow: hidden; }

/* ==========================================================================
   Destination detail page (/destinations/{slug}.html)
   Static-rendered surf region pages used for SEO + LLM crawler visibility.
   See scripts/build-destinations.mjs for the template that emits these
   class names. CSS scoped with .destination-page on body so nothing here
   leaks into the search/index/etc.
   ========================================================================== */
body.destination-page {
  background: #F7F7F7;
  color: #2C3E50;
  font-family: var(--font-inter), system-ui, sans-serif;
  margin: 0;
  /* No padding: 0 — would override `body { padding-bottom: 82px+safe-area }`
     at the ≤743px breakpoint that reserves space for the mobile bnav and
     prevents page content from scrolling visibly through the bnav area. */
}
/* Header on destination pages uses the default .header styles — same as home/search */

/* Breadcrumb */
.dest-breadcrumb { max-width: 1440px; margin: 0 auto; padding: 16px 40px; font-size: 12px; color: #6B7280; }
.dest-breadcrumb ol { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0; }
.dest-breadcrumb li:not(:last-child)::after { content: '›'; padding-left: 8px; color: #C6C6C6; }
.dest-breadcrumb a { color: #6B7280; text-decoration: none; }
.dest-breadcrumb a:hover { color: #2454FF; text-decoration: underline; }
.dest-breadcrumb [aria-current="page"] { color: #2C3E50; font-weight: 500; }

/* Page article — outer width 1440 with 40px horizontal padding so content
   area (1360) aligns 1:1 with the header's inner content (also 1360, with
   header padding 40px on each side). */
.dest { max-width: 1440px; margin: 0 auto; padding: 0 40px 64px; }

/* Section common — Figma uses ~120px between sections on the spot template at 1440,
   ~100px at 1024 tablet width (Figma 1024 y-positions vary 80-160 — 100 is the average). */
.dest > section,
.dest section { margin-bottom: 120px; }
@media (max-width: 1024px) {
  .dest > section, .dest section { margin-bottom: 100px; }
}
.dest h2 { font-size: 28px; font-weight: 700; color: #1A2B48; margin: 0 0 20px; }

/* Generic white card wrapper used by Surf Level / FAQ / etc */
.dest-card { background: #FFFFFF; border-radius: 40px; padding: 40px 32px; }
.dest-card > h2 { text-align: center; }
@media (max-width: 743px) {
  .dest-card { border-radius: 24px; padding: 24px 16px; }
}

/* ---------- Hero ---------- */
.dest__hero {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  margin: 24px 0 56px;
  aspect-ratio: 1360 / 551;
  min-height: 440px;
  background: #1A2B48;
}
.dest__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dest__hero-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.20) 35%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.dest__hero-content {
  position: absolute;
  left: 32px;
  top: 194px;
  max-width: 701px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: #FFFFFF;
}
.dest__hero-title {
  font-size: 96px;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.dest__hero-desc {
  font-size: 18px;
  line-height: 1.45;
  margin: 0;
  max-width: 560px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.dest__hero-pills {
  position: absolute;
  top: 32px;
  left: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  z-index: 2;
}
.dest-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 70px;
  padding: 8px 14px;
  font-size: 12px;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.dest-pill strong { font-weight: 600; }

/* Hero action buttons (share + favorite) — Figma 3639:70566 frame at top-right.
   40×40 circular buttons, rgba(255,255,255,0.1) fill, 16px gap. */
.dest__hero-actions {
  position: absolute;
  top: 32px;
  right: 32px;
  display: flex;
  gap: 16px;
  z-index: 2;
}
.dest__hero-action {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-radius: 50%;
  color: #FFFFFF;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease;
}
.dest__hero-action:hover { background: rgba(255, 255, 255, 0.20); }
.dest__hero-action svg { display: block; }
.dest__hero-action-fav-path { fill: transparent; transition: fill 0.15s ease; }
/* Saved state (Figma 3368:27630): solid orange heart, keep the existing
   white-glass disc so the heart stays legible against the hero photo. */
.dest__hero-action--fav[aria-pressed="true"] .dest__hero-action-fav-path {
  fill: #FF7335;
  stroke: #FF7335;
}

/* Hero corner cards (water + rain) */
.dest__hero-cards {
  position: absolute;
  right: 32px;
  bottom: 32px;
  display: flex;
  gap: 16px;
}
.dest-hero-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border-radius: 15px;
  padding: 12px 16px;
  color: #1A2B48;
  min-width: 200px;
}
.dest-hero-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 68px;
  flex-shrink: 0;
  color: #FFFFFF;
}
.dest-hero-card--water .dest-hero-card__icon { background: #2454FF; }
.dest-hero-card--rain .dest-hero-card__icon { background: #FF7A00; }
.dest-hero-card__body { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.dest-hero-card__body strong { font-size: 14px; font-weight: 600; color: #1A2B48; }
.dest-hero-card__body span { font-size: 12px; color: #2C3E50; }

@media (max-width: 1024px) {
  /* Figma 1024 destination-page header: 123×28 logo, 24/40/7 padding */
  body.destination-page .header { padding: 24px 40px 7px; }
  body.destination-page .header__logo { width: 78px; height: 28px; }
  body.destination-page .header__logo img.header__logo-full { width: 78px; height: 28px; }

  /* Figma 1024 Hero (Region Banner) — 944×450 (overrides desktop 1360/551 ratio
     which would otherwise overflow the 944px container).
     Title 80px at left=28, top=143, max-width=515.
     Pills + actions inset 28px from corners, action buttons 36×36.
     Water/Rain cards at bottom-right with 8px gap, 28px insets. */
  .dest__hero {
    aspect-ratio: 944 / 450;
    min-height: 0;
  }
  .dest__hero-content {
    left: 28px;
    top: 143px;
    max-width: 515px;
  }
  .dest__hero-title { font-size: 80px; }
  .dest__hero-pills { top: 28px; left: 28px; }
  .dest__hero-actions { top: 28px; right: 28px; gap: 8px; }
  .dest__hero-action { width: 36px; height: 36px; }
  .dest__hero-cards { right: 28px; bottom: 28px; gap: 8px; }
  .dest-hero-card { min-width: 180px; padding: 10px 14px; }
}
@media (max-width: 743px) {
  /* Hide the hero corner cards on phone — there's no room. */
  .dest__hero-cards { display: none; }
}
@media (max-width: 743px) {
  .dest__hero { aspect-ratio: 4/5; min-height: 420px; margin: 16px 0 32px; }
  .dest__hero-content { left: 20px; bottom: 20px; }
  .dest__hero-title { font-size: 48px; }
  .dest__hero-desc { font-size: 14px; }
}

/* ---------- About (2-column with layered image group) ----------
   Figma spec: 1360w container, row layout space-between, vertical center.
   Left column = 670w (text + CTA). Right column = 578w × 350h (image group).
*/
.dest__about {
  display: grid;
  grid-template-columns: 670fr 578fr;
  gap: 56px;
  align-items: center;
}
.dest__about-text { display: flex; flex-direction: column; gap: 32px; }
.dest .dest__about-heading {
  margin: 0;
  font-family: var(--font-inter), system-ui, sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  /* Figma fill_T50B4J — slate → indigo → bright blue, 90deg */
  background: linear-gradient(90deg, #2C3E50 0%, #0E2087 21%, #2454FF 44%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dest__about-body { display: flex; flex-direction: column; gap: 12px; }
.dest__about-body p, .dest__about-body li {
  font-size: 16px;
  line-height: 1.55;
  color: #666666;
  margin: 0;
}
.dest__about-body strong { color: #1A2B48; }
.dest__about-cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  background: #2454FF;
  color: #FFFFFF;
  padding: 12px 32px;
  border-radius: 24px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;
  transition: background 0.15s ease;
}
.dest__about-cta:hover { background: #1A3FCC; }

/* About image group — 578 × 350, two overlapping image cards + tag */
.dest__about-image-group {
  position: relative;
  width: 578px;
  height: 350px;
  margin-left: auto;
}
.dest__about-img {
  position: absolute;
  border-radius: 16px;
  overflow: hidden;
  border: 4px solid #EAFCFF;
  box-shadow: 0 8px 24px rgba(26, 43, 72, 0.15);
  background: #1A2B48;
}
.dest__about-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Big image — right side, full height of group */
.dest__about-img--main {
  left: 195px;
  top: 0;
  width: 383px;
  height: 350px;
}
/* Smaller image — left side, offset down, overlaps the big image */
.dest__about-img--accent {
  left: 85px;
  top: 82px;
  width: 210px;
  height: 220px;
  z-index: 1;
}
/* Three orange decorative wave lines (Figma Group 84) — sit just left of the
   orange "Ride X Waves" tag, indicating motion/wave aesthetic. */
.dest__about-tag-marks {
  position: absolute;
  left: 0;
  top: 208px;
  width: 28px;
  height: 22px;
  z-index: 2;
}

/* Orange "Ride X Waves" tag — bottom-left of image group (overlaps accent image)
   Figma Group 82 / 3560:66663: 132×28, padding 10 12, 12px radius, no shadow */
.dest__about-tag {
  position: absolute;
  left: 22px;
  top: 222px;
  background: #FA824C;
  color: #FFFFFF;
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  padding: 10px 12px;
  border-radius: 12px;
  z-index: 2;
}

@media (max-width: 1024px) {
  /* Figma 1024: About stays side-by-side. Text column 462 + 34px gap + image group 448.
     Heading 36px, body 15px (Body 6), CTA padding 16/36, description gap 18px. */
  .dest__about { grid-template-columns: 462fr 448fr; gap: 34px; }
  .dest .dest__about-heading { font-size: 36px; }
  .dest__about-text { gap: 28px; }
  .dest__about-body { gap: 18px; }
  .dest__about-body p, .dest__about-body li { font-size: 15px; }
  .dest__about-cta { font-size: 16px; padding: 16px 36px; }
  .dest__about-image-group { width: 448px; height: 350px; margin-left: auto; max-width: 100%; }
  .dest__about-img--main { width: 303px; height: 350px; left: 145px; }
  .dest__about-img--accent { width: 161px; height: 220px; left: 63px; top: 82px; }
  .dest__about-tag { left: 22px; top: 222px; }
  .dest__about-tag-marks { left: 0; top: 208px; }
}
/* About 600px — now handled by ≤840px and ≤480px blocks */

/* Surf Level — Figma 3592-68956 */
.dest__conditions { display: flex; flex-direction: column; gap: 32px; scroll-margin-top: 120px; }
/* Help icon + popup — hidden on desktop, shown on mobile via 480px block */
.dest__conditions-header { display: contents; }
.dest__conditions-help { display: none; }
.dest__conditions-popup { display: none; }
.dest .dest__conditions-heading {
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: #2C3E50;
  text-align: left;
  margin: 0;
}
.dest-conditions-card { background: #FFFFFF; border-radius: 40px; padding-bottom: 32px; }
.dest-conditions__table-wrap { padding: 32px; }
.dest-conditions {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.dest-conditions thead th,
.dest-conditions tbody th {
  height: 78px;
  padding: 10px;
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #666666;
  text-align: center;
  vertical-align: middle;
}
.dest-conditions__corner { width: 185px; }
.dest-conditions td {
  height: 78px;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}
.dest-conditions .cond {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  vertical-align: middle;
}
.dest-conditions__legend {
  border-top: 1px solid #EAFCFF;
  padding: 16px 16px 40px;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 64px;
}
.dest-conditions__legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #666666;
}
.dest-conditions__legend .cond { width: 12px; height: 12px; border-radius: 50%; }

/* Figma traffic-light palette — keep in sync with RATING_COLOR in build-destinations.mjs */
.cond--best_time      { background: #48B900; }
.cond--good_time      { background: #88B900; }
.cond--ok_time        { background: #D3D92B; }
.cond--less_desirable { background: #F26E22; }
.cond--not_recommended{ background: #BF0413; }
.cond--unknown        { background: #EEF0F3; }
.cond--split          { /* background set inline as a 50/50 linear-gradient */ }

@media (max-width: 1024px) {
  /* Figma 1024 (3596-65790): heading 36px, table padding 28/28/14, cells 127×64
     with 10px internal padding, helper legend padding 28/0 with 12px labels. */
  .dest .dest__conditions-heading { font-size: 36px; }
  .dest-conditions__table-wrap { padding: 28px 28px 14px; overflow-x: auto; }
  .dest-conditions thead th, .dest-conditions tbody th { font-size: 18px; height: 64px; padding: 10px; }
  .dest-conditions td { height: 64px; padding: 10px; }
  .dest-conditions .cond { width: 28px; height: 28px; }
  .dest-conditions__legend { gap: 12px 40px; padding: 28px 0; font-size: 12px; }
  .dest-conditions__legend li { font-size: 12px; }
}
/* Conditions 600px — now handled by ≤840px and ≤480px blocks */

/* Weather & Travel Comfort — Figma 3592-68957 */
.dest__weather { display: flex; flex-direction: column; gap: 32px; }
/* Help icon + popup — hidden on desktop, shown on mobile via 480px block */
.dest__weather-header { display: contents; }
.dest__weather-help { display: none; }
.dest__weather-popup { display: none; }
.dest .dest__weather-heading {
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: #2C3E50;
  text-align: left;
  margin: 0;
}
.dest-weather-card { background: #FFFFFF; border-radius: 40px; padding-bottom: 32px; }
.dest-weather__table-wrap { padding: 32px; }
.dest-weather {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
.dest-weather thead th,
.dest-weather tbody th {
  height: 78px;
  padding: 10px;
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #666666;
  text-align: center;
  vertical-align: middle;
}
.dest-weather__corner { width: 185px; }
.dest-weather td {
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  height: 78px;
}
.dest-weather__val {
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #2C3E50;
}
.dest-weather__val--empty { color: #C6C6C6; }
.dest-weather__suit {
  display: inline-block;
  width: 72px;
  height: 72px;
  vertical-align: middle;
}

/* Wetsuit hover tooltip — Figma 3592-69838 "Helper info".
   White card, 10px radius, soft mirrored shadow; thermometer icon + 2-line text.
   Shows on hover or keyboard focus of the wetsuit cell. */
.dest-weather__suit-wrap {
  position: relative;
  display: inline-block;
  outline: none;
}
.dest-weather__tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 4px 4px 12px 0 rgba(44, 62, 80, 0.12),
             -4px -4px 12px 0 rgba(44, 62, 80, 0.12);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  z-index: 9999;
}
.dest-weather__suit-wrap:hover .dest-weather__tooltip,
.dest-weather__suit-wrap:focus .dest-weather__tooltip,
.dest-weather__suit-wrap:focus-within .dest-weather__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.dest-weather__tooltip-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.dest-weather__tooltip-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-inter), system-ui, sans-serif;
}
.dest-weather__tooltip-text strong {
  font-size: 14px;
  font-weight: 400;
  color: #2C3E50;
  line-height: 1.2;
}
.dest-weather__tooltip-text > span {
  font-size: 12px;
  font-weight: 400;
  color: #666666;
  line-height: 1.2;
}

.dest-weather__legend {
  border-top: 1px solid #EAFCFF;
  padding: 16px 16px 32px;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 64px;
}
.dest-weather__legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dest-weather__legend img { width: 72px; height: 72px; flex-shrink: 0; }
.dest-weather__legend-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-inter), system-ui, sans-serif;
}
.dest-weather__legend-text strong { font-size: 14px; font-weight: 400; color: #666666; }
.dest-weather__legend-text span { font-size: 12px; font-weight: 400; color: #C6C6C6; }

@media (max-width: 1024px) {
  /* Figma 1024 (3596-65789): heading 36px, table padding 28/28/14, cells 127×64 with
     10px internal padding and 18px Body 4 text, wetsuit icons 64×64.
     Helper legend padding 14/0, gap 40, 64×64 icon, label 12px (Label 5), sublabel 10px (Label 6). */
  .dest .dest__weather-heading { font-size: 36px; }
  .dest-weather__table-wrap { padding: 28px 28px 14px; overflow: visible; }
  .dest-weather thead th, .dest-weather tbody th { font-size: 18px; height: 64px; padding: 10px; }
  .dest-weather td { height: 64px; padding: 10px; }
  .dest-weather__val { font-size: 18px; }
  .dest-weather__suit { width: 64px; height: 64px; }
  .dest-weather__legend { gap: 16px 40px; padding: 14px 0; }
  .dest-weather__legend img { width: 64px; height: 64px; }
  .dest-weather__legend-text strong { font-size: 12px; }
  .dest-weather__legend-text span { font-size: 10px; }

  /* Tooltip — Figma 1024 (3596-66430): Label 5 12px / Label 6 10px (everything else same as desktop) */
  .dest-weather__tooltip-text strong { font-size: 12px; }
  .dest-weather__tooltip-text > span { font-size: 10px; }
}
/* Weather 600px — now handled by ≤840px and ≤480px blocks */

/* About markdown content (legacy — kept for any markdown-only paths) */
.dest__about-body h3 { font-size: 20px; margin: 32px 0 12px; color: #1A2B48; }
.dest__about-body ul, .dest__about-body ol { padding-left: 24px; }
.dest__about-body a:not(.dest__about-cta) { color: #2454FF; }

/* What to pack */
.dest__pack-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.dest-pack-card { background: #F7F7F7; border-radius: 16px; padding: 20px; opacity: 0.5; }
.dest-pack-card.dest-pack-card--active { opacity: 1; background: #EAF1FF; }
.dest-pack-card h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: #1A2B48; }
.dest-pack-card p { margin: 0; font-size: 13px; color: #6B7280; }

/* Tips — Figma 3592-68958: centered heading + intro, 4-up white cards (325×368, 25px radius) with 80px gradient icon */
.dest__tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.dest .dest__tips-heading {
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: #2C3E50;
  text-align: center;
  margin: 0;
}
.dest__tips-intro {
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #666666;
  text-align: center;
  max-width: 713px;
  margin: 0;
}
.dest__tips-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  align-items: stretch;
}
.dest-tip {
  background: #FFFFFF;
  border-radius: 25px;
  min-height: 368px;
  padding: 32px 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.dest-tip__icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: block;
}
.dest-tip__icon--placeholder {
  /* Reserves the icon slot when the category icon (e.g. safety, local-life)
     hasn't been delivered yet. Keeps card heights aligned across the row. */
  background: transparent;
}
.dest-tip h3 {
  margin: 0;
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: #2C3E50;
}
.dest-tip__body, .dest-tip p {
  margin: 0;
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #666666;
}
.dest-tip strong { color: #2C3E50; }

@media (max-width: 1024px) {
  /* Figma 1024 (3596-65788): 36px centered heading, 15px Body 6 intro max-606,
     4-up cards 223×320 with 17px gap, padding 28/0, 12px gap.
     Icon 76×76 (gradient), h3 22px (Heading 4), body 14px (Label 3). */
  .dest .dest__tips-heading { font-size: 36px; }
  .dest__tips-intro { font-size: 15px; max-width: 606px; }
  .dest__tips-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
  .dest-tip { padding: 28px 0; min-height: 320px; gap: 12px; }
  .dest-tip__icon { width: 76px; height: 76px; }
  .dest-tip h3 { font-size: 22px; }
  .dest-tip__body, .dest-tip p { font-size: 14px; }
}
/* Tips 600px — now handled by ≤840px and ≤480px blocks */

/* FAQ — Figma 3560-66915: gradient-text heading + line-divider accordion */
.dest__faq { display: flex; flex-direction: column; align-items: stretch; }
.dest__faq > h2 {
  text-align: center;
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 48px;
  background: linear-gradient(90deg, #2C3E50 11%, #0E2087 28%, #2454FF 55%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.dest__faq-list {
  display: flex;
  flex-direction: column;
  gap: 34px;            /* Figma layout_ROD6ZR gap between FAQ items */
  max-width: 1110px;    /* Figma frame width */
  margin: 0 auto;
  width: 100%;
}
.dest__faq-list details {
  background: transparent;
  border-radius: 0;
  padding: 0;
  border-bottom: 2px solid rgba(217, 217, 217, 0.7);  /* Figma icon/light gray/70% */
}
.dest__faq-list summary {
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #2C3E50;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 24px;   /* Figma closed state layout_30T2JL gap: 24px */
}
.dest__faq-list details[open] summary {
  padding-bottom: 32px;   /* Figma open state layout_RAFM9R gap: 32px between question and answer */
}
.dest__faq-list summary::-webkit-details-marker { display: none; }
.dest__faq-list summary::after {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' fill='none'%3E%3Cpath d='M2 2L10 8L18 2' stroke='%232C3E50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 10px;
  transition: transform 0.2s ease;
}
.dest__faq-list details[open] summary::after { transform: rotate(180deg); }
.dest__faq-answer {
  /* Figma State=Answer block: 24px Roboto Medium #666666, line-height 32px, with 32px gap above and below the answer body */
  padding-bottom: 32px;
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0;
  color: #666666;
  max-width: 90%;
}
.dest__faq-answer p:first-child { margin-top: 0; }
.dest__faq-answer a { color: #2454FF; }
@media (max-width: 1024px) {
  /* Figma 1024 (3596-65791): heading 36px gradient, 48px gap to list,
     items max-width 780, 34px gap between items (layout_6PQKK4),
     summary 22px SemiBold (Body 3), 24px below text.
     Answer not specified in Figma 1024 — scaled proportionally from desktop
     (24→22, 32→30 line-height) to keep the same question:answer visual ratio. */
  .dest__faq > h2 { font-size: 36px; margin: 0 0 48px; }
  .dest__faq-list { gap: 34px; max-width: 780px; }
  .dest__faq-list summary { font-size: 22px; font-weight: 600; }
  .dest__faq-answer { font-size: 22px; line-height: 30px; }
}
/* FAQ 600px — now handled by ≤840px and ≤480px blocks */

/* Long-form editorial guide — renders below the FAQ as the deep-dive read */
/* Editorial guide — Figma 3657-70761: full-bleed light-blue gradient panel.
   Surf Culture tag pill, 40px headline, 32/24px subheads, 18px body, arrow-bullet lists. */
.dest__guide {
  /* Break out of .dest's max-width + padding to span the full viewport.
     Uses calc to pull left by half the excess space, then forces full vw width. */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0 0 0;
  padding: 80px 0;
  background: linear-gradient(180deg, #F7F7F7 2%, #E9F2FF 37%);
}
/* Gap-closure between editorial guide and footer on destination pages.
   By default sections have 56px bottom margin, .dest has 64px bottom padding,
   and the footer has 80px top margin — together that's a 200px gray slab. */
body.destination-page .dest__guide { margin-bottom: 0; }
body.destination-page .dest { padding-bottom: 0; }
body.destination-page .footer { margin-top: 0; }
.dest__guide-inner {
  max-width: 1348px;
  margin: 0 auto;
  padding: 0 40px;
}
.dest__guide-tag {
  display: inline-flex;
  align-items: center;
  padding: 8px 24px;
  border: 1px solid #2454FF;
  border-radius: 50px;
  background: transparent;
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #2454FF;
  margin: 0 0 24px;
}
.dest .dest__guide-heading {
  /* `.dest h2` has higher specificity than a single class — bump with .dest prefix */
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.18;
  color: #2C3E50;
  margin: 0 0 16px;
  max-width: 900px;
  letter-spacing: 0;
}
.dest__guide-meta {
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 13px;
  color: #6B7280;
  font-style: italic;
  margin: 0 0 32px;
}
.dest__guide-body {
  font-family: var(--font-inter), system-ui, sans-serif;
}
.dest__guide-body h2,
.dest__guide-body h3 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  color: #2C3E50;
  margin: 40px 0 32px;
}
.dest__guide-body h2:first-child,
.dest__guide-body h3:first-child { margin-top: 0; }
.dest__guide-body h4 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #2C3E50;
  margin: 32px 0 16px;
}
.dest__guide-body p {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: #666666;
  margin: 0 0 16px;
}
.dest__guide-body p:last-child { margin-bottom: 0; }
.dest__guide-body ul,
.dest__guide-body ol {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.dest__guide-body li {
  position: relative;
  padding-left: 34px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #2454FF;
}
.dest__guide-body li::before {
  /* Arrow bullet matching Figma "Group 54" 18×12 SVG */
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 18px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none'%3E%3Cpath d='M0 6h16m-5-5l5 5-5 5' stroke='%232454FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.dest__guide-body li strong {
  color: #2C3E50;
  font-weight: 700;
}
/* When a list item has bold spot name + body text, the body should look like
   regular gray prose alongside the dark-blue bold name. */
.dest__guide-body li > strong + * { color: #666666; font-weight: 400; }
.dest__guide-body a { color: #2454FF; text-decoration: underline; }
.dest__guide-body a:hover { text-decoration: none; }
.dest__guide-body strong { color: #2C3E50; font-weight: 700; }
.dest__guide-body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px 20px 20px 20px;
  margin: 32px 0;
}

@media (max-width: 1024px) {
  /* Figma 1024 (3662-70301): heading 36px, h3 30px, h4 22px, body 18px,
     container 944, Surf Culture tag 15px Medium. */
  .dest__guide { padding: 56px 0; }
  .dest__guide-inner { max-width: 944px; padding: 0 40px; }
  .dest__guide-tag { font-size: 15px; padding: 8px 24px; }
  .dest .dest__guide-heading { font-size: 36px; }
  .dest__guide-body h2, .dest__guide-body h3 { font-size: 30px; margin: 36px 0 28px; }
  .dest__guide-body h4 { font-size: 22px; margin: 28px 0 16px; }
  .dest__guide-body p, .dest__guide-body li { font-size: 18px; }
  .dest__guide-body ul, .dest__guide-body ol { gap: 18px; }
  .dest__guide-body li { padding-left: 34px; }
}
@media (max-width: 743px) {
  /* `.dest` switches to 16px side padding here; mirror with -16px margin so
     the guide still bleeds to the viewport edge. Top margin 0 keeps the
     standard 64px section gap above (Figma rhythm). */
  .dest__guide { margin: 0 -16px 0; padding: 40px 0; }
  .dest__guide-inner { padding: 0 20px; }
  .dest__guide-heading { font-size: 28px; }
  .dest__guide-body h2, .dest__guide-body h3 { font-size: 22px; }
  .dest__guide-body h4 { font-size: 18px; }
  .dest__guide-body p, .dest__guide-body li { font-size: 16px; }
}

/* Other regions — Figma 3560-66835: horizontal-scroll carousel.
   Card 380×480, 24px radius. Cover image, 12% black scrim, stat pills + heart top,
   country tag + 32px region name bottom-left. Scroll arrow overlay on the right. */
.dest__related { display: flex; flex-direction: column; gap: 29px; }
.dest .dest__related-heading {
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  color: #2C3E50;
  text-align: left;
  margin: 0;
}
.dest__related-scroll-wrap {
  position: relative;
  /* Per Figma the cards row extends to the viewport's right edge (no right
     padding) so the 4th card peeks in to suggest there's more to scroll.
     Matches Figma frame width: 1400 desktop, 984 at 1024 (= viewport - 40 left). */
  margin-right: -40px;
}
.dest__related-scroll {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  padding: 4px 4px 16px;            /* 4px top/sides for shadow halo room; 16px bottom for scrollbar gutter */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.dest__related-scroll::-webkit-scrollbar { height: 8px; }
.dest__related-scroll::-webkit-scrollbar-thumb { background: rgba(44, 62, 80, 0.15); border-radius: 4px; }
.dest__related-scroll::-webkit-scrollbar-track { background: transparent; }

.dest-related-card {
  flex: 0 0 380px;
  height: 480px;
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 24px;
  overflow: hidden;
  background: #1A2B48;
  scroll-snap-align: start;
}
.dest-related-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.dest-related-card:hover .dest-related-card__img { transform: scale(1.04); }
.dest-related-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 65%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
}

.dest-related-card__top {
  position: absolute;
  top: 32px;
  left: 32px;
  right: 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  z-index: 2;
}
.dest-related-card__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.dest-related-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 51px;
  color: #FFFFFF;
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.dest-related-card__pill {
  position: relative;
  outline: none;
  cursor: help;
}
.dest-related-card__pill img,
.dest-related-card__pill svg {
  /* Desktop 1440: 20×20 (Figma spec). Tablet 1024 override below scales to 16×16. */
  width: 20px;
  height: 20px;
  opacity: 1;
  transform: none;
  display: block;
  flex-shrink: 0;
}

/* Hover tooltip — Figma 3662-71302 / 3662-71303 (1440), 3662-72126 (1024).
   Frosted-glass pill (10% white + backdrop blur) with mirrored shadow
   and small triangle pointer at top, positioned BELOW the icon.
   White text per Figma `text/white` — works because tooltip sits over the dark
   card image. Layout: 39px pill body with triangle above (Figma Union y=4). */
.dest-related-card__pill-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  /* Anchor tooltip's LEFT edge to pill's left edge so it extends RIGHT
     into the card (not LEFT past the card edge where overflow:hidden clips it). */
  left: 0;
  transform: translateY(-4px);
  height: 39px;
  padding: 0 17px;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 4px 4px 12px 0 rgba(44, 62, 80, 0.12),
             -4px -4px 12px 0 rgba(44, 62, 80, 0.12);
  white-space: nowrap;
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: #FFFFFF;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  /* Above card image, heart, scroll arrow, gradient overlays, etc. */
  z-index: 9999;
}
.dest-related-card__pill-tooltip::after {
  /* Triangle pointer aligned over the PILL CENTER (pill is ~50px wide at 1440,
     ~44px at 1024 — both have center near 22-25px from left). */
  content: '';
  position: absolute;
  bottom: 100%;
  left: 22px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: rgba(255, 255, 255, 0.10);
}
.dest-related-card__pill:hover .dest-related-card__pill-tooltip,
.dest-related-card__pill:focus .dest-related-card__pill-tooltip,
.dest-related-card__pill:focus-within .dest-related-card__pill-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dest-related-card__fav {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: #FFFFFF;
  cursor: pointer;
  padding: 0;
}
.dest-related-card__fav-path { fill: transparent; transition: fill 0.15s ease; }
/* Saved state (Figma 3368:27630): solid orange heart, no disc. */
.dest-related-card__fav[aria-pressed="true"] .dest-related-card__fav-path {
  fill: #FF7335;
  stroke: #FF7335;
}

.dest-related-card__info {
  position: absolute;
  left: 32px;
  bottom: 32px;
  right: 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}
.dest-related-card__country {
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #FFFFFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.dest-related-card__title {
  font-family: var(--font-inter), system-ui, sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  color: #FFFFFF;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Scroll arrow overlay — sits on the right edge of the visible area */
.dest__related-scroll-btn {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 89, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  z-index: 3;
  transition: background 0.15s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
.dest__related-scroll-btn:hover { background: rgba(0, 89, 255, 0.75); }

@media (max-width: 1024px) {
  /* Figma 1024 (3662-71960 + 3662-71962): heading 36px, cards 303×403, gap 20,
     region title 30px (Heading 3 1024), country 12px (Label 5 1024),
     pills/heart inset 28, scroll button 40×40.
     Stat pills: 16×16 icon + 4px gap + 12px count, padding 8 all sides (hug). */
  .dest .dest__related-heading { font-size: 36px; }
  .dest__related-scroll { gap: 20px; }
  .dest-related-card { flex-basis: 303px; height: 403px; }
  .dest-related-card__top { top: 28px; left: 28px; right: 28px; }
  .dest-related-card__pill {
    height: auto;
    padding: 8px;
    font-size: 12px;
    line-height: 1;
  }
  .dest-related-card__pill img,
  .dest-related-card__pill svg {
    /* Tablet 1024: 16×16 (Figma spec). */
    width: 16px;
    height: 16px;
  }
  /* Tablet 1024 tooltip: 10px text (Label 6 1024) */
  .dest-related-card__pill-tooltip { font-size: 10px; padding: 12px 17px; }
  .dest-related-card__info { left: 28px; bottom: 32px; right: 28px; }
  .dest-related-card__country { font-size: 12px; }
  .dest-related-card__title { font-size: 30px; }
  .dest__related-scroll-btn { width: 40px; height: 40px; background: rgba(0, 118, 255, 0.5); }
}
@media (max-width: 743px) {
  /* `.dest` switches to 16px side padding here; mirror with -16px right margin */
  .dest__related-scroll-wrap { margin-right: -16px; }
}
/* Related 600px — now handled by ≤840px and ≤480px blocks */

/* CTA */
.dest__cta { background: linear-gradient(135deg, #2454FF, #6B8DFF); border-radius: 24px; padding: 48px; color: #FFFFFF; text-align: center; }
.dest__cta h2 { color: #FFFFFF; margin: 0 0 24px; }
.dest__cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.dest__cta-btn { display: inline-block; padding: 12px 24px; border-radius: 999px; background: #FFFFFF; color: #2454FF; font-weight: 600; text-decoration: none; transition: transform 0.15s ease; }
.dest__cta-btn:hover { transform: translateY(-1px); }
.dest__cta-btn--secondary { background: rgba(255,255,255,0.2); color: #FFFFFF; }
.dest__cta-btn--secondary:hover { background: rgba(255,255,255,0.3); }

/* Footer */
.dest__footer { padding: 32px 40px; text-align: center; font-size: 12px; color: #6B7280; border-top: 1px solid #EEF0F3; }

/* ===== RESPONSIVE 768px — Figma 3596-66448 ===== */
/* ===== Destination page — iPad Air + tablet (≤840px) =====
   Covers iPad Air (820px) and 768px. Separated from the main 768px block
   so hero + about get the Figma 768 layout at iPad Air width too. */
@media (max-width: 840px) {
  /* --- Hero — Figma 3596-67081: 704×450, 20px radius --- */
  .dest__hero {
    aspect-ratio: 704 / 450;
    min-height: 400px;
    margin: 16px 0 40px;
    border-radius: 20px;
  }
  .dest__hero-content {
    left: 24px;
    top: 154px;
    bottom: auto;
    max-width: 454px;
    gap: 8px;
  }
  .dest__hero-title { font-size: 64px; }
  .dest__hero-desc { font-size: 17px; max-width: 454px; }
  .dest__hero-pills { top: 24px; left: 24px; gap: 8px; }
  .dest-pill { padding: 8px 10px; font-size: 10px; }
  .dest__hero-actions { top: 24px; right: 24px; gap: 8px; }
  .dest__hero-action { width: 36px; height: 36px; }
  .dest__hero-cards {
    display: flex;
    right: 24px;
    left: auto;
    bottom: 24px;
    gap: 8px;
  }
  .dest-hero-card {
    min-width: auto;
    padding: 8px 12px;
    border-radius: 12px;
  }
  .dest-hero-card__icon { width: 32px; height: 32px; }
  .dest-hero-card__body strong { font-size: 14px; font-weight: 500; }
  .dest-hero-card__body span { font-size: 13px; }

  /* --- About — Figma 3596:67676 + 3596:67682: side-by-side, 342+342, gap 20px
       Article at x=32 y=823, Image Group at x=394 y=826 (341.76×267).
       Article: column gap 24px, heading 28px gradient, body 14px Body 6,
       description fixed 342w gap 16px, CTA 342×48 padding 16/32 text 15px. --- */
  .dest__about {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }
  .dest .dest__about-heading { font-size: 28px; }
  .dest__about-text { gap: 24px; }
  .dest__about-body { gap: 16px; }
  .dest__about-body p, .dest__about-body li { font-size: 14px; }
  .dest__about-cta {
    font-size: 15px;
    padding: 16px 32px;
    width: 100%;
    height: 48px;
    box-sizing: border-box;
  }
  .dest__about-image-group {
    width: 100%;
    max-width: 100%;
    height: 267px;
    margin: 0;
  }
  .dest__about-img--main { left: 32%; width: 68%; height: 100%; }
  .dest__about-img--accent { left: 14%; top: 23%; width: 36%; height: 63%; }
  .dest__about-tag { left: 5%; top: 63%; bottom: auto; }
  .dest__about-tag-marks { left: 0; top: 59%; bottom: auto; }

  /* --- Surf Level — Figma 3596:68108: heading 28px, card radius 40px,
       table pad 24, header 100×44 17px, data 94×44, corner 100px,
       legend row gap 16 pad 24/0, legend text 11px --- */
  .dest .dest__conditions-heading { font-size: 28px; }
  .dest-conditions-card { border-radius: 40px; }
  .dest-conditions__table-wrap { padding: 24px; overflow-x: auto; }
  .dest-conditions thead th,
  .dest-conditions tbody th { font-size: 17px; height: 44px; padding: 12px 10px; }
  .dest-conditions td { height: 44px; padding: 10px; }
  .dest-conditions .cond { width: 24px; height: 24px; }
  .dest-conditions__corner { width: 100px; }
  .dest-conditions__legend { gap: 16px; padding: 24px 0; }
  .dest-conditions__legend li { font-size: 11px; }

  /* --- Weather — Figma 3596:68109: same table structure as Surf Level.
       Data text 13px Label 3, wetsuit icons 40×40 in 94×44 cells,
       legend 40×40 icons, title 12px Label 5, subtitle 10px Label 6 #C6C6C6.
       Corner bumped to 130px so "Rainy days" / "What to Pack" stay single-line. --- */
  .dest .dest__weather-heading { font-size: 28px; }
  .dest-weather-card { border-radius: 40px; }
  .dest-weather__table-wrap { padding: 24px; overflow: visible; }
  .dest-weather thead th,
  .dest-weather tbody th { font-size: 17px; height: 44px; padding: 12px 10px; }
  .dest-weather td { height: 44px; padding: 10px; }
  .dest-weather__val { font-size: 13px; }
  .dest-weather__corner { width: 130px; }
  .dest-weather__suit { width: 40px; height: 40px; }
  .dest-weather__legend { gap: 16px; padding: 24px 0; }
  .dest-weather__legend img { width: 40px; height: 40px; }
  .dest-weather__legend-text strong { font-size: 12px; }
  .dest-weather__legend-text span { font-size: 10px; }

  /* --- Tips — Figma 3596:68830: 4-up row, 704w, gap 20px.
       Cards 161×281, pad 24/0, radius 25, gap 12.
       Icon 76×76, title 18px Heading 4, body 11px Label 5.
       Heading 28px center, intro 14px Body 6 center, width 496. --- */
  .dest .dest__tips-heading { font-size: 28px; }
  .dest__tips-intro { font-size: 14px; max-width: 496px; }
  .dest__tips-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }
  .dest-tip {
    min-height: 281px;
    padding: 24px 8px;
    gap: 12px;
    border-radius: 25px;
  }
  .dest-tip__icon { width: 76px; height: 76px; }
  .dest-tip h3 { font-size: 18px; }
  .dest-tip__body, .dest-tip p { font-size: 11px; }

  /* --- FAQ — Figma 3597:66419: 768w, center, gap 48px.
       Heading 28px gradient center. List 704w, gap 34px.
       Items: column gap 24px, question 20px SemiBold #2C3E50,
       divider #EEEEEE 2px. --- */
  .dest__faq > h2 { font-size: 28px; margin: 0 0 48px; }
  .dest__faq-list { gap: 34px; max-width: 704px; }
  .dest__faq-list summary { font-size: 20px; font-weight: 600; padding-bottom: 24px; }
  .dest__faq-list details[open] summary { padding-bottom: 24px; }
  .dest__faq-list details { border-bottom-color: #EEEEEE; }
  .dest__faq-answer { font-size: 18px; line-height: 26px; max-width: 95%; }

  /* --- Related regions — Figma 3662:72140: 736w, gap 24px.
       Heading 28px. Cards 270×350, gap 20px, radius 24px.
       Insets 24px, pills pad 8 icon 12 text 10px,
       country 11px, title 24px, fav 36×36, scroll btn 48×48. --- */
  .dest .dest__related-heading { font-size: 28px; }
  .dest__related-scroll-wrap { margin-right: -24px; }
  .dest__related-scroll { gap: 20px; }
  .dest-related-card { flex-basis: 270px; height: 350px; }
  .dest-related-card__top { top: 24px; left: 24px; right: 24px; }
  .dest-related-card__pill { height: auto; padding: 8px; font-size: 10px; }
  .dest-related-card__pill img,
  .dest-related-card__pill svg { width: 12px; height: 12px; }
  .dest-related-card__info { left: 24px; bottom: 28px; right: 24px; }
  .dest-related-card__country { font-size: 11px; }
  .dest-related-card__title { font-size: 24px; }
  .dest-related-card__fav { width: 36px; height: 36px; }
  .dest__related-scroll-btn { width: 48px; height: 48px; background: rgba(0, 89, 255, 0.25); }

  /* --- Editorial guide — Figma 3662:70366: 768w full-bleed, gradient bg.
       Tag 14px Medium, pad 8/24. Heading 28px. h3 24px. h4 18px.
       Body/list 17px. List gap 18px, indent 34px. Inner pad 32px (704w content). --- */
  .dest__guide { padding: 48px 0; }
  .dest__guide-inner { max-width: 768px; padding: 0 32px; }
  .dest__guide-tag { font-size: 14px; padding: 8px 24px; }
  .dest .dest__guide-heading { font-size: 28px; }
  .dest__guide-body h2, .dest__guide-body h3 { font-size: 24px; margin: 32px 0 24px; }
  .dest__guide-body h4 { font-size: 18px; margin: 24px 0 16px; }
  .dest__guide-body p, .dest__guide-body li { font-size: 17px; }
  .dest__guide-body ul, .dest__guide-body ol { gap: 18px; }
  .dest__guide-body li { padding-left: 34px; }
}

@media (max-width: 768px) {
  /* --- Header --- */
  body.destination-page .header { padding: 20px 24px 7px; }

  /* --- Container & general --- */
  .dest { padding: 0 24px 48px; }
  .dest-breadcrumb { padding: 12px 24px; }
  .dest > section,
  .dest section { margin-bottom: 72px; }
  .dest-card { border-radius: 28px; padding: 28px 20px; }

  /* --- About: handled by the ≤840px block above (side-by-side per Figma) --- */

  /* --- Surf Level — Figma 3596:68108: 704w, heading 28px, card radius 40px,
       table padding 24px, header 100×44 17px, data 94×44, legend gap 16 pad 24 --- */
  .dest .dest__conditions-heading { font-size: 28px; }
  .dest-conditions-card { border-radius: 40px; }
  .dest-conditions__table-wrap { padding: 24px; overflow-x: auto; }
  .dest-conditions thead th,
  .dest-conditions tbody th { font-size: 17px; height: 44px; padding: 12px 10px; }
  .dest-conditions td { height: 44px; padding: 10px; }
  .dest-conditions .cond { width: 24px; height: 24px; }
  .dest-conditions__corner { width: 100px; }
  .dest-conditions__legend { gap: 16px; padding: 24px 0; }
  .dest-conditions__legend li { font-size: 11px; }

  /* --- Weather: handled by the ≤840px block above (matches Figma 3596:68109) --- */

  /* --- Tips: handled by the ≤840px block above (4-up row per Figma 3596:68830) --- */

  /* --- FAQ: handled by the ≤840px block above (Figma 3597:66419) --- */

  /* --- Related regions: handled by the ≤840px block above (Figma 3662:72140) --- */

  /* --- Editorial guide: handled by the ≤840px block above (Figma 3662:70366) --- */

  /* --- Footer --- */
  .dest__footer { padding: 28px 24px; }
}

/* Responsive — legacy phone overrides */
@media (max-width: 743px) {
  .dest { padding: 0 16px 32px; }
  .dest-breadcrumb { padding: 12px 16px; }
  .dest__hero-overlay { padding: 20px; }
  .dest__hero-overlay h1 { font-size: 36px; }
  .dest__hero-tag { font-size: 14px; }
  .dest__intro { font-size: 15px; margin-bottom: 32px; }
  .dest__best-for { padding: 20px; margin-bottom: 32px; }
  .dest__cta { padding: 32px 20px; }
  .dest__footer { padding: 24px 16px; }
}

/* ===== MOBILE — Figma 390px (3605:73005) =====
   Covers phones ≤480px. Overrides all previous breakpoints. */
@media (max-width: 480px) {
  /* --- Container & general --- */
  .dest { padding: 0 16px 32px; }
  .dest-breadcrumb { padding: 12px 16px; }
  .dest > section,
  .dest section { margin-bottom: 56px; }

  /* --- Hero — Figma 3606:67707: 358×456, radius 20px.
       Title 48px, desc 16px/300w, at y=153. Pills column scroll at 16/16.
       Water+Rain cards VISIBLE in column, gap 4px, at x=141 y=346,
       24px icons, 8px radius, 13px/12px labels. Share/fav at 286/16. --- */
  .dest__hero {
    aspect-ratio: 358 / 456;
    min-height: 420px;
    margin: 16px 0 32px;
    border-radius: 20px;
  }
  .dest__hero-content {
    left: 16px;
    top: auto;
    bottom: auto;
    top: 153px;
    max-width: 318px;
    gap: 0;
  }
  .dest__hero-title { font-size: 48px; }
  .dest__hero-desc { font-size: 16px; max-width: 300px; }
  .dest__hero-pills {
    top: 16px;
    left: 16px;
    flex-direction: column;
    gap: 4px;
    max-width: 70%;
  }
  .dest-pill { padding: 4px; font-size: 9px; }
  .dest__hero-actions { top: 16px; right: 16px; gap: 8px; }
  .dest__hero-action { width: 24px; height: 24px; }
  /* Cards visible in column layout */
  .dest__hero-cards {
    display: flex;
    flex-direction: column;
    right: 16px;
    left: auto;
    bottom: 24px;
    gap: 4px;
    max-width: 201px;
  }
  .dest-hero-card {
    min-width: auto;
    padding: 8px 12px;
    border-radius: 8px;
  }
  .dest-hero-card__icon { width: 24px; height: 24px; }
  .dest-hero-card__body strong { font-size: 13px; font-weight: 500; }
  .dest-hero-card__body span { font-size: 12px; }

  /* --- About — Figma 3606:73707: 358w.
       Heading full width, para 1 narrow (180px beside image),
       para 2 + CTA full width below image. --- */
  .dest__about {
    grid-template-columns: 1fr 170px;
    gap: 12px;
    align-items: start;
  }
  .dest__about-text { display: contents; }
  .dest__about-body { display: contents; }
  .dest .dest__about-heading { font-size: 24px; grid-column: 1; grid-row: 1; }
  .dest__about-body p:first-child { font-size: 14px; grid-column: 1; grid-row: 2; }
  .dest__about-body p:last-child { font-size: 14px; grid-column: 1 / -1; grid-row: 3; }
  .dest__about-cta {
    font-size: 14px;
    padding: 12px 24px;
    height: 44px;
    box-sizing: border-box;
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
  }
  .dest__about-image-group {
    grid-column: 2;
    grid-row: 1 / 3;
    width: 170px;
    height: 160px;
    margin: 0;
    max-width: none;
  }
  .dest__about-img--main { left: 21%; width: 79%; height: 100%; }
  .dest__about-img--accent { left: 0; top: 21%; width: 42%; height: 58%; }
  .dest__about-img { border-width: 2px; }
  .dest__about-tag { display: none; }
  .dest__about-tag-marks { display: none; }

  /* --- Conditions heading help icon + popup (mobile only) --- */
  .dest__conditions-header {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
  }
  .dest__conditions-help {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
  }
  .dest__conditions-popup {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 238px;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 4px 4px 12px 0 rgba(44, 62, 80, 0.12),
               -4px -4px 12px 0 rgba(44, 62, 80, 0.12);
    z-index: 100;
    flex-direction: column;
    gap: 12px;
  }
  .dest__conditions-popup--open { display: flex; }
  .dest__conditions-popup-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-inter), system-ui, sans-serif;
    font-size: 12px;
    color: #2C3E50;
  }
  .dest__conditions-popup-item .cond { width: 12px; height: 12px; flex-shrink: 0; border-radius: 50%; }
  /* Hide the inline legends on mobile */
  .dest-conditions__legend { display: none; }
  .dest-weather__legend { display: none; }

  /* --- Weather heading help icon + popup (mobile only) --- */
  .dest__weather-header {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
  }
  .dest__weather-help {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
  }
  .dest__weather-popup {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 4px 4px 12px 0 rgba(44, 62, 80, 0.12),
               -4px -4px 12px 0 rgba(44, 62, 80, 0.12);
    z-index: 100;
    flex-direction: column;
    gap: 16px;
  }
  .dest__weather-popup--open { display: flex; }
  .dest__weather-popup-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .dest__weather-popup-item img { width: 22px; height: 40px; flex-shrink: 0; }
  .dest__weather-popup-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .dest__weather-popup-text strong {
    font-family: var(--font-inter), system-ui, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #666666;
  }
  .dest__weather-popup-text span {
    font-family: var(--font-inter), system-ui, sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: #C6C6C6;
  }

  /* --- Surf Level — Figma 3606:74433: split layout, sticky first column + scrollable data.
       Heading 24px, card radius 20px, left col 98px sticky, data 100×44 cells scroll.
       Remove horizontal padding from scroll container so sticky left:0 aligns with card edge. --- */
  .dest .dest__conditions-heading { font-size: 24px; }
  .dest-conditions-card { border-radius: 20px; overflow: hidden; }
  .dest-conditions__table-wrap { padding: 16px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dest-conditions {
    table-layout: auto;
    min-width: 700px;
  }
  .dest-conditions thead th,
  .dest-conditions tbody th {
    font-size: 14px; height: 44px; padding: 12px 8px;
    white-space: nowrap;
  }
  /* Only first column is sticky */
  .dest-conditions__corner,
  .dest-conditions tbody th {
    position: sticky; left: 0; z-index: 2; background: #FFFFFF;
    min-width: 98px;
  }
  .dest-conditions thead th:not(.dest-conditions__corner) {
    min-width: 90px;
  }
  .dest-conditions td {
    height: 44px; padding: 10px;
    min-width: 90px;
    white-space: nowrap;
  }
  .dest-conditions .cond { width: 18px; height: 18px; }
  .dest-conditions__corner { width: 98px; }
  .dest-conditions__legend { gap: 8px 16px; padding: 16px 16px; }
  .dest-conditions__legend li { font-size: 10px; }

  /* --- Weather — same split layout as Surf Level, sticky first col --- */
  .dest .dest__weather-heading { font-size: 24px; }
  .dest-weather-card { border-radius: 20px; overflow: hidden; }
  .dest-weather__table-wrap { padding: 16px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dest-weather {
    table-layout: auto;
    min-width: 700px;
  }
  .dest-weather thead th,
  .dest-weather tbody th {
    font-size: 14px; height: 44px; padding: 12px 8px;
    white-space: nowrap;
  }
  /* Only first column is sticky */
  .dest-weather__corner,
  .dest-weather tbody th {
    position: sticky; left: 0; z-index: 2; background: #FFFFFF;
    min-width: 98px;
  }
  .dest-weather thead th:not(.dest-weather__corner) {
    min-width: 90px;
  }
  .dest-weather td {
    height: 44px; padding: 10px;
    min-width: 90px;
    white-space: nowrap;
  }
  .dest-weather__val { font-size: 12px; }
  .dest-weather__corner { width: 90px; }
  .dest-weather__suit { width: 36px; height: 36px; }
  .dest-weather__legend { gap: 12px; padding: 16px 8px; flex-wrap: wrap; }
  .dest-weather__legend img { width: 36px; height: 36px; }
  .dest-weather__legend-text strong { font-size: 11px; }
  .dest-weather__legend-text span { font-size: 9px; }

  /* --- Tips — Figma 3943:58892: 374w, column gap 20, horizontal scroll cards.
       Cards 161×213, pad 24/0, icon 48px, title 16px SemiBold, body 9px. --- */
  .dest .dest__tips-heading { font-size: 24px; text-align: left; }
  .dest__tips-intro { font-size: 14px; max-width: 100%; text-align: left; }
  .dest__tips-cards {
    grid-template-columns: none;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 15px;
    padding-bottom: 8px;
  }
  .dest-tip {
    flex: 0 0 161px;
    min-height: 213px;
    padding: 24px 8px;
    gap: 12px;
    border-radius: 25px;
    scroll-snap-align: start;
  }
  .dest-tip__icon { width: 48px; height: 48px; }
  .dest-tip h3 { font-size: 16px; font-weight: 600; }
  .dest-tip__body, .dest-tip p { font-size: 9px; }

  /* --- FAQ — Figma 3624:70242: 390w, padding 0 16px, gap 48px.
       Heading 24px gradient, list 358w gap 34px, question 18px SemiBold. --- */
  .dest__faq > h2 { font-size: 24px; margin: 0 0 48px; }
  .dest__faq-list { gap: 34px; max-width: 358px; }
  .dest__faq-list summary { font-size: 18px; font-weight: 600; padding-bottom: 24px; }
  .dest__faq-list details[open] summary { padding-bottom: 24px; }
  .dest__faq-list details { border-bottom-color: #EEEEEE; }
  .dest__faq-answer { font-size: 16px; line-height: 24px; max-width: 100%; }

  /* --- Related regions — Figma 3662:72160: 374w, gap 20px.
       Cards 208×300, radius 20px, gap 16px, horizontal scroll.
       Country 10px, title 20px, insets 20px, pills 12px icon 9px text. --- */
  .dest .dest__related-heading { font-size: 24px; }
  .dest__related-scroll-wrap { margin-right: -16px; }
  .dest__related-scroll { gap: 16px; }
  .dest-related-card { flex-basis: 208px; height: 300px; border-radius: 20px; }
  .dest-related-card__top { top: 20px; left: 20px; right: 20px; }
  .dest-related-card__pill { padding: 8px; font-size: 9px; border-radius: 51px; }
  .dest-related-card__pill img,
  .dest-related-card__pill svg { width: 12px; height: 12px; }
  .dest-related-card__info { left: 20px; bottom: 20px; right: 20px; }
  .dest-related-card__country { font-size: 10px; }
  .dest-related-card__title { font-size: 20px; }
  .dest-related-card__fav { width: 36px; height: 36px; }
  .dest__related-scroll-btn { display: none; }

  /* --- Editorial guide — Figma 3662:70428: 390w full-bleed, content at x=16.
       Heading 24px, h3 20px, h4 18px, body 16px, list gap 18px, content gap 28px.
       Disable the 100vw trick on mobile — use negative margins instead. --- */
  .dest__guide {
    width: auto;
    left: auto;
    transform: none;
    margin-left: -16px;
    margin-right: -16px;
    padding: 40px 0;
  }
  .dest__guide-inner { max-width: none; padding: 0 16px; }
  .dest .dest__guide-heading { font-size: 24px; }
  .dest__guide-body h2, .dest__guide-body h3 { font-size: 20px; margin: 24px 0 16px; }
  .dest__guide-body h4 { font-size: 18px; margin: 20px 0 12px; }
  .dest__guide-body p, .dest__guide-body li { font-size: 16px; }
  .dest__guide-body ul, .dest__guide-body ol { gap: 18px; }
  .dest__guide-body li { padding-left: 28px; }
  .dest__guide-body img { border-radius: 12px; margin: 20px 0; }
}