/* Holistay — Mobile-first, Shorts-format, Teal brand */
/* Brand color: #FD4223 (coral) — neutral palette, Airbnb-style */

/* ===== Theme: Light (default) — Neutral + Coral accent ===== */
:root,
[data-theme="light"] {
  /* White page with bordered cards, the way Airbnb does it. Cards share the page
     colour, so their edges come from --color-border, not from a background tint. */
  --color-bg: #ffffff;
  --color-text: #222222;
  --color-muted: #717171;
  --color-border: rgba(0,0,0,0.13);
  --color-brand: #FD4223;
  --color-brand-dark: #d93518;
  --color-brand-light: #fff1f0;
  --color-primary: #0f1623;
  --color-primary-text: #fff;
  --color-surface: #ffffff;
  /* Neutral grey for filled elements. The old value was blue-tinted, which read as a
     colour rather than a shade once the page behind it turned white. */
  --color-surface-2: #f7f7f7;
  --color-hover-bg: rgba(0,0,0,0.05);
  --color-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 6px 16px rgba(0,0,0,0.05);
  --color-overlay: rgba(0,0,0,0.5);
  --color-good: #1a7f4f;
  --color-rain: #2a7ab0;
  --color-now: rgba(38,54,78,0.10);
  --color-now-edge: rgba(38,54,78,0.28);
  --color-rain-light: rgba(42,122,176,0.18);
  --color-good-bg: rgba(26,127,79,0.15);
  --color-quiet-bg: rgba(26,127,79,0.07);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --radius: 7px;
  --radius-sm: 6px;
  --max-width: 1120px;
  /* Height of the sticky nav: tallest child (.a11y-btn, 2.1rem) + its padding + border.
     In rem so it follows the A-/A+ accessibility control, which scales the root font
     size from 16px to 22px and grows the header with it. */
  --header-h: calc(3.6rem + 1px);
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
}

/* ===== Theme: Dark ===== */
[data-theme="dark"] {
  --color-bg: #0f1623;
  --color-text: #f0f4ff;
  --color-muted: #8a97b8;
  --color-border: rgba(255,255,255,0.09);
  --color-brand: #FD4223;
  --color-brand-dark: #ff6b52;
  --color-brand-light: rgba(253,66,35,0.12);
  --color-primary: #f0f4ff;
  --color-primary-text: #0f1623;
  --color-surface: #151d2e;
  --color-surface-2: #1b2540;
  --color-hover-bg: rgba(255,255,255,0.06);
  --color-shadow: 0 2px 16px rgba(0,0,0,0.35);
  --color-overlay: rgba(0,0,0,0.65);
  --color-good: #4ade80;
  --color-rain: #5aa9dd;
  --color-now: rgba(255,255,255,0.11);
  --color-now-edge: rgba(255,255,255,0.30);
  --color-rain-light: rgba(90,169,221,0.22);
  --color-good-bg: rgba(74,222,128,0.18);
  --color-quiet-bg: rgba(74,222,128,0.10);
}

/* ===== Font sizes ===== */
[data-fontsize="base"] { font-size: 16px; }
[data-fontsize="large"] { font-size: 19px; }
[data-fontsize="xlarge"] { font-size: 22px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0f1623;
    --color-text: #f0f4ff;
    --color-muted: #8a97b8;
    --color-border: rgba(255,255,255,0.09);
    --color-brand-dark: #ff6b52;
    --color-brand-light: rgba(253,66,35,0.12);
    --color-primary: #f0f4ff;
    --color-primary-text: #0f1623;
    --color-surface: #151d2e;
    --color-surface-2: #1b2540;
    --color-hover-bg: rgba(255,255,255,0.06);
    --color-shadow: 0 2px 16px rgba(0,0,0,0.35);
    --color-overlay: rgba(0,0,0,0.65);
    --color-good: #4ade80;
    --color-rain: #5aa9dd;
    --color-now: rgba(255,255,255,0.11);
    --color-now-edge: rgba(255,255,255,0.30);
    --color-rain-light: rgba(90,169,221,0.22);
    --color-good-bg: rgba(74,222,128,0.18);
  }
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  /* Every jump to an #anchor stops this far short, so the sticky nav never covers the
     heading it landed on. Set on the scroll container rather than per-target, so any
     anchor added later gets it for free. */
  scroll-padding-top: calc(var(--header-h) + var(--space-md));
}

body {
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.5;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  transition: background 0.2s, color 0.2s;
}

main { flex: 1; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ===== Nav ===== */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
  gap: var(--space-xs);
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 100;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.nav__logo img {
  height: 28px;
  width: auto;
}

.nav__logo-text {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-brand);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 0.85rem;
  font-weight: 500;
}

.nav__links a:hover { color: var(--color-brand); }

/* ===== Accessibility toolbar ===== */
.a11y-bar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  margin-right: var(--space-sm);
}

.a11y-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 0.15s, color 0.15s;
  padding: 0;
  line-height: 1;
  gap: 1px;
}

.a11y-btn:hover {
  background: var(--color-hover-bg);
  color: var(--color-text);
}

.a11y-font {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

.a11y-font-icon {
  font-size: 0.45rem;
}

.a11y-btn--active {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.a11y-btn--active:hover {
  background: var(--color-border);
}

.a11y-sep {
  width: 1px;
  height: 1.2rem;
  background: var(--color-border);
  margin: 0 0.1rem;
}

/* ===== Footer ===== */
.footer {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
  color: var(--color-muted);
  font-size: 0.75rem;
  border-top: 1px solid var(--color-border);
}

/* ===== Page ===== */
.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

.page--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 60vh;
  justify-content: center;
}

.page--narrow { max-width: 480px; }

.page__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-sm);
}

.page__subtitle {
  color: var(--color-muted);
  margin-bottom: var(--space-md);
}

.page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ===== Hero ===== */
.hero {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
}

.hero__title {
  font-size: clamp(1.75rem, 6vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin-bottom: var(--space-xs);
  line-height: 1.1;
}

.hero__title span {
  color: var(--color-brand);
}

.hero__subtitle {
  color: var(--color-muted);
  font-size: 0.95rem;
  margin-bottom: var(--space-lg);
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== Search bar ===== */
.search-bar {
  max-width: 500px;
  margin: 0 auto;
  text-align: left;
}

.search-bar__main {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 0.6rem 0.6rem 0.6rem 1.2rem;
  /* Was transparent: the tinted page used to make this white pill stand out by
     itself. On a white page it needs its own edge, and it is the one element on the
     home page that earns a real shadow. */
  border: 1.5px solid var(--color-border);
  box-shadow: var(--color-shadow);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search-bar__main:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-light);
}

.search-bar__icon {
  color: var(--color-muted);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.search-bar__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  font-family: var(--font);
  font-weight: 500;
  background: transparent;
  color: var(--color-text);
  padding: 0;
  min-width: 0;
}

.search-bar__input::placeholder {
  color: var(--color-muted);
  font-weight: 400;
}

.search-bar__go {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: none;
  background: var(--color-brand);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s, transform 0.1s;
}

.search-bar__go:hover { opacity: 0.85; }
.search-bar__go:active { transform: scale(0.93); }

/* When chips — one tap to select */
.search-when {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}

.when-chip {
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  color: var(--color-muted);
  font-size: 0.8rem;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.when-chip:hover {
  color: var(--color-text);
}

.when-chip--active {
  background: var(--color-brand-light);
  color: var(--color-brand);
  font-weight: 600;
}

.when-chip--dates {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Date row — slides in when "Dates" is tapped */
.search-dates {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  animation: slideDown 0.2s ease;
}

.search-dates--visible {
  display: flex;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.search-dates__input {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  font-family: var(--font);
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s;
  max-width: 160px;
}

.search-dates__input:focus {
  border-color: var(--color-brand);
}

.search-dates__arrow {
  color: var(--color-muted);
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* ===== Section ===== */
.section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-xl);
}

.section__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
}

/* ===== How it works ===== */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 600px) {
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
}

.step-card {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
}

.step-card i {
  font-size: 2rem;
  color: var(--color-brand);
  margin-bottom: var(--space-sm);
  display: block;
}

.step-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.step-card p {
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.6;
}

/* ===== FAQ ===== */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-item {
  background: var(--color-surface-2);
}

.faq-item summary {
  padding: var(--space-md);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.15s;
}

.faq-item summary:hover {
  background: var(--color-surface-2);
}

.faq-item summary::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.7rem;
  color: var(--color-muted);
  transition: transform 0.35s ease;
}

