/* ==========================================================================
   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 ---- */

/* ---- BEGIN specialist card: equal height, price + button on one bottom line (2026-10-18, agent: directory) ----
   The card (specialist/card.php and client-core.js specialistCardHtml, same markup) is a flex column: __top (photo | name + title),
   __body (chips, formats, next times) and, inside the body, __foot (price + button) with margin-block-start:auto. Cards in one
   grid row are as tall as the tallest one (grid/flex stretch), so every price row and every button sits on the same line,
   whatever the number of area chips. Wide lists (directory, quiz results): price on one side, button on the other.
   Logical properties only (RTL/LTR), --ds-* tokens, no new motion. */
.specialist-card.client-card { block-size: auto; min-inline-size: 0; }
.specialist-card.client-card .specialist-card__top { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: var(--ds-space-3); row-gap: var(--ds-space-1); align-content: center; align-items: start; min-inline-size: 0; }
.specialist-card.client-card .specialist-card__top:has(.specialist-card__badge) { padding-block-end: var(--ds-space-2); }
.specialist-card.client-card .specialist-card__name, .specialist-card.client-card .specialist-card__title { min-inline-size: 0; overflow-wrap: anywhere; }
.specialist-card.client-card > .specialist-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--ds-space-3); min-inline-size: 0; padding: 0; }
.specialist-card.client-card .client-card__intro { align-self: flex-start; }
.specialist-card.client-card .specialist-card__foot { display: grid; gap: var(--ds-space-3); margin-block-start: auto; padding-block-start: var(--ds-space-1); }
@media (min-width: 640px) {
	:is(#mentayar-directory-results, .matching-quiz__results .specialist-grid) .specialist-card.client-card .specialist-card__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
@media (max-width: 639.98px) {
	.specialist-card.client-card .specialist-card__top { grid-template-columns: 4.25rem minmax(0, 1fr); }
	.specialist-card.client-card > .specialist-card__body { gap: var(--ds-space-2); }
	.specialist-card.client-card .specialist-card__foot { gap: var(--ds-space-2); }
}
/* ---- END specialist card ---- */

/* ---- BEGIN contact page (2026-10-18, agent: contact redesign) ----
   page-templates/template-contact.php + assets/js/contact-form.js. Tokens only, logical properties (RTL/LTR), no link underlines,
   motion only when the visitor allows it. RavanLine: body.is-ravanline swaps the hero tint like .pub-hero does. */
.ct-hero { background: linear-gradient(180deg, var(--ds-mint) 0%, var(--ds-surface) 100%); border-block-end: 1px solid var(--ds-line); padding-block: var(--ds-space-6) var(--ds-space-8); }
body.is-ravanline .ct-hero { background: linear-gradient(180deg, var(--ds-accent-bg) 0%, var(--ds-surface) 100%); }
.ct-hero__row { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-8); margin-block-start: var(--ds-space-4); }
.ct-hero__text { max-inline-size: 40rem; display: grid; gap: var(--ds-space-3); justify-items: start; }
.ct-hero h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); line-height: var(--ds-lh-tight); margin: 0; }
.ct-hero__lead { color: var(--ds-text-2); font-size: var(--ds-fs-lg); margin: 0; }
.ct-eyebrow { display: inline-flex; align-items: center; gap: var(--ds-space-2); margin: 0; padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-surface); border: 1px solid var(--ds-line); color: var(--ds-deep); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); }
.ct-hours { display: inline-flex; align-items: flex-start; gap: var(--ds-space-2); margin: 0; padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-control); background: var(--ds-surface); border: 1px solid var(--ds-line); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.ct-hours .ds-icon { color: var(--ds-action); flex: none; margin-block-start: 0.15em; }
.ct-hours strong { color: var(--ds-text); font-weight: var(--ds-fw-semibold); margin-inline-end: var(--ds-space-1); }
.ct-hero__art { display: none; inline-size: 7rem; block-size: 7rem; border-radius: 32px; background: var(--ds-surface); border: 1px solid var(--ds-line); color: var(--ds-action); box-shadow: var(--ds-shadow-card); }
.ct-hero__art .ds-icon { inline-size: 3rem; block-size: 3rem; }
@media (min-width: 700px) { .ct-hero__art { display: inline-flex; } }

