/* ==========================================================================
   BOOKING MODAL — drop-in showing scheduler
   --------------------------------------------------------------------------
   Pairs with booking-modal.js. Every class is namespaced `bkm-` so this can
   be dropped onto a host site without colliding with its stylesheet, and no
   bare element selectors are used for the same reason.

   THEMING
   Each custom property below reads the host site's equivalent variable first
   and only falls back to the built-in default when the host doesn't define
   one. Drop this on the 615A McAdam site and it inherits that palette; drop
   it on a bare page and it still looks finished. To force specific colours,
   set the --bkm-* variables yourself on :root — they win over both.
   ========================================================================== */

.bkm-overlay {
  --bkm-bg:          var(--card, #FFFFFF);
  --bkm-fg:          var(--foreground, #1A1A1A);
  --bkm-muted:       var(--muted, #F5F3F0);
  --bkm-muted-fg:    var(--muted-foreground, #6B6B6B);
  --bkm-accent:      var(--accent, #B8860B);
  --bkm-accent-fg:   var(--accent-foreground, #FFFFFF);
  --bkm-accent-soft: var(--accent-muted, rgba(184, 134, 11, 0.06));
  --bkm-border:      var(--border, #E8E4DF);
  --bkm-radius:      8px;
  --bkm-font:        var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  --bkm-font-title:  var(--font-display, Georgia, "Times New Roman", serif);
  --bkm-font-mono:   var(--font-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  --bkm-shadow:      0 24px 64px rgba(0, 0, 0, 0.28);

  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(26, 26, 26, 0.72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  font-family: var(--bkm-font);
  color: var(--bkm-fg);
  line-height: 1.5;
}
.bkm-overlay.bkm-open { display: flex; }

.bkm-overlay * { box-sizing: border-box; }

/* ---------- Panel ---------- */
.bkm-panel {
  position: relative;
  width: 100%;
  /* Narrow while the calendar is alone; widens when the times column joins it. */
  max-width: 38rem;
  margin: auto;
  transition: max-width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--bkm-bg);
  border-radius: var(--bkm-radius);
  box-shadow: var(--bkm-shadow);
  animation: bkm-rise 0.26s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes bkm-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bkm-panel.bkm-has-date { max-width: 58rem; }
@media (prefers-reduced-motion: reduce) {
  .bkm-panel { animation: none; transition: none; }
}

/* ---------- Header ---------- */
.bkm-header {
  position: relative;
  padding: 34px 64px 26px 40px;
  border-bottom: 1px solid var(--bkm-border);
  text-align: center;
}
.bkm-logo {
  display: block;
  max-width: 190px;
  max-height: 46px;
  width: auto;
  margin: 0 auto 18px;
  object-fit: contain;
}
.bkm-eyebrow {
  margin: 0 0 10px;
  font-family: var(--bkm-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bkm-accent);
}
.bkm-title {
  margin: 0 0 8px;
  font-family: var(--bkm-font-title);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--bkm-fg);
}
.bkm-subtitle {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--bkm-muted-fg);
}
.bkm-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--bkm-muted-fg);
  background: none;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.bkm-close:hover { color: var(--bkm-fg); background: var(--bkm-muted); border-color: var(--bkm-border); }
.bkm-close:focus-visible { outline: 2px solid var(--bkm-accent); outline-offset: 2px; }

/* ---------- Body layout ----------
   Two views share the body, one shown at a time: the schedule (calendar, plus
   a times column once a date is picked) and the contact details form. The
   calendar sits alone and centred until .bkm-has-date widens the grid. */
.bkm-body { position: relative; }
.bkm-view[hidden] { display: none; }

.bkm-view-schedule {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.bkm-col-calendar {
  width: 100%;
  max-width: 30rem;
  margin: 0 auto;
  padding: 30px;
  min-width: 0;
}
.bkm-col-times { padding: 30px 26px; min-width: 0; }
.bkm-col-times[hidden] { display: none; }

@media (min-width: 820px) {
  .bkm-has-date .bkm-view-schedule { grid-template-columns: minmax(0, 1fr) 17rem; }
  .bkm-has-date .bkm-col-calendar {
    max-width: none;
    margin: 0;
    border-right: 1px solid var(--bkm-border);
  }
}
@media (max-width: 819px) {
  .bkm-has-date .bkm-col-calendar { border-bottom: 1px solid var(--bkm-border); }
}

.bkm-view-details { padding: 30px; }
.bkm-view-details .bkm-form,
.bkm-view-details .bkm-success { max-width: 34rem; margin: 0 auto; }

.bkm-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 20px;
  padding: 7px 14px 7px 10px;
  font-family: var(--bkm-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bkm-muted-fg);
  background: none;
  border: 1px solid var(--bkm-border);
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.bkm-back:hover { color: var(--bkm-accent); border-color: var(--bkm-accent); }
.bkm-back:focus-visible { outline: 2px solid var(--bkm-accent); outline-offset: 2px; }
.bkm-back[hidden] { display: none; }
.bkm-back span { font-size: 1.125rem; line-height: 1; }

/* On a phone the full-size header pushes the calendar below the fold, so the
   visitor opens the popup and sees only branding. Shrink it to get step 1
   on screen. */
@media (max-width: 560px) {
  .bkm-header { padding: 20px 54px 18px 18px; }
  .bkm-logo { max-height: 32px; margin-bottom: 12px; }
  .bkm-title { font-size: 1.3125rem; }
  .bkm-subtitle { font-size: 0.875rem; }
  .bkm-col-calendar, .bkm-col-times, .bkm-view-details { padding: 22px 18px; }
  .bkm-overlay { padding: 12px 10px; }
}

/* ---------- Step labels ---------- */
.bkm-step {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--bkm-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bkm-muted-fg);
}
.bkm-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid var(--bkm-accent);
  border-radius: 50%;
  color: var(--bkm-accent);
  font-size: 0.6875rem;
}

/* ---------- Calendar ---------- */
.bkm-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.bkm-cal-month {
  font-family: var(--bkm-font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bkm-fg);
}
.bkm-cal-nav {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--bkm-fg);
  background: none;
  border: 1px solid var(--bkm-border);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.bkm-cal-nav:hover:not(:disabled) { border-color: var(--bkm-accent); color: var(--bkm-accent); }
.bkm-cal-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.bkm-cal-nav:focus-visible { outline: 2px solid var(--bkm-accent); outline-offset: 2px; }

.bkm-cal-weekdays,
.bkm-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.bkm-cal-weekdays {
  margin-bottom: 6px;
  font-family: var(--bkm-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--bkm-muted-fg);
}
.bkm-cal-day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: var(--bkm-font-mono);
  font-size: 0.8125rem;
  color: var(--bkm-fg);
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.bkm-cal-day.bkm-empty { cursor: default; }
.bkm-cal-day.bkm-available:hover { border-color: var(--bkm-accent); background: var(--bkm-accent-soft); }
.bkm-cal-day.bkm-past { color: var(--bkm-muted-fg); opacity: 0.35; cursor: not-allowed; }
.bkm-cal-day.bkm-today { font-weight: 700; border-color: var(--bkm-border); }
.bkm-cal-day.bkm-selected,
.bkm-cal-day.bkm-selected:hover {
  background: var(--bkm-accent);
  border-color: var(--bkm-accent);
  color: var(--bkm-accent-fg);
  font-weight: 700;
}
.bkm-cal-day:focus-visible { outline: 2px solid var(--bkm-accent); outline-offset: 1px; }
/* Open-house star sits under the numeral so it never shifts the grid. */
.bkm-cal-day.bkm-openhouse::after {
  content: "\2605";
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.5rem;
  line-height: 1;
  color: var(--bkm-accent);
}
.bkm-cal-day.bkm-selected.bkm-openhouse::after { color: var(--bkm-accent-fg); }

.bkm-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--bkm-border);
  font-size: 0.75rem;
  color: var(--bkm-muted-fg);
}
.bkm-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bkm-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--bkm-accent);
}
.bkm-dot-open { width: auto; height: auto; background: none; color: var(--bkm-accent); font-size: 0.75rem; }

/* ---------- Time slots ---------- */
.bkm-times-label {
  margin: 0 0 14px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--bkm-fg);
}
.bkm-times-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--bkm-muted-fg);
  background: var(--bkm-accent-soft);
  border: 1px solid var(--bkm-border);
  border-radius: 4px;
}
.bkm-times-note[hidden] { display: none; }