.faq-item[open] summary::after {
  transform: rotate(180deg);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item p {
  padding: 0 var(--space-md) var(--space-md);
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.7;
}

/* Opening animation. <details> snaps open natively, so the content is faded and
   eased in to make the reveal read as a gradual one. */
.faq-item[open] > :not(summary) {
  animation: faq-reveal 320ms cubic-bezier(0.33, 1, 0.68, 1);
}

@keyframes faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item[open] > :not(summary) { animation: none; }
  .faq-item summary::after { transition: none; }
}

.faq-item + .faq-item {
  border-top: 1px solid var(--color-border);
}

/* ===== Sort bar ===== */
.sort-bar {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
  transition: all 0.15s;
  border: 1px solid transparent;
}

.sort-btn:hover { color: var(--color-text); }

.sort-btn--active {
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
  border-color: var(--color-brand);
}

/* ===== Grid — 4 columns for featured, 2 on mobile ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

@media (min-width: 600px) {
  .grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-md); }
}

/* ===== Card — vertical 9:16 shorts thumbnail ===== */
.card {
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  position: relative;
  background: var(--color-surface);
  transition: transform 0.15s, box-shadow 0.15s;
}

.card:active {
  transform: scale(0.98);
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  }
  [data-theme="dark"] .card:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,0.04);
  }
}

.card__media {
  aspect-ratio: 9/16;
  overflow: hidden;
  position: relative;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

/* Hover: zoom thumbnail + show play icon */
@media (hover: hover) {
  .card:hover .card__media img {
    transform: scale(1.06);
  }
}

.card__media::after {
  content: '\f04b';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border-radius: 50%;
  font-size: 1rem;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
  z-index: 3;
  padding-left: 2px;
}

@media (hover: hover) {
  .card:hover .card__media::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-sm);
  background: linear-gradient(transparent, var(--color-overlay));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-xs);
  z-index: 3;
}

.card__price {
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.card__bid-badge {
  color: #fff;
  font-size: 0.65rem;
  font-weight: 600;
  background: var(--color-brand);
  padding: 0.2em 0.5em;
  border-radius: var(--radius);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.card__body {
  padding: var(--space-sm);
}

.card__title {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__location {
  font-size: 0.7rem;
  color: var(--color-muted);
  margin-top: 0.15rem;
}

/* ===== World Map ===== */
.map-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-xl);
  text-align: center;
}

.map-section__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--space-lg);
}

.world-map {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}

.world-map__svg {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  aspect-ratio: 784 / 459;
}

.world-map__img {
  width: 100%;
  height: auto;
  display: block;
}

.map-regions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-lg);
}

.map-regions__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
}

.map-regions__btn i {
  color: var(--color-brand);
  font-size: 0.9rem;
}

.map-regions__btn:hover,
.map-regions__btn--active {
  border-color: var(--color-brand);
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* ===== Detail page ===== */
.detail {
  max-width: var(--max-width);
  margin: 0 auto;
}

@media (min-width: 768px) {
  .detail { max-width: var(--max-width); }
}

.detail__video {
  position: relative;
  width: 100%;
  aspect-ratio: 9/16;
  max-height: 85vh;
  background: #000;
  overflow: hidden;
}

.detail__video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none;
}

@media (min-width: 768px) {
  .detail {
    max-width: var(--max-width);
    padding: var(--space-md);
  }

  .detail__layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 0 var(--space-lg);
    align-items: start;
  }

  .detail__video {
    position: sticky;
    top: var(--header-h);
    grid-row: 1 / 100;
    border-radius: var(--radius);
    max-height: 80vh;
    align-self: start;
  }

  .detail__right {
    grid-column: 2;
  }
}

