/* =========================================================
   O-Jane's Suites — Reserve Your Stay (booking page)
   Metrics mirror the Figma spec 1:1 (1920px artboard).
   ========================================================= */

:root {
  /* Brand */
  --bk-page:        #fbf7f2;
  --bk-dark:        #2c1810;
  --bk-accent:      #8b3a2a;
  --bk-cream:       #fbf7f2;
  --bk-sand:        #f5efe6;
  --bk-sand-line:   #d2c9c0;
  --bk-muted-warm:  #6e6259;

  /* Foundation tokens (EJA design system) */
  --qc-black-800:   #393f49;   /* field label / value text     */
  --qc-black-300:   #9aa1ad;   /* placeholder                  */
  --qc-black-100:   #d0d4d9;   /* field border                 */
  --red-normal:     #cd3d64;   /* required asterisk            */
  --purple-100:     #cdcace;   /* checkbox / toggle border     */
  --eja-green-500:  #2fbf71;
  --eja-green-50:   #eaf9f1;
  --red-500:        #ff3b30;
  --red-50:         #ffebea;
  --violet-500:     #70657a;
  --violet-300:     #9f98a6;
  --violet-100:     #d3cfd6;
  --violet-800:     #3e3843;
  --blue-900:       #281f61;
  --blue-100:       #cec7f8;

  --ink-900:        #1a1a2e;
  --ink-800:        #1d272c;
  --ink-600:        #4e5664;
  --hairline:       #e5e7eb;

  --font-serif:  "Playfair Display", Georgia, serif;
  --font-logo:   "Instrument Serif", Georgia, serif;
  --font-sans:   "Work Sans", system-ui, -apple-system, sans-serif;
}

/* ===== Reset / base ===== */
*, *::before, *::after { box-sizing: border-box; }

/* Class-based display rules below would otherwise beat the UA [hidden] rule. */
[hidden] { display: none !important; }

html { font-size: 100%; }

body.booking-page {
  margin: 0;
  background: var(--bk-page);
  font-family: var(--font-sans);
  color: var(--ink-800);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* =========================================================
   Header
   ========================================================= */
.bk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 80px;
  background: var(--bk-dark);
}

.logo-container { display: flex; align-items: center; gap: 12px; }

.logo-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--bk-accent);
  color: var(--bk-cream);
  font-size: 15px;
  line-height: 1;
}

.logo-text { display: flex; flex-direction: column; gap: 2px; }

.logo-name {
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: 22px;
  line-height: normal;
  letter-spacing: 2px;
  color: var(--bk-cream);
  white-space: nowrap;
}

.logo-sub {
  font-weight: 500;
  font-size: 8px;
  line-height: normal;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--bk-sand-line);
  white-space: nowrap;
}

.navigation { display: flex; align-items: flex-start; justify-content: center; gap: 32px; }

.navigation a,
.navigation .active-nav-container a {
  font-weight: 600;
  font-size: 13px;
  line-height: normal;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bk-cream);
  white-space: nowrap;
  transition: opacity .2s ease;
}
.navigation a:hover { opacity: .75; }

.active-nav-container { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.active-line { display: block; width: 30px; height: 2px; background: var(--bk-accent); }

.book-now-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 4px;
  background: var(--bk-accent);
  font-weight: 700;
  font-size: 13px;
  line-height: normal;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bk-cream);
  white-space: nowrap;
  transition: filter .2s ease;
}
.book-now-button:hover { filter: brightness(1.1); }

/* =========================================================
   Hero title
   ========================================================= */
.hero-title-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 80px 0 48px;
}

.hero-title-section h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 64px;
  line-height: normal;
  text-align: center;
  color: var(--bk-dark);
}

.title-divider { display: block; width: 120px; height: 2px; background: var(--bk-accent); }

/* =========================================================
   Main grid
   ========================================================= */
.main-content-grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
  padding: 0 80px 120px;
}

.panel {
  width: 1193px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 32.8px;
  border: 0.8px solid #e2e8f0;
  border-radius: 16px;
}

.form-section { display: flex; flex-direction: column; gap: 20px; }

.section-heading {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 24px;
  color: var(--ink-900);
}

/* ===== Fields ===== */
.input-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.field-row { display: flex; gap: 32px; }
.field-row > .input-field { flex: 1 0 0; min-width: 0; }

