/* ==========================================================================
   TourOscars — design system
   Palette : limestone paper, pine ink, Aegean teal, pomegranate CTA
   Type    : Instrument Serif (display) / Inter Tight (UI) / IBM Plex Mono (data)
   ========================================================================== */

:root {
  --paper:      #FBFAF7;
  --card:       #FFFFFF;
  --card-alt:   #F4F2EC;

  --ink:        #14211F;
  --ink-2:      #56635F;
  --ink-3:      #8D9793;

  --line:       #E6E3DA;
  --line-2:     #D3CFC4;

  --flame:      #E01281;
  --flame-dk:   #AF0E65;
  --flame-tint: #FCE8F2;

  --sea:        #0E6B63;
  --sea-tint:   #E2F0ED;

  --gold:       #A9740F;
  --gold-tint:  #FAF0DC;

  --red:        #B4232B;
  --red-tint:   #FBEBEB;

  --r-card: 14px;
  --r-ctl: 10px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(20,33,31,.05);
  --shadow-2: 0 6px 24px -8px rgba(20,33,31,.16), 0 2px 6px rgba(20,33,31,.05);

  --header-h: 60px;
  --max: 1280px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Sans headings by default — the serif is reserved, not the norm. */
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }

/* The one bold gesture: hero, logo, big page titles. Nothing under 26px. */
.display {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.1;
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

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

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

:focus-visible {
  outline: 2px solid var(--sea);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- eyebrow / labels ---------- */

.eyebrow {
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(251,250,247,.9);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 28px; width: 100%; }

.logo { font-family: "Instrument Serif", Georgia, serif; font-size: 24px; letter-spacing: -.02em; display: inline-flex; align-items: center; }
/* Image logo. The height controls it; width auto keeps the aspect ratio.
   The wordmark already contains the tagline, so it needs a touch more height
   than the old text mark. */
.logo-img { height: 26px; width: auto; display: block; }
.logo em { font-style: italic; color: var(--flame); }

.nav { display: flex; gap: 20px; font-size: 14px; color: var(--ink-2); }
.nav a:hover { color: var(--ink); }
.spacer { margin-left: auto; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px;
  border-radius: var(--r-ctl);
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink);
  font: inherit;
    font-size: 16px;   /* never below 16px — smaller makes iOS Safari zoom on focus */
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .06s;
}
.btn:hover { border-color: var(--ink-3); }
.btn:active { transform: scale(.985); }

.btn-primary {
  background: var(--flame); border-color: var(--flame); color: #fff;
}
.btn-primary:hover { background: var(--flame-dk); border-color: var(--flame-dk); }

.btn-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-ink:hover { background: #000; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--card-alt); color: var(--ink); }

.btn-danger { border-color: #E7B9BC; color: var(--red); background: var(--card); }
.btn-danger:hover { background: var(--red-tint); }

.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 50px; font-size: 15px; width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- form controls ---------- */

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; color: var(--ink-2); font-weight: 500; letter-spacing: .01em; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  height: 42px; padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  background: var(--card);
  color: var(--ink);
  font: inherit;
    font-size: 16px;   /* never below 16px — smaller makes iOS Safari zoom on focus */
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
textarea { height: auto; padding: 10px 12px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--sea);
  box-shadow: 0 0 0 3px var(--sea-tint);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238D9793' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
  padding-right: 32px;
}

.check { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.check input { margin: 3px 0 0; accent-color: var(--sea); width: 15px; height: 15px; flex: none; }

input[type="range"] { -webkit-appearance: none; height: 4px; padding: 0; border: 0; background: var(--line-2); border-radius: 2px; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); border: 3px solid #fff; box-shadow: var(--shadow-1); cursor: pointer;
}

/* ---------- badges / pills ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; letter-spacing: .01em;
  padding: 4px 9px; border-radius: var(--r-pill);
  background: var(--card-alt); color: var(--ink-2);
  white-space: nowrap;
}
.badge-sea   { background: var(--sea-tint);   color: var(--sea); }
.badge-flame { background: var(--flame-tint); color: var(--flame-dk); }
.badge-gold  { background: var(--gold-tint);  color: var(--gold); }
.badge-red   { background: var(--red-tint);   color: var(--red); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  background: var(--card); font-size: 13px; color: var(--ink-2);
  cursor: pointer; user-select: none;
}
.pill:hover { border-color: var(--ink-3); }
.pill[aria-pressed="true"], .pill.is-on {
  background: var(--ink); border-color: var(--ink); color: #fff;
}

/* ---------- search bar ---------- */

.searchbar {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr auto;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 8px;
  box-shadow: var(--shadow-1);
  position: sticky;
  top: calc(var(--header-h) + 8px);
  z-index: 35;
  transition: padding .2s ease, border-radius .2s ease, box-shadow .2s ease;
}
.searchbar.docked {
  border-radius: 0 0 var(--r-card) var(--r-card);
  box-shadow: 0 6px 20px rgba(20,33,31,.12);
}
.searchbar .cell { display: flex; align-items: center; gap: 9px; padding: 0 10px; border-radius: var(--r-ctl); }
.searchbar .cell:hover { background: var(--card-alt); }
.searchbar input, .searchbar select { border: 0; box-shadow: none !important; background: transparent; padding: 0; height: 42px; }
.searchbar .ico { color: var(--ink-3); flex: none; }

/* ---------- explore layout ---------- */

.explore { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; align-items: start; padding: 28px 0 60px; }

.filters { position: sticky; top: calc(var(--header-h) + 78px); }  /* clears the docked search bar */
.filter-group { padding: 18px 0; border-bottom: 1px solid var(--line); }
.filter-group:first-child { padding-top: 0; }
.filter-group h3 { font-size: 13px; font-weight: 500; margin-bottom: 12px; }
.filter-group .check + .check { margin-top: 9px; }

.results-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 22px; }

/* ---------- tour card ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); border-color: var(--line-2); }

.card-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--card-alt); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.04); }

.card-tags { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.card-tags .badge { background: rgba(255,255,255,.94); color: var(--ink); backdrop-filter: blur(4px); }
.card-tags .badge.hot { background: var(--flame); color: #fff; }

.fav {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.92); border: 0; cursor: pointer; color: var(--ink-2);
}
.fav:hover { color: var(--flame); }
.fav[aria-pressed="true"] { color: var(--flame); }

.card-body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-kicker { font-size: 12px; color: var(--ink-3); }
.card-title { font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.015em; }
.card-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--ink-2); }
.card-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* signature: next-departures strip */
.departures {
  display: flex; gap: 5px; margin-top: 2px;
  border-top: 1px dashed var(--line); padding-top: 10px;
}
/* Departure chips. The default .dep IS the "seats available" state — soldout
   and low override it below. Colours match .day.open / .acell.open so a date
   looks the same on the card, on the tour calendar and in the admin grid.
   To try the magenta version instead, swap the two lines marked SEA for:
     border: 1px solid var(--flame-dk);
     background: #EC71B3; color: var(--ink);
   and change the .dep b colour to var(--ink). */
.dep {
  flex: 1; text-align: center;
  border: 1px solid #C3E0DA; border-radius: 8px;              /* SEA */
  padding: 5px 2px; font-size: 11px;
  background: var(--sea-tint); color: var(--sea);             /* SEA */
}
.dep b { display: block; font-size: 12px; color: var(--sea); font-weight: 500; }
.dep.soldout {
  background: var(--card-alt); border-color: var(--line);
  color: var(--ink-3); text-decoration: line-through;
}
.dep.soldout b { color: var(--ink-3); }
.dep.low { border-color: #EBD3A6; background: var(--gold-tint); color: var(--gold); }
.dep.low b { color: var(--gold); }

.card-foot {
  margin-top: auto; padding-top: 12px;
  display: flex; align-items: flex-end; justify-content: space-between;
  border-top: 1px solid var(--line);
}
.rating { font-size: 12px; color: var(--ink-2); display: inline-flex; gap: 5px; align-items: center; }
.rating b { font-weight: 500; color: var(--ink); }
.price-from { text-align: right; line-height: 1.2; }
.price-from small { display: block; font-size: 11px; color: var(--ink-3); }
.price-from strong { font-size: 20px; font-weight: 600; letter-spacing: -.03em; }

/* ---------- tour detail ---------- */

/* ==========================================================================
   GALLERY
   Desktop: a five-tile grid, every tile clickable.
   Mobile:  the same tiles, as a snap-scrolling swipe track with dots.
   ========================================================================== */

.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  height: 380px;
  border-radius: var(--r-card);
  overflow: hidden;
  margin-top: 20px;
  background: var(--card-alt);
}
.gallery .g-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--card-alt);
}
.gallery .g-tile:first-child { grid-row: span 2; }

