/* =====================================================================
   Room Detail Modal — Hotel Globus
   Opens from "Забронировать" on .room-page-card
   ===================================================================== */

.rm-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  /* Use dvh on the OUTER frame so the shell's max-height: 100% resolves to
     the visible viewport even when the iOS URL bar is collapsed. */
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 240ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
    visibility 0s linear 280ms;
}
.rm-modal[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 240ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
    visibility 0s linear 0s;
}
/* When modal is closed, descendants with their own pointer-events:auto
   (e.g. .rm-view[data-active="true"], .rm-arrow) would still absorb clicks
   through the closed overlay — override them here.
   Specificity of these selectors beats the individual element rules. */
.rm-modal:not([data-open="true"]) .rm-view,
.rm-modal:not([data-open="true"]) .rm-arrow {
  pointer-events: none;
}

/* scrim */
.rm-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(10,37,61,0.55) 0%, rgba(10,37,61,0.78) 100%);
  backdrop-filter: blur(10px) saturate(110%);
  -webkit-backdrop-filter: blur(10px) saturate(110%);
}

/* shell — fixed outer frame, never grows past viewport.
   Inner .rm-body is the single scroll surface; .rm-cta is pinned outside it. */
.rm-shell {
  position: relative;
  width: min(1140px, 100%);
  max-height: 100%;            /* fill .rm-modal which already has 32px padding */
  background: #fff;
  border-radius: 24px;
  box-shadow:
    0 60px 120px rgba(10,37,61,0.45),
    0 18px 40px rgba(10,37,61,0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transform: translateY(28px) scale(0.97);
  opacity: 0;
  transition:
    transform 520ms cubic-bezier(0.16, 0.84, 0.44, 1),
    opacity 380ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.rm-modal[data-open="true"] .rm-shell {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* close button */
.rm-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  color: var(--primary-950, #0A253D);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(10,37,61,0.18);
  transition: transform 240ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
              background 240ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.rm-close:hover { transform: rotate(90deg); background: #fff; }
.rm-close:active { transform: rotate(90deg) scale(0.95); }

/* body (gallery + details) — THE single scroll surface for the details view.
   Both columns flow naturally inside it, so neither one can clip the other,
   and the CTA bar (sibling) is always visible. */
.rm-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(10,37,61,0.2) transparent;
}
.rm-body::-webkit-scrollbar { width: 6px; }
.rm-body::-webkit-scrollbar-thumb { background: rgba(10,37,61,0.18); border-radius: 999px; }

/* grid — no enforced height; rows size to content. align-items: start so the
   shorter column doesn't get stretched to match the taller one. */
.rm-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: start;
}

/* ========= GALLERY ========= */
.rm-gallery {
  background: var(--neutral-50, #F8F7F4);
  display: flex;
  flex-direction: column;
}

/* Hero — sized by aspect-ratio against the column width, never by viewport.
   This means it always renders fully (no min-height squeeze, no max-height crop). */
.rm-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--primary-950, #0A253D);
}
.rm-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 320ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
              transform 8000ms ease-out;
}
.rm-modal[data-open="true"] .rm-hero img {
  transform: scale(1.04);
}
.rm-hero img.is-fading { opacity: 0; }

.rm-ribbon {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  background: var(--gold, #C19A6B);
  color: #fff;
  font-family: var(--font-caps, 'Cinzel', serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  padding: 9px 14px;
  border-radius: 6px;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(193,154,107,0.4);
}
.rm-num {
  position: absolute;
  top: 22px;
  right: 80px;
  z-index: 2;
  color: rgba(255,255,255,0.78);
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 22px;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 18px rgba(0,0,0,0.4);
}

.rm-hero-nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  pointer-events: none;
}
.rm-arrow {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.88);
  color: var(--primary-950, #0A253D);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 240ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
              transform 240ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
              background 240ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.rm-hero:hover .rm-arrow { opacity: 1; transform: scale(1); }
.rm-arrow:hover { background: #fff; }
.rm-arrow:active { transform: scale(0.94); }

.rm-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 2;
}
.rm-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.4);
  transition: width 240ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
              background 240ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.rm-dots span.is-active {
  width: 24px;
  background: var(--gold, #C19A6B);
}

.rm-thumbs {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 14px;
  background: #fff;
  border-top: 1px solid rgba(10,37,61,0.06);
}
.rm-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--neutral-100, #F0EDE7);
  border: 2px solid transparent;
  padding: 0;
  transition: transform 240ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
              border-color 240ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
  opacity: 0;
  transform: translateY(8px);
}
.rm-modal[data-open="true"] .rm-thumb {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 460ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)) var(--rm-thumb-delay, 0ms),
    transform 460ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)) var(--rm-thumb-delay, 0ms),
    border-color 240ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.rm-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 480ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.rm-thumb:hover img { transform: scale(1.06); }