.field-label {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  font-weight: 500;
  font-size: 14px;
  line-height: 17.6px;
  text-transform: capitalize;
  color: var(--qc-black-800);
  white-space: nowrap;
}

.req {
  font-family: "Inter", var(--font-sans);
  font-weight: 500;
  font-style: normal;
  font-size: 14px;
  line-height: 17.6px;
  color: var(--red-normal);
}

.control {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--qc-black-100);
  border-radius: 8px;
  background: transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.control:focus-within {
  border-color: var(--bk-accent);
  box-shadow: 0 0 0 3px rgba(139, 58, 42, .1);
}

.control input[type="text"],
.control input[type="email"],
.control input[type="tel"],
.control input[type="number"] {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 17.6px;
  color: var(--qc-black-800);
}
.control input::placeholder { color: var(--qc-black-300); opacity: 1; }

/* Phone */
.control-phone { gap: 10px; }
.phone-prefix { position: relative; display: flex; align-items: center; gap: 10px; flex: none; }
.phone-prefix:hover .caret { transform: translateY(1px); }
.phone-prefix .caret { transition: transform .15s ease; }
.dial-code {
  font-weight: 400;
  font-size: 14px;
  line-height: 17.6px;
  color: var(--qc-black-800);
}
.phone-prefix .caret { width: 12px; height: 6px; }

.flag {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 188px;
  overflow: hidden;
  object-fit: cover;
  background: #eceaf0;
}

/* Invisible native select laid over a design-matched face (phone dial code). */
.overlay-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  cursor: pointer;
}

/* Selects */
.control-select { position: relative; justify-content: space-between; gap: 10px; padding-right: 12px; }
.control-select select {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 17.6px;
  color: var(--qc-black-800);
  cursor: pointer;
}
.control-select select:has(option[value=""]:checked) { color: var(--qc-black-300); }
.control-select .chevron { flex: none; width: 24px; height: 24px; pointer-events: none; }
.control-select.has-flag { gap: 10px; }

/* Dates */
.control-date { position: relative; justify-content: space-between; padding: 0 10px; cursor: pointer; }
.control-date input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  cursor: pointer;
}
.control-date input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; }
.date-display {
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  color: var(--qc-black-800);
  white-space: nowrap;
  pointer-events: none;
}
.date-display.is-placeholder { color: var(--qc-black-300); }
.control-date .calendar { flex: none; width: 20px; height: 20px; pointer-events: none; }

/* Check-out is locked to check-in while "Short stay" is on. */
.control-date.is-locked {
  background: #f5f5f7;
  border-color: var(--hairline);
  cursor: not-allowed;
}
.control-date.is-locked input[type="date"] { pointer-events: none; }
.control-date.is-locked .date-display { color: var(--qc-black-300); }
.control-date.is-locked .calendar { opacity: .45; }

.field-hint {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--qc-black-300);
}

/* Stay group */
.stay-group { display: flex; flex-direction: column; gap: 32px; }

.short-stay-row { display: flex; align-items: center; gap: 16px; }

.checkbox {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1px solid var(--purple-100);
  border-radius: 6px;
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.checkbox:checked { background: var(--bk-accent); border-color: var(--bk-accent); }
.checkbox:checked::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}

.short-stay-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 17.6px;
  text-transform: capitalize;
  color: var(--qc-black-800);
  white-space: nowrap;
  cursor: pointer;
}
.short-stay-hint {
  font-weight: 400;
  font-size: 13px;
  line-height: 17.6px;
  color: var(--qc-black-300);
  white-space: nowrap;
}
/* Short-stay duration presets — short_stay_hours is an integer, min 1. */
.short-stay-hours { display: flex; flex-direction: column; gap: 8px; }

.hour-presets { display: flex; flex-wrap: wrap; gap: 12px; }

