/* ==========================================================================
   Casaassa — design tokens (light + dark) and shared styles
   ========================================================================== */

:root {
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Dancing Script', cursive;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.22);
  --container: 1400px;
}

/* ---- Light theme (default) — warm, earthy, terracotta accents ---- */
:root,
:root[data-theme='light'] {
  --bg: #f4ede1;
  --bg-elevated: #fffdf9;
  --bg-soft: #ece2d1;
  --text: #2c231b;
  --text-muted: #6b5c4d;
  --border: #ddceb4;
  --accent: #b5651d;
  --accent-hover: #9a5417;
  --accent-contrast: #fff8ef;
  --header-bg: #f7f1e6;
  --hero-overlay: linear-gradient(180deg, rgba(35, 26, 18, 0.15) 0%, rgba(35, 26, 18, 0.55) 100%);
  --hero-bg-1: #d8a86f;
  --hero-bg-2: #8a5a3b;
  --footer-bg: #3f4a34;
  --footer-text: #ece7d8;
  --card-bg: #fffdf9;
  --toggle-icon: '🌙';
}

/* ---- Dark theme — navy/black, gold accents ---- */
:root[data-theme='dark'] {
  --bg: #0c1118;
  --bg-elevated: #131a24;
  --bg-soft: #171f2b;
  --text: #f2ede3;
  --text-muted: #a9b0bc;
  --border: #232c3a;
  --accent: #d4a15b;
  --accent-hover: #e3b271;
  --accent-contrast: #1b1406;
  --header-bg: #0b0f16;
  --hero-overlay: linear-gradient(180deg, rgba(6, 10, 16, 0.25) 0%, rgba(6, 10, 16, 0.75) 100%);
  --hero-bg-1: #1c2b40;
  --hero-bg-2: #d98f4e;
  --footer-bg: #05070b;
  --footer-text: #cfd3da;
  --card-bg: #131a24;
  --toggle-icon: '☀';
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0c1118;
    --bg-elevated: #131a24;
    --bg-soft: #171f2b;
    --text: #f2ede3;
    --text-muted: #a9b0bc;
    --border: #232c3a;
    --accent: #d4a15b;
    --accent-hover: #e3b271;
    --accent-contrast: #1b1406;
    --header-bg: #0b0f16;
    --hero-overlay: linear-gradient(180deg, rgba(6, 10, 16, 0.25) 0%, rgba(6, 10, 16, 0.75) 100%);
    --hero-bg-1: #1c2b40;
    --hero-bg-2: #d98f4e;
    --footer-bg: #05070b;
    --footer-text: #cfd3da;
    --card-bg: #131a24;
  }
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  transition: background 0.25s ease, color 0.25s ease;
}

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

/* Base size for every inline <svg class="icon"> from App\Core\Icons::render() —
   without this, an unsized inline SVG falls back to the browser's default
   replaced-element box (commonly 300x150), which is why icons rendered
   oversized wherever this class was applied directly to the <svg> itself
   rather than to a wrapping element with its own explicit width/height. */
svg.icon { width: 18px; height: 18px; flex-shrink: 0; vertical-align: -3px; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.17rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 0.5em; color: var(--text-muted); }
/* Real line breaks (addresses, invoices, emails, reviews) keep the normal
   line-height — only tighten paragraphs that use <br> as a compact list. */
p:has(br) { line-height: 1.3; }

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

.script-accent {
  font-family: var(--font-script);
  color: var(--accent);
  font-size: 1.4em;
  font-weight: 400;
}

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { background: var(--accent-hover); }

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

.btn-block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-sm { padding: 8px 16px; font-size: 0.72rem; }
.btn-outline-danger { background: transparent; color: #c83c28; border-color: rgba(200,60,40,0.4); }
.btn-outline-danger:hover { background: rgba(200,60,40,0.08); border-color: #c83c28; }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 82px;
  gap: 24px;
}

.logo {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.logo-img { height: 25px; width: auto; display: block; }
.logo-img-dark { display: none; }
:root[data-theme='dark'] .logo-img-light { display: none; }
:root[data-theme='dark'] .logo-img-dark { display: block; }

.main-nav { display: flex; gap: 30px; align-items: center; }
.main-nav a {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.main-nav a:hover, .main-nav a.active { color: var(--accent); }
.main-nav .nav-link-icon { display: none; }

.header-actions { display: flex; align-items: center; gap: 14px; }

.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--text);
}
.theme-toggle:hover { border-color: var(--accent); }

/* Mobile-only account menu (replaces the theme toggle at <=1024px — see
   media query below) — user icon opens a small dropdown with My Account/
   Logout, or Login/Registration when signed out. Hidden on desktop, where
   the existing Log In / Book Your Stay buttons already cover this. */
.header-account-menu { position: relative; display: none; }
.header-account-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.header-account-toggle:hover { border-color: var(--accent); }
.header-account-toggle svg { width: 18px; height: 18px; }
.header-account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  padding: 8px;
  z-index: 200;
}
.header-account-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
}
.header-account-dropdown a:hover { background: var(--bg-soft); }
.header-account-dropdown svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--text-muted); }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ---- Hero ---- */
.hero {
  position: relative;
  color: #fff8ef;
  background: linear-gradient(135deg, var(--hero-bg-1), var(--hero-bg-2));
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.25;
  background-image: radial-gradient(circle at 15% 30%, rgba(255,255,255,0.25) 0, transparent 40%),
                     radial-gradient(circle at 85% 75%, rgba(255,255,255,0.15) 0, transparent 45%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  padding: 96px 0 64px;
}
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: #fff8ef;
  max-width: 640px;
}
.hero .tagline-script {
  display: block;
  margin: 4px 0 18px;
}
.hero p.lead {
  color: rgba(255, 248, 239, 0.85);
  max-width: 480px;
  font-size: 1.02rem;
}
.hero-actions { display: flex; gap: 14px; margin-top: 26px; margin-bottom: 60px; flex-wrap: wrap; }
.hero .btn-outline { border-color: rgba(255,248,239,0.5); color: #fff8ef; }
.hero .btn-outline:hover { border-color: #fff8ef; }

/* ---- Hero carousel (Admin > Banner Settings — App\Models\Banner) ----
   Each .hero-slide is a self-contained stacking context (bg/video -> tint ->
   text, explicit z-index at every layer) so it never depends on the plain
   .hero's ::before/::after decoration, which is disabled here in favor of
   each slide owning its own tint — simpler to reason about with N stacked,
   crossfading slides than trying to share one pair of pseudo-elements
   across all of them. */
.hero-carousel {
  min-height: clamp(520px, 78vh, 760px);
}
.hero-carousel::before,
.hero-carousel::after {
  display: none;
}
.hero-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
}
.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.hero-slide-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}
.hero-slide-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-video-embed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* 16:9 */
  min-height: 100%;
  min-width: 177.78%; /* 100 * 16/9, so "cover" holds at any aspect ratio */
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.hero-slide-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: #000;
  opacity: 0.5;
}
.hero-slide .hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 10px;
}
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,248,239,0.7);
  background: rgba(255,248,239,0.25);
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.hero-dot:hover { background: rgba(255,248,239,0.5); }
.hero-dot.active { background: #fff8ef; transform: scale(1.15); }

@media (max-width: 760px) {
  .hero-carousel { min-height: 560px; }
  .hero-dots { bottom: 18px; }
}
section#destinations {
    padding: 0px !important;
}
/* ---- Section shells ---- */
.section { padding: 64px 0; }
.section-heading {  margin-bottom: 40px; }
.section-heading h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.divider-label {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  margin-bottom: 36px;
  color: var(--text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.divider-label::before, .divider-label::after {
  content: '';
  height: 1px;
  width: 60px;
  background: var(--border);
}

/* ---- Small page hero (Contact Us, About Us) ---- */
.page-hero {
  position: relative;
  color: #fff8ef;
  background: linear-gradient(135deg, var(--hero-bg-1), var(--hero-bg-2));
  padding: 64px 0;
  text-align: center;
}
.page-hero h1 { color: #fff8ef; margin-bottom: 8px; }
.page-hero p { color: rgba(255,248,239,0.85); max-width: 560px; margin: 0 auto; font-size: 1.02rem; }

/* ---- About Us page ---- */
.about-hero {
  background: linear-gradient(135deg, var(--hero-bg-1), var(--hero-bg-2));
  background-size: cover;
  background-position: center;
  padding: 96px 0;
}
.about-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,12,6,0.55) 0%, rgba(20,12,6,0.78) 100%);
}
.about-hero .container { position: relative; z-index: 1; }

.about-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 24px;
  text-align: center;
}
.about-stat .value { font-family: var(--font-serif); font-size: 2.2rem; font-weight: 700; color: var(--accent); }
.about-stat .label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
.about-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.about-story-grid h2 { margin-bottom: 14px; }
.about-story-grid p { margin-bottom: 14px; }
@media (max-width: 780px) {
  .about-story-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- About Us — alternating image/text story rows ---- */
.about-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.about-row + .about-row { margin-top: 64px; }
.about-row-reverse .about-row-media { order: 2; }
.about-row-reverse .about-row-text { order: 1; }
.about-row-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--bg-soft);
}
.about-row-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-row-text h2 { margin-bottom: 14px; }
.about-row-text p { margin-bottom: 14px; color: var(--text-muted); }
@media (max-width: 780px) {
  .about-row { grid-template-columns: 1fr; gap: 20px; }
  .about-row-reverse .about-row-media { order: 1; }
  .about-row-reverse .about-row-text { order: 2; }
  .about-row + .about-row { margin-top: 40px; }
}

/* ---- About Us — "Where We Take You" destination photo grid (reuses the
   .destination-card look from the home page slider, laid out as a static grid
   instead of a scroller since this list is short and non-paginated) ---- */
.about-destinations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
}
.about-destinations-grid .destination-card { aspect-ratio: 1 / 1; }

