/* ==========================================================================
   MOYA KHAOKHO — Bright Scandinavian variant
   Design system: white + birch/wood tan + powder blue neutrals,
   one soft-yellow accent (tied to the mustard sofa / yellow bench in the
   real photography). Newsreader (warm optical-size serif) for display type,
   Karla (rounded humanist grotesque) for body and UI — a pairing built
   for "fresh, light, natural" rather than a generic geometric sans.
   ========================================================================== */

/* ---------------- Tokens ---------------- */
:root {
  /* Neutrals: paper white */
  --color-paper: #fffdf9;
  --color-paper-dim: #fbf6ec;

  /* Neutrals: birch / wood tan */
  --color-birch-50:  #f8f1e3;
  --color-birch-100: #f1e3c9;
  --color-birch-200: #e6d1a8;
  --color-birch-400: #cba876;
  --color-birch-600: #9c7b4f;
  --color-wood-800:  #513c28;
  --color-wood-900:  #362617;

  /* Neutrals: powder blue */
  --color-powder-50:  #eaf6f8;
  --color-powder-100: #d8eef2;
  --color-powder-200: #bfe3ea;
  --color-powder-400: #8bc2cf;
  --color-powder-600: #4c8697;

  /* Ink (warm near-black, used as body/heading text) */
  --color-ink: #29241e;
  --color-ink-soft: #5a4f42;
  --color-ink-faint: #8a7c6a;

  /* The one accent: soft yellow, in a range of strengths */
  --color-accent-50:  #fff6dc;
  --color-accent-100: #ffecb0;
  --color-accent-300: #ffdc72;
  --color-accent-500: #f3b62d;
  --color-accent-600: #e29f13;
  --color-accent-700: #8a5a0a;

  /* Semantic aliases */
  --bg-page: var(--color-paper);
  --text-body: var(--color-ink);
  --text-muted: var(--color-ink-soft);
  --border-soft: var(--color-birch-200);

  /* Type */
  /* Noto Sans Thai as a fallback (not the primary) - Karla/Newsreader carry
     Latin text exactly as before, the browser only reaches past them for
     glyphs they don't have (Thai script), so the two languages share type
     scale/weights without a visible font swap on the Latin half. */
  --font-display: 'Newsreader', 'Noto Sans Thai', 'Georgia', serif;
  --font-body: 'Karla', 'Noto Sans Thai', 'Segoe UI', sans-serif;

  /* Radius — one consistent, soft system */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  /* Shadow — diffused, warm-tinted daylight, never harsh black */
  --shadow-sm: 0 2px 12px rgba(66, 47, 24, 0.08);
  --shadow-md: 0 12px 32px rgba(66, 47, 24, 0.12);
  --shadow-lg: 0 28px 64px rgba(66, 47, 24, 0.16);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 132px;

  /* Layout */
  --container-w: 1240px;
  --nav-h: 84px;
}

/* ---------------- Reset ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The off-canvas mobile nav panel sits at right:0 and is pushed fully
     off-screen via translateX(100%) - its pre-transform layout box still
     extends past the viewport edge by its own width, which inflates
     document scrollWidth (confirmed: 768px viewport -> 1108px scrollWidth,
     exactly viewport + panel width) even though nothing is visibly
     overflowing. overflow-x must be hidden on html, not just body, or the
     page gets a phantom horizontal scrollbar/scroll range on every
     viewport narrower than the panel's max-width. */
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

h2 { font-size: clamp(30px, 4vw, 46px); }
h3 { font-size: clamp(22px, 2.6vw, 28px); }

p { color: var(--text-muted); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: var(--space-3);
}

/* Visually-hidden but available to assistive tech */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-5);
  z-index: 200;
  background: var(--color-ink);
  color: var(--color-paper);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: var(--space-4); }

/* Focus states — visible everywhere, accent-tinted */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-accent-700);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 15px 28px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: 2px solid transparent;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }

