/* ==========================================================================
   Luit Homes — design tokens
   Forest green + amber-gold, Fraunces / Work Sans / IBM Plex Mono
   ========================================================================== */

:root {
  --ink: #16261D;        /* deep forest — headers, footer, overlays */
  --pine: #234A34;       /* mid green — buttons, links */
  --pine-light: #3C6B4F;
  --gold: #C9973C;       /* amber accent */
  --gold-light: #E7C36F;
  --terracotta: #B85C38; /* secondary accent, sparingly */
  --cream: #FBF7EE;      /* section background */
  --paper: #FFFFFF;
  --mist: #F0EEE3;       /* muted alt-section background */
  --line: rgba(22, 38, 29, 0.12);
  --text: #1E2A21;
  --text-muted: #5B6A5D;
  --text-on-dark: #F4F1E6;
  --text-on-dark-muted: rgba(244, 241, 230, 0.72);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow-card: 0 20px 45px -20px rgba(22, 38, 29, 0.35);
  --shadow-soft: 0 10px 30px -15px rgba(22, 38, 29, 0.25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); margin: 0; line-height: 1.12; font-weight: 600; }
p { margin: 0; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}

.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;
}

/* Focus visibility (accessibility floor) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

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

/* ==========================================================================
   Top bar
   ========================================================================== */

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251, 247, 238, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px;
}

.wordmark {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 21px; font-weight: 600; color: var(--ink);
}

.wordmark .sun {
  width: 30px; height: 30px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--gold-light), var(--gold) 55%, var(--pine) 100%);
  flex-shrink: 0;
}

.wordmark-block { display: flex; align-items: center; gap: 10px; }
.wordmark-logo { object-fit: contain; flex-shrink: 0; }
.wordmark-block .wordmark-logo { display: block; width: 260px; height: 260px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)); }
.wordmark .wordmark-logo { width: 28px; height: 28px; }
/* Logo sits inside the hero image: vertically centred on desktop, top-left on phones. */
.wordmark-block { position: absolute; z-index: 3; top: 50%; right: 28px; transform: translateY(-50%); }
.wordmark-text { display: flex; flex-direction: column; line-height: 1.15; }
.wordmark-name {
  font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: 0.01em;
  color: #B3171F; /* gamosa red */
}
.wordmark-tag { font-size: 11px; font-weight: 600; color: #8A6212; /* muga gold */ margin-top: 2px; letter-spacing: 0.02em; }

.topbar .wrap { max-width: 1400px; }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.topbar nav a { white-space: nowrap; }

.topbar nav > a:not(.btn-bookings):not(.btn-staff):not(.btn-host) {
  font-size: 14.5px; font-weight: 500; color: var(--text);
  position: relative; padding: 4px 0;
}
.topbar nav > a:not(.btn-bookings):not(.btn-staff):not(.btn-host)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--gold); transform: scaleX(0); transition: transform 0.2s ease;
}
.topbar nav > a:not(.btn-bookings):not(.btn-staff):not(.btn-host):hover::after { transform: scaleX(1); }

.btn-host {
  background: var(--gold); color: var(--ink);
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600;
  white-space: nowrap; transition: filter 0.2s ease;
}
.btn-host:hover { filter: brightness(0.93); }

.btn-bookings {
  background: var(--ink); color: var(--text-on-dark);
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 500;
  transition: background 0.2s ease;
}
.btn-bookings:hover { background: var(--pine); }

.btn-staff {
  border: 1.5px solid var(--line); color: var(--text);
  padding: 9px 17px; border-radius: 999px; font-size: 14px; font-weight: 500;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.btn-staff:hover { border-color: var(--ink); background: var(--paper); }

@media (max-width: 860px) {
  .topbar nav { gap: 12px; }
  .topbar nav a:not(.btn-bookings):not(.btn-staff):not(.btn-host) { display: none; }
  /* Phone / PWA: header = logo + Become a Host only. My Bookings lives in the
     floating bottom button (chatbot-widget), so the header copy is dropped. */
  .topbar nav > .btn-bookings { display: none; }
  .btn-host { padding: 9px 16px; font-size: 13.5px; }
  .topbar-inner { gap: 10px; }
  .wordmark-name { font-size: 17px; }
  .wordmark-tag { font-size: 7.5px; letter-spacing: 0; }
  .topbar-inner { height: 40px; }
  .wordmark-block { top: 4px; right: 10px; transform: none; }
  .wordmark-block .wordmark-logo { width: 100px; height: 100px; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .btn-staff { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 290px; /* tall enough for the overhanging logo; text sits at the top beside it */
  display: flex; align-items: flex-start;
  overflow: hidden;
  padding-top: 24px; padding-bottom: 50px;
}

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

.hb-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  animation: hero-crossfade 42s infinite;
}
.hb-img:nth-child(1) { animation-delay: 0s; }
.hb-img:nth-child(2) { animation-delay: 6s; }
.hb-img:nth-child(3) { animation-delay: 12s; }
.hb-img:nth-child(4) { animation-delay: 18s; }
.hb-img:nth-child(5) { animation-delay: 24s; }
.hb-img:nth-child(6) { animation-delay: 30s; }
.hb-img:nth-child(7) { animation-delay: 36s; }
.hb-img.hb-img-solo { opacity: 1; animation: none; }

@keyframes hero-crossfade {
  0% { opacity: 0; }
  3% { opacity: 1; }
  14% { opacity: 1; }
  17% { opacity: 0; }
  100% { opacity: 0; }
}

.hero-scrim {
  position: absolute; inset: 0;
  /* Plain neutral dark fade - no color tint - so it darkens the photo for
     text contrast without discoloring it. (A previous version added an
     amber radial glow here for an older, darker set of hero photos; mixed
     with a brighter image that reads as a dusty yellow-grey wash, so it's
     gone.) */
  background:
    linear-gradient(100deg, rgba(8, 14, 10, 0.82) 15%, rgba(8, 14, 10, 0.42) 50%, rgba(8, 14, 10, 0.08) 75%),
    linear-gradient(0deg, rgba(8, 14, 10, 0.4) 0%, transparent 35%);
}

.hero-content {
  position: relative; z-index: 2;
  max-width: 980px;
  padding: 0 320px 0 28px; /* ends to the left of the overhanging logo */
  margin-top: 0;
}

.hero-content h1 {
  color: var(--text-on-dark);
  font-size: clamp(38px, 5.4vw, 62px);
  margin-bottom: 18px;
}

.hero-script {
  font-family: "Caveat", cursive;
  font-weight: 600;
  font-size: clamp(22px, 2.6vw, 29px);
  color: var(--gold-light);
  line-height: 1.3;
  margin: 0 0 18px;
  white-space: nowrap;
}

.hero-content .lede {
  color: var(--text-on-dark-muted);
  font-size: 17px;
  max-width: 540px;
  margin-bottom: 30px;
}

.btn-hero {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 26px; border-radius: 999px;
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  background: var(--gold); color: var(--ink);
  border: none; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.btn-hero:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(201,151,60,0.55); background: var(--gold-light); }

.city-ticker {
  display: flex; align-items: center; gap: 14px;
  background: var(--ink); color: #fff;
  padding: 10px 16px; overflow: hidden;
}
.city-ticker[hidden] { display: none; }
.city-ticker-label {
  flex-shrink: 0; font-weight: 600; font-size: 13px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--gold-light);
}
.city-ticker-viewport { overflow: hidden; flex: 1; min-width: 0; }
.city-ticker-track {
  display: flex; width: max-content;
  animation: city-ticker-scroll 40s linear infinite;
}
.city-ticker-track:hover { animation-play-state: paused; }
.city-ticker-item { white-space: nowrap; font-size: 14px; padding-right: 64px; }
@keyframes city-ticker-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .city-ticker-track { animation: none; }
  .city-ticker-viewport { overflow-x: auto; }
}