/* Only the first five tiles are laid out on desktop. The rest exist in the DOM
   for the mobile track and the lightbox, but are not shown in the grid. */
.gallery .g-tile:nth-child(n+6) { display: none; }

.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.gallery .g-tile:hover img { transform: scale(1.04); }
.gallery .g-tile:focus-visible { outline: 3px solid var(--sea); outline-offset: -3px; }

.g-count {
  position: absolute; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  font-size: 12px; font-weight: 500;
  padding: 6px 11px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
}

.gal-dots { display: none; }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  background: rgba(14, 22, 21, .94);
  backdrop-filter: blur(3px);
  grid-template-columns: 64px minmax(0,1fr) 64px;
  grid-template-rows: minmax(0,1fr) 82px;
  align-items: center;
}
.lightbox.on { display: grid; }

.lb-stage {
  grid-column: 1 / -1; grid-row: 1;
  margin: 0; padding: 26px 70px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 0;
}
.lb-stage img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.lb-cap {
  margin-top: 12px;
  color: rgba(255,255,255,.65);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.lb-nav, .lb-close {
  z-index: 2;
  display: grid; place-items: center;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.1);
  color: #fff;
  border-radius: 50%;
  transition: background .15s;
}
.lb-nav:hover, .lb-close:hover { background: rgba(255,255,255,.22); }
.lb-nav { width: 48px; height: 48px; grid-row: 1; }
.lb-prev { grid-column: 1; justify-self: center; }
.lb-next { grid-column: 3; justify-self: center; }
.lb-close { position: absolute; top: 18px; right: 20px; width: 42px; height: 42px; }

.lb-strip {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; gap: 8px;
  padding: 0 20px 18px;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: center;
}
.lb-strip::-webkit-scrollbar { display: none; }
.lb-thumb {
  flex: none;
  width: 78px; height: 54px;
  padding: 0; border: 2px solid transparent; border-radius: 7px;
  overflow: hidden; cursor: pointer; background: none;
  opacity: .5; transition: opacity .15s, border-color .15s;
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumb:hover { opacity: .85; }
.lb-thumb.on { opacity: 1; border-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .gallery img, .lb-nav, .lb-close, .lb-thumb { transition: none; }
}

.detail { display: grid; grid-template-columns: minmax(0,1fr) 372px; gap: 44px; align-items: start; padding: 26px 0 70px; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 22px 0; }
.fact { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 12px; }
.fact .ico { color: var(--sea); margin-bottom: 6px; }
.fact dt { font-size: 11px; color: var(--ink-3); }
.fact dd { margin: 0; font-size: 14px; }

.tabs {
  display: flex; gap: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
  position: sticky; top: var(--header-h);
  background: var(--paper);
  z-index: 30;
}
.tabs .tab {
  background: 0; border: 0; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--ink-3);
  padding: 14px 0; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.tabs .tab:hover { color: var(--ink); }
.tabs .tab.is-active { color: var(--ink); border-color: var(--flame); font-weight: 600; }

.section { padding: 8px 0 26px; }
.section h2 { font-size: 20px; font-weight: 500; margin-bottom: 14px; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ticks li { display: flex; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.ticks .ico { flex: none; margin-top: 2px; }
.ticks.yes .ico { color: var(--sea); }
.ticks.no .ico { color: var(--ink-3); }

.timeline { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid var(--line); display: grid; gap: 18px; }
.timeline li { position: relative; }
.timeline li::before {
  content: ""; position: absolute; left: -29px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--sea);
}
.timeline .t { font-size: 12px; color: var(--sea); font-weight: 500; }
.timeline h4 { font-size: 15px; font-weight: 500; }
.timeline p { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); }

/* The mobile booking bar is hidden by default and only revealed inside the
   900px media query. Without this base rule it falls back to a div's default
   display:block and leaks onto desktop, floating at the bottom-left. */
.mbook { display: none !important; }

/* ---------- booking card (the money) ---------- */

.booking {
  position: sticky; top: calc(var(--header-h) + 20px);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-2);
  padding: 18px;
}
.booking .from { display: flex; align-items: baseline; gap: 7px; margin-bottom: 4px; }
.booking .from strong { font-size: 30px; font-weight: 600; letter-spacing: -.035em; }
.booking .from small { font-size: 12px; color: var(--ink-3); }

.cal-head { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 8px; }
.cal-head .m { font-size: 14px; font-weight: 500; }
.cal-nav { display: flex; gap: 4px; }
.cal-nav button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--card); cursor: pointer; display: grid; place-items: center; color: var(--ink-2); }
.cal-nav button:hover { border-color: var(--ink-3); }
.cal-nav button[disabled] { opacity: .35; cursor: not-allowed; }

.cal-dow, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow span { text-align: center; font-size: 11px; color: var(--ink-3); padding-bottom: 4px; }

