/* --- SELF-HOSTED FONTS (was Google Fonts) ---
   Both families ship as latin-subset VARIABLE woff2 files in fonts/ — the same
   bytes Google served, now first-party: no fonts.googleapis/gstatic connections,
   long-cached immutable by .htaccess, preloaded from index.html. Blocks mirror
   Google's css2 output (one per weight, same variable file). */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- DESIGN TOKENS & RESET --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
/* Inline line-icons (replace emoji). Size to the surrounding text. */
.ic {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.16em;
  flex-shrink: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  touch-action: pan-x pan-y;
}
img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  /* Form controls never dictate layout width: they shrink with their
     container instead of punching out of it. Native intrinsic widths (iOS
     date pickers, selects) are the classic cause of phone overlaps — an
     explicit width/min-width on a specific control still wins over this. */
  min-width: 0;
  max-width: 100%;
}
/* Consistent, on-brand keyboard focus ring across interactive elements
           (mouse/touch users never see it — only keyboard navigation does). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
  border-radius: 6px;
}
/* On-brand text selection (visible in form fields and the Live Editor). */
::selection {
  background: var(--accent-soft);
  color: #1a191b;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Responsive convention: prefer these four canonical breakpoints for NEW
           rules — 480 (small phone), 640 (phone/phablet), 900 (tablet/desktop),
           1200 (wide) — instead of adding fresh one-off widths. Existing rules
           migrate opportunistically when touched. */
:root {
  --dark-grey: #121316;
  --glass-bg: rgba(255, 255, 255, 0.018);
  --glass-hover: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-highlight: rgba(255, 255, 255, 0.15);
  /* Mobile menu: heavily frosted dark glass — page shows through, blurred */
  --mobile-glass: rgba(18, 19, 22, 0.38);
  --booked-color: rgba(76, 175, 80, 0.3);
  --booked-border: rgba(76, 175, 80, 0.6);
  /* Property color codes */
  --prop-21a: #42a5f5; /* Pale blue */
  --prop-21a-bg: rgba(66, 165, 245, 0.3);
  --prop-21a-border: rgba(66, 165, 245, 0.7);
  --prop-jollyboat: #43a047; /* Green */
  --prop-jollyboat-bg: rgba(67, 160, 71, 0.3);
  --prop-jollyboat-border: rgba(67, 160, 71, 0.7);
  --prop-pimpernel: #9c27b0; /* Purple */
  --prop-pimpernel-bg: rgba(156, 39, 176, 0.3);
  --prop-pimpernel-border: rgba(156, 39, 176, 0.7);
  --text-light: #f4f5f7;
  --text-muted: #b4b8c6;
  /* Brand accent (rose-gold) — used for focus rings & subtle highlights. */
  --accent: #d6a785;
  --accent-soft: rgba(214, 167, 133, 0.55);
  /* Radius scale — use these for new components: sm = small controls,
               md = cards/fields, lg = nested/mid cards, panel = top-level surfaces
               (the header's curvature — panels, cards, modals, galleries),
               pill = chips/toggles. --r-panel drops to 28px on phones (≤768). */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-panel: 40px;
  --r-pill: 999px;
  /* Spacing scale — one rhythm for section padding, stack gaps and insets.
               Prefer these over ad-hoc px so vertical rhythm stays consistent, the same
               way the radius / shadow / type scales work. Steps roughly 1.5×. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  /* Status colours — use these (not raw hex) for paid/available/warning/
               error states so the palette stays consistent and theme-tunable.
               The -text variants are the lighter tints that stay readable on glass. */
  --ok: #4caf50;
  --ok-text: #81c784;
  --warn: #ffa726;
  --warn-text: #ffb74d;
  --danger: #e57373;
  /* Shadow scale: panel = resting glass surface, float = raised/floating
               elements (modals, popovers, FABs), soft = small controls on hover. */
  --shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, 0.28);
  /* Liquid-glass MATERIAL (Apple iOS 26 / macOS Tahoe language): the glass
               isn't a flat frost — it blurs AND lifts saturation/brightness so colour
               behind it refracts vividly, and it carries a specular edge (a bright
               catch along the top inner rim + a faint base shade) that reads as real
               glass thickness. Both are tokens so every glass surface stays consistent
               and both themes can tune them. */
  --glass-blur: 24px;
  --glass-filter: blur(var(--glass-blur)) saturate(180%) brightness(1.04);
  --glass-rim: inset 0 1px 0 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 0 rgba(0, 0, 0, 0.06);
  /* Glass control hover: brighten the translucent glass (Apple's Liquid Glass
               controls stay glassy and lift — they don't flip to a solid slab). */
  --btn-hover: rgba(255, 255, 255, 0.14);
  /* Heading scale: h1 page titles, h2 section headings, h3 sub-headings. */
  --fs-h1: clamp(1.9rem, 5vw, 3rem);
  --fs-h2: 1.5rem;
  --fs-h3: 1.4rem;
  /* Ambient background blobs (themeable) */
  --blob-1: #2a2d3a;
  --blob-2: #1b1e28;
  --blob-3: #222530;
  --hero-brightness: 0.5;
  --font-serif: "Playfair Display", serif;
  --font-sans: "Montserrat", sans-serif;
  --fluid-bezier: cubic-bezier(0.25, 1, 0.25, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- COASTAL FRESH (light): the guest default. Warm linen ground, white
           glass, ink-slate text, rose-gold + sea/sky secondary accents, soft
           natural shadows. Swaps the theme tokens; the rest of the CSS follows.
           `.theme-light-boot` on <html> paints it before app.js sets the class,
           so there is no flash of dark on first load. ---- */
html.theme-light-boot body,
body.light-mode {
  --dark-grey: #f5f1e9; /* warm linen / sand page ground */
  --glass-bg: rgba(255, 255, 255, 0.78); /* frosted white glass */
  --glass-hover: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(28, 46, 58, 0.12);
  --glass-highlight: rgba(28, 46, 58, 0.2);
  /* Mobile menu: heavily frosted light glass — page shows through, blurred */
  --mobile-glass: rgba(245, 241, 233, 0.42);
  --text-light: #1b2a34; /* deep ink-slate (coastal, softer than black) */
  --text-muted: #52646e; /* slate — AA on the linen ground */
  --accent: #c6885e; /* a touch deeper rose-gold for contrast on light */
  --accent-soft: rgba(198, 136, 94, 0.42);
  /* Secondary coastal accents (used sparingly for freshness) */
  --sea: #2e8b8b;
  --sky: #5aa9de;
  --seafoam: #dcebe4;
  /* Ambient wash: sky / seafoam / sand */
  --blob-1: #dceaf2;
  --blob-2: #ede6d6;
  --blob-3: #dcebe4;
  --hero-brightness: 0.82;
  /* Soft, cool-tinted natural shadows — light & airy, not heavy black */
  --shadow-panel: 0 10px 34px rgba(30, 54, 72, 0.1);
  --shadow-float: 0 18px 50px rgba(30, 54, 72, 0.2);
  --shadow-soft: 0 6px 18px rgba(30, 54, 72, 0.12);
  /* Liquid-glass material, tuned for white glass on the linen ground: a crisp
               bright top lip reads as the glass edge; a hair less saturation than dark. */
  --glass-filter: blur(var(--glass-blur)) saturate(150%) brightness(1.02);
  --glass-rim: inset 0 1px 0 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 0 rgba(30, 54, 72, 0.05);
  /* Brighter white glass on hover for the light theme's white controls. */
  --btn-hover: rgba(255, 255, 255, 0.72);
}
/* Light-mode fixes for sub-panels/inputs that use a hard-coded dark fill
           (rgba(0,0,0,...)) which doesn't follow the theme tokens. Text colours
           elsewhere use var(--text-light), so they flip automatically. */
body.light-mode .chat-widget {
  background: rgba(248, 248, 250, 0.97);
}
body.light-mode .input-glass,
body.light-mode .date-range-trigger,
body.light-mode .rate-field input,
body.light-mode .day-check,
body.light-mode .price-box,
body.light-mode .guest-price-box,
body.light-mode .toast,
body.light-mode textarea {
  background: rgba(255, 255, 255, 0.5) !important;
}
body.light-mode .input-glass option {
  background: #fff;
}
/* The hero text sits on a dark scrim in both themes (see .hero-content) */
/* Coloured booking tags / status badges keep white text on their colour fills */

/* ---- Smooth crossfade when switching light/dark ----
           Transition colour properties on themed surfaces/text that don't already
           carry their own transition. Elements like .glass-panel, .btn-glass and
           .toggle-btn already animate these (via their hover transitions), so they
           crossfade on their own and are deliberately left out here to avoid
           overriding those. We never transition backdrop-filter or transform. */
body,
.hero-bg,
.blob,
.hero h1,
.hero p,
.section-title,
.lead,
.card-title,
.card-meta,
.modal-label,
.booking-detail-value,
.booking-detail-label,
.stat-number,
nav a,
.logo-text,
.cal-month-title,
.day-num,
.amenity-pill,
.price-row,
.amenity-text {
  transition:
    background-color 0.45s var(--fluid-bezier),
    color 0.45s var(--fluid-bezier),
    border-color 0.45s var(--fluid-bezier),
    filter 0.45s var(--fluid-bezier);
}
@media (prefers-reduced-motion: reduce) {
  body,
  .hero-bg,
  .blob,
  .hero h1,
  .hero p,
  .section-title,
  .lead,
  .card-title,
  .card-meta,
  .modal-label,
  .booking-detail-value,
  .booking-detail-label,
  .stat-number,
  nav a,
  .logo-text,
  .cal-month-title,
  .day-num,
  .amenity-pill,
  .price-row,
  .amenity-text {
    transition: none;
  }
}

body {
  font-family: var(--font-sans);
  color: var(--text-light);
  background-color: var(--dark-grey);
  line-height: 1.6;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Visitors can't select/copy the site's text or icons, nor long-press
               an icon/image to save it. Re-enabled for form fields (below). */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Form fields must stay selectable so enquiries/logins work normally. */
input,
textarea,
select,
[contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

/* --- FLUID AMBIENT BACKGROUND --- */
.ambient-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: var(--dark-grey);
  overflow: hidden;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.4;
  animation: fluidFloat 25s infinite alternate ease-in-out;
}
.blob-1 {
  top: -10%;
  left: -10%;
  width: 50vw;
  height: 50vw;
  background: var(--blob-1);
}
.blob-2 {
  bottom: -20%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  background: var(--blob-2);
  animation-delay: -5s;
}
.blob-3 {
  top: 40%;
  left: 40%;
  width: 40vw;
  height: 40vw;
  background: var(--blob-3);
  animation-duration: 30s;
}

@keyframes fluidFloat {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(5%, 10%) scale(1.1);
  }
  100% {
    transform: translate(-5%, -5%) scale(0.9);
  }
}

/* --- LIQUID GLASS UTILITIES --- */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-filter);
  -webkit-backdrop-filter: var(--glass-filter);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-panel), var(--glass-rim);
  transition:
    background 0.5s var(--fluid-bezier),
    border-color 0.5s var(--fluid-bezier),
    transform 0.5s var(--fluid-bezier),
    box-shadow 0.5s var(--fluid-bezier);
}
/* Lift on hover only for devices with a true pointer, so the effect doesn't
           "stick" after a tap on touchscreens. The specular rim rides along. */
@media (hover: hover) {
  .glass-panel:hover {
    background: var(--glass-hover);
    border-color: var(--glass-highlight);
    transform: translateY(-5px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.4), var(--glass-rim);
  }
}
/* Touch feedback: a gentle press instead of a sticky hover */
.card:active {
  transform: scale(0.97);
}

/* --- ROUTING SYSTEM --- */
.page-view {
  display: none;
  opacity: 0;
  transform: translateY(22px) scale(0.992);
  flex: 1;
}
.page-view.active {
  display: block;
  /* The visible state is the BASE state — the entrance animation is purely
     decorative. Never rely on `forwards` fill to reach visibility: if the
     animation is skipped (reduced-motion overrides, test harnesses, odd
     browsers) the page must still show. */
  opacity: 1;
  transform: none;
  animation: fluidFadeIn 0.7s var(--fluid-bezier);
}
@keyframes fluidFadeIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Staggered "rise" for the cottage cards on entry. Added by initCardRise and
           cleared on animationend so the hover lift still works afterwards. */
@keyframes cardRise {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.grid > .card.rise {
  /* Visible base state; the rise keyframes provide the entrance while they
     run. No `forwards` dependency (see .page-view.active). */
  opacity: 1;
  animation: cardRise 0.7s var(--spring) backwards;
}
.grid > .card.rise:nth-child(1) {
  animation-delay: 0.04s;
}
.grid > .card.rise:nth-child(2) {
  animation-delay: 0.12s;
}
.grid > .card.rise:nth-child(3) {
  animation-delay: 0.2s;
}
.grid > .card.rise:nth-child(4) {
  animation-delay: 0.28s;
}
.grid > .card.rise:nth-child(5) {
  animation-delay: 0.36s;
}
.grid > .card.rise:nth-child(6) {
  animation-delay: 0.44s;
}
@media (prefers-reduced-motion: reduce) {
  .page-view.active {
    animation-duration: 0.001s;
  }
  .grid > .card.rise {
    animation: none;
    opacity: 1;
  }
}

/* --- RESPONSIVE HEADER --- */
header {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  z-index: 1000;
  padding: 15px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  transition:
    transform 0.45s var(--fluid-bezier),
    opacity 0.45s var(--fluid-bezier);
  will-change: transform;
}
/* Hidden state: slide up out of view while keeping horizontal centering */
header.header-hidden {
  transform: translateX(-50%) translateY(-150%);
  opacity: 0;
  pointer-events: none;
}
/* The header is a glass-panel, but it must NOT lift/shift on hover the way
           cards do — that hover transform was overriding its centering and making
           it jump. Pin its transform in every non-hidden state. */
header.glass-panel:not(.header-hidden):hover,
header.glass-panel:not(.header-hidden):active,
header.glass-panel:not(.header-hidden):focus-within {
  transform: translateX(-50%);
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  margin-right: auto;
  line-height: 1.15;
  flex: 0 1 auto;
  min-width: 0; /* shrinkable: title truncates, never overlaps nav */
  /* No focus ring / blue tap-box when the crown is clicked or tapped. */
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  /* No long-press "copy/save image" menu on mobile. */
  -webkit-touch-callout: none;
}
.logo:focus,
.logo:focus-visible {
  outline: none;
}
/* Belt-and-braces: kill every tap/press highlight, focus ring or active
           background on the crown and its children, across iOS and Android. */
.logo,
.logo *,
.logo-mark {
  -webkit-tap-highlight-color: transparent !important;
}
.logo:active,
.logo:hover,
.logo:focus,
.logo:focus-visible,
.logo:focus-within {
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.logo-mark {
  height: clamp(34px, 7vw, 46px);
  width: auto;
  display: block;
  flex-shrink: 0;
  /* Stop the image being selectable/draggable/long-press-saved. */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
  /* Lift the rose-gold mark off the glass + a soft warm glow */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 10px rgba(214, 167, 133, 0.45));
  /* Own compositing layer so the header's backdrop-filter doesn't
               re-sample the crown's filter box (which flashed a lighter
               rectangle around it on tap on mobile). */
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
/* Brief pulse when the crown is tapped/clicked. Transform-only (no filter
           animation) so it can't trigger the backdrop-filter box artifact. */
.logo-mark.crown-flare {
  animation: crownFlare 0.7s ease-out;
}
@keyframes crownFlare {
  0% {
    transform: translateZ(0) scale(1);
  }
  40% {
    transform: translateZ(0) scale(1.12);
  }
  100% {
    transform: translateZ(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo-mark.crown-flare {
    animation: none;
  }
}
.logo-text {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 3.5vw, 1.4rem);
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex-shrink: 1;
}
nav {
  display: flex;
  flex-shrink: 0;
}
nav a {
  white-space: nowrap;
}

nav ul {
  position: relative;
  display: flex;
  gap: 6px;
  list-style: none;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
nav a {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none; /* the Experiences tab is a real <a href> — don't underline it */
  transition: color 0.4s var(--fluid-bezier);
}
/* Text tabs get padding so the sliding glass pill can wrap them. */
nav ul li a:not(.btn-glass) {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--r-pill);
}
nav a:hover {
  color: var(--text-light);
}
/* Hover-following glass pill behind the nav tabs (positioned by initNavIndicator). */
.nav-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0;
  height: 38px;
  border-radius: var(--r-pill);
  background: var(--glass-hover);
  border: 1px solid var(--glass-border);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition:
    left 0.45s var(--spring),
    width 0.45s var(--spring),
    opacity 0.3s var(--fluid-bezier);
}
.nav-indicator.show {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .nav-indicator {
    transition: opacity 0.2s var(--fluid-bezier);
  }
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 1.5rem;
  cursor: pointer;
  z-index: 1100;
}
/* Customer login — same icon-button language as the admin dock:
           circular, translucent, subtle hover (no white invert that would hide
           the line icon). */
.account-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-highlight);
  color: var(--text-light);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s var(--fluid-bezier),
    border-color 0.25s var(--fluid-bezier),
    transform 0.15s var(--fluid-bezier);
  margin-left: 18px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.account-btn svg {
  width: 22px;
  height: 22px;
  display: block;
}
.account-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--text-light);
  transform: translateY(-1px);
}
.account-btn:active {
  transform: scale(0.94);
}
.account-btn.logged-in {
  background: rgba(76, 175, 80, 0.25);
  border-color: var(--booked-border);
}
.account-btn.logged-in:hover {
  background: rgba(76, 175, 80, 0.38);
}
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  /* Heavily frosted liquid glass — the page shows through, blurred.
               Theme-aware: --mobile-glass flips with dark/light mode. */
  background: var(--mobile-glass);
  backdrop-filter: blur(34px) saturate(170%);
  -webkit-backdrop-filter: blur(34px) saturate(170%);
  border-left: 1px solid var(--glass-border);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  transition: right 0.6s var(--fluid-bezier);
}
.mobile-nav-overlay.open {
  right: 0;
}
.mobile-nav-overlay a {
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-light);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25);
}
.mobile-nav-overlay a:hover {
  color: var(--text-light);
}

.btn-glass {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-highlight);
  /* Specular edge, matching the glass panels — a bright top lip that reads as
     glass. Deliberately NO backdrop-filter here: buttons appear in long lists
     (admin tables, chat replies) and a blur layer per button would cost more
     than it's worth; the rim gives the Liquid-Glass edge cheaply. */
  box-shadow: var(--glass-rim);
  padding: 12px 28px;
  border-radius: 30px;
  color: var(--text-light);
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  white-space: nowrap;
  transition:
    background 0.4s var(--fluid-bezier),
    color 0.4s var(--fluid-bezier),
    transform 0.4s var(--spring),
    box-shadow 0.4s var(--fluid-bezier);
  display: inline-block;
}
/* Liquid Glass hover: the glass brightens and lifts but stays translucent (Apple's
   controls don't invert to a solid fill). Text stays the readable body colour. */
.btn-glass:hover {
  background: var(--btn-hover);
  border-color: var(--glass-highlight);
  color: var(--text-light);
}
/* Springy press + a hint of lift + the specular rim on hover for a tactile feel. */
@media (hover: hover) {
  .btn-glass:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-soft), var(--glass-rim);
  }
}
.btn-glass:active {
  transform: scale(0.95);
}
/* Busy/disabled state — used while an async action (e.g. sending an enquiry) is in flight. */
.btn-glass:disabled,
.btn-glass.is-busy {
  opacity: 0.6;
  cursor: progress;
  pointer-events: none;
}
/* Clear keyboard focus ring (only for keyboard users, via :focus-visible) so the
           glass UI stays clean for mouse/touch but is fully navigable from the keyboard. */
.btn-glass:focus-visible,
.btn-sm:focus-visible,
.account-btn:focus-visible,
.reviews-modal-close:focus-visible,
.gallery-nav:focus-visible,
.lightbox-nav:focus-visible,
.lightbox-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Same clear focus ring for the homepage search controls, chips and nav-pill
           CTA so the whole customer journey is keyboard-navigable consistently. */
.hs-field:focus-visible,
.hs-step:focus-visible,
.hs-chip:focus-visible,
.hs-mode-btn:focus-visible,
.flex-opt:focus-visible,
.hs-opt:focus-visible,
.hs-select-btn:focus-visible,
.exp-chip:focus-visible,
.avail-nav:focus-visible,
#guest-book-cta:focus-visible,
nav a:focus-visible,
.back-link:focus-visible,
.menu-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.input-glass:focus-visible,
.date-range-trigger:focus-visible,
.terms-accept input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--text-light);
}

select.input-glass {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
/* Glass chevron on ALL glass selects (replaces the native dropdown arrow) */
select.input-glass {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
/* Native date/time pop-ups follow the theme instead of flashing white */
input[type="date"],
input[type="time"] {
  color-scheme: dark;
}
body.light-mode input[type="date"],
body.light-mode input[type="time"] {
  color-scheme: light;
}
/* Hide number spinners in the compact editors (type the number instead) */
.rate-field input::-webkit-outer-spin-button,
.rate-field input::-webkit-inner-spin-button,
.field-sm::-webkit-outer-spin-button,
.field-sm::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- Glass scrollbars --- */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.28);
}
body.light-mode ::-webkit-scrollbar-thumb {
  background: rgba(20, 22, 34, 0.22);
  border: 2px solid transparent;
  background-clip: content-box;
}

