/* ==========================================================================
   Client stage (stage A): client dashboard, discovery, profile, booking journey, subscription screens.
   Loads after tokens / base / components / compat, so it wins over style.css and the shared layer.
   Logical properties only (RTL and LTR share this file). Prefix: .client-
   ========================================================================== */

/* ---------- generic building blocks ---------- */
.client-muted { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
p.client-muted { margin: var(--ds-space-1) 0 var(--ds-space-3); }
.client-h2 { margin: 0 0 var(--ds-space-3); font-size: var(--ds-fs-lg); line-height: var(--ds-lh-tight); }
.client-h3 { margin: 0; font-size: var(--ds-fs-md); line-height: var(--ds-lh-tight); }
.client-plain { margin: 0; padding-inline-start: var(--ds-space-5); display: grid; gap: var(--ds-space-1); }
.client-btn-row { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.client-inline { display: flex; gap: var(--ds-space-2); }
.client-inline > input { flex: 1 1 auto; min-width: 0; }
.client-mt { margin-block-start: var(--ds-space-3); }
.client-mb { margin-block-end: var(--ds-space-2); }
.client-box { margin-block-end: var(--ds-space-4); }
.client-box__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-2); margin-block-end: var(--ds-space-2); }
.client-box__head .client-h2, .client-box__head .client-h3 { margin-block-end: 0; }
.client-linkbtn { background: none; border: 0; padding: 0; min-block-size: var(--ds-control-h); color: var(--ds-action); font: inherit; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; text-align: start; }
.client-linkbtn:hover { color: var(--ds-deep); }
.client-list { display: grid; gap: var(--ds-space-3); }
.client-list--plain { list-style: none; margin: 0; padding: 0; }
.client-more { display: flex; justify-content: center; margin-block-start: var(--ds-space-4); }
.client-grid { display: grid; gap: var(--ds-space-3); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin-block-end: var(--ds-space-4); }
.client-facts { margin: 0 0 var(--ds-space-3); display: grid; gap: var(--ds-space-2); }
.client-facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ds-space-1) var(--ds-space-4); }
.client-facts dt { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.client-facts dd { margin: 0; font-weight: var(--ds-fw-semibold); text-align: end; }
.client-facts--row { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.client-facts--row > div { flex-direction: column; justify-content: flex-start; }
.client-facts--row dd { text-align: start; }
.client-dir { display: inline-flex; align-items: center; gap: 0.3em; font-weight: var(--ds-fw-semibold); }
.client-dir--up { color: var(--ds-success); }
.client-dir--down { color: var(--ds-neutral); }
.client-delta { font-weight: var(--ds-fw-semibold); }
.client-state-wide { grid-column: 1 / -1; }
.client-login-gate { max-inline-size: 30rem; text-align: center; }
.client-pagehead { padding-block-end: 0; }
.client-pagehead + .container { padding-block-start: var(--ds-space-4); }

/* ---------- avatar ---------- */
.client-avatar { inline-size: 3rem; block-size: 3rem; border-radius: 50%; object-fit: cover; flex: none; background: var(--ds-mint-strong); }
.client-avatar--fallback { display: inline-flex; align-items: center; justify-content: center; color: var(--ds-deep); font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-lg); }

/* ==========================================================================
   Client dashboard
   ========================================================================== */
#mentayar-client-dashboard .dashboard-content > section > h1::before { content: none; }
#mentayar-client-dashboard .dashboard-content > section > h1,
#mentayar-client-dashboard .ds-pagehead__title { font-size: var(--ds-fs-2xl); display: block; margin-block-end: var(--ds-space-3); }
#mentayar-client-dashboard .ds-pagehead { margin-block-end: var(--ds-space-4); }
#mentayar-client-dashboard .ds-pagehead__title { margin-block-end: 0; }

/* section links of the destination that holds more than one screen */
.client-subnav { margin-block-end: var(--ds-space-4); border-block-end: var(--ds-border); }
.client-subnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--ds-space-1); overflow-x: auto; scrollbar-width: thin; }
.client-subnav a {
	display: inline-flex; align-items: center; min-block-size: var(--ds-control-h); padding: var(--ds-space-2) var(--ds-space-4);
	color: var(--ds-text-2); font-weight: var(--ds-fw-semibold); font-size: var(--ds-fs-sm); text-decoration: none; white-space: nowrap;
	border-block-end: 3px solid transparent;
}
.client-subnav a:hover { color: var(--ds-deep); background: var(--ds-mint); }
.client-subnav a[aria-current="page"] { color: var(--ds-deep); border-block-end-color: var(--ds-action); }

