/* =============================================================================
   PRINS & PRINS — BOOKING PAGE V2 OVERRIDES
   Re-skins booking.html from the warm parchment palette (cream surfaces +
   brownish ink) to the white + sage-green + brass editorial palette used
   on the home and collection pages. Loaded LAST so it wins the cascade.

   We don't rewrite the booking-specific layout rules — we re-bind the
   palette tokens those rules read from, then patch a handful of surfaces
   that referenced literal hex values.
   ============================================================================= */

body.page-booking {
  /* Rebind the global tokens for the booking page only. Existing booking
     CSS reads `var(--bg)` / `var(--bg-soft)` / `var(--ink)` / `--gold-deep`
     and inherits the new values automatically. */
  --bg:        #FFFFFF;
  --bg-soft:   #FFFFFF;
  --bg-warm:   #E4ECDF;
  --bg-edge:   rgba(31, 61, 46, 0.16);
  --ink:       #0F1A14;
  --ink-soft:  #2D3D33;
  --ink-dim:   #6D7F73;
  --gold-deep: #1F3D2E;
  --gold-warm: #3F5046;
  --gold:      #E8C16A;

  background:
    radial-gradient(900px 700px at 18% 8%,  rgba(228, 236, 223, 0.55) 0%, transparent 65%),
    radial-gradient(900px 700px at 82% 14%, rgba(244, 248, 240, 0.55) 0%, transparent 70%),
    #FFFFFF !important;
  color: #0F1A14 !important;
}

/* ---------- HERO — the museum cave portal, replacing the diamond photograph
   on 16 Aug 2026. Layout lives in booking.html; this only holds the ink,
   which has to beat the page-wide `color: #0F1A14` rebind above. ---------- */
/* Trimmed from 620px on 20 Aug 2026. The enquiry form is the reason anyone
   opens this page, and at 620px plus padding the hero alone ran past a phone
   screen, so the chooser and the first field both started below the fold. The
   artwork still carries the page; it just stops short of a full screen. */