/* --- Glass dialog (replaces native alert/confirm/prompt) --- */
#glass-dialog {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: rgba(10, 11, 13, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#glass-dialog.open {
  display: flex;
  animation: fluidFadeIn 0.3s var(--fluid-bezier);
}
.glass-dialog-box {
  width: 100%;
  max-width: 420px;
  padding: 28px 30px;
  border-radius: var(--r-panel);
}
.glass-dialog-msg {
  font-size: 0.95rem;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--text-light);
}
.glass-dialog-input {
  margin-top: 16px;
  margin-bottom: 0 !important;
}
/* glassForm mode: labelled inputs stacked inside the dialog. */
.glass-dialog-fields {
  margin-top: 14px;
  text-align: left;
}
.glass-dialog-fields .modal-label {
  margin-top: 10px;
}
.glass-dialog-fields .input-glass {
  margin-bottom: 0;
}
.glass-dialog-btns {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}
.glass-dialog-btns .btn-glass {
  padding: 11px 26px;
}

/* ---- Custom glass date-range picker (customer booking form) ---- */
.date-range-trigger {
  width: 100%;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid var(--glass-border);
  color: var(--text-light);
  padding: 15px;
  border-radius: var(--r-sm);
  margin-bottom: 20px;
  font-family: var(--font-sans);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition:
    border 0.3s var(--fluid-bezier),
    background 0.3s var(--fluid-bezier);
  text-align: left;
}
.date-range-trigger:hover {
  border-color: var(--glass-highlight);
  background: rgba(0, 0, 0, 0.28);
}
.date-range-trigger.has-dates {
  border-color: var(--glass-highlight);
}
.date-range-text {
  color: var(--text-muted);
}
.date-range-trigger.has-dates .date-range-text {
  color: var(--text-light);
}
.date-range-icon {
  flex-shrink: 0;
  opacity: 0.8;
}

.datepicker-pop {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 11, 13, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.datepicker-pop.open {
  display: flex;
  /* Visible base state; entrance animation is decorative (no forwards fill). */
  opacity: 1;
  animation: fluidFadeIn 0.35s var(--fluid-bezier);
}
.datepicker-card {
  width: 100%;
  max-width: 380px;
  padding: 22px;
  border-radius: var(--r-lg);
}
.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.dp-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
}
.dp-nav-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-light);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dp-nav-btn:hover {
  border-color: var(--glass-highlight);
  background: var(--glass-hover);
}
.dp-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 14px;
  min-height: 1.1em;
}
.dp-weekdays,
.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.dp-weekday {
  text-align: center;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding-bottom: 8px;
}
.dp-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--text-light);
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background 0.2s,
    border-color 0.2s;
  user-select: none;
}
.dp-day:hover:not(.dp-disabled):not(.dp-empty) {
  background: var(--glass-hover);
  border-color: var(--glass-highlight);
}
.dp-day.dp-empty {
  cursor: default;
}
.dp-day.dp-disabled {
  color: var(--text-muted);
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
}
.dp-day.dp-booked {
  color: var(--text-muted);
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}
/* Admin mode (Add/Edit Booking): taken nights are a cue, not a wall — the
   owner can still pick them (deliberate overlaps confirm at save). */
#date-picker.dp-admin .dp-day.dp-booked {
  cursor: pointer;
  opacity: 0.5;
}
.dp-day.dp-today {
  border-color: var(--glass-border);
  font-weight: 600;
}
.dp-day.dp-in-range {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 0;
}
.dp-day.dp-start {
  background: var(--text-light);
  color: var(--dark-grey);
  font-weight: 700;
  border-radius: 10px 0 0 10px;
}
.dp-day.dp-end {
  background: var(--text-light);
  color: var(--dark-grey);
  font-weight: 700;
  border-radius: 0 10px 10px 0;
}
.dp-day.dp-start.dp-end {
  border-radius: 10px;
}
.dp-foot {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.dp-foot button {
  flex: 1;
}
/* Make the date-picker "Clear" obvious: dims when there are no dates to clear. */
.dp-clear.is-empty {
  opacity: 0.4;
  pointer-events: none;
}

/* Terms acceptance checkbox */
.terms-accept {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 18px;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  cursor: pointer;
}
.terms-accept input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--ok);
  cursor: pointer;
}
.terms-accept a {
  color: var(--text-light);
  text-decoration: underline;
  cursor: pointer;
}
.terms-accept a:hover {
  color: var(--text-light);
}
/* Terms modal (scrollable document) — matches the site's serif/glass styling */
.terms-modal-box {
  width: 100%;
  max-width: 760px;
  max-height: 85vh;
  padding: 0;
  border-radius: var(--r-panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.terms-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 32px 20px;
  border-bottom: 1px solid var(--glass-border);
}
.terms-modal-head h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 400;
  margin: 0;
  line-height: 1.15;
}
.terms-modal-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 6px 0 0;
  letter-spacing: 0.4px;
}
.terms-modal-body {
  padding: 6px 32px 30px;
  overflow-y: auto;
}
.terms-modal-body h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text-light);
  font-weight: 400;
  margin: 28px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--glass-border);
  letter-spacing: 0.2px;
}
.terms-modal-body h3:first-child {
  margin-top: 14px;
  padding-top: 0;
  border-top: none;
}
.terms-modal-body p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0 0 10px;
}
.terms-term {
  color: var(--text-light);
  font-weight: 600;
}
.terms-modal-foot {
  padding: 18px 32px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* --- HERO & LAYOUT --- */
/* The home view is a flex column so its sections (hero → cottages → search)
           stack cleanly. The hero is a fixed banner (it no longer grows to fill the
           viewport — the cottage + availability sections provide the page content).
           Scoped to .active so it still hides (display:none) when on another page. */
#view-main.active {
  display: flex;
  flex-direction: column;
}
.hero {
  min-height: clamp(360px, 56vh, 560px);
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  /* "safe center": centre vertically when there's room, but anchor to the
               top (never overflow upward under the floating header) when the content
               is taller than the hero — fixes the header clipping the search panel on
               short desktop windows. Falls back to plain centring where unsupported. */
  align-items: safe center;
  text-align: center;
  border-radius: 0 0 var(--r-panel) var(--r-panel);
  overflow: hidden;
  position: relative;
  margin-bottom: 0;
  padding: calc(116px + env(safe-area-inset-top)) 0 var(--space-4); /* clear the floating header (+ notch) */
}
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: brightness(var(--hero-brightness));
  z-index: 1;
  /* One-time cinematic settle on load, then FULLY static. A perpetual drift kept
     the frosted hero panels (backdrop-filter) re-blurring every frame while the
     photo behind them moved — a constant GPU/battery cost on mobile even when
     idle. Now the blur only recomputes on scroll. (Neutralised under
     prefers-reduced-motion.) */
  animation: heroDrift 7s ease-out both;
}
@keyframes heroDrift {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1);
  }
}
.hero {
  overflow: hidden;
} /* clip the drifting photo */
/* On real screens give the opening its full cinematic height. */
@media (min-width: 900px) and (min-height: 700px) {
  .hero {
    min-height: clamp(560px, 82vh, 900px);
  }
}
.hero-kicker {
  font-size: 0.74rem;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 14px;
}
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 3;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  padding: 10px;
  animation: cueBob 2.6s ease-in-out infinite;
  display: none;
}
.hero-scroll-cue:hover,
.hero-scroll-cue:focus-visible {
  color: #fff;
}
@keyframes cueBob {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(7px);
  }
}
@media (min-width: 900px) and (min-height: 700px) {
  .hero-scroll-cue {
    display: block;
  }
}
/* Gradient + vignette scrim so the headline panel and CTA stay legible now
           that the photo is shown brighter — adds depth without dimming the image flat. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 28%, transparent 46%, rgba(0, 0, 0, 0.34) 100%),
    linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.06) 56%, transparent 82%);
}
/* 880px matches the availability panel (.home-availability caps at 920px
           with 20px side padding) so the two marquee glass panels read as a pair. */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 880px;
  width: 90%;
  padding: 40px;
}
.hero-cta {
  margin-top: 4px;
}
/* Scroll-reveal: only armed once JS adds html.js-reveal, so content is never
           hidden without JS. initScrollReveal() skips arming under reduced-motion. */
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s var(--fluid-bezier),
    transform 0.7s var(--spring);
}
html.js-reveal .reveal.in-view {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* Homepage section order: hero → heritage numbers → cottage cards →
           trust strip → availability → guest words. (Flex order on #view-main.) */
.home-cottages {
  order: 1;
}
.home-trust {
  order: 2;
}
.home-availability {
  order: 3;
}
.home-guestwords {
  order: 4;
}
/* Trust strip — slim, factual reassurance band under the hero. */
/* Same 1200px cap as .home-cottages so the strip's edges line up with the
           card grid above it. */
.home-trust {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(var(--space-1), 2vw, var(--space-2)) clamp(var(--space-2), 4vw, 20px) 0;
  box-sizing: border-box;
}
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 28px;
  padding: 15px 22px;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.86rem;
  color: var(--text-light);
}
.trust-item .ic {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .trust-strip {
    gap: 11px 18px;
    padding: 14px 16px;
  }
  .trust-item {
    font-size: 0.8rem;
  }
}
/* Homepage sections below the hero: the cottage cards and the relocated
           "Check availability" panel. */
.home-cottages {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(var(--space-3), 4vw, var(--space-4)) clamp(var(--space-2), 4vw, 20px) clamp(var(--space-4), 6vw, var(--space-5));
  box-sizing: border-box;
}
.home-cottages .card-meta {
  margin-bottom: 0;
}
.home-availability {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(var(--space-3), 4vw, var(--space-4)) clamp(var(--space-2), 4vw, 20px) var(--space-5);
  box-sizing: border-box;
  scroll-margin-top: calc(100px + env(safe-area-inset-top));
}
.home-availability .hero-content {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6.4vw, 5.2rem);
  margin-bottom: 20px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.5px;
  color: var(--text-light);
}
.hero p {
  font-size: clamp(0.85rem, 2.2vw, 1.2rem);
  color: var(--text-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 40px;
}

/* width:100% matters: <body> is a flex column, and auto side margins on a
           flex item disable align-items:stretch — without an explicit width each
           .container page would shrink to fit-content (the Experiences page really
           did, collapsing its card grid to one narrow column on tablets). */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(clamp(90px, 12vw, 120px) + env(safe-area-inset-top)) clamp(16px, 4vw, 20px) var(--space-5);
}
.container.wide {
  max-width: 1500px;
}
/* iPhone notch / Dynamic Island safe areas. With viewport-fit=cover the page
           background fills the whole screen in landscape; these keep content and the
           floating bars clear of the notch and home indicator. */
@supports (padding: max(0px)) {
  .container {
    padding-left: max(clamp(16px, 4vw, 20px), env(safe-area-inset-left));
    padding-right: max(clamp(16px, 4vw, 20px), env(safe-area-inset-right));
  }
  .hero-content {
    padding-left: max(40px, env(safe-area-inset-left));
    padding-right: max(40px, env(safe-area-inset-right));
  }
  .owner-bar-inner {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .site-footer {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}
.text-center {
  text-align: center;
}
.section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  margin-bottom: 30px;
  font-weight: 400;
}
.lead {
  font-size: clamp(0.98rem, 2vw, 1.1rem);
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto;
}

/* --- GRID CARDS --- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
}
/* Cottages collection: three tiles across on true desktop (Airbnb-style).
           Below 960px the base auto-fit grid gives a comfortable 2-up on tablets —
           forcing 3-up from 760px squeezed cards to ~230px. */
@media (min-width: 900px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Tablet window where a 3-card collection sits 2-up: let the odd last card
           span the full row instead of leaving a lopsided half-width orphan. */
@media (min-width: 769px) and (max-width: 899px) {
  .grid.grid-3 > .card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
.card {
  padding: 15px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition:
    background 0.5s var(--fluid-bezier),
    border-color 0.5s var(--fluid-bezier),
    transform 0.55s var(--spring),
    box-shadow 0.5s var(--fluid-bezier);
}
a.card {
  text-decoration: none;
  color: var(--text-light);
}
/* A touch more lift + scale than the generic glass panel, with springy easing. */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-7px) scale(1.012);
  }
}
.card-img {
  height: clamp(190px, 48vw, 250px);
  border-radius: calc(var(--r-panel) - 15px);
  background-size: cover;
  background-position: center;
  margin-bottom: 20px;
}
/* On wider screens the cards sit in columns, so cap height back down. */
@media (min-width: 769px) {
  .card-img {
    height: clamp(200px, 22vw, 250px);
  }
}
/* Cottage-card photos zoom gently on hover (mirrors the guest-photo wall).
           The wrap owns the rounding + the gap below, and clips the scaled image. */
.card-img-wrap {
  overflow: hidden;
  border-radius: calc(var(--r-panel) - 15px);
  margin-bottom: 20px;
}
.card-img-wrap .card-img {
  margin-bottom: 0;
  transition: transform 0.6s var(--fluid-bezier);
}
@media (hover: hover) {
  .card:hover .card-img-wrap .card-img {
    transform: scale(1.05);
  }
}
.card-title {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  margin-bottom: 5px;
}
.card-meta {
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-bottom: 15px;
}
.card-rating {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.card-rating .cr-star {
  color: var(--warn-text);
}
.card-rating .cr-count {
  color: var(--text-muted);
}
.card-rating .cr-new {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-style: italic;
}
.card-price {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--text-light);
}
.card-price span {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: var(--font-sans);
}
/* Cottages page: full-width single column on mobile AND desktop (the cards
           span the whole screen width rather than sitting in a narrow centred column). */
#view-cottages {
  max-width: none;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
}
#cottages {
  grid-template-columns: 1fr;
  gap: 16px;
}
/* Desktop: a 3-up collection grid (cards side by side), centred to a
           comfortable width — mobile stays full-width single column above. */
@media (min-width: 900px) {
  #view-cottages {
    max-width: 1500px;
    margin: 0 auto;
    padding-left: clamp(20px, 4vw, 40px);
    padding-right: clamp(20px, 4vw, 40px);
  }
  #cottages {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: start;
  }
}

/* --- GUEST REVIEWS --- */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 30px;
}
.review-card {
  padding: 26px 28px;
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-stars {
  color: #d6a785;
  letter-spacing: 3px;
  font-size: 0.95rem;
}
.review-text {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.7;
  font-style: italic;
}
.review-who {
  font-size: 0.8rem;
  color: var(--text-light);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: auto;
}
.review-who span {
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}

/* --- FAQ / house-rules accordion --- */
.faq-item {
  border-bottom: 1px solid var(--glass-border);
}
.faq-item:last-child {
  border-bottom: none;
}
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  padding: 16px 30px 16px 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.faq-q .faq-icon {
  flex-shrink: 0;
  font-size: 1.05rem;
}
.faq-q::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--text-muted);
  transition: transform 0.3s var(--fluid-bezier);
}
.faq-item.open .faq-q::after {
  content: "−";
}
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--fluid-bezier);
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.7;
}
.faq-a-inner {
  padding: 0 0 18px 0;
  white-space: pre-wrap;
}

/* --- All-reviews modal --- */
.reviews-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: rgba(10, 11, 13, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.reviews-modal.open {
  display: flex;
  animation: fluidFadeIn 0.3s var(--fluid-bezier);
}
.reviews-modal-box {
  width: 100%;
  max-width: 760px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 28px 30px;
  border-radius: var(--r-panel);
}
.reviews-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.reviews-modal-close {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-light);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background 0.2s;
}
.reviews-modal-close:hover {
  background: var(--glass-hover);
}
.reviews-modal-body {
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  padding-right: 4px;
}

/* --- RESPONSIVE PROPERTY VIEW LAYOUT --- */
.prop-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 32px auto 0;
  max-width: 760px;
  align-items: start;
}
/* Wider calendar layout: give calendar much more room */
.cal-layout {
  display: grid;
  grid-template-columns: 2.6fr 1fr;
  gap: 40px;
  margin-top: 40px;
  align-items: start;
}
.back-link {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 20px;
}
.back-link:hover {
  color: var(--text-light);
}

.amenities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin-top: 30px;
}
.amenity-pill {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  padding: 12px 20px;
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.amenity-text {
  flex: 1;
  min-width: 0;
  outline: none;
}

.booking-glass {
  padding: 40px;
  scroll-margin-top: 90px;
}
/* ---- Airbnb-style cottage page ---- */
#view-21a {
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
}
.prop-h1 {
  text-align: left;
}
.prop-subtitle {
  color: var(--text-muted);
  font-size: 1rem;
  margin: 6px 0 20px;
}
.prop-stats {
  display: flex;
  text-align: center;
}
.prop-stat {
  flex: 1;
  padding: 4px 6px;
}
.prop-stat + .prop-stat {
  border-left: 1px solid var(--glass-border);
}
.prop-stat-top {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1.1;
}
.prop-stat-stars {
  color: var(--warn-text);
  font-size: 0.78rem;
  letter-spacing: 1px;
  margin-top: 3px;
}
.prop-stat-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}
.prop-stat .ic {
  width: 20px;
  height: 20px;
}
.prop-divider {
  height: 1px;
  background: var(--glass-border);
  margin: 22px 0;
}
.prop-section-h {
  text-align: left;
  font-size: var(--fs-h2);
  margin: 0 0 16px;
}
/* Meet your host */
.host-card {
  padding: 22px;
  border-radius: var(--r-panel);
}
.host-top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.host-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--dark-grey);
  flex-shrink: 0;
}
.host-name {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--text-light);
}
.host-badge {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.host-stats {
  display: flex;
  margin: 18px 0;
}
.host-stats > div {
  flex: 1;
  text-align: center;
  padding: 4px;
}
.host-stats > div + div {
  border-left: 1px solid var(--glass-border);
}
.host-stats strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--text-light);
}
.host-stats span {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.host-lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}
.host-line {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.9rem;
  color: var(--text-light);
}
.host-line .ic {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.host-bio {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}
.host-edit-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  display: block;
  margin: 14px 0 5px;
}
/* Guest photo wall (UGC) */
.guest-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.guest-photo {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition:
    border-color 0.3s var(--fluid-bezier),
    box-shadow 0.3s var(--fluid-bezier);
}
.guest-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--fluid-bezier);
}
.guest-photo:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
@media (hover: hover) {
  .guest-photo:hover {
    border-color: var(--glass-highlight);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  }
  .guest-photo:hover img {
    transform: scale(1.05);
  }
}
.guest-photo .gp-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 10px 7px;
  font-size: 0.7rem;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
}
.photo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.photo-lightbox.open {
  display: flex;
  /* Visible base state; entrance animation is decorative (no forwards fill). */
  opacity: 1;
  animation: fluidFadeIn 0.35s var(--fluid-bezier);
}
.photo-lightbox img {
  max-width: 92vw;
  max-height: 82vh;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
}
.photo-lightbox .pl-cap {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  color: #f0f0f0;
  font-size: 0.85rem;
  padding: 0 24px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.photo-lightbox .pl-close {
  position: absolute;
  top: 18px;
  right: 20px;
  background: rgba(255, 255, 255, 0.14);
  border: none;
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  transition: background 0.2s var(--fluid-bezier);
}
.photo-lightbox .pl-close:hover,
.photo-lightbox .pl-close:focus-visible {
  background: rgba(255, 255, 255, 0.28);
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .guest-photo img,
  .guest-photo:hover img {
    transition: none;
    transform: none;
  }
  .photo-lightbox.open {
    animation: none;
    opacity: 1;
  }
}
/* Newsletter footer: tidy spacing + brand-accent focus on the email field */
.footer-newsletter {
  margin: 6px auto 20px;
  max-width: 460px;
}
#nl-email {
  transition: border-color 0.2s var(--fluid-bezier);
}
#nl-email:focus {
  outline: none;
  border-color: var(--accent) !important;
}
/* Things to know */
.things-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px;
}
.things-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--text-light);
  margin-bottom: 10px;
}
.things-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.things-item {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.things-item .ic {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
}
.things-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 10px 0 0;
}
/* Where you'll be */
.prop-location-text {
  color: var(--text-muted);
  margin: 0 0 14px;
}
.prop-map {
  width: 100%;
  height: 340px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--dark-grey);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.prop-map.is-empty {
  display: none;
}
/* Modern map pin (Google-style dark circle) */
.prop-pin {
  background: transparent;
  border: none;
}
.prop-pin-dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #1a191b;
  border: 3px solid #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.prop-pin-dot svg {
  width: 20px;
  height: 20px;
}
/* Desktop Airbnb-style photo grid + sticky reserve card (mobile keeps the carousel + bottom bar) */
.gallery-grid {
  display: none;
  gap: 8px;
  height: 460px;
  border-radius: var(--r-panel);
  overflow: hidden;
  position: relative;
  margin-bottom: 30px;
}
.gg-cell {
  background-size: cover;
  background-position: center;
  cursor: pointer;
  transition: filter 0.25s var(--fluid-bezier);
}
.gg-cell:hover {
  filter: brightness(0.88);
}
.gg-big {
  grid-row: 1 / span 2;
}
.gg-showall {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: #1a191b;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}
.prop-reserve {
  display: none;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-panel);
  padding: 24px;
}
.pr-price {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--text-light);
  line-height: 1.2;
}
.pr-price small {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.pr-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 8px;
}
/* Register form: Phone + Postcode share a row on the desktop split layout
           (single column on mobile / the guest-app full-page view). */