.hero-support {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 0 0 14px; padding: 8px 16px; border-radius: 999px;
  background: rgba(8, 14, 10, 0.55); color: var(--text-on-dark-muted);
  font-size: 13px; line-height: 1.35;
}
.hero-support[hidden] { display: none; }
.hero-support a { color: var(--gold-light); font-weight: 600; text-decoration: none; white-space: nowrap; }
.hero-support a:hover { text-decoration: underline; }

.hero-trust {
  list-style: none; display: flex; gap: 12px; flex-wrap: wrap;
  margin: 0; padding: 0;
}
.hero-trust li {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-on-dark-muted); font-size: 13px; line-height: 1.35;
  /* A solid backing behind each badge so the text stays legible no matter
     what's directly behind it in the hero photo (busy/bright photos were
     making this text unreadable in the PWA build). */
  background: rgba(8, 14, 10, 0.55);
  border-radius: 999px;
  padding: 10px 16px;
}
.hero-trust svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--text-on-dark); }
.hero-trust li.is-gold svg { color: var(--gold-light); }
.hero-trust li.is-gold span { color: var(--gold-light); }

@media (max-width: 640px) {
  /* align-items:flex-start (not the desktop default of centered) - with
     the hero shortened to 75vh, centered text was landing low enough to
     collide with the search card that overlaps the hero's bottom edge,
     hiding it. Anchoring to the top keeps it clear of that overlap.
     .hero's own padding-top:76px (set above, for desktop) is dead space
     here too - .topbar is sticky, not fixed, so it already reserves its
     own 76px in normal document flow above .hero; that padding was extra
     on top of that, not compensating for an overlapping header. On a
     shortened 75vh mobile hero that wasted space was enough to push the
     last trust badge down into the search card's overlap zone, hiding
     it - removing it here gives that content room to actually fit. */
  .hero { min-height: 0; align-items: flex-start; padding-top: 6px; padding-bottom: 40px; } /* a further 30% shorter than the previous 52.5vh - also the height used by the installed PWA/TWA (phone-width viewport) */
  .hb-img { object-position: center bottom; } /* crop the photo from the top */
  .hero-content { margin-top: 0; padding: 0 118px 0 12px; }
  .hero-content h1 { margin-bottom: 4px; }
  .hero-script { margin-bottom: 6px; }
  /* The hero's height is driven by its text content on phones (min-height
     alone changed nothing), so the 30% cut has to come from compacting the
     content: drop the long description and shrink the trust badges. */
  .hero-content .lede { display: none; }
  .hero-content .eyebrow { margin-bottom: 4px; font-weight: 600; }
  .hero-content h1 { font-size: 27px; }
  .hero-script { font-size: 17px; white-space: normal; }
  .hero-trust { gap: 6px; }
  .hero-trust li { padding: 6px 10px; gap: 6px; font-size: 10.5px; line-height: 1.25; }
  .hero-trust svg { width: 16px; height: 16px; }
  .hero-trust { gap: 4px; }
  .hero-trust li { padding: 4px 8px; }
}

/* ==========================================================================
   Search block — floating card over the hero
   ========================================================================== */

/* -24px, not the original -64px: the hero is now 30% shorter (see .hero
   above), so the same fixed overlap ate a bigger share of the remaining
   height and started covering the last hero-trust badge (verified by
   screenshot - "Instant Confirmation / quick & hassle-free" was being
   clipped by this card at normal desktop widths). */
#search { position: relative; z-index: 3; margin-top: -24px; }

.search-block {
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 10px 10px 22px;
}

