/* ===== Booking modal — availability calendar (own component, independent from the lightbox) =====
   Relies on this site's CSS custom properties (--champagne, --black, --ivory,
   --border, --terracotta, --overlay-dark, --ease-editorial, --font-serif,
   --ink-soft, --champagne-tint, etc.) and the shared .btn-outline-dark /
   .btn-primary-light utility classes — both defined in css/styles.css,
   loaded before this file. A new site reusing this template needs those
   same tokens/utilities defined (or this file's own values adjusted). */
.booking-modal {
  position: fixed; inset: 0; z-index: 210;
  display: none; align-items: center; justify-content: center;
  padding: 24px; background: var(--overlay-dark);
}
.booking-modal.open { display: flex; }
.booking-modal-panel {
  position: relative; width: min(560px, 100%);
  max-height: min(720px, 90vh); overflow-y: auto;
  background: var(--ivory); color: var(--black);
  border-radius: 4px; padding: clamp(28px, 5vw, 48px);
  transform: translateY(18px); opacity: 0;
  transition: transform .4s var(--ease-editorial), opacity .4s var(--ease-editorial);
}
.booking-modal.open .booking-modal-panel { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .booking-modal-panel, .booking-modal.open .booking-modal-panel { transition: opacity .2s ease; transform: none; }
}

.booking-modal-close {
  position: absolute; top: 18px; right: 18px;
  background: none; border: none; color: var(--black); opacity: .6;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  transition: opacity .2s ease;
}
.booking-modal-close:hover, .booking-modal-close:focus-visible { opacity: 1; }
.booking-modal button:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }

.booking-modal-head { padding-right: 32px; }
.booking-modal-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(24px, 3.4vw, 32px); margin-top: 10px; color: var(--black); }

.booking-calendar { margin-top: clamp(24px, 4vw, 32px); }
.booking-calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.booking-month-label { font-family: var(--font-serif); font-weight: 500; font-size: clamp(17px, 2.2vw, 20px); }
.booking-nav-btn {
  background: none; border: 1px solid var(--border); border-radius: 50%;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  color: var(--black); transition: border-color .2s ease, color .2s ease, opacity .2s ease;
}
.booking-nav-btn:hover { border-color: var(--champagne); color: var(--champagne); }
.booking-nav-btn:disabled { opacity: .3; cursor: default; }
.booking-nav-btn:disabled:hover { border-color: var(--border); color: var(--black); }

.booking-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.booking-weekdays span {
  display: block; text-align: center; font-size: 10px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--ink-soft); padding-bottom: 6px;
}
.booking-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; transition: opacity .2s ease; }
.booking-grid.is-loading { opacity: .4; pointer-events: none; }
.booking-day-empty { visibility: hidden; }
.booking-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; border-radius: 2px;
  font-size: 13px; color: var(--black);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.booking-day:not(:disabled):hover { border-color: var(--champagne); }
.booking-day:disabled { color: var(--border); cursor: default; }
.booking-day.is-today { font-weight: 700; }
.booking-day.is-in-range { background: var(--champagne-tint); }
.booking-day.is-checkin, .booking-day.is-checkout { background: var(--black); color: var(--ivory); border-color: var(--black); }

.booking-status { margin-top: 14px; font-size: 13px; color: var(--ink-soft); text-align: center; min-height: 18px; }
.booking-status.is-error { color: var(--terracotta); }

.booking-fallback {
  display: none; flex-direction: column; align-items: center; gap: 14px;
  margin-top: 14px; padding: 20px; border: 1px solid var(--border); border-radius: 4px; text-align: center;
}
.booking-fallback.visible { display: flex; }
.booking-fallback p { font-size: 14px; color: var(--ink-soft); }
.booking-fallback .btn-outline-dark { border-color: var(--black); color: var(--black); padding: 13px 26px; }
.booking-fallback .btn-outline-dark:hover { background: var(--black); color: var(--ivory); }