.reg-row {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 14px;
}
@media (min-width: 900px) {
  body:not(.guest-app):not(.owner-mode) .auth-split .reg-row,
  body:not(.guest-app):not(.owner-mode) .enquire-box .reg-row {
    grid-template-columns: 1fr 1fr;
  }
}
.reg-row > div {
  min-width: 0;
}
.pr-trust {
  font-size: 0.74rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
}
.pr-savings {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ok);
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(76, 175, 80, 0.35);
  border-radius: var(--r-pill);
  padding: 3px 10px;
}
@media (min-width: 900px) {
  /* No extra cap: fill the container so the text/reserve columns share
               their left/right edges with the photo grid above. */
  .prop-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(300px, 360px);
    gap: 48px;
    max-width: none;
  }
  .prop-reserve {
    display: block;
    position: sticky;
    top: 100px;
  }
  #prop-book-bar {
    display: none !important;
  } /* desktop uses the reserve card instead */
  #view-21a {
    padding-bottom: 60px;
  }
  .gallery-container {
    display: none;
  } /* desktop shows the grid… */
  .gallery-grid {
    display: grid;
  }
}
.prop-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.prop-feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.prop-feature .ic {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--text-light);
  margin-top: 2px;
}
.prop-feature-title {
  color: var(--text-light);
  font-size: 0.98rem;
}
.prop-feature-sub {
  color: var(--text-muted);
  font-size: 0.83rem;
  line-height: 1.4;
}
.prop-book-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1300;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px max(16px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-right));
  background: rgba(26, 25, 27, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45);
}
.gallery-count {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.5px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
.pbb-price {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--text-light);
  line-height: 1.15;
}
.pbb-price small {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}
.pbb-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.pbb-sub .ic {
  width: 14px;
  height: 14px;
  color: var(--ok);
}
.pbb-btn {
  width: auto;
  padding: 14px 30px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Two-step enquiry modal */
.enquire-box {
  position: relative;
  max-width: 520px;
}
/* Two-step progress indicator at the top of the enquiry modal. */
.enq-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 40px 16px 0;
}
.enq-prog-step {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  white-space: nowrap;
  position: relative;
  padding-left: 20px;
  transition: color 0.3s var(--fluid-bezier);
}
/* Narrow phones: the three labels + connectors must FIT, never clip — shrink
   the type and tuck the gaps instead of cutting off "Account". */
@media (max-width: 480px) {
  .enq-progress {
    gap: 6px;
    margin-right: 34px;
  }
  .enq-prog-step {
    font-size: 0.6rem;
    letter-spacing: 0.5px;
    padding-left: 16px;
  }
}
.enq-prog-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--glass-border);
  background: transparent;
  transition:
    background 0.3s var(--fluid-bezier),
    border-color 0.3s var(--fluid-bezier);
}
.enq-prog-step.on,
.enq-prog-step.done {
  color: var(--text-light);
}
.enq-prog-step.on::before,
.enq-prog-step.done::before {
  border-color: var(--accent);
  background: var(--accent);
}
.enq-prog-line {
  flex: 1;
  height: 2px;
  background: var(--glass-border);
  border-radius: 2px;
}
.enq-summary {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--glass-border);
}
.enq-summary-img {
  width: 76px;
  height: 76px;
  border-radius: 14px;
  background-size: cover;
  background-position: center;
  background-color: var(--dark-grey);
  flex-shrink: 0;
}
.enq-summary-name {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--text-light);
}
.enq-summary-rating {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.enq-field-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin: 18px 0 6px;
}
.enq-cancel-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(76, 175, 80, 0.3);
  font-size: 0.83rem;
  color: var(--text-light);
  line-height: 1.4;
}
.enq-cancel-note .ic {
  width: 18px;
  height: 18px;
  color: var(--ok);
  flex-shrink: 0;
  margin-top: 1px;
}
/* Inline validation message inside the two-step enquiry popup (replaces blocking pop-ups) */
.enq-modal-msg {
  display: none;
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 176, 32, 0.12);
  border: 1px solid rgba(255, 176, 32, 0.35);
  color: #ffce7a;
  font-size: 0.85rem;
  line-height: 1.4;
}
.enq-modal-msg.show {
  display: block;
}
/* Guest online-payment view (Square) */
.pay-wrap {
  max-width: 480px;
  margin: 40px auto 60px;
}
.pay-card {
  padding: 28px;
  border-radius: var(--r-panel);
}
.pay-head {
  margin-bottom: 18px;
}
.pay-sub {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 6px 0 0;
}
.pay-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 0;
}
.pay-amount-box {
  text-align: center;
  padding: 18px;
  margin-bottom: 20px;
  border-radius: var(--r-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}
.pay-amount-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.pay-amount {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  color: var(--text-light);
  padding: 4px 0 2px;
}
.pay-amount-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.sq-card {
  min-height: 56px;
  padding: 4px 0;
}
.sq-wallets {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sq-wallets > div {
  min-height: 44px;
}
.sq-or {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 16px 0 4px;
}
.sq-apple-btn {
  -webkit-appearance: -apple-pay-button;
  appearance: -apple-pay-button;
  -apple-pay-button-type: plain;
  -apple-pay-button-style: white-outline;
  height: 44px;
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
  border: none;
}
.pay-msg {
  display: none;
  margin: 14px 0 0;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  background: rgba(229, 57, 53, 0.12);
  border: 1px solid rgba(229, 57, 53, 0.35);
  color: #ff9b95;
  font-size: 0.85rem;
  line-height: 1.4;
}
.pay-msg.show {
  display: block;
}
.pay-done,
.pay-error {
  text-align: center;
  padding: 16px 0;
}
.pay-done-tick .ic {
  width: 64px;
  height: 64px;
  color: var(--ok);
}
/* Desktop: make use of the wider screen — order summary beside the card form
           (the narrow single column is kept on phones, where it reads as a clean
           checkout). pay-head stays full-width above; pay-done/pay-error replace the
           body and stay centred. */
@media (min-width: 769px) {
  #view-pay .pay-wrap {
    max-width: 700px;
  }
  #view-pay #pay-body {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 28px;
    align-items: start;
  }
  #view-pay .pay-summary .pay-amount-box {
    margin-bottom: 0;
  }
}
/* Enquiry CTAs are for customers; hide them while the owner is signed in. */
body.owner-mode .prop-book-bar {
  display: none !important;
}
body.owner-mode #reserve-enquire-btn {
  display: none;
}
.input-glass {
  width: 100%;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid var(--glass-border);
  color: var(--text-light);
  padding: 15px;
  border-radius: var(--r-sm);
  margin-bottom: 20px;
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border 0.3s;
}
.input-glass:focus {
  outline: none;
  border-color: var(--text-light);
}
/* Inline date-rule warning shown live under the date picker (overrides the inline muted colour). */
.hint-warn {
  color: #f0a33a !important;
  font-weight: 500;
}
.input-glass option {
  background: var(--dark-grey);
  color: var(--text-light);
}
/* Read-only fields (e.g. a logged-in guest's account email) — clearly not editable. */
.input-glass.input-locked {
  opacity: 0.7;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.32);
}
.input-glass.input-locked:focus {
  border-color: var(--glass-border);
}
/* Compact editor fields (Settings: reviews + seasonal rates) — same glass
           look as the booking form, sized for dense editor rows. */
.input-glass.field-sm {
  width: auto;
  padding: 9px 12px;
  border-radius: 10px;
  margin-bottom: 0;
  font-size: 0.85rem;
}
select.input-glass.field-sm {
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
input[type="date"].input-glass.field-sm {
  color-scheme: dark;
}
body.light-mode input[type="date"].input-glass.field-sm {
  color-scheme: light;
}
textarea.input-glass.field-sm {
  width: 100%;
  resize: vertical;
}

/* --- SLIDING IMAGE GALLERY --- */
.gallery-container {
  height: 80vh;
  border-radius: var(--r-panel);
  margin-bottom: 30px;
  position: relative;
  overflow: hidden;
  background: var(--dark-grey);
  border: 1px solid var(--glass-border);
}
/* Shimmer skeletons (loading states) */
@keyframes shimmerBg {
  to {
    background-position: -200% 0;
  }
}
.gallery-container,
.gallery-grid {
  background: linear-gradient(
      100deg,
      var(--dark-grey) 30%,
      rgba(255, 255, 255, 0.06) 50%,
      var(--dark-grey) 70%
    )
    0 0 / 200% 100%;
  animation: shimmerBg 1.6s linear infinite;
}
.skeleton {
  background: linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.04) 30%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0.04) 70%
    )
    0 0 / 200% 100%;
  animation: shimmerBg 1.4s linear infinite;
  border-radius: 10px;
}
.sk-card {
  padding: 15px;
  border-radius: 18px;
}
.sk-img {
  height: clamp(180px, 30vw, 250px);
  border-radius: var(--r-md);
  margin-bottom: 18px;
}
.sk-line {
  height: 14px;
  margin: 10px 0;
}
.sk-line.w60 {
  width: 60%;
}
.sk-line.w40 {
  width: 40%;
}
.gallery-track {
  display: flex;
  height: 100%;
  width: 100%;
  transition: transform 0.6s var(--fluid-bezier);
}
.gallery-slide {
  min-width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(18, 19, 22, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  color: var(--text-light);
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
  transition:
    background 0.3s var(--fluid-bezier),
    border-color 0.3s var(--fluid-bezier),
    transform 0.3s var(--spring),
    box-shadow 0.3s var(--fluid-bezier);
}
@media (hover: hover) {
  .gallery-nav:hover {
    background: rgba(18, 19, 22, 0.8);
    border-color: var(--text-light);
    transform: translateY(-50%) scale(1.06);
    box-shadow: var(--shadow-soft);
  }
}
.gallery-nav:active {
  transform: translateY(-50%) scale(0.96);
}
.gallery-nav.prev {
  left: 20px;
}
.gallery-nav.next {
  right: 20px;
}
/* Photos open full-screen on click. */
.gallery-slide {
  cursor: zoom-in;
}

/* --- FULL-SCREEN PHOTO LIGHTBOX --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(8, 9, 11, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox.open {
  display: flex;
  animation: fluidFadeIn 0.3s var(--fluid-bezier);
}
.lightbox-stage {
  max-width: 92vw;
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-stage img {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  object-fit: contain;
}
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-border);
  color: var(--text-light);
  font-size: 1.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.25s var(--fluid-bezier),
    border-color 0.25s var(--fluid-bezier),
    transform 0.25s var(--spring),
    box-shadow 0.25s var(--fluid-bezier);
}
@media (hover: hover) {
  .lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-50%) scale(1.06);
    box-shadow: var(--shadow-soft);
  }
}
.lightbox-nav:active {
  transform: translateY(-50%) scale(0.96);
}
.lightbox-nav.prev {
  left: 18px;
}
.lightbox-nav.next {
  right: 18px;
}
.lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--glass-border);
  color: var(--text-light);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}
.lightbox-counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-muted);
  font-size: 0.85rem;
  letter-spacing: 1px;
}
@media (max-width: 640px) {
  .lightbox-nav {
    width: 46px;
    height: 46px;
  }
  .lightbox-nav.prev {
    left: 8px;
  }
  .lightbox-nav.next {
    right: 8px;
  }
}

/* --- DASHBOARD UI --- */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 20px;
}
@media (max-width: 640px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .dashboard-header > div:first-child {
    width: 100%;
  }
  .dashboard-header .action-menu {
    width: 100%;
  }
  .dashboard-header .action-dd-toggle {
    width: 100%;
    text-align: center;
  }
  .dashboard-header .lead {
    white-space: normal;
  }
}
.dashboard-card {
  text-align: center;
  padding: 40px 20px;
}
.dashboard-card h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin-bottom: 15px;
}
.dashboard-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 25px;
  min-height: 40px;
}
.stat-number {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--text-light);
  margin-bottom: 10px;
  font-family: var(--font-serif);
}

/* --- CALENDAR MODULE --- */
.cal-header-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 20px;
  gap: 15px;
}
.cal-header-bar .cal-month-nav {
  grid-column: 2;
}
.cal-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.cal-add-btn {
  padding: 12px 22px;
  font-size: 0.75rem;
}
.cal-month-nav {
  display: flex;
  gap: 25px;
  align-items: center;
  justify-content: center;
}
.cal-month-nav button {
  background: transparent;
  border: none;
  color: var(--text-light);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.3s var(--fluid-bezier);
}
.cal-month-nav button:hover {
  color: var(--glass-highlight);
}
.cal-month-title {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 4vw, 2rem);
  width: clamp(160px, 40vw, 240px);
  text-align: center;
  white-space: nowrap; /* "September 2026" must never wrap under the arrows */
}

/* Property legend */
.cal-legend {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}
.cal-updated {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.cal-refresh-btn {
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: 50%;
}
.cal-refresh-btn .ic {
  width: 15px;
  height: 15px;
}
/* When there's nothing to say (recent sync) the text is empty — don't let the
   flex gap leave a phantom offset; the lone refresh icon just centres. */
.cal-updated:has(#cal-updated-text:empty) {
  gap: 0;
}
.cal-refresh-btn:hover {
  color: var(--text-light);
  border-color: var(--glass-highlight);
  background: var(--glass-hover);
}
.cal-refresh-btn.syncing {
  opacity: 0.6;
  pointer-events: none;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}
.legend-swatch {
  width: 16px;
  height: 16px;
  border-radius: 5px;
}
.swatch-21a {
  background: var(--prop-21a-bg);
  border: 1px solid var(--prop-21a-border);
}
.swatch-jollyboat {
  background: var(--prop-jollyboat-bg);
  border: 1px solid var(--prop-jollyboat-border);
}
.swatch-pimpernel {
  background: var(--prop-pimpernel-bg);
  border: 1px solid var(--prop-pimpernel-border);
}

.cal-panel {
  padding: 25px;
}
/* iOS-Calendar-style month grid: borderless cells, thin week separators,
           dimmed weekend numbers, a filled "today" circle, clean event pills. */








/* Stacked booking pills inside each day */

/* Calendar pills are a read-only overview (no click affordance) — bookings
   are opened from the Bookings dashboard / search, external blocks from the
   Bookings page's External section. */



@media (max-width: 480px) {
  
  
}
.tl-bar.bar-21a {
  background: var(--prop-21a-bg);
  border-left-color: var(--prop-21a);
}
.tl-bar.bar-jollyboat {
  background: var(--prop-jollyboat-bg);
  border-left-color: var(--prop-jollyboat);
}
.tl-bar.bar-pimpernel {
  background: var(--prop-pimpernel-bg);
  border-left-color: var(--prop-pimpernel);
}

/* External (Airbnb/Vrbo) imported blocks: keep the property colour but add
           diagonal stripes + a dashed edge so they read as "taken elsewhere". */


.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 30px;
  margin-top: 5px;
}

/* --- PRICE BREAKDOWN --- */
.price-box {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 20px;
}
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.price-row span:last-child {
  color: var(--text-light);
}
.price-row.total {
  border-top: 1px solid var(--glass-border);
  padding-top: 12px;
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 1.05rem;
}
.price-row.total span {
  color: var(--text-light);
  font-weight: 600;
}
.price-row.total .price-amount {
  font-family: var(--font-serif);
  font-size: 1.5rem;
}
/* Custom-booking review summary (overview modal) */
.ov-card {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 14px 18px;
}
.ov-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: 0.9rem;
  padding: 7px 0;
  border-bottom: 1px solid var(--glass-border);
}
.ov-row:last-child {
  border-bottom: none;
}
.ov-k {
  color: var(--text-muted);
  flex: 0 0 auto;
}
.ov-v {
  color: var(--text-light);
  text-align: right;
  word-break: break-word;
}
.booking-detail-item {
  margin-bottom: 15px;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 15px;
}
.booking-detail-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}
.booking-detail-value {
  font-size: 1.1rem;
  color: var(--text-light);
}
.prop-tag {
  display: inline-block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.tag-21a {
  background: var(--prop-21a-bg);
  color: #fff;
  border: 1px solid var(--prop-21a-border);
}
.tag-jollyboat {
  background: var(--prop-jollyboat-bg);
  color: #fff;
  border: 1px solid var(--prop-jollyboat-border);
}
.tag-pimpernel {
  background: var(--prop-pimpernel-bg);
  color: #fff;
  border: 1px solid var(--prop-pimpernel-border);
}

/* --- INBOX STRIP (top of unified back office) --- */
/* Back-office layout: calendar (left) + enquiries sidebar (right) */
.bo-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: start;
}

.bo-sidebar {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.inbox-strip {
  padding: 0;
  overflow: hidden;
}
.inbox-strip:hover {
  transform: none;
} /* it's a container, don't lift like a card */
.inbox-strip-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  cursor: pointer;
  user-select: none;
}
.inbox-strip-head h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 12px;
}
.inbox-badge {
  background: var(--warn);
  color: #1a1a1a;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  min-width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}
.inbox-badge.zero {
  background: rgba(76, 175, 80, 0.3);
  color: var(--text-light);
  border: 1px solid var(--booked-border);
}
.inbox-strip-chevron {
  font-size: 1.2rem;
  color: var(--text-muted);
  transition: transform 0.4s var(--fluid-bezier);
}
.inbox-strip.collapsed .inbox-strip-chevron {
  transform: rotate(-90deg);
}
.inbox-strip-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 24px 24px 24px;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}
.inbox-strip.collapsed .inbox-strip-body {
  display: none;
}

/* --- Messaging (owner ↔ guest chat) --- */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px;
}
/* Bottom-anchor short threads (auto margin on the first bubble) so the
           conversation hugs the composer like a real messaging app, while long
           threads still scroll normally. */
.chat-thread > :first-child {
  margin-top: auto;
}
.chat-msg {
  max-width: 82%;
  padding: 9px 13px;
  border-radius: var(--r-md);
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chat-msg.them {
  align-self: flex-start;
  background: var(--glass-hover);
  border: 1px solid var(--glass-border);
  border-bottom-left-radius: 5px;
}
.chat-msg.me {
  align-self: flex-end;
  background: rgba(214, 167, 133, 0.92);
  color: #1a191b;
  border-bottom-right-radius: 5px;
}
.chat-meta {
  font-size: 0.64rem;
  opacity: 0.7;
  margin-top: 4px;
}
/* Read receipt on the owner's latest reply: muted "Sent" until the guest opens
   the thread, then green "Read". */
.chat-receipt {
  font-weight: 600;
  white-space: nowrap;
}
.chat-receipt.seen {
  color: var(--ok);
  opacity: 0.95;
}
/* Live "typing…" bubble (three bouncing dots), styled like a received message. */
.chat-typing {
  align-self: flex-start;
  display: inline-flex;
  gap: 4px;
  align-items: center;
  max-width: 82%;
  padding: 12px 14px;
  background: var(--glass-hover);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  border-bottom-left-radius: 5px;
}
.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: chatTypingDot 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) {
  animation-delay: 0.18s;
}
.chat-typing span:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes chatTypingDot {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .chat-typing span {
    animation: none;
    opacity: 0.6;
  }
}
.chat-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  padding: 18px 6px;
}
/* Empty-thread greeting: crown avatar + a host-style bubble */
.chat-hello {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  padding: 6px 2px;
}
.chat-hello .chat-msg.them {
  max-width: 100%;
}
.chat-hello-ava {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  background: rgba(214, 167, 133, 0.14);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-hello-ava img {
  width: 19px;
  height: 19px;
  display: block;
}
.chat-hello-note {
  font-size: 0.68rem;
  color: var(--text-muted);
  margin: 6px 0 0 4px;
}
/* Header identity: crown avatar + green presence dot */
.chat-head-ava {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(214, 167, 133, 0.12);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-head-ava img {
  width: 24px;
  height: 24px;
  display: block;
}
.chat-presence-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 6px rgba(76, 175, 80, 0.7);
  margin-right: 6px;
  vertical-align: 1px;
}
/* "So we can reply" identity card (anonymous visitors) */
.chat-intro {
  margin: 10px 14px 0;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
}
.chat-intro-label {
  font-size: 0.66rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.chat-intro-fields {
  display: grid;
  gap: 8px;
}
.chat-intro-fields .input-glass {
  margin: 0;
}
.chat-composer {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: flex-end;
}
.chat-composer textarea {
  flex: 1;
  min-width: 0; /* let it shrink instead of forcing the composer wider than the screen */
  resize: none;
  min-height: 46px;
  max-height: 120px;
  margin: 0;
  border-radius: var(--r-lg);
}
/* Owner reply modal: keep it inside the screen. The box is a flex column capped to
   the *visible* viewport (dvh excludes the iOS toolbar so the composer isn't cut
   off); only the thread scrolls, the composer stays pinned, and nothing can push
   the layout sideways. */
#messages-modal .modal-box {
  display: flex;
  flex-direction: column;
  max-height: 90dvh;
  overflow: hidden;
}
#messages-modal .modal-box > * {
  flex-shrink: 0;
}
#messages-modal .msg-ctx {
  max-height: 34vh;
  overflow-y: auto;
}
#messages-modal .chat-thread {
  flex: 1 1 auto;
  max-height: none;
  min-height: 90px;
}
/* Round accent send button (matches the chat bubble FAB language) */
.chat-send {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid var(--glass-highlight);
  background: rgba(214, 167, 133, 0.95);
  color: #1a191b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.2s var(--spring),
    filter 0.2s var(--fluid-bezier);
}
.chat-send svg {
  width: 20px;
  height: 20px;
}
.chat-send:hover,
.chat-send:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.chat-send:active {
  transform: scale(0.94);
}
/* Attach-a-photo button (paperclip) — quiet, sits left of the composer */
.chat-attach-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid var(--glass-border);
  background: var(--glass-hover);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.2s var(--fluid-bezier),
    background 0.2s var(--fluid-bezier),
    transform 0.2s var(--spring);
}
.chat-attach-btn svg {
  width: 19px;
  height: 19px;
}
.chat-attach-btn:hover,
.chat-attach-btn:focus-visible {
  color: var(--text-light);
  transform: translateY(-1px);
}
.chat-attach-btn:active {
  transform: scale(0.94);
}
.chat-attach-btn.busy {
  opacity: 0.5;
  pointer-events: none;
}
/* Image in a chat bubble. An explicit width (not just max-width) lets the flex
   bubble shrink to hug the photo instead of staying full-width with dead space;
   max-width:100% keeps it inside a narrow bubble/screen. */