.day {
  border: 1px solid transparent; background: transparent;
  border-radius: 9px; padding: 5px 2px 4px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  font: inherit; color: var(--ink);
}
.day .n { font-size: 13px; line-height: 1.1; }
.day .p { font-size: 9.5px; color: var(--ink-3); font-family: "IBM Plex Mono", monospace; }
.day.open { background: var(--sea-tint); }
.day.open .p { color: var(--sea); }
.day.low { background: var(--gold-tint); }
.day.low .p { color: var(--gold); }
.day.open:hover, .day.low:hover { border-color: var(--ink); }
.day.closed { color: var(--ink-3); cursor: not-allowed; }
.day.closed .p { color: var(--line-2); }
.day.pad { visibility: hidden; }
.day.sel { background: var(--ink); color: #fff; }
.day.sel .p { color: rgba(255,255,255,.7); }

.legend { display: flex; gap: 12px; font-size: 11px; color: var(--ink-3); margin: 10px 0 4px; }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 4px; }

.slots { display: flex; gap: 6px; flex-wrap: wrap; }
.slot {
  flex: 1; min-width: 76px; text-align: center;
  border: 1px solid var(--line-2); border-radius: var(--r-ctl);
  padding: 8px 4px; background: var(--card); cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink);
}
.slot small { display: block; font-size: 10px; color: var(--ink-3); }
.slot.sel { border-color: var(--ink); background: var(--ink); color: #fff; }
.slot.sel small { color: rgba(255,255,255,.7); }
.slot[disabled] { opacity: .4; cursor: not-allowed; }

.bk-block { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.bk-block > h4 { font-size: 13px; font-weight: 500; margin-bottom: 10px; }

.pax { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; }
.pax .lab { font-size: 14px; }
.pax .sub { font-size: 12px; color: var(--ink-3); }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--card);
  cursor: pointer; display: grid; place-items: center; color: var(--ink);
}
.stepper button:hover:not([disabled]) { border-color: var(--ink); }
.stepper button[disabled] { opacity: .35; cursor: not-allowed; }
.stepper .v { min-width: 18px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }

.total { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 0 12px; }
.total .v { font-size: 26px; font-weight: 600; letter-spacing: -.035em; }

.assure { margin-top: 12px; display: grid; gap: 7px; font-size: 12px; color: var(--ink-2); }
.assure div { display: flex; gap: 7px; align-items: center; }
.assure .ico { color: var(--sea); flex: none; }

.urgency { margin-top: 10px; font-size: 12px; color: var(--gold); background: var(--gold-tint); border-radius: 8px; padding: 8px 10px; text-align: center; }

/* ---------- checkout ---------- */

.checkout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 44px; align-items: start; padding: 28px 0 70px; }
.steps { display: flex; align-items: center; gap: 14px; margin: 32px 0 34px; }
.steps .step { display: flex; align-items: center; gap: 9px; }
.steps .step-num { width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
  background: var(--card-alt); color: var(--ink-3); border: 1px solid var(--line); }
.steps .step-label { font-size: 14px; color: var(--ink-3); font-weight: 500; }
.steps .step.current .step-num { background: var(--sea); color: #fff; border-color: var(--sea); }
.steps .step.current .step-label { color: var(--ink); }
.steps .step-bar { flex: 1; max-width: 60px; height: 2px; background: var(--line); border-radius: 1px; }
@media (max-width: 560px) {
  .steps .step-label { font-size: 13px; }
  .steps { gap: 10px; }
  .steps .step-bar { max-width: 32px; }
}

.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 28px; }
.panel + .panel { margin-top: 16px; }
.panel h2 { font-size: 17px; font-weight: 600; margin-bottom: 18px; letter-spacing: -.01em; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

.pay-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.pay-tabs .pill { flex: 1; justify-content: center; }

.summary { position: sticky; top: calc(var(--header-h) + 20px); }
.sum-head { display: flex; gap: 12px; margin-bottom: 14px; }
.sum-head img { width: 74px; height: 58px; border-radius: 8px; object-fit: cover; flex: none; }
.sum-lines { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; display: grid; gap: 8px; font-size: 13px; }
.sum-lines .row { display: flex; justify-content: space-between; color: var(--ink-2); }
.sum-lines .row b { color: var(--ink); font-weight: 400; }
.sum-total { border-top: 1px solid var(--line-2); margin-top: 12px; padding-top: 12px; display: flex; justify-content: space-between; align-items: baseline; }
.sum-total .v { font-size: 24px; font-weight: 600; letter-spacing: -.03em; }

.note-sea { background: var(--sea-tint); color: var(--sea); border-radius: var(--r-ctl); padding: 10px 12px; font-size: 12px; margin-top: 12px; display: flex; gap: 8px; }

/* ---------- voucher ---------- */

.voucher { max-width: 600px; margin: 48px auto 80px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 12px 40px rgba(20,33,31,.10); }
/* ticket header with a subtle brand tint and perforated edge */
.voucher-top { padding: 38px 30px 30px; text-align: center; position: relative;
  background: linear-gradient(180deg, var(--sea-tint) 0%, var(--card) 100%); }
.voucher-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background-image: radial-gradient(circle, var(--line) 1.5px, transparent 1.5px);
  background-size: 14px 2px; background-repeat: repeat-x; }
.voucher { position: relative; }
.voucher-top .ok { width: 60px; height: 60px; border-radius: 50%; background: var(--sea); color: #fff; display: grid; place-items: center; margin: 0 auto 16px; box-shadow: 0 6px 18px rgba(14,107,99,.30); }
.voucher-body { padding: 26px 30px 30px; }
.vrow { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.vrow span { color: var(--ink-3); }
.qr { width: 132px; height: 132px; border-radius: 12px; background: #fff; margin: 24px auto 0;
  display: grid; place-items: center; padding: 10px; box-sizing: border-box;
  border: 1px solid var(--line); box-shadow: 0 2px 10px rgba(20,33,31,.06); }
.qr svg { width: 100%; height: 100%; display: block; }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--line); background: var(--card); padding: 40px 0; margin-top: 20px; color: var(--ink-2); font-size: 13px; }
.site-footer .cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.site-footer h4 { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 10px; }
.site-footer a { display: block; padding: 3px 0; }
.site-footer a:hover { color: var(--ink); }

/* ==========================================================================
   ADMIN
   ========================================================================== */

.admin { display: grid; grid-template-columns: 226px minmax(0,1fr); min-height: 100vh; }