.ct-body { display: grid; gap: var(--ds-space-6); padding-block: var(--ds-space-8) var(--ds-space-6); }
@media (min-width: 900px) {
	.ct-body { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; gap: var(--ds-space-8); padding-block: var(--ds-space-10) var(--ds-space-8); }
	.ct-body--solo { grid-template-columns: minmax(0, 40rem); justify-content: center; }
}
.ct-channels__title { font-size: var(--ds-fs-md); margin: 0 0 var(--ds-space-3); color: var(--ds-text-2); font-weight: var(--ds-fw-semibold); }
.ct-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--ds-space-3); }
.ct-card { position: relative; display: flex; align-items: center; gap: var(--ds-space-4); block-size: 100%; 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); color: var(--ds-text); text-decoration: none; }
a.ct-card:hover, a.ct-card:focus-visible { border-color: var(--ds-f-ink, var(--ds-action)); box-shadow: var(--ds-shadow-card); color: var(--ds-text); text-decoration: none; }
a.ct-card:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.ct-card__text { display: grid; gap: 2px; min-inline-size: 0; flex: 1 1 auto; }
.ct-card__label { font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.ct-card__value { font-weight: var(--ds-fw-semibold); overflow-wrap: anywhere; }
.ct-card__go { display: inline-flex; flex: none; color: var(--ds-text-2); }
a.ct-card:hover .ct-card__go { color: var(--ds-f-ink, var(--ds-action)); }
[dir="rtl"] .ct-card__go .ds-icon { transform: scaleX(-1); }

.ct-formcard { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 20px; box-shadow: var(--ds-shadow-card); padding: var(--ds-space-5); }
@media (min-width: 640px) { .ct-formcard { padding: var(--ds-space-8); } }
.ct-form { display: grid; gap: var(--ds-space-5); }
.ct-form[hidden], .ct-done[hidden] { display: none; }
.ct-form h2, .ct-done h2 { font-size: var(--ds-fs-xl); margin: 0; }
.ct-form__hint { margin: calc(var(--ds-space-3) * -1) 0 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.ct-form input:not([type="hidden"]):not([type="radio"]):not([data-phone-number]), .ct-form textarea { inline-size: 100%; }
.ct-form .ds-field { margin: 0; }
.ct-form .ds-field input:not([type="radio"]):not([type="hidden"]):not([data-phone-number])[aria-invalid="true"], .ct-form .ds-field textarea[aria-invalid="true"], .ct-form .mentayar-phone-row input[aria-invalid="true"] { border-color: var(--ds-danger) !important; border-width: 2px; }  /* !important: the global input:focus rule would otherwise turn a focused invalid field grey again */
.ct-form .mentayar-phone-row { flex-wrap: nowrap; }
.ct-form .mentayar-phone-row .dial-code-wrap { min-block-size: var(--ds-control-h); }
.ct-form__pair { display: grid; gap: var(--ds-space-5); }
@media (min-width: 640px) { .ct-form__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ct-topics { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.ct-topics legend { padding: 0; margin-block-end: var(--ds-space-2); }
.ct-chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.ct-chip { position: relative; display: block; }
.ct-chip input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ct-chip__box { display: inline-flex; align-items: center; min-block-size: var(--ds-control-h); padding: var(--ds-space-2) var(--ds-space-4); border: 1px solid var(--ds-control-line); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-text); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-medium); }
.ct-chip:hover .ct-chip__box { border-color: var(--ds-deep); background: var(--ds-mint); }
.ct-chip input:checked + .ct-chip__box { border-color: var(--ds-action); box-shadow: inset 0 0 0 1px var(--ds-action); background: var(--ds-mint-strong); color: var(--ds-deep); font-weight: var(--ds-fw-semibold); }
.ct-chip input:focus-visible + .ct-chip__box { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.ct-form .ds-field__error { margin-block-start: var(--ds-space-2); }
.ct-form__privacy { display: flex; align-items: flex-start; gap: var(--ds-space-2); margin: 0; padding: var(--ds-space-3); border-radius: var(--ds-radius-control); background: var(--ds-mint); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.ct-form__privacy .ds-icon { flex: none; color: var(--ds-action); margin-block-start: 0.2em; }
.ct-form__privacy a { color: var(--ds-deep); text-decoration: none; font-weight: var(--ds-fw-semibold); }
.ct-form__privacy a:hover, .ct-form__privacy a:focus-visible { text-decoration: none; color: var(--ds-action-hover); }
.ct-form__actions .btn { inline-size: 100%; justify-content: center; }
@media (min-width: 640px) { .ct-form__actions .btn { inline-size: auto; min-inline-size: 12rem; } }
.ct-form__status { min-block-size: 0; }
.ct-form__status:empty { display: none; }
.ct-form__status.is-error { padding: var(--ds-space-3); border-radius: var(--ds-radius-control); background: var(--ds-danger-bg, transparent); }

.ct-done { display: grid; justify-items: center; text-align: center; gap: var(--ds-space-3); padding-block: var(--ds-space-6); }
.ct-done p { margin: 0; color: var(--ds-text-2); max-inline-size: 28rem; }
.ct-done h2:focus { outline: none; }
.ct-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-3); margin-block-start: var(--ds-space-3); }

.ct-faq-wrap { padding-block: 0 var(--ds-space-12); }
.ct-faq { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-4); padding: var(--ds-space-5); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-mint); }
body.is-ravanline .ct-faq { background: var(--ds-accent-bg); }
.ct-faq__text { flex: 1 1 16rem; min-inline-size: 0; }
.ct-faq h2 { font-size: var(--ds-fs-md); margin: 0 0 2px; }
.ct-faq p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
@media (max-width: 639.98px) { .ct-faq .btn { inline-size: 100%; justify-content: center; } }
@media (prefers-reduced-motion: no-preference) {
	.ct-card, .ct-chip__box { transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), background-color var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease); }
	a.ct-card:hover { transform: translateY(-2px); }
}
@media (forced-colors: active) {
	.ct-chip input:checked + .ct-chip__box { outline: 2px solid Highlight; }
}
/* ---- END contact page ---- */

