/* ==========================================================================
   Stage S: simple user flows (owner, 2026-10-17: "make everything very simple, smooth and more visual, so the user is never
   confused"). Loaded LAST (functions.php, priority 100) after the visual layer, on every page, so every rule here is scoped to
   a component of one flow: the sign-in dialog (.mentayar-auth-overlay), the booking widget (.booking-widget), the checkout
   (.client-checkout), the client home (.client-home) and the therapist today view (.pro-today).
   New code uses only --ds-* tokens, logical properties, 44px targets and the existing colour families (.ds-f-*). Brand themes:
   RavanLine re-points the same tokens (body.is-ravanline in tokens.css), nothing here is brand-specific.
   ========================================================================== */

/* ---------- shared: the progress stepper (time -> details -> pay) ---------- */
.simple-steps { display: flex; align-items: flex-start; gap: 0; margin: 0 0 var(--ds-space-4); padding: 0; list-style: none; }
.simple-steps__item { position: relative; flex: 1 1 0; min-inline-size: 0; display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-1); text-align: center; color: var(--ds-text-2); font-size: var(--ds-fs-xs); line-height: 1.3; }
/* the connecting line sits behind the circles, between neighbours */
.simple-steps__item + .simple-steps__item::before { content: ""; position: absolute; inset-block-start: 1.375rem; inset-inline-end: 50%; inline-size: 100%; block-size: 3px; background: var(--ds-line); border-radius: 3px; z-index: 0; }
.simple-steps__item.is-done + .simple-steps__item::before,
.simple-steps__item[aria-current="step"]::before { background: var(--ds-action); }
.simple-steps__dot { position: relative; z-index: 1; inline-size: 2.75rem; block-size: 2.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ds-radius-pill); background: var(--ds-surface); border: 2px solid var(--ds-line); color: var(--ds-text-2); transition: background var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease); }
.simple-steps__dot .ds-icon { inline-size: 1.25rem; block-size: 1.25rem; }
.simple-steps__item.is-done .simple-steps__dot { background: var(--ds-action); border-color: var(--ds-action); color: var(--ds-on-action); }
.simple-steps__item[aria-current="step"] .simple-steps__dot { background: var(--ds-mint-strong); border-color: var(--ds-action); color: var(--ds-deep); box-shadow: 0 0 0 4px var(--ds-mint); }
.simple-steps__item[aria-current="step"] { color: var(--ds-deep); font-weight: var(--ds-fw-semibold); }
.simple-steps__item.is-done { color: var(--ds-text); }
.simple-steps__label { display: block; max-inline-size: 100%; overflow-wrap: anywhere; }
.simple-steps--compact { max-inline-size: 22rem; margin-inline: auto; }
.simple-steps--compact .simple-steps__dot { inline-size: 2.25rem; block-size: 2.25rem; }
.simple-steps--compact .simple-steps__item + .simple-steps__item::before { inset-block-start: 1.0625rem; }
.simple-steps--compact .simple-steps__dot .ds-icon { inline-size: 1.0625rem; block-size: 1.0625rem; }

/* ---------- shared: a "more details" disclosure that looks like a quiet link ---------- */
.simple-more { margin-block: var(--ds-space-2); }
.simple-more > summary { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-block-size: var(--ds-control-h); padding-inline: var(--ds-space-1); cursor: pointer; list-style: none; color: var(--ds-deep); font-weight: var(--ds-fw-semibold); font-size: var(--ds-fs-sm); border-radius: var(--ds-radius-sm); }
.simple-more > summary::-webkit-details-marker { display: none; }
.simple-more > summary > .ds-icon { inline-size: 1.125rem; block-size: 1.125rem; flex: none; transition: transform var(--ds-dur) var(--ds-ease); }
.simple-more[open] > summary > .ds-icon:last-child { transform: rotate(180deg); }
.simple-more > summary:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.simple-more__body { padding-block-end: var(--ds-space-2); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.simple-more__body > :first-child { margin-block-start: 0; }
.simple-more__body > :last-child { margin-block-end: 0; }

/* ==========================================================================
   1. Sign-in dialog
   ========================================================================== */
.mentayar-auth-overlay .mentayar-modal { padding-block-start: var(--ds-space-8); }
.mentayar-auth-overlay [data-step] { display: block; }
.mentayar-auth-overlay [data-step][hidden] { display: none; }
.mentayar-auth-overlay .mentayar-modal h2 { font-size: var(--ds-fs-xl); line-height: var(--ds-lh-tight); margin-block: var(--ds-space-3) var(--ds-space-1); text-align: center; }
.mentayar-auth-overlay .mentayar-modal__hint { margin-block: 0 var(--ds-space-5); color: var(--ds-text-2); text-align: center; }
.auth-badge { display: flex; align-items: center; justify-content: center; inline-size: 3.5rem; block-size: 3.5rem; margin-inline: auto; border-radius: 18px; background: var(--ds-f-bg, var(--ds-mint-strong)); color: var(--ds-f-ink, var(--ds-deep)); }
.auth-top { position: absolute; inset-block-start: var(--ds-space-2); inset-inline-start: var(--ds-space-2); }
.auth-back { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--ds-control-h); block-size: var(--ds-control-h); border: 0; border-radius: var(--ds-radius-pill); background: transparent; color: var(--ds-text); cursor: pointer; }
.auth-back[hidden] { display: none; }
.auth-back:hover { background: var(--ds-mint); }
/* "back" points to the start of the line: left in English, right in Persian */
html[dir="ltr"] .auth-back .ds-icon { transform: none; }
html[dir="rtl"] .auth-back .ds-icon { transform: scaleX(-1); }
.auth-back:focus-visible, .auth-pass__toggle:focus-visible, .auth-choice:focus-visible, .mentayar-auth-overlay .mentayar-modal__close:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }

/* the two big choices */
.auth-choices { display: grid; gap: var(--ds-space-3); }
.auth-choices > div { display: contents; }
.auth-choices > div[hidden] { display: none; }
.auth-choice { display: flex; align-items: center; gap: var(--ds-space-4); inline-size: 100%; min-block-size: 4.5rem; padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-surface); border: 2px solid var(--ds-line); border-radius: var(--ds-radius-card); color: var(--ds-text); font: inherit; text-align: start; cursor: pointer; transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), background var(--ds-dur) var(--ds-ease); }
.auth-choice:hover { border-color: var(--ds-f-ink, var(--ds-action)); background: var(--ds-f-bg, var(--ds-mint)); box-shadow: var(--ds-shadow-card); }
.auth-choice__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 3rem; block-size: 3rem; border-radius: 14px; background: var(--ds-f-bg); color: var(--ds-f-ink); }
.auth-choice:hover .auth-choice__icon { background: var(--ds-surface); }
.auth-choice__text { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.auth-choice__text strong { font-size: var(--ds-fs-md); font-weight: var(--ds-fw-bold); }
.auth-choice__text small { font-size: var(--ds-fs-xs); color: var(--ds-text-2); line-height: 1.4; }
.auth-choice__go { flex: none; color: var(--ds-text-2); }

/* social buttons: same height as every other control */
.mentayar-auth-overlay .btn--social { min-block-size: var(--ds-control-h); justify-content: center; gap: var(--ds-space-2); }
.mentayar-auth-overlay .btn--social svg { inline-size: 1.25rem; block-size: 1.25rem; flex: none; }

/* forms */
.mentayar-auth-overlay .mentayar-modal__tabs { gap: var(--ds-space-1); padding: var(--ds-space-1); margin-block: var(--ds-space-4) var(--ds-space-2); background: var(--ds-tint); border: 0; border-radius: var(--ds-radius-control); }
.mentayar-auth-overlay .mentayar-modal__tab { flex: 1 1 0; border: 0; border-radius: var(--ds-radius-sm); color: var(--ds-text-2); font-weight: var(--ds-fw-semibold); }
.mentayar-auth-overlay .mentayar-modal__tab.is-active { background: var(--ds-surface); color: var(--ds-deep); box-shadow: 0 1px 3px rgba(23, 43, 42, 0.14); }
.mentayar-auth-overlay .mentayar-modal__tab:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.mentayar-auth-overlay .mentayar-modal__tabs[hidden] { display: none; }
.auth-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-space-3); }
.auth-pass { position: relative; }
.auth-pass .mentayar-modal__input { padding-inline-end: calc(var(--ds-control-h) + var(--ds-space-1)); }
.auth-pass__toggle { position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: var(--ds-control-h); block-size: var(--ds-control-h); display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ds-text-2); border-radius: var(--ds-radius-control); cursor: pointer; }
.auth-pass__toggle:hover { color: var(--ds-deep); }
.mentayar-auth-overlay .mentayar-modal__forgot { margin-block: var(--ds-space-2) var(--ds-space-4); }
.mentayar-auth-overlay .btn--primary { min-block-size: 3rem; font-size: var(--ds-fs-md); font-weight: var(--ds-fw-bold); }
.mentayar-auth-overlay .mentayar-modal__otp-row input { min-block-size: 3.5rem; font-size: 1.75rem; letter-spacing: 0.5em; text-align: center; inline-size: 100%; }
.auth-sent { display: flex; align-items: flex-start; justify-content: center; gap: var(--ds-space-2); margin-block: var(--ds-space-4) 0; padding: var(--ds-space-3); border-radius: var(--ds-radius-control); background: var(--ds-success-bg); color: var(--ds-success); text-align: start; }
.auth-sent[hidden] { display: none; }
.auth-sent .ds-icon { flex: none; margin-block-start: 2px; }

/* an error is a visible box with an icon, not a thin line below the sheet */
.mentayar-auth-overlay .mentayar-modal__error:not(:empty) { margin-block: var(--ds-space-3) 0; padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--ds-danger-line); border-radius: var(--ds-radius-control); background: var(--ds-danger-bg); color: var(--ds-danger); text-align: start; font-weight: var(--ds-fw-medium); }
.mentayar-auth-overlay .mentayar-modal__error.is-info:not(:empty) { border-color: var(--ds-info-line); background: var(--ds-info-bg); color: var(--ds-info); }
.mentayar-auth-overlay .mentayar-modal__error:empty { margin: 0; min-block-size: 0; }
.mentayar-auth-overlay .mentayar-modal__resend { margin-block-start: var(--ds-space-3); }

@media (prefers-reduced-motion: reduce) {
	.simple-steps__dot, .auth-choice, .simple-more > summary > .ds-icon { transition: none; }
}

/* ==========================================================================
   2. Booking widget (step 1: time)
   ========================================================================== */