/* The list scrolls on its own so a long day of slots never stretches the
   panel past the calendar beside it. */
.bkm-times-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 23rem;
  padding-right: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Stacked, the times sit under the calendar rather than beside it, so there is
   no column height to match — a scroll box inside the scrolling overlay would
   just give the visitor two scrollbars fighting each other. */
@media (max-width: 819px) {
  .bkm-times-list { max-height: none; overflow: visible; padding-right: 0; }
}

.bkm-slot-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  transition: grid-template-columns 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.bkm-slot-row.bkm-slot-row-active { grid-template-columns: 1fr 1fr; }
@media (prefers-reduced-motion: reduce) {
  .bkm-slot-row { transition: none; }
}

.bkm-slot {
  width: 100%;
  padding: 14px 6px;
  font-family: var(--bkm-font-mono);
  font-size: 1rem;
  font-weight: 700;
  color: var(--bkm-accent);
  background: none;
  border: 1px solid var(--bkm-border);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.bkm-slot:hover:not(:disabled) { border-color: var(--bkm-accent); background: var(--bkm-accent-soft); }
.bkm-slot:disabled { opacity: 0.35; color: var(--bkm-muted-fg); cursor: not-allowed; text-decoration: line-through; }
.bkm-slot.bkm-slot-openhouse { border-style: dashed; border-color: var(--bkm-accent); }
/* The chosen time steps back visually so the Next button beside it leads. */
.bkm-slot.bkm-selected,
.bkm-slot.bkm-selected:hover {
  background: var(--bkm-muted-fg);
  border-color: var(--bkm-muted-fg);
  border-style: solid;
  color: #FFFFFF;
  font-weight: 700;
}
.bkm-slot:focus-visible { outline: 2px solid var(--bkm-accent); outline-offset: 2px; }

/* Slides out from behind the time it belongs to, so the eye follows the
   selection across to the button rather than having it blink into being. */
.bkm-next {
  width: 100%;
  padding: 14px 6px;
  font-family: var(--bkm-font-mono);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bkm-accent-fg);
  background: var(--bkm-accent);
  border: 1px solid var(--bkm-accent);
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.15s;
  animation: bkm-next-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes bkm-next-in {
  from { opacity: 0; transform: translateX(-32%) scaleX(0.7); }
  to   { opacity: 1; transform: translateX(0) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .bkm-next { animation: none; }
}
.bkm-next:hover { opacity: 0.9; }
.bkm-next:focus-visible { outline: 2px solid var(--bkm-fg); outline-offset: 2px; }

.bkm-slot-note {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--bkm-muted-fg);
  background: var(--bkm-accent-soft);
  border: 1px dashed var(--bkm-accent);
  border-radius: 4px;
}

/* ---------- Form ---------- */
.bkm-field { margin-bottom: 16px; }
.bkm-label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--bkm-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bkm-muted-fg);
}
.bkm-input,
.bkm-textarea {
  width: 100%;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--bkm-fg);
  background: var(--bkm-bg);
  border: 1px solid var(--bkm-border);
  border-radius: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bkm-textarea { resize: vertical; min-height: 70px; }