.btn-accent {
  background: var(--color-accent-600);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
}
.btn-accent:hover { background: var(--color-accent-500); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-accent:active { transform: translateY(0); }

.btn-outline {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}
.btn-outline:hover { background: var(--color-ink); color: var(--color-paper); }

.btn-outline-light {
  background: rgba(255, 253, 249, 0.14);
  border-color: rgba(255, 253, 249, 0.85);
  color: var(--color-paper);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.btn-outline-light:hover { background: var(--color-paper); color: var(--color-ink); }

.btn-sm { padding: 10px 20px; font-size: 14px; }

/* ---------------- Header / Nav ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  isolation: isolate; /* own stacking context so the toggle's high z-index only has to beat the panel, never the whole page */
}

.nav {
  /* backdrop-filter below creates its own stacking context, which would
     otherwise trap .nav-toggle's z-index inside .nav and let the fixed
     .nav-scrim (a sibling, outside .nav) paint over the toggle button at
     the .site-header level. Giving .nav an explicit position + z-index
     higher than .nav-scrim's makes it compete on equal terms instead. */
  position: relative;
  z-index: 110;
  background: rgba(255, 253, 249, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  gap: var(--space-5);
}

.nav-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--color-ink);
  flex-shrink: 0;
}

.nav-logo {
  display: block;
  height: 38px;
  width: auto;
}

.nav-primary {
  display: flex;
  align-items: center;
  gap: var(--space-7);
  margin-left: auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.nav-link {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-ink-soft);
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-link:hover { color: var(--color-ink); border-color: var(--color-accent-500); }

.nav-cta { flex-shrink: 0; }

/* ---------------- Language switch ---------------- */
.lang-switch {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  background: var(--color-birch-50);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
}
.lang-btn {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--color-ink-soft);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.lang-btn:hover { color: var(--color-ink); }
.lang-btn.is-active {
  background: var(--color-accent-500);
  color: var(--color-ink);
}
.lang-switch--panel { width: 100%; margin-top: var(--space-5); }
.lang-switch--panel .lang-btn { flex: 1; text-align: center; }

/* Toggle: relative + explicit high z-index so it can NEVER be painted over
   by the fixed nav panel, regardless of DOM order. This is the fix for the
   known "static sibling under a fixed panel" bug. */
.nav-toggle {
  display: none;
  position: relative;
  z-index: 120;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  flex-shrink: 0;
}
.nav-toggle:hover { background: var(--color-birch-100); }
.nav-toggle svg { width: 24px; height: 24px; }

.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(41, 36, 30, 0.32);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 90;
}
.nav-scrim.is-open { opacity: 1; pointer-events: auto; }

/* The off-canvas panel only exists below the mobile breakpoint; at desktop
   .nav-primary (in-flow, always visible) is the real nav, so the panel must
   stay fully out of flow and hidden here or it renders as a second, static
   nav-links list stacked under the header. */
.nav-panel { display: none; }

/* Give the nav a little breathing room in the narrow-desktop/tablet-landscape
   band just above the 900px collapse point, now that .lang-switch sits in
   nav-primary alongside the links and the Book button. */
@media (max-width: 1100px) {
  .nav-primary { gap: var(--space-5); }
  .nav-links { gap: var(--space-4); }
}

@media (max-width: 900px) {
  .nav-primary { display: none; }

  .nav-toggle { display: inline-flex; }

  .nav-panel {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(78vw, 340px);
    background: var(--color-paper);
    border-left: 1px solid var(--border-soft);
    box-shadow: var(--shadow-lg);
    z-index: 100; /* below .nav-toggle's 120, so the toggle always wins */
    transform: translateX(100%);
    transition: transform 0.32s ease;
    padding: calc(var(--nav-h) + var(--space-6)) var(--space-6) var(--space-6);
    overflow-y: auto;
  }
  .nav-panel.is-open { transform: translateX(0); }

  .nav-panel .nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .nav-panel .nav-link {
    display: block;
    width: 100%;
    padding: 14px 4px;
    font-size: 18px;
    border-bottom: 1px solid var(--color-birch-100);
  }
  .nav-panel .nav-cta { margin-top: var(--space-5); width: 100%; }
  .nav-panel .btn { width: 100%; }
}