.booking-widget .simple-steps { margin-block: var(--ds-space-3) var(--ds-space-4); }
.booking-widget .pill { gap: var(--ds-space-2); }
.booking-widget .pill .ds-icon { inline-size: 1.125rem; block-size: 1.125rem; flex: none; }
.booking-widget .client-selection { display: grid; gap: var(--ds-space-1); border: 1px solid var(--ds-f-teal-bg); border-inline-start: 4px solid var(--ds-action); background: var(--ds-mint); }
.booking-widget .client-selection__title { display: flex; align-items: center; gap: var(--ds-space-2); }
.booking-widget .client-selection__price { display: flex; align-items: center; gap: var(--ds-space-2); margin-block-start: var(--ds-space-1); color: var(--ds-deep); font-weight: var(--ds-fw-bold); }
.booking-widget .client-selection__price .ds-icon { flex: none; }
/* the chosen time already carries length and price, so the plain facts list steps aside */
.booking-widget .client-selection:not([hidden]) ~ .booking-widget__facts li:not([data-fact-location-row]) { display: none; }
.booking-widget .client-selection:not([hidden]) ~ .booking-widget__facts:not(:has(li[data-fact-location-row]:not([hidden]))) { display: none; }
.booking-widget fieldset.booking-widget__section + .booking-widget__section { margin-block-start: var(--ds-space-4); }
.booking-widget .booking-widget__note.simple-more { margin-block: var(--ds-space-2) 0; }
.booking-widget .client-subnote { padding-block: var(--ds-space-1); }
.booking-widget .time-slot { min-block-size: var(--ds-control-h); }
.booking-widget [data-submit-booking] { min-block-size: 3rem; font-weight: var(--ds-fw-bold); }

/* ==========================================================================
   3. Checkout
   ========================================================================== */
.client-checkout .simple-steps { max-inline-size: 32rem; margin-inline: auto; margin-block-end: var(--ds-space-5); }
.checkout__summary-specialist > div { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.checkout__summary-specialist-fallback { display: inline-flex !important; align-items: center; justify-content: center; background: var(--ds-f-teal-bg) !important; color: var(--ds-f-teal-ink); }
.simple-sum__meta { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-text-2); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-regular); }
.simple-sum__meta .ds-icon { flex: none; }
.simple-sum__when { display: flex; align-items: center; gap: var(--ds-space-3); margin-block: var(--ds-space-3); padding: var(--ds-space-3); background: var(--ds-mint); border-radius: var(--ds-radius-control); }
.simple-sum__when > div { min-inline-size: 0; }
.simple-sum__label { display: block; color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.simple-sum__total { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); margin-block-start: var(--ds-space-3); padding-block-start: var(--ds-space-3); border-block-start: 1px dashed var(--ds-line); }
.simple-sum__total > span { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-text-2); font-weight: var(--ds-fw-medium); }
.simple-sum__total > strong { font-size: var(--ds-fs-xl); color: var(--ds-deep); }
.checkout__summary:has(> .simple-fee) { padding-block: var(--ds-space-1); }
.simple-fee > summary { inline-size: 100%; }
.simple-fee > summary > span { flex: 1 1 auto; }
.checkout__summary .simple-more { margin-block: 0; }
.checkout__summary h2 { display: block; }

/* folding "your details" box */
.simple-details { margin-block: 0 var(--ds-space-5); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-surface); }
.simple-details > summary { display: flex; align-items: center; gap: var(--ds-space-3); min-block-size: 3.5rem; padding: var(--ds-space-3) var(--ds-space-4); color: var(--ds-text); font-weight: var(--ds-fw-regular); }
.simple-details__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 12px; background: var(--ds-f-amber-bg); color: var(--ds-f-amber-ink); }
.simple-details.is-complete .simple-details__icon { background: var(--ds-success-bg); color: var(--ds-success); }
.simple-details__text { flex: 1 1 auto; min-inline-size: 0; display: flex; flex-direction: column; gap: 2px; }
.simple-details__text strong { font-size: var(--ds-fs-md); }
.simple-details__text small { color: var(--ds-text-2); font-size: var(--ds-fs-xs); overflow-wrap: anywhere; }
.simple-details__body { padding: var(--ds-space-2) var(--ds-space-4) var(--ds-space-4); border-block-start: 1px solid var(--ds-line); }
.simple-details__body > .checkout__billing-title:first-child { margin-block-start: var(--ds-space-3); }

/* phones and tablets: summary, price, code, then what to fill in and pay; support last */
@media (max-width: 1023.98px) {
	.client-checkout__grid { display: flex; flex-direction: column; align-items: stretch; gap: var(--ds-space-4); }
	.client-checkout__side { display: contents; }
	.client-checkout__side > [data-summary] { order: 1; }
	.client-checkout__side > [data-fee] { order: 2; }
	.client-checkout__side > [data-discount-box] { order: 3; }
	.client-checkout__grid > .checkout__main { order: 4; }
	.client-checkout__side > .checkout__support { order: 5; }
}
.client-checkout .ds-btn--lg { min-block-size: 3rem; font-weight: var(--ds-fw-bold); }