.chat-attach-link {
  display: block;
}
.chat-msg .chat-attach-link {
  margin-bottom: 6px;
}
.chat-attach {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  cursor: zoom-in;
}
/* When a bubble is image-only, tighten the padding around it */
.chat-msg-img {
  padding: 5px;
}
.chat-msg-img .chat-attach-link {
  margin-bottom: 3px;
}
.chat-msg-img .chat-meta {
  padding: 0 5px 2px;
}
/* "Photo attached" preview chip above the composer, with a remove ✕ */
.chat-attach-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 7px 10px;
  background: var(--glass-hover);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  font-size: 0.8rem;
  color: var(--text-muted);
}
.chat-attach-preview img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--r-xs, 8px);
  flex-shrink: 0;
}
.chat-attach-preview span {
  flex: 1;
}
.chat-attach-x {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.chat-attach-x:hover {
  color: var(--danger);
  border-color: var(--danger);
}
/* Quick-reply chips: one tidy swipeable row (no ragged wrapping) */
.chat-quick {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  padding: 10px 14px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chat-quick::-webkit-scrollbar {
  display: none;
}
.chat-chip {
  font-size: 0.76rem;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--text-light);
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition:
    background 0.2s,
    border-color 0.2s;
}
.chat-chip:hover,
.chat-chip:focus-visible {
  background: var(--glass-hover);
  border-color: var(--text-muted);
}
.chat-chip-issue {
  color: var(--warn-text);
  border-color: rgba(255, 167, 38, 0.4);
}
.chat-chip-avail {
  color: var(--ok-text);
  border-color: rgba(129, 199, 132, 0.4);
}
/* In-chat assistant bubble (instant FAQ answers + live availability) */
.chat-bot {
  align-self: flex-start;
  max-width: 90%;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 8px 14px;
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.45;
}
.chat-bot .cb-meta {
  font-size: 0.62rem;
  color: var(--text-muted);
  margin-top: 7px;
}
.chat-bot select.input-glass,
.chat-bot input.input-glass {
  margin: 6px 0;
}
.chat-bot-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 9px;
}
.chat-bot-actions .btn-glass {
  font-size: 0.76rem;
  padding: 7px 14px;
  width: auto;
}
/* Trip-planner interest chips (toggle) */
.trip-interests {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.trip-chip {
  font-size: 0.8rem;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--text-light);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.trip-chip:hover {
  background: var(--glass-hover);
}
.trip-chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #1a191b;
  font-weight: 600;
}
.msg-thread-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 12px 14px;
  color: var(--text-light);
  cursor: pointer;
  transition: background 0.2s var(--fluid-bezier);
}
.msg-thread-row:hover,
.msg-thread-row:focus-visible {
  background: var(--glass-hover);
}
/* Avatar circle (initial), tinted per person so conversations are easy to tell
   apart. Hue comes from an inline --ava-h set by the row template. */
.msg-thread-row .mtr-ava {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
  background: hsl(var(--ava-h, 210) 34% 42%);
}
.msg-thread-row .mtr-main {
  flex: 1;
  min-width: 0;
}
.msg-thread-row .mtr-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.msg-thread-row .mtr-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
}
.msg-thread-row.unread .mtr-name {
  font-weight: 700;
}
.msg-thread-row .mtr-tag {
  font-size: 0.66rem;
  color: var(--text-muted);
  font-weight: 400;
}
.msg-thread-row .mtr-time {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.msg-thread-row .mtr-bot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
}
.msg-thread-row .mtr-last {
  flex: 1;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-thread-row.unread .mtr-last {
  color: var(--text-light);
}
/* In-thread date separator (Today / Yesterday / Wed 3 Jul) */
.chat-daysep {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 2px;
}
.chat-daysep span {
  font-size: 0.68rem;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  background: var(--glass-hover);
  border: 1px solid var(--glass-border);
  padding: 3px 12px;
  border-radius: 999px;
}
/* Collapsible "who is this" details in the reply modal */
.msg-ctx-d {
  font-size: 0.8rem;
}
.msg-ctx-sum {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  color: var(--text-light);
}
.msg-ctx-sum::-webkit-details-marker {
  display: none;
}
.msg-ctx-sum-txt {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-ctx-pill {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent, #d6a785);
  background: rgba(214, 167, 133, 0.14);
  padding: 2px 9px;
  border-radius: 999px;
}
.msg-ctx-caret {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.2s var(--fluid-bezier);
}
.msg-ctx-d[open] .msg-ctx-caret {
  transform: rotate(180deg);
}
.msg-ctx-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--glass-border);
}
/* Automation settings (Instant answers + Away auto-reply) read as tidy cards. */
#chat-answers-editor,
#chat-away-editor {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-panel, 18px);
  padding: 20px 22px;
}
/* Inbox search + "Needs reply" filter chip */
.msg-inbox-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}
.msg-inbox-controls #msg-search {
  flex: 1 1 auto;
  margin: 0;
}
.msg-filter-chip {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.25s var(--fluid-bezier),
    color 0.25s var(--fluid-bezier),
    border-color 0.25s var(--fluid-bezier);
}
.msg-filter-chip:hover {
  color: var(--text-light);
}
/* Archived toggle: subordinate to search — muted, sits at the end of the row. */
.msg-archived-toggle {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  font-size: 0.76rem;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.msg-archived-toggle:hover {
  color: var(--text-light);
  border-color: var(--glass-highlight);
}
.msg-filter-chip.on {
  background: var(--warn);
  border-color: var(--warn);
  color: #1a1a1a;
}
/* "Needs reply" pill on a thread row (last message is the guest's, unanswered) */
.needs-reply-pill {
  display: inline-block;
  vertical-align: middle;
  background: rgba(255, 183, 77, 0.16);
  color: var(--warn);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
}
.msg-noresults {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  padding: 14px 0;
}
/* Admin reply-modal context block (where they came from, location, bookings) */
.msg-ctx {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.msg-ctx:empty {
  display: none;
}
.mc-row {
  display: flex;
  gap: 10px;
  font-size: 0.8rem;
  padding: 3px 0;
}
.mc-row .mc-k {
  color: var(--text-muted);
  min-width: 84px;
  flex-shrink: 0;
}
.mc-row .mc-v {
  color: var(--text-light);
}
/* One-tap booking actions (arrival info / balance link) under a booking row */
.mc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}
.mc-actions .btn-sm {
  font-size: 0.72rem;
}

/* "Resume your enquiry" chip (bottom-left, opposite the chat bubble) */
.enquiry-resume {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 1395;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: min(320px, calc(100vw - 110px));
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--accent-soft);
  border-radius: var(--r-pill);
  color: var(--text-light);
  padding: 10px 12px 10px 16px;
  font-size: 0.8rem;
  cursor: pointer;
  box-shadow: var(--shadow-float);
  transition: transform 0.2s var(--spring);
}
.enquiry-resume:hover {
  transform: translateY(-1px);
}
.enquiry-resume .ic {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0;
}
.enquiry-resume span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.enquiry-resume .er-x {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-size: 0.95rem;
}
.enquiry-resume .er-x:hover {
  background: rgba(255, 255, 255, 0.16);
  color: var(--text-light);
}
body.owner-mode .enquiry-resume {
  display: none !important;
}
/* Mobile shell: sit above the floating dock; cottage page (769-899): above the book bar. */
body.guest-app:not(.owner-mode) .enquiry-resume {
  left: 12px;
  bottom: calc(124px + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 899px) {
  body.book-bar-open:not(.guest-app) .enquiry-resume {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
}
/* Floating chat bubble + widget (public site) */
.chat-fab {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1400;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid var(--glass-highlight);
  background: rgba(214, 167, 133, 0.95);
  color: #1a191b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-float);
  transition:
    transform 0.2s var(--spring),
    opacity 0.25s var(--fluid-bezier);
}
.chat-fab svg {
  width: 26px;
  height: 26px;
}
.chat-fab:hover {
  transform: translateY(-2px) scale(1.04);
}
.chat-fab.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6);
}
body.owner-mode .chat-fab,
body.owner-mode .chat-widget {
  display: none !important;
}
.chat-widget {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1401;
  width: min(380px, calc(100vw - 32px));
  max-height: min(620px, calc(100vh - 90px));
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: rgba(26, 25, 30, 0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-highlight);
  border-radius: var(--r-panel);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.chat-widget.open {
  display: flex;
  animation: fluidFadeIn 0.3s var(--fluid-bezier);
}
.chat-widget-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--glass-border);
}
.chat-widget-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
}
.chat-widget-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.chat-widget .chat-thread {
  flex: 1;
  max-height: none;
  padding: 14px;
}
@media (max-width: 480px) {
  .chat-widget {
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
    max-height: calc(100vh - 80px);
  }
  .chat-fab {
    right: 16px;
    bottom: 16px;
  }
}
/* Cottage page below 900px shows the fixed bottom booking bar and (between
           769–899px, where the guest-app shell doesn't apply) the chat bubble is
           still visible — lift it clear of the bar so they never overlap.
           body.book-bar-open is toggled by nav(). */
@media (max-width: 899px) {
  body.book-bar-open .chat-fab {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  body.book-bar-open .chat-widget {
    bottom: calc(104px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100vh - 200px);
  }
}

/* Enquiry cards stacked in the sidebar */
/* Availability / age chips shown on the enquiry card (free / clash / waiting). */
.avail-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 4px 8px;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  vertical-align: middle;
  border: 1px solid transparent;
}



/* Tappable price on an inbox enquiry: opens the agreed-price form. Styled as
   the text it replaces (est. £x) with a pencil, so the line stays glanceable. */



/* Glanceable booking status strip (details modal): payment / deposit / arrival. */

.bk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.bk-chip .bk-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.bk-chip.ok {
  background: rgba(76, 175, 80, 0.13);
  color: var(--ok);
  border-color: rgba(76, 175, 80, 0.28);
}
.bk-chip.warn {
  background: rgba(255, 167, 38, 0.14);
  color: var(--warn);
  border-color: rgba(255, 167, 38, 0.32);
}
.bk-chip.danger {
  background: rgba(229, 115, 115, 0.13);
  color: var(--danger);
  border-color: rgba(229, 115, 115, 0.3);
}
/* Per-booking "Emails sent" log (Bookings page). */
.bk-email-log {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--glass-border);
  font-size: 0.82rem;
}
.bk-email-log-title {
  display: block;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.bk-email-log-empty {
  color: var(--text-muted);
}
.bk-email-log-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.bk-email-log-what {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-light);
}
.bk-email-log-what .ic {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.bk-email-log-when {
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Expandable free-text message: reveals the subject + body that was sent. */
.bk-email-log-item > summary {
  list-style: none;
  cursor: pointer;
}
.bk-email-log-item > summary::-webkit-details-marker {
  display: none;
}
.bk-email-log-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Explicit "Show email" / "Hide email" button (clearer than a bare chevron).
   Native <details> toggles it; the label swaps via [open]. */
.bk-email-log-toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill, 999px);
  color: var(--text-light);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s var(--fluid-bezier, ease), border-color 0.15s var(--fluid-bezier, ease);
}
.bk-email-log-item > summary:hover .bk-email-log-toggle {
  background: var(--glass-hover, rgba(255, 255, 255, 0.06));
  border-color: var(--text-muted);
}
.bk-email-log-toggle::after {
  content: 'Show email';
}
.bk-email-log-item[open] > summary .bk-email-log-toggle::after {
  content: 'Hide email';
}
/* Chosen-attachment chips in the email composer. */
.compose-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill, 999px);
  font-size: 0.78rem;
  color: var(--text-light);
  max-width: 100%;
}
.compose-attach-chip button {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.compose-attach-chip button:hover {
  color: var(--danger);
}
/* "Show email" button on templated log rows (opens a regenerated preview). */
.bk-email-log-view {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill, 999px);
  background: transparent;
  color: var(--text-light);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s var(--fluid-bezier, ease), border-color 0.15s var(--fluid-bezier, ease);
}
.bk-email-log-view:hover:not(:disabled) {
  background: var(--glass-hover, rgba(255, 255, 255, 0.06));
  border-color: var(--text-muted);
}
.bk-email-log-view:disabled {
  opacity: 0.6;
  cursor: default;
}
/* Email preview overlay: subject bar + a sandboxed iframe of the email. */
.email-preview-box {
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  max-height: 88vh;
  padding: 0;
  overflow: hidden;
}
.email-preview-subject {
  font-weight: 600;
  color: var(--text-light);
  padding: 18px 48px 14px 20px;
  border-bottom: 1px solid var(--glass-border);
  word-break: break-word;
}
.email-preview-frame {
  flex: 1;
  width: 100%;
  min-height: 50vh;
  border: 0;
  background: #fff;
}
.bk-email-log-subj {
  font-weight: 600;
  color: var(--text-light);
  font-size: 0.82rem;
  margin: 4px 0 2px;
}
.bk-email-log-msg {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 2px 0 8px;
  white-space: normal;
  word-break: break-word;
}
/* Inbox sort control (soonest stay / newest / cottage). */
.inbox-sort {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.inbox-sort-btn {
  font: inherit;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-muted);
  transition: filter var(--fluid-bezier, ease) 0.2s;
}
.inbox-sort-btn.is-on {
  background: rgba(199, 154, 100, 0.16);
  color: var(--accent);
  border-color: rgba(199, 154, 100, 0.3);
}
/* "Returning guest" pill on an enquiry whose email matches past stays. */
.repeat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: rgba(76, 175, 80, 0.13);
  color: var(--ok);
  border: 1px solid rgba(76, 175, 80, 0.28);
}
.repeat-badge .ic {
  width: 12px;
  height: 12px;
}
/* Compose-email sheet: key enquiry details pinned above the message box. */
.enq-ctx {
  background: rgba(128, 128, 128, 0.08);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin: 0 0 18px;
}
.enq-ctx-who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}
.enq-ctx-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  background: rgba(199, 154, 100, 0.18);
  color: var(--accent);
  border: 1px solid rgba(199, 154, 100, 0.3);
}
.enq-ctx-name {
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: anywhere;
}
.enq-ctx-row {
  display: flex;
  align-items: flex-start;
  font-size: 0.85rem;
  padding: 3px 0;
}
.enq-ctx-txt {
  flex: 1;
  min-width: 0; /* wrapped lines stay aligned after the icon column */
}
.enq-ctx-ic {
  width: 22px;
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--text-muted);
  display: inline-flex;
}
.enq-ctx-ic .ic {
  width: 14px;
  height: 14px;
}
.enq-ctx-mut {
  color: var(--text-muted);
  font-size: 0.8rem;
}
.enq-ctx-quote {
  margin-top: 10px;
  padding: 8px 12px;
  border-left: 2px solid var(--accent);
  background: rgba(128, 128, 128, 0.06);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--text-muted);
  max-height: 84px;
  overflow-y: auto;
}
.btn-sm {
  padding: 8px 14px;
  border-radius: 18px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-light);
  white-space: nowrap;
  text-decoration: none;
}
.btn-sm:hover {
  transform: translateY(-2px);
}
/* Read-only availability calendar on cottage pages */
.avail-cal {
  margin-top: 28px;
  padding: 20px 22px;
  border-radius: var(--r-lg);
}
/* On desktop the calendar is moved inside the reserve card (just above
           "Enquire now"); strip its own panel styling so it blends into the card. */
@media (min-width: 900px) {
  #prop-avail-cal.in-reserve {
    margin: 0 0 20px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
  }
  #prop-avail-cal.in-reserve .avail-cal-grid {
    gap: 3px;
  }
}
.avail-nav {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-light);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  transition:
    background 0.2s var(--fluid-bezier),
    transform 0.15s var(--fluid-bezier);
}
.avail-nav:active {
  transform: scale(0.9);
}
.avail-nav:hover {
  background: var(--glass-hover);
}
.avail-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.avail-cal-grid .avail-dow {
  text-align: center;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  padding-bottom: 4px;
}
.avail-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  border-radius: 9px;
  color: var(--text-light);
  line-height: 1.04;
}
.avail-cell .ac-price {
  font-size: 0.54rem;
  color: var(--text-muted);
  margin-top: 1px;
  letter-spacing: -0.2px;
}
.avail-cell.empty {
  background: transparent;
}
.avail-cell.free {
  background: rgba(76, 175, 80, 0.12);
}
.avail-cell.taken {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  text-decoration: line-through;
}
.avail-cell.past {
  opacity: 0.3;
}
.avail-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 5px;
}
.avail-dot.avail-free {
  background: rgba(76, 175, 80, 0.6);
}
.avail-dot.avail-taken {
  background: rgba(255, 255, 255, 0.18);
}
/* SEO content: present in the HTML for search engines, off-screen for users.
           (Off-screen rather than display:none so crawlers still weight it.) */
.seo-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.review-source {
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.8;
}
/* Owner summary stat bar (back office) */
/* "Today / needs doing" panel (back office) */

.today-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 14px 16px;
}
.today-card-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.today-card-value {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  color: var(--text-light);
  line-height: 1.1;
  margin: 2px 0 6px;
}
.today-card-list {
  font-size: 0.82rem;
  color: var(--text-light);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.today-card-list .prop-tag {
  margin-right: 4px;
}
/* Back-office booking search */
.bo-search {
  max-width: 720px;
  margin: 0 0 22px;
}
/* Collapsed to a slim pill; the full input appears when .open (toggleBoSearch). */






/* "Waiting for approval" reads as a slim full-width banner rather than an
           orphan card leaving two empty grid cells (it appears only when needed). */
#today-approve-card {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  border-color: rgba(255, 167, 38, 0.35);
}
#today-approve-card .today-card-label {
  margin: 0;
  flex-shrink: 0;
}
#today-approve-card .today-card-value {
  margin: 0;
}
#today-approve-card .today-card-list {
  display: flex;
  gap: 8px 22px;
  flex-wrap: wrap;
  margin: 0 0 0 auto;
}
/* Per-type links inside the "Waiting for approval" card — each pending type
   (reviews / photos / experiences) navigates to its own queue. */

/* Waitlist modal date pair: date inputs have an intrinsic min-width and flex
   items default to min-width:auto, so without these the check-out field
   punches out of the modal on phones. min-width:0 lets them shrink; the
   1 1 140px basis wraps them into a stack on ultra-narrow screens. */
.wl-dates {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.wl-dates > div {
  flex: 1 1 140px;
  min-width: 0;
}
.wl-dates input[type="date"] {
  width: 100%;
  min-width: 0;
  /* iOS Safari sizes date inputs from their shadow DOM and ignores
     min-width:0 — strip the native appearance so the box obeys the layout,
     and keep the tap-target height that appearance:none would collapse. */
  -webkit-appearance: none;
  appearance: none;
  min-height: 50px;
  max-width: 100%;
}
/* Phones: two side-by-side native date pickers never fit comfortably — stack
   them like the name/email fields below. */
@media (max-width: 480px) {
  .wl-dates {
    flex-direction: column;
    gap: 0;
  }
}
/* Cron dead-man's-switch banner (dashboard) */
.cron-alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 22px;
  padding: 16px 18px;
  background: rgba(229, 115, 115, 0.1);
  border: 1px solid var(--danger);
  border-radius: var(--r-lg);
  color: var(--text-light);
}
.cron-alert .ic {
  width: 22px;
  height: 22px;
  color: var(--danger);
  flex-shrink: 0;
  margin-top: 1px;
}
.cron-alert code {
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: 0.9em;
}
/* Always-on automation health pill (dashboard) — green healthy / amber quiet. */
.cron-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 550;
  cursor: pointer;
  background: rgba(76, 175, 80, 0.12);
  color: var(--ok);
  border-color: rgba(76, 175, 80, 0.3);
  transition: filter var(--fluid-bezier, ease) 0.2s;
}
.cron-pill:hover {
  filter: brightness(1.06);
}
.cron-pill.warn {
  background: rgba(255, 167, 38, 0.14);
  color: var(--warn);
  border-color: rgba(255, 167, 38, 0.35);
}
/* Explicit healthy state (same as the base green) + a red hard-failure state. */
.cron-pill.ok {
  background: rgba(76, 175, 80, 0.12);
  color: var(--ok);
  border-color: rgba(76, 175, 80, 0.3);
}
.cron-pill.danger {
  background: rgba(229, 57, 53, 0.14);
  color: var(--danger);
  border-color: rgba(229, 57, 53, 0.38);
}
.cron-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
/* Recent-activity feed rows (dashboard) */
.act-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--glass-border);
  font-size: 0.85rem;
}
.act-row:last-child {
  border-bottom: none;
}
.act-ic {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
}
.act-ic .ic {
  width: 15px;
  height: 15px;
  color: var(--text-muted);
}
.act-label {
  color: var(--text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.act-detail {
  color: var(--text-muted);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.act-when {
  color: var(--text-muted);
  font-size: 0.74rem;
  margin-left: auto;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .act-detail {
    display: none;
  }
}
/* Activity log page (view-activity-log) */
.act-full-link {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--accent);
  cursor: pointer;
}
.act-full-link:hover {
  text-decoration: underline;
}
.act-log-controls {
  margin: 8px 0 18px;
}
.act-log-search {
  width: 100%;
  max-width: 720px;
  margin: 0 0 14px;
}
.act-log-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.act-log-chip {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.18s var(--fluid-bezier), color 0.18s var(--fluid-bezier), border-color 0.18s var(--fluid-bezier);
}
.act-log-chip:hover {
  color: var(--text-light);
}
.act-log-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.act-actor {
  font-size: 0.7rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  flex-shrink: 0;
}
.act-log-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 30px 4px;
  text-align: center;
}
/* Full activity-log rows: a two-line list item — the label (which carries the
   meaning) wraps freely on top, with a muted meta line (detail · who · when)
   beneath. The dashboard mini-feed keeps its single-line ellipsis layout. */
.act-log-row {
  align-items: flex-start;
}
.act-log-row .act-ic {
  margin-top: 1px;
}
.act-log-row .act-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.act-log-row .act-line1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.act-log-row .act-line1 .act-label {
  white-space: normal;
  color: var(--text-light);
}
.act-log-row .act-line2 {
  display: flex;
  align-items: center;
  gap: 4px 10px;
  flex-wrap: wrap;
  font-size: 0.74rem;
  color: var(--text-muted);
}
.act-log-row .act-when {
  margin-left: 0;
}
/* Severity: warnings and action-needed rows in the activity log */
.act-row--warn {
  box-shadow: inset 3px 0 0 var(--warn);
  padding-left: 8px;
}
.act-row--action {
  box-shadow: inset 3px 0 0 var(--danger);
  padding-left: 8px;
}
.act-sev {
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);
  padding: 2px 8px;
  flex-shrink: 0;
}
.act-sev--warn {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 16%, transparent);
}
.act-sev--action {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 16%, transparent);
}
/* Season grid (Settings → Seasonal rates — all cottages) */
/* Occupancy heatmap (owner dashboard): a compact booked/free strip per cottage */