/* home */
.client-home { display: grid; gap: var(--ds-space-5); align-items: start; }
@media (min-width: 1100px) { .client-home { grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr); } }
.client-home__main, .client-home__side { display: grid; gap: var(--ds-space-4); min-inline-size: 0; align-content: start; }
.client-welcome { padding: var(--ds-space-6); }
.client-welcome .ds-state__actions { justify-content: flex-start; }
.client-todo { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-1); }
.client-convs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-1); }
.client-conv { display: flex; align-items: center; gap: var(--ds-space-3); inline-size: 100%; min-block-size: var(--ds-control-h); padding: var(--ds-space-2); border: 0; border-radius: var(--ds-radius-control); background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.client-conv:hover { background: var(--ds-mint); }
.client-conv__text { display: grid; min-inline-size: 0; flex: 1; }
.client-conv__text .client-muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-conv .client-avatar { inline-size: 2.5rem; block-size: 2.5rem; }
.client-subbox .ds-btn { margin-block-start: var(--ds-space-2); }

/* the appointment card (home and sessions) */
.client-appt { gap: var(--ds-space-2) var(--ds-space-4); }
.client-appt__who { display: flex; align-items: center; gap: var(--ds-space-3); color: var(--ds-text); font-size: var(--ds-fs-md); }
.client-appt__name { margin: 0; font-size: var(--ds-fs-md); line-height: var(--ds-lh-tight); }
.client-appt__name a { color: inherit; text-decoration: none; }
.client-appt__name a:hover { color: var(--ds-deep); text-decoration: underline; }
.client-appt .ds-appt__when { grid-column: 1 / -1; }
.client-appt__meta, .client-appt__hint, .client-appt__note, .client-appt__people { grid-column: 1 / -1; margin: 0; }
.client-appt__meta { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.client-appt__hint { color: var(--ds-text); font-size: var(--ds-fs-sm); }
.client-appt__note { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.client-appt__people { list-style: none; padding: 0; display: grid; gap: var(--ds-space-1); font-size: var(--ds-fs-sm); }
.client-appt .ds-appt__actions { padding-block-start: var(--ds-space-2); }
.client-home__next .client-h2 { margin-block-end: var(--ds-space-1); }
.client-home__next .client-muted { margin-block-end: var(--ds-space-3); }

/* progress */
.client-chart { display: block; inline-size: 100%; overflow: visible; }
.client-chart-table { margin-block-start: var(--ds-space-2); }
.client-chart-table summary { cursor: pointer; min-block-size: var(--ds-control-h); display: inline-flex; align-items: center; color: var(--ds-action); }
.client-progress { inline-size: 100%; block-size: 0.75rem; accent-color: var(--ds-action); }
.client-safety { border: 2px solid var(--ds-danger); margin-block-end: var(--ds-space-4); }
.client-goal { display: grid; gap: var(--ds-space-2); }

/* wallet */
.client-wallet__balance { margin: 0 0 var(--ds-space-3); font-size: var(--ds-fs-3xl); line-height: 1.3; }
#mentayar-client-dashboard section.ds-card, #mentayar-client-dashboard .client-box { margin-block-end: var(--ds-space-4); }
#mentayar-client-dashboard [data-wallet-root] > section + section, #mentayar-client-dashboard [data-wallet-root] > section.ds-card { margin-block-start: var(--ds-space-4); }

/* questionnaires */
.client-tasks { margin-block-start: var(--ds-space-4); }
.client-task { border: var(--ds-border); border-radius: var(--ds-radius-control); margin-block-start: var(--ds-space-2); background: var(--ds-surface); }
.client-task > summary { cursor: pointer; display: grid; gap: var(--ds-space-1); padding: var(--ds-space-3) var(--ds-space-4); min-block-size: var(--ds-control-h); }
.client-task[open] > summary { border-block-end: var(--ds-border); }
.client-task > form, .client-task > p { padding: var(--ds-space-3) var(--ds-space-4); }
.client-task__title { font-weight: var(--ds-fw-semibold); }
.client-q { border: 0; margin: 0 0 var(--ds-space-4); padding: 0; min-inline-size: 0; }
.client-q legend { padding: 0; margin-block-end: var(--ds-space-2); font-weight: var(--ds-fw-semibold); }
.client-scale { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); }
.client-scale__item { position: relative; }
.client-scale__item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.client-scale__item span { display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--ds-control-h); min-block-size: var(--ds-control-h); border: 1px solid var(--ds-control-line); border-radius: var(--ds-radius-control); background: var(--ds-surface); font-weight: var(--ds-fw-semibold); }
.client-scale__item input:checked + span { background: var(--ds-action); border-color: var(--ds-action); color: var(--ds-on-action); }
.client-scale__item input:focus-visible + span { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }

/* dialogs built by client-appointments.js */
.client-dlg-line { margin: 0 0 var(--ds-space-3); line-height: 1.7; }
.client-dlg-block { margin-block: var(--ds-space-3); }
.client-dialog-error { margin-block-start: var(--ds-space-3); }
.client-chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); margin-block-end: var(--ds-space-3); }
.client-slotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: var(--ds-space-2); margin-block-end: var(--ds-space-3); }
.client-slotradio { position: relative; }
.client-slotradio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.client-slotradio span { display: flex; align-items: center; justify-content: center; min-block-size: var(--ds-control-h); border: 1px solid var(--ds-control-line); border-radius: var(--ds-radius-control); background: var(--ds-surface); font-weight: var(--ds-fw-semibold); font-variant-numeric: tabular-nums; }
.client-slotradio input:checked + span { background: var(--ds-action); border-color: var(--ds-action); color: var(--ds-on-action); }
.client-slotradio input:focus-visible + span { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }
.client-stars { display: flex; gap: var(--ds-space-1); }
.client-star { position: relative; inline-size: var(--ds-control-h); block-size: var(--ds-control-h); display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; color: var(--ds-control-line); cursor: pointer; border-radius: var(--ds-radius-control); }
.client-star.is-on { color: var(--ds-star); }
.client-star:has(input:focus-visible) { outline: var(--ds-focus-width) solid var(--ds-focus); outline-offset: 2px; }