/* the result screen */
.checkout__done { text-align: center; }
.checkout__done .confirmation-box { padding: var(--ds-space-2) 0; }
.checkout__done .confirmation-box__icon { inline-size: 5rem; block-size: 5rem; background: var(--ds-success-bg); color: var(--ds-success); box-shadow: 0 0 0 8px var(--ds-success-bg); margin-block-end: var(--ds-space-3); animation: simple-pop 420ms var(--ds-ease) both; }
.checkout__done .confirmation-box__icon .ds-icon { inline-size: 2.5rem; block-size: 2.5rem; stroke-width: 2.2; }
@keyframes simple-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.done-when { display: flex; align-items: center; gap: var(--ds-space-4); margin-block: var(--ds-space-4); padding: var(--ds-space-4); background: var(--ds-mint); border: 1px solid var(--ds-f-teal-bg); border-radius: var(--ds-radius-card); text-align: start; }
.done-when > div { min-inline-size: 0; }
.done-when__who { display: block; font-size: var(--ds-fs-lg); }
.done-when__meta { display: block; margin-block-start: var(--ds-space-1); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.checkout__done .confirmation-box__actions { flex-direction: column; align-items: stretch; margin-block-end: var(--ds-space-4); }
.checkout__done .confirmation-box__actions > * { inline-size: 100%; }
.checkout__done .confirmation-box__actions [data-confirmation-calendar] > * { inline-size: 100%; }
.done-next { text-align: start; margin-block: var(--ds-space-4); padding: var(--ds-space-4); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); }
.done-next h3 { margin: 0 0 var(--ds-space-3); font-size: var(--ds-fs-md); }
.done-next__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--ds-space-3); }
.done-next__list li { display: flex; align-items: flex-start; gap: var(--ds-space-3); color: var(--ds-text); font-size: var(--ds-fs-sm); line-height: 1.6; }
.done-next__list li > span:last-child { padding-block-start: 0.4rem; }
.done-more { text-align: start; }
.done-more .confirmation-box__facts { margin-block: 0; }
@media (prefers-reduced-motion: reduce) { .checkout__done .confirmation-box__icon { animation: none; } }

/* once the booking is confirmed the summary is on the result card itself: show that card alone, centred */
.client-checkout__grid:has([data-confirmation]:not([hidden])) { grid-template-columns: minmax(0, 36rem); justify-content: center; margin-inline: auto; }
.client-checkout__grid:has([data-confirmation]:not([hidden])) > .client-checkout__side { display: none; }
.client-checkout__grid:has([data-confirmation]:not([hidden])) > .checkout__main { max-inline-size: 36rem; margin-inline: auto; inline-size: 100%; }

/* ==========================================================================
   4. Client home and sessions
   ========================================================================== */
.simple-countdown { display: flex; align-items: center; gap: var(--ds-space-1); margin-block-start: 2px; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-medium); }
.simple-countdown .ds-icon { flex: none; }
.simple-linkbtn { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--ds-control-h); padding-inline: var(--ds-space-3); background: transparent; border: 0; border-radius: var(--ds-radius-control); color: #fff; font: inherit; font-weight: var(--ds-fw-semibold); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.simple-linkbtn:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus-on-dark); outline-offset: var(--ds-focus-offset); }
.client-home__next .ds-feature__actions { align-items: center; gap: var(--ds-space-2); }
.client-quick { margin-block: var(--ds-space-5); }
.ds-tiles--quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-tiles--quick .ds-tile { block-size: 100%; }
@media (max-width: 359.98px) { .ds-tiles--quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .ds-tiles--quick { gap: var(--ds-space-4); } }
.ds-state__pic { margin-block-end: var(--ds-space-1); }
.client-appt__more { grid-column: 1 / -1; margin: 0; }
/* the sessions area has two levels of navigation: the section list becomes quiet chips so the three tabs below stay the main control */
.client-subnav { border-block-end: 0; }
.client-subnav ul { gap: var(--ds-space-2); padding-block-end: var(--ds-space-1); scroll-snap-type: x proximity; }
.client-subnav a { border: 1px solid var(--ds-line); border-radius: var(--ds-radius-pill); background: var(--ds-surface); min-block-size: var(--ds-control-h); scroll-snap-align: start; white-space: nowrap; }
.client-subnav a[aria-current="page"] { background: var(--ds-mint-strong); border-color: var(--ds-action); color: var(--ds-deep); font-weight: var(--ds-fw-semibold); }
/* a tile made from a <button> must fill its grid cell like a tile made from a link (equal widths in every row) */
.ds-tiles > li > .ds-tile { inline-size: 100%; block-size: 100%; }
.client-subnav ul { scrollbar-width: none; }
.client-subnav ul::-webkit-scrollbar { display: none; }

/* ==========================================================================
   5. Therapist home: today first
   ========================================================================== */