/* ---- BEGIN find-a-specialist page head on phones (2026-10-18, agent: quiz phone/PWA parity) ----
   The lead was cut to two lines with "…" in the middle of the sentence (a global phone rule), and the "see all" ghost button kept
   its button padding, so it floated indented under the title. On this page the lead is shown in full and "see all" is a plain link
   aligned with the text, the same as the app's start screen. */
body:has(#mentayar-matching) .client-pagehead .ds-pagehead__sub { display: block; overflow: visible; -webkit-line-clamp: unset; line-clamp: unset; }
body:has(#mentayar-matching) .client-pagehead .ds-pagehead > .ds-btn--ghost { padding-inline: 0; min-block-size: 2.75rem; background: transparent; }
/* ---- END find-a-specialist page head ---- */

/* ---- BEGIN trust badges (2026-10-18, agent: trust-badge slot + payment receipt) ----
   The owner's own seals (RavanLine: the e-trust symbol), printed only when set in wp-admin. A seal is designed for a light
   ground, so each sits on a white tile; the tile has a FIXED size, so a late-loading image never moves the page. */
.trust-badges, .site-footer ul.trust-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: var(--ds-space-3); }
.trust-badges > li { display: block; flex: 0 0 auto; margin: 0; padding: 0; }
.trust-badge, .site-footer a.trust-badge { display: flex; align-items: center; justify-content: center; inline-size: 5.5rem; block-size: 5.5rem; min-block-size: 0; padding: var(--ds-space-2); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-control); text-decoration: none; box-shadow: none; }
.trust-badge img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
.trust-badge:hover, .site-footer a.trust-badge:hover { background: var(--ds-surface); border-color: var(--ds-action); box-shadow: none; }
.trust-badge:focus-visible, .site-footer a.trust-badge:focus-visible { background: var(--ds-surface); outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; box-shadow: none; }
.trust-badges--inline { margin-block-start: var(--ds-space-4); }
.trust-badges--inline .trust-badge { inline-size: 4rem; block-size: 4rem; padding: var(--ds-space-1); }
.site-footer__trust { padding-block: var(--ds-space-5); border-block-start: 1px solid color-mix(in srgb, var(--ds-on-ink) 10%, transparent); }
.page-template-template-booking .site-footer__trust { display: none; }   /* the checkout carries its own small badge beside the pay button */
.jn-aside .trust-badges--inline { margin-block-start: var(--ds-space-1); }   /* join page: under what is asked */
@media (prefers-reduced-motion: no-preference) { .trust-badge { transition: border-color var(--ds-dur) var(--ds-ease); } }
@media (forced-colors: active) { .trust-badge { border-color: CanvasText; } }
@media print { .site-footer__trust { display: none; } }
/* ---- END trust badges ---- */

/* ---- BEGIN join page (2026-10-18, agent: join-us redesign) ----
   page-templates/template-specialist-application.php + assets/js/specialist-application.js + inc/ds/join.php. Tokens only (--ds-*),
   logical properties (RTL/LTR), no link underlines, motion only when the visitor allows it. RavanLine: body.is-ravanline swaps the
   tints for the warm accent like .ct-hero does. Prefix: .jn- */
