/* ============================================================
   Da-Mojito — Mobile-first redesign v8
   Aesthetic: Coastal luxury — warm sand, deep teal, clean air
   Font: Playfair Display (headings) + DM Sans (body)
   ============================================================ */

:root {
  color-scheme: light dark;

  /* Brand */
  --brand:      #1e7a6a;
  --brand-mid:  #2a9d8a;
  --brand-soft: rgba(30,122,106,.13);
  --brand-line: rgba(30,122,106,.28);

  /* Sand accents */
  --sand:       #e8c97a;
  --sand-soft:  rgba(232,201,122,.18);
  --sand-line:  rgba(232,201,122,.38);

  /* Neutrals — Light */
  --bg:         #f4f9f7;
  --bg2:        #ebf5f2;
  --surface:    rgba(255,255,255,.82);
  --surface2:   rgba(255,255,255,.95);
  --text:       #0e1e1b;
  --text2:      #3a5550;
  --border:     rgba(14,30,27,.09);

  /* Buttons */
  --btn-bg:     rgba(255,255,255,.78);
  --btn-border: rgba(14,30,27,.11);

  /* Shadows */
  --sh1: 0 2px 12px rgba(0,0,0,.07);
  --sh2: 0 8px 28px rgba(0,0,0,.10);
  --sh3: 0 20px 56px rgba(0,0,0,.13);

  /* Radii */
  --r-sm: 14px;
  --r:    20px;
  --r-lg: 28px;

  /* Fonts */
  --font-head: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

/* ── Dark mode ────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --brand:      #4ecdc4;
    --brand-mid:  #38b2a8;
    --brand-soft: rgba(78,205,196,.13);
    --brand-line: rgba(78,205,196,.28);
    --sand:       #f0c96e;
    --sand-soft:  rgba(240,201,110,.14);
    --sand-line:  rgba(240,201,110,.32);
    --bg:         #0d1e1b;
    --bg2:        #0a1917;
    --surface:    rgba(20,42,38,.82);
    --surface2:   rgba(24,50,45,.96);
    --text:       #e8f5f2;
    --text2:      #8ab8b0;
    --border:     rgba(78,205,196,.14);
    --btn-bg:     rgba(20,42,38,.80);
    --btn-border: rgba(78,205,196,.16);
    --sh1: 0 2px 12px rgba(0,0,0,.22);
    --sh2: 0 8px 28px rgba(0,0,0,.30);
    --sh3: 0 20px 56px rgba(0,0,0,.40);
  }
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 16px/1.55 var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* Subtle background texture */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80vw 60vh at 10% 0%, rgba(30,122,106,.10), transparent 65%),
    radial-gradient(ellipse 70vw 50vh at 90% 5%, rgba(232,201,122,.09), transparent 60%);
}

/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--surface2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--sh1);
}

/* Brand row */
.topbarBrand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 6px;
}

/* Globe sits directly in topbar flex, always visible */


.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logoWrap {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  overflow: hidden;
  flex-shrink: 0;
}
.logoMark { width: 38px; height: 38px; object-fit: contain; }

.brandName {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.3px;
  line-height: 1.1;
}
.brandTag {
  font-size: 11px;
  color: var(--text2);
  font-weight: 500;
  letter-spacing: .2px;
}

/* CTA — hidden on mobile, shown on desktop */
.cta { display: none; }

/* Nav pills row */
.nav {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  padding: 0 10px 8px;
}

.navBtn {
  appearance: none;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text);
  padding: 7px 2px;
  border-radius: 10px;
  cursor: pointer;
  font: 700 11px/1.15 var(--font-body);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .15s, border-color .15s, transform .1s;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navBtn:active { transform: scale(.97); }
.navBtn.is-active {
  background: var(--brand-soft);
  border-color: var(--brand-line);
  color: var(--brand);
}
.navBtn.reserve {
  background: linear-gradient(135deg, var(--brand-soft), var(--sand-soft));
  border-color: var(--brand-line);
  color: var(--brand);
  font-weight: 900;
}

