/* ─── TOKENS ──────────────────────────────────────────── */
/* Light "paper white" shell: page bg is --paper; --sand* = subtle fills on white. */
:root {
  --paper:   #ffffff;
  --sand:    #f2f0ec;
  --sand-1:  #f0edea;
  --sand-2:  #e6e2dc;
  --sand-3:  #ccc6bc;
  --ink:     #1a1714;
  --ink-1:   #1a1714;
  --ink-2:   #3d3830;
  --ink-3:   #6b6459;
  --terracotta: #c0603a;
  --terra-lt:   #e8c5b5;
  --terra-dim:  rgba(192,96,58,.10);
  --sky:     #4a7fa5;
  --sky-lt:  #d0e4f0;
  --sage:    #5a7a5e;
  --sage-lt: #d0e0d2;
  --border:  #e4e0d8;
  --white:   #ffffff;
  --shadow-sm:  0 1px 3px rgba(26,23,20,.06), 0 1px 2px rgba(26,23,20,.04);
  --shadow-md:  0 4px 16px rgba(26,23,20,.08), 0 2px 6px rgba(26,23,20,.05);
  --shadow-lg:  0 12px 40px rgba(26,23,20,.10), 0 4px 12px rgba(26,23,20,.06);
  /* Softer, modern corners — not fully pill / super-rounded */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --sidebar-w: 252px;
  /* Main column behind panels — warm paper (matches sb-role + cards) */
  --app-canvas: var(--sand-1);
}

/* ─── RESET ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Outfit', sans-serif; background: var(--paper); color: var(--ink); min-height: 100vh; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: inherit; }
img { display: block; }

/* ─── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sand-3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }

/* ══════════════════════════════════════════════════════
   LANDING PAGE
══════════════════════════════════════════════════════ */
#landing { display: block; }
#app     { display: none; }

/* ─── NAV ─────────────────────────────────────────────── */
.ln-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px;
  height: 68px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: all .3s;
}

.ln-logo {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}

.ln-logo-mark {
  width: 34px; height: 34px;
  background: var(--terracotta);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

.ln-links {
  display: flex; align-items: center; gap: 32px;
  list-style: none;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-2);
}

.ln-links a:hover { color: var(--terracotta); }

.ln-cta {
  display: flex; align-items: center; gap: 10px;
}

/* ─── HERO ────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 68px;
  overflow: hidden;
}

.hero-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 64px 80px 80px;
  position: relative;
}

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--terracotta);
  margin-bottom: 24px;
}

.hero-eyebrow::before {
  content: '';
  width: 28px; height: 1.5px;
  background: var(--terracotta);
  display: inline-block;
}

.hero-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(40px, 4.5vw, 62px);
  font-weight: 500;
  line-height: 1.10;
  color: var(--ink);
  margin-bottom: 24px;
  letter-spacing: -.5px;
}

.hero-h1 em {
  font-style: italic;
  color: var(--terracotta);
}

.hero-sub {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 420px;
  margin-bottom: 40px;
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-stats {
  display: flex; gap: 40px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.hero-stat-val {
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
}

.hero-stat-lbl {
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 4px;
  letter-spacing: .3px;
}

.hero-right {
  background: var(--sand-1);
  position: relative;
  overflow: hidden;
}

.hero-img-grid {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
}

.hero-img-cell {
  overflow: hidden;
  position: relative;
}

.hero-img-cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s ease;
}

.hero-img-cell:hover img { transform: scale(1.04); }

.hero-overlay-card {
  position: absolute;
  bottom: 32px; left: 32px;
  background: white;
  border-radius: var(--r-md);
  padding: 18px 22px;
  box-shadow: var(--shadow-lg);
  display: flex; gap: 14px; align-items: center;
  min-width: 240px;
  animation: floatUp .8s ease .5s both;
}

@keyframes floatUp {
  from { opacity:0; transform: translateY(16px); }
  to   { opacity:1; transform: translateY(0); }
}

.overlay-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--terra-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.overlay-val {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 600; line-height: 1;
  color: var(--ink);
}

.overlay-lbl { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* ─── SECTION COMMON ──────────────────────────────────── */
.section { padding: 96px 80px; }
.section-alt { background: var(--white); }

.section-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--terracotta);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.section-eyebrow::before { content:''; width:20px; height:1.5px; background:var(--terracotta); }

.section-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.3px;
  color: var(--ink);
  max-width: 520px;
  margin-bottom: 16px;
}

.section-h2 em { font-style: italic; color: var(--terracotta); }

.section-sub {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
  max-width: 520px;
  margin-bottom: 48px;
}

/* ─── FEATURES ────────────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.feature-card {
  background: var(--white);
  padding: 40px 36px;
  transition: background .2s;
}

.feature-card:hover { background: var(--sand); }

.feature-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  margin-bottom: 22px;
  border: 1px solid var(--border);
  background: var(--sand);
}

.feature-h3 {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 500;
  color: var(--ink);
  margin-bottom: 10px;
}

.feature-p {
  font-size: 14px; font-weight: 300;
  line-height: 1.7; color: var(--ink-2);
}

/* ─── ROLES ───────────────────────────────────────────── */
.roles-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: center; }

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

.role-tab {
  padding: 20px 24px;
  border-radius: var(--r-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .2s;
  display: flex; align-items: center; gap: 16px;
}

.role-tab:hover { background: var(--sand-2); }
.role-tab.active { background: var(--white); border-color: var(--border); box-shadow: var(--shadow-sm); }

.role-tab-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.role-tab-name { font-size: 15px; font-weight: 500; color: var(--ink); }
.role-tab-desc { font-size: 13px; color: var(--ink-3); margin-top: 2px; }

.role-preview {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.role-preview-bar {
  background: var(--sand-2);
  border-bottom: 1px solid var(--border);
  padding: 12px 20px;
  display: flex; align-items: center; gap: 8px;
}

.dot { width: 10px; height: 10px; border-radius: 50%; }

.role-preview-content { padding: 28px; }

.preview-stat-row {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 20px;
}

.preview-stat {
  background: var(--sand);
  border-radius: var(--r-sm);
  padding: 14px 16px;
  border: 1px solid var(--border);
}

.prev-val {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 600; color: var(--ink); line-height: 1;
}

.prev-lbl { font-size: 11px; color: var(--ink-3); margin-top: 4px; letter-spacing: .5px; }

.preview-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--sand);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--ink-2);
}

.preview-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ─── PROPERTIES PREVIEW ──────────────────────────────── */
.props-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.prop-preview-card {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: all .25s;
}

.prop-preview-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: var(--terra-lt);
}

.prop-preview-img {
  width: 100%; height: 200px;
  object-fit: cover;
  background: var(--sand-2);
}

.prop-preview-body { padding: 20px; }

.prop-preview-type {
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--terracotta);
  margin-bottom: 6px;
}

.prop-preview-name {
  font-family: 'Playfair Display', serif;
  font-size: 17px; font-weight: 500;
  color: var(--ink); line-height: 1.3;
  margin-bottom: 6px;
}

.prop-preview-loc {
  font-size: 12px; color: var(--ink-3); margin-bottom: 14px;
}

.prop-preview-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px; font-weight: 500;
  color: var(--ink);
}

.prop-preview-price span { font-size: 12px; color: var(--ink-3); font-weight: 400; }

/* ─── CTA SECTION ─────────────────────────────────────── */
.cta-section {
  background: var(--ink);
  color: white;
  padding: 96px 80px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}

.cta-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 3vw, 46px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.3px;
  color: white;
  margin-bottom: 16px;
}

.cta-h2 em { font-style: italic; color: var(--terra-lt); }

.cta-sub {
  font-size: 16px; font-weight: 300;
  line-height: 1.7; color: rgba(255,255,255,.65);
  margin-bottom: 32px;
}

.cta-form {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  padding: 32px;
}

.cta-form-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 500;
  color: white; margin-bottom: 20px;
}

.cta-input {
  width: 100%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  color: white;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  outline: none;
  margin-bottom: 12px;
  transition: border-color .2s;
}

.cta-input:focus { border-color: var(--terra-lt); }
.cta-input::placeholder { color: rgba(255,255,255,.35); }

/* ─── FOOTER ──────────────────────────────────────────── */
.ln-footer {
  background: var(--ink-2);
  color: rgba(255,255,255,.5);
  padding: 48px 80px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
}

.footer-logo {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 500;
  color: rgba(255,255,255,.85);
}

.footer-links { display: flex; gap: 24px; }
.footer-links a:hover { color: rgba(255,255,255,.85); }

/* ══════════════════════════════════════════════════════
   BUTTONS (shared)
══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px;
  border-radius: var(--r-lg);
  font-family: 'Outfit', sans-serif;
  font-size: 14px; font-weight: 500;
  border: none;
  transition: all .2s;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary { background: var(--terracotta); color: white; }
.btn-primary:hover { background: #a8502d; box-shadow: 0 4px 14px rgba(192,96,58,.3); transform: translateY(-1px); }

.btn-outline-dk { background: transparent; color: var(--ink); border: 1.5px solid var(--ink-2); }
.btn-outline-dk:hover { background: var(--ink); color: white; }

.btn-outline-lt { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,.4); }
.btn-outline-lt:hover { background: rgba(255,255,255,.1); }

.btn-ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--sand-2); }

.btn-sm { padding: 7px 16px; font-size: 12px; }
.btn-lg { padding: 14px 32px; font-size: 15px; }
.btn-icon { padding: 10px; border-radius: 50%; }

/* ══════════════════════════════════════════════════════
   ADMIN APP
══════════════════════════════════════════════════════ */
.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--app-canvas);
}

/* ─── SIDEBAR ─────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: color-mix(in srgb, var(--white) 78%, var(--app-canvas) 22%);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.sb-header {
  padding: 22px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}

.sb-header--home {
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}
.sb-header--home:hover {
  background: color-mix(in srgb, var(--white) 70%, var(--sand) 30%);
}
.sb-header--home:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: -2px;
}

.sb-logo-mark {
  width: 34px; height: 34px;
  background: var(--terracotta);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  color: white; font-size: 16px; font-weight: 700; flex-shrink: 0;
}

.sb-brand {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 600; color: var(--ink);
  line-height: 1.2;
}

.sb-brand span {
  display: block; font-family: 'Outfit', sans-serif;
  font-size: 10px; font-weight: 400; color: var(--ink-3);
  letter-spacing: 1px; text-transform: uppercase; margin-top: 1px;
}

/* Role preview (demo persona switcher) */
.sb-role-block {
  margin: 12px 12px 0;
  padding: 12px 12px 14px;
  background: color-mix(in srgb, var(--white) 48%, var(--sand) 52%);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px rgba(26, 23, 20, 0.04);
}

.sb-role-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.sb-role-title {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.sb-role-pill {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: color-mix(in srgb, var(--white) 55%, var(--app-canvas) 45%);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  padding: 3px 8px;
  border-radius: var(--r-lg);
}

.sb-role-desc {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-3);
}

.sb-role-desc strong { color: var(--ink-2); font-weight: 600; }

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

.sb-role-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 52px;
  padding: 8px 4px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.65);
  border-radius: var(--r-sm);
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
  text-align: center;
}

.sb-role-btn:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.sb-role-ico {
  display: flex;
  width: 22px;
  height: 22px;
  color: var(--ink-3);
  transition: color 0.15s;
}

.sb-role-ico svg { width: 100%; height: 100%; }

.sb-role-txt { line-height: 1.15; }

.sb-role-btn:hover:not(.active) {
  background: #fff;
  border-color: var(--border);
  color: var(--ink);
}

.sb-role-btn:hover:not(.active) .sb-role-ico { color: var(--terracotta); }

.sb-role-btn.active {
  background: linear-gradient(145deg, var(--terracotta) 0%, #a8502d 100%);
  color: #fff;
  border-color: rgba(192, 96, 58, 0.35);
  box-shadow: 0 4px 12px rgba(192, 96, 58, 0.28);
}

.sb-role-btn.active .sb-role-ico { color: rgba(255, 255, 255, 0.95); }

.sb-role-btn--admin:not(.active) {
  background: linear-gradient(180deg, rgba(74, 127, 165, 0.12) 0%, rgba(74, 127, 165, 0.06) 100%);
  border-color: rgba(74, 127, 165, 0.22);
}

.sb-role-btn--admin.active {
  background: linear-gradient(145deg, #3d5a73 0%, #2c4255 100%);
  box-shadow: 0 4px 12px rgba(44, 66, 85, 0.35);
}

/* Nav */
.sb-nav { flex: 1; padding: 12px 10px; overflow-y: auto; }

.sb-section-lbl {
  font-size: 9px; font-weight: 600; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink-3);
  padding: 10px 10px 4px;
}

.sb-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: 13px; font-weight: 400;
  color: var(--ink-2);
  cursor: pointer; transition: all .15s;
  position: relative;
}

.sb-item:hover { background: var(--sand); color: var(--ink); }
.sb-item.active { background: var(--terra-dim); color: var(--terracotta); font-weight: 500; }
.sb-item.active svg { opacity: 1; }

.sb-item svg { width: 16px; height: 16px; opacity: .6; flex-shrink: 0; }
.sb-item.active svg, .sb-item:hover svg { opacity: 1; }

.sb-badge {
  margin-left: auto;
  background: var(--terracotta);
  color: white;
  font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: var(--r-lg);
  min-width: 18px; text-align: center;
}

.sb-badge.blue { background: var(--sky); }
.sb-badge.sage { background: var(--sage); }
.sb-badge.purple { background: #7c5cbf; }

/* User footer */
.sb-user {
  padding: 14px 14px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
}

.sb-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sb-user-text { min-width: 0; flex: 1; }

.sb-user-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding-top: 2px;
  border-top: 1px dashed var(--border);
}

.sb-user-link {
  padding: 0;
  border: none;
  background: none;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--terracotta);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(192, 96, 58, 0.35);
}

.sb-user-link:hover {
  color: #a8502d;
  text-decoration-color: currentColor;
}

.sb-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--terracotta), #e8875a);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: white; flex-shrink: 0;
  font-family: 'Playfair Display', serif;
}

.sb-user-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.sb-user-role { font-size: 11px; color: var(--ink-3); }

/* ─── MAIN ────────────────────────────────────────────── */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--app-canvas);
}

/* Topbar */
.topbar {
  height: 60px;
  background: color-mix(in srgb, var(--white) 88%, var(--app-canvas) 12%);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  padding: 0 28px; gap: 14px;
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow-sm);
}

.topbar-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 500;
  color: var(--ink); flex: 1;
}

.topbar-title span { color: var(--terracotta); }

.topbar-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--sand);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 7px 16px;
  width: 220px;
}

.topbar-search input {
  background: transparent; border: none; outline: none;
  font-family: 'Outfit', sans-serif;
  font-size: 13px; color: var(--ink); width: 100%;
}

.topbar-search input::placeholder { color: var(--ink-3); }
.topbar-search svg { color: var(--ink-3); flex-shrink: 0; }

.icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink-2); transition: all .15s;
  position: relative;
}

.icon-btn:hover { background: var(--sand); border-color: var(--sand-3); }

.notif-dot {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px;
  background: var(--terracotta); border-radius: 50%;
  border: 2px solid white;
}

.notif-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--terracotta); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
  border-radius: 10px; border: 2px solid #fff;
  font-family: 'Outfit', sans-serif;
}

/* ─── GLOBAL SEARCH DROPDOWN ─────────────────────────── */
.topbar-search-wrap { position: relative; flex: 0 1 320px; }
.topbar-search-wrap .topbar-search { width: 100%; cursor: text; }
.topbar-search__kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--ink-3);
  background: #fff; border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; margin-left: 4px;
  box-shadow: 0 1px 0 var(--border);
}

.gs-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg, 0 8px 24px rgba(17,24,39,.12));
  max-height: 420px; overflow-y: auto;
  display: none; z-index: 650;
  padding: 4px;
}
.gs-results.open { display: block; }

.gs-section {
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px;
  color: var(--ink-3); text-transform: uppercase;
  padding: 10px 12px 4px;
}

.gs-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 6px;
  cursor: pointer; transition: background .12s;
}
.gs-item:hover, .gs-item.active { background: var(--sand); }
.gs-item__icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--sand-2); display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.gs-item__main { flex: 1; min-width: 0; }
.gs-item__title { font-size: 13px; color: var(--ink); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-item__sub { font-size: 11px; color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-item__chev { color: var(--ink-3); font-size: 14px; opacity: .5; }

.gs-empty {
  padding: 30px 16px; text-align: center;
  color: var(--ink-3); font-size: 13px;
}
.gs-hint {
  padding: 14px 16px; color: var(--ink-3); font-size: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.gs-hint kbd {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  background: var(--sand); border: 1px solid var(--border); border-radius: 3px;
  padding: 1px 5px; color: var(--ink-2);
}

/* ─── NOTIFICATION PANEL ─────────────────────────────── */
.notif-panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 380px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 36px rgba(17,24,39,.16);
  display: none; z-index: 650;
  overflow: hidden;
}
.notif-panel.open { display: block; }

.notif-panel__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}

.notif-panel__tabs {
  display: flex; gap: 2px; padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--sand);
}
.notif-tab {
  flex: 1; background: transparent; border: none; cursor: pointer;
  font-family: 'Outfit', sans-serif; font-size: 12px; color: var(--ink-2);
  padding: 6px 8px; border-radius: 6px; transition: all .15s;
}
.notif-tab.active { background: #fff; color: var(--ink); font-weight: 600;
  box-shadow: 0 1px 3px rgba(17,24,39,.08); }
.notif-tab:hover { color: var(--ink); }

.notif-panel__body {
  max-height: 440px; overflow-y: auto;
}

.notif-row {
  display: flex; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .12s;
  position: relative;
}
.notif-row:hover { background: var(--sand); }
.notif-row:last-child { border-bottom: none; }
.notif-row.unread::before {
  content: ''; position: absolute; left: 5px; top: 18px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--terracotta);
}
.notif-row__icon {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
  background: var(--sand-2);
}
.notif-row__icon.alert   { background: #fde4d9; }
.notif-row__icon.msg     { background: #dfeaf3; }
.notif-row__icon.clean   { background: var(--sage-lt); }
.notif-row__icon.booking { background: #fff3d6; }
.notif-row__main { flex: 1; min-width: 0; }
.notif-row__title { font-size: 13px; color: var(--ink); margin-bottom: 2px; }
.notif-row__sub   { font-size: 11px; color: var(--ink-3); }
.notif-row__time  { font-size: 10px; color: var(--ink-3); margin-top: 3px; }

.notif-panel__ft {
  padding: 10px 14px; text-align: center;
  border-top: 1px solid var(--border); background: var(--sand);
}
.notif-panel__ft a {
  font-size: 12px; color: var(--terracotta); font-weight: 600;
  text-decoration: none;
}
.notif-panel__ft a:hover { text-decoration: underline; }

.notif-empty {
  padding: 36px 16px; text-align: center;
  color: var(--ink-3); font-size: 13px;
}

/* Content area */
.content {
  flex: 1;
  padding: 28px;
  overflow-y: auto;
  /* Single warm column — .main is same tone; no white band */
  background: transparent;
}

/* Panel switching */
.panel { display: none; }
.panel.active { display: block; }

/* ─── CARDS ───────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}

.card-title {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 500; color: var(--ink);
}

/* ─── STATS GRID ──────────────────────────────────────── */
.stats-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 14px; margin-bottom: 24px;
}

.stat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s;
}

.stat-card[role="button"]:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--terra-lt); }
.stat-card[role="button"]::before {
  content: '›';
  position: absolute; right: 14px; bottom: 10px;
  font-size: 20px; color: var(--ink-3); opacity: 0;
  transition: opacity .2s, transform .2s;
  font-family: 'Outfit', sans-serif;
}
.stat-card[role="button"]:hover::before { opacity: .55; transform: translateX(3px); }
.stat-card[role="button"]:focus-visible { outline: 2px solid var(--terra-lt); outline-offset: 2px; }
.activity-item[role="button"]:focus-visible { outline: 2px solid var(--terra-lt); outline-offset: -2px; }

.stat-label {
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 10px;
}

.stat-value {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 34px; font-weight: 600; color: var(--ink);
  line-height: 1;
}

.stat-value .unit { font-size: 14px; color: var(--ink-3); font-family: 'Outfit', sans-serif; font-weight: 300; }
.stat-change { font-size: 12px; color: var(--sage); margin-top: 8px; }
.stat-change.down { color: var(--terracotta); }

.stat-icon {
  position: absolute; top: 18px; right: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; opacity: .15;
  color: var(--ink);
  pointer-events: none;
}

/* ─── RECENT LAYOUT ───────────────────────────────────── */
.recent-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-bottom: 24px;
}

.activity-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}

.activity-item:hover { background: var(--sand); }
.activity-item:last-child { border-bottom: none; }

.act-icon {
  width: 36px; height: 36px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}

.act-icon.clean { background: var(--sage-lt); }
.act-icon.repair { background: #fde8cc; }
.act-icon.msg { background: var(--sky-lt); }
.act-icon.booking { background: var(--terra-dim); }
.act-icon.alert { background: #fde8e8; }

/* Lucide-style icons from vms-ui.js */
.vms-ico { display: inline-flex; align-items: center; justify-content: center; line-height: 0; color: currentColor; vertical-align: middle; }
.vms-ico__svg { display: block; }
.stat-icon .vms-ico--stat { color: currentColor; }
.act-icon .vms-ico--act { color: var(--ink-2); }
.act-icon.alert .vms-ico--act { color: #c2410c; }
.act-icon.booking .vms-ico--act { color: #a84516; }
.act-icon.clean .vms-ico--act { color: #2d5a32; }
.act-icon.msg .vms-ico--act { color: #1d4ed8; }
.act-icon.repair .vms-ico--act { color: #a16207; }
.act-chev { display: flex; align-items: center; align-self: center; padding-right: 4px; color: var(--ink-3); opacity: 0.5; }
.dash-wo-done { min-width: 2.25rem; padding-left: 0.3rem; padding-right: 0.3rem; border-radius: 10px; }
.dash-wo-done .vms-ico--wo-done { color: #3d7a44; }
.dash-wo-done:hover { background: color-mix(in srgb, #3d7a44 10%, var(--white)) !important; border-color: color-mix(in srgb, #3d7a44 25%, var(--border)) !important; }
.dash-wo-done:hover .vms-ico--wo-done { color: #14532d; }

/* Dashboard — pending work orders (light modern) */
.dash-pending-list {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#dashPending .dash-wo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--border) 50%, #fff 50%);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
#dashPending .dash-wo-row:hover {
  background: color-mix(in srgb, #fff 92%, var(--sand) 8%);
  border-color: color-mix(in srgb, var(--border) 60%, var(--terracotta) 12%);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.07);
  transform: translateY(-0.5px);
}
#dashPending .dash-wo-row .prio-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 2px color-mix(in srgb, #fff 90%, var(--border) 10%);
}
.dash-wo-row__body { flex: 1; min-width: 0; }
.dash-wo-row__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.dash-wo-row__meta {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 3px;
  line-height: 1.4;
  font-weight: 400;
}
.dash-wo-row__id {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  opacity: 0.9;
}
#dashPending .pill.pill--sm {
  font-size: 10px;
  padding: 2px 8px;
  flex-shrink: 0;
  border: none;
  font-weight: 600;
}
#dashPending .pill.pending   { background: color-mix(in srgb, #fff8e6 80%, #fff 20%); color: #9a6a12; }
#dashPending .pill.progress  { background: color-mix(in srgb, var(--sky-lt) 70%, #fff 30%); color: #1e5a7a; }
#dashPending .pill.urgent    { background: color-mix(in srgb, #fde8e8 75%, #fff 25%); color: #8a1a1a; }

@media (prefers-reduced-motion: reduce) {
  #dashPending .dash-wo-row,
  #dashPending .dash-wo-row:hover { transform: none; transition: none; }
}

#dashPendingBtn.dash-pending-cta,
.card-header #dashPendingBtn.dash-pending-cta {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600; letter-spacing: 0.01em;
}
.vms-ico--dash-va { color: var(--ink-3); transition: color .15s, transform .15s; }
#dashPendingBtn.dash-pending-cta:hover .vms-ico--dash-va { color: var(--terracotta); }

.pill .vms-ico--pill-ic { flex-shrink: 0; opacity: 0.95; }
.pill .pill-lbl { line-height: 1.2; }
.pill.urgent .vms-ico--pill-ic { color: #8a1a1a; }
.pill.progress .vms-ico--pill-ic { color: #1e5a7a; }
.pill.pending .vms-ico--pill-ic { color: #9a6a0a; }

.act-text { flex: 1; min-width: 0; }
.act-main { font-size: 13px; color: var(--ink); line-height: 1.4; }
.act-main strong { color: var(--terracotta); font-weight: 500; }
.act-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.act-time { font-size: 10px; color: var(--ink-3); white-space: nowrap; flex-shrink: 0; }

/* ─── SECTION HEADER ──────────────────────────────────── */
.section-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}

.section-hd h2 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 20px; font-weight: 500; color: var(--ink);
}

.section-hd h2 span { color: var(--terracotta); }

/* ─── PROPERTIES GRID ─────────────────────────────────── */
.props-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 16px; margin-bottom: 24px;
}

.prop-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all .25s;
}

.prop-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--terra-lt);
}

.prop-img-wrap { position: relative; }

.prop-img {
  width: 100%; height: 172px;
  object-fit: cover; display: block;
  background: var(--sand-2);
}

.prop-type-badge {
  position: absolute; top: 10px; left: 10px;
  font-size: 9px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase;
  background: white;
  color: var(--ink);
  padding: 3px 8px; border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.prop-type-badge.house { background: var(--sky); color: white; }
.prop-type-badge.villa { background: #7c5cbf; color: white; }

.prop-status {
  position: absolute; top: 10px; right: 10px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid white; box-shadow: var(--shadow-sm);
}

.prop-status.available { background: var(--sage); }
.prop-status.booked { background: var(--terracotta); }
.prop-status.maintenance { background: #e8a830; }

.prop-price-tag {
  position: absolute; bottom: 10px; right: 10px;
  background: rgba(26,23,20,.85);
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; padding: 4px 10px;
  border-radius: 6px; backdrop-filter: blur(4px);
}

.prop-body { padding: 14px 16px; }

#app .prop-name {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 14px; font-weight: 500; color: var(--ink);
  margin-bottom: 4px; line-height: 1.3;
}

.prop-loc {
  font-size: 11px; color: var(--ink-3); margin-bottom: 10px;
  display: flex; align-items: center; gap: 4px;
}
.prop-loc-ico { display: inline-flex; flex-shrink: 0; color: var(--ink-3); opacity: 0.88; }
.prop-meta-ico { display: inline-flex; flex-shrink: 0; color: var(--ink-3); opacity: 0.88; }
.prop-actions .btn-ico { display: inline-flex; align-items: center; margin-right: 4px; }
.prop-actions .btn-sm { display: inline-flex; align-items: center; }

.prop-meta {
  display: flex; gap: 10px; margin-bottom: 12px;
}

.prop-meta-item {
  font-size: 11px; color: var(--ink-3);
  display: flex; align-items: center; gap: 3px;
}

.prop-actions {
  display: flex; gap: 6px;
  border-top: 1px solid var(--border); padding-top: 10px;
}

/* Read-only property cards when role has view but not edit on properties */
body.vms-access-ro-properties #featuredGrid .prop-actions,
body.vms-access-ro-properties #allPropsGrid .prop-actions {
  display: none !important;
}
body.vms-access-ro-properties #vmsGrid .vms-card-actions .btn-ghost {
  display: none !important;
}

/* ─── FILTER BAR ──────────────────────────────────────── */
.filter-bar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px; flex-wrap: wrap;
}

.filter-sel {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 7px 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px; color: var(--ink);
  outline: none; cursor: pointer;
}

.filter-sel:focus { border-color: var(--terracotta); }
.filter-sel option { background: white; }

/* ─── TABLES ──────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; }

.tbl th {
  text-align: left; padding: 10px 16px;
  font-size: 10px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--border);
  background: var(--sand);
}

.tbl td {
  padding: 13px 16px;
  font-size: 13px; color: var(--ink);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.tbl tr:hover td { background: var(--sand); }
.tbl tr:last-child td { border-bottom: none; }

/* ─── PILLS ───────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-lg);
  font-size: 11px; font-weight: 500; border: 1px solid;
}

.pill.pending   { background: #fff8e6; color: #b07d10; border-color: #f0d080; }
.pill.progress  { background: var(--sky-lt); color: #2a6080; border-color: #a0c8e0; }
.pill.done      { background: var(--sage-lt); color: #2a5430; border-color: #90c898; }
.pill.urgent    { background: #fde8e8; color: #8a1a1a; border-color: #f0a0a0; gap: 6px; }
.pill.approved  { background: var(--sage-lt); color: #2a5430; border-color: #90c898; }
.pill.rejected  { background: #fde8e8; color: #8a1a1a; border-color: #f0a0a0; }

.prio-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.prio-h { background: var(--terracotta); }
.prio-m { background: #e8a830; }
.prio-l { background: var(--sage); }

/* ─── MEMBER TAGS ─────────────────────────────────────── */
.mtag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: var(--r-lg);
  font-size: 10px; font-weight: 500; border: 1px solid;
}

.mtag.manager  { background: var(--terra-dim); color: var(--terracotta); border-color: var(--terra-lt); }
.mtag.owner    { background: #ede8f8; color: #5a38a0; border-color: #c8b8f0; }
.mtag.tenant   { background: var(--sky-lt); color: #1a4060; border-color: #90c0e0; }
.mtag.cleaner  { background: var(--sage-lt); color: #1a4020; border-color: #90c890; }
.mtag.handyman { background: #fff0d8; color: #7a4a00; border-color: #e8c880; }

/* ─── MESSAGING ───────────────────────────────────────── */
.msg-layout {
  display: grid; grid-template-columns: 280px 1fr;
  height: calc(100vh - 172px);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.contacts-panel { border-right: 1px solid var(--border); overflow-y: auto; display: flex; flex-direction: column; }

.contacts-hd {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; background: var(--white); z-index: 1;
}

.contacts-hd-title { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 500; color: var(--ink); }

.contact-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .15s;
}

.contact-row:hover { background: var(--sand); }
.contact-row.active { background: var(--terra-dim); border-right: 2px solid var(--terracotta); }

.contact-av {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
  font-family: 'Playfair Display', serif;
  flex-shrink: 0; position: relative;
  color: white;
}

.online-dot {
  position: absolute; bottom: 0; right: 0;
  width: 9px; height: 9px; background: var(--sage);
  border-radius: 50%; border: 2px solid white;
}

.contact-info { flex: 1; min-width: 0; }
.contact-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.contact-sub { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact-meta { text-align: right; flex-shrink: 0; }
.contact-time { font-size: 10px; color: var(--ink-3); }
.contact-unread {
  width: 17px; height: 17px; background: var(--terracotta); color: white;
  border-radius: 50%; font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 3px; margin-left: auto;
}

.chat-panel { display: flex; flex-direction: column; }

.chat-hd {
  padding: 14px 20px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  background: var(--white);
}

.chat-prop-tag {
  margin-left: auto;
  background: var(--terra-dim);
  border: 1px solid var(--terra-lt);
  color: var(--terracotta);
  font-size: 11px; padding: 3px 10px; border-radius: var(--r-lg);
}

.chat-msgs {
  flex: 1; overflow-y: auto; padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--sand);
}

.sys-msg {
  text-align: center; font-size: 11px; color: var(--ink-3);
  background: rgba(26,23,20,.06); padding: 4px 12px;
  border-radius: var(--r-lg); align-self: center;
}

.msg-grp { display: flex; gap: 8px; max-width: 72%; }
.msg-grp.mine { align-self: flex-end; flex-direction: row-reverse; }

.msg-av {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: white;
  font-family: 'Playfair Display', serif;
  flex-shrink: 0; align-self: flex-end;
}

.msg-col { display: flex; flex-direction: column; gap: 3px; }

.msg-bubble {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 3px;
  padding: 10px 14px; font-size: 13px;
  line-height: 1.5; color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.msg-grp.mine .msg-bubble {
  background: var(--terracotta); color: white;
  border: none; border-radius: 14px 14px 3px 14px;
}

.msg-time { font-size: 10px; color: var(--ink-3); padding: 0 4px; }
.msg-grp.mine .msg-time { text-align: right; color: rgba(255,255,255,.6); }

.msg-tag-pill {
  display: inline-block;
  background: var(--sky-lt); color: var(--sky);
  border: 1px solid var(--sky-lt); font-size: 10px;
  padding: 2px 8px; border-radius: var(--r-lg); margin-bottom: 4px;
}

.chat-input-bar {
  padding: 14px 20px; border-top: 1px solid var(--border);
  display: flex; gap: 10px; align-items: flex-end;
  background: var(--white);
}

.chat-textarea {
  flex: 1; background: var(--sand);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 10px 16px; font-family: 'Outfit', sans-serif;
  font-size: 13px; color: var(--ink); resize: none; outline: none;
  min-height: 40px; max-height: 100px; transition: border-color .2s;
}

.chat-textarea:focus { border-color: var(--terracotta); }
.chat-textarea::placeholder { color: var(--ink-3); }

.send-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--terracotta); border: none;
  display: flex; align-items: center; justify-content: center;
  color: white; cursor: pointer; flex-shrink: 0;
  transition: all .2s;
}

.send-btn:hover { background: #a8502d; transform: scale(1.05); }

/* ─── MODALS ──────────────────────────────────────────── */
.modal-bg {
  display: none; position: fixed; inset: 0;
  background: rgba(26,23,20,.4);
  z-index: 500; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}

.modal-bg.open { display: flex; }

.modal {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  width: 620px; max-width: 96vw;
  max-height: 92vh; overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: slideUp .25s ease;
}

@keyframes slideUp {
  from { opacity:0; transform: translateY(20px) scale(.97); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

.modal-hd {
  padding: 22px 28px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}

.modal-hd-title {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 500; color: var(--ink);
}

.modal-close {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--sand);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; color: var(--ink-2);
  transition: all .15s;
}

.modal-close:hover { background: var(--sand-2); }

.modal-body { padding: 22px 28px; }
.modal-ft { padding: 16px 28px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* Form elements */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group.span2 { grid-column: span 2; }

.form-label {
  font-size: 10px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--ink-3);
}

.form-input, .form-select, .form-textarea {
  background: var(--sand);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 13px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px; color: var(--ink); outline: none;
  transition: border-color .15s; width: 100%;
}

.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--terracotta); background: var(--white); }
.form-input::placeholder, .form-textarea::placeholder { color: var(--ink-3); }
.form-select option { background: white; }
.form-textarea { resize: vertical; min-height: 80px; }

/* Amenity checkboxes */
.amenity-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }

.amenity-lbl {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; border: 1px solid var(--border);
  border-radius: var(--r-sm); cursor: pointer; font-size: 12px;
  color: var(--ink-2); transition: all .15s;
}

.amenity-lbl:hover { border-color: var(--terracotta); color: var(--terracotta); }
.amenity-lbl input { accent-color: var(--terracotta); }
.amenity-lbl:has(input:checked) { border-color: var(--terracotta); background: var(--terra-dim); color: var(--terracotta); }

/* ─── BLOCKING CALENDAR (Date blocking & owner requests) ───────── */
.panel-blocking {
  --blk-radius: 14px;
  /* Grid / sheet base — one step warmer than --app-canvas for contrast within the card */
  --blk-calm: #ebe6dd;
  --blk-ink: var(--ink-2);
}

.blocking-panel__header {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px;
  margin-bottom: 18px;
}
.blocking-panel__kicker {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  margin: 0 0 6px;
}
.blocking-panel__title { margin: 0; font-size: 1.35rem; font-weight: 700; }
.blocking-panel__title span { color: var(--terracotta); }
.blocking-panel__lede {
  font-size: 13px; line-height: 1.5; color: var(--ink-3); max-width: 44rem; margin: 8px 0 0;
}

/* Segmented control — Manager / Owner / View */
.block-mode {
  display: inline-flex; gap: 0;
  background: var(--sand);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.block-mode__btn {
  border: 0; background: transparent; margin: 0; cursor: pointer;
  font: 500 12px/1.2 'Outfit', system-ui, sans-serif;
  color: var(--ink-3);
  padding: 8px 16px; border-radius: 8px;
  transition: background .15s, color .15s, box-shadow .15s;
}
.block-mode__btn:hover:not(.active) { background: rgba(255,255,255,.7); color: var(--ink); }
.block-mode__btn.active {
  background: var(--white); color: var(--terracotta);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.block-mode__btn:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

/* legacy mode bar (e.g. vms-light) */
.mode-bar { display: flex; gap: 3px; background: var(--sand); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 3px; }
.mode-btn { padding: 6px 14px; border: none; background: transparent; font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 500; color: var(--ink-3); border-radius: var(--r-lg); cursor: pointer; transition: all .15s; }
.mode-btn.active { background: var(--terracotta); color: white; }
.mode-btn:hover:not(.active) { background: var(--sand-2); color: var(--ink); }

.cal-info-banner {
  border-radius: var(--blk-radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--white) 0%, var(--blk-calm) 100%);
  padding: 12px 16px; margin-bottom: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}
.cal-info-banner__text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.cal-info-banner__text strong { color: var(--ink); font-weight: 600; }

.block-layout {
  display: grid; grid-template-columns: 220px minmax(0, 1fr);
  background: color-mix(in srgb, var(--white) 55%, var(--app-canvas) 45%);
  border: 1px solid var(--border);
  border-radius: var(--blk-radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
  min-height: 0;
}

.block-prop-list {
  display: flex; flex-direction: column; gap: 6px; padding: 10px; overflow-y: auto; max-height: 560px;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, #faf8f4 50%, var(--app-canvas) 50%) 0%, var(--sand) 100%);
}

.block-prop-item {
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s;
}
.block-prop-item:hover { background: var(--white); border-color: var(--border); }
.block-prop-item.sel {
  background: var(--white); border-color: var(--terracotta);
  box-shadow: 0 2px 8px rgba(192, 96, 58, 0.12);
}
.block-prop-item.sel { border-left: 3px solid var(--terracotta); }

.block-prop-item-unit { font-size: 12px; font-weight: 600; color: var(--ink); }
.block-prop-item-area { font-size: 10px; color: var(--ink-3); margin-top: 2px; }

.block-cal-area { display: flex; flex-direction: column; min-width: 0; background: var(--blk-calm); }

.block-cal-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, var(--blk-calm) 25%);
  background: color-mix(in srgb, var(--white) 30%, var(--blk-calm) 70%);
}
.block-cal-nav__arrow {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--border) 70%, var(--blk-calm) 30%);
  background: color-mix(in srgb, var(--white) 50%, var(--blk-calm) 50%);
  color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.block-cal-nav__arrow:hover { background: var(--sand); border-color: var(--terra-lt); color: var(--terracotta); }
.block-cal-nav__arrow:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 1px; }

.block-cal-month {
  font: 600 1.1rem/1.2 'Outfit', system-ui, sans-serif;
  color: var(--ink);
  text-align: center; margin: 0; flex: 1;
}
.block-cal-month span { color: var(--terracotta); font-weight: 600; }

.cal-grid {
  padding: 16px 18px 12px;
  background: var(--blk-calm);
}

.cal-wds {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 8px;
}
.cal-wd {
  text-align: center; font: 600 10px/1.2 'Outfit', system-ui, sans-serif;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
  padding: 6px 0;
}

.cal-cells { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }

.cal-cell {
  min-height: 48px; aspect-ratio: 1; max-height: 64px; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--border) 55%, var(--blk-calm) 45%);
  background: color-mix(in srgb, var(--white) 32%, var(--blk-calm) 68%);
  transition: border-color .12s, background .12s, box-shadow .12s, transform .1s;
  position: relative; gap: 2px; color: var(--blk-ink);
}
.cal-cell:hover:not(.empty):not(.past):not(.guest-booked) {
  border-color: var(--terracotta);
  background: var(--terra-dim);
  z-index: 1;
  box-shadow: 0 2px 8px rgba(192, 96, 58, 0.12);
}
/* Padding cells — same sheet tone as the grid (not paper-white holes) */
.cal-cell.empty { background: color-mix(in srgb, var(--blk-calm) 70%, var(--app-canvas) 30%);
  border-color: color-mix(in srgb, var(--border) 28%, var(--blk-calm) 72%);
  cursor: default; }
.cal-cell.past { opacity: .32; cursor: not-allowed; }
.cal-cell.today {
  border-color: var(--terracotta);
  background: linear-gradient(145deg, #fff, var(--terra-dim));
  color: var(--terracotta); font-weight: 700; box-shadow: 0 0 0 1px rgba(192,96,58,.2);
}
.cal-cell.guest-booked { background: #fdf2f2; border-color: #e8bcbc; color: #6b1515; cursor: not-allowed; }
.cal-cell.manager-blocked { background: #e8e6e0; border-color: #c9c2b4; color: #5c5a50; cursor: not-allowed; }
.cal-cell.owner-pending { background: #fff9ec; border-color: #e8c96e; color: #6b4e00; cursor: pointer; }
.cal-cell.owner-approved { background: #e4efe4; border-color: #9ec49e; color: #1e3d22; }
.cal-cell.selecting { background: var(--terra-dim); border-color: var(--terracotta); color: var(--terracotta); }
.cal-cell.in-range { background: rgba(192, 96, 58, 0.07); border-color: rgba(192, 96, 58, 0.25); }

.cal-cell .dnum { font: 600 14px/1.1 'Outfit', system-ui, sans-serif; }
.cal-cell .dlbl {
  font: 600 7px/1.1 'Outfit', system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: 0.04em; opacity: .9; max-width: 100%; text-align: center; padding: 0 1px;
}

.block-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 12px 18px; border-top: 1px solid color-mix(in srgb, var(--border) 70%, var(--blk-calm) 30%);
  background: color-mix(in srgb, var(--sand) 55%, var(--blk-calm) 45%);
}
.legend-chip {
  display: inline-flex; align-items: center; font: 500 10px/1.2 'Outfit', system-ui, sans-serif;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-3);
  padding: 5px 9px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--white);
}
.legend-chip--avail  { background: #f4faf4; border-color: #b8d4b8; }
.legend-chip--booked { background: #fdf2f2; border-color: #e8b4b4; }
.legend-chip--blocked{ background: #e8e6e0; border-color: #c9c2b4; }
.legend-chip--pend   { background: #fff8ec; border-color: #e2c98a; }
.legend-chip--appr   { background: #e8f2e8; border-color: #8fbc8f; }
.legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-3); }
.legend-sw { width: 12px; height: 12px; border-radius: 4px; border: 1px solid; }

.blocking-req__hd { margin-bottom: 14px; align-items: flex-end; }
.blocking-req__sub { font-size: 12px; color: var(--ink-3); margin: 4px 0 0; line-height: 1.4; }

/* info banner */
.info-banner {
  background: var(--terra-dim); border: 1px solid var(--terra-lt);
  border-radius: var(--r-sm); padding: 10px 14px;
  font-size: 12px; color: var(--ink-2); line-height: 1.5;
  display: flex; gap: 8px; align-items: flex-start;
  margin-bottom: 14px;
}

.conflict-banner {
  background: #fde8e8; border: 1px solid #f0a0a0;
  border-radius: var(--r-sm); padding: 10px 14px;
  font-size: 12px; color: #8a1a1a; line-height: 1.5;
  display: flex; gap: 8px; align-items: flex-start;
  margin-bottom: 14px;
}

/* approval steps */
.approval-steps { display: flex; align-items: center; gap: 0; margin: 12px 0; }
.appr-step { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
.step-circ {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--sand);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--ink-3); position: relative; z-index: 1;
}

.step-circ.done { background: var(--sage); border-color: var(--sage); color: white; }
.step-circ.active { background: var(--terracotta); border-color: var(--terracotta); color: white; }
.step-circ.rejected { background: var(--terracotta); border-color: var(--terracotta); color: white; }
.step-line { flex: 1; height: 2px; background: var(--border); margin: 0 -4px; position: relative; top: -13px; z-index: 0; }
.step-line.done { background: var(--sage); }
.step-lbl { font-size: 9px; color: var(--ink-3); text-align: center; }

/* request cards (owner pending) */
.requests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px; margin-bottom: 28px;
}
@media (max-width: 720px) {
  .requests-grid { grid-template-columns: 1fr; }
}

.req-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: box-shadow .2s, border-color .2s, transform .2s;
}
.req-card:hover {
  box-shadow: 0 8px 28px -6px rgba(0,0,0,.1);
  border-color: color-mix(in srgb, var(--terracotta) 30%, var(--border));
  transform: translateY(-1px);
}

.req-card-hd {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 12px;
  background: linear-gradient(180deg, #faf8f4 0%, #fff 100%);
}
.req-card__person { flex: 1; min-width: 0; }
.req-card__name { font: 600 14px/1.3 'Outfit', system-ui, sans-serif; color: var(--ink); }
.req-card__prop { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.req-card-body { padding: 16px; }

.req-dates { font: 500 13px/1.4 'JetBrains Mono', ui-monospace, monospace; color: var(--ink); margin-bottom: 6px; letter-spacing: -0.02em; }
.req-meta { font-size: 12px; color: var(--ink-3); margin-bottom: 12px; line-height: 1.55; }
.req-card__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.req-card__actions .btn { border-radius: 9px; }
.req-card__actions .btn-ghost:first-of-type { flex: 1; min-width: 120px; }
.requests-grid__empty {
  grid-column: 1 / -1; text-align: center; padding: 2.5rem 1.25rem;
  font-size: 14px; color: var(--ink-3);
  background: var(--sand); border: 1px dashed var(--border); border-radius: 14px;
}

/* timeline */
.timeline { display: flex; flex-direction: column; gap: 0; margin-top: 8px; }
.tl-item { display: flex; gap: 12px; padding-bottom: 14px; position: relative; }
.tl-item:not(:last-child)::before { content:''; position:absolute; left:10px; top:22px; bottom:0; width:2px; background:var(--border); }

.tl-dot {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; border: 2px solid;
}

.tl-dot.pending  { background: #fff8e6; border-color: #e8c850; color: #7a5810; }
.tl-dot.approved { background: var(--sage-lt); border-color: var(--sage); color: #2a5430; }
.tl-dot.rejected { background: #fde8e8; border-color: var(--terracotta); color: #8a1a1a; }

.tl-title { font-size: 13px; font-weight: 500; color: var(--ink); }
.tl-sub   { font-size: 11px; color: var(--ink-3); margin-top: 1px; }

/* delete confirm */
.del-warn {
  background: #fde8e8; border: 1px solid #f0a0a0;
  border-radius: var(--r-sm); padding: 14px;
  font-size: 13px; color: #5a1414; line-height: 1.5; margin-bottom: 14px;
}

/* team cards */
.team-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }

.team-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 20px;
  box-shadow: var(--shadow-sm); transition: all .2s;
  display: flex; flex-direction: column; gap: 12px;
}

.team-card:hover { box-shadow: var(--shadow-md); border-color: var(--terra-lt); }

/* ─── TOAST ───────────────────────────────────────────── */
.toast-stack {
  position: fixed; bottom: 22px; right: 22px;
  z-index: 9999; display: flex; flex-direction: column; gap: 8px;
}

.toast {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 16px;
  font-size: 13px; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
  min-width: 270px; box-shadow: var(--shadow-lg);
  animation: toastIn .3s ease;
}

.toast.success { border-left: 3px solid var(--sage); }
.toast.error   { border-left: 3px solid var(--terracotta); }
.toast.info    { border-left: 3px solid var(--sky); }

@keyframes toastIn {
  from { opacity:0; transform: translateX(16px); }
  to   { opacity:1; transform: translateX(0); }
}

/* ─── AVAILABILITY GANTT (panel-calendar) ───────────────── */
#panel-calendar .gantt-panel__intro { margin-bottom: 18px; }
#panel-calendar .gantt-panel__intro h2 { margin: 0 0 6px; }
#panel-calendar .gantt-panel__lede {
  margin: 0; max-width: 54ch; font-size: 14px; line-height: 1.5; color: var(--ink-2);
}

.gantt-card {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 32px -12px rgba(15, 23, 42, 0.08);
  background: var(--white);
}

.gantt-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px 14px;
  margin-bottom: 12px;
}
.gantt-toolbar__main {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.gantt-month {
  font: 600 20px/1.2 'Outfit', system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.gantt-nav {
  display: inline-flex;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--sand) 50%, var(--white));
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.gantt-nav__btn {
  border: 0; background: transparent; cursor: pointer;
  padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--ink-2);
  line-height: 1; min-width: 40px; transition: background .15s, color .15s;
}
.gantt-nav__btn:hover { background: color-mix(in srgb, var(--sand) 80%, #fff); color: var(--ink); }
.gantt-nav__btn--mid {
  border-left: 1px solid var(--border); border-right: 1px solid var(--border);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ink-2); padding: 8px 16px;
}
.gantt-toolbar__hint {
  margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3);
  padding: 10px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--sky) 8%, var(--white));
  border: 1px solid color-mix(in srgb, var(--sky) 25%, var(--border));
}
.gantt-toolbar__hint strong { color: var(--ink-2); }

.gantt-grid-wrap { padding: 0; margin-bottom: 0; overflow: hidden; }
.gantt-wrap {
  overflow: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
#panel-calendar .gantt-wrap { max-height: min(62vh, 640px); }

.gantt-grid {
  display: grid;
  gap: 0;
  min-width: 720px;
  background: #fff;
  padding: 0;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  /* Hairline grid — softer than 1px gap on taupe */
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border) 55%, #dcd6cc);
}

#panel-calendar .gantt-hd,
#panel-calendar .gantt-prop-cell,
#panel-calendar .gantt-day {
  box-shadow:
    1px 0 0 0 color-mix(in srgb, var(--border) 38%, transparent),
    0 1px 0 0 color-mix(in srgb, var(--border) 38%, transparent);
}
#panel-calendar .gantt-hd--day { z-index: 3; }
#panel-calendar .gantt-hd--corner { z-index: 4; }
#panel-calendar .gantt-prop-cell { z-index: 2; }
#panel-calendar .gantt-hd--corner {
  box-shadow: 4px 0 14px -6px rgba(15, 23, 42, 0.07), 1px 0 0 0 color-mix(in srgb, var(--border) 45%, transparent), 0 1px 0 0 color-mix(in srgb, var(--border) 38%, transparent);
}