.jn a { text-decoration: none; }
.jn a:hover, .jn a:focus-visible { text-decoration: none; }
.jn-hero { background: linear-gradient(180deg, var(--ds-mint) 0%, var(--ds-surface) 100%); border-block-end: 1px solid var(--ds-line); padding-block: var(--ds-space-6) var(--ds-space-10); }
body.is-ravanline .jn-hero { background: linear-gradient(180deg, var(--ds-accent-bg) 0%, var(--ds-surface) 100%); }
.jn-hero__row { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-8); margin-block-start: var(--ds-space-4); }
.jn-hero__text { max-inline-size: 44rem; display: grid; gap: var(--ds-space-4); justify-items: start; }
.jn-hero h1 { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.5rem); line-height: var(--ds-lh-tight); margin: 0; }
.jn-hero__lead { color: var(--ds-text-2); font-size: var(--ds-fs-lg); margin: 0; }
.jn-eyebrow { display: inline-flex; align-items: center; gap: var(--ds-space-2); margin: 0; padding: var(--ds-space-1) var(--ds-space-3); border-radius: var(--ds-radius-pill); background: var(--ds-surface); border: 1px solid var(--ds-line); color: var(--ds-deep); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); }
.jn-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.jn-fact { display: inline-flex; align-items: center; gap: var(--ds-space-2); min-block-size: 2.5rem; padding: var(--ds-space-2) var(--ds-space-4); border-radius: 1.4rem; background: var(--ds-surface); border: 1px solid var(--ds-line); color: var(--ds-text); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); }
.jn-fact .ds-icon { color: var(--ds-action); flex: none; }
.jn-fact--zero { background: var(--ds-success-bg); border-color: var(--ds-success-line); color: var(--ds-success); }
.jn-fact--zero .ds-icon { color: var(--ds-success); }
.jn-fact--fee { background: var(--ds-accent-bg); border-color: var(--ds-line); color: var(--ds-accent); }
.jn-fact--fee .ds-icon { color: var(--ds-accent); }
.jn-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3) var(--ds-space-5); margin-block-start: var(--ds-space-2); }
.jn-hero__have { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); max-inline-size: 22rem; }
.jn-hero__art { display: none; inline-size: 8rem; block-size: 8rem; border-radius: 36px; background: var(--ds-surface); border: 1px solid var(--ds-line); color: var(--ds-action); box-shadow: var(--ds-shadow-card); flex: none; }
.jn-hero__art .ds-icon { inline-size: 3.5rem; block-size: 3.5rem; }
@media (min-width: 760px) { .jn-hero__art { display: inline-flex; } }
@media (max-width: 559.98px) { .jn-hero__cta .btn { inline-size: 100%; justify-content: center; } }

.jn-sec { padding-block: var(--ds-space-10); }
.jn-sec--tint { background: var(--ds-mint); }
body.is-ravanline .jn-sec--tint { background: var(--ds-accent-bg); }
.jn-sec__title { font-size: var(--ds-fs-2xl); line-height: var(--ds-lh-tight); margin: 0 0 var(--ds-space-6); }
@media (max-width: 559.98px) { .jn-sec { padding-block: var(--ds-space-8); } .jn-sec__title { font-size: var(--ds-fs-xl); } }

/* the way in: five steps. Phone = a vertical path, wide screens = one row joined by a dashed line */
.jn-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-6); counter-reset: none; }
.jn-step { position: relative; display: grid; align-content: start; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: var(--ds-space-4); row-gap: var(--ds-space-1); align-items: start; }
.jn-step__icon { grid-row: 1 / span 2; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 16px; position: relative; z-index: 1; }
.jn-step__num { position: absolute; inset-block-start: -0.35rem; inset-inline-start: -0.35rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%; background: var(--ds-action); color: var(--ds-on-action); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); line-height: 1; }
.jn-step__title { margin: 0; font-size: var(--ds-fs-md); line-height: var(--ds-lh-tight); align-self: end; }
.jn-step__desc { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); line-height: 1.8; }
.jn-step:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 1.625rem; inset-block: 3.5rem calc(var(--ds-space-6) * -1 + 0.25rem); inline-size: 0; border-inline-start: 2px dashed var(--ds-line); transform: translateX(-1px); }
[dir="rtl"] .jn-step:not(:last-child)::before { transform: translateX(1px); }
@media (min-width: 960px) {
	.jn-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--ds-space-4); }
	.jn-step { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: var(--ds-space-2); }
	.jn-step__icon { grid-row: auto; inline-size: 3.75rem; block-size: 3.75rem; }
	.jn-step__title { align-self: auto; }
	.jn-step__num { inset-block-start: -0.4rem; inset-inline-start: calc(50% - 2.45rem); }
	.jn-step:not(:last-child)::before { inset-block: 1.875rem auto; inset-inline: calc(50% + 2.4rem) calc(-50% + 2.4rem); block-size: 0; inline-size: auto; border-inline-start: 0; border-block-start: 2px dashed var(--ds-line); transform: none; }
	[dir="rtl"] .jn-step:not(:last-child)::before { transform: none; }
}

