/* Base look for the preview booking widget (Meridian's flow). Each design restyles it by setting these
   variables on [data-booking] or any ancestor, and may add its own rules on the .bk-* classes. */
/* Defaults live on :root so a page can override them on the widget or on any ancestor. */
:root {
  --bk-accent: #2f6f6f; --bk-accent-ink: #ffffff; --bk-accent-soft: #e4f1f0;
  --bk-ink: #13233a; --bk-muted: #5b6878; --bk-surface: #ffffff; --bk-bg: #f6f2ea;
  --bk-line: #e2ddd2; --bk-warm: #fbf1dc; --bk-radius: 20px; --bk-radius-sm: 12px;
  --bk-font: inherit; --bk-display: inherit;
}
.bk {
  font-family: var(--bk-font); color: var(--bk-ink); text-align: left;
  background: var(--bk-surface); border: 1px solid var(--bk-line); border-radius: var(--bk-radius);
  padding: clamp(16px, 2.6vw, 30px); display: grid; gap: 18px;
}
.bk *, .bk *::before, .bk *::after { box-sizing: border-box; }
.bk p, .bk h3 { margin: 0; max-width: none; }
.bk :where(button) { font: inherit; color: inherit; cursor: pointer; }
.bk :where(button, input, select, textarea):focus-visible { outline: 3px solid var(--bk-accent); outline-offset: 2px; }

.bk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 6px 18px; padding-bottom: 14px; border-bottom: 1px solid var(--bk-line); }
.bk-kicker { font-family: var(--bk-display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); line-height: 1.15; }
.bk-sub { color: var(--bk-muted); font-size: .95rem; margin-top: 2px !important; }
.bk-tz { color: var(--bk-muted); font-size: .85rem; }

.bk-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.bk-type {
  display: grid; gap: 2px; text-align: left; padding: 12px 16px;
  border: 1.5px solid var(--bk-line); border-radius: var(--bk-radius-sm); background: var(--bk-surface);
  transition: border-color .15s ease, background .15s ease;
}
.bk-type:hover { border-color: var(--bk-accent); }
.bk-type[aria-pressed="true"] { border-color: var(--bk-accent); background: var(--bk-accent-soft); box-shadow: inset 0 0 0 1px var(--bk-accent); }
.bk-type-name { font-weight: 650; font-size: 1rem; }
.bk-type-meta { font-size: .88rem; color: var(--bk-ink); }
.bk-type-who { font-size: .82rem; color: var(--bk-muted); }

.bk-opts { display: grid; gap: 14px; }
.bk--split .bk-opts { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 28px; }
.bk-label { font-size: .76rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--bk-muted); margin-bottom: 8px !important; }
.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px;
  border: 1.5px solid var(--bk-line); border-radius: 999px; background: var(--bk-surface); font-weight: 550; font-size: .92rem;
}
.bk-chip--who { padding-left: 6px; }
.bk-chip:hover { border-color: var(--bk-accent); }
.bk-chip[aria-pressed="true"] { background: var(--bk-accent); border-color: var(--bk-accent); color: var(--bk-accent-ink); }
.bk-face { width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--bk-accent-soft) center 22% / 280% auto no-repeat; box-shadow: 0 0 0 2px var(--bk-surface); }
.bk-face--any { background: conic-gradient(from 200deg, var(--bk-accent-soft) 0 50%, var(--bk-warm) 50% 100%); }
.bk-note { margin-top: 8px !important; font-size: .86rem; color: var(--bk-muted); }
.bk-fixed { font-size: .92rem; min-height: 44px; display: flex; align-items: center; }

