/* ============================================================
   MASTO a Testaccio — pagina prenotazioni
   ------------------------------------------------------------
   Styles ONLY the booking widget injected by assets/js/booking.js
   (mount point: <div id="masto-prenota">). Load after site.css:

     <link rel="stylesheet" href="assets/css/booking.css">

   Every colour, font and easing is a site.css token; the literal
   fallback inside each var() is the same value, so the widget still
   looks right if this file is ever loaded without site.css.

   Layout contract
     ≥900px : two columns — steps on the left, sticky "Il tuo tavolo"
              riepilogo on the right. The form is the grid: .bk-col
              (row 1 / col 1), .bk-actions (row 2 / col 1), .bk-side
              (col 2, spanning both rows, position:sticky).
     <900px : one column, DOM order — steps, compact riepilogo bar,
              submit. Same single node, restyled. No duplicated markup.

   No Greek/Minoan anything: warm paper, ink text, one wine accent,
   1px rules, 2px radii, uppercase letterspaced micro-labels, serif
   for anything that wants to be read slowly.
   ============================================================ */

.bk {
  --bk-paper:     var(--paper, #FCF9F2);
  --bk-paper-2:   var(--paper-2, #F6F0E4);
  --bk-paper-3:   var(--paper-3, #F2EADB);
  --bk-ink:       var(--ink, #241F1D);
  --bk-soft:      var(--ink-soft, #5B524C);
  --bk-dim:       var(--ink-dim, #6E645E);
  --bk-wine:      var(--wine, #6E1220);
  --bk-wine-mid:  var(--wine-mid, #8E1C2C);
  --bk-wine-deep: var(--wine-deep, #4A0B15);
  --bk-gold:      var(--gold, #9C7B41);
  --bk-gold-soft: var(--gold-soft, #CBA96A);
  --bk-line:      var(--line, rgba(36, 31, 29, .16));
  --bk-line-wine: rgba(110, 18, 32, .22);
  --bk-serif:     var(--serif, "Cormorant Garamond", "Iowan Old Style", Georgia, serif);
  --bk-sans:      var(--sans, "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif);
  --bk-ease:      var(--ease, cubic-bezier(.22, .61, .36, 1));
  --bk-ease-out:  var(--ease-out, cubic-bezier(.16, 1, .3, 1));

  font-family: var(--bk-sans);
  color: var(--bk-ink);
  display: block;
  /* the site header is position:fixed — without this the widget scrolls itself
     under it and the confirmation loses its first line */
  scroll-margin-top: calc(var(--bar-h, 68px) + 24px);
}

.bk *, .bk *::before, .bk *::after { box-sizing: border-box; }
.bk [hidden] { display: none !important; }

/* ============================================================
   layout
   ============================================================ */

.bk-form { display: block; }
.bk-col { display: grid; gap: clamp(30px, 3.6vw, 46px); }
.bk-side { margin-top: clamp(26px, 3vw, 34px); }
.bk-actions { margin-top: clamp(22px, 2.6vw, 30px); }

@media (min-width: 900px) {
  .bk-form--book {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(300px, 26vw, 352px);
    column-gap: clamp(32px, 4vw, 64px);
    align-items: start;
  }
  .bk-form--book .bk-col    { grid-column: 1; grid-row: 1; }
  .bk-form--book .bk-actions{ grid-column: 1; grid-row: 2; }
  .bk-form--book .bk-side {
    grid-column: 2; grid-row: 1 / 3;
    align-self: start;
    position: sticky;
    top: calc(var(--bar-h, 68px) + 22px);
    margin-top: 0;
  }
}

/* ============================================================
   steps
   ============================================================ */

.bk-step { border: 0; margin: 0; padding: 0; min-width: 0; }

.bk-legend {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--bk-sans);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--bk-wine-mid);
  padding: 0; margin: 0 0 14px; width: 100%;
}
.bk-legend-n {
  font-family: var(--bk-serif); font-size: 17px; font-weight: 500;
  letter-spacing: .02em; text-transform: none;
  color: var(--bk-gold);
  line-height: 1;
}
.bk-legend::after {
  content: ""; flex: 1 1 auto; height: 1px; min-width: 12px;
  background: var(--bk-line); align-self: center;
}

.bk-hint { font-size: 13px; line-height: 1.55; color: var(--bk-dim); margin: 12px 0 0; }
.bk-hint a { color: var(--bk-wine); text-decoration: none; border-bottom: 1px solid var(--bk-line); }
.bk-hint a:hover { border-bottom-color: var(--bk-wine-mid); }

.bk-note {
  font-size: 14.5px; line-height: 1.6; color: var(--bk-soft);
  background: var(--bk-paper-2); border: 1px solid var(--bk-line);
  padding: 16px 18px; margin: 0;
}
.bk-note a { color: var(--bk-wine); }

.bk-loading {
  font-size: 14.5px; color: var(--bk-dim); margin: 0; padding: 30px 0;
  display: flex; align-items: center; gap: 12px;
}
.bk-loading::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto;
  border: 2px solid var(--bk-line); border-top-color: var(--bk-wine-mid);
  border-radius: 50%; animation: bk-spin .8s linear infinite;
}

/* the one loud message: server refusals, network drops, shape errors */
.bk-error {
  font-size: 14px; line-height: 1.55; color: var(--bk-wine);
  background: rgba(142, 28, 44, .07);
  border-left: 2px solid var(--bk-wine-mid);
  padding: 12px 15px; margin: 0 0 16px;
}
.bk-error a { color: var(--bk-wine); }

/* inline, under the field it belongs to */
.bk-ferr {
  font-size: 12.5px; line-height: 1.45; color: var(--bk-wine-mid);
  margin: 0; display: flex; gap: 6px; align-items: flex-start;
}
/* a rule, not a character: a text bullet would be read out by screen readers
   in front of every error message */
.bk-ferr::before {
  content: ""; flex: 0 0 auto; width: 10px; height: 1px; margin-top: 9px;
  background: var(--bk-wine-mid); opacity: .7;
}

/* ============================================================
   01 · giorno — the 14-day strip
   ============================================================ */

.bk-strip-wrap { position: relative; }

.bk-dates {
  display: flex; gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding: 2px 2px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--bk-line) transparent;
}
.bk-dates::-webkit-scrollbar { height: 4px; }
.bk-dates::-webkit-scrollbar-thumb { background: var(--bk-line); border-radius: 2px; }

.bk-day {
  flex: 0 0 auto; scroll-snap-align: start;
  display: grid; gap: 2px; justify-items: center; align-content: center;
  width: 66px; min-height: 78px; padding: 9px 4px;
  background: var(--bk-paper-2);
  border: 1px solid var(--bk-line); border-radius: 2px;
  cursor: pointer; color: var(--bk-ink);
  transition: background .28s var(--bk-ease), color .28s var(--bk-ease),
              border-color .28s var(--bk-ease), transform .28s var(--bk-ease-out);
}
.bk-day:hover:not(:disabled) { border-color: var(--bk-wine-mid); transform: translateY(-2px); }
.bk-day-w { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--bk-dim); }
.bk-day-n { font-family: var(--bk-serif); font-size: 25px; line-height: 1.08; }
.bk-day-m { font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--bk-dim); }
.bk-day.is-on {
  background: var(--bk-wine); border-color: var(--bk-wine); color: var(--bk-paper);
}
.bk-day.is-on .bk-day-w, .bk-day.is-on .bk-day-m { color: rgba(252, 249, 242, .78); }
.bk-day:disabled { cursor: not-allowed; background: transparent; color: var(--bk-dim); opacity: .72; }
.bk-day:disabled .bk-day-n { opacity: .5; }
.bk-day.is-closed .bk-day-m { color: var(--bk-wine-mid); opacity: .75; }

/* pointer-only strip arrows; they never appear on a touch device */
.bk-strip-nav {
  position: absolute; top: 26px; z-index: 2;
  width: 34px; height: 34px; display: none;
  align-items: center; justify-content: center;
  background: var(--bk-paper); color: var(--bk-wine);
  border: 1px solid var(--bk-line); border-radius: 50%;
  box-shadow: 0 2px 14px rgba(36, 31, 29, .12);
  cursor: pointer; font-size: 14px; line-height: 1;
  transition: border-color .25s var(--bk-ease), background .25s var(--bk-ease);
}
.bk-strip-nav:hover { border-color: var(--bk-wine-mid); background: var(--bk-paper-2); }
.bk-strip-nav--prev { left: -8px; }
.bk-strip-nav--next { right: -8px; }
@media (hover: hover) and (pointer: fine) and (min-width: 700px) {
  .bk-strip-nav { display: flex; }
}

/* ============================================================
   02 · orari
   ============================================================ */

.bk-group + .bk-group { margin-top: 22px; }
.bk-group-k {
  font-family: var(--bk-serif); font-size: 20px; font-weight: 500;
  color: var(--bk-ink); margin: 0 0 10px;
  display: flex; align-items: center; gap: 12px;
}
.bk-group-k::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--bk-line);
}

.bk-slots {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(94px, 1fr));
}

.bk-slot {
  display: grid; gap: 2px; justify-items: center; align-content: center;
  min-height: 58px; padding: 8px 6px;
  background: var(--bk-paper-2);
  border: 1px solid var(--bk-line); border-radius: 2px;
  cursor: pointer; color: var(--bk-ink);
  transition: background .28s var(--bk-ease), color .28s var(--bk-ease),
              border-color .28s var(--bk-ease), transform .28s var(--bk-ease-out);
}
.bk-slot:hover:not(:disabled) { border-color: var(--bk-wine-mid); transform: translateY(-2px); }
.bk-slot-t { font-family: var(--bk-serif); font-size: 20px; line-height: 1.15; }
.bk-slot-s { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--bk-dim); }
.bk-slot.is-on { background: var(--bk-wine); border-color: var(--bk-wine); color: var(--bk-paper); }
.bk-slot.is-on .bk-slot-s { color: rgba(252, 249, 242, .78); }
.bk-slot:disabled {
  cursor: not-allowed; background: transparent; color: var(--bk-dim);
  border-style: dashed;
}
.bk-slot:disabled .bk-slot-t { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .65; }
.bk-slot:disabled .bk-slot-s { color: var(--bk-wine-mid); opacity: .7; }

.bk-tz { font-size: 12px; color: var(--bk-dim); margin-top: 14px; }

/* ============================================================
   03 · coperti
   ============================================================ */

.bk-party { display: flex; flex-wrap: wrap; gap: 10px; }

/* 1–6 must stay on one line down to 390px: six 52px circles plus gaps overflow
   a phone, so the circle shrinks with the viewport but never below 46px. */
.bk-chip {
  width: clamp(46px, 12vw, 52px); height: clamp(46px, 12vw, 52px); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--bk-serif); font-size: 21px; color: var(--bk-ink);
  background: var(--bk-paper-2);
  border: 1px solid var(--bk-line); border-radius: 50%;
  cursor: pointer;
  transition: background .28s var(--bk-ease), color .28s var(--bk-ease),
              border-color .28s var(--bk-ease), transform .28s var(--bk-ease-out);
}
.bk-chip:hover { border-color: var(--bk-wine-mid); transform: translateY(-2px); }
.bk-chip.is-on { background: var(--bk-wine); border-color: var(--bk-wine); color: var(--bk-paper); }

/* the service selector (pranzo / cena) reuses the chip, minus the circle */
.bk-chip--wide {
  width: auto; height: 52px; min-width: 96px; padding: 0 20px; border-radius: 2px;
  font-family: var(--bk-sans); font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
}

/* Block, never flex: this note contains an inline <a>, and inside a flex
   container each run of text becomes its own anonymous flex item — the sentence
   comes apart and collides with the phone number. The gold edge does the
   decorating instead. */
.bk-callout {
  display: block;
  margin: 16px 0 0; padding: 14px 16px;
  background: var(--bk-paper-2);
  border: 1px solid var(--bk-line); border-left: 2px solid var(--bk-gold);
  border-radius: 2px;
  font-size: 13.5px; line-height: 1.6; color: var(--bk-soft);
}
.bk-callout a {
  color: var(--bk-wine); font-weight: 500; white-space: nowrap;
  text-decoration: none; border-bottom: 1px solid var(--bk-line);
}
.bk-callout a:hover { border-bottom-color: var(--bk-wine-mid); }

/* ============================================================
   04 · i tuoi dati
   ============================================================ */

.bk-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.bk-f { display: grid; gap: 7px; min-width: 0; align-content: start; }
.bk-f--full { grid-column: 1 / -1; }
.bk-f > label {
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--bk-soft);
}
.bk-f input, .bk-f textarea {
  font-family: var(--bk-sans); font-size: 16px; color: var(--bk-ink);
  background: var(--bk-paper-2);
  border: 1px solid var(--bk-line); border-radius: 2px;
  padding: 14px 15px; min-height: 52px; width: 100%;
  transition: border-color .25s var(--bk-ease), background .25s var(--bk-ease),
              box-shadow .25s var(--bk-ease);
}
.bk-f textarea { min-height: 92px; resize: vertical; }
.bk-f input::placeholder, .bk-f textarea::placeholder { color: var(--bk-dim); opacity: .7; }
.bk-f input:focus, .bk-f textarea:focus {
  outline: none;
  border-color: var(--bk-wine-mid);
  background: var(--bk-paper);
  box-shadow: 0 0 0 3px rgba(142, 28, 44, .12);
}
.bk-f input[aria-invalid="true"], .bk-f textarea[aria-invalid="true"] {
  border-color: var(--bk-wine-mid);
  background: rgba(142, 28, 44, .05);
}