.rm-thumb.is-active {
  border-color: var(--gold, #C19A6B);
}
.rm-thumb.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(193,154,107,0.1);
  pointer-events: none;
}

/* ========= DETAILS ========= */
/* No internal scroll, no min-height; the whole panel flows naturally and
   .rm-body handles scrolling for both columns together. */
.rm-details {
  padding: 48px 52px;
}

.rm-head { position: relative; }
.rm-eyebrow {
  font-family: var(--font-caps, 'Cinzel', serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--gold, #C19A6B);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.rm-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--primary-950, #0A253D);
  margin: 0;
  text-wrap: balance;
}
.rm-area {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 17px;
  color: var(--gold, #C19A6B);
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.rm-area::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--gold, #C19A6B);
}

.rm-desc {
  margin-top: 20px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--fg, #1a2b3e);
  text-wrap: pretty;
}

.rm-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--gold, #C19A6B) 0%, transparent 60%);
  margin: 28px 0 24px;
}

/* specs row */
.rm-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 20px;
}
.rm-spec {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  color: var(--fg, #1a2b3e);
}
.rm-spec-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--neutral-100, #F0EDE7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-700, #1F4068);
}
.rm-spec-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle, #6b7785);
  display: block;
  margin-bottom: 2px;
}
.rm-spec-val {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 16px;
  color: var(--primary-950, #0A253D);
}

/* included */
.rm-incl-block { margin-top: 30px; }
.rm-incl-title {
  font-family: var(--font-caps, 'Cinzel', serif);
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--primary-950, #0A253D);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.rm-incl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
}
.rm-incl li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg, #1a2b3e);
}
.rm-incl li svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--gold, #C19A6B);
}

/* ========= CTA — full-width action bar, ALWAYS pinned at the bottom
   of the active view. Sits outside .rm-body's scroll, so the price + book
   button never scroll off-screen no matter how short the viewport is. */
.rm-cta {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 22px 36px 22px 52px;
  background: var(--primary-950, #0A253D);
  color: #fff;
  position: relative;
  box-shadow: 0 -8px 24px rgba(10,37,61,0.12);
}
.rm-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 52px;
  right: 36px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(193,154,107,0.5) 30%, rgba(193,154,107,0.5) 70%, transparent 100%);
}

.rm-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.rm-price small {
  display: block;
  width: 100%;
  font-family: var(--font-caps, 'Cinzel', serif);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--gold, #C19A6B);
  margin-bottom: 2px;
}
.rm-price b {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 500;
  font-size: 36px;
  color: #fff;
  letter-spacing: -0.015em;
  line-height: 1;
}
.rm-price-foot {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
}

.rm-book {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 40px;
  border-radius: 999px;
  background: var(--gold, #C19A6B);
  color: #fff;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 34px rgba(193,154,107,0.45), 0 4px 12px rgba(193,154,107,0.25);
  transition: transform 80ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
              background 240ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
              box-shadow 240ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.rm-book:hover {
  background: #B0875A;
  box-shadow: 0 18px 40px rgba(193,154,107,0.52), 0 6px 16px rgba(193,154,107,0.3);
}
.rm-book:active { transform: scale(0.985); }
.rm-book svg { transition: transform 240ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)); }
.rm-book:hover svg { transform: translateX(4px); }

/* ========= VIEWS (details ↔ form ↔ success) ========= */
/* .rm-views fills the shell; the active .rm-view is a vertical flex container
   whose middle pane scrolls and whose CTA is pinned at the bottom. */
.rm-views {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.rm-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 320ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
    transform 380ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
    visibility 0s linear 380ms;
}
.rm-view[data-active="true"] {
  position: relative;
  flex: 1 1 auto;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 380ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)) 60ms,
    transform 420ms cubic-bezier(0.16, 0.84, 0.44, 1) 60ms,
    visibility 0s linear 0s;
}

/* ========= FORM VIEW ========= */
.rm-form-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(10,37,61,0.2) transparent;
  padding: 0;
}
.rm-form-body::-webkit-scrollbar { width: 6px; }
.rm-form-body::-webkit-scrollbar-thumb { background: rgba(10,37,61,0.16); border-radius: 999px; }