.hour-chip {
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: #f3f3f5;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--qc-black-800);
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hour-chip:hover { background: #e9e9ec; }
.hour-chip.is-selected {
  background: var(--bk-accent);
  border-color: var(--bk-accent);
  color: #fff;
}
.short-stay-hours.has-error .hour-chip { border-color: var(--red-normal); }

/* Textarea */
.control-textarea { height: 90px; align-items: flex-start; padding: 12px; }
.control-textarea textarea {
  flex: 1 0 0;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 17.6px;
  color: var(--qc-black-800);
}
.control-textarea textarea::placeholder { color: var(--qc-black-300); opacity: 1; }

/* Inline validation */
.field-error {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--red-normal);
}
.field-error:empty { display: none; }
.input-field.has-error .control { border-color: var(--red-normal); }

/* =========================================================
   Room cards
   ========================================================= */
.room-list { display: flex; flex-direction: column; gap: 20px; }

.room-card {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .03);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.room-card.is-selected {
  border-color: var(--bk-accent);
  box-shadow: 0 4px 12px 0 rgba(139, 58, 42, .12);
}
.room-card.is-soldout { opacity: .6; }

.room-image { position: relative; flex: none; width: 350px; }
.room-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.room-content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 24px;
}

.room-top { display: flex; align-items: flex-start; gap: 24px; }
.top-info { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.room-name {
  margin: 0;
  font-weight: 600;
  font-size: 22px;
  line-height: normal;
  color: var(--ink-800);
}

.meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.meta-item { display: flex; align-items: center; gap: 4px; }
.meta-item img { width: 16px; height: 16px; }
.meta-item span {
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  color: var(--ink-600);
  white-space: nowrap;
}

.amenities-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.amenity {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
}
.amenity img { width: 14px; height: 14px; }
.amenity span {
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  color: var(--ink-600);
  white-space: nowrap;
}

.cancellation {
  margin: 0;
  flex: none;
  font-weight: 500;
  font-size: 13px;
  line-height: normal;
  color: #4caf50;
  white-space: nowrap;
}
.cancellation:empty { display: none; }

/* Availability strip */
.availability { display: flex; flex-direction: column; gap: 8px; }
.availability-title {
  margin: 0;
  font-weight: 500;
  font-size: 14px;
  line-height: normal;
  color: var(--ink-800);
}

.date-availability-strip { display: flex; align-items: stretch; gap: 8px; overflow: hidden; }
.date-cell {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  background: var(--eja-green-50);
}
.date-cell .d {
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  color: var(--ink-800);
  width: 100%;
}
.date-cell .s {
  font-weight: 500;
  font-size: 11px;
  line-height: normal;
  color: var(--eja-green-500);
  width: 100%;
}
.date-cell.is-soldout { background: var(--red-50); }
.date-cell.is-soldout .s { color: var(--red-500); }

.rooms-left {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  color: var(--violet-500);
}

/* Bottom row — pricing is the only child, so it stays right-aligned. */
.bottom-info { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }

.pricing { display: flex; align-items: center; gap: 24px; }
.price-block { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.rate { margin: 0; }
.rate strong {
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  color: var(--ink-800);
}
.rate .per {
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  color: var(--ink-600);
}
.line-total {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: normal;
  color: var(--ink-600);
}

.reserve-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 3px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--bk-accent);
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .2s ease;
}
.reserve-btn:hover:not(:disabled) { filter: brightness(1.1); }
.reserve-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Quantity counter (selected state) */
.counter { display: flex; align-items: center; gap: 8px; width: 156px; height: 44px; }
.counter button {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0.5px solid var(--violet-100);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: opacity .15s ease;
}
.counter button img { width: 14px; height: auto; }
.counter button.plus img { width: 14px; height: 14px; }
.counter button:disabled { opacity: .5; cursor: not-allowed; }
.counter .value {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: #fff;
  font-weight: 500;
  font-size: 20px;
  line-height: normal;
  color: var(--violet-800);
}

/* Room list states */
.room-note {
  margin: 0;
  padding: 40px 24px;
  border: 1px dashed var(--hairline);
  border-radius: 20px;
  background: #fff;
  text-align: center;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: var(--qc-black-300);
}
.room-note.is-error { border-color: var(--red-normal); color: var(--red-normal); }