.bk-consent {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 13px; line-height: 1.55; color: var(--bk-soft);
  margin-top: 18px; cursor: pointer;
}
/* 24px, not 20: WCAG 2.5.8 minimum target size, and the label around it is
   clickable too so the real target is the whole sentence. */
.bk-consent input {
  width: 24px; height: 24px; margin: 0; flex: 0 0 auto;
  accent-color: var(--bk-wine); cursor: pointer;
}
.bk-consent a { color: var(--bk-wine); }
.bk-consent-err { margin-top: 8px; }

/* Honeypot: off-screen, never display:none — some bots skip hidden fields. */
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cf-turnstile { margin-top: 18px; }

/* ============================================================
   riepilogo — sticky card (desktop) / compact bar (mobile)
   ============================================================ */

.bk-recap {
  background: var(--bk-paper);
  border: 1px solid var(--bk-line-wine);
  border-radius: 2px;
  padding: 22px 22px 20px;
}
.bk-recap-k {
  font-family: var(--bk-serif); font-size: 24px; font-weight: 500;
  color: var(--bk-ink); margin: 0 0 4px; line-height: 1.15;
}
.bk-recap-sub {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--bk-wine-mid); margin: 0 0 18px;
}
.bk-recap-l { margin: 0; display: grid; gap: 14px; }
.bk-recap-r { display: grid; gap: 3px; }
.bk-recap-r dt {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--bk-dim);
}
.bk-recap-r dd {
  margin: 0; font-family: var(--bk-serif); font-size: 21px; line-height: 1.25;
  color: var(--bk-ink);
}
.bk-recap-r.is-empty dd { color: var(--bk-dim); opacity: .55; }
.bk-recap-r.is-new dd { animation: bk-fade .5s var(--bk-ease-out) both; }
.bk-recap-note {
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--bk-line);
  font-size: 12px; line-height: 1.55; color: var(--bk-dim);
}

