/* Design changes on top of the exported Book Now page. */
/* Professional appointment requirements: orange warning (live palette), no nested acknowledgement box. */
#page-view .portal-booking .book-pub-requirements { border: 1px solid rgba(251,146,60,.48); border-left: 4px solid #fb923c; border-radius: 4px; background: rgba(124,45,18,.2); }
#page-view .portal-booking .book-pub-req-title { color: #fb923c; }
#page-view .portal-booking .book-pub-req span { color: #fb923c; }
#page-view .portal-booking .book-pub-req p { color: #fed7aa; }
#page-view .portal-booking .book-pub-requirements .book-pub-check,
#page-view .portal-booking .book-pub-requirements .book-pub-check:has(input:checked) { margin-top: 2px; padding: 12px 0 0; border: 0; border-top: 1px solid rgba(251,146,60,.22); border-radius: 0; background: none; color: #fff1df; }
#page-view .portal-booking .book-pub-requirements .book-pub-check input { accent-color: #fb923c; }
html[data-theme='light'] #page-view .portal-booking .book-pub-requirements { background: rgba(251,146,60,.08); }
html[data-theme='light'] #page-view .portal-booking .book-pub-req-title,
html[data-theme='light'] #page-view .portal-booking .book-pub-req span { color: #b45309; }
html[data-theme='light'] #page-view .portal-booking .book-pub-req p,
html[data-theme='light'] #page-view .portal-booking .book-pub-requirements .book-pub-check { color: #431407; }
/* Dropdown menus: neutral charcoal like the page surfaces, not brown. Gold stays for the selected tick only. */
html:not([data-theme='light']) .rr-select-menu { background: #17191d; border-color: rgba(255,255,255,.12); }
html:not([data-theme='light']) .rr-select-menu li:hover,
html:not([data-theme='light']) .rr-select-menu li:focus { background: rgba(255,255,255,.07); color: #f7efe1; }
/* Treatment menu: same neutral charcoal as the other dropdowns (was gold-tinted brown). */
html:not([data-theme='light']) #page-view .portal-booking .book-treatment-menu { background: #17191d; border-color: rgba(255,255,255,.12); }
html:not([data-theme='light']) #page-view .portal-booking .book-treatment-option { border-bottom-color: rgba(233,225,210,.08); }
html:not([data-theme='light']) #page-view .portal-booking .book-treatment-option:is(:hover, :focus-visible, [aria-selected='true']) { background: rgba(255,255,255,.07); }
/* Dividers: one hairline weight and tone everywhere, no stacked double lines, no boxed person block. */
#page-view .portal-booking { --rr-divider: rgba(233,225,210,.08); }
html[data-theme='light'] #page-view .portal-booking { --rr-divider: rgba(42,36,32,.1); }
#page-view .portal-booking .detail-row,
#page-view .portal-booking .book-summary-item { border-bottom-color: var(--rr-divider); }
#page-view .portal-booking .book-pub-section,
#page-view .portal-booking .book-summary-items,
#page-view .portal-booking .book-travel { border-top-color: var(--rr-divider); }
#page-view .portal-booking .book-travel,
#page-view .portal-booking .book-travel.book-points { border-bottom-color: var(--rr-divider); }
#page-view .portal-booking .detail-list .detail-row:last-child,
#page-view .portal-booking .detail-list .detail-row:last-of-type { border-bottom: 0; }
#page-view .portal-booking .book-summary-item + .book-summary-therapist,
#page-view .portal-booking .book-summary-items + .book-summary-therapist { border-top: 0; }
#page-view .portal-booking .book-pub-person { padding: 0; border: 0; border-radius: 0; background: none; }
#page-view .portal-booking .book-pub-person > legend { margin-bottom: 12px; padding: 0; }
/* Gift card payment: instruction line, then the backup payment dropdowns on their own row. */
#page-view .portal-booking .book-pub-gift { display: grid; gap: 12px; }
#page-view .portal-booking .book-pub-gift[hidden] { display: none; }
#page-view .portal-booking .book-pub-gift-note { margin: 0; color: var(--text); font-size: var(--portal-small); line-height: 1.5; }
/* Address field: text starts just after the 19px pin (was a 56px indent), so more of the address shows. */
html.is-public #page-view .portal-booking .book-location.field input[data-public-address] { padding-left: 42px; padding-right: 12px; text-overflow: ellipsis; }
/* Arrival times: part-of-day tab strip (not buttons) spanning the full width, thin dividers between parts,
hairline underneath, gold underline + text on the active part. Only the active part's times show. */
#page-view .portal-booking .book-slot-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 2px 0 12px; border-bottom: 1px solid rgba(233,225,210,.12); }
#page-view .portal-booking .book-slot-tab { position: relative; min-height: 44px; padding: 0 6px; border: 0; border-radius: 0; background: none; color: rgba(244,234,212,.62); font: 600 13px/1 var(--sans); letter-spacing: .01em; cursor: pointer; transition: color .15s ease; }
#page-view .portal-booking .book-slot-tab + .book-slot-tab::before { content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 1px; background: rgba(233,225,210,.12); }
#page-view .portal-booking .book-slot-tab::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: -1px; height: 2px; border-radius: 2px; background: transparent; transition: background-color .15s ease; }
#page-view .portal-booking .book-slot-tab:hover:not(:disabled) { color: #f4ead4; }
#page-view .portal-booking .book-slot-tab[aria-pressed='true'] { color: #e0c584; }
#page-view .portal-booking .book-slot-tab[aria-pressed='true']::after { background: #e0c584; }
#page-view .portal-booking .book-slot-tab:disabled { color: rgba(244,234,212,.26); cursor: not-allowed; }
#page-view .portal-booking .book-slot-tab:focus-visible { outline: 2px solid #e0c584; outline-offset: -4px; border-radius: 4px; }#page-view .portal-booking .book-times .book-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
#page-view .portal-booking .book-times .book-slots .book-time-tile { width: auto; min-width: 0; }
#page-view .portal-booking .book-slots[hidden] { display: none; }
/* Selected time: plain gold fill, no double ring. */
#page-view .portal-booking .book-slots .book-time-tile.is-selected { border-color: #e0c584 !important; box-shadow: none !important; }
/* Summary "Travel fee": label first, "?" after it; its explanation opens rightward from the "?" and never runs off-screen. */
#page-view .portal-booking .book-travel-label { justify-content: flex-start; gap: 8px; padding-left: 0; }
#page-view .portal-booking .book-travel-label .book-travel-help { order: 2; margin: 0; }
#page-view .portal-booking .book-travel-label .book-travel-help.book-legend-item .book-travel-tip { left: -8px; right: auto; width: min(250px, calc(100vw - 48px)); }
#page-view .portal-booking .book-travel-label .book-travel-help.book-legend-item .book-travel-tip::after, #page-view .portal-booking .book-travel-label .book-travel-help.book-legend-item .book-travel-tip::before { left: 12px; right: auto; }
#page-view .portal-booking .book-travel-label .book-travel-help.book-legend-item .book-travel-tip > strong { justify-self: start; text-align: left; }
/* Desktop review cards live in a 300px sidebar, so treatment gets its own row. */
@media (min-width: 761px) {
html.is-public #page-view .portal-booking .book-participant { grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; }
html.is-public #page-view .portal-booking .book-participant-who { grid-column: 2; grid-row: 1; overflow-wrap: anywhere; }
html.is-public #page-view .portal-booking .book-participant-visit { grid-column: 2 / -1; grid-row: 2; }
html.is-public #page-view .portal-booking .book-participant-visit > div { min-width: 0; overflow-wrap: anywhere; }
html.is-public #page-view .portal-booking .book-participant-end { grid-column: 3; grid-row: 1; grid-auto-flow: row; gap: 4px; }
}
@media (max-width: 760px) {
/* Phones - Who's coming: each person is a thin two-line ribbon.
Row 1: name · role | price. Row 2: massage icon + treatment · length | Edit. */
html.is-public #page-view .portal-booking .book-participants { gap: 6px; }
html.is-public #page-view .portal-booking .book-participants .book-participant { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who price" "visit edit"; align-items: center; column-gap: 10px; row-gap: 3px; min-height: 0; padding: 9px 12px; border-radius: 5px; }
html.is-public #page-view .portal-booking .book-participants .book-participant-avatar { display: none; }
html.is-public #page-view .portal-booking .book-participants .book-participant-who { grid-area: who; display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0; min-width: 0; }
html.is-public #page-view .portal-booking .book-participants .book-participant-who strong { font-size: 14px; line-height: 1.25; white-space: nowrap; }
html.is-public #page-view .portal-booking .book-participants .book-participant-who small { display: inline; margin: 0; font-size: 12px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.is-public #page-view .portal-booking .book-participants .book-participant-who small::before { content: " \00B7 "; white-space: pre; }
html.is-public #page-view .portal-booking .book-participants .book-participant-tag { display: none; }
html.is-public #page-view .portal-booking .book-participants .book-participant-visit { grid-area: visit; display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; padding: 0; }
html.is-public #page-view .portal-booking .book-participants .book-participant-visit .book-participant-art { display: block; flex: 0 0 18px; width: 18px; height: 18px; margin: 0; }
html.is-public #page-view .portal-booking .book-participants .book-participant-visit > div { display: flex; align-items: baseline; min-width: 0; }
html.is-public #page-view .portal-booking .book-participants .book-participant-visit strong { font-size: 13px; font-weight: 600; line-height: 1.25; color: #f4ead4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.is-public #page-view .portal-booking .book-participants .book-participant-visit small { font-size: 12px; line-height: 1.25; white-space: nowrap; }
html.is-public #page-view .portal-booking .book-participants .book-participant-visit small::before { content: " \00B7 "; white-space: pre; }
html.is-public #page-view .portal-booking .book-participants .book-participant-end { display: contents; }
html.is-public #page-view .portal-booking .book-participants .book-participant-end strong { grid-area: price; justify-self: end; font-size: 14px; line-height: 1.25; }
html.is-public #page-view .portal-booking .book-participants .book-participant-end .book-edit { grid-area: edit; justify-self: end; position: relative; display: inline-block; min-height: 0; padding: 0; font-size: 12px; line-height: 1.25; }
html.is-public #page-view .portal-booking .book-participants .book-participant-end .book-edit::after { content: ""; position: absolute; inset: -12px -10px; }
}
/* Review step: the form starts at "1. Your details" (no divider above it); "Who's coming" sits in the summary. */
#page-view .portal-booking .book-review > .detail-list[hidden] { display: none; }
#page-view .portal-booking .book-review > .detail-list[hidden] + .book-pub-section { margin-top: 0; padding-top: 0; border-top: 0; }
#page-view .portal-booking .book-summary .book-review-people { margin: 14px 0 16px; }
#page-view .portal-booking .book-summary .book-review-people-title { margin: 0 0 8px; }
/* Desktop review keeps the participant cards; phones use the schedule summary below. */
@media (min-width: 761px) {
html.is-public #page-view .portal-booking.book-step-review .book-summary-item:not([data-summary-item="Location"]):not([data-summary-item="Arrival"]) { display: none; }
html.is-public #page-view .portal-booking.book-step-review .book-summary-items .book-summary-item { border-bottom: 0; }
html.is-public #page-view .portal-booking.book-step-review .book-summary-items .book-summary-item[data-summary-item="Arrival"] { padding-left: 12px; border-left: 1px solid var(--rr-divider); }
}
/* Scroll target for "Next available": stop below the fixed site header. */
#page-view .portal-booking .book-times { scroll-margin-top: 70px; }
/* ---------- Tablet (761-1100px, desktop layout in one column) ---------- */
@media (min-width: 761px) and (max-width: 1100px) {
/* No visible scrollbars on tablets either; scrolling still works. */
html.is-public, html.is-public body, html.is-public * { scrollbar-width: none; }
html.is-public ::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Assurance footer: four equal columns (icon + full label, short line underneath) instead of an overflowing row. */
html.is-public body .book-now-proofs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; align-items: center; height: auto !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
html.is-public body .book-now-proofs > div { display: grid; grid-template-columns: 26px minmax(0, 1fr) !important; column-gap: 9px; align-items: center; min-width: 0; padding: 0 10px; }
html.is-public body .book-now-proofs > div + div { border-left: 1px solid rgba(233,225,210,.08); }
html.is-public body .book-now-proofs > div::after { display: none; }
html.is-public body .book-now-proofs > div > div { min-width: 0; }
html.is-public body .book-now-proofs .proof-art { width: 26px !important; height: 26px !important; margin: 0; align-self: center; }
html.is-public body .book-now-proofs strong, html.is-public body .book-now-proofs strong span { font-size: 12px; line-height: 1.25; white-space: normal !important; overflow-wrap: break-word; }
html.is-public body .book-now-proofs .proof-label-full { display: inline; }
html.is-public body .book-now-proofs .proof-label-short { display: none; }
html.is-public body .book-now-proofs small { display: block; margin-top: 2px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.is-public body .book-now-proofs small.proof-footnote { display: none; }
html.is-public .app-shell { padding-bottom: 96px; }
/* Booking summary spans the full column like the cards above it (was capped at 560px). */
html.is-public #page-view .portal-booking .book-summary { max-width: none; }
/* Leaf art stays but softer, so it doesn't sit over the summary. */
html.is-public .book-now-photo-rail__leaf { opacity: .38; }
/* Time legend: same calm tappable chips as on phones. */
html.is-public #page-view .portal-booking .book-slot-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px 8px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
html.is-public #page-view .portal-booking .book-slot-legend .book-legend-item { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid rgba(233,225,210,.12); border-radius: 5px; background: rgba(255,255,255,.03); color: rgba(244,234,212,.84); font-size: 12px; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; }
html.is-public #page-view .portal-booking .book-slot-legend .book-legend-item:has(.book-legend-help[aria-expanded='true']) { border-color: rgba(224,197,132,.5); background: rgba(224,197,132,.08); }
html.is-public #page-view .portal-booking .book-slot-legend .book-legend-item:has(.book-legend-help:focus-visible) { outline: 2px solid #e0c584; outline-offset: 2px; }
html.is-public #page-view .portal-booking .book-slot-legend .book-legend-item > :is(i, b, img) { margin: 0; }
html.is-public #page-view .portal-booking .book-slot-legend .book-legend-item > img { width: 13px; height: 13px; }
html.is-public #page-view .portal-booking .book-slot-legend .book-legend-help { position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: inherit; background: none; opacity: 0; cursor: pointer; }
html.is-public #page-view .portal-booking .book-slot-legend .book-legend-tip { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; width: 240px; max-width: none; }
html.is-public #page-view .portal-booking .book-availability-note { padding: 0 18px 14px; color: var(--muted); font-size: 12px; }
}
/* ---------- Mobile (phones) ---------- */
@media (max-width: 760px) {
/* One phone summary: the existing schedule grid moves to Review & confirm. */
html.is-public #page-view .portal-booking.book-step-choose[data-mstep="3"] .book-aside,
html.is-public #page-view .portal-booking.book-step-review .book-review-people { display: none; }
html.is-public #page-view .portal-booking .book-travel-label .book-travel-help.book-legend-item .book-travel-tip { width: min(250px, calc(100vw - 120px)); }
/* Assurance footer under the action bar: four compact squares, centred icon over short label, hairline dividers. */
html.is-public { --rr-proofs-h: calc(56px + env(safe-area-inset-bottom)); }
html.is-public .book-now-proofs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; align-items: stretch; height: var(--rr-proofs-h); padding: 0 4px env(safe-area-inset-bottom); border-top: 1px solid rgba(224,197,132,.14); background: rgba(18,21,26,.97); }
html.is-public .book-now-proofs > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 0 2px; }
html.is-public .book-now-proofs > div + div { border-left: 1px solid rgba(233,225,210,.08); }
html.is-public .book-now-proofs > div::after { display: none; }
html.is-public .book-now-proofs > div > div { min-width: 0; max-width: 100%; }
html.is-public .book-now-proofs .proof-art { width: 20px; height: 20px; margin: 0; align-self: center; filter: none; }
html.is-public .book-now-proofs strong { display: block; color: rgba(244,234,212,.86); font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.is-public .book-now-proofs .proof-label-full, html.is-public .book-now-proofs small { display: none; }
html.is-public .book-now-proofs .proof-label-short { display: inline; font-size: inherit; } /* Bar sits above page content (the summary's therapist picker has its own z-index) and is fully opaque. */
html.is-public #page-view .portal-booking .book-mobile-next { z-index: 25; background: rgb(18,21,26); }
html.is-public #page-view .portal-booking .book-mobile-next { bottom: var(--rr-proofs-h); flex-wrap: wrap; row-gap: 8px; column-gap: 12px; padding: 10px 16px; }
html.is-public #page-view .portal-booking .book-mobile-next > div:not(.book-mobile-step):not(.book-mstep-actions) { gap: 0; }
html.is-public #page-view .portal-booking .book-mobile-next strong { font-size: 20px; line-height: 1.15; }
html.is-public #page-view .portal-booking .book-mobile-next small { font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.is-public #page-view .portal-booking .book-mobile-next > .book-mobile-step { font-size: 12px; }
html.is-public #page-view .portal-booking .book-mobile-next > .book-mstep-actions { display: flex; flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
html.is-public #page-view .portal-booking .book-mstep-actions .button { min-width: 0; min-height: 46px; padding-inline: 14px; white-space: nowrap; }
html.is-public #page-view .portal-booking .book-mstep-actions .book-mstep-back { flex: 0 0 46px; width: 46px; padding: 0; font-size: 0; }
/* Back arrow: the text glyph sat off-centre; draw the site's arrow icon (mirrored) dead-centre instead. */
html.is-public #page-view .portal-booking .book-mstep-actions .book-mstep-back span { display: none; }
html.is-public #page-view .portal-booking .book-mstep-actions .book-mstep-back::before { content: ""; width: 18px; height: 18px; background: currentColor; transform: scaleX(-1); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
html.is-public #page-view .portal-booking .book-mobile-next > div:not(.book-mobile-step):not(.book-mstep-actions) { flex: 1 1 0; min-width: 0; }
html.is-public #page-view .portal-booking .book-mstep-actions .button-primary { flex: 0 1 auto; }
/* The in-bar "Step x of 4" is the progress indicator on phones; the 2-step nav above duplicated it. */
html.is-public #page-view .portal-booking .book-progress { display: none; }
html.is-public #page-view .portal-booking .book-heading { margin-bottom: 16px; }
/* Calendar sat on the treatment photo at ~30% scrim; darken so dates and times read clearly. */
html.is-public #page-view .portal-booking .book-availability { box-shadow: inset 0 0 0 100vmax rgba(20,23,28,.6); }
/* No visible scrollbars on phones (page and any inner scroller); scrolling still works. */
html.is-public, html.is-public body, html.is-public * { scrollbar-width: none; }
html.is-public ::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Short steps fit the screen: the shell reserved room for the old two-layer footer on top of a
full-height main, so even step 1 scrolled. Reserve only the action bar. */
html.is-public .app-shell { padding-bottom: calc(118px + var(--rr-proofs-h)); }
html.is-public #main > section { min-height: 0; }
/* Step 2 on its own: drop the divider that separated it from the (now hidden) address step. */
html.is-public #page-view .portal-booking[data-mstep="2"] .book-mstep-2 { margin-top: 0; padding-top: 0; border-top: 0; }
/* The gold leaf stays, but softer: on phones it sits behind translucent cards and crossed body text. */
html.is-public .book-now-photo-rail__leaf { opacity: .38; }
/* Long addresses end in an ellipsis instead of a hard cut mid-word. */
html.is-public #page-view .portal-booking :is([data-public-address], [data-pub-address]) { text-overflow: ellipsis; }
html.is-public #page-view .portal-booking .book-location.field input[data-public-address] { font-size: 14px; }
/* Page title sits closer to the header and reads larger. */
html.is-public #page-view { padding-top: 6px; }
html.is-public #page-view .portal-booking { padding-top: 0; }
html.is-public #page-view .portal-booking .book-heading { grid-template-columns: 90px minmax(0, 1fr); column-gap: 16px; padding-top: 4px; margin-bottom: 18px; }
html.is-public #page-view .portal-booking .book-heading.has-brand-mark .brand-mark { width: 90px; height: 144px; }
html.is-public #page-view .portal-booking .book-heading.has-brand-mark .brand-mark :is(canvas, video) { width: 100%; height: 100%; object-fit: contain; }
html.is-public #page-view .portal-booking .book-heading.has-brand-mark :is(h1, p) { margin-left: 12px; }
html.is-public #page-view .portal-booking .book-heading h1 { font-size: 28px; line-height: 1.1; margin-bottom: 6px; }
html.is-public #page-view .portal-booking .book-heading p { max-width: 220px; font-size: 13px; line-height: 1.45; }
/* Step 1 already shows the assurances as its 2 x 2 grid, so the footer starts from step 2. */
html.is-public:has(.portal-booking[data-mstep="1"]) { --rr-proofs-h: 0px; }
html.is-public:has(.portal-booking[data-mstep="1"]) .book-now-proofs { display: none; }
html.is-public:has(.portal-booking[data-mstep="1"]) #page-view .portal-booking .book-mobile-next { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
/* Treatment menu scrolls inside itself instead of pushing the page (about five treatments visible). */
html.is-public #page-view .portal-booking .book-treatment-menu { max-height: min(300px, 38vh); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* Time legend: calm tappable chips (icon + label). The "?" button stays in the markup for screen readers
but is invisible and covers its whole chip, so tapping a chip opens its explanation. */
html.is-public #page-view .portal-booking .book-slot-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 8px; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
html.is-public #page-view .portal-booking .book-slot-legend .book-legend-item { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid rgba(233,225,210,.12); border-radius: 5px; background: rgba(255,255,255,.03); color: rgba(244,234,212,.84); font-size: 12px; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; }
html.is-public #page-view .portal-booking .book-slot-legend .book-legend-item:has(.book-legend-help[aria-expanded='true']) { border-color: rgba(224,197,132,.5); background: rgba(224,197,132,.08); }
html.is-public #page-view .portal-booking .book-slot-legend .book-legend-item:has(.book-legend-help:focus-visible) { outline: 2px solid #e0c584; outline-offset: 2px; }
html.is-public #page-view .portal-booking .book-slot-legend .book-legend-item > :is(i, b, img) { margin: 0; }
html.is-public #page-view .portal-booking .book-slot-legend .book-legend-item > b { font-size: 12px; line-height: 1; }
html.is-public #page-view .portal-booking .book-slot-legend .book-legend-item > img { width: 13px; height: 13px; }
html.is-public #page-view .portal-booking .book-slot-legend .book-legend-help { position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: inherit; background: none; opacity: 0; cursor: pointer; }
html.is-public #page-view .portal-booking .book-slot-legend .book-legend-tip { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; width: min(220px, calc(100vw - 48px)); max-width: none; }
html.is-public #page-view .portal-booking .book-slot-legend .book-legend-item:nth-child(3) .book-legend-tip { left: auto; right: 0; }
html.is-public #page-view .portal-booking .book-availability-note { padding: 0 16px 14px; color: var(--muted); font-size: 12px; } /* Booking summary: the four details as a 2 x 2 grid split by hairlines; Therapist stays a full-width row below. */
html.is-public #page-view .portal-booking .book-summary-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rr-divider); border-bottom: 1px solid var(--rr-divider); }
html.is-public #page-view .portal-booking .book-summary-items .book-summary-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding: 14px 12px 14px 0; border: 0; }
html.is-public #page-view .portal-booking .book-summary-items .book-summary-item:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--rr-divider); }
html.is-public #page-view .portal-booking .book-summary-items .book-summary-item:nth-child(-n+2) { border-bottom: 1px solid var(--rr-divider); }
html.is-public #page-view .portal-booking .book-summary-items .book-summary-item > div { min-width: 0; }
html.is-public #page-view .portal-booking .book-summary-items .book-summary-item strong { overflow-wrap: anywhere; }
html.is-public #page-view .portal-booking .book-summary-items .book-summary-item .book-edit { position: absolute; top: 12px; right: 10px; }
html.is-public #page-view .portal-booking .book-summary-therapist { border-top: 0; }
/* Site menu links were 15px-tall tap targets. */
html.is-public .rnr-site-mobile-link { display: flex; align-items: center; min-height: 44px; }
/* Step 1: the four assurances as a 2 x 2 grid with their art, split by hairlines (no boxes inside the card). */
html.is-public #page-view .portal-booking[data-mstep="1"] .book-proofs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; border-top: 1px solid var(--rr-divider); }
html.is-public .book-proofs-grid > div { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 10px 16px; text-align: center; }
html.is-public .book-proofs-grid > div:nth-child(odd) { border-right: 1px solid var(--rr-divider); }
html.is-public .book-proofs-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--rr-divider); }
html.is-public .book-proofs-grid .proof-art { width: 34px; height: 34px; }
html.is-public .book-proofs-grid strong { display: block; color: var(--book-now-ivory, #f4ead4); font-size: 13px; font-weight: 600; line-height: 1.3; }
html.is-public .book-proofs-grid .proof-label-short, html.is-public .book-proofs-grid .proof-footnote { display: none; }
html.is-public .book-proofs-grid small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.35; }
}
.book-proofs-grid { display: none; }
/* Returning-address notice (live household gate) */
html.is-public .book-live-notice { margin: 12px 0 4px; padding: 14px 16px; border: 1px solid var(--rr-divider, rgba(255,255,255,.12)); border-radius: 10px; background: rgba(255,255,255,.03); }
html.is-public .book-live-notice p { margin: 4px 0 12px; font-size: 13px; color: var(--muted); }
html.is-public .book-live-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; }
html.is-public .book-live-notice-actions .button { flex: 1 1 160px; }
html.is-public [data-do="confirm-booking"][aria-busy="true"] { opacity: .7; cursor: progress; }
/* Guardian code dialog */
html.is-public .book-live-code { width: min(420px, calc(100vw - 32px)); padding: 22px; border: 1px solid var(--rr-divider, rgba(255,255,255,.12)); border-radius: 12px; background: #17191d; color: inherit; }
html.is-public .book-live-code::backdrop { background: rgba(5,6,8,.72); }
html.is-public .book-live-code h2 { margin: 0 0 6px; font-size: 20px; }
html.is-public .book-live-code p { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
html.is-public .book-live-code .field { display: grid; gap: 6px; margin-bottom: 16px; }
html.is-public .book-live-code input { font-size: 20px; letter-spacing: .3em; text-align: center; }
/* Open request (nothing bookable online) */
html.is-public .book-open-request { display: grid; gap: 10px; }
html.is-public .book-open-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html.is-public .book-open-row label { flex: 1 1 140px; }
html.is-public .book-open-row input, html.is-public .book-open-row select { width: 100%; min-height: 40px; padding: 0 10px; border: 1px solid var(--rr-divider, rgba(255,255,255,.12)); border-radius: 8px; background: #17191d; color: inherit; font: inherit; color-scheme: dark; }
html.is-public .book-open-row .button { flex: 1 1 100%; }
/* Referral link: the "{Name} referred you" note under the page title (shown only for a valid code). */
#page-view .portal-booking .book-referral-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid rgba(224,197,132,.32); border-radius: 4px; background: rgba(224,197,132,.08); color: var(--text); font-size: 14px; line-height: 1.4; }
#page-view .portal-booking .book-referral-banner .icon { flex: 0 0 20px; width: 20px; height: 20px; color: #e0c584; }
#page-view .portal-booking .book-referral-banner strong { color: #e0c584; font-weight: 600; }
html[data-theme='light'] #page-view .portal-booking .book-referral-banner { border-color: rgba(138,109,31,.35); background: rgba(224,197,132,.14); }
html[data-theme='light'] #page-view .portal-booking .book-referral-banner :is(.icon, strong) { color: #7a5d12; }
/* Referral code field (Your details): status line under the field. */
#page-view .portal-booking .book-referral-field { margin-top: 18px; }
#page-view .portal-booking .book-referral-status { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; color: var(--muted); font-size: var(--portal-small); line-height: 1.45; }
#page-view .portal-booking .book-referral-status .icon { flex: 0 0 16px; width: 16px; height: 16px; }
#page-view .portal-booking .book-referral-status.is-valid { color: #e0c584; }
#page-view .portal-booking .book-referral-status.is-invalid { color: #fca5a5; }
#page-view .portal-booking .book-referral-status + .book-pub-check { margin-top: 12px; }
html[data-theme='light'] #page-view .portal-booking .book-referral-status.is-valid { color: #7a5d12; }
html[data-theme='light'] #page-view .portal-booking .book-referral-status.is-invalid { color: #b91c1c; }