.pro-stats { list-style: none; margin: 0 0 var(--ds-space-5); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-3); }
.pro-stat { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-1); inline-size: 100%; block-size: 100%; min-block-size: var(--ds-control-h); padding: var(--ds-space-3) var(--ds-space-2); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); color: var(--ds-text); font: inherit; text-align: center; cursor: pointer; transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease); }
.pro-stat:hover { border-color: var(--ds-f-ink); box-shadow: var(--ds-shadow-card); }
.pro-stat:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.pro-stat__num { font-size: var(--ds-fs-3xl); font-weight: var(--ds-fw-bold); line-height: 1; color: var(--ds-f-ink); }
.pro-stat__label { font-size: var(--ds-fs-xs); color: var(--ds-text-2); line-height: 1.3; }
.pro-start { min-block-size: 3rem; gap: var(--ds-space-2); font-weight: var(--ds-fw-bold); }
@media (max-width: 639.98px) { .pro-today .pro-start { inline-size: 100%; } }
.pro-today .sp-today__time { font-size: var(--ds-fs-xl); }
.pro-empty { background: var(--ds-surface); border: 1px dashed var(--ds-line); border-radius: var(--ds-radius-card); }
.pro-more { margin-block-start: var(--ds-space-5); }
.pro-more > summary { display: flex; align-items: center; gap: var(--ds-space-3); min-block-size: 3.25rem; padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); list-style: none; cursor: pointer; color: var(--ds-deep); font-weight: var(--ds-fw-semibold); }
.pro-more > summary::-webkit-details-marker { display: none; }
.pro-more > summary > span { flex: 1 1 auto; }
.pro-more[open] > summary > .ds-icon:last-child { transform: rotate(180deg); }
.pro-more > summary:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: var(--ds-focus-offset); }
.pro-more > .sp-home__aside { margin-block-start: var(--ds-space-4); }
@media (min-width: 1024px) {
	.pro-more { margin-block-start: 0; }
	.pro-more > summary { display: none; }
	.pro-more > .sp-home__aside { margin-block-start: 0; }
}
.pro-today .sp-today__time { justify-self: start; padding-inline: var(--ds-space-3); }
.auth-fieldhint { margin: var(--ds-space-1) 0 0; color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.auth-fieldhint[hidden] { display: none; }

/* ==========================================================================
   CHECKOUT, SHORT (2026-10-17): ask only what the chosen payment method uses, fold the rest, tighten phones.
   Fields per method live in assets/js/checkout.js (FIELD_RULES) and are covered by bin/tests/cases/checkout_fields.php.
   ========================================================================== */
/* name pair on one row, mobile and email full width; the optional address box is folded */
.client-checkout .simple-details__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--ds-space-3); }
.client-checkout .simple-details__grid > .simple-details__wide, .client-checkout .simple-details__grid > [data-email-field] { grid-column: 1 / -1; }
.client-checkout .simple-details__grid > .ds-field, .client-checkout [data-optional-grid] > .ds-field { margin-block-end: var(--ds-space-2); }
.client-checkout [data-optional-grid] { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0 var(--ds-space-3); }
.client-checkout [data-optional-grid] [data-email-field] { grid-column: 1 / -1; }
.client-checkout [data-email-field] .ds-field__label[data-optional]:not([data-optional=""])::after { content: " (" attr(data-optional) ")"; color: var(--ds-text-2); font-weight: var(--ds-fw-regular); }
.simple-invoice { margin-block: var(--ds-space-1) 0; }
.simple-invoice > summary { inline-size: 100%; justify-content: space-between; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.simple-invoice__hint { margin: 0 0 var(--ds-space-2); color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.simple-details__body { padding-block: var(--ds-space-3) var(--ds-space-2); }
/* the discount code is one quiet line until asked for */
.simple-discount.checkout__summary { padding: 0 var(--ds-space-3); }
.simple-discount__fold > summary { inline-size: 100%; min-block-size: 3rem; }
.simple-discount__fold > summary > span { flex: 1 1 auto; }
.simple-discount__fold .simple-more__body { padding-block-end: var(--ds-space-3); }

@media (max-width: 1023.98px) {
	/* title, steps, cards: smaller rhythm */
	.client-checkout.section { padding-block-start: var(--ds-space-4); }
	.client-checkout > h1 { margin-block: 0 var(--ds-space-3); font-size: var(--ds-fs-2xl, 1.5rem); }
	.client-checkout .simple-steps { margin-block-end: var(--ds-space-3); }
	.client-checkout .simple-steps__dot { inline-size: 2.25rem; block-size: 2.25rem; }
	.client-checkout__grid { gap: var(--ds-space-2); }
	.checkout__summary, .checkout__payment { padding: var(--ds-space-3); border-radius: var(--ds-radius-control); }
	/* the card titles repeat the step bar: keep them for screen readers only */
	.checkout__summary > h2, .checkout__payment > h2 { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
	/* appointment: who and when side by side with the price, no extra boxes */
	.checkout__summary-specialist { margin-block-end: var(--ds-space-2); gap: var(--ds-space-3); }
	.checkout__summary-specialist img, .checkout__summary-specialist-fallback { inline-size: 40px; block-size: 40px; }
	.simple-sum__when { margin-block: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3); gap: var(--ds-space-3); }
	.simple-sum__when .ds-ibox { inline-size: 2.5rem; block-size: 2.5rem; flex: none; }
	.simple-sum__total { margin-block-start: var(--ds-space-2); padding-block-start: var(--ds-space-2); }
	.simple-sum__total > strong { font-size: var(--ds-fs-lg); }
	.checkout__summary [data-choose-other] { min-block-size: 2rem; padding-block: 0; margin-block-start: var(--ds-space-1); }
	.checkout__summary:has(> .simple-fee) { padding-block: 0; padding-inline: var(--ds-space-3); }
	.simple-fee > summary { min-block-size: 3rem; }
	.simple-sum__label { display: none; }
	.simple-sum__when { align-items: center; }
	.simple-sum__when .ds-ibox { display: none; }
	.simple-sum__total > span { font-size: var(--ds-fs-sm); }
	.checkout__summary [data-choose-other] { margin-block-start: 0; }
	.simple-fee > summary, .simple-discount__fold > summary { min-block-size: 2.75rem; }
	/* payment: method title off (still the tabs' accessible name), tabs and button close together */
	#co-method-title { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
	.checkout__payment { border: 0; background: transparent; padding: 0; }
	.simple-details { margin-block-end: var(--ds-space-3); }
	.simple-details > summary { min-block-size: 3.25rem; padding: var(--ds-space-2) var(--ds-space-3); }
	.checkout__billing-title { margin-block: var(--ds-space-3) var(--ds-space-2); }
	.gateway-tabs.ds-tabs { gap: var(--ds-space-1); }
	.gateway-panel { padding-block: var(--ds-space-2); }
	.gateway-panel .booking-widget__hint { margin-block: 0 var(--ds-space-2); }
	.checkout__payment > p.client-muted { margin-block: var(--ds-space-2) 0; font-size: var(--ds-fs-xs); }
	/* the help box: one compact line of contacts, last */
	.client-checkout__side > .checkout__support { padding: var(--ds-space-2) var(--ds-space-3); }
	.checkout__support h2 { font-size: var(--ds-fs-sm); margin-block-end: var(--ds-space-1); }
	.checkout__support-list { flex-direction: row; flex-wrap: wrap; gap: var(--ds-space-1) var(--ds-space-4); }
	/* the long site footer (links, social, contact) is not needed in the middle of paying; the legal bar stays */
	.page-template-template-booking .site-footer__top, .page-template-template-booking .site-footer__inner { display: none; }
}

/* ---- Quiz intro: the AI assistant entry under the start button (2026-10-17) ---- */
.mq-intro__assist { inline-size: min(100%, 24rem); margin-block-start: var(--ds-space-2); text-align: start; }

/* ---- BEGIN footer social row (2026-10-17, agent: footer-social) ----
   The icons were stacked: `.site-footer ul` (style.css, column + gap 0) out-ranked `.site-footer__social`. One row, wraps only when there are too many. */
.site-footer ul.site-footer__social { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--ds-space-3); }
.site-footer__social > li { display: block; flex: 0 0 auto; margin: 0; padding: 0; }
.site-footer__social a { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--ds-control-h); inline-size: var(--ds-control-h); block-size: var(--ds-control-h); padding: 0; border-radius: var(--ds-radius-pill); }
.site-footer__social a:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .site-footer__social a { transition: none; } }
/* ---- END footer social row ---- */

