/* ============================================================
   ThriveBook — native booking UI
   Extends styles.css. Loaded AFTER styles.css on book.html,
   physician-wellness.html and manage.html.

   No new colour tokens, no new fonts: every value below comes
   from the existing design system (--teal / --cream / --gold /
   --line, Fraunces headings, Inter body, 9px buttons, 14px
   cards, the .charm-card 22px premium shell).

   Everything is namespaced .tb-* so nothing can leak into the
   rest of the site. Text colours are always stated explicitly
   because the discovery-call widget sits inside .program, a
   teal band that recolours bare <p> and <h2>.
   ============================================================ */

/* ---------- shell ------------------------------------------ */
/* Fills the page's own .wrap so the widget lines up edge-to-edge with the
   .price-grid above it on book.html — same rhythm, same column count. */
.tb {
  max-width: 1080px;
  margin: 0 auto;
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  text-align: left;
}
.tb-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(4, 52, 44, .12);
  padding: clamp(12px, 2.4vw, 26px);
}
.tb-stage {
  background: #fff;
  border-radius: 16px;
  padding: clamp(18px, 3vw, 32px);
  min-height: 420px;
}
.tb h3,
.tb h4 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--teal-deep);
  font-weight: 600;
  line-height: 1.2;
}
.tb-stage h3 {
  font-size: clamp(20px, 2.8vw, 26px);
}
.tb-stage h3:focus {
  outline: none;
}
.tb-stage h3:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  border-radius: 4px;
}
.tb-lede {
  font-size: 15px;
  margin-bottom: 22px;
  max-width: 620px;
}

/* Colour guard. The coaching widget sits inside section.program, a teal band
   whose `.program p` rule (0,1,1) outranks a plain `.tb-lede` (0,1,0) and would
   paint pale mint text onto the white card. Every paragraph inside .tb is
   therefore pinned at 0,1,1 or higher, and booking.css loads after styles.css
   so equal specificity resolves here. */