.detail__actions {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.detail__price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.detail__price {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.detail__price span {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-muted);
}

.detail__location {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.detail__buttons {
  display: flex;
  gap: var(--space-xs);
}

.detail__buttons .btn { flex: 1; }

.detail__content {
  padding: 0 var(--space-md) var(--space-md);
}

@media (min-width: 768px) {
  .detail__content { padding: 0; }
  .detail__actions { padding: 0 0 var(--space-md); }
}

.detail__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

/* Sidebar sections (utilities + noise below booking form) */
.detail__sidebar-section {
  padding: 0 var(--space-md);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
  .detail__sidebar-section { padding: 0; }
}

.detail__sidebar-section h3 {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.detail__sidebar-section h3 i {
  color: var(--color-brand);
  font-size: 0.8rem;
}

.detail__location i {
  color: var(--color-brand);
  margin-right: 0.2rem;
}

/* Property stats bar */
.detail__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.detail__stat {
  font-size: 0.85rem;
  color: var(--color-muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.detail__stat i { color: var(--color-brand); font-size: 0.8rem; }

/* Sections */
.detail__section {
  margin-bottom: var(--space-lg);
}

.detail__section h2 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.detail__section h2 i {
  color: var(--color-brand);
  font-size: 0.85rem;
}

/* Highlights */
.detail__highlights {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.detail__highlights li {
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.detail__highlights li i {
  color: var(--color-brand);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.detail__desc {
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* Utilities grid */
.detail__utilities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

@media (min-width: 500px) {
  .detail__utilities { grid-template-columns: repeat(3, 1fr); }
}

.detail__utility {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  padding: 0.5rem 0;
}

.detail__utility i {
  color: var(--color-brand);
  font-size: 0.85rem;
  width: 1.2rem;
  text-align: center;
  flex-shrink: 0;
}

/* Noise assessment */
.noise {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.noise__meter {
  display: flex;
  gap: 3px;
}

.noise__bar {
  width: 24px;
  height: 8px;
  border-radius: 4px;
  background: var(--color-border);
}

.noise__bar--filled {
  background: var(--color-brand);
}

.noise__label {
  font-size: 0.9rem;
  font-weight: 600;
}

.noise__details {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.noise__sources {
  margin-bottom: var(--space-xs);
}

.noise__sources i {
  color: var(--color-brand);
  margin-right: 0.2rem;
}

.noise__factors {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
}

.noise__factors span {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
}

.noise__factors i {
  color: var(--color-brand);
  font-size: 0.75rem;
}

/* ===== Reviews ===== */
.reviews__summary {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.reviews__rating {
  font-size: 1.5rem;
  font-weight: 800;
}

.reviews__stars {
  display: flex;
  gap: 2px;
  color: var(--color-brand);
  font-size: 0.85rem;
}

.reviews__count {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.reviews__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.review-card {
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.review-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.25rem;
}

.review-card__author {
  font-weight: 600;
  font-size: 0.85rem;
}

.review-card__time {
  font-size: 0.75rem;
  color: var(--color-muted);
}

.review-card__stars {
  color: var(--color-brand);
  font-size: 0.7rem;
  margin-bottom: 0.4rem;
  display: flex;
  gap: 1px;
}

.review-card__text {
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.6;
}

.reviews__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.reviews__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.15s;
}

.reviews__link:hover {
  border-color: var(--color-brand);
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
}

.reviews__link i {
  font-size: 0.85rem;
}

/* ===== Negotiation thread ===== */
.neg__header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.neg__listing-title {
  font-size: 1.1rem;
  font-weight: 700;
  display: block;
  margin-bottom: var(--space-xs);
}

.neg__thread {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.neg__msg {
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  max-width: 85%;
}

.neg__msg--mine {
  background: var(--color-brand-light);
  align-self: flex-end;
}

.neg__msg--theirs {
  background: var(--color-surface-2);
  align-self: flex-start;
}

.neg__msg-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
}

.neg__msg-from { font-size: 0.75rem; font-weight: 600; }
.neg__msg-time { font-size: 0.7rem; color: var(--color-muted); }

.neg__msg-amount {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 0.2rem;
}

.neg__msg-text {
  font-size: 0.85rem;
  color: var(--color-muted);
}

.neg__respond {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.neg__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.neg__form-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.neg__form-row label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.neg__form-actions {
  display: flex;
  gap: var(--space-xs);
}

.neg__form-actions .btn { flex: 1; }

.neg__waiting {
  text-align: center;
  padding: var(--space-lg);
  color: var(--color-muted);
  font-size: 0.9rem;
}

.neg__waiting i { margin-right: 0.3rem; }

.neg__accepted {
  text-align: center;
  padding: var(--space-lg);
  color: #16a34a;
}

.neg__accepted i { font-size: 2rem; display: block; margin-bottom: var(--space-sm); }

.neg__declined {
  text-align: center;
  padding: var(--space-lg);
  color: var(--color-muted);
}

.neg__declined i { font-size: 2rem; display: block; margin-bottom: var(--space-sm); }

/* Badge for open status */
.badge--open { background: #dbeafe; color: #1e40af; }
[data-theme="dark"] .badge--open { background: rgba(59,130,246,0.15); color: #60a5fa; }
.badge--declined { background: #fee2e2; color: #991b1b; }
[data-theme="dark"] .badge--declined { background: rgba(239,68,68,0.12); color: #f87171; }
.badge--accepted { background: #d1fae5; color: #065f46; }
[data-theme="dark"] .badge--accepted { background: rgba(16,185,129,0.15); color: #34d399; }

/* ===== Location info cards ===== */
.location-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

@media (min-width: 500px) {
  .location-info { grid-template-columns: 1fr 1fr; }
}

.location-info__card {
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.location-info__card i {
  color: var(--color-brand);
  font-size: 1rem;
  margin-bottom: 0.4rem;
  display: block;
}

.location-info__card h4 {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.location-info__card p {
  font-size: 0.8rem;
  color: var(--color-muted);
  line-height: 1.5;
}

/* ===== Photo gallery (listing detail) ===== */
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: var(--space-sm);
  overflow: hidden;
  border-radius: var(--radius);
}

/* The thumbnails are buttons now, so the grid rules move onto them and the button's
   own chrome is stripped back to nothing. */
.gallery__item {
  display: block;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.gallery__item--main { grid-column: 1 / -1; }
.gallery__item:focus-visible {
  outline: 3px solid var(--color-brand);
  outline-offset: 2px;
}

.gallery__img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s, transform 0.3s ease;
}

.gallery__item:hover .gallery__img { opacity: 0.92; transform: scale(1.02); }

.gallery__img--main { aspect-ratio: 16/9; }


@media (min-width: 600px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .gallery__img--main {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    aspect-ratio: auto;
    height: 100%;
  }
}

/* ===== Inputs ===== */
.input {
  display: block;
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: var(--font);
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.15s;
}

.input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px var(--color-brand-light);
}

.input--lg {
  padding: 0.85rem 1.1rem;
  font-size: 1rem;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* em so the spacing scales with btn--sm and btn--lg */
  gap: 0.5em;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  border: none;
  transition: opacity 0.15s, transform 0.1s;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover { opacity: 0.85; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn--primary {
  background: var(--color-surface-2);
  color: var(--color-text);
}

.btn--brand {
  background: var(--color-brand);
  color: #fff;
}

.btn--outline {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
}

.btn--outline:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.btn--sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.btn--lg { padding: 0.85rem 1.3rem; font-size: 0.95rem; }
.btn--full { width: 100%; }

/* ===== Form ===== */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  max-width: 400px;
}

.label {
  font-size: 0.85rem;
  font-weight: 600;
}

/* Dev mode magic link */
.dev-link {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border: 2px dashed var(--color-brand);
  border-radius: var(--radius);
  max-width: 400px;
  width: 100%;
}

.dev-link__label {
  font-size: 0.8rem;
  color: var(--color-brand);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

/* ===== Text helpers ===== */
.text--muted { color: var(--color-muted); }
.link { color: var(--color-brand); text-decoration: underline; }

/* ===== List ===== */
.list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-2);
}

.list__item + .list__item {
  border-top: 1px solid var(--color-border);
}

/* ===== Badge ===== */
.badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2em 0.55em;
  border-radius: var(--radius);
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ===== Wizard ===== */
.wizard { width: 100%; max-width: 500px; }

.wizard__dots {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); }
.dot--active { background: var(--color-brand); }

/* ===== Booking box ===== */
.booking-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.booking-box__price { font-size: 1.5rem; font-weight: 700; }
.booking-box__price span { font-size: 0.85rem; font-weight: 400; color: var(--color-muted); }

/* ===== Booking form (on listing detail) ===== */
.booking-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.booking-form__dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xs);
}

.booking-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.booking-form__field label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

/* ===== Bid card ===== */
.bid-card {
  border-radius: var(--radius);
  padding: var(--space-md);
  /* Deliberately borderless (see 7d73dac); on a white page it needs the grey fill
     instead, or the card has no edge at all. */
  background: var(--color-surface-2);
  margin-top: var(--space-sm);
}

.bid-card__header {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  margin-bottom: var(--space-md);
}

.bid-card__header > i {
  color: var(--color-brand);
  font-size: 1.1rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.bid-card__header h3 {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.1rem;
}

.bid-card__header p {
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.4;
}

.bid-card__form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.bid-card__row {
  display: flex;
  gap: 0.4rem;
  align-items: stretch;
}

.bid-card__amount {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 0.6rem;
  transition: border-color 0.15s;
}

.bid-card__amount:focus-within {
  border-color: var(--color-brand);
}

.bid-card__currency {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-muted);
}

.bid-card__field {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font);
  outline: none;
  padding: 0.5rem 0;
  -moz-appearance: textfield;
  min-width: 0;
  width: 60px;
}

.bid-card__field::placeholder { color: var(--color-border); font-weight: 400; }
.bid-card__field::-webkit-inner-spin-button { -webkit-appearance: none; }

.bid-card__send {
  flex-shrink: 0;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-sm);
}

.bid-card__msg {
  border: none;
  background: transparent;
  font-size: 0.78rem;
  font-family: var(--font);
  color: var(--color-muted);
  padding: 0.3rem 0;
  outline: none;
}

.bid-card__msg::placeholder { color: var(--color-border); }

.booking-form__total {
  font-size: 0.85rem;
  color: var(--color-muted);
  min-height: 1.2em;
}

/* Booking confirmation */
.booking-confirm {
  max-width: 440px;
  text-align: center;
}

.booking-confirm__icon {
  font-size: 3rem;
  color: var(--color-brand);
  margin-bottom: var(--space-md);
}

.booking-confirm__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  text-align: left;
  margin-top: var(--space-md);
}

.booking-confirm__card h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.booking-confirm__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.booking-confirm__label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color-muted);
  display: block;
}

.booking-confirm__value {
  font-size: 0.95rem;
  font-weight: 600;
}

/* Trips list & trip cards */
.trips-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.trip-card {
  display: flex;
  gap: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  align-items: flex-start;
}

.trip-card__img {
  width: 100px;
  height: 75px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.trip-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trip-card__info {
  flex: 1;
  min-width: 0;
}

.trip-card__title {
  font-weight: 700;
  font-size: 0.95rem;
  display: block;
  margin-bottom: 0.15rem;
}

.trip-card__addr {
  font-size: 0.8rem;
  margin-bottom: var(--space-xs);
}

.trip-card__dates {
  font-size: 0.8rem;
  color: var(--color-muted);
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.trip-card__dates i { font-size: 0.65rem; margin: 0 0.15rem; }

.trip-card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.trip-card__price {
  font-weight: 700;
  font-size: 0.9rem;
}

/* Badge colors */
.badge--pending { background: #fef3c7; color: #92400e; }
.badge--confirmed { background: #d1fae5; color: #065f46; }
.badge--cancelled { background: #fee2e2; color: #991b1b; }
.badge--completed { background: var(--color-brand-light); color: var(--color-brand-dark); }

[data-theme="dark"] .badge--pending { background: rgba(251,191,36,0.15); color: #fbbf24; }
[data-theme="dark"] .badge--confirmed { background: rgba(16,185,129,0.15); color: #34d399; }
[data-theme="dark"] .badge--cancelled { background: rgba(239,68,68,0.12); color: #f87171; }

/* ===== Wizard forms ===== */
.wizard__form {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  text-align: left;
}

.wizard__field { display: flex; flex-direction: column; gap: 0.3rem; }
.wizard__field--center { align-items: center; }

.wizard__label {
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.wizard__label i { color: var(--color-brand); font-size: 0.8rem; }

.wizard__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.wizard__input-spaced { margin-bottom: 0.35rem; }

.wizard__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-md);
  gap: var(--space-sm);
}

.wizard__nav--publish { flex-wrap: wrap; justify-content: center; }

.wizard__error {
  color: #ef4444;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: var(--space-sm);
}

.wizard__textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--font);
}

.wizard__video-preview {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  margin-top: 0.5rem;
}

.wizard__video-preview iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.wizard__summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.wizard__summary i { color: var(--color-brand); margin-right: 0.3rem; }

/* Price input */
.price-input {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin: var(--space-md) 0;
}

.price-input__currency {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-muted);
}

.price-input__field {
  font-size: 2.5rem;
  font-weight: 800;
  text-align: center;
  border: none;
  border-bottom: 2px solid var(--color-border);
  background: transparent;
  color: var(--color-text);
  width: 150px;
  outline: none;
  font-family: var(--font);
  -moz-appearance: textfield;
}

.price-input__field:focus { border-color: var(--color-brand); }
.price-input__field::-webkit-inner-spin-button { -webkit-appearance: none; }

.price-input__unit {
  font-size: 1rem;
  color: var(--color-muted);
}

/* Toggle switch */
.toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.toggle input { display: none; }

.toggle__switch {
  width: 44px;
  height: 24px;
  border-radius: var(--radius);
  background: var(--color-border);
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.toggle__switch::after {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.toggle input:checked + .toggle__switch {
  background: var(--color-brand);
}

.toggle input:checked + .toggle__switch::after {
  transform: translateX(20px);
}

.toggle__label { font-size: 0.9rem; font-weight: 500; }

/* Noise level selector */
.noise-select {
  display: flex;
  gap: 0.35rem;
}

.noise-select__opt {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.noise-select__opt input { display: none; }

.noise-select__opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.15s;
}

.noise-select__opt input:checked + span {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}

/* Utility grid */
.util-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem;
}

@media (min-width: 420px) { .util-grid { grid-template-columns: repeat(3, 1fr); } }

.util-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.util-chip input { display: none; }
.util-chip i { color: var(--color-muted); font-size: 0.8rem; flex-shrink: 0; }

.util-chip--active,
.util-chip:has(input:checked) {
  border-color: var(--color-brand);
  background: var(--color-brand-light);
}

.util-chip--active i,
.util-chip:has(input:checked) i {
  color: var(--color-brand);
}

/* Calendar */
.cal { display: flex; flex-direction: column; gap: var(--space-lg); }

.cal__month-title {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: var(--space-xs);
  text-align: center;
}

.cal__header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 0.25rem;
}

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
  min-height: 36px;
}

.cal__day input { display: none; }

.cal__day span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.cal__day:hover span { background: var(--color-surface-2); }

.cal__day input:checked + span {
  background: #fee2e2;
  color: #ef4444;
  text-decoration: line-through;
  font-weight: 600;
}

[data-theme="dark"] .cal__day input:checked + span {
  background: rgba(239,68,68,0.15);
}

.cal__day--empty { cursor: default; }
.cal__day--past { opacity: 0.3; pointer-events: none; }

/* ===== Destination index ===== */
.dest-region { margin-bottom: var(--space-xl); }

.dest-region__title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.dest-region__title i { color: var(--color-brand); }

.dest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-sm);
}

.dest-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  transition: all 0.15s;
  text-decoration: none;
  overflow: hidden;
  background: #1a1a1a;
}

.dest-card__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  background: var(--color-surface-2);
  transition: transform 0.4s ease;
}

.dest-card:hover .dest-card__img {
  transform: scale(1.04);
}

/* Placeholder keeps the card geometry identical before a photo exists. Dark, so the
   overlaid label reads the same with or without a photo. */
.dest-card__img--empty {
  background: linear-gradient(135deg, #4a4a4a, #222);
}

.dest-card__body {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0) 100%);
}

.dest-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

.dest-card__name {
  font-weight: 700;
  font-size: 1.05rem;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.dest-card__country {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.82);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.dest-card__line {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.9);
  margin-top: var(--space-xs);
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== Destination detail ===== */
.dest {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
}

.dest__header--photo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 340px;
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
  margin-bottom: var(--space-xs);
}

.dest__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim: dark enough at the base for white text on any photo, clear at the top */
.dest__header--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 38%, rgba(0,0,0,0.08) 70%, rgba(0,0,0,0) 100%);
}

.dest__header--photo .dest__header-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--space-lg) var(--space-md);
  color: #fff;
}

.dest__header--photo .dest__title {
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

.dest__header--photo .dest__country,
.dest__header--photo .dest__hero {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 10px rgba(0,0,0,0.55);
}

/* Desktop hero: tall enough to read as a cover image rather than a banner */
@media (min-width: 768px) {
  .dest__header--photo {
    min-height: 600px;
  }

  .dest__header--photo .dest__header-inner {
    padding: var(--space-xl) var(--space-lg);
  }
}

.dest__photo-credit {
  font-size: 0.7rem;
  color: var(--color-muted);
  text-align: right;
  margin: 0 0 var(--space-lg);
}

.dest__photo-credit a {
  color: var(--color-muted);
  text-decoration: underline;
}

.dest__photo-credit a:hover { color: var(--color-brand); }

.dest__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.dest__title {
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.dest__country {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-bottom: var(--space-xs);
}

.dest__hero {
  font-size: 1.1rem;
  color: var(--color-muted);
  margin-bottom: var(--space-md);
}

.dest__scores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.dest__score-name {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-bottom: 0.35rem;
}

/* Inside the summary tiles the rating is the content, not a lead-in */
.dest__scores .score { margin-bottom: 0; flex-direction: column; align-items: flex-start; gap: 0.2rem; }

.dest__score-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.dest__score-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-brand);
}

.dest__score-label {
  font-size: 0.75rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.dest__section {
  margin-bottom: var(--space-lg);
}

/* Guide cards flow continuously down two columns on desktop.
   Multi-column rather than grid on purpose: a grid lays out rows, and a row makes
   every column wait for its tallest card before the next one starts. Here a short
   card simply means the next card begins sooner. */
.dest__cards {
  margin-bottom: var(--space-md);
}

.dest__cards > .dest__section--card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: var(--space-md);
}

@media (min-width: 760px) {
  .dest__cards {
    column-count: 2;
    column-gap: var(--space-md);
  }
}

/* Cards sit above the tinted page: white, with a hairline and a soft shadow */
.dest__section--card {
  margin: 0;
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--color-shadow);
  display: flex;
  flex-direction: column;
}

.dest__section h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Larger icon, no plate behind it */
.dest__section h2 i {
  flex-shrink: 0;
  width: 1.5rem;
  display: inline-flex;
  justify-content: center;
  font-size: 1.15rem;
  color: var(--color-brand);
}


.dest__section p {
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* Temp chart */
.temp-chart {
  display: flex;
  align-items: flex-end;
  gap: 0.3rem;
  overflow-x: auto;
  /* The looping script repositions this by a whole set of months; with smooth
     scrolling inherited that jump would animate and the seam would be visible. */
  scroll-behavior: auto;
  scrollbar-width: none;
  /* overflow-x: auto forces overflow-y to auto, so the current-month band has to
     fit inside the padding box or it gets clipped and adds a stray scrollbar */
  padding: 12px 0;
}

.temp-chart__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  /* grow to fill the container, never shrink below 38px — below that the
     chart scrolls horizontally instead of squashing */
  flex: 1 0 38px;
  padding: 0.3rem 0.15rem;
}

/* Months the guide recommends visiting in */
.temp-chart__col--best {
  background: var(--color-good-bg);
}

.temp-chart__col--best .temp-chart__month,
.temp-chart__col--best .temp-chart__high {
  color: var(--color-good);
}

.temp-chart__legend {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.7rem;
  color: var(--color-muted);
  margin: var(--space-xs) 0 0;
}

.temp-chart__legend-swatch {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 3px;
  background: var(--color-good-bg);
  flex-shrink: 0;
}

/* Best time to visit — same green language as the chart */
.dest__best-months {
  background: var(--color-good-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin: 0;
  font-weight: 600;
}

.temp-chart__high {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text);
}

.temp-chart__bar {
  width: 70%;
  max-width: 48px;
  background: linear-gradient(to top, var(--color-brand-light), var(--color-brand));
  min-height: 12px;
}

.temp-chart__low {
  font-size: 0.65rem;
  color: var(--color-muted);
}

.temp-chart__month {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Info grid */
.dest__info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

/* Inside a card the info tiles need the page colour to separate from the surface */
.dest__section--card .dest__info-card {
  background: var(--color-surface-2);
}

.dest__section--card p {
  margin: 0;
}

.dest__info-card {
  padding: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.dest__info-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
}

.dest__info-value {
  font-size: 0.9rem;
  font-weight: 600;
}

/* List */
.dest__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.dest__list li {
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.6;
  padding-left: 1.2rem;
  position: relative;
}

.dest__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand);
}

/* Tags */
.dest__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.dest__tag {
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius);
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
  font-size: 0.8rem;
  font-weight: 500;
}

.dest__footer {
  text-align: center;
  margin-top: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}


/* ===== Mobile refinements ===== */
@media (max-width: 480px) {
  .nav { padding: var(--space-xs) var(--space-sm); }
  .nav__links { gap: 0.4rem; font-size: 0.8rem; }
  .hero { padding: var(--space-md) var(--space-sm); }
  .hero__title { font-size: 1.6rem; }
  .section { padding: 0 var(--space-sm) var(--space-lg); }
  .map-section { padding: 0 var(--space-sm) var(--space-lg); }
  .grid { gap: 0.4rem; }
  .card { border-radius: var(--radius-sm); }
  .card__title { font-size: 0.8rem; }
  .card__body { padding: var(--space-xs); }
  .detail__video { max-height: 75vh; }
}

@media (max-width: 360px) {
  .a11y-bar { display: none; }
  .hero__search { flex-direction: column; }
  .hero__search .btn { width: 100%; }
  .nav__logo-text { display: none; }
}

/* ===== Footer navigation ===== */
.footer__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto var(--space-lg);
  text-align: left;
}

.footer__col { display: flex; flex-direction: column; gap: 0.35rem; }

.footer__heading {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin: 0 0 var(--space-xs);
}

.footer__links a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.8rem;
}