.side { background: var(--ink); color: #C9D3D0; padding: 20px 14px; position: sticky; top: 0; height: 100vh; }
.side .logo { color: #fff; margin: 0 8px 22px; display: block; }
.side .logo-img { height: 24px; }
.side .logo em { color: #FF7EA3; }
.side .grp { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #6C7B77; margin: 18px 8px 8px; }
.side a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 9px; font-size: 14px; color: #C9D3D0;
}
.side a:hover { background: rgba(255,255,255,.07); color: #fff; }
.side a.is-active { background: #fff; color: var(--ink); }
.side .foot { position: absolute; bottom: 18px; left: 14px; right: 14px; font-size: 12px; color: #6C7B77; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; }

.admin-main { padding: 26px 30px 60px; }
.admin-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 20px; }
.admin-head h1 { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.admin-head p { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; }
.kpi .lab { font-size: 12px; color: var(--ink-3); }
.kpi .v { font-size: 27px; font-weight: 600; letter-spacing: -.04em; margin: 3px 0 2px; }
.kpi .d { font-size: 12px; }
.up { color: var(--sea); } .down { color: var(--red); }

.cols-2 { display: grid; grid-template-columns: 1.45fr 1fr; gap: 18px; align-items: start; }

.box { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); }
.box-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.box-head h2 { font-size: 15px; font-weight: 500; }
.box-body { padding: 6px 16px 14px; }

.row-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.row-item:last-child { border-bottom: 0; }
.row-item .t { font-size: 14px; }
.row-item .s { font-size: 12px; color: var(--ink-3); }

.spark { display: flex; align-items: flex-end; gap: 5px; height: 110px; padding-top: 10px; }
.spark i { flex: 1; background: var(--sea-tint); border-radius: 3px 3px 0 0; display: block; position: relative; }
.spark i.now { background: var(--sea); }
.spark i:hover::after {
  content: attr(data-v); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; font-size: 11px; padding: 3px 6px; border-radius: 5px;
  white-space: nowrap; font-style: normal; margin-bottom: 5px;
}

table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th { text-align: left; font-weight: 500; color: var(--ink-3); font-size: 12px; padding: 10px 12px; background: var(--card-alt); }
table.data th:first-child { border-radius: 8px 0 0 8px; }
table.data th:last-child { border-radius: 0 8px 8px 0; }
table.data td { padding: 11px 12px; border-bottom: 1px solid var(--line); }
table.data tr { cursor: pointer; }
table.data tbody tr:hover td { background: var(--card-alt); }
table.data tr.sel td { background: var(--sea-tint); }
table.data .name { font-size: 14px; }
table.data .sub { font-size: 12px; color: var(--ink-3); }

.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .search { flex: 1; min-width: 200px; max-width: 320px; }

.tabs-admin { display: flex; gap: 20px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.tabs-admin button { background: 0; border: 0; padding: 11px 0; font: inherit;
    font-size: 16px;   /* never below 16px — smaller makes iOS Safari zoom on focus */ color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.tabs-admin button.is-active { color: var(--ink); border-color: var(--flame); }

/* admin availability grid */
.avail-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.avail-dow span { font-size: 11px; color: var(--ink-3); text-align: center; }
.avail { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.acell {
  border: 1px solid var(--line); border-radius: 10px; padding: 8px;
  background: var(--card); cursor: pointer; text-align: left; font: inherit;
  min-height: 70px; display: flex; flex-direction: column; gap: 2px;
}
.acell .n { font-size: 13px; }
.acell .p { font-size: 12px; font-family: "IBM Plex Mono", monospace; }
.acell .c { font-size: 11px; }
.acell.open { background: var(--sea-tint); border-color: #C3E0DA; }
.acell.open .p, .acell.open .c { color: var(--sea); }
.acell.low { background: var(--gold-tint); border-color: #EBD3A6; }
.acell.low .p, .acell.low .c { color: var(--gold); }
.acell.full { background: var(--red-tint); border-color: #EFC9CB; }
.acell.full .p, .acell.full .c { color: var(--red); }
.acell.closed { background: var(--card-alt); }
.acell.closed .p, .acell.closed .c { color: var(--ink-3); }
.acell.pad { visibility: hidden; }
.acell.sel { outline: 2px solid var(--ink); outline-offset: 1px; }

.hintbox { background: var(--sea-tint); color: var(--sea); border-radius: var(--r-ctl); padding: 12px; font-size: 13px; display: flex; gap: 9px; margin-top: 14px; }
.hintbox .ico { flex: none; margin-top: 1px; }

.detail-panel { position: sticky; top: 20px; }
.dp-row { display: flex; gap: 9px; align-items: center; font-size: 13px; color: var(--ink-2); padding: 5px 0; }
.dp-row .ico { color: var(--ink-3); flex: none; }

/* Layout blocks that used to be inline styles. They live here now so the
   media queries below can actually reach them. */
.steps-3   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.inc-exc   { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.rule-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.rule-row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; align-items: end; }
.day-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 12px; }

/* Filter toggle — only ever visible on mobile (shown in the 900px block). */
.filter-toggle { display: none; }

/* ==========================================================================
   RESPONSIVE
   --------------------------------------------------------------------------
   Three breakpoints, each with a job:

     1080px  the sidebars fold under the content (booking card, filters, admin nav)
      900px  two-column blocks become one; the doodle cast thins out
      700px  phone. The header sheds everything but the logo and the language.

   The rule everywhere: nothing scrolls sideways except things that are meant to
   (tabs, wide tables). A horizontal scrollbar on a booking page is a lost sale.
   ========================================================================== */

/* ---------- 1080: sidebars fold ---------- */
@media (max-width: 1080px) {
  .detail, .checkout { grid-template-columns: 1fr; gap: 26px; }
  .booking, .summary, .filters, .detail-panel { position: static; }
  .explore { grid-template-columns: 1fr; gap: 22px; }

  /* the filter rail becomes a horizontal strip, not a tall wall of checkboxes */
  .filters { border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; background: var(--card); }
  .filter-group { padding: 12px 0; }
  .filter-group:last-child { border-bottom: 0; }

  .kpis { grid-template-columns: repeat(2, 1fr); }
  .cols-2 { grid-template-columns: 1fr; }

  /* admin: the dark rail becomes a top bar */
  .admin { grid-template-columns: 1fr; }
  .side {
    position: static; height: auto;
    display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
    padding: 10px 14px;
  }
  .side .logo { margin: 0 14px 0 0; }
  .side .grp, .side .foot { display: none; }
  .side a { padding: 7px 10px; font-size: 13px; }
}

/* ---------- 900: two columns become one ---------- */
@media (max-width: 900px) {
  .steps-3 { grid-template-columns: 1fr; }

  /* Filters collapse behind a toggle so the tour cards are what you see first. */
  .filter-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    margin-bottom: 14px;
    background: var(--card);
    border: 1px solid var(--line-2);
    border-radius: var(--r-ctl);
    font: inherit; font-size: 15px; font-weight: 500;
    color: var(--ink); cursor: pointer;
  }
  .filter-toggle #ft-chevron { transition: transform .2s; display: inline-flex; color: var(--ink-2); }
  .filter-toggle.open #ft-chevron { transform: rotate(180deg); }
  .filters { display: none; }
  .filters.open { display: block; }
  .inc-exc { grid-template-columns: 1fr; gap: 20px; }
  .rule-row-3, .rule-row-4 { grid-template-columns: 1fr 1fr; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 22px; }

  .d-drink, .d-cam, .d-birds, .d-ball { display: none; }
  .doodle { opacity: .78; }
}

/* ---------- 700: the phone ---------- */
@media (max-width: 700px) {
  .wrap { padding: 0 18px; }

  /* Header: on a 380px screen the nav, the language picker and three buttons
     do not fit. Keep the logo, the language and one call to action. */
  .site-header .wrap { gap: 10px; }
  .nav { display: none; }
  .site-header .btn { display: none; }   /* no header buttons on mobile — logo + language only */
  .logo { font-size: 21px; }
  /* Wordmark is wide; on a phone cap its width so the language switch and
     button still fit. */
  .logo-img { height: auto; width: 150px; max-width: 46vw; }
  .lang-switch { height: 32px; padding: 0 26px 0 8px; font-size: 12px; }

  .hero { padding: 28px 0 26px; min-height: 320px; }
  .hero-title { max-width: 15ch; letter-spacing: -0.026em; }
  .hero-title span { display: inline; }
  .hero-sub { font-size: 15px; }
  .hero-stats { flex-direction: column; gap: 2px; padding: 10px 18px; align-items: center; }
  .hero-stats .sep { display: none; }
  .playground { padding: 0 10px; }
  .d-dolphin, .d-boat, .d-group, .d-cloud, .d-bus { display: none; }

  .searchbar { grid-template-columns: 1fr; }
  .searchbar .btn { height: 46px; }

  /* On a phone the full search bar is 4 rows tall — too big to dock. When it
     docks, show only the search field and the button in one row; the date and
     guests fold away (tapping the field reopens the full search anyway). */
  .searchbar.docked {
    grid-template-columns: 1fr auto;
    gap: 6px;
    padding: 6px;
  }
  .searchbar.docked .cell:nth-child(2),
  .searchbar.docked .cell:nth-child(3) { display: none; }
  .searchbar.docked .btn { height: 42px; padding: 0 16px; }

  .grid { grid-template-columns: 1fr; gap: 16px; }
  .results-head { flex-wrap: wrap; gap: 8px; }

  /* Gallery on a phone: the grid becomes a swipe track. Every photo is a full
     -width slide with scroll snapping, so it has native momentum instead of a
     JavaScript imitation of it. Hiding four of five photos, as this used to do,
     was throwing away the best thing on the page. */
  .gallery {
    display: flex;
    grid-template-columns: none;
    grid-template-rows: none;
    height: 250px;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery .g-tile {
    min-width: 100%;
    scroll-snap-align: center;
    cursor: pointer;
  }
  .gallery .g-tile:first-child { grid-row: auto; }
  .gallery .g-tile:nth-child(n+6) { display: block; }   /* all of them, now */
  .gallery .g-tile:hover img { transform: none; }
  .g-count { display: none; }

  .gal-dots {
    display: flex; justify-content: center; gap: 6px;
    padding: 12px 0 2px;
  }
  .gal-dots .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--line-2); cursor: pointer;
    transition: background .2s, width .2s;
  }
  .gal-dots .dot.on { background: var(--ink); width: 18px; border-radius: 4px; }

  /* Lightbox on a phone: no side arrows (swipe instead), no thumbnail strip. */
  .lightbox { grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr); }
  .lb-nav { display: none; }
  .lb-stage { grid-column: 1; padding: 60px 14px 30px; }
  .lb-strip { display: none; }

  .facts { grid-template-columns: repeat(2, 1fr); }

  /* Five tabs will not fit. Let them scroll, and hide the bar. */
  /* The tab bar on a phone: a clean horizontal strip, sticky under the header,
     always in the same place. A soft fade on the right edge signals there is
     more to swipe, instead of a hard cut-off that looks like a bug. */
  .tabs {
    gap: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -16px; margin-right: -16px;
    padding-left: 16px; padding-right: 16px;
    -webkit-mask-image: none; mask-image: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  /* Five short labels fit one clean row at this gap — no scroll, no wrap. */
  .tabs { top: var(--header-h); gap: 15px; justify-content: space-between; }
  .tabs .tab { font-size: 14px; padding: 13px 0; }

  .two { grid-template-columns: 1fr; }
  .pay-tabs { flex-wrap: wrap; }
  .pay-tabs .pill { flex: 1 1 44%; }

  /* The booking card is full width in the single column, never 372px. */
  .detail > .booking { width: 100%; max-width: 100%; }
  .booking { width: 100%; box-sizing: border-box; }

  /* The booking card keeps its own Book button (that is the real one); the
     pinned bar mirrors it and stays in reach while scrolling. To avoid the
     "two identical buttons stacked" look from the screenshots, the pinned bar
     hides itself while the booking card is actually on screen — see JS. */
  .assure { font-size: 12px; }

  /* ------------------------------------------------------------------
     MOBILE BOOKING PATH — the customer is standing in Kemer with a phone.
     This has to be effortless and impossible to get lost in.
     ------------------------------------------------------------------ */

  /* Bigger tap targets. 44px is the floor for a thumb; below that people
     miss and get frustrated. */
  .stepper button { width: 44px; height: 44px; }
  .stepper .v { min-width: 26px; font-size: 16px; }
  .cal-grid button { min-height: 46px; font-size: 13px; }
  .cal-nav button { width: 44px; height: 44px; }
  .slot { min-height: 46px; padding: 8px 10px; }
  .field input, .field select { height: 48px; }   /* base is already 16px, so no iOS zoom */
  .check { padding: 10px 0; }
  .check input { width: 20px; height: 20px; }

  /* The booking card is full-width and gets breathing room, not squeezed. */
  .booking { padding: 16px 15px; }
  .booking .bk-block { margin-bottom: 14px; padding-bottom: 14px; }
  .booking h3, .booking .bk-h { margin-bottom: 8px; }
  /* trim the vertical rhythm inside the card so the whole thing fits a screen */
  .booking .stepper { gap: 8px; }
  .booking .assure { gap: 6px; margin-top: 12px; }

  /* ----------------------------------------------------------------------
     CALENDAR ON A PHONE
     A 7-column grid with a price in every cell does not fit 358px — the price
     text clips and Sunday falls off the edge. So on mobile each cell shows just
     the day number (big, tappable) with a small colour dot for availability.
     The price appears, full size, in #cal-picked the moment a date is chosen —
     which is the only price that actually matters to the customer anyway.
     ---------------------------------------------------------------------- */
  .cal-dow, .cal-grid { gap: 2px; }
  .cal-dow span { font-size: 10px; }

  .day {
    aspect-ratio: 1 / 1;
    padding: 0;
    justify-content: center;
    gap: 3px;
    border-radius: 10px;
  }
  .day .n { font-size: 15px; }
  /* hide the cramped inline price; replace with a dot */
  .day .p { display: none; }
  .day.open::after, .day.low::after {
    content: "";
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--sea);
  }
  .day.low::after { background: var(--gold); }
  .day.sel::after { background: #fff; }
  .day.closed::after { display: none; }
  /* the tinted background is enough colour; keep it subtle */
  .day.open { background: var(--sea-tint); }
  .day.low  { background: var(--gold-tint); }

  /* the picked-date price line, shown only after a date is tapped */
  #cal-picked {
    display: none;
    margin: 12px 0 2px;
    padding: 12px 14px;
    background: var(--sea-tint);
    border-radius: var(--r-ctl);
    font-size: 14px;
    color: var(--ink);
  }
  #cal-picked.on { display: flex; align-items: baseline; justify-content: space-between; }
  #cal-picked b { font-size: 20px; font-weight: 600; }

  .booking .from strong { font-size: 34px; }

  /* THE STICKY BOOK BAR.
     On a phone the booking card lands below a long description. Rather than
     make someone scroll back down to buy, a compact bar sticks to the bottom
     of the screen the moment they have picked a date: price on the left, the
     Book button on the right, one thumb-reach away at all times. */
  .mbook {
    box-sizing: border-box;
    transition: transform .25s ease;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--line-2);
    box-shadow: 0 -4px 20px rgba(20,33,31,.08);
  }
  .mbook.on { display: flex !important; }
  .mbook.hidden-by-card { transform: translateY(120%); pointer-events: none; }
  .mbook .mb-price { flex: none; line-height: 1.1; }
  .mbook .mb-price b { font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
  .mbook .mb-price small { display: block; font-size: 11px; color: var(--ink-3); }
  .mbook .btn { flex: 1; height: 50px; }

  /* keep the sticky bar from covering the last of the page content */
  body.has-mbook { padding-bottom: 78px; }

  /* Payment Element needs real vertical room or the card fields clip. */
  #pay-el { min-height: 260px; }


  .voucher { margin: 22px 0 50px; }
  .voucher-top, .voucher-body { padding: 22px 18px; }

  .site-footer { padding: 26px 0; margin-top: 8px; }
  .site-footer .cols { grid-template-columns: 1fr; gap: 18px; }
  /* Company (2nd) and Suppliers (4th) are noise on a phone — hide them.
     Keep the tagline (1st) and Support (3rd). */
  .site-footer .cols > div:nth-child(2),
  .site-footer .cols > div:nth-child(4) { display: none; }

  /* Admin on a phone */
  .admin-main { padding: 18px 14px 44px; }
  .admin-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi .v { font-size: 22px; }
  .rule-row-3, .rule-row-4, .day-row-2 { grid-template-columns: 1fr; }
  .toolbar .search { max-width: none; }
  .avail { gap: 3px; }
  .acell { min-height: 58px; padding: 5px; }
  .acell .n { font-size: 12px; }
  .acell .p, .acell .c { font-size: 10px; }
  .avail-dow span { font-size: 10px; }
}

/* Wide tables scroll inside their own box instead of pushing the page sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table.data { min-width: 480px; }

/* Nothing, anywhere, may push the page wider than the screen. */
/* NOTE: never put overflow-x:hidden on html/body — it silently breaks
   position:sticky everywhere. `overflow-x: clip` contains horizontal overflow
   the same way but does NOT create a scroll container, so sticky still works. */
html, body { max-width: 100%; }
body { overflow-x: clip; }
img, svg, video { max-width: 100%; }

/* ==========================================================================
   HERO — sympathetic chaos
   Fourteen doodles scattered across the hero, each on its own timer with a
   prime-ish duration, so they never fall into step. Nothing sits over the
   words: the text block gets its own stacking layer and a soft halo behind it.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  padding: 60px 0 54px;
  min-height: 460px;
  border-bottom: 1px solid var(--line);
}

/* The playground sits inside the same container as the content, so nothing
   runs off to the browser edge — the doodles line up with the text gutter. */
.playground {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max);
  padding: 0 24px;
  box-sizing: border-box;
  z-index: 0;
  pointer-events: none;
}
.doodle { position: absolute; overflow: visible; }

.hero-inner { position: relative; z-index: 2; text-align: center; }
.hero-inner::before {
  content: "";
  position: absolute;
  inset: -34px -30px -24px -30px;
  background: radial-gradient(ellipse at 50% 50%, var(--paper) 46%, rgba(251,250,247,0) 80%);
  z-index: -1;
}

/* The headline is the one loud thing on the page. Bold sans, tight, centred. */
.hero-title {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 50px);
  font-weight: 700;
  letter-spacing: -0.032em;
  line-height: 1.12;
  margin: 0 auto 20px;
  max-width: 19ch;
  text-wrap: balance;
}
.hero-title span { display: block; }

.hero-sub {
  margin: 0 auto 20px;
  max-width: 48ch;
  color: var(--ink-2);
  font-size: 16px;
}

.hero-stats {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-2);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 20px;
}
.hero-stats b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); margin-right: 3px; }
.hero-stats .sep { color: var(--line-2); }

/* ---------- each one does its own thing ---------- */

.d-plane { animation: fly 26s linear infinite; }
@keyframes fly {
  0%   { left: -12%; transform: translateY(0)     rotate(0deg); }
  50%  { left: 46%;  transform: translateY(-13px) rotate(1.6deg); }
  100% { left: 104%; transform: translateY(5px)   rotate(-1deg); }
}

.d-balloon { animation: lift 9s ease-in-out infinite; }
@keyframes lift {
  0%, 100% { transform: translate(0, 0) rotate(-2deg); }
  50%      { transform: translate(-10px, -22px) rotate(2.5deg); }
}

.d-sun     { animation: pulse 7s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.rays      { animation: spin 40s linear infinite; transform-origin: 50px 50px; }
@keyframes spin { to { transform: rotate(360deg); } }

.d-birds { animation: glide 31s linear infinite; }
@keyframes glide {
  0%   { left: 44%; transform: translateY(0); }
  100% { left: -8%; transform: translateY(26px); }
}
.flap  { animation: flap 0.8s ease-in-out infinite; transform-origin: 34px 42px; }
.flap2 { animation: flap 0.9s ease-in-out infinite 0.25s; transform-origin: 66px 64px; }
@keyframes flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.45); } }