.jn-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .jn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .jn-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jn-card { display: grid; align-content: start; gap: var(--ds-space-2); padding: var(--ds-space-5); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); }
.jn-card .ds-ibox { margin-block-end: var(--ds-space-1); }
.jn-card h3 { margin: 0; font-size: var(--ds-fs-md); }
.jn-card p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); line-height: 1.8; }

/* what it costs: three plain rows, the session-money row carries the commission statement */
.jn-money { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); max-inline-size: 52rem; }
.jn-money__row { display: grid; gap: var(--ds-space-2); padding: var(--ds-space-4) var(--ds-space-5); background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); }
.jn-money__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--ds-space-1) var(--ds-space-4); }
.jn-money__head h3 { margin: 0; font-size: var(--ds-fs-md); }
.jn-money__value { margin: 0; color: var(--ds-deep); font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-lg); }
.jn-money__value--soft { font-size: var(--ds-fs-md); color: var(--ds-text-2); font-weight: var(--ds-fw-semibold); }
.jn-money__row > p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); line-height: 1.9; }
.jn-money__row--fee { border-color: var(--ds-action); box-shadow: inset 0 0 0 1px var(--ds-action); background: var(--ds-mint); }
body.is-ravanline .jn-money__row--fee { background: var(--ds-accent-bg); }
.jn-money__row--fee .jn-money__big { font-size: var(--ds-fs-3xl); line-height: 1; margin-inline-end: var(--ds-space-1); }
.jn-money__pay { display: grid; gap: var(--ds-space-1); margin-block-start: var(--ds-space-2); padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-control); background: var(--ds-surface); border: 1px solid var(--ds-line); }
.jn-money__pay p { margin: 0; }
.jn-money__value--pay { color: var(--ds-text); font-size: var(--ds-fs-md); }
.jn-money__paybig { font-size: var(--ds-fs-xl); font-weight: var(--ds-fw-bold); color: var(--ds-accent); margin-inline-end: var(--ds-space-1); }
.jn-money__row--fee .jn-money__label { font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); color: var(--ds-text-2); }
.jn-money__row--fee > p { color: var(--ds-text); }
.jn-fold { margin-block-start: var(--ds-space-4); max-inline-size: 60rem; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); padding: 0 var(--ds-space-5); }
.jn-fold > summary, .jn-faq__item > summary { position: relative; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); min-block-size: 3rem; padding-block: var(--ds-space-3); cursor: pointer; font-weight: var(--ds-fw-semibold); color: var(--ds-text); }
.jn-fold > summary::-webkit-details-marker, .jn-faq__item > summary::-webkit-details-marker { display: none; }
.jn-fold > summary::after, .jn-faq__item > summary::after { content: ""; flex: none; inline-size: 0.6rem; block-size: 0.6rem; border-inline-end: 2px solid var(--ds-text-2); border-block-end: 2px solid var(--ds-text-2); transform: rotate(45deg); margin-inline-end: 0.2rem; }
.jn-fold[open] > summary::after, .jn-faq__item[open] > summary::after { transform: rotate(-135deg); }
.jn-fold > summary:focus-visible, .jn-faq__item > summary:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; border-radius: var(--ds-radius-sm); }
.jn-fold .sub-explain { margin-block: 0 var(--ds-space-3); }
.jn-fold__more { margin: 0 0 var(--ds-space-4); }
.jn-fold__more a { font-weight: var(--ds-fw-semibold); color: var(--ds-deep); }
.jn-fold--inline { max-inline-size: none; padding: 0 var(--ds-space-4); margin-block: 0 var(--ds-space-5); background: var(--ds-bg); }
.jn-fold--inline[open] { padding-block-end: var(--ds-space-2); }