/* ---- About Us — closing CTA with a real listing photo backdrop ---- */
.about-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 64px 24px;
  text-align: center;
  color: #fff8ef;
}
.about-cta .about-cta-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.about-cta .about-cta-overlay { position: absolute; inset: 0; background: rgba(20,12,6,0.72); }
.about-cta > * { position: relative; z-index: 1; }
.about-cta h2 { color: #fff8ef; }
.about-cta p { color: rgba(255,248,239,0.85); }
.about-cta .btn-outline { border-color: rgba(255,248,239,0.5); color: #fff8ef; }
.about-cta .btn-outline:hover { border-color: #fff8ef; }

/* ---- Contact Us page ---- */
.contact-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: start; }
.contact-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form-card textarea { resize: vertical; }
/* Specificity has to beat .form-group input:not(...):not(...) below (which sets
   the themed --bg-elevated/--text) — otherwise this loses in dark mode, where
   that rule's dark background makes the field look unstyled/broken. */
.contact-form-card .form-group input:not([type="checkbox"]):not([type="radio"]),
.contact-form-card .form-group select,
.contact-form-card .form-group textarea {
  background: #fff;
  color: #2c231b;
}
.contact-form-card .form-group select option { background: #fff; color: #2c231b; }
.contact-info-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 0.92rem;
}
.contact-info-item:last-of-type { border-bottom: none; }
.contact-info-item .icon { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.social-links { display: flex; gap: 10px; margin-top: 16px; }
.social-links a {
  width: 42px; height: 42px;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.social-links a:hover { border-color: var(--accent); color: var(--accent); }
.social-links svg.icon { width: 16px; height: 16px; }
:root[data-theme='dark'] .social-links a { border-color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .social-links a { border-color: #fff; }
}

/* ---- Burning Man badge (shared by .burningman-section below and
   .burningman-banner on the RV listing page) ---- */
.burningman-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,138,45,0.16);
  border: 1px solid rgba(255,163,79,0.5);
  color: #ffb86b;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.78rem;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 18px;
}
.burningman-badge svg.icon { width: 12px; height: 12px; flex-shrink: 0; }

/* ---- Burning Man banner (RV Rentals listing page) ---- */
.burningman-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  color: #fff;
  padding: 40px 32px;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  background: #2a1608;
}
.burningman-banner .burningman-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 60%;
  opacity: 0.5;
}
.burningman-banner .burningman-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(30,14,4,0.92) 20%, rgba(30,14,4,0.45) 100%);
}
.burningman-banner .burningman-text { position: relative; max-width: 480px; }
.burningman-banner .burningman-text h3 { color: #fff8ef; margin-bottom: 8px; }
.burningman-banner .burningman-text p { color: rgba(255,244,230,0.85); font-size: 0.92rem; margin: 0; }
.burningman-banner .burningman-badge { margin-bottom: 12px; }
.burningman-banner .btn-primary {
  position: relative;
  background: linear-gradient(135deg, #ff8a2d, #d1432a);
  border-color: transparent;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .burningman-banner { padding: 28px 20px; text-align: center; justify-content: center; }
  .burningman-banner .burningman-text { max-width: none; }
}

/* ---- Burning Man promo section (home page, above Featured RV Rentals) ---- */
.burningman-section {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
  color: #fff;
  padding: 80px 0;
}
.burningman-section .burningman-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 55%;
}
.burningman-section .burningman-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20,10,4,0.88) 30%, rgba(20,10,4,0.5) 100%);
}
.burningman-content { position: relative; max-width: 860px; text-align: center; }
.burningman-content h2 { color: #fff8ef; margin-bottom: 14px; }
.burningman-content p { color: rgba(255,244,230,0.88); font-size: 1rem; margin-bottom: 24px; }
.burningman-content .btn-primary {
  background: linear-gradient(135deg, #ff8a2d, #d1432a);
  border-color: transparent;
}
.burningman-stats { display: flex; gap: 28px; margin-top: 36px; flex-wrap: wrap; }
.burningman-stats > div { display: flex; align-items: center; gap: 10px; font-size: 0.86rem; color: rgba(255,244,230,0.85); }
.burningman-stats svg.icon { width: 20px; height: 20px; color: #ffb86b; flex-shrink: 0; }
@media (max-width: 640px) {
  .burningman-section { padding: 56px 0; text-align: left; }
  /* .burningman-content has its own text-align:center (line 631) which wins
     over the ancestor's text-align above — override it directly, otherwise
     the badge/button (inline-level boxes) stay centered and the heading/
     paragraph text stays centered inside their full-width boxes. */
  .burningman-content { max-width: none; text-align: left; }
  .burningman-stats { justify-content: flex-start; }
}

/* ---- "More than a stay, it's a way of life" homepage section (see
   partials/lifestyle-section.php) — full-bleed photo background, text panel
   fades into it via a gradient (rather than a dark scrim like Burning Man
   above) so the photo itself stays bright and uncovered. The overlay is sized
   relative to .container (not the viewport) so it lines up with the text
   regardless of screen width — a viewport-relative gradient would drift out
   of alignment with the text on very wide screens, since .container itself
   is centered and capped at max-width. ---- */
.lifestyle-section {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
}
.lifestyle-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-soft);
}
.lifestyle-section .container {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
}
.lifestyle-overlay {
  position: absolute; inset: 0; left: 0;
  width: min(640px, 64%);
  background: linear-gradient(90deg, var(--bg-elevated) 0%, var(--bg-elevated) 75%, rgba(0,0,0,0) 100%);
}
.lifestyle-content { position: relative; z-index: 1; max-width: 440px; padding: 40px 0; text-align: left; }
.lifestyle-content h2 { margin: 2px 0 14px; }
.lifestyle-content p { color: var(--text-muted); margin-bottom: 22px; }
@media (max-width: 760px) {
  .lifestyle-section { min-height: 0; }
  .lifestyle-overlay { width: 100%; background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-elevated) 55%, rgba(0,0,0,0) 100%); }
  .lifestyle-content { max-width: none; padding: 32px 0 220px; }
}

/* ---- Destination / property cards ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

/* /properties, /rv-rentals — a fixed 3-up grid rather than auto-fill, so cards
   stay a consistent size regardless of result count (auto-fill above is still
   used for the home page's shorter "featured" rows and the wishlist grid). */
.properties-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .properties-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .properties-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .properties-grid { grid-template-columns: 1fr; } }

.section-view-all { text-align: center; margin-top: 32px; }

.destination-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--bg-soft);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.destination-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.destination-card .card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.destination-card .card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.72) 100%);
}
.destination-card .card-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px;
  color: #fff;
}
.destination-card .card-body strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.destination-card .card-body span { font-size: 0.85rem; color: rgba(255,255,255,0.85); }
.destination-card .card-arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.7);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

/* ---- "Explore Destinations" slider ---- */
.destination-slider-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }

/* ---- "Explore Our Destinations" homepage header — centered heading, unlike
   the plain left-aligned .destination-slider-head used by Featured Stays and
   Featured RV Rentals, so this modifier is scoped rather than changing the
   shared class. Nav arrows stay pinned to the right via absolute positioning
   so they don't pull the heading off-center. ---- */
.destination-slider-head-centered { position: relative; display: block; }
.destinations-heading { text-align: center; }
.destination-slider-head-centered .divider-label { justify-content: center; }
.destination-slider-head-centered .slider-nav {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
}
@media (max-width: 640px) {
  .destinations-heading { text-align: left; }
  /* justify-content alone left-packs the flex row, but .divider-label's own
     ::before line still renders first — so the text itself sat ~76px in,
     not flush at the edge. Drop the leading line on mobile so the text
     starts right at the container edge; keep the trailing line after it. */
  .destination-slider-head-centered .divider-label { justify-content: flex-start; }
  .destination-slider-head-centered .divider-label::before { display: none; }
  .destination-slider-head-centered .slider-nav { position: static; transform: none; justify-content: flex-start; margin-top: 16px; }
}
.slider-nav { display: flex; gap: 8px; }
.slider-nav-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.slider-nav-btn svg { width: 16px; height: 16px; }
.slider-nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.destination-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 40px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.destination-slider::-webkit-scrollbar { display: none; }
.destination-slider .destination-card { flex: 0 0 220px; scroll-snap-align: start; }
@media (max-width: 600px) { .destination-slider .destination-card { flex-basis: 68vw; } }

/* ---- "Handpicked Properties" / "Featured RV Rentals" sliders — 4-up ---- */
.property-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.property-slider::-webkit-scrollbar { display: none; }
.property-slider .property-card { flex: 0 0 calc(25% - 15px); scroll-snap-align: start; }
@media (max-width: 1024px) { .property-slider .property-card { flex-basis: calc(33.333% - 14px); } }
@media (max-width: 760px) { .property-slider .property-card { flex-basis: calc(50% - 10px); } }
@media (max-width: 480px) { .property-slider .property-card { flex-basis: 82vw; } }

/* ---- Feature strip ---- */
.feature-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px;
  padding: 48px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.feature-item { text-align: center; padding: 0 12px; }
.feature-item .icon {
  width: 46px; height: 46px;
  margin: 0 auto 14px;
  color: var(--accent);
}
.feature-item .icon svg { width: 100%; height: 100%; }
.feature-item h4 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.feature-item p { font-size: 0.88rem; margin: 0; }

/* .feature-strip's own grid-template-columns:auto-fit collapses to 1 column
   fine on narrow screens on its own — but .feature-strip being display:grid
   too (with only .container as its single child) let .container's 5
   non-shrinking min-180px items blow out the whole page horizontally,
   since a grid item's automatic min-width is its content's min-content
   unless the item itself resets it. Site-wide (home page and any other page
   using .feature-strip), so this covers more than just About Us. */
@media (max-width: 780px) {
  .feature-strip { display: block; padding: 30px 0; }
}

/* Home page only (main:has(.burningman-section) — see the .section rule
   above) — feature items left-aligned on mobile instead of centered. The
   About Us page's feature-item carousel keeps its own centered card look,
   untouched. */
@media (max-width: 780px) {
  main:has(.burningman-section) .feature-item { text-align: left; }
  main:has(.burningman-section) .feature-item .icon { margin: 0 0 14px; }
}

/* ---- Home page only (main:has(.burningman-section) — that section is
   always rendered, unconditionally, only on the home page) — tighter section
   padding on mobile, matching the About Us page's same fix. Other pages
   sharing .section (properties, rv-rentals, contact-us, etc.) are untouched,
   and desktop is untouched. ---- */
@media (max-width: 780px) {
  main:has(.burningman-section) .section { padding: 30px 0; }
}

/* ---- About Us page only (.about-hero is unique to this page) — mobile only,
   desktop untouched. Tighter section padding, and both the destinations grid
   and the feature strip become swipeable horizontal carousels (same
   scroll-snap technique as .destination-slider/.property-slider above). ---- */