/* ---------------- Hero slideshow ---------------- */
.hero {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--color-wood-900);
}

.hero-track {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s ease, transform 6.2s ease-out;
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 1;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Barely-there: just enough to keep the nav/arrows readable at the very
     top and bottom edges against any photo. A "bright" theme should let
     the photography stay bright - the previous version stacked this with
     a second, much heavier gradient below and the two together muddied
     every slide, including the daylight ones. */
  background: linear-gradient(180deg, rgba(41, 36, 30, 0.22) 0%, rgba(41, 36, 30, 0) 22%, rgba(41, 36, 30, 0) 78%, rgba(41, 36, 30, 0.22) 100%);
  pointer-events: none;
}

.hero-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding-bottom: var(--space-8);
  padding-top: var(--space-8);
}
/* No background fill - text sits directly on the photo. Contrast comes
   from light text + a soft per-line shadow instead of a card behind it,
   so nothing ever reads as a "box" floating on the image. */
.hero-panel {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  max-width: 560px;
  background: transparent;
}
.hero-panel .eyebrow {
  color: var(--color-paper);
  margin-bottom: 0;
  text-shadow: 0 2px 4px rgba(15, 10, 5, 0.55), 0 8px 20px rgba(15, 10, 5, 0.4);
}
.hero-line {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(22px, 3vw, 34px);
  color: var(--color-paper);
  max-width: 18ch;
  margin-bottom: var(--space-3);
  text-shadow: 0 2px 6px rgba(15, 10, 5, 0.55), 0 10px 26px rgba(15, 10, 5, 0.4);
}
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 253, 249, 0.16);
  border: 1.5px solid rgba(255, 253, 249, 0.7);
  color: var(--color-paper);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.hero-arrow:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-ink); }
.hero-arrow svg { width: 22px; height: 22px; }
.hero-arrow--prev { left: var(--space-5); }
.hero-arrow--next { right: var(--space-5); }

.hero-dots {
  position: absolute;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: 4;
  display: flex;
  gap: 10px;
}
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 253, 249, 0.45);
  border: 1.5px solid rgba(255, 253, 249, 0.7);
  transition: background-color 0.2s ease, transform 0.2s ease, width 0.2s ease;
}
.hero-dot:hover { background: rgba(255, 253, 249, 0.8); }
.hero-dot.is-active {
  background: var(--color-accent-500);
  border-color: var(--color-accent-500);
  width: 26px;
  border-radius: var(--radius-pill);
}

@media (max-width: 640px) {
  .hero-arrow { width: 44px; height: 44px; }
  .hero-arrow--prev { left: var(--space-3); }
  .hero-arrow--next { right: var(--space-3); }
  .hero-dots { right: var(--space-4); bottom: var(--space-4); }
  .hero-overlay { padding-bottom: var(--space-7); }
  .hero-panel { padding: var(--space-5); max-width: none; }
}

/* ---------------- Sections, general ---------------- */
.section {
  padding-block: var(--space-10);
}
.section--tight { padding-block: var(--space-8); }
.section--birch { background: var(--color-birch-50); }
.section--powder { background: var(--color-powder-50); }
.section--wood {
  background: var(--color-wood-900);
  color: var(--color-paper);
}
.section--wood p { color: rgba(255, 253, 249, 0.78); }
.section--wood h2 { color: var(--color-paper); }
.section--wood .eyebrow { color: var(--color-accent-300); }

.section-header {
  max-width: 640px;
  margin-bottom: var(--space-8);
}
.section-header p { font-size: 17px; margin-top: var(--space-4); }
.section-header--center { margin-inline: auto; text-align: center; }

/* ---------------- Rooms ---------------- */
.rooms-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.room-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  margin: var(--space-6) 0;
}
.room-facts li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--color-ink-soft);
}
.room-facts svg { width: 19px; height: 19px; color: var(--color-accent-700); flex-shrink: 0; }

.room-copy .eyebrow { display: block; }
.room-copy h3 { margin-bottom: var(--space-4); }
.room-copy > p { font-size: 16.5px; max-width: 46ch; }