.tb p { color: #4a5854; }
.tb .tb-lede,
.tb .tb-policy,
.tb .tb-manage-link { color: var(--muted); }
.tb .tb-confirm p,
.tb .tb-fallback p { color: #4a5854; }
.tb .tb-cta-intake p { color: #d9f1e9; }
.tb .tb-alert,
.tb .tb-alert p { color: #7d3221; }
.tb .tb-note,
.tb .tb-note p { color: #3f4d49; }

/* boot skeleton — mirrors the old scheduler's loading feel */
.tb-boot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  color: var(--muted);
  font-size: 14px;
}
.tb-boot i {
  font-size: 26px;
  color: var(--teal);
  animation: tb-spin 1.1s linear infinite;
}
@keyframes tb-spin { to { transform: rotate(360deg); } }

/* ---------- progress rail ---------------------------------- */
.tb-progress {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 4px;
  margin: 0 0 22px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
}
.tb-progress li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
}
.tb-progress .n {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tb-progress .t {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tb-progress li.done .n {
  background: var(--teal-tint);
  border-color: var(--teal-tint);
  color: var(--teal);
}
.tb-progress li.now .n {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.tb-progress li.now {
  color: var(--teal-deep);
  font-weight: 600;
}
@media (max-width: 620px) {
  .tb-progress li .t { display: none; }
  .tb-progress li.now .t { display: inline; }
  .tb-progress { gap: 8px; }
  .tb-progress li { flex: 0 0 auto; }
  .tb-progress li.now { flex: 1 1 auto; }
}

/* ---------- step 1: visit type cards ------------------------ */
/* Explicit column counts, not auto-fit: auto-fit produced a 3+1 orphan row at
   ~1000-1440px. 4 across on desktop (matching .price-grid), 2x2 on tablet,
   stacked on phones — the four visit types never leave a widow. */
.tb-types {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 620px) {
  .tb-types { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .tb-types { grid-template-columns: repeat(4, 1fr); }
}
.tb-type {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 20px 18px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tb-type:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(4, 52, 44, .08);
}
.tb-type:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.tb-type.feat { border: 2px solid var(--gold); }
.tb-type .tag {
  position: absolute;
  top: -11px;
  left: 18px;
  background: var(--gold);
  color: #2a2410;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 7px;
  line-height: 1.2;
}
.tb-type .nm {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.tb-type .amt {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 27px;
  font-weight: 600;
  color: var(--teal-deep);
  margin: 8px 0 2px;
}
.tb-type.feat .amt { color: var(--teal); }
.tb-type .dur {
  color: var(--muted);
  font-size: 13.5px;
}
.tb-type .desc {
  color: #4a5854;
  font-size: 13.5px;
  margin-top: 10px;
  flex: 1;
  line-height: 1.55;
}
.tb-type .go {
  margin-top: 14px;
  color: var(--teal);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tb-type .go i { font-size: 16px; }

/* chosen-type recap chip that rides along steps 2-4 */
.tb-chosen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  background: var(--teal-tint);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #2f4640;
}
.tb-chosen b { color: var(--teal-deep); font-weight: 600; }
.tb-chosen .sep { color: #8ab5a8; }
.tb-chosen .chg-group {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: center;
}
.tb-chosen .chg {
  background: none;
  border: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--teal);
  cursor: pointer;
  text-decoration: underline;
  padding: 2px 4px;
  border-radius: 6px;
}
.tb-chosen .chg:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ---------- step 2: first-available quick pick --------------- */
/* One click from "I want an appointment" to "booked at the soonest opening". */
.tb-firstavail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  width: 100%;
  text-align: left;
  font: inherit;
  background: var(--teal-tint);
  border: 1.5px solid #b9e0d2;
  border-radius: 12px;
  padding: 13px 16px;
  margin-bottom: 18px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.tb-firstavail:hover { border-color: var(--teal); background: #d3efe5; }
.tb-firstavail:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tb-firstavail .fa-lab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--teal);
  flex: 0 0 auto;
}
.tb-firstavail .fa-lab i { font-size: 15px; }
.tb-firstavail .fa-when {
  font-size: 15px;
  font-weight: 600;
  color: var(--teal-deep);
  min-width: 0;
}
.tb-firstavail .fa-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 14px;
  flex: 0 0 auto;
}
.tb-firstavail .fa-cta i { font-size: 15px; }
@media (max-width: 560px) {
  .tb-firstavail .fa-cta { margin-left: 0; width: 100%; justify-content: center; }
  .tb-firstavail .fa-when { width: 100%; }
}

/* ---------- step 2: calendar + slots ------------------------ */
.tb-picker {
  display: grid;
  grid-template-columns: minmax(280px, 340px) 1fr;
  gap: 26px;
  align-items: start;
}
@media (max-width: 720px) {
  .tb-picker { grid-template-columns: 1fr; gap: 22px; }
}
.tb-monthbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.tb-monthbar .mo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--teal-deep);
}
.tb-nav {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--teal);
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .15s;
}
.tb-nav:hover:not(:disabled) { border-color: var(--teal); background: var(--teal-tint); }
.tb-nav:disabled { opacity: .35; cursor: not-allowed; }
.tb-nav:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

table.tb-cal {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
table.tb-cal th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 8px;
}
table.tb-cal td { padding: 2px; text-align: center; }
.tb-day {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  position: relative;
  transition: .12s;
}
.tb-day.open {
  background: var(--teal-tint);
  color: var(--teal-deep);
  font-weight: 600;
}
.tb-day.open:hover { background: #c9ebdf; }
.tb-day:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.tb-day[disabled] {
  color: #b7bfbc;
  cursor: not-allowed;
  background: transparent;
}
.tb-day.sel {
  background: var(--teal);
  color: #fff;
  font-weight: 600;
}
.tb-day.today:not(.sel)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5px;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}
.tb-callegend {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--muted);
}
.tb-callegend span { display: flex; align-items: center; gap: 6px; }
.tb-callegend .sw {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--teal-tint);
  flex: 0 0 auto;
}
.tb-callegend .sw.none { background: #eef0ee; }

.tb-slotside h4 {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--teal-deep);
  margin-bottom: 3px;
}
.tb-tznote {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tb-tznote i { color: var(--teal); font-size: 15px; flex: 0 0 auto; }
.tb-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}
.tb-slot {
  border: 1.5px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 11px 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal-deep);
  cursor: pointer;
  transition: .12s;
  line-height: 1.3;
}
.tb-slot .alt {
  display: block;
  font-size: 11.5px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 2px;
}
.tb-slot:hover { border-color: var(--teal); background: var(--teal-tint); }
.tb-slot:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tb-slot.sel { background: var(--teal); border-color: var(--teal); color: #fff; }
.tb-slot.sel .alt { color: #cfeae1; }
.tb-empty {
  color: var(--muted);
  font-size: 14px;
  background: var(--cream);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 22px 18px;
  text-align: center;
  line-height: 1.6;
}

/* ---------- forms (steps 3 + 4 + manage) -------------------- */
.tb-fields { display: grid; gap: 16px; }
.tb-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .tb-row2 { grid-template-columns: 1fr; } }
.tb-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tb-field > label,
.tb-field > .lbl {
  font-size: 14px;
  font-weight: 600;
  color: var(--teal-deep);
  line-height: 1.45;
}
.tb-field .opt {
  font-weight: 400;
  color: var(--muted);
  font-size: 13px;
}
.tb-field input[type=text],
.tb-field input[type=email],
.tb-field input[type=tel],
.tb-field select,
.tb-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: 9px;
  padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
}
.tb-field textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.tb-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6664' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 40px;
}
.tb-field input:focus,
.tb-field select:focus,
.tb-field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-tint);
}
.tb-field [aria-invalid="true"] {
  border-color: #b0462f;
  box-shadow: 0 0 0 3px rgba(176, 70, 47, .12);
}
.tb-err {
  color: #b0462f;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
}
/* multi-select groups are real fieldsets; strip the UA chrome, keep the semantics */
.tb-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
  display: block;
}
.tb-fieldset > legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--teal-deep);
  line-height: 1.45;
}
.tb-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 9px 18px;
  margin-top: 2px;
}
.tb-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.45;
  min-width: 0;
}
.tb-check input {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--teal);
  flex: 0 0 auto;
  cursor: pointer;
}
.tb-check label {
  color: #4a5854;
  cursor: pointer;
  font-weight: 400;
  min-width: 0;
}