.search-tabs {
  display: flex; gap: 6px;
  padding: 10px 10px 0;
}

.search-tab {
  font-family: var(--font-body); font-size: 16.5px; font-weight: 700;
  padding: 14px 24px; border-radius: var(--radius-md) var(--radius-md) 0 0;
  border: 2px solid var(--gold); border-bottom: none;
  background: linear-gradient(180deg, #FFF6DC, var(--gold-light));
  color: var(--ink);
  cursor: pointer; transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
  animation: tab-glow 2.4s ease-in-out infinite;
}
.search-tab:hover { transform: translateY(-2px); }
.search-tab.is-active {
  color: var(--text-on-dark); background: var(--pine);
  border-color: var(--pine); animation: none;
  box-shadow: 0 -4px 14px -6px rgba(35, 74, 52, 0.55);
}
@keyframes tab-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 151, 60, 0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(201, 151, 60, 0); }
}
@media (prefers-reduced-motion: reduce) { .search-tab { animation: none; } }

.search-card {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
  align-items: end;
  gap: 18px;
  padding: 22px 22px 4px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* A plain `.field { display: flex }` rule has the same specificity as the
   browser's built-in `[hidden] { display: none }` UA rule, and author
   styles win ties over UA styles - so #dish-field's `hidden` attribute was
   silently being ignored and the field stayed visible even in hotel-search
   mode. This restores hidden's actual effect. */
.field[hidden] { display: none; }

/* .field-actions (the div wrapping "Use my location" + "Find stays") has
   no explicit grid placement, so it lands in whichever column plain
   left-to-right auto-placement reaches - which one that is depends on how
   many OTHER fields are visible (checkin/checkout/dish toggle per search
   mode), and that column is only "1fr" wide, not the wide "auto" track.
   (Tried spanning it into the auto track with `grid-column: -3 / -1`
   first, expecting the two tracks' widths to add together - but the auto
   track doesn't reliably grow for a spanning item with no other content
   of its own, so the span didn't actually gain any width. A concrete
   min-width is far more predictable: it forces whichever 1fr track this
   lands in to actually grow to fit, borrowing space from the other 1fr
   columns.) The two buttons plus their 10px gap measure ~305px in
   practice - 340px gives real breathing room instead of sitting right at
   the wrap threshold. flex-wrap on .locate-row (below) stays as a
   last-resort safety net for anything even narrower than that. */
.field-actions { min-width: 340px; }

.field label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
}

.field select, .field input[type="date"], .field input[type="text"] {
  font-family: var(--font-body); font-size: 15px; color: var(--text);
  border: none; border-bottom: 1.5px solid var(--line);
  padding: 6px 2px; background: transparent; width: 100%; min-width: 0;
  transition: border-color 0.18s ease;
}
.field select:focus, .field input:focus { border-color: var(--pine); outline: none; }

/* Destination is the key first step - make it the focal point. */
.field-destination {
  background: #FFF6DC; border: 2px solid var(--gold);
  border-radius: var(--radius-md); padding: 10px 14px 8px;
  animation: tab-glow 2.4s ease-in-out infinite;
}
.field-destination label {
  font-size: 13px; font-weight: 700; color: var(--ink);
  white-space: nowrap;
}
.field-destination .label-hint {
  text-transform: none; letter-spacing: 0; color: var(--terracotta);
}
.field-destination select {
  font-size: 16px; font-weight: 600; border-bottom-color: var(--gold);
}
@media (prefers-reduced-motion: reduce) { .field-destination { animation: none; } }

/* flex-wrap:wrap as a safety net regardless of exact viewport width: if
   these two nowrap, non-shrinking buttons ever don't fit their row's
   available width (any screen size, not just the specific breakpoints
   below), "Find stays" drops to its own line inside this box instead of
   spilling out past the search card's edge. */
.locate-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-locate {
  font-family: var(--font-body); font-size: 15px; font-weight: 700;
  color: var(--ink); background: linear-gradient(180deg, #FFF1C9, var(--gold-light));
  border: 2px solid var(--gold); border-radius: 999px; padding: 12px 22px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 6px 14px -8px rgba(201, 151, 60, 0.9);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.btn-locate:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -8px rgba(201, 151, 60, 1); }

.btn-primary {
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  background: var(--pine); color: var(--text-on-dark);
  border: none; border-radius: 999px; padding: 15px 30px; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  transition: background 0.18s ease, transform 0.18s ease;
}
.btn-primary:hover { background: var(--ink); transform: translateY(-1px); }

.search-status {
  /* #search-status is the last child of the .search-card grid, so without
     an explicit column span it auto-flows into whatever column happens to
     be free - which column that is changes depending on how many fields
     are hidden (hotel vs restaurant mode), so it was landing squeezed next
     to the buttons instead of on its own row. Spanning every column
     guarantees it always sits on its own full-width row below the fields,
     regardless of search mode. */
  grid-column: 1 / -1;
  font-size: 13px; color: var(--text-muted); padding: 10px 22px 0; margin: 0;
}

.results { margin-top: 26px; display: grid; gap: 18px; }

/* ==========================================================================
   Result cards — hotels & restaurants, rendered by app.js
   (renderResults / renderRestaurantResults)
   ========================================================================== */

.result-card {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 20px;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: 16px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.result-card:hover, .result-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
  outline: none;
}

.result-photo {
  border-radius: var(--radius-md);
  background-size: cover; background-position: center;
  background-color: var(--mist);
  min-height: 160px;
  position: relative;
}
.featured-tag {
  position: absolute; top: 10px; left: 10px;
  background: var(--gold); color: var(--ink);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em;
  padding: 4px 10px; border-radius: 999px;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,0.4);
}