/* summary strip — right padding is 72 px to clear the 44 px close button at right: 20 px */
.rm-form-summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 28px 72px 28px 40px;
  background: var(--neutral-50, #F8F7F4);
  border-bottom: 1px solid rgba(10,37,61,0.06);
}
.rm-form-summary-img {
  position: relative;
  width: 112px;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
.rm-form-summary-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.rm-form-summary-ribbon {
  position: absolute;
  top: 8px; left: 8px;
  font-family: var(--font-caps, 'Cinzel', serif);
  font-size: 9px;
  letter-spacing: 0.2em;
  background: var(--gold, #C19A6B);
  color: #fff;
  padding: 4px 7px;
  border-radius: 4px;
}
.rm-form-summary-eyebrow {
  font-family: var(--font-caps, 'Cinzel', serif);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold, #C19A6B);
  margin-bottom: 6px;
}
.rm-form-summary-meta h3 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--primary-950, #0A253D);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.rm-form-summary-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.rm-form-summary-tags span {
  font-size: 12px;
  color: var(--fg-subtle, #6b7785);
  letter-spacing: 0.04em;
  position: relative;
}
.rm-form-summary-tags span + span::before {
  content: "·";
  margin-right: 14px;
  position: absolute;
  left: -14px;
}
.rm-form-summary-tags span.gold { color: var(--gold, #C19A6B); }
.rm-form-summary-price {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.rm-form-summary-price small {
  font-family: var(--font-caps, 'Cinzel', serif);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--fg-subtle, #6b7785);
}
.rm-form-summary-price b {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 500;
  font-size: 26px;
  color: var(--primary-950, #0A253D);
  letter-spacing: -0.01em;
  margin-top: 2px;
}
.rm-form-summary-price .muted {
  font-size: 11px;
  color: var(--fg-subtle, #6b7785);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

/* form sections */
.rm-form { padding: 32px 40px 36px; }
.rm-form-section + .rm-form-section { margin-top: 28px; }
.rm-form-section-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.rm-form-section-title {
  font-family: var(--font-caps, 'Cinzel', serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--primary-950, #0A253D);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.rm-form-nights {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 18px;
  color: var(--gold, #C19A6B);
  letter-spacing: -0.005em;
}

.rm-form-row {
  display: grid;
  gap: 16px;
}
.rm-form-row.two { grid-template-columns: 1fr 1fr; }

.rm-input { display: flex; flex-direction: column; gap: 10px; }
.rm-input-label {
  font-family: var(--font-caps, 'Cinzel', serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary-950, #0A253D);
  font-weight: 500;
}
.rm-input-shell {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid rgba(10,37,61,0.22);
  border-radius: 10px;
  transition: border-color 200ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
              box-shadow 200ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
              background 200ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
  padding-left: 16px;
  box-shadow: 0 1px 0 rgba(10,37,61,0.03);
}
.rm-input-shell:hover { border-color: rgba(10,37,61,0.36); }
.rm-input-shell:focus-within {
  border-color: var(--gold, #C19A6B);
  box-shadow: 0 0 0 4px rgba(193,154,107,0.16), 0 4px 12px rgba(10,37,61,0.06);
  background: #fff;
}
.rm-input-shell:has(.is-invalid) {
  border-color: #C25450;
  box-shadow: 0 0 0 4px rgba(194,84,80,0.12);
}
.rm-input-icon {
  display: inline-flex;
  color: var(--primary-700, #1F4068);
  flex-shrink: 0;
}
.rm-input-shell input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--primary-950, #0A253D);
  padding: 17px 16px 17px 14px;
  letter-spacing: 0.005em;
}
.rm-input-shell input::placeholder {
  color: rgba(10,37,61,0.4);
  font-weight: 400;
}
.rm-input-shell input.is-invalid { color: #C25450; }

.rm-input-phone .rm-phone-code {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  background-image: linear-gradient(45deg, transparent 50%, var(--primary-700, #1F4068) 50%),
                    linear-gradient(135deg, var(--primary-700, #1F4068) 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  padding: 17px 22px 17px 12px;
  margin-left: 4px;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--primary-950, #0A253D);
  cursor: pointer;
  border-right: 1.5px solid rgba(10,37,61,0.12);
  width: 92px;
  outline: none;
}
.rm-input-phone .rm-phone-code:focus { background-color: rgba(193,154,107,0.06); }

/* ========= STAY ROW (Заезд / Выезд / Гости) ========= */
.rm-stay-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}

.rm-field {
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1.5px solid rgba(10,37,61,0.22);
  border-radius: 10px;
  padding: 14px 18px 14px;
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 220ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
              box-shadow 220ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
              background 220ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
  box-shadow: 0 1px 0 rgba(10,37,61,0.03);
  min-height: 78px;
}
.rm-field:hover {
  border-color: rgba(193,154,107,0.55);
  background: rgba(193,154,107,0.04);
}
.rm-field[aria-expanded="true"] {
  border-color: var(--gold, #C19A6B);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(193,154,107,0.18), 0 8px 22px rgba(10,37,61,0.08);
}
.rm-field-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-caps, 'Cinzel', serif);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold, #C19A6B);
  text-transform: uppercase;
  font-weight: 500;
}
.rm-field-icon {
  display: inline-flex;
  color: var(--gold, #C19A6B);
}
.rm-field-icon svg { width: 14px; height: 14px; }
.rm-field-value {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--primary-950, #0A253D);
  letter-spacing: -0.005em;
  line-height: 1.2;
  margin-top: 2px;
}
.rm-field-sub {
  font-size: 12px;
  color: var(--fg-subtle, #6b7785);
  letter-spacing: 0.04em;
}

/* ========= POPOVER (rendered at modal level, position: fixed) ========= */
.rm-pops-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1100;
}
.rm-pop {
  position: fixed;
  top: -9999px;
  left: -9999px;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(10,37,61,0.08);
  border-top: 2px solid var(--gold, #C19A6B);
  box-shadow: 0 24px 60px rgba(10,37,61,0.28), 0 8px 20px rgba(10,37,61,0.16);
  padding: 20px;
  min-width: 340px;
  max-width: 92vw;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition:
    opacity 220ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
    transform 220ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
/* When opening upward, slide up instead of down */
.rm-pop[data-opens-up="true"] { transform: translateY(6px); }
.rm-pop[data-measuring="true"] {
  visibility: hidden;
  opacity: 0;
  transform: none;
  transition: none;
}
.rm-pop[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.rm-pop .cal { --cal-cell: 38px; --cal-dot: 32px; }
.rm-pop .cal-title { font-size: 16px; }
.rm-pop .cal-day { font-size: 13px; }
.rm-pop .cal-foot { font-size: 11px; }

/* ========= GUESTS PANEL ========= */
.rm-pop-guests {
  min-width: 360px;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Cap height so the pop never overflows the viewport even with many children */
  max-height: min(75vh, 500px);
  overflow: hidden;
}

/* Scrollable region: guest counters + child age selectors */
.rm-pop-guests-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 22px 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(10,37,61,0.2) transparent;
}
.rm-pop-guests-scroll::-webkit-scrollbar { width: 6px; }
.rm-pop-guests-scroll::-webkit-scrollbar-thumb {
  background: rgba(10,37,61,0.18);
  border-radius: 999px;
}

/* Pinned footer — Apply button is ALWAYS visible */
.rm-pop-guests-footer {
  flex-shrink: 0;
  padding: 12px 22px 18px;
  border-top: 1px solid rgba(10,37,61,0.08);
  background: #fff;
}
.rm-guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid rgba(10,37,61,0.08);
}
.rm-guest-row:last-of-type { border-bottom: 0; }
.rm-guest-label {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--primary-950, #0A253D);
}
.rm-guest-sub {
  font-size: 12px;
  color: var(--fg-subtle, #6b7785);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

.rm-g-counter {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.rm-g-counter button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(10,37,61,0.2);
  background: #fff;
  color: var(--primary-950, #0A253D);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 200ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.rm-g-counter button:hover:not(:disabled) {
  border-color: var(--gold, #C19A6B);
  color: var(--gold, #C19A6B);
}
.rm-g-counter button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.rm-g-counter span {
  min-width: 24px;
  text-align: center;
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--primary-950, #0A253D);
}

/* child ages */
.rm-child-ages {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid rgba(10,37,61,0.08);
  display: none;
  flex-direction: column;
  gap: 10px;
}
.rm-child-ages[data-on="true"] { display: flex; }
.rm-child-ages-title {
  font-family: var(--font-caps, 'Cinzel', serif);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--primary-950, #0A253D);
  margin-bottom: 2px;
}
.rm-child-row {
  display: grid;
  grid-template-columns: 1fr 130px;
  align-items: center;
  gap: 12px;
}
.rm-child-row-label {
  font-size: 14px;
  color: var(--fg, #1a2b3e);
}
.rm-child-age {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid rgba(10,37,61,0.18);
  border-radius: 8px;
  background: #fff;
  background-image: linear-gradient(45deg, transparent 50%, var(--primary-700, #1F4068) 50%),
                    linear-gradient(135deg, var(--primary-700, #1F4068) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  padding: 9px 28px 9px 12px;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--primary-950, #0A253D);
  cursor: pointer;
  outline: none;
  transition: border-color 200ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
              box-shadow 200ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.rm-child-age:hover { border-color: rgba(193,154,107,0.5); }
.rm-child-age:focus {
  border-color: var(--gold, #C19A6B);
  box-shadow: 0 0 0 3px rgba(193,154,107,0.16);
}

/* apply button inside guests pop */
.rm-apply {
  margin-top: 0;
  width: 100%;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--primary-950, #0A253D);
  color: #fff;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 220ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.rm-apply:hover { background: var(--gold, #C19A6B); }

/* form CTA bar overrides */
.rm-form-cta {
  grid-template-columns: 1fr auto;
  align-items: center;
}
.rm-cta-back-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.rm-back {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 0;
  cursor: pointer;
  transition: color 200ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.rm-back:hover { color: var(--gold, #C19A6B); }
.rm-callback-note {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-style: italic;
  font-size: 17px;
  color: #fff;
  letter-spacing: -0.005em;
  position: relative;
  padding-left: 22px;
}
.rm-callback-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #2A9D8F;
  box-shadow: 0 0 0 4px rgba(42,157,143,0.18);
  animation: rm-pulse 2.4s ease-in-out infinite;
}
@keyframes rm-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(42,157,143,0.18); }
  50% { box-shadow: 0 0 0 8px rgba(42,157,143,0.06); }
}

/* ========= SUCCESS VIEW ========= */
.rm-success {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 64px 56px 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: linear-gradient(180deg, #fff 0%, var(--neutral-50, #F8F7F4) 100%);
}
.rm-success-icon {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: rgba(42,157,143,0.1);
  color: #2A9D8F;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  animation: rm-success-pop 620ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
.rm-success-icon::before {
  content: "";
  position: absolute;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: rgba(42,157,143,0.2);
  animation: rm-success-ring 1400ms ease-out 200ms infinite;
}
.rm-success-eyebrow {
  font-family: var(--font-caps, 'Cinzel', serif);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: #2A9D8F;
  margin-bottom: 14px;
}
.rm-success-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--primary-950, #0A253D);
  margin: 0 0 16px;
  max-width: 620px;
}
.rm-success-title em {
  font-style: italic;
  color: var(--gold, #C19A6B);
}
.rm-success-msg {
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg, #1a2b3e);
  max-width: 540px;
  margin: 0 0 32px;
  text-wrap: pretty;
}
.rm-success-card {
  background: #fff;
  border: 1px solid rgba(193,154,107,0.3);
  border-radius: 16px;
  padding: 22px 28px;
  width: 100%;
  max-width: 540px;
  margin-bottom: 28px;
  text-align: left;
  box-shadow: 0 12px 28px rgba(10,37,61,0.06);
}
.rm-success-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(10,37,61,0.06);
}
.rm-success-card-row:last-child { border-bottom: 0; }
.rm-success-card-row span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle, #6b7785);
}
.rm-success-card-row strong {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 500;
  font-size: 15px;
  color: var(--primary-950, #0A253D);
  text-align: right;
}
.rm-success-card-row strong em {
  font-style: normal;
  color: var(--fg-subtle, #6b7785);
  font-size: 13px;
}
.rm-success-card-row strong.gold { color: var(--gold, #C19A6B); }
.rm-success-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.rm-success-actions .rm-book {
  min-width: 220px;
  justify-content: center;
  border: 0;
  cursor: pointer;
}
.rm-success-call {
  font-size: 13px;
  color: var(--fg-subtle, #6b7785);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 200ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.rm-success-call:hover { color: var(--gold, #C19A6B); }

@keyframes rm-success-pop {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes rm-success-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* button-style rm-book (for inline buttons in CTA bar) */
button.rm-book { border: 0; cursor: pointer; font: inherit; }
button.rm-book.rm-submit {}

/* lock body scroll */
body.rm-locked { overflow: hidden; }

/* ========= GENERIC SUMMARY — no room pre-selected ========= */
.rm-form-summary--pick {
  display: block !important;
  padding: 24px 72px 24px 40px;
}
.rm-pick-prompt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
}
.rm-pick-prompt-icon {
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: var(--neutral-100, #F0EDE7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-700, #1F4068);
  flex-shrink: 0;
}
.rm-pick-prompt-meta h3 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 500;
  font-size: 21px;
  color: var(--primary-950, #0A253D);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.rm-pick-hint {
  font-size: 13px;
  color: var(--fg-subtle, #6b7785);
  margin: 0;
  letter-spacing: 0.02em;
}
.rm-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 22px;
  border-radius: 999px;
  background: var(--gold, #C19A6B);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(193,154,107,0.35);
  transition:
    background 240ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
    transform 80ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.rm-pick-btn:hover { background: #B0875A; }
.rm-pick-btn:active { transform: scale(0.97); }
.rm-pick-btn svg { transition: transform 240ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)); }
.rm-pick-btn:hover svg { transform: translateY(2px); }

/* ========= ROOM PICKER OVERLAY ========= */
.rm-room-picker {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 280ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
    transform 340ms cubic-bezier(0.16, 0.84, 0.44, 1),
    visibility 0s linear 340ms;
}
.rm-room-picker[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 280ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1)),
    transform 340ms cubic-bezier(0.16, 0.84, 0.44, 1),
    visibility 0s linear 0s;
}

.rm-room-picker-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 40px 20px;
  background: var(--neutral-50, #F8F7F4);
  border-bottom: 1px solid rgba(193,154,107,0.22);
}
.rm-room-picker-eyebrow {
  font-family: var(--font-caps, 'Cinzel', serif);
  font-size: 10px;
  letter-spacing: 0.26em;
  color: var(--gold, #C19A6B);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.rm-room-picker-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--primary-950, #0A253D);
  letter-spacing: -0.01em;
  margin: 0;
}
.rm-room-picker-close {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(10,37,61,0.18);
  background: #fff;
  color: var(--primary-950, #0A253D);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.rm-room-picker-close:hover {
  border-color: var(--gold, #C19A6B);
  color: var(--gold, #C19A6B);
  background: rgba(193,154,107,0.06);
}

/* Scrollable list */
.rm-room-picker-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(10,37,61,0.2) transparent;
}
.rm-room-picker-list::-webkit-scrollbar { width: 6px; }
.rm-room-picker-list::-webkit-scrollbar-thumb { background: rgba(10,37,61,0.18); border-radius: 999px; }

/* Individual room item */
.rm-rp-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(10,37,61,0.07);
  padding: 22px 40px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 148px 1fr auto;
  gap: 22px;
  align-items: center;
  font: inherit;
  color: var(--fg, #1a2b3e);
  transition: background 200ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.rm-rp-item:hover { background: rgba(193,154,107,0.04); }
.rm-rp-item:last-child { border-bottom: 0; }

.rm-rp-img {
  position: relative;
  width: 148px;
  height: 104px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--neutral-100, #F0EDE7);
}
.rm-rp-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.rm-rp-item:hover .rm-rp-img img { transform: scale(1.05); }
.rm-rp-ribbon {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--font-caps, 'Cinzel', serif);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--gold, #C19A6B);
  color: #fff;
  padding: 4px 7px;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(193,154,107,0.4);
}

.rm-rp-info { flex: 1; min-width: 0; }
.rm-rp-title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 19px;
  font-weight: 500;
  color: var(--primary-950, #0A253D);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.rm-rp-desc {
  font-size: 13.5px;
  color: var(--fg-subtle, #6b7785);
  line-height: 1.5;
  margin-bottom: 10px;
}
.rm-rp-feats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.rm-rp-feats span {
  font-size: 12px;
  color: var(--fg-subtle, #6b7785);
  letter-spacing: 0.04em;
  position: relative;
}
.rm-rp-feats span + span::before {
  content: "·";
  margin-right: 12px;
  position: absolute;
  left: -12px;
}
.rm-rp-feats .rm-rp-area { color: var(--gold, #C19A6B); }

.rm-rp-price-col {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.rm-rp-price-col small {
  font-family: var(--font-caps, 'Cinzel', serif);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-subtle, #6b7785);
  margin-bottom: 4px;
}
.rm-rp-price-col b {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--primary-950, #0A253D);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.rm-rp-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gold, #C19A6B);
  letter-spacing: 0.04em;
  transition: gap 200ms var(--ease-standard, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.rm-rp-item:hover .rm-rp-select { gap: 10px; }
.rm-rp-empty {
  padding: 48px 40px;
  color: var(--fg-subtle, #6b7785);
  font-size: 15px;
  text-align: center;
}

/* ========= Room picker responsive (keep before general responsive) ========= */
@media (max-width: 980px) {
  .rm-room-picker-head { padding: 20px 24px 16px; }
  .rm-rp-item {
    grid-template-columns: 110px 1fr;
    padding: 16px 24px;
    gap: 14px;
  }
  .rm-rp-img { width: 110px; height: 80px; }
  .rm-rp-price-col {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    gap: 10px;
    border-top: 1px solid rgba(10,37,61,0.06);
    padding-top: 10px;
  }
  .rm-rp-price-col small { margin: 0; }
  .rm-rp-price-col b { font-size: 18px; margin: 0; }
  .rm-form-summary--pick { padding: 18px 24px; }
  .rm-pick-prompt { gap: 14px; }
  .rm-pick-prompt-meta h3 { font-size: 18px; }
}

@media (max-width: 560px) {
  .rm-room-picker-head { padding: 16px 18px 14px; }
  .rm-room-picker-title { font-size: 18px; }
  .rm-rp-item {
    grid-template-columns: 88px 1fr;
    padding: 14px 18px;
    gap: 12px;
  }
  .rm-rp-img { width: 88px; height: 68px; border-radius: 8px; }
  .rm-rp-title { font-size: 16px; margin-bottom: 4px; }
  .rm-rp-desc { font-size: 12px; margin-bottom: 6px; }
  .rm-form-summary--pick { padding: 14px 18px; }
  .rm-pick-prompt {
    grid-template-columns: auto 1fr;
    gap: 12px;
  }
  .rm-pick-btn {
    grid-column: 1 / -1;
    justify-content: center;
    width: 100%;
  }
  .rm-pick-hint { display: none; }
  .rm-pick-prompt-icon { width: 44px; height: 44px; }
}

/* ========= responsive =========
   Strategy at ALL sizes: .rm-body is the single vertical scroll surface;
   the grid stacks (gallery on top, details below) on narrow viewports; the
   .rm-cta footer is pinned outside the scroll, always visible. Hero sizes
   itself by aspect-ratio against the column width, so it never clips and
   never bloats past the column. No sticky-tricks needed.
   --------------------------------------------------------------------- */

@media (max-width: 980px) {
  .rm-modal { padding: 16px; }

  /* Gallery on top, details below \u2014 single column. */
  .rm-grid {
    grid-template-columns: 1fr;
  }

  /* Hero \u2014 a touch shorter on small screens so the description below it is\n     visible without scrolling much. */
  .rm-hero {
    aspect-ratio: 16 / 10;
  }
  .rm-thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 12px; }

  .rm-details { padding: 36px 32px; }
  .rm-title { font-size: 30px; }
  .rm-num { right: 76px; font-size: 18px; }

  /* CTA \u2014 tighter padding so it fits a phone width cleanly. */
  .rm-cta {
    padding: 18px 24px;
    gap: 18px;
  }
  .rm-cta::before { left: 24px; right: 24px; }
  .rm-price b { font-size: 30px; }
  .rm-book { padding: 16px 28px; font-size: 15px; }

  /* Form view */
  .rm-stay-row { grid-template-columns: 1fr 1fr; }
  .rm-stay-row > :last-child { grid-column: 1 / -1; }
  .rm-pop { min-width: 320px; }

  .rm-form-summary {
    padding: 18px 22px;
    grid-template-columns: 88px 1fr;
    gap: 14px 18px;
    align-items: center;
  }
  .rm-form-summary-img { width: 88px; height: 64px; border-radius: 10px; }
  .rm-form-summary-meta h3 { font-size: 19px; margin: 0 0 4px; }
  .rm-form-summary-tags { gap: 4px 12px; }
  .rm-form-summary-tags span + span::before { margin-right: 12px; left: -12px; }
  .rm-form-summary-price {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    border-top: 1px solid rgba(10,37,61,0.08);
    padding-top: 12px;
    text-align: left;
  }
  .rm-form-summary-price small { font-size: 9px; }
  .rm-form-summary-price b { font-size: 22px; margin-top: 0; }
  .rm-form-summary-price .muted { margin-top: 0; }

  .rm-form { padding: 28px 24px 32px; }

  /* Success view */
  .rm-success { padding: 52px 32px 40px; }
  .rm-success-title { font-size: 30px; }
}

/* --- Mobile --- */
@media (max-width: 560px) {
  .rm-modal { padding: 0; }

  .rm-shell {
    border-radius: 0;
    width: 100%;
  }

  .rm-close {
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
  }

  /* Hero stays aspect-ratio-driven; just nudge the chrome on it. */
  .rm-ribbon { top: 14px; left: 14px; font-size: 10px; padding: 7px 11px; }
  .rm-num { right: 64px; top: 18px; font-size: 16px; }
  .rm-thumbs { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px; }

  .rm-details { padding: 28px 22px; }
  .rm-title { font-size: 26px; }
  .rm-desc { font-size: 15px; }
  .rm-incl, .rm-specs { grid-template-columns: 1fr; }
  .rm-incl-block { margin-top: 26px; }

  /* CTA stacks; price centers above full-width button. */
  .rm-cta {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 20px 20px;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    text-align: center;
  }
  .rm-cta::before { left: 20px; right: 20px; }
  .rm-price { justify-content: center; }
  .rm-price small { text-align: center; }
  .rm-price b { font-size: 28px; }
  .rm-price-foot { width: 100%; text-align: center; }
  .rm-book { width: 100%; justify-content: center; padding: 17px 24px; font-size: 15px; }

  /* Form summary */
  .rm-form-summary {
    padding: 14px 18px;
    grid-template-columns: 72px 1fr;
    gap: 12px 14px;
  }
  .rm-form-summary-img { width: 72px; height: 54px; border-radius: 8px; }
  .rm-form-summary-ribbon { font-size: 8px; padding: 3px 6px; top: 6px; left: 6px; }
  .rm-form-summary-eyebrow { font-size: 9px; margin-bottom: 4px; }
  .rm-form-summary-meta h3 { font-size: 17px; margin: 0 0 4px; line-height: 1.2; }
  .rm-form-summary-price b { font-size: 20px; }

  .rm-form { padding: 24px 20px 28px; }
  .rm-form-row.two { grid-template-columns: 1fr; }
  .rm-stay-row { grid-template-columns: 1fr; gap: 10px; }
  .rm-stay-row > :last-child { grid-column: auto; }
  .rm-field { min-height: 70px; padding: 12px 16px; }
  .rm-field-value { font-size: 17px; }

  /* Form CTA */
  .rm-form-cta { grid-template-columns: 1fr; gap: 12px; }
  .rm-cta-back-wrap { align-items: center; text-align: center; gap: 4px; }
  .rm-callback-note { font-size: 14px; padding-left: 18px; }
  .rm-callback-note::before { width: 10px; height: 10px; }

  /* Popovers fill viewport edge-to-edge. */
  .rm-pop {
    min-width: 0;
    left: 8px !important;
    right: 8px !important;
    width: calc(100vw - 16px);
    max-width: none;
    padding: 16px;
  }
  .rm-pop-guests { min-width: 0; max-height: min(80vh, 500px); }
  .rm-pop-guests-scroll { padding: 6px 18px 4px; }
  .rm-pop-guests-footer { padding: 10px 18px 16px; }

  /* Success view */
  .rm-success { padding: 40px 22px 32px; }
  .rm-success-icon { width: 80px; height: 80px; margin-bottom: 18px; }
  .rm-success-icon::before { width: 80px; height: 80px; }
  .rm-success-title { font-size: 24px; }
  .rm-success-msg { font-size: 15px; margin-bottom: 24px; }
  .rm-success-card { padding: 18px 20px; }
  .rm-success-card-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .rm-success-card-row strong { text-align: left; }
}

/* --- Short viewports ---
   With .rm-body as the single scroll surface, short viewports already work:
   the user just scrolls more. We only tighten paddings here to keep the
   CTA \u2014 which is pinned outside the scroll \u2014 from eating too much height,
   and to give the description some breathing room at the first paint. */
@media (max-height: 720px) {
  .rm-details { padding: 32px 40px; }
  .rm-incl-block { margin-top: 22px; }
  .rm-rule { margin: 22px 0 18px; }
  .rm-cta { padding-top: 16px; padding-bottom: 16px; }
  .rm-book { padding: 14px 30px; }
}
@media (max-height: 560px) {
  .rm-details { padding: 26px 36px; }
  .rm-title { font-size: 28px; }
  .rm-rule { margin: 18px 0 16px; }
  .rm-incl-block { margin-top: 18px; }
  .rm-thumbs { padding: 10px; gap: 8px; }
  .rm-cta { padding: 12px 24px; }
  .rm-price b { font-size: 26px; }
  .rm-book { padding: 12px 24px; font-size: 14px; }
}

/* ── "Изменить номер" chip (generic modal — room selected) ─────────────── */
.rm-form-change-room {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 10px;
  border: 1px solid rgba(193,154,107,0.45);
  border-radius: 999px;
  background: transparent;
  color: var(--gold, #C19A6B);
  font-family: var(--font-ui, "Manrope", sans-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1;
  vertical-align: middle;
  transition: background 180ms, border-color 180ms;
}
.rm-form-change-room:hover {
  background: rgba(193,154,107,0.1);
  border-color: var(--gold, #C19A6B);
}