:root {
  --bg: #f8f4ec;
  --card: #fffdf8;
  --text: #122943;
  --muted: #66788b;
  --line: #e6dccf;
  --accent: #C9A84C;
  --shadow: 0 20px 50px rgba(18, 41, 67, 0.1);
  /* iOS safe-area fallbacks (0 when unavailable) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  /* overflow-x: hidden is more widely supported than 'clip'; fallback-then-upgrade */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, #fffdfa, #f7f2ea);
  color: var(--text);
  overflow-x: hidden;
  position: relative;
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* Global word-break safety — prevent any text from causing horizontal scroll */
h1, h2, h3, h4, p, span, div, td, li, a, label, button {
  overflow-wrap: break-word;
  word-wrap: break-word;
}
/* Make all images safe by default */
img, video, iframe {
  max-width: 100%;
  height: auto;
}
/* Larger tap targets on touch devices */
button, .btn, .tab, .lang, .nav a, .contact-card, .footer-admin-link {
  touch-action: manipulation;
}
body.rtl {
  direction: rtl;
}
a {
  text-decoration: none;
  color: inherit;
}
button,
input,
select,
textarea {
  font: inherit;
}
img {
  max-width: 100%;
}
.page-watermark {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
  background: url("images/flora_logo_transparent.png") center 12%/680px auto no-repeat;
  mix-blend-mode: multiply;
}
.wrap {
  max-width: 1280px;
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 22px;
  position: relative;
  z-index: 1;
}
.header {
  position: sticky;
  top: 0;
  /* v18.7 — bumped from 20 → 200 so the language dropdown renders
     above the hero photo and any other on-page content. */
  z-index: 200;
  background: rgba(15, 30, 46, 0.97);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(246, 162, 87, 0.15);
  /* v18.7 — overflow visible so the language dropdown can poke below the header. */
  overflow: visible;
  max-width: 100%;
  padding-top: var(--safe-top);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}
.header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 22px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.brand img {
  height: 52px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08));
}
.brand-text strong {
  display: block;
  font-size: 1.12rem;
  color: #fff;
}
.brand-text span {
  display: block;
  color: rgba(255,255,255,0.55);
  font-size: 0.9rem;
}
.nav {
  display: flex;
  gap: 22px;
  align-items: center;
  white-space: nowrap;
  overflow: auto;
}
.nav a {
  font-weight: 500;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.03em;
}
.nav a:hover { color: #C9A84C; }
.langs {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}
.lang {
  border: 1px solid rgba(246,162,87,0.25);
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
}
.lang.active {
  background: #C9A84C;
  border-color: #C9A84C;
  color: #fff;
}

/* v18.6 — Language dropdown: collapses 7 pills into a single trigger
   button + popup menu. Saves header real estate, especially on mobile. */
.langs.lang-dropdown {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  overflow: visible !important;
  z-index: 60;
}
.lang-flag {
  width: 18px;
  height: 13px;
  object-fit: cover;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.lang-label { font-weight: 700; }
.lang-trigger {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(246,162,87,0.35);
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}
.lang-trigger:hover { background: rgba(255,255,255,0.14); }
.lang-caret { font-size: 0.7em; opacity: 0.85; }
.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 110px;
  background: rgba(15,30,46,0.97);
  border: 1px solid rgba(201,168,76,0.45);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.lang-menu[hidden] { display: none; }
.lang-menu .lang {
  border: 0;
  background: transparent;
  text-align: left;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  display: block;
}
.lang-menu .lang:hover { background: rgba(201,168,76,0.18); color: #fff; }
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  overflow: hidden;
  max-width: 100%;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-img, url("/images/rooms/%D0%A1%D1%82%D0%B0%D1%8F%2041-1-2/0931d4fa02457cc211014acdd5fa0368_3840x3840f_SF_45.jpg"))
    center 45%/cover no-repeat;
  /* SF_45: golden-light room with bistro table by window — warmest, most aspirational shot */
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* soft left→right gradient so text stays readable without darkening the photo */
  background:
    linear-gradient(
      90deg,
      rgba(18, 41, 67, 0.38) 0%,
      rgba(18, 41, 67, 0.18) 40%,
      rgba(18, 41, 67, 0.00) 75%
    );
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 34px;
  align-items: center;
  padding: 44px 22px 48px;
}
.hero-left,
.hero-right {
  position: relative;
  z-index: 1;
}
.hero-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 22px;
  border-radius: 22px;
  background: rgba(255, 251, 245, 0.82);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.hero-logo img {
  height: 86px;
  width: auto;
  display: block;
}
.eyebrow {
  display: inline-flex;
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(15,30,46,0.55);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 2px solid rgba(201,168,76,0.9);
  font-weight: 800;
  color: #E2C97E;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-size: 0.85rem;
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  position: relative;
  z-index: 2;
}
.hero h1 {
  font-size: clamp(2.2rem, 4.2vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: #fff;
  text-shadow: 0 6px 22px rgba(0, 0, 0, 0.5);
  max-width: 640px;
}
.hero p {
  font-size: 1.18rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.95);
  max-width: 640px;
  margin: 0 0 26px;
  text-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}
.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.btn {
  border: none;
  border-radius: 12px;
  padding: 14px 22px;
  font-weight: 500;
  cursor: pointer;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  transition: opacity 0.15s;
}
.btn:hover { opacity: 0.88; }
.btn-primary {
  background: #0f1e2e;
  color: #C9A84C;
}
.btn-white {
  background: #fff;
  color: var(--text);
}
.btn-soft {
  background: transparent;
  border: 0.5px solid rgba(15,30,46,0.18);
  color: #0f1e2e;
}
.value-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  /* v13.3.1 — bump the clearance above the three stat cards so the gold
     "Book direct" strip's drop-shadow no longer bleeds into the card tops.
     28px was too tight (shadow + border gave the illusion of overlap). */
  margin-top: 44px;
}
.value-card {
  /* Defaults are consumed via CSS custom properties so the admin panel
     can recolor a single balloon independently via applyThemeAndSections. */
  padding: 20px;
  border-radius: 22px;
  background: var(--vc-bg, rgba(255, 251, 245, 0.18));
  color: var(--vc-color, #fff);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid var(--vc-border, rgba(255, 255, 255, 0.24));
}
.value-card--1 { background: var(--vc1-bg, var(--vc-bg, rgba(255,251,245,0.18))); color: var(--vc1-color, #fff); border-color: var(--vc1-border, rgba(255,255,255,0.24)); }
.value-card--2 { background: var(--vc2-bg, #ffffff);                              color: var(--vc2-color, #122943); border-color: var(--vc2-border, rgba(18,41,67,0.18)); }
.value-card--3 { background: var(--vc3-bg, var(--vc-bg, rgba(255,251,245,0.18))); color: var(--vc3-color, #fff); border-color: var(--vc3-border, rgba(255,255,255,0.24)); }
.value-card strong {
  display: block;
  font-size: 2rem;
  margin-bottom: 6px;
  color: inherit;
}
.value-card span {
  color: inherit;
  opacity: 0.92;
  line-height: 1.45;
}
.booking-card {
  background: rgba(255, 251, 245, 0.99);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  padding: 22px;
  border-radius: 30px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.booking-top small {
  display: block;
  color: #C9A84C;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-size: 0.75rem;
}
.booking-top h2 {
  margin: 0;
  font-size: 2.05rem;
  line-height: 1.05;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field label {
  font-weight: 700;
  color: #405468;
}
.booking-card .field label {
  color: #C9A84C;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.field input,
.field select,
.field textarea {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  min-height: 54px;
}
.field textarea {
  min-height: 104px;
  resize: vertical;
}
.summary {
  margin-top: 14px;
  padding: 16px;
  border-radius: 22px;
  background: #fff8ee;
  border: 1px solid #efdcc4;
}
.summary-title {
  font-size: 1.12rem;
  font-weight: 900;
  margin: 0 0 6px;
  color: #122943;
}
.summary-sub {
  color: #243a52 !important;
  font-size: 0.9rem !important;
  line-height: 1.6;
  margin: 0 0 12px;
  font-weight: 500;
}
.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.summary-box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
}
.summary-box > div:first-child {
  color: #C9A84C;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.summary-box strong {
  display: block;
  font-size: 1.35rem;
}
.section {
  padding: 82px 0;
  overflow: hidden;
}
.section-head {
  margin-bottom: 28px;
}
.kicker {
  color: #C9A84C;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-size: 0.78rem;
}
.section-head h2 {
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  color: #0f1e2e;
  font-weight: 500;
}
.section-head p {
  max-width: 840px;
  color: #4a5e6e;
  font-size: 1.08rem;
  line-height: 1.8;
  margin: 0;
}
.tabs {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.tab {
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid rgba(15,30,46,0.15);
  background: #fff;
  font-weight: 500;
  cursor: pointer;
  font-size: 0.9rem;
  color: #4a5e6e;
  letter-spacing: 0.02em;
}
.tab.active {
  background: #0f1e2e;
  border-color: #0f1e2e;
  color: #C9A84C;
}
.room-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
/* Rooms carousel arrows — hidden on desktop, shown on mobile via media query */
.rooms-carousel-wrap { position: relative; }
.rooms-arrow { display: none; }
.room-card {
  background: #fff;
  border: 0.5px solid rgba(15,30,46,0.1);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.room-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(15,30,46,0.12);
}
.room-media {
  position: relative;
  height: 260px;
  overflow: hidden;
}
.room-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s;
}
.room-card:hover .room-media img {
  transform: scale(1.03);
}
.room-badges {
  position: absolute;
  inset: 16px 16px auto 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.badge {
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(15, 30, 46, 0.88);
  border: none;
  font-weight: 500;
  font-size: 0.78rem;
  color: #C9A84C;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.price-badge {
  margin-left: auto;
  background: #C9A84C;
  color: #fff;
  border: none;
  font-size: 0.85rem;
  padding: 6px 12px;
}
/* v13 — alternating white balloon for room cards that carry 2+ feature tags.
   Applied by app.js on every second .badge (excluding .price-badge). */
.badge--alt {
  background: #ffffff;
  color: #0f1e2e;
  border: 1px solid rgba(18,41,67,0.15);
  font-weight: 600;
}
.room-body {
  padding: 20px;
}
.room-body h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 500;
  color: #0f1e2e;
  letter-spacing: 0.01em;
}
.room-body p {
  margin: 0 0 12px;
  color: #4a5e6e !important;
  line-height: 1.65;
  font-size: 0.92rem;
}
.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 16px 0;
}
/* v12.1 — alternate-capacity pricing row on room cards */
.subcap-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin: 6px 0 14px;
  background: rgba(201,168,76,0.08);
  border: 1px dashed rgba(201,168,76,0.55);
  border-radius: 12px;
  font-size: 0.86rem;
  color: #2a3a4f;
}
.subcap-opt { white-space: nowrap; }
.subcap-opt strong { color: #122943; margin-right: 4px; }
.subcap-sep { color: rgba(201,168,76,0.85); font-weight: 700; }

.chip {
  /* Admin-tunable via --chip-bg / --chip-color / --chip-size / --chip-family */
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--chip-bg, rgba(15,30,46,0.05));
  border: 0.5px solid var(--chip-border, rgba(15,30,46,0.12));
  color: var(--chip-color, #405468);
  font-family: var(--chip-family, inherit);
  font-weight: 400;
  font-size: var(--chip-size, 0.78rem);
}
.room-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
/* v1.6 — small text-link to /{lang}/rooms/{slug}/ for crawlers + power users.
   Subtle so it doesn't compete with the primary "Check availability" CTA. */
.room-detail-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 11.5px;
  letter-spacing: 0.4px;
  color: var(--muted, #66788b);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.room-detail-link:hover {
  color: var(--accent, #C9A84C);
  border-color: var(--accent, #C9A84C);
}
.reviews-shell {
  background: #0f1e2e;
  border: none;
  border-radius: 28px;
  padding: 32px;
}
.review-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.review-stat {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 18px;
  background: rgba(255,255,255,0.05);
}
.review-stat strong {
  display: block;
  font-size: 1.8rem;
  margin-bottom: 4px;
  color: #C9A84C;
}
.review-stat span {
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
  font-size: 0.85rem;
}
.carousel {
  position: relative;
  padding: 10px 52px 0;
}
.carousel-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.review-card {
  background: rgba(255,255,255,0.05);
  border: 0.5px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 20px;
  min-height: 290px;
  display: flex;
  flex-direction: column;
}
.review-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(246,162,87,0.15);
  border: 1px solid #efdcc4;
  font-weight: 900;
  color: #8a5417;
  overflow: hidden;
  flex: none;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-name {
  font-size: 1.18rem;
  font-weight: 900;
  color: #fff;
}
.review-meta {
  color: rgba(255,255,255,0.55);
  font-size: 0.92rem;
  line-height: 1.4;
}
.score {
  padding: 7px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #E2C97E);
  color: #fff;
  font-weight: 900;
}
.stars {
  color: #C9A84C;
  letter-spacing: 2px;
  margin: 4px 0 8px;
}
.review-quote {
  font-weight: 800;
  font-size: 1.06rem;
  line-height: 1.65;
  flex: 1;
  margin: 0 0 14px;
  color: rgba(255,255,255,0.88);
}
.review-trip {
  color: #4a5e6e;
  font-weight: 700;
  line-height: 1.45;
}
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid #efdcc4;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  box-shadow: var(--shadow);
}
.arrow.left {
  left: 0;
}
.arrow.right {
  right: 0;
}
.map-card {
  overflow: hidden;
  border-radius: 32px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.map-card iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}
.footer {
  padding: 34px 0 60px;
  color: #4a5e6e;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  /* Extra top/bottom fallbacks for very old browsers */
  top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(10, 18, 32, 0.54);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 60;
  padding: calc(18px + var(--safe-top)) calc(18px + var(--safe-right))
           calc(18px + var(--safe-bottom)) calc(18px + var(--safe-left));
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.modal-backdrop.open {
  display: flex;
}
.modal-backdrop.open > .modal,
.modal-backdrop.open > .avail-modal {
  margin: auto;
}
.modal {
  max-width: 1280px;
  width: min(96vw, 1280px);
  background: #fffdfa;
  border-radius: 30px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 2rem;
  z-index: 2;
}
.gallery-layout {
  display: grid;
  grid-template-columns: 1.6fr 0.85fr;
}
.gallery-main {
  position: relative;
  background: #f4efe6;
}
.gallery-main img {
  width: 100%;
  height: 100%;
  min-height: min(75vh, 700px);
  max-height: 82vh;
  object-fit: contain;
  background: #0d1520;
  display: block;
}
.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 12px;
  background: #fff;
}
.gallery-thumbs img {
  width: 100%;
  height: 88px;
  object-fit: cover;
  border-radius: 12px;
  cursor: pointer;
  border: 2px solid transparent;
}
.gallery-thumbs img.active {
  border-color: #efae4f;
}
.gallery-panel {
  padding: 30px 24px;
}
.gallery-panel h3 {
  font-size: 2.2rem;
  margin: 0 0 8px;
}
.gallery-panel p {
  color: #4a5e6e;
  line-height: 1.7;
}
.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.7rem;
  box-shadow: var(--shadow);
}
.gallery-arrow.prev {
  left: 18px;
}
.gallery-arrow.next {
  right: 18px;
}
.reserve-layout {
  padding: 26px;
}
.extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.check input {
  margin-top: 4px;
}
@media (max-width: 1100px) {
  .hero .wrap,
  .gallery-layout {
    grid-template-columns: 1fr;
  }
  .room-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .carousel-track {
    grid-template-columns: 1fr 1fr;
  }
  .review-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .header .wrap {
    flex-wrap: wrap;
    /* v18.7 — must stay visible so the language dropdown menu can
       extend below the header. Was hidden, which clipped the menu. */
    overflow: visible;
    gap: 10px;
  }
  /* v18.8 — brand alone on row 1; nav + langs share row 2 on same line. */
  .brand { flex: 1 0 100%; order: 1; }
  .nav {
    order: 2;
    width: auto;
    flex: 1 1 auto;
    justify-content: flex-start;
    gap: 14px;
    overflow: visible;
  }
  .nav a { font-size: 0.78rem; letter-spacing: 0.02em; }
  .langs {
    order: 3;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: 5px;
    max-width: none;
    overflow: visible;
    margin-left: auto;
  }
  .lang {
    padding: 5px 9px;
    font-size: 0.76rem;
    flex-shrink: 0;
  }
  /* Compact language dropdown trigger so it matches nav text size */
  .lang-trigger {
    font-size: 0.78rem;
    padding: 4px 9px;
    gap: 4px;
  }
  .lang-flag { width: 16px; height: 12px; }
  /* Hide the "Директна резервация · без посредници" subtitle under the
     Apartments Flora brand lockup — user wants only the brand name. */
  .brand-text span { display: none !important; }
  .hero {
    min-height: auto;
  }
  .hero::before {
    /* v18.5 — user-picked Стая 1-3а #20 (bedroom with bouquet on bed). */
    background: var(--hero-img-mobile,
      url("/images/rooms/%D0%A1%D1%82%D0%B0%D1%8F%201-3%D0%B0/de33ca961ac65149860707b0cfc9173d_3840x3840f_SF_16.jpg"))
      center center/cover no-repeat;
    transform: none;
    filter: brightness(0.85);
  }
  .hero {
    /* Soft cream framing — no longer a flat navy gradient. */
    background: #faf6ee;
  }
  .hero .wrap {
    grid-template-columns: 1fr;
    padding-top: 28px;
  }
  .hero-logo img {
    height: 80px;
  }
  .hero h1 {
    font-size: clamp(2.5rem, 14vw, 4rem);
  }
  .value-row,
  .summary-grid,
  .form-grid,
  .room-grid,
  .carousel-track,
  .review-stats,
  .extras {
    grid-template-columns: 1fr;
  }
  .section {
    padding: 58px 0;
  }
  .carousel {
    padding: 0;
  }
  .arrow {
    display: none;
  }
  .gallery-main img {
    min-height: 280px;
  }
  .gallery-thumbs {
    grid-template-columns: repeat(3, 1fr);
  }
  .modal {
    max-height: 92vh;
    overflow: auto;
  }
  .room-actions {
    flex-direction: column;
  }
}

/* ── NEW SECTIONS ──────────────────────────────────────────────── */
.section-alt {
  background: linear-gradient(180deg,#f2ece0,#f8f4ec);
}
.contact-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
  margin-top: 32px;
}
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform .18s,box-shadow .18s;
  color: var(--text);
  text-decoration: none;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 28px 60px rgba(18,41,67,.14); }
.contact-icon { font-size: 2.4rem; line-height:1; }
.contact-card strong { font-size: 1.05rem; }
.contact-card span { color: #4a5e6e; font-size: .9rem; }
.footer {
  background: var(--text);
  color: rgba(255,255,255,.6);
  padding: 32px 0;
}
.footer .wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.footer-logo { height: 38px; opacity:.45; filter:brightness(10); }
.footer-admin-link {
  margin-left: auto;
  font-size: .82rem;
  opacity: .35;
  color: #fff;
  text-decoration: none;
  transition: opacity .18s;
}
.footer-admin-link:hover { opacity: .75; }
.modal-wide { max-width: 960px; }
#beds24Container iframe { display: block; }

/* ── CONTACT RESPONSIVE ─ */
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ── E1 — NEIGHBORHOOD AMENITIES (luxury typography, no icons) ─ */
.amenities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 32px;
}
.amenity-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 30px 16px 28px;
  background: #fffdf8;
  border: 1px solid rgba(18, 41, 67, 0.08);
  border-radius: 4px;   /* sharp corners read more luxe than soft pillows */
  box-shadow: 0 2px 8px rgba(18, 41, 67, 0.04);
  text-align: center;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  min-height: 140px;
}
.amenity-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(18, 41, 67, 0.09);
  border-color: rgba(201, 168, 76, 0.55);
}
.amenity-name {
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #0f1e2e;
  line-height: 1.2;
}
/* Short gold hairline under the name — single visual accent per card. */
.amenity-rule {
  width: 32px;
  height: 1px;
  background: #C9A84C;
  opacity: 0.85;
  margin: 2px 0;
}
.amenity-mins {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a6640;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .amenities-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .amenity-card { padding: 24px 12px 22px; min-height: 120px; }
  .amenity-name { font-size: 1.18rem; }
  .amenity-mins { font-size: 0.68rem; letter-spacing: 0.07em; }
}
@media (max-width: 480px) {
  .amenities-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .amenity-card { padding: 20px 10px 20px; min-height: 110px; }
  .amenity-name { font-size: 1.05rem; }
}


/* ── v13.6 CONVERSION BADGES — navy/gold palette ─────────────────── */
/* Hot: deep burgundy — premium urgency, subtle pulse */
.urgency-tag.urgency--hot {
  background: linear-gradient(135deg, #6B2737, #8B3A4A);
  color: #F2E6D9;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 5px 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  animation: urgencyPulse 2.5s ease-in-out infinite;
}
/* Fire: warm bronze — sits in the gold accent family */
.urgency-tag.urgency--fire {
  background: linear-gradient(135deg, #7A5C2E, #A67C3D);
  color: #FFF8EE;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 5px 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* Demand: navy + gold — the core site identity */
.urgency-tag.urgency--demand {
  background: #0f1e2e;
  color: #C9A84C;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 5px 12px;
  border: 1px solid rgba(201,168,76,0.4);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* Family: cream card with navy text — soft, trustworthy */
.urgency-tag.urgency--family {
  background: rgba(248,244,236,0.96);
  color: #122943;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 5px 12px;
  border: 1px solid rgba(18,41,67,0.2);
  letter-spacing: 0.04em;
}
/* Value: muted sage — nature-coded value signal */
.urgency-tag.urgency--value {
  background: linear-gradient(135deg, #3D6B5E, #4A7D6E);
  color: #F2F8F5;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 5px 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
@keyframes urgencyPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(107,39,55,0.25); }
  50% { box-shadow: 0 2px 14px rgba(107,39,55,0.5); }
}

/* Social proof line under room title */
.social-proof-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #8B3A4A;
  margin-bottom: 6px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.sp-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #C9A84C;
  border-radius: 50%;
  flex-shrink: 0;
  animation: spDotPulse 2s ease-in-out infinite;
}
@keyframes spDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.75); }
}

/* Recent booking line */
.recent-booking-line {
  font-size: 0.74rem;
  color: #7a5300;
  background: #fff8ee;
  border: 1px dashed rgba(201,168,76,0.55);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 10px;
  text-align: center;
  font-weight: 600;
}

/* ── AVAILABILITY CALENDAR ─────────────────────────────────────────────── */
.avail-modal { max-width: 1000px; padding: 0; border-radius: 24px; }
.avail-header {
  background: var(--text);
  color: #fff;
  padding: 24px 28px 20px;
  border-radius: 24px 24px 0 0;
}
.avail-header h2 { margin: 0 0 6px; font-size: 1.5rem; color: #fff; }
.avail-header p  { margin: 0; font-size: 1rem; color: #C9A84C; opacity: 1; font-weight: 500; line-height: 1.5; text-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.avail-body { padding: 24px 28px; }
.avail-calendars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.avail-cal-month { }
.avail-cal-title {
  text-align: center;
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.avail-cal-title button {
  background: none;
  border: 1px solid var(--line);
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.avail-cal-title button:hover { background: var(--bg); }
.avail-cal-grid {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 3px;
}
.avail-day-header {
  text-align: center;
  font-size: .7rem;
  font-weight: 700;
  color: #4a5e6e;
  padding: 4px 0;
  text-transform: uppercase;
}
.avail-day {
  text-align: center;
  padding: 12px 4px; /* v12.1: bigger hit target so red blocked days are clearly visible */
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
  position: relative;
  min-height: 42px;
  line-height: 1.15;
}
.avail-day:hover:not(.avail-day-empty):not(.avail-day-past):not(.avail-day-blocked) { background: #fdf6e8; color: var(--text); }
.avail-day-empty { cursor: default; }
.avail-day-past  { color: #ccc; cursor: default; }
/* v12.1 — clearly mark blocked (already booked) dates in red */
.avail-day-blocked {
  background: rgba(220, 53, 69, 0.12);
  color: #c0392b;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: rgba(192, 57, 43, 0.7);
  font-weight: 700;
}
.avail-day-blocked:hover { background: rgba(220, 53, 69, 0.18); }
.avail-day-checkin, .avail-day-checkout {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 800;
}
.avail-day-inrange {
  background: #fdf6e8;
  border-radius: 0;
}
.avail-day-checkin  { border-radius: 8px 0 0 8px; }
.avail-day-checkout { border-radius: 0 8px 8px 0; }
.avail-day-checkin.avail-day-checkout { border-radius: 8px; }
.avail-summary-bar {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.avail-summary-bar .asb-item { display: flex; flex-direction: column; gap: 2px; }
.avail-summary-bar .asb-label { font-size: .72rem; font-weight: 700; color: #4a5e6e; text-transform: uppercase; }
.avail-summary-bar .asb-val   { font-size: 1rem; font-weight: 800; color: var(--text); }
.avail-summary-bar .asb-sep   { width: 1px; height: 36px; background: var(--line); }
.avail-rooms { display: flex; flex-direction: column; gap: 12px; }
.avail-room-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: box-shadow .18s;
}
.avail-room-row:hover { box-shadow: 0 8px 28px rgba(18,41,67,.1); }
.avail-room-thumb {
  width: 80px; height: 60px;
  object-fit: cover;
  border-radius: 10px;
}
.avail-room-info h4 { font-size: .95rem; font-weight: 800; margin: 0 0 3px; }
.avail-room-info p  { font-size: .78rem; color: #4a5e6e; margin: 0; line-height: 1.4; }
.avail-room-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.avail-room-chips span {
  font-size: .65rem;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #4a5e6e;
}
.avail-price { text-align: right; }
.avail-price .total { font-size: 1.2rem; font-weight: 900; color: var(--text); }
.avail-price .per-night { font-size: .72rem; color: #4a5e6e; }
.avail-btn {
  background: linear-gradient(135deg, var(--accent), #E2C97E);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 18px;
  font-weight: 800;
  font-size: .85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .18s;
}
.avail-btn:hover { opacity: .88; }
/* v13 — big "Use these dates" confirm button when the modal is in picker mode */
.avail-confirm-wrap {
  display: flex;
  justify-content: center;
  padding: 10px 0 8px;
}
.avail-btn.avail-btn-big {
  padding: 16px 36px;
  font-size: 1.05rem;
  border-radius: 14px;
  min-width: 280px;
  box-shadow: 0 6px 22px rgba(201,168,76,.35);
}
.avail-placeholder {
  text-align: center;
  padding: 32px;
  color: #4a5e6e;
  font-size: .95rem;
}
.avail-placeholder .avail-big-icon { font-size: 2.5rem; margin-bottom: 10px; }
.avail-guest-row { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.avail-guest-row label { font-size: .82rem; font-weight: 700; color: #4a5e6e; }
.avail-guest-row select {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: .88rem;
}
@media (max-width: 700px) {
  .avail-calendars { grid-template-columns: 1fr; }
  .avail-room-row { grid-template-columns: 60px 1fr; }
  .avail-price, .avail-room-row .avail-btn { display: none; }
  /* v13 — big confirm button must stay visible on mobile */
  .avail-btn.avail-btn-big { display: inline-flex !important; width: 100%; min-width: 0; }
  .avail-day { min-height: 48px; padding: 14px 2px; font-size: 1rem; }
}

/* Gallery modal full height fix */
.modal-backdrop .modal { display: flex; flex-direction: column; }
.gallery-layout-new { flex: 1; display: flex; flex-direction: column; min-height: 0; }
/* Availability modal responsive */
@media (max-width: 760px) {
  .avail-modal { border-radius: 0; max-height: 100dvh; height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .avail-body { padding: 16px; }
}

/* ── AVAILABILITY BROWSER MODAL ──────────────────────────────────── */
.avail-modal { max-width: 1060px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.avail-header { padding: 28px 28px 0; flex-shrink: 0; }
.avail-header h2 { font-size: 1.8rem; font-weight: 800; margin: 0 0 6px; color: #fff; }
.avail-header p {
  color: #C9A84C;
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 18px;
  opacity: 1;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.avail-filters { display: flex; gap: 12px; flex-wrap: wrap; padding: 0 28px 16px; flex-shrink: 0; border-bottom: 1px solid var(--line); }
.avail-filters .field { flex: 1; min-width: 140px; }
.avail-filters .field label { font-size: .75rem; font-weight: 700; color: #405468; display: block; margin-bottom: 4px; }
.avail-filters .field input,
.avail-filters .field select { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: .85rem; background: #fff; }
.avail-body { padding: 20px 28px; overflow-y: auto; flex: 1; }
.avail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.avail-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: transform .18s, box-shadow .18s; cursor: pointer; }
.avail-card:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(18,41,67,.12); }
.avail-card-img { height: 150px; overflow: hidden; position: relative; }
.avail-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.avail-card:hover .avail-card-img img { transform: scale(1.04); }
.avail-card-badges { position: absolute; top: 7px; left: 7px; display: flex; gap: 4px; flex-wrap: wrap; }
.avail-card-body { padding: 14px; }
.avail-card-body h3 { font-size: .95rem; font-weight: 800; margin: 0 0 4px; color: #122943; }
.avail-card-body p { font-size: .72rem; color: #4a5e6e !important; line-height: 1.55; margin: 0 0 10px; }
.avail-card-footer { display: flex; align-items: center; justify-content: space-between; }
.avail-price { font-size: 1.1rem; font-weight: 800; color: #122943; }
.avail-price small { font-size: .7rem; font-weight: 400; color: #66788b; display: block; }
.avail-book-btn { background: linear-gradient(135deg, #C9A84C, #E2C97E); color: #fff; border: none; border-radius: 10px; padding: 8px 14px; font-weight: 700; font-size: .78rem; cursor: pointer; }
.avail-no-rooms { text-align: center; padding: 48px 20px; color: #66788b; }
.avail-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.avail-chip { padding: 2px 7px; background: #f8f4ec; border: 1px solid #e6dccf; border-radius: 999px; font-size: .6rem; color: #122943; }
@media (max-width: 760px) { .avail-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .avail-grid { grid-template-columns: 1fr; } .avail-filters { flex-direction: column; } }

#galleryModal .modal { width: min(98vw, 1440px); max-width: 1440px; }
#galleryModal .gallery-main { background: #0d1520; }

/* ── FULLSCREEN GALLERY (no side panel) ─────────────────────────── */
.gallery-fullscreen {
  position: fixed;
  inset: 0;
  background: #0a0f16;
  display: flex;
  flex-direction: column;
  z-index: 1000;
}
.gfs-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(to bottom, rgba(0,0,0,.75), transparent);
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
}
.gfs-info { display: flex; align-items: center; gap: 14px; }
.gfs-info h3 { color: #fff; font-size: 1.1rem; font-weight: 700; margin: 0; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.gfs-counter { color: rgba(255,255,255,.6); font-size: .85rem; }
.gfs-actions { display: flex; align-items: center; gap: 10px; }
.gfs-btn-reserve {
  background: linear-gradient(135deg,#C9A84C,#E2C97E);
  color: #fff; border: none; border-radius: 10px;
  padding: 8px 16px; font-weight: 700; font-size: .82rem; cursor: pointer;
}
.gfs-close {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 1.6rem; cursor: pointer;
  display: grid; place-items: center; line-height: 1;
}
.gfs-close:hover { background: rgba(255,255,255,.28); }
.gfs-main {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.gfs-main img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  user-select: none;
}
.gfs-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff; font-size: 1.8rem;
  cursor: pointer; display: grid; place-items: center;
  transition: background .15s; z-index: 2; line-height: 1;
}
.gfs-arrow:hover { background: rgba(255,255,255,.3); }
.gfs-prev { left: 16px; }
.gfs-next { right: 16px; }
.gfs-thumbs {
  display: flex; gap: 6px;
  padding: 10px 16px;
  background: rgba(0,0,0,.5);
  overflow-x: auto;
  justify-content: center;
  flex-shrink: 0;
}
.gfs-thumbs img {
  height: 60px; width: 90px;
  object-fit: cover; border-radius: 7px; cursor: pointer;
  border: 2px solid transparent; opacity: .65;
  transition: opacity .15s, border-color .15s; flex-shrink: 0;
}
.gfs-thumbs img.active,
.gfs-thumbs img:hover { opacity: 1; border-color: #C9A84C; }
/* Keep old gallery CSS intact for any remnant references */
#galleryModal .modal-backdrop > .gallery-fullscreen { z-index: 9999; }

/* ── NEW ELEMENTS ──────────────────────────────────────────── */

/* WhatsApp CTA button */
.btn-whatsapp {
  background: #25D366;
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn-whatsapp::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.66 1.438 5.168L2 22l4.985-1.418A9.96 9.96 0 0 0 12 22c5.523 0 10-4.477 10-10S17.523 2 12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Viber CTA button — same shape as the WhatsApp button, Viber purple. */
.btn-viber {
  background: #7360F2;
  color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.btn-viber::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M11.4 0C9.473.028 5.333.344 3.018 2.467 1.298 4.187.696 6.7.633 9.823c-.063 3.122-.142 8.972 5.498 10.554h.005l-.004 2.42s-.036.978.61 1.18c.776.243 1.235-.503 1.978-1.302.408-.439.97-1.087 1.395-1.583 3.85.323 6.808-.418 7.144-.527.778-.252 5.183-.817 5.9-6.665.737-6.025-.36-9.832-2.343-11.55l-.013-.005C20.205.751 17.554.066 14.583.012c0 0-.221-.014-.728-.012Zm.118 1.701c.428-.003.612.009.612.009 2.518.041 4.667.59 6.3 1.962 1.677 1.43 2.535 4.567 1.92 9.605-.594 4.876-3.988 5.32-4.71 5.532-.275.085-2.83.738-6.078.535 0 0-2.42 2.927-3.176 3.69-.118.123-.255.165-.346.144-.128-.029-.164-.183-.163-.405l.022-3.989c-4.778-1.32-4.5-6.301-4.448-8.913.054-2.612.547-4.745 1.99-6.176 1.949-1.756 5.452-2.022 7.073-2.058 0 0 .14-.011.567-.013ZM11.31 4.293a.469.469 0 0 0-.466.479c0 .256.205.47.466.471a4.733 4.733 0 0 1 3.398 1.408c.951.99 1.41 2.272 1.413 3.92 0 .253.21.46.467.46h.005a.467.467 0 0 0 .466-.466 6.31 6.31 0 0 0-1.671-4.575 5.66 5.66 0 0 0-4.078-1.697Zm-3.846.844a.95.95 0 0 0-.6.182H6.85c-.413.253-.794.65-.997.984l-.062.114-.072.221c-.225.59-.234 1.03-.013 1.65.062.179.13.355.205.527.443 1.111 1.105 2.246 1.989 3.41a16.02 16.02 0 0 0 1.998 1.972 13.7 13.7 0 0 0 3.444 2.04l.027.011a3.99 3.99 0 0 0 .445.165l.054.018c.166.061.32.107.471.137.55.117.92.061 1.234-.106l.024-.011c.115-.062.226-.137.328-.222.198-.17.327-.328.428-.484.062-.097.117-.198.165-.302.057-.131.077-.282.04-.428a.752.752 0 0 0-.314-.43c-.166-.114-.347-.215-.527-.314-.18-.098-.36-.197-.54-.295a4.31 4.31 0 0 1-.4-.247.872.872 0 0 0-.448-.158.75.75 0 0 0-.534.271l-.18.219c-.115.139-.231.273-.356.401-.052.054-.117.107-.18.146a.45.45 0 0 1-.234.061.557.557 0 0 1-.25-.061c-.156-.072-.306-.157-.448-.252-.51-.34-.987-.732-1.413-1.165-.115-.122-.232-.244-.337-.376a7.18 7.18 0 0 1-.876-1.28 1.59 1.59 0 0 1-.137-.343.408.408 0 0 1 .037-.297c.067-.121.146-.234.234-.34l.215-.225a.762.762 0 0 0 .254-.527.886.886 0 0 0-.158-.456 4.46 4.46 0 0 1-.247-.4c-.098-.18-.196-.36-.295-.54a13.18 13.18 0 0 0-.303-.527.738.738 0 0 0-.43-.314c-.061-.012-.123-.018-.184-.018zM11.36 5.844a.467.467 0 0 0-.456.482c0 .258.207.467.466.467 1.073 0 1.864.272 2.43.79.567.518.866 1.255.866 2.227 0 .258.21.466.467.466.257 0 .467-.21.467-.467 0-1.207-.394-2.23-1.171-2.939-.776-.71-1.832-1.026-3.058-1.026zm.062 1.547a.467.467 0 0 0-.005.933c.5.005.84.144 1.067.355.227.211.367.541.367 1.024 0 .258.21.467.467.467.258 0 .467-.21.467-.467 0-.652-.207-1.279-.674-1.706-.466-.43-1.117-.61-1.689-.606z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Book-direct strip — POP VERSION (user requested prominence) */
.direct-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  /* v13.3.1 — small explicit bottom margin so any y-offset on the
     drop-shadow never visually meets the cards below. */
  margin-bottom: 6px;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(201,168,76,0.42), rgba(201,168,76,0.28));
  border: 2.5px solid #C9A84C;
  border-radius: 18px;
  font-size: 1.08rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
  /* v13.3.1 — softer, shorter drop-shadow (was 12px/36px — bled into
     the value-row below). New shadow is contained around the strip. */
  box-shadow: 0 6px 18px rgba(201,168,76,0.20), 0 0 0 1px rgba(201,168,76,0.3) inset;
}
.direct-badge {
  background: #C9A84C;
  color: #0f1e2e;
  font-size: 0.92rem;
  font-weight: 900;
  padding: 7px 16px;
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 12px rgba(201,168,76,0.5);
}

/* Mini review strip — POP VERSION (user requested prominence) */
.mini-reviews {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 14px;
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(15,30,46,0.55), rgba(15,30,46,0.35));
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border: 2.5px solid #C9A84C;
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.28), 0 0 0 1px rgba(201,168,76,0.3) inset;
}
.mini-review-score {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.mini-score {
  font-size: 2.4rem;
  font-weight: 800;
  color: #C9A84C;
  line-height: 1;
}
.mini-stars {
  color: #C9A84C;
  font-size: 0.85rem;
  letter-spacing: 2px;
}
.mini-review-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.6);
  margin-top: 3px;
}
.mini-review-quote {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.82);
  font-style: italic;
  line-height: 1.55;
  border-left: 2.5px solid rgba(201,168,76,0.6);
  padding-left: 14px;
}

/* v1.2 — Room capacity hint in the reserve modal header. Small and
   subdued so it reads as a clarifying chip, not a warning. */
.reserve-capacity-hint {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #b8860b;
  margin: -4px 0 8px;
  letter-spacing: 0.02em;
}
@media (max-width: 768px) {
  .reserve-capacity-hint {
    font-size: 0.72rem;
    margin: -2px 0 6px;
  }
}

/* Room subtitle (short, one-liner) */
.room-subtitle {
  font-size: 0.85rem;
  color: #66788b;
  margin: 0 0 10px;
  line-height: 1.5;
}
.room-cta {
  display: inline;
  font-weight: 700;
  color: #b8860b;
  font-style: italic;
  letter-spacing: 0.01em;
}


/* Urgency tag on room card image */
.urgency-tag {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #0f1e2e;
  color: #C9A84C;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── MOBILE RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 768px) {
  /* Hero stacks to single column */
  .hero .wrap {
    grid-template-columns: 1fr;
    padding: 28px 16px 32px;
    gap: 24px;
  }

  /* v18.2 — picture-first mobile hero. Photo fills the entire viewport
     (no gaps), booking balloon overlaid at the bottom on top of the
     floor area where there's nothing visually important. */
  .hero-logo    { display: none !important; }
  .hero h1      { display: none !important; }
  .hero p       { display: none !important; }
  .hero-actions { display: none !important; }
  .hero-left    { display: none !important; }

  .hero {
    background: #000;
    padding: 0;
    /* Hero fills the visible viewport AFTER the page header (~190px)
       so the gold CTA button at the bottom is visible without
       scrolling. Calc keeps it snug regardless of header height. */
    height: calc(100vh - 190px);
    min-height: calc(100vh - 190px);
    max-height: calc(100vh - 190px);
    position: relative;
    overflow: hidden;
  }
  .hero::before {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: 0;
    /* Image is 3:2 landscape; "cover" alone leaves it vertically tight
       so background-position has no effect. Force a larger size so the
       image overflows vertically AND anchor to the bottom so the bed
       and wooden floor are what's visible (the AC near the ceiling
       gets cropped off the top). */
    /* v18.4 — portrait-oriented photo + center crop. The photo's aspect
       ratio matches the mobile viewport closely so almost no cropping
       happens; the whole room (bed + window + table + chairs) sits in
       frame. */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #000 !important;
    filter: none !important;
    transform: none !important;
    box-shadow: none;
  }
  .hero::after { display: none !important; }

  .hero .wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block !important;
    grid-template-columns: 1fr;
    padding: 80px 16px 18px;
    /* Soft fade so the CTA button sits on a darkened pedestal; the room
       photo stays clearly visible above it. */
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
    z-index: 2;
    gap: 0;
  }
  .hero-right { width: 100%; }

  /* Replace the entire booking balloon with a single CTA button on mobile.
     The form (dates / room dropdown / guests / summary) is hidden — the
     button scrolls straight to the room cards section, where the user can
     browse photos and check availability per room. */
  .hero-right .booking-card .booking-top,
  .hero-right .booking-card .form-grid,
  .hero-right .booking-card .summary {
    display: none !important;
  }
  .hero-right .booking-card {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: 0 !important;
    backdrop-filter: none;
  }
  .hero-right .booking-card::before {
    /* v18.4 — smaller CTA so it doesn't compete with the room photo.
       Conversion research: primary CTA at ~85% width, modest font, big
       enough to thumb-tap (≥40px) but visually subordinate to the room.
       v19.2 — Pull text from data-cta-text so JS can swap it on language
       switch (CSS literal couldn't be re-translated). Falls back to BG
       string if the attribute isn't set yet. */
    content: attr(data-cta-text);
    display: block;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    background: #C9A84C;
    color: #0f1e2e;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 11px 14px;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
    cursor: pointer;
    letter-spacing: .2px;
  }
  .hero-right .booking-card:not([data-cta-text])::before {
    content: "Провери цени и наличности";
  }

  /* v18.4 — Top-corner kicker badge with the property's hook line.
     Positioned top-right so it doesn't sit over the bed/window in the
     photo. Translucent dark pill works on any underlying photo. */
  .hero .mobile-kicker {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    background: rgba(15,30,46,0.78);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 6px 11px;
    border-radius: 999px;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    max-width: 180px;
    line-height: 1.25;
  }

  /* v18.5 — re-show the ORIGINAL review balloons (mini-reviews +
     Google footer + direct-strip pill) on mobile, but compact,
     transparent, and laid out side-by-side above the CTA. Hide
     everything else inside .hero-left so we keep only those three
     trust signals. */
  .hero-left {
    display: block !important;
    position: absolute;
    left: 0; right: 0;
    bottom: 76px;        /* sits just above the CTA */
    z-index: 3;
    padding: 0 12px;
    pointer-events: none; /* don't intercept the CTA tap */
  }
  /* Keep ONLY the .mini-reviews block (9.2/10 + rotating quote) and the
     final Google line. Hide everything else inside .hero-left. */
  .hero-left .hero-logo,
  .hero-left .eyebrow,
  .hero-left h1,
  .hero-left p,
  .hero-left .hero-actions,
  .hero-left .value-row,
  .hero-left .direct-strip {
    display: none !important;
  }
  /* Fully transparent text-only — no background, no border, no box,
     NO blur, NO inset glow. Strong text-shadow keeps it legible
     against any photo. */
  .hero-left .mini-reviews {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    max-width: none;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    text-shadow: 0 1px 4px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.5);
  }
  /* Drop the gold left-border on the rotating quote — that's the
     "frame leftover" the user noticed. */
  .hero-left .mini-reviews .mini-review-quote {
    border-left: 0 !important;
    padding-left: 0 !important;
  }
  .hero-left .mini-reviews .mini-review-score { gap: 6px; }
  .hero-left .mini-reviews .mini-score {
    font-size: 1rem; font-weight: 800; color: #C9A84C;
  }
  .hero-left .mini-reviews .mini-stars { font-size: 0.7rem; color: #C9A84C; line-height: 1; }
  .hero-left .mini-reviews .mini-review-label { font-size: 0.55rem; color: rgba(255,255,255,.75); }
  .hero-left .mini-reviews .mini-review-quote {
    font-size: 0.65rem; line-height: 1.35; color: rgba(255,255,255,.92);
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  /* Google footer: text-only, no background. */
  .hero-left > div[style*="googleScore"],
  .hero-left > div:last-of-type {
    margin-top: 6px !important;
    justify-content: center;
    font-size: 0.7rem !important;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.5);
  }
  /* v18.8 — Side-by-side row: best-price pill (left) + Google line (right).
     Forced single-line at small font so they fit side-by-side on a 375px
     mobile viewport instead of wrapping. */
  .hero-left .mobile-trust-row {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
    background: transparent !important;
    border: 0 !important;
    padding: 0 4px !important;
  }
  .hero-left .mobile-trust-row > div:last-of-type {
    margin-top: 0 !important;
    font-size: 0.6rem !important;
    white-space: nowrap;
    flex: 0 1 auto;
  }
  .best-price-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.5);
    line-height: 1.2;
    white-space: nowrap;
    flex: 0 1 auto;
  }
  .best-price-pill .bp-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: #C9A84C;
    color: #0f1e2e;
    font-size: 0.62rem;
    font-weight: 900;
    text-shadow: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.5);
    flex-shrink: 0;
    line-height: 1;
  }
  .best-price-pill .bp-text {
    color: #fff;
  }

  /* Hero actions stack */
  .hero-actions { flex-direction: column; }
  .hero-actions .btn, .hero-actions a { width: 100%; text-align: center; }
  /* CTA button: gold bg so it pops against dark hero on mobile */
  .hero-actions .btn-primary {
    background: #C9A84C;
    color: #0f1e2e;
    font-size: 1.05rem;
    font-weight: 800;
    padding: 16px 20px;
    border-radius: 14px;
    letter-spacing: 0.04em;
    box-shadow: 0 6px 20px rgba(201,168,76,0.35);
  }

  /* Value row HIDDEN on mobile (user request — too much scroll) */
  .value-row { display: none; }

  /* Mini reviews VISIBLE on mobile — fixed-height golden frame with score + rotating quote */
  .mini-reviews {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 18px;
    min-height: 0;
    overflow: hidden;
  }
  .mini-review-score {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .mini-score { font-size: 1.8rem; }
  .mini-review-quote {
    font-size: 0.82rem;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(201,168,76,0.3);
    padding-top: 10px;
    width: 100%;
    min-height: 40px;
    max-height: 60px;
    overflow: hidden;
    line-height: 1.45;
  }

  /* Direct strip — keep prominence on mobile, no stacking (user wants it to pop) */
  .direct-strip {
    padding: 14px 16px;
    font-size: 0.95rem;
  }
  .direct-badge { font-size: 0.78rem; padding: 5px 12px; }

  /* Booking card full width */
  .booking-card { border-radius: 20px; }
  .form-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Sticky reserve button on mobile */
  .booking-card .summary > div:last-child {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 12px 0 4px;
    margin: 0 -22px -22px;
    padding: 12px 22px;
    border-top: 1px solid #e6dccf;
    border-radius: 0 0 20px 20px;
  }

  /* v18.8 — show all 4 nav links on mobile (user wants Снимки + Отзиви +
     Контакти + Локация all visible alongside the language dropdown). */
  .nav { gap: 12px; }

  /* ─── ROOMS: HORIZONTAL SWIPE CAROUSEL ON MOBILE (user request) ─── */
  .rooms-carousel-wrap {
    position: relative;
    /* Give arrows room to sit INSIDE the horizontal gutter without
       overlapping the room images. 20px gutter on each side. */
    padding: 0 30px;
    margin: 0 -12px;
  }
  .room-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 88%;
    grid-template-columns: unset;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 8px 16px 18px;
    scrollbar-width: none;
  }
  .room-grid::-webkit-scrollbar { display: none; }
  .room-grid > .room-card {
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  /* Rooms arrow buttons — visible on mobile */
  .rooms-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(15,30,46,0.78);
    color: #C9A84C;
    border: 1.5px solid #C9A84C;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  }
  .rooms-arrow.left  { left: -2px; }
  .rooms-arrow.right { right: -2px; }
  .rooms-arrow:active { transform: translateY(-50%) scale(0.92); }

  /* ─── REVIEWS: HORIZONTAL AUTO-ADVANCING CAROUSEL ON MOBILE ─── */
  .carousel { padding: 10px 0 0; }
  .carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    grid-template-columns: unset;
    gap: 14px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 4px 16px 16px;
    scrollbar-width: none;
  }
  .carousel-track::-webkit-scrollbar { display: none; }
  .carousel-track > .review-card {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    min-height: 260px;
  }
  .arrow { display: none; }

  /* Review stats 2 col */
  .review-stats { grid-template-columns: 1fr 1fr; }
  /* Reviews shell tighter on mobile */
  .reviews-shell { padding: 18px 14px; border-radius: 20px; }
  .review-stat { padding: 12px; }
  .review-stat strong { font-size: 1.4rem; }
  .review-stat span { font-size: 0.78rem; }

  /* Section padding */
  .section { padding: 48px 0; }
  .wrap { padding: 0 16px; }

  /* ─── MODAL ON MOBILE — full screen, no border radius ─── */
  .modal {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    z-index: 10;
  }

  /* ─── GALLERY LAYOUT ON MOBILE ─── */
  .gallery-main img { min-height: 220px; max-height: 50vh; object-fit: cover; }
  .gallery-thumbs { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .gallery-thumbs img { height: 56px; }

  /* ─── BOOKING FORM INSIDE MODAL ─── */
  .booking-card .field input,
  .booking-card .field select,
  .booking-card .field textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
    padding: 10px 12px;
    border-radius: 12px;
  }

  /* ─── CONTACT GRID ─── */
  .contact-card { padding: 18px 14px; }
  .contact-icon { font-size: 1.8rem; }
  .contact-card strong { font-size: 0.92rem; }
  .contact-card span { font-size: 0.8rem; }

  /* ─── HEADER/NAV OVERFLOW ─── */
  .header .wrap { padding: 10px 14px; }
  .logo { font-size: 1.15rem; }
  .logo img { height: 36px; }

  /* ─── FOOTER ON MOBILE ─── */
  .footer .wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.8rem;
  }
  .footer-admin-link { margin-left: 0; }

}

/* ─── MOBILE-ONLY: ROOM CARD & COMPONENT OVERRIDES (≤768px) ────────────── */
@media (max-width: 768px) {
  /* ─── ROOM CARD TEXT OVERFLOW PREVENTION ─── */
  .room-body h3 {
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .room-subtitle {
    font-size: 0.78rem;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
    max-height: calc(4 * 1.45 * 0.78rem);
  }
  .room-cta {
    font-size: inherit;
  }

  /* ─── URGENCY / CONVERSION BADGES ON MOBILE ─── */
  .urgency-tag {
    font-size: 0.65rem;
    padding: 4px 10px;
    max-width: calc(100% - 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    bottom: 8px;
    right: 8px;
  }

  /* ─── SOCIAL PROOF & RECENT BOOKING ─── */
  /* v18.9 — Allow wrapping so long lines like "4 души разглеждат · резервирано
     8× този месец" don't get truncated to "...8× този м." with an ellipsis.
     v19.1 — Drop flex on mobile and run the dot as a true inline element
             with the text. Flex was floating the dot above the first row
             whenever the text wrapped; inline + vertical-align:middle
             keeps it on the baseline of the first character. */
  .social-proof-line {
    display: block;
    font-size: 0.68rem;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.4;
  }
  .social-proof-line .sp-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 6px 1px 0;
    vertical-align: middle;
    flex: none;
  }
  .recent-booking-line {
    font-size: 0.68rem;
    padding: 5px 8px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.35;
  }

  /* ─── SUB-CAPACITY PRICING ROW ─── */
  .subcap-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 8px 10px;
    font-size: 0.78rem;
  }
  .subcap-sep { display: none; }

  /* ─── CHIP ROW ─── */
  .chip-row {
    gap: 5px;
    margin: 10px 0;
  }
  .chip {
    font-size: 0.7rem;
    padding: 3px 8px;
  }

  /* ─── ROOM CARD BADGES (top of image) ─── */
  .room-badges {
    gap: 4px;
    inset: 10px 10px auto 10px;
  }
  .room-badges .badge {
    font-size: 0.68rem;
    padding: 4px 8px;
  }
  .price-badge {
    font-size: 0.78rem !important;
    padding: 5px 10px;
  }

  /* ─── ROOM CARD ACTIONS ─── */
  .room-actions {
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
  }
  .room-actions .btn { width: 100%; text-align: center; font-size: 0.88rem; padding: 12px; }

  /* ─── BOOKING MODAL ─── */
  /* v18.1 — compact on mobile so the booking balloon doesn't push the
     room photo off the screen. Smaller fonts, tighter padding, and
     a 2-col summary grid that fits on one line. */
  .booking-card {
    padding: 12px;
    border-radius: 16px;
  }
  .booking-top h2 {
    font-size: 1.15rem;
    word-break: break-word;
    line-height: 1.2;
    margin: 2px 0 6px;
  }
  .booking-top small { font-size: 0.7rem; }
  .booking-card .form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 6px;
  }
  .booking-card .field label { font-size: 0.66rem; margin-bottom: 2px; }
  .booking-card .field input,
  .booking-card .field select {
    font-size: 0.82rem;
    padding: 7px 9px;
    height: auto;
  }
  .summary { margin-top: 10px; padding-top: 10px; }
  .summary-title { font-size: 0.95rem; }
  .summary-sub   { font-size: 0.78rem; line-height: 1.35; margin: 2px 0 8px; }
  .summary-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }
  .summary-box { padding: 7px 8px; border-radius: 8px; }
  .summary-box > div:first-child { font-size: 0.6rem; }
  .summary-box strong { font-size: 0.78rem; line-height: 1.15; }
  .booking-card .btn-primary { padding: 11px 14px; font-size: 0.95rem; }

  /* Trust pills + mini reviews — make them 1-line tight */
  .mini-reviews { padding: 8px 10px; gap: 6px; }
  .mini-review-score strong { font-size: 1.1rem; }
  .mini-review-quote { font-size: 0.74rem; }
  .review-stats { gap: 6px; }
  .review-stat { padding: 8px 6px; }
  .review-stat strong { font-size: 0.95rem; }
  .review-stat span   { font-size: 0.62rem; }

  /* ─── CALENDAR PICKER ON MOBILE ─── */
  /* v1.2 — The dropdown was positioned absolute:left:50% relative to the
     date-input wrapper (narrow, ~170px inside a 2-col form grid). When
     the wrapper sat on the left half of the modal the dropdown extended
     off-screen to the left ("April" showed as "pril"). Fixed position
     centered on the viewport guarantees the whole calendar is visible
     on any screen width; closing logic still works (outside-tap + old
     caret button both remove .open). */
  .flora-cal-dropdown {
    /* v1.7 — Mobile calendar centering fix.
       The modal-backdrop has `backdrop-filter: blur(4px)` which (per CSS
       spec) makes it a containing block for ANY `position: fixed`
       descendant. So the previous `top:50%; left:50%; transform:
       translate(-50%, -50%)` was being computed relative to the
       (padding-inset) backdrop, NOT the viewport — producing a calendar
       that shrank into the modal's left edge ("April" rendered as "pril").
       Using `inset: 0; margin: auto;` with an explicit width/height
       sidesteps the transform math: the browser centers the box inside
       its containing block via auto-margins, no percentage offsets. The
       containing block is still the backdrop, but since backdrop is
       full-viewport (inset: 0), auto-margin centering puts the calendar
       in the visual center of the screen on every phone. !important is
       needed to beat the generic `.flora-cal-dropdown` rule further
       down the source order. */
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    margin: auto !important;
    transform: none !important;
    min-width: 0;
    width: calc(100vw - 28px);
    max-width: 360px;
    height: max-content;
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    padding: 14px;
    z-index: 10000 !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
  }
  /* NOTE: earlier revision added a ::after backdrop that darkened the
     whole screen while the calendar was open. Removed per user feedback —
     the calendar's own box-shadow provides enough separation, and the
     reservation modal behind should stay readable. */
  .flora-cal-grid .cal-day {
    padding: 6px 2px;
    font-size: 0.78rem;
  }
  .flora-cal-grid .cal-weekday {
    font-size: 0.65rem;
  }

  /* ─── MAP ON MOBILE ─── */
  .map-card { border-radius: 20px; }
  .map-card iframe { height: 280px; }

  /* ─── FOOTER ─── */
  .footer { padding: 24px 0 48px; font-size: 0.82rem; }

  /* ─── AVAILABILITY BROWSER GRID ─── */
  .avail-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .avail-card-body h3 { font-size: 0.85rem; }
  .avail-card-body p { font-size: 0.68rem; }
  .avail-filters { flex-direction: column; padding: 0 16px 12px; gap: 8px; }
  .avail-filters .field { min-width: 0; }
  .avail-header { padding: 20px 16px 0; }
  .avail-header h2 { font-size: 1.3rem; }
  .avail-header p { font-size: 0.85rem; margin: 0 0 12px; }

  /* ─── AVAIL SUMMARY BAR ─── */
  .avail-summary-bar { gap: 10px; padding: 10px 14px; flex-wrap: wrap; }
  .avail-summary-bar .asb-val { font-size: 0.88rem; }
  .avail-summary-bar .asb-sep { display: none; }

  /* ─── ROOM OVERLAY (gallery modal repurposed as full info card) ─── */
  /* v18.9 — On mobile the gallery overlay is the user's "full room card":
     mild-white background (not blacked-out), photo browser top, full
     description in the middle, "Провери наличности" CTA at the bottom,
     thumbnails strip below.
     v19   — Per user: hide top "Провери наличности" + "1 / 8" counter;
             keep room name on a single row; clicking the photo opens it
             absolutely fullscreen on its own (separate state). */
  #galleryModal .gallery-fullscreen {
    background: #faf6ee !important;
    color: #122943;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #galleryModal .gfs-top {
    position: sticky;
    background: linear-gradient(to bottom, #faf6ee 75%, rgba(250,246,238,0));
    padding: 12px 14px 10px;
  }
  #galleryModal .gfs-info h3 {
    color: #122943;
    text-shadow: none;
    font-size: 1.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  /* Hide the counter + top-right Reserve button per user request */
  #galleryModal .gfs-counter,
  #galleryModal .gfs-btn-reserve { display: none !important; }
  #galleryModal .gfs-close {
    background: rgba(15,30,46,0.08);
    border-color: rgba(15,30,46,0.18);
    color: #122943;
  }
  #galleryModal .gfs-main {
    flex: 0 0 auto;
    background: transparent;
    padding: 0 12px;
    min-height: 240px;
  }
  #galleryModal .gfs-main img {
    max-height: 50vh;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(15,30,46,0.18);
    cursor: zoom-in;
  }
  #galleryModal .gfs-arrow {
    background: rgba(15,30,46,0.55);
    border-color: rgba(255,255,255,0.4);
    color: #fff;
    width: 40px; height: 40px; font-size: 1.4rem;
  }
  /* Description + CTA block sandwiched between image and thumbnails.
     Elegant serif font; last-sentence (.room-cta) is a touch bigger and
     bolder so the closing call-to-action stands out in every room. */
  .gfs-room-block {
    padding: 14px 16px 6px;
    background: transparent;
  }
  .gfs-room-desc {
    color: #122943;
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 14px;
    letter-spacing: 0.005em;
  }
  .gfs-room-desc .room-cta {
    font-weight: 700;
    font-size: 1.12rem;
    color: #0f1e2e;
    letter-spacing: 0.01em;
  }
  .gfs-room-cta {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #C9A84C, #E2C97E);
    color: #0f1e2e;
    font-weight: 800;
    font-size: 0.88rem;
    padding: 11px 16px;
    border: 0;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(201,168,76,0.35);
    cursor: pointer;
    letter-spacing: 0.02em;
  }
  #galleryModal .gfs-thumbs {
    background: rgba(15,30,46,0.06);
    padding: 10px 12px 16px;
  }
  #galleryModal .gfs-thumbs img {
    height: 52px; width: 78px;
    opacity: 0.85;
  }
  #galleryModal .gfs-thumbs img.active {
    opacity: 1;
    border-color: #C9A84C;
  }

  /* ─── ROOM CARD: replaced 2 buttons with 1 compact CTA (per user) ─── */
  .room-actions.room-actions--single {
    display: block;
  }
  .room-actions.room-actions--single .room-cta-check {
    display: inline-block;
    width: auto;
    background: linear-gradient(135deg, #C9A84C, #E2C97E);
    color: #0f1e2e;
    font-weight: 700;
    font-size: 0.78rem;
    padding: 8px 16px;
    border-radius: 999px;
    border: 0;
    box-shadow: 0 3px 10px rgba(201,168,76,0.28);
    letter-spacing: 0.02em;
  }

  /* v19 — last-sentence CTA inside room cards: slightly bigger + bold. */
  .room-card .room-subtitle .room-cta {
    font-weight: 700;
    font-size: 1.05em;
    color: #0f1e2e;
    letter-spacing: 0.005em;
  }
}

/* ─── PHOTO-ONLY FULLSCREEN STATE (mobile + desktop) ─────────────────
   v19 — When the user taps the photo inside the overlay, the overlay
   collapses to a black fullscreen viewer with ONLY the picture. Tap
   again (or X) to return to the overlay. Activated by toggling the
   class .gfs-photo-only on .gallery-fullscreen. */
.gallery-fullscreen.gfs-photo-only {
  background: #000 !important;
  overflow: hidden !important;
}
.gallery-fullscreen.gfs-photo-only > *:not(.gfs-main):not(.gfs-fs-close) {
  display: none !important;
}
.gallery-fullscreen.gfs-photo-only .gfs-main {
  position: fixed !important;
  inset: 0 !important;
  padding: 0 !important;
  background: #000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}
.gallery-fullscreen.gfs-photo-only .gfs-main img {
  max-width: 100vw !important;
  max-height: 100vh !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: zoom-out !important;
  object-fit: contain;
}
.gallery-fullscreen.gfs-photo-only .gfs-arrow {
  display: grid !important;
  background: rgba(0,0,0,0.5) !important;
  color: #fff !important;
  z-index: 10002 !important;
}
.gfs-fs-close {
  position: fixed;
  top: env(safe-area-inset-top, 14px);
  right: 14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff; font-size: 1.5rem; line-height: 1;
  display: none;
  align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 10003;
}
.gallery-fullscreen.gfs-photo-only .gfs-fs-close { display: flex !important; }

/* v1.2 — On desktop the room overlay also shows the description + CTA
   below the image, matching mobile. Layout: two-column on wide screens
   (image left, description right) so the image stays tall. */
@media (min-width: 769px) {
  .gallery-fullscreen:not(.gfs-photo-only) .gfs-room-block {
    position: absolute;
    right: 20px;
    top: 70px;
    bottom: 120px;
    width: 320px;
    padding: 18px 20px;
    background: rgba(250, 246, 238, 0.96);
    border-radius: 12px;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  }
  .gallery-fullscreen:not(.gfs-photo-only) .gfs-room-desc {
    color: #122943;
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
    font-size: 1rem;
    line-height: 1.55;
    margin: 0 0 14px;
  }
  .gallery-fullscreen:not(.gfs-photo-only) .gfs-room-desc .room-cta {
    font-weight: 700;
    font-size: 1.08rem;
    color: #0f1e2e;
  }
  .gallery-fullscreen:not(.gfs-photo-only) .gfs-room-cta {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #C9A84C, #E2C97E);
    color: #0f1e2e;
    font-weight: 800;
    font-size: 0.92rem;
    padding: 11px 16px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    letter-spacing: 0.02em;
  }
  /* Leave room for the side panel so the image isn't hidden under it. */
  .gallery-fullscreen:not(.gfs-photo-only) .gfs-main {
    padding-right: 360px;
  }
  /* The side panel is 320px + 20px gutter + 20px container-right = 360px.
     The "next" arrow must sit on the RIGHT EDGE OF THE IMAGE (mirroring
     the "prev" arrow on the left), NOT on the right edge of the container
     (where the side panel lives). Offset by the same 360px that pushes
     the image left, plus the original 16px gutter. */
  .gallery-fullscreen:not(.gfs-photo-only) .gfs-next {
    right: 376px;
  }
}

@media (max-width: 480px) {
  /* Extra small — value row single col */
  .value-row { grid-template-columns: 1fr; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  /* ─── ROOM CARD — narrower screens ─── */
  .room-grid { grid-auto-columns: 92%; padding: 8px 8px 18px; }
  .room-body { padding: 14px; }
  .room-body h3 { font-size: 0.95rem; }
  .room-subtitle {
    -webkit-line-clamp: 3;
    max-height: calc(3 * 1.45 * 0.78rem);
    font-size: 0.75rem;
  }

  /* ─── BOOKING FORM FULL WIDTH ─── */
  .booking-card { padding: 14px; }
  .booking-top h2 { font-size: 1.3rem; }

  /* ─── AVAIL GRID 1 COL ─── */
  .avail-grid { grid-template-columns: 1fr; }

  /* ─── REVIEWS TIGHTER ─── */
  .review-card { padding: 14px; min-height: 220px; }
  .review-name { font-size: 1rem; }
  .review-quote { font-size: 0.92rem; line-height: 1.5; }
  .review-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .review-stat { padding: 10px; }
  .review-stat strong { font-size: 1.2rem; }
  .review-stat span { font-size: 0.72rem; }

  /* ─── CAROUSEL ON VERY SMALL ─── */
  .carousel-track { grid-auto-columns: 92%; padding: 4px 8px 16px; }

  /* ─── HERO COMPACT ─── */
  .hero h1 { font-size: clamp(1.5rem, 6.5vw, 2.4rem); }
  .hero .wrap { padding: 20px 14px 28px; }

  /* ─── MINI REVIEWS ─── */
  .mini-review-quote { font-size: 0.76rem; max-height: 50px; }
  .mini-score { font-size: 1.5rem; }

  /* ─── DIRECT STRIP ─── */
  .direct-strip { padding: 10px 14px; font-size: 0.85rem; }
  .direct-badge { font-size: 0.72rem; padding: 4px 10px; }
}

/* ═══════════ FLORA CALENDAR PICKER ═══════════ */
.flora-cal-wrap { position: relative; }
.flora-cal-input {
  width: 100%; padding: 10px 14px; border: 1.5px solid rgba(0,0,0,.12);
  border-radius: 10px; font-size: .92rem; cursor: pointer;
  background: #fff; color: #0f1e2e; font-family: inherit;
}
.flora-cal-input:focus { border-color: #C9A84C; outline: none; box-shadow: 0 0 0 3px rgba(201,168,76,.15); }
.flora-cal-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 999;
  background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.18);
  padding: 16px; min-width: 300px; display: none;
}
.flora-cal-dropdown.open { display: block; }
.flora-cal-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; user-select: none;
}
.flora-cal-header button {
  background: none; border: none; font-size: 1.2rem; cursor: pointer;
  color: #0f1e2e; padding: 4px 10px; border-radius: 8px;
}
.flora-cal-header button:hover { background: #f0ede5; }
.flora-cal-header .cal-month-label {
  font-weight: 700; font-size: .92rem; color: #0f1e2e;
}
.flora-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 2px; text-align: center; font-size: .82rem;
}
.flora-cal-grid .cal-weekday {
  font-weight: 600; color: #888; padding: 4px 0; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .04em;
}
.flora-cal-grid .cal-day {
  padding: 8px 4px; border-radius: 8px; cursor: pointer;
  transition: background .15s, color .15s; position: relative;
}
.flora-cal-grid .cal-day:hover:not(.cal-blocked):not(.cal-past):not(.cal-empty) {
  background: rgba(201,168,76,.15); color: #0f1e2e;
}
.flora-cal-grid .cal-day.cal-today { font-weight: 700; color: #C9A84C; }
.flora-cal-grid .cal-day.cal-selected {
  background: #0f1e2e !important; color: #fff !important; font-weight: 700;
}
.flora-cal-grid .cal-day.cal-in-range {
  background: rgba(201,168,76,.12); color: #0f1e2e;
}
.flora-cal-grid .cal-day.cal-blocked {
  background: #b5342b; color: rgba(255,255,255,.9); cursor: not-allowed;
  text-decoration: line-through; opacity: 1; font-weight: 600;
  border-radius: 6px;
}
.flora-cal-grid .cal-day.cal-past {
  color: #ccc; cursor: default;
}
.flora-cal-grid .cal-day.cal-minstay {
  color: #c4b68a; cursor: not-allowed; opacity: .5;
  font-style: italic;
}
.flora-cal-grid .cal-day.cal-empty { cursor: default; }

/* v1.4 — Min-stay banner (above the calendar grid). Bumped visibility:
   gold pill on cream, larger font, stronger weight. Used to be a tiny
   muted line that guests missed. */
.flora-cal-minstay-banner {
  display: block;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-family: Georgia, "Cormorant Garamond", serif;
  color: #0f1e2e;
  background: linear-gradient(135deg, #fff8ec 0%, #f8e9c8 100%);
  border: 1.5px solid #C9A84C;
  border-radius: 999px;
  padding: 6px 14px;
  margin: 4px auto 10px;
  width: max-content;
  max-width: calc(100% - 24px);
  box-shadow: 0 2px 6px rgba(201, 168, 76, 0.22);
}

/* v1.4 — No-cot warning inside the reserve modal. Red banner with a
   short title, body line, and clickable links to cot-eligible rooms. */
.no-cot-warning {
  margin-top: 14px;
  padding: 12px 14px;
  background: #fff4f4;
  border: 1.5px solid #d44a4a;
  border-radius: 12px;
  color: #6b1a1a;
  font-size: 0.86rem;
  line-height: 1.5;
}
.no-cot-warning strong {
  display: block;
  color: #a11616;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.no-cot-warning .ncw-body {
  display: block;
  margin-bottom: 8px;
  color: #6b1a1a;
}
.no-cot-warning .ncw-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.no-cot-warning .no-cot-link {
  background: #fff;
  border: 1px solid #d44a4a;
  color: #a11616;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.no-cot-warning .no-cot-link:hover {
  background: #d44a4a;
  color: #fff;
}

/* v1.4 — Parking-availability balloon under the parking checkbox.
   Variant classes:
     .parking-balloon-ok      → gold/cream urgency for 1–5 spots left
     .parking-balloon-low     → orange for 1–2 spots left (extra urgency)
     .parking-balloon-full    → red for 0 spots
   The balloon is hidden by default; JS toggles display=block when dates
   are valid and we have a count. */
.parking-balloon {
  display: none;
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  border: 1.5px solid;
}
.parking-balloon-ok {
  background: #fff8ec;
  border-color: #C9A84C;
  color: #7a5300;
}
.parking-balloon-low {
  background: #fff2e0;
  border-color: #e89a3a;
  color: #6b3d00;
  animation: parkingPulse 1.6s ease-in-out infinite;
}
.parking-balloon-full {
  background: #fff4f4;
  border-color: #d44a4a;
  color: #a11616;
}
@keyframes parkingPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 154, 58, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(232, 154, 58, 0); }
}
.parking-balloon a { color: inherit; text-decoration: underline; }