/* the form */
.jn-sec--apply { background: var(--ds-bg); }
.jn-apply { display: grid; gap: var(--ds-space-6); }
@media (min-width: 960px) { .jn-apply { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: var(--ds-space-10); align-items: start; } }
.jn-aside { display: grid; gap: var(--ds-space-4); align-content: start; }
.jn-aside__title { margin: 0; font-size: var(--ds-fs-lg); }
.jn-ask { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-3); }
.jn-ask li { display: flex; align-items: flex-start; gap: var(--ds-space-3); color: var(--ds-text); font-size: var(--ds-fs-sm); }
.jn-ask .ds-icon { flex: none; color: var(--ds-success); margin-block-start: 0.2em; }
.jn-aside__note { display: flex; align-items: flex-start; gap: var(--ds-space-2); margin: 0; padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-control); background: var(--ds-mint); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
body.is-ravanline .jn-aside__note { background: var(--ds-accent-bg); }
.jn-aside__note .ds-icon { flex: none; color: var(--ds-action); margin-block-start: 0.2em; }
.jn-formcard { scroll-margin-block-start: 5rem; background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: 20px; box-shadow: var(--ds-shadow-card); padding: var(--ds-space-5); min-inline-size: 0; }
@media (min-width: 640px) { .jn-formcard { padding: var(--ds-space-8); } }
.jn-form[hidden], .jn-done[hidden] { display: none; }
.jn-formhead h2 { margin: 0 0 var(--ds-space-1); font-size: var(--ds-fs-xl); }
.jn-formhead p { margin: 0; color: var(--ds-text-2); font-size: var(--ds-fs-sm); }

.jn-progress { list-style: none; margin: var(--ds-space-6) 0 var(--ds-space-2); padding: 0; display: flex; gap: var(--ds-space-2); }
.jn-progress__item { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-2); text-align: center; color: var(--ds-text-2); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); }
.jn-progress__item::before { content: ""; position: absolute; inset-block-start: 1rem; inset-inline-start: calc(50% + 1.25rem); inset-inline-end: calc(-50% + 1.25rem); block-size: 2px; background: var(--ds-line); }
.jn-progress__item:last-child::before { display: none; }
.jn-progress__item.is-done::before { background: var(--ds-action); }
.jn-progress__dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--ds-surface); border: 2px solid var(--ds-control-line); color: var(--ds-text-2); font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-xs); }
.jn-progress__item.is-active { color: var(--ds-deep); }
.jn-progress__item.is-active .jn-progress__dot { background: var(--ds-action); border-color: var(--ds-action); color: var(--ds-on-action); }
.jn-progress__item.is-done .jn-progress__dot { background: var(--ds-mint-strong); border-color: var(--ds-action); color: var(--ds-deep); }
.jn-now { margin: 0 0 var(--ds-space-5); text-align: center; color: var(--ds-text-2); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); }
@media (max-width: 559.98px) { .jn-progress__label { display: none; } }
@media (min-width: 560px) { .jn-now { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: -1px; } .jn-progress { margin-block-end: var(--ds-space-6); } }