/* messages */
.client-thread-back { display: none; margin-block-end: var(--ds-space-2); }
@media (max-width: 767.98px) {
	#mentayar-client-dashboard .messages-layout { grid-template-columns: minmax(0, 1fr); }
	#mentayar-client-dashboard .messages-layout.is-thread-open .messages-layout__list { display: none; }
	#mentayar-client-dashboard .messages-layout:not(.is-thread-open) .messages-layout__thread { display: none; }
	#mentayar-client-dashboard .messages-layout.is-thread-open .client-thread-back { display: inline-flex; }
}

/* subscription */
.client-gift { margin-block-start: var(--ds-space-4); }
.client-gift summary { cursor: pointer; min-block-size: var(--ds-control-h); display: inline-flex; align-items: center; color: var(--ds-action); font-weight: var(--ds-fw-semibold); }
.client-membership .ds-fee { margin-block: var(--ds-space-3); }
.client-status:empty { display: none; }
.client-status { margin-block-end: var(--ds-space-3); }
[data-finance-subscription] > section, [data-finance-subscription] > div { margin-block-end: var(--ds-space-4); }

/* ==========================================================================
   Specialist cards (directory, quiz, similar) and the directory page
   ========================================================================== */
.client-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; box-shadow: none; }
.client-card .specialist-card__body { padding: var(--ds-space-4); gap: var(--ds-space-2); }
.client-card .specialist-card__photo { aspect-ratio: 16 / 10; }
.client-card .specialist-card__name { font-size: var(--ds-fs-lg); line-height: var(--ds-lh-tight); }
.client-card .specialist-card__title { color: var(--ds-text-2); font-size: var(--ds-fs-sm); }
.client-card .credential-pills { list-style: none; padding: 0; margin: 0; }
.client-card__facts { margin: 0; display: grid; gap: var(--ds-space-1); font-size: var(--ds-fs-sm); }
.client-card__facts > div { display: flex; justify-content: space-between; gap: var(--ds-space-3); }
.client-card__facts dt { color: var(--ds-text-2); }
.client-card__facts dd { margin: 0; text-align: end; font-weight: var(--ds-fw-semibold); }
.client-card__intro { margin: 0; font-size: var(--ds-fs-sm); color: var(--ds-deep); }
.client-card__slots { margin: 0; display: grid; gap: var(--ds-space-1); font-size: var(--ds-fs-sm); }
.client-slotlist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ds-space-1); }
.client-slot { display: inline-block; padding: 0.2rem 0.6rem; border: 1px solid var(--ds-line); border-radius: var(--ds-radius-pill); background: var(--ds-mint); color: var(--ds-deep); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); white-space: nowrap; }
.client-card .specialist-card__meta { margin-block-start: var(--ds-space-2); }
.specialist-card__badge--rating { color: var(--ds-accent); }
.specialist-card__badge--experience { color: var(--ds-text-2); }
.client-card .tag-pills { gap: var(--ds-space-1); }
.client-card .tag-pill { min-block-size: 2rem; display: inline-flex; align-items: center; }