.footer__links a:hover { color: var(--color-brand); text-decoration: underline; }

.footer__copy { margin: 0; }

/* ===== Page header block & action rows ===== */
.page__header-block { margin-bottom: var(--space-lg); }

.page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

/* ===== Empty state ===== */
.empty-state {
  text-align: center;
  padding: var(--space-xl) var(--space-md);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius);
}

.empty-state__icon { font-size: 2rem; color: var(--color-muted); margin-bottom: var(--space-md); }
.empty-state__title { font-size: 1.15rem; margin: 0 0 var(--space-xs); }

.empty-state__text {
  color: var(--color-muted);
  font-size: 0.9rem;
  max-width: 46ch;
  margin: 0 auto var(--space-md);
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

/* ===== Numbered steps ===== */
.steps-list {
  padding-left: 1.25rem;
  margin: 0 0 var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: 0.9rem;
}

.steps-list li { line-height: 1.55; }

/* ===== Guide cards ===== */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-md);
  margin: var(--space-md) 0 var(--space-lg);
}

.guide-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: all 0.15s;
}

.guide-card:hover {
  border-color: var(--color-brand);
  background: var(--color-brand-light);
  transform: translateY(-1px);
}

.guide-card__icon { font-size: 1.15rem; color: var(--color-brand); margin-bottom: var(--space-sm); }

