/* ============================================================================
   FindYourWeek — "Méditerranée éditorial" design system
   Plâtre & lumière · teal Égée en primaire · citron pour les deals.
   Display: Fraunces (self-hosted) · body: sans système · prix: mono tabulaire.
   Light + dark (toggle data-theme + fallback prefers-color-scheme).
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 900;             /* variable */
  font-display: swap;
  src: url("/static/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* ---- Tokens -------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  /* neutrals — plaster / limestone */
  --paper:    #faf7f2;
  --paper-2:  #f1ebe0;
  --card:     #fffdfa;
  --ink:      #201c16;
  --body:     #574f42;
  --muted:    #6f6656;   /* WCAG-AA (≥4.5:1) on --paper for small secondary text */
  --line:     #e8dfd1;
  --line-2:   #d8ccb8;

  /* Aegean teal — primary / brand / CTA */
  --teal:      #0e7c6b;
  --teal-600:  #0b6455;
  --teal-700:  #08483c;
  --teal-tint: #e1f0eb;

  /* terracotta — warm secondary (used sparingly) */
  --terra:      #c4573a;
  --terra-tint: #f7e7df;

  /* citron — THE deal accent (best price, savings). Light: pair with ink text */
  --citron:      #c7d000;
  --citron-deep: #9aa400;
  --citron-tint: #f4f6d6;

  /* sun gold — stars & score */
  --star: #e0a424;

  --primary:   var(--teal);
  --glass:     rgba(255, 253, 250, .74);
  --glass-2:   rgba(255, 253, 250, .62);
  --ring:      #12a08a;

  --sh-color: 63, 50, 33;
  --sh-sm: 0 1px 2px rgba(var(--sh-color), .05), 0 2px 8px rgba(var(--sh-color), .05);
  --sh-md: 0 10px 26px -12px rgba(var(--sh-color), .22);
  --sh-lg: 0 30px 60px -26px rgba(var(--sh-color), .32);

  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px;
  --maxw: 1180px;

  --font:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono:    ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  --ease:    cubic-bezier(.22, .61, .36, 1);
}

/* Native controls (e.g. the <select> option popup) follow the SITE theme, not
   just the OS. Without this, toggling a theme opposite to the OS scheme renders
   dropdown options same-colour-on-same and they go invisible. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* dark palette — warm olive-charcoal, not cold slate */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #17140f; --paper-2: #1f1b15; --card: #221e17;
    --ink: #f6f0e4; --body: #d6cdbc; --muted: #a29684;
    --line: #322c22; --line-2: #443b2c;
    --teal: #34b39b; --teal-600: #2a9a85; --teal-700: #6fd7c3; --teal-tint: #12352e;
    --terra: #e08163; --terra-tint: #3a241b;
    --citron: #d8e62b; --citron-deep: #c7d400; --citron-tint: #2c3308;
    --star: #eeb44a;
    --glass: rgba(34, 30, 23, .66); --glass-2: rgba(34, 30, 23, .5);
    --ring: #52c9b2;
    --sh-color: 0, 0, 0;
    --sh-md: 0 12px 28px -12px rgba(0,0,0,.55);
    --sh-lg: 0 32px 62px -26px rgba(0,0,0,.66);
  }
}
:root[data-theme="dark"] {
  --paper: #17140f; --paper-2: #1f1b15; --card: #221e17;
  --ink: #f6f0e4; --body: #d6cdbc; --muted: #a29684;
  --line: #322c22; --line-2: #443b2c;
  --teal: #34b39b; --teal-600: #2a9a85; --teal-700: #6fd7c3; --teal-tint: #12352e;
  --terra: #e08163; --terra-tint: #3a241b;
  --citron: #d8e62b; --citron-deep: #c7d400; --citron-tint: #2c3308;
  --star: #eeb44a;
  --glass: rgba(34, 30, 23, .66); --glass-2: rgba(34, 30, 23, .5);
  --ring: #52c9b2;
  --sh-color: 0, 0, 0;
  --sh-md: 0 12px 28px -12px rgba(0,0,0,.55);
  --sh-lg: 0 32px 62px -26px rgba(0,0,0,.66);
}

/* ---- Base --------------------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.55;
  color: var(--body); background: var(--paper); min-height: 100dvh;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* warm wash behind the hero */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(58rem 40rem at 6% -12%, color-mix(in srgb, var(--teal) 13%, transparent), transparent 60%),
    radial-gradient(48rem 34rem at 104% -8%, color-mix(in srgb, var(--terra) 13%, transparent), transparent 55%);
}
/* plaster grain — subtle tactility */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .38;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) ~ * , :root:not([data-theme="light"]) body::after { mix-blend-mode: screen; opacity: .06; } }
:root[data-theme="dark"] body::after { mix-blend-mode: screen; opacity: .06; }

h1, h2, h3, h4 { color: var(--ink); margin: 0; line-height: 1.1; }
a { color: var(--teal); text-decoration-color: color-mix(in srgb, var(--teal) 40%, transparent); text-underline-offset: 3px; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 8px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-5); }

/* editorial kicker / eyebrow — a magazine device, encodes section meaning */
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teal-600);
}
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--terra); border-radius: 2px; }

/* ---- Header / navbar (glass, sticky) ------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 60; padding: var(--sp-3) 0;
  background: var(--glass); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
/* centered-logo navbar — nav links split on either side of the brand */
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-4); }
.nav-side { display: flex; align-items: center; gap: var(--sp-4); justify-self: start; min-width: 0; }
.nav-side.end { justify-self: end; gap: var(--sp-3); }
.brand { justify-self: center; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark {
  width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--teal), var(--teal-700));
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--teal) 60%, transparent);
  position: relative;
}
.brand-mark::after { content: ""; position: absolute; right: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--citron); }
.brand-mark svg { color: #fff; }
.brand b { font-family: var(--display); color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }

/* nav = clean text links with an active underline */
.nav { display: flex; gap: var(--sp-4); }
.nav a { position: relative; text-decoration: none; color: var(--muted); font-weight: 700; font-size: 14.5px; padding: 4px 1px; white-space: nowrap; transition: color .15s var(--ease); }
.nav a:hover { color: var(--ink); }
.nav a.active { color: var(--teal-600); }
.nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: var(--teal); }
/* hamburger — hidden on desktop, shown on mobile (see media query) */
.nav-toggle { display: none; place-items: center; width: 42px; height: 42px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--card); color: var(--ink); cursor: pointer; }
.nav-toggle .ico-close { display: none; }
.site-header.nav-open .nav-toggle .ico-open { display: none; }
.site-header.nav-open .nav-toggle .ico-close { display: block; }

/* FR / EN language switcher */
.lang { display: inline-flex; gap: 1px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px; }
.lang a { text-decoration: none; color: var(--muted); font-weight: 800; font-size: 12px; letter-spacing: .02em; padding: 5px 9px; border-radius: var(--r-pill); transition: color .15s var(--ease), background .15s var(--ease); }
.lang a:hover { color: var(--ink); }
.lang a.on { background: var(--card); color: var(--teal-600); box-shadow: var(--sh-sm); }

/* "Comment ça marche ?" — icon button + popover (trust / reassurance) */
.hiw { position: relative; }
.hiw-trigger { width: 42px; height: 42px; display: grid; place-items: center; cursor: pointer; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); transition: border-color .15s var(--ease), color .15s, transform .12s; }
.hiw-trigger:hover { border-color: var(--teal); color: var(--teal); }
.hiw-trigger:active { transform: scale(.94); }
.hiw-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 70; width: 322px; max-width: 90vw; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: var(--sp-4); animation: pop .16s var(--ease); text-align: left; }
.hiw-pop h4 { font-family: var(--display); font-size: 16px; font-weight: 700; margin-bottom: 10px; color: var(--ink); }
.hiw-pop ol { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; }
.hiw-pop li { font-size: 13px; color: var(--body); line-height: 1.45; }
.hiw-pop li b { color: var(--ink); }

.theme-toggle {
  width: 42px; height: 42px; flex: none; display: grid; place-items: center; cursor: pointer;
  border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--card); color: var(--ink);
  transition: border-color .15s var(--ease), transform .12s var(--ease), color .15s;
}
.theme-toggle:hover { border-color: var(--teal); color: var(--teal); }
.theme-toggle:active { transform: scale(.94); }
.theme-toggle .moon { display: none; } .theme-toggle .sun { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: block; } :root[data-theme="dark"] .theme-toggle .sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .moon { display: block; } :root:not([data-theme="light"]) .theme-toggle .sun { display: none; } }

/* ---- Hero (editorial) --------------------------------------------------- */
.hero { padding: var(--sp-8) 0 var(--sp-5); }
.hero .kicker { margin-bottom: var(--sp-4); }
.hero h1 {
  font-family: var(--display); font-weight: 900; font-optical-sizing: auto;
  font-size: clamp(38px, 6.4vw, 68px); line-height: 1.02; letter-spacing: -.018em; max-width: 15ch;
}
.hero h1 .accent { color: var(--terra); font-style: italic; }
.hero p { margin: var(--sp-4) 0 0; font-size: clamp(15px, 2vw, 18.5px); color: var(--body); max-width: 54ch; }

/* ---- Search (glass, sticky) --------------------------------------------- */
.search {
  position: sticky; top: 72px; z-index: 40; margin-top: var(--sp-5);
  background: var(--glass); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid color-mix(in srgb, var(--card) 60%, var(--line-2));
  border-radius: var(--r-xl); box-shadow: var(--sh-lg);
  padding: var(--sp-5); display: grid; gap: var(--sp-4);
}
.fields { display: grid; grid-template-columns: 1.8fr 1fr .8fr 1.1fr; gap: var(--sp-3); align-items: end; }
.actions { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label { font-size: 11.5px; font-weight: 800; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; padding-left: 2px; }
.control {
  display: flex; align-items: center; gap: 9px; height: 52px; padding: 0 13px;
  background: var(--card); border: 1.5px solid var(--line-2); border-radius: var(--r-sm);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.control:hover { border-color: color-mix(in srgb, var(--teal) 45%, var(--line-2)); }
.control:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 16%, transparent); }
.control svg { color: var(--muted); flex: none; }
.control input, .control select { border: 0; background: transparent; width: 100%; min-width: 0; height: 100%; font: inherit; color: var(--ink); outline: none; }
.control select { appearance: none; cursor: pointer; padding-right: 16px; }
.control.select { position: relative; }
.control.select::after { content: ""; position: absolute; right: 14px; width: 8px; height: 8px; pointer-events: none; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); }
.control input[type=number] { -moz-appearance: textfield; }
.control input::placeholder { color: color-mix(in srgb, var(--muted) 85%, transparent); }

/* stars segmented */
.stars-seg { display: flex; gap: 6px; }
.stars-seg label { cursor: pointer; user-select: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 52px; padding: 0 16px; border-radius: var(--r-sm); background: var(--card); border: 1.5px solid var(--line-2); color: var(--muted); font-weight: 800; font-size: 14px; transition: all .15s var(--ease); }
.stars-seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.stars-seg label:hover { border-color: color-mix(in srgb, var(--teal) 45%, var(--line-2)); }
.stars-seg label:has(input:checked) { background: var(--teal-tint); border-color: var(--teal); color: var(--teal-600); }
.stars-seg label:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 2px; }

