/* Lead-to-Booking, appointments with a person: choices drawn as cards, and one person's day drawn as a strip.
   Colours, radius and the display face come from the business's own tokens. */

/* ---- choices as cards: one radio each, the whole card its target ---- */
.xb-opts { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.xb-opts-legend { padding: 0; color: var(--x-muted); font: 600 .8125rem/var(--x-lh-label) var(--x-text); letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
.xb-opts-list { display: grid; gap: 10px; }
.xb-opt { position: relative; display: block; cursor: pointer; }
.xb-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.xb-opt-face { position: relative; display: flex; align-items: flex-start; gap: 14px; height: 100%; min-height: 72px; padding: 12px 46px 12px 12px; border: 1px solid var(--x-line); border-radius: var(--x-radius, 8px); background: var(--x-surface); transition: background-color var(--x-fast) ease, border-color var(--x-fast) ease; }
/* A radio's mark, drawn: a ring, filled at the centre once chosen, so the choice never rests on colour alone. */
.xb-opt-face::after { content: ""; position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; border: 1.5px solid var(--x-line); border-radius: 50%; background: var(--x-surface); }
.xb-opt input:checked + .xb-opt-face { border-color: var(--x-accent); background: color-mix(in srgb, var(--x-accent) 8%, var(--x-surface)); box-shadow: inset 0 0 0 1px var(--x-accent); }
.xb-opt input:checked + .xb-opt-face::after { border-color: var(--x-accent); background: radial-gradient(circle at center, var(--x-accent) 0 4.5px, var(--x-surface) 5px); }
.xb-opt input:focus-visible + .xb-opt-face { outline: 2px solid var(--x-focus); outline-offset: 2px; }
.xb-opt-media { flex: none; display: block; width: 72px; overflow: hidden; border-radius: calc(var(--x-radius, 8px) - 4px); }
.xb-opt-media .x-img { width: 100%; }
.xb-opt-body { flex: 1; display: grid; gap: 3px; min-width: 0; }
.xb-opt-title { font: var(--x-display-weight, 600) 1.1875rem/var(--x-lh-head) var(--x-display, var(--x-text)); }
.xb-opt-title:lang(th) { font-family: "x-figures", var(--x-display, var(--x-text)); font-weight: var(--x-th-display-weight, 600); }
.xb-opt-meta { display: flex; flex-wrap: wrap; gap: 0 14px; font-size: .9375rem; }
.xb-opt-meta > span:first-child { font-weight: 700; font-variant-numeric: tabular-nums; }
.xb-opt-text, .xb-opt-why { color: var(--x-muted); font-size: .9375rem; }
.xb-opt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.xb-opt-tag { padding: 2px 10px; border: 1px solid var(--x-line); border-radius: 999px; font-size: .8125rem; font-weight: 600; line-height: var(--x-lh-label); }
.xb-opt--off { cursor: default; }
.xb-opt--off .xb-opt-face { border-style: dashed; background: var(--x-surface-2); }
.xb-opt--off .xb-opt-face::after { content: none; }
.xb-opt--off .xb-opt-title { color: var(--x-muted); }
.xb-opt--off .xb-opt-media { opacity: .55; }

/* ---- the first step ---- */
.xb-services { display: grid; gap: 22px; }
.xb-first { display: grid; gap: 10px; justify-items: start; }
.xb-first .x-field { width: 100%; }

/* A browser brings a text box's caret into view, not the box: room kept at the foot of the screen brings the note field up whole. */
html:has(.xb-step textarea) { scroll-padding-bottom: 10rem; }
/* On a phone the summary strip runs to two lines and a note: what takes focus stops below all of it. */
@media (max-width: 56.24em) { html:has(.xb-side) { scroll-padding-top: calc(var(--ex-top) + 108px); } }
/* Very narrow, or a phone with its text doubled: the strip would cover half the page, so it scrolls away with the rest. */
@media (max-width: 22em) { .xb-side.x-stick { position: static; } }

/* A laptop-width screen, with the summary beside the step: a day of half-hour starts would be squeezed into one column
   beside the calendar, so the times go under it and run several to a row. */
@media (min-width: 56.25em) and (max-width: 71.99em) { .xb-when { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ---- a result: what to do before coming ---- */
.xb-prepare { display: grid; gap: 4px; max-width: 44rem; padding: 14px 16px; border-inline-start: 3px solid var(--x-accent); border-radius: 0 var(--x-radius, 8px) var(--x-radius, 8px) 0; background: var(--x-surface); }
.xb-prepare-h { color: var(--x-muted); font: 600 .8125rem/var(--x-lh-label) var(--x-text); letter-spacing: var(--x-caps-track); text-transform: var(--x-caps); }
/* The way to the care that goes with a service, with the sentence that says looking buys nothing. */
.xb-care { display: grid; justify-items: start; max-width: 44rem; }

/* ---- one person's day as a strip: hours kept, appointments with their buffers, blocked periods ---- */
.xb-rail-box { display: grid; gap: 4px; }
.xb-rail { position: relative; height: 16px; overflow: hidden; border-radius: 8px; background: var(--x-surface-2); box-shadow: inset 0 0 0 1px var(--x-hair); }
.xb-rail > span { position: absolute; top: 0; bottom: 0; }
.xb-rail-in { background: var(--x-bg); box-shadow: inset 0 0 0 1px var(--x-line); }
.xb-rail-pad { background: color-mix(in srgb, var(--x-accent) 38%, var(--x-bg)); }
.xb-rail-busy { background: var(--x-accent); }
.xb-rail-off { background: repeating-linear-gradient(135deg, var(--x-muted) 0 2px, transparent 2px 6px); }
.xb-rail-ends { display: flex; justify-content: space-between; color: var(--x-muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
.xb-rail-key { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--x-muted); font-size: .8125rem; }
.xb-rail-key li { display: inline-flex; align-items: center; gap: 7px; }
.xb-rail-chip { flex: none; width: 18px; height: 10px; border-radius: 3px; }
.xb-blocks { display: grid; gap: 2px; color: var(--x-muted); font-size: .9375rem; }
/* Six columns in the day's list: room for a service's name and length, less for a row's one or two buttons. */
@media (min-width: 37.5em) {
  .xb-team .xb-table thead th:nth-child(1) { width: 11%; }
  .xb-team .xb-table thead th:nth-child(2) { width: 15%; }
  .xb-team .xb-table thead th:nth-child(3) { width: 24%; }
  .xb-team .xb-table thead th:nth-child(4) { width: 12%; }
  .xb-team .xb-table thead th:nth-child(5) { width: 16%; }
  .xb-team .xb-table thead th:nth-child(6) { width: 22%; }
}

@media (hover: hover) and (pointer: fine) {
  .xb-opt:not(.xb-opt--off):hover .xb-opt-face { border-color: var(--x-ink); }
}
@media (forced-colors: active) {
  .xb-opt input:checked + .xb-opt-face { outline: 2px solid Highlight; outline-offset: -2px; }
  .xb-rail-busy, .xb-rail-pad { background: Highlight; }
}