@media (max-width: 899px) {
  .bk-recap {
    background: var(--bk-paper-2);
    border: 1px solid var(--bk-line);
    border-left: 2px solid var(--bk-wine);
    padding: 13px 16px;
  }
  .bk-recap-k { display: none; }
  .bk-recap-sub { margin: 0 0 8px; font-size: 10px; }
  .bk-recap-l { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
  .bk-recap-r { display: flex; align-items: baseline; gap: 6px; }
  .bk-recap-r + .bk-recap-r::before {
    content: "·"; color: var(--bk-dim); margin-right: 4px;
  }
  .bk-recap-r dt { display: none; }
  .bk-recap-r dd { font-size: 16.5px; }
  .bk-recap-r[data-r="name"] dd { font-family: var(--bk-sans); font-size: 14px; color: var(--bk-soft); }
  .bk-recap-note { display: none; }
}

/* ============================================================
   azioni
   ============================================================ */

.bk-submit {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 54px; padding: 0 28px;
  font-family: var(--bk-sans); font-size: 12px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  background: var(--bk-wine); color: var(--bk-paper);
  border: 1px solid var(--bk-wine); border-radius: 2px;
  cursor: pointer;
  transition: color .4s var(--bk-ease), border-color .4s var(--bk-ease), opacity .3s var(--bk-ease);
}
.bk-submit::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bk-wine-deep);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .45s var(--bk-ease-out);
}
.bk-submit:hover:not([disabled])::after { transform: scaleY(1); }
.bk-submit[disabled] { opacity: .42; cursor: not-allowed; }
.bk-submit.is-busy { cursor: progress; opacity: .85; }