.d-dolphin { animation: leap 6.5s ease-in-out infinite; }
@keyframes leap {
  0%, 100% { transform: translate(0, 14px) rotate(8deg); }
  50%      { transform: translate(-14px, -18px) rotate(-12deg); }
}

.d-jeep    { animation: jolt 0.75s ease-in-out infinite; }
@keyframes jolt {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-4px) rotate(1deg); }
}
.d-jeep .dust { animation: kick 1.4s ease-out infinite; }
@keyframes kick {
  0%   { opacity: .7; transform: translate(0,0) scale(.7); }
  100% { opacity: 0;  transform: translate(-22px,-8px) scale(1.6); }
}

.d-palm    { animation: sway 6s ease-in-out infinite; transform-origin: 50px 96px; }
@keyframes sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(3deg); } }

/* the waterfall: three sheets of water falling at different rates */
.fa { animation: pour .55s linear infinite; }
.fb { animation: pour .75s linear infinite; }
.fc { animation: pour .65s linear infinite; }
@keyframes pour { 0% { transform: translateY(-9px); } 100% { transform: translateY(9px); } }
.mist { animation: spray 3.4s ease-in-out infinite; }
@keyframes spray {
  0%, 100% { opacity: .5; transform: translateY(0) scale(1); }
  50%      { opacity: .9; transform: translateY(-5px) scale(1.14); }
}

