/* =============================================================================
   MEI Booking: only what the theme lacks (calendar grid, slot buttons, states).
   Everything else is theme classes (.mei-form, .mei-field, .mei-input, .mei-btn…).
   Tokens only, roles only (so the light/dark contexts of the theme just work).
   Motion: opacity/transform only (motion.css rules); none with reduced motion.
   ========================================================================== */

.mei-bk { display: grid; gap: var(--mei-space-4); width: 100%; min-width: 0; margin: 0 0 var(--mei-space-6); text-align: left; }
.mei-bk__noscript { margin: 0; }

/* ---------- step 1: day and time ---------- */
.mei-bk__pick { display: grid; gap: var(--mei-space-3); min-width: 0; }
.mei-bk__bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--mei-space-3) var(--mei-space-5); }
.mei-bk__h { margin: 0; }
.mei-bk__h + .mei-bk__times, .mei-bk__days + .mei-bk__h { margin-top: var(--mei-space-2); }
.mei-bk__tz { display: grid; gap: var(--mei-space-1); min-width: 0; max-width: 100%; margin: 0; }
.mei-bk__tzsel { width: auto; max-width: 100%; min-height: 44px; padding-block: 8px; font-size: var(--mei-fs-small); }

.mei-bk__days, .mei-bk__times { display: grid; gap: var(--mei-space-2); min-width: 0; }
.mei-bk__days { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); }
.mei-bk__times { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }

.mei-bk__b {
  display: grid; place-content: center; gap: 2px; min-width: 0; min-height: 48px; padding: 8px 6px;
  border: 1.5px solid var(--mei-border-input); border-radius: var(--mei-r-m);
  background: var(--mei-input-bg); color: var(--mei-text);
  font-size: var(--mei-fs-small); font-weight: var(--mei-fw-semibold); line-height: 1.2; text-align: center;
  font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent;
  transition: translate var(--mei-dur-s) var(--mei-ease);
}
.mei-bk__b:hover { border-color: var(--mei-text-2); translate: 0 var(--mei-lift-s); }
.mei-bk__b[aria-pressed="true"] { border-color: var(--mei-text); background: var(--mei-text); color: var(--mei-input-bg); translate: none; }
.mei-bk__day { min-height: 60px; }
.mei-bk__wd { font-size: var(--mei-fs-xs); font-weight: var(--mei-fw-medium); color: var(--mei-text-3); text-transform: capitalize; }
.mei-bk__dn { white-space: nowrap; }
.mei-bk__b[aria-pressed="true"] .mei-bk__wd { color: inherit; }

.mei-bk__status { margin: 0; }
.mei-bk__status:empty { display: none; }
.mei-bk__status .mei-link { margin-left: var(--mei-space-1); font-size: inherit; }
.mei-bk button.mei-link { border: 0; background: none; padding-inline: 0; cursor: pointer; }

/* ---------- step 2: the form ---------- */
.mei-bk__chosen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mei-space-2) var(--mei-space-4);
  padding: var(--mei-space-3) var(--mei-space-4); border-radius: var(--mei-r-m); background: var(--mei-fill);
}
.mei-bk__chosen p { margin: 0; line-height: 1.4; }
.mei-bk__k { display: block; font-size: var(--mei-fs-xs); font-weight: var(--mei-fw-semibold); color: var(--mei-text-3); }
.mei-bk__chosen strong { font-weight: var(--mei-fw-bold); }
.mei-bk__chosen strong:focus { outline: none; }
.mei-bk__back { font-size: var(--mei-fs-small); }
.mei-bk__back::after { right: 0; }
.mei-bk__form .mei-form__actions { margin-top: var(--mei-space-1); }
.mei-bk__consent { margin: 0; }
.mei-bk__out { margin: 0; color: var(--mei-text-error); font-weight: var(--mei-fw-semibold); }
.mei-bk__out:empty { display: none; }
.mei-bk__form[aria-busy="true"] .mei-btn { opacity: .7; }

/* honeypot: out of sight, out of the accessibility tree */
.mei-bk__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- step 3: done ---------- */
.mei-bk__done { display: grid; gap: var(--mei-space-2); padding: var(--mei-space-5); border-radius: var(--mei-r-l); background: var(--mei-fill); }
.mei-bk__done:focus { outline: none; }
.mei-bk__done p { margin: 0; }
.mei-bk__tick { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--mei-space-1); border-radius: 50%; background: var(--mei-tick-bg); color: var(--mei-tick-fg); }
.mei-bk__tick .mei-ico { width: 22px; height: 22px; }
.mei-bk__dwhen { font-weight: var(--mei-fw-semibold); }
.mei-js .mei-bk__done:not([hidden]) { animation: mei-bk-in var(--mei-dur-m) var(--mei-ease) both; }
@keyframes mei-bk-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- manage and join pages ---------- */
.mei-bk-page .mei-section { padding-top: calc(var(--mei-hdr-h) + clamp(48px, 7vw, 96px)); padding-bottom: clamp(64px, 8vw, 120px); }
.mei-bk-page__h { max-width: 18em; }
.mei-bk-page__lead { margin-top: var(--mei-space-5); max-width: var(--mei-measure); color: var(--mei-text-2); }
.mei-bk-page__body { display: grid; justify-items: start; gap: var(--mei-space-6); margin-top: var(--mei-space-8); }
.mei-bk-page__body > * { margin: 0; }
.mei-bk-when { justify-self: stretch; padding: var(--mei-space-6); border-radius: var(--mei-r-xl); background: var(--mei-surface-warm); }
.mei-bk-when p { margin: 0; }
.mei-bk-when .mei-note { margin-top: var(--mei-space-2); }
.mei-bk-when .mei-bk-when__f { margin-top: var(--mei-space-4); color: var(--mei-text-2); }
.mei-bk-page__card { width: 100%; max-width: 640px; }
.mei-bk-page__card .mei-bk { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .mei-bk__b { transition: none; }
  .mei-bk__b:hover { translate: none; }
  .mei-js .mei-bk__done:not([hidden]) { animation: none; }
}