.bk-spin {
  width: 15px; height: 15px; flex: 0 0 auto; display: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
}
.bk-submit.is-busy .bk-spin { display: block; animation: bk-spin .7s linear infinite; }

/* min-height 44px: the site is audited for tap targets, and a bare text button
   measures ~20px tall. The rule hugs the text, not the bottom of the box. */
.bk-linkish {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0; border: 0;
  background: none; cursor: pointer;
  font-family: var(--bk-sans); font-size: 13px; color: var(--bk-wine);
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--bk-line);
  transition: text-decoration-color .25s var(--bk-ease);
}
.bk-linkish:hover { text-decoration-color: var(--bk-wine-mid); }

.bk-foot { margin: 14px 0 0; font-size: 13px; color: var(--bk-dim); }
.bk-foot--center { text-align: center; }

/* ============================================================
   conferma
   ============================================================ */

.bk-done {
  border: 1px solid var(--bk-line-wine); background: var(--bk-paper);
  padding: clamp(28px, 4vw, 52px);
  max-width: 720px; margin-inline: auto;
  text-align: center;
  animation: bk-rise .6s var(--bk-ease-out) both;
}
.bk-done-k {
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--bk-wine-mid); margin: 0 0 14px;
}
.bk-done-h {
  font-family: var(--bk-serif); font-weight: 500;
  font-size: clamp(32px, 5.4vw, 52px); margin: 0; line-height: 1.05;
}
.bk-done-l { font-size: 17px; color: var(--bk-soft); margin: 16px 0 0; }
.bk-done-l strong { color: var(--bk-ink); font-weight: 500; }