.client-directory .directory-layout { margin-block-start: 0; }
.client-directory .directory-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ds-space-2); color: var(--ds-text); font-weight: var(--ds-fw-semibold); }
.client-directory .directory-toolbar .client-muted { font-weight: var(--ds-fw-regular); }
.directory-quick-filter-banner button { min-block-size: var(--ds-control-h); }
.filters-searchbar input { min-block-size: var(--ds-control-h); min-inline-size: 0; font-size: var(--ds-fs-md); }
.filters-searchbar .ds-btn { flex: none; }
.filters-sidebar__header h2 { margin: 0; font-size: var(--ds-fs-md); }
.filters-sidebar__header { gap: var(--ds-space-2); }
.filters-sidebar__header .filters-sidebar__title { flex: 1; }
.filters-sidebar__clear { background: none; border: 0; color: var(--ds-action); }
.filters-sidebar__close { display: none; }
.filters-sidebar__footer { display: none; }
.filters-sidebar__group-title { margin: 0 0 var(--ds-space-2); font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.filters-check { min-block-size: var(--ds-control-h); }
.filters-check input { inline-size: 1.25rem; block-size: 1.25rem; accent-color: var(--ds-action); }
.nl-search__toggle { min-block-size: var(--ds-control-h); background: none; border: 0; color: var(--ds-action); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; font: inherit; padding-inline: 0; }
.nl-search__box { display: grid; gap: var(--ds-space-2); margin-block-start: var(--ds-space-2); }
.nl-search__box textarea { min-block-size: 4.5rem; font-size: var(--ds-fs-md); }
.nl-search__error { color: var(--ds-danger); margin: 0; }
.nl-search__interpretation { color: var(--ds-text-2); margin: 0; }
.directory-layout { grid-template-areas: "search search" "nlsearch nlsearch" "sidebar main"; }
.filters-toggle-mobile { display: none; }

/* phones and tablets: filters in a bottom sheet with an applied count and a reset */
@media (max-width: 1023.98px) {
	.directory-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "search" "nlsearch" "toggle" "main"; }
	.filters-toggle-mobile { display: flex; grid-area: toggle; justify-content: center; inline-size: 100%; margin-top: 0; }
	.filters-toggle-mobile__count { background: var(--ds-action); color: var(--ds-on-action); min-inline-size: 1.5rem; block-size: 1.5rem; border-radius: var(--ds-radius-pill); display: inline-flex; align-items: center; justify-content: center; font-size: var(--ds-fs-xs); }
	.filters-sidebar { display: none; }
	.filters-sidebar.is-open {
		display: flex; flex-direction: column;
		position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--ds-z-overlay);
		max-block-size: 88vh; max-block-size: 88dvh; overflow-y: auto;
		border-radius: var(--ds-radius-card) var(--ds-radius-card) 0 0; border-block-end: 0;
		padding: var(--ds-space-4); padding-block-end: calc(var(--ds-space-4) + var(--ds-safe-bottom));
		box-shadow: var(--ds-shadow-pop);
	}
	.filters-sidebar.is-open .filters-sidebar__close { display: inline-flex; }
	.filters-sidebar.is-open .filters-sidebar__header { position: sticky; inset-block-start: calc(var(--ds-space-4) * -1); background: var(--ds-surface); padding-block: var(--ds-space-2); z-index: 1; }
	.filters-sidebar.is-open .filters-sidebar__footer { display: block; position: sticky; inset-block-end: calc((var(--ds-space-4) + var(--ds-safe-bottom)) * -1); background: var(--ds-surface); padding-block: var(--ds-space-3); border-block-start: var(--ds-border); }
}
.client-sheet-backdrop { position: fixed; inset: 0; z-index: calc(var(--ds-z-overlay) - 1); background: var(--ds-overlay); }