.booking-selection {
  display: flex; align-items: center; gap: 20px;
  margin-top: clamp(24px, 4vw, 32px); padding-top: 20px; border-top: 1px solid var(--border);
}
.booking-selection-field { flex: 1; min-width: 0; }
.booking-selection-label { display: block; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.booking-selection-value { font-family: var(--font-serif); font-size: clamp(16px, 2.2vw, 20px); }
.booking-selection-divider { width: 1px; height: 30px; background: var(--border); flex: 0 0 auto; }

.booking-continue { width: 100%; justify-content: center; margin-top: 22px; }
.booking-continue:disabled { opacity: .35; cursor: default; }
.booking-continue:disabled:hover { background: var(--black); color: var(--ivory); }

/* ===== Booking modal — step switching (dates / details / success) ===== */
.booking-step { display: none; }
.booking-modal[data-step="dates"] .booking-step[data-step-panel="dates"],
.booking-modal[data-step="details"] .booking-step[data-step-panel="details"],
.booking-modal[data-step="success"] .booking-step[data-step-panel="success"] { display: block; }

.booking-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; margin-bottom: 20px;
  font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink-soft);
  transition: color .2s ease;
}
.booking-back-btn:hover { color: var(--black); }

.booking-recap {
  display: flex; align-items: center; gap: 20px;
  margin-bottom: clamp(24px, 4vw, 32px); padding-bottom: 20px; border-bottom: 1px solid var(--border);
}

/* ===== Booking modal — guest details form ===== */
.booking-form { display: flex; flex-direction: column; gap: 18px; }
.booking-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.booking-field { display: flex; flex-direction: column; gap: 6px; }
.booking-field label { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft); }
.booking-field input, .booking-field textarea {
  font-family: inherit; font-size: 15px; color: var(--black);
  background: none; border: none; border-bottom: 1px solid var(--border);
  padding: 8px 0; transition: border-color .2s ease; border-radius: 0;
}
.booking-field input:focus, .booking-field textarea:focus { outline: none; border-color: var(--champagne); }
.booking-field input[aria-invalid="true"], .booking-field textarea[aria-invalid="true"] { border-color: var(--terracotta); }
.booking-field textarea { resize: vertical; min-height: 64px; }
.booking-field-error { font-size: 12px; color: var(--terracotta); min-height: 15px; }

/* Marketing consent checkbox — consolidated in from the source site's
   separate legal.css (it lived in a second stylesheet there, split out by
   accident during the original extraction) so this template's CSS is
   self-contained. Deliberately NOT .booking-field's own flex-column/
   uppercase-label-above layout (that's for text inputs) — a plain
   checkbox+label row instead, with a comfortable mobile tap target on the
   whole row. */
.booking-marketing-consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 4px; padding: 4px 0;
}
.booking-marketing-consent input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0;
  accent-color: var(--champagne); cursor: pointer;
}
.booking-marketing-consent label {
  /* .booking-field label above sets its own uppercase/letter-spacing for a
     text-input label sitting ABOVE its field — both explicitly undone
     here, since this is a sentence-length checkbox label sitting beside
     its input, not that. */
  font-size: 13px; line-height: 1.5; color: var(--ink-soft); cursor: pointer;
  text-transform: none; letter-spacing: normal;
}

.booking-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.booking-form-error { margin-top: 4px; font-size: 13px; color: var(--terracotta); text-align: center; min-height: 16px; }

.booking-success { text-align: center; padding: clamp(20px, 4vw, 32px) 0; }
.booking-success:focus { outline: none; }
.booking-success-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(26px, 3.6vw, 34px); color: var(--black); }
.booking-success-text { font-size: 15px; line-height: 1.7; color: var(--ink-soft); margin-top: 16px; max-width: 420px; margin-left: auto; margin-right: auto; }
.booking-success-reference:empty { display: none; }
.booking-success-reference { font-size: 14px; line-height: 1.6; color: var(--black); background: var(--champagne-tint); border-radius: 4px; padding: 12px 18px; margin: 20px auto 0; max-width: 420px; }
.booking-success .btn-outline-dark { margin-top: 28px; border-color: var(--black); color: var(--black); }
.booking-success .btn-outline-dark:hover { background: var(--black); color: var(--ivory); }

@media (max-width: 640px) {
  .booking-modal { padding: 0; align-items: flex-end; }
  .booking-modal-panel { width: 100%; max-height: 92vh; border-radius: 12px 12px 0 0; padding: 26px 20px 30px; }
  .booking-selection { gap: 14px; }
}
@media (max-width: 480px) {
  .booking-form-row { grid-template-columns: 1fr; }
}