/* the guide walks the group along, flag up, kids bouncing */
.d-group { animation: stroll 3.4s ease-in-out infinite; }
@keyframes stroll { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.flag { animation: wave 1.5s ease-in-out infinite; transform-origin: 26px -58px; }
@keyframes wave { 0%, 100% { transform: skewY(-6deg) scaleX(.94); } 50% { transform: skewY(6deg) scaleX(1.06); } }
.kid1 { animation: skip 1.1s ease-in-out infinite; }
.kid2 { animation: skip 1.3s ease-in-out infinite .35s; }
@keyframes skip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* the minibus rumbles */
.d-bus { animation: rumble 0.9s ease-in-out infinite; }
@keyframes rumble {
  0%, 100% { transform: translateY(0) rotate(-.5deg); }
  50%      { transform: translateY(-3px) rotate(.5deg); }
}

.d-drink   { animation: wiggle 4.2s ease-in-out infinite; transform-origin: 50px 88px; }
@keyframes wiggle { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(7deg); } }

.d-case    { animation: wobble 3.7s ease-in-out infinite; transform-origin: 50px 82px; }
@keyframes wobble {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-5px); }
}

.d-ball    { animation: bounce 2.3s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-34px) rotate(180deg); }
}

.d-boat    { animation: rock 5.8s ease-in-out infinite; transform-origin: 50px 78px; }
@keyframes rock {
  0%, 100% { transform: rotate(-5deg) translateY(0); }
  50%      { transform: rotate(5deg) translateY(-6px); }
}