/* ==========================================================================
   Specialist profile
   ========================================================================== */
.client-profile .specialist-profile__stat-badge--teal { background: var(--ds-mint-strong); color: var(--ds-deep); }
.client-profile .specialist-profile__stat-badge--green { background: var(--ds-mint-strong); color: var(--ds-deep); }
.client-profile .specialist-profile__stat-badge--gray { background: var(--ds-tint); color: var(--ds-text-2); }
.client-profile .specialist-profile__stat-badge--amber { background: var(--ds-accent-bg); color: var(--ds-accent); }
.client-profile .specialist-profile__stat-label { font-size: var(--ds-fs-xs); color: var(--ds-text-2); }
.client-profile .credential-pills { list-style: none; padding: 0; }
.client-profile .specialist-profile__details section { box-shadow: none; transform: none; }
.client-profile .specialist-profile__details section:hover { box-shadow: none; transform: none; }
.client-profile__notes { margin-block-start: var(--ds-space-4); }
.client-profile__notes ul { margin: 0; }
.client-profile .review-card { margin: 0; box-shadow: none; }
.client-profile .review-card:hover { transform: none; box-shadow: none; }
.client-profile .review-card blockquote { margin: 0; }
.client-profile .review-card__stars { color: var(--ds-accent); }
@media (max-width: 899.98px) { .client-profile .specialist-profile { grid-template-columns: minmax(0, 1fr); } }
.client-profile .specialist-profile > * { min-width: 0; }
@media (min-width: 900px) { .client-profile .booking-widget { position: sticky; inset-block-start: calc(var(--ds-header-h) + var(--ds-space-4)); } }

/* a quiet booking bar on phones while the widget is out of view */
.client-bookbar {
	position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--ds-z-sticky);
	display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3);
	padding: var(--ds-space-2) var(--ds-space-4); padding-block-end: calc(var(--ds-space-2) + var(--ds-safe-bottom));
	background: var(--ds-surface); border-block-start: var(--ds-border);
}
.client-bookbar[hidden] { display: none; }
@media (min-width: 900px) { .client-bookbar { display: none !important; } }

/* ==========================================================================
   Booking widget (step 1)
   ========================================================================== */
.booking-widget { background: var(--ds-surface); border: var(--ds-border); border-radius: var(--ds-radius-card); box-shadow: none; }
.booking-widget__header h2 { font-size: var(--ds-fs-lg); margin: 0; }
.booking-widget fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.booking-widget legend.booking-widget__label { padding: 0; }
.client-stepcap { margin: 0 0 var(--ds-space-3); color: var(--ds-text-2); font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semibold); }
.booking-widget__error { color: var(--ds-danger); font-size: var(--ds-fs-sm); }
.booking-widget__error:empty { display: none; }
.booking-widget__note, .booking-widget__hint { color: var(--ds-text-2); font-size: var(--ds-fs-xs); }
.booking-widget .date-carousel { display: flex; flex-wrap: nowrap; gap: var(--ds-space-2); overflow-x: auto; padding-block-end: var(--ds-space-2); scrollbar-width: thin; }
.client-daychip { flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1.3; text-align: center; min-inline-size: 5.5rem; }
.client-daychip__tag { font-size: var(--ds-fs-xs); opacity: 0.9; }
.booking-widget .time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: var(--ds-space-2); }
.booking-widget button.time-slot {
	min-block-size: var(--ds-control-h); border: 1px solid var(--ds-control-line); border-radius: var(--ds-radius-control);
	background: var(--ds-surface); color: var(--ds-text); font: inherit; font-weight: var(--ds-fw-semibold); font-variant-numeric: tabular-nums; cursor: pointer;
}
.booking-widget button.time-slot:hover:not(:disabled) { border-color: var(--ds-action); background: var(--ds-mint); }
.booking-widget button.time-slot.is-active { background: var(--ds-action); border-color: var(--ds-action); color: var(--ds-on-action); }
.booking-widget button.time-slot.is-booked, .booking-widget button.time-slot:disabled { background: var(--ds-disabled-bg); color: var(--ds-disabled-text); border-color: transparent; text-decoration: line-through; cursor: not-allowed; }
.booking-widget .time-slot--empty { color: var(--ds-text-2); font-size: var(--ds-fs-sm); grid-column: 1 / -1; }
.client-selection { margin: var(--ds-space-3) 0; padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-mint); border-radius: var(--ds-radius-control); }
.client-selection__title { margin: 0 0 var(--ds-space-1); font-size: var(--ds-fs-xs); color: var(--ds-text-2); font-weight: var(--ds-fw-semibold); }
.client-selection p { margin: 0; }
.client-subnote { margin: var(--ds-space-3) 0; padding: var(--ds-space-3); background: var(--ds-tint); border-radius: var(--ds-radius-control); font-size: var(--ds-fs-sm); }
.client-subnote p { margin: 0 0 var(--ds-space-1); }
.client-subnote__state:empty { display: none; }
.client-subnote__state { font-weight: var(--ds-fw-semibold); color: var(--ds-deep); }
.booking-widget .pill-group { gap: var(--ds-space-2); }
.booking-widget .pill { min-block-size: var(--ds-control-h); display: inline-flex; align-items: center; }