/* ---- Home: install-the-app band (template-parts/home-v2/install.php, 2026-10-17) ---- */
/* Soft surface (mint on Mentayar, warm sand on RavanLine), a phone picture, one line, one button. Hidden in the installed app. */
.mhome-install { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ds-space-5); position: relative; overflow: hidden; isolation: isolate; background: var(--ds-mint); border: 1px solid var(--ds-mint-strong); border-radius: 20px; padding: var(--ds-space-8); }
.mhome-install::before { content: ""; position: absolute; inset-inline-end: -3.5rem; inset-block-start: -6rem; inline-size: 13rem; block-size: 13rem; border-radius: 50%; background: rgba(0, 166, 147, 0.14); z-index: -1; }
body.is-ravanline .mhome-install { background: var(--ds-accent-bg); border-color: #EBDDC8; }
body.is-ravanline .mhome-install::before { background: rgba(138, 90, 43, 0.14); }
.mhome-install__badge { display: inline-grid; place-items: center; inline-size: 5rem; block-size: 5rem; border-radius: 50%; background: var(--ds-surface); color: var(--ds-action); box-shadow: 0 2px 10px rgba(23, 43, 42, 0.10); }
body.is-ravanline .mhome-install__badge { color: var(--ds-accent); }
.mhome-install__body h2 { margin: 0 0 var(--ds-space-1); font-size: var(--ds-fs-2xl); color: var(--ds-text); }
.mhome-install__body p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-md); }
.mhome-install__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3) var(--ds-space-4); }
.mhome-install__actions a { text-decoration: none; }
body.is-ravanline .mhome-install .pub-textlink { color: var(--ds-accent); }
@media (max-width: 767px) {
	.mhome-install { grid-template-columns: auto minmax(0, 1fr); padding: var(--ds-space-5); gap: var(--ds-space-3) var(--ds-space-4); }
	.mhome-install__badge { inline-size: 3.5rem; block-size: 3.5rem; align-self: start; }
	.mhome-install__actions { justify-content: space-between; }
	.mhome-install__badge svg { inline-size: 34px; block-size: 34px; }
	.mhome-install__body h2 { font-size: var(--ds-fs-lg); }
	.mhome-install__actions { grid-column: 1 / -1; }
	.mhome-install__actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) { .mhome-install-wrap { display: none !important; } }
@media print { .mhome-install-wrap { display: none; } }
/* ---- END home install band ---- */

/* ---- BEGIN home: specialists' band is the last section (2026-10-17, agent: banner-last) ----
   The blue band now sits right above the footer; its own bottom padding plus the footer's top margin made a double gap. One gap only. */
body.home main > .pub-section:last-child { padding-block-end: 0; }
/* ---- END home: specialists' band last ---- */