.d-cloud { animation: drift 44s linear infinite; }
@keyframes drift {
  0%   { left: 9%;  opacity: 1; }
  92%  { left: 62%; opacity: 1; }
  100% { left: 66%; opacity: 0; }
}

.d-cam     { animation: dangle 4.8s ease-in-out infinite; transform-origin: 50px 22px; }
@keyframes dangle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

/* ---------- small screens: keep the corners, drop the clutter ---------- */

@media (prefers-reduced-motion: reduce) {
  .doodle, .doodle * { animation: none !important; }
  .d-plane { left: 30%; }
  .d-birds { left: 40%; }
  .d-cloud { left: 9%; }
}

/* ==========================================================================
   LANGUAGE
   ========================================================================== */

.lang-switch {
  width: auto;
  height: 34px;
  padding: 0 30px 0 10px;
  font-size: 13px;
  color: var(--ink-2);
  border-color: var(--line);
  background-color: transparent;
  cursor: pointer;
}
.lang-switch:hover { border-color: var(--line-2); color: var(--ink); }

/* Inter has no CJK glyphs. Without this, Chinese falls back to whatever the OS
   picks and the page looks like two different websites stapled together. */
html.cjk body,
html.cjk .hero-title,
html.cjk h1, html.cjk h2, html.cjk h3, html.cjk h4 {
  font-family: "Inter", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
}
html.cjk .hero-title { letter-spacing: 0; line-height: 1.3; }
html.cjk .card-title { letter-spacing: 0; line-height: 1.5; }
html.cjk .display, html.cjk .logo { font-family: "Instrument Serif", "Noto Sans SC", Georgia, serif; }

/* German and French run long. Give the labels room rather than letting them clip. */
html[lang="de"] .card-meta, html[lang="fr"] .card-meta { font-size: 11.5px; }
html[lang="de"] .btn-sm, html[lang="fr"] .btn-sm { padding: 0 10px; }

/* Freesale: unlimited seats. Violet, so it reads as "different rules apply"
   rather than sitting on the open/low/full scale at all. */