/* Composition A — image grid left, copy right (Big Room) */
.room--split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-8);
  align-items: center;
}
.room-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.room-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.room-gallery .span-2 { grid-column: 1 / -1; }
.room-gallery .span-2 img { aspect-ratio: 16 / 10; }
.room-gallery a:not(.span-2) img { aspect-ratio: 1 / 1; }

/* Composition B — copy left, image right (Small Room), mirrored */
.room--split.room--reverse .room-gallery { order: 2; }
.room--split.room--reverse .room-copy { order: 1; }
.room--split.room--reverse .room-gallery {
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.room--split.room--reverse .room-gallery img { aspect-ratio: 4 / 3; }

/* Composition C — full-bleed spotlight with overlapping card (Skyline Suite) */
.room--spotlight {
  position: relative;
}
/* Two photos side by side, not one - Grand Family Suite is a two-level
   duplex (ground-floor living room + upstairs bedroom), so a single
   photo only ever showed half the room. Each image carries its own
   radius/shadow (same pattern as .room-gallery above) since the
   container itself is just a grid now, nothing to round. */
.room-spotlight-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.room-spotlight-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.room-spotlight-card {
  background: var(--color-paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-7);
  max-width: 560px;
  margin: -96px auto 0;
  position: relative;
  z-index: 2;
}

@media (max-width: 900px) {
  .room--split { grid-template-columns: 1fr; gap: var(--space-6); }
  .room--split.room--reverse .room-gallery,
  .room--split.room--reverse .room-copy { order: initial; }
  .room-spotlight-card { margin-top: calc(-1 * var(--space-8)); padding: var(--space-6); max-width: none; }
}
@media (max-width: 560px) {
  .room-gallery { grid-template-columns: 1fr 1fr; }
  .room-spotlight-card { margin-top: var(--space-5); }
}

/* ---------------- About ---------------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: center;
}
.about-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.about-copy p { font-size: 16.5px; margin-bottom: var(--space-4); }
.about-stats {
  display: flex;
  gap: var(--space-7);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-soft);
}
.about-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--color-ink);
}
.about-stat span { font-size: 13.5px; font-weight: 600; color: var(--text-muted); }

@media (max-width: 900px) {
  .about { grid-template-columns: 1fr; }
  .about-image { order: -1; }
  .about-image img { aspect-ratio: 16/10; }
}

/* ---------------- Booking CTA band ---------------- */
.cta-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: stretch;
  gap: var(--space-8);
  background: var(--color-wood-800);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.cta-card-image img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}
.cta-card-copy {
  padding: var(--space-8) var(--space-8) var(--space-8) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-paper);
}
.cta-card-copy .eyebrow { color: var(--color-accent-300); }
.cta-card-copy h2 { color: var(--color-paper); margin-bottom: var(--space-4); }
.cta-card-copy p { color: rgba(255, 253, 249, 0.8); font-size: 16.5px; margin-bottom: var(--space-6); max-width: 46ch; }
.cta-card-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

@media (max-width: 860px) {
  .cta-card { grid-template-columns: 1fr; }
  .cta-card-image img { min-height: 220px; }
  .cta-card-copy { padding: var(--space-6); }
}

/* ---------------- Gallery ---------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.gallery-item {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--space-4);
  padding-top: var(--space-7);
  background: linear-gradient(180deg, rgba(41, 36, 30, 0) 0%, rgba(41, 36, 30, 0.66) 100%);
  color: var(--color-paper);
  font-weight: 700;
  font-size: 14px;
}

@media (max-width: 860px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .gallery-grid { grid-template-columns: 1fr; }
}

/* ---------------- Thank you band ---------------- */
/* Same signature exterior shot the hero opens on and About uses (see
   .about-image above) - reused here deliberately to bookend the page on
   one photo, not introduce a new one. object-fit: cover on a fixed
   min-height means this photo's own dimensions never change how big the
   band is - swapping the source file later would not resize anything. */