.result-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.result-distance { font-size: 12.5px; color: var(--text-muted); }
.result-map-link { color: var(--pine); font-weight: 600; }
.result-body h3 { font-size: 19px; margin: 2px 0 0; }
.result-meta { font-size: 13.5px; color: var(--text-muted); }

.result-rating {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); width: fit-content;
}
.stars { color: var(--gold); font-size: 14px; letter-spacing: 1px; }
.rating-value { font-weight: 600; font-size: 13.5px; color: var(--text); }
.rating-count { font-size: 12.5px; color: var(--text-muted); text-decoration: underline; }
.result-rating.no-reviews { color: var(--text-muted); font-size: 13px; }

.result-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.result-badge {
  font-size: 11.5px; padding: 5px 10px; border-radius: 999px;
  background: var(--mist); color: var(--pine); font-weight: 500;
}
.result-badge.kitchen-closed { background: rgba(184, 92, 56, 0.14); color: var(--terracotta); }

.result-price-col {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
  text-align: right; min-width: 150px;
}
.result-price { margin-bottom: 12px; }
.price-from { font-size: 11.5px; color: var(--text-muted); }
.price-amount { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); }
.price-unit { font-size: 11.5px; color: var(--text-muted); }
.price-unavailable { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }

.btn-view-rooms {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  background: var(--pine); color: var(--text-on-dark); border: none;
  border-radius: 999px; padding: 10px 18px; cursor: pointer; white-space: nowrap;
  transition: background 0.18s ease;
}
.btn-view-rooms:hover { background: var(--ink); }

.empty-state {
  background: var(--mist); border-radius: var(--radius-lg);
  padding: 30px; text-align: center; color: var(--text-muted); font-size: 14.5px;
}

@media (max-width: 760px) {
  .result-card { grid-template-columns: 1fr; }
  .result-photo { min-height: 180px; }
  .result-price-col {
    flex-direction: row; align-items: center; justify-content: space-between;
    text-align: left; min-width: 0;
  }
  .result-price { margin-bottom: 0; }
}

@media (max-width: 900px) {
  .search-card { grid-template-columns: 1fr 1fr; }
  /* .field-actions holds both buttons via .locate-row (display:flex,
     white-space:nowrap, flex-shrink:0 on each button - needed so "Use my
     location" doesn't wrap into 3 cramped lines). At 2 columns, that row
     no longer has room for both non-shrinking buttons side by side, so
     without this it overflows its grid cell and "Find stays" visibly
     spills out past the white card's edge. Spanning both columns gives
     the row the full card width to lay the buttons out in instead. */
  .field-actions { grid-column: 1 / -1; min-width: 0; }
}

@media (max-width: 560px) {
  .search-tabs { gap: 4px; }
  .search-tab {
    flex: 1 1 0; padding: 13px 8px; font-size: 14.5px;
    white-space: nowrap; text-align: center;
  }
  .search-card { grid-template-columns: 1fr; padding: 20px 18px 4px; gap: 16px; }
  .search-card .btn-primary { grid-column: auto; }
  /* Keep both buttons side by side, sharing the row equally. */
  .locate-row { flex-direction: row; flex-wrap: nowrap; gap: 10px; }
  .btn-locate, .search-card .btn-primary {
    flex: 1 1 0; min-width: 0; text-align: center; padding: 12px 6px;
    font-size: 13.5px; line-height: 1.2;
  }
  .btn-locate { white-space: normal; flex-shrink: 1; }
}

/* ==========================================================================
   Destination strip — 6 small photo cards under the hero search
   ========================================================================== */

.dest-strip { padding: 30px 0 10px; position: relative; z-index: 2; }

.dest-strip-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}

.dest-card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 3 / 4; padding: 14px;
  border-radius: var(--radius-md); overflow: hidden;
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-soft);
  transition: transform 0.22s ease;
}
.dest-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15,26,18,0.88) 0%, rgba(15,26,18,0.05) 60%);
}
.dest-card h3, .dest-card p { position: relative; z-index: 1; margin: 0; }
.dest-card h3 { color: var(--text-on-dark); font-size: 15.5px; margin-bottom: 2px; }
.dest-card p { color: var(--text-on-dark-muted); font-size: 11px; }
.dest-card:hover { transform: translateY(-4px); }

@media (max-width: 900px) {
  .dest-strip-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .dest-strip-grid { grid-template-columns: repeat(2, 1fr); }
}

.trail-head-center { text-align: center; margin-left: auto; margin-right: auto; }

/* ==========================================================================
   Contour divider
   ========================================================================== */

.contour-divider { color: var(--line); line-height: 0; padding: 30px 0 0; }

/* ==========================================================================
   Stats
   ========================================================================== */

.stats { padding: 70px 0 20px; }

.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat {
  text-align: center; padding: 0 12px;
  border-left: 1px solid var(--line);
}
.stat:first-child { border-left: none; }

.stat-num {
  display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(30px, 4vw, 42px); color: var(--pine);
}
.stat-unit { font-size: 0.5em; margin-left: 2px; color: var(--gold); }

.stat-label { display: block; margin-top: 8px; font-size: 13px; color: var(--text-muted); }

@media (max-width: 700px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .stat { border-left: none; }
}

/* ==========================================================================
   About Assam — polaroid stack
   ========================================================================== */

.about-assam { padding: 90px 0; }

.about-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: center;
}

.about-copy h2 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 20px; }
.about-copy p { color: var(--text-muted); font-size: 15.5px; margin-bottom: 16px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--pine); font-size: 14.5px;
  margin-top: 8px; position: relative;
}
.link-arrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; background: var(--pine); transform: scaleX(0); transform-origin: left; transition: transform 0.2s ease; }
.link-arrow:hover::after { transform: scaleX(1); }

.about-photos { position: relative; height: 380px; }