.room-skeleton {
  height: 260px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: linear-gradient(100deg, #fff 30%, #f4f4f6 50%, #fff 70%) 0 0 / 300% 100%;
  animation: bk-shimmer 1.2s linear infinite;
}
@keyframes bk-shimmer { to { background-position: -300% 0; } }

/* =========================================================
   Reservation summary sidebar
   ========================================================= */
.booking-summary-sidebar {
  position: sticky;
  top: 24px;
  flex: none;
  width: 420px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
  background: var(--bk-sand);
  border: 1px solid var(--bk-sand-line);
  border-radius: 8px;
}

.summary-title {
  margin: 0;
  width: 100%;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  line-height: normal;
  color: var(--bk-dark);
}

.summary-divider { display: block; width: 100%; height: 1px; background: var(--bk-sand-line); }

.suite-preview { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.suite-image { width: 100%; height: 180px; border-radius: 4px; object-fit: cover; }
.suite-meta { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.suite-name {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  line-height: normal;
  color: var(--bk-dark);
}
.suite-sub {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  color: var(--bk-muted-warm);
}
.suite-sub:empty { display: none; }

.detail-rows,
.pricing-container { display: flex; flex-direction: column; gap: 12px; width: 100%; font-size: 13px; }

.summary-row,
.price-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

.row-label { font-weight: 400; line-height: normal; color: var(--bk-muted-warm); }
.row-value { font-weight: 600; line-height: normal; color: var(--bk-dark); text-align: right; }
.row-amount { font-weight: 400; line-height: normal; color: var(--bk-dark); white-space: nowrap; }

.total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%; }
.total-label {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  line-height: normal;
  color: var(--bk-dark);
}
.total-amount {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: normal;
  color: var(--bk-accent);
  white-space: nowrap;
}
.total-amount.is-empty { opacity: .5; }

.confirm-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 0;
  border: 0;
  border-radius: 4px;
  background: var(--bk-accent);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  line-height: normal;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bk-cream);
  cursor: pointer;
  transition: filter .2s ease, opacity .2s ease;
}
.confirm-button:hover:not(:disabled) { filter: brightness(1.1); }
.confirm-button:disabled { opacity: .4; cursor: not-allowed; }
.confirm-button.is-busy { opacity: .7; cursor: progress; }

.summary-status {
  margin: 0;
  padding: 12px 14px;
  border-radius: 6px;
  font-weight: 400;
  font-size: 13px;
  line-height: 19px;
}
.summary-status.is-error { background: var(--red-50); color: #a32720; }
.summary-status strong { font-weight: 600; }

/* =========================================================
   Booking confirmed modal
   ========================================================= */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(44, 24, 16, .52);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: bk-fade .25s ease both;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 440px;
  padding: 44px 40px 32px;
  background: var(--bk-page);
  border: 1px solid var(--bk-sand-line);
  border-radius: 14px;
  box-shadow: 0 34px 80px -24px rgba(44, 24, 16, .5);
  text-align: center;
  animation: bk-modal-in .5s cubic-bezier(.22,.9,.3,1) both;
}
@keyframes bk-modal-in {
  from { opacity: 0; transform: translateY(22px) scale(.965); }
  to   { opacity: 1; transform: none; }
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background .18s ease;
}
.modal-close:hover { background: var(--bk-sand); }
.modal-close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--bk-muted-warm);
  stroke-width: 1.7;
  stroke-linecap: round;
}

/* Animated confirmation mark */
.modal-check { width: 72px; height: 72px; margin: 0 auto 22px; }
.modal-check svg { display: block; width: 100%; height: 100%; }

.mc-disc { fill: rgba(139, 58, 42, .07); }
.mc-ring {
  fill: none;
  stroke: var(--bk-accent);
  stroke-width: 1.8;
  opacity: .3;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: mc-draw .65s cubic-bezier(.3,.7,.3,1) .08s forwards;
}
.mc-tick {
  fill: none;
  stroke: var(--bk-accent);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: mc-draw .42s cubic-bezier(.65,0,.4,1) .46s forwards;
}
@keyframes mc-draw { to { stroke-dashoffset: 0; } }

.modal-title {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  color: var(--bk-dark);
}

.modal-lede {
  margin: 0 auto;
  max-width: 320px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--bk-muted-warm);
}

.modal-details {
  margin: 26px 0 28px;
  padding: 4px 18px;
  background: var(--bk-sand);
  border: 1px solid var(--bk-sand-line);
  border-radius: 10px;
  text-align: left;
}
.modal-details:empty { display: none; }

.modal-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}
.modal-row + .modal-row { border-top: 1px solid var(--bk-sand-line); }

.modal-row dt {
  flex: none;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  color: var(--bk-muted-warm);
}
.modal-row dd {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  color: var(--bk-dark);
  text-align: right;
  word-break: break-all;
}
.modal-row dd.is-reference { letter-spacing: .4px; }
.modal-row dd.is-amount { font-family: var(--font-serif); font-size: 18px; color: var(--bk-accent); }