.bk-body { display: grid; gap: 18px; }
.bk--split .bk-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; }
/* data-compact: no empty form column until a time is picked */
.bk--split.bk--waiting-time .bk-body { grid-template-columns: minmax(0, 1fr); }
.bk--waiting-time .bk-side:empty { display: none; }
.bk-cal { background: var(--bk-bg); border-radius: var(--bk-radius-sm); padding: clamp(12px, 2vw, 20px); display: grid; gap: 12px; }
.bk-cal.is-waiting .bk-strip { opacity: .5; }
.bk-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bk-month { font-family: var(--bk-display); font-size: 1.1rem; font-weight: 600; }
.bk-cal-nav { display: flex; gap: 6px; }
.bk-nav { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--bk-line); background: var(--bk-surface); font-size: 1.3rem; line-height: 1; }
.bk-nav:disabled { opacity: .35; cursor: default; }
.bk-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bk-day {
  display: grid; justify-items: center; gap: 1px; padding: 9px 2px 8px; min-height: 72px;
  border: 1px solid var(--bk-line); border-radius: var(--bk-radius-sm); background: var(--bk-surface);
  transition: border-color .15s ease;
}
.bk-day:hover:not(:disabled) { border-color: var(--bk-accent); }
.bk-dow { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bk-muted); }
.bk-date { font-family: var(--bk-display); font-size: 1.25rem; font-weight: 600; line-height: 1.15; }
.bk-count { font-size: .7rem; color: var(--bk-accent); font-weight: 600; white-space: nowrap; }
.bk-day:disabled { background: transparent; border-style: dashed; cursor: default; }
.bk-day:disabled .bk-date, .bk-day:disabled .bk-count { color: var(--bk-muted); opacity: .75; font-weight: 500; }
.bk-day.is-today .bk-date { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.bk-day[aria-pressed="true"] { background: var(--bk-accent); border-color: var(--bk-accent); color: var(--bk-accent-ink); }
.bk-day[aria-pressed="true"] .bk-dow, .bk-day[aria-pressed="true"] .bk-count { color: var(--bk-accent-ink); opacity: .9; }
.bk-times-label { font-weight: 650; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding-top: 4px; }
.bk-times-label span { font-weight: 500; color: var(--bk-muted); font-size: .88rem; }
.bk-group { display: grid; gap: 6px; }
.bk-group-label { font-size: .78rem; font-weight: 600; color: var(--bk-muted); }
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.bk-time {
  min-height: 44px; border: 1.5px solid var(--bk-line); border-radius: 999px; background: var(--bk-surface);
  font-weight: 600; font-size: .9rem; font-variant-numeric: tabular-nums;
}
.bk-time:hover { border-color: var(--bk-accent); color: var(--bk-accent); }
.bk-time[aria-pressed="true"] { background: var(--bk-accent); border-color: var(--bk-accent); color: var(--bk-accent-ink); }
.bk-hint { color: var(--bk-muted); font-size: .92rem; padding: 14px; border: 1.5px dashed var(--bk-line); border-radius: var(--bk-radius-sm); }
.bk-cal-note { font-size: .8rem; color: var(--bk-muted); }

.bk-side { display: grid; gap: 12px; align-content: start; }
.bk-form { display: grid; gap: 12px; }
.bk-form-title { font-family: var(--bk-display); font-size: 1.15rem; font-weight: 600; }
.bk-summary { line-height: 1.5; font-size: .93rem; padding: 12px 14px; border-radius: var(--bk-radius-sm); background: var(--bk-accent-soft); }
.bk-summary.is-empty { background: transparent; border: 1.5px dashed var(--bk-line); color: var(--bk-muted); }
.bk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bk-field { display: grid; gap: 4px; grid-column: 1 / -1; }
.bk-field--half { grid-column: auto; }
.bk-field label { font-size: .8rem; font-weight: 600; color: var(--bk-muted); }
.bk-field :is(input, select, textarea) {
  font: inherit; font-size: .95rem; color: var(--bk-ink); width: 100%; min-height: 44px; padding: 9px 12px;
  border: 1.5px solid var(--bk-line); border-radius: var(--bk-radius-sm); background: var(--bk-surface);
}
.bk-field textarea { resize: vertical; min-height: 64px; }
.bk-fee { font-size: .88rem; line-height: 1.45; padding: 10px 14px; border-radius: var(--bk-radius-sm); background: var(--bk-warm); }
.bk-submit {
  min-height: 50px; border: 0; border-radius: 999px; background: var(--bk-accent); color: var(--bk-accent-ink);
  font-weight: 650; font-size: 1rem; transition: filter .15s ease;
}
.bk-submit:hover:not(:disabled) { filter: brightness(1.08); }
.bk-submit:disabled { opacity: .45; cursor: not-allowed; }
.bk-fine { font-size: .8rem; color: var(--bk-muted); line-height: 1.5; }
.bk-done { font-size: .9rem; font-weight: 600; padding: 12px 14px; border-radius: var(--bk-radius-sm); background: var(--bk-accent-soft); }

.bk-foot { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--bk-line); font-size: .84rem; color: var(--bk-muted); line-height: 1.5; }
.bk--split .bk-foot { grid-template-columns: 1.4fr 1fr; column-gap: 24px; }
.bk-access::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bk-accent); margin-right: 8px; vertical-align: 1px; }

@media (max-width: 520px) {
  .bk-strip { gap: 3px; }
  .bk-day { min-height: 64px; padding: 7px 0; }
  .bk-count { font-size: .62rem; }
  .bk-date { font-size: 1.05rem; }
  .bk-fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .bk * { transition: none !important; } }