.polaroid {
  position: absolute; margin: 0;
  background: var(--paper); padding: 10px 10px 34px;
  border-radius: 4px; box-shadow: var(--shadow-soft);
  width: 46%; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.polaroid img { border-radius: 2px; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.polaroid figcaption {
  position: absolute; left: 0; right: 0; bottom: 10px; text-align: center;
  font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--ink);
}
.polaroid:hover { transform: translateY(-6px) rotate(0deg) !important; z-index: 5; }

.polaroid-a { left: 0; top: 20px; transform: rotate(-6deg); z-index: 1; }
.polaroid-b { left: 26%; top: 0; transform: rotate(4deg); z-index: 2; }
.polaroid-c { left: 52%; top: 40px; transform: rotate(-3deg); z-index: 3; }

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-photos { height: 320px; }
}

/* ==========================================================================
   Regions — full-bleed photo cards
   ========================================================================== */

.regions { padding: 20px 0 90px; }

.trail-head { max-width: 640px; margin: 0 0 40px; }
.trail-head h2 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 12px; }
.trail-head p { color: var(--text-muted); font-size: 15.5px; }

.regions-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}

.region-card {
  position: relative; border-radius: var(--radius-lg);
  background-size: cover; background-position: center;
  min-height: 380px; padding: 26px;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease;
}
.region-card:hover { transform: translateY(-4px); }

.region-eyebrow {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-light); margin-bottom: 6px;
}
.region-card h3 { color: var(--text-on-dark); font-size: 24px; margin-bottom: 10px; }
.region-card p { color: var(--text-on-dark-muted); font-size: 14px; margin-bottom: 16px; }

.link-arrow-light { color: var(--text-on-dark); }
.link-arrow-light::after { background: var(--gold-light); }

@media (max-width: 860px) {
  .regions-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Trail — horizontal waypoint scroller
   ========================================================================== */

.trail { padding: 70px 0 90px; }
.trail .trail-head { padding: 0 28px; }

.trail-scroll {
  display: flex; gap: 4px; overflow-x: auto; padding: 30px 28px 20px;
  -webkit-overflow-scrolling: touch;
}
.trail-scroll::-webkit-scrollbar { height: 6px; }
.trail-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.waypoint {
  flex: 0 0 130px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative; padding-top: 4px;
}
.waypoint:not(:last-child)::after {
  content: "";
  position: absolute; top: 48px; left: 50%; width: 100%; height: 0;
  border-top: 2px dashed var(--line); z-index: 0;
}
.waypoint-photo {
  width: 88px; height: 88px; border-radius: 50%;
  background-size: cover; background-position: center;
  border: 3px solid var(--paper); box-shadow: var(--shadow-soft);
  position: relative; z-index: 1; margin-bottom: 12px;
  transition: transform 0.2s ease;
}
.waypoint:hover .waypoint-photo { transform: scale(1.06); }
.waypoint h3 { font-size: 14.5px; margin-bottom: 2px; color: var(--ink); }
.waypoint p { font-size: 11.5px; color: var(--text-muted); margin: 0; }

@media (max-width: 640px) {
  .waypoint { flex: 0 0 110px; }
  .waypoint-photo { width: 70px; height: 70px; }
  .waypoint:not(:last-child)::after { top: 38px; }
}

/* ==========================================================================
   Values
   ========================================================================== */

.values { padding: 80px 0; background: var(--mist); }

.values-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px;
  text-align: center; margin-top: 10px;
}
.value .icon {
  width: 50px; height: 50px; padding: 13px; border-radius: 50%;
  background: var(--ink); color: var(--gold-light); margin: 0 auto 16px;
}
.value h3 { font-size: 15.5px; margin-bottom: 6px; }
.value p { color: var(--text-muted); font-size: 13px; }

@media (max-width: 900px) {
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { padding: 90px 0 110px; }
.faq-list { max-width: 780px; margin-top: 30px; }

.faq-list details {
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}
.faq-list summary {
  cursor: pointer; font-weight: 600; font-size: 16px; color: var(--ink);
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: 20px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; font-family: var(--font-mono); font-size: 20px; color: var(--gold);
  flex-shrink: 0; transition: transform 0.2s ease;
}
.faq-list details[open] summary::after { content: "–"; }
.faq-list p { margin-top: 14px; color: var(--text-muted); font-size: 14.5px; max-width: 640px; }

/* ==========================================================================
   Footer
   ========================================================================== */

footer { background: var(--ink); color: var(--text-on-dark-muted); }

.footer-cta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px;
  padding: 50px 0; border-bottom: 1px solid rgba(244, 241, 230, 0.14);
}
.footer-cta h2 { color: var(--text-on-dark); font-size: clamp(24px, 3vw, 32px); margin-bottom: 8px; }
.footer-cta p { color: var(--text-on-dark-muted); font-size: 15px; }

.footer-main {
  display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 30px;
  padding: 50px 0;
}
.footer-col h3 {
  color: var(--text-on-dark); font-size: 13.5px; margin-bottom: 16px;
  font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.footer-col a, .footer-col p { display: block; font-size: 13.5px; margin: 0 0 10px; color: var(--text-on-dark-muted); }
.footer-col a:hover { color: var(--gold-light); text-decoration: underline; }
.footer-brand .wordmark { color: var(--text-on-dark); margin-bottom: 12px; }
.footer-tagline {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold-light); margin-bottom: 14px;
}

.footer-bottom {
  text-align: center; padding: 20px 0; border-top: 1px solid rgba(244, 241, 230, 0.14);
}
.footer-bottom p { font-size: 12.5px; margin: 4px 0; }