.modal-action {
  width: 100%;
  padding: 15px 0;
  border: 0;
  border-radius: 4px;
  background: var(--bk-accent);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--bk-cream);
  cursor: pointer;
  transition: filter .2s ease, transform .12s ease;
}
.modal-action:hover { filter: brightness(1.1); }
.modal-action:active { transform: scale(.985); }

@media (max-width: 480px) {
  .modal { padding: 36px 22px 26px; border-radius: 12px; }
  .modal-title { font-size: 22px; }
  .modal-check { width: 62px; height: 62px; margin-bottom: 18px; }
  .modal-details { padding: 2px 14px; margin: 22px 0 24px; }
  .modal-row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .modal-row dd { text-align: left; }
}

/* =========================================================
   Footer
   ========================================================= */
.bk-footer {
  display: flex;
  flex-direction: column;
  gap: 64px;
  padding: 80px 80px 40px;
  background: var(--bk-dark);
}

.footer-columns { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; }

.footer-brand { width: 320px; display: flex; flex-direction: column; gap: 16px; }
.footer-tagline {
  margin: 0;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  color: var(--bk-sand-line);
}

.footer-nav,
.footer-contact { display: flex; flex-direction: column; gap: 12px; }

.footer-heading {
  margin: 0;
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: var(--bk-cream);
}

.footer-nav a,
.footer-contact a {
  font-weight: 400;
  font-size: 13px;
  line-height: normal;
  color: var(--bk-sand-line);
  transition: color .2s ease;
}
.footer-nav a:hover,
.footer-contact a:hover { color: var(--bk-cream); }

.footer-divider { display: block; width: 100%; height: 1px; background: var(--bk-sand-line); opacity: .2; }

.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.copyright {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  color: var(--bk-sand-line);
}
.socials { display: flex; align-items: flex-start; gap: 16px; }
.socials img { width: 20px; height: 20px; transition: opacity .2s ease; }
.socials a:hover img { opacity: .7; }

/* =========================================================
   Motion
   ========================================================= */
@keyframes bk-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes bk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bk-pop  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes bk-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bk-pulse {
  0%   { transform: none; }
  35%  { transform: scale(1.055); }
  100% { transform: none; }
}

.hero-title-section h1     { animation: bk-rise .55s cubic-bezier(.22,.7,.3,1) both; }
.title-divider             { animation: bk-grow .5s cubic-bezier(.22,.7,.3,1) .25s both; transform-origin: center; }
.panel                     { animation: bk-rise .6s cubic-bezier(.22,.7,.3,1) .1s both; }
.booking-summary-sidebar   { animation: bk-rise .6s cubic-bezier(.22,.7,.3,1) .2s both; }
.bk-header                 { animation: bk-fade .4s ease both; }