.guide-card__audience {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
}

.guide-card__title { font-size: 0.95rem; font-weight: 700; margin: 0 0 var(--space-xs); line-height: 1.35; }
.guide-card__summary { font-size: 0.82rem; color: var(--color-muted); margin: 0; line-height: 1.5; }

/* ===== Earnings calculator ===== */
.calc {
  max-width: var(--max-width);
  margin: 0 auto;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg) var(--space-md);
}

.calc__controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.calc__field { display: flex; flex-direction: column; gap: var(--space-xs); }

.calc__label { font-size: 0.8rem; font-weight: 600; color: var(--color-muted); }

.calc__range { width: 100%; accent-color: var(--color-brand); }

.calc__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-sm);
}

.calc__result {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-align: center;
}

.calc__result--primary { background: var(--color-brand-light); }

.calc__result-value { font-size: 1.35rem; font-weight: 700; }
.calc__result--primary .calc__result-value { color: var(--color-brand); }
.calc__result-label { font-size: 0.7rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.03em; }

.calc__note {
  font-size: 0.75rem;
  color: var(--color-muted);
  line-height: 1.55;
  margin: var(--space-md) 0 0;
}

/* ===== Data table ===== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 460px;
}

.data-table th,
.data-table td {
  padding: var(--space-sm);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.data-table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

.data-table tbody tr:hover { background: var(--color-hover-bg); }

/* ===== Destination: stays module & host CTA ===== */
.dest__stays { margin-top: var(--space-lg); }

.dest__cta {
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.dest__cta p { font-size: 0.88rem; color: var(--color-muted); margin: 0 0 var(--space-md); line-height: 1.6; }

.dest__cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

@media (max-width: 480px) {
  .calc { padding: var(--space-md) var(--space-sm); border: none; }
  .calc__result-value { font-size: 1.15rem; }
  .footer__links { text-align: center; }
  .footer__col { align-items: center; }
}

/* ===== Per-city letting context (earnings pages) ===== */
.context-list {
  display: grid;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.context-item {
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.context-item h3 {
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.context-item h3 i { color: var(--color-brand); font-size: 0.8rem; }

.context-item p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--color-muted);
}

@media (min-width: 700px) {
  .context-list { grid-template-columns: 1fr 1fr; }
}

/* ===== Star ratings on guide cards ===== */
.score {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.score__stars {
  display: inline-flex;
  gap: 0.1rem;
  color: var(--color-brand);
  font-size: 0.78rem;
}

/* Unfilled stars stay visible but recede */
.score__stars .fa-regular { color: var(--color-border); }

.score__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.score__source {
  font-size: 0.7rem;
  color: var(--color-muted);
  margin-top: var(--space-sm) !important;
}

/* ===== Numbeo price list on the currency card ===== */
.dest__subhead {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: var(--space-md) 0 var(--space-xs);
}

.price-list {
  list-style: none;
  margin: 0 0 var(--space-xs);
  padding: 0;
}

.price-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.82rem;
}

.price-list li:last-child { border-bottom: none; }
.price-list span { color: var(--color-muted); }
.price-list b { white-space: nowrap; font-weight: 600; }

/* ===== ATM warnings ===== */
.atm-warn,
.atm-ok {
  margin-top: var(--space-md);
}

.atm-warn__title,
.atm-ok__title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-xs);
}

.atm-warn__title { color: #c0392b; }
.atm-ok__title { color: var(--color-good); }

[data-theme="dark"] .atm-warn__title { color: #ff7a6b; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .atm-warn__title { color: #ff7a6b; }
}

.atm-warn__list,
.atm-ok__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.atm-warn__list li,
.atm-ok__list li {
  font-size: 0.78rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.atm-warn__list li { border-color: rgba(192,57,43,0.35); }
.atm-ok__list li { border-color: var(--color-good-bg); background: var(--color-good-bg); }

.atm-note {
  font-size: 0.78rem;
  color: var(--color-muted);
  line-height: 1.6;
  margin-top: var(--space-sm) !important;
}

.atm-note--rule i { color: var(--color-brand); margin-right: 0.25rem; }

/* ===== Rainfall chart ===== */
.rain-chart__bar {
  width: 70%;
  max-width: 48px;
  background: linear-gradient(to top, var(--color-rain-light), var(--color-rain));
  min-height: 3px;
}

/* ===== Current month band on the climate charts ===== */
.temp-chart__col { position: relative; }

/* A band drawn behind and beyond the column, so a month that is both current and
   a best month keeps its green fill and gains a frame, rather than one hiding
   the other. Neutral on purpose — the coral and blue are the data's colours. */
.temp-chart__col--now::before {
  content: '';
  position: absolute;
  inset: -10px -4px;
  background: var(--color-now);
  border-top: 2px solid var(--color-now-edge);
  z-index: -1;
}

.temp-chart__col--now .temp-chart__month {
  font-weight: 800;
  color: var(--color-text);
}

.temp-chart__legend-now {
  width: 0.85rem;
  height: 0.85rem;
  background: var(--color-now);
  border-top: 2px solid var(--color-now-edge);
  flex-shrink: 0;
  margin-left: var(--space-sm);
}



/* "Now" label above the current month. In flow, so the column simply grows
   upward — the bars stay aligned on their shared baseline. */
.temp-chart__now {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 0.15rem;
  white-space: nowrap;
}

/* ===== Climate block: two charts sharing one column grid ===== */
.climate {
  position: relative;
}

.climate__caption {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: var(--space-md) 0 var(--space-xs);
}

.climate__caption:first-of-type { margin-top: 0; }

/* The single current-month band. Mobile keeps the per-column bands, because the
   charts scroll horizontally there and an absolute band would sit over the wrong
   month once scrolled. */
.climate__band { display: none; }

@media (min-width: 760px) {
  .climate__band {
    /* Columns are flex: 1 0 38px with a 0.3rem gap, so on desktop they share the
       width equally and the nth column's offset is arithmetic. */
    --col: calc((100% - 11 * 0.3rem) / 12);
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc((var(--col) + 0.3rem) * var(--now-index) - 4px);
    width: calc(var(--col) + 8px);
    background: var(--color-now);
    border-top: 2px solid var(--color-now-edge);
    pointer-events: none;
  }

  /* Replaced by the single band above */
  .temp-chart__col--now::before { display: none; }
}

/* ===== Phrases card ===== */
.phrase-lang {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin: 0 0 var(--space-sm) !important;
}

.phrase-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.phrase-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--color-border);
}

