/* =====================================================================
   MATHEN BOOKING — the slot picker.

   Inherits the host build's palette through these variables. A build
   that already defines --ink / --paper / --accent gets a booking widget
   that matches it automatically; anything undefined falls back here.

   Mobile is the device: 390px first, 44px minimum touch targets.
   ===================================================================== */
.bk {
  --bk-ink:      var(--ink, #1B1A18);
  --bk-ink-2:    var(--ink-2, #55504A);
  --bk-ink-3:    var(--ink-3, #857E75);
  --bk-paper:    var(--paper, #FFFFFF);
  --bk-sunk:     var(--paper-2, #F1EEE9);
  --bk-edge:     var(--edge, #DCD6CC);
  --bk-accent:   var(--wine, var(--accent, #6E2B2B));
  --bk-accent-in:#FFFFFF;
  --bk-ok:       #1D6B45;
  --bk-ok-bg:    #DFF0E5;

  display: block;
  max-width: 560px;
  font-variant-numeric: tabular-nums;
}

/* ---- steps ---------------------------------------------------------- */
.bk-step { display: none; }
.bk-step.is-on { display: block; }
.bk-rail {
  display: flex; gap: .4rem; margin-bottom: 1.1rem;
  font-size: .78rem; color: var(--bk-ink-3);
}
.bk-rail span { display: flex; align-items: center; gap: .35rem; }
.bk-rail span::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--bk-edge);
}
.bk-rail span.on::before { background: var(--bk-accent); }
.bk-rail span.on { color: var(--bk-ink); font-weight: 600; }
.bk-rail i { color: var(--bk-edge); font-style: normal; }

/* ---- service select ------------------------------------------------- */
.bk-field { margin-bottom: 1rem; }
.bk-field label {
  display: block; font-weight: 600; color: var(--bk-ink);
  margin-bottom: .35rem; font-size: 1rem;
}
.bk select, .bk input[type=text], .bk textarea {
  width: 100%; font: inherit; font-size: 1.02rem; color: var(--bk-ink);
  background: var(--bk-paper); border: 2px solid var(--bk-edge);
  border-radius: 10px; padding: .75rem .85rem; min-height: 48px;
}
.bk textarea { min-height: 88px; resize: vertical; }
.bk select:focus, .bk input:focus, .bk textarea:focus {
  outline: none; border-color: var(--bk-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bk-accent) 18%, transparent);
}

/* ---- month ---------------------------------------------------------- */
.bk-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .75rem;
}
.bk-month { font-weight: 700; color: var(--bk-ink); font-size: 1.1rem; margin: 0; }
.bk-nav {
  width: 44px; height: 44px; border-radius: 10px; cursor: pointer;
  background: var(--bk-paper); border: 1px solid var(--bk-edge);
  color: var(--bk-ink); font-size: 1.1rem; line-height: 1;
}
.bk-nav:hover:not(:disabled) { border-color: var(--bk-accent); color: var(--bk-accent); }
.bk-nav:disabled { opacity: .35; cursor: default; }

.bk-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bk-dow {
  text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  color: var(--bk-ink-3); padding-bottom: .3rem;
}
.bk-day {
  font: inherit; font-size: 1rem; cursor: pointer;
  aspect-ratio: 1; min-height: 44px;
  background: var(--bk-paper); border: 1px solid var(--bk-edge);
  border-radius: 10px; color: var(--bk-ink);
  display: flex; align-items: center; justify-content: center;
}
/* hover only where a real pointer hovers: on a phone, :hover sticks after a tap and used to out-rank
   .is-pick (higher specificity), painting the chosen day's number in the accent ON the accent —
   the number vanished at the exact moment a customer picked their day (found 9/23). */
@media (hover: hover) { .bk-day:hover:not(:disabled):not(.is-pick) { border-color: var(--bk-accent); color: var(--bk-accent); } }
.bk-day.is-off { opacity: .28; cursor: default; background: transparent; border-color: transparent; }
.bk-day.is-full {
  cursor: not-allowed; color: var(--bk-ink-3); background: var(--bk-sunk);
  border-color: var(--bk-edge); text-decoration: line-through;
}
.bk-day.is-pick {
  background: var(--bk-accent); border-color: var(--bk-accent);
  color: var(--bk-accent-in); font-weight: 700;
}
.bk-pad { min-height: 44px; }

/* ---- slots ---------------------------------------------------------- */
.bk-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 1rem; }
@media (min-width: 460px) { .bk-slots { grid-template-columns: repeat(3, 1fr); } }
.bk-slot {
  font: inherit; font-size: 1rem; cursor: pointer; min-height: 48px;
  background: var(--bk-paper); border: 1px solid var(--bk-edge);
  border-radius: 10px; color: var(--bk-ink); padding: .6rem .4rem;
}
@media (hover: hover) { .bk-slot:hover:not(.is-pick) { border-color: var(--bk-accent); color: var(--bk-accent); } }
.bk-slot.is-pick {
  background: var(--bk-accent); border-color: var(--bk-accent);
  color: var(--bk-accent-in); font-weight: 700;
}
.bk-daylabel { margin: 1.1rem 0 .1rem; font-weight: 700; color: var(--bk-ink); }
/* 10/2: a visitor on another clock sees the shop's time with his own underneath */
.bk-zone { display: block; font-weight: 400; font-size: .9rem; color: var(--bk-ink-3); margin-top: .15rem; }
.bk-you { display: block; font-size: .78rem; font-weight: 400; color: var(--bk-ink-3); margin-top: 2px; }
.bk-slot.is-pick .bk-you { color: inherit; opacity: .85; }

/* ---- honest status -------------------------------------------------- */
.bk-note {
  margin-top: 1rem; font-size: .92rem; color: var(--bk-ink-3);
  border-left: 2px solid var(--bk-edge); padding-left: .7rem;
}
.bk-note.is-live { border-color: var(--bk-ok); color: var(--bk-ink-2); }

/* ---- buttons -------------------------------------------------------- */
.bk-actions { display: flex; gap: .6rem; margin-top: 1.2rem; flex-wrap: wrap; }
.bk-btn {
  font: inherit; font-weight: 600; font-size: 1.02rem; cursor: pointer;
  padding: .8rem 1.35rem; min-height: 48px; border-radius: 10px;
  background: var(--bk-accent); border: 2px solid var(--bk-accent);
  color: var(--bk-accent-in); flex: 1 1 auto;
}
.bk-btn:disabled { opacity: .45; cursor: default; }
.bk-btn-quiet {
  background: transparent; color: var(--bk-ink-2); border-color: var(--bk-edge);
  flex: 0 0 auto;
}
.bk-btn-quiet:hover { border-color: var(--bk-accent); color: var(--bk-accent); }

/* ---- summary + receipt ---------------------------------------------- */
.bk-summary {
  background: var(--bk-sunk); border: 1px solid var(--bk-edge);
  border-radius: 10px; padding: .9rem 1rem; margin-bottom: 1rem;
}
.bk-summary b { color: var(--bk-ink); display: block; }
.bk-summary span { font-size: .93rem; color: var(--bk-ink-2); }
.bk-receipt {
  background: var(--bk-ok-bg); border: 1px solid var(--bk-ok);
  border-radius: 10px; padding: 1.1rem 1.15rem;
}
.bk-receipt h3 { margin: 0 0 .4rem; color: var(--bk-ink); }
.bk-receipt p { margin: 0 0 .6rem; color: var(--bk-ink-2); font-size: .96rem; }
.bk-receipt p:last-child { margin-bottom: 0; }
.bk-ref { font-weight: 700; color: var(--bk-ink); letter-spacing: .04em; }
/* links inherit the build's accent — never default browser blue (caught in the 390px pass) */
.bk a { color: var(--bk-accent); font-weight: 600; }
.bk a:focus-visible, .bk button:focus-visible, .bk select:focus-visible {
  outline: 3px solid var(--bk-accent); outline-offset: 2px;
}

/* ---- fallbacks the framework requires -------------------------------- */
.no-js .bk { display: none; }
.no-js .bk-fallback { display: block; }
.bk-fallback { display: none; }
@media (prefers-reduced-motion: reduce) {
  .bk * { transition: none !important; animation: none !important; }
}

/* SMS consent — deliberately quiet and deliberately unchecked */
.bk-consent label { display: flex; gap: .55rem; align-items: flex-start;
  font-size: .86rem; line-height: 1.45; color: var(--bk-ink-2); font-weight: 400; cursor: pointer; }
.bk-consent input { width: 17px; height: 17px; margin-top: .18rem; flex: none;
  accent-color: var(--bk-accent); }
.bk-consent-note { margin: .35rem 0 0 1.85rem; font-size: .78rem; color: var(--bk-ink-3); }