.btn-search {
  height: 52px; padding: 0 28px; border: 0; cursor: pointer; border-radius: var(--r-sm);
  font: inherit; font-weight: 800; font-size: 15px; color: #fff;
  background: linear-gradient(180deg, var(--teal), var(--teal-700));
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--teal) 62%, transparent);
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  transition: transform .12s var(--ease), box-shadow .15s var(--ease), filter .15s;
}
.btn-search:hover { filter: brightness(1.06); box-shadow: 0 16px 30px -10px color-mix(in srgb, var(--teal) 66%, transparent); }
.btn-search:active { transform: translateY(1px) scale(.99); }
/* loading state while the search request is in flight (htmx marks the form) */
.btn-search .bs-spin, .btn-search .bs-busy { display: none; }
.search.htmx-request .btn-search { opacity: .92; pointer-events: none; }
.search.htmx-request .btn-search .bs-icon, .search.htmx-request .btn-search .bs-idle { display: none; }
.search.htmx-request .btn-search .bs-spin { display: inline-block; animation: spin .9s linear infinite; }
.search.htmx-request .btn-search .bs-busy { display: inline; }

/* destination dropdown */
.dest { position: relative; }
#dest_list:not(:empty), #al_dest_list:not(:empty) { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 50; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--sh-lg); overflow: hidden; animation: pop .16s var(--ease); }
.candidates { list-style: none; margin: 0; padding: 6px; max-height: 320px; overflow: auto; }
.dest-pick { width: 100%; text-align: left; cursor: pointer; display: flex; align-items: center; gap: 10px; background: transparent; border: 0; border-radius: 11px; padding: 11px 12px; font: inherit; color: var(--ink); }
.dest-pick small { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; }
.dest-pick .pin { color: var(--teal); flex: none; }
.dest-pick:hover, .dest-pick:focus-visible { background: var(--teal-tint); }

/* month multi-select: input with tags -> click reveals a month list */
.mois { position: relative; }
.mois-trigger { width: 100%; cursor: pointer; text-align: left; overflow: hidden; }
.mois-trigger .caret { margin-left: auto; color: var(--muted); transition: transform .18s var(--ease); }
.mois-trigger[aria-expanded="true"] .caret { transform: rotate(180deg); }
.mois-val { display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.mtag { flex: none; background: var(--teal-tint); color: var(--teal-600); font-weight: 800; font-size: 12.5px; padding: 3px 9px; border-radius: var(--r-pill); text-transform: capitalize; white-space: nowrap; }
.mtag.more { background: var(--paper-2); color: var(--muted); }
.mplace { color: color-mix(in srgb, var(--muted) 85%, transparent); font-weight: 600; }
.mois-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 55; width: 252px; max-width: 88vw; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: 6px; animation: pop .16s var(--ease); }
.mois-list { list-style: none; margin: 0; padding: 0; max-height: 288px; overflow: auto; }
.mrow { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; user-select: none; transition: background .12s var(--ease); }
.mrow input { position: absolute; opacity: 0; width: 0; height: 0; }
.mrow-name { flex: 1; font-weight: 700; font-size: 14px; color: var(--ink); text-transform: capitalize; }
.mrow-name em { font-style: normal; color: var(--muted); font-weight: 600; font-size: 12.5px; }
.mrow-check { flex: none; color: var(--teal); opacity: 0; transition: opacity .12s var(--ease); }
.mrow:hover { background: var(--paper-2); }
.mrow:has(input:checked) { background: var(--teal-tint); }
.mrow:has(input:checked) .mrow-check { opacity: 1; }
.mrow:has(input:focus-visible) { outline: 2px solid var(--ring); outline-offset: -2px; }

/* occupancy popover */
.occ { position: relative; }
.occ-trigger { width: 100%; cursor: pointer; text-align: left; }
.occ-trigger span { color: var(--ink); font-weight: 600; }
.occ-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 55; width: 300px; max-width: 88vw; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: var(--sp-4); animation: pop .16s var(--ease); }
.occ-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; }
.occ-row + .occ-row { border-top: 1px solid var(--line); }
.occ-row b { color: var(--ink); font-size: 14.5px; display: block; }
.occ-row small { color: var(--muted); font-size: 12px; }
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper button { width: 36px; height: 36px; border-radius: 11px; border: 1.5px solid var(--line-2); background: var(--paper-2); color: var(--ink); font-size: 20px; font-weight: 700; cursor: pointer; display: grid; place-items: center; transition: all .12s var(--ease); }
.stepper button:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.stepper button:disabled { opacity: .35; cursor: not-allowed; }
.stepper .val { min-width: 22px; text-align: center; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.child-ages { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.age-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.age-row label { font-size: 13px; color: var(--muted); font-weight: 700; }
.age-row select { height: 40px; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--paper-2); color: var(--ink); font: inherit; padding: 0 10px; min-width: 120px; }
.occ-done { margin-top: 14px; width: 100%; height: 44px; border: 0; border-radius: var(--r-sm); background: var(--teal); color: #fff; font-weight: 800; font-size: 14.5px; cursor: pointer; }

/* ---- Results + filters -------------------------------------------------- */
.results { padding: var(--sp-6) 0 var(--sp-8); }
.results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.results-head .eyebrow { margin-bottom: 8px; }
.results-head h2 { font-family: var(--display); font-size: clamp(24px, 3vw, 32px); font-weight: 800; white-space: nowrap; }
.freshness { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.dot-live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: livepulse 2s infinite; }
@keyframes livepulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--teal) 45%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
/* owner-only Pro badge: signals auto-compare is armed (hidden from the public) */
.pro-badge { margin-left: 6px; padding: 1px 7px; border-radius: var(--r-pill); font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--teal); background: color-mix(in srgb, var(--teal) 12%, transparent); border: 1px solid color-mix(in srgb, var(--teal) 35%, transparent); vertical-align: middle; }

.results-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-5); align-items: start; grid-template-areas: "filters map" "filters list"; }
.results-layout > .filters { grid-area: filters; }
#results_map { grid-area: map; }
#results_grid { grid-area: list; }

/* filters — sidebar on desktop, bottom-sheet on mobile */
.filters {
  position: sticky; top: 140px; display: flex; flex-direction: column; gap: var(--sp-5);
  /* the sidebar can outgrow the viewport (type + stars + amenities) — scroll it
     internally so every filter stays reachable */
  max-height: calc(100vh - 156px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm);
}
.filters::-webkit-scrollbar { width: 8px; }
.filters::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid var(--card); }
.filters h3 { font-size: 15px; font-weight: 800; }
.filters-sheet-head { display: none; }
.ctl { display: flex; flex-direction: column; gap: 8px; }
.ctl > label { font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ctl > label b { color: var(--teal-600); font-variant-numeric: tabular-nums; }
.ctl-select { height: 46px; background: var(--paper-2); }
#price_max { width: 100%; accent-color: var(--teal); height: 6px; cursor: pointer; }
.toggles { gap: 8px; }
.tgl { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); background: var(--paper-2); color: var(--body); font-size: 13.5px; font-weight: 700; cursor: pointer; user-select: none; transition: all .15s var(--ease); }
.tgl svg { color: var(--muted); flex: none; }
.tgl input { position: absolute; opacity: 0; width: 0; height: 0; }
.tgl:hover { border-color: color-mix(in srgb, var(--teal) 45%, var(--line-2)); }
.tgl:has(input:checked) { background: var(--teal-tint); border-color: var(--teal); color: var(--teal-600); }
.tgl:has(input:checked) svg { color: var(--teal); }
.tgl:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 2px; }

.filters-trigger { display: none; align-items: center; gap: 8px; height: 46px; padding: 0 18px; cursor: pointer; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-weight: 800; font-size: 14px; box-shadow: var(--sh-sm); }
.filters-trigger svg { color: var(--teal); }
.sheet-close { display: none; }

/* ---- Results map (Leaflet + MarkerCluster) ----------------------------- */
.results-main { display: contents; }        /* map + grid become grid items of .results-layout */
.results-actions { display: flex; align-items: center; gap: 10px; }
.map-toggle { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; cursor: pointer; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-weight: 800; font-size: 14px; box-shadow: var(--sh-sm); }
.map-toggle svg { color: var(--teal); }
.map-toggle.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.map-toggle.on svg { color: #fff; }
.results-map { position: relative; z-index: 0; height: clamp(340px, 60vh, 620px); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); }
.results-map.leaflet-container { font: inherit; }                 /* Leaflet resets fonts; keep ours */
/* price-pill marker: the outer .price-pin is a zero-size anchor at the coordinate;
   the inner .pp is the visible tag, centred on and sitting above the point. */
.price-pin .pp { position: absolute; left: 0; bottom: 0; transform: translate(-50%, 0); background: var(--teal); color: #fff; font-weight: 800; font-size: 12px; line-height: 1; padding: 4px 8px; border-radius: 999px; white-space: nowrap; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.28); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.price-pin.best .pp { background: #d98a00; }                       /* cheapest hotel stands out */
.price-pin.mk-hi .pp, .price-pin .pp:hover { transform: translate(-50%, -2px) scale(1.14); box-shadow: 0 6px 15px rgba(0,0,0,.36); z-index: 500; }
.marker-cluster.mk-hi { outline: 3px solid var(--teal); border-radius: 50%; }
.results-map .marker-cluster div { background: var(--teal); color: #fff; font-weight: 800; }
.results-map .marker-cluster { background: color-mix(in srgb, var(--teal) 35%, transparent); }
/* live "N hôtels" count badge */
.map-count { position: absolute; top: 10px; right: 10px; z-index: 1000; background: var(--card); color: var(--ink); font-weight: 800; font-size: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); box-shadow: var(--sh-sm); pointer-events: none; }
/* rich popup: photo + body + inline compare */
.mp-wrap .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border-radius: 14px; background: var(--card); color: var(--ink); }
.mp-wrap .leaflet-popup-content { margin: 0; width: 232px !important; }
.mp-wrap .leaflet-popup-tip { background: var(--card); }
.map-pop .mp-photo { width: 100%; height: 120px; object-fit: cover; display: block; background: var(--paper-2); }
.map-pop .mp-body { padding: 10px 13px 12px; }
.map-pop .mp-stars { color: #e6a817; font-size: 12px; letter-spacing: 1px; }
.map-pop .mp-name { display: block; font-weight: 800; font-size: 14.5px; margin: 2px 0; color: var(--ink); text-decoration: none; }
.map-pop a.mp-name:hover { color: var(--teal); }
.map-pop .mp-price { font-weight: 800; color: var(--teal); font-size: 15px; }
.map-pop .mp-compare { margin-top: 9px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 12px; cursor: pointer; border-radius: var(--r-pill); border: 1.5px solid var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent); color: var(--teal); font: inherit; font-weight: 800; font-size: 13px; }
.map-pop .mp-compare:hover { background: var(--teal); color: #fff; }
.map-pop .mp-compare.htmx-request { opacity: .6; pointer-events: none; }
.map-pop .mp-cmp:not(:empty) { margin-top: 8px; }
.card.map-hi, .card.map-active { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: var(--r-lg); }

/* ---- Full-screen map mode (Booking-style: filters | map | list) -------- */
body.map-open { overflow: hidden; }
.map-bar { display: none; }
#results.map-mode .map-bar { display: flex; gap: 8px; position: fixed; top: 12px; right: 14px; z-index: 220; }
.map-close, .map-filters-btn { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 15px; cursor: pointer; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-weight: 800; font-size: 13px; box-shadow: var(--sh-md); }
.map-filters-btn { display: none; }                 /* desktop: the filters column is already visible */
.map-close svg, .map-filters-btn svg { color: var(--teal); }
#results.map-mode #results_map { border: 0; border-radius: 0; }
#results.map-mode #results_grid { display: flex; flex-direction: column; gap: var(--sp-4); overflow: auto; overscroll-behavior: contain; }
/* map-mode list card: name + rating on top, then the (swipeable) photo, then price + date.
   .card-body{display:contents} flattens its children into the card's flex column so they
   can be re-ordered around the photo without a template change. */
#results.map-mode #results_grid .card-body { display: contents; }
#results.map-mode #results_grid .card { flex: 0 0 auto; }
#results.map-mode #results_grid .card > .card-media { order: 3; height: 178px; aspect-ratio: auto; flex: 0 0 auto; }
#results.map-mode #results_grid .card-body > h3 { order: 1; margin: 0; padding: 13px 15px 2px; }
#results.map-mode #results_grid .card-body > .loc { order: 2; padding: 0 15px 11px; }
#results.map-mode #results_grid .card-body > .offer { order: 4; padding: 12px 15px 0; }
#results.map-mode #results_grid .card-body > .bestweek { order: 5; margin: 10px 15px 13px; }
#results.map-mode #results_grid .card-body > .chips,
#results.map-mode #results_grid .card-body > .deal-badge,
#results.map-mode #results_grid .card-body > .cta,
#results.map-mode #results_grid .card-body > .compare { display: none; }
@media (min-width: 981px) {
  #results.map-mode .results-layout { position: fixed; inset: 0; z-index: 200; height: 100dvh; margin: 0; gap: 0;
    grid-template-columns: 300px 1fr 380px; grid-template-areas: "filters map list"; background: var(--paper); }
  #results.map-mode .filters { grid-area: filters; position: static; top: auto; height: 100dvh; overflow: auto; overscroll-behavior: contain; border-right: 1px solid var(--line); border-radius: 0; padding: var(--sp-5) var(--sp-4); }
  #results.map-mode #results_map { height: 100dvh; }
  #results.map-mode #results_grid { height: 100dvh; padding: var(--sp-4); align-content: start; }
}
@media (max-width: 980px) {
  #results.map-mode .results-layout { position: fixed; inset: 0; z-index: 200; height: 100dvh; margin: 0; gap: 0;
    grid-template-columns: 1fr; grid-template-rows: 55dvh 1fr; grid-template-areas: "map" "list"; background: var(--paper); }
  #results.map-mode #results_map { height: 55dvh; }
  #results.map-mode #results_grid { height: auto; padding: var(--sp-4); }
  #results.map-mode .map-filters-btn { display: inline-flex; }
}
.sheet-backdrop { display: none; }

.grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ---- Card --------------------------------------------------------------- */
.card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s; }
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--line-2); }

.card-media { position: relative; aspect-ratio: 16/10; background: var(--paper-2); overflow: hidden; }
.card-photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.card:hover .card-photo { transform: scale(1.06); }
.card-media .noimg { width: 100%; height: 100%; display: grid; place-items: center; color: var(--line-2); }
.card-media .scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.28) 0, transparent 26%, transparent 62%, rgba(0,0,0,.42)); pointer-events: none; }

/* swipeable photo carousel on hotel cards */
.ccar { position: absolute; inset: 0; }
.ccar-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; outline-offset: -3px; }
.ccar-track::-webkit-scrollbar { display: none; }
.ccar-slide { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; user-select: none; -webkit-user-drag: none; }
.ccar-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; border: 0; border-radius: 50%; background: var(--glass); backdrop-filter: blur(6px); color: var(--ink); box-shadow: var(--sh-sm); opacity: 0; z-index: 4; transition: opacity .18s var(--ease), transform .12s var(--ease); }
.ccar-nav.prev { left: 8px; } .ccar-nav.next { right: 8px; }
.card:hover .ccar-nav:not([disabled]), .ccar-track:focus-visible ~ .ccar-nav:not([disabled]) { opacity: 1; }
.ccar-nav[disabled] { opacity: 0 !important; pointer-events: none; }
.ccar-nav:active { transform: translateY(-50%) scale(.9); }
.ccar-dots { position: absolute; left: 0; right: 0; bottom: 9px; z-index: 4; display: flex; gap: 5px; justify-content: center; pointer-events: none; }
.ccar-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 0 3px rgba(0,0,0,.45); transition: width .2s var(--ease), background .2s; }
.ccar-dot.on { width: 15px; border-radius: 3px; background: #fff; }
@media (hover: none) { .ccar-nav { display: none; } }

/* best-price ribbon (signature) — citron ticket, ink text */
.best { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; background: var(--citron); color: #201c16; font-weight: 900; font-size: 12px; letter-spacing: .01em; padding: 6px 11px 6px 9px; border-radius: var(--r-pill); box-shadow: 0 6px 16px -6px rgba(var(--sh-color), .5); }
.best svg { color: #201c16; }
.rank { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(32,28,22,.72); color: #fff; font: 800 12px/1 var(--mono); padding: 6px 9px; border-radius: var(--r-pill); backdrop-filter: blur(4px); }

/* favorite heart */
/* card media actions: share + favorite (top-right) */
.media-actions { position: absolute; top: 11px; right: 11px; z-index: 3; display: flex; gap: 6px; }
.fav, .share-btn { width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; border-radius: 50%; border: 0; background: var(--glass); backdrop-filter: blur(6px); color: var(--ink); box-shadow: var(--sh-sm); transition: transform .14s var(--ease), background .15s; }
.fav:hover, .share-btn:hover { transform: scale(1.08); }
.share-btn svg { color: var(--ink); }
.fav svg { fill: none; stroke: currentColor; stroke-width: 2; transition: fill .15s, stroke .15s, transform .14s var(--ease); }
.fav:hover { transform: scale(1.08); }
.fav:active svg { transform: scale(.82); }
.fav[aria-pressed="true"] svg { fill: var(--terra); stroke: var(--terra); }

.score-chip { position: absolute; bottom: 11px; left: 11px; z-index: 2; display: flex; align-items: center; gap: 5px; background: var(--glass); backdrop-filter: blur(8px); color: var(--ink); border-radius: var(--r-pill); padding: 5px 11px; font-weight: 800; font-size: 13px; box-shadow: var(--sh-sm); }
.score-chip .star { color: var(--star); } .score-chip small { color: var(--muted); font-weight: 600; font-size: 11px; }

.card-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 11px; flex: 1; }
.card h3 { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.005em; }
.card-title { color: inherit; text-decoration: none; background-image: linear-gradient(var(--teal), var(--teal)); background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .2s var(--ease), color .15s; }
.card-title:hover { color: var(--teal-700); background-size: 100% 1.5px; }
.stars-row { display: inline-flex; align-items: center; gap: 1px; color: var(--star); }
.loc { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.loc svg { flex: none; color: var(--teal); } .loc .dot { opacity: .5; }

/* the found week — the USP, shown as a trophy (as prominent as the price) */
.bestweek { display: flex; align-items: center; gap: 10px; align-self: stretch; background: var(--teal-tint); border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent); border-radius: var(--r-sm); padding: 8px 11px; }
.bw-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(150deg, var(--teal), var(--teal-700)); color: #fff; }
.bw-body { display: flex; flex-direction: column; min-width: 0; }
.bw-label { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-600); }
.bw-dates { font-size: 15.5px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
/* "proven deal" — how far below the month's average this cheapest week sits */
.deal-badge { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; background: var(--teal-tint); color: var(--teal-700); border: 1px solid color-mix(in srgb, var(--teal) 22%, transparent); font-weight: 800; font-size: 11.5px; padding: 4px 10px; border-radius: var(--r-pill); }
.deal-badge svg { color: var(--teal); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; background: var(--paper-2); border: 1px solid var(--line); color: var(--body); border-radius: var(--r-pill); padding: 4px 10px; font-size: 12px; font-weight: 600; }
.chip svg { color: var(--terra); } .chip.ok svg { color: var(--teal); }

/* price / offer block — price is the hero */
.offer { margin-top: auto; padding-top: var(--sp-3); border-top: 1px dashed var(--line-2); }
.offer .top { display: flex; align-items: flex-end; gap: 8px 10px; flex-wrap: wrap; }
.offer .amount { font: 800 30px/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.offer .amount .cur { font-size: 15px; color: var(--muted); font-weight: 700; }
.provider { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .02em; color: var(--teal-600); background: var(--teal-tint); border: 1px solid color-mix(in srgb, var(--teal) 20%, transparent); padding: 3px 8px; border-radius: 7px; }
.public { font: 600 13px/1 var(--mono); color: var(--muted); text-decoration: line-through; }
.save-pill { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; background: var(--citron); color: #201c16; border-radius: var(--r-pill); padding: 4px 10px; font-weight: 900; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.save-pill svg { color: #201c16; }
.offer .meta { margin-top: 8px; color: var(--muted); font-size: 12px; font-weight: 600; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.offer .meta .g { color: var(--teal-600); font-weight: 800; }

.cta { margin-top: var(--sp-3); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 47px; border-radius: var(--r-sm); font-weight: 800; font-size: 14.5px; color: var(--teal-700); background: var(--teal-tint); border: 1.5px solid color-mix(in srgb, var(--teal) 30%, transparent); transition: background .15s var(--ease), transform .1s, color .15s; }
.cta:hover { background: var(--teal); color: #fff; } .cta:active { transform: translateY(1px); }

/* ---- Single-hotel result (dest_type=hotel) ------------------------------- */
.hotel-result { display: flex; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); }
.hr-photo { flex: 0 0 320px; width: 320px; object-fit: cover; }
.hr-body { flex: 1; min-width: 0; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.hr-body h3 { font-family: var(--display); font-size: 22px; font-weight: 700; }
.hr-spread { display: flex; gap: var(--sp-6); flex-wrap: wrap; margin-top: var(--sp-2); }
.hr-min, .hr-max { display: flex; flex-direction: column; gap: 3px; }
.hr-k { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.hr-min b { font: 800 30px/1 var(--mono); color: var(--teal-600); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hr-max b { font: 800 22px/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hr-dates { font-size: 13px; color: var(--muted); font-weight: 600; }
.hr-pct { display: inline-flex; align-self: flex-start; margin-top: 2px; font-weight: 900; font-size: 12.5px; color: var(--terra); background: var(--terra-tint); padding: 2px 9px; border-radius: var(--r-pill); }
@media (max-width: 640px) {
  .hotel-result { flex-direction: column; }
  .hr-photo { width: 100%; height: 220px; flex: none; }
}

/* ---- Multi-OTA compare (Google Hotels cross-check) ---------------------- */
.compare { margin-top: 10px; }
.compare-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; cursor: pointer; border: 1.5px dashed var(--line-2); background: transparent; color: var(--muted); border-radius: var(--r-sm); font: inherit; font-weight: 700; font-size: 13.5px; transition: color .15s var(--ease), border-color .15s var(--ease), background .15s; }
.compare-btn:hover { color: var(--teal-600); border-color: var(--teal); background: var(--teal-tint); }
.compare-btn .compare-spin { display: none; color: var(--teal); }
.compare-btn.htmx-request { opacity: .75; pointer-events: none; }
.compare-btn.htmx-request .ico { display: none; }
.compare-btn.htmx-request .compare-spin { display: inline-block; animation: spin 1s linear infinite; }

.gcompare { margin-top: 10px; padding: 12px; border-radius: var(--r-md); background: var(--paper-2); border: 1px solid var(--line); animation: pop .18s var(--ease); }
.gcompare.err { color: var(--terra); background: var(--terra-tint); border-color: color-mix(in srgb, var(--terra) 30%, var(--line)); font-size: 13px; font-weight: 600; }
.gcompare.muted { color: var(--muted); font-size: 13px; font-weight: 600; }
.gc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.gc-src { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--body); letter-spacing: .02em; }
.gc-src svg { color: var(--teal); }
.gc-save { background: var(--citron); color: #201c16; font-weight: 900; font-size: 12px; padding: 3px 9px; border-radius: var(--r-pill); font-variant-numeric: tabular-nums; }
.gc-best { color: var(--teal-600); font-weight: 800; font-size: 11.5px; }
.gc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.gc-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; }
.gc-list li.win { background: var(--citron-tint); }
.gc-vendor { font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-price { font: 800 14px/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.gc-go { font-size: 12px; font-weight: 800; color: var(--teal-600); text-decoration: none; white-space: nowrap; }
.gc-go:hover { color: var(--teal); text-decoration: underline; }
.gc-warn { margin-top: 8px; font-size: 11.5px; font-weight: 600; color: var(--terra); }
.gc-note { margin-top: 8px; font-size: 11px; color: var(--muted); }

/* ---- States ------------------------------------------------------------- */
.notice { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--muted); border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); background: var(--card); }
.notice .illus { width: 96px; height: 96px; margin: 0 auto var(--sp-4); display: grid; place-items: center; border-radius: 50%; background: var(--teal-tint); color: var(--teal); }
.notice h3 { color: var(--ink); font-family: var(--display); font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.notice p { max-width: 42ch; margin: 0 auto; }
.notice.err { border-color: color-mix(in srgb, var(--terra) 40%, var(--line)); color: var(--terra); background: var(--terra-tint); }
.notice.err .illus { background: color-mix(in srgb, var(--terra) 16%, transparent); color: var(--terra); }
.retry-btn { margin-top: var(--sp-4); display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; cursor: pointer; border: 0; border-radius: var(--r-sm); font: inherit; font-weight: 800; font-size: 14px; color: #fff; background: linear-gradient(180deg, var(--teal), var(--teal-700)); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--teal) 60%, transparent); transition: filter .15s var(--ease), transform .1s; }
.retry-btn:hover { filter: brightness(1.06); } .retry-btn:active { transform: translateY(1px); }

/* skeleton */
.htmx-indicator { display: none; } .htmx-request .htmx-indicator, .htmx-indicator.htmx-request { display: block; }
/* gentle fade so clicking search / getting results doesn't jump. opacity-only,
   and we skip .results-layout so the sticky filters column is never inside an
   animated ancestor. */
#loading.htmx-request { animation: fade .2s var(--ease); }
#results .results-head, #results .grid, #results > .notice { animation: fade .32s var(--ease); }
.sk-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.sk-card { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.sk-media { aspect-ratio: 16/10; } .sk-line { height: 12px; border-radius: 6px; margin: 12px 16px; } .sk-line.lg { height: 20px; width: 60%; } .sk-line.sm { width: 40%; }
.shimmer { background: linear-gradient(100deg, var(--paper-2) 30%, var(--line) 50%, var(--paper-2) 70%); background-size: 200% 100%; animation: shimmer 1.3s infinite linear; }
.loading-label { text-align: center; color: var(--muted); font-weight: 700; margin-bottom: var(--sp-4); display: flex; gap: 8px; align-items: center; justify-content: center; }
.spin { animation: spin 1s linear infinite; color: var(--teal); }

/* ---- Footer — newsletter is the dominant element ------------------------ */
.site-footer { margin-top: var(--sp-8); background: linear-gradient(165deg, #0f6d5d 0%, #0b4a40 58%, #072b25 100%); color: #eef3ef; }
.site-footer .wrap { padding-top: var(--sp-8); padding-bottom: var(--sp-6); }
.nl { max-width: 640px; }
.nl-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #cdd400; }
.nl h2 { font-family: var(--display); color: #fff; font-size: clamp(27px, 4.4vw, 44px); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; margin: 12px 0 0; }
.nl h2 span { color: #cdd400; }
.nl p { color: rgba(238,243,239,.72); font-size: 15px; margin: 12px 0 0; max-width: 50ch; }
.nl-form { display: flex; gap: 10px; margin-top: var(--sp-5); flex-wrap: wrap; }
.nl-field { flex: 1 1 240px; display: flex; align-items: center; gap: 9px; height: 54px; padding: 0 16px; background: rgba(255,255,255,.1); border: 1.5px solid rgba(255,255,255,.2); border-radius: var(--r-sm); transition: border-color .15s var(--ease), background .15s; }
.nl-field:focus-within { border-color: #cdd400; background: rgba(255,255,255,.14); }
.nl-field svg { color: rgba(238,243,239,.65); flex: none; }
.nl-field input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: #fff; font: inherit; outline: none; }
.nl-field input::placeholder { color: rgba(238,243,239,.5); }
.nl-cta { height: 54px; padding: 0 26px; border: 0; cursor: pointer; border-radius: var(--r-sm); font: inherit; font-weight: 800; font-size: 15px; color: #0d2b25; background: #cdd400; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: filter .15s var(--ease), transform .1s; }
.nl-cta:hover { filter: brightness(1.05); }
.nl-cta:active { transform: translateY(1px); }
.nl-result { margin-top: 12px; min-height: 1.2em; font-size: 14px; }
.nl-ok { display: inline-flex; align-items: center; gap: 8px; color: #cdd400; font-weight: 700; }
.nl-bad { color: #ffcdbe; font-weight: 600; }
.footer-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.14); }
.footer-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: #fff; font-family: var(--display); font-weight: 800; font-size: 17px; }
.footer-brand .brand-mark { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.14); box-shadow: none; }
.footer-brand .brand-mark::after { display: none; }
.footer-brand .brand-mark svg { color: #fff; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px var(--sp-4); }
.footer-nav a { color: rgba(238,243,239,.8); text-decoration: none; font-weight: 700; font-size: 14px; }
.footer-nav a:hover { color: #fff; }
.footer-legal { color: rgba(238,243,239,.55); font-size: 12.5px; }
@media (max-width: 640px) { .footer-foot { flex-direction: column; align-items: flex-start; gap: var(--sp-3); } .nl-cta { flex: 1 1 100%; justify-content: center; } }

/* ---- Homepage: inspiration (bento + carousel) --------------------------- */
.section { padding: var(--sp-6) 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.section-head h2 { font-family: var(--display); font-size: clamp(24px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.01em; }
.section-head p { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.see-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; text-decoration: none; color: var(--teal-600); white-space: nowrap; }
.see-all:hover { color: var(--teal); }

/* bento of destinations */
.bento { display: grid; gap: var(--sp-3); grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; }
.tile { position: relative; overflow: hidden; border-radius: var(--r-lg); text-decoration: none; color: #fff; background: var(--dg, linear-gradient(155deg, var(--teal), var(--teal-700))); box-shadow: var(--sh-sm); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.tile:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.tile.big { grid-column: span 2; grid-row: span 2; }
.tile.wide { grid-column: span 2; }
.tile .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.04) 20%, rgba(0,0,0,.5)); }
.tile .t-body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-4); }
.tile .t-tag { display: inline-block; background: rgba(255,255,255,.22); backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,.3); border-radius: var(--r-pill); padding: 3px 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; margin-bottom: 6px; }
.tile h3 { color: #fff; font-family: var(--display); font-weight: 800; letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(0,0,0,.35); }
.tile.big h3 { font-size: 30px; } .tile h3 { font-size: 19px; }
.tile .t-country { font-size: 12px; font-weight: 700; opacity: .92; }

/* horizontal carousel (Top deals / inspiration) */
.carousel-wrap { position: relative; }
.carousel { display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 4px 4px var(--sp-3); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.slide { scroll-snap-align: start; flex: 0 0 clamp(230px, 78vw, 288px); }
.slide .tile { display: block; aspect-ratio: 4/5; }
.carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border-radius: 50%; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); box-shadow: var(--sh-md); z-index: 5; transition: transform .12s var(--ease), color .15s; }
.carousel-nav:hover { color: var(--teal); } .carousel-nav:active { transform: translateY(-50%) scale(.92); }
.carousel-nav.prev { left: -12px; } .carousel-nav.next { right: -12px; }
.carousel-nav[hidden] { display: none; }
@media (max-width: 640px) { .carousel-nav { display: none; } .carousel-wrap { overflow-x: clip; } }

/* ---- Discover page ------------------------------------------------------ */
.dest-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); padding-bottom: var(--sp-8); }
.dest-card { position: relative; display: block; text-decoration: none; color: #fff; aspect-ratio: 3/4; border-radius: var(--r-lg); overflow: hidden; background: var(--dg, linear-gradient(155deg, var(--teal), var(--teal-700))); box-shadow: var(--sh-md); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.dest-card:hover { transform: translateY(-6px) scale(1.012); box-shadow: var(--sh-lg); }
.dest-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 18%, rgba(0,0,0,.18) 45%, rgba(0,0,0,.56)); }
.dest-body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-5); display: flex; flex-direction: column; gap: 5px; }
.dest-tag { align-self: flex-start; background: rgba(255,255,255,.22); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.32); border-radius: var(--r-pill); padding: 4px 11px; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.dest-card h3 { color: #fff; font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -.01em; text-shadow: 0 2px 14px rgba(0,0,0,.35); margin-top: 3px; }
.dest-country { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; opacity: .94; }
.dest-go { margin-top: 9px; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease); }
.dest-card:hover .dest-go, .dest-card:focus-visible .dest-go { opacity: 1; transform: none; }

/* iconic destination photo layer (the dest-* gradient stays as fallback behind) */
.tile .ph, .dest-card .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; transition: transform .55s var(--ease); }
.tile:hover .ph, .dest-card:hover .ph { transform: scale(1.05); }
.tile .scrim, .dest-scrim { z-index: 1; }
.tile .t-body, .dest-body { z-index: 2; }
.dest-landmark { font-size: 12px; font-weight: 600; font-style: italic; opacity: .92; margin-top: 1px; }

/* --- destination landing pages (SEO) --- */
.dest-page { padding-bottom: var(--sp-8); }
.crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: var(--sp-4) 0; color: var(--body); font-size: 13px; font-weight: 600; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--teal-700); }
.crumbs b { color: var(--ink); }
.dest-hero { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); box-shadow: var(--sh-sm); margin-bottom: var(--sp-6); }
.dest-hero-img { width: 100%; aspect-ratio: 16 / 6; object-fit: cover; display: block; }
.dest-hero-in { padding: var(--sp-5); }
.dest-hero-in h1 { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 4vw, 40px); line-height: 1.08; margin: 8px 0; color: var(--ink); }
.dest-hero-in > p { color: var(--body); font-size: 15px; line-height: 1.6; max-width: 62ch; margin: 0; }
.dest-price { margin: var(--sp-3) 0; color: var(--ink); font-size: 14px; font-weight: 600; display: flex; align-items: baseline; gap: 6px; }
.dest-price b { font-family: var(--display); font-size: 26px; font-weight: 600; color: var(--teal-700); }
.dest-price small { color: var(--muted); font-weight: 600; }
.dest-cta { margin-top: var(--sp-4); text-decoration: none; }
.share-btn { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font: inherit; font-weight: 700; font-size: 13.5px; color: var(--body); background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 9px 16px; transition: color .15s, border-color .15s; }
.share-btn:hover { color: var(--ink); border-color: var(--teal); }
.share-btn svg { flex: none; }
.dest-hero-in .share-btn { margin-top: var(--sp-3); margin-left: 10px; }
.dest-sec { margin: var(--sp-7) 0; }
.dest-sec h2 { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 3vw, 28px); color: var(--ink); margin-bottom: var(--sp-3); }
.dest-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; color: var(--body); line-height: 1.55; }
.dest-steps b { color: var(--ink); }
.dest-p { color: var(--body); font-size: 15px; line-height: 1.65; max-width: 68ch; margin: 0 0 var(--sp-3); }
.dest-themes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-3); }
.dest-theme-tag { display: inline-block; padding: 5px 12px; border-radius: var(--r-pill); background: var(--paper-2); border: 1px solid var(--line); color: var(--body); font-size: 12.5px; font-weight: 600; }
.dest-lm { color: var(--muted); font-size: 14px; }
.dest-faq details { border-bottom: 1px solid var(--line); padding: var(--sp-3) 0; }
.dest-faq summary { cursor: pointer; font-weight: 700; color: var(--ink); list-style: none; }
.dest-faq summary::-webkit-details-marker { display: none; }
.dest-faq summary::before { content: "+"; color: var(--teal-700); font-weight: 800; margin-right: 8px; }
.dest-faq details[open] summary::before { content: "−"; }
.dest-faq p { color: var(--muted); line-height: 1.6; margin: 8px 0 0; }

/* precomputed "from" price badge on Discover cards (deals cache) */
.dest-card .dest-price { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; flex-direction: column;
  align-items: flex-end; gap: 1px; background: rgba(20,16,10,.5); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.24); color: #fff; padding: 6px 11px; border-radius: var(--r-pill); }
.dest-card .dest-price .dp-v { font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.dest-card .dest-price b { font: 800 15px/1 var(--mono); color: var(--citron); margin-left: 2px; }
.dest-card .dest-price small { font-size: 9.5px; opacity: .78; white-space: nowrap; }

/* warm Mediterranean gradient set (shared by tiles + dest-cards) */
.dest-tropic { --dg: linear-gradient(155deg, #0e8a72, #10b981 52%, #d9e021); }
.dest-azure  { --dg: linear-gradient(155deg, #0e7c6b, #12a08a 50%, #e0a424); }
.dest-med    { --dg: linear-gradient(155deg, #0b5a4e, #12a08a 55%, #7fd3c4); }

/* ---- Discover: continent tabs + theme chips ----------------------------- */
.disc-controls { display: flex; flex-direction: column; gap: var(--sp-3); margin: var(--sp-4) auto var(--sp-5); }
.cont-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cont-tabs::-webkit-scrollbar { display: none; }
.cont-tab { flex: none; cursor: pointer; border: 1px solid var(--line-2); background: var(--card); color: var(--muted);
  font-weight: 800; font-size: 14px; padding: 9px 16px; border-radius: var(--r-pill); white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s, transform .12s var(--ease); }
.cont-tab:hover { color: var(--ink); border-color: var(--teal); }
.cont-tab.on { background: linear-gradient(180deg, var(--teal), var(--teal-700)); color: #fff; border-color: transparent;
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--teal) 60%, transparent); }
.cont-tab:active { transform: translateY(1px); }
.luxe-tab { display: inline-flex; align-items: center; gap: 6px; }
.luxe-tab-emoji { font-size: 15px; }
.luxe-tab-count { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.cont-tab.on .luxe-tab-count { background: rgba(255,255,255,.24); color: #fff; }
.theme-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.theme-chip { cursor: pointer; border: 1px solid var(--line); background: var(--paper-2); color: var(--muted);
  font-weight: 700; font-size: 12.5px; padding: 6px 13px; border-radius: var(--r-pill);
  transition: color .15s, border-color .15s, background .15s; }
.theme-chip:hover { color: var(--ink); }
.theme-chip.on { background: var(--terra-tint); color: var(--terra); border-color: var(--terra); }
.disc-card[hidden] { display: none; }     /* .dest-card display:block would defeat [hidden] */
.disc-empty { text-align: center; color: var(--muted); font-weight: 600; padding: var(--sp-8) var(--sp-4); }

/* seasonal collections — worldwide theme shortcuts */
.collections { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; margin-top: var(--sp-5); }
.collections::-webkit-scrollbar { display: none; }
.collection { flex: none; display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font-weight: 800; font-size: 14px;
  padding: 9px 16px 9px 13px; border-radius: var(--r-pill); white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s, transform .12s var(--ease), box-shadow .15s; }
.collection:hover { border-color: var(--terra); transform: translateY(-1px); }
.collection-emoji { font-size: 18px; line-height: 1; }
.collection.on { background: linear-gradient(180deg, var(--terra), #a8472e); color: #fff; border-color: transparent;
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--terra) 55%, transparent); }

/* ---- FAQ ---------------------------------------------------------------- */
.faq { padding: var(--sp-8) 0; }
.faq h2 { font-family: var(--display); font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -.01em; margin-top: 8px; }
.faq-list { margin-top: var(--sp-5); max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--line); background: var(--card); border-radius: var(--r-md); overflow: hidden; transition: border-color .15s; }
.faq-item[open] { border-color: var(--line-2); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover, .faq-item[open] summary { color: var(--teal-600); }
.faq-chevron { flex: none; color: var(--muted); transition: transform .2s var(--ease); }
.faq-item[open] .faq-chevron { transform: rotate(180deg); color: var(--teal-600); }
.faq-item p { margin: 0; padding: 0 20px 20px; color: var(--body); line-height: 1.6; max-width: 64ch; }

/* continent-tinted gradient families for the Discover cards */
.dest-eu-a { --dg: linear-gradient(155deg, #1e5f8c, #2a9d8f); }
.dest-eu-b { --dg: linear-gradient(155deg, #6d4c7d, #b56576); }
.dest-eu-c { --dg: linear-gradient(155deg, #33566e, #6b8f9c); }
.dest-af-a { --dg: linear-gradient(155deg, #c1440e, #e9a24a); }
.dest-af-b { --dg: linear-gradient(155deg, #9c6644, #d4a373); }
.dest-af-c { --dg: linear-gradient(155deg, #0e7c6b, #d9a441); }
.dest-as-a { --dg: linear-gradient(155deg, #3a1c71, #d76d77); }
.dest-as-b { --dg: linear-gradient(155deg, #0b6e4f, #12b886); }
.dest-as-c { --dg: linear-gradient(155deg, #b91d1d, #f08c00); }
.dest-oc-a { --dg: linear-gradient(155deg, #0891b2, #06b6a4); }
.dest-oc-b { --dg: linear-gradient(155deg, #0e9488, #a3e635); }
.dest-oc-c { --dg: linear-gradient(155deg, #e5556e, #f59e8b); }
.dest-na-a { --dg: linear-gradient(155deg, #4338ca, #7c3aed); }
.dest-na-b { --dg: linear-gradient(155deg, #334e68, #5b8fb0); }
.dest-na-c { --dg: linear-gradient(155deg, #b1122e, #f0641e); }
.dest-la-a { --dg: linear-gradient(155deg, #e8590c, #d6336c); }
.dest-la-b { --dg: linear-gradient(155deg, #2f9e44, #66a80f); }
.dest-la-c { --dg: linear-gradient(155deg, #f08c00, #e03131); }
.dest-santo  { --dg: linear-gradient(155deg, #0e6f7c, #22b3c0 55%, #f4f0e6); }
.dest-terra  { --dg: linear-gradient(155deg, #9a3412, #c4573a 50%, #e0a424); }
.dest-turq   { --dg: linear-gradient(155deg, #0d6e6a, #1fbfae 55%, #0b8f7a); }
.dest-sun    { --dg: linear-gradient(155deg, #e0a424, #e08153 45%, #0e7c6b); }
.dest-greek  { --dg: linear-gradient(155deg, #0b5a68, #12a08a 55%, #22c3b3); }
.dest-ochre  { --dg: linear-gradient(155deg, #b45309, #e0a424 50%, #0e7c6b); }
.dest-sea    { --dg: linear-gradient(155deg, #08483c, #0e7c6b 55%, #34b39b); }
.dest-honey  { --dg: linear-gradient(155deg, #a16207, #e0a424 50%, #0b6455); }
.dest-volcano{ --dg: linear-gradient(155deg, #7f1d1d, #c4573a 45%, #0e7c6b); }

/* ---- Motion ------------------------------------------------------------- */
/* ---- Toasts ------------------------------------------------------------- */
.toast-host { position: fixed; left: 0; right: 0; bottom: 20px; z-index: 200; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { background: var(--ink); color: var(--paper); font-weight: 700; font-size: 13.5px; padding: 10px 16px; border-radius: var(--r-pill); box-shadow: var(--sh-lg); opacity: 0; transform: translateY(10px); transition: opacity .25s var(--ease), transform .25s var(--ease); max-width: 90vw; }
.toast.in { opacity: 1; transform: none; }

/* Cookie consent banner (RGPD) — gates the Travelpayouts Drive script. */
.consent { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 300;
  width: min(680px, calc(100% - 24px)); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 15px 18px; display: flex;
  align-items: center; gap: 16px; flex-wrap: wrap; animation: pop .28s var(--ease); }
.consent p { margin: 0; flex: 1; min-width: 220px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.consent-actions { display: flex; gap: 8px; margin-left: auto; }
.consent button { cursor: pointer; font: inherit; font-weight: 700; font-size: 13px; padding: 9px 18px;
  border-radius: var(--r-pill); border: 1px solid var(--line-2); transition: filter .15s, color .15s, border-color .15s; }
.consent-no { background: transparent; color: var(--muted); }
.consent-no:hover { color: var(--ink); border-color: var(--muted); }
.consent-yes { background: linear-gradient(180deg, var(--teal), var(--teal-700)); color: #fff; border-color: transparent; }
.consent-yes:hover { filter: brightness(1.06); }
/* don't let the consent bar cover the mobile filter bottom-sheet */
body.sheet-open .consent { display: none; }
/* comfortable touch targets on touch devices (~44px, WCAG) */
@media (pointer: coarse) {
  .lang a { padding: 9px 11px; }
  .stepper button { width: 44px; height: 44px; }
  .sheet-close { width: 44px; height: 44px; }
}

/* ---- Favorites: heart icon button in the header + count badge ------------ */
.fav-btn { position: relative; width: 42px; height: 42px; flex: none; display: grid; place-items: center;
  cursor: pointer; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  transition: border-color .15s var(--ease), color .15s, transform .12s var(--ease); }
.fav-btn:hover { border-color: var(--terra); color: var(--terra); }
.fav-btn:active { transform: scale(.94); }
.fav-btn.active { color: var(--terra); border-color: color-mix(in srgb, var(--terra) 42%, var(--line)); }
.fav-btn.active svg { fill: color-mix(in srgb, var(--terra) 16%, transparent); }
.fav-link-count {
  position: absolute; top: -3px; right: -3px;
  min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center;
  border-radius: var(--r-pill); background: var(--terra); color: #fff; box-shadow: 0 0 0 2px var(--card);
  font: 800 10px/1 var(--mono); font-variant-numeric: tabular-nums;
}
.fav-link-count[hidden] { display: none; }   /* the class's display: grid would otherwise defeat [hidden] */

/* ---- Favorites page (/favoris) ------------------------------------------ */
.fav-toolbar { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); flex-wrap: wrap; }
.fav-toolbar[hidden] { display: none; }
.fav-saved { font: 800 13px/1 var(--mono); color: var(--teal-600); background: var(--teal-tint);
  border-radius: var(--r-pill); padding: 8px 14px; }
.fav-clear-all { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; border: 1px solid var(--line-2);
  background: var(--card); color: var(--muted); font-weight: 700; font-size: 13px; padding: 7px 14px;
  border-radius: var(--r-pill); transition: color .15s, border-color .15s; }
.fav-clear-all:hover { color: var(--terra); border-color: var(--terra); }

.fav-page { padding-bottom: var(--sp-8); }
.fav-collection { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-5); }
.fav-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s; }
.fav-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--line-2); }
.fav-card-media { position: relative; aspect-ratio: 16 / 10; background: var(--paper-2); }
.fav-card-media img, .fav-card-noimg { width: 100%; height: 100%; object-fit: cover; display: block; }
.fav-card-noimg { background: linear-gradient(135deg, var(--paper-2), var(--teal-tint)); }
.fav-card-remove { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: grid; place-items: center;
  cursor: pointer; border: 0; border-radius: 50%; background: rgba(20,16,10,.5); color: #fff; backdrop-filter: blur(4px);
  transition: background .15s; }
.fav-card-remove:hover { background: var(--terra); }
.fav-card-stars { position: absolute; left: 10px; bottom: 10px; font-size: 12px; letter-spacing: 1px; color: #ffd36b;
  text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.fav-card-body { display: flex; flex-direction: column; gap: 3px; padding: var(--sp-4); flex: 1; }
.fav-card-body h3 { font-family: var(--display); font-size: 17px; font-weight: 800; line-height: 1.2; color: var(--ink); }
.fav-card-city { font-size: 13px; color: var(--muted); }
.fav-card-dates { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fav-card-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: var(--sp-3); }
.fav-card-price { font: 800 17px/1 var(--mono); color: var(--teal-700); font-variant-numeric: tabular-nums; }
.fav-card-cta { font-size: 13px; font-weight: 800; color: var(--teal-600); text-decoration: none; white-space: nowrap; }
.fav-card-cta:hover { color: var(--teal); }

.fav-empty-state { text-align: center; max-width: 420px; margin: 0 auto; padding: var(--sp-8) var(--sp-4); }
.fav-empty-mark { width: 76px; height: 76px; margin: 0 auto var(--sp-4); display: grid; place-items: center;
  border-radius: 50%; background: var(--teal-tint); color: var(--teal); }
.fav-empty-state h2 { font-family: var(--display); font-size: 24px; font-weight: 800; margin-bottom: 8px; }
.fav-empty-state p { color: var(--muted); line-height: 1.55; margin-bottom: var(--sp-5); }
.fav-empty-cta { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 800; font-size: 15px;
  color: #fff; background: linear-gradient(180deg, var(--teal), var(--teal-700)); padding: 12px 22px; border-radius: var(--r-pill);
  box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--teal) 60%, transparent); transition: filter .15s, transform .12s; }
.fav-empty-cta:hover { filter: brightness(1.05); } .fav-empty-cta:active { transform: translateY(1px); }

@media (max-width: 480px) {
  .fav-collection { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .fav-card-body { padding: var(--sp-3); }
  .fav-card-body h3 { font-size: 15px; }
}

@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* scroll-reveal (progressive enhancement, only when JS present) */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
  .results-layout { grid-template-columns: 1fr; }
  .filters-trigger { display: inline-flex; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile.big { grid-column: span 2; grid-row: span 1; }

  /* filters -> bottom sheet */
  .filters {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 80;
    border-radius: var(--r-xl) var(--r-xl) 0 0; border: 0; box-shadow: var(--sh-lg);
    transform: translateY(102%); transition: transform .3s var(--ease); max-height: 82vh; overflow: auto;
  }
  body.sheet-open .filters { transform: none; }
  .filters { overflow-x: hidden; overscroll-behavior: contain; padding-bottom: var(--sp-8); }
  body.sheet-open .sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 75; background: rgba(20,16,10,.4); backdrop-filter: blur(2px); }
  /* keep the title + close reachable while the (now taller) filter list scrolls */
  .filters-sheet-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 3; background: var(--card); padding: 2px 0 var(--sp-3); margin: 0 0 var(--sp-2); }
  .filters > .ctl:first-of-type, .filters > form:first-of-type { padding-top: 0; }
  .sheet-close { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--paper-2); color: var(--ink); cursor: pointer; }
}
/* nav collapses into a hamburger dropdown before the inline links would crowd
   the centered logo (measured min inline width to avoid overlap ~1033px) */
@media (max-width: 1080px) {
  .nav-toggle { display: grid; }
  .nav-side { position: relative; }
  .nav {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 90; min-width: 210px;
    flex-direction: column; gap: 2px; align-items: stretch;
    background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md);
    padding: 8px; box-shadow: var(--sh-lg);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  }
  .site-header.nav-open .nav { opacity: 1; visibility: visible; transform: none; }
  .nav a { padding: 11px 12px; border-radius: var(--r-sm); font-size: 15px; }
  .nav a:hover, .nav a.active { background: var(--paper-2); color: var(--ink); }
  .nav a.active { color: var(--teal-600); }
  .nav a.active::after { display: none; }
}
@media (max-width: 900px) {
  .fields { grid-template-columns: 1fr 1fr; } .fields .dest-field { grid-column: 1 / -1; }
  /* the search form is tall on touch — don't pin it, or it covers the first
     results after the post-search scroll. Leave room for the sticky header. */
  .search { position: static; top: auto; }
  .results-head { scroll-margin-top: 74px; }
  .hiw { display: none; }
}
@media (max-width: 620px) {
  .wrap { padding: 0 var(--sp-4); }
  .search { padding: var(--sp-4); top: 66px; }
  .fields { grid-template-columns: 1fr; }
  .actions { flex-direction: column; align-items: stretch; }
  .stars-seg { justify-content: space-between; } .stars-seg label { flex: 1; }
  .btn-search { width: 100%; justify-content: center; }
  .occ-pop { left: auto; right: 0; }
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 128px; }
  /* header: hamburger | logo mark | controls (right). The wordmark is dropped
     so the mark never collides with the favourites + FR/EN + theme controls. */
  .topbar { grid-template-columns: auto auto 1fr; column-gap: var(--sp-2); }
  .brand { justify-self: start; gap: 8px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .brand b { display: none; }
  .cur { display: none; }                  /* currency switch off on the smallest screens */
}
@media (max-width: 460px) {
  .nav a { font-size: 14px; }
  .theme-toggle { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .card:hover, .tile:hover, .dest-card:hover { transform: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ===========================================================================
   Hotel detail page (/hotel/<cc>/<slug>) — rooms · facilities · location · compare
   ========================================================================== */
.hp { padding: var(--sp-5) 0 var(--sp-8); }
.hp-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-weight: 700; font-size: 14px; padding: 6px 0; transition: color .15s var(--ease); }
.hp-back:hover { color: var(--teal-600); }

.hp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin: var(--sp-2) 0 var(--sp-4); }
.hp-head h1 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(25px, 4vw, 39px); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.hp-loc { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 8px; color: var(--body); font-weight: 600; font-size: 14.5px; }
.hp-loc svg { color: var(--terra); }
.hp-map { color: var(--teal-600); text-decoration: none; font-weight: 700; border-bottom: 1.5px solid var(--teal-tint); }
.hp-map:hover { border-color: var(--teal); }
.hp-rating { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; }
.hp-rating-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; padding: 5px 9px; background: var(--teal); color: #fff; border-radius: var(--r-pill); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.hp-rating-count { color: var(--muted); font-weight: 600; font-size: 13.5px; }
.watch { margin-top: var(--sp-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--sh-sm); }
.watch-head { display: flex; align-items: center; gap: 7px; }
.watch-head h3 { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); margin: 0; }
.help-wrap { position: relative; display: inline-flex; }
.help { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--line-2); background: var(--paper-2); color: var(--muted); font-weight: 700; font-size: 11px; cursor: help; display: grid; place-items: center; padding: 0; }
.help-tip { position: absolute; left: 0; top: 26px; z-index: 5; width: 232px; background: var(--ink); color: var(--paper); font-size: 12.5px; line-height: 1.5; border-radius: 10px; padding: 10px 12px; box-shadow: var(--sh-sm); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s; }
.help-wrap:hover .help-tip, .help:focus + .help-tip { opacity: 1; visibility: visible; transform: translateY(0); }
.watch-dates { color: var(--muted); font-size: 13px; font-weight: 600; margin: 6px 0 12px; }
.watch-form { display: flex; gap: 8px; }
.watch-form input[type=email] { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font: inherit; }
.watch-form button { border: 0; background: var(--teal); color: #fff; font-weight: 700; padding: 10px 18px; border-radius: var(--r-pill); cursor: pointer; }
.watch-form button:hover { background: var(--teal-600); }
.hp-stay { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-pill); color: var(--body); font-weight: 700; font-size: 13.5px; white-space: nowrap; box-shadow: var(--sh-sm); }
.hp-stay svg { color: var(--teal); }

/* gallery: hero + 2x2 grid, collapses to a scroll strip on mobile.
   The row height is set via grid-template-rows (a bare `height` lets the
   auto-sized grid row expand to the intrinsic image height and overflow).
   Each cell is clickable → opens the full-screen photo viewer. */
.hp-gallery { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: min(54vh, 440px); gap: 8px; margin-bottom: var(--sp-5); overflow: hidden; border-radius: var(--r-md); }
.hp-gallery[data-count="1"] { grid-template-columns: 1fr; }
.hp-g-cell { position: relative; min-height: 0; overflow: hidden; border-radius: var(--r-sm); background: var(--paper-2); cursor: zoom-in; padding: 0; border: 0; }
.hp-g-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--ease); }
.hp-g-cell:hover img { transform: scale(1.04); }
.hp-g-cell:focus-visible { outline: 2.5px solid var(--ring); outline-offset: 2px; }
.hp-g-main { height: 100%; }
.hp-g-rest { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; min-height: 0; }
.hp-g-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, .55); color: #fff; font-weight: 800; font-size: clamp(18px, 2.4vw, 26px); letter-spacing: .02em; }

.hp-highlights { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--sp-5); }
.hp-hl { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; background: var(--teal-tint); color: var(--teal-700); border-radius: var(--r-pill); font-weight: 700; font-size: 13px; }
.hp-hl svg { color: var(--teal); }

.hp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: var(--sp-6); align-items: start; }
.hp-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-6); }
.hp-section h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 22px; color: var(--ink); margin: 0 0 var(--sp-4); display: flex; align-items: center; gap: 10px; }
.hp-count { font-family: inherit; font-size: 13px; font-weight: 700; color: var(--teal-700); background: var(--teal-tint); border-radius: var(--r-pill); padding: 2px 10px; }

/* rooms */
.hp-rooms { display: flex; flex-direction: column; gap: var(--sp-3); }
.hp-room { display: grid; grid-template-columns: 148px 1fr; gap: var(--sp-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-sm); }
.hp-room-img { width: 148px; height: 100%; min-height: 120px; object-fit: cover; background: var(--paper-2); }
.hp-room-img.noimg { display: block; }
.hp-room-body { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.hp-room-body h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ink); }
.hp-room-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-room-meta span { font-size: 12.5px; font-weight: 700; color: var(--body); background: var(--paper-2); border-radius: var(--r-xs); padding: 3px 9px; }
.hp-room-body p { margin: 2px 0 0; color: var(--body); font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* facilities */
.hp-fac-grid, .hp-place-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--sp-4) var(--sp-5); }
.hp-fgroup h4, .hp-pgroup h4 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--teal-700); }
.hp-fgroup ul, .hp-pgroup ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.hp-fgroup li { position: relative; padding-left: 18px; color: var(--body); font-size: 13.5px; line-height: 1.4; }
.hp-fgroup li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.hp-langs { margin: var(--sp-4) 0 0; color: var(--muted); font-size: 13px; font-weight: 600; }

/* location / surroundings */
.hp-pgroup li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.hp-p-name { color: var(--body); font-size: 13.5px; font-weight: 600; min-width: 0; }
.hp-p-dist { color: var(--muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

.hp-empty { text-align: center; padding: var(--sp-6); color: var(--muted); border: 1.5px dashed var(--line-2); border-radius: var(--r-md); background: var(--card); font-weight: 600; }

/* aside: price + reserve + compare (sticky) */
.hp-aside { position: sticky; top: 92px; }
.hp-book { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-md); display: flex; flex-direction: column; gap: var(--sp-3); }
.hp-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hp-price-from { color: var(--muted); font-weight: 700; font-size: 14px; }
.hp-price-val { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 30px; color: var(--ink); font-variant-numeric: tabular-nums; }
.hp-price-stay { color: var(--muted); font-weight: 600; font-size: 13px; }
/* buy box "calculating the best price" state, then the resolved source line */
.hp-price-checking { flex-basis: 100%; display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--teal-700); font-weight: 700; font-size: 12.5px; }
.hp-price-checking .spin { animation: spin .9s linear infinite; flex-shrink: 0; }
.hp-book-checking .hp-price-val { animation: price-pulse 1.1s ease-in-out infinite; }
@keyframes price-pulse { 0%, 100% { opacity: .4; } 50% { opacity: .85; } }
@keyframes price-reveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.hp-book:not(.hp-book-checking) .hp-price-val { animation: price-reveal .35s var(--ease); }
.hp-price-src { flex-basis: 100%; margin-top: 2px; color: var(--muted); font-weight: 600; font-size: 12.5px; }
.hp-saved { color: var(--teal-700); font-weight: 800; }
.hp-reserve { margin-top: 4px; height: 50px; color: #fff; background: linear-gradient(180deg, var(--teal), var(--teal-700)); border: 0; box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--teal) 62%, transparent); }
.hp-reserve:hover { color: #fff; filter: brightness(1.06); }
.hp-compare { margin-top: 2px; }
.hp-compare-btn { border-style: solid; border-color: color-mix(in srgb, var(--citron-deep) 55%, var(--line-2)); color: var(--ink); font-size: 14px; height: 46px; }
.hp-compare-btn:hover { color: var(--ink); border-color: var(--citron-deep); background: var(--citron-tint); }
.hp-compare-btn .compare-spin { color: var(--citron-deep); }
.hp-compare-hint { margin: 8px 2px 0; color: var(--muted); font-size: 12px; line-height: 1.4; }

@media (max-width: 900px) {
  .hp-grid { display: flex; flex-direction: column; }
  .hp-aside { position: static; order: -1; }
  .hp-book { flex-direction: column; }
}
@media (max-width: 640px) {
  .hp-gallery { display: flex; grid-template-rows: none; overflow-x: auto; height: 240px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .hp-gallery::-webkit-scrollbar { display: none; }
  .hp-g-rest { display: contents; }               /* cells join the horizontal strip */
  .hp-gallery .hp-g-cell { flex: 0 0 82%; height: 100%; scroll-snap-align: start; }
  .hp-room { grid-template-columns: 108px 1fr; }
  .hp-room-img { width: 108px; }
  .hp-head h1 { font-size: 25px; }
}

/* ---- hotel: embedded map + full-screen photo viewer --------------------- */
.hp-map-wrap { position: relative; margin-bottom: var(--sp-5); }
.hp-map-frame { width: 100%; height: 300px; border: 1px solid var(--line-2); border-radius: var(--r-md); display: block; }
.hp-map-link { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; background: var(--card); color: var(--teal-700); border: 1px solid var(--line-2); border-radius: var(--r-pill); padding: 8px 13px; font-weight: 700; font-size: 12.5px; text-decoration: none; box-shadow: var(--sh-sm); }
.hp-map-link:hover { border-color: var(--teal); }

.hp-room-img.lb-open { cursor: zoom-in; }

.lb { position: fixed; inset: 0; z-index: 200; background: rgba(10, 8, 6, .93); display: none; align-items: center; justify-content: center; animation: fade .15s var(--ease); }
.lb.open { display: flex; }
.lb-stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--r-sm); box-shadow: 0 24px 70px rgba(0, 0, 0, .55); user-select: none; -webkit-user-drag: none; }
.lb-btn { position: absolute; background: rgba(255, 255, 255, .13); border: 0; color: #fff; cursor: pointer; display: grid; place-items: center; border-radius: 50%; width: 48px; height: 48px; transition: background .15s var(--ease); }
.lb-btn:hover { background: rgba(255, 255, 255, .26); }
.lb-btn:disabled { opacity: .3; cursor: default; }
.lb-prev { left: 3vw; top: 50%; transform: translateY(-50%); }
.lb-next { right: 3vw; top: 50%; transform: translateY(-50%); }
.lb-close { top: 3vh; right: 3vw; width: 44px; height: 44px; }
.lb-count { position: absolute; bottom: 3vh; left: 50%; transform: translateX(-50%); color: #fff; font-weight: 700; font-size: 13px; background: rgba(0, 0, 0, .45); padding: 6px 14px; border-radius: var(--r-pill); font-variant-numeric: tabular-nums; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@media (max-width: 640px) {
  .lb-prev { left: 2vw; } .lb-next { right: 2vw; }
  .lb-btn { width: 42px; height: 42px; }
  .lb-stage { padding: 8vh 3vw; }
}

/* ---- search filters: instant chips + server-side refine -------------------- */
.search-hint { color: var(--muted); font-size: 13px; font-weight: 600; margin: 0; align-self: center; }
/* trust strip under the search form — reinforce value at the decision point */
.trust { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px var(--sp-5); color: var(--body); font-size: 13px; font-weight: 600; }
.trust li { display: inline-flex; align-items: center; gap: 7px; }
.trust .dot-live { flex: none; }

.type-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: var(--terra); color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .02em; padding: 5px 10px; border-radius: var(--r-pill); box-shadow: var(--sh-sm); }
.card .best + .type-badge { top: 46px; }

.chips-filter { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-f { display: inline-flex; align-items: center; gap: 4px; padding: 7px 13px; border: 1.5px solid var(--line-2); background: var(--card); color: var(--body); border-radius: var(--r-pill); font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: border-color .15s var(--ease), background .15s, color .15s; }
.chip-f svg { color: var(--star); }
.chip-f:hover { border-color: var(--teal); }
.chip-f.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.chip-f.on svg { color: #fff; }

.refine { border-top: 1px dashed var(--line-2); padding-top: var(--sp-4); margin-top: 2px; }
.refine-hint { color: var(--muted); font-weight: 600; font-size: 11px; }
.refine-list { display: flex; flex-direction: column; gap: 2px; }
.refine-opt { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: var(--r-sm); cursor: pointer; transition: background .12s; }
.refine-opt:hover { background: var(--paper-2); }
.refine-opt input { accent-color: var(--teal); width: 16px; height: 16px; cursor: pointer; flex: none; }
.refine-opt span { flex: 1; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.refine-opt small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.refine.htmx-request { opacity: .5; pointer-events: none; }

/* star chips are checkboxes in the refine form (re-run on toggle) */
.star-chip { position: relative; }
.star-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-chip:has(input:checked) { background: var(--teal); border-color: var(--teal); color: #fff; }
.star-chip:has(input:checked) svg { color: #fff; }
.star-chip:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---- bons plans (luxury board) + comment ça marche ----------------------- */
.luxe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--sp-4); margin: var(--sp-5) 0 var(--sp-8); }
.luxe-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.luxe-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.luxe-media { position: relative; display: block; aspect-ratio: 16/10; background: var(--paper-2); overflow: hidden; }
.luxe-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.luxe-card:hover .luxe-media img { transform: scale(1.05); }
.luxe-media .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 35%, transparent 65%, rgba(0,0,0,.35)); }
.luxe-loc { display: flex; align-items: center; gap: 5px; margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.luxe-loc svg { flex-shrink: 0; color: var(--teal-700); }
.luxe-score { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; background: var(--teal); color: #fff; font-weight: 800; font-size: 13px; padding: 5px 10px; border-radius: var(--r-pill); box-shadow: var(--sh-sm); }
.luxe-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.luxe-body h3 { margin: 0; font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.2; }
.luxe-body h3 a { color: var(--ink); text-decoration: none; }
.luxe-body h3 a:hover { color: var(--teal-700); }
.luxe-body .stars-row { color: var(--star); }
.luxe-price { display: flex; align-items: baseline; gap: 8px; margin-top: auto; padding-top: var(--sp-2); }
.luxe-amount { font-size: 14px; color: var(--muted); font-weight: 700; }
.luxe-amount b { font-family: var(--display); font-size: 23px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.luxe-dates { display: flex; align-items: center; gap: 5px; margin: 0; color: var(--muted); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.luxe-dates svg { flex-shrink: 0; opacity: .75; }
.luxe-nights { font-weight: 500; opacity: .85; }
.luxe-body .cta { margin-top: 2px; }
.luxe-empty { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--muted); border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); margin: var(--sp-5) 0; }
.luxe-cities { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: var(--sp-4); }
.luxe-cities span { background: var(--paper-2); border-radius: var(--r-pill); padding: 6px 13px; font-size: 13px; font-weight: 700; color: var(--body); }

.steps { list-style: none; margin: var(--sp-6) 0 var(--sp-5); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
.step { display: flex; gap: var(--sp-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); }
.step-n { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--teal-tint); color: var(--teal-700); font-family: var(--display); font-weight: 700; font-size: 21px; }
.step h3 { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--ink); }
.step p { margin: 0; color: var(--body); font-size: 14px; line-height: 1.5; }
.how-cta-row { display: flex; justify-content: center; margin: 0 0 var(--sp-6); }
.how-faq { padding-top: 0; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

.hiw-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 12px; color: var(--teal-700); font-weight: 700; font-size: 13px; text-decoration: none; }
.hiw-more:hover { color: var(--teal); }

/* ---- guides (index + article) -------------------------------------------- */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); margin: var(--sp-5) 0 var(--sp-8); }
.guide-card { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); text-decoration: none; box-shadow: var(--sh-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .15s; }
.guide-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--line-2); }
.guide-emoji { font-size: 30px; line-height: 1; }
.guide-emoji.big { font-size: 44px; }
.guide-card h3 { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--ink); }
.guide-card p { margin: 0; color: var(--body); font-size: 14px; line-height: 1.5; flex: 1; }
.guide-meta { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.guide-card .guide-meta b { color: var(--teal-700); display: inline-flex; align-items: center; gap: 4px; }

.guide-article { padding: var(--sp-5) 0 var(--sp-8); max-width: 760px; }
.guide-head { margin: var(--sp-4) 0 var(--sp-5); }
.guide-head h1 { font-family: var(--display); font-weight: 600; font-size: clamp(27px, 4.5vw, 40px); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); margin: 10px 0 8px; }
.guide-intro { font-size: 18px; line-height: 1.6; color: var(--body); margin: 0 0 var(--sp-5); }
.guide-section { margin: var(--sp-5) 0; }
.guide-section h2 { font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--ink); margin: 0 0 8px; }
.guide-section p { color: var(--body); font-size: 15.5px; line-height: 1.7; margin: 0; }
.guide-cta { text-align: center; background: var(--teal-tint); border: 1px solid color-mix(in srgb, var(--teal) 22%, transparent); border-radius: var(--r-lg); padding: var(--sp-6); margin: var(--sp-6) 0 var(--sp-8); }
.guide-cta h3 { font-family: var(--display); font-weight: 600; font-size: 24px; color: var(--teal-700); margin: 0 0 var(--sp-4); }

/* ---- price alerts page --------------------------------------------------- */
.al-wrap { max-width: 720px; margin: 0 auto; padding-bottom: var(--sp-8); }
.al-form { display: grid; grid-template-columns: 1.5fr 1.2fr auto; gap: var(--sp-3); align-items: end; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); }
.al-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.al-field > span { font-size: 11.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.al-field select, .al-field input { width: 100%; border: 0; background: transparent; font: inherit; font-weight: 600; color: var(--ink); outline: none; text-overflow: ellipsis; }
.al-cta { height: 52px; }
.al-result { margin-top: var(--sp-4); }
.al-note { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-radius: var(--r-md); font-weight: 700; font-size: 14px; }
.al-note.ok { background: var(--teal-tint); color: var(--teal-700); }
.al-note.err { background: var(--terra-tint); color: var(--terra); }
.al-note.muted { background: var(--paper-2); color: var(--muted); font-weight: 600; margin-top: 8px; }
@media (max-width: 620px) { .al-form { grid-template-columns: 1fr; } }

/* per-week price bar chart (lazy-loaded on the hotel page) */
.weekbars { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm); }
.weekbars-head { margin-bottom: var(--sp-4); }
.weekbars h2 { font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--ink); margin: 0; }
.weekbars-lead { margin: 5px 0 0; color: var(--muted); font-size: 13.5px; font-weight: 600; }
/* horizontal bars — scaled across [min,max] so small gaps stay visible; the real
   prices are always labelled, the bar only ranks the weeks. */
.weekbars-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.weekrow { display: grid; grid-template-columns: 122px 1fr auto; align-items: center; gap: 14px; }
.weekrow-date { font-size: 13px; font-weight: 700; color: var(--body); white-space: nowrap; }
.weekrow-track { height: 24px; background: var(--paper-2); border-radius: var(--r-pill); overflow: hidden; }
.weekrow-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--line-2); transition: width .55s var(--ease); }
.weekrow-price { display: inline-flex; align-items: baseline; gap: 8px; justify-self: end; font: 800 14.5px/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.weekrow-price em { font: 800 9.5px/1 var(--font); font-style: normal; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: var(--teal); padding: 3px 7px; border-radius: var(--r-pill); }
.weekrow.is-cheapest .weekrow-fill { background: linear-gradient(90deg, var(--teal-600), var(--teal)); }
.weekrow.is-cheapest .weekrow-price { color: var(--teal-700); }
.weekrow.is-priciest .weekrow-fill { background: color-mix(in srgb, var(--terra) 36%, var(--line-2)); }
@media (max-width: 560px) {
  /* stack: date + price on top, the bar full-width below — never overflows */
  .weekrow { grid-template-columns: 1fr auto; grid-template-areas: "date price" "bar bar"; gap: 7px 10px; }
  .weekrow-date { grid-area: date; font-size: 12.5px; }
  .weekrow-price { grid-area: price; font-size: 13.5px; gap: 7px; }
  .weekrow-price em { font-size: 9px; padding: 2px 6px; }
  .weekrow-track { grid-area: bar; }
}
.weekbars-loading { text-align: center; padding: var(--sp-6); color: var(--muted); font-weight: 600; }

/* luxury board grouped by continent */
.luxe-section { margin-bottom: var(--sp-6); }
.luxe-cont { font-family: var(--display); font-weight: 600; font-size: 24px; color: var(--ink); margin: var(--sp-5) 0 var(--sp-4); padding-bottom: 8px; border-bottom: 2px solid var(--line); }
.luxe-theme-emoji { font-size: 20px; margin-right: 4px; }
.luxe-section .luxe-grid { margin: 0; }

/* Monthly-price chart on destination pages */
.mp { margin: 0 0 18px }
.mp-callout { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 0 0 14px }
.mp-cheap { font-weight: 800; color: var(--teal); font-size: 1.05rem }
.mp-price { font-weight: 700 }
.mp-save { font-size: .82rem; font-weight: 700; color: var(--teal);
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  padding: 3px 9px; border-radius: var(--r-pill) }
.mp-chart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  align-items: end; gap: 4px; height: 132px; margin: 4px 0 12px;
  padding-top: 16px; border-bottom: 1px solid var(--line) }
.mp-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%; gap: 4px; min-width: 0 }
.mp-v { font-size: .6rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap }
.mp-bar { width: 60%; max-width: 22px; border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--teal) 26%, transparent); min-height: 3px }
.mp-col.is-min .mp-bar { background: var(--teal) }
.mp-col.is-max .mp-bar { background: color-mix(in srgb, var(--teal) 45%, transparent) }
.mp-col.is-min .mp-v { color: var(--teal); font-weight: 800 }
.mp-m { font-size: .58rem; color: var(--muted); white-space: nowrap }
.mp-sentence { margin: 0 0 6px }
.mp-note { font-size: .78rem; color: var(--muted); margin: 0 0 4px }
@media (max-width: 460px) { .mp-v { display: none } .mp-chart { height: 110px } }

/* Multi-month week chart (hotel page) */
.wk-scroll { overflow-x: auto; margin: 4px 0 12px; padding-bottom: 4px; }
.wk-chart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(34px, 1fr);
  align-items: end; gap: 5px; height: 150px; min-width: 100%; padding-top: 18px;
  border-bottom: 1px solid var(--line); }
.wk-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 100%; gap: 4px; min-width: 0; text-decoration: none; color: inherit;
  border-radius: 8px; padding: 2px 1px; transition: background .12s var(--ease); }
.wk-col:hover, .wk-col:focus-visible { background: color-mix(in srgb, var(--teal) 8%, transparent); outline: none; }
.wk-v { font-size: .62rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wk-bar { width: 62%; max-width: 26px; border-radius: 5px 5px 0 0; min-height: 4px;
  background: color-mix(in srgb, var(--teal) 24%, transparent); }
.wk-col.is-min .wk-bar { background: var(--teal); }
.wk-col.is-max .wk-bar { background: color-mix(in srgb, var(--teal) 44%, transparent); }
.wk-col.is-min .wk-v { color: var(--teal); font-weight: 800; }
.wk-d { font-size: .58rem; color: var(--muted); white-space: nowrap; }
.wk-add { margin-top: 2px; height: 40px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1.5px solid color-mix(in srgb, var(--teal) 32%, transparent); background: var(--teal-tint);
  color: var(--teal-700); font: inherit; font-weight: 800; font-size: 13.5px; cursor: pointer;
  transition: background .12s var(--ease); }
.wk-add:hover { background: color-mix(in srgb, var(--teal) 16%, transparent); }

/* Seasonal 'ou-partir' pages */
.partir-page { padding-bottom: var(--sp-8); }
.partir-hero { margin: var(--sp-4) 0 var(--sp-5); }
.partir-hero h1 { margin: 0 0 8px; }
.partir-intro { color: var(--body); max-width: 60ch; margin: 0; line-height: 1.6; }
.month-nav { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin: 0 0 var(--sp-5); }
.month-nav a { text-decoration: none; font-weight: 700; font-size: 14px; color: var(--teal-700);
  background: var(--teal-tint); border: 1.5px solid color-mix(in srgb, var(--teal) 26%, transparent);
  padding: 7px 14px; border-radius: var(--r-pill); transition: background .12s var(--ease); }
.month-nav a:hover { background: color-mix(in srgb, var(--teal) 16%, transparent); }
.dest-price-tag { display: inline-block; margin-top: 6px; font-weight: 800; font-size: 13px;
  color: #fff; background: color-mix(in srgb, var(--teal) 82%, black 6%); padding: 3px 10px;
  border-radius: var(--r-pill); align-self: flex-start; }
.season-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3); }
.season-tile { display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: var(--sp-4); transition: border-color .12s var(--ease), transform .1s var(--ease); }
.season-tile:hover { border-color: color-mix(in srgb, var(--teal) 45%, var(--line-2));
  transform: translateY(-2px); }
.season-name { font-family: var(--display); font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.season-teaser { font-size: 12.5px; color: var(--muted); }

.hub-section { margin: var(--sp-6) 0 var(--sp-3); font-size: 1.25rem; }

.search-mode { display: inline-flex; gap: 2px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; }
.mode-opt { border: 0; background: transparent; color: var(--ink); padding: 6px 14px; border-radius: var(--r-pill); font: inherit; cursor: pointer; }
.mode-opt.on { background: var(--teal); color: #fff; }
.mode-opt:disabled { opacity: .45; cursor: not-allowed; }
.rat-msg { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }

.rat-layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--sp-4); align-items: start; }
.rat-filters {
  position: sticky; top: var(--sp-4);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-4); box-shadow: var(--sh-sm);
}
/* Mobile: single column + the filter panel must NOT stay sticky (it would overlap
   the composition list scrolling underneath). Declared AFTER the base rule so it
   wins on source order. */
@media (max-width: 780px) {
  .rat-layout { grid-template-columns: 1fr; }
  .rat-filters { position: static; top: auto; }
}

.rat-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-4); }
.rat-count { font-family: var(--display); font-size: 1.3rem; margin: 0; color: var(--ink); }
.rat-ref { color: var(--muted); font-size: .92rem; }

.compo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.compo-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-sm); overflow: hidden; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.compo-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.compo-swipe { position: relative; }
.compo-slide { position: relative; padding-bottom: var(--sp-2); }
.compo-leg { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2; background: var(--glass); backdrop-filter: blur(6px); color: var(--ink); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--r-pill); }
.compo-photo { width: 100%; height: 170px; object-fit: cover; display: block; }
.compo-body { padding: var(--sp-3) var(--sp-4) 0; }
.compo-title-row { display: flex; align-items: center; gap: var(--sp-2); }
.score-chip.sm { position: static; font-size: 12px; padding: 1px 7px; }
.compo-name { font-family: var(--display); font-size: 1.05rem; margin: 4px 0 2px; color: var(--ink); }
.compo-meta { color: var(--muted); font-size: .9rem; }
.compo-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--teal-tint) 40%, var(--card)); }
.compo-total b { font-family: var(--display); font-size: 1.15rem; color: var(--ink); }
.compo-delta { display: inline-block; margin-left: var(--sp-2); font-size: .82rem; font-weight: 600; }
.compo-delta.down { color: var(--teal-600); }
.compo-delta.up { color: var(--terra); }
.compo-detail { display: inline-flex; align-items: center; gap: 6px; background: var(--teal); color: #fff; padding: 8px 14px; border-radius: var(--r-pill); font-weight: 600; text-decoration: none; }
.compo-detail:hover { background: var(--teal-600); }
.compo-detail:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@media (max-width: 560px) { .compo-foot { flex-direction: column; align-items: stretch; } .compo-detail { justify-content: center; } }

/* ---- Composition detail page (/plan-rat/compo) — stateless, shareable ---- */
.compo-page { max-width: var(--maxw); padding-bottom: var(--sp-8); }
.compo-h1 { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 3.6vw, 34px); line-height: 1.12; color: var(--ink); margin: 6px 0 var(--sp-5); }
.compo-h1 span { color: var(--muted); font-weight: 400; }

.compo-totals { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.ct-line {
  flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: var(--sp-4) var(--sp-5);
}
.ct-line span { color: var(--muted); font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ct-line b { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 3.6vw, 32px); color: var(--ink); font-variant-numeric: tabular-nums; }
.ct-google { background: var(--teal-tint); border-color: color-mix(in srgb, var(--teal) 30%, var(--line)); }
.ct-google span, .ct-google b { color: var(--teal-700); }
@media (max-width: 560px) { .compo-totals { flex-direction: column; } }

.compo-hotel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: var(--sp-5);
}
.compo-hotel header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.compo-hotel h2 { font-family: var(--display); font-weight: 600; font-size: clamp(19px, 2.6vw, 24px); margin: 6px 0 4px; color: var(--ink); }
.compo-hmeta { color: var(--muted); font-size: 14px; margin: 0; }
.compo-hmeta b { color: var(--ink); font-weight: 800; }

.compo-arrow { display: flex; justify-content: center; color: var(--muted); margin: 10px 0; }

.btn-book {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  height: 46px; padding: 0 24px; border-radius: var(--r-pill); text-decoration: none;
  font-weight: 800; font-size: 14.5px; color: #fff;
  background: linear-gradient(180deg, var(--teal), var(--teal-700));
  box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--teal) 55%, transparent);
  transition: filter .15s var(--ease), transform .1s;
}
.btn-book:hover { filter: brightness(1.06); }
.btn-book:active { transform: translateY(1px) scale(.99); }
.btn-book:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

@media (max-width: 560px) {
  .compo-hotel header { flex-direction: column; align-items: stretch; }
  .btn-book { justify-content: center; }
}