.phrase-list li:last-child { border-bottom: none; }

.phrase-list__label {
  font-size: 0.8rem;
  color: var(--color-muted);
}

.phrase-list__local {
  font-size: 0.85rem;
  font-weight: 600;
  text-align: right;
}

.phrase-list__pron {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  font-style: normal;
  color: var(--color-muted);
}

/* ===== Do's and don'ts card ===== */
.manners__title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: var(--space-md) 0 var(--space-xs);
}

.manners__title:first-of-type { margin-top: 0; }
.manners__title--do { color: var(--color-good); }
.manners__title--dont { color: #c0392b; }

[data-theme="dark"] .manners__title--dont { color: #ff7a6b; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .manners__title--dont { color: #ff7a6b; }
}

.manners__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.manners__list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--color-muted);
}

.manners__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-good);
}

.manners__list--dont li::before { background: #c0392b; }



/* ===== Claim page (migrated listings) ===== */

.claim {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
}

.claim__banner {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: var(--color-shadow);
}

.claim__title { font-size: 1.6rem; margin: 0 0 var(--space-sm); }
.claim__lead { margin: 0 0 var(--space-sm); line-height: 1.6; }
.claim__meta { margin: 0; font-size: 0.9rem; color: var(--color-muted); }

.claim__errors {
  background: var(--color-brand-light);
  border-left: 3px solid var(--color-brand);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}
.claim__errors p { margin: 0 0 var(--space-xs); }
.claim__errors ul { margin: 0; padding-left: 1.2rem; }
.claim__errors li { margin-bottom: 0.25rem; }

.claim__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}
.claim__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
}

.claim__section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  box-shadow: var(--color-shadow);
}
.claim__h2 { font-size: 1.15rem; margin: 0 0 var(--space-sm); }
.claim__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-muted);
  margin: var(--space-md) 0 0.35rem;
}
.claim__section > .claim__label:first-of-type { margin-top: 0; }
.claim__hint { font-size: 0.9rem; color: var(--color-muted); margin: 0 0 var(--space-sm); line-height: 1.5; }
.claim__textarea { min-height: 6rem; resize: vertical; }
.claim__photo-input { margin-bottom: var(--space-xs); }

.claim__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-sm);
  align-items: end;
}

