/* =========================================================================
 * Checkout Wizard shell — minimal new CSS.
 *
 * Reuses production tokens (--brand, --ink-*, --ok, --bad, --shadow-*).
 * The right-panel slot embeds the existing .cxOverlay or .rxModalBackdrop
 * untouched — they keep all their own CSS — we just neutralise their
 * fixed-position styling when they're embedded inside the wizard.
 * ======================================================================== */
.wizRoot {
  position: fixed; inset: 0; z-index: 9000;
  font-family: var(--font, 'Inter', system-ui, sans-serif);
}
.wizScrim {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(3px);
}
.wizOverlay {
  position: absolute;
  /* Sized +25% over the original 70% × 70% overlay → 87.5% × 87.5%, margins = 6.25%. */
  top: 6.25%; left: 6.25%; right: 6.25%; bottom: 6.25%;
  background: var(--surface, #fff);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 25px 70px rgba(15,23,42,.20), 0 10px 30px rgba(15,23,42,.10);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}
.wizHead {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ink-200, #E2E8F0);
  background: var(--surface, #fff);
}
.wizTitle {
  font-size: 15px; font-weight: 700;
  color: var(--ink-900, #0F172A);
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.wizTitleText { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wizDot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand, #5B9BC6); }
.wizSub { color: var(--ink-500, #64748B); font-weight: 500; font-size: 12px; }
.wizClose {
  appearance: none; border: 1px solid var(--ink-200, #E2E8F0);
  background: #fff; width: 32px; height: 32px; border-radius: 8px;
  font-size: 16px; color: var(--ink-500, #64748B); cursor: pointer;
}
.wizClose:hover { background: var(--ink-100, #F1F5F9); }

.wizBody {
  /* Rail widened to 360px (was 320px) so today's-appointment rows can breathe. */
  display: grid; grid-template-columns: 360px minmax(0, 1fr);
  min-height: 0; overflow: hidden;
}

/* === Left rail === */
.wizRail {
  background: var(--ink-50, #F8FAFC);
  border-right: 1px solid var(--ink-200, #E2E8F0);
  padding: 16px 14px; overflow: auto; min-height: 0;
}
.wizPtCard {
  background: #fff; border: 1px solid var(--ink-200, #E2E8F0);
  border-radius: 12px; padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.wizPtNameRow {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.wizPtNameBlock { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wizPtName {
  font-size: 15px; font-weight: 700; color: var(--ink-900, #0F172A);
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wizPtNameZh {
  font-size: 13.5px; font-weight: 500; color: var(--ink-700, #334155);
  margin-top: 2px;
}
.wizPtRef {
  flex-shrink: 0; align-self: flex-start;
  font-size: 11px; font-weight: 600; padding: 3px 8px;
  background: var(--ink-100, #F1F5F9); color: var(--ink-700, #334155);
  border-radius: 999px; letter-spacing: .2px;
}
.wizPtMeta { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }
.wizPill {
  font-size: 11px; padding: 2px 7px; background: var(--ink-100, #F1F5F9);
  color: var(--ink-700, #334155); border-radius: 999px;
}
.wizSectionLabel {
  font-size: 10px; font-weight: 700; color: var(--ink-500, #64748B);
  text-transform: uppercase; letter-spacing: .6px;
  margin: 14px 4px 6px;
}
.wizApptCard {
  background: #fff; border: 1px solid var(--ink-200, #E2E8F0);
  border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  display: flex; flex-direction: column; gap: 6px;
}
/* Two-column row: fixed label column on the left, value right-aligned on the
   right. This prevents the long-treatment overlap seen before. */
.wizApptRow {
  display: grid; grid-template-columns: 80px minmax(0, 1fr);
  column-gap: 12px; align-items: baseline;
  font-size: 12.5px; color: var(--ink-700, #334155);
  padding: 0;
}
.wizApptLbl {
  color: var(--ink-500, #64748B); font-weight: 500;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .3px;
}
.wizApptVal {
  color: var(--ink-900, #0F172A); font-weight: 600;
  word-break: break-word; overflow-wrap: anywhere;
  text-align: right; line-height: 1.35;
}
/* Stacked variant for long values (treatment names) — label on its own line. */
.wizApptRow.wizApptRow-stack {
  grid-template-columns: 1fr;
  row-gap: 2px;
}
.wizApptRow.wizApptRow-stack .wizApptVal {
  text-align: left;
}
.wizApptRow b { color: var(--ink-900, #0F172A); font-weight: 600; }
.wizArrived {
  display: inline-flex; gap: 4px; align-items: center;
  margin-top: 6px; padding: 3px 8px;
  background: var(--ok-soft, #DCFCE7); color: #166534;
  font-size: 11px; font-weight: 600; border-radius: 999px;
}

/* === Calendar embed (next-appointment step) === */
.wizCalEmbed {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fff;
}
.wizCalEmbedBanner {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: linear-gradient(90deg, rgba(91,155,198,.12), rgba(91,155,198,.04));
  border-bottom: 1px solid var(--ink-200, #E2E8F0);
  font-size: 12px; color: var(--ink-700, #334155);
}
.wizCalEmbedBanner b { color: var(--ink-900, #0F172A); font-weight: 600; }
.wizCalEmbedBannerDot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand, #5B9BC6);
  box-shadow: 0 0 0 3px rgba(91,155,198,.20);
  flex-shrink: 0;
}
.wizCalIframe {
  flex: 1; min-height: 0; width: 100%;
  border: 0; display: block; background: #fff;
}

/* === Step list === */
.wizSteps { display: flex; flex-direction: column; gap: 6px; }
.wizStep {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  background: #fff; border: 1px solid var(--ink-200, #E2E8F0);
  border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--ink-700, #334155);
  text-align: left; transition: all .12s;
}
.wizStep:hover { background: var(--ink-50, #F8FAFC); }
.wizStepIx {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: var(--ink-100, #F1F5F9); color: var(--ink-500, #64748B);
  border: 1px solid var(--ink-200, #E2E8F0);
  flex-shrink: 0;
}
.wizStepBody { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wizStepLabel { font-weight: 500; }
.wizStepMeta { font-size: 11px; color: var(--ink-400, #94A3B8); }

.wizStep.wizStep-done .wizStepIx { background: var(--ok, #16A34A); color: #fff; border-color: var(--ok, #16A34A); }
.wizStep.wizStep-done .wizStepLabel { color: var(--ink-500, #64748B); text-decoration: line-through; text-decoration-color: var(--ink-300, #CBD5E1); text-decoration-thickness: 1px; }
.wizStep.wizStep-done .wizStepMeta { color: var(--ok, #16A34A); font-weight: 600; }

.wizStep.wizStep-skipped .wizStepIx { background: var(--ink-200, #E2E8F0); color: var(--ink-500, #64748B); border-color: var(--ink-300, #CBD5E1); }
.wizStep.wizStep-skipped .wizStepLabel { color: var(--ink-400, #94A3B8); text-decoration: line-through; }
.wizStep.wizStep-skipped .wizStepMeta { color: var(--ink-500, #64748B); }

.wizStep.wizStep-active {
  background: var(--brand-soft, #E8F2FA);
  border-color: var(--brand, #5B9BC6);
  box-shadow: 0 0 0 3px rgba(91,155,198,.18);
}
.wizStep.wizStep-active .wizStepIx { background: var(--brand, #5B9BC6); color: #fff; border-color: var(--brand, #5B9BC6); }
.wizStep.wizStep-active .wizStepLabel { color: var(--ink-900, #0F172A); font-weight: 600; }
.wizStep.wizStep-active .wizStepMeta { color: var(--brand-deep, #3F7CA6); font-weight: 600; }

/* === Right panel === */
.wizPanel {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: #fff;
}
.wizPanelHead {
  padding: 16px 24px 12px;
  border-bottom: 1px solid var(--ink-100, #F1F5F9);
  flex-shrink: 0;
}
.wizPanelTitle { font-size: 18px; font-weight: 700; color: var(--ink-900, #0F172A); }
.wizPanelDesc  { font-size: 12.5px; color: var(--ink-500, #64748B); margin-top: 4px; }

.wizSlot {
  flex: 1; min-height: 0; overflow: auto;
  background: var(--ink-50, #F8FAFC);
  padding: 16px;
  position: relative;
}
.wizSlotEmpty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--ink-400, #94A3B8); font-size: 13px;
}
.wizSlotError { color: var(--bad, #DC2626); }

/* === Footer === */
.wizFoot {
  padding: 11px 20px;
  border-top: 1px solid var(--ink-200, #E2E8F0);
  background: var(--ink-50, #F8FAFC);
  display: flex; justify-content: space-between; align-items: center;
}
.wizSaveHint {
  font-size: 11.5px; color: var(--ink-500, #64748B);
  display: flex; align-items: center; gap: 6px;
}
.wizSaveHint::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok, #16A34A);
}
.wizFootRight { display: flex; gap: 10px; align-items: center; }
.wizStepCount { font-size: 11.5px; color: var(--ink-500, #64748B); font-weight: 500; }
/* Skip is now a real, visible standalone button (was a faint underlined link).
 * Amber outline reads as a deliberate "skip this step" action without competing
 * with primary step buttons; clearly tappable on touch screens. */
.wizSkip {
  appearance: none; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .01em;
  color: #B45309;
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  box-shadow: 0 1px 2px rgba(180, 83, 9, .08);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .04s ease;
}
.wizSkip:hover {
  background: #FEF3C7; border-color: #FBBF24;
  box-shadow: 0 2px 6px rgba(180, 83, 9, .16);
}
.wizSkip:active { transform: translateY(1px); }
.wizSkip:focus-visible { outline: 2px solid #FBBF24; outline-offset: 2px; }
.wizSkip .wizSkipArrow { font-size: 14px; line-height: 1; }
.wizBack {
  appearance: none; background: #fff; border: 1px solid var(--ink-200, #E2E8F0);
  color: var(--ink-700, #334155); padding: 8px 14px;
  border-radius: 8px; font-size: 12.5px; cursor: pointer; font-weight: 600;
  font-family: inherit;
}
.wizBack:hover { background: var(--ink-100, #F1F5F9); }

/* =========================================================================
 * EMBEDDED MODAL STYLES
 *
 * When the wizard's appendChild interceptor catches a .cxOverlay (invoice /
 * payment / credit) or .rxModalBackdrop (Rx / cert) and re-parents it into
 * the slot, these rules neutralise its fixed-position centering so it sits
 * naturally inside the panel — without touching the modal's own CSS file.
 * ======================================================================== */
.wizSlot .cxOverlay.wizEmbedded,
.wizSlot .rxModalBackdrop.wizEmbedded,
.wizSlot .rxModalRoot.wizEmbedded,
.wizSlot .certModalRoot.wizEmbedded,
.wizSlot .bookingModalRoot.wizEmbedded {
  position: static !important;
  inset: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
  padding: 0 !important;
  display: block !important;
  z-index: auto !important;
}
/* Neutralise the inner backdrop layer too — `.rxModalBackdrop` is
   `position: fixed; inset: 0` in style.css which makes the modal cover the
   whole viewport even when its parent is static. */
.wizSlot .rxModalRoot.wizEmbedded .rxModalBackdrop,
.wizSlot .certModalRoot.wizEmbedded .rxModalBackdrop,
.wizSlot .bookingModalRoot.wizEmbedded .bookingModalBackdrop {
  position: static !important;
  inset: auto !important;
  background: transparent !important;
  padding: 0 !important;
  display: block !important;
}
.wizSlot .cxOverlay.wizEmbedded .cxModal,
.wizSlot .rxModalBackdrop.wizEmbedded .rxModal,
.wizSlot .rxModalRoot.wizEmbedded .rxModal,
.wizSlot .certModalRoot.wizEmbedded .rxModal,
.wizSlot .bookingModalRoot.wizEmbedded .bookingModal {
  position: static !important;
  transform: none !important;
  margin: 0 auto !important;
  max-width: 100% !important;
  width: 100% !important;
  max-height: none !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 14px rgba(15,23,42,.06) !important;
}

/* === Inline cert-type picker (rendered in wiz slot before opening cert modal) === */
.wizCertPicker {
  padding: 12px 4px;
}
.wizCertPickerTitle {
  font-size: 14px; font-weight: 600; color: var(--ink-900, #0F172A);
  margin: 4px 4px 14px;
}
.wizCertPickerGrid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.wizCertPickerBtn {
  background: #fff;
  border: 1px solid var(--ink-200, #E2E8F0);
  border-radius: 10px;
  padding: 16px 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.wizCertPickerBtn:hover {
  border-color: var(--brand, #5B9BC6);
  background: #f4f9fc;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(91,155,198,.10);
}
.wizCertPickerBtnTitle {
  font-size: 13.5px; font-weight: 600; color: var(--ink-900, #0F172A);
}
.wizCertPickerBtnHint {
  font-size: 12px; color: var(--ink-500, #64748B); margin-top: 3px;
}
/* When this letter kind is already saved against the booking. */
.wizCertPickerBtn-done {
  border-color: #16A34A;
  background: #F0FDF4;
}
.wizCertPickerBtn-done:hover {
  border-color: #15803D;
  background: #DCFCE7;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(22,163,74,.18);
}
.wizCertPickerTick {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  color: #166534;
  background: #DCFCE7;
  border: 1px solid #BBF7D0;
  border-radius: 999px;
  vertical-align: middle;
}
@media (max-width: 720px) {
  .wizCertPickerGrid { grid-template-columns: 1fr; }
}

/* ============================================================================
 * Phase 6 Checkout Chooser — Option 2 design
 * Branded gradient header banner + 2 action cards w/ descriptive hints + chevron
 * 340px wide. No icons/images. Professional production style.
 * ============================================================================ */
.wizChooserBackdrop {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(15, 23, 42, 0.50);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: wizChooserFade 0.12s ease-out;
}
@keyframes wizChooserFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.wizChooserRoot {
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
  width: 340px;
  max-width: calc(100vw - 48px);
  padding: 0;
  overflow: hidden;
  font-family: var(--font-sans, Inter, -apple-system, system-ui, sans-serif);
  animation: wizChooserPop 0.14s ease-out;
}
@keyframes wizChooserPop {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.wizChooserHeader {
  background: linear-gradient(135deg, #5B9BC6 0%, #437ea4 100%);
  color: #ffffff;
  padding: 20px 22px;
  text-align: left;
  margin: 0;
  border-bottom: none;
}
.wizChooserTag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
}
.wizChooserTitle {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  margin-top: 4px;
}
.wizChooserSub {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
  letter-spacing: 0;
}
.wizChooserBody {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px 18px 8px 18px;
}
.wizChooserBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: #ffffff;
  border: 1px solid #d8dfe7;
  border-radius: 9px;
  padding: 13px 16px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
}
.wizChooserBtn:hover {
  border-color: #5B9BC6;
  background: #f4f9fc;
}
.wizChooserBtn:active {
  background: #eaf1f7;
}
.wizChooserBtnLeft {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.wizChooserBtnTitle {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.25;
}
.wizChooserBtnHint {
  font-size: 11px;
  font-weight: 400;
  color: #64748b;
  line-height: 1.3;
}
.wizChooserBtnChev {
  color: #94a3b8;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
}
.wizChooserBtn.primary {
  background: #5B9BC6;
  border-color: #5B9BC6;
}
.wizChooserBtn.primary .wizChooserBtnTitle,
.wizChooserBtn.primary .wizChooserBtnChev {
  color: #ffffff;
}
.wizChooserBtn.primary .wizChooserBtnHint {
  color: rgba(255, 255, 255, 0.88);
}
.wizChooserBtn.primary:hover {
  background: #4f8db6;
  border-color: #4f8db6;
}
.wizChooserBtn.primary:active {
  background: #437ea4;
}
.wizChooserFooter {
  display: block;
  margin: 0;
  padding: 0 18px 16px 18px;
}
.wizChooserCancel {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  padding: 8px;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
}
.wizChooserCancel:hover {
  color: #0f172a;
  background: #f5f8fb;
}

/* ----- Linked-artifact lists (Phase 6 step-persist re-entry) ----- */
.wizLinkedList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  max-width: 720px;
  margin: 0 auto;
}
.wizLinkedListHeader {
  margin-bottom: 4px;
}
.wizLinkedListTitle {
  font-size: 17px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
}
.wizLinkedListHint {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
}
.wizLinkedItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
}
.wizLinkedItemBody {
  flex: 1;
  min-width: 0;
}
.wizLinkedItemTitle {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 2px;
}
.wizLinkedItemMeta {
  font-size: 12px;
  color: #64748b;
}
.wizLinkedItemPreview {
  font-size: 12px;
  color: #475569;
  margin-top: 4px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wizLinkedItemBtn {
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #0f172a;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.wizLinkedItemBtn:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}
.wizLinkedAddBtn {
  margin-top: 6px;
  border: 1px dashed #94a3b8;
  background: #fff;
  color: #334155;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
}
.wizLinkedAddBtn:hover {
  background: #f1f5f9;
  border-color: #64748b;
  color: #0f172a;
}
.wizCalEmbedBanner-existing {
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.wizCalEmbedBanner-existing .wizCalEmbedBannerDot {
  background: #10b981;
}

/* =========================================================================
 * Book-next-appt (BNA) 3-panel layout — Phase 4
 * ======================================================================== */

/* Top-level split: left panel (340px fixed) + right (calendar, flex-1) */
.bnaSplit {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* Left panel: filters (top) + results list (bottom) */
.bnaLeft {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--ink-200, #E2E8F0);
  min-height: 0;
  overflow: hidden;
  background: var(--ink-50, #F8FAFC);
}

/* Filter section */
.bnaFilters {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ink-200, #E2E8F0);
  overflow-y: auto;
  flex-shrink: 0;
  max-height: 55%;
  background: #fff;
}

.bnaFilterLabel {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-500, #64748B);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 8px 0 4px;
}
.bnaFilterLabel:first-child { margin-top: 0; }

/* Chip groups */
.bnaChips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 2px;
}
.bnaChip {
  appearance: none;
  border: 1px solid var(--ink-200, #E2E8F0);
  background: #fff;
  color: var(--ink-700, #334155);
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.4;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}
.bnaChip:hover { background: var(--ink-100, #F1F5F9); }
.bnaChip-on {
  background: var(--brand, #5B9BC6);
  border-color: var(--brand, #5B9BC6);
  color: #fff;
}
.bnaChip-on:hover { background: var(--brand-dark, #4A7FA8); }

/* Appointment type picker trigger row (bug 4) */
.bnaApptWrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 2px;
}
.bnaApptTrigger {
  text-align: left;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bnaApptClear {
  background: #fff;
  color: var(--ink-600, #475569);
}
/* The wizard root sits at z-index: 9000. The shared .nxModal.open uses 1200,
   so the appointment-type picker would open BEHIND the wizard and the
   clicks would land on the wizard. Force the picker above the wizard. */
#bnaApptPickerModal.nxModal.open {
  z-index: 9500;
}

/* Row layout for duration / when / limit */
.bnaRow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.bnaNumInput {
  width: 64px;
  font-size: 12px;
  border: 1px solid var(--ink-200, #E2E8F0);
  border-radius: 6px;
  padding: 3px 6px;
  background: #fff;
  color: var(--ink-900, #0F172A);
}
.bnaNumInputSm { width: 48px; }

.bnaSelect {
  font-size: 12px;
  border: 1px solid var(--ink-200, #E2E8F0);
  border-radius: 6px;
  padding: 3px 6px;
  background: #fff;
  color: var(--ink-900, #0F172A);
  cursor: pointer;
}

.bnaSelectHint {
  font-size: 11px;
  color: var(--ink-500, #64748B);
}

/* Practitioner scope dropdown (next-appt search) */
.bnaPracSelect {
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 8px;
  width: 100%;
  max-width: 220px;
  margin-bottom: 2px;
}

.bnaWhenHint {
  font-size: 10.5px;
  color: var(--ink-400, #94A3B8);
  margin-top: 2px;
  padding-left: 2px;
}

/* Results list */
.bnaList {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 4px 0;
}

.bnaListEmpty {
  padding: 20px 16px;
  font-size: 12.5px;
  color: var(--ink-400, #94A3B8);
  text-align: center;
}
.bnaListError { color: var(--bad, #EF4444); }

/* 2026-06-27: Book-next-appt result cards \u2014 two-line layout with clearer
   hierarchy. Top line = bold date + right-aligned slots pill. Second line =
   clinic chip + practitioner + delta badge. Cards get breathing room via
   vertical padding + a soft gap separator instead of a hairline border. */
.bnaResultList {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 6px;
}

.bnaResultRow {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}
.bnaResultRow:hover {
  background: var(--ink-50, #F8FAFC);
  border-color: var(--ink-100, #F1F5F9);
}
.bnaResultRow-selected {
  background: #EFF6FF;
  border-color: #BFDBFE;
  box-shadow: inset 3px 0 0 var(--brand, #5B9BC6);
}

.bnaRowMain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bnaRowDate {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900, #0F172A);
  letter-spacing: -0.01em;
}
.bnaRowSlots {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-600, #475569);
  background: var(--ink-100, #F1F5F9);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.bnaResultRow-selected .bnaRowSlots {
  background: #DBEAFE;
  color: #1E3A8A;
}
.bnaRowSub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.bnaRowClinic {
  font-size: 11.5px;
  color: var(--brand, #5B9BC6);
  font-weight: 600;
}
.bnaRowPrac {
  font-size: 11.5px;
  color: var(--ink-600, #475569);
  font-weight: 500;
}
.bnaDeltaBadge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  background: #FEF3C7;
  color: #92400E;
  border-radius: 999px;
  white-space: nowrap;
  margin-left: auto;
}

/* Right panel — calendar day-view */
.bnaRight {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.bnaCalPlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 13px;
  color: var(--ink-400, #94A3B8);
  text-align: center;
  padding: 24px;
}

.bnaDayHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--ink-200, #E2E8F0);
  background: var(--ink-50, #F8FAFC);
  flex-shrink: 0;
}
.bnaDayDate {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-900, #0F172A);
}
.bnaDayClinic {
  font-size: 11.5px;
  color: var(--brand, #5B9BC6);
  font-weight: 600;
}
.bnaDayPrac {
  font-size: 11.5px;
  color: var(--ink-600, #475569);
  font-weight: 500;
}

/* Day grid — matches app.js calendar layout */
.bnaDayGrid {
  display: flex;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.bnaPracCol {
  flex: 1;
  position: relative;
}

/* Slot buttons inside day view — reuse calVacant + calVacantSlot classes from app.js */
.bnaDaySlot {
  border-radius: 4px;
  overflow: hidden;
  z-index: 2;
}
.bnaDaySlot:hover {
  filter: brightness(0.92);
  z-index: 3;
}
.bnaDaySlot:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bnaBookingSpinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.9);
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-700, #334155);
  box-shadow: 0 2px 8px rgba(15,23,42,.12);
  z-index: 10;
  white-space: nowrap;
}

/* === Clinical handoff block (Rx / Items / Next visit summary) ============
   Surfaces practitioner-saved clinical data at the top of the wizard's left
   rail so the cashier sees Rx, treatment items + total, and next-visit plan
   before touching any step. Mirrors the wizApptCard styling but with a
   coloured left accent so it reads as a distinct "handoff from clinician".
   ======================================================================= */
.wizClinHandoff {
  display: flex; flex-direction: column; gap: 8px;
}
.wizClinBlock {
  background: #fff;
  border: 1px solid var(--ink-200, #E2E8F0);
  border-left: 3px solid var(--brand-500, #2563EB);
  border-radius: 10px;
  padding: 8px 12px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.wizClinTitle {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-900, #0F172A);
  margin-bottom: 4px;
  line-height: 1.3;
}
.wizClinTitle strong {
  color: var(--brand-600, #1D4ED8);
  font-weight: 700;
}
.wizClinList {
  margin: 0; padding: 0 0 0 16px;
  list-style: disc;
  font-size: 11.5px;
  color: var(--ink-700, #334155);
  line-height: 1.5;
}
.wizClinList li { margin: 0; }
.wizClinMore {
  list-style: none;
  margin-left: -16px;
  color: var(--ink-500, #64748B);
  font-style: italic;
  font-size: 11px;
}
.wizClinNote {
  font-size: 11.5px;
  color: var(--ink-700, #334155);
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}
.wizClinLineRow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.wizClinLineName {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wizClinLineValue {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* 2026-07-01 (v25 · Issue 1) — Instructions / Special tools rows inside the
   Laboratory grouping. Long free-text values wrap instead of clipping, while
   still reading as a labeled field row (label left, value right). */
.wizClinLineRow.wizClinLineWrap {
  align-items: baseline;
}
.wizClinLineRow.wizClinLineWrap .wizClinLineValue {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  text-align: right;
  overflow-wrap: anywhere;
}
.wizClinLineDiscount,
.wizClinLineDiscount .wizClinLineName,
.wizClinLineDiscount .wizClinLineValue {
  color: var(--bad, #dc2626);
}
.wizClinLineTotal {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--ink-200, #e5e7eb);
  font-weight: 600;
}
.wizClinLineTotal .wizClinLineName,
.wizClinLineTotal .wizClinLineValue {
  font-weight: 600;
}
.wizClinLineTBD {
  color: var(--ink-400, #9ca3af);
  font-style: italic;
}
/* 2026-06-25 — "to be handled by receptionist" replaces the old TBD badge.
   Slightly louder than the legacy TBD style so it reads as a labelled state. */
.wizClinLineHandoff {
  color: var(--ink-500, #64748b);
  font-style: italic;
  font-size: 12px;
  white-space: nowrap;
}
.wizClinBlockNote .wizClinNoteHandoff,
.wizClinNoteInline .wizClinNoteHandoff {
  background: #f8fafc;
  border-left: 3px solid var(--brand-blue-400, #60a5fa);
  padding: 8px 10px;
  border-radius: 0 6px 6px 0;
  color: var(--ink-700, #334155);
  white-space: pre-wrap;
  font-size: 13px;
}
/* 2026-06-25 — Numbered prefix ("1.", "2.", …) for each treatment item in
   the Clinical handoff card so reception can call out line numbers. The
   width gives a stable left rail regardless of how many digits the number
   has (we support up to 99 lines visually — the card caps at 5 anyway). */
.wizClinLineNum {
  flex: 0 0 auto;
  min-width: 18px;
  color: var(--ink-500, #64748b);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.01em;
}
/* 2026-06-25 — "Note from dentist" appended at the BOTTOM of the same
   Treatment items card (no longer a sibling card). Top border separates it
   from the numbered list above. */
.wizClinNoteInline {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--ink-200, #e5e7eb);
}
.wizClinNoteInlineLabel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-500, #64748b);
  margin-bottom: 4px;
}
.wizClinNoteInlineBody {
  /* visual style inherited from .wizClinNoteHandoff above */
}

/* === 2026-06-27 — Unified Clinical Handoff card ==========================
   Three sections (Prescription / Treatment items / Next visit) share ONE
   card surface with thin dividers between them. Modern, flat, no emojis
   or logo. Replaces the previous three sibling .wizClinBlock cards.

   When .wizClinUnified is present on .wizClinHandoff, we suppress the
   per-block borders/shadows (sections become flush inside the parent
   card) and the parent itself becomes the visible card.
   ======================================================================= */
.wizClinHandoff.wizClinUnified {
  background: #fff;
  border: 1px solid var(--ink-200, #E2E8F0);
  border-left: 3px solid var(--brand-500, #2563EB);
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  display: block;
  overflow: hidden;
}
.wizClinSec {
  padding: 10px 12px;
  border-top: 1px solid var(--ink-100, #F1F5F9);
}
.wizClinSec:first-child {
  border-top: none;
}
.wizClinSecHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.wizClinSecLabel {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-600, #475569);
}
.wizClinSecMeta {
  font-size: 11px;
  color: var(--ink-500, #64748B);
  font-variant-numeric: tabular-nums;
}
.wizClinSecBody {
  font-size: 11.5px;
  color: var(--ink-700, #334155);
  line-height: 1.5;
}
/* State lines: "No prescription needed" / "As usual — handed over…" */
.wizClinStateLine {
  font-size: 11.5px;
  color: var(--ink-500, #64748B);
  font-style: italic;
  padding: 2px 0;
}
/* Next-visit summary row (Type · 3 weeks · 30 min · 2026-06-28). */
.wizClinNextSummary {
  font-size: 11.5px;
  color: var(--ink-700, #334155);
  line-height: 1.5;
}
.wizClinNextSummary strong {
  color: var(--brand-600, #1D4ED8);
  font-weight: 700;
}
.wizClinNextDate {
  color: var(--ink-500, #64748B);
  font-variant-numeric: tabular-nums;
}
/* Inside the unified card, the inline handoff note sits flush at the bottom
   of the items section. Reduce its top margin to match the tighter rhythm. */
.wizClinUnified .wizClinNoteInline {
  margin-top: 6px;
  padding-top: 6px;
}
/* 2026-07-01 (v23) — Multi-case lab handoff in the checkout card. Each lab
   case is a subtle bordered block so multiple cases read as distinct. */
.wizClinLabCase + .wizClinLabCase {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--ink-200, #E2E8F0);
}
.wizClinLabCaseHead {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #0f766e;
  margin-bottom: 6px;
}