.gantt-hd {
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px 12px;
  background: linear-gradient(180deg, #fff 0%, #faf8f4 100%);
  border: 0;
  text-align: center;
  color: var(--ink-2);
}
.gantt-hd--corner {
  position: sticky; left: 0; z-index: 4; align-items: flex-start; justify-content: center;
  padding: 12px 16px;
  min-height: 58px;
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; font-size: 10px;
  color: var(--ink-3);
  background: linear-gradient(180deg, #fffcfa 0%, #f4f0ea 100%);
  box-shadow: 4px 0 12px -4px rgba(15, 23, 42, 0.06);
}
.gantt-hd--day { transition: background .15s, box-shadow .15s; }
.gantt-hd--weekend {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sand) 22%, #fff) 0%, color-mix(in srgb, var(--sand) 40%, #f7f4ee) 100%);
}
.gantt-hd--today {
  background: linear-gradient(180deg, color-mix(in srgb, var(--terracotta) 7%, #fff) 0%, #fff 100%);
  box-shadow:
    1px 0 0 0 color-mix(in srgb, var(--border) 38%, transparent),
    0 1px 0 0 color-mix(in srgb, var(--border) 38%, transparent),
    inset 0 -3px 0 0 var(--terracotta);
}
.gantt-hd--today .gantt-hd__num { color: var(--terracotta); }
.gantt-hd__num {
  font: 700 15px/1 'Outfit', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.gantt-hd__wd {
  font: 600 9px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0.88;
}
.gantt-hd--weekend .gantt-hd__wd { color: color-mix(in srgb, var(--ink-3) 85%, var(--terracotta) 15%); }

.gantt-prop-cell {
  position: sticky; left: 0; z-index: 2;
  padding: 8px 12px 8px 14px; min-height: 44px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  font-size: 11px; color: var(--ink);
  background: linear-gradient(90deg, #fff 0%, #fcfaf8 100%);
  border: 0;
  text-align: left; box-shadow: 4px 0 10px -6px rgba(15, 23, 42, 0.07);
  border-left: 3px solid color-mix(in srgb, var(--terracotta) 32%, #d4c4b0);
}
.gantt-prop__unit {
  font: 600 12px/1.2 'Outfit', system-ui, sans-serif; color: var(--ink);
  letter-spacing: 0.01em;
}
.gantt-prop__name {
  font-size: 10.5px; color: var(--ink-3); line-height: 1.2;
  max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.gantt-day {
  min-height: 44px;
  border: 0;
  cursor: pointer;
  background: #fdfcfa;
  transition: background .12s, box-shadow .12s, transform .1s;
}
.gantt-day:focus-visible { outline: 2px solid var(--terracotta); outline-offset: -1px; z-index: 1; }
.gantt-day:hover {
  z-index: 1;
  background: color-mix(in srgb, var(--white) 40%, #f5f2ec);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--terracotta) 22%, transparent);
}
.gantt-day.avail  { background: color-mix(in srgb, var(--sage) 9%, #fff); }
.gantt-day.booked { background: color-mix(in srgb, var(--terracotta) 10%, #fff); }
.gantt-day.blocked { background: repeating-linear-gradient(135deg, #fff6e0, #fff6e0 3px, #ffe8a8 3px, #ffe8a8 6px); }
.gantt-day.maint  { background: #fff3d6; }
.gantt-day.today-day {
  box-shadow: inset 0 0 0 2px var(--terracotta, #c0603a);
  position: relative;
}
.gantt-day.today-day::after {
  content: '';
  position: absolute; top: 3px; right: 3px; width: 5px; height: 5px; border-radius: 50%;
  background: var(--terracotta, #c0603a);
  box-shadow: 0 0 0 2px #fff;
}

.gantt-legend {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
}
.gantt-legend__item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-2);
  padding: 6px 12px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--sand) 40%, #fff);
  border: 1px solid var(--border);
}
.gantt-legend__swatch { width: 14px; height: 14px; border-radius: 5px; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--border) 50%, #ccc); }
.gantt-legend__item--avail .gantt-legend__swatch { background: color-mix(in srgb, var(--sage) 14%, #fff); border-color: var(--sage); }
.gantt-legend__item--booked .gantt-legend__swatch { background: color-mix(in srgb, var(--terracotta) 12%, #fff); border-color: var(--terracotta); }
.gantt-legend__item--block .gantt-legend__swatch { background: repeating-linear-gradient(135deg, #fff6e0, #fff6e0 2px, #ffe8a8 2px, #ffe8a8 4px); }
.gantt-legend__item--weekend .gantt-legend__swatch {
  background: linear-gradient(180deg, color-mix(in srgb, var(--sand) 25%, #fff) 0%, var(--sand) 100%);
}

/* Legacy: other pages that still use .gantt */
.gantt { display: grid; min-width: 900px; }
.gantt-cell {
  padding: 7px 10px; border: 1px solid var(--border);
  font-size: 11px; background: var(--white);
}

/* ═══════════════════════════════════════════════════════
   VMS ADVANCED SEARCH — EXACT CLONE
═══════════════════════════════════════════════════════ */

/* Layout: sidebar + results */
.vms-search-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: flex-start;
}

/* ── Sidebar ─────────────────────────────────────────── */
.vms-sidebar {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}

.vms-sidebar-section {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.vms-sidebar-section:last-child { border-bottom: none; }

.vms-sidebar-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}

.vms-search-input-wrap {
  display: flex; align-items: center; gap: 8px;
  background: var(--sand);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
}

.vms-search-input {
  background: transparent; border: none; outline: none;
  font-family: 'Outfit', sans-serif;
  font-size: 13px; color: var(--ink); width: 100%;
}

.vms-search-input::placeholder { color: var(--ink-3); }

.vms-filter-list {
  list-style: none;
  display: flex; flex-direction: column; gap: 1px;
}

.vms-filter-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}

.vms-filter-item:hover { background: var(--sand); color: var(--terracotta); }

.vms-filter-item.active {
  background: var(--terra-dim);
  color: var(--terracotta);
  font-weight: 500;
}

.vms-filter-count {
  font-size: 11px;
  background: var(--sand-2);
  color: var(--ink-3);
  padding: 1px 7px;
  border-radius: var(--r-lg);
  font-weight: 400;
}

.vms-filter-item.active .vms-filter-count {
  background: var(--terracotta);
  color: white;
}

.vms-price-row {
  display: flex; align-items: center; gap: 8px;
}

.vms-price-input {
  flex: 1; background: var(--sand);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 7px 10px; font-family: 'Outfit', sans-serif;
  font-size: 13px; color: var(--ink); outline: none; width: 0;
}

.vms-price-input:focus { border-color: var(--terracotta); }
.vms-price-input::placeholder { color: var(--ink-3); font-size: 12px; }

/* ── Results area ────────────────────────────────────── */
.vms-results-area { min-width: 0; }

/* Toolbar */
.vms-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.vms-result-count {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 500; color: var(--ink);
}

.vms-result-count span { color: var(--terracotta); }

.vms-toolbar-right { display: flex; align-items: center; gap: 10px; }

.vms-view-toggle {
  display: flex; gap: 2px;
  background: var(--sand); border: 1px solid var(--border);
  border-radius: 8px; padding: 3px;
}

.vms-view-btn {
  width: 30px; height: 30px; border: none; background: transparent;
  color: var(--ink-3); border-radius: 6px; cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}

.vms-view-btn.active { background: white; color: var(--terracotta); box-shadow: var(--shadow-sm); }
.vms-view-btn:hover:not(.active) { color: var(--ink); }

.vms-sort-select {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 14px;
  font-family: 'Outfit', sans-serif; font-size: 13px; color: var(--ink);
  outline: none; cursor: pointer;
}

.vms-sort-select:focus { border-color: var(--terracotta); }

/* ── Property grid ───────────────────────────────────── */
.vms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.vms-grid.list-view {
  grid-template-columns: 1fr;
}

/* ── Property card (grid view) ───────────────────────── */
.vms-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all .22s cubic-bezier(.2,.8,.4,1);
  position: relative;
  cursor: pointer;
}

.vms-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(26,23,20,.12), 0 4px 10px rgba(26,23,20,.06);
  border-color: var(--terra-lt);
}

.vms-card-img-wrap {
  position: relative;
  overflow: hidden;
  height: 200px;
  background: var(--sand-2);
}

.vms-card-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}

.vms-card:hover .vms-card-img { transform: scale(1.04); }

/* Verified badge */
.vms-verified {
  position: absolute; top: 10px; left: 10px;
  background: var(--sage);
  color: white;
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-lg);
  display: flex; align-items: center; gap: 4px;
}

/* Price badge */
.vms-price-badge {
  position: absolute; bottom: 10px; left: 10px;
  background: rgba(26,23,20,.80);
  backdrop-filter: blur(6px);
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 500;
  padding: 5px 11px; border-radius: 6px;
}

.vms-price-badge .night { font-size: 11px; opacity: .7; font-family: 'Outfit',sans-serif; }

/* Favorite / Heart */
.vms-fav-btn {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.90); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s;
  color: var(--ink-3);
  box-shadow: var(--shadow-sm);
}

.vms-fav-btn:hover { background: white; color: var(--terracotta); transform: scale(1.1); }
.vms-fav-btn.faved { color: var(--terracotta); }

/* Type pill */
.vms-type-pill {
  position: absolute; top: 10px; right: 48px;
  font-size: 9px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--r-lg);
  background: white;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.vms-type-pill.house { background: var(--sky); color: white; }
.vms-type-pill.villa { background: #7c5cbf; color: white; }

/* Card body */
.vms-card-body {
  padding: 16px 18px 18px;
}

.vms-card-name {
  font-family: 'Playfair Display', serif;
  font-size: 15px; font-weight: 500;
  color: var(--ink); line-height: 1.35;
  margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.vms-card-loc {
  font-size: 12px; color: var(--ink-3);
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 12px;
}

.vms-card-loc a { color: var(--terracotta); font-weight: 500; }
.vms-card-loc a:hover { text-decoration: underline; }

.vms-card-tags {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
}

.vms-tag {
  font-size: 10px; font-weight: 500;
  padding: 3px 9px; border-radius: var(--r-lg);
  background: var(--sand); color: var(--ink-2);
  border: 1px solid var(--border);
}

.vms-tag.type-tag { background: var(--terra-dim); color: var(--terracotta); border-color: var(--terra-lt); }
.vms-tag.listing-tag { background: var(--sky-lt); color: #1a4060; border-color: #a0c0e0; }

/* Card admin actions */
.vms-card-actions {
  display: flex; gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 2px;
}

/* ── LIST VIEW card ──────────────────────────────────── */
.vms-grid.list-view .vms-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 160px;
  border-radius: var(--r-md);
}

.vms-grid.list-view .vms-card-img-wrap { height: 100%; border-radius: var(--r-md) 0 0 var(--r-md); }
.vms-grid.list-view .vms-card-body { display: flex; flex-direction: column; justify-content: center; padding: 16px 20px; }
.vms-grid.list-view .vms-card-name { font-size: 16px; -webkit-line-clamp: 1; }
.vms-grid.list-view .vms-card-actions { margin-top: auto; padding-top: 10px; }

/* ── No results ──────────────────────────────────────── */
.vms-no-results {
  text-align: center;
  padding: 64px 20px;
  color: var(--ink-3);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1200px) {
  .vms-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
  .vms-search-layout { grid-template-columns: 1fr; }
  .vms-sidebar { position: static; max-height: none; }
  .vms-grid { grid-template-columns: repeat(2,1fr); }
}

/* ══════════════════════════════════════════════════════
   ADMIN MODE
══════════════════════════════════════════════════════ */
/* legacy .sb-role-btn.admin removed — use .sb-role-btn--admin */

.sb-shield {
  display: inline-block;
  margin-left: 4px;
  color: var(--terracotta);
  font-size: 10px;
}

body.role-admin .sb-admin-only { display: block; }

.admin-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(192,96,58,.08), rgba(74,127,165,.06));
  border: 1px solid var(--terra-lt);
  border-left: 4px solid var(--terracotta);
  border-radius: var(--r-md);
}
.admin-banner-ic {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--terracotta); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  flex-shrink: 0;
}
.admin-banner-h { font-weight: 600; color: var(--ink); font-size: 15px; }
.admin-banner-sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.admin-banner > div:nth-child(2) { flex: 1; }

.admin-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 1100px) { .admin-two-col { grid-template-columns: 1fr; } }

.adm-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.adm-card-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.adm-card-hd h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.adm-pill {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: var(--r-lg);
  font-weight: 500;
  letter-spacing: .3px;
}
.adm-pill.ok { background: var(--sage-lt); color: var(--sage); }
.adm-pill.warn { background: #ffe1d6; color: var(--terracotta); }
.adm-pill.err { background: #f7d6d6; color: #b33939; }
.adm-pill.info { background: var(--sky-lt); color: var(--sky); }

.adm-svc-list { display: flex; flex-direction: column; gap: 10px; }
.adm-svc-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--sand);
}
.adm-svc-name { font-size: 14px; color: var(--ink); font-weight: 500; }
.adm-svc-meta { font-size: 12px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; }
.adm-svc-dot { width: 8px; height: 8px; border-radius: 50%; }
.adm-svc-dot.ok { background: var(--sage); box-shadow: 0 0 0 3px var(--sage-lt); }
.adm-svc-dot.warn { background: var(--terracotta); box-shadow: 0 0 0 3px var(--terra-lt); }

/* Service Status card — explicit light (paper) theme */
.adm-card--service-light {
  background: #fff;
  border-color: #e6e2dc;
  box-shadow: 0 1px 2px rgba(26, 23, 20, 0.04), 0 4px 20px rgba(26, 23, 20, 0.05);
}
.adm-card--service-light .adm-card-hd {
  border-bottom-color: #edeae4;
  padding-bottom: 12px;
}
.adm-card--service-light .adm-card-hd h3 {
  color: #141210;
  font-size: 17px;
}
.adm-pill--light-ok {
  background: #e8f5e9;
  color: #1b5e20;
  border: 1px solid #c8e6c9;
  font-weight: 600;
}
.adm-card--service-light .adm-svc-list { gap: 8px; }
.adm-card--service-light .adm-svc-row {
  background: #fafafa;
  border: 1px solid #e8e4df;
  border-radius: 8px;
  box-shadow: none;
}
.adm-card--service-light .adm-svc-row:hover {
  background: #f5f7f4;
  border-color: #ded8cf;
}
.adm-card--service-light .adm-svc-name {
  color: #1a1816;
  font-weight: 600;
  font-size: 13.5px;
}
.adm-card--service-light .adm-svc-meta {
  color: #5c574e;
  font-size: 11.5px;
}
/* Inline status pills in rows (from renderAdmin) */
.adm-card--service-light .adm-svc-row .adm-pill.ok {
  background: #e8f5e9;
  color: #1b5e20;
  border: 1px solid #c8e6c9;
  font-size: 10.5px;
  font-weight: 600;
}
.adm-card--service-light .adm-svc-row .adm-pill.warn {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffe0b2;
}
.adm-card--service-light .adm-svc-dot.ok {
  background: #43a047;
  box-shadow: 0 0 0 2px #e8f5e9;
}
.adm-card--service-light .adm-svc-dot.warn {
  background: #fb8c00;
  box-shadow: 0 0 0 2px #fff3e0;
}

.adm-activity { display: flex; flex-direction: column; gap: 10px; }
.adm-activity-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.adm-activity-row:last-child { border-bottom: none; }
.adm-activity-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sky);
  margin-top: 6px; flex-shrink: 0;
}
.adm-activity-body { flex: 1; color: var(--ink-2); }
.adm-activity-body b { color: var(--ink); font-weight: 600; }
.adm-activity-time { font-size: 11px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; }

/* Admin tables */
.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.adm-table th {
  text-align: left;
  padding: 10px 12px;
  background: var(--sand);
  font-weight: 500;
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.adm-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-2);
  vertical-align: middle;
}
.adm-table tr:hover td { background: var(--sand); }
.adm-table .u-name { color: var(--ink); font-weight: 500; }
.adm-table .u-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--sand-2); color: var(--ink); font-size: 11px; font-weight: 600;
  margin-right: 10px; vertical-align: middle;
}

.role-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--r-lg);
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
  background: var(--sand-2);
  color: var(--ink-2);
}
.role-pill.admin { background: rgba(192,96,58,.14); color: var(--terracotta); }
.role-pill.manager { background: var(--sky-lt); color: var(--sky); }
.role-pill.owner { background: var(--sage-lt); color: var(--sage); }
.role-pill.tenant { background: #ede4f6; color: #7a4fb0; }
.role-pill.cleaner, .role-pill.handyman { background: var(--sand-3); color: var(--ink-2); }

.status-dot {
  display: inline-block;
  width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px;
  background: var(--ink-3);
}
.status-dot.active { background: var(--sage); }
.status-dot.invited { background: var(--sky); }
.status-dot.suspended { background: var(--terracotta); }

.sev-low    { color: var(--sage); }
.sev-med    { color: var(--sky); }
.sev-high   { color: var(--terracotta); font-weight: 600; }

/* Settings */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 1100px) { .settings-grid { grid-template-columns: 1fr; } }

.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.setting-row:last-child { border-bottom: none; }
.setting-row label, .setting-row > span:first-child {
  font-size: 13px;
  color: var(--ink-2);
  flex: 1;
}
.setting-row label { font-weight: 500; color: var(--ink); }
.setting-row .form-input,
.setting-row .form-select { width: 260px; flex: 0 0 auto; }
.setting-row small { color: var(--ink-3); font-size: 12px; }

.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row > span { font-size: 13px; color: var(--ink-2); flex: 1; }
.toggle-row > span b { color: var(--ink); font-weight: 500; }
.toggle-row > span small { color: var(--ink-3); font-size: 12px; }
.toggle {
  appearance: none;
  width: 40px; height: 22px;
  background: var(--sand-3);
  border-radius: var(--r-lg);
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle:checked { background: var(--terracotta); }
.toggle:checked::after { transform: translateX(18px); }

.icon-btn-sm {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  color: var(--ink-2);
  cursor: pointer;
  transition: all .15s;
  margin-left: 4px;
}
.icon-btn-sm:hover { border-color: var(--terracotta); color: var(--terracotta); }
.icon-btn-sm.danger:hover { border-color: #b33939; color: #b33939; }

.modal-ft {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 10px;
  background: var(--sand);
  border-bottom-left-radius: var(--r-md);
  border-bottom-right-radius: var(--r-md);
}
/* ═══════════════════════════════════════════════════════════
   PROPERTY DETAIL MODAL
   ═══════════════════════════════════════════════════════════ */
.prop-detail-modal {
  width: min(1080px, 96vw);
  max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.prop-detail-modal .modal-body { overflow-y: auto; }

.pd-hero {
  position: relative;
  height: 380px;
  background: #111 center/cover no-repeat;
  overflow: hidden;
}
.pd-hero::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.65) 100%);
  pointer-events:none;
}
.pd-hero-chips {
  position:absolute; top:16px; left:16px;
  display:flex; gap:8px; flex-wrap:wrap; z-index:2;
}
.pd-chip {
  background: rgba(255,255,255,.92); backdrop-filter: blur(4px);
  border-radius: var(--r-lg); padding: 5px 12px;
  font-size: 11px; font-weight: 600; letter-spacing:.04em;
  text-transform: uppercase; color: var(--ink-1);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.pd-chip.verified { background: var(--sage); color:#fff; }
.pd-chip.type-villa { background: #a97142; color:#fff; }
.pd-chip.type-house { background: #6b8e6b; color:#fff; }
.pd-chip.type-condo { background: #4a6d8c; color:#fff; }

.pd-hero-price {
  position:absolute; bottom:16px; right:16px; z-index:2;
  background: rgba(255,255,255,.96);
  padding: 10px 18px; border-radius: 12px;
  font-family: 'Playfair Display', serif;
  font-size: 26px; font-weight: 600;
  color: var(--terracotta);
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
}
.pd-hero-price .per { font-size:13px; font-weight:400; color:var(--ink-3); font-family:'Outfit',sans-serif; }

.pd-hero-title {
  position:absolute; bottom:16px; left:16px; z-index:2;
  color:#fff; max-width:65%;
}
.pd-hero-title h2 {
  font-family:'Playfair Display', serif;
  font-size: 26px; margin:0 0 6px; line-height:1.15;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.pd-hero-title .loc {
  font-size:13px; opacity:.92;
  display:flex; align-items:center; gap:6px;
}

.pd-body { padding: 24px 28px 8px; display:grid; grid-template-columns: 1fr 320px; gap:28px; }
@media (max-width: 820px) { .pd-body { grid-template-columns: 1fr; } }

.pd-stats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 18px; }
.pd-stat {
  flex:1 1 110px; min-width: 110px;
  background: var(--sand); border:1px solid var(--border); border-radius: 10px;
  padding: 12px 14px;
  display:flex; flex-direction:column; gap:2px;
}
.pd-stat .k { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing:.05em; }
.pd-stat .v { font-size: 18px; font-weight: 600; color: var(--ink-1); font-family:'Playfair Display',serif; }

.pd-section { margin-bottom: 22px; }
.pd-section h3 {
  font-family:'Playfair Display',serif;
  font-size: 17px; margin: 0 0 10px; color: var(--ink-1);
  letter-spacing: .01em;
}
.pd-description {
  font-size: 14px; line-height: 1.65; color: var(--ink-2);
  white-space: pre-wrap;
}

.pd-amen {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr));
  gap: 8px 14px;
}
.pd-amen-item {
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--ink-2);
}
.pd-amen-item::before {
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--sage); flex-shrink:0;
}

.pd-gallery {
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.pd-gallery img {
  width:100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 8px; cursor:pointer;
  transition: transform .25s;
}
.pd-gallery img:hover { transform: scale(1.02); }

.pd-aside { position: sticky; top: 10px; align-self: start; }
.pd-book {
  background: var(--sand); border:1px solid var(--border); border-radius: 14px;
  padding: 20px;
}
.pd-book-price {
  font-family:'Playfair Display',serif;
  font-size: 28px; font-weight: 600; color: var(--terracotta);
  margin-bottom: 4px;
}
.pd-book-price .per { font-size:14px; color:var(--ink-3); font-family:'Outfit',sans-serif; }
.pd-book .form-label { margin-top: 12px; }
.pd-book .dates-row { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.pd-book .total {
  margin-top: 14px; padding-top: 14px; border-top:1px dashed var(--border);
  display:flex; justify-content:space-between; font-weight:600;
}
.pd-book-cta {
  width:100%; margin-top: 14px; justify-content:center;
  border-radius: 10px; padding: 12px;
}

.pd-contact {
  margin-top: 14px; padding: 14px 16px;
  background:#fff; border:1px solid var(--border); border-radius: 12px;
  display:flex; flex-direction:column; gap:6px;
}
.pd-contact .name { font-weight:600; }
.pd-contact .role { font-size: 11px; color: var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }
.pd-contact-row { display:flex; gap:8px; margin-top: 8px; }
.pd-contact-row .btn { flex:1; justify-content:center; border-radius:8px; }

/* ═══════════════════════════════════════════════════════════
   PUBLIC RENTALS (standalone /rentals) specific overrides
   ═══════════════════════════════════════════════════════════ */
.rentals-wrap { max-width: 1400px; margin: 0 auto; padding: 28px 24px; }
.rentals-title {
  font-family:'Playfair Display',serif;
  font-size: 34px; margin: 0 0 6px; color: var(--ink-1); font-weight: 500;
}
.rentals-sub { color: var(--ink-3); margin-bottom: 18px; font-size:14px; }

/* ═══════════════════════════════════════════════════════════
   SITE HEADER — exact match of https://vms-florida.com/
   Based on wprentals/style.css rules:
     .master_header      → bg #fff, z-index 1003, relative
     #access a           → padding 23px 20px, color #484848, 14px / 500
     .menu li a          → extra padding-bottom: 38px
     #access .menu li:hover > a → color (VMS override = teal #36a3a0)
     .signuplink         → 14px / 500, color #484848
     #submit_action      → teal pill, border 1px solid primary,
                           padding 10px 16px, radius 40px, color #fff
   Desktop header height is driven by the logo (126px) inside a
   150px-tall .header_wrapper_inside; menu & user_menu sit centered.
   ═══════════════════════════════════════════════════════════ */
.master_header {
  background-color: #ffffff;
  font-family: 'Outfit', sans-serif;
  position: relative;
  z-index: 1003;
}
.master_header .header_wrapper { width: 100%; }

/* #siteHeader — flat white nav strip across every page & every state.
   The previous frosted-glass treatment has been replaced with a solid
   white background so the header reads the same on the Home hero, after
   scroll, on subpages (About / Things to Do / Contact), and on /rentals.
   A single hairline border + soft drop shadow give it separation. */
header#siteHeader > .header_wrapper {
  position: relative;
  z-index: 1;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Hero overlay state (home, before any scroll) — same solid white. */
.master_header--overlay:not(.is-scrolled) > .header_wrapper,
header#siteHeader.master_header--overlay.is-scrolled > .header_wrapper {
  background: #ffffff;
  border-bottom: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
header#siteHeader,
header#siteHeader.master_header--overlay,
header#siteHeader.master_header--overlay.is-scrolled {
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Now that the header is always solid white, its contents must read as
   "dark on white" regardless of .is-scrolled. Overrides the dark-mode
   overlay treatment (white text + drop-shadow logo) that previously
   applied only to the pre-scroll state over the home video. */
.master_header--overlay .logo img,
.master_header--overlay .mobile-logo img { filter: none !important; }
.master_header--overlay #access .menu > li > a,
.master_header--overlay #access .menu-item-link,
.master_header--overlay .signuplink,
.master_header--overlay .mobile-trigger,
.master_header--overlay .mobile-trigger-user { color: #27213d !important; }
.master_header--overlay #access .menu > li:hover > a,
.master_header--overlay #access .menu > li.current-menu-item > a { color: #36a3a0 !important; }
.master_header--overlay .signuplink#topbarregister {
  background: #36a3a0 !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.master_header--overlay .signuplink#topbarregister:hover {
  background: #2a8582 !important;
  color: #fff !important;
}

/* Mobile: same flat-white treatment on both states. */
@media (max-width: 900px) {
  header#siteHeader.master_header--overlay:not(.is-scrolled) .mobile_header,
  header#siteHeader.master_header--overlay.is-scrolled .mobile_header {
    background: #ffffff;
    border-bottom: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

:root { --header-h: 102px; }      /* trimmed ~½in from the old 150px */
.master_header .header_wrapper_inside {
  max-width: 1400px;
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/* Logo (desktop) — scaled from 200×126 so it fits the shorter bar at the same aspect ratio */
.master_header .logo { flex: 0 0 auto; width: 140px; }
.master_header .logo a { display: block; line-height: 0; }
.master_header .logo img {
  width: 140px;
  height: 88px;
  max-height: 88px;
  max-width: 140px;
  display: block;
  object-fit: contain;
}
/* Main nav */
.master_header #access { flex: 1 1 auto; }
.master_header #access .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 0;
}
.master_header #access .menu > li {
  height: var(--header-h);
  line-height: var(--header-h);
  position: relative;
}
.master_header #access .menu > li > a,
.master_header #access .menu-item-link {
  display: block;
  padding: 0 20px;
  color: #484848;
  text-decoration: none;
  font-size: 16px;                 /* bumped from 14px per request */
  font-weight: 500;
  letter-spacing: .2px;
  transition: color .15s ease;
}
.master_header #access .menu > li:hover > a,
.master_header #access .menu > li.current-menu-item > a {
  color: #36a3a0;                  /* VMS teal override of #b881fc */
}
/* User menu (Login / Sign Up) */
.master_header .user_menu {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Plain login link — mirrors reference .signuplink */
.master_header .signuplink {
  color: #484848;                  /* reference ink */
  font-size: 14px;                 /* reference size */
  font-weight: 500;
  cursor: pointer;
  letter-spacing: .2px;
  text-transform: none;            /* reference is sentence case */
  transition: color .15s ease;
}
.master_header .signuplink:hover { color: #36a3a0; }
/* Register → styled like #submit_action in the reference theme. */
.master_header .signuplink#topbarregister {
  background: #36a3a0;
  color: #fff;
  padding: 10px 16px;              /* reference */
  border: 1px solid #36a3a0;
  border-radius: 40px;             /* reference */
  font-weight: 500;
  font-size: 14px;
}
.master_header .signuplink#topbarregister:hover {
  background: #2c8885; border-color: #2c8885; color: #fff;
}

/* Mobile header */
.master_header .mobile_header { display: none; }
@media (max-width: 900px) {
  .master_header .header_wrapper_inside { display: none; }
  .master_header .mobile_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding: 0 16px;
  }
  .master_header .mobile-logo img { max-height: 56px; width: auto; }
  .master_header .mobile-trigger,
  .master_header .mobile-trigger-user {
    color: #27213d;
    cursor: pointer;
    padding: 8px;
  }
  .master_header #access {
    display: none;
    position: absolute;
    top: 72px; left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #eee;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
  }
  .master_header #access.mobile-open { display: block; }
  .master_header #access .menu { flex-direction: column; gap: 0; }
  .master_header #access .menu > li { height: 52px; line-height: 52px; border-bottom: 1px solid #f1f1f1; }
  .master_header #access .menu > li > a { padding: 0 20px; }
}

/* ═══════════════════════════════════════════════════════════
   LEASE CONTRACT MODAL
   Modeled after the VMS paper lease with editable inline fields,
   a drag-to-select calendar, signature pads (mouse + touch),
   and totals that recompute live.
   ═══════════════════════════════════════════════════════════ */
.contract-modal {
  width: min(960px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.contract-modal .modal-body { overflow-y: auto; padding: 0 !important; }

/* Lease wizard: trip details (step 1) before full contract (step 2) */
.k-contract-wizard {
  padding: 14px 18px 22px;
}
.k-contract-steps {
  margin-bottom: 16px;
}
.k-contract-step-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.k-contract-step-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-lg);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #8b7f6b;
  border: 1px solid #e0d5c4;
  background: #faf7f2;
}
.k-contract-step-pill--active {
  color: #5c3d1e;
  border-color: #d4a574;
  background: linear-gradient(180deg, #fff9f0 0%, #fdebd4 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
.k-contract-step-div {
  color: #c9bfae;
  font-size: 14px;
  user-select: none;
}
.k-wizard-card {
  background: #fffdf9;
  border: 1px solid #e6dcc7;
  border-radius: 12px;
  padding: 22px 24px 24px;
  box-shadow: 0 8px 28px rgba(42, 35, 48, 0.06);
}
.k-wizard-h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #3a2f1e;
  margin: 0 0 8px;
}
.k-wizard-lead {
  font-size: 13.5px;
  line-height: 1.55;
  color: #6b5f52;
  margin: 0 0 18px;
}
.k-wizard-prop-block {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0e7d3;
}
.k-wizard-prop-title {
  font-weight: 600;
  font-size: 15px;
  color: #2a2330;
  margin-top: 4px;
}
.k-wizard-field {
  margin-bottom: 6px;
}
.k-inline--wiz {
  display: block;
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  padding: 8px 4px;
  border: 1px solid #e6dcc7;
  border-radius: 8px;
  background: #fff;
}
.k-inline--wiz:focus {
  outline: none;
  border-color: var(--terracotta, #c85a2d);
  background: #fffefb;
}
.k-wizard-cal-section {
  margin-top: 8px;
}
.k-wizard-error {
  color: #b42318;
  font-size: 13px;
  margin: 12px 0 0;
}
.k-wizard-actions {
  margin-top: 18px;
}
.k-contract-back {
  margin: 0 0 12px;
}
.k-period-readonly {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e6dcc7;
  border-radius: 10px;
  margin-top: 8px;
}
.k-period-edit-hint {
  margin: 8px 0 0;
}
.k-inline-like-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--terracotta, #c85a2d);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-size: inherit;
}
.k-inline-like-btn:hover {
  color: #a34720;
}

.k-paper {
  background: #fffdf9;
  padding: 28px 34px 36px;
  font-family: 'Outfit', sans-serif;
  color: #2a2330;
  font-size: 14px;
  line-height: 1.55;
}
.k-paper-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding-bottom: 14px; border-bottom: 1px dashed #d8cdb7;
  margin-bottom: 16px;
}
.k-label-xs { font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; color: #9a8c74; }
.k-mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.k-mini { font-size: 11px; color: #8b7f6b; }
.k-title {
  font-family: 'Playfair Display', serif;
  font-size: 34px; font-weight: 500;
  text-align: left; letter-spacing: 3px;
  margin: 6px 0 18px;
}
.k-para { margin: 10px 0; font-size: 13.5px; }
.k-section { margin-top: 18px; }
.k-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 1px; color: #6b5f4d; margin-bottom: 8px;
}
.k-inline {
  border: none; border-bottom: 1px solid #9a8c74;
  background: transparent; padding: 3px 6px; font: inherit;
  min-width: 160px; outline: none;
}
.k-inline:focus { border-bottom-color: var(--terracotta, #c85a2d); background: #fff7ed; }
.k-inline-num {
  border: 1px solid #d8cdb7; background: #fff; border-radius: 6px;
  padding: 4px 8px; width: 100px; font: inherit; text-align: right;
}
.k-inline-num:focus { border-color: var(--terracotta, #c85a2d); outline: none; }
.k-money-inp { white-space: nowrap; }
.k-pill {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-lg);
  background: #eaded0; font-size: 11px; font-weight: 600; color: #6b5f4d;
}

/* ── Calendar (drag-to-select) ── */
.k-cal-wrap { background: #fff; border: 1px solid #e6dcc7; border-radius: 10px; padding: 14px; }
.contract-cal {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  user-select: none; touch-action: none; -webkit-user-select: none;
}
.contract-cal-month { }
.contract-cal-title {
  text-align: center; font-family: 'Playfair Display', serif;
  font-size: 17px; font-weight: 500; margin-bottom: 8px;
}
.contract-cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  color: #9a8c74; text-align: center; margin-bottom: 4px;
}
.contract-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.contract-cal-cell {
  aspect-ratio: 1 / 1; display: grid; place-items: center;
  font-size: 13px; border-radius: 6px; cursor: pointer;
  background: transparent; color: #3a2f1e;
  transition: background .08s ease;
}
.contract-cal-cell.blank { visibility: hidden; }
.contract-cal-cell.past { color: #c9bfae; cursor: not-allowed; }
.contract-cal-cell:not(.blank):not(.past):hover { background: #f1e7d3; }
.contract-cal-cell.sel { background: #f9dec2; color: #6b3a14; }
.contract-cal-cell.sel-start, .contract-cal-cell.sel-end {
  background: var(--terracotta, #c85a2d); color: #fff; font-weight: 600;
}
.contract-cal-cell.sel-mid { background: #fbe7d0; }
.k-cal-hint {
  margin-top: 10px; font-size: 11.5px; color: #8b7f6b;
  padding: 7px 10px; background: #fdf6e9; border-radius: 6px;
}
.k-date-range {
  margin-top: 10px; display: flex; align-items: center;
  justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: #3a2f1e;
}
.k-date-row {
  margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: #6b5f4d;
}
.k-date-row label { display: flex; flex-direction: column; gap: 3px; }
.k-date-row input {
  border: 1px solid #d8cdb7; border-radius: 6px;
  padding: 5px 8px; font: inherit; background: #fff;
}
.k-date-row input:focus { border-color: var(--terracotta, #c85a2d); outline: none; }

/* ── Totals tables ── */
.k-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; margin-top: 14px;
}
.k-table {
  width: 100%; border-collapse: collapse;
  background: #fff; border: 1px solid #e6dcc7; border-radius: 8px;
  overflow: hidden;
}
.k-table td { padding: 8px 12px; border-bottom: 1px solid #f0e7d3; font-size: 13px; }
.k-table tr:last-child td { border-bottom: none; }
.k-table .k-right { text-align: right; }
.k-table .k-amt { font-family: 'JetBrains Mono', monospace; color: #2a2330; }
.k-table .k-sub td {
  background: #faf3e5; font-weight: 600;
}
.k-total-tbl {
  margin-top: 10px; background: #2a2330; color: #fff;
  border-color: #2a2330;
}
.k-total-tbl td {
  color: #fff; border-bottom: none; padding: 12px 14px;
}
.k-total-tbl .k-amt { color: #f9dec2; }

.k-legal {
  font-size: 11.5px; color: #6b5f4d; line-height: 1.6;
  background: #faf3e5; padding: 12px 14px; border-radius: 8px;
}

/* ── Signature pads ── */
.k-sig-grid { margin-top: 24px; }
.k-sig-col { display: flex; flex-direction: column; gap: 8px; }
.k-sig-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.k-sig-meta .k-inline { min-width: 120px; }
.k-sig-wrap {
  position: relative;
  height: 140px;
  background: #fff;
  border: 1px dashed #b8a88a;
  border-radius: 8px;
  overflow: hidden;
}
.k-sig-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  touch-action: none; cursor: crosshair; display: block;
  background: repeating-linear-gradient(transparent 0 24px, #f6edd8 24px 25px);
}
.k-sig-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #b8a88a; font-style: italic; font-size: 12px; pointer-events: none;
}
.k-sig-wrap:has(.k-sig-canvas:focus) .k-sig-placeholder { display: none; }
.k-sig-clear {
  position: absolute; top: 6px; right: 6px;
  background: rgba(255,255,255,.9); border: 1px solid #d8cdb7;
  padding: 3px 10px; border-radius: var(--r-lg); font-size: 11px;
  cursor: pointer; color: #6b5f4d;
}
.k-sig-clear:hover { background: #fff; color: var(--terracotta, #c85a2d); }

.k-rep {
  margin-top: 18px; font-size: 12px; color: #6b5f4d;
  padding: 10px 12px; border-left: 3px solid var(--terracotta, #c85a2d);
  background: #fdf6e9;
}
.k-rep a { color: var(--terracotta, #c85a2d); text-decoration: underline; }

.k-guest-row {
  display: grid; grid-template-columns: 2fr 1fr; gap: 10px;
  margin-bottom: 8px; align-items: end;
}
.k-guest-row label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #8b7f6b; }
.k-guest-row .k-inline { width: 100%; }

.k-dist {
  margin-top: 16px; padding: 10px 14px;
  background: #eef7f4; border: 1px solid #cde4dc;
  border-radius: 8px; font-size: 12.5px; color: #1f5a4a;
}

/* ── Contract cards list ── */
.k-empty {
  text-align: center; padding: 60px 20px; color: #8b7f6b;
}
.k-empty-ico { font-size: 42px; margin-bottom: 10px; }
.k-empty-ttl { font-family: 'Playfair Display', serif; font-size: 20px; color: #3a2f1e; }
.k-empty-sub { font-size: 13px; margin-top: 4px; }
.k-contracts-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}
.k-card {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--border, #e9ddc7);
  border-radius: var(--r-md, 12px);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(60, 40, 20, 0.04);
  min-height: 0;
  transition: box-shadow 0.22s ease, border-color 0.2s ease, transform 0.2s ease;
}
.k-card:hover {
  box-shadow: 0 6px 24px rgba(60, 40, 20, 0.1);
  border-color: color-mix(in srgb, var(--border, #e9ddc7) 65%, var(--terracotta) 35%);
  transform: translateY(-1px);
}
.k-card:focus-within {
  border-color: color-mix(in srgb, var(--border) 50%, var(--terracotta) 50%);
  box-shadow: 0 0 0 2px var(--terra-dim, rgba(192, 96, 58, 0.12));
}
.k-card-img {
  width: 140px;
  flex: 0 0 140px;
  align-self: stretch;
  min-height: 140px;
  background-size: cover;
  background-position: center;
  background-color: #eee;
}
.k-card-body {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.k-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.k-card-ttl { font-weight: 600; color: var(--ink-1, #2a2330); font-size: 14px; line-height: 1.3; }
.k-card-sub { font-size: 11.5px; color: var(--ink-3, #8b7f6b); margin-top: 2px; }
.k-card-badges { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.k-copy-badge {
  font-size: 10px; text-transform: uppercase; letter-spacing: .7px;
  padding: 3px 8px; border-radius: var(--r-lg); font-weight: 600;
}
.k-copy-tenant  { background: #fde6d2; color: #8a3b0e; }
.k-copy-manager { background: #d8ecec; color: #1f5a5a; }
.k-copy-owner   { background: #e4dbee; color: #4d3b73; }
.k-status {
  font-size: 10px; text-transform: uppercase; letter-spacing: .7px;
  padding: 3px 8px; border-radius: var(--r-lg);
}
.k-status-ok { background: #d6eed6; color: #2a5a2a; }
.k-status-pending { background: #fdecb8; color: #6a5013; }
.k-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  font-size: 12px;
  color: var(--ink-2, #5a4d3d);
}
.k-card-grid > div > div { margin-top: 2px; color: var(--ink-1, #2a2330); line-height: 1.45; }
.k-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  align-items: center;
}
.k-card-actions .btn {
  flex: 0 1 auto;
  min-height: 36px;
}

/* Mobile tweaks */
@media (max-width: 720px) {
  .k-paper { padding: 18px 18px 26px; }
  .k-title { font-size: 26px; letter-spacing: 2px; }
  .contract-cal { grid-template-columns: 1fr; }
  .k-grid-2, .k-sig-grid { grid-template-columns: 1fr; }
  .k-guest-row { grid-template-columns: 1fr; }
  .k-card { flex-direction: column; }
  .k-card-img { width: 100%; height: 140px; flex: 0 0 140px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   VMS-FLORIDA-STYLE PROPERTY DETAIL VIEW  (matches vms-florida.com layout)
   ═══════════════════════════════════════════════════════════════════════════ */
.vpd-modal { width:min(1200px,96vw); max-height:92vh; display:flex; flex-direction:column; }
/* Modal header sits outside the scroll area (flex column), so it's naturally
   pinned at the top of the modal. z-index keeps it above the sticky nav. */
.vpd-modal .modal-hd {
  position: relative;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid var(--sand-2);
  flex-shrink: 0;
}
.vpd-body { padding:0; overflow-y:auto; background:#fff; flex:1; min-height:0; }

/* Hero gallery — hairline white gutters on a 2fr · 1fr · 1fr grid so the
   collage reads as a single polished composition rather than a grid of
   individually framed photos. Rounded corners + overflow:hidden give it
   an Airbnb-style soft card feel. */
.vpd-gallery {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;                       /* hairline dividers */
  height: clamp(320px, 46vw, 520px);
  background: #fff;               /* white divider color */
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
}
.vpd-gallery .g-cell {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #f4f2ee;            /* soft placeholder while images load */
}
.vpd-gallery .g-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2, .6, .2, 1);
}
.vpd-gallery .g-cell:hover img { transform: scale(1.04); }
.vpd-gallery .g-main { grid-row: span 2; }

/* Subtle gradient-only hover overlay; the "View" pill carries the label. */
.vpd-gallery .g-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 55%, rgba(15, 23, 42, .28) 100%);
  color: #fff;
  font: 500 13px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .3px;
  gap: 6px;
  opacity: 0;
  transition: opacity .2s ease;
}
.vpd-gallery .g-cell:hover .g-overlay { opacity: 1; }
.vpd-gallery .g-overlay::before {
  content: '';
  width: 28px; height: 28px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2327213d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-3.5-3.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

/* "See all N photos" pill — modern white chip with refined iconography. */
.vpd-seeall {
  position: absolute;
  right: 16px; bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  background: #fff;
  color: #27213d;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: var(--r-lg);
  font: 600 13px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .1px;
  cursor: pointer;
  z-index: 2;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 6px 16px -4px rgba(15, 23, 42, .18),
    0 2px 4px rgba(15, 23, 42, .06);
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.vpd-seeall::before {
  content: '';
  width: 15px; height: 15px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2327213d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}
.vpd-seeall:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 10px 22px -4px rgba(15, 23, 42, .22),
    0 3px 6px rgba(15, 23, 42, .08);
}
.vpd-seeall:active { transform: translateY(0); }

/* Section nav (Description · Price · Amenities · Availability · Map).
   #pdBody is the scroll container, so top:0 sticks the nav flush against
   the bottom of the fixed .modal-hd above it. */
.vpd-nav {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  border-bottom: 1px solid var(--sand-2);
  display: flex;
  gap: 0;
  overflow-x: auto;
  padding: 0 28px;
  scrollbar-width: none;
  /* Subtle shadow appears once the nav is sticky (when scrolled past its
     natural position) to visually separate it from the content below. */
  transition: box-shadow .2s ease, background-color .2s ease;
}
.vpd-nav::-webkit-scrollbar { display: none; }
/* When stuck, give the nav a clean divider from the hero above and a soft
   drop shadow so it reads as a floating toolbar under the modal header. */
.vpd-nav.is-stuck {
  box-shadow: 0 6px 14px rgba(0, 0, 0, .06);
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.vpd-nav button {
  appearance: none; background: none; border: none;
  padding: 16px 20px;
  font-family: inherit; font-size: 14px; font-weight: 500;
  color: var(--ink-3); cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.vpd-nav button:hover { color: var(--ink-1); }
.vpd-nav button.active { color: var(--terracotta); border-bottom-color: var(--terracotta); }

/* Two-column content */
.vpd-main { display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:32px;
  padding:28px 28px 48px; max-width:1200px; margin:0 auto; }
@media (max-width:960px) { .vpd-main { grid-template-columns:1fr; } }

.vpd-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-bottom:20px; }
.vpd-title h1 { font-family:'Playfair Display',serif; font-size:28px; line-height:1.2;
  color:var(--ink-1); margin:0 0 8px; font-weight:600; }
.vpd-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.vpd-chip { padding:4px 11px; border-radius:4px; font-size:11px; font-weight:600;
  letter-spacing:.5px; text-transform:uppercase; background:var(--sand-2); color:var(--ink-2); }
.vpd-chip.type-house { background:#f3e8d8; color:#8c5a1f; }
.vpd-chip.type-villa { background:#ead6c0; color:#6b3e10; }
.vpd-chip.type-condo { background:#e6ddd0; color:#604d2c; }
.vpd-chip.verified { background:#e2efe3; color:#2e6a3b; }
.vpd-meta { display:flex; gap:16px; align-items:center; color:var(--ink-2); font-size:14px;
  flex-wrap:wrap; margin-top:6px; }
.vpd-meta .dot { width:4px; height:4px; border-radius:50%; background:var(--sand-3); }

/* Section card */
.vpd-section { margin-top:32px; }
.vpd-section h2 { font-family:'Playfair Display',serif; font-size:20px; color:var(--ink-1);
  font-weight:600; margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--sand-2); }

/* Price details table */
.vpd-price { display:grid; grid-template-columns: 1fr auto; gap:8px 24px; font-size:14px; }
.vpd-price .k { color:var(--ink-3); }
.vpd-price .v { color:var(--ink-1); font-weight:600; }
.vpd-price .v.big { font-size:18px; color:var(--terracotta); }

/* Description */
.vpd-desc { font-size:15px; line-height:1.7; color:var(--ink-2); white-space:pre-wrap; }

/* Sleeping */
.vpd-beds { display:grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.vpd-bed { border:1px solid var(--sand-2); border-radius:10px; padding:14px;
  background:var(--sand-1); }
.vpd-bed strong { display:block; font-size:13px; color:var(--ink-1); margin-bottom:4px;
  text-transform:uppercase; letter-spacing:.3px; }
.vpd-bed span { font-size:14px; color:var(--ink-2); }

/* Address */
.vpd-addr { display:grid; grid-template-columns: repeat(2, 1fr); gap:10px 32px; font-size:14px;
  color:var(--ink-2); }
.vpd-addr .row { display:flex; gap:8px; }
.vpd-addr .lbl { color:var(--ink-3); min-width:80px; }
.vpd-addr .val { color:var(--ink-1); font-weight:500; }
@media (max-width:640px) { .vpd-addr { grid-template-columns:1fr; } }

/* Property details chips */
.vpd-pdet { display:flex; flex-wrap:wrap; gap:10px; }
.vpd-pdet .it { background:var(--sand-1); padding:8px 14px; border-radius:8px;
  border:1px solid var(--sand-2); font-size:13px; color:var(--ink-2); }
.vpd-pdet .it b { color:var(--ink-1); margin-left:6px; }

/* Features (2-col checklist) */
.vpd-feats { display:grid; grid-template-columns: repeat(2,1fr); gap:8px 24px;
  font-size:14px; color:var(--ink-2); }
.vpd-feats .feat { display:flex; align-items:center; gap:10px; padding:6px 0;
  border-bottom:1px dashed var(--sand-2); }
.vpd-feats .feat::before { content:"✓"; color:var(--sage); font-weight:700; flex-shrink:0; }
@media (max-width:640px) { .vpd-feats { grid-template-columns:1fr; } }

/* Wifi/access card (only shown to manager/owner/tenant-of-record) */
.vpd-access { display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
  gap:12px; }
.vpd-access .it { background:#fff6eb; border:1px dashed #e2b88f; border-radius:10px;
  padding:12px 14px; font-size:13px; color:var(--ink-1); }
.vpd-access .it .k { color:var(--ink-3); font-size:11px; text-transform:uppercase;
  letter-spacing:.5px; }
.vpd-access .it .v { font-family:'JetBrains Mono',monospace; font-size:15px;
  font-weight:600; margin-top:4px; display:block; }

/* Booking sidebar */
.vpd-aside { position:sticky; top:110px; align-self:flex-start; }
.vpd-book { background:var(--sand-1); border:1px solid var(--sand-2); border-radius:14px;
  padding:20px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.vpd-book .price { font-family:'Playfair Display',serif; font-size:26px; color:var(--terracotta);
  font-weight:600; }
.vpd-book .per { font-size:14px; color:var(--ink-3); font-weight:400; }
.vpd-book label { display:block; font-size:12px; color:var(--ink-3); margin:14px 0 6px;
  text-transform:uppercase; letter-spacing:.4px; }
.vpd-book .drow { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.vpd-book .total { display:flex; justify-content:space-between; font-size:14px;
  padding:14px 0; margin-top:10px; border-top:1px solid var(--sand-2); }
.vpd-book .total .tot { color:var(--terracotta); font-weight:700; }
.vpd-host { background:#fff; border:1px solid var(--sand-2); border-radius:12px;
  padding:16px; margin-top:14px; }
.vpd-host .nm { font-weight:600; color:var(--ink-1); }
.vpd-host .rl { font-size:12px; color:var(--ink-3); margin-top:2px; }
.vpd-host .contact { font-size:13px; color:var(--ink-2); margin-top:8px; line-height:1.6; }
.vpd-host .row { display:flex; gap:8px; margin-top:10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   FULL-SCREEN PHOTO LIGHTBOX — Fancybox 3 replica
   Mirrors the gallery style at
     https://vms-florida.com/properties/…/#website_rental_gallery-3
   Key fidelity points pulled directly from jquery.fancybox.css:
     • Backdrop: rgb(30,30,30) @ opacity .9 (not pure black)
     • Toolbar buttons: 44×44, rgba(30,30,30,.6) bg, #ccc icon, #fff on hover
     • Nav arrows: 100h × 70w, vertically centered
     • Caption: bottom gradient 0→.85 black, white text, center-aligned
     • Thumb strip: 100×75 tiles, 2px gap, 6px #ff5268 active border
   ═══════════════════════════════════════════════════════════════════════════ */
.vpd-lightbox {
  position: fixed; inset: 0;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s cubic-bezier(.47,0,.74,.71), visibility 0s ease .25s;
}
.vpd-lightbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .25s cubic-bezier(.22,.61,.36,1), visibility 0s ease 0s;
}

.vpd-lb-bg {
  position: absolute; inset: 0;
  background: rgb(30, 30, 30);
  opacity: .92;
  cursor: zoom-out;
}

/* Counter pill (top-left) — Fancybox uses mix-blend-mode: difference so it
   reads as white on any photo without a heavy background. */
.vpd-lb-infobar {
  position: absolute;
  top: 0; left: 0;
  height: 44px;
  min-width: 44px;
  padding: 0 14px;
  color: #ccc;
  font-size: 13px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: .3px;
  mix-blend-mode: difference;
  pointer-events: none;
  user-select: none;
  -webkit-font-smoothing: subpixel-antialiased;
  z-index: 99997;
}

/* Toolbar (top-right) hosts the Close button. */
.vpd-lb-toolbar {
  position: absolute;
  top: 0; right: 0;
  display: flex;
  z-index: 99997;
}

/* Shared button base — matches .fancybox-button (44×44, tinted, #ccc→#fff). */
.vpd-lb-btn {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(30, 30, 30, .6);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  color: #ccc;
  height: 44px;
  width: 44px;
  padding: 10px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .2s ease, background .2s ease;
  vertical-align: top;
}
.vpd-lb-btn:hover { color: #fff; }
.vpd-lb-btn:focus-visible { outline: 1px dotted #fff; outline-offset: 2px; }
.vpd-lb-btn svg { width: 100%; height: 100%; display: block; }

/* Nav arrows — Fancybox sizes them 100h × 70w with vertical centering. */
.vpd-lb-arrow {
  position: absolute;
  top: calc(50% - 50px);
  width: 70px;
  height: 100px;
  padding: 30px 18px;
  background-clip: content-box;
  z-index: 99997;
}
.vpd-lb-arrow-left  { left: 0; padding-left: 6px; padding-right: 26px; }
.vpd-lb-arrow-right { right: 0; padding-left: 26px; padding-right: 6px; }

/* Stage holds the active image. Leaves room at bottom for caption + thumbs.
   Fancybox uses 44px slide padding; we reserve ~140px so thumbs rail fits. */
.vpd-lb-stage {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  bottom: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 88px;   /* keep content clear of the 70px arrows */
  overflow: hidden;
}
.vpd-lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
  animation: vpdLBfade .28s cubic-bezier(.22,.61,.36,1);
}
@keyframes vpdLBfade {
  from { opacity: 0; transform: scale(.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* Caption sits above the thumbs rail. Matches Fancybox's gradient footer:
   pointer-events off so arrow clicks pass through, center-aligned text. */
.vpd-lb-caption {
  position: absolute;
  left: 0; right: 0;
  bottom: 108px;      /* exactly the thumbs rail height */
  padding: 56px 44px 16px;
  color: #eee;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  text-align: center;
  pointer-events: none;
  z-index: 99996;
  background: linear-gradient(to top,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.30) 50%,
    rgba(0,0,0,.15) 65%,
    rgba(0,0,0,.075) 75.5%,
    rgba(0,0,0,.037) 82.85%,
    rgba(0,0,0,.019) 88%,
    rgba(0,0,0, 0)   100%);
}
.vpd-lb-caption:empty { display: none; }

/* Thumbnail rail along the bottom — Fancybox's `.fancybox-thumbs-x` variant.
   Background #ddd, 100×75 tiles with 2px gap, 6px #ff5268 active border. */
.vpd-lb-thumbs {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 108px;
  background: #1e1e1e;
  padding: 6px 10px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 99995;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #555 transparent;
}
.vpd-lb-thumbs::-webkit-scrollbar { height: 6px; }
.vpd-lb-thumbs::-webkit-scrollbar-track { background: transparent; }
.vpd-lb-thumbs::-webkit-scrollbar-thumb { background: #555; border-radius: 10px; }

.vpd-lb-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 100px;
  height: 75px;
  margin: 0 2px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, .1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  outline: none;
  overflow: hidden;
  opacity: .7;
  transition: opacity .18s ease, transform .18s ease;
}
.vpd-lb-thumb:hover { opacity: 1; }
.vpd-lb-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Active thumb: 6px coral-red border overlay, identical to Fancybox's accent. */
.vpd-lb-thumb::before {
  content: '';
  position: absolute; inset: 0;
  border: 6px solid #ff5268;
  opacity: 0;
  transition: opacity .2s cubic-bezier(.25,.46,.45,.94);
  pointer-events: none;
}
.vpd-lb-thumb.is-active { opacity: 1; }
.vpd-lb-thumb.is-active::before { opacity: 1; }

/* Mobile tweaks — shrink arrows, rail, and reserved bottom space. */
@media (max-width: 720px) {
  .vpd-lb-arrow { width: 52px; height: 80px; top: calc(50% - 40px); }
  .vpd-lb-arrow svg { width: 28px; height: 28px; }
  .vpd-lb-stage { padding: 0 56px; bottom: 96px; }
  .vpd-lb-caption { bottom: 76px; padding: 48px 18px 12px; font-size: 13px; }
  .vpd-lb-thumbs { height: 76px; padding: 4px 6px 6px; }
  .vpd-lb-thumb { width: 76px; height: 57px; }
  .vpd-lb-thumb::before { border-width: 4px; }
}

/* Hide legacy prop-detail styles when new wrapper is present */
.vpd-modal .pd-hero { display:none; }

/* ═══════════════════════════════════════════════════════════════════════════
   EDIT PROPERTY — MODERN TABBED FORM
   ═══════════════════════════════════════════════════════════════════════════ */
.ep-modal { width:min(960px,96vw); max-height:92vh; display:flex; flex-direction:column; }
.ep-tabs { display:flex; border-bottom:1px solid var(--sand-2); padding:0 18px;
  background:var(--sand-1); overflow-x:auto; scrollbar-width:none; }
.ep-tabs::-webkit-scrollbar { display:none; }
.ep-tab { appearance:none; background:none; border:none; padding:14px 16px; font-family:inherit;
  font-size:13.5px; color:var(--ink-3); cursor:pointer; border-bottom:2px solid transparent;
  white-space:nowrap; font-weight:500; }
.ep-tab:hover { color:var(--ink-1); }
.ep-tab.active { color:var(--terracotta); border-bottom-color:var(--terracotta); font-weight:600; }
.ep-body { padding:24px 28px; overflow-y:auto; flex:1; }
.ep-pane { display:none; }
.ep-pane.active { display:block; animation:ep-fade .18s ease; }
@keyframes ep-fade { from{opacity:0;transform:translateY(4px);} to{opacity:1;transform:none;} }

.ep-hdrow { display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  margin-bottom:14px; flex-wrap:wrap; }
.ep-pane-title { font-family:'Playfair Display',serif; font-size:18px; color:var(--ink-1);
  font-weight:600; }
.ep-pane-sub { font-size:13px; color:var(--ink-3); margin-top:4px; max-width:520px; line-height:1.5; }
.ep-actions { display:flex; gap:8px; align-items:center; }

.ep-url-row { display:flex; gap:8px; margin-bottom:16px; }
.ep-url-row .form-input { flex:1; }

/* Gallery manager */
.ep-gallery { display:grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
  gap:12px; }
.ep-gallery .ep-tile { position:relative; aspect-ratio:4/3; background:var(--sand-2);
  border-radius:10px; overflow:hidden; cursor:grab; border:2px solid transparent;
  transition:border-color .15s, transform .15s; }
.ep-gallery .ep-tile img { width:100%; height:100%; object-fit:cover; display:block;
  user-select:none; pointer-events:none; }
.ep-gallery .ep-tile.dragging { opacity:.45; cursor:grabbing; }
.ep-gallery .ep-tile.drop-before { border-color:var(--terracotta); transform:translateX(4px); }
.ep-gallery .ep-tile.cover { border-color:var(--terracotta); }
.ep-gallery .ep-tile .ep-cover-badge { position:absolute; top:8px; left:8px;
  background:var(--terracotta); color:#fff; font-size:10px; padding:3px 7px; border-radius:4px;
  font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.ep-gallery .ep-tile .ep-tile-btns { position:absolute; top:8px; right:8px; display:flex; gap:4px; }
.ep-gallery .ep-tile .ep-tile-btns button { width:26px; height:26px; border:none; border-radius:50%;
  background:rgba(255,255,255,.95); color:var(--ink-1); cursor:pointer; font-size:13px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.ep-gallery .ep-tile .ep-tile-btns button:hover { background:#fff; transform:scale(1.08); }
.ep-gallery .ep-tile .ep-tile-btns .del:hover { background:#fde2dc; color:var(--terracotta); }
.ep-gallery .ep-tile .ep-idx { position:absolute; bottom:6px; left:8px; font-size:11px;
  color:#fff; background:rgba(0,0,0,.55); padding:2px 7px; border-radius: var(--r-lg); }
.ep-gallery-empty { grid-column:1/-1; text-align:center; padding:40px 20px;
  border:2px dashed var(--sand-3); border-radius:10px; color:var(--ink-3); font-size:13px; }

/* Sleeping list */
.ep-sleep { display:flex; flex-direction:column; gap:10px; }
.ep-sleep-row { display:grid; grid-template-columns: 1fr 1fr auto; gap:10px;
  align-items:center; background:var(--sand-1); border:1px solid var(--sand-2);
  border-radius:10px; padding:10px 12px; }
.ep-sleep-row input { background:#fff; }
.ep-sleep-row .rm { background:none; border:1px solid var(--sand-3); border-radius:6px;
  color:var(--ink-3); padding:8px 12px; cursor:pointer; }
.ep-sleep-row .rm:hover { background:#fde2dc; color:var(--terracotta); border-color:var(--terracotta); }

/* Features chips */
.ep-features { display:flex; flex-wrap:wrap; gap:8px; }
.ep-feat-chip { background:var(--sand-1); border:1px solid var(--sand-2); border-radius: var(--r-lg);
  padding:7px 14px; font-size:13px; color:var(--ink-2); cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:6px; transition:all .15s; }
.ep-feat-chip:hover { border-color:var(--terracotta); color:var(--ink-1); }
.ep-feat-chip.active { background:#e2efe3; border-color:var(--sage); color:#2e6a3b;
  font-weight:600; }
.ep-feat-chip.active::before { content:"✓"; color:var(--sage); }
.ep-feat-chip .rm { color:var(--ink-3); font-weight:700; padding:0 0 0 4px; }
.ep-feat-chip .rm:hover { color:var(--terracotta); }


/* ═══════════════════════════════════════════════════════════════════════════
   LANDING — HERO V2 (UGC slider + site header)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Full-bleed hero with crossfading slides */
.hero-v2 {
  position: relative;
  min-height: min(820px, 92vh);
  overflow: hidden;
  color: #fff;
  margin-top: 0;
  isolation: isolate;
}

.hero-slides {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.2s ease, transform 8s linear;
  will-change: opacity, transform;
}
.hero-slide.active {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1.2s ease, transform 12s linear;
}

/* Rich, cinematic scrim for text legibility */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(110deg, rgba(15,18,25,.78) 0%, rgba(15,18,25,.55) 38%, rgba(15,18,25,.15) 68%, rgba(15,18,25,.45) 100%),
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.0) 35%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}

.hero-v2-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 160px 64px 72px;
  min-height: min(820px, 92vh);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .8fr);
  grid-template-rows: 1fr auto;
  gap: 48px;
  align-items: end;
}

.hero-v2-content {
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: end;
  max-width: 680px;
  animation: heroRise .9s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-v2-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-lg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 24px;
}
.hero-v2-eyebrow .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #79c48f;
  box-shadow: 0 0 0 0 rgba(121, 196, 143, .7);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0   rgba(121, 196, 143, .7); }
  70%  { box-shadow: 0 0 0 10px rgba(121, 196, 143, 0); }
  100% { box-shadow: 0 0 0 0   rgba(121, 196, 143, 0); }
}

.hero-v2-h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(42px, 5.6vw, 76px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.5px;
  color: #fff;
  text-shadow: 0 2px 32px rgba(0,0,0,.35);
  margin: 0 0 22px;
}
.hero-v2-h1 em {
  font-style: italic;
  color: #f6c39a;
  background: linear-gradient(90deg, #f6c39a, #e1a07a);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-v2-sub {
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,.90);
  max-width: 560px;
  margin: 0 0 36px;
  text-shadow: 0 1px 16px rgba(0,0,0,.3);
}

.hero-v2-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }

.btn-glass {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  transition: all .2s;
}
.btn-glass:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.45); transform: translateY(-1px); }

/* Live caption beneath CTA */
.hero-v2-caption {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 18px 12px 16px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  max-width: fit-content;
}
.hero-cap-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #f6c39a;
  box-shadow: 0 0 12px #f6c39a;
  flex-shrink: 0;
}
.hero-cap-text {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 15px;
  color: #fff;
  line-height: 1.2;
}
.hero-cap-loc {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-top: 3px;
}

/* Floating trust card (right column) */
.hero-v2-trust {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: end;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  padding: 22px 24px;
  min-width: 300px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: heroRise 1.1s cubic-bezier(.22,.61,.36,1) .2s both;
}
.trust-row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; }
.trust-stat { text-align: center; }
.trust-val {
  font-family: 'Playfair Display', serif;
  font-size: 30px; font-weight: 600;
  color: #fff; line-height: 1;
}
.trust-lbl {
  font-size: 11px; color: rgba(255,255,255,.7);
  margin-top: 6px; line-height: 1.35;
  letter-spacing: .3px;
}
.trust-div { width: 1px; height: 36px; background: rgba(255,255,255,.22); }
.trust-foot {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.14);
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.trust-badge {
  font-size: 11px; padding: 4px 10px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--r-lg);
  color: rgba(255,255,255,.85);
}

/* Slide dots */
.hero-v2-dots {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 8px;
  z-index: 3;
}
.hero-dot {
  width: 28px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.32);
  border: none; padding: 0;
  cursor: pointer;
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.hero-dot::after {
  content: '';
  position: absolute; inset: 0;
  width: 0%;
  background: #fff;
  transition: none;
}
.hero-dot.active { background: rgba(255,255,255,.45); }
.hero-dot.active::after {
  width: 100%;
  transition: width 6s linear;
}
.hero-dot:hover { background: rgba(255,255,255,.55); }

/* Responsive */
@media (max-width: 1024px) {
  .hero-v2-inner {
    grid-template-columns: 1fr;
    padding: var(--header-h) 32px 80px;
  }
  .hero-v2-trust {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    width: 100%;
    max-width: 520px;
    margin-top: 12px;
  }
  .hero-v2-content { grid-row: auto; }
}
@media (max-width: 600px) {
  .hero-v2 { min-height: 720px; }
  .hero-v2-inner { padding: 130px 20px 90px; }
  .hero-v2-h1 { font-size: clamp(36px, 9vw, 52px); }
  .trust-row { grid-template-columns: 1fr 1fr 1fr; }
  .trust-div { display: none; }
  .hero-v2-dots { bottom: 20px; }
}

/* Landing-only: transparent header overlaying the hero, flips to solid on scroll */
.master_header--overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.master_header--overlay .logo img,
.master_header--overlay .mobile-logo img {
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35));
}
.master_header--overlay #access .menu > li > a,
.master_header--overlay #access .menu-item-link,
.master_header--overlay .signuplink,
.master_header--overlay .mobile-trigger,
.master_header--overlay .mobile-trigger-user { color: #fff; }
.master_header--overlay #access .menu > li:hover > a,
.master_header--overlay #access .menu > li.current-menu-item > a { color: #f6c39a; }
.master_header--overlay .signuplink#topbarregister {
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(10px);
}
.master_header--overlay .signuplink#topbarregister:hover {
  background: #fff; color: #27213d;
}
/* solid state (after scroll) — flat white, no backdrop filter, no drop shadow */
.master_header--overlay.is-scrolled {
  position: fixed;
  background-color: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: #ececec;
  box-shadow: none;
}
.master_header--overlay.is-scrolled .logo img,
.master_header--overlay.is-scrolled .mobile-logo img { filter: none; }
.master_header--overlay.is-scrolled #access .menu > li > a,
.master_header--overlay.is-scrolled #access .menu-item-link,
.master_header--overlay.is-scrolled .signuplink,
.master_header--overlay.is-scrolled .mobile-trigger,
.master_header--overlay.is-scrolled .mobile-trigger-user { color: #27213d; }
.master_header--overlay.is-scrolled #access .menu > li:hover > a,
.master_header--overlay.is-scrolled #access .menu > li.current-menu-item > a { color: #36a3a0; }
.master_header--overlay.is-scrolled .signuplink#topbarregister {
  background: #36a3a0; border: 1px solid transparent; color: #fff;
}
/* Scrolled header is slimmer */
.master_header--overlay.is-scrolled .header_wrapper_inside { height: 84px; }
.master_header--overlay.is-scrolled .logo img { width: 140px; height: 80px; max-height: 80px; }
.master_header--overlay.is-scrolled #access .menu > li { height: 84px; line-height: 84px; }

/* ── Sub-pages (About, Things to Do, Contact, Rentals) ──────────
   Carry the homepage's frosted-glass header (dark ink text + teal
   hover + light gradient) across every content page. We keep the
   `.is-scrolled` class permanently but switch from `fixed` to
   `sticky` so the page banner / results pane sits flush below the
   header without needing a spacer.                                */
body.home-body,
body.subpage-body,
body.rentals-body { --header-h: 84px; }  /* slim scrolled height applies everywhere */

/* Now that the header is a flat white bar on every page, it should take
   its own slice above the content rather than overlay it. Sticky lets it
   pin to the top while still reserving space in the flow. */
body.home-body .master_header--overlay,
body.home-body .master_header--overlay.is-scrolled,
body.subpage-body .master_header--overlay.is-scrolled,
body.rentals-body .master_header--overlay.is-scrolled {
  position: sticky;
  top: 0;
}
/* On the rentals page the results pane is already sticky at
   `top: var(--header-h)`; the header now takes the same slice so
   both pin cleanly stacked. */
body.rentals-body .master_header--overlay.is-scrolled > .header_wrapper { z-index: 1050; }

/* Compress legacy hero-v2 padding so content isn't pushed by the absolute header */
.hero-v2-inner { padding-top: 190px; }
@media (max-width: 900px) {
  .hero-v2-inner { padding-top: 130px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CLEANING SCHEDULE PANEL — light, scannable “run sheet”
   ═══════════════════════════════════════════════════════════════════════════ */
#panel-cleaning { padding-top: 0; }
.cs-shell {
  max-width: 1200px;
  margin: 0 auto;
}

/* Tip — calm info strip */
.cs-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: #f4f6f9;
  border: 1px solid rgba(0, 0, 0, 0.06);
  color: var(--ink-2);
}
.cs-notice__icon {
  font-size: 22px;
  line-height: 1;
  margin-top: 1px;
  flex-shrink: 0;
  opacity: 0.9;
}
.cs-notice__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.cs-notice__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 72ch;
}

/* Stat chips — label on top, number below */
.cs-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.cs-stat {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 14px;
  padding: 14px 16px 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  position: relative;
  overflow: hidden;
}
.cs-stat::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 0 0 12px 12px;
  background: var(--ink-3);
  opacity: 0.28;
}
.cs-stat--done::after     { background: #5a9670; opacity: 0.5; }
.cs-stat--today::after    { background: var(--terracotta); opacity: 0.55; }
.cs-stat--upcoming::after { background: #e8a830; opacity: 0.5; }
.cs-stat--paid::after     { background: #36a3a0; opacity: 0.5; }
.cs-stat-lbl {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 6px;
}
.cs-stat-val {
  font-family: 'Playfair Display', serif;
  font-size: 30px; font-weight: 600; color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Toolbar: filters in a light bar */
.cs-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #f8f9fb;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.cs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 11px;
  color: var(--ink-3);
  align-items: center;
}
.cs-legend__item {
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
}
.cs-legend__sw {
  width: 13px; height: 13px; border-radius: 4px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
.cs-legend__sw--mon { background: #f3f3f1; }
.cs-legend__sw--tue { background: #f4f0d8; }
.cs-legend__sw--wed { background: #fff0e0; }
.cs-legend__sw--thu { background: #dff6fa; }
.cs-legend__sw--fri { background: #e6f3e0; }
.cs-legend__sw--sat { background: #fdf0f4; }
.cs-legend__sw--sun { background: #e8f0ff; }
.cs-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 2px;
}
.cs-search.filter-sel {
  min-width: 200px;
  flex: 1 1 200px;
  border-radius: 10px;
}

.cs-body { display: flex; flex-direction: column; gap: 12px; }
.cs-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1.5;
  background: #fafbfc;
  border: 1px dashed rgba(0, 0, 0, 0.1);
  border-radius: 14px;
}

.cs-group {
  --day-accent: #e5e7eb;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.cs-group:hover {
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
  border-color: rgba(0, 0, 0, 0.09);
}
.cs-status-done { opacity: 0.9; }
.cs-status-today {
  box-shadow: 0 0 0 1px rgba(192, 96, 58, 0.35), 0 4px 18px rgba(192, 96, 58, 0.12);
}

.cs-group-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 15px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #fff;
  border-left: 4px solid var(--day-accent, #e5e7eb);
}
@supports (background: color-mix(in srgb, white, black)) {
  .cs-group-hd {
    background: color-mix(in srgb, var(--day-accent) 12%, #ffffff 88%);
  }
}
.cs-group-day {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 600; color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.cs-group-date {
  font-size: 12px; color: var(--ink-3);
  margin-top: 3px;
  letter-spacing: 0.02em;
}
.cs-group-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.cs-count { font-size: 12px; color: var(--ink-3); }

.cs-status-pill {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; padding: 5px 11px; border-radius: var(--r-lg);
  background: rgba(0, 0, 0, 0.05); color: var(--ink-2);
}
.cs-status-pill--done     { background: #ecf5ee; color: #2a5a38; }
.cs-status-pill--today   { background: var(--terracotta); color: #fff; }
.cs-status-pill--upcoming { background: #fdf4e3; color: #7a4e0f; }
.cs-status-pill--scheduled{ background: #eef2f7; color: #3b4f66; }

.cs-jobs { display: flex; flex-direction: column; }

.cs-job {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 20px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  border-left: 3px solid transparent;
  transition: background 0.12s;
}
.cs-job:last-child { border-bottom: 0; }
.cs-job:hover { background: #fafbfc; }
.cs-job--done { opacity: 0.55; }
.cs-job--done .cs-addr,
.cs-job--done .cs-info { text-decoration: line-through; }

.cs-job-row1 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.cs-addr {
  font-size: 15px; font-weight: 500; color: var(--ink);
  line-height: 1.4;
}
.cs-type {
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px;
}
.cs-type--condo { background: #e8edf4; color: #3d4f63; }
.cs-type--house { background: #f2ebe4; color: #6a4520; }
.cs-type--villa { background: #f0e9ef; color: #5a2d5a; }

.cs-info {
  font-size: 13px; color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 6px;
}

.cs-job-row2 { display: flex; flex-wrap: wrap; gap: 6px; }
.cs-chip {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--r-lg);
  background: #f3f1ec;
  color: var(--ink-2);
  border: 1px solid rgba(0, 0, 0, 0.07);
  white-space: nowrap;
}
.cs-chip--key   { background: #fff8f0; color: #6b4a0f; border-color: #ede0c8; font-family: 'JetBrains Mono', monospace; }
.cs-chip--amt   { background: #ecf5ef; color: #245c30; border-color: #c8e3cd; font-weight: 600; }
.cs-chip--paid  { background: #e6f3ea; color: #1a5c27; border-color: #b8d9c0; font-weight: 600; }

.cs-job-actions {
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-end; justify-content: center;
  min-width: 130px;
}
.cs-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-2);
  cursor: pointer; user-select: none;
}
.cs-check input { accent-color: var(--sage); cursor: pointer; }

/* Nav badge */
.sb-badge.terra { background: var(--terra-dim); color: var(--terracotta); }

@media (max-width: 900px) {
  .cs-stats { grid-template-columns: repeat(2, 1fr); }
  .cs-toolbar__actions { justify-content: stretch; }
  .cs-search.filter-sel { min-width: 0; width: 100%; }
  .cs-job { grid-template-columns: 1fr; }
  .cs-job-actions { flex-direction: row; align-items: center; }
}
@media (min-width: 960px) {
  .cs-toolbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .cs-toolbar__actions { margin-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   /rentals — SPLIT LAYOUT WITH STICKY MAP (mirrors vms-florida advanced-search)
   Left column = sticky map that stays visible while the right column scrolls.
   Top site-header is also sticky so the brand + nav stay visible throughout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Pin the site header at the top only on /rentals. The landing page keeps its
   own `master_header--overlay` variant, so we scope this to .rentals-body. */
.rentals-body .master_header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}

/* Page shell: full-viewport split. Header sits above (150px) and is sticky,
   so the map's own sticky `top: 150px` nests right beneath it seamlessly. */
.rentals-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  max-width: 1800px;
  margin: 0 auto;
  align-items: start;
}

/* ── LEFT: sticky map pane ─────────────────────────────── */
.rentals-map-pane {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  min-height: 520px;
  background: #e6ecf0;
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.rentals-map {
  width: 100%;
  height: 100%;
  background: #dde6ea;
}
.rentals-map-legend {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 500;
  padding: 7px 12px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  font-size: 11.5px;
  color: var(--ink-2);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  display: inline-flex; align-items: center; gap: 8px;
}
.rentals-map-legend .rml-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(200, 90, 45, .22);
}

/* ── Shrink Leaflet's default attribution / zoom controls so they don't
       clutter the map edges. ─────────────────────────────── */
.leaflet-control-zoom a {
  background: rgba(255, 255, 255, .96) !important;
  color: var(--ink-1) !important;
  border: 1px solid var(--border) !important;
}
.leaflet-control-zoom a:hover { background: #fff !important; color: var(--terracotta) !important; }
.leaflet-control-attribution {
  background: rgba(255, 255, 255, .85) !important;
  font-size: 10px !important;
}

/* ── Price-pill marker (the USD 250 / USD 400 labels on the map) ── */
.leaflet-marker-icon.r-price-pin { background: transparent !important; border: 0 !important; }
.r-price-pill {
  --c: #1b1f24;
  background: #fff;
  color: var(--c);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--r-lg);
  padding: 5px 11px;
  font: 600 12px/1.1 'Outfit', sans-serif;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  white-space: nowrap;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, color .12s ease;
  display: inline-flex; align-items: center; gap: 6px;
  position: relative;
}
.r-price-pill::after {
  content: '';
  position: absolute;
  left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .1));
}
.r-price-pill:hover,
.r-price-pill.is-active {
  background: var(--terracotta);
  color: #fff;
  transform: translateY(-2px) scale(1.05);
}
.r-price-pill:hover::after,
.r-price-pill.is-active::after { border-top-color: var(--terracotta); }
.r-price-pill .r-pp-type {
  font-size: 9px; text-transform: uppercase; letter-spacing: .6px;
  opacity: .7; font-weight: 500;
}

/* ── Hover preview card (anchored over marker on card/pin hover) ── */
.r-hover-preview {
  position: absolute;
  /* Anchor bottom-center of the card just above the marker's point, with
     a small gap so the card doesn't visually touch the price pill. */
  transform: translate(-50%, calc(-100% - 18px));
  width: 280px;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 22px 48px -12px rgba(15, 23, 42, .35),
    0 6px 18px -4px rgba(15, 23, 42, .18),
    0 0 0 1px rgba(15, 23, 42, .06);
  overflow: hidden;
  font-family: 'Outfit', sans-serif;
  color: #27213d;
  pointer-events: auto;
  z-index: 1200;
  animation: rHpIn .14s ease-out;
}
@keyframes rHpIn {
  from { opacity: 0; transform: translate(-50%, calc(-100% - 10px)); }
  to   { opacity: 1; transform: translate(-50%, calc(-100% - 18px)); }
}
/* Speech-bubble tail pointing down at the marker. */
.r-hover-preview::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -9px;
  transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px;
  background: #fff;
  box-shadow: 2px 2px 4px rgba(15, 23, 42, .08);
  border-radius: 2px;
}
.r-hp-close {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: rgba(15, 23, 42, .55);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  transition: background .15s ease;
}
.r-hp-close:hover { background: rgba(15, 23, 42, .8); }
.r-hp-media {
  position: relative;
  display: block;
  cursor: pointer;
  aspect-ratio: 16 / 10;
  background: #e9eef5;
}
.r-hp-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.r-hp-media:hover img { transform: scale(1.04); }
.r-hp-overlay {
  position: absolute; inset: auto 0 0 0;
  padding: 10px 12px 12px;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px;
  background: linear-gradient(
    to top,
    rgba(15, 23, 42, .82) 0%,
    rgba(15, 23, 42, .45) 55%,
    rgba(15, 23, 42, 0) 100%
  );
  color: #fff;
}
.r-hp-title {
  font-size: 14px; line-height: 1.25; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  max-width: 72%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.r-hp-price {
  flex: 0 0 auto;
  font-size: 18px; font-weight: 700;
  color: #74f1c6;
  letter-spacing: .2px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  white-space: nowrap;
}
.r-hp-body {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 12px 12px;
  font-size: 13px;
  color: #4a4466;
}
.r-hp-type {
  font-weight: 500;
  color: #27213d;
}
.r-hp-loc {
  display: inline-flex; align-items: center; gap: 4px;
  color: #6b6684;
  font-weight: 500;
  white-space: nowrap;
}
.r-hp-loc svg { color: #36a3a0; flex: 0 0 auto; }

/* Mobile: the map is hidden by default on small screens (see rentals
   layout rules), but keep the preview safe if it ever shows by shrinking
   the card a touch and letting it flex. */
@media (max-width: 700px) {
  .r-hover-preview { width: 240px; }
  .r-hp-title { font-size: 13px; }
  .r-hp-price { font-size: 16px; }
}

/* ── Purple cluster bubble (like the `3`, `4`, `23` circles) ── */
.marker-cluster { background: transparent !important; }
.marker-cluster > div {
  width: 36px !important; height: 36px !important;
  margin-left: 2px !important; margin-top: 2px !important;
  border-radius: 50% !important;
  font: 700 13px/36px 'Outfit', sans-serif !important;
  color: #fff !important;
  text-align: center;
  box-shadow: 0 4px 14px rgba(140, 95, 200, .45);
  border: 3px solid rgba(255, 255, 255, .9);
}
.marker-cluster-small > div  { background: linear-gradient(135deg, #bb8ff0 0%, #9c6de3 100%) !important; }
.marker-cluster-medium > div { background: linear-gradient(135deg, #9c6de3 0%, #7e4cd1 100%) !important; width: 42px !important; height: 42px !important; line-height: 42px !important; font-size: 14px !important; }
.marker-cluster-large > div  { background: linear-gradient(135deg, #7e4cd1 0%, #5e31b1 100%) !important; width: 48px !important; height: 48px !important; line-height: 48px !important; font-size: 15px !important; }
.marker-cluster span { color: #fff !important; }

/* ── Popup styling (matches card look) ── */
.leaflet-popup-content-wrapper {
  border-radius: 12px !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22) !important;
  padding: 0 !important;
  overflow: hidden;
}
.leaflet-popup-content { margin: 0 !important; width: 240px !important; font-family: 'Outfit', sans-serif; }
.r-popup { width: 240px; }
.r-popup-img { width: 100%; height: 130px; object-fit: cover; display: block; }
.r-popup-body { padding: 10px 12px 12px; }
.r-popup-price {
  font-family: 'Playfair Display', serif;
  font-size: 16px; font-weight: 600; color: var(--terracotta);
  margin-bottom: 2px;
}
.r-popup-name { font-size: 12.5px; color: var(--ink-1); font-weight: 500; line-height: 1.35; margin-bottom: 6px; }
.r-popup-meta { font-size: 11px; color: var(--ink-3); margin-bottom: 10px; }
.r-popup-cta {
  display: block; text-align: center;
  background: var(--terracotta); color: #fff;
  padding: 7px 10px; border-radius: 6px;
  font-size: 12px; font-weight: 600; text-decoration: none;
  transition: background .15s;
}
.r-popup-cta:hover { background: #a8451f; }
.leaflet-popup-tip { box-shadow: 0 4px 10px rgba(0, 0, 0, .12) !important; }
.leaflet-popup-close-button {
  width: 26px !important; height: 26px !important;
  background: rgba(255, 255, 255, .95) !important;
  border-radius: 50% !important;
  top: 8px !important; right: 8px !important;
  font-size: 16px !important; line-height: 26px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

/* ── RIGHT: scrollable results pane ─────────────────────── */
.rentals-results-pane {
  padding: 24px 28px 40px;
  min-width: 0;
  background: var(--paper);
}
.rentals-results-pane .rentals-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 600;
  color: var(--ink-1);
  margin: 8px 0 16px;
}
.rentals-results-pane .rentals-title span { color: var(--terracotta); }

/* Inline search bar (mirrors the VMS-Florida form) */
.rentals-searchbar {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .04);
  margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.rsb-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.rsb-row--actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.rsb-field {
  display: flex; align-items: center; gap: 8px;
  background: var(--sand-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  transition: border-color .15s, background .15s;
}
.rsb-field:focus-within { border-color: var(--terracotta); background: #fff; }
.rsb-field svg { color: var(--ink-3); flex-shrink: 0; }
.rsb-field input,
.rsb-field select {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font: 13px/1 'Outfit', sans-serif;
  color: var(--ink-1);
  min-width: 0;
}
.rsb-field input::placeholder { color: var(--ink-3); }
.rsb-field select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238b7f6b' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right center;
}

.rsb-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rsb-chip {
  appearance: none; border: 1px solid var(--border); background: #fff;
  padding: 6px 12px; border-radius: var(--r-lg);
  font: 500 12px/1 'Outfit', sans-serif; color: var(--ink-2);
  cursor: pointer; transition: all .15s;
}
.rsb-chip:hover { border-color: var(--terracotta); color: var(--ink-1); }
.rsb-chip.active { background: var(--terra-dim); border-color: var(--terracotta); color: var(--terracotta); font-weight: 600; }
.rsb-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.rsb-price { display: flex; align-items: center; gap: 6px; }
.rsb-price input {
  width: 74px; background: var(--sand-1); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 9px; font: 12px 'Outfit', sans-serif;
  color: var(--ink-1); outline: none;
}
.rsb-price input:focus { border-color: var(--terracotta); background: #fff; }
.rsb-price span { color: var(--ink-3); font-size: 12px; }
.rsb-reset {
  appearance: none; background: none; border: 0;
  color: var(--ink-3); font: 500 12.5px/1 'Outfit', sans-serif;
  text-decoration: underline; cursor: pointer;
}
.rsb-reset:hover { color: var(--terracotta); }

/* Results head row (count + sort + view toggle) */
.rentals-results-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.rrh-count { font-size: 14px; color: var(--ink-1); }
.rrh-count strong { color: var(--terracotta); font-weight: 700; }
.rrh-right { display: flex; align-items: center; gap: 10px; }

/* Force a 2-col grid inside the narrower results column */
.rentals-results-pane .vms-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.rentals-results-pane .vms-grid.list-view {
  grid-template-columns: 1fr;
}

/* Card hover state to sync with map marker highlighting */
.vms-card.r-map-active {
  box-shadow: 0 0 0 2px var(--terracotta), 0 12px 30px rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}

/* ── Responsive: stack on narrow screens (map on top, collapsible) ── */
@media (max-width: 1100px) {
  .rentals-split { grid-template-columns: 1fr; }
  .rentals-map-pane {
    position: relative;
    top: auto;
    height: 360px;
    min-height: 320px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .rentals-results-pane .vms-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .rsb-row { grid-template-columns: 1fr; }
  .rentals-results-pane { padding: 18px 16px 32px; }
  .rentals-results-pane .vms-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   /rentals — PASTEL PALETTE (matches vms-florida.com logo: teal + mauve)
   Scoped to .rentals-body so the admin portal and landing page keep their
   existing terracotta theme untouched. Uses very light pastel fills for a
   calm, resort-y feel that blends with the VMS Florida site.
   Reference: https://vms-florida.com/ — menu hover #36a3a0, ink #27213d.
   ═══════════════════════════════════════════════════════════════════════════ */
.rentals-body {
  /* VMS teal — primary CTA + accents */
  --r-teal:       #36a3a0;
  --r-teal-dark:  #2a8583;
  --r-teal-soft:  #e2f2f1;   /* pastel wash — chip fills, hovers */
  --r-teal-tint:  #cfe8e6;
  --r-teal-ink:   #1e5c59;   /* readable text on pastel */

  /* Logo-bird mauve — secondary accent */
  --r-mauve:      #8e79b5;
  --r-mauve-soft: #f0ebf5;
  --r-mauve-ink:  #4b3a74;

  /* Warm neutrals for photo overlays */
  --r-cream:      #fbf7f1;
  --r-sand-hi:    #f3ece0;
  --r-mint:       #dff0e2;   /* "Verified" pastel */
  --r-mint-ink:   #2e6a3b;
}

/* ── Primary CTA (View Details etc.) ──────────────────── */
.rentals-body .btn-primary {
  background: var(--r-teal);
  color: #fff;
  box-shadow: 0 2px 8px rgba(54, 163, 160, .18);
}
.rentals-body .btn-primary:hover {
  background: var(--r-teal-dark);
  box-shadow: 0 4px 14px rgba(54, 163, 160, .28);
}
.rentals-body .btn-ghost { color: var(--r-teal-ink); }
.rentals-body .btn-ghost:hover { color: var(--r-teal); border-color: var(--r-teal); }

/* ── Property cards ──────────────────────────────────── */
.rentals-body .vms-card:hover { border-color: var(--r-teal-tint); }
.rentals-body .vms-card.r-map-active {
  box-shadow: 0 0 0 2px var(--r-teal), 0 12px 30px rgba(54, 163, 160, .12);
}

/* "USD 155 /night" overlay — frosted teal instead of charcoal */
.rentals-body .vms-price-badge {
  background: rgba(30, 92, 89, .78);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
}

/* Verified → pastel mint */
.rentals-body .vms-verified {
  background: var(--r-mint);
  color: var(--r-mint-ink);
}

/* Favourite heart → mauve on hover/active */
.rentals-body .vms-fav-btn:hover,
.rentals-body .vms-fav-btn.faved { color: var(--r-mauve); }

/* Type pill (HOUSE / CONDO / VILLA) — keep pastel */
.rentals-body .vms-type-pill        { background: #fff; color: var(--r-teal-ink); }
.rentals-body .vms-type-pill.house  { background: var(--r-sand-hi); color: #7a5020; }
.rentals-body .vms-type-pill.villa  { background: var(--r-mauve-soft); color: var(--r-mauve-ink); }

/* Card tags — replace terracotta type-tag with pastel teal */
.rentals-body .vms-tag.type-tag {
  background: var(--r-teal-soft);
  color: var(--r-teal-ink);
  border-color: var(--r-teal-tint);
}
.rentals-body .vms-card-loc a { color: var(--r-teal); }

/* ── Search bar ──────────────────────────────────────── */
.rentals-body .rsb-field:focus-within { border-color: var(--r-teal); background: #fff; }
.rentals-body .rsb-chip:hover         { border-color: var(--r-teal-tint); color: var(--r-teal-ink); background: var(--r-teal-soft); }
.rentals-body .rsb-chip.active {
  background: var(--r-teal-soft);
  border-color: var(--r-teal);
  color: var(--r-teal-ink);
}
.rentals-body .rsb-price input:focus  { border-color: var(--r-teal); background: #fff; }
.rentals-body .rsb-reset:hover        { color: var(--r-teal); }
.rentals-body .vms-sort-select:focus  { border-color: var(--r-teal); }
.rentals-body .vms-view-btn.active    { color: var(--r-teal); }

/* Results head accent */
.rentals-body .rrh-count strong       { color: var(--r-teal); }
.rentals-body .rentals-title span     { color: var(--r-teal); }

/* ── Map pins, popups, legend ───────────────────────── */
.rentals-body .r-price-pill:hover,
.rentals-body .r-price-pill.is-active {
  background: var(--r-teal);
  color: #fff;
}
.rentals-body .r-price-pill:hover::after,
.rentals-body .r-price-pill.is-active::after { border-top-color: var(--r-teal); }

.rentals-body .r-popup-price          { color: var(--r-teal-ink); }
.rentals-body .r-popup-cta            { background: var(--r-teal); }
.rentals-body .r-popup-cta:hover      { background: var(--r-teal-dark); }

.rentals-body .rentals-map-legend     { color: var(--r-teal-ink); }
.rentals-body .rentals-map-legend .rml-dot {
  background: var(--r-teal);
  box-shadow: 0 0 0 3px rgba(54, 163, 160, .22);
}

/* Leaflet zoom controls tint on hover */
.rentals-body .leaflet-control-zoom a:hover { color: var(--r-teal) !important; }

/* Purple cluster bubbles — softened mauve to match logo bird */
.rentals-body .marker-cluster-small  > div { background: linear-gradient(135deg, #c0aee0 0%, #a48cd0 100%) !important; }
.rentals-body .marker-cluster-medium > div { background: linear-gradient(135deg, #a48cd0 0%, #8b6fc4 100%) !important; }
.rentals-body .marker-cluster-large  > div { background: linear-gradient(135deg, #8b6fc4 0%, #6f51b0 100%) !important; }

/* Site header: Login/Sign-up accent → teal (matches live site) */
.rentals-body .master_header #access .menu > li:hover > a,
.rentals-body .master_header #access .menu > li.current-menu-item > a { color: var(--r-teal); }
.rentals-body .signuplink#topbarregister { background: var(--r-teal); }
.rentals-body .signuplink#topbarregister:hover { background: var(--r-teal-dark); }

/* ═══════════════════════════════════════════════════════════════════════════
   /rentals — RANGE CALENDAR POPOVER (drag-to-select)
   Two-month grid anchored under the Check-in / Check-out fields. Range pill
   uses the pastel teal tokens defined in .rentals-body above. Supports both
   mouse drag and two-click range selection.
   ═══════════════════════════════════════════════════════════════════════════ */
.rentals-searchbar { position: relative; }

.r-cal {
  position: absolute;
  z-index: 80;
  top: calc(100% - 6px);
  left: 14px;
  right: 14px;
  max-width: 640px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(30, 92, 89, .16), 0 4px 14px rgba(0, 0, 0, .06);
  padding: 16px 18px 12px;
  user-select: none;
  -webkit-user-select: none;
  animation: rCalFadeIn .14s ease-out;
}
@keyframes rCalFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.r-cal[hidden] { display: none; }

.r-cal-months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.r-cal-month { min-width: 0; }

.r-cal-hd {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  margin-bottom: 10px;
}
.r-cal-title {
  font: 500 15px/1 'Outfit', sans-serif;
  color: var(--r-ink, #27213d);
  text-align: center;
  letter-spacing: .2px;
}
.r-cal-nav {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--ink-2);
  font-size: 16px; line-height: 1;
  cursor: pointer;
  transition: all .15s;
}
.r-cal-nav:hover {
  border-color: var(--r-teal);
  color: var(--r-teal);
  background: var(--r-teal-soft);
}
.r-cal-spacer { width: 26px; }

.r-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font: 600 11px/1 'Outfit', sans-serif;
  color: var(--ink-3);
  letter-spacing: .8px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.r-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  row-gap: 2px;
}

/* Day cell — the background of this wrapper creates the contiguous
   pill between start and end dates. The inner button is the circular hit
   target. */
.r-cal-cell {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 34px;
}
.r-cal-day {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font: 500 13px/1 'Outfit', sans-serif;
  color: var(--ink-1);
  cursor: pointer;
  transition: color .12s, background .12s;
  position: relative;
  z-index: 1;
}
.r-cal-day:hover { background: var(--r-teal-soft); color: var(--r-teal-ink); }

.r-cal-cell.is-muted .r-cal-day { color: var(--ink-3); opacity: .55; cursor: default; }
.r-cal-cell.is-muted .r-cal-day:hover { background: transparent; }

.r-cal-cell.is-past .r-cal-day {
  color: var(--ink-3);
  text-decoration: line-through;
  cursor: not-allowed;
}
.r-cal-cell.is-past .r-cal-day:hover { background: transparent; color: var(--ink-3); }

/* In-range fill (the middle teal stripe) */
.r-cal-cell.is-in-range::before {
  content: '';
  position: absolute;
  inset: 2px 0;
  background: var(--r-teal-tint);
  z-index: 0;
}
.r-cal-cell.is-in-range .r-cal-day { color: var(--r-teal-ink); }

/* Range endpoints — rounded pill caps + solid teal knob */
.r-cal-cell.is-start::before,
.r-cal-cell.is-end::before {
  content: '';
  position: absolute;
  inset: 2px 0;
  background: var(--r-teal-tint);
  z-index: 0;
}
.r-cal-cell.is-start::before { left: 50%; border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
.r-cal-cell.is-end::before   { right: 50%; border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
.r-cal-cell.is-start.is-end::before { left: 0; right: 0; background: transparent; }

.r-cal-cell.is-start .r-cal-day,
.r-cal-cell.is-end .r-cal-day {
  background: var(--r-teal);
  color: #fff;
  box-shadow: 0 2px 8px rgba(54, 163, 160, .32);
}

/* Today ring (only when not selected) */
.r-cal-cell.is-today .r-cal-day {
  box-shadow: inset 0 0 0 1.5px var(--r-teal);
  color: var(--r-teal-ink);
  font-weight: 600;
}
.r-cal-cell.is-today.is-start .r-cal-day,
.r-cal-cell.is-today.is-end .r-cal-day { box-shadow: 0 2px 8px rgba(54, 163, 160, .32); color: #fff; }

.r-cal-foot {
  margin: 14px -18px -12px;
  padding: 10px 18px;
  background: var(--r-cream, #fbf7f1);
  border-top: 1px solid var(--border);
  border-radius: 0 0 14px 14px;
  text-align: center;
  font: 500 12.5px/1.4 'Outfit', sans-serif;
  color: var(--ink-2);
}
.r-cal-foot strong { color: var(--r-teal); font-weight: 700; }

/* Open-state visual tie on triggers */
.rsb-cal-trigger { cursor: pointer; }
.rsb-cal-trigger.is-open { border-color: var(--r-teal); background: #fff; box-shadow: 0 0 0 3px var(--r-teal-soft); }

@media (max-width: 720px) {
  .r-cal { left: 0; right: 0; padding: 14px 14px 8px; }
  .r-cal-months { grid-template-columns: 1fr; gap: 8px; }
  .r-cal-month + .r-cal-month { border-top: 1px solid var(--border); padding-top: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   /rentals — MODERN MINIMALIST PASS
   Slimmer header, lighter controls, tighter typography, cleaner map chrome.
   Scoped to .rentals-body so the admin portal and landing page are untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header: match live vms-florida.com/advanced-search/ spec exactly.
   Live site uses:
     .header_wrapper_inside  → height 150px
     .header_type1 .menu>li  → height 150px, line-height 104px
     #topbarlogin/register   → font-size 20px
     logo                    → max 200 × 126
   We defer to the base .master_header rules (already 150px) and just add
   the pastel teal hover accents + pill-shaped register CTA to match the
   rentals theme.  ─────────────────────────────────────────────────── */
.rentals-body .master_header {
  border-bottom: 1px solid #eef0f0;
  box-shadow: none;
  background: #ffffff;
}
/* Let each <li> fill the full 150px header height so the hover underline we
   anchor to its bottom edge sits flush against the header's bottom border,
   matching vms-florida.com's pinned accent bar. */
.rentals-body .master_header #access .menu > li {
  height: var(--header-h);
  line-height: var(--header-h);
  position: relative;
}
.rentals-body .master_header #access .menu > li > a,
.rentals-body .master_header #access .menu-item-link {
  display: block;
  padding: 0 22px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .2px;
  color: #27213d;
  text-decoration: none;          /* kill any inherited underline/strikethrough */
  text-transform: none;
  position: relative;
}
/* Accent underline — pinned to the BOTTOM of the 150px-tall <li>, not the
   text itself. Scoping to `li::after` (rather than `a::after`) means the
   bar sits at the header's bottom edge regardless of anchor height. */
.rentals-body .master_header #access .menu > li::after {
  content: '';
  position: absolute;
  left: 22px; right: 22px; bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--r-teal);
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: center;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.rentals-body .master_header #access .menu > li:hover::after,
.rentals-body .master_header #access .menu > li.current-menu-item::after,
.rentals-body .master_header #access .menu > li.current_page_item::after {
  opacity: 1;
  transform: scaleX(1);
}
.rentals-body .master_header .user_menu { gap: 14px; }
.rentals-body .master_header .signuplink {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: uppercase;
  border-radius: var(--r-lg);
  color: #27213d;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.rentals-body .master_header .signuplink:not(#topbarregister):hover {
  color: var(--r-teal-dark);
}
.rentals-body .master_header .signuplink#topbarregister {
  background: var(--r-teal);
  color: #fff;
  box-shadow: 0 2px 10px rgba(54, 163, 160, .28);
}
.rentals-body .master_header .signuplink#topbarregister:hover {
  background: var(--r-teal-dark);
  box-shadow: 0 4px 14px rgba(54, 163, 160, .35);
}
.rentals-body .master_header .signuplink svg { opacity: .75; }

/* Map pane sits below the full-height 150px site header (matches live). */
.rentals-body .rentals-map-pane { top: var(--header-h); height: calc(100vh - var(--header-h)); }

/* ── Search bar: airier, softer borders, refined typography ──────────── */
.rentals-body .rentals-searchbar {
  padding: 8px;
  border-radius: 18px;
  border-color: #edefef;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .04),
    0 8px 22px rgba(15, 23, 42, .045);
  gap: 6px;
}
.rentals-body .rsb-row { gap: 6px; }
.rentals-body .rsb-field {
  background: #fafbfb;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 11px 14px;
  gap: 10px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.rentals-body .rsb-field:hover { background: #f3f6f6; }
.rentals-body .rsb-field:focus-within {
  background: #fff;
  border-color: var(--r-teal);
  box-shadow: 0 0 0 3px var(--r-teal-soft);
}
.rentals-body .rsb-field svg { color: #8b9898; }
.rentals-body .rsb-field input,
.rentals-body .rsb-field select {
  font: 500 13.5px/1.2 'Outfit', sans-serif;
  letter-spacing: -.1px;
  color: #1e2a2a;
}
.rentals-body .rsb-field input::placeholder { color: #94a3a3; font-weight: 400; }
.rentals-body .rsb-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7b7b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-position: right 2px center;
  padding-right: 18px;
}

/* Action row: chips + price + reset */
.rentals-body .rsb-row--actions { padding: 2px 4px 4px; gap: 12px; }
.rentals-body .rsb-chips { gap: 4px; }
.rentals-body .rsb-chip {
  border-color: transparent;
  background: #f4f6f6;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: #4b5858;
  letter-spacing: -.1px;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.rentals-body .rsb-chip:hover {
  background: var(--r-teal-soft);
  color: var(--r-teal-ink);
  border-color: transparent;
}
.rentals-body .rsb-chip.active {
  background: var(--r-teal);
  color: #fff;
  border-color: var(--r-teal);
  box-shadow: 0 2px 8px rgba(54, 163, 160, .25);
}
.rentals-body .rsb-chip-label {
  color: #8b9898;
  font: 400 12px 'Outfit', sans-serif;
  margin-left: 4px;
  letter-spacing: .1px;
}
.rentals-body .rsb-sep {
  height: 18px;
  background: #e4e8e8;
  margin: 0 8px;
}
.rentals-body .rsb-price {
  background: #f4f6f6;
  border-radius: var(--r-lg);
  padding: 3px 4px 3px 10px;
  gap: 2px;
  font-size: 12.5px;
  color: #4b5858;
}
.rentals-body .rsb-price input {
  width: 56px;
  background: transparent;
  border: 0;
  padding: 6px 4px;
  font: 500 12.5px 'Outfit', sans-serif;
  color: #1e2a2a;
  text-align: center;
}
.rentals-body .rsb-price input:focus { background: transparent; border: 0; }
.rentals-body .rsb-price input::placeholder { color: #94a3a3; }
.rentals-body .rsb-price-dash { color: #b4bebe; }
.rentals-body .rsb-price-unit { color: #8b9898; margin-right: 10px; font-size: 11.5px; letter-spacing: .1px; }
.rentals-body .rsb-reset {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  padding: 7px 12px;
  color: #6b7b7b;
  font: 500 12.5px 'Outfit', sans-serif;
  text-decoration: none;
  letter-spacing: -.1px;
  transition: color .15s, background .15s, border-color .15s;
}
.rentals-body .rsb-reset:hover {
  color: var(--r-teal-dark);
  background: var(--r-teal-soft);
}
.rentals-body .rsb-reset svg { opacity: .75; }

/* ── Calendar trigger: drop hover border since field now owns hover ──── */
.rentals-body .rsb-cal-trigger { cursor: pointer; }
.rentals-body .rsb-cal-trigger.is-open {
  background: #fff;
  border-color: var(--r-teal);
  box-shadow: 0 0 0 3px var(--r-teal-soft);
}

/* ── Results head: airier, cleaner view toggle, sort w/ icon ─────────── */
.rentals-body .rentals-results-head {
  padding: 18px 4px 14px;
  border-bottom: 1px solid #eef0f0;
  margin-bottom: 18px;
}
.rentals-body .rrh-count {
  font: 500 14px/1.3 'Outfit', sans-serif;
  color: #6b7b7b;
  letter-spacing: -.1px;
}
.rentals-body .rrh-count strong {
  color: #1e2a2a;
  font-weight: 600;
  font-size: 16px;
  margin-right: 4px;
}
.rentals-body .rrh-count span { font-weight: 400; }
.rentals-body .rrh-right { gap: 8px; }

.rentals-body .vms-view-toggle {
  background: #f4f6f6;
  border: 0;
  padding: 4px;
  border-radius: 10px;
  gap: 0;
}
.rentals-body .vms-view-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  color: #8b9898;
  transition: background .15s, color .15s, box-shadow .15s;
}
.rentals-body .vms-view-btn:hover { color: #1e2a2a; }
.rentals-body .vms-view-btn.active {
  background: #fff;
  color: var(--r-teal-dark);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}

.rentals-body .rrh-sort {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f4f6f6;
  border-radius: 10px;
  padding: 0 12px 0 14px;
  color: #6b7b7b;
  transition: background .15s;
}
.rentals-body .rrh-sort:hover { background: #ebefef; }
.rentals-body .rrh-sort svg { color: #8b9898; flex-shrink: 0; }
.rentals-body .rrh-sort .vms-sort-select {
  background: transparent;
  border: 0;
  padding: 9px 18px 9px 2px;
  font: 500 13px 'Outfit', sans-serif;
  color: #1e2a2a;
  letter-spacing: -.1px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7b7b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  cursor: pointer;
}
.rentals-body .rrh-sort .vms-sort-select:focus { outline: none; border-color: transparent; }

/* Title: lighter, larger, tight tracking */
.rentals-body .rentals-results-pane .rentals-title {
  font: 400 30px/1.15 'Playfair Display', serif;
  letter-spacing: -.8px;
  color: #1e2a2a;
  margin: 4px 0 18px;
}
.rentals-body .rentals-results-pane .rentals-title span {
  font-style: italic;
  color: var(--r-teal-dark);
  font-weight: 500;
}

/* ── Map chrome: minimal zoom, refined legend, cleaner price pill ────── */
.rentals-body .leaflet-control-zoom {
  border: 0 !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .12), 0 1px 3px rgba(15, 23, 42, .06);
  margin: 14px !important;
}
.rentals-body .leaflet-control-zoom a {
  width: 34px !important; height: 34px !important; line-height: 34px !important;
  background: rgba(255, 255, 255, .96) !important;
  border: 0 !important;
  color: #1e2a2a !important;
  font-size: 18px !important; font-weight: 400 !important;
  transition: background .15s, color .15s;
}
.rentals-body .leaflet-control-zoom a + a { border-top: 1px solid #eef0f0 !important; }
.rentals-body .leaflet-control-zoom a:hover {
  background: #fff !important;
  color: var(--r-teal-dark) !important;
}
.rentals-body .leaflet-control-attribution {
  background: rgba(255, 255, 255, .88) !important;
  border-radius: 6px !important;
  padding: 3px 7px !important;
  font-size: 9.5px !important;
  color: #8b9898 !important;
  margin: 0 10px 8px !important;
}
.rentals-body .leaflet-control-attribution a { color: #6b7b7b !important; }

.rentals-body .rentals-map-legend {
  padding: 8px 13px;
  background: rgba(255, 255, 255, .96);
  border: 0;
  border-radius: var(--r-lg);
  font: 500 12px 'Outfit', sans-serif;
  color: #1e2a2a;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .12);
  gap: 7px;
}
.rentals-body .rentals-map-legend svg { color: var(--r-teal-dark); }

/* Price pill: slightly bolder, tighter, refined type */
.rentals-body .r-price-pill {
  padding: 6px 12px 6px 11px;
  font: 600 12.5px/1.1 'Outfit', sans-serif;
  letter-spacing: -.2px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(15, 23, 42, .06);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .16), 0 1px 2px rgba(15, 23, 42, .08);
  gap: 7px;
  color: #1e2a2a;
}
.rentals-body .r-price-pill .r-pp-type {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .8px;
  opacity: .55;
  text-transform: uppercase;
}
.rentals-body .r-price-pill::after { display: none; }
.rentals-body .r-price-pill:hover,
.rentals-body .r-price-pill.is-active {
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 6px 18px rgba(54, 163, 160, .36), 0 2px 6px rgba(15, 23, 42, .1);
}
.rentals-body .r-price-pill:hover .r-pp-type,
.rentals-body .r-price-pill.is-active .r-pp-type { opacity: .9; }

/* Purple count bubbles: softer, flatter, modern */
.rentals-body .marker-cluster > div {
  border: 0 !important;
  box-shadow: 0 4px 14px rgba(142, 121, 181, .45), 0 1px 2px rgba(15, 23, 42, .08) !important;
  font: 600 13px/36px 'Outfit', sans-serif !important;
  letter-spacing: -.2px;
}

/* Responsive tweaks — match the base .master_header mobile (72px) */
@media (max-width: 900px) {
  .rentals-body .rentals-map-pane { top: 72px; height: calc(100vh - 72px); }
  .rentals-body .rentals-sticky-top { top: 72px; }
}
@media (max-width: 720px) {
  .rentals-body .rentals-results-pane .rentals-title { font-size: 24px; }
  .rentals-body .rsb-row--actions { flex-direction: column; align-items: flex-start; }
  .rentals-body .rsb-price-unit { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   /rentals — STICKY FILTER BAR + MOBILE MAP HIDE
   Pins the searchbar + results-head group under the site header while the
   property list scrolls. A subtle shadow fades in once the group is pinned.
   On mobile (≤720px) the map is hidden entirely and the results pane takes
   the full viewport width.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sticky group that wraps .rentals-searchbar + .rentals-results-head */
.rentals-body .rentals-sticky-top {
  position: sticky;
  top: var(--header-h);              /* right under the site header */
  z-index: 40;                       /* above the map (10/leaflet=400-ish) but below modals */
  background: var(--paper);
  padding-top: 14px;
  margin: -14px -4px 0;              /* negative gutter so background covers full pane width */
  padding-left: 4px;
  padding-right: 4px;
  transition: box-shadow .18s ease, background .18s ease;
}
/* Visual cue once the group is pinned (added by JS scroll listener) */
.rentals-body .rentals-sticky-top.is-stuck {
  background: rgba(251, 247, 241, .96);
  backdrop-filter: saturate(1.15) blur(10px);
  -webkit-backdrop-filter: saturate(1.15) blur(10px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
}

/* Tighten the internal gap between searchbar and results-head */
.rentals-body .rentals-sticky-top .rentals-searchbar { margin-bottom: 0; }
.rentals-body .rentals-sticky-top .rentals-results-head { margin-bottom: 0; padding-top: 10px; padding-bottom: 10px; }

/* The calendar popover lives inside .rentals-searchbar — keep it on top of
   sibling stacking while the wrapper is sticky. */
.rentals-body .rentals-sticky-top .r-cal { z-index: 60; }

/* ── Mobile: hide the map pane entirely, let results take full width ── */
@media (max-width: 720px) {
  .rentals-body .rentals-map-pane { display: none; }
  .rentals-body .rentals-split { grid-template-columns: 1fr; }
  .rentals-body .rentals-results-pane { padding: 14px 14px 28px; }
  /* Mobile header collapses to 68px — pin the sticky group flush under it */
  .rentals-body .rentals-sticky-top { top: 68px; padding-top: 10px; }
  /* Allow the calendar popover to break out of the stacked sticky group */
  .rentals-body .rentals-sticky-top .r-cal { left: 0; right: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Auth modal + header user chip (shared between /index and /rentals)
   Injected by auth.js — keep styles here so both pages pick them up.
   ═══════════════════════════════════════════════════════════════════════════ */

.vms-auth-modal-bg {
  position: fixed; inset: 0; z-index: 100000;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.vms-auth-modal-bg.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
body.vms-auth-locked { overflow: hidden; }

.vms-auth-modal {
  position: relative;
  width: 100%; max-width: 440px; max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, .25), 0 2px 6px rgba(15, 23, 42, .08);
  padding: 28px 28px 20px;
  font-family: inherit;
  color: #0f172a;
  transform: translateY(10px) scale(.98);
  transition: transform .22s cubic-bezier(.2,.9,.3,1);
}
.vms-auth-modal-bg.is-open .vms-auth-modal { transform: translateY(0) scale(1); }

.vms-auth-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(15, 23, 42, .08);
  background: #fff; color: #334155;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.vms-auth-close:hover { background: #f1f5f9; color: #0f172a; }

.vms-auth-hero { text-align: center; padding: 4px 8px 18px; }
.vms-auth-logo {
  width: 56px; height: 56px; margin: 0 auto 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, #e8f6f5 0%, #d7eeed 100%);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(54, 163, 160, .2);
}
.vms-auth-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: #0f172a; }
.vms-auth-subtitle { margin-top: 6px; font-size: 13.5px; color: #64748b; line-height: 1.5; }

.vms-auth-tabs {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #f1f5f9;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 18px;
}
.vms-auth-tab {
  position: relative;
  z-index: 1;
  appearance: none; border: 0; background: transparent;
  padding: 9px 12px;
  font-size: 13.5px; font-weight: 600; color: #64748b;
  border-radius: 9px;
  cursor: pointer;
  transition: color .18s;
}
.vms-auth-tab.is-active { color: #0f172a; }
.vms-auth-tab-ind {
  position: absolute;
  top: 4px; left: 4px;
  width: calc(50% - 4px); height: calc(100% - 8px);
  background: #fff;
  border-radius: 9px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  transition: transform .22s cubic-bezier(.2,.9,.3,1);
}

.vms-auth-panel { display: flex; flex-direction: column; gap: 12px; }
.vms-auth-panel[hidden] { display: none !important; }
.vms-auth-field { display: flex; flex-direction: column; gap: 6px; }
.vms-auth-field > span {
  font-size: 12px; font-weight: 600; color: #334155; letter-spacing: .01em;
}
.vms-auth-field input[type="text"],
.vms-auth-field input[type="email"],
.vms-auth-field input[type="password"] {
  width: 100%;
  padding: 11px 14px;
  font: inherit; font-size: 14px;
  color: #0f172a;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.vms-auth-field input::placeholder { color: #94a3b8; }
.vms-auth-field input:hover { border-color: #cbd5e1; }
.vms-auth-field input:focus {
  outline: none;
  border-color: #36a3a0;
  box-shadow: 0 0 0 4px rgba(54, 163, 160, .12);
}
.vms-auth-field.has-error input,
.vms-auth-check.has-error input { border-color: #e11d48; box-shadow: 0 0 0 4px rgba(225, 29, 72, .1); }

.vms-auth-err { font-size: 12px; color: #be123c; margin-top: 2px; }

.vms-auth-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: -2px;
}
.vms-auth-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #475569; cursor: pointer; }
.vms-auth-check input { width: 16px; height: 16px; accent-color: #36a3a0; }
.vms-auth-tos { margin-top: 4px; line-height: 1.45; }
.vms-auth-link { color: #0f766e; font-weight: 500; text-decoration: none; font-size: 13px; }
.vms-auth-link:hover { text-decoration: underline; }

.vms-auth-roles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.vms-auth-role {
  display: flex; align-items: center; justify-content: center;
  padding: 9px 6px; text-align: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  font-size: 12px; font-weight: 600; color: #475569;
  cursor: pointer;
  transition: all .15s;
}
.vms-auth-role input { display: none; }
.vms-auth-role:hover { border-color: #cbd5e1; background: #f1f5f9; }
.vms-auth-role:has(input:checked) {
  background: #e6f5f4;
  border-color: #36a3a0;
  color: #0f5b58;
  box-shadow: inset 0 0 0 1px #36a3a0;
}

.vms-auth-submit {
  margin-top: 6px;
  width: 100%;
  padding: 12px 16px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: #fff;
  background: linear-gradient(180deg, #36a3a0 0%, #2c8885 100%);
  border: 0; border-radius: 11px;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(44, 136, 133, .28), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .06s ease, box-shadow .15s ease, filter .15s;
}
.vms-auth-submit:hover { filter: brightness(1.04); box-shadow: 0 8px 18px rgba(44, 136, 133, .35); }
.vms-auth-submit:active { transform: translateY(1px); }

.vms-auth-hint {
  margin-top: 6px;
  font-size: 12px; color: #64748b;
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 9px;
  padding: 8px 10px;
  text-align: center;
}
.vms-auth-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  background: #fff; padding: 1px 6px; border-radius: 5px;
  border: 1px solid #e2e8f0;
  color: #0f172a;
}
.vms-auth-hint--demo {
  cursor: pointer;
  user-select: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.vms-auth-hint--demo:hover,
.vms-auth-hint--demo:focus-visible {
  background: #eef6f6;
  border-color: #36a3a0;
  box-shadow: 0 0 0 2px rgba(54, 163, 160, .2);
  outline: none;
}
.vms-auth-hint__lead {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #2c8885;
  margin-bottom: 6px;
}

.vms-auth-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
  text-align: center;
  font-size: 11.5px; color: #94a3b8;
}

/* ── Header user chip (logged-in state) ────────────────────────────── */
#user_menu_u .vms-user-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 10px 4px 4px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-lg);
  font: inherit; color: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .05s;
}
#user_menu_u .vms-user-chip:hover { background: rgba(255, 255, 255, .16); }
#user_menu_u .vms-user-chip:active { transform: translateY(1px); }
.vms-user-avatar {
  width: 28px; height: 28px; border-radius: var(--r-lg);
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #36a3a0 0%, #2c8885 100%);
  color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
}
.vms-user-avatar.lg { width: 40px; height: 40px; font-size: 14px; }
.vms-user-names {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  line-height: 1.1;
}
.vms-user-name { font-size: 13px; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vms-user-role { font-size: 10.5px; opacity: .72; font-weight: 500; }
.vms-user-caret { opacity: .7; }

/* On light backgrounds (admin portal, scrolled rentals header) use neutral chip */
.master_header:not(.master_header--overlay) #user_menu_u .vms-user-chip,
.master_header--overlay.is-scrolled #user_menu_u .vms-user-chip {
  background: #f1f5f9; border-color: #e2e8f0; color: #0f172a;
}
.master_header:not(.master_header--overlay) #user_menu_u .vms-user-chip:hover,
.master_header--overlay.is-scrolled #user_menu_u .vms-user-chip:hover {
  background: #e2e8f0;
}
.rentals-body #user_menu_u .vms-user-chip {
  background: #fff; border-color: var(--r-border, #e7e1d5); color: #0f172a;
}
.rentals-body #user_menu_u .vms-user-chip:hover { background: #f8f5ef; }

/* Dropdown pop */
#user_menu_u { position: relative; }
.vms-user-pop {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .18), 0 2px 4px rgba(15, 23, 42, .06);
  padding: 8px;
  color: #0f172a;
  z-index: 10000;
  animation: vmsAuthPop .14s ease-out both;
}
@keyframes vmsAuthPop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.vms-user-pop-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 6px;
}
.vms-user-pop-name  { font-size: 13.5px; font-weight: 600; }
.vms-user-pop-email { font-size: 12px; color: #64748b; margin-top: 2px; }
.vms-user-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 10px;
  font: inherit; font-size: 13.5px; color: #334155;
  background: transparent; border: 0; border-radius: 8px;
  text-decoration: none; text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.vms-user-item:hover { background: #f1f5f9; color: #0f172a; }
.vms-user-item svg { flex: 0 0 auto; opacity: .7; }

/* Mobile polish */
@media (max-width: 520px) {
  .vms-auth-modal { padding: 22px 20px 16px; border-radius: 18px; }
  .vms-auth-roles { grid-template-columns: 1fr; }
  .vms-user-names { display: none; }
  #user_menu_u .vms-user-chip { padding: 3px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   /rentals — Results pagination
   Compact page-number control that appears below the grid when results
   exceed one page (20 per page). Matches the pastel / minimal aesthetic
   used elsewhere on the rentals page.
   ═══════════════════════════════════════════════════════════════════════════ */
.vms-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 18px;
  margin: 28px 4px 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--r-border, #e7e1d5);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}
.vms-pager-info {
  font-size: 13px;
  color: #475569;
  letter-spacing: .005em;
}
.vms-pager-info strong { color: #0f172a; font-weight: 600; }
.vms-pager-ctrls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.vms-pg-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: #334155;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, color .12s, border-color .12s, transform .06s;
}
.vms-pg-btn:hover:not(:disabled):not(.is-active) {
  background: #f1f5f9;
  color: #0f172a;
}
.vms-pg-btn:active:not(:disabled) { transform: translateY(1px); }
.vms-pg-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.vms-pg-btn.is-active {
  background: linear-gradient(180deg, #36a3a0 0%, #2c8885 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(44, 136, 133, .28);
  cursor: default;
}
.vms-pg-gap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 34px;
  color: #94a3b8;
  user-select: none;
}

@media (max-width: 640px) {
  .vms-pager { flex-direction: column; align-items: stretch; }
  .vms-pager-info { text-align: center; }
  .vms-pager-ctrls { justify-content: center; }
  .vms-pg-btn { min-width: 32px; height: 32px; padding: 0 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Language switcher — custom pill + dropdown (lang-switcher.js).
   Google Translate is still loaded and driven under the hood via the
   `googtrans` cookie; its rendered widget (.goog-te-gadget) is hidden so
   our custom UI is the only visible chrome.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Kill Google's page-shifting banner + all of its rendered chrome. */
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget-icon,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-te-spinner-pos,
#google_translate_element,
.goog-te-gadget,
.goog-te-gadget-simple,
.goog-logo-link { display: none !important; }
body { top: 0 !important; position: static !important; }
.skiptranslate iframe { display: none !important; visibility: hidden !important; }
/* Google often wraps translated text spans — neutralize their background. */
font.goog-text-highlight { background: none !important; box-shadow: none !important; }

/* ── Custom pill shell ───────────────────────────────────────── */
.rentals-body .vms-lang,
.master_header .vms-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 34px;
  margin-right: 10px;
  line-height: 1;
}

/* Trigger button: globe + 2-letter code + caret. Compact but readable. */
.vms-lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px 0 11px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .74));
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .7) inset,
    0 1px 2px rgba(15, 23, 42, .04);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  color: #27213d;
  font: 600 13px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .12em;
  cursor: pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}
.vms-lang__btn:hover {
  background: linear-gradient(180deg, #ffffff, rgba(238, 250, 249, .94));
  border-color: rgba(54, 163, 160, .35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 4px 12px -4px rgba(54, 163, 160, .25),
    0 2px 4px rgba(15, 23, 42, .05);
  transform: translateY(-1px);
}
.vms-lang__btn:focus-visible {
  outline: none;
  border-color: rgba(54, 163, 160, .5);
  box-shadow:
    0 0 0 3px rgba(54, 163, 160, .15),
    0 1px 0 rgba(255, 255, 255, .9) inset;
}
.vms-lang__btn:active { transform: translateY(0); }

.vms-lang__ico {
  color: #36a3a0;
  flex-shrink: 0;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1), color .18s ease;
}
.vms-lang__btn:hover .vms-lang__ico { color: #2a8582; transform: rotate(18deg); }

.vms-lang__code {
  font-weight: 700;
  letter-spacing: .14em;
  font-size: 12.5px;
}
.vms-lang__caret {
  color: #7a8595;
  transition: transform .2s ease, color .18s ease;
  flex-shrink: 0;
  margin-left: -2px;
}
.vms-lang.is-open .vms-lang__caret { transform: rotate(180deg); color: #36a3a0; }

/* ── Dropdown menu ───────────────────────────────────────── */
.vms-lang__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 208px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, .05),
    0 18px 40px -18px rgba(15, 23, 42, .28),
    0 6px 16px -10px rgba(15, 23, 42, .12);
  z-index: 10050;
  animation: vmsLangFade .16s cubic-bezier(.22,.61,.36,1);
}
.vms-lang__menu[hidden] { display: none; }
.vms-lang__menu::before {
  /* tiny arrow anchor under the trigger */
  content: "";
  position: absolute;
  top: -6px;
  right: 18px;
  width: 10px; height: 10px;
  background: #ffffff;
  border-left: 1px solid rgba(15, 23, 42, .08);
  border-top: 1px solid rgba(15, 23, 42, .08);
  transform: rotate(45deg);
  border-top-left-radius: 2px;
}
@keyframes vmsLangFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.vms-lang__opt {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  column-gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #27213d;
  font: 500 14px/1.2 'Outfit', system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  outline: none;
  transition: background .14s ease, color .14s ease;
}
.vms-lang__opt:hover,
.vms-lang__opt:focus {
  background: rgba(54, 163, 160, .08);
  color: #1e2a2a;
}
.vms-lang__opt.is-active {
  background: rgba(54, 163, 160, .12);
  color: #1e2a2a;
  font-weight: 600;
}
.vms-lang__flag {
  font-size: 17px;
  line-height: 1;
  transform: translateY(-1px);
}
.vms-lang__label { letter-spacing: .1px; }
.vms-lang__short {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #7a8595;
  justify-self: end;
}
.vms-lang__opt.is-active .vms-lang__short {
  /* Replace the short code with a teal checkmark on the active row. */
  font-size: 0;
  color: transparent;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2336a3a0' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 14px 14px no-repeat;
}

@media (max-width: 900px) {
  .rentals-body .vms-lang, .master_header .vms-lang { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Google Maps — sticky /rentals map, price-pill overlays & cluster pills
   Replaces the previous Leaflet styling. Plus a polished "Configure API key"
   placeholder rendered when no key is present.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The AdvancedMarkerElement's `content` is our .r-price-pin div — it's
   positioned by Google so we just remove any residual transform drift. */
.rentals-body .r-price-pin { will-change: transform; }

/* Neutralise any prior Leaflet-specific overrides (kept for safety). */
.rentals-body .leaflet-container,
.rentals-body .leaflet-control-attribution { background: transparent !important; }

/* Cluster pill (custom renderer — emerald/ink gradient matching brand). */
.rentals-body .r-cluster-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 10px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #36a3a0, #2a7e82);
  color: #fff;
  font: 600 13.5px/1 'Outfit', sans-serif;
  letter-spacing: -.2px;
  box-shadow: 0 4px 14px rgba(54, 163, 160, .38), 0 1px 2px rgba(15, 23, 42, .08);
  border: 2px solid rgba(255, 255, 255, .9);
  transform: translateY(0);
  transition: transform .15s ease, box-shadow .15s ease;
}
.rentals-body .r-cluster-pill:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 8px 22px rgba(54, 163, 160, .48), 0 2px 6px rgba(15, 23, 42, .12);
}

/* Google's own zoom/fullscreen controls — soften their shadow. */
.rentals-body .gm-control-active,
.rentals-body .gm-fullscreen-control,
.rentals-body button[title="Zoom in"],
.rentals-body button[title="Zoom out"] {
  box-shadow: 0 2px 10px rgba(15, 23, 42, .12) !important;
  border-radius: 10px !important;
}

/* ── Configure-key placeholder ─────────────────────────────────────────── */
.r-gmaps-keybox {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(54, 163, 160, .08), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(196, 152, 112, .08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f2f0ec 100%);
}
.r-gmaps-keybox-card {
  max-width: 420px; width: 100%;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 18px;
  padding: 28px 26px 22px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .1), 0 2px 6px rgba(15, 23, 42, .05);
  text-align: center;
}
.r-gmaps-keybox.is-error .r-gmaps-keybox-card {
  border-color: rgba(220, 75, 75, .25);
  box-shadow: 0 18px 48px rgba(220, 75, 75, .12), 0 2px 6px rgba(15, 23, 42, .05);
}
.r-gmaps-keybox.is-error .r-gmaps-ico {
  background: linear-gradient(135deg, #fde8e8, #fdf3ea);
  color: #d94a4a;
}
.r-gmaps-ico {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e9f6f5, #fdf3ea);
  color: #36a3a0;
  border-radius: 16px;
}
.r-gmaps-title {
  font: 600 18px/1.25 'Playfair Display', serif;
  color: #1e2a2a;
  margin-bottom: 6px;
}
.r-gmaps-sub {
  font: 400 13.5px/1.5 'Outfit', sans-serif;
  color: #5e6b6b;
  margin-bottom: 16px;
}
.r-gmaps-form {
  display: flex; gap: 8px;
  margin-bottom: 12px;
}
.r-gmaps-form input {
  flex: 1;
  padding: 11px 14px;
  font: 500 13px/1 'JetBrains Mono', 'SF Mono', monospace;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 10px;
  outline: none;
  background: #fafafa;
  color: #1e2a2a;
  transition: border-color .15s ease, background .15s ease;
}
.r-gmaps-form input:focus {
  border-color: rgba(54, 163, 160, .6);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(54, 163, 160, .12);
}
.r-gmaps-form button {
  padding: 11px 16px;
  font: 600 12.5px/1 'Outfit', sans-serif;
  letter-spacing: .2px;
  color: #fff;
  background: linear-gradient(135deg, #36a3a0, #2a7e82);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .1s ease, box-shadow .15s ease;
  box-shadow: 0 4px 14px rgba(54, 163, 160, .3);
}
.r-gmaps-form button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(54, 163, 160, .42); }
.r-gmaps-hint {
  font: 400 11.5px/1.5 'Outfit', sans-serif;
  color: #6b7b7b;
}
.r-gmaps-hint a { color: #36a3a0; text-decoration: none; border-bottom: 1px dotted rgba(54, 163, 160, .5); }
.r-gmaps-hint a:hover { color: #2a7e82; border-bottom-color: #2a7e82; }
.r-gmaps-hint code {
  font: 500 11px/1 'JetBrains Mono', monospace;
  padding: 2px 5px;
  background: #f1efe9;
  border-radius: 4px;
  color: #36a3a0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROPERTY DETAIL MODAL — refined: white frosted backdrop, wider canvas,
   modern close button, inline Availability calendar, mini Google Map.
   All rules scoped to #propDetailModal so other modals keep their original
   dark overlay + narrower card.
   ═══════════════════════════════════════════════════════════════════════════ */

/* White, frosted backdrop (replaces the dark overlay). Subtle cool tint so
   the card still reads as a surface floating above the page. */
#propDetailModal.modal-bg {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: saturate(1.25) blur(18px);
  -webkit-backdrop-filter: saturate(1.25) blur(18px);
  padding: 24px;
}

/* Wider, softer, more modern card — with a premium elevation. */
#propDetailModal .vpd-modal {
  width: min(1360px, 96vw);
  max-height: calc(100vh - 48px);
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, .06);
  box-shadow:
    0 32px 80px -12px rgba(15, 23, 42, .22),
    0 14px 28px -10px rgba(15, 23, 42, .14),
    0 0 0 1px rgba(255, 255, 255, .6) inset;
  overflow: hidden;
  background: #fff;
}

/* Modal header — taller, refined typography, cleaner divider. */
#propDetailModal .vpd-modal .modal-hd {
  padding: 22px 28px 20px 32px;
  border-bottom: 1px solid rgba(15, 23, 42, .06);
  background: rgba(255, 255, 255, .98);
  backdrop-filter: saturate(1.15) blur(8px);
}
#propDetailModal .vpd-modal .modal-hd-title {
  font: 600 22px/1.25 'Playfair Display', serif;
  color: #1e2a2a;
  letter-spacing: -.2px;
}

/* Modern rounded close button — icon-only, soft hover. */
#propDetailModal .vpd-modal .modal-close {
  width: 40px; height: 40px;
  border-radius: 14px;
  background: rgba(15, 23, 42, .04);
  color: #5e6b6b;
  border: 1px solid rgba(15, 23, 42, .06);
  font-size: 20px; font-weight: 300;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, transform .1s ease;
  line-height: 1;
}
#propDetailModal .vpd-modal .modal-close:hover {
  background: rgba(54, 163, 160, .1);
  color: #36a3a0;
  transform: rotate(90deg);
}

/* Section nav — slightly more padding; brand-accent active state. */
#propDetailModal .vpd-nav { padding: 0 32px; }
#propDetailModal .vpd-nav button { padding: 18px 18px; font-size: 13.5px; letter-spacing: .1px; }
#propDetailModal .vpd-nav button.active {
  color: #36a3a0;
  border-bottom-color: #36a3a0;
}
#propDetailModal .vpd-nav button:hover { color: #1e2a2a; }

/* Main area — wider max, more breathing room. */
#propDetailModal .vpd-main {
  max-width: 1360px;
  padding: 32px 32px 56px;
  gap: 40px;
  grid-template-columns: minmax(0, 1fr) 380px;
}
@media (max-width: 1100px) {
  #propDetailModal .vpd-main { grid-template-columns: 1fr; gap: 28px; }
}

/* Section headings — use the rental teal accent for a consistent brand voice. */
#propDetailModal .vpd-section h2 {
  font-size: 22px;
  color: #1e2a2a;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  padding-bottom: 12px;
}

/* Booking sidebar — more modern card, rounded date buttons, teal CTA. */
#propDetailModal .vpd-book {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 18px;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, .12), 0 2px 6px rgba(15, 23, 42, .04);
  padding: 22px;
}
#propDetailModal .vpd-book .price { color: #36a3a0; font-size: 28px; }
#propDetailModal .vpd-book label {
  font-size: 11px; font-weight: 600; letter-spacing: .6px;
  color: #8a9696; text-transform: uppercase;
}
#propDetailModal .vpd-book .form-input {
  border-radius: 10px; padding: 11px 12px; font-size: 13.5px;
  border: 1px solid rgba(15, 23, 42, .1); background: #fafafa;
  transition: border-color .15s ease, background .15s ease;
}
#propDetailModal .vpd-book .form-input:focus {
  border-color: rgba(54, 163, 160, .6); background: #fff;
  box-shadow: 0 0 0 3px rgba(54, 163, 160, .12);
}
#propDetailModal .vpd-book .total {
  border-top: 1px dashed rgba(15, 23, 42, .08);
  padding-top: 16px; margin-top: 16px;
}
#propDetailModal .vpd-book .total .tot { color: #36a3a0; }
#propDetailModal .vpd-book .btn.btn-primary {
  background: linear-gradient(135deg, #36a3a0, #2a7e82);
  border: 0;
  box-shadow: 0 6px 18px rgba(54, 163, 160, .28);
  font-weight: 600; letter-spacing: .2px;
}
#propDetailModal .vpd-book .btn.btn-primary:hover {
  box-shadow: 0 10px 24px rgba(54, 163, 160, .42);
  transform: translateY(-1px);
}

/* ───── Availability calendar ─────────────────────────────────────────────
   Two-month grid matching VMS-Florida's screenshot: pale-mint future cells
   with 14-night icon + nightly price, dark "today" cell, diagonal-stripe
   "past" cells (legend-faded), solid teal "booked" cells. Range-selection
   highlights a connected band between check-in and check-out. */

.vpd-avail {
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  padding: 20px 20px 16px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .04);
}

.vpd-avail-hd {
  display: grid;
  grid-template-columns: 28px 1fr 1fr 28px;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.vpd-avail-nav {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #5e6b6b;
  font-size: 18px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.vpd-avail-nav:hover:not(:disabled) { background: rgba(54, 163, 160, .1); color: #36a3a0; }
.vpd-avail-nav:disabled { opacity: .3; cursor: not-allowed; }
.vpd-avail-title {
  text-align: center;
  font: 500 16px/1 'Outfit', sans-serif;
  color: #1e2a2a;
  letter-spacing: .1px;
}

.vpd-avail-grids {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 760px) { .vpd-avail-grids { grid-template-columns: 1fr; } }

.vpd-avail-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font: 500 12px/1 'Outfit', sans-serif;
  color: #8a9696;
  text-align: center;
  margin-bottom: 6px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(15, 23, 42, .04);
}
.vpd-avail-dow span { letter-spacing: .3px; text-transform: uppercase; font-weight: 600; }

.vpd-avail-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding-top: 8px;
}

/* Individual day cell — minimum ~56px tall, fits "14⊖" tag + date + price */
.vpd-avail-cell {
  min-height: 60px;
  border-radius: 6px;
  padding: 6px 6px 5px;
  position: relative;
  font: 500 13px/1 'Outfit', sans-serif;
  color: #1e2a2a;
  background: #eff6f5;                 /* default future: pale mint */
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .12s ease, box-shadow .12s ease, border-color .12s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  text-align: left;
}
.vpd-avail-cell .d {
  font-weight: 600;
  font-size: 13.5px;
  color: #1e2a2a;
  line-height: 1;
}
.vpd-avail-cell .p {
  font: 500 9.5px/1.1 'JetBrains Mono', monospace;
  color: #5e6b6b;
  letter-spacing: .2px;
  text-transform: uppercase;
}
.vpd-avail-cell .min {
  position: absolute;
  top: 5px; right: 6px;
  font: 500 9px/1 'Outfit', sans-serif;
  color: #8a9696;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  letter-spacing: .2px;
}
.vpd-avail-cell .min svg { width: 9px; height: 9px; }

/* Empty leading cells (pre-1st-of-month) */
.vpd-avail-cell.empty {
  background: transparent;
  pointer-events: none;
  box-shadow: none;
  border: 0;
}

/* Hover on a selectable future cell */
.vpd-avail-cell:not(.past):not(.booked):not(.empty):hover {
  background: #dcede9;
  border-color: rgba(54, 163, 160, .3);
}

/* Past — pale mint with light diagonal stripes, faded text */
.vpd-avail-cell.past {
  cursor: not-allowed;
  background:
    repeating-linear-gradient(45deg,
      rgba(54, 163, 160, .04) 0,
      rgba(54, 163, 160, .04) 4px,
      transparent 4px,
      transparent 8px),
    #f3f7f6;
  color: #b6c0bf;
}
.vpd-avail-cell.past .d { color: #b6c0bf; }
.vpd-avail-cell.past .p,
.vpd-avail-cell.past .min { display: none; }

/* Today — dark ink fill, white number + price */
.vpd-avail-cell.today {
  background: #1e2a2a;
  color: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .22);
}
.vpd-avail-cell.today .d { color: #fff; font-size: 15px; }
.vpd-avail-cell.today .p { color: rgba(255, 255, 255, .75); }
.vpd-avail-cell.today .min { color: rgba(255, 255, 255, .6); }

/* Booked — solid teal */
.vpd-avail-cell.booked {
  background: #36a3a0;
  color: #fff;
  cursor: not-allowed;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
}
.vpd-avail-cell.booked .d { color: #fff; }
.vpd-avail-cell.booked .p { color: rgba(255, 255, 255, .78); }
.vpd-avail-cell.booked .min { color: rgba(255, 255, 255, .6); }

/* Selected range */
.vpd-avail-cell.selected {
  background: #c2e3df;
  color: #1e4d4b;
  border-color: rgba(54, 163, 160, .5);
}
.vpd-avail-cell.selected .d { color: #1e4d4b; }
.vpd-avail-cell.selected.range-start,
.vpd-avail-cell.selected.range-end {
  background: #36a3a0;
  color: #fff;
  box-shadow: 0 4px 14px rgba(54, 163, 160, .35);
}
.vpd-avail-cell.selected.range-start .d,
.vpd-avail-cell.selected.range-end .d { color: #fff; }
.vpd-avail-cell.selected.range-start .p,
.vpd-avail-cell.selected.range-end .p { color: rgba(255, 255, 255, .82); }

/* Legend row — pale chips with colour swatches */
.vpd-avail-legend {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 23, 42, .04);
  font: 500 12px/1 'Outfit', sans-serif;
  color: #5e6b6b;
  flex-wrap: wrap;
}
.vpd-avail-legend span { display: inline-flex; align-items: center; gap: 8px; }
.vpd-avail-legend i {
  width: 16px; height: 16px; border-radius: 4px;
  display: inline-block;
}
.vpd-avail-legend i.past {
  background:
    repeating-linear-gradient(45deg,
      rgba(54, 163, 160, .12) 0,
      rgba(54, 163, 160, .12) 2px,
      transparent 2px, transparent 4px),
    #f3f7f6;
  border: 1px solid rgba(15, 23, 42, .06);
}
.vpd-avail-legend i.today { background: #1e2a2a; }
.vpd-avail-legend i.booked { background: #36a3a0; }

/* ───── Inline mini Google Map (Address section) ─────────────────────── */
.vpd-mapbox {
  margin-top: 18px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: 0 6px 18px -6px rgba(15, 23, 42, .12);
  position: relative;
  background: #eff6f5;
  min-height: 260px;
}
.vpd-mapbox iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}
.vpd-mapbox .vpd-mapbox-footer {
  position: absolute;
  left: 14px; bottom: 12px;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
  padding: 7px 13px;
  font: 500 12px/1 'Outfit', sans-serif;
  color: #1e2a2a;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.vpd-mapbox .vpd-mapbox-footer svg { color: #36a3a0; }
.vpd-mapbox .vpd-mapbox-footer a {
  color: #36a3a0;
  text-decoration: none;
  font-weight: 600;
}
.vpd-mapbox .vpd-mapbox-footer a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════════════════
   /rentals — MOBILE-FIRST RESPONSIVE (≤ 720px)
   Goal: user sees property cards within the first viewport. On phones we:
   • collapse the site header to 56px
   • hide the map by default; surface it behind a FAB (industry pattern
     used by Airbnb, Booking, Vrbo — list-first, map-on-demand)
   • collapse the filter bar to a single-row "Search + Filters" pill
   • tighten padding, typography, and ensure 44px minimum tap targets
   ═══════════════════════════════════════════════════════════════════════════ */

/* Desktop defaults — elements introduced in the mobile redesign stay hidden. */
.rsb-mobile-bar,
.r-mapfab { display: none; }

/* ─────────────── Tablets (≤ 900px): denser padding, smaller typography ─── */
@media (max-width: 900px) {
  .rentals-body .master_header { box-shadow: 0 1px 4px rgba(15, 23, 42, .08); }
  .rentals-body .master_header .mobile_header { height: 64px; padding: 0 14px; }
  .rentals-body .master_header .mobile-logo img { max-height: 44px; }
  .rentals-body .master_header #access { top: 64px; }

  /* Nest sticky map/results right under the shrunken header. */
  .rentals-map-pane { top: 64px !important; height: calc(100vh - 64px) !important; }
}

/* ─────────────── Phones (≤ 720px): list-first, map-on-demand ─────────── */
@media (max-width: 720px) {
  /* Hard-stop horizontal overflow. Anything wider than the viewport on mobile
     creates a miserable side-scroll experience. Everything from here down
     assumes a strict 100vw content box. */
  html, body.rentals-body { overflow-x: hidden; }
  .rentals-body * { max-width: 100%; }
  .rentals-body .rentals-split { max-width: 100vw; }
  .rentals-body .rentals-results-pane { min-width: 0; max-width: 100vw; }
  .rentals-body .rentals-sticky-top { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

  /* ── Site header: ultra-compact at 56px ── */
  .rentals-body .master_header .mobile_header { height: 56px; padding: 0 12px; }
  .rentals-body .master_header .mobile-logo img { max-height: 36px; }
  .rentals-body .master_header .mobile-trigger,
  .rentals-body .master_header .mobile-trigger-user { padding: 6px; }
  .rentals-body .master_header #access { top: 56px; }
  .rentals-body .master_header #access .menu > li { height: 48px; line-height: 48px; }

  /* ── Hide the map pane by default; show it only when body.r-map-active.
        Pins below the header and above the floating FAB for full-bleed map. */
  .rentals-body .rentals-map-pane { display: none; }
  .rentals-body.r-map-active .rentals-map-pane {
    display: block;
    position: fixed;
    top: 56px; left: 0; right: 0;
    bottom: 0;
    height: auto;
    min-height: 0;
    border: 0;
    z-index: 35;
  }
  .rentals-body.r-map-active .rentals-results-pane { display: none; }
  .rentals-body.r-map-active .rentals-sticky-top { display: none; }

  /* Collapse the split to a single column; kill desktop map height rules. */
  .rentals-split { grid-template-columns: 1fr; }

  /* ── Tighter results pane ── */
  .rentals-results-pane {
    padding: 10px 12px 96px;   /* extra bottom-pad so FAB doesn't cover cards */
  }
  .rentals-results-pane .rentals-title {
    font-size: 18px;
    margin: 6px 2px 10px;
  }

  /* Sticky header offset — searchbar pins beneath the 56px site header. */
  .rentals-sticky-top { top: 56px !important; }

  /* ── Mobile search + Filters pill bar (replaces the bulky 3-row form) ── */
  .rsb-mobile-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 2px 10px;
    background: var(--paper);
  }
  .rsb-mobile-search {
    flex: 1 1 auto;
    display: flex; align-items: center; gap: 8px;
    height: 44px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 2px 6px rgba(15, 23, 42, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .rsb-mobile-search:focus-within {
    border-color: #36a3a0;
    box-shadow: 0 0 0 3px rgba(54, 163, 160, .14);
  }
  .rsb-mobile-search svg { color: #6b6478; flex-shrink: 0; }
  .rsb-mobile-search input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    font: 500 14px 'Outfit', system-ui, sans-serif;
    color: #27213d;
    min-width: 0;
    height: 100%;
  }
  .rsb-mobile-search input::placeholder { color: #9a94a6; font-weight: 400; }

  .rsb-mobile-filters {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;                /* icon-only on phones — keeps the pill short */
    height: 44px;
    padding: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    color: #27213d;
    font: 600 13px 'Outfit', system-ui, sans-serif;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .04);
  }
  .rsb-mobile-filters span:not(.rsb-mobile-badge) { display: none; }
  .rsb-mobile-filters:hover,
  .rsb-mobile-filters[aria-expanded="true"] {
    background: #f0faf9;
    border-color: #36a3a0;
    color: #2a8582;
  }
  .rsb-mobile-filters:active { transform: scale(.97); }
  .rsb-mobile-filters svg { color: currentColor; }
  .rsb-mobile-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: #c85a2d;
    color: #fff;
    border-radius: var(--r-lg);
    font: 700 11px/18px 'Outfit', sans-serif;
    text-align: center;
    border: 2px solid var(--paper);
  }

  /* ── Full searchbar collapses by default; expands when user taps Filters. */
  .rentals-searchbar {
    padding: 10px;
    border-radius: 12px;
    gap: 8px;
    margin-bottom: 10px;
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    opacity: 0;
    margin-top: 0;
    transition:
      max-height .28s cubic-bezier(.4, 0, .2, 1),
      opacity .2s ease,
      padding .2s ease,
      margin .2s ease;
  }
  .rentals-searchbar.rsb-expanded {
    max-height: 620px;            /* generous — fits all 3 rows + cal */
    opacity: 1;
    padding: 12px;
    margin-top: 2px;
    margin-bottom: 12px;
    border-width: 1px;
  }
  .rentals-searchbar .rsb-row { grid-template-columns: 1fr; gap: 8px; }
  .rentals-searchbar .rsb-field { padding: 11px 12px; }
  .rentals-searchbar .rsb-field input,
  .rentals-searchbar .rsb-field select { font-size: 14px; }
  .rentals-searchbar .rsb-row--actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .rentals-searchbar .rsb-chips { justify-content: flex-start; }
  .rentals-searchbar .rsb-reset {
    align-self: flex-end;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: #fff;
    text-decoration: none;
    min-height: 40px;
  }

  /* ── Tighter results head + bigger tap targets.
        On phones the grid is single-column, so the Grid/List toggle is
        redundant — hide it to free horizontal space for the sort control. */
  .rentals-results-head {
    gap: 6px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    flex-wrap: nowrap;
  }
  .rentals-results-head .rrh-count {
    font-size: 13px;
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rentals-results-head .rrh-right { gap: 6px; flex-shrink: 0; }
  .rentals-results-head .vms-view-toggle { display: none; }   /* redundant on mobile */
  .rentals-results-head .rrh-sort { min-height: 40px; }
  .rentals-results-head .rrh-sort .vms-sort-select { font-size: 12.5px; }

  /* ── Single-column cards, generous tap targets ── */
  .rentals-results-pane .vms-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .vms-card .vms-card-actions .btn,
  .rentals-results-pane .btn { min-height: 44px; }

  /* ── Mobile FAB: swap between list & map ── */
  .r-mapfab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 60;
    height: 46px;
    padding: 0 20px;
    background: #27213d;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--r-lg);
    font: 600 14px 'Outfit', system-ui, sans-serif;
    letter-spacing: .2px;
    box-shadow:
      0 12px 28px -6px rgba(15, 23, 42, .45),
      0 4px 10px rgba(15, 23, 42, .18);
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
  }
  .r-mapfab:active { transform: translateX(-50%) scale(.96); }
  .r-mapfab:hover { background: #36a3a0; }
  .r-mapfab .r-mapfab-ico {
    display: inline-flex; align-items: center; justify-content: center;
    color: #ffffff;
  }
  .rentals-body.r-map-active .r-mapfab .r-mapfab-label::before {
    content: 'List';
  }
  .rentals-body.r-map-active .r-mapfab .r-mapfab-label { font-size: 0; }
  .rentals-body.r-map-active .r-mapfab .r-mapfab-label::before { font-size: 14px; }
  .rentals-body.r-map-active .r-mapfab .r-mapfab-ico svg { display: none; }
  .rentals-body.r-map-active .r-mapfab .r-mapfab-ico::before {
    content: '';
    width: 16px; height: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><line x1='8' y1='6' x2='21' y2='6'/><line x1='8' y1='12' x2='21' y2='12'/><line x1='8' y1='18' x2='21' y2='18'/><circle cx='4' cy='6' r='1.2'/><circle cx='4' cy='12' r='1.2'/><circle cx='4' cy='18' r='1.2'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
  }

  /* Language pill has plenty of room in the mobile menu — but the desktop
     CSS hides it on ≤ 900px already (see goog-te block). Keep that. */

  /* Property detail modal: full-viewport bottom-sheet feel. */
  #propDetailModal.modal-bg { padding: 0; }
  #propDetailModal .vpd-modal {
    width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 16px 16px 0 0;
  }
  #propDetailModal .modal-hd { padding: 14px 16px; }
  #propDetailModal .modal-hd .modal-hd-title { font-size: 15px; }
  #propDetailModal .modal-close { width: 36px; height: 36px; }

  /* Pagination: spread pill buttons across the row for thumb access. */
  .rentals-results-pane nav[aria-label="Results pages"] {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 20px;
  }
}

/* ─────────────── Very small phones (≤ 380px): extra trim ─────────────── */
@media (max-width: 380px) {
  .rentals-results-pane { padding: 8px 10px 96px; }
  .rsb-mobile-filters span:not(.rsb-mobile-badge) { display: none; }
  .rsb-mobile-filters { padding: 0 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOOK-NOW DATE-PILL PICKER — Property Detail sidebar
   Clones the pill + popover calendar style used at
     https://vms-florida.com/properties/lakeview-house-near-park-shore-3-bed-3bath-900/
   Two pastel-teal pills sit where the native <input type="date"> used to,
   and open a 650px floating 2-month calendar with:
     · past dates: teal #36a3a0 with strikethrough
     · today: teal-filled circle
     · booked: yellow #fff43a + hovered "USD …" price tag tooltip
     · selected range: teal ends + pale-teal middle band
   ═══════════════════════════════════════════════════════════════════════════ */
.vpd-datepicker {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.vpd-date-pill {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  background: rgba(54, 163, 160, .09);
  border: 1px solid transparent;
  border-radius: 12px;
  color: #5e6b6b;
  font: 500 13px/1.1 'Outfit', system-ui, sans-serif;
  cursor: pointer;
  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    color .15s ease;
  text-align: left;
  min-height: 44px;
}
.vpd-date-pill:hover {
  background: rgba(54, 163, 160, .14);
  border-color: rgba(54, 163, 160, .22);
}
.vpd-date-pill:focus-visible {
  outline: none;
  border-color: #36a3a0;
  box-shadow: 0 0 0 3px rgba(54, 163, 160, .18);
}
.vpd-date-pill.is-open {
  background: #fff;
  border-color: #36a3a0;
  box-shadow: 0 0 0 3px rgba(54, 163, 160, .14);
  color: #1e2a2a;
}
.vpd-date-pill .dp-ico {
  color: #36a3a0;
  flex: 0 0 16px;
}
.vpd-date-pill .dp-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.vpd-date-pill .dp-label {
  color: inherit;
  font-weight: 500;
  letter-spacing: .1px;
}
.vpd-date-pill .dp-val {
  color: #1e2a2a;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* When a value exists, promote the value, demote the label into a caption. */
.vpd-date-pill.has-value .dp-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #8a9696;
  order: 1;
}
.vpd-date-pill.has-value .dp-val { order: 2; }
.vpd-date-pill:not(.has-value) .dp-val { display: none; }

/* ── Popover ──────────────────────────────────────────────────────────
   Positioned with `position: fixed` + JS-computed top/left so it can
   escape the modal body's `overflow: auto` clip and always stays
   on-screen relative to the anchor pill. */
.vpd-date-pop {
  position: fixed;
  width: min(640px, 92vw);
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 16px;
  box-shadow:
    0 24px 48px -14px rgba(15, 23, 42, .22),
    0 8px 16px -6px rgba(15, 23, 42, .08),
    0 0 0 1px rgba(255, 255, 255, .5) inset;
  padding: 20px 22px 18px;
  z-index: 1200;
  animation: vpdDatePopIn .16s cubic-bezier(.22,.61,.36,1);
}
.vpd-date-pop[hidden] { display: none; }
@keyframes vpdDatePopIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header row: prev-nav · left-title · right-title · next-nav */
.vdp-hd {
  display: grid;
  grid-template-columns: 32px 1fr 1fr 32px;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.vdp-nav {
  width: 32px; height: 32px;
  border: 0;
  background: transparent;
  color: #1e2a2a;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.vdp-nav:hover:not(:disabled) {
  background: rgba(54, 163, 160, .1);
  color: #36a3a0;
}
.vdp-nav:disabled { opacity: .28; cursor: not-allowed; }
.vdp-nav svg { display: block; }

.vdp-title {
  text-align: center;
  font: 500 15px/1 'Outfit', system-ui, sans-serif;
  color: #1e2a2a;
  letter-spacing: .1px;
}

/* Two months side by side */
.vdp-months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.vdp-month { min-width: 0; }

.vdp-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  font: 500 11px/1 'Outfit', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #8a9696;
  text-align: center;
  padding-bottom: 6px;
}
.vdp-dow span {
  padding: 6px 0;
  font-weight: 600;
}

.vdp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.vdp-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 500 13px/1 'Outfit', system-ui, sans-serif;
  color: #1e2a2a;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: background .12s ease, color .12s ease, transform .08s ease;
  user-select: none;
}
.vdp-cell:hover:not(.past):not(.booked):not(.outside):not(.selected) {
  background: rgba(54, 163, 160, .12);
}

/* Out-of-month filler cells (non-past) — muted grey, non-interactive. */
.vdp-cell.outside {
  color: #c8ced0;
  cursor: default;
  pointer-events: none;
}

/* Past dates — teal color, horizontal strikethrough. Matches the image. */
.vdp-cell.past {
  color: #36a3a0;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1.3px;
  text-decoration-color: currentColor;
  pointer-events: none;
}

/* Today — solid teal disc, white text. */
.vdp-cell.today {
  background: #36a3a0;
  color: #fff;
  font-weight: 700;
}
.vdp-cell.today:hover { background: #2e8e8b; }

/* Booked — yellow fill; keeps the number visible. Cursor shows "not-allowed"
   and the price tooltip appears on hover, matching the reference image. */
.vdp-cell.booked {
  background: #fff43a;
  color: #1e2a2a;
  cursor: not-allowed;
  pointer-events: auto;
  font-weight: 600;
}
.vdp-cell.booked:hover { background: #ffe600; }

/* Hover price tooltip — shown on any future non-booked cell OR on booked
   cells (booked take priority visually with the yellow background). */
.vdp-cell[data-price]::after {
  content: attr(data-price);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%) translateY(2px);
  background: #1e2a2a;
  color: #fff;
  padding: 4px 8px;
  border-radius: 5px;
  font: 600 10.5px/1 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 2;
}
.vdp-cell[data-price]::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%) translateY(2px);
  border: 4px solid transparent;
  border-top-color: #1e2a2a;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 2;
}
.vdp-cell[data-price]:hover::after,
.vdp-cell[data-price]:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Selected dates — range ends get the teal disc, the middle gets a pale
   teal band. The band uses a square radius + negative margins so adjacent
   middles appear continuous. */
.vdp-cell.range-middle {
  background: rgba(54, 163, 160, .18);
  color: #1e2a2a;
  border-radius: 0;
}
.vdp-cell.selected {
  background: #36a3a0;
  color: #fff;
  font-weight: 700;
  z-index: 1;
}
.vdp-cell.selected:hover { background: #2e8e8b; }

/* Footer hint */
.vdp-foot {
  margin-top: 14px;
  padding: 12px 14px;
  border-top: 1px solid rgba(15, 23, 42, .06);
  text-align: center;
  font: 500 13px/1.3 'Outfit', system-ui, sans-serif;
  color: #5e6b6b;
  background: rgba(54, 163, 160, .03);
  border-radius: 0 0 10px 10px;
  margin-left: -22px; margin-right: -22px; margin-bottom: -18px;
  padding-left: 22px; padding-right: 22px; padding-bottom: 16px; padding-top: 14px;
}
.vdp-foot strong { color: #1e2a2a; font-weight: 600; }

/* Mobile: fall back to a single-column calendar and let the popover span
   the aside width so it stays on-screen. */
@media (max-width: 720px) {
  .vpd-date-pop {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    border-radius: 16px 16px 0 0;
    padding: 18px 16px 14px;
    max-height: 86vh;
    overflow: auto;
    animation: vpdDatePopInMob .18s cubic-bezier(.22,.61,.36,1);
  }
  @keyframes vpdDatePopInMob {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .vdp-months { grid-template-columns: 1fr; gap: 18px; }
  .vdp-foot { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}

/* ============================================================
   Role scoping: the global [hidden] UA rule is out-specced by
   .sb-item { display:flex } etc, so force hide for the handful
   of element classes we actually gate by role.
   ============================================================ */
.sb-item[hidden],
.sb-section-lbl[hidden],
.sb-admin-only[hidden],
.btn[hidden],
[data-roles][hidden] { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   HOME PAGE — deep clone of https://vms-florida.com/
   Scoped to body.home-body so it never leaks into the admin app.
   Typography, color, spacing, and section order match the
   WordPress / Elementor reference.
   ══════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Britannic Bold';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/assets/home/Britannic-Bold-Regular-3.woff2') format('woff2'),
       url('/assets/home/Britannic-Bold-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Aurelly Signature';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('/assets/home/Aurelly-Signature.woff2') format('woff2'),
       url('/assets/home/Aurelly-Signature.woff') format('woff');
}

/* Design tokens from the real Elementor kit (.elementor-kit-6) at vms-florida.com.
   See /tmp/vms_ref/post-6.css → --e-global-color-*, --e-global-typography-*. */
body.home-body {
  --vms-primary:       #36A3A0;   /* teal — buttons, links, underlines */
  --vms-secondary:     #6CBEB8;   /* light teal — hover */
  --vms-text:          #27213D;   /* deep indigo — headings, body emphasis */
  --vms-accent:        #A186BE;   /* purple — rarely used */
  --vms-gold:          #EDC56B;   /* divider / accent bar */
  --vms-cream:         #FEFDF9;   /* section tint */
  --vms-teal-light:    #68E0DA;   /* hover gradient counterpart */
  --vms-white-soft:    rgba(255,255,255,.72);

  --vms-pad-section:   90px;      /* desktop section padding (top/bottom) */
  --vms-container:     1140px;    /* Elementor container max-width */

  background: #fff;
  color: var(--vms-text);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 18px;                /* Elementor global text */
  font-weight: 400;
  line-height: 1.7;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
body.home-body a { color: var(--vms-primary); text-decoration: none; transition: color .2s; }
body.home-body a:hover { color: var(--vms-secondary); }
/* Buttons must win over the link color rule above. */
body.home-body a.vms-btn,
body.home-body a.vms-btn:hover { color: #fff; }
body.home-body a.vms-btn--ghost,
body.home-body a.vms-btn--ghost:hover { color: var(--vms-text); }

/* ── Hero: FULL viewport (100vh), full-bleed video background ─────
   Matches the Elementor hero section `elementor-element-e96b613`
   which uses `--min-height: 80vh`. We push it to 100vh so the whole
   viewport is filled on first paint — header overlays on top. */
.vms-hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 40px 24px 60px;                 /* header is now sticky above — no reserve needed */
  background: #121923;
  isolation: isolate;
}
.vms-hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.vms-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Softer veil — the reference uses a light tint + gradient to keep the
   video colorful. We match that rather than our old dark-heavy overlay. */
.vms-hero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(39,33,61,.22) 0%, rgba(39,33,61,.38) 55%, rgba(39,33,61,.55) 100%);
  z-index: 1;
}
.vms-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--vms-container);
  width: 100%;
  text-align: center;
  color: #fff;
}
.vms-hero__title {
  font-family: 'Britannic Bold', 'Playfair Display', serif;
  font-size: clamp(44px, 6.4vw, 96px);
  font-weight: normal;
  line-height: 1.1;
  letter-spacing: 1px;           /* Britannic Bold kit spacing */
  margin: 0 0 10px;
  color: #fff;
  text-shadow: 0 6px 30px rgba(0,0,0,.4);
}
.vms-hero__script {
  display: block;
  font-family: 'Aurelly Signature', 'Allura', 'Parisienne', cursive;
  font-weight: 400;
  font-size: clamp(42px, 5.6vw, 80px);
  line-height: 1em;              /* kit: 1em */
  margin-top: 6px;
  color: #ffe9c9;
  letter-spacing: 0;
}

/* Booking widget — mirrors `.search_wr_elementor`:
   bg = --e-global-color-69d5c76 (rgba(255,255,255,.72)), padding 20px, radius 20px. */
.vms-booking {
  background: var(--vms-white-soft);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 18px 60px -20px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.15);
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  max-width: 1020px;
  margin: 44px auto 0;
  align-items: stretch;
}
.vms-booking__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid transparent;
  transition: border-color .15s, box-shadow .15s;
  min-width: 0;
}
.vms-booking__field:focus-within,
.vms-booking__field.is-open {
  border-color: var(--vms-primary);
  box-shadow: 0 0 0 3px rgba(54,163,160,.14);
}
/* When the field carries a selected date, the input text becomes the
   hero of the pill — shift the placeholder-style to a small uppercase
   caption above the value (mirrors the listing-detail pill). */
.vms-booking__field.has-value input {
  color: #1e2a2a;
  font-weight: 600;
}
.vms-booking__field svg { flex: 0 0 auto; color: var(--vms-primary); }
.vms-booking__field input,
.vms-booking__field select {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--vms-text);
  min-width: 0;
}
.vms-booking__field input::placeholder { color: #9aa1b3; font-weight: 400; }
.vms-booking__cta {
  background: var(--vms-primary);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 0 28px;
  font-family: inherit;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: .3px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.vms-booking__cta:hover {
  background: linear-gradient(180deg, var(--vms-primary) 0%, var(--vms-secondary) 100%);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -10px rgba(54,163,160,.6);
}

/* Mobile hero scaling (kit breakpoint: 767px). */
@media (max-width: 820px) {
  .vms-hero { min-height: 100svh; padding: 120px 16px 40px; }
  .vms-hero__title { font-size: clamp(36px, 10vw, 52px); letter-spacing: .5px; }
  .vms-hero__script { font-size: clamp(32px, 8vw, 50px); }
  .vms-booking { grid-template-columns: 1fr; padding: 14px; border-radius: 16px; margin-top: 28px; }
  .vms-booking__cta { padding: 14px 22px; justify-content: center; }
}

/* ── Section shell ──────────────────────────────────── */
.vms-section {
  position: relative;
  padding: var(--vms-pad-section) 24px;
  background: #fff;
  isolation: isolate;
}
/* Tinted sections — the reference uses `#FEFDF9` (kit `--e-global-color-fe38c12`)
   as the soft-cream alternate band color, not the heavier beige we had. */
.vms-section--tint     { background: var(--vms-cream); }
.vms-section--beige    { background: linear-gradient(180deg, var(--vms-cream) 0%, #f5eadc 100%); }

/* Section variants — mapped 1:1 to the Elementor kit tokens used on
   vms-florida.com. The Elementor `overlay_opacity` value represents the
   solid color's coverage over the bg image; we invert it to visibility
   on the `::before` pseudo-element.
     Section 2 (NVR)     → cream base, palm_v1, overlay 0.55 → img @ .45
     Section 4 (Renters) → gradient primary→secondary, overlay 0.9
     Section 5 (Avail)   → text-color base, sand, overlay 0.9 → img @ .10
     Section 6 (Owners)  → solid accent (#A186BE), no image
     Section 7 (About)   → cream base, palm_v3, overlay 0.5  → img @ .50
     Section 8 (Book)    → heron image, no overlay
*/

/* Inverted (dark indigo) — Available Properties. Uses --vms-text. */
.vms-section--dark { background-color: var(--vms-text); color: #fff; }
.vms-section--dark .vms-h2,
.vms-section--dark .vms-eyebrow,
.vms-section--dark .vms-body p,
.vms-section--dark .vms-body p strong { color: #fff; }
.vms-section--dark .vms-sub { color: var(--vms-gold); }

/* Teal gradient band — For Renters (Elementor: 8ab375d) */
.vms-section--gradient {
  background: linear-gradient(180deg, var(--vms-primary) 0%, var(--vms-secondary) 100%);
  color: #fff;
}
.vms-section--gradient .vms-h2,
.vms-section--gradient .vms-eyebrow,
.vms-section--gradient .vms-body p,
.vms-section--gradient .vms-body p strong { color: #fff; }
.vms-section--gradient .vms-sub { color: #fff; opacity: .92; }
.vms-section--gradient .vms-divider { background: var(--vms-gold); }

/* Solid purple band — For Homeowners (Elementor: 247e8fa, color accent #A186BE) */
.vms-section--accent {
  background-color: var(--vms-accent);
  color: #fff;
}
.vms-section--accent .vms-h2,
.vms-section--accent .vms-eyebrow,
.vms-section--accent .vms-body p,
.vms-section--accent .vms-body p strong { color: #fff; }
.vms-section--accent .vms-sub { color: #fff; opacity: .92; }
.vms-section--accent .vms-about__quote { color: #fff; border-left-color: var(--vms-gold); }
.vms-section--accent .vms-divider { background: var(--vms-gold); }

/* Cream base — used for sections that sit over a palm pattern (NVR, About). */
.vms-section--cream { background-color: var(--vms-cream); }

/* Real pattern backgrounds pulled directly from the reference site's CDN. */
.vms-bg--palm::before,
.vms-bg--seashell::before,
.vms-bg--sand::before,
.vms-bg--palm-v3::before,
.vms-bg--heron::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
  pointer-events: none;
}
/* Opacities tuned to Elementor overlay_opacity on each section. */
.vms-bg--palm::before     { background-image: url('/assets/home/tropical-palm-frond-shadow-wall_v1.webp'); opacity: .45; mix-blend-mode: multiply; }
.vms-bg--seashell::before { background-image: url('/assets/home/seashell-pattern-1.webp'); opacity: 1; }
.vms-bg--sand::before     { background-image: url('/assets/home/tropical-sand-texture-with-waves_bw.webp'); opacity: .10; background-attachment: fixed; }
.vms-bg--palm-v3::before  { background-image: url('/assets/home/tropical-palm-frond-shadow-wall_v3.webp'); opacity: .50; mix-blend-mode: multiply; }
.vms-bg--heron::before    { background-image: url('/assets/home/grey-heron-standing-on-white-beach-on-maldives-isl-2025-02-11-17-48-15-utc.webp'); opacity: 1; }
.vms-bg--heron::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.78) 100%);
}

/* ── Seashell divider strip — the 60-tall decorative band that sits
   BETWEEN the NVR section and the For Renters teal section on the
   reference site (Elementor section 5c2efa0). */
.vms-stripe {
  display: none !important;
}

/* Padding helpers — let sections collapse top / bottom padding so
   photos can bridge between sections (mirrors the reference site's
   "For Renters" → "Available Properties" overlap).                */
.vms-section--flush-bottom { padding-bottom: 0; }
.vms-section--flush-top    { padding-top: 0; }

/* ── Bridge photo — the family image that sits half in the teal
   For Renters section and half in the dark-indigo Available
   Properties section, creating the visual overlap seen on the
   reference site.                                                  */
.vms-bridge {
  max-width: 960px;
  margin: 70px auto -120px;                  /* pull into next section */
  padding: 0 24px;
  position: relative;
  z-index: 2;
}
.vms-bridge img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.45),
              0 10px 24px -14px rgba(0,0,0,.25);
}
/* When the bridge is present, the next dark section needs extra
   top padding so the card doesn't sit on top of the headline. */
.vms-bridge + section.vms-section--flush-top,
.vms-section--flush-bottom + section.vms-section--flush-top { padding-top: 160px; }
@media (max-width: 767px) {
  .vms-bridge { margin: 40px auto -80px; }
  .vms-bridge img { aspect-ratio: 4 / 3; border-radius: 10px; }
  .vms-bridge + section.vms-section--flush-top,
  .vms-section--flush-bottom + section.vms-section--flush-top { padding-top: 120px; }
}

.vms-section__inner {
  position: relative;
  z-index: 1;
  max-width: var(--vms-container);
  margin: 0 auto;
}

/* Eyebrow — Elementor kit `--e-global-typography-accent`:
   Outfit 20px / 300 / uppercase / 1px letter-spacing / 1.5em line-height. */
.vms-eyebrow {
  display: inline-block;
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 1.5em;
  text-transform: uppercase;
  color: var(--vms-primary);
  margin-bottom: 8px;
}
@media (max-width: 767px) {
  .vms-eyebrow { font-size: 17px; }
}
/* Primary heading — Elementor kit `--e-global-typography-primary`:
   Britannic Bold 44px / normal / letter-spacing 1px.
   Mobile (767px) drops to 36px / line-height 1em. */
.vms-h2 {
  font-family: 'Britannic Bold', 'Playfair Display', serif;
  font-weight: normal;
  font-size: 44px;
  line-height: 1.15;
  letter-spacing: 1px;
  color: var(--vms-text);
  margin: 0 0 10px;
}
/* Secondary / script — Elementor kit `--e-global-typography-secondary`:
   Aurelly Signature 80px / 400 / line-height 1em.
   Mobile (767px) drops to 50px / 0.8em line-height. */
.vms-sub {
  font-family: 'Aurelly Signature', 'Allura', 'Parisienne', cursive;
  color: var(--vms-primary);
  font-size: 80px;
  font-weight: 400;
  line-height: 1em;
  margin: 0 0 20px;
}
@media (max-width: 767px) {
  .vms-h2  { font-size: 36px; line-height: 1em; }
  .vms-sub { font-size: 50px; line-height: .8em; }
}
.vms-divider {
  width: 80px;
  height: 3px;
  background: var(--vms-gold);   /* the site's real gold, #EDC56B */
  border-radius: 2px;
  margin: 0 0 26px;
}
.vms-section--center .vms-eyebrow,
.vms-section--center .vms-h2,
.vms-section--center .vms-sub,
.vms-section--center .vms-divider,
.vms-section--center .vms-section__inner { text-align: center; }
.vms-section--center .vms-divider { margin: 0 auto 28px; }

.vms-body p {
  margin: 0 0 16px;
  color: inherit;
  font-size: 17px;
  line-height: 1.75;
}
body.home-body .vms-body p { color: var(--vms-text); }
.vms-body p strong { color: var(--vms-text); font-weight: 600; }
/* Dark / gradient sections must win the specificity war. */
body.home-body .vms-section--dark .vms-body p,
body.home-body .vms-section--dark .vms-body p strong,
body.home-body .vms-section--gradient .vms-body p,
body.home-body .vms-section--gradient .vms-body p strong,
body.home-body .vms-section--dark .vms-about__quote,
body.home-body .vms-section--gradient .vms-about__quote { color: #fff; }
body.home-body .vms-section--dark .vms-about__quote,
body.home-body .vms-section--gradient .vms-about__quote { border-left-color: var(--vms-gold); }

@media (max-width: 820px) {
  .vms-section { padding: 60px 18px; }
}

/* ── Two-column layout (Naples rentals intro + carousel) ── */
.vms-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.vms-two--flip .vms-two__media { order: 2; }
@media (max-width: 900px) { .vms-two { grid-template-columns: 1fr; gap: 36px; } .vms-two--flip .vms-two__media { order: 0; } }

/* ── `.vms-two--card` — floating-card treatment used in the reference
   site's "Naples Vacation Rentals" & "For Renters" rows.
   The text column becomes a white rounded card with a soft shadow,
   overlapping the adjacent image by 40px so the seashell/palm
   shadow pattern is visible between them. The image column becomes
   a flush-edge rounded photo. On mobile both stack cleanly. */
.vms-two--card {
  align-items: center;
  gap: 0;                                     /* overlap replaces gap */
  /* Reference homepage: ~35% white card, ~65% hero photo (image reads larger). */
  grid-template-columns: minmax(0, 9fr) minmax(0, 16fr);
}
.vms-two--card > .reveal:first-child,
.vms-two--card > .vms-two__text {
  background: #ffffff;
  border-radius: 20px;
  padding: 44px 40px;
  box-shadow: 0 18px 50px -20px rgba(39,33,61,.18),
              0 2px 6px rgba(39,33,61,.04);
  position: relative;
  z-index: 2;
  /* Pull the card rightwards so it overlaps the image column slightly. */
  margin-right: -32px;
}
.vms-two--card .vms-two__media {
  position: relative;
  z-index: 1;
}
.vms-two--card .vms-two__media img,
.vms-two--card .vms-two__media .vms-feature-img,
.vms-two--card .vms-two__media .vms-slider {
  border-radius: 14px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
  min-height: 0;
  box-shadow: 0 22px 56px -28px rgba(0,0,0,.35);
}
/* When a `.vms-two--flip` row also uses `--card`, the card sits on
   the RIGHT and overlaps the image on the left. */
.vms-two--card.vms-two--flip > .reveal:first-child,
.vms-two--card.vms-two--flip > .vms-two__text {
  margin-right: 0;
  margin-left: -32px;
}
@media (max-width: 1100px) {
  .vms-two--card { grid-template-columns: minmax(0, 10fr) minmax(0, 13fr); }
  .vms-two--card > .reveal:first-child,
  .vms-two--card > .vms-two__text { padding: 38px 34px; }
}
@media (max-width: 900px) {
  .vms-two--card {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .vms-two--card > .reveal:first-child,
  .vms-two--card > .vms-two__text,
  .vms-two--card.vms-two--flip > .reveal:first-child,
  .vms-two--card.vms-two--flip > .vms-two__text {
    margin: 0;
    padding: 34px 28px;
    border-radius: 16px;
  }
  .vms-two--card .vms-two__media img,
  .vms-two--card .vms-two__media .vms-feature-img,
  .vms-two--card .vms-two__media .vms-slider { aspect-ratio: 4 / 3; }
}

/* Fade carousel */
.vms-slider { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 3/2; background: #eee; }
.vms-slider__track { position: absolute; inset: 0; }
.vms-slider__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.vms-slider__slide.is-active { opacity: 1; }
.vms-slider__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vms-slider__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.92); color: #27213d;
  border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  transition: background .15s, transform .15s;
  z-index: 2;
}
.vms-slider__btn:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
/* Arrows sit just inside the rounded image so they stay visible despite
   the slider's `overflow: hidden`. Matches the reference site's look
   where a subtle circular arrow hovers over the left image edge. */
.vms-slider__btn--prev { left: 14px; }
.vms-slider__btn--next { right: 14px; }
@media (max-width: 560px) { .vms-slider__btn--prev { left: 8px; } .vms-slider__btn--next { right: 8px; } }
.vms-slider__dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 2;
}
.vms-slider__dot {
  width: 8px; height: 8px; border-radius: var(--r-lg);
  background: rgba(255,255,255,.55); border: 0; padding: 0; cursor: pointer;
  transition: background .15s, transform .15s;
}
.vms-slider__dot.is-active { background: #fff; transform: scale(1.25); }

/* Big feature image on "For Renters" */
.vms-feature-img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  aspect-ratio: 3/2;
  display: block;
  box-shadow: 0 20px 60px -30px rgba(0,0,0,.3);
}

/* ── Property card strip (links to /rentals) ─────────── */
.vms-props-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 36px;
}
@media (max-width: 1024px) { .vms-props-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .vms-props-grid { grid-template-columns: 1fr; } }
/* Card — exact clone of .property_listing (wprentals theme).
   Reference rules:
     .property_listing          → bg #fff, radius 4px, overflow hidden,
                                  padding-bottom 15px, subtle tinted shadow
     .listing-unit-img-wrapper  → bg #f7f7f7, radius 3px
     .listing_title_unit        → 20px / 500 / #484848, line-height 1.1em
     .category_tagline          → 13px / #5d6475
     .property_status           → rectangular tag, padding 0 15px,
                                  12px / line-height 1.8em, radius 4px,
                                  background rgba(primary, .85)
     Hover transitions: img opacity → .89, title color → primary,
                        card bg → #fdfdfd. No translate. */
.vms-prop {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  border: 0;
  box-shadow: 0 2px 11px 0 rgba(54,163,160,.10);  /* tinted teal, per reference */
  padding-bottom: 15px;
  transition: background-color .2s linear, box-shadow .2s linear;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  color: inherit;
}
.vms-prop:hover {
  background-color: #fdfdfd;
  box-shadow: 0 4px 16px 0 rgba(54,163,160,.14);
}
.vms-prop__img {
  aspect-ratio: 400 / 314;
  background: #f7f7f7 center/cover no-repeat;      /* reference: #f7f7f7 */
  border-radius: 3px;                              /* reference: 3px */
  position: relative;
  overflow: hidden;
  transition: opacity .2s linear;
}
.vms-prop:hover .vms-prop__img { opacity: .89; }   /* reference hover */
/* Verified tag — rectangular rounded-4 like .property_status */
.vms-prop__verified {
  position: absolute; top: 15px; right: 15px;      /* reference placement */
  background: rgba(54,163,160,.85);                /* VMS teal override */
  color: #fff;
  padding: 0 15px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.8em;
  letter-spacing: .2px;
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
  z-index: 99;
}
.vms-prop__price {
  position: absolute; bottom: 15px; right: 15px;
  color: #36a3a0;                                  /* reference: primary color */
  font-size: 20px;                                 /* reference: 20px */
  font-weight: 500;
  z-index: 10;
  background: rgba(255,255,255,.92);
  padding: 4px 12px;
  border-radius: 4px;
  line-height: 1.2;
}
.vms-prop__body { padding: 18px 20px 0; }
.vms-prop__title {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;                                 /* reference */
  font-weight: 500;
  color: #484848;                                  /* reference ink */
  margin: 0 0 10px;
  line-height: 1.1em;                              /* reference */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s linear;
}
.vms-prop:hover .vms-prop__title { color: #36a3a0; }  /* reference: primary */
.vms-prop__loc {
  font-size: 13px;                                 /* reference */
  color: #5d6475;                                  /* reference: #5d6475 */
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
  line-height: 1.3em;
}
.vms-prop__meta {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px;
  color: #5d6475;
  border-top: 1px solid #f0f0f0;
  padding-top: 10px;
  margin-top: 4px;
  font-weight: 500;
}
.vms-prop__meta span { display: inline-flex; align-items: center; gap: 5px; }

/* ── 4-image inline gallery (homeowners section) ───── */
.vms-quad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.vms-quad img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 8px;
}
@media (max-width: 720px) { .vms-quad { grid-template-columns: 1fr 1fr; } }

/* ── "vms-trio" — the 3-image stack used in the For Homeowners
   section. Reference site stacks them vertically in a single column
   on desktop (portrait feel), and in a 3-column row on mobile.     */
.vms-trio {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 16px;
}
.vms-trio img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 16px 34px -18px rgba(39, 33, 61, .35),
              0 4px 10px -6px rgba(39, 33, 61, .20);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.vms-trio img:hover { transform: translateY(-3px) scale(1.01); }
@media (max-width: 900px) {
  .vms-trio { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .vms-trio img { aspect-ratio: 3 / 4; border-radius: 8px; }
}

/* ── "About VMS" founder block ─────────────────────── */
.vms-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) { .vms-about { grid-template-columns: 1fr; gap: 30px; } }
.vms-about__img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
  aspect-ratio: 4/3;
}
.vms-about__quote {
  font-family: 'Britannic Bold', 'Playfair Display', serif;
  font-size: 22px;
  line-height: 1.45;
  color: #27213d;
  border-left: 3px solid #e6c27a;
  padding-left: 18px;
  margin: 20px 0;
}

/* ── About duo (Verena + Marco, centered) ───────────────────────
   Matches vms-florida.com "About VMS Florida Realty" block where
   the heading is centered above two side-by-side portraits with
   body copy rendered full-width below them.                      */
.vms-about-stack { max-width: 1040px; margin: 0 auto; }
.vms-about-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin: 24px 0 36px;
}
.vms-about-duo__card {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 26px 50px -26px rgba(39, 33, 61, .28),
              0 8px 20px -12px rgba(39, 33, 61, .18);
  background: #fff;
}
.vms-about-duo__card img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.vms-about-stack__body { max-width: 820px; margin: 0 auto; text-align: center; }
.vms-about-stack__body .vms-body p { color: var(--vms-text); }
@media (max-width: 767px) {
  .vms-about-duo { grid-template-columns: 1fr; gap: 20px; }
  .vms-about-duo__card img { aspect-ratio: 4 / 3; }
}

/* ── For Renters split (left title / right body) ───────────────
   Replicates the two-column Elementor row on vms-florida.com: the
   teal eyebrow + cursive "What to Expect" + gold divider sit on
   the left, three paragraphs on the right. The family photo then
   bridges into the next section via .vms-bridge.                 */
.vms-renters {
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: 64px;
  align-items: start;
  padding-bottom: 30px;
}
.vms-renters__title { padding-top: 4px; }
.vms-renters__title .vms-eyebrow {
  font-family: 'Britannic Bold', 'Playfair Display', serif;
  font-size: 44px;
  font-weight: normal;
  letter-spacing: 1px;
  text-transform: none;
  line-height: 1.1;
  color: #fff;
  display: block;
  margin-bottom: 2px;
}
.vms-renters__title .vms-sub--white {
  color: #fff;
  margin: 0 0 18px;
}
.vms-renters__title .vms-divider--white {
  background: var(--vms-gold);
  width: 90px;
  margin: 0;
}
.vms-renters__body .vms-body p,
.vms-renters__body .vms-body p strong { color: #fff; }
.vms-renters__body .vms-body p strong { font-weight: 700; }
@media (max-width: 900px) {
  .vms-renters { grid-template-columns: 1fr; gap: 24px; text-align: left; }
  .vms-renters__title .vms-eyebrow { font-size: 34px; }
}
@media (max-width: 767px) {
  .vms-renters__title .vms-eyebrow { font-size: 30px; }
}

/* ── Purple heading variants (Naples Vacation Rentals) ────────
   The reference site uses --vms-accent (#A186BE) for the NVR
   h2 + cursive sub on a cream + palm-shadow background.         */
.vms-h2--purple { color: var(--vms-accent); }
.vms-sub--purple { color: var(--vms-accent); }
.vms-h2--teal { color: var(--vms-primary); }

/* ── Things to Do ─────────────────────────────────── */
.vms-ttd-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 30px;
}
@media (max-width: 900px) { .vms-ttd-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .vms-ttd-grid { grid-template-columns: 1fr; } }
.vms-ttd {
  background: #fff;
  border-radius: 12px;
  padding: 24px 22px;
  border: 1px solid #eee;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.vms-ttd:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(0,0,0,.18); border-color: #e6c27a; }
.vms-ttd__icon {
  width: 44px; height: 44px; border-radius: var(--r-lg);
  background: #f2f0ec; color: #36a3a0;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.vms-ttd__t {
  font-family: 'Outfit', sans-serif;
  font-weight: 600; font-size: 18px; color: #27213d;
  margin: 0 0 8px;
}
.vms-ttd__p { color: #5d6475; font-size: 14px; line-height: 1.65; margin: 0; }

/* ── Contact ──────────────────────────────────────── */
.vms-contact {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px) { .vms-contact { grid-template-columns: 1fr; gap: 30px; } }
.vms-contact__info p {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; color: #27213d;
  margin: 0 0 14px;
}
.vms-contact__info svg {
  width: 18px; height: 18px; flex-shrink: 0;
  color: #36a3a0;
}
.vms-contact__info a { color: #27213d; font-weight: 500; }
.vms-form {
  background: #fff;
  padding: 28px;
  border-radius: 12px;
  border: 1px solid #eee;
  display: grid;
  gap: 12px;
}
.vms-form__row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .vms-form__row { grid-template-columns: 1fr; } }
.vms-form input,
.vms-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  background: #fafafa;
  font-family: inherit;
  font-size: 14px;
  color: #27213d;
  transition: border-color .15s, background .15s;
}
.vms-form input:focus,
.vms-form textarea:focus {
  outline: 0;
  border-color: #36a3a0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(54,163,160,.1);
}
.vms-form textarea { min-height: 120px; resize: vertical; }
/* Buttons follow the Elementor theme: solid teal pill that turns into a teal-to-gold
   gradient on hover (the real site uses accent→teal-light; we use primary→gold for
   stronger brand readability). */
.vms-btn {
  background: var(--vms-primary);
  color: #fff; border: 1px solid transparent;
  padding: 14px 28px; border-radius: var(--r-lg);
  font-family: 'Outfit', sans-serif;
  font-size: 15px; font-weight: 500;
  letter-spacing: .4px;
  cursor: pointer; text-align: center;
  transition: background .25s, color .25s, border-color .25s, transform .2s, box-shadow .2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 10px 22px -12px rgba(54,163,160,.55);
}
.vms-btn:hover {
  background: linear-gradient(360deg, var(--vms-primary) 0%, var(--vms-teal-light) 100%);
  border-color: var(--vms-gold);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(54,163,160,.7);
}
.vms-btn--ghost {
  background: transparent;
  color: var(--vms-text);
  border: 1px solid rgba(39,33,61,.25);
  box-shadow: none;
}
.vms-btn--ghost:hover {
  background: rgba(255,255,255,.95);
  color: var(--vms-text);
  border-color: var(--vms-gold);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -12px rgba(39,33,61,.3);
}
/* When buttons sit on the gradient band, invert their default to white-on-transparent. */
.vms-section--gradient .vms-btn,
.vms-section--dark .vms-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: none;
}
.vms-section--gradient .vms-btn:hover,
.vms-section--dark .vms-btn:hover {
  background: #fff;
  color: var(--vms-text);
  border-color: var(--vms-gold);
}

/* CTA strip ────────────────────────────────────────── */
.vms-cta-strip {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  margin-top: 26px;
}

/* ── Footer — light theme (matches vms-florida.com marketing footer) ── */
.vms-footer {
  background: #eef1f4;
  color: #4a4f55;
  padding: 56px 24px 24px;
  font-size: 14px;
  border-top: 1px solid rgba(39, 33, 61, .08);
}
.vms-footer__cols {
  max-width: var(--vms-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 48px;
}
@media (max-width: 820px) { .vms-footer__cols { grid-template-columns: 1fr; gap: 32px; } }
.vms-footer h4 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--vms-primary);
  margin: 0 0 14px;
  letter-spacing: .02em;
}
/* Same full-color mark as #siteHeader / .master_header logo */
.vms-footer__logo img {
  width: 200px;
  max-width: 100%;
  height: auto;
  margin-bottom: 14px;
  display: block;
  object-fit: contain;
}
.vms-footer__logo p { color: #5c636a; }
.vms-footer p { margin: 0 0 10px; line-height: 1.75; }
.vms-footer a {
  color: var(--vms-primary);
  text-decoration: none;
  transition: color .15s ease;
}
.vms-footer a:hover { color: #2c8885; text-decoration: underline; text-underline-offset: 2px; }
.vms-footer__featured a { font-weight: 500; }
.vms-footer__featured p:last-child a {
  font-weight: 600;
  letter-spacing: .02em;
}
.vms-footer__contact p { display: flex; align-items: flex-start; gap: 12px; color: #4a4f55; }
.vms-footer__contact a { color: var(--vms-primary); }
.vms-footer__contact svg {
  width: 16px; height: 16px;
  color: var(--vms-primary);
  flex-shrink: 0;
  margin-top: 4px;
  opacity: .9;
}
.vms-footer__legal {
  max-width: var(--vms-container);
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(39, 33, 61, .1);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #6b7280;
}
.vms-footer__legal a { color: #6b7280; }
.vms-footer__legal a:hover { color: var(--vms-primary); }
.vms-footer__legal ul { display: flex; list-style: none; gap: 20px; padding: 0; margin: 0; }

/* Win over body.home-body global link colors inside footer */
body.home-body .vms-footer a { color: var(--vms-primary); text-decoration: none; }
body.home-body .vms-footer a:hover { color: #2c8885; text-decoration: underline; text-underline-offset: 2px; }
body.home-body .vms-footer__legal a,
body.home-body .vms-footer__legal a:link { color: #6b7280; text-decoration: none; }
body.home-body .vms-footer__legal a:hover { color: var(--vms-primary); text-decoration: underline; text-underline-offset: 2px; }

/* Scroll-to-top */
.vms-totop {
  position: fixed; right: 22px; bottom: 22px;
  width: 44px; height: 44px; border-radius: var(--r-lg);
  background: #36a3a0; color: #fff;
  border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px -10px rgba(0,0,0,.3);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .2s, transform .2s;
  z-index: 50;
}
.vms-totop.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.vms-totop:hover { background: #2c8885; }

/* Reveal-on-scroll — matches Elementor's `fadeInUp` keyframe
   (translateY 100 → 0, opacity 0 → 1 over ~1.25s, ease-out).
   Items with the `.reveal--delay-*` modifiers stagger behind their
   siblings, mirroring Elementor's `animation_delay` 200/400/600ms. */
@keyframes vmsFadeInUp {
  0%   { opacity: 0; transform: translate3d(0, 40px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes vmsFadeInLeft {
  0%   { opacity: 0; transform: translate3d(-40px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes vmsFadeInRight {
  0%   { opacity: 0; transform: translate3d(40px, 0, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes vmsFadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.reveal       { opacity: 0; transform: translate3d(0, 40px, 0); will-change: opacity, transform; }
.reveal--left  { opacity: 0; transform: translate3d(-40px, 0, 0); }
.reveal--right { opacity: 0; transform: translate3d(40px, 0, 0); }
.reveal--fade  { opacity: 0; transform: none; }

.reveal.is-in        { animation: vmsFadeInUp    1.25s cubic-bezier(.22,.61,.36,1) forwards; }
.reveal--left.is-in  { animation: vmsFadeInLeft  1.25s cubic-bezier(.22,.61,.36,1) forwards; }
.reveal--right.is-in { animation: vmsFadeInRight 1.25s cubic-bezier(.22,.61,.36,1) forwards; }
.reveal--fade.is-in  { animation: vmsFadeIn      1.25s cubic-bezier(.22,.61,.36,1) forwards; }

.reveal--delay-200.is-in { animation-delay: .2s; }
.reveal--delay-400.is-in { animation-delay: .4s; }
.reveal--delay-600.is-in { animation-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--left, .reveal--right, .reveal--fade { opacity: 1; transform: none; }
  .reveal.is-in, .reveal--left.is-in, .reveal--right.is-in, .reveal--fade.is-in { animation: none; }
}

/* ══════════════════════════════════════════════════════════════
   SUB-PAGES — About / Things to Do / Contact
   Scoped under body.subpage-body and shared .home-body styles.
   ══════════════════════════════════════════════════════════════ */

/* --- Page banner — cinematic hero with video or photo background ---------
   Matches the home hero language: full-bleed media, soft inset glow at
   the top (glass header reads against it), stronger gradient at the
   bottom for legibility. Works for both <video class="vms-pagebanner__video">
   and a `style="background-image:url(...)"` on the section. */
.vms-pagebanner {
  position: relative;
  min-height: clamp(440px, 56vh, 560px);
  display: flex; align-items: center; justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #141321;             /* fallback while video loads */
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
/* Video fills the section, sits behind every other layer. */
.vms-pagebanner__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  pointer-events: none;
  /* subtle saturation boost + gentle grade so the overlay text pops */
  filter: saturate(1.08) contrast(1.03);
}
/* Two-layer veil: top — mild so the glass header reads naturally;
   bottom — stronger so the title block has contrast on any footage. */
.vms-pagebanner__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(120% 80% at 50% 140%, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 55%),
    linear-gradient(180deg,
      rgba(15, 23, 42, .42) 0%,
      rgba(15, 23, 42, .18) 28%,
      rgba(15, 23, 42, .38) 72%,
      rgba(15, 23, 42, .72) 100%);
}
.vms-pagebanner__inner {
  position: relative; z-index: 2;
  text-align: center;
  padding: 96px 24px 80px;
  max-width: 960px;
  animation: vmsBannerFade .7s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes vmsBannerFade {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vms-pagebanner__eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-lg);
  background: rgba(255, 217, 142, .18);
  border: 1px solid rgba(255, 217, 142, .55);
  color: #ffe3a6 !important;
  letter-spacing: .22em !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.vms-pagebanner__title {
  font-family: 'Britannic Bold', 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(36px, 4.6vw, 62px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 18px 0 10px;
  color: #fff;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, .25),
    0 12px 34px rgba(0, 0, 0, .35);
}
.vms-pagebanner__sub {
  font-family: 'Aurelly Signature', 'Allura', cursive;
  font-size: clamp(26px, 2.4vw, 36px);
  color: #ffd98e;
  margin: 8px 0 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
@media (max-width: 700px) {
  .vms-pagebanner { min-height: 360px; }
  .vms-pagebanner__inner { padding: 72px 20px 56px; }
}
/* Respect users who disable motion — pause the video. */
@media (prefers-reduced-motion: reduce) {
  .vms-pagebanner__video { animation: none; }
}

/* ── Page title hero — mirrors vms-florida.com exactly ──────────
   Based on Elementor element 3265bf2 (About), 64bd60a (Things to
   Do) and f32f145 (Contact):
     • flex, justify-content:center, align-items:center
     • min-height 70vh desktop / 39vh tablet / 250px mobile
     • background-image cover, no-repeat (image passed via the
       --vms-pagetitle-bg custom property so each page ships its
       own asset without any HTML-side JS)
     • teal (#6CBEB8) overlay at 0.35 opacity (brand secondary)
     • H1 in Britannic Bold 75/65/50px, white, centered
   Reference: https://vms-florida.com/about-us/ */
.vms-pagetitle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 70vh;
  padding: 40px 24px;
  color: #ffffff;
  isolation: isolate;
  overflow: hidden;
  background-image: var(--vms-pagetitle-bg, none);
  background-position: var(--vms-pagetitle-bg-pos, center center);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #27213d; /* fallback while image loads */
}
/* Brand teal overlay (same color + opacity Elementor uses). */
.vms-pagetitle::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 0;
  background-color: #6CBEB8;
  opacity: 0.35;
  pointer-events: none;
}
.vms-pagetitle__inner {
  position: relative;
  z-index: 2;
  max-width: 1140px;
  margin: 0 auto;
  animation: vmsBannerFade .6s cubic-bezier(.22,.61,.36,1) both;
}
.vms-pagetitle__title {
  /* Britannic Bold is the brand display face; fall through to
     Outfit's heaviest weight so non-licensed browsers still match
     the heavy, slightly condensed feel. */
  font-family: 'Britannic Bold', 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 75px;
  line-height: 1.1;
  letter-spacing: 0.5px;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 14px rgba(15, 23, 42, .25);
}
/* Script second line used on /things-to-do/ H1. */
.vms-pagetitle__title .vms-pagetitle__script {
  display: block;
  font-family: 'Aurelly Signature', 'Allura', 'Parisienne', cursive;
  font-weight: 300;
  font-size: 0.68em;
  color: #ffffff;
  letter-spacing: 0;
  margin-top: 6px;
  line-height: 1;
}
@media (max-width: 1024px) {
  .vms-pagetitle { min-height: 39vh; }
  .vms-pagetitle__title { font-size: 65px; }
}
@media (max-width: 700px) {
  .vms-pagetitle { min-height: 250px; padding: 32px 20px; }
  .vms-pagetitle__title { font-size: 50px; }
}

/* ── Source-accurate intro split (text left, video right) ───────
   Mirrors the two-column hero intro on vms-florida.com/about-us/
   and /things-to-do/. The left column holds H2 + script subtitle +
   divider + body; the right column holds a looping muted video
   (falls back to a poster image). */
.vms-intro-split {
  padding: clamp(56px, 6vw, 96px) 24px clamp(48px, 5vw, 80px);
  background: #ffffff;
}
.vms-intro-split__inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.vms-intro-split__copy {
  max-width: 560px;
}
.vms-intro-split__eyebrow {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #36a3a0;
  margin-bottom: 14px;
}
.vms-intro-split__title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.15;
  color: #27213d;
  margin: 0 0 6px;
}
.vms-intro-split__sub {
  font-family: 'Aurelly Signature', 'Allura', 'Parisienne', cursive;
  font-weight: 300;
  font-size: clamp(22px, 2vw, 30px);
  color: #36a3a0;
  margin: 0 0 18px;
  line-height: 1.1;
}
.vms-intro-split__divider {
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, #36a3a0, rgba(54,163,160,0));
  margin: 0 0 22px;
  border-radius: 2px;
}
.vms-intro-split__body {
  font-size: 16.5px;
  line-height: 1.8;
  color: #4a4466;
}
.vms-intro-split__body p { margin: 0 0 14px; }
.vms-intro-split__body p:last-child { margin-bottom: 0; }
.vms-intro-split__media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #0f172a;
  box-shadow:
    0 30px 60px -24px rgba(15, 23, 42, .35),
    0 12px 28px -10px rgba(15, 23, 42, .18);
}
.vms-intro-split__media video,
.vms-intro-split__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 900px) {
  .vms-intro-split__inner { grid-template-columns: 1fr; gap: 32px; }
  .vms-intro-split__copy { max-width: none; }
  .vms-intro-split__media { aspect-ratio: 16 / 10; }
}

/* --- Narrow inner (readable prose) ----------------------------- */
.vms-section__inner--narrow { max-width: 820px; }

/* --- Prose lists inside .vms-body ------------------------------ */
.vms-body .vms-list,
.vms-list {
  margin: 12px 0 18px;
  padding: 0 0 0 22px;
  list-style: none;
}
.vms-list li {
  position: relative;
  padding: 6px 0 6px 0;
  line-height: 1.7;
  color: #5d6475;
}
.vms-list li::before {
  content: '';
  position: absolute;
  left: -18px; top: 16px;
  width: 8px; height: 8px;
  border-radius: var(--r-lg);
  background: #e6c27a;
}

.vms-body .vms-tip,
.vms-tip {
  background: #f8f7f4;
  border-left: 3px solid #e6c27a;
  padding: 14px 18px;
  border-radius: 6px;
  margin: 14px 0;
  font-size: 15px;
  color: #3d3a4a;
}

/* --- What-we-do 4-card grid (About, Contact) ------------------- */
.vms-wwd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 36px;
}
.vms-wwd-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 960px; margin-left: auto; margin-right: auto; }
@media (max-width: 1000px) {
  .vms-wwd-grid,
  .vms-wwd-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px)  {
  .vms-wwd-grid,
  .vms-wwd-grid--3 { grid-template-columns: 1fr; }
}
.vms-wwd {
  background: #fff;
  border: 1px solid #eee6dc;
  border-radius: 12px;
  padding: 28px 24px;
  text-align: left;
  transition: transform .25s ease, box-shadow .25s ease;
}
.vms-wwd:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(39,33,61,.25);
  border-color: #e6c27a;
}
.vms-wwd__icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: #f4efe5; color: #36a3a0;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.vms-wwd__t {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #27213d;
  margin: 0 0 8px;
}
.vms-wwd__p {
  font-size: 14px;
  line-height: 1.65;
  color: #5d6475;
  margin: 0;
}

/* --- Owners / info card inside vms-two ------------------------- */
.vms-owners-card,
.vms-info-card {
  background: #fff;
  border: 1px solid #eee6dc;
  border-radius: 14px;
  padding: 34px 32px;
  height: 100%;
}
.vms-info-card ul { margin-top: 10px; }
.vms-owners-card .vms-h2 { margin-top: 6px; }

/* --- Credentials strip (About) --------------------------------- */
.vms-creds {
  display: flex; gap: 36px; justify-content: center; flex-wrap: wrap;
  margin-top: 28px; align-items: center;
}
.vms-creds img {
  max-height: 72px; width: auto;
  opacity: .85;
  filter: saturate(.9);
  transition: opacity .2s;
}
.vms-creds img:hover { opacity: 1; }

/* --- Tips grid (Things to Do) --------------------------------- */
.vms-tips-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 32px;
  text-align: left;
}
@media (max-width: 1000px) { .vms-tips-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .vms-tips-grid { grid-template-columns: 1fr; } }
.vms-tip-card {
  background: #fff;
  border: 1px solid #eee6dc;
  border-radius: 12px;
  padding: 24px 22px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.vms-tip-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(39,33,61,.25);
  border-color: #e6c27a;
}
.vms-tip-card__icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: #f4efe5; color: #36a3a0;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.vms-tip-card h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #27213d;
  margin: 0 0 8px;
}
.vms-tip-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #5d6475;
  margin: 0;
}

/* --- Contact quick-contact cards ------------------------------- */
.vms-contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) { .vms-contact-cards { grid-template-columns: 1fr; } }
.vms-contact-card {
  background: #fff;
  border: 1px solid #eee6dc;
  border-radius: 14px;
  padding: 28px 26px;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.vms-contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(39,33,61,.25);
  border-color: #e6c27a;
}
.vms-contact-card__icon {
  width: 52px; height: 52px; border-radius: var(--r-lg);
  background: #f4efe5; color: #36a3a0;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
}
.vms-contact-card__label {
  display: block;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: #8e8a7e;
  margin-bottom: 8px;
}
.vms-contact-card__value {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #27213d;
  margin-bottom: 6px;
  text-decoration: none;
}
.vms-contact-card__value:hover { color: #36a3a0; }
.vms-contact-card__hint {
  display: block; font-size: 13px; color: #5d6475;
}

/* --- Enhanced contact form (vms-form--lg) ---------------------- */
.vms-form--lg label {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #27213d;
  letter-spacing: .3px;
  margin-bottom: 16px;
}
.vms-form--lg label .req { color: #c66c6c; margin-left: 2px; }
.vms-form--lg input,
.vms-form--lg select,
.vms-form--lg textarea {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e3ddd1;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  background: #fff;
  color: #27213d;
  margin-top: 6px;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.vms-form--lg input:focus,
.vms-form--lg select:focus,
.vms-form--lg textarea:focus {
  outline: none;
  border-color: #36a3a0;
  box-shadow: 0 0 0 3px rgba(54,163,160,.15);
}
.vms-form--lg textarea { min-height: 130px; resize: vertical; }
.vms-consent {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: #5d6475 !important;
  margin: 4px 0 18px !important;
}
.vms-consent input {
  width: 18px !important;
  height: 18px !important;
  margin-top: 2px !important;
  flex-shrink: 0;
  padding: 0 !important;
}
.vms-btn--lg {
  padding: 16px 34px;
  font-size: 15px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLASS / FROSTED THEME v2
   A cohesive glassmorphism system shared by hero header, cards, forms,
   buttons and sections. One source of truth for tint, blur, border and
   shadow so the whole marketing surface reads as one visual language.
   Built on top of the existing classes (no markup changes required).
   ═══════════════════════════════════════════════════════════════════════════ */
body.home-body {
  /* Light glass (used over cream / white / image sections) */
  --glass-bg:        rgba(255, 255, 255, .62);
  --glass-bg-strong: rgba(255, 255, 255, .78);
  --glass-bg-soft:   rgba(255, 255, 255, .42);
  --glass-border:    rgba(255, 255, 255, .65);
  --glass-border-in: 0 1px 0 rgba(255, 255, 255, .9) inset;
  --glass-shadow:    0 18px 40px -18px rgba(39, 33, 61, .25),
                     0 6px 18px -10px rgba(39, 33, 61, .12);
  --glass-shadow-lg: 0 30px 70px -28px rgba(39, 33, 61, .35),
                     0 12px 28px -14px rgba(39, 33, 61, .18);
  --glass-blur:      saturate(180%) blur(18px);
  --glass-blur-sm:   saturate(170%) blur(10px);

  /* Dark glass (used over gradient / dark / accent sections) */
  --glass-bg-dark:        rgba(255, 255, 255, .12);
  --glass-bg-dark-strong: rgba(255, 255, 255, .20);
  --glass-border-dark:    rgba(255, 255, 255, .28);
}

/* ── Floating "Naples Vacation Rentals" card — frosted white ─────── */
body.home-body .vms-two--card > .reveal:first-child,
body.home-body .vms-two--card > .vms-two__text {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--glass-shadow-lg),
    var(--glass-border-in);
}

/* ── Hero booking bar — matches the hero header's exact transparency
   recipe so the bar and the menu above it read as one pane of glass. */
body.home-body .vms-booking {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.14) 100%
  );
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
/* Input pills — slightly brighter inner wash so they feel selectable
   against the same milky-glass ground as the bar itself. */
body.home-body .vms-booking__field {
  background: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
body.home-body .vms-booking__field input,
body.home-body .vms-booking__field select { color: #ffffff; }
body.home-body .vms-booking__field input::placeholder { color: rgba(255, 255, 255, .82); }
body.home-body .vms-booking__field.has-value input { color: #ffffff; }
body.home-body .vms-booking__field svg { color: #ffffff; }
body.home-body .vms-booking__field:focus-within,
body.home-body .vms-booking__field.is-open {
  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
/* CTA keeps the brand teal but picks up a subtle inner-light for depth */
body.home-body .vms-booking__cta {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 10px 24px -12px rgba(54, 163, 160, .65);
}

/* ── Buttons — glass language for both solid & ghost variants ───── */
body.home-body a.vms-btn,
body.home-body .vms-btn {
  background: linear-gradient(180deg, var(--vms-primary) 0%, #2f8f8d 100%);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    0 10px 22px -12px rgba(54, 163, 160, .55);
}
body.home-body a.vms-btn:hover,
body.home-body .vms-btn:hover {
  background: linear-gradient(180deg, var(--vms-teal-light) 0%, var(--vms-primary) 100%);
  border-color: rgba(255, 255, 255, .55);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 16px 30px -12px rgba(54, 163, 160, .7);
}
body.home-body a.vms-btn--ghost,
body.home-body .vms-btn--ghost {
  background: var(--glass-bg);
  color: var(--vms-text);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    0 10px 22px -14px rgba(39, 33, 61, .18);
}
body.home-body a.vms-btn--ghost:hover,
body.home-body .vms-btn--ghost:hover {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(54, 163, 160, .35);
  color: var(--vms-primary);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 14px 28px -14px rgba(54, 163, 160, .25);
}
/* Buttons sitting over image/dark bands — glass over translucent white */
body.home-body .vms-bg--heron .vms-btn,
body.home-body .vms-section--gradient .vms-btn,
body.home-body .vms-section--dark .vms-btn,
body.home-body .vms-section--accent .vms-btn {
  background: var(--glass-bg);
  color: #fff;
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 12px 26px -14px rgba(0,0,0,.3);
}
body.home-body .vms-bg--heron .vms-btn:hover,
body.home-body .vms-section--gradient .vms-btn:hover,
body.home-body .vms-section--dark .vms-btn:hover,
body.home-body .vms-section--accent .vms-btn:hover {
  background: rgba(255, 255, 255, .92);
  color: var(--vms-primary);
  border-color: rgba(255, 255, 255, .8);
}

/* Heron CTA strip — over a near-white beach photo the glass buttons need
   ink text, not white, to keep strong contrast. Overrides the band defaults. */
body.home-body .vms-bg--heron .vms-cta-strip a.vms-btn,
body.home-body .vms-bg--heron .vms-cta-strip .vms-btn {
  color: #0f172a;
}
body.home-body .vms-bg--heron .vms-cta-strip a.vms-btn:hover,
body.home-body .vms-bg--heron .vms-cta-strip .vms-btn:hover {
  color: #0f172a;
}

/* ── Contact form — frosted surface with glass inputs ───────────── */
body.home-body .vms-form {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 32px;
  box-shadow: var(--glass-shadow), var(--glass-border-in);
}
body.home-body .vms-form input,
body.home-body .vms-form textarea {
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
body.home-body .vms-form input:focus,
body.home-body .vms-form textarea:focus {
  background: #fff;
  border-color: rgba(54, 163, 160, .55);
  box-shadow: 0 0 0 3px rgba(54, 163, 160, .14), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── Things to Do — glass cards, 3D lift on hover ───────────────── */
body.home-body .vms-ttd {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow:
    var(--glass-shadow),
    var(--glass-border-in);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}
body.home-body .vms-ttd:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .88);
  border-color: rgba(54, 163, 160, .35);
  box-shadow:
    var(--glass-shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}
body.home-body .vms-ttd__icon {
  background: rgba(54, 163, 160, .12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(54, 163, 160, .18);
}

/* ── Glass callout note (replaces inline-styled "Prefer German?") ── */
body.home-body .vms-note {
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: #3f4654;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}
body.home-body .vms-note strong { color: var(--vms-text); }
body.home-body .vms-note--gold { border-left: 3px solid var(--vms-gold); }

/* ── Header language pill — refine with shared glass tokens ─────── */
body.home-body .master_header .vms-lang {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  backdrop-filter: var(--glass-blur-sm);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 6px 18px -10px rgba(39, 33, 61, .18);
}
body.home-body .master_header .vms-lang:hover {
  background: rgba(255, 255, 255, .96);
  border-color: rgba(54, 163, 160, .4);
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAPLES VACATION RENTALS — push the slideshow rightward and enlarge it.
   The text card narrows, the media column widens, and the media extends
   past the inner container up to 1.5 in (144px) toward the viewport edge.
   Section is clipped so the overhang never creates horizontal scroll.
   ═══════════════════════════════════════════════════════════════════════════ */
body.home-body .vms-section--cream.vms-bg--palm { overflow: hidden; }

/* Reference site: the white card is compact on the left, photo is large
   on the right. We now enforce a clean ½-inch gutter (48px) between the
   two columns — no overlap — and let the image extend past the grid on
   the right to feel cinematic. */
body.home-body .vms-two--card {
  grid-template-columns: minmax(0, 9fr) minmax(0, 16fr);
  gap: 48px;                                  /* ½-inch breathing room */
  align-items: center;
}
body.home-body .vms-two--card > .reveal:first-child,
body.home-body .vms-two--card > .vms-two__text {
  padding: 34px 36px;
  margin-right: 0;                            /* overlap removed */
}
body.home-body .vms-two--card .vms-body p {
  font-size: 14.5px;
  line-height: 1.62;
  margin: 10px 0 0;
}
body.home-body .vms-two--card .vms-divider { margin: 12px 0; }
body.home-body .vms-two--card .vms-h2     { margin: 4px 0 0; }
body.home-body .vms-two--card .vms-sub    { margin: 2px 0 6px; }

/* Enlarge the slideshow: extend further right (past the container) and
   use a taller aspect ratio so it dominates the row like on the source. */
body.home-body .vms-two--card .vms-two__media {
  transform: translateX(clamp(0px, 6vw, 180px));
  width: calc(100% + clamp(0px, 6vw, 180px));
}
body.home-body .vms-two--card .vms-two__media img,
body.home-body .vms-two--card .vms-two__media .vms-slider,
body.home-body .vms-two--card .vms-two__media .vms-feature-img {
  aspect-ratio: 16 / 10;                      /* taller than 16:9 → bigger photo */
  border-radius: 18px;
  box-shadow:
    0 30px 70px -28px rgba(0, 0, 0, .4),
    0 14px 28px -14px rgba(0, 0, 0, .22);
}

@media (max-width: 1100px) {
  body.home-body .vms-two--card {
    grid-template-columns: minmax(0, 10fr) minmax(0, 15fr);
    gap: 36px;
  }
  body.home-body .vms-two--card .vms-two__media {
    transform: translateX(clamp(0px, 4vw, 96px));
    width: calc(100% + clamp(0px, 4vw, 96px));
  }
}
@media (max-width: 900px) {
  body.home-body .vms-two--card { gap: 28px; }
  body.home-body .vms-two--card .vms-two__media {
    transform: none;
    width: 100%;
  }
  body.home-body .vms-two--card .vms-two__media img,
  body.home-body .vms-two--card .vms-two__media .vms-slider,
  body.home-body .vms-two--card .vms-two__media .vms-feature-img {
    aspect-ratio: 4 / 3;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOR HOMEOWNERS — "Hands-on Local Care" — light pastel, modern & elegant
   Swaps the dark plum→teal aurora for a pale lavender-cream band. The text
   column sits in a crisp white editorial card with a hair-thin lavender
   border, the eyebrow becomes a pale purple pill, and the trio images get
   softer shadows that feel at home on a light canvas.
   ═══════════════════════════════════════════════════════════════════════════ */
body.home-body .vms-section--accent {
  /* Seashell → warm sand wash, tuned to the site's teal-and-gold
     brand palette (matches the header, buttons, and section tints
     elsewhere on the page). A single hairline teal line at the top
     seams it visually onto the page above. */
  background:
    radial-gradient(120% 80% at 12% 10%, rgba(54, 163, 160, .10) 0%, transparent 55%),
    radial-gradient(100% 80% at 88% 92%, rgba(237, 197, 107, .14) 0%, transparent 55%),
    linear-gradient(180deg, #FBF6EC 0%, #F7F1E3 55%, #F2EAD6 100%);
  color: var(--vms-text);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid rgba(54, 163, 160, .12);
}
/* Two soft brand-coloured glows for depth, plus a thin gold seam
   at the very top that ties the section to the cards above. */
body.home-body .vms-section--accent::before,
body.home-body .vms-section--accent::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
}
body.home-body .vms-section--accent::before {
  top: -140px; left: -100px;
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(108, 190, 184, .32), rgba(108, 190, 184, 0) 70%);
  opacity: .72;
}
body.home-body .vms-section--accent::after {
  bottom: -160px; right: -80px;
  width: 560px; height: 560px;
  background: radial-gradient(circle, rgba(237, 197, 107, .28), rgba(237, 197, 107, 0) 70%);
  opacity: .62;
}
/* Drop the palm silhouette — the clean pastel surface speaks for itself. */
body.home-body .vms-section--accent .vms-section__inner {
  position: relative;
  z-index: 1;
}
body.home-body .vms-section--accent .vms-section__inner::before {
  content: none;
  display: none;
}

/* Text card — editorial white card with a fine teal hairline + long soft shadow. */
body.home-body .vms-section--accent .vms-two > .reveal:last-child,
body.home-body .vms-section--accent .vms-two > .vms-two__text {
  background: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(54, 163, 160, .18);
  border-radius: 22px;
  padding: 44px 44px;
  box-shadow:
    0 1px 2px rgba(39, 33, 61, .04),
    0 28px 60px -28px rgba(54, 163, 160, .22),
    0 10px 24px -14px rgba(39, 33, 61, .10);
}

/* Eyebrow — soft teal pill, modern uppercase kerning. */
body.home-body .vms-section--accent .vms-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-lg);
  background: rgba(54, 163, 160, .12);
  border: 1px solid rgba(54, 163, 160, .34);
  color: #2E8582 !important;
  font-family: 'Outfit', sans-serif;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  margin-bottom: 14px;
}
body.home-body .vms-section--accent .vms-h2 {
  color: var(--vms-text);
  font-weight: 600;
  letter-spacing: -.01em;
}
body.home-body .vms-section--accent .vms-divider {
  height: 3px;
  width: 72px;
  border-radius: 3px;
  background: linear-gradient(90deg, #36A3A0, rgba(54, 163, 160, 0));
}
body.home-body .vms-section--accent .vms-body p {
  color: #4b4762;
  line-height: 1.72;
}
body.home-body .vms-section--accent .vms-body p strong {
  color: var(--vms-text);
  font-weight: 700;
}
/* The closing blockquote-style line — soft teal accent. */
body.home-body .vms-section--accent .vms-body p:last-child strong {
  color: #2E8582;
  font-style: italic;
  font-weight: 600;
}

/* CTA on this band — solid brand teal primary (override glass). */
body.home-body .vms-section--accent .vms-btn {
  background: #36A3A0;
  color: #fff;
  border: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 10px 24px -14px rgba(54, 163, 160, .65);
}
body.home-body .vms-section--accent .vms-btn:hover {
  background: #2E8582;
  color: #fff;
  box-shadow: 0 14px 30px -14px rgba(54, 163, 160, .8);
  transform: translateY(-1px);
}

/* Trio images — teal-tinted soft shadows on the warm sand canvas. */
body.home-body .vms-section--accent .vms-trio img {
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(39, 33, 61, .05),
    0 24px 48px -22px rgba(54, 163, 160, .30),
    0 8px 18px -10px rgba(39, 33, 61, .10);
  transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease;
}
body.home-body .vms-section--accent .vms-trio img:hover {
  transform: translateY(-5px) scale(1.012);
  box-shadow:
    0 2px 4px rgba(39, 33, 61, .06),
    0 34px 60px -22px rgba(54, 163, 160, .42),
    0 12px 22px -10px rgba(39, 33, 61, .14);
}

@media (max-width: 900px) {
  body.home-body .vms-section--accent .vms-two > .reveal:last-child,
  body.home-body .vms-section--accent .vms-two > .vms-two__text {
    padding: 32px 24px;
    border-radius: 18px;
  }
  body.home-body .vms-section--accent::before {
    width: 320px; height: 320px; top: -80px; left: -60px;
  }
  body.home-body .vms-section--accent::after {
    width: 340px; height: 340px; bottom: -100px; right: -40px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOR RENTERS — "What to Expect" — modern aurora + glass card
   Replaces the simple primary→secondary vertical gradient with a layered
   teal-to-ink mesh, soft glows, a decorative wave divider replacing the
   seashell stripe, and a frosted glass story card on the right.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Stripe divider — replaces the tiled seashell pattern with a clean SVG wave
   that transitions from the cream NVR section into the teal gradient. */
body.home-body .vms-stripe {
  height: 90px;
  background: var(--vms-cream);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0 60 C 240 90 480 10 720 40 C 960 70 1200 20 1440 50 L 1440 90 L 0 90 Z' fill='%2336A3A0'/></svg>");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 90px;
  background-attachment: scroll;
  margin-bottom: -1px;               /* kill seam with the teal section */
}
@media (max-width: 767px) {
  body.home-body .vms-stripe {
    height: 60px;
    background-size: 100% 60px;
  }
}

/* ───────────────────────────────────────────────────────────────
   FOR RENTERS — What to Expect
   Cloned from https://vms-florida.com/ Elementor section 8ab375d:
   flat teal band → bold display "For Renters:" + cursive
   "What to Expect" on the left, plain white body copy on the
   right (no card, no glass), then the family photo bridging
   into the dark section below.
   ─────────────────────────────────────────────────────────────── */
body.home-body .vms-section--gradient {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Modern layered teal ocean: two soft radial "suns" (one warm highlight
     top-right, one cool shade bottom-left) sit on top of a diagonal teal
     band. This gives depth and a water-like feel without being busy. */
  background:
    radial-gradient(140% 90% at 85% 8%,  rgba(255, 255, 255, .16) 0%, transparent 55%),
    radial-gradient(120% 90% at 12% 94%, rgba(15,  74,  72, .28) 0%, transparent 60%),
    linear-gradient(160deg, #56B8B2 0%, #42A4A0 45%, #318A87 100%);
}
/* Neutralize the palm silhouette that the global section styles add. */
body.home-body .vms-section--gradient .vms-section__inner::before {
  content: none !important;
  display: none !important;
  background: none !important;
}
/* ::before — soft aurora glow mesh for depth. */
body.home-body .vms-section--gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 520px at 88% 18%, rgba(237, 197, 107, .22), transparent 70%),
    radial-gradient(620px 620px at 8%  82%, rgba(108, 190, 184, .28), transparent 72%),
    radial-gradient(420px 420px at 50% 50%, rgba(255, 255, 255, .06), transparent 70%);
  filter: blur(8px);
}
/* ::after — scattered floating seashells, subtle white silhouettes. */
body.home-body .vms-section--gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .18;
  background-image:
    url('/assets/home/seashell.svg'),
    url('/assets/home/seashell-spiral.svg'),
    url('/assets/home/seashell.svg'),
    url('/assets/home/seashell-spiral.svg'),
    url('/assets/home/seashell.svg'),
    url('/assets/home/seashell.svg'),
    url('/assets/home/seashell-spiral.svg'),
    url('/assets/home/seashell.svg');
  background-repeat: no-repeat;
  background-position:
    6%   14%,
    18%  72%,
    32%  36%,
    47%  88%,
    64%  22%,
    78%  58%,
    88%  82%,
    92%   8%;
  background-size:
    70px 70px,
    58px 58px,
    44px 44px,
    84px 84px,
    52px 52px,
    66px 66px,
    38px 38px,
    48px 48px;
  animation: vmsShellFloat 14s ease-in-out infinite alternate;
}
body.home-body .vms-section--gradient > * { position: relative; z-index: 1; }

@keyframes vmsShellFloat {
  0%   { transform: translate3d(0,   0,   0) rotate(0deg);   opacity: .16; }
  50%  { transform: translate3d(4px, -6px, 0) rotate(.6deg); opacity: .22; }
  100% { transform: translate3d(-3px, 5px, 0) rotate(-.6deg); opacity: .18; }
}
@media (prefers-reduced-motion: reduce) {
  body.home-body .vms-section--gradient::after { animation: none; }
}
@media (max-width: 900px) {
  /* Drop half the shells on mobile so the section doesn't feel busy. */
  body.home-body .vms-section--gradient::after {
    background-image:
      url('/assets/home/seashell.svg'),
      url('/assets/home/seashell-spiral.svg'),
      url('/assets/home/seashell.svg'),
      url('/assets/home/seashell-spiral.svg');
    background-position:
      8%  12%,
      24% 82%,
      72% 32%,
      88% 74%;
    background-size:
      56px 56px,
      48px 48px,
      44px 44px,
      40px 40px;
    opacity: .14;
  }
}

/* Title column — bold display heading + cursive sub + short white rule. */
body.home-body .vms-renters { gap: 56px; align-items: start; }
body.home-body .vms-renters__title { padding-top: 2px; }
body.home-body .vms-renters__title .vms-eyebrow--renters {
  all: unset;                                    /* drop the prior gold chip */
  display: block;
  color: #ffffff;
  font-family: 'Britannic Bold', 'Outfit', sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 4.2vw, 56px);
  line-height: 1.02;
  letter-spacing: .5px;
  margin: 0 0 10px;
}
body.home-body .vms-renters__title .vms-sub--white {
  color: #ffffff;
  font-family: 'Aurelly Signature', 'Allura', 'Parisienne', cursive;
  font-weight: 400;
  /* Match .vms-sub (e.g. "Ready to Relax in") exactly: 80px / 1em desktop. */
  font-size: 80px;
  line-height: 1em;
  margin: 0 0 20px;
}
body.home-body .vms-renters__title .vms-divider--white {
  height: 2px;
  width: 160px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .85);       /* plain white rule, no gold gradient */
}

/* Body column — no card, no glass, no shadow; just clean paragraphs. */
body.home-body .vms-renters__body {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
body.home-body .vms-renters__body .vms-body p {
  color: #ffffff;
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0 0 18px;
  max-width: 62ch;                              /* reference reads ~60 chars per line */
}
body.home-body .vms-renters__body .vms-body p:last-child { margin-bottom: 0; }
body.home-body .vms-renters__body .vms-body p strong { font-weight: 700; color: #ffffff; }

/* Bridge image — the family photo that sits at the bottom of the teal
   band and pulls 120px into the next dark section, exactly like
   the reference site's .vms-bridge bridge pattern. */
body.home-body .vms-bridge {
  max-width: 1180px;
  margin: 56px auto -120px;
  padding: 0 24px;
}
body.home-body .vms-bridge img {
  width: 100%;
  border-radius: 14px;
  box-shadow:
    0 24px 48px -20px rgba(15, 23, 42, .35),
    0 10px 24px -12px rgba(15, 23, 42, .22);
}

@media (max-width: 900px) {
  body.home-body .vms-renters { grid-template-columns: 1fr; gap: 22px; }
  body.home-body .vms-renters__title .vms-eyebrow--renters { font-size: 38px; }
  /* Mobile: match .vms-sub (50px / .8em). */
  body.home-body .vms-renters__title .vms-sub--white { font-size: 50px; line-height: .8em; }
  body.home-body .vms-renters__title .vms-divider--white { width: 110px; }
  body.home-body .vms-bridge { margin-top: 32px; }
  body.home-body .vms-bridge img { border-radius: 10px 10px 0 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AVAILABLE PROPERTIES — light theme, modern
   Overrides the legacy `.vms-section--dark .vms-bg--sand` treatment on
   `#properties` only. Background becomes a soft cream with two subtle
   radial washes (teal + gold) that echo the hero palette. Headings flip
   to dark ink, the eyebrow becomes a teal pill, and the cards get a
   crisper modern lift (rounded 18, thicker padding, gentle hover shadow).
   ═══════════════════════════════════════════════════════════════════════════ */
body.home-body section#properties.vms-section {
  background:
    radial-gradient(140% 90% at 85% 10%,  rgba(54, 163, 160, .10) 0%, transparent 55%),
    radial-gradient(110% 80% at 10% 95%,  rgba(237, 197, 107, .10) 0%, transparent 55%),
    linear-gradient(180deg, #fbf8f2 0%, #f6f1e7 100%);
  color: var(--vms-text);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 180px;                          /* breathing room for the overhanging bridge photo */
}
/* Turn off the dark sand texture that was painted on top */
body.home-body section#properties.vms-bg--sand::before { content: none; display: none; }

/* Soft grid of dots for subtle modern texture (replaces the sand photo) */
body.home-body section#properties::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(39, 33, 61, .05) 1px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: .6;
  pointer-events: none;
  z-index: 0;
}
body.home-body section#properties .vms-section__inner {
  position: relative; z-index: 1;
}

/* Headings flip to dark ink; eyebrow becomes a teal pill. */
body.home-body section#properties .vms-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(54, 163, 160, .12);
  border: 1px solid rgba(54, 163, 160, .35);
  color: #2A7F82 !important;
  border-radius: var(--r-lg);
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 14px;
}
body.home-body section#properties .vms-h2 { color: var(--vms-text); }
body.home-body section#properties .vms-body p,
body.home-body section#properties .vms-body p strong { color: #4b4762; }
body.home-body section#properties .vms-divider {
  background: var(--vms-primary);
  width: 72px; height: 3px; border-radius: 3px;
}

/* CTA button — primary teal with a subtle underline-free pill. */
body.home-body section#properties .vms-btn {
  background: var(--vms-primary);
  color: #fff;
  border: 0;
  box-shadow: 0 8px 22px -12px rgba(54, 163, 160, .6);
}
body.home-body section#properties .vms-btn:hover {
  background: #2F8D8A;
  box-shadow: 0 14px 28px -14px rgba(54, 163, 160, .75);
  transform: translateY(-1px);
}

/* Cards — softer, more modern */
body.home-body section#properties .vms-props-grid { gap: 24px; margin-top: 40px; }
body.home-body section#properties .vms-prop {
  background: #ffffff;
  border-radius: 18px;
  padding-bottom: 18px;
  box-shadow: 0 1px 2px rgba(39, 33, 61, .04), 0 10px 30px -18px rgba(39, 33, 61, .15);
  border: 1px solid rgba(39, 33, 61, .05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.home-body section#properties .vms-prop:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(39, 33, 61, .06), 0 24px 50px -20px rgba(54, 163, 160, .28);
  border-color: rgba(54, 163, 160, .28);
}
body.home-body section#properties .vms-prop__img {
  border-radius: 14px 14px 0 0;
  aspect-ratio: 4 / 3;
}
body.home-body section#properties .vms-prop__verified {
  background: rgba(39, 33, 61, .78);           /* neutral ink chip for contrast on any photo */
  backdrop-filter: blur(4px);
  border-radius: var(--r-lg);
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
body.home-body section#properties .vms-prop__price {
  background: #ffffff;
  color: var(--vms-primary);
  border-radius: var(--r-lg);
  padding: 5px 14px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  box-shadow: 0 4px 14px -6px rgba(39, 33, 61, .25);
}
body.home-body section#properties .vms-prop__body { padding: 18px 20px 0; }
body.home-body section#properties .vms-prop__title {
  font-family: 'Outfit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--vms-text);
  line-height: 1.3;
}
body.home-body section#properties .vms-prop:hover .vms-prop__title { color: var(--vms-primary); }
body.home-body section#properties .vms-prop__loc { color: #6b6781; font-size: 13px; }
body.home-body section#properties .vms-prop__meta {
  border-top: 1px solid rgba(39, 33, 61, .08);
  color: #6b6781;
  font-size: 12.5px;
  padding-top: 12px;
  margin-top: 10px;
}

@media (max-width: 900px) {
  body.home-body section#properties { padding-top: 140px; }
  body.home-body section#properties .vms-props-grid { gap: 18px; }
}

/* ── Reduced-transparency fallback for older browsers ─────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.home-body .vms-two--card > .reveal:first-child,
  body.home-body .vms-two--card > .vms-two__text,
  body.home-body .vms-booking,
  body.home-body .vms-form,
  body.home-body .vms-ttd,
  body.home-body .vms-note,
  body.home-body a.vms-btn--ghost,
  body.home-body .vms-btn--ghost {
    background: #ffffff !important;
  }
  body.home-body .vms-section--accent .vms-two > .reveal:last-child,
  body.home-body .vms-section--accent .vms-two > .vms-two__text {
    background: rgba(122, 93, 173, .55) !important;
  }
  body.home-body .vms-renters__body {
    background: rgba(46, 143, 140, .55) !important;
  }
}

/* Sub-page bodies still honor .home-body base so the header inherits
   the same sizing; no override needed. */

/* ═══════════════════════════════════════════════════════════════
   Rental Applications — applicant modal, status, admin queue,
   settings panel.  Scoped under .vms-app-* to avoid cross-talk.
   ═══════════════════════════════════════════════════════════════ */

.vms-app-modal-bg {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(6px) saturate(130%);
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 48px 16px;
  z-index: 9000;
}
.vms-app-modal-bg.open { display: flex; }

.vms-app-modal {
  background: #fff;
  width: min(860px, 100%);
  border-radius: 18px;
  box-shadow: 0 32px 64px -24px rgba(15,23,42,.45);
  overflow: hidden;
  animation: vmsAppIn .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes vmsAppIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.vms-app-loading {
  padding: 64px 24px; text-align: center; color: #64748b; font: 500 15px/1.4 'Outfit', system-ui, sans-serif;
}

.vms-app-hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 26px 28px 20px; border-bottom: 1px solid #eef2f7;
  background: linear-gradient(180deg, #fbfaf6, #fff);
}
.vms-app-hd .vms-app-eyebrow {
  font: 700 11px/1 'Outfit', system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: #7A5DAD; margin-bottom: 6px;
}
.vms-app-hd h2 { font: 700 22px/1.2 'Outfit', sans-serif; color: #0f172a; margin: 0 0 6px; }
.vms-app-hd p  { margin: 0; font-size: 14px; color: #475569; max-width: 620px; }
.vms-app-close {
  width: 36px; height: 36px; border-radius: 50%;
  background: #f1f5f9; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: #0f172a;
  transition: background .2s, transform .15s;
}
.vms-app-close:hover { background: #e2e8f0; transform: rotate(90deg); }

.vms-app-form { padding: 10px 28px 20px; max-height: 72vh; overflow-y: auto; }

.vms-app-sec { padding: 22px 0; border-bottom: 1px solid #f1f5f9; }
.vms-app-sec:last-of-type { border-bottom: 0; }
.vms-app-sec h3 {
  font: 600 15px/1.2 'Outfit', sans-serif; color: #0f172a; margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
}
.vms-app-sec h3::before {
  content: ""; width: 4px; height: 16px; border-radius: 3px; background: linear-gradient(180deg,#7A5DAD,#2F6E7B);
}
.vms-app-fine { font-size: 12px; color: #64748b; margin: -6px 0 10px; }

.vms-app-grid { display: grid; gap: 14px; }
.vms-app-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vms-app-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .vms-app-grid-2, .vms-app-grid-3 { grid-template-columns: 1fr; } }

.vms-app-form label {
  display: flex; flex-direction: column; gap: 6px;
  font: 500 12px/1 'Outfit', sans-serif; color: #334155; letter-spacing: .02em;
}
.vms-app-form input:not([type="checkbox"]):not([type="radio"]),
.vms-app-form textarea,
.vms-app-form select {
  font: 400 14px/1.4 'Outfit', sans-serif; color: #0f172a;
  background: #fff; border: 1px solid #d8dee8; border-radius: 10px; padding: 10px 12px;
  transition: border-color .15s, box-shadow .15s;
}
.vms-app-form input:focus,
.vms-app-form textarea:focus,
.vms-app-form select:focus {
  outline: none; border-color: #7A5DAD;
  box-shadow: 0 0 0 3px rgba(122, 93, 173, .15);
}
.vms-app-form textarea { resize: vertical; min-height: 80px; }

.vms-app-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.vms-app-checks label {
  flex-direction: row; align-items: center; gap: 8px;
  font-size: 13px; color: #0f172a; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.vms-app-checks label:hover { background: #f8fafc; border-color: #cbd5e1; }

.vms-app-row-hd { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; font-size: 12px; color: #64748b; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.vms-app-addrow {
  background: none; border: 1px dashed #cbd5e1; color: #475569; padding: 4px 10px; border-radius: 8px; cursor: pointer;
  font: 500 12px/1 'Outfit', sans-serif; transition: all .15s;
}
.vms-app-addrow:hover { border-color: #7A5DAD; color: #7A5DAD; }

.vms-app-subrow {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) auto; gap: 8px; margin-bottom: 8px; align-items: center;
}
.vms-app-subrow-wide { grid-template-columns: repeat(6, minmax(0,1fr)) auto; }
@media (max-width: 720px) { .vms-app-subrow, .vms-app-subrow-wide { grid-template-columns: 1fr; } }
.vms-app-rowrm {
  width: 28px; height: 28px; border-radius: 50%; background: #f1f5f9; border: 0; color: #64748b; font-size: 16px; cursor: pointer;
}
.vms-app-rowrm:hover { background: #fee2e2; color: #b91c1c; }

.vms-app-sec-consent {
  background: #fdfcf6; border: 1px solid #f0e7d0; border-radius: 14px; padding: 18px 20px; margin: 12px 0;
}
.vms-app-consent-text {
  font-size: 12.5px; line-height: 1.55; color: #475569; background: #fff; border: 1px solid #eef2f7;
  padding: 14px 16px; border-radius: 10px; margin-bottom: 12px; max-height: 160px; overflow-y: auto;
}
.vms-app-check-strong {
  flex-direction: row !important; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: #0f172a;
}

.vms-app-sig { position: relative; border: 1px dashed #cbd5e1; border-radius: 12px; background: #fafafa; padding: 8px; }
.vms-app-sig canvas { width: 100%; height: 160px; border-radius: 8px; background: #fff; cursor: crosshair; touch-action: none; }
.vms-app-sig-clear { position: absolute; top: 14px; right: 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; }

.vms-app-ft {
  padding: 18px 28px; border-top: 1px solid #eef2f7; background: #fafbfd;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
}
.vms-app-fee { font-size: 13px; color: #475569; }
.vms-app-ft-btns { display: flex; gap: 10px; margin-left: auto; }

.vms-app-btn {
  font: 600 14px/1 'Outfit', sans-serif; padding: 11px 20px; border-radius: 10px; cursor: pointer; border: 0;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.vms-app-btn.primary {
  background: linear-gradient(135deg, #7A5DAD, #2F6E7B); color: #fff;
  box-shadow: 0 4px 12px -4px rgba(122, 93, 173, .45);
}
.vms-app-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -6px rgba(122, 93, 173, .55); }
.vms-app-btn.primary:disabled { opacity: .6; cursor: default; }
.vms-app-btn.ghost { background: #f1f5f9; color: #334155; }
.vms-app-btn.ghost:hover { background: #e2e8f0; }

/* ── Status page ────────────────────────────────────────────── */
.vms-app-modal-status { max-width: 720px; }
.vms-app-modal-status .vms-app-sec { padding-inline: 28px; }

.vms-app-status {
  text-transform: capitalize; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; background: #e0e7ff; color: #4338ca;
}
.vms-app-status--approved    { background: #dcfce7; color: #166534; }
.vms-app-status--declined    { background: #fee2e2; color: #991b1b; }
.vms-app-status--more_info   { background: #fef3c7; color: #92400e; }
.vms-app-status--withdrawn   { background: #f1f5f9; color: #64748b; }
.vms-app-status--under_review,
.vms-app-status--submitted   { background: #dbeafe; color: #1e40af; }
.vms-app-status--draft       { background: #f1f5f9; color: #475569; }

.vms-app-steps {
  list-style: none; margin: 8px 28px 12px; padding: 18px 20px; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; border: 1px solid #eef2f7; border-radius: 14px; background: #fbfcfe;
}
.vms-app-steps li { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: #94a3b8; }
.vms-app-step-dot {
  width: 28px; height: 28px; border-radius: 50%; background: #e2e8f0; color: #64748b;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px;
}
.vms-app-steps li.is-done .vms-app-step-dot { background: #7A5DAD; color: #fff; }
.vms-app-steps li.is-current .vms-app-step-dot { box-shadow: 0 0 0 4px rgba(122,93,173,.18); }
.vms-app-steps li.is-done .vms-app-step-label { color: #0f172a; font-weight: 600; }

.vms-app-callout {
  margin: 8px 28px; padding: 16px 18px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0;
}
.vms-app-callout.ok   { background: #f0fdf4; border-color: #bbf7d0; }
.vms-app-callout.warn { background: #fffbeb; border-color: #fde68a; }
.vms-app-callout.err  { background: #fef2f2; border-color: #fecaca; }
.vms-app-callout strong { display: block; font-size: 14px; color: #0f172a; margin-bottom: 4px; }
.vms-app-callout p      { margin: 0 0 10px; font-size: 13px; color: #475569; }
.vms-app-callout .vms-app-btn { margin-top: 4px; }
.vms-app-callout.vms-app-deposit {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
  border-color: #fcd34d;
}
.vms-app-callout.vms-app-deposit strong { color: #7c2d12; font-size: 15px; }

/* Online reservation (configurable) fields */
.vms-app-sec--reservation .vms-res-intro { margin: -2px 0 12px; }
.vms-res-field { margin-bottom: 14px; }
.vms-res-field textarea,
.vms-res-field input[type="text"],
.vms-res-field input[type="email"],
.vms-res-field input[type="tel"],
.vms-res-field input[type="date"],
.vms-res-field select {
  width: 100%;
  margin-top: 4px;
}
.vms-res-guest-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto minmax(28px, auto);
  gap: 8px 10px;
  align-items: end;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
@media (max-width: 560px) {
  .vms-res-guest-row { grid-template-columns: 1fr 1fr; }
}
.vms-res-guest-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: 4px;
  white-space: nowrap;
}
.vms-res-main-label { display: block; margin-bottom: 4px; font-size: 13px; }

/* Admin: reservation form editor */
.vms-res-editor { display: flex; flex-direction: column; gap: 12px; }
.vms-res-editor-row {
  background: var(--sand, #faf8f5);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.vms-res-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px 12px;
  align-items: end;
}
.vms-res-editor-grid label { font-size: 11px; font-weight: 600; color: var(--ink-2); display: block; }
.vms-res-f-req-wrap { display: flex !important; align-items: center; gap: 8px; flex-direction: row !important; padding-bottom: 6px; }

.vms-app-timeline { list-style: none; margin: 0; padding: 0; }
.vms-app-timeline li {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed #eef2f7; font-size: 13px;
}
.vms-app-timeline li:last-child { border-bottom: 0; }
.vms-app-ev-type  { text-transform: capitalize; color: #0f172a; font-weight: 500; }
.vms-app-ev-when  { color: #94a3b8; font-size: 12px; }

/* ── Admin queue + settings ─────────────────────────────────── */
.vms-apps-queue { display: grid; gap: 14px; }
.vms-apps-filters {
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  padding: 12px 0 4px;
}
.vms-apps-filters__tabs {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.vms-apps-filters__tabs button {
  background: #fff; border: 1px solid #e2e8f0; padding: 6px 14px; border-radius: var(--r-lg);
  font: 500 12px/1 'Outfit', sans-serif; color: #475569; cursor: pointer;
}
.vms-apps-filters__tabs button.is-active { background: #7A5DAD; color: #fff; border-color: #7A5DAD; }
.vms-apps-manual {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--border, #e2e8f0);
  background: color-mix(in srgb, var(--sand, #f1f5f9) 55%, #fff 45%);
  max-width: 100%;
}
.vms-apps-manual__lbl {
  font: 600 10px/1.2 'Outfit', sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3, #64748b);
  width: 100%;
}
@media (min-width: 900px) {
  .vms-apps-manual { flex-direction: row; flex-wrap: wrap; }
  .vms-apps-manual__lbl { width: auto; margin-right: 4px; }
}
.vms-apps-manual__sel {
  min-width: 0; flex: 1 1 200px; max-width: 100%; font-size: 13px; padding: 7px 10px; border-radius: 10px;
}
.vms-apps-empty { padding: 40px; text-align: center; color: #94a3b8; background: #fff; border: 1px dashed #e2e8f0; border-radius: 12px; }

.vms-apps-card {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px 18px;
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: center;
  cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.vms-apps-card:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(15,23,42,.15); border-color: #cbd5e1; }
.vms-apps-card-title { font-weight: 600; font-size: 14px; color: #0f172a; }
.vms-apps-card-sub   { font-size: 12.5px; color: #64748b; margin-top: 2px; }
.vms-apps-card-meta  { font-size: 12px; color: #475569; text-align: right; }

.vms-apps-detail {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 20px 22px;
}
.vms-apps-detail h3 { font: 700 18px/1.2 'Outfit', sans-serif; margin: 0 0 6px; color: #0f172a; }
.vms-apps-detail .meta { color: #64748b; font-size: 13px; margin-bottom: 14px; }
.vms-apps-detail dl { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; margin: 0 0 14px; font-size: 13px; }
.vms-apps-detail dt { color: #64748b; }
.vms-apps-detail dd { margin: 0; color: #0f172a; }
.vms-apps-actions { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid #eef2f7; padding-top: 14px; margin-top: 14px; }

/* Settings panel */
.vms-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.vms-settings-grid label { display: flex; flex-direction: column; gap: 6px; font: 500 12px/1 'Outfit', sans-serif; color: #334155; }
.vms-settings-grid input,
.vms-settings-grid select {
  font: 400 14px/1.4 'Outfit', sans-serif; padding: 10px 12px; border: 1px solid #d8dee8; border-radius: 10px;
}
.vms-settings-section {
  background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; padding: 18px 20px; margin-bottom: 14px;
}
.vms-settings-section h3 { font: 600 15px/1.2 'Outfit', sans-serif; color: #0f172a; margin: 0 0 12px; }
.vms-settings-help { font-size: 12px; color: #64748b; margin: 6px 0 12px; }

/* Subsections within the Applications & Screening card. */
.adm-sub {
  padding: 14px 0;
  border-top: 1px dashed #e6e9ef;
}
.adm-sub:first-of-type { border-top: 0; padding-top: 0; }
.adm-sub-title {
  font: 600 13px/1.2 'Outfit', sans-serif;
  color: #0f172a;
  margin: 0 0 4px;
  letter-spacing: .2px;
  text-transform: uppercase;
  font-size: 11.5px;
  color: var(--terra, #b45309);
}
.adm-sub-help { font-size: 12.5px; color: #64748b; margin: 0 0 10px; }
.adm-inline-info {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: #f1f5f9;
  border-left: 3px solid var(--terra-lt, #fcd34d);
  border-radius: 8px;
  font-size: 12.5px;
  color: #334155;
}
.adm-inline-help { font-size: 11.5px; color: #94a3b8; margin-top: 4px; display: block; }

/* Property-editor Applications pane — same look as the settings grid. */
.ep-pane .adm-sub { border-top: 1px dashed #e6e9ef; padding: 14px 0; }
.ep-pane .adm-sub:first-of-type { border-top: 0; padding-top: 0; }
.ep-policy-reset {
  font-size: 11px;
  color: var(--terra, #b45309);
  background: none;
  border: 0;
  padding: 2px 0 0;
  cursor: pointer;
  text-decoration: underline;
  align-self: flex-start;
}
.ep-policy-reset:hover { color: var(--terra-dk, #92400e); }
.ep-policy-inherit { font-size: 11px; color: #94a3b8; margin-top: 4px; }

/* Lease contracts panel — org e-sign mode hint */
.k-lease-mode-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--sky-lt, #d0e4f0);
  border: 1px solid var(--border);
  border-left: 3px solid var(--sky, #4a7fa5);
  border-radius: var(--r-md, 8px);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2, #3d3830);
}
.k-lease-mode-banner kbd {
  display: inline-block;
  font-size: 10px;
  font-family: ui-monospace, monospace;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--white, #fff);
}