.occ-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 9px;
}
.occ-title {
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.occ-pct {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-light);
}
.occ-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.occ-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.occ-name {
  flex: 0 0 54px;
  text-align: right;
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.occ-cells {
  display: flex;
  gap: 2px;
}
.occ-cell {
  flex: 0 0 auto;
  width: 9px;
  height: 16px;
  border-radius: 2px;
  display: inline-block;
}
/* On phones/tablets the fixed 30 cells run a few px past the edge (a stray
   sideways scroll). Let them flex-fill the row so all 30 days always fit the
   screen; desktop keeps the fixed 9px look. */
@media (max-width: 640px) {
  .occ-cells {
    flex: 1 1 auto;
    min-width: 0;
  }
  .occ-cell {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}
.occ-free {
  background: rgba(255, 255, 255, 0.06);
}
.occ-booked {
  background: var(--accent, #d6a785);
}
.occ-block {
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.13),
    rgba(255, 255, 255, 0.13) 2px,
    rgba(255, 255, 255, 0.04) 2px,
    rgba(255, 255, 255, 0.04) 4px
  );
}
.occ-legend {
  display: flex;
  gap: 16px;
  margin-top: 10px;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.occ-legend span {
  display: inline-flex;
  align-items: center;
}
.occ-legend i {
  width: 12px;
  height: 12px;
  margin-right: 5px;
}
.sg-table {
  border-collapse: collapse;
  /* Size to the columns (dates + a cell per cottage) and scroll inside the
     overflow-x wrapper, rather than stretching a few cells apart when there are
     only one or two rows. */
  width: auto;
  min-width: max-content;
}
.sg-table th {
  text-align: left;
  font-size: 0.68rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 4px 6px 8px;
}
.sg-table td {
  padding: 4px 6px;
  vertical-align: middle;
}
.sg-table .input-glass {
  margin: 0;
}
.sg-table .sg-rate {
  width: 84px;
}
.bo-search-empty {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding: 10px 2px;
}


/* Apple-style grouped Settings index */
.settings-index {
  max-width: 640px;
}
/* Area overview — the "important parts first" summary that leads Cottages &
   Marketing (occupancy / key numbers) before the detail sub-folders. */
.area-ov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: var(--space-3);
}
.area-ov-card {
  display: block;
  width: 100%;
  color: var(--text-light);
  transition:
    background 0.4s var(--fluid-bezier),
    transform 0.4s var(--spring);
}
@media (hover: hover) {
  .area-ov-card:hover {
    background: var(--glass-hover);
    transform: translateY(-2px);
  }
}
/* "Recent" chips + empty-search note above the index */
.settings-recent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 640px;
  margin: 2px 0 14px;
}
.settings-recent-label {
  font-size: 0.66rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 2px;
}
.settings-recent-chip {
  font-size: 0.78rem;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--text-light);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition:
    background 0.2s var(--fluid-bezier),
    border-color 0.2s var(--fluid-bezier);
}
.settings-recent-chip:hover,
.settings-recent-chip:focus-visible {
  background: var(--glass-hover);
  border-color: var(--text-muted);
}
.settings-noresults {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 4px 0 14px;
}
/* Keep every Settings folder, sub-folder and drill-down on the same 640px
           content column as the folder index, so navigating in/out stays aligned
           and every panel's content lines up regardless of what it renders. */
.settings-sec {
  max-width: 640px;
}
/* The all-cottages season grid needs the row width (label + dates + one
           column per cottage) — let just this panel use the page. */
#sec-seasongrid {
  max-width: 1000px;
}
#accom-detail,
#calendar-detail,
#cancel-detail {
  max-width: 640px;
}
.settings-group {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 22px;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid var(--glass-border);
  color: var(--text-light);
  padding: 15px 18px;
  cursor: pointer;
  transition: background 0.2s;
}
.settings-row:first-child {
  border-top: none;
}
.settings-row:hover,
.settings-row:focus-visible {
  background: var(--glass-hover);
}
.settings-row-ic {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-light);
}
.settings-row-ic .ic {
  width: 22px;
  height: 22px;
}
.settings-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.settings-row-label {
  font-size: 1rem;
}
.settings-row-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 1px;
}
.settings-row-chev {
  color: var(--text-muted);
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
}
.settings-row-logout,
.settings-row-logout .settings-row-ic {
  color: #e5705c;
}
.settings-row-logout:hover,
.settings-row-logout:focus-visible {
  background: rgba(229, 83, 60, 0.14);
}
#settings-panel .accounts-stat {
  margin-bottom: 0;
}
/* Cancellation-policy picker: selectable cards (one per cottage) */
.cancel-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
}
.cancel-card {
  position: relative;
  text-align: left;
  cursor: pointer;
  width: 100%;
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  border-radius: 18px;
  padding: 18px 20px;
  color: var(--text-light);
  transition:
    border-color 0.25s var(--fluid-bezier),
    background 0.25s var(--fluid-bezier),
    transform 0.2s var(--fluid-bezier);
}
.cancel-card:hover {
  background: var(--glass-hover);
  border-color: var(--text-muted);
}
.cancel-card.selected {
  border-color: var(--glass-highlight);
  background: var(--glass-hover);
}
.cancel-card-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  display: block;
  margin-bottom: 10px;
}
.cancel-card-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cancel-card-points li {
  position: relative;
  padding-left: 16px;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.cancel-card-points li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--text-muted);
}
.cancel-card-check {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--glass-border);
  color: transparent;
  transition: background-color 0.25s var(--fluid-bezier), border-color 0.25s var(--fluid-bezier), color 0.25s var(--fluid-bezier);
}
.cancel-card-check .ic {
  width: 16px;
  height: 16px;
}
.cancel-card.selected .cancel-card-check {
  background: var(--glass-highlight);
  border-color: var(--glass-highlight);
  color: #1a191b;
}

/* Reserve two lines for the label so a wrapping title (e.g. "Arrivals (next 30
   days)") keeps its headline number aligned with the neighbouring card. */

/* Money & income — per-booking payments manager */
.money-row {
  padding: 16px 18px;
  border-radius: var(--r-md);
  margin-bottom: 12px;
}
.money-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.money-status {
  font-size: 0.85rem;
  color: var(--text-light);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.money-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.money-deposit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ---- Bookings dashboard: master–detail split (≥1200px) ----
   Left: the compact bookings index. Right: the SELECTED booking's hub, docked
   (the shared #booking-hub-content node re-parents in). Below 1200px the pane
   hides and the hub opens as its own screen — the phone flow is unchanged. */
#bookings-detail-pane,
#inbox-detail-pane {
  display: none;
}
@media (min-width: 1200px) {
  .bk-split,
  .enq-split {
    display: grid;
    grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
  }
  #bookings-detail-pane,
  #inbox-detail-pane {
    display: block;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    min-width: 0;
    padding-right: 2px;
  }
  /* Inside the pane the hub reads as one column of cards. */
  #bookings-detail-pane .bhub-grid,
  #inbox-detail-pane .bhub-grid {
    grid-template-columns: 1fr;
  }
  #bookings-detail-pane .bhub-head,
  #inbox-detail-pane .bhub-head {
    margin-top: 0;
  }
}
#bookings-detail-empty,
#inbox-detail-empty {
  padding: 40px 24px;
  border-radius: var(--r-panel);
  border: 1px dashed var(--glass-border);
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
}
/* Guest My-Stays header: keep Account & settings + Call to Discuss together
   as one action group (they were separate flex children pushed apart). */
.guest-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Compact index row — the whole row opens the booking hub. Fixed three-line
   anatomy (tag + status chip / name / dates · party) so every row is the same
   shape at every width; each line ellipsises rather than wrapping. */
.bk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 10px;
  padding: 14px 16px;
  border-radius: var(--r-panel);
  color: var(--text-light);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
/* Traffic-light payment edge on every row: red unpaid · amber part · green paid. */
.bk-row.pay-danger {
  border-left: 3px solid var(--danger);
}
.bk-row.pay-warn {
  border-left: 3px solid var(--warn);
}
.bk-row.pay-ok {
  border-left: 3px solid var(--ok);
}
.bk-row.is-open {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
}
.bk-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bk-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bk-row-top .bk-chip {
  flex-shrink: 0;
  white-space: nowrap;
}
.bk-row-top .prop-tag {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bk-row-name {
  font-size: 1rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-row-dates {
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bk-row-arrow {
  color: var(--text-muted);
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ---- Timeline calendar (Today): rows = cottages, days flow across ---- */
/* The timeline's intrinsic width (187 × 38px) must scroll INSIDE its panel,
   never widen the page: kill min-content sizing up the ancestor chain. */
.bo-layout > * {
  min-width: 0;
}
.tl-wrap {
  --tl-day-w: 38px; /* px per day — the lanes' grid columns and the JS scroll maths both read this */
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-sm);
}
.tl-inner {
  display: inline-block;
  min-width: 100%;
}
.tl-row {
  display: flex;
  align-items: stretch;
}
.tl-label {
  position: sticky;
  left: 0;
  z-index: 3;
  flex: 0 0 74px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--dark-grey); /* the page ground — solid so bars slide under it */
  border-right: 1px solid var(--glass-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-lane {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 44px;
  align-items: center;
}
.tl-headrow .tl-lane {
  grid-template-rows: 40px;
}
.tl-day {
  grid-row: 1;
  position: relative;
  text-align: center;
  font-size: 0.66rem;
  color: var(--text-muted);
  padding-top: 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.04);
}
.tl-day i {
  font-style: normal;
  opacity: 0.55;
  margin-right: 2px;
  font-size: 0.58rem;
}
.tl-day b {
  position: absolute;
  top: 0;
  left: 2px;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  color: var(--text-light);
  white-space: nowrap;
}
.tl-day.is-wknd {
  background: rgba(255, 255, 255, 0.025);
}
.tl-day.is-today {
  color: var(--accent);
  font-weight: 700;
}
.tl-cell {
  grid-row: 1;
  height: 100%;
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  cursor: pointer;
}
.tl-cell.is-wknd {
  background: rgba(255, 255, 255, 0.025);
}
.tl-cell.is-today {
  box-shadow: inset 2px 0 0 var(--accent);
}
.tl-cell:hover {
  background: rgba(255, 255, 255, 0.06);
}
.tl-bar {
  grid-row: 1;
  z-index: 2;
  height: 30px;
  /* Noon-to-noon: the grid area includes the check-in AND checkout days; the
     half-day insets make changeover days visibly shared between two stays. */
  margin: 0 calc(var(--tl-day-w, 38px) * 0.5 + 1px);
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-pill);
  border-left: 3px solid;
  font: 600 0.7rem var(--font-sans);
  color: var(--text-light);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.tl-bar.tl-pay-ok {
  border-left-color: var(--ok);
}
.tl-bar.tl-pay-warn {
  border-left-color: var(--warn);
}
.tl-bar.tl-pay-danger {
  border-left-color: var(--danger);
}
.tl-bar.tl-ext {
  /* Neutral grey stripes so the block reads on BOTH themes (white-on-white
     was invisible in light mode). */
  background: repeating-linear-gradient(135deg, rgba(128, 128, 128, 0.14), rgba(128, 128, 128, 0.14) 6px, rgba(128, 128, 128, 0.26) 6px, rgba(128, 128, 128, 0.26) 12px);
  border-left-color: rgba(128, 128, 128, 0.5);
  color: var(--text-muted);
  cursor: default;
}
/* A bar cut off by the timeline window keeps a hard edge on that side. */
.tl-bar.tl-clip-l {
  margin-left: 1px;
}
.tl-bar.tl-clip-r {
  margin-right: 1px;
}
.tl-today-btn {
  margin-left: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-light);
  font: 600 0.7rem var(--font-sans);
  letter-spacing: 0.04em;
  cursor: pointer;
}
/* Phone: denser timeline — slimmer sticky label column + narrower days so more
   of the strip fits on screen, keeping the 44px lane for comfortable taps. */
@media (max-width: 640px) {
  .tl-wrap {
    --tl-day-w: 32px;
  }
  .tl-label {
    flex-basis: 54px;
    padding: 0 6px;
    font-size: 0.68rem;
  }
  .tl-day {
    font-size: 0.62rem;
  }
}

/* ---- Booking hub (view-booking-hub): one screen per booking ---- */
.bhub-head {
  padding: 22px 24px;
  border-radius: var(--r-panel);
  margin-top: 14px;
}
.bhub-head-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.bhub-name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.7rem;
  margin: 8px 0 4px;
}
.bhub-ref {
  margin-left: 8px;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.bhub-sub {
  color: var(--text-muted);
  font-size: 0.9rem;
}
.bhub-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.bhub-changeover {
  margin-top: 10px;
  cursor: pointer;
  border: 1px solid rgba(255, 167, 38, 0.32);
}
/* Journey window: previous (done) › NOW › next — a dynamic three-pill view
   of the booking's stage, instead of the whole strip squeezed in at once. */
.bhub-pipe3 {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
}
.pipe3-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pipe3-cap {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding-left: 6px;
  white-space: nowrap;
}
.pipe3-arrow {
  color: var(--text-muted);
  padding-bottom: 5px;
  flex-shrink: 0;
}
.pipe-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
}
.pipe-step .pipe-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.pipe-step.is-done {
  color: var(--ok);
  background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.26);
}
.pipe-step.is-done .pipe-dot {
  background: var(--ok);
}
.pipe-step.is-now {
  color: var(--warn);
  background: rgba(255, 167, 38, 0.12);
  border-color: rgba(255, 167, 38, 0.3);
}
.pipe-step.is-now .pipe-dot {
  background: var(--warn);
}
/* The single surfaced next action */
.bhub-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: rgba(255, 167, 38, 0.09);
  border: 1px solid rgba(255, 167, 38, 0.26);
  font-size: 0.9rem;
}
.bhub-next.is-clear {
  background: rgba(76, 175, 80, 0.08);
  border-color: rgba(76, 175, 80, 0.22);
  color: var(--text-muted);
}
.bhub-next-btn {
  padding: 10px 20px;
  font-size: 0.8rem;
}
.bhub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0 40px;
  align-items: start;
}
.bhub-card {
  padding: 20px 22px;
  border-radius: var(--r-panel);
  min-width: 0;
}
.bhub-card-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.15rem;
  margin: 0 0 14px;
}
.bhub-btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.bhub-mut {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 8px;
}
.bhub-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 10px 0;
}
.bhub-hist-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--glass-border);
  font-size: 0.82rem;
}
.bhub-hist-row:last-child {
  border-bottom: 0;
}
.bhub-hist-when {
  color: var(--text-muted);
  white-space: nowrap;
}
.bhub-hist-actor {
  color: var(--text-muted);
  font-size: 0.72rem;
}
.bhub-stay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  color: var(--text-light);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
}
#hub-email-log .bk-email-log {
  margin-top: 14px;
  border-top: 0;
  padding-top: 0;
}
@media (max-width: 900px) {
  .bhub-grid {
    grid-template-columns: 1fr;
  }
  .bhub-hist-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
/* Phone: the hub reads top-to-bottom in one clean column — even two-up button
   grids instead of ragged pills, the pipeline as ONE swipeable line instead of
   wrapping with dangling connectors, and tighter card padding. */
@media (max-width: 640px) {
  .bhub-head {
    padding: 18px 16px;
  }
  .bhub-card {
    padding: 16px;
  }
  .bhub-name {
    font-size: 1.45rem;
  }
  .bhub-actions,
  .bhub-btn-row {
    display: grid;
    /* minmax(0,…) lets a column shrink below a long label's natural width */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .bhub-actions .btn-sm,
  .bhub-btn-row .btn-sm {
    width: 100%;
    text-align: center;
    white-space: normal;
  }
  /* Keep the Done › Now › Next window on ONE line (scrolls if ever tight). */
  .bhub-pipe3 {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bhub-pipe3::-webkit-scrollbar {
    display: none;
  }
  .bhub-pipe3 .pipe-step {
    white-space: nowrap;
    padding: 4px 10px;
  }
  .bhub-next {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
  }
  .bhub-next-btn {
    width: 100%;
  }
}

/* ---- Live availability strip in the Add/Edit Booking modal ---- */
#modal-availability {
  margin: 0 0 18px;
}
.mav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.mav-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: var(--text-muted);
}
.mav-key {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  margin-left: 8px;
}
.mav-key.is-booked,
.mav-day.is-booked {
  background: rgba(229, 115, 115, 0.28);
}
.mav-key.is-external,
.mav-day.is-external {
  background: rgba(255, 167, 38, 0.26);
}
.mav-key.is-sel {
  background: rgba(76, 175, 80, 0.3);
}
.mav-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.mav-dow {
  text-align: center;
  font-size: 0.62rem;
  color: var(--text-muted);
  padding: 2px 0;
}
.mav-day {
  text-align: center;
  font-size: 0.68rem;
  padding: 5px 1px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
}
.mav-day.is-sel {
  border-color: rgba(76, 175, 80, 0.55);
  color: var(--text-light);
  background: rgba(76, 175, 80, 0.16);
}
.mav-day.is-sel.is-booked {
  background: rgba(229, 115, 115, 0.45);
  border-color: var(--danger);
  color: #fff;
}
.mav-day.is-sel.is-external {
  background: rgba(255, 167, 38, 0.42);
  border-color: var(--warn);
  color: #fff;
}
.mav-clash {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--warn);
}
.money-deposit strong {
  color: var(--text-light);
}
.money-owed {
  font-size: 0.95rem;
  color: var(--text-light);
  margin: 4px 0 4px;
}
.money-owed strong {
  color: var(--warn);
}
.money-owed.all-paid strong,
.money-owed.all-paid {
  color: var(--ok);
}
.money-row.due-soon {
  border-color: rgba(255, 167, 38, 0.5);
}
/* Recent payments feed */
.feed-list {
  padding: 4px 16px;
  border-radius: var(--r-md);
}
.feed-row {
  display: grid;
  grid-template-columns: 92px auto 1fr auto auto auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--glass-border);
  font-size: 0.86rem;
}
.feed-row:first-child {
  border-top: none;
}
.feed-date {
  color: var(--text-muted);
  font-size: 0.8rem;
}
.feed-who {
  color: var(--text-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.feed-kind {
  color: var(--text-muted);
}
.feed-amt {
  font-weight: 600;
  text-align: right;
}
.feed-status {
  color: var(--text-muted);
  font-size: 0.74rem;
  text-transform: capitalize;
}
.feed-del {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 7px;
  justify-self: end;
}
.feed-del:hover,
.feed-del:focus-visible {
  background: rgba(229, 83, 60, 0.16);
  color: #ff8a78;
}
@media (max-width: 640px) {
  .feed-row {
    grid-template-columns: 1fr auto auto;
    row-gap: 3px;
  }
  .feed-row .prop-tag,
  .feed-row .feed-kind,
  .feed-row .feed-status {
    display: none;
  }
}
.os-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.os-value {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  line-height: 1.1;
}
.os-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.os-value.os-good {
  color: var(--ok);
}
.os-value.os-warn {
  color: var(--warn);
}
/* Infographic dashboard cards */
.os-card {
  display: flex;
  flex-direction: column;
}
/* Dashboard cards that act as shortcuts (tap to open the related tool). */
.os-card.clickable,
.today-card.clickable {
  cursor: pointer;
  transition:
    transform 0.2s var(--fluid-bezier),
    border-color 0.2s var(--fluid-bezier),
    background 0.2s var(--fluid-bezier);
}
.os-card.clickable:hover,
.today-card.clickable:hover,
.os-card.clickable:focus-visible,
.today-card.clickable:focus-visible {
  transform: translateY(-2px);
  border-color: var(--glass-highlight);
  background: var(--glass-hover);
}
.os-card .os-value {
  margin-top: 2px;
}
.os-donut-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.os-donut {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
}
.os-donut-meta {
  min-width: 0;
}
.os-donut-meta .os-value {
  font-size: 1.5rem;
}

.os-bar {
  height: 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-top: 10px;
}
.os-bar > span {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: var(--ok);
  transition: width 0.6s var(--fluid-bezier);
}
/* Desktop polish: on the wide (1500px) back office the dashboard stat cards
           stretch edge-to-edge, leaving the charts thin and lost. Lay both KPI rows
           out as four equal columns that fill the width, give the cards roomier
           proportions, and spread the per-cottage occupancy bars across three columns
           (so the card fills the row instead of floating in the middle). */
@media (min-width: 1024px) {
  
  
  
  .os-card {
    padding: 22px 24px;
  }
  .os-donut {
    width: 72px;
    height: 72px;
  }
  .os-bar {
    height: 9px;
  }
  
  
  
}
/* Tidy action row on guest booking cards */
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.card-actions .btn-sm {
  padding: 10px 18px;
}
@media (max-width: 640px) {
  .card-actions .btn-sm {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }
}
.btn-approve {
  border-color: var(--booked-border);
}
.btn-approve:hover {
  background: var(--ok);
  border-color: var(--ok);
}
.btn-edit:hover {
  background: var(--text-light);
  color: var(--dark-grey);
}
.btn-decline {
  border-color: rgba(229, 57, 53, 0.5);
}
.btn-decline:hover {
  background: #e53935;
  border-color: #e53935;
}
.inbox-empty-inline {
  color: var(--text-muted);
  font-size: 0.88rem;
  padding: 4px 4px 24px 4px;
}

/* Rate editor rows */
.rates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  margin-top: 40px;
}

/* Accounts / financial reporting */
.accounts-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 30px 0;
}
.accounts-stat {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 24px 26px;
}
.accounts-stat .label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.accounts-stat .value {
  font-family: var(--font-serif);
  font-size: 2rem;
  color: var(--text-light);
}
.accounts-stat.headline {
  border-left: 4px solid var(--ok);
}
.accounts-stat.headline .value {
  color: #6fcf73;
}
.accounts-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 0.9rem;
}
.accounts-table th,
.accounts-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--glass-border);
}
.accounts-table th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  font-weight: 600;
}
.accounts-table td.num,
.accounts-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.accounts-table tr:last-child td {
  border-bottom: none;
}
/* Admin mobile polish: let wide tables scroll instead of overflowing, and
           keep money-row controls comfortably tappable. */