footer a { color: var(--gold-light); }
footer a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
  .footer-main { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Overlays / lightbox — keep functional, on-brand
   ========================================================================== */

.stay-overlay, .lightbox { position: fixed; inset: 0; z-index: 60; display: none; }
.stay-overlay[aria-hidden="false"], .lightbox[aria-hidden="false"] { display: block; }

.stay-overlay-scrim { position: absolute; inset: 0; background: rgba(15, 26, 18, 0.68); }

.stay-panel {
  position: relative; z-index: 2; max-width: 720px; margin: 5vh auto; max-height: 90vh;
  overflow-y: auto; background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 32px;
}

.stay-close {
  position: absolute; top: 18px; right: 18px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--mist); color: var(--ink); cursor: pointer; font-size: 16px;
  box-shadow: var(--shadow-soft);
}

/* ==========================================================================
   Stay / restaurant detail panel - gallery, rooms, booking flow
   (rendered by app.js: openHotelPanel / renderRoomList / renderGuestForm /
   openRestaurantPanel - none of this had any CSS at all before, so it
   rendered as unstyled stacked full-width images and plain text)
   ========================================================================== */

.stay-gallery {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 6px;
  height: 300px; margin: -32px -32px 24px; overflow: hidden;
}
.stay-gallery > img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; display: block; }
.stay-gallery-side { display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; }
.stay-gallery-side img { flex: 1; width: 100%; object-fit: cover; cursor: pointer; min-height: 0; }
.stay-gallery-empty { height: 12px; }

.stay-title { font-size: 25px; margin: 4px 0 4px; }
.stay-address { color: var(--text-muted); font-size: 14px; margin: 0 0 14px; }
.stay-dates-bar {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mist); border-radius: 999px; padding: 8px 16px;
  font-size: 13.5px; margin-bottom: 18px;
}

.stay-feedback-toggle {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--mist); border: none; border-radius: var(--radius-md);
  padding: 12px 16px; margin: 0 0 18px; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--ink);
}
.stay-feedback-toggle .toggle-arrow { margin-left: auto; transition: transform 0.2s ease; }
.stay-feedback-toggle[aria-expanded="true"] .toggle-arrow { transform: rotate(180deg); }

.no-rooms-msg { color: var(--text-muted); font-size: 14px; padding: 16px 0; }

#room-list { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }

.room-card { border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--radius-md); padding: 18px; }
/* Distinct tint + accent border per room type, cycling through 4 brand
   colors, so a hotel with several room types is easy to tell apart at a
   glance instead of every card looking identical. */
.room-card:nth-of-type(4n+1) { background: rgba(35, 74, 52, 0.05); border-left-color: var(--pine); }
.room-card:nth-of-type(4n+2) { background: rgba(201, 151, 60, 0.08); border-left-color: var(--gold); }
.room-card:nth-of-type(4n+3) { background: rgba(184, 92, 56, 0.06); border-left-color: var(--terracotta); }
.room-card:nth-of-type(4n+4) { background: rgba(74, 143, 194, 0.07); border-left-color: #4A8FC2; }
.room-photo-strip { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; }
.room-photo { width: 120px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; flex-shrink: 0; }
.room-card h4 { font-size: 17px; margin-bottom: 4px; }
.room-desc { color: var(--text-muted); font-size: 13.5px; margin: 0 0 6px; }
.room-meta { color: var(--text-muted); font-size: 13px; margin: 0 0 10px; }
.room-count-row { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; color: var(--text-muted); }
.room-count-select { padding: 6px 10px; border: 1px solid var(--border, #d8d4c8); border-radius: 8px; background: #fff; font: inherit; color: inherit; }
.room-facilities { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.room-facility {
  font-size: 11.5px; padding: 4px 10px; border-radius: 999px;
  background: var(--mist); color: var(--pine);
}

.rate-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--line); flex-wrap: wrap;
}
.rate-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rate-name { font-weight: 600; font-size: 14px; }
.breakfast-badge { font-size: 11px; color: var(--pine); font-weight: 500; }
.discount-badge {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--paper);
  background: var(--terracotta); border-radius: 999px; padding: 1px 8px; margin-left: 4px;
}
.rate-cancellation { font-size: 12px; color: var(--text-muted); }
.rate-price-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.rate-total { text-align: right; }
.rate-total .amount { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); }
.rate-total .per-night { display: block; font-size: 11px; color: var(--text-muted); }
.original-price {
  text-decoration: line-through; color: #C0392B; font-weight: 700; margin-right: 6px;
}
.rate-total .amount .original-price { font-size: 14px; }
.rate-total .per-night .original-price { opacity: 0.9; font-size: inherit; margin-right: 4px; }