.bkm-input:focus,
.bkm-textarea:focus {
  outline: none;
  border-color: var(--bkm-accent);
  box-shadow: 0 0 0 3px var(--bkm-accent-soft);
}

/* Fixed country code welded to the left of the phone box. */
.bkm-affix { display: flex; align-items: stretch; }
.bkm-affix-prefix {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0 13px;
  font-family: var(--bkm-font-mono);
  font-size: 0.9375rem;
  color: var(--bkm-muted-fg);
  background: var(--bkm-muted);
  border: 1px solid var(--bkm-border);
  border-right: none;
  border-radius: 4px 0 0 4px;
}
.bkm-affix .bkm-input { border-radius: 0 4px 4px 0; }
/* The two halves are one control to the eye, so they take focus together. */
.bkm-affix:focus-within .bkm-affix-prefix {
  border-color: var(--bkm-accent);
  color: var(--bkm-accent);
}

.bkm-readout {
  padding: 11px 13px;
  font-size: 0.875rem;
  color: var(--bkm-muted-fg);
  background: var(--bkm-muted);
  border: 1px dashed var(--bkm-border);
  border-radius: 4px;
}
.bkm-readout.bkm-has-value {
  color: var(--bkm-accent);
  font-weight: 600;
  background: var(--bkm-accent-soft);
  border-style: solid;
  border-color: var(--bkm-accent);
}