@media (max-width: 640px) {
  .accounts-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .money-row-head {
    gap: 6px;
  }
  .today-card-value {
    font-size: 1.6rem;
  }
}
/* ---- Money overview dashboard (graphical landing) ---- */
.money-overview {
  margin-bottom: 22px;
}
.mo-kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.mo-kpi {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 16px 18px;
}
.mo-kpi .mo-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.mo-kpi .mo-value {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  line-height: 1.1;
  margin-top: 4px;
}
.mo-kpi .mo-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 3px;
}
.mo-value.mo-good {
  color: var(--ok);
}
.mo-value.mo-warn {
  color: var(--warn);
}
.mo-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 16px 18px;
  margin-top: 12px;
}
.mo-card-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
/* Year-on-year card */
.yoy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 8px;
}
.yoy-metric {
  min-width: 0;
}
.yoy-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.yoy-now {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.15;
  margin: 2px 0;
}
.yoy-cmp {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.yoy-cmp .mo-good {
  color: #4caf50;
  font-weight: 600;
}
.yoy-cmp .mo-warn {
  color: var(--warn-text);
  font-weight: 600;
}
/* The lead KPI (Outstanding) carries a subtle accent + its own chase CTA. */
.mo-kpi-lead {
  border-color: rgba(255, 167, 38, 0.35);
  background: rgba(255, 167, 38, 0.06);
}
.mo-kpi-cta {
  margin-top: 10px;
}
/* Retrospective charts tuck under a disclosure so the landing leads with the
   actionable KPIs, not a wall of history. */
.mo-trends {
  margin-top: 14px;
}
.mo-trends > summary,
.exp-add-details > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  -webkit-tap-highlight-color: transparent;
}
.mo-trends > summary::-webkit-details-marker,
.exp-add-details > summary::-webkit-details-marker {
  display: none;
}
.mo-trends > summary::after,
.exp-add-details > summary::after {
  content: "▾";
  font-size: 0.7rem;
  transition: transform 0.2s var(--fluid-bezier);
}
.mo-trends[open] > summary::after,
.exp-add-details[open] > summary::after {
  transform: rotate(180deg);
}
@media (min-width: 769px) {
  .mo-kpis {
    grid-template-columns: repeat(4, 1fr);
  }
  .mo-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }
  .mo-grid2 .mo-card {
    margin-top: 12px;
  }
}
/* Analytics panel: sticky period bar, segmented control, group headings */
.ana-pick {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 0 12px;
  margin-bottom: 4px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--glass-border);
}
.ana-seg {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
.ana-seg-btn {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  transition:
    background 0.2s var(--fluid-bezier),
    color 0.2s var(--fluid-bezier);
}
.ana-seg-btn.on {
  background: var(--accent);
  color: #1b1208;
  font-weight: 500;
}
.ana-export {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-light);
  margin-left: auto;
}
.ana-group-title {
  font-family: var(--font-serif);
  font-size: 1.18rem;
  color: var(--text-light);
  margin: 24px 0 2px;
}
.ana-group-title:first-of-type {
  margin-top: 14px;
}
.ana-insights {
  background: rgba(214, 167, 133, 0.08);
  border: 1px solid rgba(214, 167, 133, 0.3);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  padding: 12px 16px 12px 18px;
  margin: 12px 0 4px;
}
.ana-insights li {
  font-size: 0.86rem;
  color: var(--text-light);
  margin: 3px 0;
  line-height: 1.5;
}
.exp-tag {
  display: inline-block;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(214, 167, 133, 0.18);
  color: var(--accent);
  margin-left: 6px;
  vertical-align: middle;
}
.exp-receipt img {
  height: 30px;
  width: 30px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  display: block;
}
/* Add-an-expense form: stack the fields full-width on phones so they don't
           cram together in the wrap row, with Scan photo + Add as equal-size buttons. */
@media (max-width: 640px) {
  .exp-add-form {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .exp-add-form > div,
  .exp-add-form > label,
  .exp-add-form > button {
    width: 100%;
  }
  .exp-add-form input:not([type="checkbox"]):not([type="radio"]),
  .exp-add-form select {
    width: 100% !important;
    box-sizing: border-box;
  }
  .exp-add-form .exp-scan-btn,
  .exp-add-form .exp-add-btn,
  .exp-add-form .exp-clear-btn {
    width: 100%;
    justify-content: center;
    padding: 12px;
  }
  .exp-receipt-field > div {
    display: block !important;
  }
  #exp-receipt-prev {
    margin-top: 8px;
  }
}
.exp-clear-btn {
  background: transparent;
  color: var(--text-muted);
}
.exp-clear-btn:hover,
.exp-clear-btn:focus-visible {
  background: var(--glass-hover);
  color: var(--text-light);
}
.accounts-section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  margin: 36px 0 6px;
}
.accounts-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--text-muted);
}
.accounts-actions {
  margin-top: 26px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.accounts-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 24px;
  line-height: 1.6;
  max-width: 720px;
}

/* Editorial kickers: the small-caps accent line above section titles. */
.section-kicker {
  font-size: 0.72rem;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  text-align: center;
  margin: 0 0 10px;
}

/* Heritage band: the numbers that earn trust, in display serif. */
.home-heritage {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: clamp(28px, 7vw, 84px);
  padding: 34px 20px 6px;
  flex-wrap: wrap;
}
.heritage-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.heritage-num {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1.1;
  color: var(--text-light);
}
.heritage-label {
  font-size: 0.7rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Guest words: one rotating review in display italic. */
.home-guestwords {
  max-width: 780px;
  margin: 26px auto 10px;
  padding: 26px 22px;
  text-align: center;
}
.guestwords-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 2.6vw, 1.65rem);
  line-height: 1.5;
  color: var(--text-light);
  margin: 0 0 14px;
  transition: opacity 0.6s var(--fluid-bezier);
}
.guestwords-quote.fading {
  opacity: 0;
}
.guestwords-quote::before {
  content: "\201C";
  color: var(--accent);
  margin-right: 2px;
}
.guestwords-quote::after {
  content: "\201D";
  color: var(--accent);
  margin-left: 2px;
}
.guestwords-meta {
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  transition: opacity 0.6s var(--fluid-bezier);
}
.guestwords-meta.fading {
  opacity: 0;
}
.guestwords-meta .gw-stars {
  color: var(--accent);
  letter-spacing: 2px;
}

/* Card photos settle in gently as they load (fadeInCardImages adds the
           classes; images stay fully visible if JS never runs). */
.card-img.img-fade {
  opacity: 0;
}
.card-img.img-fade.img-in {
  opacity: 1;
  transition: opacity 0.55s var(--fluid-bezier);
}

/* A light sweep across the accent CTAs on hover — quiet luxury. */
@media (hover: hover) {
  .btn-glass.btn-accent,
  #hs-search-btn {
    position: relative;
    overflow: hidden;
  }
  .btn-glass.btn-accent::after,
  #hs-search-btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -80%;
    width: 55%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.42), transparent);
    transform: skewX(-18deg);
    transition: left 0.7s var(--fluid-bezier);
    pointer-events: none;
  }
  .btn-glass.btn-accent:hover::after,
  #hs-search-btn:hover::after {
    left: 125%;
  }
}

/* Card footer: price and the live-availability chip share one baseline row
   (price left, "Next free" right) so the chip has a settled home on wide desktop
   cards instead of orphaning on its own line. Wraps to stacked if space is tight. */
.card-foot {
  display: flex;
  align-items: baseline;
  gap: 3px 14px;
  flex-wrap: wrap;
}
/* Homepage live availability: per-card chip + late-availability spotlight */
.card-avail {
  min-height: 1.1em;
}
.avail-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.avail-chip.now {
  color: #7fd68a;
}
.avail-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
#late-avail {
  max-width: 760px;
  margin: 16px auto 2px;
}
.late-avail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: rgba(214, 167, 133, 0.08);
  border: 1px solid rgba(214, 167, 133, 0.28);
  font-size: 0.9rem;
  color: var(--text-light);
  text-align: center;
}
/* Guest "My Bookings" cards */
.guest-tab {
  background: transparent;
}
/* "My Stay" hub — the in-stay action panel shown at the top of My Stays. */
.my-stay-hub {
  padding: 22px 24px;
  margin-bottom: 25px;
  border-radius: var(--r-panel);
}
.hub-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.hub-title {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: var(--text-light);
  line-height: 1.2;
}
.hub-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 2px;
}
/* Desktop: drop the tides line from the My Stay hub (kept on mobile, where
           it's a handy at-a-glance during a stay). */
@media (min-width: 641px) {
  .my-stay-hub .instay-tides {
    display: none;
  }
}
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.hub-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 78px;
  padding: 12px 8px;
  border-radius: 14px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-light);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.2s var(--fluid-bezier),
    transform 0.2s var(--spring),
    border-color 0.2s ease;
}
.hub-tile .ic {
  width: 22px;
  height: 22px;
}
.hub-tile:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--accent-soft, var(--glass-border));
}
.hub-tile:active {
  transform: scale(0.94);
}
/* Experiences tab (local things to do) */
.exp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.exp-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--text-muted);
  border-radius: var(--r-pill);
  padding: 7px 14px;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.2s var(--fluid-bezier),
    color 0.2s var(--fluid-bezier),
    border-color 0.2s var(--fluid-bezier),
    transform 0.15s var(--fluid-bezier);
}
.exp-chip:active {
  transform: scale(0.96);
}
.exp-chip.is-on {
  background: var(--text-light);
  color: var(--dark-grey);
  border-color: var(--text-light);
}
.exp-card {
  position: relative;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.exp-card .card-img {
  height: clamp(150px, 26vw, 200px);
  margin: 0;
  border-radius: 0;
}
.exp-card img.card-img {
  width: 100%;
  object-fit: cover;
  display: block;
  background: rgba(255, 255, 255, 0.04);
}
.exp-card .exp-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(
      150deg,
      hsl(var(--exp-h, 30) 40% 58% / 0.32),
      hsl(var(--exp-h, 30) 30% 40% / 0.1)
    ),
    rgba(255, 255, 255, 0.04);
}
.exp-card .exp-noimg .exp-art {
  width: 46px;
  height: 46px;
  color: var(--text-light);
  opacity: 0.5;
}
.exp-card .card-title {
  margin: 14px 18px 0;
}
.exp-body {
  margin: 8px 18px 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
  white-space: pre-line;
}
.exp-dist {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 18px 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.exp-dist .ic {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.exp-cat-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(18, 19, 22, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--text-light);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
}
.exp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 18px 18px;
}
/* Even pills, icon + label centred (no link underline — handled on .btn-sm). */
.exp-actions .btn-sm {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.exp-actions .btn-sm .ic {
  flex-shrink: 0;
}
.exp-suggest {
  margin-top: 24px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.exp-edit-thumb {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
}
/* Mobile polish: stack card grids to one column and give close buttons a
           proper 44px tap target on phones. */
@media (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 24px;
  }
  .reviews-modal-close {
    width: 44px;
    height: 44px;
  }
}
/* Lighter backdrop-blur on phones: blur cost scales with radius, so a
           modest trim noticeably eases scroll/compositing on low-end devices
           while keeping the frosted-glass look (these elements composite over
           scrolling content). */
@media (max-width: 768px) {
  .glass-panel {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .btn-glass {
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
  }
  .prop-book-bar,
  .chat-widget {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
}
.guest-booking {
  padding: 0;
  margin-bottom: 25px;
  overflow: hidden;
  border-radius: var(--r-panel);
}
/* Desktop: two-up bookings when there's more than one (a lone card stays
           full width via auto-fit); the grid gap replaces the card margin. */
/* Desktop: each My Stays section is its own two-up grid (headings and
           banners live outside it), and an odd last card — including a lone card —
           spans the full row so it gets the side-by-side details/price layout
           instead of sitting half-width beside empty space. */
@media (min-width: 1200px) {
  .gb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(560px, 1fr));
    gap: 24px;
    align-items: start;
    margin-bottom: 25px;
  }
  .gb-grid > .guest-booking {
    margin-bottom: 0;
  }
  .gb-grid > .guest-booking:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
.guest-booking-head {
  display: flex;
  gap: 22px;
  align-items: stretch;
  flex-wrap: wrap;
}
.guest-booking-img {
  width: 220px;
  min-height: 180px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
.guest-booking-body {
  flex: 1;
  min-width: 280px;
  padding: 26px 30px;
}
.guest-booking-body h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.guest-ref {
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.guest-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 24px;
  margin-bottom: 18px;
}
.guest-detail-grid .booking-detail-label {
  font-size: 0.68rem;
}
.guest-status-badge {
  display: inline-block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 12px;
  border-radius: 20px;
}
.guest-price-box {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 16px 18px;
  max-width: 360px;
}
/* Details and price summary side by side when the CARD is wide enough,
           stacked otherwise. A container query (not a viewport one) because card
           width varies independently of the viewport: in the desktop two-up grid
           each card is ~570px — a viewport test put the 340px price column inside
           it and the detail grid overflowed underneath. Old browsers without
           container queries just keep the stacked layout. */
.guest-booking-body {
  container-type: inline-size;
}
.guest-booking-cols {
  display: block;
}
@container (min-width: 620px) {
  .guest-booking-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 30px;
    align-items: start;
  }
  .guest-booking-cols .guest-detail-grid {
    margin-bottom: 0;
  }
  .guest-booking-cols .guest-price-box {
    max-width: none;
  }
}
.guest-empty {
  text-align: center;
  padding: 70px 20px;
  color: var(--text-muted);
}
@media (max-width: 640px) {
  .guest-booking-img {
    width: 100%;
    min-height: 160px;
  }
  .guest-booking-body {
    min-width: 0;
    padding: 22px 20px;
  }
}
.rate-prop {
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  box-shadow: var(--shadow-panel);
}
.rate-prop h4 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rate-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.rate-field label {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.rate-field input {
  width: 110px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--glass-border);
  color: var(--text-light);
  padding: 9px 12px;
  border-radius: 10px;
  font-family: var(--font-sans);
  text-align: right;
}
.rate-field input:focus {
  outline: none;
  border-color: var(--text-light);
}
.rule-divider {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin: 18px 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
}
.arrival-days {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.day-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--text-light);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--glass-border);
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.day-check input {
  accent-color: var(--ok);
  cursor: pointer;
}

@media (max-width: 1024px) {
  .bo-layout {
    grid-template-columns: 1fr;
  }
  .bo-sidebar {
    position: static;
  }
  .inbox-strip-body {
    max-height: none;
  }
}

/* --- MODAL --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 11, 13, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open {
  display: flex;
  /* Visible base state; entrance animation is decorative (no forwards fill). */
  opacity: 1;
  animation: fluidFadeIn 0.4s var(--fluid-bezier);
}
.modal-box {
  width: 100%;
  max-width: 480px;
  padding: 35px;
  border-radius: var(--r-panel);
  max-height: 90vh;
  overflow-y: auto;
}
/* Floating glass windows: smooth pop-in (overlay fades, box rises). */
.pop-modal.open .modal-box {
  animation: modalPop 0.45s var(--fluid-bezier);
}
@keyframes modalPop {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Closing: reverse the pop-in — overlay fades, box drops away. */
.pop-modal.closing {
  animation: fluidFadeOut 0.35s var(--fluid-bezier) forwards;
}
.pop-modal.closing .modal-box {
  animation: modalPopOut 0.35s var(--fluid-bezier) forwards;
}
@keyframes fluidFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes modalPopOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(26px) scale(0.96);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pop-modal.open .modal-box,
  .pop-modal.closing,
  .pop-modal.closing .modal-box {
    animation: none;
  }
}
.modal-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 5px;
}
/* Paired fields in the Add/Edit Booking modal (email+phone, date+time, adults+
   children). Replaces fixed 130px inline columns that cramped narrow phones:
   columns shrink gracefully and the narrow (time) column keeps a sane minimum. */
.modal-2col {
  display: flex;
  gap: 15px;
}
.modal-2col > div {
  flex: 1 1 0;
  min-width: 0;
}
.modal-2col > .modal-col-narrow {
  flex: 0 1 130px;
  min-width: 96px;
}
@media (max-width: 480px) {
  .modal-2col {
    gap: 10px;
  }
}

/* --- FOOTER & EDITOR UI --- */
.site-footer {
  margin-top: auto;
  padding: 14px 20px;
  text-align: center;
  border-top: 1px solid var(--glass-border);
}
.site-footer > p:first-child {
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0;
  color: var(--text-muted);
}
.site-footer .footer-controls {
  margin-top: 2px;
  margin-bottom: 18px;
}
.footer-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
}
.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 24px;
  margin: 2px 0 16px;
}
.footer-links a {
  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s var(--fluid-bezier);
}
.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--text-light);
}

/* Same-day changeover toasts (lower-right) */
.toast-stack {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 360px;
  width: calc(100% - 48px);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: rgba(30, 24, 38, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-highlight);
  border-left: 4px solid var(--warn);
  border-radius: var(--r-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-float);
  animation: toastIn 0.45s var(--fluid-bezier);
}
.toast.toast-out {
  animation: toastOut 0.35s var(--fluid-bezier) forwards;
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateX(40px);
  }
}
.toast-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.toast-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: #ffc97a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  flex-shrink: 0;
}
.toast-close:hover {
  color: var(--text-light);
}
.toast-body {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.5;
}
.toast-body .toast-prop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.toast-date {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 6px;
}
.toast-dismiss {
  margin-top: 12px;
  width: 100%;
  padding: 9px;
  font-size: 0.75rem;
}
@media (max-width: 640px) {
  .toast-stack {
    bottom: 12px;
    right: 12px;
  }
}
/* General-purpose auto-dismiss toast (success/info confirmations) */
#app-toasts {
  z-index: 2600;
}
.toast.toast-mini {
  border-left-color: var(--ok);
  padding: 13px 16px;
  cursor: pointer;
}
.toast.toast-mini.toast-err {
  border-left-color: var(--danger);
}
.toast.toast-mini .toast-body {
  color: var(--text-light);
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast.toast-mini .ic {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.toast.toast-mini.toast-err .ic {
  color: var(--danger);
}
.toast.toast-mini .ic {
  color: var(--ok);
}
.toggle-btn {
  background: transparent;
  color: var(--text-muted);
  padding: 8px 18px;
  border-radius: 20px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--glass-border);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.toggle-btn:hover {
  color: var(--text-light);
  border-color: var(--text-light);
}
/* iOS-style light/dark toggle: a pill track + a sliding knob that carries the
           current mode's icon (moon → sun crossfade as it slides). */
.theme-switch {
  position: relative;
  width: 60px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  cursor: pointer;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.08);
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.4s var(--fluid-bezier),
    border-color 0.4s var(--fluid-bezier),
    box-shadow 0.25s var(--fluid-bezier);
}
.theme-switch:hover {
  box-shadow: 0 0 0 4px var(--glass-bg);
}
.theme-switch:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}
.theme-switch .ts-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.45s var(--spring),
    width 0.18s var(--fluid-bezier);
}
.theme-switch:active .ts-knob {
  width: 30px;
} /* subtle squish on press */
.theme-switch .ts-i {
  position: absolute;
  width: 15px;
  height: 15px;
  transition:
    opacity 0.3s var(--fluid-bezier),
    transform 0.45s var(--spring);
}
.theme-switch .ts-i-moon {
  color: #33343a;
  opacity: 1;
}
.theme-switch .ts-i-sun {
  color: var(--accent);
  opacity: 0;
  transform: rotate(-90deg);
}
/* Light mode = "on": knob slides right, track warms, knob shows the sun. */
body.light-mode .theme-switch {
  background: var(--accent);
  border-color: var(--accent);
}
body.light-mode .theme-switch .ts-knob {
  transform: translateX(28px);
}
body.light-mode .theme-switch:active .ts-knob {
  transform: translateX(24px);
}
body.light-mode .theme-switch .ts-i-moon {
  opacity: 0;
  transform: rotate(90deg);
}
body.light-mode .theme-switch .ts-i-sun {
  color: #e8943b;
  opacity: 1;
  transform: rotate(0deg);
}
/* Condensed segmented action cluster (guest dashboard header) */
.action-cluster {
  display: inline-flex;
  align-items: stretch;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.action-cluster button,
.action-cluster a {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 11px 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition:
    background 0.25s,
    color 0.25s;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.action-cluster button:not(:last-child),
.action-cluster a:not(:last-child) {
  border-right: 1px solid var(--glass-border);
}
.action-cluster button:hover,
.action-cluster a:hover {
  color: var(--text-light);
  background: var(--glass-hover);
}
.action-cluster .ac-danger:hover {
  color: #ff6b6b;
}
/* Mobile: collapse the segmented pill into a dropdown menu */
.action-menu {
  position: relative;
  display: inline-block;
}
.action-dd-toggle {
  display: none;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--text-light);
  padding: 11px 22px;
  border-radius: var(--r-lg);
  cursor: pointer;
  font-weight: 500;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: var(--font-sans);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.action-dd-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 1200;
  min-width: 200px;
  flex-direction: column;
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-float);
}
.action-menu.open .action-dd-panel {
  display: flex;
}
.action-dd-panel a,
.action-dd-panel button {
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  color: var(--text-light);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  padding: 14px 18px;
  font-family: var(--font-sans);
  transition: background 0.2s;
}
.action-dd-panel a:not(:last-child),
.action-dd-panel button:not(:last-child) {
  border-bottom: 1px solid var(--glass-border);
}
.action-dd-panel a:hover,
.action-dd-panel button:hover {
  background: var(--glass-hover);
}
.action-dd-panel .ac-danger:hover {
  color: #ff6b6b;
}
@media (max-width: 640px) {
  .action-cluster {
    display: none;
  }
  .action-dd-toggle {
    display: inline-block;
  }
}
.toggle-btn.active-mode {
  background: var(--ok);
  color: white;
  border-color: var(--ok);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}