/* ---------- notices, alerts, policy ------------------------- */
.tb-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--teal);
  border-radius: 12px;
  padding: 15px 18px;
  color: #3f4d49;
  font-size: 14px;
  line-height: 1.6;
}
.tb-note i { color: var(--teal); font-size: 20px; flex: 0 0 auto; margin-top: 1px; }
.tb-note.gold { border-left-color: var(--gold); }
.tb-note.gold i { color: var(--gold); }
.tb-alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fdf5f2;
  border: 1px solid #edcfc4;
  border-left: 4px solid #b0462f;
  border-radius: 12px;
  padding: 15px 18px;
  color: #7d3221;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 18px;
}
.tb-alert i { color: #b0462f; font-size: 20px; flex: 0 0 auto; margin-top: 1px; }
.tb-alert b { display: block; margin-bottom: 2px; color: #6b2a1c; }
.tb-alert .btn { margin-top: 10px; }
.tb-policy {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 14px;
}

/* ---------- action row -------------------------------------- */
.tb-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.tb-actions .spacer { flex: 1 1 auto; }
.tb-actions .btn:disabled,
.tb .btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
.tb .btn:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 2px; }
.tb-back {
  background: none;
  border: none;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--teal);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  border-radius: 8px;
}
.tb-back:hover { color: var(--teal-deep); }
.tb-back:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tb-pending {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13.5px;
}
.tb-pending i { color: var(--teal); font-size: 16px; animation: tb-spin 1.1s linear infinite; }