/* ── Main wrap ────────────────────────────────────────────── */
.wrap {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 8px 10px 90px;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.tab { display: none; }
.tab.is-active { display: block; }

/* ── Hero Banner ──────────────────────────────────────────── */
#home .heroBanner {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 440px;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: var(--sh3);
  background: #c8e0dc;
}

#home .heroBannerMedia,
#home .heroBannerImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#home .heroBannerImg {
  object-fit: cover;
  object-position: center 30%;
}

#home .heroBannerShade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(8,28,24,.55) 0%,
      rgba(8,28,24,.30) 45%,
      rgba(8,28,24,.08) 75%,
      transparent 100%),
    linear-gradient(90deg,
      rgba(8,28,24,.40) 0%,
      transparent 55%);
}

#home .heroBannerContent {
  position: relative;
  z-index: 2;
  padding: 22px 18px 18px;
  display: flex;
  flex-direction: column;
  min-height: inherit;
  justify-content: flex-start;
}

#home .heroBannerContent h1 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(30px, 9vw, 52px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.5px;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
  max-width: 11ch;
}

#home .heroBannerContent p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255,255,255,.88);
  font-weight: 500;
  max-width: 26ch;
}

#home .heroBannerActions {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 280px;
}

#home .heroCta {
  appearance: none;
  border-radius: 999px;
  padding: 13px 20px;
  border: 1px solid transparent;
  font: 800 15px/1 var(--font-body);
  cursor: pointer;
  text-align: center;
  transition: transform .1s, box-shadow .12s, filter .12s;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
#home .heroCta:active { transform: scale(.97); }

#home .heroCtaPrimary {
  background: linear-gradient(135deg, #1e7a6a, #156657);
  color: #fff;
  box-shadow: 0 8px 24px rgba(21,102,87,.40);
}
#home .heroCtaGhost {
  background: rgba(255,255,255,.18);
  color: #fff;
  border-color: rgba(255,255,255,.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Facts strip ──────────────────────────────────────────── */
.factsRow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 10px 0 0;
}

.fact {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  box-shadow: var(--sh1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.factTitle {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text2);
}
.factValue {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 900;
  color: var(--text);
}

/* ── Cards / Grid ─────────────────────────────────────────── */
.grid2 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.infoCard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 14px;
  box-shadow: var(--sh2);
}
.infoCard h2, .infoCard h3 {
  margin: 0 0 8px;
  font-family: var(--font-head);
  letter-spacing: -.2px;
}
.infoCard h2 { font-size: 22px; }
.infoCard h3 { font-size: 18px; }
.infoCard p { margin: 0 0 10px; font-size: 15px; }

.bullets {
  margin: 8px 0 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bullets li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
}
.bullets li::before {
  content: '✓';
  color: var(--brand);
  font-weight: 900;
  font-size: 13px;
  margin-top: 2px;
  flex-shrink: 0;
}

.miniActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.smallBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 12px;
  padding: 10px 14px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--brand-line);
  background: var(--brand-soft);
  font: 800 13px/1 var(--font-body);
  color: var(--text);
  transition: transform .1s, box-shadow .12s;
  min-height: 42px;
}
.smallBtn:active { transform: scale(.97); }
.smallBtn.ghost {
  background: var(--btn-bg);
  border-color: var(--btn-border);
}

/* ── Price box ────────────────────────────────────────────── */
.priceBox {
  margin-top: 14px;
  border-radius: var(--r-sm);
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--brand-soft), var(--sand-soft));
  border: 1px solid var(--brand-line);
}
.priceTitle {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text2);
}
.priceText {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 900;
  font-family: var(--font-head);
  color: var(--brand);
}
.priceNote {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text2);
}

/* ── Tab head ─────────────────────────────────────────────── */
.tabHead {
  padding: 6px 0 10px;
}
.tabHead h2 {
  margin: 0 0 4px;
  font-family: var(--font-head);
  font-size: 26px;
  letter-spacing: -.3px;
}
.tabHead p {
  margin: 0;
  color: var(--text2);
  font-size: 14px;
}
/* Reserve section header — gradient gold→teal */
#reserve .tabHead h2 {
  background: linear-gradient(90deg, #d97706, #0d9488);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Media grid — Airbnb style ───────────────────────────── */

.mediaGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 2px;
}