/* Guest Log In / Create Account tabs use the site's rose-gold accent, not green. */
.toggle-btn.guest-tab.active-mode {
  background: var(--accent);
  color: #1b1208;
  border-color: var(--accent);
  box-shadow: 0 4px 15px var(--accent-soft);
}

/* data-edit-* elements are the content render targets; keep their text in the
           element's own font. */
[data-edit-text] {
  font-family: inherit;
}

/* --- FULL-PAGE LOADING OVERLAY ---
           Covers everything with a frosted-glass screen + the crown logo until all
           live data is loaded, so visitors never see the hardcoded placeholder
           text/prices flash in on slow connections. Removed once content is ready
           (with a timeout fallback so it can never get stuck). */
/* The loading overlay is ALWAYS dark glass, regardless of the visitor's
           saved light/dark preference — hardcoded colours, not theme variables.
           The real theme is applied underneath and shows when the overlay fades. */
#loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background-color: #121316;
  transition: opacity 0.5s var(--fluid-bezier);
}
#loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
#loading-overlay .loading-glass {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
#loading-slow-msg {
  display: none;
  text-align: center;
  max-width: 280px;
  animation: fluidFadeIn 0.4s var(--fluid-bezier);
}
#loading-overlay.show-slow #loading-slow-msg {
  display: block;
}
#loading-slow-msg p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  margin-bottom: 14px;
}
/* Discrete offline indicator — a small no-WiFi button shown while the device
           has no connection (no full-screen "you're not connected" message). */
.offline-pill {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 70px);
  right: 14px;
  z-index: 1400;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-light);
  opacity: 0.9;
}
.offline-pill .ic {
  width: 18px;
  height: 18px;
}
body.is-offline .offline-pill,
body.has-queued .offline-pill {
  display: flex;
}
.offline-pill .oq-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--accent);
  color: #1a191b;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
#loading-slow-msg button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f5f5f7;
  padding: 11px 26px;
  border-radius: 30px;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.loading-glass {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  border-radius: 40px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.loading-crown {
  width: 88px;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 14px rgba(214, 167, 133, 0.55));
  animation: loadingPulse 1.6s var(--fluid-bezier) infinite;
}
@keyframes loadingPulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(0.96);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 8px rgba(214, 167, 133, 0.35));
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 20px rgba(214, 167, 133, 0.7));
  }
}
@media (prefers-reduced-motion: reduce) {
  .loading-crown {
    animation: none;
    opacity: 0.9;
  }
}
/* Body paragraphs keep the owner's line breaks / paragraph spacing */
#prop-desc,
p.lead[data-edit-text] {
  white-space: pre-wrap;
}
/* Airbnb-style collapsed description: clamp to a few lines with a "Show more" toggle. */
#prop-desc.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prop-desc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-light);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.prop-desc-toggle::after {
  content: "›";
  display: inline-block;
  font-weight: 400;
  text-decoration: none;
  transition: transform 0.2s;
}
.prop-desc-toggle.open::after {
  transform: rotate(90deg);
}
[data-edit-text] * {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  color: inherit !important;
  background: transparent !important;
  text-decoration: inherit !important;
  letter-spacing: inherit !important;
}

@media (max-width: 1024px) {
  .cal-layout {
    grid-template-columns: 1fr;
  }
}
/* ---------- TABLET & BELOW (≤900px) ---------- */
@media (max-width: 900px) {
  .prop-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .gallery-container {
    height: clamp(352px, 64vh, 576px);
  }
}

/* ---------- AWKWARD MID WIDTH (769–1100px) ----------
           Nav is still expanded here but the full title + nav don't both fit,
           so show just the crown mark to avoid the title crowding the nav. */
@media (min-width: 769px) and (max-width: 1100px) {
  .logo-text {
    display: none;
  }
}

/* ---------- LANDSCAPE PHONE / SMALL TABLET (≤768px) ---------- */
@media (max-width: 768px) {
  :root {
    --r-panel: 28px;
  } /* header + all panels share the tighter phone curvature */
  header {
    padding: 12px 18px;
    width: calc(100% - 24px);
    top: calc(10px + env(safe-area-inset-top));
  }
  nav ul {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  .logo-text {
    display: none;
  } /* mobile: show just the crown mark */
  .logo-mark {
    height: 38px;
  }
  .grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 36px;
  }
  .prop-layout {
    grid-template-columns: 1fr;
  }
  /* HOME (back office): keep the at-a-glance cards two-up so the page isn't
               an endless single column, and tighten the panels for small screens. */
  .dashboard-header {
    margin-bottom: 18px;
    padding-bottom: 12px;
  }
  #view-backoffice .section-title,
  #view-bookings .section-title {
    font-size: 1.7rem;
  }
  .bo-search {
    margin-bottom: 16px;
  }
  .cron-pill {
    margin-bottom: 14px;
  }
  
  .today-card {
    padding: 12px 12px;
  }
  .today-card-value {
    font-size: 1.5rem;
    margin: 1px 0 5px;
  }
  .today-card-list {
    font-size: 0.76rem;
  }
  
  .cal-panel {
    padding: 12px 8px;
  }
  .cal-header-bar {
    grid-template-columns: 1fr;
    gap: 10px;
    justify-items: center;
    margin-bottom: 12px;
  }
  .cal-header-bar .cal-month-nav {
    grid-column: 1;
  }
  .cal-actions {
    grid-column: 1;
    justify-self: center;
    justify-content: center;
  }
  .cal-add-btn {
    padding: 10px 16px;
  }
  .cal-month-nav {
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    max-width: 300px;
  }
  /* Size the serif title so even the longest month + year stays on one line
     between the arrows on a small phone. */
  .cal-month-title {
    font-size: clamp(1.05rem, 4.5vw, 1.35rem);
    width: auto;
  }
  .cal-legend {
    gap: 14px;
    margin-bottom: 16px;
  }
  
  
  
  
  
  .modal-box {
    padding: 26px 22px;
  }
  /* iOS zooms in if a focused field is under 16px — force 16px on mobile */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
  .footer-controls {
    flex-wrap: wrap;
  }
  .dashboard-card {
    padding: 32px 18px;
  }
  .section-title {
    margin-bottom: 22px;
  }
}

/* ---------- PORTRAIT PHONE (≤480px) ---------- */
@media (max-width: 480px) {
  .hero {
    border-radius: 0 0 var(--r-panel) var(--r-panel);
    margin-bottom: 0;
  }
  .hero-content {
    padding: 24px 16px;
  }
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }
  /* Booking cards: the image stacks full-width instead of a fixed 220px
               column, so the card sizes correctly to the phone. */
  .guest-booking-img {
    width: 100%;
    min-height: 170px;
  }
  .guest-booking-body {
    min-width: 0;
    padding: 22px 20px;
  }
  .card-title {
    font-size: 1.5rem;
  }
  .amenity-pill {
    padding: 10px 14px;
    font-size: 0.82rem;
  }
  /* Calendar: keep 7 columns but tighten so it never overflows */
  .cal-panel {
    padding: 10px 7px;
  }
  
  
  
  
  
  
  /* Back-office at-a-glance cards: a touch tighter still */
  
  .today-card {
    padding: 11px 11px;
  }
  
  .os-card {
    padding: 14px 14px;
  }
  .price-row {
    font-size: 0.82rem;
  }
  .price-row.total .price-amount {
    font-size: 1.3rem;
  }
  .legend {
    gap: 10px;
  }
  .legend-item {
    font-size: 0.75rem;
  }
  .toggle-btn {
    padding: 7px 14px;
    font-size: 0.7rem;
  }
  /* Comfortable tap targets on small screens */
  .btn-glass,
  .btn-sm,
  .cal-add-btn,
  .account-btn,
  .menu-toggle {
    min-height: 44px;
  }
  .hs-step {
    width: 40px;
    height: 40px;
  }
  /* Keep header items from colliding */
  header {
    gap: 10px;
  }
  .account-btn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }
  .account-btn svg {
    flex-shrink: 0;
  }
  .menu-toggle {
    flex-shrink: 0;
  }
}

/* ---------- VERY SMALL / NARROW (≤360px) ---------- */
@media (max-width: 360px) {
  
  
  .hero p {
    letter-spacing: 1px;
  }
}

/* ---------- SHORT LANDSCAPE (phones turned sideways) ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero {
    min-height: 0;
    padding: calc(74px + env(safe-area-inset-top)) 0 18px;
  }
  .mobile-nav-overlay {
    justify-content: flex-start;
    padding-top: 80px;
    overflow-y: auto;
  }
  .mobile-nav-overlay a {
    font-size: 1.15rem;
    margin: 10px 0;
  }
}

/* ================= OWNER NAV ================= */
/* The owner's navigation lives in the floating bottom dock (.admin-dock-wrap);
           the old top owner bar has been removed. Once logged in, the footer
           back-office (🔩) button is redundant, so hide it (returns when logged out). */
body.owner-mode #footer-backoffice {
  display: none;
}
/* The header account button is for guest sign-in; hide it while the owner
           is signed in (their tools live in the floating admin dock). */
body.owner-mode .account-btn {
  display: none;
}
/* Admins have no customer-facing site: hide the public header, mobile menu
           and (most of) the footer — keep only the build number. The owner navigates
           via the floating dock and works entirely in the back office. */
body.owner-mode header,
body.owner-mode #mobileMenu {
  display: none !important;
}
body.owner-mode .footer-controls,
body.owner-mode #footer-newsletter,
body.owner-mode .footer-nap,
body.owner-mode .footer-meta {
  display: none !important;
}
/* The public header is hidden for admins, so the big top padding that cleared
           it is wasted space — pull the back-office content up to fill the screen
           (small margin + notch clearance). Dock clearance stays at the bottom. */
body.owner-mode .container {
  padding-top: calc(28px + env(safe-area-inset-top, 0px));
  padding-bottom: 110px;
}
/* The footer sits outside .container, so give it its own clearance in
           owner-mode — otherwise the floating admin dock overlaps the footer text. */
body.owner-mode .site-footer {
  padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
}

/* ----- ADMIN ICON DOCK (floating bottom pill nav, icons only) ----- */
/* Hidden by default; only shown while an admin is signed in (owner-mode),
           and hidden again while the Live Editor is open so it can't clash. */
.admin-dock-wrap {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 1500;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 0 10px;
  max-width: calc(100vw - 20px);
}
body.owner-mode .admin-dock-wrap {
  display: flex;
}
/* Active (green) state for the Edit icon while the Live Editor is open. */
.admin-dock-btn.active-mode {
  background: var(--ok);
  color: #fff;
}
.admin-dock-btn.active-mode:hover {
  background: #43a047;
}
.admin-dock {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(26, 25, 27, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-pill);
  padding: 12px 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.admin-dock-btn {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--r-pill);
  color: #fff;
  cursor: pointer;
  transition:
    background 0.2s var(--fluid-bezier),
    transform 0.15s var(--fluid-bezier);
  -webkit-tap-highlight-color: transparent;
}
.admin-dock-btn svg {
  width: 27px;
  height: 27px;
  display: block;
}
.admin-dock-btn:hover,
.admin-dock-btn:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  outline: none;
}
.admin-dock-btn:active {
  transform: scale(0.92);
}
/* Current section: a clearly lighter filled pill, like the active tab in the
           reference design. Stays highlighted even when not hovered. */
/* The white highlight is now the single sliding indicator (below); the active
           button just flips its icon dark and nudges it up a touch as the pill arrives. */
.admin-dock-btn.current {
  background: transparent;
  color: #1a191b;
}
.admin-dock-btn.current:hover {
  background: transparent;
}
.admin-dock-btn svg {
  transition: transform 0.4s cubic-bezier(0.34, 1.5, 0.5, 1);
}
.admin-dock-btn.current svg {
  transform: scale(1.08);
}
/* Instagram-style selection pill that physically glides between tabs. JS sizes
           and positions it under the .current button; the springy easing adds the bounce. */
.admin-dock-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition:
    left 0.5s cubic-bezier(0.34, 1.5, 0.5, 1),
    width 0.5s cubic-bezier(0.34, 1.5, 0.5, 1),
    height 0.3s var(--fluid-bezier),
    opacity 0.28s var(--fluid-bezier);
}
.admin-dock-indicator.show {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .admin-dock-indicator {
    transition: opacity 0.2s var(--fluid-bezier);
  }
  .admin-dock-btn svg,
  .admin-dock-btn.current svg {
    transition: none;
    transform: none;
  }
}
/* Hover label so each icon's purpose is unmistakable (desktop). */
.admin-dock-btn::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(20, 20, 22, 0.96);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0.3px;
  padding: 7px 11px;
  border-radius: 9px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s var(--fluid-bezier),
    transform 0.18s var(--fluid-bezier);
}
.admin-dock-btn:hover::after,
.admin-dock-btn:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.admin-dock-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  background: #e5533c;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(26, 25, 27, 0.92);
}
/* Divider before the log out icon, and a red-tinted hover to set it apart. */
.admin-dock-sep {
  width: 1px;
  height: 30px;
  background: rgba(255, 255, 255, 0.14);
  margin: 0 5px;
  flex-shrink: 0;
}

/* ----- Homepage hero availability search ----- */
.hero-search {
  width: 100%;
  max-width: 540px;
  margin: 18px auto 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.hs-field {
  width: 100%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  padding: 15px 18px;
  color: var(--text-light);
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.05);
  transition:
    background 0.25s var(--fluid-bezier),
    border-color 0.25s var(--fluid-bezier),
    box-shadow 0.25s var(--fluid-bezier);
  box-sizing: border-box;
}
button.hs-field {
  font-family: inherit;
  text-align: left;
}
.hs-field:hover {
  background: rgba(255, 255, 255, 0.12);
}
/* Light mode: give the search fields a crisp white surface so they read as
           solid, premium inputs rather than faint outlines on the pale panel. */
body.light-mode .hs-field {
  background: #fff;
  border-color: rgba(20, 22, 34, 0.12);
  box-shadow: 0 3px 16px rgba(20, 22, 34, 0.07);
}
body.light-mode .hs-field:hover {
  background: #fff;
  border-color: var(--accent-soft);
}
.hs-label {
  display: block;
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.hs-value {
  font-size: 0.98rem;
}
.hs-guests {
  cursor: default;
}
/* Stacked rows that span the field: label on the left, stepper pinned right
           (mirrors the enquiry modal), so the Guests box never shows a dead right half. */
.hs-guest-rows {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hs-guest {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
}
.hs-guest .hs-gtype {
  flex: 1 1 auto;
}
.hs-gtype {
  color: var(--text-muted);
  font-size: 0.8rem;
  min-width: 54px;
}
.hs-step {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-light);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition:
    background 0.2s var(--fluid-bezier),
    transform 0.15s var(--fluid-bezier);
}
.hs-step:hover {
  background: rgba(255, 255, 255, 0.18);
}
.hs-step:active {
  transform: scale(0.9);
}
.hs-count {
  min-width: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.enq-guests {
  display: flex;
  flex-direction: column;
}
.enq-guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--glass-border);
}
.enq-guest-row:last-child {
  border-bottom: none;
}
.enq-guest-row > span {
  color: var(--text-light);
  font-size: 0.95rem;
}
.enq-step-group {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hs-msg {
  font-size: 0.82rem;
  color: var(--warn-text);
  min-height: 1em;
  text-align: center;
}
.hs-select-wrap {
  position: relative;
}
.hs-select-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
  border: none;
  color: var(--text-light);
  font-family: inherit;
  font-size: 0.98rem;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
}
.hs-select-btn svg {
  width: 16px;
  height: 16px;
  opacity: 0.65;
  transition: transform 0.25s var(--fluid-bezier);
  flex-shrink: 0;
}
.hs-select-wrap.open .hs-select-btn svg {
  transform: rotate(180deg);
}
.hs-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  z-index: 60;
  display: none;
  padding: 6px;
  background: rgba(26, 25, 27, 0.97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.55);
}
.hs-select-wrap.open .hs-select-menu {
  display: block;
  animation: fluidFadeIn 0.28s var(--fluid-bezier);
}
.hs-opt {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text-light);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.18s var(--fluid-bezier);
}
.hs-opt:hover {
  background: rgba(255, 255, 255, 0.1);
}
.hs-opt.is-sel {
  background: rgba(255, 255, 255, 0.16);
}
.hs-flex {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hs-chip {
  flex: 1 1 auto;
  padding: 9px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition:
    background 0.2s var(--fluid-bezier),
    color 0.2s var(--fluid-bezier),
    border-color 0.2s var(--fluid-bezier),
    transform 0.15s var(--fluid-bezier);
  white-space: nowrap;
}
.hs-chip:hover {
  background: rgba(255, 255, 255, 0.12);
}
.hs-chip:active {
  transform: scale(0.96);
}
.hs-chip.is-on {
  background: var(--accent);
  color: #1b1208;
  border-color: var(--accent);
  font-weight: 600;
}
/* Flexible search: mode toggle + per-cottage free-date options */
.hs-mode-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hs-mode {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 4px;
}
.hs-mode-btn {
  flex: 1 1 0;
  padding: 9px 14px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.84rem;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.2s var(--fluid-bezier),
    color 0.2s var(--fluid-bezier);
}
.hs-mode-btn.is-on {
  background: var(--accent);
  color: #1b1208;
  font-weight: 600;
}
/* Premium primary CTA: accent-filled, not a pale outline. */
#hs-search-btn,
.btn-glass.btn-accent {
  background: var(--accent);
  color: #1b1208;
  border-color: transparent;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 17px;
  box-shadow: 0 8px 24px var(--accent-soft);
}
#hs-search-btn:hover,
.btn-glass.btn-accent:hover {
  background: var(--accent);
  color: #1b1208;
  filter: brightness(1.05);
}
.flex-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.flex-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-light);
  font-family: inherit;
  cursor: pointer;
  transition:
    background 0.2s var(--fluid-bezier),
    border-color 0.2s var(--fluid-bezier),
    transform 0.15s var(--fluid-bezier);
}
.flex-opt:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
}
.flex-opt:active {
  transform: scale(0.99);
}
.flex-opt .fo-dates {
  font-size: 0.9rem;
}
.flex-opt .fo-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.flex-opt .fo-price {
  font-size: 0.85rem;
  white-space: nowrap;
}
/* Cottages page: Airbnb-style map + list (desktop split; mobile keeps the grid) */
.cottages-split {
  display: block;
}
.cottages-map-pane {
  display: none;
}
.cottages-map.is-empty {
  display: none;
}
.card.map-highlight {
  outline: 2px solid var(--glass-highlight);
  outline-offset: 3px;
}
/* Airbnb-style cottage cards (cottages page only) */
.cottages-list .card-img-wrap {
  position: relative;
}
.cottages-list .cott-fav {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.96);
  color: #1f1f1f;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.cottages-list .cott-fav[hidden] {
  display: none;
}
.cottages-list .cott-fav svg {
  width: 12px;
  height: 12px;
}
.cottages-list .cott-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.cottages-list .cott-head .card-title {
  margin-bottom: 0;
}
.cottages-list .cott-head .card-rating {
  margin: 0;
  font-size: 0.85rem;
  white-space: nowrap;
  flex: none;
}
.map-price-pill {
  background: transparent !important;
  border: 0 !important;
}
.map-price-pill .mp-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #1f1f1f;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition:
    transform 0.15s var(--fluid-bezier),
    background 0.15s,
    color 0.15s;
}
.map-price-pill .mp-pill:hover,
.map-price-pill.is-active .mp-pill {
  background: #1f1f1f;
  color: #fff;
  transform: translate(-50%, -50%) scale(1.07);
  z-index: 5;
}
@media (min-width: 900px) {
  .cottages-split {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
    margin-top: 18px;
  }
  .cottages-split.no-map {
    grid-template-columns: 1fr;
  }
  /* Two big, image-forward cards per row (Airbnb-style); third wraps underneath.
               Use #cottages (id) so this beats the legacy `#cottages { repeat(3,1fr) }`
               at min-width:860 — a class selector alone loses to that id. */
  .cottages-list #cottages {
    margin-top: 0 !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
  }
  .cottages-list .card {
    padding: 14px;
  }
  .cottages-list .card-img-wrap {
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
  }
  .cottages-list .card-img {
    height: clamp(230px, 21vw, 320px);
    border-radius: 12px;
    margin-bottom: 0;
  }
  .cottages-list .card-title {
    font-size: 1.2rem;
    line-height: 1.25;
  }
  .cottages-list .card-meta {
    margin-bottom: 6px;
    font-size: 0.72rem;
  }
  .cottages-list .card-price {
    font-size: 1rem;
  }
  .cottages-split.no-map .cottages-list #cottages {
    grid-template-columns: repeat(3, 1fr);
  }
  .cottages-map-pane {
    display: block;
    position: sticky;
    top: 90px;
    height: calc(100vh - 120px);
    min-height: 460px;
  }
  .cottages-map {
    width: 100%;
    height: 100%;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--glass-border);
  }
}
.btn-glass-ghost {
  background: transparent;
  opacity: 0.85;
}
#cottages {
  scroll-margin-top: calc(100px + env(safe-area-inset-top));
}
.fluid-swap {
  animation: fluidFadeIn 0.5s var(--fluid-bezier);
}
/* Per-cottage reviews block on the property page */
.prop-reviews-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}
.prop-reviews-score {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  color: var(--text-light);
  letter-spacing: 0.5px;
}
.prop-reviews-count {
  font-size: 0.92rem;
  color: var(--text-muted);
}
.prop-reviews .reviews-grid {
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 0;
}
/* Hero-as-results-screen (Airbnb-style): search panel swaps for the result cards */
.hero-results-wrap {
  position: relative;
  z-index: 2;
  width: 92%;
  max-width: 1100px;
  margin: 0 auto;
}
.hero-results-head {
  text-align: center;
  margin-bottom: 6px;
}
.hero-results-wrap .grid {
  margin-top: 24px;
}
/* While showing search results, widen the availability section so the result
           cards aren't cramped inside the narrower search-panel column. */