/* Room cards stagger in as they render; --i is set in JS. */
.room-card {
  animation: bk-rise .45s cubic-bezier(.22,.7,.3,1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.room-note, .room-skeleton { animation: bk-fade .35s ease both; }

/* Availability cells ripple across the strip. */
.date-cell {
  animation: bk-pop .3s cubic-bezier(.22,.7,.3,1) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}

.hour-chip {
  animation: bk-pop .3s cubic-bezier(.22,.7,.3,1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.hour-chip:active { transform: scale(.96); }

.summary-status { animation: bk-rise .35s cubic-bezier(.22,.7,.3,1) both; }
.suite-image    { animation: bk-fade .45s ease both; }

/* Pulse the total whenever it changes. */
.total-amount.is-updated { animation: bk-pulse .45s cubic-bezier(.22,.7,.3,1); }

/* Micro-interactions */
.room-card { transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease; }
@keyframes bk-carried { 0%,100% { box-shadow: 0 0 0 0 rgba(139,58,42,0); } 30% { box-shadow: 0 0 0 4px rgba(139,58,42,.28); } }
.room-card.is-carried-over { animation: bk-carried 1.5s cubic-bezier(.22,.7,.3,1); }

.room-card:not(.is-soldout):hover { transform: translateY(-2px); box-shadow: 0 10px 26px 0 rgba(0,0,0,.06); }
.reserve-btn:active:not(:disabled),
.confirm-button:active:not(:disabled),
.book-now-button:active { transform: scale(.985); }
.counter button:active:not(:disabled) { transform: scale(.94); }
.socials a:hover img { transform: translateY(-2px); }
.socials img { transition: opacity .2s ease, transform .2s ease; }

/* =========================================================
   Responsive — the artboard is 1920px; scale down gracefully
   ========================================================= */

/* Fluid gutters and type, so every width in between behaves. */
.bk-header        { padding: clamp(14px, 1.6vw, 24px) clamp(16px, 4.2vw, 80px); }
.hero-title-section { padding: clamp(40px, 5vw, 80px) clamp(16px, 4vw, 40px) clamp(28px, 3vw, 48px); }
.hero-title-section h1 { font-size: clamp(30px, 4.6vw, 64px); }
.main-content-grid { padding: 0 clamp(16px, 4.2vw, 80px) clamp(56px, 7vw, 120px); }
.panel            { padding: clamp(18px, 2.1vw, 32.8px); }
.bk-footer        { padding: clamp(44px, 5vw, 80px) clamp(16px, 4.2vw, 80px) clamp(28px, 2.5vw, 40px); }

@media (max-width: 1740px) {
  .main-content-grid { gap: 32px; }
  .panel { width: auto; flex: 1 1 auto; min-width: 0; }
}

@media (max-width: 1440px) {
  .room-image { width: 300px; }
}

@media (max-width: 1240px) {
  .main-content-grid { flex-direction: column; align-items: stretch; }
  .booking-summary-sidebar { position: static; width: 100%; }
  .room-image { width: 280px; }
}

@media (max-width: 1024px) {
  .navigation { gap: 22px; }
  .bk-header { gap: 20px; }
  .form-section { gap: 18px; }
  .panel { gap: 44px; }
}

@media (max-width: 900px) {
  /* Nav becomes a single scrollable row rather than wrapping raggedly. */
  .bk-header { flex-wrap: wrap; }
  .navigation {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 22px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .navigation::-webkit-scrollbar { display: none; }
  .active-nav-container { gap: 6px; }

  .footer-columns { flex-direction: column; gap: 32px; }
  .footer-brand { width: 100%; }

  .room-card { flex-direction: column; }
  .room-image { width: 100%; height: clamp(180px, 32vw, 260px); }
  .room-content { gap: 24px; }
  .bottom-info { flex-direction: column; align-items: stretch; gap: 16px; }

  /* The price block is nowrap, so give the action room instead of letting it clip. */
  .pricing { flex-wrap: wrap; justify-content: space-between; gap: 12px 16px; }
  .price-block { align-items: flex-start; }
  .pricing .action { margin-left: auto; }
}

@media (max-width: 760px) {
  .pricing { flex-direction: column; align-items: stretch; }
  .pricing .action { margin-left: 0; }
  .reserve-btn,
  .counter { width: 100%; }

  .field-row { flex-direction: column; gap: 18px; }
  .stay-group { gap: 22px; }
  .short-stay-row { flex-wrap: wrap; gap: 10px 12px; }
  .short-stay-hint { white-space: normal; flex-basis: 100%; }
  .booking-summary-sidebar { padding: 24px; }
  .room-top { flex-direction: column; gap: 12px; }
  .cancellation { white-space: normal; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* Keep night cells legible instead of crushing them. */
  .date-availability-strip {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .date-cell { flex: 0 0 84px; }
}

@media (max-width: 560px) {
  .room-name { font-size: 19px; }
  .section-heading { font-size: 21px; }
  .summary-title { font-size: 20px; }
  .rate strong { font-size: 21px; }
  .total-label { font-size: 18px; }
  .total-amount { font-size: 24px; }
  .meta { gap: 10px 14px; }
  .hour-presets { gap: 8px; }
  .hour-chip { padding: 9px 14px; font-size: 13px; }
  .logo-name { font-size: 18px; }
  .logo-sub { letter-spacing: 2px; }
  .room-content { padding: 18px; }
}

@media (max-width: 380px) {
  .hour-chip { flex: 1 0 calc(50% - 4px); text-align: center; }
  .navigation a { font-size: 12px; letter-spacing: 1px; }
  .book-now-button { padding: 10px 18px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .room-card:not(.is-soldout):hover { transform: none; }
}