.acell.free { background: #F0EBFA; border-color: #D6C9EF; }
.acell.free .p, .acell.free .c { color: #5B3FA8; }

/* ---------- newsletter banner ----------
   Half the old height: 170px instead of 300, with the padding and type scaled
   to match. Typography follows the hero — Fraunces for the headline and the
   Inter eyebrow, rather than the Instrument Serif and IBM Plex Mono it used
   before. Fraunces is only loaded on index.html, which is also the only page
   this block appears on. If the newsletter is ever added to another page,
   add Fraunces to that page's font link or the headline falls back to
   Georgia. */
.newsletter {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  margin: 24px 0 56px;
  min-height: 170px;
  box-shadow: var(--shadow-1);
}
/* image on the RIGHT, text on the left — calmer reading order */
.newsletter { grid-template-areas: "body media"; }
.nl-body  { grid-area: body; }
.nl-media { grid-area: media; }

.nl-media {
  background-image: url('../img/brand/newsletter.jpg');
  background-size: cover;
  background-position: center;
  min-height: 100%;
}

.nl-body {
  padding: 26px 34px;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 560px;
}
.nl-eyebrow {
  font-size: 11px; letter-spacing: 1.5px; font-weight: 600;
  text-transform: uppercase;
  color: var(--sea); margin: 0 0 8px;
}
.nl-body h2 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: 27px; font-weight: 400; letter-spacing: -.01em;
  line-height: 1.1; margin: 0 0 8px; color: var(--ink);
}
.nl-body > p.nl-sub {
  margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--ink-2);
  max-width: 46ch;
}
.nl-form { display: flex; gap: 10px; max-width: 440px; }
.nl-field {
  flex: 1; display: flex; align-items: center; gap: 10px;
  background: var(--paper); border: 1px solid var(--line-2);
  border-radius: var(--r-ctl); padding: 0 14px;
  transition: border-color .15s, box-shadow .15s;
}
.nl-field:focus-within { border-color: var(--sea); box-shadow: 0 0 0 3px rgba(14,107,99,.10); }
.nl-field .ico { color: var(--ink-3); flex: none; }
.nl-field input {
  flex: 1; border: 0; background: transparent; height: 44px;
  font-size: 15px; color: var(--ink);
}
.nl-field input:focus { outline: none; }
.nl-form .btn { height: 46px; padding: 0 22px; flex: none; font-weight: 500; }
.nl-fine { margin: 10px 0 0; font-size: 12px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.nl-done {
  margin: 6px 0 0; font-size: 14px; color: var(--sea); font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
/* The markup carries the `hidden` attribute and the script removes it after a
   valid address is entered. Without this rule the `display: flex` above beats
   `hidden`, and the "You're in" confirmation shows to everyone the moment the
   page loads — before anyone has typed anything. */
.nl-done[hidden] { display: none; }

@media (max-width: 760px) {
  .newsletter {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "body";   /* image on top, then text */
    margin: 8px 0 40px;
  }
  .nl-media { min-height: 130px; }
  .nl-body { padding: 22px 20px; max-width: none; }
  .nl-body h2 { font-size: 23px; }
  .nl-body > p.nl-sub { font-size: 14px; }
  .nl-form { flex-direction: column; max-width: none; }
  .nl-form .btn { width: 100%; }
}

/* ---------- TourOscars award badges ---------- */
.card-tags { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 6px; }

/* White framed badge — black star + black text on a clean white pill. Always
   readable on any photo. */
.award {
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
  height: 26px; padding: 0 12px;
  border-radius: 8px;
  background: #ffffff;
  color: #14211F;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 1px 6px rgba(0,0,0,.18);
}
.aw-star { flex: none; display: block; align-self: center; }
.award-label { line-height: 1; }

/* Winner badges carry the brand colour so a win reads instantly; nominees keep
   the white frame, which gives the two a clear pecking order on a busy photo. */
.award-winner {
  background: var(--flame);
  color: #ffffff;
  box-shadow: 0 1px 6px rgba(0,0,0,.22);
}
/* The star is an inline SVG — force it white in case it carries its own fill. */
.award-winner .aw-star,
.award-winner .aw-star * { fill: #ffffff; stroke: #ffffff; color: #ffffff; }

/* Nominee keeps the white pill but wears the brand colour as text and a thin
   outline — clearly related to a win, clearly not one. The star follows the
   text colour automatically now, so it turns magenta with it. */
.award-nominee {
  color: var(--flame);
  font-weight: 700;
  box-shadow: 0 1px 6px rgba(0,0,0,.18), inset 0 0 0 1.5px var(--flame);
}

/* Award ribbon on the tour detail page — same white-frame look, a bit larger. */
.award-ribbon {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 14px; border-radius: 8px;
  background: #ffffff; color: #14211F;
  border: 1px solid var(--line);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.award-ribbon.is-winner {
  background: var(--flame);
  color: #ffffff;
  border-color: var(--flame);
}
.award-ribbon.is-winner .aw-star,
.award-ribbon.is-winner .aw-star * { fill: #ffffff; stroke: #ffffff; color: #ffffff; }

@media (max-width: 700px) {
  .award { height: 24px; font-size: 11px; padding: 0 10px; letter-spacing: .04em; }
  .award-label { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- mid-results banner (assets/js/midband.js) ----------
   A short, wide band between rows of tour cards. It is a child of .grid, so it
   must span every column no matter how many auto-fill produced — that is what
   grid-column: 1 / -1 does, at any width.

   The background is the PHOTO ONLY. The wording is real HTML underneath, in
   six languages. Do not swap in artwork with text burnt into it: the burnt-in
   English shows through behind the German and the band looks doubled.

   NOTE the ../ in the path — these rules live in app.css, so it resolves from
   assets/css/, not from the page. */
.midband {
  grid-column: 1 / -1;
  border-radius: var(--r-card);
  padding: 26px 32px;
  min-height: 190px;
  display: flex; align-items: center; gap: 30px;
  color: #fff;
  overflow: hidden;
  background-color: var(--flame);
  background-image:
    linear-gradient(90deg, #E01281 0%, #E01281 34%, rgba(224,18,129,0) 76%),
    url('../img/brand/midband.jpg');
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, right 62%;
}

/* The two other concepts differ only in photograph and crop position. Crop
   positions were chosen from where each photo carries its detail, so the
   short band does not end up showing only sky or only water. */
.midband.band-cutoff {
  background-image:
    linear-gradient(90deg, #E01281 0%, #E01281 34%, rgba(224,18,129,0) 76%),
    url('../img/brand/midband-2.jpg');
  background-position: center, right 45%;
}
.midband.band-cancel {
  background-image:
    linear-gradient(90deg, #E01281 0%, #E01281 34%, rgba(224,18,129,0) 76%),
    url('../img/brand/midband-3.jpg');
  background-position: center, right 30%;
}
.mb-body { flex: 1; min-width: 0; max-width: 60%; }
.mb-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 31px; font-weight: 400; line-height: 1.18; letter-spacing: -.01em;
  margin: 0 0 14px; color: #fff;
}
.mb-mark {
  display: inline-block; background: var(--ink); color: #fff;
  padding: 0 10px 3px; border-radius: 6px;
}
.mb-ticks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.mb-tick {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #fff;
}
.mb-cta {
  flex: none; border: 0; cursor: pointer; font: inherit;
  font-weight: 500; font-size: 15px;
  background: #fff; color: var(--flame-dk);
  padding: 13px 26px; border-radius: var(--r-ctl);
}
.mb-cta:hover { background: var(--flame-tint); }

@media (max-width: 900px) {
  /* Stacked and narrow: photo above, text on solid colour below. */
  .midband {
    display: block; padding: 130px 22px 24px; min-height: 0;
    background-image:
      linear-gradient(0deg, #E01281 0%, #E01281 58%, rgba(224,18,129,0) 96%),
      url('../img/brand/midband.jpg');
    background-position: center, center 34%;
  }
  .midband.band-cutoff {
    background-image:
      linear-gradient(0deg, #E01281 0%, #E01281 58%, rgba(224,18,129,0) 96%),
      url('../img/brand/midband-2.jpg');
    background-position: center, center 30%;
  }
  .midband.band-cancel {
    background-image:
      linear-gradient(0deg, #E01281 0%, #E01281 58%, rgba(224,18,129,0) 96%),
      url('../img/brand/midband-3.jpg');
    background-position: center, center 25%;
  }
  .mb-body { max-width: none; }
  .mb-title { font-size: 26px; }
  .mb-cta { width: 100%; margin-top: 18px; }
}
@media (max-width: 560px) {
  .midband { padding: 105px 18px 22px; }
  .mb-title { font-size: 22px; }
}