.mediaTile {
  width: 100%;
  border-radius: 10px;
  border: none;
  background: var(--btn-bg);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1/1;
  object-fit: cover;
  transition: filter .18s, transform .18s;
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.mediaTile:hover  { filter: brightness(1.08); transform: scale(1.02); }
.mediaTile:active { filter: brightness(.92); transform: scale(.98); }

.mediaVideo {
  padding: 0;
  position: relative;
  display: block;
  text-align: left;
  aspect-ratio: 1/1;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.10);
}
.mediaVideoImg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: filter .18s;
}
.mediaVideo:hover .mediaVideoImg { filter: brightness(1.08); }

.playBadge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background: rgba(0,0,0,.58);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  border: 2px solid rgba(255,255,255,.70);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mediaVideoLabel {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 9px;
  font-weight: 900;
  background: rgba(0,0,0,.62);
  color: #fff;
  border-radius: 999px;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(4px);
  letter-spacing: .2px;
}

/* Desktop — 4 columns */
@media (min-width: 700px) {
  .mediaGrid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .mediaTile { border-radius: 12px; }
  .mediaVideo { border-radius: 12px; }
}

/* ── Calendar / Map ───────────────────────────────────────── */
.calendarWrap, .mapWrap {
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  position: relative;
}

.calendarAlert {
  margin: 6px 0 10px !important;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.calendarAlert::before {
  content: '📅';
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 1px;
}

.calendar { width: 100%; height: 500px; border: 0; }
.map { width: 100%; height: 420px; border: 0; }

/* Swipe hint */
.swipeHint {
  text-align: center;
  font-size: 11px;
  color: var(--text2);
  padding: 6px 0 2px;
  letter-spacing: .2px;
}

/* ── Map buttons ──────────────────────────────────────────── */
.mapButtons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 4px;   /* prevent overlap with hint */
}
.mapBtn {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font: 900 15px/1 var(--font-body);
  min-height: 52px;
  transition: transform .12s, filter .12s, box-shadow .12s;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.mapBtn:active { transform: scale(.97); filter: brightness(.93); }

/* Google Maps — brand blue */
.mapBtnGoogle {
  background: linear-gradient(135deg, #4285F4, #1a73e8);
  box-shadow: 0 4px 14px rgba(66,133,244,.35);
}
/* Apple Maps — dark with green accent */
.mapBtnApple {
  background: linear-gradient(135deg, #2c2c2e, #1c1c1e);
  box-shadow: 0 4px 14px rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.12);
}
/* Waze — brand sky blue */
.mapBtnWaze {
  background: linear-gradient(135deg, #33ccff, #05a8e0);
  box-shadow: 0 4px 14px rgba(5,168,224,.38);
}

/* Icon container — white bg circle for contrast */
.mapBtnIconWrap {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mapBtnSvg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.mapNavHint {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  padding: 9px 14px;
  background: var(--brand-soft);
  border-radius: var(--r-sm);
  border: 1px solid var(--brand-line);
  clear: both;
}

/* ── Form ─────────────────────────────────────────────────── */
.form { margin-top: 8px; }
.formGrid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field { display: flex; flex-direction: column; gap: 4px; }

label {
  font: 700 11px/1 var(--font-body);
  letter-spacing: .2px;
  text-transform: uppercase;
  color: var(--text2);
}

input, select, textarea {
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text);
  outline: none;
  font: 500 15px/1.3 var(--font-body);
  -webkit-appearance: none;
  appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--text2); }
input:focus, select:focus, textarea:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,.15);
}

.formActions {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bigBtn {
  appearance: none;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text);
  padding: 11px 16px;
  border-radius: var(--r-sm);
  font: 900 14px/1 var(--font-body);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .1s, box-shadow .12s;
}
.bigBtn:active { transform: scale(.98); }
.bigBtn.reserveBtn {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(13,148,136,.38);
  font-size: 15px;
}

.smallHint { font-size: 12px; color: var(--text2); }
.muted { color: var(--text2); }
.note { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 14px; }
.noteMini { margin-top: 10px; padding: 10px 12px; font-size: 13px; }