@media (max-width: 780px) {
  .about-hero ~ .section { padding: 30px 0; }
  .about-hero ~ .feature-strip { display: block; padding: 20px 0; }

  .about-hero ~ .section .about-destinations-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 14px;
    padding-bottom: 8px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .about-hero ~ .section .about-destinations-grid::-webkit-scrollbar { display: none; }
  .about-hero ~ .section .about-destinations-grid .destination-card {
    flex: 0 0 68vw;
    aspect-ratio: 1 / 1;
    scroll-snap-align: start;
  }

  .about-hero ~ .feature-strip .container {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 14px !important;
    padding-bottom: 8px;
    margin-left: 20px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .about-hero ~ .feature-strip .container::-webkit-scrollbar { display: none; }
  .about-hero ~ .feature-strip .feature-item {
    flex: 0 0 78vw;
    scroll-snap-align: start;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px 16px;
  }
}

/* ---- Footer bottom bar ---- */
.footer-bar {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 18px 0;
}
.footer-bar .container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}
.footer-tagline {
  font-family: var(--font-script);
  font-size: 1.3rem;
  color: #fff;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 28px; }
.footer-link { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; }
.footer-link .icon { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.footer-link strong { display: block; font-size: 0.82rem; }
.footer-link span.sub { color: rgba(255,255,255,0.65); font-size: 0.78rem; }

/* ---- Footer main — Follow Us / Get Inspired / Quick Links / Support / badge.
   Always dark (var(--footer-bg)/--footer-text), same as .footer-bar below it,
   regardless of site theme — the two form one continuous dark footer band. ---- */
.site-footer-main {
  background: var(--footer-bg);
  padding: 28px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-main-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.footer-col h5 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; color: var(--footer-text); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: rgba(255,255,255,0.72); font-size: 0.9rem; }
.footer-col a:hover { color: #fff; }
.footer-newsletter p { color: rgba(255,255,255,0.72); font-size: 0.88rem; margin: 0 0 14px; }

.footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-social a {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 10px; box-sizing: border-box; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.35); color: #fff;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.footer-social a svg.icon { width: 16px; height: 16px; }
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.newsletter-form { display: flex; max-width: 320px; border-radius: 999px; overflow: hidden; background: #fff; }
.newsletter-form input[type="email"] {
  flex: 1; min-width: 0; border: none; padding: 12px 16px;
  font-size: 0.85rem; font-family: var(--font-sans); background: transparent; color: #2c231b;
}
.newsletter-form input[type="email"]:focus { outline: none; }
.newsletter-form button {
  flex-shrink: 0; border: none; padding: 12px 20px;
  background: var(--accent); color: var(--accent-contrast);
  font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer;
}
.newsletter-form button:hover { background: var(--accent-hover); }
.newsletter-feedback { font-size: 0.82rem; margin: 0 0 10px; }
.newsletter-feedback-success { color: #8fd19e; }
.newsletter-feedback-error { color: #f0a3a3; }
.newsletter-form button:disabled { opacity: 0.7; cursor: not-allowed; }
.recaptcha-disclaimer { font-size: 0.7rem; color: rgba(255,255,255,0.5); margin: 10px 0 0; max-width: 320px; }
.recaptcha-disclaimer a { color: rgba(255,255,255,0.65); text-decoration: underline; }

/* reCAPTCHA v3 is invisible by design (no checkbox) — Google requires either
   showing its floating badge or, if hidden like here, displaying the
   attribution text above (see .recaptcha-disclaimer) on every page that
   executes it. */
.grecaptcha-badge { visibility: hidden; }

/* Decorative circular wordmark, first column of the footer grid (or its own
   admin-uploaded logo image — see site_footer_logo_url) — pure CSS/SVG by
   default, no image asset needed. Curved "CASAASSA" via <textPath> around
   the ring. Sits above "Follow Us" in the same brand column. */
.footer-brand-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.footer-badge { display: block; width: 84px; height: 84px; color: rgba(255,255,255,0.85); transition: color 0.2s ease, transform 0.2s ease; }
.footer-badge:hover { color: #fff; transform: rotate(6deg); }
.footer-badge svg { width: 100%; height: 100%; }
.footer-badge img { width: 100%; height: 100%; object-fit: contain; }
.footer-badge circle { fill: none; stroke: currentColor; stroke-width: 1; }
.footer-badge-arctext { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.15em; fill: currentColor; }
.footer-badge-center { font-family: var(--font-script); font-size: 22px; fill: currentColor; }

/* Mobile-only theme toggle next to the footer badge — the header's own
   toggle is hidden on mobile (replaced there by the account-menu icon), so
   this is the only way to switch theme on a phone. Hidden on desktop, where
   the header toggle already covers it. */
.footer-theme-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.footer-theme-toggle:hover { border-color: #fff; }

@media (max-width: 900px) {
  .footer-main-grid { grid-template-columns: 1fr 1fr; gap: 24px 14px; }
  .footer-theme-toggle { display: flex; }
}
@media (max-width: 560px) {
  /* Brand and Newsletter each keep the full row (logo/socials and the email
     form both need the width); Quick Links + Support (3rd/4th .footer-col)
     fall into the next row and pair up 2-per-row instead of stacking. */
  .footer-main-grid { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
  .footer-col:nth-child(1), .footer-col:nth-child(2) { grid-column: 1 / -1; }
  .newsletter-form { max-width: 100%; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .footer-social a { border-color: #fff; }
}

/* ---- Property grid / listing page ---- */
.property-card {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.property-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.property-card-link { display: block; }
.property-card .thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-soft);
}

.guest-favorite-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #fff;
  color: #222;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}

.wishlist-heart {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  z-index: 2;
  transition: transform 0.1s ease;
}
.wishlist-heart:hover { transform: scale(1.08); }
.wishlist-heart svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2; }
.wishlist-heart.saved svg { fill: #e0523f; stroke: #e0523f; }

.wishlist-inline-btn { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wishlist-inline-btn svg.icon { stroke: currentColor; }
.wishlist-inline-btn.saved { border-color: #e0523f; color: #e0523f; }
.wishlist-inline-btn.saved svg.icon { fill: #e0523f; stroke: #e0523f; }
.property-card .body { padding: 16px; }
.property-card .loc { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.property-card h3 { font-size: 1.05rem; margin: 4px 0 6px; }
.property-card .meta { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 10px; }
.property-card .meta { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px; gap: 18px; }
.property-card .meta-icon { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: default; line-height: 1; }
/* Fixed 4-up grid (not flex-wrap) on the wider listing-page/slider cards, so
   Guests/vehicle-type/length/fuel-type (or Guests/Bedrooms/Beds/Bathrooms)
   always sit in a single row with an equal gap between each, rather than
   wrapping unevenly. Left as flex-wrap above for narrower card contexts
   (wishlist's .card-grid can shrink to 220px, too tight for a rigid 4-col grid). */
.properties-grid .meta,
.property-slider .meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.property-card .meta-icon-top { display: flex; align-items: center; justify-content: center; gap: 4px; line-height: 1; }
.property-card .meta-icon svg { width: 15px; height: 15px; flex-shrink: 0; display: block; }
/* Long labels (e.g. "Class A Motorhome", "Class B / Camper Van") wrap onto a
   second line — normal, not nowrap — instead of overflowing their narrow
   column in the 4-up meta grid below. */
.property-card .meta-icon-label { font-size: 0.68rem; color: var(--text-muted); white-space: normal; text-align: center; line-height: 1.2; }

/* /properties, /rv-rentals cards use the same stacked icon-over-label layout
   as everywhere else (.property-card .meta-icon above) — icon+number on top,
   label centered underneath. */
.properties-grid .meta-icon { flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.property-card .price { font-weight: 700; color: var(--text); }
.property-card .price span { font-weight: 400; color: var(--text-muted); font-size: 0.85rem; }

/* ---- Homepage hero search bar — overlaps the bottom edge of the hero image
   (see partials/hero-search.php). Sits as a sibling right after .hero-carousel
   rather than inside it, since .hero has overflow:hidden and would clip it. ---- */
.hero-search-wrap {
  position: relative;
  z-index: 5;
  margin-top: -40px;
  padding-bottom: 40px;
}
.hero-has-search .hero-dots { bottom: 92px; }
@media (max-width: 760px) {
  .hero-search-wrap { margin-top: 0; padding-bottom: 8px; }
}

/* ---- /properties, /rv-rentals search bar (Where / When / Who / Search) ---- */
.search-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 16px 0 28px;
  padding: 8px;
  background: var(--bg-soft);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.search-seg {
  flex: 1;
  min-width: 0;
  padding: 8px 20px;
  border-radius: 999px;
  cursor: pointer;
}
.search-seg-where { flex: 1.3; background: var(--bg-elevated); box-shadow: var(--shadow-sm); cursor: text; }
.search-seg label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--text); }
.search-seg input[type="text"] {
  width: 100%; border: none; background: transparent; color: var(--text);
  font-size: 0.85rem; padding: 0; font-family: var(--font-sans);
}
.search-seg input[type="text"]:focus { outline: none; }
.search-seg input[type="text"]::placeholder { color: var(--text-muted); }
.search-seg-value { font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-seg.has-value .search-seg-value { color: var(--text); }
.search-divider { width: 1px; height: 28px; background: var(--border); flex-shrink: 0; }

/* ---- When/Who segments get a leading icon (calendar / person) — Where keeps
   its plain layout since it already has its own icon-free text input. ---- */
.search-seg-icon { display: flex; align-items: center; gap: 10px; }
.search-seg-icon-mark { display: flex; flex-shrink: 0; color: var(--text-muted); }
.search-seg-icon-mark svg { width: 18px; height: 18px; }
.search-seg-icon .search-seg-text { min-width: 0; flex: 1; }

.search-submit-btn {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
  border: none; border-radius: 999px;
  background: var(--accent); color: var(--accent-contrast);
  padding: 12px 20px;
  font-weight: 600; font-size: 0.88rem;
  cursor: pointer;
}
.search-submit-btn svg { width: 16px; height: 16px; }

.search-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  z-index: 30;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 20px;
}
.search-dropdown.open { display: block; }
#search-when-dropdown.mini-calendar { position: absolute; width: 320px; }
.search-who-dropdown { width: 300px; }
.search-where-dropdown { width: 280px; max-height: 340px; overflow-y: auto; padding: 8px; }
.search-city-option {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border: none; border-radius: var(--radius-sm);
  background: none; color: var(--text); font-family: var(--font-sans);
  font-size: 0.88rem; cursor: pointer;
}
.search-city-option:hover { background: var(--bg-soft); }
.search-city-option[data-city=""] { color: var(--text-muted); border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 4px; padding-bottom: 12px; }

.guest-stepper-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); }
.guest-stepper-row:last-child { border-bottom: none; padding-bottom: 0; }
.guest-stepper-row strong { display: block; font-size: 0.92rem; }
.guest-stepper-row p { margin: 2px 0 0; font-size: 0.8rem; color: var(--text-muted); }
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper button {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
.stepper span[data-count] { min-width: 16px; text-align: center; font-size: 0.9rem; }

/* Generic Yes/No switch — used by the RV booking widget's Pets toggle and, in
   the admin wizards, the per-rule Yes/No toggle (Smoking/Pets/Events/custom
   rules). Not rule/pet-specific despite the shared name history. */
.toggle-switch { display: inline-flex; cursor: pointer; }
.toggle-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-track { width: 42px; height: 24px; border-radius: 999px; background: var(--border); position: relative; transition: background 0.15s ease; flex-shrink: 0; }
.toggle-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.15s ease; }
.toggle-switch input:checked + .toggle-track { background: var(--accent); }
.toggle-switch input:checked + .toggle-track .toggle-thumb { transform: translateX(18px); }
.toggle-switch input:disabled + .toggle-track { opacity: 0.4; cursor: not-allowed; }

/* House-rule badges (Smoking/Pets/Events/custom rules) — icon, crossed out
   with a red "ban" overlay when the rule's Yes/No toggle is "No". Mirrors
   the same component already used on the admin detail/review pages. */
.rule-badge-row { display: flex; gap: 10px; flex-wrap: wrap; }
.rule-badge { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px 8px 10px; font-size: 0.85rem; }
.rule-badge-icon { position: relative; width: 20px; height: 20px; display: inline-flex; }
.rule-badge-icon svg { width: 20px; height: 20px; }
.rule-badge-ban { position: absolute; inset: 0; color: #c83c28; }
.rule-badge-ban svg { width: 20px; height: 20px; }
.rule-badge-allowed { border-color: rgba(46, 125, 50, 0.35); background: rgba(46, 125, 50, 0.08); color: #2e7d32; }
.rule-badge-allowed .rule-badge-icon { color: #2e7d32; }
.rule-badge-disallowed { color: var(--text-muted); }
.rule-badge-disallowed .rule-badge-icon { color: var(--text-muted); }
.rule-badge-answer { font-weight: 700; font-size: 0.78rem; margin-left: 2px; white-space: nowrap; }
.rule-badge-allowed .rule-badge-answer { color: #2e7d32; }
.rule-badge-disallowed .rule-badge-answer { color: #c83c28; }

@media (max-width: 760px) {
  .search-pill { flex-wrap: wrap; border-radius: var(--radius-md); }
  .search-divider { display: none; }
  .search-seg, .search-seg-where { flex: 1 1 100%; }
  .search-submit-btn { flex: 1 1 100%; justify-content: center; }
  .search-dropdown, #search-when-dropdown.mini-calendar, .search-who-dropdown, .search-where-dropdown { left: 0 !important; right: 0; width: auto; }
}

/* ---- Property detail page ---- */
.gallery-wrap { position: relative; margin: 24px 0 36px; }
.gallery {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, 220px);
  gap: 8px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.gallery a:first-child { grid-row: span 2; }
.gallery a { position: relative; overflow: hidden; }
.gallery a:hover img { filter: brightness(0.85); }

.show-all-photos-btn {
  position: absolute;
  right: 16px; bottom: 16px;
  background: var(--bg-elevated);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}
.show-all-photos-btn .icon { width: 16px; height: 16px; }

.all-photos-box { max-width: 900px; }
.all-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.all-photos-grid a { display: block; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; cursor: pointer; }
.all-photos-grid img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.15s ease; }
.all-photos-grid a:hover img { filter: brightness(0.85); }

.property-layout {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 56px;
  align-items: start;
}

.property-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 1px solid var(--border); padding-bottom: 24px; margin-bottom: 24px; }
.property-header h1 { font-size: 1.8rem; margin-bottom: 6px; }
.property-header .loc { color: var(--text-muted); }
.property-header-actions { display: flex; gap: 4px; flex-shrink: 0; }
.header-action-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text); font-family: var(--font-sans); font-size: 0.88rem; font-weight: 600;
  text-decoration: underline; text-decoration-color: transparent;
  transition: background 0.15s, text-decoration-color 0.15s;
}
.header-action-btn:hover { background: var(--bg-soft); text-decoration-color: var(--text); }
.header-action-btn svg.icon { width: 17px; height: 17px; }
.header-action-btn.saved { color: #e0523f; }
.header-action-btn.saved svg.icon { fill: #e0523f; stroke: #e0523f; }
.property-stats { display: flex; gap: 20px; flex-wrap: wrap; color: var(--text-muted); font-size: 0.92rem; padding: 4px 0 24px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.property-stat-item { display: inline-flex; align-items: center; gap: 6px; }
.property-stat-icon { display: inline-flex; width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; }
.property-stat-icon svg { width: 18px; height: 18px; }

/* ---- Share modal ---- */
.share-modal-box { max-width: 440px; }
.gf-block { text-align: center; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.gf-block .gf-icon { width: 36px; height: 36px; margin: 0 auto 10px; color: var(--accent); }
.gf-block .gf-icon svg { width: 100%; height: 100%; }
.gf-block h3 { margin: 0 0 6px; }
.gf-block p { color: var(--text-muted); font-size: 0.88rem; max-width: 320px; margin: 0 auto 18px; }
.gf-stats { display: flex; align-items: center; justify-content: center; gap: 28px; }
.gf-stat { text-align: center; }
.gf-stat .gf-value { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; }
.gf-stat .gf-stars { width: 16px; height: 16px; margin: 2px auto; color: var(--text); }
.gf-stat .gf-stars svg { width: 100%; height: 100%; fill: currentColor; }
.gf-stat .gf-caption { font-size: 0.76rem; color: var(--text-muted); max-width: 100px; }
.gf-divider { width: 1px; height: 44px; background: var(--border); }

.share-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.share-photo { width: 100px; height: 100px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.share-summary-text { font-size: 0.95rem; color: var(--text); line-height: 1.5; }

.share-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 8px; margin-top: 26px; }
.share-option {
  display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  background: none; border: none; cursor: pointer; color: var(--text); font-family: var(--font-sans); padding: 4px;
}
.share-option .icon-box {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--bg-soft); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.share-option .icon-box svg { width: 21px; height: 21px; }
.share-option span:last-child { font-size: 0.76rem; line-height: 1.2; }
.share-option:hover .icon-box { border-color: var(--accent); }
@media (max-width: 480px) {
  .share-options { grid-template-columns: repeat(3, 1fr); }
}

.amenities-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  margin: 16px 0 8px;
}
.amenity-item { display: flex; align-items: center; gap: 12px; font-size: 0.92rem; }
.amenity-item .icon { width: 22px; height: 22px; color: var(--text-muted); flex-shrink: 0; }

/* ---- Modern tile treatment: Room breakdown + What this place offers ---- */
.section-heading-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.section-count { font-size: 0.85rem; color: var(--text-muted); font-weight: 400; }

.amenity-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin: 16px 0 8px;
}

/* ---- Property "Highlights" (icon + title + description cards) ---- */
.property-highlights { display: flex; flex-direction: column; gap: 20px; }
.highlight-row { display: flex; align-items: flex-start; gap: 16px; }
.highlight-icon { width: 26px; height: 26px; flex-shrink: 0; color: var(--text); margin-top: 2px; }
.highlight-row strong { display: block; font-size: 0.98rem; margin-bottom: 2px; }
.highlight-row p { font-size: 0.88rem; color: var(--text-muted); margin: 0; }
.amenity-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.amenity-tile:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.amenity-tile .icon-badge {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.amenity-tile .icon-badge svg { width: 19px; height: 19px; }
.amenity-tile .label { font-size: 0.86rem; color: var(--text); line-height: 1.3; }

.amenity-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

/* ---- "What this place offers" modal: grouped by category, Airbnb-style ---- */
.amenity-category-groups { margin-top: 8px; }
.amenity-category-group { margin-bottom: 28px; }
.amenity-category-group:last-child { margin-bottom: 4px; }
.amenity-category-title { font-size: 1rem; margin: 0 0 4px; }
.amenity-category-list { display: flex; flex-direction: column; }
.amenity-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.amenity-category-list .amenity-row:last-child { border-bottom: none; }
.amenity-row-icon { width: 24px; height: 24px; flex-shrink: 0; color: var(--text); margin-top: 1px; }
.amenity-row-icon svg { width: 24px; height: 24px; }
.amenity-row-text { display: flex; flex-direction: column; gap: 2px; }
.amenity-row-name { font-size: 0.94rem; color: var(--text); }
.amenity-row-desc { font-size: 0.82rem; color: var(--text-muted); }

/* ---- "Where you'll be" (property/RV page, Google Maps) ---- */
.property-map {
  width: 100%;
  height: 400px;
  border-radius: var(--radius-lg);
  margin-top: 16px;
  background: var(--bg-soft);
}

.description-block { border-bottom: 1px solid var(--border); padding-bottom: 28px; margin-bottom: 28px; }
.description-block p { color: var(--text); white-space: pre-line; }
.description-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Covers every content section on the property/RV page (About, amenities,
   neighborhood, reviews, Things to know) — .description-block wraps all of
   them and isn't used anywhere else on the site, so this stays scoped to
   this one page rather than affecting addresses/invoices/emails elsewhere. */
.description-block br, .description-modal-text br {
  display: none;
}

/* ---- "Things to know" (property page: house rules / cancellation / safety) ---- */
.things-to-know-block {
  margin-top: 8px;
}
.things-to-know-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 20px;
}
.ttk-item .ttk-icon {
  width: 34px; height: 34px;
  color: var(--text);
  margin-bottom: 10px;
}
.ttk-item .ttk-icon svg.icon, .ttk-item .ttk-icon svg { width: 100%; height: 100%; }
.ttk-item h4 { font-size: 1rem; margin: 0 0 8px; }
.ttk-item .amenity-item { font-size: 0.88rem; }
.ttk-item .page-content { font-size: 0.9rem; line-height: 1.6; }
.ttk-item .page-content:first-of-type { margin-top: 0; }
.ttk-summary-text { font-size: 0.88rem; line-height: 1.3; color: var(--text); margin: 0 0 8px; }
.ttk-learn-more {
  background: none; border: none; padding: 0; font: inherit; font-size: 0.85rem;
  color: var(--text); text-decoration: underline; cursor: pointer;
  display: block; margin-top: 2px;
}
.ttk-learn-more:hover { color: var(--accent); }

/* "Learn more" modal content — admin-authored WYSIWYG HTML (House Rules / Safety
   & Property). Inline icons are plain <img src="/icon/{name}"> the admin dropped
   in via the "Insert Icon" picker — size them small and align with the text.
   Any paragraph that STARTS with one automatically gets the "icon row" look
   (divider, spacing) without the admin needing to do anything special. */
.ttk-modal-content img[src*="/icon/"] {
  width: 20px; height: 20px; vertical-align: middle; margin-right: 10px; margin-top: -2px;
}
.ttk-modal-content p:has(> img[src*="/icon/"]:first-child) {
  display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); margin: 0;
}
.ttk-modal-content p:has(> img[src*="/icon/"]:first-child):last-child { border-bottom: none; }
.ttk-modal-content img:not([src*="/icon/"]) { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 8px 0; }

/* "Learn more" modal content — cancellation policy tiers */
.ttk-cancel-tier { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.ttk-cancel-tier:last-child { border-bottom: none; }
.ttk-cancel-tier-when { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; }
.ttk-cancel-tier-when span { font-weight: 400; color: var(--text); }
.ttk-cancel-tier-body strong { display: block; font-size: 0.92rem; margin-bottom: 2px; }
.ttk-cancel-tier-body p { font-size: 0.88rem; color: var(--text-muted); margin: 0; }

@media (max-width: 900px) {
  .things-to-know-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---- Generic full-screen modal (lightbox, amenities, share) ---- */
.modal-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10, 8, 6, 0.85);
  align-items: center; justify-content: center;
  padding: 24px;
}
.modal-overlay.open { display: flex; }
.modal-box {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  max-width: 640px; width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
}
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.modal-close svg { width: 16px; height: 16px; }

/* Photo lightbox specifically */
.lightbox-overlay { background: rgba(5, 4, 3, 0.96); padding: 0; }
.lightbox-stage {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-stage img { max-width: 90vw; max-height: 82vh; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.12); color: #fff; border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lightbox-nav.prev { left: 20px; }
.lightbox-nav.next { right: 20px; }
.lightbox-nav svg { width: 22px; height: 22px; }
.lightbox-close { position: absolute; top: 20px; right: 20px; color: #fff; background: rgba(255,255,255,0.12); border: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.lightbox-counter { position: absolute; top: 24px; left: 24px; color: #fff; font-size: 0.85rem; background: rgba(255,255,255,0.12); padding: 6px 12px; border-radius: 20px; }
.gallery a { cursor: pointer; }

/* Amenities "show all" grid inside its modal */
.amenities-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 8px; }
.show-all-btn { margin-top: 12px; }

/* ---- Review ratings summary: "Overall rating" star distribution + category averages ---- */
.rating-summary { display: grid; grid-template-columns: 280px 1fr; gap: 40px; margin: 20px 0 28px; }
.rating-summary-heading { font-size: 1rem; font-weight: 700; margin: 0 0 14px; }
/* Category cards (Cleanliness/Accuracy/Check-in/Communication/Location/Value) —
   label + big number + icon per column, vertical divider between columns,
   matching Airbnb's own review-breakdown layout (not a bar). */
.rating-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0; align-content: start; }
.rating-category-item {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 0 16px; border-left: 1px solid var(--border);
}
.rating-category-item:first-child { border-left: none; }
.rating-category-item .label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.rating-category-item .value { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.rating-category-item .category-icon { width: 48px; height: 48px; color: var(--text); margin-top: 6px; }

.rating-dist-row { display: grid; grid-template-columns: 12px 1fr 22px; align-items: center; gap: 12px; font-size: 0.82rem; margin-bottom: 9px; }
.rating-dist-row .star-num { color: var(--text-muted); font-weight: 600; }
.rating-dist-row .dist-count { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.rating-bar-track { display: block; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; }
.rating-bar-fill { display: block; height: 100%; background: var(--text); border-radius: 999px; transition: width 0.5s ease; }

/* Offsets the jump-to-reviews link (in the header) so the section doesn't land hidden under the sticky site header. */
#reviews { scroll-margin-top: 90px; }

.review-hidden { display: none; }
.reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }

/* Channel badge (App\Core\ChannelIcons) — real official logo for Airbnb/Vrbo/Booking.com/iCal,
   small hand-drawn dot for Website/Manual. Base sizing shared with admin.css's .channel-icon;
   .review-channel-icon shrinks it further to sit inline next to a review's date as a plain
   symbol, no label, on the property page. */
.channel-icon { height: 20px; width: auto; max-width: 64px; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.review-channel-icon { height: 14px; max-width: 44px; vertical-align: -2px; }

/* ---- Airbnb-style star rating input (review form) ---- */
.star-input { display: flex; gap: 6px; }
.star-input button {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: var(--border); font-size: 1.8rem; line-height: 1;
}
.star-input button.filled { color: var(--accent); }
.star-category-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); }
.star-category-row:last-child { border-bottom: none; }
.star-category-row .star-input button { font-size: 1.3rem; }

.required-mark { color: #c83c28; font-weight: 700; }

/* ---- Booking widget ---- */
.booking-card {
  position: sticky;
  top: 106px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
}
.price-hero { display: flex; align-items: baseline; gap: 8px; }
.price-hero-amount { font-size: 1.6rem; font-weight: 700; color: var(--text); }
.price-hero-nights { font-size: 1.2rem; color: var(--text-muted); }

.cancellation-info-bar {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text);
  text-align: center;
}
.cancellation-info-bar:empty { display: none; }

.date-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.date-fields .field { padding: 10px 12px; border-right: 1px solid var(--border); cursor: pointer; }
.date-fields .field:last-child { border-right: none; }
.date-fields label { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 2px; }
.date-fields .value { font-size: 0.88rem; }

.guest-field {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 18px;
  cursor: pointer;
}
.guest-field label { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 4px; }
.guest-field select { width: 100%; border: none; background: transparent; color: var(--text); font-size: 0.9rem; }
.guest-field .search-who-dropdown { top: calc(100% + 8px); }

.price-breakdown { margin: 18px 0; font-size: 0.9rem; }
.price-breakdown .row { display: flex; justify-content: space-between; padding: 6px 0; color: var(--text-muted); }
.price-breakdown .row.total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; font-weight: 700; color: var(--text); }

.refund-calc-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.9rem; color: var(--text-muted); }
.refund-calc-row.refund-calc-total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; font-weight: 700; color: var(--text); font-size: 1rem; }
.refund-calc-charges { color: #c83c28; }

.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--accent); font-family: var(--font-sans); font-size: 0.82rem; text-decoration: underline;
}
.coupon-apply-form { display: flex; gap: 8px; margin-top: 8px; }
.coupon-apply-form input[type="text"] {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font-size: 0.85rem;
}
.coupon-apply-form .btn { padding: 9px 16px; font-size: 0.72rem; }
.coupon-applied-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #eaf6ec; color: #2e7d32; border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 0.85rem; margin-top: 8px;
}
:root[data-theme='dark'] .coupon-applied-row { background: rgba(46,125,50,0.18); color: #7cd992; }
.coupon-applied-row svg.icon { width: 15px; height: 15px; }
.coupon-applied-row .link-btn { color: inherit; }
.deposit-note { font-size: 0.72rem; color: var(--text-muted); display: block; }

/* Mini calendar */
.mini-calendar {
  position: absolute;
  z-index: 20;
  margin-top: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 16px;
  width: 300px;
  display: none;
}
.mini-calendar.open { display: block; }
.mini-calendar .cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-weight: 600; }
.mini-calendar .cal-head button { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--text); }
.mini-calendar .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 0.78rem; }
.mini-calendar .cal-dow { color: var(--text-muted); padding-bottom: 4px; }
.mini-calendar .cal-day {
  padding: 7px 0;
  border-radius: 6px;
  cursor: pointer;
}
.mini-calendar .cal-day.blank { visibility: hidden; }
.mini-calendar .cal-day.unavailable { color: var(--border); text-decoration: line-through; cursor: not-allowed; }
.mini-calendar .cal-day:not(.unavailable):not(.blank):hover { background: var(--bg-soft); }
.mini-calendar .cal-day.selected { background: var(--accent); color: var(--accent-contrast); }
.mini-calendar .cal-day.in-range { background: var(--bg-soft); }

/* Dark mode only — selected/hovered/in-range day text forced white (light
   mode's own --accent-contrast/--text already read fine against that theme's
   colors). */
:root[data-theme='dark'] .mini-calendar .cal-day.selected,
:root[data-theme='dark'] .mini-calendar .cal-day.in-range,
:root[data-theme='dark'] .mini-calendar .cal-day:not(.unavailable):not(.blank):hover { color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .mini-calendar .cal-day.selected,
  :root:not([data-theme='light']) .mini-calendar .cal-day.in-range,
  :root:not([data-theme='light']) .mini-calendar .cal-day:not(.unavailable):not(.blank):hover { color: #fff; }
}

/* ---- Big inline availability calendar (property page, before reviews) ---- */
.big-calendar-block {
  max-width: 720px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-top: 28px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
}
.big-calendar-block h3, .big-calendar-block p { color: #2c231b; }
.big-calendar { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; }
.big-cal-nav {
  flex-shrink: 0; margin-top: 8px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; color: #2c231b;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.big-cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.big-cal-nav svg { width: 16px; height: 16px; }
.big-cal-months { display: flex; gap: 32px; flex: 1; min-width: 0; overflow-x: auto; }
.big-cal-month { flex: 1 1 220px; min-width: 220px; color: #2c231b; }
.big-cal-month .cal-head { text-align: center; margin-bottom: 16px; font-weight: 600; font-size: 1rem; }
.big-cal-month .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.big-cal-month .cal-dow { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); padding-bottom: 8px; }
.big-cal-month .cal-day { padding: 11px 0; border-radius: 50%; cursor: pointer; font-size: 0.9rem; }
.big-cal-month .cal-day.blank { visibility: hidden; }
.big-cal-month .cal-day.unavailable { color: var(--border); text-decoration: line-through; cursor: not-allowed; }
.big-cal-month .cal-day:not(.unavailable):not(.blank):hover { background: var(--bg-soft); }
.big-cal-month .cal-day.selected { background: var(--accent); color: var(--accent-contrast); }
.big-cal-month .cal-day.in-range { background: var(--bg-soft); border-radius: 0; }
.big-calendar-footer { display: flex; justify-content: flex-end; margin-top: 16px; }

/* Dark mode only — selected/hovered/in-range day text forced white. .big-cal-month's
   base text color is a hardcoded #2c231b (the whole block isn't theme-aware —
   a separate, pre-existing thing), so without this a hovered/in-range day shows
   dark text on the dark var(--bg-soft) background in dark mode and is unreadable. */
:root[data-theme='dark'] .big-cal-month .cal-day.selected,
:root[data-theme='dark'] .big-cal-month .cal-day.in-range,
:root[data-theme='dark'] .big-cal-month .cal-day:not(.unavailable):not(.blank):hover { color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .big-cal-month .cal-day.selected,
  :root:not([data-theme='light']) .big-cal-month .cal-day.in-range,
  :root:not([data-theme='light']) .big-cal-month .cal-day:not(.unavailable):not(.blank):hover { color: #fff; }
}

@media (max-width: 760px) {
  .big-calendar { display: block; gap: 0; position: relative; padding-top: 44px; }
  .big-cal-months { flex-direction: column; gap: 32px; }
  .big-cal-month { min-width: 0; }
  .big-cal-nav { position: absolute; top: 0; margin-top: 0; }
  .big-cal-nav[data-big-cal-prev] { left: 0; }
  .big-cal-nav[data-big-cal-next] { right: 0; }
}

/* ---- Forms (guest checkout + admin form-group fields) ---- */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 0.8rem; font-weight: 600; margin-bottom: 6px; }
.form-group input:not([type="checkbox"]):not([type="radio"]), .form-group textarea, .form-group select,
.tax-rate-row input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.92rem;
}
.form-group input:not([type="checkbox"]):not([type="radio"]):focus, .form-group textarea:focus, .form-group select:focus,
.tax-rate-row input:not([type="checkbox"]):not([type="radio"]):focus {
  outline: none;
  border-color: var(--accent);
}
.form-group select { cursor: pointer; }
.form-group select option { background: var(--bg-elevated); color: var(--text); }

/* Native <input type="date"> renders its visible text in the browser's own
   locale (e.g. dd/mm/yyyy) — not reliably overridable via the page's `lang`
   attribute — so assets/js/date-format.js hides that native text and draws a
   deterministic MM/DD/YYYY overlay on top instead, computed directly from the
   input's own locale-independent ISO value. The native picker icon, keyboard
   entry, and focus/validation are all untouched; only the visible text changes. */
.date-display-wrap { position: relative; display: inline-block; }
.form-group .date-display-wrap { display: block; width: 100%; }
/* !important: this has to win over every page/context's own
   `input[type="date"] { color: ... }` rule (e.g. .dt-toolbar's), which can
   otherwise tie on specificity and win on source order alone (admin.css loads
   after this file). The whole point of this rule is "always hide the native
   text, no matter what else targets this input elsewhere". */
.date-display-wrap input[type="date"] { color: transparent !important; }
.date-display-wrap input[type="date"]::-webkit-datetime-edit,
.date-display-wrap input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.date-display-wrap input[type="date"]::-webkit-datetime-edit-text,
.date-display-wrap input[type="date"]::-webkit-datetime-edit-month-field,
.date-display-wrap input[type="date"]::-webkit-datetime-edit-day-field,
.date-display-wrap input[type="date"]::-webkit-datetime-edit-year-field { color: transparent !important; }
.date-display-overlay {
  position: absolute; top: 0; bottom: 0; left: 0; right: 26px;
  display: flex; align-items: center;
  pointer-events: none;
  color: var(--text);
  white-space: nowrap; overflow: hidden;
}
.date-display-overlay.is-placeholder { color: var(--text-muted); }

/* Country-code + phone-number pair (registration form) */
.phone-input-group { display: flex; gap: 8px; }
.phone-input-group input[type="tel"] { flex: 1; min-width: 0; }
/* Real flag-icons SVG icon rendered next to the select (see assets/js/app.js
   and the flag-icons stylesheet each of these forms loads) rather than inside
   its <option> list or as a Unicode flag emoji — see the comment above
   updatePhoneFlag() in app.js for why both of those fail on Windows. */
.phone-country-picker { position: relative; flex: 0 0 122px; min-width: 0; }
.phone-country-picker .phone-country-select { width: 100%; padding-left: 34px; text-overflow: ellipsis; }
.phone-country-flag.fi { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 18px; line-height: 18px; pointer-events: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.1); }
@media (max-width: 480px) {
  /* Keep country code + number on one row on narrow screens — drop the flag
     icon (and its reserved left padding) rather than wrapping to two rows,
     so the shrunk select still has room to show its "US +1" text. */
  .phone-country-picker { flex-basis: 78px; }
  .phone-country-picker .phone-country-select { padding-left: 10px; font-size: 0.82rem; }
  .phone-country-flag.fi { display: none; }
}

/* Custom checkbox/radio — same look as the DataTable row-select checkboxes,
   just not scoped to .admin-table so every .form-group (or .tax-rate-row)
   checkbox/radio site-wide matches instead of falling back to the raw
   browser control the width/padding rule above would otherwise stretch it into. */
.form-group input[type="checkbox"], .form-group input[type="radio"],
.tax-rate-row input[type="checkbox"], .tax-rate-row input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 17px;
  height: 17px;
  margin: 0;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--card-bg);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  flex-shrink: 0;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.form-group input[type="radio"], .tax-rate-row input[type="radio"] { border-radius: 50%; }
.form-group input[type="checkbox"]:hover, .form-group input[type="radio"]:hover,
.tax-rate-row input[type="checkbox"]:hover, .tax-rate-row input[type="radio"]:hover { border-color: var(--accent); }
.form-group input[type="checkbox"]:checked, .form-group input[type="radio"]:checked,
.tax-rate-row input[type="checkbox"]:checked, .tax-rate-row input[type="radio"]:checked { background: var(--accent); border-color: var(--accent); }
.form-group input[type="checkbox"]:checked::after, .tax-rate-row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 0;
  width: 5px; height: 9px;
  border: solid var(--accent-contrast);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.form-group input[type="radio"]:checked::after, .tax-rate-row input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-contrast);
  transform: translate(-50%, -50%);
}
.form-group label:has(> input[type="checkbox"]), .form-group label:has(> input[type="radio"]) {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  cursor: pointer;
}

.form-group input[type="file"] {
  padding: 8px 12px;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
}
.form-group input[type="file"]::file-selector-button,
.form-group input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.form-group input[type="file"]:hover::file-selector-button,
.form-group input[type="file"]:hover::-webkit-file-upload-button {
  border-color: var(--accent);
  color: var(--accent);
}
.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.88rem; margin-bottom: 18px; }
.alert-error { background: rgba(200, 60, 40, 0.12); color: #c83c28; border: 1px solid rgba(200,60,40,0.3); }
.alert-success { background: rgba(60, 140, 90, 0.12); color: #2f8556; border: 1px solid rgba(60,140,90,0.3); }

/* ---- Confirmation pages ---- */
.confirm-box {
  max-width: 560px;
  margin: 64px auto;
  text-align: center;
  padding: 40px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.confirm-box .check {
  width: 64px; height: 64px; margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(60,140,90,0.12);
  color: #2f8556;
  display: flex; align-items: center; justify-content: center;
}
.confirm-details { text-align: left; margin: 24px 0; border-top: 1px solid var(--border); padding-top: 20px; }
.confirm-details .row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.92rem; }
.confirm-details .row span:first-child { color: var(--text-muted); }

/* ---- CMS page content (Terms, Privacy, etc.) ---- */
.page-content { color: var(--text); line-height: 1.6; }
.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6 { margin: 1em 0 0.4em; }
.page-content h1:first-child, .page-content h2:first-child, .page-content h3:first-child,
.page-content h4:first-child, .page-content h5:first-child, .page-content h6:first-child { margin-top: 0; }
.page-content p { color: var(--text); margin: 0 0 0.5em; }
.page-content ul, .page-content ol { margin: 0 0 0.5em; padding-left: 1.4em; color: var(--text); }
.page-content li { margin-bottom: 0.2em; }
.page-content a { color: var(--accent); text-decoration: underline; }
.page-content blockquote { border-left: 3px solid var(--accent); padding-left: 16px; color: var(--text-muted); margin: 0 0 0.5em; }
.page-content strong { font-weight: 700; }
.page-content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 8px 0; }

/* ---- Auth pages (login/register/forgot/reset) ---- */
.auth-shell { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-box { width: 100%; max-width: 420px; padding: 36px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.auth-box h1 { font-size: 1.5rem; text-align: center; margin-bottom: 6px; }
.auth-box .subtitle { text-align: center; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 24px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.login-method-tabs { display: flex; gap: 4px; padding: 4px; margin-bottom: 20px; background: var(--bg-soft); border-radius: var(--radius-sm); }
.login-method-tab {
  flex: 1; padding: 9px 12px; border: none; border-radius: calc(var(--radius-sm) - 2px);
  background: transparent; color: var(--text-muted); font-size: 0.85rem; font-weight: 600;
  font-family: var(--font-sans); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease;
}
.login-method-tab:hover { color: var(--text); }
.login-method-tab.active { background: var(--card-bg); color: var(--text); box-shadow: var(--shadow-sm); }
/* ---- Sign in with Google / Apple — side by side on login & register (see account/login.php, account/register.php) ---- */
.social-auth-row { display: flex; gap: 12px; }
.btn-social {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex: 1; padding: 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text);
  font-size: 0.88rem; font-weight: 600; cursor: pointer;
}
.btn-social:hover { border-color: var(--accent); }
.btn-social .icon { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 420px) {
  .social-auth-row { flex-direction: column; }
}
.auth-footer { text-align: center; margin-top: 20px; font-size: 0.88rem; color: var(--text-muted); }
.auth-footer a { color: var(--accent); font-weight: 600; }

/* ---- Account area ---- */
.account-shell { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 40px 24px; max-width: var(--container); margin: 0 auto; }
.account-nav { display: flex; flex-direction: column; gap: 2px; }
.account-nav a { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; color: var(--text-muted); }
.account-nav a:hover { background: var(--bg-soft); color: var(--text); }
.account-nav a.active { background: var(--accent); color: var(--accent-contrast); }
.account-nav form { margin-top: 12px; }
.account-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 24px; margin-bottom: 20px; }

/* ---- Checkout hold countdown (booking/checkout.php) ---- */
.checkout-hold-timer {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 16px; margin-bottom: 20px; font-size: 0.88rem; color: var(--text);
}
.checkout-hold-timer .icon { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.checkout-hold-timer[data-urgent] { background: rgba(200,60,40,0.1); border-color: rgba(200,60,40,0.4); }
.checkout-hold-timer[data-urgent] .icon { color: #c83c28; }
.checkout-hold-timer[data-urgent] strong { color: #c83c28; }
.checkout-hold-timer[data-expired] { background: rgba(200,60,40,0.14); border-color: rgba(200,60,40,0.5); }
.account-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-bottom: 24px; }
.account-stat { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; }
.account-stat .value { font-size: 1.6rem; font-weight: 700; font-family: var(--font-serif); }
.account-stat .label { font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.account-table { width: 100%; border-collapse: collapse; }
.account-table th, .account-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: 0.88rem; }
.account-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.card-tile { display: flex; align-items: center; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 12px; }
.card-tile .brand { font-weight: 700; text-transform: capitalize; margin-right: 8px; }
#card-element { padding: 14px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
#card-element.is-focused { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(180, 130, 60, 0.15); }

/* ---- Account > Payment Methods (account/payment-methods.php) ---- */
.payment-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-bottom: 24px; }
.payment-card-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  color: #f2ede3;
  background: radial-gradient(120% 140% at 100% 0%, rgba(212,161,91,0.35) 0%, rgba(212,161,91,0) 45%), linear-gradient(135deg, #241a10 0%, #14100c 100%);
  box-shadow: var(--shadow-md);
}
.payment-card-tile.is-default { box-shadow: 0 0 0 2px var(--accent), var(--shadow-md); }
.payment-card-tile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.payment-card-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600; text-transform: capitalize; color: rgba(242,237,227,0.85); }
.payment-card-brand svg.icon { width: 22px; height: 22px; color: #d4a15b; }
.payment-card-default-pill { background: rgba(212,161,91,0.18); border: 1px solid rgba(212,161,91,0.5); color: #e3b271; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 20px; }
.payment-card-number { font-family: 'Courier New', monospace; font-size: 1.2rem; letter-spacing: 0.06em; margin-bottom: 22px; color: #fff; }
.payment-card-tile-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.payment-card-tile-label { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(242,237,227,0.55); margin-bottom: 3px; }
.payment-card-tile-value { font-size: 0.92rem; font-weight: 600; color: #fff; }
.payment-card-tile-actions { display: flex; align-items: center; gap: 14px; }
.payment-card-tile-actions form { margin: 0; }
.payment-card-tile-actions .link-btn { color: rgba(242,237,227,0.75); font-size: 0.78rem; }
.payment-card-tile-actions .link-btn:hover { color: #fff; }
.payment-card-tile-actions .link-btn-danger { color: #e88a7a; }
.payment-card-tile-actions .link-btn-danger:hover { color: #f2a396; }

.payment-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 48px 24px; margin-bottom: 24px;
  border: 1px dashed var(--border); border-radius: var(--radius-lg); color: var(--text-muted);
}
.payment-empty-icon { width: 40px; height: 40px; color: var(--text-muted); opacity: 0.6; }
.payment-empty-icon svg { width: 100%; height: 100%; }
.payment-empty-state p { margin: 0; font-size: 0.92rem; }

.payment-add-card h3 { display: flex; align-items: center; gap: 10px; margin-top: 0; margin-bottom: 6px; }
.payment-add-card h3 svg.icon { width: 20px; height: 20px; color: var(--accent); }
.payment-add-card-hint { font-size: 0.82rem; color: var(--text-muted); margin: 0 0 16px; }
.payment-save-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; }
.payment-save-btn svg.icon { width: 16px; height: 16px; }

/* ---- Checkout page's Payment section (booking/checkout.php) — saved-card
   picker + new-card entry, same visual language as account/payment-methods. ---- */
.payment-section-heading { display: flex; align-items: center; gap: 10px; margin-top: 0; margin-bottom: 16px; }
.payment-section-heading svg.icon { width: 20px; height: 20px; color: var(--accent); }
.payment-select-card {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-md);
  margin-bottom: 10px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.payment-select-card:hover { border-color: var(--accent); }
.payment-select-card:has(input:checked) { border-color: var(--accent); background: var(--bg-soft); }
.payment-select-card input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer; margin: 0; }
.payment-select-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px; background: var(--bg-soft); color: var(--accent); flex-shrink: 0;
}
.payment-select-card-icon svg { width: 18px; height: 18px; }
.payment-select-card-body { display: flex; flex-direction: column; gap: 2px; }
.payment-select-card-brand { font-size: 0.9rem; font-weight: 600; }
.payment-select-card-meta { font-size: 0.78rem; color: var(--text-muted); }
.payment-save-card-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 0.85rem; color: var(--text-muted); cursor: pointer; }
.payment-save-card-check input { accent-color: var(--accent); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  /* Generic heading sizes, mobile only — pages/components with their own
     h1-h4 override (e.g. .property-header h1 below) still win via specificity. */
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.05rem; }
  h4 { font-size: 0.95rem; }

  .property-layout { grid-template-columns: 1fr; gap: 24px; }
  .booking-card { position: static; }
  .amenity-tile-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
  .amenity-tile { padding: 10px 12px; gap: 8px; }
  .amenity-tile .icon-badge { width: 30px; height: 30px; }
  .amenity-tile .label { font-size: 0.8rem; }
  .account-shell { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 160px 160px; }
  .gallery a:nth-child(n+4) { display: none; }
  .reviews-grid { grid-template-columns: 1fr; }
  .rating-summary { grid-template-columns: 1fr; gap: 24px; }
  .rating-categories { grid-template-columns: repeat(3, 1fr); row-gap: 20px; }
  .rating-category-item { border-left: none; padding-left: 0; }
  .contact-layout { grid-template-columns: 1fr; }

  /* Property/RV detail page — name + Share/Save were squeezed into one row,
     and long button labels (nowrap by default via .btn) forced the whole
     single-column layout wider than the viewport. Desktop is untouched. */
  .property-header { flex-direction: column; align-items: stretch; }
  .property-header h1 { font-size: 1.4rem; }
  .property-header-actions { justify-content: flex-start; }
  .booking-card .btn-block,
  .show-all-btn,
  .show-all-photos-btn {
    white-space: normal;
    text-align: center;
  }

  /* Modal close button was position:absolute inside .modal-box, which has its
     own internal overflow-y:auto scroll — scrolling the modal content dragged
     the close button along with it instead of keeping it reachable. Pinning
     it to the viewport keeps it visible no matter how far the modal scrolls. */
  .modal-close { position: fixed; top: 16px; right: 16px; z-index: 1001; }

  /* Google reCAPTCHA's checkbox widget renders at a fixed 304px, wider than
     any form's content area on mobile (login, registration, contact-us,
     property inquiry, etc.) — scale it down to fit and collapse its layout
     box to match (transform alone doesn't shrink the space it reserves).
     Site-wide since every reCAPTCHA v2 checkbox has the same fixed size. */
  .g-recaptcha {
    transform: scale(0.86);
    transform-origin: 0 0;
    width: 261px;
    height: 67px;
  }

  /* Calendar card: full width on mobile, but capped to the left column's
     width on desktop (see .big-calendar-block's own max-width: 720px). */
  .big-calendar-block { max-width: 100%; }

  /* Tighter vertical rhythm between property-page sections on mobile. */
  .property-header { padding-bottom: 10px; margin-bottom: 10px; }
  .property-stats { padding: 4px 0 15px; margin-bottom: 15px; }
  .gallery-wrap { margin: 24px 0 15px; }
  .description-block { padding-bottom: 15px; margin-bottom: 15px; }
  .things-to-know-block { padding-top: 25px; }
}
@media (max-width: 600px) {
  .contact-field-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .rating-categories { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Header nav / hamburger menu — breakpoint is deliberately wider (1024px)
   than the other mobile rules below (760px). The desktop nav (5 links + Log
   In + Book Your Stay, ~950px+ needed) has no room to breathe between 760px
   and roughly 950px — a real tablet-width gap where it used to overflow the
   viewport horizontally. Switching to the hamburger menu earlier, before that
   gap, is the fix (verified: full nav needs ~950px+ to fit without wrapping/
   overflowing; 1024px leaves comfortable margin). ---- */
@media (max-width: 1024px) {
  /* Log In / Book Your Stay move into the menu below instead (Login,
     Registration, or My Account/Logout when signed in) — keeps the header
     bar from overflowing with logo + theme toggle + 2 buttons + the hamburger
     all competing for a narrow row. Desktop (>1024px) is unaffected. */
  .header-actions-account-link, .header-actions-book-link { display: none; }
  .theme-toggle { display: none; }
  .header-account-menu { display: block; }

  .main-nav { display: none; }
  .main-nav.open-mobile {
    display: flex;
    position: absolute;
    top: 82px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    width: 100%;
    background: var(--header-bg);
    border-bottom: 1px solid var(--border);
    padding: 8px 0 16px;
    max-height: calc(100vh - 82px);
    overflow-y: auto;
  }
  .main-nav.open-mobile a {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border);
    text-align: left;
  }
  .main-nav.open-mobile a:last-child { border-bottom: none; }
  .main-nav.open-mobile a:hover, .main-nav.open-mobile a:active { background: var(--bg-soft); }
  .main-nav.open-mobile .nav-link-icon { display: flex; flex-shrink: 0; color: var(--text-muted); }
  .main-nav.open-mobile .nav-link-icon svg { width: 20px; height: 20px; }
  .main-nav.open-mobile a.active .nav-link-icon { color: var(--accent); }
  .nav-toggle { display: flex; }
}

@media (max-width: 760px) {
  .hero-inner { padding: 56px 15px 40px 15px; }
  .footer-bar .container { flex-direction: column; }
  .amenities-grid { grid-template-columns: 1fr; }
}

/* ---- Small status badges — same color set as admin.css's .badge-pending/etc
   (kept in sync, this is app.css's own copy) since guest-facing pages
   (Account > Bookings, a booking's detail page, the confirmation page) show
   the same payment_status/booking_status values a guest sees. ---- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; }
.badge-pending { background: rgba(200,150,40,0.15); color: #b5871d; }
.badge-paid, .badge-confirmed, .badge-success { background: rgba(60,140,90,0.15); color: #2f8556; }
.badge-failed, .badge-cancelled, .badge-error { background: rgba(200,60,40,0.15); color: #c83c28; }
.badge-refunded, .badge-partially_refunded { background: rgba(120,120,120,0.15); color: #6b6b6b; }

/* Bigger variant for a page's single focal status (e.g. the booking
   confirmation page) where a tiny inline-table pill would be easy to miss. */
.badge-lg { padding: 7px 18px; font-size: 0.82rem; letter-spacing: 0.02em; }

/* ============================================================
   Chat (guest Account > Messages / Admin > Messages) — shared by both sides
   so the visual language matches exactly. Admin adds its own two-column
   inbox layout on top in admin.css; everything bubble/composer/reaction
   related lives here since layouts/admin.php loads app.css too.
   ============================================================ */
.chat-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  height: min(74vh, 720px);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.chat-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-header-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--accent);
  flex-shrink: 0;
}
.chat-header-identity { flex: 1; min-width: 0; }
.chat-header-name { font-weight: 600; color: var(--text); font-size: 0.98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header-presence { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--text-muted); }
.chat-presence-dot { width: 8px; height: 8px; border-radius: 50%; background: #b0b0b0; flex-shrink: 0; }
.chat-presence-dot.is-online { background: #2f8556; }

/* ---- Icon-button base — shared by the header search toggle, the composer's
   attach/emoji/send buttons, and the media modal's close button, so every
   icon control in the chat UI reads as one consistent set. ---- */
.chat-icon-btn {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.chat-icon-btn svg { width: 18px; height: 18px; }
.chat-icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.chat-header-search-toggle { margin-left: auto; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.chat-empty { margin: auto; color: var(--text-muted); font-size: 0.9rem; }

.chat-row { display: flex; }
.chat-row-mine { justify-content: flex-end; }
.chat-row-theirs { justify-content: flex-start; }

.chat-bubble-wrap { position: relative; max-width: min(78%, 480px); }
.chat-row-mine .chat-bubble-wrap { align-items: flex-end; }

.chat-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 0.92rem;
  line-height: 1.5;
  word-break: break-word;
}
.chat-row-theirs .chat-bubble { background: var(--bg-soft); color: var(--text); border-bottom-left-radius: 4px; }
.chat-row-mine .chat-bubble { background: var(--accent); color: var(--accent-contrast); border-bottom-right-radius: 4px; }
.chat-bubble-text + .chat-media-image,
.chat-bubble-text + .chat-media-video { margin-top: 8px; }
.chat-bubble-deleted { font-style: italic; opacity: 0.75; font-size: 0.88rem; }
.chat-media-image, .chat-media-video { display: block; max-width: 100%; max-height: 260px; border-radius: 10px; }
.chat-media-image { cursor: pointer; }
.chat-media-video-wrap { position: relative; }
.chat-media-expand-btn {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.chat-media-expand-btn svg { width: 15px; height: 15px; }
.chat-media-expand-btn:hover { background: rgba(0,0,0,0.75); }

/* ---- Document attachment (PDF/DOC/XLS/PPT) — a download card instead of an
   inline preview, since these can't be rendered in the bubble like a photo. ---- */
.chat-media-file {
  display: flex; align-items: center; gap: 10px;
  min-width: 200px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.08);
  color: inherit;
  text-decoration: none;
}
.chat-row-mine .chat-media-file { background: rgba(255,255,255,0.18); }
.chat-media-file-icon, .chat-media-file-download { flex-shrink: 0; display: flex; }
.chat-media-file-icon svg, .chat-media-file-download svg { width: 20px; height: 20px; }
.chat-media-file-download { opacity: 0.7; }
.chat-media-file:hover .chat-media-file-download { opacity: 1; }
.chat-media-file-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-media-file-name { font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-media-file-size { font-size: 0.74rem; opacity: 0.75; }
.chat-bubble-text + .chat-media-file { margin-top: 8px; }

.chat-row-highlight .chat-bubble { animation: chat-highlight-flash 1.8s ease; }
@keyframes chat-highlight-flash {
  0% { box-shadow: 0 0 0 3px var(--accent); }
  70% { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.chat-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.chat-row-mine .chat-meta { justify-content: flex-end; }
.chat-meta-edited { font-style: italic; }
.chat-ticks { display: inline-flex; color: var(--text-muted); }
.chat-ticks.is-read { color: #4a9eda; }

.chat-bubble-actions {
  position: absolute;
  top: -14px;
  display: flex;
  gap: 2px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.chat-row-mine .chat-bubble-actions { right: 0; }
.chat-row-theirs .chat-bubble-actions { left: 0; }
.chat-bubble-wrap:hover .chat-bubble-actions { opacity: 1; pointer-events: auto; }
.chat-action-btn {
  width: 24px; height: 24px;
  border: none; background: transparent;
  border-radius: 50%;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.chat-action-btn:hover { background: var(--bg-soft); color: var(--text); }

.chat-edit-textarea {
  width: 100%;
  min-height: 60px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  background: var(--card-bg);
  color: var(--text);
  resize: vertical;
}
.chat-edit-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.chat-edit-actions .btn-sm { padding: 5px 12px; font-size: 0.78rem; }

.chat-composer {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-composer textarea {
  flex: 1;
  resize: none;
  max-height: 120px;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  background: var(--bg-soft);
  color: var(--text);
}
.chat-send-btn { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
.chat-send-btn:hover { background: var(--accent-hover); color: var(--accent-contrast); }
.chat-file-error {
  padding: 8px 14px;
  font-size: 0.8rem;
  color: #c83c28;
  background: rgba(200,60,40,0.1);
  border-top: 1px solid rgba(200,60,40,0.25);
}
.chat-file-preview {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.chat-file-preview button { border: none; background: transparent; cursor: pointer; color: var(--text-muted); font-size: 1rem; }
.chat-no-bookings { padding: 32px; text-align: center; color: var(--text-muted); }

/* ---- Composer emoji popover (inserts into the text field) ---- */
.chat-emoji-popover {
  position: absolute;
  bottom: 62px;
  left: 16px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  box-shadow: var(--shadow-md);
  z-index: 3;
}
.chat-emoji-popover button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none; background: transparent; font-size: 1.15rem; cursor: pointer;
  padding: 0; border-radius: 6px; line-height: 1;
}
.chat-emoji-popover button:hover { background: var(--bg-soft); }

/* ---- "Jump to latest" floating pill — appears after a search jump lands the
   viewer somewhere back in history, so they can get back to the live tail.
   Floats just above the composer bar (same .chat-shell containing block as
   the emoji popover below). ---- */
.chat-jump-to-latest {
  position: absolute;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 6px;
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.chat-jump-to-latest svg { width: 14px; height: 14px; }
.chat-jump-to-latest:hover { background: var(--accent-hover); }

/* ---- Header search bar + live-suggestion dropdown ---- */
.chat-search-bar {
  position: absolute;
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.chat-search-bar-icon { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.chat-search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--text);
}
.chat-search-bar input:focus { outline: none; }
.chat-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-md);
}
.chat-search-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 16px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
}
.chat-search-result:last-child { border-bottom: none; }
.chat-search-result:hover { background: var(--bg-soft); }
.chat-search-result-who { font-size: 0.72rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.02em; }
.chat-search-result-snippet { font-size: 0.85rem; color: var(--text); }
.chat-search-result-snippet mark { background: rgba(181,101,29,0.25); color: inherit; border-radius: 2px; }
.chat-search-result-time { font-size: 0.7rem; color: var(--text-muted); }
.chat-search-empty { padding: 16px; text-align: center; font-size: 0.85rem; color: var(--text-muted); }

/* ---- Media lightbox — opened by clicking an image, or the expand button on a video ---- */
.chat-media-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.chat-media-modal-body { max-width: 100%; max-height: 100%; }
.chat-media-modal-body img, .chat-media-modal-body video {
  display: block;
  max-width: 100%;
  max-height: 85vh;
  border-radius: 8px;
}
.chat-media-modal-close {
  position: absolute;
  top: 20px; right: 24px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.chat-media-modal-close svg { width: 18px; height: 18px; }
.chat-media-modal-close:hover { background: rgba(255,255,255,0.22); }

/* These all set their own `display` above, which — at equal (class) specificity
   — otherwise beats the browser's default `[hidden] { display: none }` rule
   and leaves them permanently visible (the media modal doing this covered the
   entire page behind a dark overlay). chat.js toggles visibility via the
   `hidden` IDL property, so this is the actual on/off switch for all of them. */
.chat-media-modal[hidden],
.chat-emoji-popover[hidden],
.chat-jump-to-latest[hidden],
.chat-file-preview[hidden],
.chat-file-error[hidden],
.chat-search-bar[hidden] {
  display: none !important;
}

/* ============================================================
   Channel list — one row per booking-scoped conversation (see
   partials/chat-channel-list.php), shared by Admin > Messages and the
   guest's own Account > Messages, hence living here rather than admin.css.
   ============================================================ */
.chat-inbox {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
}
.chat-channel-panel {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-height: min(74vh, 720px);
}
.chat-channel-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-channel-search svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.chat-channel-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text);
}
.chat-channel-search input:focus { outline: none; }
.chat-inbox-list {
  flex: 1;
  overflow-y: auto;
  transition: opacity 0.1s ease;
}
.chat-channel-list-loading {
  padding: 12px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.chat-inbox-item {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.chat-inbox-item:last-child { border-bottom: none; }
.chat-inbox-item:hover { background: var(--bg-soft); }
.chat-inbox-item.active { background: rgba(181,101,29,0.1); }
.chat-inbox-item.has-unread .chat-inbox-channel { font-weight: 700; }
.chat-inbox-item.is-closed { opacity: 0.7; }
.chat-inbox-avatar {
  position: relative;
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--accent); font-size: 0.85rem;
}
.chat-inbox-dot {
  position: absolute; bottom: -1px; right: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #b0b0b0; border: 2px solid var(--card-bg);
}
.chat-inbox-dot.is-online { background: #2f8556; }
.chat-inbox-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat-inbox-row + .chat-inbox-row { margin-top: 2px; }
.chat-inbox-time { font-size: 0.7rem; color: var(--text-muted); flex-shrink: 0; }
.chat-inbox-sub { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-inbox-channel { flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-inbox-guest { font-size: 0.76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-inbox-preview { flex: 1; min-width: 0; font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-inbox-closed-tag {
  display: inline-block; margin-left: 6px;
  font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--text-muted); background: var(--bg-soft);
  padding: 1px 6px; border-radius: 8px; vertical-align: middle;
}
.chat-inbox-empty-state {
  display: flex; align-items: center; justify-content: center;
  min-height: 300px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
}
@media (max-width: 900px) {
  .chat-inbox { grid-template-columns: 1fr; }
}

/* ---- Closed-conversation banner — replaces the composer once a booking's
   stay has ended (see partials/chat-composer.php). ---- */
.chat-closed-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ---- Floating WhatsApp button — fixed bottom-right on every frontend page
   (see partials/whatsapp-float.php). Brand green stays fixed across both
   light/dark themes rather than following --accent. ---- */
.whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: var(--shadow-md);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: scale(1.08);
  box-shadow: var(--shadow-lg);
}
.whatsapp-float svg {
  width: 30px;
  height: 30px;
  stroke: #fff;
}
@media (max-width: 600px) {
  .whatsapp-float {
    right: 14px;
    bottom: 14px;
    width: 50px;
    height: 50px;
  }
  .whatsapp-float svg { width: 26px; height: 26px; }
}
.chat-closed-banner svg { width: 20px; height: 20px; flex-shrink: 0; }