/* ==========================================================================
   Checkout (steps 2-4)
   ========================================================================== */
.client-checkout .ds-steps { max-inline-size: 40rem; }
.client-checkout__grid { grid-template-columns: 1fr; gap: var(--ds-space-5); }
.client-checkout__side { position: static; }
.client-checkout__side, .checkout__main { min-inline-size: 0; }
@media (min-width: 900px) {
	.client-checkout__grid { grid-template-columns: minmax(0, 1fr) 22rem; grid-template-areas: "main side"; align-items: start; }
	.client-checkout__grid .checkout__main { grid-area: main; }
	.client-checkout__grid .client-checkout__side { grid-area: side; position: sticky; inset-block-start: calc(var(--ds-header-h) + var(--ds-space-4)); }
}
.checkout__summary, .checkout__payment { background: var(--ds-surface); border: var(--ds-border); border-radius: var(--ds-radius-card); padding: var(--ds-space-5); box-shadow: none; }
.checkout__summary h2, .checkout__payment h2 { font-size: var(--ds-fs-lg); margin-block: 0 var(--ds-space-3); }
.checkout__billing-title { font-size: var(--ds-fs-md); margin-block: var(--ds-space-4) var(--ds-space-2); }
.checkout__recurring-list ol { margin: var(--ds-space-1) 0 0; padding-inline-start: var(--ds-space-5); font-size: var(--ds-fs-sm); color: var(--ds-text-2); }
.checkout__hold-banner { border-radius: var(--ds-radius-control); }
.checkout__hold-banner--urgent { background: var(--ds-warning-bg); color: var(--ds-warning); border: 1px solid var(--ds-warning-line); }
.checkout__hold-banner--expired { background: var(--ds-warning-bg); border: 1px solid var(--ds-warning-line); color: var(--ds-text); }
.checkout .discount-row { display: flex; gap: var(--ds-space-2); }
.checkout .discount-row input { flex: 1; min-inline-size: 0; min-block-size: var(--ds-control-h); }
.checkout .prof-form-grid { display: grid; gap: 0 var(--ds-space-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.checkout .ds-field input, .checkout .ds-field select { min-block-size: var(--ds-control-h); }
.checkout .mentayar-phone-row { display: flex; gap: var(--ds-space-2); }
.checkout .mentayar-phone-row input[type="tel"] { flex: 1; min-inline-size: 0; }

/* payment methods: a real tablist */
.gateway-tabs.ds-tabs { flex-wrap: wrap; border-block-end: var(--ds-border); margin-block-end: var(--ds-space-4); gap: var(--ds-space-1); overflow: visible; }
.gateway-tabs.ds-tabs .gateway-tab { flex: 1 1 auto; text-align: center; border: 1px solid var(--ds-control-line); border-radius: var(--ds-radius-control) var(--ds-radius-control) 0 0; border-block-end: 3px solid transparent; background: var(--ds-surface); color: var(--ds-text); }
.gateway-tabs.ds-tabs .gateway-tab[aria-selected="true"] { background: var(--ds-mint); border-color: var(--ds-action); border-block-end-color: var(--ds-action); color: var(--ds-deep); }
.gateway-panel { display: block; }
.gateway-panel[hidden] { display: none; }
.checkout__free-confirm { background: var(--ds-mint); border-radius: var(--ds-radius-control); }
.checkout__custom-price { background: var(--ds-mint); border-radius: var(--ds-radius-control); }
.confirmation-box { text-align: center; }
.confirmation-box__icon { inline-size: 3rem; block-size: 3rem; margin-inline: auto; border-radius: 50%; background: var(--ds-success-bg); color: var(--ds-success); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.confirmation-box__facts { text-align: start; display: grid; gap: var(--ds-space-2); margin: var(--ds-space-4) 0; }
.confirmation-box__facts > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ds-space-1) var(--ds-space-4); }
.confirmation-box__facts dt { color: var(--ds-text-2); }
.confirmation-box__facts dd { margin: 0; font-weight: var(--ds-fw-semibold); text-align: end; }
.confirmation-box__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-2); }
.confirmation-box h2 { margin-block: var(--ds-space-3) var(--ds-space-2); }
.confirmation-box h2:focus { outline: none; }