.claim__utilities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-xs);
}
.claim__utility {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.claim__utility:hover { background: var(--color-hover-bg); }
.claim__utility i { color: var(--color-muted); width: 1.1rem; text-align: center; }

.claim__submit { margin-top: var(--space-lg); }
.claim__consent {
  font-size: 0.82rem;
  color: var(--color-muted);
  text-align: center;
  margin: var(--space-sm) 0 0;
  line-height: 1.5;
}

.claim__deadline {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin: var(--space-md) 0;
  text-align: left;
  box-shadow: var(--color-shadow);
}
.claim__deadline p { margin: 0 0 var(--space-xs); line-height: 1.55; }
.claim__deadline p:last-of-type { margin-bottom: var(--space-sm); }

.btn--danger { background: #c0392b; color: #fff; }
.btn--danger:hover { background: #a93226; }

/* A published listing still missing its video tour. */
.listing__incomplete {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  background: var(--color-brand-light);
  color: var(--color-brand-dark);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
}

/* A published listing whose host has not filmed their video tour yet. */
.detail__video-missing {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-surface-2);
  border-radius: var(--radius);
  padding: var(--space-md);
  color: var(--color-muted);
}
.detail__video-missing i { font-size: 1.5rem; }
.detail__video-missing strong { color: var(--color-text); }
.detail__video-missing p { margin: 0.15rem 0 0; font-size: 0.9rem; line-height: 1.5; }

.card__no-video {
  font-size: 0.72rem;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.45rem;
  white-space: nowrap;
}

/* ===== Health & emergencies card ===== */

.health__emergency {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
}
.health__emergency i { font-size: 1.35rem; color: var(--color-brand); }
.health__emergency-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.health__emergency strong { font-size: 1.05rem; }

.health__heading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: var(--space-md) 0 var(--space-xs);
}
.health__heading i { color: var(--color-muted); }
.health__heading--required i.fa-triangle-exclamation { color: #c0392b; }
.health__heading--required i.fa-circle-check { color: var(--color-good); }

.health__list { margin: 0; padding-left: 1.15rem; }
.health__list li { margin-bottom: 0.3rem; line-height: 1.5; }
.health__list--required li { font-weight: 600; }

.health__none {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.55;
}

.health__watch {
  border-left: 3px solid var(--color-brand);
  padding-left: var(--space-sm);
  margin: var(--space-sm) 0 0;
  line-height: 1.6;
}

.health__disclaimer {
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.55;
  margin: var(--space-md) 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

/* ===== Entry & visa card ===== */

.visa__picker {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}
.visa__picker-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
  white-space: nowrap;
}
.visa__picker-label i { margin-right: 0.3rem; }
.visa__select { flex: 1; min-width: 12rem; }

.visa__rules { display: flex; flex-direction: column; gap: var(--space-sm); }

/* Before a passport is known every rule is shown, so the reader sees the whole
   picture rather than a blank card. Once narrowed, the single answer stands alone. */
.visa__rule {
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}
.visa--narrowed .visa__rule { background: transparent; padding: 0; }

.visa__verdict {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  font-weight: 600;
}
.visa--narrowed .visa__verdict { font-size: 1.05rem; }
.visa__verdict i { font-size: 1.05rem; }
.visa__verdict--visa-free i { color: var(--color-good); }
.visa__verdict--eta i,
.visa__verdict--e-visa i,
.visa__verdict--on-arrival i { color: #b8860b; }
.visa__verdict--embassy i { color: #c0392b; }

.visa__days,
.visa__cost {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.45rem;
  color: var(--color-muted);
}
.visa--narrowed .visa__days,
.visa--narrowed .visa__cost { background: var(--color-surface-2); }

.visa__note {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-muted);
}

.visa__howto {
  margin: var(--space-md) 0 0;
  line-height: 1.6;
}

.visa__meta {
  margin: var(--space-md) 0 0;
  font-size: 0.88rem;
}
.visa__meta a { color: var(--color-brand); text-decoration: underline; }
.visa__meta span { color: var(--color-muted); }

.visa__disclaimer {
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.55;
  margin: var(--space-sm) 0 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

/* ===== Religion card ===== */

.faith__main {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 var(--space-xs);
}
.faith__note {
  margin: 0;
  line-height: 1.6;
  color: var(--color-muted);
}

.temp-chart::-webkit-scrollbar { display: none; }

/* ===== Condensed destination guide on the listing page ===== */

.guide__photo {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: var(--space-md);
}
.guide__photo img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.guide__photo:hover img { transform: scale(1.03); }
.guide__photo-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem var(--space-md) var(--space-sm);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  /* Scrim rather than a flat bar, so the photograph still reads underneath */
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
}

.guide__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.guide__cards .location-info__card h4 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
}
.guide__cards .location-info__card h4 i { color: var(--color-brand); }

.guide__rating {
  margin: 0 0 0.4rem !important;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.guide__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.55;
}
.guide__list li { margin-bottom: 0.25rem; }

.guide__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.guide__subhead {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1rem;
  margin: var(--space-lg) 0 var(--space-xs);
}
.guide__subhead i { color: var(--color-brand); }

.guide__link { margin-top: var(--space-md); }

/* ===== Quiet listings ===== */

/* A quiet score is the good news here, so the whole section sits on a green wash
   rather than repeating the word. No radius: it is a background, not a card, and
   it runs to the edges of the sidebar column. */
.noise--quiet {
  background: var(--color-quiet-bg);
  /* The wash already separates this from what is above it, so the rule that every
     other sidebar section carries would just be a line drawn across a colour block. */
  border-top: none;
  padding-top: var(--space-lg);
  padding-bottom: var(--space-md);
}

/* On desktop the section has no horizontal padding, so the wash would hug the text.
   Pad it out and pull the margins back by the same amount, so the text stays aligned
   with every other section and only the background moves. */
@media (min-width: 768px) {
  .noise--quiet {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    margin-left: calc(var(--space-md) * -1);
    margin-right: calc(var(--space-md) * -1);
  }
}
.noise--quiet .noise__label { color: var(--color-good); font-weight: 600; }

.card__quiet {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 3;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(26,127,79,0.92);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.45rem;
  white-space: nowrap;
}

/* ===== Photo lightbox ===== */

body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Solid, not near-solid. At 94% the page still bled through — the price and the
     header icons were faintly readable behind the photograph, which is exactly the
     distraction a full-screen viewer exists to remove. Black rather than the theme
     overlay, so the photo is not tinted by whichever theme the reader is in. */
  background: #000;
  padding: var(--space-md);
}
.lightbox[hidden] { display: none; }

.lightbox__stage {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__img {
  max-width: 100%;
  /* Leaves room for the counter without the photo ever being cropped. */
  max-height: calc(100vh - 6rem);
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  border-radius: 50%;
  transition: background 0.15s;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.lightbox__close {
  top: var(--space-md);
  right: var(--space-md);
  width: 2.6rem;
  height: 2.6rem;
  font-size: 1.7rem;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  font-size: 2rem;
}
.lightbox__nav--prev { left: var(--space-md); }
.lightbox__nav--next { right: var(--space-md); }

.lightbox__counter {
  position: absolute;
  bottom: var(--space-md);
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* On a phone the arrows would sit over the photo, and swiping is the natural gesture
   there anyway, so they drop away and only the close button and counter remain. */
@media (max-width: 600px) {
  .lightbox { padding: 0; }
  .lightbox__nav { display: none; }
  .lightbox__img { max-height: calc(100vh - 5rem); border-radius: 0; }
}

/* ===== Legal pages ===== */

.legal {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
}
.legal__meta {
  color: var(--color-muted);
  font-size: 0.85rem;
  margin: 0 0 var(--space-md);
}
.legal__intro {
  font-size: 1.05rem;
  line-height: 1.65;
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}
.legal__section { margin-bottom: var(--space-lg); }
.legal__heading {
  font-size: 1.15rem;
  margin: 0 0 var(--space-sm);
}
.legal__section p {
  line-height: 1.7;
  margin: 0 0 var(--space-sm);
}
.legal__list {
  margin: 0 0 var(--space-sm);
  padding-left: 1.2rem;
}
.legal__list li { line-height: 1.6; margin-bottom: 0.4rem; }
.legal__contact {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
}
.legal__contact a { color: var(--color-brand); text-decoration: underline; }

/* ===== "Where to?" wizard ===== */

.wz { max-width: 46rem; margin: 0 auto; }

.wz__progress {
  height: 4px;
  background: var(--color-surface-2);
  border-radius: 2px;
  margin-bottom: var(--space-lg);
  overflow: hidden;
}
.wz__progress-bar {
  display: block;
  height: 100%;
  width: 25%;
  background: var(--color-brand);
  transition: width 0.25s ease;
}

.wz__step {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
  /* Steps are hidden with [hidden] by the script; without it every step shows and the
     form is a plain four-question page. */
}
.wz__step[hidden] { display: none; }

.wz__q {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  padding: 0;
  margin-bottom: 0.35rem;
  outline: none;
}
@media (max-width: 600px) { .wz__q { font-size: 1.4rem; } }
.wz__hint { color: var(--color-muted); margin: 0 0 var(--space-sm); }

.wz__nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.wz__nav .wz__submit { flex: 1; }

.wz__back {
  border: none;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 0.5rem 0;
  font-size: 0.9rem;
  /* After the advance button in the DOM so the primary action comes first for a screen
     reader and in tab order; shown before it, where a back control belongs. */
  order: -1;
}
.wz__back:hover { color: var(--color-text); }

.wz__count {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin: 0 0 0.35rem;
}

.wz__opts {
  display: grid;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}
/* Tiles: icon above label, so each option is a target rather than a line of text.
   Sized to stay comfortably tappable on a phone. */
.wz__opts--tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.wz__opts--months { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); }

.wz__opt { position: relative; cursor: pointer; }
.wz__opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.wz__opt span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-align: center;
  padding: var(--space-md) 0.75rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  transition: border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s;
}
.wz__opt span i { font-size: 1.5rem; color: var(--color-muted); transition: color 0.15s, transform 0.2s; }
.wz__opt span b { font-weight: 600; line-height: 1.3; }
.wz__opt span small { color: var(--color-muted); font-size: 0.8rem; line-height: 1.35; }

.wz__opt:hover span {
  border-color: var(--color-brand);
  transform: translateY(-2px);
  box-shadow: var(--color-shadow);
}
.wz__opt:hover span i { transform: scale(1.08); }

.wz__opt input:checked + span {
  border-color: var(--color-brand);
  border-width: 2px;
  background: var(--color-brand-light);
}
.wz__opt input:checked + span i { color: var(--color-brand); }
/* A tick, so a chosen tile is not distinguished by colour alone. */
.wz__opt input:checked + span::after {
  content: '\2713';
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-brand);
}
/* Keyboard users get the same ring the mouse never needs. */
.wz__opt input:focus-visible + span { outline: 3px solid var(--color-brand); outline-offset: 2px; }

/* Months are smaller and carry a season tint, which is decoration only — the matching
   judges every destination on its own temperatures, hemisphere included. */
.wz__opt--month span { padding: 0.7rem 0.4rem; gap: 0.3rem; }
.wz__opt--month span i { font-size: 1rem; }
.wz__opt--month span b { font-size: 0.9rem; }
.wz__opt--winter span i { color: #5aa9dd; }
.wz__opt--spring span i { color: #4caf7d; }
.wz__opt--summer span i { color: #e8a33d; }
.wz__opt--autumn span i { color: #c9713f; }
.wz__opt--month input:checked + span i { color: var(--color-brand); }

.wz__submit { width: 100%; }

/* ===== Results ===== */

.wz__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.wz__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wz__card:hover { transform: translateY(-2px); box-shadow: var(--color-shadow); }

.wz__rank {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 2;
  width: 1.9rem;
  height: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-brand);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}

.wz__card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.wz__card-body { display: block; padding: var(--space-md); }
.wz__card-name { display: block; font-size: 1.15rem; font-weight: 700; }
.wz__card-country { display: block; color: var(--color-muted); font-size: 0.88rem; margin-bottom: var(--space-xs); }
.wz__why { display: block; line-height: 1.6; margin-bottom: var(--space-sm); }

.wz__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.wz__tag {
  font-size: 0.75rem;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.45rem;
  color: var(--color-muted);
}

/* Shown as prominently as the reasons: a recommendation with the drawbacks hidden is
   an advert, and the whole point of the guides is that they say the awkward part. */
.wz__caveat {
  display: block;
  margin-top: var(--space-sm);
  font-size: 0.85rem;
  color: var(--color-muted);
  border-left: 3px solid var(--color-brand);
  padding-left: var(--space-xs);
  line-height: 1.5;
}

.wz__again {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}
.wz__again-title { font-size: 1.1rem; margin: 0 0 var(--space-md); }

/* ===== "Where to?" card on the home page ===== */

/* The one dark block on an otherwise white page — it exists to interrupt a scroll, so
   it is built to look unlike everything above and below it.
 *
 * One structure at both sizes: the photograph gets its own space with only the heading
 * over it, and everything you have to read or tap sits on solid dark beside or below.
 * Stacked on a phone, side by side from 761px. Four images behind a scrim across the
 * whole card showed nothing on a narrow screen, and not much more on a wide one. */
.whereto-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  color: #fff;
  background: #0a0c12;
}

.whereto-card__bg {
  position: relative;
  grid-row: 1;
  grid-column: 1;
  aspect-ratio: 4 / 3;
}
.whereto-card__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The scrim belongs to the image rather than the card, so it covers exactly what the
   photographs cover at either size. Bottom-weighted, because the heading sits at the
   foot of the picture; dark by the halfway point, because the eyebrow is small orange
   text and was disappearing into bright water when the gradient started later. */
.whereto-card__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 12, 18, 0) 40%,
    rgba(10, 12, 18, 0.42) 60%,
    rgba(10, 12, 18, 0.86) 80%,
    rgba(10, 12, 18, 0.97) 100%
  );
}