.bk-gold-rule {
  width: 54px; height: 1px; border: 0; margin: clamp(26px, 3.4vw, 36px) auto 0;
  background: linear-gradient(90deg, transparent, var(--bk-gold-soft) 22%, var(--bk-gold) 50%, var(--bk-gold-soft) 78%, transparent);
}
.bk-code-k {
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--bk-dim); margin: 16px 0 6px;
}
.bk-code {
  font-family: var(--bk-serif); font-weight: 500;
  font-size: clamp(38px, 7vw, 62px); letter-spacing: .12em;
  color: var(--bk-wine); margin: 0; line-height: 1.05;
}
.bk-done-mail {
  font-size: 14.5px; color: var(--bk-soft); margin: 22px auto 0;
  line-height: 1.65; max-width: 46ch;
}
.bk-done-mail strong { color: var(--bk-ink); }
.bk-done .bk-error { text-align: left; margin: 22px 0 0; }
.bk-done-act {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  align-items: center; justify-content: center;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--bk-line);
}
.bk-done-act a.bk-linkish { text-decoration-color: var(--bk-gold-soft); }
.bk-done .bk-hint { text-align: center; }

/* ============================================================
   annulla — inline panel, no modal
   ============================================================ */

.bk-cancelform {
  border: 1px solid var(--bk-line-wine); background: var(--bk-paper);
  padding: clamp(24px, 3.4vw, 40px);
  max-width: 560px; margin-inline: auto;
  animation: bk-rise .5s var(--bk-ease-out) both;
}
.bk-cancelform .bk-fields { grid-template-columns: 1fr 1fr; }
.bk-cancelform .bk-legend { margin-bottom: 6px; }
.bk-cancel-lede { font-size: 14.5px; line-height: 1.6; color: var(--bk-soft); margin: 0 0 20px; }
.bk-cancelform .bk-actions { margin-top: 20px; }
.bk-cancelform .bk-submit { margin-top: 4px; }
.bk-canceldone {
  border: 1px solid var(--bk-line-wine); background: var(--bk-paper);
  padding: clamp(24px, 3.4vw, 40px); text-align: center;
  max-width: 560px; margin-inline: auto;
}
.bk-canceldone p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--bk-soft); }

.bk-phoneonly { text-align: center; }

/* ============================================================
   motion — entrance only, and only the first time
   ============================================================ */

@keyframes bk-spin { to { transform: rotate(360deg); } }
@keyframes bk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bk-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.bk-form--first .bk-step,
.bk-form--first .bk-side,
.bk-form--first .bk-actions {
  animation: bk-rise .62s var(--bk-ease-out) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.bk-enter { animation: bk-fade .42s var(--bk-ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .bk *, .bk *::before, .bk *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .bk-loading::before { border-top-color: var(--bk-line); }
  .bk-dates { scroll-behavior: auto; }
}

/* ============================================================
   a11y + small screens
   ============================================================ */

.bk :where(button, input, textarea, a, summary):focus-visible {
  outline: 2px solid var(--bk-wine-mid);
  outline-offset: 3px;
}

.bk-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Same rule the rest of the site uses (site.css ~line 795): on a finger, even
   an inline link inside a sentence gets a 44px box. */
@media (pointer: coarse), (max-width: 900px) {
  .bk-callout a, .bk-hint a, .bk-note a, .bk-consent a, .bk-done-mail a, .bk-error a {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  }
}

@media (max-width: 640px) {
  .bk-fields, .bk-cancelform .bk-fields { grid-template-columns: 1fr; }
  .bk-slots { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .bk-day { width: 62px; min-height: 74px; }
  .bk-recap-r dd { font-size: 15.5px; }
}

@media (max-width: 380px) {
  .bk-slots { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .bk-chip { width: 46px; height: 46px; font-size: 19px; }
  .bk-party { gap: 8px; }
}