body.page-booking .bk-hero { min-height: 470px !important; }
body.page-booking .bk-hero .eyebrow {
  color: #F0D58A !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6) !important;
}
body.page-booking .bk-hero-h1 {
  color: #FFFFFF !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), 0 8px 34px rgba(0, 0, 0, 0.6) !important;
}
body.page-booking .bk-hero-h1 em { color: #F0D58A !important; }
body.page-booking .bk-hero-sub {
  color: #FBFBF7 !important;
  font-weight: 400 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 2px 18px rgba(0, 0, 0, 0.55) !important;
}
body.page-booking .bk-trust-score { color: #FFFFFF !important; }
body.page-booking .bk-trust-score.is-pla { color: #E8C16A !important; }
body.page-booking .bk-trust-label { color: rgba(255, 255, 255, 0.66) !important; }

/* ---------- ACCORDION COLLAPSE FIX — the 0fr grid left ~127px of phantom
   height when closed, opening a gap above the form. Force a true 0. ---------- */
body.page-booking .bk-process-content {
  display: block !important;
  grid-template-rows: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.5s !important;
}
body.page-booking .bk-process-content.open {
  max-height: 2200px !important;
}

/* ---------- FORM CARD — strong visual presence so it lifts off the page ---------- */
body.page-booking .bk-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(31, 61, 46, 0.32) !important;
  box-shadow:
    0 0 0 1px rgba(232, 193, 106, 0.18),
    0 50px 110px -40px rgba(15, 26, 20, 0.4),
    0 18px 38px -22px rgba(15, 26, 20, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.page-booking .bk-card::before {
  /* Brass LED beam on top of the card — thicker, brighter */
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 193, 106, 0.6) 18%,
    #E8C16A 38%,
    #FFF1C4 50%,
    #E8C16A 62%,
    rgba(232, 193, 106, 0.6) 82%,
    transparent 100%) !important;
  opacity: 1 !important;
  height: 3px !important;
  box-shadow: 0 0 18px rgba(255, 241, 196, 0.9), 0 0 36px rgba(232, 193, 106, 0.45) !important;
}

body.page-booking .bk-progress-track { background: rgba(31, 61, 46, 0.14) !important; }
body.page-booking .bk-progress-fill  { background: linear-gradient(90deg, #1F3D2E 0%, #E8C16A 100%) !important; }
body.page-booking .bk-progress-label { color: #1F3D2E !important; }
body.page-booking .bk-progress-label .pl-num { color: #E8C16A !important; }

/* ---------- TYPOGRAPHY INSIDE CARD ---------- */
body.page-booking .bk-step-title {
  color: #0F1A14 !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-weight: 400 !important;
}
body.page-booking .bk-step-title em { color: #1F3D2E !important; }
body.page-booking .bk-step-helper { color: #2D3D33 !important; }

/* ---------- SELECTION PIECES ---------- */
body.page-booking .bk-selection { border-bottom: 1px solid rgba(31, 61, 46, 0.22) !important; }
body.page-booking .bk-selection-eyebrow {
  color: #1F3D2E !important;
  font-weight: 800 !important;
  letter-spacing: 0.30em !important;
  font-size: 0.72rem !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
body.page-booking .bk-selection-helper {
  color: #0F1A14 !important;
  font-weight: 400 !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
}
body.page-booking .bk-selection-item { border-top: 1px solid rgba(31, 61, 46, 0.18) !important; }
body.page-booking .bk-selection-thumb {
  background: #F2F6EE !important;
  border: 1px solid rgba(31, 61, 46, 0.22) !important;
}
body.page-booking .bk-selection-name  { color: #0F1A14 !important; font-weight: 500 !important; }
body.page-booking .bk-selection-price { color: #1F3D2E !important; font-weight: 600 !important; }
body.page-booking .bk-selection-remove {
  border: 1px solid rgba(31, 61, 46, 0.40) !important;
  color: #1F3D2E !important;
}
body.page-booking .bk-selection-remove:hover {
  border-color: #1F3D2E !important;
  background: #1F3D2E !important;
  color: #FFFFFF !important;
}
body.page-booking .bk-selection-add {
  color: #1F3D2E !important;
  font-weight: 700 !important;
}
body.page-booking .bk-selection-clear {
  color: #1F3D2E !important;
  font-weight: 600 !important;
}

/* Progress indicator readability */
body.page-booking .bk-progress-label { color: #0F1A14 !important; font-weight: 700 !important; }
body.page-booking .bk-progress-label .pl-num { color: #1F3D2E !important; font-weight: 800 !important; }

/* "How the bespoke process works" toggle — give it card-level presence */
body.page-booking .bk-process-toggle {
  background: #FFFFFF !important;
  border: 1px solid rgba(31, 61, 46, 0.32) !important;
  box-shadow:
    0 0 0 1px rgba(232, 193, 106, 0.18),
    0 24px 56px -32px rgba(15, 26, 20, 0.32) !important;
}
body.page-booking .bk-process-toggle:hover {
  border-color: #1F3D2E !important;
  box-shadow:
    0 0 0 1px rgba(232, 193, 106, 0.32),
    0 28px 64px -28px rgba(15, 26, 20, 0.42) !important;
}
body.page-booking .bp-eyebrow {
  color: #1F3D2E !important;
  font-weight: 800 !important;
  letter-spacing: 0.30em !important;
}
body.page-booking .bp-title {
  color: #0F1A14 !important;
}

/* ---------- SERVICE PANEL — green wash that holds the heading + tiles together ---------- */
body.page-booking .bk-step[data-step="1"] {
  position: relative;
  padding: 44px 36px 36px !important;
  background:
    linear-gradient(165deg, #1F3D2E 0%, #173023 55%, #0E1F16 100%) !important;
  border: 1px solid rgba(232, 193, 106, 0.28) !important;
  box-shadow:
    0 0 0 1px rgba(232, 193, 106, 0.12) inset,
    0 30px 80px -40px rgba(15, 26, 20, 0.6) !important;
}
/* Heading + helper recolour for the green ground — ensure clickable layer */
body.page-booking .bk-step[data-step="1"] > * {
  position: relative;
  z-index: 2;
}
body.page-booking .bk-step[data-step="1"] .bk-step-title {
  color: #FBFBF7 !important;
}
body.page-booking .bk-step[data-step="1"] .bk-step-title em {
  color: #E8C16A !important;
  font-style: italic;
}
body.page-booking .bk-step[data-step="1"] .bk-step-helper {
  color: rgba(228, 236, 223, 0.85) !important;
}

/* ---------- SERVICE CHIPS — the chooser, at the head of the form ----------
   This replaces six large tiles that used to occupy a screen of their own,
   ahead of any field. A visitor arriving from "Book a Viewing" had already
   chosen; the tiles asked them to choose again. The row below carries the same
   six options in a fraction of the height, and the form starts underneath it
   rather than behind a Continue button. */
body.page-booking .bk-services {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid rgba(232, 193, 106, 0.22) !important;
}
body.page-booking .bk-services-label {
  color: rgba(228, 236, 223, 0.68) !important;
}
body.page-booking .bk-chip {
  position: relative;
  z-index: 2;
  background: rgba(8, 16, 11, 0.28) !important;
  border: 1px solid rgba(232, 193, 106, 0.32) !important;
  color: rgba(228, 236, 223, 0.86) !important;
}
body.page-booking .bk-chip:hover {
  border-color: #E8C16A !important;
  color: #FBFBF7 !important;
}
body.page-booking .bk-chip.selected {
  background: linear-gradient(155deg, rgba(60, 102, 78, 0.9) 0%, rgba(31, 61, 46, 0.95) 100%) !important;
  border-color: #E8C16A !important;
  color: #FBFBF7 !important;
  box-shadow:
    0 0 0 1px #E8C16A,
    0 0 0 4px rgba(232, 193, 106, 0.16) !important;
}
body.page-booking .bk-chip.selected::before { color: #E8C16A !important; }
body.page-booking .bk-chip:focus-visible {
  outline: 2px solid #E8C16A !important;
  outline-offset: 2px !important;
}
body.page-booking .bk-chip-detail {
  color: rgba(228, 236, 223, 0.82) !important;
}

/* Divider between the enquiry detail and the contact block. */
body.page-booking .bk-form-divider span { color: rgba(228, 236, 223, 0.68) !important; }
body.page-booking .bk-form-divider i { background: rgba(232, 193, 106, 0.22) !important; }
body.page-booking .bk-step-title--sub { color: #FBFBF7 !important; }
body.page-booking .bk-step-title--sub em { color: #E8C16A !important; }

@media (max-width: 720px) {
  body.page-booking .bk-step[data-step="1"] { padding: 30px 20px 24px !important; }
}

/* ---------- REVIEW PIECE THUMBS ---------- */
body.page-booking .bk-review-piece img {
  border: 1px solid rgba(31, 61, 46, 0.16) !important;
  background: #F2F6EE !important;
}
body.page-booking .bk-review-piece-name { color: #0F1A14 !important; }

/* ---------- FORM FIELDS ---------- */
body.page-booking input[type="text"],
body.page-booking input[type="email"],
body.page-booking input[type="tel"],
body.page-booking input[type="number"],
body.page-booking input[type="date"],
body.page-booking textarea,
body.page-booking select,
body.page-booking .bk-select-trigger {
  background: #FFFFFF !important;
  border: 1px solid rgba(31, 61, 46, 0.22) !important;
  color: #0F1A14 !important;
}
body.page-booking input:focus,
body.page-booking textarea:focus,
body.page-booking select:focus,
body.page-booking .bk-select.open .bk-select-trigger {
  border-color: #1F3D2E !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px rgba(31, 61, 46, 0.14) !important;
}
body.page-booking label,
body.page-booking .bk-label {
  color: #1F3D2E !important;
}
body.page-booking .bk-help,
body.page-booking .bk-hint {
  color: #6D7F73 !important;
}

/* Custom-select panel */
body.page-booking .bk-select-panel,
body.page-booking .bk-select-menu {
  background: #FFFFFF !important;
  border: 1px solid rgba(31, 61, 46, 0.18) !important;
  box-shadow: 0 24px 60px -28px rgba(15, 26, 20, 0.32) !important;
}
body.page-booking .bk-select-option:hover,
body.page-booking .bk-select-option.is-active {
  background: rgba(228, 236, 223, 0.6) !important;
  color: #0F1A14 !important;
}

/* ---------- CTAs ---------- */
body.page-booking .bk-next,
body.page-booking .bk-submit,
body.page-booking .btn-gold,
body.page-booking button[type="submit"] {
  background: linear-gradient(155deg, #1F3D2E 0%, #14271D 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #1F3D2E !important;
  box-shadow: 0 18px 40px -20px rgba(31, 61, 46, 0.55) !important;
}
body.page-booking .bk-next:hover,
body.page-booking .bk-submit:hover,
body.page-booking .btn-gold:hover,
body.page-booking button[type="submit"]:hover {
  background: #0D2018 !important;
}

body.page-booking .bk-prev,
body.page-booking .btn-outline {
  background: transparent !important;
  color: #1F3D2E !important;
  border: 1px solid #1F3D2E !important;
}
body.page-booking .bk-prev:hover,
body.page-booking .btn-outline:hover {
  background: #1F3D2E !important;
  color: #FFFFFF !important;
}

/* ---------- AT-A-GLANCE RAIL (if present) ---------- */
body.page-booking .bk-side,
body.page-booking .bk-summary,
body.page-booking .bk-review,
body.page-booking .bk-confirm {
  background:
    linear-gradient(155deg, rgba(228, 236, 223, 0.45) 0%, rgba(247, 250, 244, 0.55) 100%) !important;
  border: 1px solid rgba(31, 61, 46, 0.14) !important;
}

/* ---------- LINKS ---------- */
body.page-booking a:not(.bk-chip):not(.btn-gold):not(.btn-outline):not(.nav-cta):not(.f-social):not(.f-cert) {
  color: #1F3D2E;
}
body.page-booking a:not(.bk-chip):not(.btn-gold):not(.btn-outline):hover {
  color: #0F1A14;
}

/* ---------- ANYTHING THAT STILL READS THE OLD CREAM SHADE ----------
   Catches inline rgba(245, 239, 230, ...) parchment washes scattered in
   the booking style block. We map them to white wherever they appear. */
body.page-booking [style*="245, 239, 230"] {
  background-color: #FFFFFF !important;
}


/* ---------- REVIEW GRID: tighten the key column, add a tablet band ---------- */
body.page-booking .bk-review-row {
  grid-template-columns: minmax(140px, 180px) 1fr !important;
}
@media (max-width: 720px) and (min-width: 601px) {
  body.page-booking .bk-review-row {
    grid-template-columns: minmax(120px, 150px) 1fr !important;
    gap: 16px !important;
  }
}

/* =============================================================================
   GREEN FORM PANELS — every service's detail (step 2) and contact (step 3)
   forms get the gold-framed emerald ground that Step 1 already uses, with
   white gold-edged fields that stand out. Elegant, luxury, consistent.
   ============================================================================= */
body.page-booking .bk-step[data-step="1"] {
  position: relative;
  padding: 48px 40px 40px !important;
  background: linear-gradient(165deg, #1F3D2E 0%, #173023 55%, #0E1F16 100%) !important;
  border: 1px solid rgba(232, 193, 106, 0.30) !important;
  box-shadow:
    0 0 0 1px rgba(232, 193, 106, 0.12) inset,
    0 30px 80px -40px rgba(15, 26, 20, 0.6) !important;
}
@media (max-width: 720px) {
  body.page-booking .bk-step[data-step="1"] { padding: 30px 20px 26px !important; }
}

/* Heading + helper for the green ground */
body.page-booking .bk-step[data-step="1"] .bk-step-title { color: #FBFBF7 !important; }
body.page-booking .bk-step[data-step="1"] .bk-step-title em { color: #E8C16A !important; }
body.page-booking .bk-step[data-step="1"] .bk-step-helper { color: rgba(228, 236, 223, 0.85) !important; }

/* Brass labels */
body.page-booking .bk-step[data-step="1"] .bk-label { color: #E8C16A !important; }
body.page-booking .bk-step[data-step="1"] .bk-label .req { color: #E8C16A !important; }
body.page-booking .bk-step[data-step="1"] .bk-label .opt { color: rgba(228, 236, 223, 0.6) !important; }

/* White, gold-framed fields that stand out on the green */
body.page-booking .bk-step[data-step="1"] input:not([type="checkbox"]):not([type="file"]),
body.page-booking .bk-step[data-step="1"] textarea,
body.page-booking .bk-step[data-step="1"] .bk-select,
body.page-booking .bk-step[data-step="1"] input:not([type="checkbox"]):not([type="file"]),
body.page-booking .bk-step[data-step="1"] textarea,
body.page-booking .bk-step[data-step="1"] .bk-select {
  background: #FFFFFF !important;
  border: 1px solid rgba(232, 193, 106, 0.7) !important;
  color: #0F1A14 !important;
  box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.55) !important;
}
body.page-booking .bk-step[data-step="1"] input:focus,
body.page-booking .bk-step[data-step="1"] textarea:focus,
body.page-booking .bk-step[data-step="1"] input:focus,
body.page-booking .bk-step[data-step="1"] textarea:focus,
body.page-booking .bk-step[data-step="1"] .bk-select.open {
  border-color: #E8C16A !important;
  box-shadow: 0 0 0 3px rgba(232, 193, 106, 0.28) !important;
}
body.page-booking .bk-step[data-step="1"] .bk-select-caret { border-color: #B58A33 !important; }
body.page-booking .bk-step[data-step="1"] .bk-select-list li.selected { color: #1F3D2E !important; }

/* Consent + small print (step 3) */
body.page-booking .bk-step[data-step="1"] .bk-checkbox { color: rgba(228, 236, 223, 0.86) !important; }
body.page-booking .bk-step[data-step="1"] .bk-checkbox-box {
  border-color: rgba(232, 193, 106, 0.6) !important;
  background: #FFFFFF !important;
}

/* File drop zone (step 2) */
body.page-booking .bk-step[data-step="1"] .bk-drop {
  border: 1px dashed rgba(232, 193, 106, 0.55) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
body.page-booking .bk-step[data-step="1"] .bk-drop:hover,
body.page-booking .bk-step[data-step="1"] .bk-drop.drag {
  border-color: #E8C16A !important;
  background: rgba(255, 255, 255, 0.10) !important;
}
body.page-booking .bk-step[data-step="1"] .bk-drop-icon { border-color: #E8C16A !important; color: #E8C16A !important; }
body.page-booking .bk-step[data-step="1"] .bk-drop-title { color: #FBFBF7 !important; }
body.page-booking .bk-step[data-step="1"] .bk-drop-sub { color: rgba(228, 236, 223, 0.7) !important; }
body.page-booking .bk-step[data-step="1"] .bk-drop-browse { color: #E8C16A !important; }
body.page-booking .bk-step[data-step="1"] .bk-file-row {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(232, 193, 106, 0.3) !important;
}
body.page-booking .bk-step[data-step="1"] .bk-file-name .nm { color: #FBFBF7 !important; }
body.page-booking .bk-step[data-step="1"] .bk-file-size { color: rgba(228, 236, 223, 0.7) !important; }

/* Actions: gold Continue lifts off the green; pale Back */
body.page-booking .bk-step[data-step="1"] .bk-actions { border-top-color: rgba(232, 193, 106, 0.25) !important; }
body.page-booking .bk-step[data-step="1"] .bk-btn-next {
  background: linear-gradient(180deg, #F6DE9E 0%, #E8C16A 50%, #C49A44 100%) !important;
  color: #16301F !important;
  border: 1px solid rgba(232, 193, 106, 0.85) !important;
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.55) !important;
}
body.page-booking .bk-step[data-step="1"] .bk-btn-next:hover {
  background: linear-gradient(180deg, #FCEBB8 0%, #EFC974 50%, #D8AE5A 100%) !important;
  transform: translateY(-2px) !important;
}
body.page-booking .bk-step[data-step="1"] .bk-btn-back { color: rgba(228, 236, 223, 0.82) !important; }
body.page-booking .bk-step[data-step="1"] .bk-btn-back:hover { color: #FFFFFF !important; }