.formError { margin-top: 10px; color: #d64545; font-weight: 800; font-size: 14px; }
.formOk    { margin-top: 10px; color: var(--brand); font-weight: 800; font-size: 14px; }

/* ── Footer ───────────────────────────────────────────────── */
.footer {
  padding: 16px 14px 24px;
  text-align: center;
  color: var(--text2);
  font-size: 13px;
  position: relative;
  z-index: 1;
}

/* ── Mobile bar ───────────────────────────────────────────── */
.mobileBar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 8px;
  padding: 10px 12px;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  background: var(--surface2);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(0,0,0,.10);
}

.mbBtn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  height: 46px;
  border-radius: var(--r-sm);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text);
  font: 800 13px/1 var(--font-body);
  cursor: pointer;
  gap: 5px;
}
.mbBtn.primary {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(13,148,136,.35);
}

/* ── WhatsApp button ──────────────────────────────────────── */
.waBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: var(--r-sm);
  background: #25d366;
  border: 1px solid rgba(0,0,0,.08);
  color: #fff;
  font: 800 14px/1 var(--font-body);
  text-decoration: none;
  min-height: 46px;
  transition: transform .1s, box-shadow .12s;
}
.waBtn:active { transform: scale(.97); }

/* ── Lightbox ─────────────────────────────────────────────── */
.noScroll { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 100;
}
.lightbox.is-open { display: block; }
.lbBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.lbPanel {
  position: relative;
  width: min(960px, calc(100% - 20px));
  margin: 16px auto;
  background: var(--surface2);
  border-radius: var(--r);
  border: 1px solid var(--border);
  box-shadow: var(--sh3);
  overflow: hidden;
}

.lbClose {
  position: absolute;
  top: 10px; right: 10px;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lbNav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 56px;
  border-radius: var(--r-sm);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text);
  font-size: 26px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.lbPrev { left: 8px; }
.lbNext { right: 8px; }

.lbStage { padding: 58px 14px 12px; }
.lbImg {
  width: 100%;
  border-radius: var(--r-sm);
  border: 1px solid var(--btn-border);
}
.lbVideo {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: var(--r-sm);
  display: none;
}
.lbCaption {
  padding: 8px 14px 18px;
  color: var(--text2);
  font-weight: 700;
  font-size: 13px;
}

/* ── Home grid ────────────────────────────────────────────── */
.grid2Clean { margin-top: 8px; }

/* ── Desktop adjustments (≥ 700px) ───────────────────────── */
@media (min-width: 700px) {
  .topbar {
    flex-direction: row;
    align-items: center;
    padding: 10px 20px;
    gap: 16px;
  }
  .topbarBrand { padding: 0; }
  .nav {
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    flex: 1;
    justify-content: center;
  }
  .navBtn { font-size: 13px; padding: 9px 12px; min-height: 38px; }
  .cta {
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .ctaBtn {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--brand-line);
    background: var(--brand-soft);
    font: 800 13px/1 var(--font-body);
    min-height: 38px;
  }
  .ctaBtn.ghost {
    background: var(--btn-bg);
    border-color: var(--btn-border);
  }

  .wrap { padding: 24px 24px 60px; }
  .mobileBar { display: none; }

  #home .heroBanner { min-height: 460px; }
  #home .heroBannerImg { object-position: center center; }
  #home .heroBannerShade {
    background:
      linear-gradient(90deg, rgba(8,28,24,.68) 0%, rgba(8,28,24,.40) 38%, rgba(8,28,24,.08) 62%, transparent 80%),
      linear-gradient(180deg, rgba(8,28,24,.18), transparent 55%);
  }
  #home .heroBannerContent {
    width: min(600px, 60%);
    min-height: inherit;
    justify-content: center;
    padding: 40px 44px;
  }
  #home .heroBannerContent h1 { font-size: clamp(36px, 4.5vw, 60px); }
  #home .heroBannerContent p  { font-size: 17px; }
  #home .heroBannerActions { flex-direction: row; max-width: none; }
  #home .heroCta { min-width: 160px; }

  .factsRow { grid-template-columns: repeat(4, 1fr); margin: -20px 0 0; }
  .fact { padding: 12px 16px; }

  .grid2 { display: grid; grid-template-columns: 1fr 1fr; }
  .formGrid { display: grid; grid-template-columns: 1fr 1fr; }
  .fieldFull { grid-column: 1 / -1; }
  .formActions { flex-direction: row; align-items: center; }
  /* mediaGrid desktop handled in block above */

  .lbStage { padding: 58px 48px 14px; }
  .lbCaption { padding: 0 48px 20px; }
  .lbVideo { height: 460px; }
}