/* ---------- payment step ------------------------------------ */
.tb-paybox {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  min-height: 120px;
}
.tb-amountrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  background: var(--teal-tint);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.tb-amountrow .k { font-size: 14px; color: #2f4640; }
.tb-amountrow .v {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--teal-deep);
  margin-left: auto;
}
.tb-testbanner {
  background: #fffdf5;
  border: 1.5px dashed var(--gold);
  border-radius: 10px;
  padding: 13px 16px;
  margin-bottom: 16px;
  color: #8a6d1f;
  font-size: 13.5px;
  line-height: 1.55;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.tb-testbanner i { font-size: 17px; flex: 0 0 auto; margin-top: 1px; }
.tb-testbanner b { color: #6f5716; }
.tb-fakecard {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: var(--cream);
  padding: 13px 15px;
  color: var(--muted);
  font-size: 14.5px;
  letter-spacing: .04em;
}
.tb-fakecard i { color: var(--teal); font-size: 20px; }
.tb-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 14px;
}
.tb-secure i { color: var(--teal); font-size: 15px; }

/* ---------- step 5 confirmation + manage summary ------------ */
.tb-conf-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.tb-conf-top .ic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--teal-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.tb-conf-top .ic i { font-size: 28px; color: var(--teal); }
.tb-conf-top h3 { margin: 0; }
.tb-summary {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
  display: grid;
  gap: 14px;
}
.tb-summary .line {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
}
.tb-summary .line i { color: var(--teal); font-size: 21px; margin-top: 1px; }
.tb-summary .k {
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}
.tb-summary .v {
  font-size: 15.5px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.5;
}
.tb-summary .v small {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  margin-top: 2px;
}
.tb-nextsteps { display: grid; gap: 12px; margin-top: 22px; }
.tb-cta-intake {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  background: var(--teal);
  border-radius: 14px;
  padding: 20px 22px;
  color: #fff;
}
.tb-cta-intake .tx { flex: 1 1 240px; min-width: 0; }
.tb-cta-intake b { display: block; font-size: 16px; margin-bottom: 3px; color: #fff; }
.tb-cta-intake p { color: #d9f1e9; font-size: 13.5px; margin: 0; line-height: 1.55; }
.tb-cta-intake .btn { flex: 0 0 auto; }
.tb-cta-intake .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.tb-manage-link {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}
.tb-manage-link a { color: var(--teal); font-weight: 600; text-decoration: underline; }

/* status chip on the manage page */
.tb-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 20px;
  padding: 5px 13px;
  background: var(--teal-tint);
  color: var(--teal-deep);
  border: 1px solid #cfe9e0;
}
.tb-status.off { background: var(--sand); color: #8a6d1f; border-color: var(--line); }
.tb-status i { font-size: 14px; }

/* confirm dialog on cancel */
.tb-confirm {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 14px;
  padding: 20px 22px;
  margin-top: 18px;
}
.tb-confirm h4 {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--teal-deep);
  margin-bottom: 8px;
}
.tb-confirm p { color: #4a5854; font-size: 14.5px; line-height: 1.6; margin-bottom: 6px; }
.tb-confirm .outcome { color: var(--teal-deep); font-weight: 600; }
.tb-confirm .tb-actions { margin-top: 16px; }
.tb-danger { background: #b0462f; color: #fff; }
.tb-danger:hover { background: #963a26; }

/* screen-reader only */
.tb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* noscript / hard-failure fallback */
.tb-fallback {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  text-align: center;
  color: #4a5854;
  font-size: 15px;
  line-height: 1.65;
}
.tb-fallback a { color: var(--teal); font-weight: 600; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .tb-boot i,
  .tb-pending i { animation: none !important; }
  .tb-type,
  .tb-slot,
  .tb-day,
  .tb-nav { transition: none !important; }
  .tb-type:hover { transform: none; }
}

@media (max-width: 600px) {
  .tb-stage { padding: 18px 16px; min-height: 360px; }
  .tb-card { padding: 10px; border-radius: 18px; }
  .tb-slots { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); max-height: none; }
  .tb-actions { padding-top: 16px; margin-top: 20px; }
  .tb-actions .btn { flex: 1 1 auto; text-align: center; }
  .tb-cta-intake { padding: 18px; }
  .tb-cta-intake .btn { width: 100%; text-align: center; }
}