.thanks {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-wood-900);
}
.thanks-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.thanks-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(41, 36, 30, 0.5) 0%, rgba(41, 36, 30, 0.58) 100%);
}
.thanks-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.thanks-content .eyebrow { color: var(--color-accent-300); }
.thanks-content h2 {
  color: var(--color-paper);
  max-width: 20ch;
  text-shadow: 0 2px 6px rgba(15, 10, 5, 0.55), 0 10px 26px rgba(15, 10, 5, 0.4);
}

@media (max-width: 640px) {
  .thanks { min-height: 300px; }
}

/* ---------------- Footer ---------------- */
.footer {
  background: var(--color-birch-50);
  border-top: 1px solid var(--border-soft);
  padding-block: var(--space-8) var(--space-6);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
}
.footer-brand .nav-wordmark { display: block; margin-bottom: var(--space-3); }
.footer-brand p { font-size: 15px; max-width: 32ch; }
.footer-socials { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-birch-100);
  color: var(--color-ink-soft);
}
.icon-btn svg { width: 19px; height: 19px; }

.footer-heading {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a, .footer-links span {
  font-size: 15px;
  color: var(--text-muted);
}
.footer-links a:hover { color: var(--color-accent-700); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-soft);
  font-size: 13.5px;
  color: var(--color-ink-faint);
}

@media (max-width: 860px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ---------------- Booking page ---------------- */
.booking-hero {
  padding-block: var(--space-9) var(--space-7);
  background: var(--color-birch-50);
  border-bottom: 1px solid var(--border-soft);
}
.booking-hero h1 { margin-block: var(--space-3) var(--space-4); max-width: 20ch; }
.booking-hero p { max-width: 60ch; font-size: 17px; }

.booking-notice {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--color-accent-50);
  border: 1.5px solid var(--color-accent-300);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-7);
  color: var(--color-ink);
}
.booking-notice svg { width: 24px; height: 24px; color: var(--color-accent-700); flex-shrink: 0; margin-top: 2px; }
.booking-notice a { color: var(--color-accent-700); font-weight: 700; text-decoration: underline; }
.booking-notice p, .booking-notice span { color: var(--color-ink); font-size: 15.5px; }
.booking-notice[hidden] { display: none; }

.btn-block { width: 100%; }

/* ---------------- Search band (booking.html, step 1) ----------------
   Full-bleed photo behind the date-picker bar, same photo-band-with-
   scrim pattern as .thanks on the homepage. The search-bar card and the
   (usually-hidden) booking-notice both already carry their own solid
   background (see below), so both stay fully legible over any photo. */
.search-band {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-10);
}
.search-band-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.search-band-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(41, 36, 30, 0.32) 0%, rgba(41, 36, 30, 0.46) 100%);
}
.search-band-content {
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) {
  .search-band { padding-block: var(--space-8); }
}

/* ---------------- Search bar (booking.html, step 1) ---------------- */
.search-bar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--space-4);
  align-items: end;
  background: var(--color-paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
.search-field { display: flex; flex-direction: column; gap: 8px; }
.search-field label { font-weight: 700; font-size: 13px; color: var(--color-ink); }
.search-field input,
.search-field select {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-soft);
  background: var(--color-birch-50);
  color: var(--color-ink-soft);
  font-size: 15px;
}
.search-submit { height: 48px; white-space: nowrap; }
.search-error {
  color: var(--color-accent-700);
  font-weight: 600;
  font-size: 14px;
  margin-top: var(--space-3);
}

@media (max-width: 860px) {
  .search-bar { grid-template-columns: 1fr 1fr; }
  .search-submit { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .search-bar { grid-template-columns: 1fr; padding: var(--space-5); }
}

/* ---------------- Results (booking.html, step 1) ---------------- */
.results-section[hidden] { display: none; }

.results-header { margin-bottom: var(--space-6); }
.results-header h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: var(--space-2); }
.results-header p { font-size: 15px; color: var(--text-muted); }