@media (min-width: 1000px) {
  #home .heroBanner { min-height: 520px; }
  .brandTag { display: block; }
}

/* ── Hide theme toggle (v8 — system only) ─────────────────── */
#themeToggle, #themeToggleMobile,
.themeBtn, .themeBtnMobile { display: none !important; }

/* ── Calendar swipe nav ───────────────────────────────────── */
.calSwipeNav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.calPrev, .calNext {
  appearance: none;
  border: none;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  font: 800 12px/1 var(--font-body);
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 3px 10px rgba(2,132,199,.35);
  transition: transform .1s, box-shadow .12s, filter .1s;
  white-space: nowrap;
}
.calPrev:hover, .calNext:hover {
  filter: brightness(1.1);
  box-shadow: 0 5px 14px rgba(2,132,199,.45);
}
.calPrev:active, .calNext:active {
  transform: scale(.95);
  filter: brightness(.95);
}
@media (prefers-color-scheme: dark) {
  .calPrev, .calNext {
    background: linear-gradient(135deg, #0ea5e9, #0369a1);
    box-shadow: 0 3px 12px rgba(14,165,233,.30);
  }
}

.calSwipeHint {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  text-align: center;
  flex: 1;
}

/* Overlay over iframe to capture swipe touch events */
.calOverlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: grab;
  /* transparent — doesn't block visual content */
  background: transparent;
  /* allow vertical scroll to pass through on non-touch */
  touch-action: pan-y;
}

/* ── Our own calendar (replaces Google iframe) ───────────── */
.ourCal { padding: 2px 0 4px; }

.ourCalGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.ourCalDayName {
  text-align: center;
  font: 800 9px/1 var(--font-body);
  letter-spacing: .2px;
  text-transform: uppercase;
  color: var(--text2);
  padding: 5px 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}