/* ==========================================================================
   Quiz, intake, group sessions, area pages: tokens only
   ========================================================================== */
.matching-quiz__progress-text { margin: 0 0 var(--ds-space-2); color: var(--ds-text-2); font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semibold); }
.matching-quiz__progress-bar { block-size: 0.5rem; background: var(--ds-tint); border-radius: var(--ds-radius-pill); overflow: hidden; }
.matching-quiz__progress-bar > div { block-size: 100%; background: var(--ds-action); }
.matching-quiz__question { border: 0; padding: 0; margin: var(--ds-space-4) 0; min-inline-size: 0; }
.matching-quiz__question legend { padding: 0; }
.matching-quiz__question h2 { font-size: var(--ds-fs-xl); margin: 0 0 var(--ds-space-3); }
.matching-quiz__question h2:focus { outline: none; }
.matching-quiz__nav { display: flex; flex-wrap: wrap; gap: var(--ds-space-2); }
.matching-quiz__error { color: var(--ds-danger); }
.matching-quiz__error:empty { display: none; }
.matching-quiz__reasons { margin: 0; padding-inline-start: var(--ds-space-5); font-size: var(--ds-fs-sm); color: var(--ds-deep); }
.matching-quiz__results h2:focus { outline: none; }
.intake__section h2 { font-size: var(--ds-fs-lg); }
.intake__consent-status { color: var(--ds-success); font-weight: var(--ds-fw-semibold); }

@media (prefers-reduced-motion: reduce) {
	.client-card, .client-slot { transition: none; }
}

/* verify-phase fixes: no stray "/" after the price (the legacy ::after reads a duration these cards do not carry), and a short placeholder when there is no photo */
.client-card .specialist-card__meta::after { content: none !important; }
.client-card .specialist-card__photo:has(> .specialist-card__photo--placeholder),
#mentayar-directory-results .client-card .specialist-card__photo:has(> .specialist-card__photo--placeholder) { aspect-ratio: auto; block-size: 112px; height: 112px; }
.client-card .specialist-card__photo--placeholder {
	background-color: var(--ds-tint, #f2faf7); background-repeat: no-repeat; background-position: center; background-size: 48px 48px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526563' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");
}
/* the hold countdown stays in view while the person fills in the payment form (it exists only while a real server-side hold does) */
.checkout__hold-banner { position: sticky; inset-block-start: calc(var(--ds-header-h, 64px) + var(--ds-space-2)); z-index: 5; }
.client-q--missing { border-inline-start: 4px solid var(--ds-danger, #b42318); padding-inline-start: var(--ds-space-3, 12px); }
.client-q__missing { display: block; margin: var(--ds-space-1, 4px) 0 0; color: var(--ds-danger, #b42318); font-size: var(--ds-fs-sm, 0.875rem); font-weight: var(--ds-fw-semibold, 600); }