.bkm-submit {
  width: 100%;
  padding: 14px 20px;
  margin-top: 4px;
  font-family: var(--bkm-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bkm-accent-fg);
  background: var(--bkm-accent);
  border: 1px solid var(--bkm-accent);
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s;
}
.bkm-submit:hover:not(:disabled) { opacity: 0.9; }
.bkm-submit:active:not(:disabled) { transform: translateY(1px); }
.bkm-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.bkm-submit:focus-visible { outline: 2px solid var(--bkm-fg); outline-offset: 2px; }

.bkm-fineprint {
  margin: 14px 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--bkm-muted-fg);
}
.bkm-fineprint a { color: var(--bkm-accent); }

/* ---------- Success ---------- */
.bkm-success { padding: 30px 10px; text-align: center; }
.bkm-success svg { color: var(--bkm-accent); margin-bottom: 14px; }
.bkm-success h3 {
  margin: 0 0 8px;
  font-family: var(--bkm-font-title);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--bkm-fg);
}
.bkm-success p { margin: 0; font-size: 0.9375rem; color: var(--bkm-muted-fg); }

/* ---------- Sold listing ----------
   Replaces the calendar entirely when config.sold.isSold is set. The
   notice has to land before the form does: a visitor who skims straight
   to the fields and types their name without reading will think they
   just booked a showing. Hence the badge, the size jump on the heading,
   and the rule separating notice from form. */
.bkm-view-sold { padding: 30px; }
.bkm-view-sold .bkm-form,
.bkm-view-sold .bkm-success { max-width: 34rem; margin: 0 auto; }

.bkm-sold-notice {
  max-width: 34rem;
  margin: 0 auto 26px;
  padding-bottom: 24px;
  text-align: center;
  border-bottom: 1px solid var(--bkm-border);
}

.bkm-sold-badge {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px;
  font-family: var(--bkm-font-mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bkm-accent-fg);
  background: var(--bkm-accent);
  border-radius: 3px;
}

.bkm-sold-heading {
  margin: 0 0 6px;
  font-family: var(--bkm-font-title);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--bkm-fg);
}

.bkm-sold-date {
  margin: 0 0 12px;
  font-family: var(--bkm-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bkm-muted-fg);
}

.bkm-sold-message {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--bkm-muted-fg);
}

.bkm-sold-hint {
  margin: -8px 0 18px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--bkm-muted-fg);
}

.bkm-sold-error {
  margin: 0 0 14px;
  padding: 10px 13px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--bkm-accent);
  background: var(--bkm-accent-soft);
  border: 1px solid var(--bkm-accent);
  border-radius: 4px;
}
.bkm-sold-error[hidden] { display: none; }

@media (max-width: 560px) {
  .bkm-view-sold { padding: 22px 18px; }
  .bkm-sold-heading { font-size: 1.3125rem; }
}

/* ---------- Host-page scroll lock ---------- */
.bkm-locked { overflow: hidden !important; }