.results-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.result-card {
  display: flex;
  flex-direction: row;
  background: var(--color-paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.result-media { flex: 0 0 320px; overflow: hidden; }
.result-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.result-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex-grow: 1; }
.result-body h3 { font-size: 21px; }
.result-capacity {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}
.result-capacity svg { width: 17px; height: 17px; color: var(--color-accent-700); flex-shrink: 0; }

/* Bed/bathroom + shared amenities line - grey, sits in the gap between the
   photo/capacity line above and the price block below. */
.result-amenities {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

.result-price {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-birch-100);
}
.result-price-total { font-family: var(--font-display); font-size: 24px; font-weight: 600; color: var(--color-ink); }
.result-price-nights { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.results-empty[hidden] { display: none; }
.results-empty p {
  background: var(--color-paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  font-size: 15px;
}
.results-empty a { color: var(--color-accent-700); font-weight: 700; text-decoration: underline; }

/* ---------------- Payment summary list (shared: bill card rows) ---------------- */
.payment-summary-list { display: flex; flex-direction: column; gap: var(--space-3); }
.payment-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-birch-100);
}
.payment-summary-row:last-child { border-bottom: none; padding-bottom: 0; }
.payment-summary-row dt { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.payment-summary-row dd { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--color-ink); }
.payment-summary-empty { font-size: 15px; color: var(--text-muted); margin-bottom: var(--space-6); }
.payment-summary-empty a { color: var(--color-accent-700); font-weight: 700; text-decoration: underline; }

/* ---------------- Checkout layout (booking-payment.html, step 2) ----------------
   Left column: the room photo card, then the guest-details form.
   Right column: a sticky bill (total + stay facts). Stacks on mobile with
   the bill promoted above the form, so price context comes before the
   guest has to fill in eleven fields. */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-6);
  align-items: start;
}
.checkout-grid[hidden] { display: none; }

.checkout-main { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }

.selection-card {
  display: flex;
  flex-direction: column;
  background: var(--color-paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.selection-card-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-birch-50); }
.selection-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.selection-card-media[hidden] { display: none; }
.selection-card-body { padding: var(--space-6); }
.selection-card-type {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin-bottom: var(--space-2);
}
.selection-card-body h2 { font-size: 24px; margin-bottom: var(--space-4); }
.selection-card-facts { display: flex; flex-direction: column; gap: var(--space-3); }
.selection-card-facts li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-muted);
}
.selection-card-facts svg { width: 18px; height: 18px; color: var(--color-accent-700); flex-shrink: 0; }

/* Bed/bathroom + shared amenities line - grey, between the photo card's
   facts list above and the price in the bill column beside it. */
.selection-card-amenities {
  margin-top: var(--space-4);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Guest details form */
.guest-form {
  background: var(--color-paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
}
.guest-form-header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.guest-form-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-accent-100);
  color: var(--color-accent-700);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.guest-form-header h2 { font-size: 22px; }
.guest-form-hint { font-size: 14.5px; color: var(--text-muted); margin-bottom: var(--space-6); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field--wide { grid-column: 1 / -1; }
.form-field label { font-weight: 700; font-size: 13px; color: var(--color-ink); }
.form-optional { font-weight: 400; text-transform: none; color: var(--text-muted); }
.form-required { color: #d92d20; margin-left: 2px; }
.form-field input,
.form-field textarea {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-soft);
  background: var(--color-birch-50);
  color: var(--color-ink);
  font-family: inherit;
  font-size: 15px;
}
.form-field textarea { resize: vertical; min-height: 80px; }
.form-field input:focus,
.form-field textarea:focus { outline: 2px solid var(--color-accent-500); outline-offset: 1px; }

.guest-form-error {
  color: var(--color-accent-700);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: var(--space-4);
}
.guest-form-note { font-size: 13.5px; color: var(--text-muted); margin-top: var(--space-4); text-align: center; }
.guest-form-note a { color: var(--color-accent-700); font-weight: 700; text-decoration: underline; }
.guest-form-wait {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-accent-50);
  border: 1.5px solid var(--color-accent-300);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-4);
  color: var(--color-ink);
  font-size: 14px;
  font-weight: 600;
}
.guest-form-wait[hidden] { display: none; }
.guest-form-wait::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid var(--color-accent-300);
  border-top-color: var(--color-accent-700);
  animation: guest-form-wait-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .guest-form-wait::before { animation: none; }
}
@keyframes guest-form-wait-spin {
  to { transform: rotate(360deg); }
}