.jn-pane { display: grid; gap: var(--ds-space-1); }
.jn-pane[hidden] { display: none; }
.jn-pane__title { margin: 0; font-size: var(--ds-fs-xl); line-height: var(--ds-lh-tight); }
.jn-pane__title:focus { outline: none; }
.jn-pane__title:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 4px; border-radius: var(--ds-radius-sm); }
.jn-pane__desc { margin: 0 0 var(--ds-space-4); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.jn-form .ds-field { margin: 0 0 var(--ds-space-4); }
.jn-form .ds-field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([data-phone-number]), .jn-form .ds-field select, .jn-form .ds-field textarea { inline-size: 100%; min-block-size: var(--ds-control-h); }
.jn-form .ds-field textarea { min-block-size: 9rem; }
.jn-form .ds-field [aria-invalid="true"], .jn-form .mentayar-phone-row input[aria-invalid="true"] { border-color: var(--ds-danger) !important; border-width: 2px; }
.jn-form .mentayar-phone-row { flex-wrap: nowrap; }
.jn-form .mentayar-phone-row .dial-code-wrap { min-block-size: var(--ds-control-h); }
.jn-form .ds-field__label--sub { font-weight: var(--ds-fw-regular); color: var(--ds-text-2); }
.jn-grid2, .jn-grid3 { display: grid; gap: 0 var(--ds-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .jn-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .jn-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.jn-fieldset { border: 0; padding: 0; margin: 0 0 var(--ds-space-5); min-inline-size: 0; }
.jn-fieldset legend { padding: 0; margin-block-end: var(--ds-space-2); }
.jn-hint { margin: 0 0 var(--ds-space-3); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.jn-hint--tight { margin-block: calc(var(--ds-space-2) * -1) var(--ds-space-4); }
.jn-count { display: block; margin-block-start: var(--ds-space-1); text-align: end; color: var(--ds-text-2); font-size: var(--ds-fs-xs); font-variant-numeric: tabular-nums; }
.jn-chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.jn-chip { position: relative; display: block; }
.jn-chip input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.jn-chip__box { display: inline-flex; align-items: center; min-block-size: var(--ds-control-h); padding: var(--ds-space-2) var(--ds-space-4); border: 1px solid var(--ds-control-line); border-radius: var(--ds-radius-pill); background: var(--ds-surface); color: var(--ds-text); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-medium); }
.jn-chip:hover .jn-chip__box { border-color: var(--ds-deep); background: var(--ds-mint); }
.jn-chip input:checked + .jn-chip__box { border-color: var(--ds-action); box-shadow: inset 0 0 0 1px var(--ds-action); background: var(--ds-mint-strong); color: var(--ds-deep); font-weight: var(--ds-fw-semibold); }
.jn-chip input:focus-visible + .jn-chip__box { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.jn-chip input[aria-invalid="true"] + .jn-chip__box { border-color: var(--ds-danger); }

/* documents: a drop zone per slot; once a file is chosen the zone is replaced by its name, size and remove / change */
.jn-docs { display: grid; gap: var(--ds-space-3); grid-template-columns: 1fr; margin-block-end: var(--ds-space-3); }
@media (min-width: 680px) { .jn-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jn-drop { position: relative; min-inline-size: 0; }
.jn-drop__input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; overflow: hidden; }
.jn-drop__zone { display: flex; align-items: center; gap: var(--ds-space-3); min-block-size: 5.5rem; padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-surface); border: 2px dashed var(--ds-control-line); border-radius: var(--ds-radius-card); cursor: pointer; }
.jn-drop__zone[hidden], .jn-drop__file[hidden] { display: none; }
.jn-drop__zone:hover, .jn-drop__zone.is-over { border-color: var(--ds-action); background: var(--ds-mint); }
.jn-drop__input:focus-visible + .jn-drop__zone { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.jn-drop__icon { flex: none; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 13px; }
.jn-drop__text { display: grid; gap: 2px; min-inline-size: 0; }
.jn-drop__text strong { font-size: var(--ds-fs-sm); }
.jn-drop__hint { color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.jn-drop__cta { color: var(--ds-deep); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); }
.jn-drop__file { display: flex; align-items: center; gap: var(--ds-space-3); flex-wrap: wrap; min-block-size: 5.5rem; padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-mint); border: 2px solid var(--ds-action); border-radius: var(--ds-radius-card); }
body.is-ravanline .jn-drop__file { background: var(--ds-accent-bg); }
.jn-drop__thumb { flex: none; display: inline-flex; align-items: center; justify-content: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: var(--ds-radius-control); overflow: hidden; background: var(--ds-surface); border: 1px solid var(--ds-line); }
.jn-drop__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.jn-drop__pdf { color: var(--ds-danger); font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-xs); }
.jn-drop__meta { display: grid; gap: 2px; flex: 1 1 8rem; min-inline-size: 0; }
.jn-drop__meta strong { font-size: var(--ds-fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; unicode-bidi: plaintext; }
.jn-drop__meta span { color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.jn-drop__btns { display: inline-flex; gap: var(--ds-space-1); }
.jn-linkbtn { display: inline-flex; align-items: center; min-block-size: 2.75rem; padding: 0 var(--ds-space-2); background: none; border: 0; color: var(--ds-action); font: inherit; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); text-decoration: none; cursor: pointer; border-radius: var(--ds-radius-sm); }
.jn-linkbtn:hover { color: var(--ds-action-hover); text-decoration: none; }
.jn-linkbtn:focus-visible { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.jn-linkbtn--danger { color: var(--ds-danger); }
.jn-linkbtn--danger:hover { color: var(--ds-danger-hover); }
.jn-drop .ds-field__error { margin-block-start: var(--ds-space-2); }

/* review step */
.jn-sum { display: grid; gap: var(--ds-space-3); margin-block-end: var(--ds-space-4); }
.jn-sum__group { padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); background: var(--ds-bg); }
.jn-sum__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); }
.jn-sum__head h4 { margin: 0; font-size: var(--ds-fs-md); }
.jn-sum dl { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr); gap: var(--ds-space-1) var(--ds-space-4); margin: 0; }
.jn-sum dt { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.jn-sum dd { margin: 0; color: var(--ds-text); font-size: var(--ds-fs-sm); overflow-wrap: anywhere; }
.jn-sum dd.is-empty { color: var(--ds-text-2); }
.jn-sum__bio { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; white-space: pre-line; }
@media (max-width: 479.98px) { .jn-sum dl { grid-template-columns: minmax(0, 1fr); } .jn-sum dd { margin-block-end: var(--ds-space-2); } }
.jn-privacy { display: flex; align-items: flex-start; gap: var(--ds-space-2); margin: 0 0 var(--ds-space-4); padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-control); background: var(--ds-mint); color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
body.is-ravanline .jn-privacy { background: var(--ds-accent-bg); }
.jn-privacy .ds-icon { flex: none; color: var(--ds-action); margin-block-start: 0.2em; }
.jn-privacy a { color: var(--ds-deep); font-weight: var(--ds-fw-semibold); }
.jn-status { margin: 0 0 var(--ds-space-3); }
.jn-status:empty { display: none; }
.jn-status.is-error { padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-control); background: var(--ds-danger-bg); border: 1px solid var(--ds-danger-line); color: var(--ds-danger); font-weight: var(--ds-fw-semibold); }
.jn-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); margin-block-start: var(--ds-space-5); }
.jn-actions .btn { min-inline-size: 9rem; justify-content: center; }
@media (max-width: 559.98px) { .jn-actions { flex-direction: column-reverse; align-items: stretch; } .jn-actions .btn { inline-size: 100%; } .jn-actions > span { display: none; } }
.jn-draft { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ds-space-1) var(--ds-space-3); margin: var(--ds-space-5) 0 0; color: var(--ds-text-2); font-size: var(--ds-fs-xs); }