.btn-book, .btn-secondary {
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600;
  border: none; border-radius: 999px; padding: 9px 20px; cursor: pointer;
  white-space: nowrap; transition: background 0.18s ease;
}
.btn-book { background: var(--pine); color: var(--text-on-dark); }
.btn-book:hover { background: var(--ink); }
.btn-secondary { background: var(--mist); color: var(--pine); }
.btn-secondary:hover { background: #E3E4D3; }

.link-back {
  background: none; border: none; color: var(--pine); font-weight: 600;
  font-size: 13.5px; cursor: pointer; padding: 0; margin-bottom: 16px;
  font-family: var(--font-body); display: block;
}

.guest-form h4 { font-size: 18px; margin-bottom: 10px; }
.guest-form .field { margin-bottom: 14px; }
.guest-form .field input {
  font-family: var(--font-body); font-size: 15px; color: var(--text);
  border: none; border-bottom: 1.5px solid var(--line);
  padding: 8px 2px; background: transparent; width: 100%;
}
.guest-form .field input:focus { border-color: var(--pine); outline: none; }
.guest-form .field textarea {
  font-family: var(--font-body); font-size: 15px; color: var(--text);
  border: 1.5px solid var(--line); border-radius: 8px;
  padding: 8px 10px; background: transparent; width: 100%; resize: vertical;
}
.guest-form .field textarea:focus { border-color: var(--pine); outline: none; }

/* Checkout payment method picker (online ordering) */
.pay-options { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.pay-option {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px;
}
.pay-option:has(input:checked) { border-color: var(--pine); background: rgba(0,0,0,0.03); }
.guest-form .field .pay-option input { width: auto; border: none; padding: 0; margin-top: 3px; flex: none; }
.pay-option span { display: flex; flex-direction: column; font-size: 14px; }
.pay-option small { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.form-note { font-size: 12px; color: var(--text-muted); margin: 4px 0 12px; }

.booking-summary-line {
  display: flex; justify-content: space-between; font-size: 14px;
  padding: 10px 0; border-top: 1px solid var(--line);
}
.booking-summary-line.total { font-weight: 600; color: var(--ink); }

.taxi-highlight {
  background: var(--mist); border-radius: var(--radius-md);
  padding: 14px 16px; margin: 14px 0;
}
.taxi-highlight label { font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.taxi-estimate-row { margin: 8px 0; }

.guest-details-card {
  background: rgba(35, 74, 52, 0.06);
  border: 1.5px solid rgba(35, 74, 52, 0.22);
  border-radius: var(--radius-md);
  padding: 16px 16px 4px;
  margin: 8px 0 16px;
}
.guest-details-card > .guest-details-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--pine); margin: 0 0 12px;
}
.guest-details-card .field:last-of-type { margin-bottom: 10px; }

.payment-choice-card {
  background: rgba(201, 151, 60, 0.10);
  border: 1.5px solid rgba(201, 151, 60, 0.45);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 16px 0;
}
.payment-choice-card > .payment-choice-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--pine); margin: 0 0 10px;
}
.payment-choice-option {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--text);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.payment-choice-option:last-of-type { margin-bottom: 0; }
.payment-choice-option input[type="radio"] { accent-color: var(--gold); width: 16px; height: 16px; flex-shrink: 0; }
.payment-choice-option:hover { border-color: var(--gold-light); }
.payment-choice-option.is-selected {
  border-color: var(--gold); background: rgba(201, 151, 60, 0.16);
}
.payment-choice-card .form-note { margin: 8px 0 0; }

.guest-form-actions { margin-top: 18px; }
.guest-form-actions .btn-primary { width: 100%; }

#guest-form-error:not(:empty) {
  background: rgba(184, 92, 56, 0.12); color: var(--terracotta);
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px;
}

.form-error {
  background: rgba(184, 92, 56, 0.12); color: var(--terracotta);
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px;
}