/* Bill / "Your selection" column */
.checkout-bill { position: sticky; top: calc(var(--nav-h) + var(--space-6)); }
.checkout-bill-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  background: var(--color-paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
.checkout-bill-heading { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.checkout-bill-total { display: flex; flex-direction: column; gap: 4px; }
.checkout-bill-total-label { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.checkout-bill-total-amount { font-family: var(--font-display); font-size: 32px; font-weight: 600; color: var(--color-ink); }

@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-bill { position: static; order: -1; }
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .guest-form { padding: var(--space-5); }
}

/* ==========================================================================
   FOOTER LEGAL LINKS (terms.html / privacy-policy.html, linked from
   every page's footer-bottom alongside the copyright line)
   ========================================================================== */
.footer-legal { display: flex; gap: var(--space-5); }
.footer-legal a { color: var(--color-ink-faint); text-decoration: none; }
.footer-legal a:hover { color: var(--color-accent-700); text-decoration: underline; }

/* ==========================================================================
   CONSENT CHECKBOX (booking-payment.html — cancellation-policy
   acknowledgement required before Stripe checkout starts)
   ========================================================================== */
.consent-field {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-5);
  background: var(--color-birch-50);
  border-radius: var(--radius-md);
}
.consent-field input[type="checkbox"] {
  width: 19px;
  height: 19px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-accent-500);
}
.consent-field label { font-size: 14.5px; color: var(--color-ink); line-height: 1.5; }
.consent-field a { color: var(--color-accent-700); font-weight: 700; text-decoration: underline; }

/* ==========================================================================
   LEGAL PAGES (terms.html, privacy-policy.html) — plain prose inside the
   normal .section/.container shell, its own light typographic rhythm
   rather than reusing the marketing-page component classes.
   ========================================================================== */
.legal-page { max-width: 74ch; }
.legal-updated { font-size: 13.5px; color: var(--text-muted); margin-bottom: var(--space-7); }
.legal-page h2 {
  font-size: 22px;
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-soft);
}
.legal-page h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legal-page h3 { font-size: 17px; margin-top: var(--space-6); margin-bottom: var(--space-2); }
.legal-page p { font-size: 15.5px; line-height: 1.75; color: var(--color-ink-soft); margin-bottom: var(--space-4); }
.legal-page ul, .legal-page ol { padding-left: 1.3em; margin-bottom: var(--space-4); }
.legal-page li { font-size: 15.5px; line-height: 1.75; color: var(--color-ink-soft); margin-bottom: 6px; }
.legal-page strong { color: var(--color-ink); }
.legal-page a { color: var(--color-accent-700); font-weight: 600; text-decoration: underline; }
.legal-callout {
  background: var(--color-accent-50);
  border: 1px solid var(--color-accent-100);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.legal-callout p { margin-bottom: 0; color: var(--color-ink); }
.legal-callout p + p { margin-top: var(--space-3); }

/* ==========================================================================
   ADMIN PAGE (admin.html) — utilitarian staff tool, same design tokens
   as the rest of the site but a plainer, denser layout (data table, not
   a marketing component).
   ========================================================================== */
.admin-shell { max-width: 1160px; }
.admin-login {
  max-width: 420px;
  margin-inline: auto;
  background: var(--color-paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-7);
  text-align: center;
}
.admin-login h1 { font-size: 26px; margin-bottom: var(--space-2); }
.admin-login p { color: var(--text-muted); font-size: 14.5px; margin-bottom: var(--space-6); }
.admin-login-field { display: flex; flex-direction: column; gap: 8px; text-align: left; margin-bottom: var(--space-5); }
.admin-login-field label { font-weight: 700; font-size: 13px; }
.admin-login-field input {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-soft);
  background: var(--color-birch-50);
  font-family: inherit;
  font-size: 15px;
}
.admin-login-error { color: var(--color-accent-700); font-weight: 700; font-size: 14px; margin-bottom: var(--space-4); }

.admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-7); }
.admin-topbar h1 { font-size: 28px; margin: 0; }
.admin-signout { background: none; border: none; color: var(--color-ink-faint); font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; text-decoration: underline; padding: 0; }

.admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-8); }
.admin-stat { background: var(--color-paper); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: var(--space-5); }
.admin-stat-label { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.admin-stat-value { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--color-ink); }

.admin-section { margin-bottom: var(--space-9); }
.admin-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.admin-section-head h2 { font-size: 20px; margin: 0; }

.admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-tab {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-soft);
  background: var(--color-paper);
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-muted);
  cursor: pointer;
}
.admin-tab.is-active { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.admin-search { padding: 9px 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--border-soft); background: var(--color-birch-50); font: inherit; font-size: 13.5px; min-width: 220px; }

.admin-table-wrap { overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); background: var(--color-paper); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th, .admin-table td { padding: 12px 16px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border-soft); }
.admin-table th { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); background: var(--color-birch-50); }
.admin-table tr:last-child td { border-bottom: none; }
.admin-table td.is-wrap { white-space: normal; }

.admin-status { display: inline-block; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; }
.admin-status--pending_confirmation { background: var(--color-accent-50); color: var(--color-accent-700); }
.admin-status--confirmed { background: var(--color-powder-50); color: var(--color-powder-600); }
.admin-status--cancelled { background: var(--color-birch-100); color: var(--color-ink-faint); }
.admin-status--completed { background: var(--color-birch-100); color: var(--color-wood-800); }

.admin-cancel-btn { background: none; border: 1.5px solid var(--color-accent-700); color: var(--color-accent-700); border-radius: var(--radius-pill); padding: 6px 14px; font: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.admin-cancel-btn:hover { background: var(--color-accent-700); color: var(--color-paper); }
/* Wraps onto its own line(s) within the cell rather than fighting the
   table's default nowrap — this cell is the one place a table row needs
   more than a single short value (see js/admin.js renderCancelCell). */
.admin-cancel-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 260px; }
.admin-cancel-confirm span { font-size: 12.5px; color: var(--color-ink); font-weight: 700; }
.admin-cancel-reason {
  width: 130px;
  padding: 7px 10px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-soft);
  background: var(--color-birch-50);
  font: inherit;
  font-size: 12.5px;
}
.admin-cancel-yes { background: var(--color-accent-700); color: var(--color-paper); border: none; border-radius: var(--radius-pill); padding: 6px 12px; font: inherit; font-weight: 700; font-size: 12px; cursor: pointer; }
.admin-cancel-no { background: none; border: 1.5px solid var(--border-soft); border-radius: var(--radius-pill); padding: 6px 12px; font: inherit; font-weight: 700; font-size: 12px; cursor: pointer; }

.admin-empty { padding: var(--space-8); text-align: center; color: var(--text-muted); font-size: 14.5px; }

.admin-error-list { display: flex; flex-direction: column; gap: 10px; }
.admin-error-row { display: flex; gap: var(--space-4); padding: var(--space-4); background: var(--color-paper); border: 1px solid var(--border-soft); border-radius: var(--radius-md); font-size: 13.5px; }
.admin-error-level { flex-shrink: 0; font-weight: 700; text-transform: uppercase; font-size: 11px; padding: 3px 9px; border-radius: var(--radius-pill); height: fit-content; }
.admin-error-level--error { background: var(--color-accent-50); color: var(--color-accent-700); }
.admin-error-level--warn { background: var(--color-birch-100); color: var(--color-wood-800); }
.admin-error-body { flex: 1; min-width: 0; }
.admin-error-message { color: var(--color-ink); word-break: break-word; }
.admin-error-time { color: var(--text-muted); font-size: 12px; margin-top: 3px; }

@media (max-width: 640px) {
  .availability-card { padding: var(--space-5); }
  .date-selection-summary { grid-template-columns: 1fr; }

  .result-card { flex-direction: column; }
  .result-media { flex-basis: auto; aspect-ratio: 4 / 3; }
}