.ourCalCell {
  aspect-ratio: unset;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 2px 3px;
  border-radius: 0;
  font: 600 12px/1 var(--font-body);
  color: var(--text);
  cursor: default;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background .1s;
  overflow: hidden;
}
/* Remove right border on last column */
.ourCalCell:nth-child(7n) { border-right: none; }
/* Remove bottom border on last row cells */
.ourCalCell:nth-last-child(-n+7) { border-bottom: none; }
.ourCalDay {
  font: 700 12px/1 var(--font-body);
  flex-shrink: 0;
}
.ourCalGuest {
  display: block;
  font: 700 7.5px/1.2 var(--font-body);
  text-align: center;
  margin-top: 3px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 1px;
}
.ourCalCell.ourCheckin  .ourCalGuest { color: var(--brand); }
.ourCalCell.ourCheckout .ourCalGuest { color: #7a5c00; }
.ourCalCell.ourBooked   .ourCalGuest { color: #b83232; }
.ourCalCell.ourToday {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  font-weight: 900;
}
.ourCalCell.ourBooked {
  background: rgba(214,69,69,.16);
  color: #b83232;
}
.ourCalCell.ourCheckin {
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  color: var(--brand);
  font-weight: 900;
}
.ourCalCell.ourCheckout {
  background: rgba(232,201,122,.28);
  border: 1px solid rgba(232,201,122,.52);
  color: #7a5c00;
  font-weight: 900;
}

.ourCalLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.ourLegItem {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text2);
  font-weight: 600;
}
.ourLegDot {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}
.ourLegDot.ourBooked   { background: rgba(214,69,69,.25); }
.ourLegDot.ourCheckin  { background: var(--brand-soft); border: 1px solid var(--brand-line); }
.ourLegDot.ourCheckout { background: rgba(232,201,122,.40); border: 1px solid rgba(232,201,122,.55); }

.ourCalLoading {
  text-align: center;
  padding: 32px 0;
  color: var(--text2);
  font-size: 14px;
}

/* calSwipeHint defined in calSwipeNav section */

/* Remove old calendar height */
.calendar { display: none; }

/* Inner content wrapper — overlay sits outside this so swipe always works */
.calInner { display: block; }

/* ── Availability check message ──────────────────────────── */
.availMsg   { font: 800 13px/1.4 var(--font-body); min-height: 18px; margin-bottom: 4px; }
.availFree  { color: #0d9488; }
.availBusy  { color: #d64545; }

/* ── Reservation summary box ─────────────────────────────── */
.reserveSummary {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, rgba(13,148,136,.10), rgba(217,119,6,.10));
  border: 1px solid rgba(13,148,136,.28);
  font: 700 13px/1.5 var(--font-body);
  color: var(--text);
  margin-bottom: 4px;
}
.sumIcon { margin-right: 2px; }

/* ── Toast notification ──────────────────────────────────── */
.dmToast {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 999;
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
  font: 800 14px/1.5 var(--font-body);
  padding: 14px 22px;
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(5,150,105,.40);
  text-align: center;
  max-width: min(340px, calc(100vw - 32px));
  white-space: pre-line;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.dmToastVisible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Language switcher ───────────────────────────────────── */
/* ── Language globe button ───────────────────────────────── */
.langGlobe {
  appearance: none;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--text);
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  /* Fixed square — never stretches */
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  max-width: 32px;
  max-height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

/* Dropdown — fixed, positioned by JS */
.langDropdown {
  position: fixed;
  z-index: 9999;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  padding: 6px;
  min-width: 170px;
  display: none;
  /* iOS Safari fixes */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  pointer-events: auto;
}
.langDropdown.is-open {
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: auto;
}

.langBtn {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 11px 14px;
  border-radius: 9px;
  font: 600 15px/1 var(--font-body);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  /* iOS Safari tap fixes */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  pointer-events: auto;
}
.langBtn:active   { background: var(--brand-soft); }
.langBtn.is-active{ background: var(--brand-soft); color: var(--brand); font-weight: 900; }

/* Globe button iOS fix */
.langGlobe {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── Apt section — richer colors ─────────────────────────── */
#apt1 .infoCard:first-child,
#apt2 .infoCard:first-child {
  border-left: 3px solid var(--brand);
  background: linear-gradient(135deg,
    rgba(13,148,136,.07) 0%,
    var(--surface) 60%);
}
#apt1 .priceBox,
#apt2 .priceBox {
  background: linear-gradient(135deg,
    rgba(13,148,136,.16),
    rgba(217,119,6,.12));
  border-color: rgba(13,148,136,.32);
}
/* Media card — no extra padding so grid fills edge to edge */
#apt1 .infoCard:has(.mediaGrid),
#apt2 .infoCard:has(.mediaGrid) {
  padding: 14px 0 0;
  overflow: hidden;
}
#apt1 .infoCard:has(.mediaGrid) h3,
#apt2 .infoCard:has(.mediaGrid) h3,
#apt1 .infoCard:has(.mediaGrid) .muted,
#apt2 .infoCard:has(.mediaGrid) .muted {
  padding: 0 14px;
}

/* ── Parking photo card ──────────────────────────────────── */
.parkingCard {
  margin-top: 12px;
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 2px solid #2a7fa8;
  box-shadow: 0 4px 16px rgba(42,127,168,.28);
  cursor: pointer;
  display: block;
  max-width: 280px;
  transition: transform .15s, box-shadow .15s;
}
.parkingCard:hover  { transform: scale(1.02); box-shadow: 0 6px 20px rgba(42,127,168,.38); }
.parkingCard:active { transform: scale(.98); }

.parkingImg {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 4/3;
}

.parkingLabel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(42,127,168,.82);
  color: #fff;
  font: 800 11px/1.3 var(--font-body);
  text-align: center;
  padding: 5px 8px;
  letter-spacing: .3px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}