.menu-category { margin-bottom: 26px; }
.menu-category h4 { font-size: 16px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.menu-item-list { display: flex; flex-direction: column; gap: 14px; }
.menu-item-row { display: flex; align-items: center; gap: 12px; }
.menu-item-row-unavailable { opacity: 0.5; }
.menu-item-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.menu-item-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.menu-item-veg { width: 11px; height: 11px; border: 1.5px solid; display: inline-block; position: relative; margin-right: 4px; }
.menu-item-veg.veg { border-color: #2E7D32; }
.menu-item-veg.veg::after { content: ""; position: absolute; inset: 2px; background: #2E7D32; border-radius: 50%; }
.menu-item-veg.non-veg { border-color: #C62828; }
.menu-item-veg.non-veg::after { content: ""; position: absolute; inset: 2px; background: #C62828; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
.menu-item-name { font-weight: 600; font-size: 14px; }
.menu-item-desc { display: block; font-size: 12.5px; color: var(--text-muted); }
.menu-item-hours { display: block; font-size: 11.5px; color: var(--terracotta); }
.menu-item-price { font-family: var(--font-mono); font-weight: 500; font-size: 14px; flex-shrink: 0; }

.cart-qty-stepper { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cart-qty-btn {
  width: 28px; height: 28px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
}
.cart-qty-value { min-width: 18px; text-align: center; font-weight: 600; font-size: 13.5px; }

.cart-summary-bar {
  margin-top: 18px; padding: 14px 16px 6px;
  background: var(--paper); border-top: 1px solid var(--line);
  border-radius: var(--radius-md);
}

@media (max-width: 640px) {
  .stay-gallery { height: 220px; margin: -20px -20px 20px; }
  .stay-panel { padding: 20px; }
}

.lightbox-img { max-width: 90vw; max-height: 85vh; margin: 6vh auto; display: block; border-radius: var(--radius-md); }
.lightbox-close, .lightbox-nav {
  position: fixed; z-index: 3; background: rgba(251,247,238,0.9); border: none;
  border-radius: 50%; width: 44px; height: 44px; cursor: pointer; color: var(--ink); font-size: 18px;
}
.lightbox-close { top: 20px; right: 20px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-caption { position: fixed; bottom: 24px; left: 0; right: 0; text-align: center; color: var(--text-on-dark); font-size: 14px; }

.stay-dates-bar input[type="date"] {
  border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; padding: 4px 8px;
  font: inherit; font-weight: 600; background: #fff; max-width: 150px;
}

.confirm-modal-backdrop {
  position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.confirm-modal {
  background: #fff; border-radius: 16px; padding: 22px; width: 100%; max-width: 440px;
  max-height: 90vh; overflow-y: auto;
}
.confirm-modal h3 { margin: 0 0 14px; }
.confirm-modal-rows > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.08); font-size: 14px;
}
.confirm-modal-rows dt { color: #666; margin: 0; }
.confirm-modal-rows dd { margin: 0; text-align: right; font-weight: 600; word-break: break-word; }
.confirm-modal-actions { display: flex; gap: 10px; margin-top: 18px; justify-content: flex-end; }

/* ---- Amenity chips + rooms-left badge (search result cards) ---- */
.result-amenities { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.result-amenity { font-size: 12.5px; color: var(--text); display: inline-flex; align-items: center; gap: 5px; }
.result-amenity-more { color: var(--text-muted); }
.result-badge.rooms-left { background: rgba(184, 92, 56, 0.14); color: var(--terracotta); font-weight: 600; }
.result-badge.rooms-left.sold-out { background: var(--line); color: var(--text-muted); }

/* ---- Add to Home Screen prompt ---- */
.install-bar {
  position: fixed; z-index: 9990; left: 12px; right: 12px;
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  max-width: 420px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: var(--text-on-dark);
  padding: 12px 14px; border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
.install-bar img { border-radius: 10px; flex-shrink: 0; }
.install-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.35; }
.install-text strong { font-size: 14px; }
.install-go {
  background: var(--gold); color: var(--ink); border: 0; border-radius: 999px;
  padding: 9px 16px; font-weight: 600; font-size: 13.5px; cursor: pointer;
}
.install-x { background: none; border: 0; color: var(--text-on-dark); font-size: 16px; padding: 6px; cursor: pointer; opacity: 0.7; }
@media (min-width: 861px) { .install-bar { bottom: 24px; left: 24px; right: auto; margin: 0; } }

/* "Get the app" band above the footer */
.app-band { background: linear-gradient(135deg, var(--pine) 0%, var(--ink) 100%); color: var(--text-on-dark); padding: 26px 30px; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin: 26px 0 8px; }
.app-band-inner { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.app-band-logo { width: 72px; height: 72px; border-radius: 18px; background: #fff; padding: 6px; object-fit: contain; flex: none; }
.app-band-text { flex: 1 1 260px; }
.app-band-text h2 { color: var(--text-on-dark); font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 6px; }
.app-band-text p { color: var(--text-on-dark-muted); font-size: 15px; margin: 0; }
.play-badge {
  display: inline-flex; align-items: center; gap: 12px; padding: 9px 22px 9px 16px;
  background: #000; color: #fff; border: 1.5px solid #a6a6a6; border-radius: 12px;
  font-size: 20px; font-weight: 600; line-height: 1.1; text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.play-badge small { display: block; font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; }
.play-badge:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(0,0,0,0.6); }
@media (max-width: 640px) { .app-band-inner { flex-direction: column; align-items: flex-start; } .app-band-text { flex: none; } }

/* Search card refresh: every field is a rounded card; the destination / city
   field is the dark-green focal card with a gold pin, replacing the flat
   yellow box + underline select. */
.search-card .field:not(.field-actions) {
  background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--radius-md);
  padding: 11px 16px 10px; gap: 4px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.search-card .field:not(.field-actions):hover { border-color: var(--pine-light); }
.search-card .field:not(.field-actions):focus-within {
  border-color: var(--pine); box-shadow: 0 0 0 3px rgba(35, 74, 52, 0.14); background: #fff;
}
.search-card .field select, .search-card .field input[type="date"], .search-card .field input[type="text"] {
  border-bottom: none; padding: 2px 0; font-weight: 600;
}
.search-card .field select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 24px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1.5l6 6 6-6' fill='none' stroke='%23234A34' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 2px center;
}
.search-card .field option { color: var(--text); font-weight: 500; }

.search-card .field.field-destination:not(.field-actions) {
  background: linear-gradient(135deg, var(--pine) 0%, var(--ink) 100%);
  border: none; animation: none;
  box-shadow: 0 12px 24px -12px rgba(22, 38, 29, 0.7);
  padding: 13px 18px 12px;
}
.search-card .field.field-destination:not(.field-actions):hover { border: none; transform: translateY(-2px); }
.search-card .field.field-destination:not(.field-actions):focus-within {
  background: linear-gradient(135deg, var(--pine) 0%, var(--ink) 100%);
  box-shadow: 0 0 0 3px var(--gold-light), 0 12px 24px -12px rgba(22, 38, 29, 0.7);
}
.search-card .field.field-destination:not(.field-actions) label { color: var(--gold-light); font-size: 12px; letter-spacing: 0.1em; }
.search-card .field.field-destination:not(.field-actions) label::before { content: "📍 "; letter-spacing: 0; }
.search-card .field.field-destination:not(.field-actions) .label-hint { color: var(--text-on-dark-muted); font-weight: 500; }
.search-card .field.field-destination:not(.field-actions) select {
  color: #fff; font-size: 17px; font-weight: 700;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1.5l6 6 6-6' fill='none' stroke='%23E7C36F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.search-card .field.field-destination:not(.field-actions) select option { color: var(--text); }

/* Per-item kitchen note under an item that is in the cart */
.menu-item-note { margin: 6px 0 2px 0; }
.menu-item-note select, .menu-item-note input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px;
  padding: 7px 10px; border: 1px solid var(--line, #d8e0d9); border-radius: 8px; background: #fff;
}

/* Restaurant offers (online ordering) */
.offer-chip { display: inline-block; margin: 0.2rem 0.3rem 0 0; padding: 0.1rem 0.55rem; border-radius: 999px;
  background: rgba(31,122,77,0.12); color: #1f7a4d; font-size: 0.72rem; font-weight: 600; line-height: 1.4; }
.offers-banner { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: 12px; background: rgba(31,122,77,0.07);
  border: 1px solid rgba(31,122,77,0.25); font-size: 0.9rem; }
.offers-banner > div { margin-top: 0.3rem; }

/* Solid offer badge + the "Offers" category */
.offer-chip { background: #1f7a4d; color: #fff; }
.menu-category.offers-category h4 { color: #1f7a4d; }
.menu-item-info .offer-chip { align-self: flex-start; width: auto; }