/* success */
.jn-done { display: grid; justify-items: center; text-align: center; gap: var(--ds-space-3); padding-block: var(--ds-space-4); }
.jn-done h2 { margin: 0; font-size: var(--ds-fs-2xl); }
.jn-done h2:focus { outline: none; }
.jn-done__lead { margin: 0; color: var(--ds-text-2); max-inline-size: 30rem; }
.jn-done__next { inline-size: 100%; max-inline-size: 34rem; text-align: start; padding: var(--ds-space-4) var(--ds-space-5); border-radius: var(--ds-radius-card); background: var(--ds-mint); }
body.is-ravanline .jn-done__next { background: var(--ds-accent-bg); }
.jn-done__next h3 { margin: 0 0 var(--ds-space-2); font-size: var(--ds-fs-md); }
html[lang^="fa"] .jn-done__next ol { list-style-type: persian; }
.jn-done__next ol { margin: 0; padding-inline-start: 1.4rem; display: grid; gap: var(--ds-space-2); color: var(--ds-text); font-size: var(--ds-fs-sm); }
.jn-done__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-3); margin-block-start: var(--ds-space-2); }
.jn-done__actions [hidden] { display: none; }

.jn-faq-wrap { max-inline-size: 52rem; }
.jn-faq { display: grid; gap: var(--ds-space-2); }
.jn-faq__item { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-card); padding: 0 var(--ds-space-5); }
.jn-faq__item p { margin: 0 0 var(--ds-space-4); color: var(--ds-text-2); font-size: var(--ds-fs-sm); line-height: 1.9; }

@media (prefers-reduced-motion: no-preference) {
	.jn-pane:not([hidden]) { animation: jn-in var(--ds-dur) var(--ds-ease) both; }
	.jn-card, .jn-chip__box, .jn-drop__zone, .jn-fact { transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), background-color var(--ds-dur) var(--ds-ease), transform var(--ds-dur) var(--ds-ease); }
	.jn-card:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-card); }
	@keyframes jn-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media (forced-colors: active) {
	.jn-chip input:checked + .jn-chip__box { outline: 2px solid Highlight; }
	.jn-progress__item.is-active .jn-progress__dot { outline: 2px solid Highlight; }
}
/* ---- END join page ---- */

/* ---- Home hero: the "confidential and secure" chip hangs on the end edge like the "active therapists" chip, clear of the card footer (2026-10-18) ---- */
.home-hero__chip--3 { bottom: 20%; inset-inline-end: -8px; }
@media (max-width: 640px) { .home-hero__chip--3 { bottom: 22%; inset-inline-end: 0; } }
/* Spotlight footer: the hint may break onto a second line («به انتخاب شما») and the button stays on ONE line, a little wider */
.home-spotlight__hint { white-space: pre-line; }
.home-spotlight__footer { flex-wrap: wrap; }
.home-spotlight__footer .btn { white-space: nowrap; flex: none; min-inline-size: 10.5rem; padding-inline: 1.25rem; justify-content: center; }