/* Each photograph gets six seconds of a twenty-four second cycle, with a second either
   side to fade. The first is the base layer and is never animated: without it the card
   would open on black for the length of the first fade-in. */
@keyframes whereto-slot {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  29%  { opacity: 0; }
  100% { opacity: 0; }
}
.whereto-card__bg img:nth-child(n + 2) {
  opacity: 0;
  animation: whereto-slot 24s infinite;
  /* Hold the 0% state through the delay, or they would all show before their turn. */
  animation-fill-mode: backwards;
}
.whereto-card__bg img:nth-child(2) { animation-delay: 6s; }
.whereto-card__bg img:nth-child(3) { animation-delay: 12s; }
.whereto-card__bg img:nth-child(4) { animation-delay: 18s; }

/* Motion behind text is exactly what this setting is for. */
@media (prefers-reduced-motion: reduce) {
  .whereto-card__bg img:nth-child(n + 2) { animation: none; }
}

.whereto-card__head {
  grid-row: 1;
  grid-column: 1;
  align-self: end;
  z-index: 1;
  padding: var(--space-lg) var(--space-md);
  /* The eyebrow is small orange text and the photographs are now left bright above the
     gradient, so it needs to survive whatever ends up behind it — Tokyo at night is the
     case that proved it. Invisible against the dark areas. */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

.whereto-card__actions {
  grid-row: 2;
  grid-column: 1;
  padding: var(--space-lg) var(--space-md);
}

/* Side by side: photograph left with the heading on it, everything actionable right. */
@media (min-width: 761px) {
  .whereto-card {
    grid-template-rows: none;
    grid-template-columns: 1.05fr 1fr;
    min-height: 25rem;
  }
  .whereto-card__bg { grid-row: 1; grid-column: 1; aspect-ratio: auto; height: 100%; }
  /* The column is tall enough here that the heading only occupies its lower half, so
     the photograph is left alone above that and the gradient does its work near the
     bottom. On a phone the image is short and the text covers most of it, which is why
     that scrim starts much higher. */
  .whereto-card__bg::after {
    background: linear-gradient(
      180deg,
      rgba(10, 12, 18, 0) 46%,
      rgba(10, 12, 18, 0.28) 64%,
      rgba(10, 12, 18, 0.8) 82%,
      rgba(10, 12, 18, 0.96) 100%
    );
  }
  .whereto-card__head { grid-row: 1; grid-column: 1; padding: var(--space-lg); }
  .whereto-card__actions {
    grid-row: 1;
    grid-column: 2;
    align-self: center;
    padding: var(--space-xl) var(--space-lg);
  }
}

/* Its own backdrop rather than relying on the gradient: small orange text on a bright
   photograph is the one element that loses, and Tokyo at night proved it. This way the
   label reads the same whatever ends up behind it. */
.whereto-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--space-sm);
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-sm);
  background: rgba(10, 12, 18, 0.6);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-brand);
}

.whereto-card__title {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-sm);
  color: #fff;
}

.whereto-card__sub {
  margin: 0 0 var(--space-lg);
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}

.whereto-card__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 var(--space-xs);
}

.whereto-card__months {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: var(--space-lg);
}
.whereto-card__month {
  padding: 0.45rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.whereto-card__month:hover {
  background: #fff;
  border-color: #fff;
  color: #0f1623;
  transform: translateY(-1px);
}
/* The month someone is most likely to mean, marked without being preselected. */
.whereto-card__month--now {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
  font-weight: 700;
}

/* White on the dark card rather than the site's usual dark button, which would
   disappear into the background. */
.whereto-card__cta {
  background: #fff;
  color: #0f1623;
  border: none;
}
.whereto-card__cta:hover { background: rgba(255, 255, 255, 0.88); }

.whereto-card__meta {
  margin: var(--space-sm) 0 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

/* ---------------------------------------------------------------------------
   Card guarantee
   --------------------------------------------------------------------------- */

/* Messages that report the outcome of something the user just did. Errors keep a
   left rule rather than a full red field: a declined card is ordinary news for a host,
   not a system fault, and shouting about it makes the page feel broken. */
.alert {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius);
  margin-bottom: var(--space-md);
  font-size: 0.94rem;
  border-left: 3px solid transparent;
}
.alert--error {
  background: rgba(190, 60, 60, 0.08);
  border-left-color: #be3c3c;
}
.alert--ok {
  background: var(--color-quiet-bg);
  border-left-color: var(--color-good);
}
.alert a { text-decoration: underline; }

.checklist { list-style: none; padding: 0; margin: var(--space-md) 0; }
.checklist li {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
  padding: 0.3rem 0;
}
.checklist i { color: var(--color-good); font-size: 0.85em; }

/* The entry point on the host's listings page. */
.promo {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}
.promo:hover { background: var(--color-hover-bg); }
.promo__icon { font-size: 1.3rem; color: var(--color-muted); }
.promo__icon--on { color: var(--color-good); }
.promo__text { display: flex; flex-direction: column; gap: 0.15rem; }
.promo__text span { font-size: 0.9rem; }
.promo__go { margin-left: auto; color: var(--color-muted); font-size: 0.8rem; }

/* Where Stripe mounts its own iframe. Only spacing belongs here — the field's own
   appearance is set in guarantee.js, because Stripe styles what is inside the frame
   and CSS on this side cannot reach it. */
.card-field { margin: var(--space-md) 0; }

/* The held card, on a host's booking. Sits quietly under the booking rather than
   competing with it: the host looks here when something has gone wrong, not every time
   they open the page. */
.guarantee {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}
.guarantee__held { font-size: 0.88rem; color: var(--color-muted); margin: 0 0 var(--space-xs); }
.guarantee__held i { color: var(--color-good); }
.guarantee__form {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  flex-wrap: wrap;
}
.guarantee__reason,
.guarantee__amount {
  font: inherit;
  font-size: 0.88rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: inherit;
}
.guarantee__amount { width: 6.5rem; }
.guarantee__cap { font-size: 0.82rem; color: var(--color-muted); }

/* The guest's copy of the same fact, on their booking page. */
.guarantee-note {
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-quiet-bg);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}
.guarantee-note i { color: var(--color-good); }

/* Shared form field, used by the country picker on the guarantee setup page. */
.field { display: block; margin-bottom: var(--space-md); }
.field__label { display: block; font-weight: 600; margin-bottom: 0.3rem; font-size: 0.94rem; }
.field__input {
  font: inherit;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: inherit;
}
.field__hint { display: block; margin-top: 0.3rem; font-size: 0.82rem; color: var(--color-muted); }

.btn--block { width: 100%; }

/* The two levels of guest card, on the host's setup page. */
.tier {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.tier--on { border-color: var(--color-good); background: var(--color-quiet-bg); }
.tier__head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}
.tier__title { font-size: 1.05rem; margin: 0; }
.tier__title i { color: var(--color-good); margin-right: 0.3rem; }
.badge--on {
  background: var(--color-good);
  color: #fff;
  margin-left: auto;
}
.tier p { margin: 0 0 var(--space-xs); font-size: 0.94rem; }
.tier form { margin-top: var(--space-sm); }
.tier__off { margin-top: var(--space-md); text-align: center; }

/* A way out that does not compete with the two real choices above it. */
.btn--text {
  background: none;
  border: none;
  padding: 0.4rem;
  color: var(--color-muted);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: underline;
  cursor: pointer;
}
.btn--text:hover { color: inherit; }