.home-availability.results-mode {
  max-width: 1160px;
}
/* ----- Desktop: use the width. Lay the search out as a horizontal bar
           (mode toggle on top; Dates · Guests · button in a row) instead of a
           narrow centred column with empty margins either side. Mobile keeps the
           stacked layout above. ----- */
@media (min-width: 900px) {
  .home-availability {
    max-width: 920px;
  }
  .home-availability .hero-content {
    padding: 40px 48px;
  }
  /* Two balanced columns (Dates · Guests) with a full-width CTA below — uses
               the width without the cramped, ragged three-across bar. */
  .hero-search {
    max-width: 100%;
    margin: 22px 0 4px;
    display: grid;
    align-items: stretch;
    gap: 16px 22px;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "mode mode" "dates guests" "action action" "msg msg";
  }
  .hero-search .hs-mode {
    grid-area: mode;
    justify-self: center;
    min-width: 320px;
  }
  .hero-search #hs-mode-exact,
  .hero-search #hs-mode-flex {
    grid-area: dates;
    min-width: 0;
  }
  /* Equal-height columns, with the Guests field centred so the two sides stay
               symmetric even though Dates carries the flexibility chips beneath it. */
  .hero-search .hs-guests {
    grid-area: guests;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero-search #hs-search-btn {
    grid-area: action;
    margin-top: 4px;
  }
  .hero-search .hs-msg {
    grid-area: msg;
  }
}
.hs-unavail {
  opacity: 0.7;
}
/* Light mode: the shadows above are tuned for dark glass and read muddy on
           light surfaces — swap to a cooler, tighter ink at lower opacity. */
body.light-mode .glass-panel {
  box-shadow: 0 6px 22px rgba(20, 22, 34, 0.08);
}
@media (hover: hover) {
  body.light-mode .glass-panel:hover {
    box-shadow: 0 12px 30px rgba(20, 22, 34, 0.13);
  }
}
body.light-mode .modal-box,
body.light-mode .datepicker-pop {
  box-shadow: 0 18px 48px rgba(20, 22, 34, 0.18);
}
.hs-banner {
  background: rgba(255, 167, 38, 0.16);
  color: var(--warn-text);
  border: 1px solid rgba(255, 167, 38, 0.4);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 0.76rem;
  line-height: 1.35;
  margin-bottom: 12px;
  text-align: center;
}
.hs-banner-red {
  background: rgba(229, 115, 115, 0.16);
  color: var(--danger);
  border-color: rgba(229, 115, 115, 0.4);
}
@media (max-width: 640px) {
  .hs-guest-rows {
    gap: 10px;
  }
}

/* ----- Liquid-glass zoom buttons on the cottage maps ----- */
.leaflet-bar,
.leaflet-control-zoom {
  border: none !important;
  border-radius: var(--r-sm) !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}
.leaflet-control-zoom a {
  background: rgba(26, 25, 27, 0.55) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 32px !important;
  font-size: 1.15rem !important;
  transition:
    background 0.25s var(--fluid-bezier),
    color 0.25s var(--fluid-bezier);
}
.leaflet-control-zoom a:hover {
  background: rgba(26, 25, 27, 0.78) !important;
  color: #fff !important;
}
.leaflet-control-zoom a:active {
  background: rgba(255, 255, 255, 0.2) !important;
}
.leaflet-control-zoom-in {
  border-bottom: none !important;
  border-radius: var(--r-sm) 12px 0 0 !important;
}
.leaflet-control-zoom-out {
  border-radius: 0 0 12px 12px !important;
}
.leaflet-control-zoom a.leaflet-disabled {
  color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(26, 25, 27, 0.4) !important;
}
/* Shrink the map attribution so it isn't oversized */
.leaflet-control-attribution,
.leaflet-control-attribution a {
  font-size: 9px !important;
  line-height: 1.5 !important;
}
.leaflet-control-attribution {
  padding: 0 5px !important;
  background: rgba(255, 255, 255, 0.75) !important;
}
@media (max-width: 640px) {
  .admin-dock {
    padding: 7px 9px;
    gap: 2px;
  }
  .admin-dock-btn {
    width: 44px;
    height: 44px;
  }
  .admin-dock-btn svg {
    width: 22px;
    height: 22px;
  }
  .admin-dock-sep {
    height: 24px;
    margin: 0 3px;
  }
}
@media (max-width: 380px) {
  .admin-dock-btn {
    width: 40px;
    height: 40px;
  }
  .admin-dock-btn svg {
    width: 20px;
    height: 20px;
  }
  .admin-dock-sep {
    margin: 0 2px;
  }
}
@media (max-width: 640px) {
  .owner-bar-btn {
    padding: 9px 12px;
  }
}

/* Settings → Website content: image rows */
/* Settings index: small section headers that group related folders. */
.settings-index .settings-section-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  font-weight: 700;
  color: var(--text-muted);
  margin: 22px 6px 8px;
}
.settings-index > .settings-section-label:first-child {
  margin-top: 2px;
}
/* Desktop: the Settings & Money landing lists (both .settings-index) are a single
   narrow 640px column on phones. On a wide screen that leaves the right half empty,
   so flow the section groups into two balanced columns that fill the page. Each
   group stays whole (never split across a column) and every label stays glued to
   the group it heads. Money's graphical overview spans the full width on top.
   Phones/tablets (<960px) keep the single-column mobile layout untouched. */
@media (min-width: 900px) {
  .settings-index {
    max-width: 1040px;
    column-count: 2;
    column-gap: 30px;
  }
  .settings-index .settings-group {
    break-inside: avoid;
  }
  .settings-index .settings-section-label {
    break-after: avoid;
    margin-top: 4px;
  }
  .settings-index .money-overview {
    column-span: all;
    margin-bottom: 26px;
  }
  /* Short sub-lists (the cottage list + staging test centre) read as ONE
       column — two columns just split a 3-row list from its action row. */
  #accom-list.settings-index,
  #testcentre-list.settings-index {
    column-count: 1;
    max-width: 640px;
  }
}
/* "How it works" disclosure — keeps background explanations one tap away so
           admin panels lead with the controls instead of a wall of text. */
.help-disclosure {
  max-width: 640px;
  margin: 14px 0 0;
}
.help-disclosure > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  -webkit-tap-highlight-color: transparent;
}
.help-disclosure > summary::-webkit-details-marker {
  display: none;
}
.help-disclosure > summary::after {
  content: "▾";
  font-size: 0.7rem;
  transition: transform 0.2s var(--fluid-bezier);
}
.help-disclosure[open] > summary::after {
  transform: rotate(180deg);
}
.help-disclosure > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.content-edit-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  max-width: 640px;
  flex-wrap: wrap;
}
/* Per-cottage Photos rows: thumbnail + label + action buttons that reflow neatly
   on narrow screens (the buttons drop to a full-width row under the thumbnail). */
.accom-photo-row .accom-photo-label {
  flex: 1 1 120px;
  min-width: 100px;
  font-size: 0.85rem;
  color: var(--text-light);
}
.accom-photo-row .accom-photo-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
@media (max-width: 640px) {
  .accom-photo-row {
    align-items: center;
  }
  .accom-photo-row .accom-photo-actions {
    width: 100%;
  }
}

/* Test centre → Preview as guest: the banner shown across a preview tab */
#preview-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  background: #1b1d23;
  color: #f4f5f7;
  border-bottom: 2px solid #d6a785;
  box-shadow: var(--shadow-soft);
}
#preview-banner button {
  background: #d6a785;
  color: #1a191b;
  border: 0;
  border-radius: 8px;
  padding: 5px 14px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}
body.has-preview-banner {
  padding-top: 40px;
}

/* Staging site banner (shown on staging.<domain> only) */
#staging-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  text-align: center;
  padding: 7px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: #8a5a00;
  color: #fff;
  border-bottom: 2px solid var(--warn-text);
  box-shadow: var(--shadow-soft);
}
body.has-staging-banner {
  padding-top: 38px;
}

/* The My-Stays "Account & settings" button is the desktop entry to the account
   screen; on the mobile shell the dock's Account tab handles it, so hide it there. */
body.guest-app:not(.owner-mode) #acct-settings-btn {
  display: none;
}

/* Full-page guest Sign-in / Account / Security screens on DESKTOP too (match the
   mobile shell). On mobile, body.guest-app already does this; the :not(.guest-app)
   guard means these rules only cover the wide/desktop layout. Admin is excluded. */
body:not(.guest-app):not(.owner-mode) #guest-auth-modal,
body:not(.guest-app):not(.owner-mode) #guest-details-modal,
body:not(.guest-app):not(.owner-mode) #guest-security-modal {
  z-index: 1390;
  background: var(--dark-grey);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  overflow-y: auto;
  padding: clamp(48px, 8vh, 96px) clamp(16px, 5vw, 32px) clamp(32px, 6vh, 64px);
}
/* On desktop these guest dialogs are centred glass cards (the .glass-panel styling
   gives the frosted background, border and shadow) — just constrain the width so
   the form reads as a focused card, not bare content floating on the page. Below the
   split breakpoint it's a single focused column; the ≥980px rule below shares this
   exact selector so it cleanly widens to the two-column card (no #id here, or it would
   out-rank the split rule on specificity and pin the card at 420px). */
body:not(.guest-app):not(.owner-mode) .modal-box.auth-split {
  max-width: 420px;
}
/* ---- Lit glass rims (design polish) ----
   A 1px gradient stroke — brightest along the top edge, warming to a faint
   rose-gold at the base — drawn in the border ring of the cottage/experience
   cards and the two hero glass panels. The @supports guard matters: without
   mask-composite the pseudo would paint a gradient OVER the content, so
   browsers lacking it simply keep the flat border. */
@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
  .card {
    position: relative;
  }
  .card::before,
  .hero-content::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.22),
      rgba(255, 255, 255, 0.05) 40%,
      rgba(214, 167, 133, 0.14) 100%
    );
    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
  }
  body.light-mode .card::before,
  body.light-mode .hero-content::before {
    background: linear-gradient(
      180deg,
      rgba(20, 22, 34, 0.16),
      rgba(20, 22, 34, 0.04) 40%,
      rgba(214, 167, 133, 0.22) 100%
    );
  }
}
/* Soft rose-gold aura behind the availability panel, and a warmer card hover. */
.home-availability .hero-content {
  box-shadow:
    var(--shadow-panel),
    0 0 70px -22px var(--accent-soft);
}
@media (hover: hover) {
  .card:hover {
    box-shadow:
      0 15px 45px rgba(0, 0, 0, 0.4),
      0 0 44px -18px var(--accent-soft);
  }
}

/* ---- Section-title flourish (motion polish) ----
   Centred homepage titles carry a short gradient rule that draws in as the
   title scroll-reveals (the .reveal/.in-view system in app.js; static when
   JS or motion is unavailable, so nothing depends on it). */
h2.section-title.text-center {
  position: relative;
  padding-bottom: 16px;
}
h2.section-title.text-center::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 56px;
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
html.js-reveal h2.section-title.text-center.reveal::after {
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.8s var(--fluid-bezier) 0.25s;
}
html.js-reveal h2.section-title.text-center.reveal.in-view::after {
  transform: translateX(-50%) scaleX(1);
}

/* The login brand panel only shows on the wide split layout below; on mobile and
   in the guest-app full-page view the form stays single-column (unchanged). */
.auth-brand {
  display: none;
}
/* The close (×) row: on desktop the negative margins tuck it into the box padding.
   On the mobile app shell the box has no padding, so those negatives push it past
   the edge where overflow clips its top-right — the guest-app override neutralises them. */
.auth-close-row {
  display: flex;
  justify-content: flex-end;
  margin: -6px -6px 8px 0;
}
.auth-form-col {
  width: 100%;
}
/* Desktop: premium split-screen — a coastal brand panel beside the form. Shared by
   the login modal and the guest "Your details" / "Account & security" modals (any
   .modal-box.auth-split). Mobile & the guest-app full-page view stay single-column. */
@media (min-width: 900px) {
  body:not(.guest-app):not(.owner-mode) .modal-box.auth-split {
    max-width: min(860px, 94vw);
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: stretch;
  }
  body:not(.guest-app):not(.owner-mode) .auth-split .auth-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    flex: 0 0 40%;
    min-width: 0;
    padding: 44px 38px;
    color: #fff;
    background:
      linear-gradient(155deg, rgba(22, 17, 12, 0.3), rgba(22, 17, 12, 0.82)), var(--dark-grey);
    background-image:
      linear-gradient(155deg, rgba(22, 17, 12, 0.3), rgba(22, 17, 12, 0.82)),
      var(--hero-img, url("hero.jpg"));
    background-size: cover;
    background-position: center;
  }
  .auth-split .auth-brand-logo {
    width: 52px;
    height: 52px;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
  }
  .auth-split .auth-brand-copy h2 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: 2.1rem;
    line-height: 1.12;
    letter-spacing: -0.5px;
    margin: 0 0 12px;
    color: #fff;
  }
  .auth-split .auth-brand-copy p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.86);
    margin: 0;
  }
  body:not(.guest-app):not(.owner-mode) .auth-split .auth-form-col {
    flex: 1 1 60%;
    min-width: 0;
    padding: 36px 40px;
    max-height: 88vh;
    overflow-y: auto;
  }
}

/* ============================================================
           UNIFIED LIQUID-GLASS INTERACTIONS
           One motion language for every interactive control: the same
           --fluid-bezier (colour/bg/border) + --spring (transform) easing, a
           subtle hover lift + soft shadow on pointer devices, and a consistent
           press. Appended last so it standardises the scattered per-component
           rules. Reduced motion is already neutralised globally (the * rule near
           the top). .card / .btn-glass keep their own larger reference lift;
           these bring every other control in line with the same feel. Each
           element keeps its own colour/background :hover — we only add the
           transform + shadow + press. .gallery-nav / .lightbox-nav are handled
           separately because they carry a translateY(-50%) centring transform. */
.btn-sm,
.btn-edit,
.toggle-btn,
.account-btn,
.menu-toggle,
.hub-tile,
.chat-chip,
.amenity-add,
.amenity-remove,
.hs-field,
.hs-step,
.hs-chip,
.hs-mode-btn,
.hs-opt,
.dp-day,
.dp-nav-btn,
.avail-nav,
.reviews-modal-close,
.lightbox-close,
.cancel-card,
.cal-refresh-btn,
.cal-add-btn {
  transition:
    background 0.35s var(--fluid-bezier),
    color 0.35s var(--fluid-bezier),
    border-color 0.35s var(--fluid-bezier),
    transform 0.35s var(--spring),
    box-shadow 0.35s var(--fluid-bezier);
}
@media (hover: hover) {
  .btn-sm:hover,
  .btn-edit:hover,
  .toggle-btn:hover,
  .account-btn:hover,
  .menu-toggle:hover,
  .hub-tile:hover,
  .chat-chip:hover,
  .amenity-add:hover,
  .amenity-remove:hover,
  .hs-field:hover,
  .hs-step:hover,
  .hs-chip:hover,
  .hs-mode-btn:hover,
  .hs-opt:hover,
  .dp-day:hover,
  .dp-nav-btn:hover,
  .avail-nav:hover,
  .reviews-modal-close:hover,
  .lightbox-close:hover,
  .cancel-card:hover,
  .cal-refresh-btn:hover,
  .cal-add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  }
}
.btn-sm:active,
.btn-edit:active,
.toggle-btn:active,
.account-btn:active,
.menu-toggle:active,
.hub-tile:active,
.chat-chip:active,
.amenity-add:active,
.amenity-remove:active,
.hs-field:active,
.hs-step:active,
.hs-chip:active,
.hs-mode-btn:active,
.hs-opt:active,
.dp-day:active,
.dp-nav-btn:active,
.avail-nav:active,
.reviews-modal-close:active,
.lightbox-close:active,
.cancel-card:active,
.cal-refresh-btn:active,
.cal-add-btn:active {
  transform: scale(0.96);
}
/* Full-width list rows: same easing + a gentle press, but no lift. */
.settings-row,
.msg-thread-row,
.bo-search-hit {
  transition:
    background 0.35s var(--fluid-bezier),
    color 0.35s var(--fluid-bezier),
    transform 0.35s var(--spring),
    box-shadow 0.35s var(--fluid-bezier);
}
.settings-row:active,
.msg-thread-row:active,
.bo-search-hit:active {
  transform: scale(0.997);
}

/* ============================================================
           COASTAL FRESH — the guest light theme's finishing layer.
           Scoped to the light theme (default for guests) so the dark theme
           and all admin views are untouched. Softer hero, airier type,
           photo-led frameless cards.
           ============================================================ */
/* Softer, cool-tinted hero scrim — the headline sits in a glass panel,
           so the photo can stay bright and open instead of dimmed. */
html.theme-light-boot .hero::after,
body.light-mode .hero::after {
  background:
    radial-gradient(120% 80% at 50% 24%, transparent 56%, rgba(20, 40, 54, 0.12) 100%),
    linear-gradient(to top, rgba(20, 40, 54, 0.22), transparent 58%);
}
html.theme-light-boot .hero-bg,
body.light-mode .hero-bg {
  filter: brightness(var(--hero-brightness)) saturate(1.04);
}
/* Hero headline panel: near-frameless frosted white, floats on the photo. */
body.light-mode #hero-headline-panel {
  background: rgba(255, 255, 255, 0.66);
  border-color: rgba(255, 255, 255, 0.6);
}
body.light-mode .hero-kicker {
  color: var(--sea);
}

/* --- Airier typography (guest-facing headings/leads only) --- */
body.light-mode .hero h1 {
  letter-spacing: -1px;
  font-weight: 500;
}
body.light-mode .hero p {
  color: var(--text-muted);
}
body.light-mode .section-title {
  letter-spacing: -0.4px;
}
body.light-mode .section-kicker {
  letter-spacing: 3px;
  color: var(--sea);
}
body.light-mode .lead {
  line-height: 1.75;
}
body.light-mode .heritage-num {
  color: var(--text-light);
}

/* --- Photo-led, frameless cards (light) --- */
body.light-mode .card {
  background: #fff;
  border: 1px solid rgba(28, 46, 58, 0.06);
  box-shadow: 0 10px 30px rgba(30, 54, 72, 0.08);
}
@media (hover: hover) {
  body.light-mode .card:hover {
    box-shadow: 0 20px 46px rgba(30, 54, 72, 0.16);
  }
}
/* The photo fills the card top edge-to-edge; the frame gets out of the way. */
body.light-mode .card-img-wrap,
body.light-mode .card-img {
  border-radius: calc(var(--r-panel) - 16px);
}
body.light-mode .trust-strip {
  background: rgba(255, 255, 255, 0.66);
}
/* Warm sand dividers instead of the dark theme's faint white lines. */
body.light-mode .prop-divider,
body.light-mode .section-title-underline {
  opacity: 0.9;
}
/* The lit-rim gradient on cards/hero reads as glare on white — soften it. */
body.light-mode .card::before,
body.light-mode .hero-content::before {
  opacity: 0.5;
}

/* ---- Motion & life (design refresh 2/2) ---- */
/* Hero headline panel parallax: rises slightly slower than the page so more
           of the photo reveals as you scroll. --parallax set by initHeroParallax;
           0 by default, so no-JS / reduced-motion just sit still. */
#hero-headline-panel {
  transform: translateY(var(--parallax, 0));
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  #hero-headline-panel {
    transform: none;
  }
}
/* Springier scroll reveals — a touch more travel and spring on the way in. */
html.js-reveal .reveal {
  transform: translateY(26px);
  transition:
    opacity 0.8s var(--fluid-bezier),
    transform 0.9s var(--spring);
}
/* Seasonal accent (set by applySeasonalAccent) — a subtle secondary tint on
           the section-title underline + scroll cue, so the site quietly feels current.
           Falls back to the rose-gold accent where the var isn't set. */
h2.section-title.text-center::after {
  background: linear-gradient(90deg, transparent, var(--season-accent, var(--accent)), transparent);
}
body.light-mode .hero-scroll-cue {
  color: var(--season-accent, var(--sea));
}

/* Owner email recipients list (Settings → Notifications) */
.notify-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--glass-border);
}
.notify-row:last-child {
  border-bottom: none;
}
.notify-addr {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--text-light);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notify-primary-tag {
  font-size: 0.64rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--glass-hover);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  flex-shrink: 0;
}
.notify-remove {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.2s var(--fluid-bezier),
    color 0.2s var(--fluid-bezier);
}
.notify-remove:hover {
  background: rgba(229, 115, 115, 0.14);
  color: var(--danger);
  border-color: var(--danger);
}