/* ---- Quiz "finding the best options" screen (2026-10-17): the same screen the apps show between the last answer and the results ---- */
.mq-wait[hidden] { display: none; }
.mq-wait { display: grid; gap: var(--ds-space-5); padding: var(--ds-space-4) var(--ds-space-4) var(--ds-space-6); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 24px; box-shadow: var(--ds-shadow-card); }
.mq-wait__top { display: grid; gap: var(--ds-space-3); justify-items: start; }
.mq-wait__skip { min-block-size: 2.75rem; border-radius: var(--ds-radius-pill); background: var(--ds-mint-strong); color: var(--ds-deep); font-weight: var(--ds-fw-semibold); }
.mq-wait__bar { display: block; inline-size: 100%; block-size: 0.5rem; border-radius: var(--ds-radius-pill); background: var(--ds-tint); overflow: hidden; }
.mq-wait__bar > div, .mq-wait__bar > span { display: block; block-size: 100%; inline-size: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ds-brand), var(--ds-action)); transition-property: width; transition-timing-function: cubic-bezier(0.25, 0.5, 0.5, 1); transition-duration: 0ms; }
.mq-wait__hero { display: grid; justify-items: center; gap: var(--ds-space-4); padding-block-start: var(--ds-space-3); }
.mq-wait__spark { display: grid; place-items: center; inline-size: 5.75rem; block-size: 5.75rem; border-radius: 50%; background: var(--ds-mint-strong); color: var(--ds-action); }
.mq-wait__title { margin: 0; font-size: var(--ds-fs-xl); line-height: 1.5; text-align: center; }
.mq-wait__title:focus { outline: none; }
.mq-wait__steps { display: grid; gap: var(--ds-space-4); margin: 0; padding: 0; list-style: none; max-inline-size: 30rem; inline-size: 100%; justify-self: center; }
.mq-wait__step { display: grid; gap: var(--ds-space-2); color: var(--ds-text-2); }
.mq-wait__step[data-state="active"], .mq-wait__step[data-state="done"] { color: var(--ds-text); }
.mq-wait__step[data-state="done"] .mq-wait__label::after { content: ""; display: inline-block; inline-size: 1rem; block-size: 1rem; margin-inline-start: var(--ds-space-2); vertical-align: -0.15em; border-radius: 50%; background: var(--ds-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat; }
.mq-wait__trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-3); margin: 0; padding: 0; list-style: none; }
.mq-wait__trust li { display: grid; justify-items: center; align-content: start; gap: var(--ds-space-2); padding: var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: 20px; background: var(--ds-surface); text-align: center; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); line-height: 1.5; }
.mq-wait__ticon { display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--ds-mint-strong); color: var(--ds-action); }
@media (min-width: 720px) {
	.mq-wait { padding: var(--ds-space-5) var(--ds-space-6) var(--ds-space-7, var(--ds-space-6)); }
	.mq-wait__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* a soft pulse on the sparkle while waiting; with reduced motion the steps still change, nothing moves */
@media (prefers-reduced-motion: no-preference) {
	.mq-wait[data-busy] .mq-wait__spark { animation: mq-wait-pulse 1.6s ease-in-out infinite; }
	@keyframes mq-wait-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
}
@media (prefers-reduced-motion: reduce) { .mq-wait__bar > div, .mq-wait__bar > span { transition: none !important; } }
/* while the waiting screen is up, the page head shrinks like it does for the questions */
body:has([data-quiz-wait]:not([hidden])) .client-pagehead .ds-pagehead__sub,
body:has([data-quiz-wait]:not([hidden])) .client-pagehead .ds-breadcrumb { display: none; }

/* ---- BEGIN profile: booking widget date-first (2026-10-17, agent: place-and-dates) ----
   The place section and the «About the specialist» card now live in profile.css (profile redesign). What stays here: the date strip and the empty state. */
.booking-widget .date-carousel { position: relative; } /* contains the visually-hidden notes inside day chips (an absolutely positioned one would otherwise add page-wide horizontal scroll in RTL) */
.booking-widget__label-day { color: var(--ds-text-2); font-weight: var(--ds-fw-regular); }
.booking-widget .client-daychip:disabled, .booking-widget .client-daychip.is-empty { background: var(--ds-disabled-bg); color: var(--ds-disabled-text); border-color: transparent; cursor: not-allowed; opacity: 0.75; }
.booking-widget .client-daychip.is-empty .client-daychip__tag { opacity: 0.8; }
.booking-widget .booking-widget__empty { display: grid; justify-items: start; gap: var(--ds-space-2); text-align: start; padding: var(--ds-space-3); background: var(--ds-tint); border-radius: var(--ds-radius-control); }
.booking-widget .booking-widget__empty p { margin: 0; color: var(--ds-text); }
/* ---- END profile: booking widget date-first ---- */

/* ---- BEGIN hours editor: session formats (2026-10-17, agent: web hours editor) ----
   Weekly hours (assets/js/ds/specialist-hours.js): several time ranges a day, each with big format tiles (video / phone / in person and their
   mixes), an optional custom mix, a place picker, a plain sentence and warnings. Logical properties only (RTL/LTR); both brands use the same tokens. */
[data-hours-notes]:empty, [data-hours-attention]:empty { display: none; }
[data-hours-notes], [data-hours-attention] { margin-block: var(--ds-space-3); }
.sp-presets__note { margin-block: calc(var(--ds-space-1) * -1) var(--ds-space-2); }
.sp-noplace { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-surface); }
.sp-noplace__text { display: grid; gap: 2px; flex: 1 1 14rem; min-inline-size: 0; }
.sp-noplace__text span { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.sp-dayrow__summary { min-inline-size: 0; flex: 1 1 8rem; text-align: end; overflow-wrap: anywhere; }
.sp-wins { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-4); }
.sp-win { display: grid; gap: var(--ds-space-3); min-inline-size: 0; }
.sp-wins:has(.sp-win + .sp-win) > .sp-win { padding: var(--ds-space-3); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control); background: var(--ds-bg); }
.sp-win.has-error { border-color: var(--ds-danger); }
.sp-win > .sp-row { max-inline-size: 30rem; }
.sp-row--pair { flex-wrap: nowrap; }
.sp-row--pair > .ds-field { flex: 1 1 0; min-inline-size: 0; }
.sp-win__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2); }
.sp-win__title { font-weight: var(--ds-fw-semibold); }
.sp-win__sum { margin: 0; padding-inline-start: var(--ds-space-3); border-inline-start: 3px solid var(--ds-brand); color: var(--ds-deep); font-weight: var(--ds-fw-semibold); line-height: 1.6; }
.sp-win__sum:empty { display: none; }
.sp-win__note { display: flex; gap: var(--ds-space-2); align-items: flex-start; margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.sp-win__note .ds-icon { flex: none; margin-block-start: 0.15rem; }
.sp-win__note--warn { color: var(--ds-warning); }

/* the format tiles: one big picture-and-word button per choice */
.sp-fmt { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: var(--ds-space-2); }
.sp-fmt__legend { padding: 0; font-weight: var(--ds-fw-semibold); margin-block-end: var(--ds-space-1); }
.sp-fmt__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-2); }
.sp-tile { position: relative; display: block; min-inline-size: 0; }
.sp-tile input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sp-tile__box { position: relative; display: grid; align-content: start; gap: var(--ds-space-1); block-size: 100%; min-block-size: 5.75rem; padding: var(--ds-space-3); border: 1px solid var(--ds-control-line); border-radius: 14px; background: var(--ds-surface); color: var(--ds-text); overflow-wrap: anywhere; }
.sp-tile:hover .sp-tile__box { border-color: var(--ds-deep); background: var(--ds-mint); }
.sp-tile input:checked + .sp-tile__box { border-color: var(--ds-action); box-shadow: inset 0 0 0 1px var(--ds-action); background: var(--ds-mint); }
.sp-tile input:focus-visible + .sp-tile__box { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.sp-tile input:checked + .sp-tile__box::after { content: ""; position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; background: var(--ds-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat; }
.sp-tile__icons { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); padding-inline-end: 1.5rem; }
.sp-tile__icons .ds-ibox--sm { inline-size: 1.75rem; block-size: 1.75rem; border-radius: 9px; }
.sp-tile__icons .ds-icon { inline-size: 1.05rem; block-size: 1.05rem; }
.sp-tile__label { font-weight: var(--ds-fw-semibold); line-height: 1.4; }
.sp-tile__sub { color: var(--ds-text-2); font-size: var(--ds-fs-xs); line-height: 1.45; }
.sp-fmt__custom { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-3); border: 1px dashed var(--ds-control-line); border-radius: var(--ds-radius-control); background: var(--ds-surface); }
.sp-fmt__sublegend { margin: 0; font-weight: var(--ds-fw-semibold); font-size: var(--ds-fs-sm); }
.sp-fmt__hint { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.sp-fmt__sws { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.sp-sw { position: relative; display: block; flex: 1 1 8rem; min-inline-size: 0; }
.sp-sw input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sp-sw input:disabled { cursor: not-allowed; }
.sp-sw__box { display: flex; align-items: center; gap: var(--ds-space-2); min-block-size: var(--ds-control-h); padding: var(--ds-space-2) var(--ds-space-3); border: 1px solid var(--ds-control-line); border-radius: 12px; background: var(--ds-surface); }
.sp-sw__text { display: grid; line-height: 1.35; }
.sp-sw__name { font-weight: var(--ds-fw-semibold); }
.sp-sw__name::first-letter { text-transform: uppercase; }
.sp-sw__note { color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.sp-sw input:checked + .sp-sw__box { border-color: var(--ds-action); box-shadow: inset 0 0 0 1px var(--ds-action); background: var(--ds-mint); }
.sp-sw__box { position: relative; padding-inline-end: 2.25rem; }
.sp-sw input:checked + .sp-sw__box::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: 0.6rem; inline-size: 1.1rem; block-size: 1.1rem; margin-block-start: -0.55rem; border-radius: 50%; background: var(--ds-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat; }
.sp-sw input:checked:disabled + .sp-sw__box::after { background-color: var(--ds-disabled-text); }
.sp-sw input:focus-visible + .sp-sw__box { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.sp-sw input:disabled + .sp-sw__box { color: var(--ds-disabled-text); }
.sp-sw.is-off .sp-sw__box { background: var(--ds-disabled-bg); border-style: dashed; }
.sp-place { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); margin: 0; font-weight: var(--ds-fw-semibold); }
.sp-place--one { color: var(--ds-deep); }
.sp-place.ds-field { display: grid; align-items: start; font-weight: inherit; }
.sp-place .ds-field__label { display: inline-flex; align-items: center; gap: var(--ds-space-1); }
.sp-dayrow__add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2) var(--ds-space-3); }
.sp-confirm:focus { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.sp-confirm__actions { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-block-start: var(--ds-space-3); }
.sp-fmtfield { display: grid; gap: var(--ds-space-2); }
.sp-fmtfield[hidden] { display: none; }
@media (min-width: 640px) {
	.sp-fmt__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: no-preference) {
	.sp-tile__box, .sp-sw__box { transition: border-color 0.15s ease, background-color 0.15s ease; }
}
@media (forced-colors: active) {
	.sp-tile input:checked + .sp-tile__box, .sp-sw input:checked + .sp-sw__box { outline: 2px solid Highlight; }
}
/* ---- END hours editor: session formats ---- */

/* ---- BEGIN booking widget: session formats (2026-10-18, agent: widget formats) ----
   A format with nothing free in the next 30 days is a disabled pill with its reason listed under the options; a closed place is a disabled <option>.
   Logical properties only (RTL/LTR). */
.booking-widget .pill:has(input:disabled), .booking-widget .pill.is-off { background: var(--ds-disabled-bg); color: var(--ds-disabled-text); border-color: var(--ds-line); border-style: dashed; cursor: not-allowed; }
.booking-widget .pill:has(input:disabled):hover, .booking-widget .pill.is-off:hover { background: var(--ds-disabled-bg); color: var(--ds-disabled-text); }
.booking-widget .booking-widget__why { list-style: none; margin: var(--ds-space-2) 0 0; padding: 0; display: grid; gap: var(--ds-space-1); font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.booking-widget .booking-widget__why[hidden] { display: none; }
.booking-widget .booking-widget__why strong { color: var(--ds-text); font-weight: var(--ds-fw-semibold); }
.booking-widget [data-date-carousel] .booking-widget__empty { justify-items: start; }
/* ---- END booking widget: session formats ---- */