/* ==========================================================================
   Mentayar — base styles. Mobile-first, RTL-native (logical properties only).
   ========================================================================== */

:root {
	--color-bg: #ffffff;
	--color-surface: #ffffff;
	--color-card: #f8fafc;
	/* The style guide labels "Border" as #6F7474 (same as muted text), but
	   every actual page in the design renders thin, light hairline borders —
	   that's #F1F5F9 ("Border ll"). Use the light value as the real default
	   and keep the darker one only where a more visible border is wanted. */
	--color-border: #f1f5f9;
	--color-border-strong: #6f7474;
	--color-text: #0f172b;
	--color-text-muted: #6f7474;
	--color-primary: #00a693;
	--color-primary-dark: #005b50;
	--color-primary-light: #e5f6f4;
	--color-primary-light-2: #e2e8f0;
	--color-accent: #c98f5e;
	--color-success: #10b981;
	--color-danger: #ef4444;
	--color-warning: #d97706;
	/* Decorative-only picks for specific spots on the specialist profile page
	   (rating badge, the intro-session pill border + card top-accent, the
	   Friday date-cell) — kept separate from --color-accent/--color-danger
	   above rather than overwriting them, since those two are the ZehnAva
	   brand accent and the site-wide error/danger signal used everywhere
	   else (forms, delete buttons, failed-payment states); redefining them
	   would ripple well past this page. --color-rating* and --color-highlight
	   are intentionally two different tones (gold vs. green), not one
	   shared value, per the site owner's choice. */
	--color-rating: #eab04a;
	--color-rating-dark: #b9791e;
	--color-highlight: #2f9e5c;
	--color-weekend: #e0677a;

	/* 8px spacing scale — ZehnAva design system (developer-style-guide, node 167:4) */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 12px;
	--space-base: 16px;
	--space-lg: 20px;
	--space-xl: 24px;
	--space-2xl: 32px;
	--space-3xl: 40px;
	--space-4xl: 48px;

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--shadow-sm: 0 1px 3px rgba(15, 23, 43, 0.06);
	--shadow-md: 0 8px 20px -3px rgba(226, 232, 240, 0.6);
	--container-width: 1160px;
	/* Design spec calls for "Bonyade Koodak Koochak FaNum" — swap in once
	   licensed font files are available; Vazirmatn is the free stand-in. */
	--font-body: 'Vazirmatn', Tahoma, sans-serif;
}

* { box-sizing: border-box; }

/*
 * The HTML `hidden` attribute must always win over any class-driven `display`
 * value (e.g. .btn/.btn--block set display:flex, .discount-row sets
 * display:flex) — those are equal-or-higher-specificity author rules that
 * would otherwise defeat it, since author styles outrank the browser's own
 * `[hidden]{display:none}` regardless of specificity. Toggle visibility with
 * `el.hidden = true/false`, never `style.display`, and this stays correct
 * everywhere without a per-component override.
 */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	line-height: 1.8;
	font-size: 16px;
}

/* Form controls don't inherit the page font by default in any browser —
   without this, every <button>/<input>/<select>/<textarea> silently falls
   back to the OS UI font instead of Vazirmatn, no matter what's set on body. */
button, input, select, textarea, optgroup { font-family: inherit; }

img { max-width: 100%; display: block; }

a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { text-decoration: none; }

h1, h2, h3, h4 { line-height: 1.4; margin: 0 0 0.6em; font-weight: 700; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

/* Hero-scale display text (ZehnAva design system) — for marketing-page hero
   headlines only; regular h1 stays at 32px for ordinary page titles. */
.text-display-1 { font-size: 40px; font-weight: 800; line-height: 1.15; margin: 0 0 0.6em; }
.text-display-2 { font-size: 36px; font-weight: 800; line-height: 1.15; margin: 0 0 0.6em; }
@media (max-width: 640px) {
	.text-display-1 { font-size: 30px; }
	.text-display-2 { font-size: 26px; }
}

.container {
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: 20px;
}
/* The three dashboards (admin / client / specialist) — app-style screens
   that want the whole viewport, unlike the marketing pages' reading-width
   column. */
.container--full { max-width: none; padding-inline: 32px; }
@media (max-width: 780px) { .container--full { padding-inline: 16px; } }

.section { padding-block: 48px; }
.section__title { text-align: center; margin-bottom: 32px; }
.section__cta { text-align: center; margin-top: 32px; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 22px;
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: 0.95rem;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	text-decoration: none;
}
.btn--primary { background: var(--color-primary-dark); color: #fff; }
.btn--primary:hover { background: var(--color-primary); text-decoration: none; color: #fff; }
.btn--outline { background: transparent; color: var(--color-primary-dark); border-color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary-light); text-decoration: none; }
.btn--lg { padding: 14px 30px; font-size: 1.05rem; }
.btn--sm { padding: 7px 14px; font-size: 0.85rem; }
.btn--block { display: flex; width: 100%; }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }

/* ---------- Pills (session type, tags, filters) ---------- */
.pill-group { display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	border-radius: 999px;
	border: 1px solid var(--color-primary);
	color: var(--color-primary-dark);
	background: transparent;
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.pill:has(input:checked),
.pill.is-active {
	background: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary);
}
/* A .pill rendered as <a> (filter links, area/type badges) shouldn't pick up
   the site-wide a:hover underline — it reads as a button, not inline text.
   Same colored-fill hover as the nav menu's pills, skipped on an already-
   active/checked pill so its solid fill doesn't fade to the lighter hover
   tone while the pointer is over it. */
.pill:hover:not(.is-active):not(:has(input:checked)) {
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
	text-decoration: none;
}
.pill:has(input:checked):hover,
.pill.is-active:hover {
	text-decoration: none;
}
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill-group--sm { gap: 6px; }
.pill--sm { padding: 3px 12px; font-size: 0.78rem; font-weight: 600; }
.booking-widget__date-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.booking-widget__date-header .booking-widget__label { margin-bottom: 0; }
.booking-widget__intro-toggle { margin-bottom: 4px; display: flex; justify-content: center; }
.pill--intro {
	border-style: dashed; border-color: var(--color-highlight, var(--color-primary));
	background: var(--color-surface); color: var(--color-highlight, var(--color-primary-dark));
}
.pill--intro:has(input:checked) { background: var(--color-highlight, var(--color-primary)); border-style: solid; color: #fff; }
.booking-widget__recurring-check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.booking-widget__recurring-count { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.booking-widget__recurring-count select { padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-surface); }
.booking-widget__participants-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.booking-widget__participants-items { display: flex; flex-direction: column; gap: 6px; }
.booking-widget__participant-row { display: flex; align-items: center; justify-content: space-between; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px 10px; font-size: 0.85rem; }
.booking-widget__participant-remove { border: none; background: transparent; color: var(--color-text-muted); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 4px; }
.booking-widget__participant-remove:hover { color: var(--color-danger, #d33); }

/* ---------- Header ---------- */
.site-header {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: 50;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 14px;
	/* Never wrap: a second row would push the actions under the logo and open
	   a big gap between logo and menu. The nav shrinks/compacts instead, and
	   below 1024px the whole menu folds into the hamburger. */
	flex-wrap: nowrap;
}
.site-logo { display: inline-flex; flex-shrink: 0; }
.site-logo__img { height: 40px; width: auto; display: block; }
.site-logo__img--footer { height: 36px; margin-bottom: 12px; }
.site-nav { flex: 1 1 auto; min-width: 0; }
.site-nav ul { list-style: none; display: flex; justify-content: center; gap: 2px; margin: 0; padding: 0; }
.site-nav ul li a {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	color: var(--color-text);
	font-weight: 500;
	font-size: 0.9rem;
	padding: 8px 10px;
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}
.site-nav ul li a:hover,
.site-nav ul li a:focus-visible {
	background: var(--color-primary-light);
	color: var(--color-primary-dark);
	text-decoration: none;
}
.site-nav ul li.current-menu-item > a,
.site-nav ul li.current_page_item > a {
	background: var(--color-primary-dark);
	color: #fff;
	font-weight: 600;
}
.site-header__actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.site-header__actions .header-auth-link { white-space: nowrap; }
.site-header__actions > .btn--primary { white-space: nowrap; }
.header-auth-link {
	background: none; border: none; cursor: pointer;
	color: var(--color-text); font-family: inherit; font-size: 0.9rem; font-weight: 500;
	display: inline-flex; align-items: center; gap: 4px; text-decoration: none;
	padding: 8px 12px; border-radius: 999px;
	transition: background 0.18s ease, color 0.18s ease;
}
/* Same pill hover as the main menu items — without an underline, colour
   alone (dark text → dark teal) was too subtle to read as feedback. */
.header-auth-link:hover,
.header-auth-link:focus-visible { background: var(--color-primary-light); color: var(--color-primary-dark); }
.header-icon-link {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 999px; color: var(--color-text);
	transition: background 0.15s ease, color 0.15s ease;
}
.header-icon-link:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }

.site-nav-toggle {
	display: none;
	align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: var(--radius-sm);
	background: none; border: 1px solid var(--color-border); color: var(--color-text);
	cursor: pointer;
}
.site-nav-toggle:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }

/* Only meaningful inside the mobile dropdown panel — hidden on desktop,
   where the identical auth-link + booking button already sit in
   .site-header__actions (see the media query below). */
.site-nav__mobile-actions { display: none; }

/* 1199px (not the 782px used elsewhere): the seven-item menu is ~700px wide,
   and with the logo and the logged-out actions cluster it only fits once the
   container is at its full 1160px, i.e. viewports of 1200px and up. Mirrored
   in site-nav.js, which closes the panel when resized past this width. */
@media (max-width: 1199px) {
	.site-nav-toggle { display: inline-flex; order: 3; }

	.site-header__inner { flex-wrap: nowrap; }
	.site-header__actions { flex-wrap: nowrap; }

	/* Collapsed by default: an absolutely-positioned dropdown panel below the
	   header, not a layout-affecting flex item — so the header row itself
	   (logo + hamburger) stays a single compact line on mobile instead of
	   the whole 8-item menu pushing content down. */
	.site-nav {
		display: none;
		position: absolute; inset-inline: 0; top: 100%;
		background: var(--color-surface);
		border-bottom: 1px solid var(--color-border);
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
		padding: 12px 0;
		max-height: calc(100vh - 70px);
		overflow-y: auto;
	}
	.site-nav.is-open { display: block; }
	.site-nav ul { flex-direction: column; align-items: stretch; gap: 2px; }
	.site-nav ul li a { display: block; padding: 12px var(--space-lg, 20px); border-radius: var(--radius-sm); }

	.site-nav__mobile-actions {
		display: flex; flex-direction: column; gap: 10px;
		padding: 14px var(--space-lg, 20px) 4px;
		margin-top: 8px; border-top: 1px solid var(--color-border);
	}
	.site-nav__mobile-actions .header-auth-link { justify-content: center; padding: 8px 0; }

	/* The header row's own copies fold into the nav panel above instead —
	   only the hamburger stays in the collapsed row. */
	.site-header__actions .header-icon-link,
	.site-header__actions > .header-auth-link,
	.site-header__actions > .btn--primary { display: none; }
}

/* ---------- Hero ---------- */
.hero {
	background: linear-gradient(180deg, var(--color-primary-light), var(--color-bg));
	padding-block: 64px;
	text-align: center;
}
.hero__inner { max-width: 720px; margin-inline: auto; }
.hero__lead { color: var(--color-text-muted); font-size: 1.1rem; }
.hero__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.hero .text-accent { color: var(--color-primary-dark); }
.hero__quick-dates { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.hero__quick-dates .pill { font-size: 0.82rem; padding: 6px 14px; background: var(--color-surface); }
.hero__trust {
	display: flex; gap: 24px; justify-content: center; flex-wrap: wrap;
	margin-top: var(--space-xl); font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted);
}
.hero__trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero__trust svg { color: var(--color-primary); flex-shrink: 0; }

/* ---------- Section header (eyebrow + title + "see all" link) ---------- */
.section__header {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: var(--space-lg); margin-bottom: var(--space-2xl); flex-wrap: wrap;
}
.section__header h2 { margin: 0; }
.section__eyebrow {
	display: block; color: var(--color-primary); font-weight: 700;
	font-size: 0.85rem; margin-bottom: var(--space-xs);
}
.link-arrow {
	display: inline-flex; align-items: center; gap: 6px; font-weight: 600;
	color: var(--color-primary-dark); white-space: nowrap;
}
.link-arrow:hover { text-decoration: none; }

/* ---------- Areas grid (legacy tag-style, kept for taxonomy pages) ---------- */
.areas__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 14px;
}
.area-card {
	display: block;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 20px;
	text-align: center;
	font-weight: 600;
	color: var(--color-text);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.area-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }

/* ---------- Services grid (homepage) ---------- */
.services { background: var(--color-primary-light); }
.services__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
}
@media (max-width: 900px) { .services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .services__grid { grid-template-columns: 1fr; } }
.service-card {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: var(--space-xl);
	color: var(--color-text);
	box-shadow: var(--shadow-sm);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.service-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: var(--radius-sm);
	background: var(--color-primary-light); color: var(--color-primary-dark);
	margin-bottom: var(--space-md);
}
.service-card__title { display: block; font-weight: 700; margin-bottom: var(--space-xs); }
.service-card__desc { display: block; font-size: 0.85rem; color: var(--color-text-muted); }

/* ---------- Specialist cards ---------- */
/* Fixed column counts per breakpoint, not auto-fill — auto-fill's column
   count tracks the container's exact pixel width continuously, so cards
   subtly change proportions at almost every width instead of snapping
   between a few clean row layouts; a plain 3/2/1-per-row grid always wraps
   into full, evenly-aligned rows. */
.specialist-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media (max-width: 900px) { .specialist-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .specialist-grid { grid-template-columns: 1fr; } }
.specialist-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
}
.specialist-card[data-href] { cursor: pointer; }
.specialist-card__photo { position: relative; aspect-ratio: 4 / 3; background: var(--color-primary-light); overflow: hidden; }
.specialist-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.specialist-card__photo--placeholder { width: 100%; height: 100%; background: var(--color-primary-light); }
.specialist-card__badge {
	position: absolute; top: var(--space-sm); z-index: 1;
	display: inline-flex; align-items: center; gap: 4px;
	background: rgba(255, 255, 255, 0.95); color: var(--color-text);
	font-size: 0.75rem; font-weight: 700; padding: 4px 9px; border-radius: 999px;
	box-shadow: var(--shadow-sm);
}
.specialist-card__badge--rating { inset-inline-start: var(--space-sm); color: var(--color-rating-dark, var(--color-accent)); }
.specialist-card__badge--experience { inset-inline-end: var(--space-sm); color: var(--color-text-muted); }
.specialist-card__intro-badge {
	display: inline-flex; align-self: flex-start; align-items: center; gap: 4px;
	background: var(--color-surface); color: var(--color-primary-dark); border: 1px dashed var(--color-primary);
	font-size: 0.75rem; font-weight: 700; padding: 3px 9px; border-radius: 999px;
}
.specialist-card__couples-badge { background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.specialist-card__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.specialist-card__name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.specialist-card__name { margin: 0; font-size: 1.05rem; }
.specialist-card__name a { color: inherit; text-decoration: none; }
.specialist-card__name a:hover { text-decoration: none; }
a.specialist-card__photo { display: block; }
.specialist-card__title { color: var(--color-text-muted); margin: 0; font-size: 0.9rem; }
.specialist-card__areas { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }
/* margin-top: auto (not a fixed value) so this — and the actions row right
   after it — get pushed to the bottom of the card regardless of how much
   variable-height content (tag pills, badges, match-quiz reasons) sits
   above it, keeping price/button aligned across cards in the same grid row. */
.specialist-card__meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font-weight: 600; }
.specialist-card__rating { color: var(--color-rating-dark, var(--color-accent)); }
.specialist-card__actions { display: flex; gap: 8px; margin-top: 10px; }
.specialist-card__actions .btn { flex: 1; }
.specialist-card__slots {
	display: flex; gap: 6px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px;
	scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.specialist-card__slot {
	flex-shrink: 0; scroll-snap-align: start; padding: 5px 12px; border-radius: 999px;
	background: var(--color-primary-light); color: var(--color-primary-dark);
	font-size: 0.82rem; font-weight: 600; white-space: nowrap;
}
.specialist-card__slot:hover { background: var(--color-primary); color: #fff; text-decoration: none; }
.specialist-card__no-slots { font-size: 0.8rem; color: var(--color-text-muted); margin: 10px 0 0; }

/* Directory listing only: one compact, short row per specialist (photo
   beside the info, not on top of it) instead of the multi-column card grid
   used elsewhere (homepage, "متخصصان مشابه", etc.) — scoped to this page's
   results container so those other, narrower placements keep the card
   layout they already work well in.
   The body switches from a plain top-to-bottom stack to a wrapping flex
   row: name/title and the pill groups each still claim a full line (via
   flex-basis:100%), but the last line — duration/price/button — packs
   onto one row instead of three, which is most of what keeps this short.
   The boxed session-duration/languages stat block is dropped here; it's
   the single biggest source of extra height and this compact row already
   states the duration in the price line. */
#mentayar-directory-results.specialist-grid { grid-template-columns: 1fr; }
/* A fixed 220×220 photo square (larger images are cropped into it by the
   base rule's object-fit:cover), with the row held to that same height so
   the photo spans it top-to-bottom. The pill groups flow inline (display:
   contents) rather than each taking a full line, which is what keeps a
   typical row inside 220px. */
#mentayar-directory-results .specialist-card { flex-direction: row; min-height: 220px; }
#mentayar-directory-results .specialist-card__photo { flex: 0 0 220px; width: 220px; height: 220px; aspect-ratio: auto; align-self: flex-start; }
/* Info column, top to bottom (flex `order` puts the DOM's optional badges
   where they read best, without touching the shared card markup):
     1. name + specialty title
     2. areas of expertise (teal tags)
     3. qualifiers — degree, intro-session offer, couples/family — one line
     4. footer pinned to the bottom: price · duration, and the CTA.
   align-content:space-between spreads those lines over the row's full
   height so every card's footer sits on the same baseline. */
#mentayar-directory-results .specialist-card__body {
	flex: 1;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: space-between;
	align-items: center;
	padding: 14px 20px 12px;
	gap: 4px 8px;
}
/* Name + degree pills share one row now (name on its own side, pills
   opposite it) — the wrapper takes over the name's old order/flex-basis;
   .credential-pills stays a real flex child here (not display:contents)
   since it needs to size itself against the name inside this row, not
   against the whole card. */
#mentayar-directory-results .specialist-card__name-row { order: 1; flex-basis: 100%; margin-bottom: -2px; }
#mentayar-directory-results .specialist-card__name { font-size: 1.1rem; font-weight: 700; }
#mentayar-directory-results .credential-pill {
	font-size: 0.76rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
	background: var(--color-card); color: var(--color-text-muted); border: 1px solid var(--color-border);
}
#mentayar-directory-results .specialist-card__title { order: 2; flex-basis: 100%; font-size: 0.85rem; }
#mentayar-directory-results .tag-pills { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; }
#mentayar-directory-results .tag-pill { font-size: 0.8rem; padding: 4px 12px; }
#mentayar-directory-results .specialist-card__intro-badge,
#mentayar-directory-results .specialist-card__couples-badge {
	order: 4; flex: 0 0 auto; align-self: auto;
	font-size: 0.76rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
}
#mentayar-directory-results .specialist-card__couples-badge { background: var(--color-surface); color: var(--color-text-muted); border: 1px solid var(--color-border); }
#mentayar-directory-results .specialist-card__stats { display: none; }
/* A zero-height full-width flex item between the qualifiers and the
   footer: the only way to force a line break inside a wrapping flex row,
   so price + CTA always start their own bottom line instead of squeezing
   in next to a credential pill when there happens to be room. */
#mentayar-directory-results .specialist-card__body::before { content: ""; order: 5; flex: 0 0 100%; height: 0; margin-top: -4px; }
#mentayar-directory-results .specialist-card__meta {
	order: 6; flex: 1 1 auto; margin: 6px 0 0;
	font-size: 1.15rem; font-weight: 800; color: var(--color-primary-dark);
}
#mentayar-directory-results .specialist-card__meta:not([data-duration=""])::after {
	content: "/ " attr(data-duration);
	font-weight: 500; font-size: 0.8rem; color: var(--color-text-muted); margin-inline-start: 6px;
}
#mentayar-directory-results .specialist-card__actions { order: 7; flex: 0 0 auto; margin: 6px 0 0; }
#mentayar-directory-results .specialist-card__actions .btn {
	flex: 0 0 auto; padding: 8px 22px; font-size: 0.88rem;
	background: var(--color-primary-dark); color: #fff; border-color: var(--color-primary-dark);
}
#mentayar-directory-results .specialist-card__actions .btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
#mentayar-directory-results .specialist-card { transition: box-shadow 0.15s ease, border-color 0.15s ease; }
#mentayar-directory-results .specialist-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
@media (max-width: 640px) {
	/* A 120px-wide photo leaves too little room for a wrapped info row on
	   a phone screen — back to the normal stacked card there. */
	#mentayar-directory-results .specialist-card { flex-direction: column; min-height: 0; }
	#mentayar-directory-results .specialist-card__photo { flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3; }
	/* The body is a column here, so the desktop "full line" tricks (flex-
	   basis:100%, the ::before line break) would mean full *height* — undo
	   them; `order` alone still gives the same top-to-bottom sequence. */
	#mentayar-directory-results .specialist-card__body { flex-direction: column; align-items: stretch; align-content: flex-start; padding: 14px 16px; gap: 6px; }
	#mentayar-directory-results .specialist-card__body::before { display: none; }
	#mentayar-directory-results .specialist-card__name-row,
	#mentayar-directory-results .specialist-card__title,
	#mentayar-directory-results .tag-pills { flex-basis: auto; }
	#mentayar-directory-results .specialist-card__intro-badge,
	#mentayar-directory-results .specialist-card__couples-badge { align-self: flex-start; }
	#mentayar-directory-results .specialist-card__meta { margin-top: 8px; }
	#mentayar-directory-results .specialist-card__actions { margin-top: 4px; }
	#mentayar-directory-results .specialist-card__actions .btn { flex: 1; }
}

/* Compact size for the credential pills reused from the profile header. */
.credential-pills--sm { margin: 0; }
.credential-pills--sm .credential-pill { font-size: 0.7rem; padding: 3px 9px; }

/* Boxed quick-stats row, same recipe as .specialist-profile__stats but sized for a card.
   margin-top: auto anchors this + the price/button that follow it to the bottom of
   the card, so cards with more tag pills above (wrapping to an extra line) don't
   push their price/button lower than shorter neighbors in the same grid row. */
.specialist-card__stats {
	display: flex; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden;
	margin-top: auto;
}
.specialist-card__stat {
	flex: 1 1 0; min-width: 0; text-align: center; padding: 6px 4px;
	border-inline-start: 1px solid var(--color-border);
}
.specialist-card__stat:first-child { border-inline-start: none; }
.specialist-card__stat strong { display: block; font-size: 0.82rem; color: var(--color-text); overflow-wrap: break-word; }
.specialist-card__stat span { display: block; font-size: 0.68rem; color: var(--color-text-muted); }

.directory-quick-filter-banner {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	background: var(--color-primary-light); color: var(--color-primary-dark);
	border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px; font-size: 0.88rem; font-weight: 600;
}
.directory-quick-filter-banner button {
	background: none; border: 1px solid var(--color-primary-dark); border-radius: 999px;
	padding: 3px 12px; font-size: 0.78rem; font-weight: 600; color: var(--color-primary-dark); cursor: pointer;
}

/* ---------- Breadcrumb ---------- */
.breadcrumb { color: var(--color-text-muted); font-size: 0.85rem; margin-bottom: var(--space-md); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb span { color: var(--color-text); }

/* ---------- Directory layout ---------- */
.directory-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	grid-template-areas: "nlsearch nlsearch" "search search" "sidebar main";
	gap: var(--space-xl);
	align-items: start;
	margin-top: var(--space-xl);
}
@media (max-width: 860px) {
	.directory-layout { grid-template-columns: 1fr; grid-template-areas: "nlsearch" "search" "toggle" "sidebar" "main"; }
}
.specialist-filters { display: contents; }
.directory-main { grid-area: main; }
.directory-toolbar { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: var(--space-lg); }

.filters-toggle-mobile { display: none; }
@media (max-width: 860px) {
	/* Collapsed by default: results should be the first thing a mobile
	   visitor scrolls into, not a full page of filter radio buttons. */
	.filters-toggle-mobile {
		grid-area: toggle;
		display: flex; align-items: center; gap: 8px; justify-content: center;
		width: 100%; padding: 12px; margin-top: -6px;
		background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
		font-family: inherit; font-size: 0.9rem; font-weight: 600; color: var(--color-text); cursor: pointer;
	}
	.filters-toggle-mobile__count {
		display: inline-flex; align-items: center; justify-content: center;
		min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
		background: var(--color-primary); color: #fff; font-size: 0.72rem; font-weight: 700;
	}
	.filters-sidebar { display: none; }
	.filters-sidebar.is-open { display: block; }
}

/* ---------- Filters sidebar ---------- */
.filters-searchbar { grid-area: search; display: flex; gap: 10px; }
.filters-searchbar input {
	flex: 1; padding: 12px 16px; border: 1px solid var(--color-border);
	border-radius: var(--radius-sm); font-family: inherit; background: var(--color-surface);
}
.filters-sidebar {
	grid-area: sidebar; background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-md); padding: var(--space-lg);
}
.filters-sidebar__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-md); }
.filters-sidebar__header h3 { margin: 0; font-size: 1rem; }
.filters-sidebar__clear { background: none; border: none; color: var(--color-primary-dark); font-size: 0.8rem; cursor: pointer; font-family: inherit; }
.filters-sidebar__group { padding-block: var(--space-md); border-top: 1px solid var(--color-border); }
.filters-sidebar__group:first-of-type { border-top: none; }
.filters-sidebar__group h4 { margin: 0 0 var(--space-sm); font-size: 0.85rem; color: var(--color-text-muted); }
.filters-sidebar__options { display: flex; flex-direction: column; gap: var(--space-sm); }
.filters-check { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.filters-sidebar .pill-group { gap: 8px; }
.filters-sidebar .pill { font-size: 0.8rem; padding: 6px 12px; }

/* ---------- Steps ---------- */
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.steps__item {
	text-align: center; background: var(--color-card); border-radius: var(--radius-md);
	padding: var(--space-xl) var(--space-lg); display: flex; flex-direction: column; align-items: center;
}
.steps__number {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--color-primary); color: #fff; font-weight: 700; margin-bottom: var(--space-md);
}
.steps__heading { display: block; margin-bottom: var(--space-xs); }
.steps__text { display: block; color: var(--color-text-muted); font-size: 0.9rem; }

/* ---------- Tests teaser ---------- */
.test-teaser-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
@media (max-width: 900px) { .test-teaser-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .test-teaser-grid { grid-template-columns: 1fr; } }
.test-teaser-card {
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-md); padding: var(--space-xl);
	display: flex; flex-direction: column; gap: var(--space-sm);
	box-shadow: var(--shadow-sm);
}
.test-teaser-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: var(--radius-sm);
	background: var(--color-primary-light); color: var(--color-primary-dark);
}
.test-teaser-card p { color: var(--color-text-muted); font-size: 0.85rem; margin: 0; flex: 1; }
.test-teaser-card__meta { display: flex; gap: 12px; font-size: 0.8rem; color: var(--color-text-muted); }

/* ---------- Trust / "why choose us" ---------- */
.trust__layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-3xl); align-items: center; }
@media (max-width: 900px) { .trust__layout { grid-template-columns: 1fr; } }
.trust__intro p { color: var(--color-text-muted); }
.trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
@media (max-width: 480px) { .trust__grid { grid-template-columns: 1fr; } }
.trust-card {
	background: var(--color-card); border-radius: var(--radius-md);
	padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm);
}
.trust-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: var(--radius-sm);
	background: var(--color-surface); color: var(--color-primary-dark);
}
.trust-card p { margin: 0; color: var(--color-text-muted); font-size: 0.85rem; }

/* ---------- FAQ ---------- */
.faq__list { max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: 10px; }
.faq__item {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 14px 18px;
}
.faq__item summary { cursor: pointer; font-weight: 600; }
.faq__item p { margin-top: 10px; color: var(--color-text-muted); }

/* ---------- CTA banner ---------- */
.cta-banner {
	background: linear-gradient(120deg, var(--color-primary-light-2), var(--color-primary-light));
	border-radius: var(--radius-lg); padding: var(--space-4xl) var(--space-xl);
	text-align: center;
}
.cta-banner h2 { margin-bottom: var(--space-sm); }
.cta-banner p { color: var(--color-text-muted); max-width: 560px; margin-inline: auto; margin-bottom: var(--space-xl); }

/* ---------- Contact page ---------- */
.contact-page__hero {
	position: relative; overflow: hidden;
	background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
	border-radius: var(--radius-lg);
	padding: var(--space-4xl) var(--space-xl);
	text-align: center;
	margin-bottom: var(--space-2xl);
}
.contact-page__hero h1 { color: #fff; position: relative; margin-bottom: var(--space-sm); }
.contact-page__hero p { color: rgba(255, 255, 255, 0.85); max-width: 480px; margin-inline: auto; position: relative; }
.contact-page__hero-decor {
	position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.08); pointer-events: none;
}
.contact-page__hero-decor--1 { width: 260px; height: 260px; top: -120px; inset-inline-end: -60px; }
.contact-page__hero-decor--2 { width: 180px; height: 180px; bottom: -100px; inset-inline-start: -40px; background: rgba(255, 255, 255, 0.06); }

.contact-page__quick-actions {
	position: relative; display: flex; gap: var(--space-md); justify-content: center;
	flex-wrap: wrap; margin-top: var(--space-xl);
}
.contact-quick-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 26px; border-radius: 999px; font-weight: 700; font-size: 0.95rem;
	color: #fff; text-decoration: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.contact-quick-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); color: #fff; text-decoration: none; }
/* Official brand colors, not the site's own palette — these buttons should
   read as "WhatsApp" / "Telegram" at a glance. */
.contact-quick-btn--whatsapp { background: #25d366; }
.contact-quick-btn--whatsapp:hover { background: #1ebe5b; }
.contact-quick-btn--telegram { background: #26a5e4; }
.contact-quick-btn--telegram:hover { background: #1c93cf; }

.contact-page__cards {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg);
	margin-bottom: var(--space-2xl);
}
@media (max-width: 780px) { .contact-page__cards { grid-template-columns: repeat(2, 1fr); } }
.contact-info-card {
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-xl) var(--space-lg);
	display: flex; flex-direction: column; gap: var(--space-xs);
	text-decoration: none; color: inherit;
	box-shadow: var(--shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
a.contact-info-card:hover {
	transform: translateY(-4px); box-shadow: var(--shadow-md);
	border-color: var(--color-primary); text-decoration: none;
}
.contact-info-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--color-primary-light); color: var(--color-primary-dark);
	margin-bottom: var(--space-xs);
	transition: background 0.2s ease, color 0.2s ease;
}
a.contact-info-card:hover .contact-info-card__icon { background: var(--color-primary); color: #fff; }
.contact-info-card strong { font-size: 1rem; }
.contact-info-card span { color: var(--color-text-muted); font-size: 0.9rem; }

.contact-page__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 780px) { .contact-page__grid { grid-template-columns: 1fr; } }
.contact-page__form,
.contact-page__info {
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-2xl) var(--space-xl);
	box-shadow: var(--shadow-sm);
}
.contact-page__info {
	background: linear-gradient(160deg, var(--color-primary-light) 0%, var(--color-surface) 65%);
}
.contact-page__info-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: var(--color-primary-dark); color: #fff; margin-bottom: var(--space-md);
}
.contact-page__info h2 { margin-top: 0; }
.contact-page__info p { color: var(--color-text-muted); line-height: 1.8; }
.contact-page__form h2 { margin-top: 0; margin-bottom: var(--space-xs); }
.contact-page__form-hint { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: var(--space-xl); }

/* ---------- Legal pages (privacy / terms) ---------- */
.legal-page__header {
	border-bottom: 1px solid var(--color-border);
	padding-bottom: var(--space-lg);
	margin-bottom: var(--space-2xl);
}
.legal-page__updated { color: var(--color-text-muted); font-size: 0.9rem; }
.legal-page__layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-2xl); align-items: start; }
@media (max-width: 900px) { .legal-page__layout { grid-template-columns: 1fr; } }
.legal-page__toc {
	position: sticky; top: 90px;
	background: var(--color-card); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-lg);
}
@media (max-width: 900px) { .legal-page__toc { position: static; } }
.legal-page__toc strong { display: block; margin-bottom: var(--space-sm); font-size: 0.9rem; }
.legal-page__toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.legal-page__toc a {
	display: block; padding: 6px 10px; border-radius: var(--radius-sm);
	color: var(--color-text-muted); font-size: 0.85rem; text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.legal-page__toc a:hover { background: var(--color-primary-light); color: var(--color-primary-dark); text-decoration: none; }

.legal-page__content {
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-2xl);
	box-shadow: var(--shadow-sm);
	line-height: 1.9;
}
.legal-page__content h2 {
	font-size: 1.15rem; color: var(--color-primary-dark);
	margin-top: var(--space-2xl); margin-bottom: var(--space-md);
	padding-inline-start: var(--space-md);
	border-inline-start: 3px solid var(--color-primary);
}
.legal-page__content h2:first-child { margin-top: 0; }
.legal-page__content p { color: var(--color-text); margin-bottom: var(--space-md); }
.legal-page__content ul { padding-inline-start: 0; list-style: none; margin-bottom: var(--space-md); }
.legal-page__content li {
	position: relative; padding-inline-start: var(--space-lg);
	margin-bottom: var(--space-sm); color: var(--color-text);
}
.legal-page__content li::before {
	content: ''; position: absolute; inset-inline-start: 4px; top: 0.65em;
	width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary);
}
.legal-page__content strong { color: var(--color-danger); }
.legal-page__content a { text-decoration: underline; }
/* Generic "fields side-by-side" utility — already used this way in several
   templates (intake, specialist-dashboard availability rows) but only ever
   had a rule scoped to the booking widget's own waitlist form; those other
   usages were silently falling back to plain stacked blocks. */
.mentayar-row { display: flex; gap: 12px; }
.mentayar-row > .mentayar-field { flex: 1; min-width: 0; }
@media (max-width: 640px) { .mentayar-row { flex-direction: column; gap: 0; } }

.mentayar-field { margin-bottom: 16px; }
/* Direct child only — a .pill checkbox/radio (session type, specialty-area
   tags, etc.) is itself a <label>, nested a level deeper inside a field, and
   must never inherit this block/bold treatment meant for the field's own
   top-level label. */
.mentayar-field > label { display: block; font-weight: 600; margin-bottom: 6px; }
/* :not([type="checkbox"]):not([type="radio"]) — a .pill's own checkbox/radio
   (specialty-area tags, etc.) is an <input> nested inside a .mentayar-field
   too, and this rule's plain "input" selector has the same specificity as
   (and comes after) .pill input's own hiding rule; without the exclusion it
   silently wins and un-hides/full-widths the pill's checkbox, wrecking the
   pill's whole layout even though only its background looks "off" at a glance. */
.mentayar-field input:not([type="checkbox"]):not([type="radio"]),
.mentayar-field textarea,
.mentayar-field select {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: 0.95rem;
	color: var(--color-text);
	background-color: var(--color-surface);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mentayar-field input:focus,
.mentayar-field textarea:focus,
.mentayar-field select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Standalone search box (admin-dashboard list filters) — a magnifier icon
   baked in as a background-image rather than a separate <svg>, so it's a
   plain single <input> the JS can wire up with no extra markup/wrapper. */
.admin-search-input {
	padding: 10px 40px 10px 14px;
	border: 1px solid var(--color-border);
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.9rem;
	color: var(--color-text);
	background-color: var(--color-surface);
	background-repeat: no-repeat;
	background-position: left 14px center;
	background-size: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236f7474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cpath d='m21 21-4.3-4.3'%3E%3C/path%3E%3C/svg%3E");
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-search-input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* A field combining two controls on one line — e.g. an amount + its unit
   dropdown, or a text input + an action button beside it (discount-code
   generator). The narrower control (dropdown/button) keeps its natural
   width; the other stretches to fill the row. */
.mentayar-inline { display: flex; gap: 8px; }
.mentayar-inline > input,
.mentayar-inline > select { flex: 1; min-width: 0; }

/* Country-code + number pair (assets/js/phone-input.js), used everywhere a
   mobile number is entered. direction:ltr so the dial-code select sits at
   the visual LEFT of the number field (DOM order select-then-input) — a
   phone number reads left-to-right even inside an otherwise RTL page. */
.mentayar-phone-row { display: flex; gap: 8px; direction: ltr; flex-wrap: wrap; }
.mentayar-phone-row .dial-code-select {
	flex: 1 1 140px;
	min-width: 100px !important; max-width: 178px; width: auto !important;
	padding: 10px 8px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: inherit; font-size: 0.9rem;
	color: var(--color-text);
	background-color: var(--color-surface);
	direction: ltr;
}
.mentayar-phone-row input[data-phone-number] {
	flex: 2 1 110px; min-width: 90px !important; width: auto !important; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
	font-family: inherit; font-size: 0.95rem; color: var(--color-text); background-color: var(--color-surface);
	text-align: left; direction: ltr;
}
.mentayar-phone-row .dial-code-select:focus,
.mentayar-phone-row input[data-phone-number]:focus {
	outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light);
}
.mentayar-inline > select.mentayar-inline__unit,
.mentayar-inline > button { flex: 0 0 auto; }

/* Numeric stepper (usage limits, quantities): −/+ buttons flank a plain
   number input, all sharing one bordered pill so it reads as one control. */
.mentayar-stepper { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.mentayar-stepper input { border: none !important; text-align: center; box-shadow: none !important; }
.mentayar-stepper__btn { flex: 0 0 40px; width: 40px; background: var(--color-card); border: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 10px 0; color: var(--color-text); }
.mentayar-stepper__btn:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }

/* Custom chic dropdown: native arrow removed, replaced with a themed chevron.
   The chevron sits at the visual left regardless of RTL text direction (a
   dropdown affordance icon, not text) — padding-inline-end reserves room for
   it on the logical "end" side, which is visual left under dir="rtl". */
select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	padding-inline-end: 38px !important;
	background-repeat: no-repeat;
	background-position: left 12px center;
	background-size: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236f7474' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
select:hover { border-color: var(--color-primary); }
select:disabled { cursor: not-allowed; opacity: 0.6; }
select::-ms-expand { display: none; }
.mentayar-honeypot { position: absolute; inset-inline-start: -9999px; }
.contact-page__status.is-error { color: var(--color-danger); }
.contact-page__status:not(.is-error):not(:empty) { color: var(--color-primary-dark); }

/* ---------- Specialist application page ---------- */
.specialist-application-hero {
	background: linear-gradient(180deg, var(--color-primary-light), var(--color-bg));
	padding-block: var(--space-3xl) var(--space-2xl);
	text-align: center;
}
.specialist-application-hero__breadcrumb { text-align: start; margin-bottom: var(--space-lg); }
.specialist-application-hero h1 { max-width: 640px; margin-inline: auto; }
.specialist-application-hero p { max-width: 560px; margin: var(--space-md) auto 0; color: var(--color-text-muted); font-size: 1.05rem; }

.specialist-application-benefits { margin-bottom: var(--space-3xl); }

/* ---------- Counseling areas page ---------- */
/* The grid section already paints the mint background, so the hero fades into
   plain page background and the section supplies the colour block itself. */
.counseling-hero { padding-bottom: var(--space-3xl); }
.counseling-services .service-card__desc { line-height: 1.7; }
.counseling-services__empty { text-align: center; color: var(--color-text-muted); }
.counseling-services__cta {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-md);
	margin-top: var(--space-2xl); text-align: center;
}
.counseling-services__cta p { flex: 0 0 100%; margin: 0 0 var(--space-xs); font-weight: 600; }
@media (max-width: 480px) { .counseling-services__cta .btn { flex: 1 1 100%; } }

.specialist-application-form {
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-2xl);
	box-shadow: var(--shadow-sm);
}
.specialist-application-form__status.is-error { color: var(--color-danger); }
.specialist-application-form__status:not(.is-error):not(:empty) { color: var(--color-primary-dark); font-weight: 600; margin-top: var(--space-md); }

.specialist-application-form__section { padding-block: var(--space-xl); border-top: 1px solid var(--color-border); }
.specialist-application-form__section:first-child { padding-top: 0; border-top: none; }
.specialist-application-form__section h2 {
	display: flex; align-items: center; gap: 10px;
	font-size: 1.05rem; margin: 0 0 var(--space-lg);
}
.specialist-application-form__section-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--color-primary); color: #fff; font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}
.specialist-application-form__areas { margin-top: 8px; }
.specialist-application-form__submit { font-size: 1rem; }
/* Wizard: sections are steps shown one at a time, so no divider between them. */
.specialist-application-form__section[data-sa-step] { border-top: none; padding-top: 0; }
.specialist-application-form__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: var(--space-xl); }
.specialist-application-form__nav .btn { min-width: 140px; }
/* Phones: two 140px buttons don't fit inside the card, so stack them with the
   forward action (بعدی / ارسال) on top — DOM order is prev-then-next, hence reverse. */
@media (max-width: 640px) {
	.specialist-application-form__nav { flex-direction: column-reverse; }
	.specialist-application-form__nav .btn { width: 100%; min-width: 0; }
}
.sa-steps {
	list-style: none; margin: 0 0 var(--space-2xl); padding: 0;
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
	counter-reset: none;
}
.sa-steps__item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; position: relative; color: var(--color-text-muted); font-size: 0.85rem; font-weight: 600; }
.sa-steps__item::before {
	content: ""; position: absolute; top: 15px; inset-inline-start: 50%; width: 100%; height: 2px;
	background: var(--color-border); z-index: 0;
}
.sa-steps__item:last-child::before { display: none; }
.sa-steps__item.is-done::before { background: var(--color-primary); }
.sa-steps__num {
	position: relative; z-index: 1;
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--color-surface); border: 2px solid var(--color-border); color: var(--color-text-muted);
	font-size: 0.85rem; font-weight: 700; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sa-steps__item.is-active { color: var(--color-primary-dark); }
.sa-steps__item.is-active .sa-steps__num { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.sa-steps__item.is-done .sa-steps__num { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark); }
@media (max-width: 640px) { .sa-steps__label { font-size: 0.72rem; } }

/* Fixed 3 columns (not auto-fill) so 5 documents settle into two tidy rows
   (3 + 2) instead of an unbalanced 4-then-1 wrap. */
.doc-upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
@media (max-width: 560px) {
	.doc-upload-grid { grid-template-columns: repeat(2, 1fr); }
	/* At ~140px per card a 4:3 box is too short for the icon + title + hint and
	   clips the hint, so let empty cards grow with their text (rows stay equal via
	   the grid). Cards holding a file keep the fixed ratio for a tidy thumbnail. */
	.doc-upload:not(.has-file) .doc-upload__dropzone { aspect-ratio: auto; min-height: 112px; }
	.doc-upload__placeholder { padding: 10px 8px; }
}
.doc-upload { position: relative; }
.doc-upload__dropzone {
	display: flex; align-items: center; justify-content: center; overflow: hidden;
	aspect-ratio: 4 / 3; border: 1.5px dashed var(--color-border); border-radius: var(--radius-md);
	background: var(--color-bg); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.doc-upload__dropzone:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.doc-upload.has-file .doc-upload__dropzone { border-style: solid; border-color: var(--color-primary); }
.doc-upload__placeholder { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-md); text-align: center; color: var(--color-text-muted); }
.doc-upload__placeholder svg { color: var(--color-primary); margin-bottom: 2px; }
.doc-upload__placeholder strong { color: var(--color-text); font-size: 0.85rem; }
.doc-upload__placeholder span { font-size: 0.72rem; }
.doc-upload.has-file .doc-upload__placeholder { display: none; }
.doc-upload__preview { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.doc-upload__preview img { width: 100%; height: 100%; object-fit: cover; }
.doc-upload__preview--pdf { flex-direction: column; gap: 6px; color: var(--color-primary-dark); font-size: 0.8rem; padding: var(--space-md); text-align: center; }
.doc-upload__remove {
	position: absolute; top: 6px; inset-inline-end: 6px; width: 22px; height: 22px; border-radius: 50%;
	background: #fff; border: 1px solid var(--color-border); color: var(--color-danger, #d33);
	font-size: 1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
	box-shadow: var(--shadow-sm);
}

/* ---------- Specialist single profile ---------- */
.specialist-profile { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
@media (max-width: 900px) { .specialist-profile { grid-template-columns: 1fr; } }
.specialist-profile__header {
	display: flex; gap: var(--space-xl); flex-wrap: wrap; margin-bottom: var(--space-xl);
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm);
}
.specialist-profile__photo { width: 160px; height: 160px; border-radius: var(--radius-lg); overflow: hidden; flex-shrink: 0; }
.specialist-profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.specialist-profile__summary { flex: 1; min-width: 220px; }
.specialist-profile__name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.specialist-profile__name-row h1 { margin: 0; }
.specialist-profile__name-row .credential-pills { margin: 0; }
.specialist-profile__title { color: var(--color-text-muted); margin-top: 6px; }
.specialist-profile__meta { display: flex; gap: 16px; margin: 14px 0; font-weight: 600; flex-wrap: wrap; align-items: center; }
.specialist-profile__meta span { display: inline-flex; align-items: center; gap: 5px; }
/* Same card treatment as the header above and the directory's cards, so
   every block on the page reads as one consistent card-based design. */
.specialist-profile__details section {
	position: relative;
	overflow: hidden;
	margin-bottom: var(--space-xl);
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.specialist-profile__details section::before {
	content: ''; position: absolute; inset-inline: 0; top: 0; height: 4px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-highlight));
}
.specialist-profile__details section:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.specialist-profile__details section:last-child { margin-bottom: 0; }
.specialist-profile__details section h2 { margin-top: 0; }

/* Icon badge in front of each details-section heading */
.section-heading { display: flex; align-items: center; gap: 12px; }
.section-heading__icon {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 38px; height: 38px; border-radius: 12px;
	background: var(--color-primary-light); color: var(--color-primary-dark);
}

/* "اطلاعات جلسه" — a checklist instead of plain browser bullets */
.specialist-profile__facts ul { list-style: none; padding: 0; margin: 0; }
.specialist-profile__facts li {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 0; border-bottom: 1px dashed var(--color-border); font-size: 0.95rem;
}
.specialist-profile__facts li:last-child { border-bottom: none; }
.specialist-profile__facts li::before {
	content: '✓'; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--color-primary-light); color: var(--color-primary-dark);
	font-size: 0.7rem; font-weight: 700;
}

/* Credential chips (from the profile's free-text degrees field) */
.credential-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-md) 0; }
.credential-pill {
	display: inline-block; background: rgba(0, 166, 147, 0.08); color: var(--color-primary-dark);
	font-size: 0.75rem; font-weight: 600; padding: 2px 10px; border-radius: 4px;
	border: 1px solid rgba(0, 166, 147, 0.18);
}

/* Quick-stats row under the specialist's name — each stat is its own
   colored chip (icon + value) with a caption underneath, rather than a
   shared bordered box, so the row still looks intentional whether 1 or all
   6 possible stats are present (no divider math needed for variable counts). */
.specialist-profile__stats { display: flex; flex-wrap: wrap; gap: var(--space-xl); margin-top: var(--space-lg); }
.specialist-profile__stat { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.specialist-profile__stat-badge {
	display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
	padding: 6px 16px; border-radius: 999px; font-weight: 700; font-size: 0.95rem;
}
.specialist-profile__stat-label { font-size: 0.75rem; color: var(--color-text-muted); }

.specialist-profile__stat-badge--teal   { background: var(--color-primary-light); color: var(--color-primary-dark); }
.specialist-profile__stat-badge--gray   { background: var(--color-card); color: var(--color-text-muted); }
.specialist-profile__stat-badge--amber  { background: rgba(234, 176, 74, 0.18); color: var(--color-rating-dark); }
.specialist-profile__stat-badge--blue   { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
.specialist-profile__stat-badge--purple { background: rgba(124, 58, 237, 0.1); color: #7c3aed; }
.specialist-profile__stat-badge--green  { background: rgba(16, 185, 129, 0.12); color: var(--color-success); }
.specialist-profile__stat-badge--indigo { background: rgba(79, 70, 229, 0.1); color: #4f46e5; }

@media (max-width: 640px) {
	.specialist-profile__stats { justify-content: center; gap: var(--space-lg); }
}

/* ---------- Group session detail page ---------- */
.group-session-detail {
	position: relative; overflow: hidden;
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: var(--shadow-sm);
}
.group-session-detail::before {
	content: ''; position: absolute; inset-inline: 0; top: 0; height: 4px;
	background: linear-gradient(90deg, var(--color-primary), var(--color-highlight));
}
.group-session-detail__header { display: flex; gap: var(--space-lg); align-items: flex-start; flex-wrap: wrap; }
.group-session-detail__photo { width: 120px; height: 120px; border-radius: var(--radius-lg); overflow: hidden; flex-shrink: 0; background: var(--color-primary-light); }
.group-session-detail__photo img { width: 100%; height: 100%; object-fit: cover; }
.group-session-detail__title { margin: 0 0 6px; }
.group-session-detail__specialist { color: var(--color-text-muted); margin: 0; }
.group-session-detail__specialist a { color: var(--color-primary-dark); text-decoration: none; }
.group-session-detail__specialist a:hover { text-decoration: none; }
.group-session-detail__description { margin: var(--space-lg) 0 0; line-height: 1.8; }
.group-session-detail__actions { margin-top: var(--space-xl); }
.group-session-detail__actions .btn { min-width: 220px; }

@media (max-width: 640px) {
	.group-session-detail__header { flex-direction: column; align-items: center; text-align: center; }
	.group-session-detail__actions { text-align: center; }
	.group-session-detail__actions .btn { width: 100%; }
}

/* ---------- Tag pills (specialty tags) ---------- */
.tag-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill {
	display: inline-block; background: var(--color-primary-light); color: var(--color-primary-dark);
	font-size: 0.85rem; font-weight: 600; padding: 6px 14px; border-radius: 999px;
	border: 1px solid var(--color-primary-light); cursor: pointer; text-decoration: none;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.tag-pill:hover {
	background: var(--color-primary); color: #fff; text-decoration: none;
	border-color: var(--color-primary); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.tag-pill:active { transform: scale(0.97); }

/* ---------- Reviews ---------- */
.review-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
@media (max-width: 640px) { .review-grid { grid-template-columns: 1fr; } }
.review-card {
	position: relative; overflow: hidden;
	background: linear-gradient(150deg, var(--color-primary-light) 0%, var(--color-card) 60%);
	border: 1px solid var(--color-border); border-radius: var(--radius-lg);
	padding: var(--space-lg); padding-top: calc(var(--space-lg) + 4px);
	box-shadow: var(--shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.review-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.review-card__quote {
	position: absolute; top: 6px; inset-inline-end: 16px;
	font-family: Georgia, 'Times New Roman', serif; font-size: 3rem; line-height: 1;
	color: rgba(0, 166, 147, 0.15); pointer-events: none;
}
.review-card__stars { color: var(--color-rating); letter-spacing: 2px; margin-bottom: var(--space-sm); font-size: 1.05rem; }
/* The client dashboard's "submit a review" star input (assets/js/client-dashboard.js) had no color rule at all before this — same gold as every other star/rating display on the site. */
.star-picker { color: var(--color-rating); }
.review-card p { color: var(--color-text); margin-bottom: var(--space-md); position: relative; }
.review-card__footer { display: flex; align-items: center; gap: 10px; }
.review-card__avatar {
	display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--color-primary-dark); color: #fff; font-weight: 700; font-size: 0.9rem;
}
.review-card strong { font-size: 0.9rem; color: var(--color-text-muted); font-weight: 600; }

/* ---------- Booking widget (sidebar on the specialist profile page) ---------- */
.booking-widget {
	position: sticky;
	top: 90px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	padding: 20px;
}
.booking-widget__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.booking-widget__header h2 { margin: 0; font-size: 1.1rem; }
.booking-widget__nearest { font-size: 0.8rem; color: var(--color-text-muted); }
.booking-widget__section { margin-bottom: 18px; }
.booking-widget__label { font-weight: 600; font-size: 0.9rem; margin-bottom: 8px; display: block; }

.date-carousel { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.date-chip {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 10px 6px;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	background: var(--color-card);
	cursor: pointer;
	font-size: 0.8rem;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.date-chip:hover { border-color: var(--color-primary); }
.date-chip span:first-child { font-size: 0.74rem; color: var(--color-text-muted); }
.date-chip span[data-date-chip-day] { font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.date-chip span[data-date-chip-month] { font-size: 0.72rem; color: var(--color-text-muted); }
.date-chip.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.date-chip.is-active span:first-child,
.date-chip.is-active span[data-date-chip-month] { color: rgba(255, 255, 255, 0.85); }
.date-chip[disabled] { opacity: 0.4; cursor: not-allowed; }

.time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
/* Reschedule modal (client dashboard): the time grid sits directly under
   the date grid with no section label between them like the booking
   widget has, so give it its own breathing room. */
[data-reschedule-times] .time-grid,
[data-reschedule-times] .time-slot--empty { margin-top: 20px; }
.time-slot {
	padding: 10px 6px;
	text-align: center;
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	background: var(--color-card);
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.time-slot:hover { border-color: var(--color-primary); }
.time-slot.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.time-slot.is-booked {
	background: var(--color-border-2, #f1f5f9);
	color: var(--color-text-muted);
	border-color: transparent;
	cursor: not-allowed;
	text-decoration: line-through;
}
.time-slot.is-booked:hover { border-color: transparent; }
.time-slot--empty { grid-column: 1 / -1; color: var(--color-text-muted); text-align: center; padding: 12px 0; }
.time-slot__local { display: block; direction: ltr; font-size: 0.72rem; opacity: 0.75; margin-top: 2px; }

/* Cancellation/refund policy tiers — admin-dashboard.js's settings ← لغو و عودت وجه tab. */
.policy-tier { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 6px; border-bottom: 1px solid var(--color-border); }
.policy-tier:last-child { border-bottom: none; }
.policy-tier__label { font-weight: 600; }
.policy-tier__input-group { display: flex; align-items: center; gap: 10px; }
.policy-tier__input {
	width: 76px;
	padding: 9px 10px;
	text-align: center;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	font: inherit;
	font-size: 1rem;
	background: var(--color-surface);
	transition: border-color 0.15s, box-shadow 0.15s;
	-moz-appearance: textfield;
}
.policy-tier__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.policy-tier__input--wide { width: 120px; }
.policy-tier__input::-webkit-inner-spin-button,
.policy-tier__input::-webkit-outer-spin-button { margin-inline-start: 4px; }
.policy-tier__suffix { color: var(--color-text-muted); font-size: 0.85rem; white-space: nowrap; }

/* Settings tabs (payments/communications/login/assessments): one
   .dashboard-card per integration instead of several crammed into one,
   each with a title + enable-toggle header row so the fields under it read
   as a distinct, self-contained block. */
.integration-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.integration-card__header h3 { margin: 0; }
.settings-toggle { display: flex; align-items: center; gap: 8px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.settings-toggle input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--color-primary); }
.settings-toggle + .settings-toggle { margin-top: 10px; }
.mentayar-field + .settings-toggle,
.settings-toggle + .mentayar-field { margin-top: 4px; }

.booking-widget__facts { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--color-border); padding-top: 14px; }
.booking-widget__facts li { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.9rem; }
.booking-widget__facts li span:first-child { color: var(--color-text-muted); }
.booking-widget__note { font-size: 0.78rem; color: var(--color-text-muted); text-align: center; margin-top: 10px; }
.booking-widget__waitlist { background: var(--color-card); border-radius: var(--radius-sm); padding: 12px; margin-top: -4px; margin-bottom: 16px; }
.booking-widget__waitlist-form { margin-top: 10px; }
.booking-widget__waitlist-form .mentayar-row { display: flex; gap: 8px; margin-bottom: 10px; }
.booking-widget__hint { font-size: 0.78rem; color: var(--color-text-muted); margin: -4px 0 8px; }
.booking-widget__error { color: var(--color-danger); font-size: 0.85rem; margin-top: 8px; }

/* ---------- Auth modal (mobile + OTP) ---------- */
.mentayar-modal-overlay {
	position: fixed; inset: 0; background: rgba(15, 23, 43, 0.45);
	backdrop-filter: blur(2px);
	display: flex; align-items: center; justify-content: center;
	z-index: 200; padding: 16px;
}
.mentayar-modal {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	max-width: 420px; width: 100%;
	padding: 28px 24px;
	position: relative;
	box-shadow: var(--shadow-md);
}
.mentayar-modal__close {
	position: absolute; inset-inline-end: 16px; top: 16px;
	background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--color-text-muted);
}
.mentayar-modal h2 { text-align: center; margin-bottom: 6px; }
.mentayar-modal__hint { text-align: center; color: var(--color-text-muted); font-size: 0.88rem; margin-bottom: 20px; }
/* direction: ltr so the dial-code select renders at the visual LEFT of the
   number field (DOM order select-then-input) — a phone number reads
   left-to-right even inside an otherwise fully-RTL page/modal. */
.mentayar-modal__mobile-row { display: flex; gap: 8px; margin-bottom: 16px; direction: ltr; }
.mentayar-modal__mobile-row .dial-code-select {
	flex: 0 0 auto;
	width: 178px;
	padding: 10px 8px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: inherit; font-size: 1rem;
	background: var(--color-surface);
	direction: ltr;
}
.mentayar-modal__mobile-row input,
.mentayar-modal__otp-row input {
	flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
	font-family: inherit; font-size: 1rem; text-align: center; letter-spacing: 2px;
}
.mentayar-modal__mobile-row input { text-align: left; letter-spacing: normal; direction: ltr; }
.mentayar-modal__error { color: var(--color-danger); font-size: 0.85rem; text-align: center; margin-top: 10px; min-height: 1.2em; }
.mentayar-modal__resend { text-align: center; font-size: 0.85rem; margin-top: 14px; color: var(--color-text-muted); }
.mentayar-modal__resend button { background: none; border: none; color: var(--color-primary-dark); font-weight: 600; cursor: pointer; padding: 0; }

.mentayar-modal__tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--color-border); }
.mentayar-modal__tab {
	flex: 1; background: none; border: none; border-bottom: 2px solid transparent;
	padding: 8px 0; font-family: inherit; font-size: 0.92rem; color: var(--color-text-muted); cursor: pointer;
}
.mentayar-modal__tab.is-active { color: var(--color-primary-dark); font-weight: 600; border-bottom-color: var(--color-primary); }
.mentayar-modal__label { display: block; font-size: 0.85rem; color: var(--color-text-muted); margin: 12px 0 4px; }
.mentayar-modal__input {
	width: 100%; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
	font-family: inherit; font-size: 0.95rem;
}
.mentayar-modal__forgot { text-align: end; margin: 6px 0 0; }
.mentayar-modal__switch { text-align: center; font-size: 0.85rem; margin-top: 16px; }
.mentayar-modal__link { background: none; border: none; color: var(--color-primary-dark); font-size: inherit; font-weight: 600; cursor: pointer; padding: 0; }
.mentayar-modal__divider { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--color-text-muted); font-size: 0.8rem; }
.mentayar-modal__divider::before, .mentayar-modal__divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.mentayar-modal__social { display: flex; flex-direction: column; gap: 8px; }
.btn--social {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	border-radius: 999px; background: var(--color-surface); border-color: var(--color-border);
	color: var(--color-text); font-weight: 700;
}
.btn--social:hover { background: var(--color-card); border-color: var(--color-border-strong); color: var(--color-text); }
.btn--social svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Checkout / payment page ---------- */
.checkout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: start; }
@media (max-width: 860px) { .checkout { grid-template-columns: 1fr; } }
.checkout__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.checkout__sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 90px; }
@media (max-width: 860px) { .checkout__sidebar { position: static; } }
.checkout__summary, .checkout__payment {
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: 20px;
}
.checkout__summary-specialist { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.checkout__summary-specialist img,
.checkout__summary-specialist-fallback { width: 52px; height: 52px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.checkout__summary-specialist-fallback { display: block; background: var(--color-primary-light); }
.checkout__summary-specialist strong { display: block; }
.checkout__summary-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-border); }
.checkout__summary-row:last-child { border-bottom: none; font-weight: 700; }
.checkout__summary-row--discount { color: var(--color-success); }
.checkout__summary-label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); padding-top: 8px; }
.checkout__recurring-list { padding: 6px 0; border-bottom: 1px solid var(--color-border); }
.checkout__recurring-list ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.checkout__recurring-list li { font-size: 0.82rem; color: var(--color-text-muted); }
.discount-row { display: flex; gap: 8px; align-items: center; }
.discount-row input { flex: 1; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: inherit; }
.discount-row--applied { justify-content: space-between; background: var(--color-primary-light); padding: 10px 14px; border-radius: var(--radius-sm); }
.gateway-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.gateway-tab { flex: 1; padding: 10px; text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; background: var(--color-card); }
.gateway-tab.is-active { border-color: var(--color-primary); background: var(--color-primary-light); font-weight: 600; }
.gateway-panel { display: none; }
.gateway-panel.is-active { display: block; }
#stripe-payment-element { margin-bottom: 16px; }
.checkout__free-confirm { background: var(--color-primary-light); border-radius: var(--radius-md); padding: 16px; margin-bottom: 16px; }
.checkout__free-confirm .booking-widget__hint { margin: 0 0 10px; text-align: center; }
.checkout__pending-notice { color: var(--color-warning); font-size: 0.88rem; text-align: center; margin-top: 10px; }

/* Hold countdown — sits above the payment form so it stays visible while the
   client fills in card details; switches to --urgent in the final 2 minutes
   and to the expired banner once the server confirms the hold actually lapsed. */
.checkout__hold-banner {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	background: var(--color-primary-light); color: var(--color-primary-dark);
	border-radius: var(--radius-md); padding: 10px 16px; font-size: 0.88rem; font-weight: 600;
	text-align: center;
}
.checkout__hold-banner--urgent { background: #fef3c7; color: var(--color-warning); }
.checkout__hold-banner--expired {
	flex-direction: column; background: #fee2e2; color: var(--color-danger);
}
.checkout__hold-banner--expired p { margin: 0 0 8px; }

.checkout__support h2 { font-size: 1.05rem; }
.checkout__support-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.9rem; }

.confirmation-box { text-align: center; padding: 40px 20px; }
.confirmation-box__icon { font-size: 3rem; color: var(--color-success); }
.confirmation-box__facts {
	text-align: start; max-width: 360px; margin: 24px auto 0;
	border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 4px 16px;
}
.confirmation-box__facts div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.confirmation-box__facts div:last-child { border-bottom: none; }
.confirmation-box__facts dt { color: var(--color-text-muted); }
.confirmation-box__facts dd { margin: 0; font-weight: 600; }
.confirmation-box__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ---------- About page hero ---------- */
.about-hero { max-width: 720px; margin-inline: auto; text-align: center; padding-block: var(--space-xl) var(--space-2xl); }
.about-hero p { color: var(--color-text-muted); }
.about-hero .hero__trust { justify-content: center; }
.about-hero .text-accent { color: var(--color-primary-dark); }

/* ---------- Area landing (/counseling/{area}/) ---------- */
.area-hero {
	position: relative; overflow: hidden; text-align: center;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 55%, var(--color-highlight) 100%);
	border-radius: var(--radius-lg); padding: var(--space-4xl) var(--space-xl);
	margin-bottom: var(--space-2xl); color: #fff;
}
/* Soft decorative blobs — pure CSS, no image asset needed */
.area-hero::before, .area-hero::after {
	content: ''; position: absolute; border-radius: 50%;
	background: rgba(255, 255, 255, 0.12); pointer-events: none;
}
.area-hero::before { width: 260px; height: 260px; top: -120px; inset-inline-end: -80px; }
.area-hero::after { width: 180px; height: 180px; bottom: -90px; inset-inline-start: -60px; }
.area-hero__icon {
	position: relative; z-index: 1;
	display: inline-flex; align-items: center; justify-content: center;
	width: 88px; height: 88px; border-radius: 50%; margin-bottom: var(--space-lg);
	background: rgba(255, 255, 255, 0.18); color: #fff;
	box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.08);
}
.area-hero__inner { position: relative; z-index: 1; max-width: 640px; margin-inline: auto; }
.area-hero .section__eyebrow { color: rgba(255, 255, 255, 0.85); }
.area-hero h1 { margin: 0; color: #fff; }
.area-hero__lead { color: rgba(255, 255, 255, 0.92); margin-top: var(--space-sm); font-size: 1.05rem; }
@media (max-width: 560px) { .area-hero { padding: var(--space-2xl) var(--space-lg); } }

/* Reusable content card — icon heading in a colored circle + a soft tinted
   background per section (instead of identical white boxes), so a stack of
   these reads as distinct, "designed" sections rather than repeated boilerplate. */
.content-card {
	margin-bottom: var(--space-xl);
	border: 1px solid transparent; border-radius: var(--radius-lg); padding: var(--space-xl);
}
.content-card .section-heading { margin: 0 0 var(--space-md); font-size: 1.2rem; }
.content-card .section-heading__icon { width: 44px; height: 44px; border-radius: 50%; }

.content-card--amber { background: rgba(217, 158, 6, 0.07); border-color: rgba(217, 158, 6, 0.18); }
.content-card--amber .section-heading__icon { background: rgba(217, 158, 6, 0.16); color: var(--color-warning); }

.content-card--teal { background: var(--color-primary-light); border-color: rgba(0, 166, 147, 0.18); }
.content-card--teal .section-heading__icon { background: rgba(0, 166, 147, 0.16); color: var(--color-primary-dark); }

.content-card--gold { background: rgba(201, 143, 94, 0.08); border-color: rgba(201, 143, 94, 0.2); }
.content-card--gold .section-heading__icon { background: rgba(201, 143, 94, 0.18); color: var(--color-accent); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-text); color: #cbd5e1; margin-top: 60px; }
.site-footer__top { padding-block-start: 48px; padding-block-end: 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.site-footer__top p { max-width: 640px; color: #94a3b8; margin: 0; }
.site-footer__inner { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; padding-block: 40px; }
@media (max-width: 900px) { .site-footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .site-footer__inner { grid-template-columns: 1fr; } }
.site-footer h4 { color: #fff; font-size: 0.95rem; }
.site-footer a { color: #cbd5e1; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer__col p { color: #94a3b8; font-size: 0.85rem; }
.site-footer__col--contact p { display: flex; align-items: center; gap: 8px; color: #cbd5e1; margin-bottom: 10px; }
.site-footer__social { display: flex; gap: 10px; margin-top: 12px; }
.site-footer__social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 999px; background: rgba(255,255,255,0.08);
}
.site-footer__social a:hover { background: var(--color-primary); }
.site-footer__bottom {
	padding-block: 18px; border-top: 1px solid rgba(255,255,255,0.1);
	display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px;
	font-size: 0.85rem; color: #94a3b8;
}
.site-footer__legal { display: flex; gap: 16px; }

/* ---------- Client / specialist dashboard ---------- */
.dashboard-layout { display: flex; gap: 28px; align-items: flex-start; }
@media (max-width: 780px) { .dashboard-layout { flex-direction: column; } }

.dashboard-sidebar {
	width: 286px; flex-shrink: 0;
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: 20px 0; box-shadow: var(--shadow-sm);
	position: sticky; top: 90px;
}
@media (max-width: 780px) { .dashboard-sidebar { width: 100%; position: static; } }
.dashboard-sidebar__user { display: flex; align-items: center; gap: 10px; padding: 0 20px 16px; border-bottom: 1px solid var(--color-border); margin-bottom: 10px; }
.notif-bell-wrap { position: relative; margin-inline-start: auto; flex-shrink: 0; }
.notif-bell {
	position: relative; display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
	background: rgba(255, 255, 255, 0.18); border: 1.5px solid rgba(255, 255, 255, 0.3); cursor: pointer; color: #fff;
	transition: background 0.15s ease;
}
.notif-bell:hover { background: rgba(255, 255, 255, 0.3); }
.notif-bell svg { width: 17px; height: 17px; }
.notif-bell__badge {
	position: absolute; top: -2px; inset-inline-end: -2px; background: var(--color-danger); color: #fff;
	font-size: 0.65rem; font-weight: 700; min-width: 17px; height: 17px; border-radius: 999px;
	display: flex; align-items: center; justify-content: center; padding: 0 3px;
	border: 2px solid var(--color-surface);
	animation: mentayar-notif-pulse 2.2s infinite;
}
@keyframes mentayar-notif-pulse {
	0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
	70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
	100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.notif-panel {
	/* The bell sits at the narrow end of the sidebar user-info row, so
	   anchoring by inline-end (its own left edge pinned to the trigger's
	   left edge) let the 320px panel grow off the right side of the
	   viewport. Anchor by inline-start instead — its right edge pinned to
	   the trigger's right edge, growing left (toward inline-end) — so it
	   always stays inside the page on desktop widths. On narrow screens the
	   bell itself can sit close enough to an edge that even this still
	   clips (see the media query below, which stops anchoring to the
	   trigger at all past that point). */
	position: absolute; top: calc(100% + 8px); inset-inline-start: 0; width: 320px; max-width: 92vw; max-height: 420px;
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md); z-index: 60; display: flex; flex-direction: column;
}
/* Below this, the bell can sit close enough to the viewport edge that
   anchoring the panel to IT (rather than the viewport) still clips a side —
   max-width:92vw alone isn't enough once the anchor point itself is near an
   edge. Detach from the trigger and pin to the viewport instead. */
@media (max-width: 480px) {
	.notif-panel { position: fixed; top: 64px; inset-inline: 12px; width: auto; max-width: none; }
}
.notif-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--color-border); }
.notif-panel__header h4 { margin: 0; font-size: 0.92rem; }
.notif-panel__header button { background: none; border: none; color: var(--color-primary-dark); font-size: 0.78rem; cursor: pointer; padding: 0; }
.notif-panel__list { overflow-y: auto; }
.notif-panel__empty { text-align: center; color: var(--color-text-muted); padding: 20px; margin: 0; }
.notif-item { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--color-border); text-decoration: none; color: var(--color-text); }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-card); text-decoration: none; }
.notif-item.is-unread { background: var(--color-primary-light); }
.notif-item__title { font-size: 0.88rem; font-weight: 600; }
.notif-item__body { font-size: 0.8rem; color: var(--color-text-muted); }
.notif-item__time { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 2px; }

.dashboard-nav { display: flex; flex-direction: column; }
.dashboard-nav__item {
	display: block; width: 100%; text-align: start; background: none; border: none; cursor: pointer;
	padding: 12px 20px; font-family: inherit; font-size: 0.92rem; color: var(--color-text);
	border-inline-start: 3px solid transparent; text-decoration: none;
}
.dashboard-nav__item:hover { background: var(--color-primary-light); }
.dashboard-nav__item.is-active { border-inline-start-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 600; }
.dashboard-nav__item--logout { color: var(--color-danger); margin-top: 8px; }

/* Accordion group (admin-dashboard.js toggles .is-open, one group at a time) */
.dashboard-nav__group-toggle {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
	background: none; border: none; cursor: pointer; font-family: inherit; text-align: start;
	padding: 12px 20px; font-size: 0.92rem; font-weight: 600; color: var(--color-text);
}
.dashboard-nav__group-toggle:hover { background: var(--color-primary-light); }
.dashboard-nav__group-toggle::after {
	content: ''; width: 6px; height: 6px; flex-shrink: 0;
	border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor;
	transform: rotate(45deg); transition: transform 0.15s ease;
}
.dashboard-nav__group.is-open .dashboard-nav__group-toggle::after { transform: rotate(-135deg); }
.dashboard-nav__group-items { max-height: 0; overflow: hidden; transition: max-height 0.2s ease; }
.dashboard-nav__group.is-open .dashboard-nav__group-items { max-height: 600px; }
.dashboard-nav__group-items .dashboard-nav__item { padding-inline-start: 32px; }
.dashboard-nav__divider { border: none; border-top: 1px solid var(--color-border); margin: 10px 20px; }

.dashboard-content { flex: 1; min-width: 0; width: 100%; }
.dashboard-content h1 { font-size: 1.3rem; margin-bottom: 18px; }

.dashboard-card {
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-md); padding: 18px; margin-bottom: 14px;
}
.profile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 16px; }
.profile-grid .mentayar-field { margin-bottom: 12px; }
@media (max-width: 780px) { .profile-grid { grid-template-columns: 1fr; } }
.dashboard-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; }
.dashboard-stat { flex: 1 1 130px; text-align: center; }
.dashboard-stat__number { display: block; font-size: 1.8rem; font-weight: 700; color: var(--color-primary-dark); }
.dashboard-next-session h3 { margin-bottom: 8px; }

.dashboard-greeting { font-size: 1.1rem; color: var(--color-text-muted); margin-bottom: 14px; }

.dashboard-hero {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
	background: var(--color-primary-light); border-color: var(--color-primary);
}
.dashboard-hero__main { display: flex; align-items: center; gap: 14px; }
.dashboard-hero__photo {
	width: 64px; height: 64px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0;
}
.dashboard-hero__photo--fallback {
	display: flex; align-items: center; justify-content: center;
	background: var(--color-primary); color: #fff; font-weight: 700; font-size: 1.4rem;
}
.dashboard-hero__info { display: flex; flex-direction: column; gap: 2px; }
.dashboard-hero__badge {
	align-self: flex-start; background: var(--color-primary); color: #fff;
	font-size: 0.75rem; padding: 2px 10px; border-radius: 999px; margin-bottom: 4px;
}
.dashboard-hero__name { font-size: 1.05rem; }
.dashboard-hero__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.dashboard-hero__countdown { text-align: center; }
.dashboard-hero__countdown strong { display: block; font-size: 1.3rem; color: var(--color-primary-dark); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
	.dashboard-hero { flex-direction: column; align-items: stretch; }
	.dashboard-hero__side { align-items: stretch; }
}

.referral-hero { background: var(--color-primary-light); border-color: var(--color-primary); }
.referral-hero__code-row {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: var(--color-surface); border: 1px dashed var(--color-primary); border-radius: var(--radius-md);
	padding: 12px 16px; margin-block: 12px;
}
.referral-hero__code { font-size: 1.15rem; font-weight: 700; color: var(--color-primary-dark); letter-spacing: 0.05em; }

.dashboard-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dashboard-tab { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-card); cursor: pointer; font-family: inherit; white-space: nowrap; }
.dashboard-tab.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.session-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.session-row__identity { display: flex; align-items: center; gap: 12px; }
.session-row__meta { color: var(--color-text-muted); font-size: 0.85rem; margin-top: 4px; }
.session-row__participants { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.participant-chip {
	display: inline-flex; align-items: center; gap: 4px;
	background: var(--color-card); border: 1px solid var(--color-border);
	border-radius: 999px; padding: 3px 10px; font-size: 0.78rem; color: var(--color-text-muted);
}
.participant-chip__revoke {
	background: none; border: none; padding: 0 0 0 2px; margin: 0; cursor: pointer;
	color: var(--color-danger); font-size: 0.95rem; line-height: 1; font-weight: 700;
}
.participant-chip__revoke:hover { color: #fff; background: var(--color-danger); border-radius: 50%; }
.participant-chip__revoke:disabled { opacity: 0.5; cursor: default; }
.session-row__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.session-row__status { font-size: 0.85rem; font-weight: 600; color: var(--color-primary-dark); }
.session-row__avatar {
	width: 44px; height: 44px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0;
}
.session-row__avatar--fallback {
	display: flex; align-items: center; justify-content: center;
	background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 700;
}

/* Admin-dashboard specialist list — compact cards (photo + name/title/price),
   deliberately small so a screenful shows many rows at a glance; this is a
   management list, not the public profile-card grid on the front-end site. */
.admin-specialist-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
}
.admin-specialist-card {
	display: flex; align-items: center; gap: 10px;
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-md); padding: 10px 12px;
	cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.admin-specialist-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.admin-specialist-card__photo {
	width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.admin-specialist-card__photo--placeholder {
	display: flex; align-items: center; justify-content: center;
	background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 700;
}
.admin-specialist-card__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.admin-specialist-card__name { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-specialist-card__meta { color: var(--color-text-muted); font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-specialist-card__status { flex-shrink: 0; font-size: 0.78rem; }

.client-notes__summary { font-size: 0.85rem; color: var(--color-text-muted); margin-top: -8px; }
.client-note { padding: 12px 14px; margin-bottom: 10px; }
.client-note__meta { font-size: 0.75rem; color: var(--color-text-muted); margin-bottom: 6px; }
.client-note__content { white-space: pre-wrap; font-size: 0.9rem; }
.client-note__edit { width: 100%; margin-top: 6px; }
.client-note__actions { display: flex; gap: 14px; margin-top: 8px; font-size: 0.8rem; }
.client-note__delete { color: var(--color-danger); }
.client-note__ai-tag { color: var(--color-primary-dark); font-weight: 600; }

.ai-draft-request { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 6px 0 4px; }
.ai-draft { padding: 12px 14px; margin-bottom: 10px; border: 1px dashed var(--color-primary); background: var(--color-primary-light); }
.ai-draft__badge { font-size: 0.78rem; font-weight: 700; color: var(--color-primary-dark); margin-bottom: 8px; }
.ai-draft textarea { width: 100%; }

/* ---------- Session waiting room ---------- */
.waiting-room { max-width: 420px; }
.waiting-room__specialist { text-align: center; color: var(--color-text-muted); font-size: 0.9rem; margin-top: -8px; }
.waiting-room__subtitle { font-size: 0.95rem; margin: 16px 0 10px; }
.waiting-room__checks { display: flex; flex-direction: column; gap: 8px; }
.waiting-room__check {
	display: flex; align-items: center; gap: 10px; padding: 8px 12px;
	border-radius: var(--radius-sm); background: var(--color-card); font-size: 0.88rem;
}
.waiting-room__check-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%; font-size: 0.8rem; flex-shrink: 0;
	background: var(--color-border); color: var(--color-text-muted);
}
.waiting-room__check.is-ok .waiting-room__check-icon { background: var(--color-success); color: #fff; }
.waiting-room__check.is-fail .waiting-room__check-icon { background: var(--color-danger); color: #fff; }
.waiting-room__check.is-checking .waiting-room__check-icon { background: var(--color-warning); color: #fff; }
.waiting-room__hint { font-size: 0.82rem; color: var(--color-warning); background: #fef3c7; border-radius: var(--radius-sm); padding: 8px 12px; margin-top: 10px; }
.waiting-room__actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.waiting-room__continue-audio { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--color-text-muted); cursor: pointer; }
.waiting-room__phone-note { background: var(--color-card); border-radius: var(--radius-sm); padding: 12px; font-size: 0.88rem; color: var(--color-text-muted); margin: 12px 0; }
.waiting-room [data-wr-join] { margin-top: 16px; }
.waiting-room__support { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 0.8rem; color: var(--color-text-muted); }
.waiting-room__support a { color: var(--color-primary-dark); font-weight: 600; }
.waiting-room__arrived-badge { display: inline-block; margin-top: 6px; font-size: 0.78rem; font-weight: 600; color: var(--color-success); }

/* ---------- Pre-session intake + consent form ---------- */
.intake { max-width: 680px; margin-inline: auto; }
.intake__header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.intake__specialist-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.intake__eyebrow { color: var(--color-primary-dark); font-weight: 700; font-size: 0.85rem; margin: 0; }
.intake__header h1 { margin: 2px 0 6px; font-size: 1.4rem; }
.intake__hint { color: var(--color-text-muted); font-size: 0.88rem; margin: 0; }
.intake__progress { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.intake__progress-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--color-card); overflow: hidden; }
.intake__progress-bar div { height: 100%; background: var(--color-primary); border-radius: 999px; transition: width 0.4s ease; }
.intake__progress span { font-size: 0.82rem; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; }
.intake__section {
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); padding: 20px; margin-bottom: 16px;
}
.intake__section h2 { font-size: 1.05rem; margin-bottom: 4px; }
.intake__optional { font-weight: 400; color: var(--color-text-muted); font-size: 0.82rem; }
.intake__section-note { font-size: 0.82rem; color: var(--color-text-muted); margin: 0 0 14px; }
.intake__consent { background: var(--color-card); border-radius: var(--radius-md); padding: 14px; margin-bottom: 12px; }
.intake__consent-text { font-size: 0.85rem; color: var(--color-text-muted); margin: 0 0 10px; line-height: 1.8; }
.intake__consent-check { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.intake__consent-status { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--color-success); font-weight: 600; }
.intake__signed-badge {
	margin-top: 14px; background: var(--color-primary-light); color: var(--color-primary-dark);
	border-radius: var(--radius-sm); padding: 12px 14px; font-size: 0.88rem; font-weight: 600;
}
.intake-status__badge { padding: 3px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; background: var(--color-card); color: var(--color-text-muted); }
.intake-status__badge--is-pending { background: var(--color-card); color: var(--color-text-muted); }
.intake-status__badge--is-attention { background: #fef3c7; color: var(--color-warning); }
.intake-status__badge--is-done { background: var(--color-primary-light); color: var(--color-primary-dark); }
.intake-status__badge--is-critical { background: #fef2f2; color: var(--color-danger); }

/* ---------- "مسیر پیشرفت من" client progress dashboard ---------- */
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 780px) { .metric-grid { grid-template-columns: 1fr; } }

/* ---------- Specialist weekly schedule editor ---------- */
.sched-presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px; }
.sched-presets__label { font-size: 0.85rem; color: var(--color-text-muted); margin-inline-end: 4px; }
.sched-days { display: flex; flex-direction: column; gap: 12px; }
.sched-day {
	padding: 16px 18px; margin-bottom: 0; border-width: 1.5px; border-radius: var(--radius-md);
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.sched-day:not(.is-off) { border-color: var(--color-primary-light); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
.sched-day.is-off { background: var(--color-card); }
.sched-day.has-error { border-color: var(--color-danger); }
.sched-day__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sched-day__toggle { min-width: 118px; justify-content: center; font-weight: 700; padding: 9px 16px; font-size: 0.95rem; }
.sched-day.is-off .sched-day__toggle { opacity: 0.75; }
.sched-day__summary { flex: 1; font-size: 0.88rem; color: var(--color-primary-dark); font-weight: 600; }
.sched-day.is-off .sched-day__summary { color: var(--color-text-muted); font-weight: 500; }
.sched-day__copy {
	margin-inline-start: auto; font-size: 0.8rem; background: var(--color-card);
	border: 1px solid var(--color-border-strong); border-radius: 999px; padding: 7px 14px;
}
.sched-day__copy:hover { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary-dark); }
.sched-day.is-off .sched-day__copy { display: none; }
.sched-day__body { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--color-border); }
.sched-day.is-off .sched-day__body { display: none; }
.sched-field { display: flex; flex-direction: column; gap: 6px; }
.sched-field label { font-size: 0.78rem; color: var(--color-text-muted); font-weight: 600; }
.sched-field select {
	min-width: 132px; padding: 11px 36px 11px 16px; border: 1.5px solid var(--color-border-strong);
	border-radius: 999px; font: inherit; font-size: 0.95rem; font-weight: 700;
	color: var(--color-primary-dark); background-color: var(--color-surface);
	direction: ltr; text-align: center; cursor: pointer;
	appearance: none; -webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2300A693' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: left 14px center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sched-field select:hover { border-color: var(--color-primary); }
.sched-field select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
/* Same box as .sched-field select, minus the dropdown arrow — used where a
   plain <input type="time"> stands in for the specialist dashboard's own
   custom timeOptions() <select> (the admin quick-edit form's simpler cousin). */
.sched-field input[type="time"] {
	min-width: 132px; padding: 11px 16px; border: 1.5px solid var(--color-border-strong);
	border-radius: 999px; font: inherit; font-size: 0.95rem; font-weight: 700;
	color: var(--color-primary-dark); background-color: var(--color-surface);
	direction: ltr; text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sched-field input[type="time"]:hover { border-color: var(--color-primary); }
.sched-field input[type="time"]:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.sched-break-toggle { align-self: flex-end; }
.sched-break { display: flex; gap: 14px; flex-wrap: wrap; }
.sched-break.is-hidden { display: none; }
.sched-day__error { width: 100%; margin: 0; }
.sched-day__error:empty { display: none; }
.sched-save { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 24px; }
.sched-save__summary { font-size: 0.88rem; color: var(--color-text-muted); }
.sched-save [data-rules-status] { width: 100%; margin: 0; }
.sched-save [data-rules-status].is-ok { color: var(--color-success); }
.sched-quick-dates { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sched-block-preview { font-size: 0.88rem; color: var(--color-primary-dark); font-weight: 600; margin: 4px 0 12px; }
.sched-block-preview:empty { display: none; }
@media (max-width: 640px) {
	.sched-day__body { flex-direction: column; align-items: stretch; }
	.sched-field select { width: 100%; }
	.sched-day__copy { margin-inline-start: 0; }
}

/* ---------- Jalali date picker (assets/js/jalali-datepicker.js) ---------- */
.jdp { position: relative; }
.jdp::before { content: '📅'; position: absolute; inset-inline-end: 12px; top: 11px; font-size: 0.9rem; pointer-events: none; opacity: 0.7; }
.jdp__input { width: 100%; cursor: pointer; padding-inline-end: 38px; background: var(--color-surface); }
.jdp__pop {
	position: absolute; z-index: 30; top: calc(100% + 6px); inset-inline-start: 0; width: 328px; max-width: 92vw;
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
	box-shadow: 0 12px 32px -12px rgba(15, 23, 43, 0.28); padding: 12px;
}
.jdp__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.jdp__title { font-weight: 700; font-size: 0.95rem; }
.jdp__nav { background: var(--color-card); border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 1.2rem; line-height: 1; color: var(--color-text); }
.jdp__nav:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.jdp__weekdays, .jdp__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.jdp__weekdays span { text-align: center; font-size: 0.72rem; color: var(--color-text-muted); padding: 4px 0; }
/* Same card-chip look as .date-chip/.time-slot elsewhere on the site
   (border + radius-md + teal fill on select) instead of the plain flat
   squares this popup used before — one visual language for "pick a date"
   everywhere, whether it's a 14-day carousel or a full month grid. */
.jdp__cell {
	height: 38px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-card);
	cursor: pointer;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--color-text);
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.jdp__cell:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-primary-light); }
.jdp__cell.is-friday { color: var(--color-weekend); }
.jdp__cell.is-today { border-color: var(--color-primary); box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.jdp__cell.is-selected { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.jdp__cell.is-selected:hover:not(:disabled) { background: var(--color-primary); }
.jdp__cell:disabled { opacity: 0.3; cursor: not-allowed; }
.jdp__cell--empty { border: none; background: transparent; pointer-events: none; }
.jdp__foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-border); }
.jdp__link { background: none; border: none; color: var(--color-primary-dark); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 4px 6px; }

.invoice-row .session-row__actions { gap: 14px; }
.invoice-status { font-size: 0.8rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.invoice-status--success { background: #ecfdf5; color: var(--color-success); }
.invoice-status--pending { background: #fffbeb; color: #b45309; }
.invoice-status--failed, .invoice-status--refunded { background: #fef2f2; color: var(--color-danger); }

.invoice-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.invoice-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 43, 0.5); }
.invoice-modal__card { position: relative; background: var(--color-surface); border-radius: var(--radius-md); padding: 28px; max-width: 480px; width: 100%; max-height: 85vh; overflow-y: auto; }
.invoice-modal--wide .invoice-modal__card { max-width: 900px; }
.invoice-modal__close { position: absolute; inset-inline-end: 16px; top: 14px; background: none; border: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--color-text-muted); }

/* ---------- Specialist financial dashboard ---------- */
.fin-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.fin-header h1 { margin-bottom: 4px; }
.fin-header__desc { color: var(--color-text-muted); font-size: 0.9rem; max-width: 560px; margin: 0; }
.fin-header__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fin-card__hint { color: var(--color-text-muted); font-size: 0.85rem; margin-top: -6px; }
/* The -6px above assumes a preceding field/heading with its own bottom
   margin to trim; a .btn has none, so that same offset instead crowds a
   hint sitting right under a button (e.g. "اسکن موارد جدید" in the
   clinical-audit panel) — give that pairing normal breathing room instead. */
.btn + .fin-card__hint { margin-top: 8px; }

.fin-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.fin-table th, .fin-table td { padding: 8px 6px; text-align: start; }
.fin-table thead th { color: var(--color-text-muted); font-size: 0.82rem; font-weight: 600; border-bottom: 1px solid var(--color-border); }
.fin-table tbody tr + tr td { border-top: 1px solid var(--color-border); }
/* Same look as every .mentayar-field input elsewhere — these table-cell
   inputs skipped that wrapper (a column header already labels them), but
   still need the same border/radius/focus treatment, not the browser
   default. */
.fin-table input[type="text"],
.fin-table input[type="email"],
.fin-table input[type="number"] {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: 0.9rem;
	color: var(--color-text);
	background-color: var(--color-surface);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.fin-table input[type="text"]:focus,
.fin-table input[type="email"]:focus,
.fin-table input[type="number"]:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}
.fin-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; }
/* On narrow screens, width:100% forces every cell (and the text inputs
   inside them) to compress until the value is clipped — the table already
   sits in an overflow-x:auto wrapper for exactly this case, but that only
   works if the table is allowed to be wider than the viewport instead of
   being squeezed to fit it. */
@media (max-width: 640px) {
	.fin-table { width: auto; min-width: 480px; }
}

.fin-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }
@media (max-width: 900px) { .fin-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .fin-kpis { grid-template-columns: 1fr; } }
.fin-kpi { position: relative; overflow: hidden; }
.fin-kpi__label { color: var(--color-text-muted); font-size: 0.82rem; display: block; margin-bottom: 8px; }
.fin-kpi__value { font-size: 1.5rem; font-weight: 800; color: var(--color-text); }
.fin-kpi__value--primary { color: var(--color-primary-dark); }
.fin-kpi__value--accent { color: var(--color-accent); }
.fin-kpi__unit { font-size: 0.8rem; color: var(--color-text-muted); margin-inline-start: 4px; }
.fin-kpi__sub { display: block; font-size: 0.78rem; color: var(--color-text-muted); margin-top: 6px; }

/* ---------- Overview calendar (پیشخوان و داشبورد کل, right under the KPI row) ---------- */
.ov-cal { margin-bottom: 20px; }
.ov-cal__toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.ov-cal__nav { display: flex; gap: 6px; }
.ov-cal__title { margin: 0; font-size: 1.05rem; }
.ov-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--color-border); border-inline-start: none; border-block-start: none; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.ov-cal__head { padding: 8px; text-align: center; font-weight: 600; font-size: 0.8rem; background: var(--color-card); border-inline-start: 1px solid var(--color-border); border-block-end: 1px solid var(--color-border); }
.ov-cal__cell { min-height: 90px; padding: 6px; border-inline-start: 1px solid var(--color-border); border-block-end: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 3px; }
.ov-cal__cell.is-today { background: var(--color-primary-light); }
.ov-cal__daynum { font-weight: 600; font-size: 0.8rem; }
.ov-cal__event { display: block; width: 100%; text-align: start; border: none; border-radius: 4px; padding: 2px 6px; font-size: 0.7rem; line-height: 1.3; cursor: pointer; }
.ov-cal__more { align-self: flex-start; background: none; border: none; color: var(--color-primary-dark); font-size: 0.72rem; cursor: pointer; padding: 0; }
@media (max-width: 640px) { .ov-cal__grid { grid-template-columns: repeat(7, minmax(36px, 1fr)); font-size: 0.7rem; } .ov-cal__cell { min-height: 60px; } }

.fin-tier-card { display: flex; flex-direction: column; gap: 14px; }
.fin-tier-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.fin-tier-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--color-primary-light); color: var(--color-primary-dark); margin-inline-start: 8px; }
.fin-tier-card__rate { text-align: end; }
.fin-tier-card__rate strong { display: block; font-size: 1.4rem; color: var(--color-primary-dark); }
.fin-tier-card__rate span { font-size: 0.78rem; color: var(--color-text-muted); }
.fin-progress { height: 10px; border-radius: 999px; background: var(--color-card); overflow: hidden; }
.fin-progress__bar { height: 100%; background: var(--color-primary); border-radius: 999px; transition: width 0.4s ease; }
.fin-progress__label { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 4px; }
.fin-ladder { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; font-size: 0.8rem; color: var(--color-text-muted); }
.fin-ladder__step strong { display: block; }
.fin-ladder__step.is-current { color: var(--color-primary-dark); font-weight: 700; }
.fin-quality { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 640px) { .fin-quality { grid-template-columns: 1fr; } }

/* ==================== مسیر پیشرفت من ==================== */
.progress-hero {
	position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 22px 24px;
	background: radial-gradient(70% 140% at 100% 0%, rgba(255, 255, 255, 0.6), transparent 60%), linear-gradient(135deg, var(--color-primary-light) 0%, #fff 75%);
	border: 1px solid var(--color-border); display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 16px;
}
.progress-hero__score { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; padding-inline-end: 24px; border-inline-end: 1px solid var(--color-border); }
.progress-hero__score-value { font-size: 2.6rem; font-weight: 800; color: var(--color-primary-dark); line-height: 1; }
.progress-hero__score-unit { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 4px; white-space: nowrap; }
.progress-hero__body { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.progress-hero__insight { margin: 0; color: var(--color-text); font-size: 0.92rem; line-height: 1.6; }
.progress-hero__delta { font-size: 0.82rem; color: var(--color-text-muted); }
@media (max-width: 560px) {
	.progress-hero { flex-direction: column; align-items: stretch; text-align: center; }
	.progress-hero__score { border-inline-end: none; border-block-end: 1px solid var(--color-border); padding-inline-end: 0; padding-bottom: 14px; }
}

.progress-kpis { display: flex; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); overflow: hidden; margin-bottom: 16px; }
.progress-kpi { flex: 1; text-align: center; padding: 14px 8px; border-inline-start: 1px solid var(--color-border); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.progress-kpi:first-child { border-inline-start: none; }
.progress-kpi__icon { width: 24px; height: 24px; color: var(--color-primary); }
.progress-kpi__icon svg { width: 100%; height: 100%; }
.progress-kpi__value { font-size: 1.25rem; font-weight: 800; color: var(--color-text); }
.progress-kpi__label { font-size: 0.74rem; color: var(--color-text-muted); }
@media (max-width: 480px) { .progress-kpis { flex-wrap: wrap; } .progress-kpi { flex: 1 1 50%; border-block-end: 1px solid var(--color-border); } .progress-kpi:nth-child(2n) { border-inline-start: 1px solid var(--color-border); } }

.progress-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 780px) { .progress-metrics { grid-template-columns: 1fr; } }
.progress-metric { border-inline-start: 4px solid var(--color-border-strong); opacity: 0.9; }
.progress-metric--up { border-inline-start-color: var(--color-success); }
.progress-metric--down { border-inline-start-color: var(--color-danger); }
.progress-metric__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.progress-metric__name { font-weight: 700; font-size: 0.92rem; }
.progress-metric__start { font-size: 0.76rem; color: var(--color-text-muted); white-space: nowrap; }

/* Vertical roadmap for treatment goals — a connecting line + waypoint dot per
   goal fits "مسیر پیشرفت" (progress PATH) better than a plain stacked list. */
.progress-timeline { position: relative; padding-inline-start: 26px; }
.progress-timeline::before { content: ""; position: absolute; inset-inline-start: 9px; top: 4px; bottom: 4px; width: 2px; background: var(--color-border); }
.progress-timeline__item { position: relative; margin-bottom: 14px; }
.progress-timeline__item:last-child { margin-bottom: 0; }
.progress-timeline__dot {
	position: absolute; inset-inline-start: -26px; top: 20px; width: 18px; height: 18px; border-radius: 50%;
	background: var(--color-surface); border: 3px solid var(--color-border-strong); opacity: 0.6;
	display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; color: #fff;
}
.progress-timeline__item--active .progress-timeline__dot { border-color: var(--color-primary); opacity: 1; }
.progress-timeline__item--paused .progress-timeline__dot { border-color: var(--color-warning); opacity: 1; }
.progress-timeline__item--achieved .progress-timeline__dot { background: var(--color-primary); border-color: var(--color-primary); opacity: 1; }
.progress-timeline__item--achieved .progress-timeline__dot::after { content: "✓"; }

/* ==================== کیف پول ==================== */
.wallet-hero {
	position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 24px 26px; color: #fff; margin-bottom: 16px;
	background: radial-gradient(60% 120% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 60%), linear-gradient(135deg, var(--color-primary-dark) 0%, #0a8f7f 100%);
}
.wallet-hero::after { content: ""; position: absolute; inset-inline-end: -60px; bottom: -80px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.wallet-hero__label { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; opacity: 0.85; position: relative; z-index: 1; }
.wallet-hero__label svg { width: 16px; height: 16px; }
.wallet-hero__balance { font-size: 2.4rem; font-weight: 800; margin: 6px 0 18px; position: relative; z-index: 1; }
.wallet-hero__stats { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }
.wallet-hero__stat { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius-sm); padding: 8px 14px; }
.wallet-hero__stat strong { display: block; font-size: 1rem; }
.wallet-hero__stat span { display: block; font-size: 0.72rem; opacity: 0.85; margin-top: 2px; }
.wallet-hero__gift { margin-top: 12px; font-size: 0.8rem; opacity: 0.92; position: relative; z-index: 1; }

.wallet-method-toggle { display: flex; border: 1px solid var(--color-border); border-radius: 999px; padding: 3px; width: fit-content; margin-bottom: 14px; }
.wallet-method-toggle label { position: relative; padding: 6px 18px; border-radius: 999px; font-size: 0.85rem; cursor: pointer; color: var(--color-text-muted); }
.wallet-method-toggle label:has(input:checked) { background: var(--color-primary); color: #fff; font-weight: 600; }
.wallet-method-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }

.wallet-history { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.wallet-history__row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.wallet-history__icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700; }
.wallet-history__icon--credit { background: #ecfdf5; color: var(--color-success); }
.wallet-history__icon--debit { background: #fef2f2; color: var(--color-danger); }
.wallet-history__body { flex: 1; min-width: 0; }
.wallet-history__amount { font-weight: 800; white-space: nowrap; }
.wallet-history__amount--credit { color: var(--color-success); }
.wallet-history__amount--debit { color: var(--color-danger); }
.fin-quality__item { display: flex; align-items: center; gap: 8px; background: var(--color-card); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 0.8rem; }
.fin-quality__item strong { display: block; font-size: 0.88rem; }
.fin-trust-note { font-size: 0.82rem; color: var(--color-text-muted); background: var(--color-card); border-radius: var(--radius-sm); padding: 10px 12px; }

.fin-bank-row { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 780px) { .fin-bank-row { grid-template-columns: 1fr; } }
.fin-cycle { background: var(--color-card); border-radius: var(--radius-md); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.fin-cycle h4 { margin: 0 0 4px; font-size: 0.92rem; }
.fin-cycle__option { display: flex; align-items: flex-start; gap: 8px; background: var(--color-surface); border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer; }
.fin-cycle__option input { margin-top: 3px; }
.fin-cycle__option small { display: block; color: var(--color-text-muted); font-size: 0.75rem; }
.fin-cycle__min { font-size: 0.78rem; color: var(--color-text-muted); margin: 4px 0 0; }

.fin-ledger__toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fin-ledger__filters { display: flex; gap: 8px; flex-wrap: wrap; }
.fin-ledger__filters select, .fin-ledger__filters input {
	padding: 7px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: inherit; font-size: 0.85rem;
}
.fin-ledger__table-wrap { overflow-x: auto; }
.fin-ledger__table { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 0.85rem; }
.fin-ledger__table th { text-align: start; color: var(--color-text-muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--color-border); font-size: 0.78rem; }
.fin-ledger__table td { padding: 10px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.fin-ledger__table tr:last-child td { border-bottom: none; }
.fin-ledger__desc strong { display: block; }
.fin-ledger__desc small { display: block; color: var(--color-text-muted); font-size: 0.76rem; }
.fin-ledger__net { font-weight: 700; color: var(--color-primary-dark); }
.fin-ledger__net--out { color: var(--color-text); }
.fin-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 600; }
.fin-status--ready { background: var(--color-primary-light); color: var(--color-primary-dark); }
.fin-status--done { background: var(--color-card); color: var(--color-text-muted); }
.fin-status--pending { background: #fffbeb; color: #b45309; }
.fin-status--rejected { background: #fef2f2; color: var(--color-danger); }
.fin-ledger__empty { text-align: center; color: var(--color-text-muted); padding: 20px 0; }

.fin-modal__available { background: var(--color-card); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 0.88rem; }
.fin-modal__irr-preview { font-size: 0.85rem; color: var(--color-text-muted); background: var(--color-card); border-radius: var(--radius-sm); padding: 8px 12px; }

.invoice-detail { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 16px 0; font-size: 0.9rem; }
.invoice-detail dt { color: var(--color-text-muted); }
.invoice-detail dd { margin: 0; font-weight: 600; }

.invoice-summary { border-top: 1px solid var(--color-border); padding-top: 12px; }
.invoice-summary__row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 0.9rem; }
.invoice-summary__row--discount { color: var(--color-success); }
.invoice-summary__row--total { font-weight: 700; font-size: 1.05rem; border-top: 1px dashed var(--color-border); margin-top: 6px; padding-top: 8px; }

/* Text block + action buttons side by side — flex:1 on the text so the
   button sits right after it instead of pinned to the row's far edge with a
   stretched gap (space-between's behaviour on a wide dashboard column). */
.test-card { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.test-card > div:first-child { flex: 1 1 320px; min-width: 0; }
.test-card .session-row__actions { flex: 0 0 auto; }
.test-question { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.test-question:last-of-type { border-bottom: none; }
.test-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.test-option { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.85rem; cursor: pointer; }
.test-option:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark); }
.test-alert { color: var(--color-danger); font-weight: 600; background: #fef2f2; padding: 10px 14px; border-radius: var(--radius-md); }

.table-scroll { overflow-x: auto; margin-bottom: 16px; }
.mentayar-availability-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.mentayar-availability-table th, .mentayar-availability-table td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--color-border); font-size: 0.85rem; }
.mentayar-availability-table th:first-child, .mentayar-availability-table td:first-child { text-align: start; }
.mentayar-availability-table input[type="time"] { padding: 4px; border: 1px solid var(--color-border); border-radius: 6px; font-family: inherit; }

/* ---------- Articles ---------- */
.article-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.article-card__thumb { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--color-primary-light); overflow: hidden; }
.article-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-card__format { position: absolute; top: 8px; inset-inline-end: 8px; background: rgba(255,255,255,0.9); border-radius: 50%; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; }
.article-card__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.article-card__category { display: inline-block; font-size: 0.75rem; color: var(--color-primary-dark); background: var(--color-primary-light); padding: 2px 10px; border-radius: 999px; width: fit-content; text-decoration: none; }
.article-card__title { margin: 4px 0; font-size: 1.05rem; }
.article-card__title a { color: var(--color-text); }
.article-card__excerpt { font-size: 0.88rem; color: var(--color-text-muted); margin: 0; }
.article-card__meta { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--color-text-muted); margin-top: 8px; }

.article-single { max-width: 760px; margin-inline: auto; }
.article-single__meta { display: flex; gap: 14px; color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 20px; }
.article-single__thumb { margin-bottom: 24px; border-radius: var(--radius-md); overflow: hidden; }
.article-single__media { margin-bottom: 24px; }
.article-single__share { display: flex; align-items: center; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.article-single__share a { color: var(--color-primary-dark); font-weight: 600; }

/* ---------- Store product single (/store/{slug}/) ---------- */
.product-single { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-2xl); align-items: start; }
@media (max-width: 900px) { .product-single { grid-template-columns: 1fr; } }
.product-single__badge {
	display: inline-block; font-size: 0.85rem; font-weight: 700; color: var(--color-primary-dark);
	background: var(--color-primary-light); padding: 5px 14px; border-radius: 999px; margin-bottom: var(--space-md);
}
.product-single__title { margin: 0 0 var(--space-sm); }
.product-single__lead { color: var(--color-text-muted); font-size: 1.05rem; margin-bottom: var(--space-lg); }
.product-single__thumb { margin-bottom: var(--space-xl); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.product-single__thumb img { display: block; width: 100%; }

.product-purchase {
	position: sticky; top: 90px;
	background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-xl);
}
.product-purchase__price { font-size: 1.8rem; font-weight: 800; color: var(--color-text); margin-bottom: var(--space-lg); }
.product-purchase__owned {
	display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--color-success);
	background: rgba(16, 185, 129, 0.1); padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: var(--space-md);
}

/* ---------- Store archive (/store/) ---------- */
.store-hero { max-width: 640px; margin-bottom: var(--space-xl); }
.store-hero h1 { margin: 0 0 var(--space-sm); }
.store-hero__lead { color: var(--color-text-muted); font-size: 1.05rem; }
.store-filters { margin-bottom: var(--space-xl); }

/* Same hover-lift every other card component on the site already has. */
.article-card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* ---------- Guided matching quiz (doc §1) ---------- */
.matching-quiz { max-width: 720px; margin-inline: auto; }
.matching-quiz__intro { text-align: center; padding: 40px 20px; }
.matching-quiz__intro h1 { margin-bottom: 12px; }
.matching-quiz__hint { color: var(--color-text-muted); margin-bottom: 20px; }
.matching-quiz__progress-bar { height: 8px; border-radius: 999px; background: var(--color-card); overflow: hidden; margin-bottom: 28px; }
.matching-quiz__progress-bar div { height: 100%; width: 20%; background: var(--color-primary); border-radius: 999px; transition: width 0.4s ease; }
.matching-quiz__question { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; }
.matching-quiz__question h2 { font-size: 1.15rem; margin-bottom: 6px; }
.matching-quiz__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; }
.matching-quiz__nav .btn--primary { margin-inline-start: auto; }
.matching-quiz__error { color: var(--color-danger, #d33); margin-top: 10px; }
.matching-quiz__results h2 { margin-bottom: 16px; }
.matching-quiz__reasons { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.matching-quiz__reasons li { font-size: 0.78rem; color: var(--color-primary-dark); }
.matching-quiz__reasons li::before { content: '✓ '; }
.matching-quiz__empty { text-align: center; padding: 30px; }
.matching-quiz__results [data-quiz-restart] { margin-top: 24px; }

/* ---------- Secure messaging (doc §13) ---------- */
.dashboard-nav__badge {
	display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px;
	margin-inline-start: 6px; padding: 0 4px; border-radius: 999px; background: var(--color-danger); color: #fff;
	font-size: 0.65rem; font-weight: 700;
}
.messages-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; min-height: 420px; align-items: stretch; }
.messages-layout__list { display: flex; flex-direction: column; gap: 4px; border-inline-end: 1px solid var(--color-border); padding-inline-end: 12px; overflow-y: auto; max-height: 560px; }
.messages-list__item {
	display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; background: none; border: none;
	cursor: pointer; padding: 10px; border-radius: var(--radius-sm); font-family: inherit;
}
.messages-list__item:hover { background: var(--color-card); }
.messages-list__item.is-active { background: var(--color-primary-light); }
.messages-list__avatar, .messages-list__avatar-fallback { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; background: var(--color-primary-light); overflow: hidden; }
.messages-list__avatar img { width: 100%; height: 100%; object-fit: cover; }
.messages-list__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.messages-list__info strong { font-size: 0.88rem; }
.messages-list__preview { font-size: 0.78rem; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.messages-list__unread {
	flex-shrink: 0; min-width: 18px; height: 18px; border-radius: 999px; background: var(--color-primary); color: #fff;
	font-size: 0.7rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.messages-layout__thread { display: flex; flex-direction: column; min-height: 0; }
.messages-thread__header { padding-bottom: 10px; border-bottom: 1px solid var(--color-border); margin-bottom: 10px; }
.messages-thread__messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; max-height: 440px; padding: 4px; }
.message-bubble { max-width: 75%; align-self: flex-start; background: var(--color-card); border-radius: var(--radius-md); padding: 8px 12px; }
.message-bubble p { margin: 0; font-size: 0.9rem; white-space: pre-wrap; word-break: break-word; }
.message-bubble.is-mine { align-self: flex-end; background: var(--color-primary-light); }
.message-bubble__time { display: block; font-size: 0.68rem; color: var(--color-text-muted); margin-top: 4px; }
.messages-thread__composer { display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.messages-thread__composer textarea { flex: 1; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-family: inherit; resize: none; }
.messages-layout__empty { grid-column: 1 / -1; text-align: center; color: var(--color-text-muted); padding: 40px; }

/* ---------- Natural-language directory search (doc §20) ---------- */
.nl-search { grid-area: nlsearch; }
.nl-search__toggle {
	display: flex; align-items: center; gap: 8px; width: 100%; text-align: start;
	background: var(--color-primary-light); color: var(--color-primary-dark); border: none;
	border-radius: var(--radius-md); padding: 12px 16px; font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer;
}
.nl-search__box {
	margin-top: 10px; padding: 14px; background: var(--color-surface); border: 1px solid var(--color-border);
	border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 8px;
}
.nl-search__box textarea { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-family: inherit; resize: vertical; }
.nl-search__error { color: var(--color-danger, #d33); margin: 0; }
.nl-search__interpretation { font-size: 0.8rem; color: var(--color-text-muted); margin: 0; }

/* ---------- Utility ---------- */
[aria-busy="true"] { opacity: 0.6; }

/* ==========================================================================
   Homepage v2 (template-parts/home-v2). Self-contained block: the v1 rules
   above are untouched so MENTAYAR_HOME_VERSION=1 still renders unchanged.
   ========================================================================== */

/* Extra button flavours used only here */
.btn--soft { background: var(--color-primary-light); color: var(--color-primary-dark); }
.btn--soft:hover { background: #d3efeb; color: var(--color-primary-dark); text-decoration: none; }
.btn--light { background: #fff; color: var(--color-primary-dark); }
.btn--light:hover { background: var(--color-primary-light); color: var(--color-primary-dark); text-decoration: none; }
.btn--ghost-light { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.btn--ghost-light:hover { background: rgba(255, 255, 255, 0.22); color: #fff; text-decoration: none; }

/* Centered section heading (eyebrow + title + optional lead) */
.home-section-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-2xl); }
.home-section-head__title { font-size: 1.75rem; margin-bottom: var(--space-sm); }
.home-section-head__lead { color: var(--color-text-muted); margin: 0; }

/* ---------- Hero ---------- */
.home-hero {
	position: relative; overflow: hidden;
	background:
		radial-gradient(60% 70% at 85% 10%, rgba(0, 166, 147, 0.16), transparent 70%),
		radial-gradient(45% 60% at 5% 90%, rgba(0, 91, 80, 0.10), transparent 70%),
		linear-gradient(180deg, #f2faf8 0%, var(--color-bg) 100%);
	padding-block: 72px 112px;
}
.home-hero::before {
	/* Dotted texture, echoing the brand banner's dot clusters. */
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(rgba(0, 91, 80, 0.10) 1.2px, transparent 1.3px);
	background-size: 22px 22px;
	mask-image: radial-gradient(70% 80% at 100% 0%, #000 0%, transparent 65%);
	-webkit-mask-image: radial-gradient(70% 80% at 100% 0%, #000 0%, transparent 65%);
}
.home-hero__inner {
	position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr;
	gap: var(--space-4xl); align-items: center;
}
.home-hero__inner--single { grid-template-columns: 1fr; text-align: center; }
.home-hero__inner--single .home-hero__actions,
.home-hero__inner--single .home-hero__quick,
.home-hero__inner--single .home-hero__trust { justify-content: center; }
.home-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	background: var(--color-surface); border: 1px solid var(--color-primary-light-2);
	color: var(--color-primary-dark); font-size: 0.82rem; font-weight: 700;
	padding: 6px 14px 6px 12px; border-radius: 999px; box-shadow: var(--shadow-sm);
	margin-bottom: var(--space-lg);
}
.home-hero__eyebrow-dot {
	width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary);
	box-shadow: 0 0 0 4px rgba(0, 166, 147, 0.18);
}
.home-hero__title { font-size: 46px; font-weight: 800; line-height: 1.3; margin: 0 0 var(--space-lg); letter-spacing: -0.01em; }
.home-hero__accent {
	color: var(--color-primary-dark); position: relative; display: inline-block; white-space: nowrap;
}
.home-hero__accent::after {
	/* Hand-drawn style underline */
	content: ""; position: absolute; inset-inline: -2px; bottom: 4px; height: 12px; z-index: -1;
	background: linear-gradient(90deg, rgba(0, 166, 147, 0.32), rgba(0, 166, 147, 0.14));
	border-radius: 6px;
}
.home-hero__lead { color: var(--color-text-muted); font-size: 1.08rem; max-width: 560px; margin: 0 0 var(--space-xl); }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--space-lg); }
.home-hero__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.home-hero__quick-label { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 600; margin-inline-end: 2px; }
.home-hero__quick .pill { font-size: 0.82rem; padding: 5px 14px; background: var(--color-surface); }
.home-hero__quick .pill:hover { background: var(--color-primary); color: #fff; text-decoration: none; }
.home-hero__trust {
	list-style: none; margin: var(--space-xl) 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px 22px;
	font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted);
}
.home-hero__trust li { display: inline-flex; align-items: center; gap: 6px; }
.home-hero__trust svg { color: var(--color-primary); flex-shrink: 0; }

/* Spotlight card + floating chips */
.home-hero__visual { position: relative; display: flex; justify-content: center; padding: 28px 20px 52px 28px; }
.home-hero__visual::before {
	/* Soft blob behind the card */
	content: ""; position: absolute; inset: 6% -2% 2% 4%; z-index: 0;
	background: linear-gradient(150deg, rgba(0, 166, 147, 0.28), rgba(0, 91, 80, 0.10));
	border-radius: 46% 54% 52% 48% / 44% 46% 54% 56%;
}
.home-spotlight {
	position: relative; z-index: 1; display: flex; flex-direction: column;
	width: 100%; max-width: 340px; background: var(--color-surface);
	border-radius: 20px; overflow: hidden; color: var(--color-text);
	box-shadow: 0 24px 48px -16px rgba(15, 23, 43, 0.22), 0 0 0 1px rgba(15, 23, 43, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.home-spotlight:hover { text-decoration: none; transform: translateY(-4px); box-shadow: 0 30px 56px -16px rgba(15, 23, 43, 0.28), 0 0 0 1px rgba(15, 23, 43, 0.04); }
/* Cover: a teal panel with a cluster of overlapping avatars — the whole team,
   not one featured person. */
.home-spotlight__cover {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	aspect-ratio: 5 / 3.6; padding: 24px;
	background:
		radial-gradient(70% 90% at 20% 0%, rgba(255, 255, 255, 0.35), transparent 60%),
		radial-gradient(60% 70% at 100% 100%, rgba(0, 91, 80, 0.35), transparent 65%),
		linear-gradient(150deg, #cdeee8, #8fd8cc);
}
.home-spotlight__cover::before {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background-image: radial-gradient(rgba(0, 91, 80, 0.14) 1.2px, transparent 1.3px);
	background-size: 16px 16px; opacity: 0.7;
}
.home-team { position: relative; display: flex; align-items: center; justify-content: center; }
.home-team__avatar {
	width: 68px; height: 68px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border: 3px solid #fff; box-shadow: 0 8px 18px -8px rgba(0, 91, 80, 0.5);
	background: var(--color-primary-light); color: var(--color-primary-dark);
	font-weight: 800; font-size: 1.35rem;
	margin-inline-start: -16px;
}
.home-team__avatar:first-child { margin-inline-start: 0; }
.home-team__avatar img { width: 100%; height: 100%; object-fit: cover; }
.home-team__avatar--0 { background: #e5f6f4; }
.home-team__avatar--1 { background: #bfe9e2; }
.home-team__avatar--2 { background: #fdf3e0; color: var(--color-rating-dark); }
.home-team__avatar--3 { background: #e2e8f0; color: #334155; }
.home-team__avatar--more { background: var(--color-primary-dark); color: #fff; font-size: 0.95rem; letter-spacing: 0.02em; }
.home-team__caption { position: relative; font-size: 0.85rem; font-weight: 700; color: var(--color-primary-dark); }
.home-spotlight__hint { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); }
.home-spotlight__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.home-spotlight__name { font-weight: 700; font-size: 1.05rem; }
.home-spotlight__title { color: var(--color-text-muted); font-size: 0.88rem; }
/* Areas: one quiet line — overlapping icon discs (echoing the avatar cluster)
   plus a count. Deliberately not pills, so nothing here reads as clickable. */
.home-spotlight__areas { display: flex; align-items: center; gap: 10px; margin-top: 4px; white-space: nowrap; }
.home-area-stack { display: inline-flex; }
.home-area-stack__item {
	width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 91, 80, 0.15);
	color: var(--color-primary-dark); margin-inline-start: -8px;
}
.home-area-stack__item:first-child { margin-inline-start: 0; }
.home-area-stack__item--0 { background: #e5f6f4; }
.home-area-stack__item--1 { background: #fdf3e0; color: var(--color-rating-dark); }
.home-area-stack__item--2 { background: #e2e8f0; color: #334155; }
.home-spotlight__areas-text { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); }
.home-spotlight__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.home-spotlight__price { font-weight: 700; color: var(--color-primary-dark); font-size: 1.05rem; }
.home-hero__chip {
	position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
	background: var(--color-surface); border-radius: 14px; padding: 9px 14px;
	font-size: 0.82rem; color: var(--color-text); white-space: nowrap;
	box-shadow: 0 12px 28px -10px rgba(15, 23, 43, 0.25), 0 0 0 1px rgba(15, 23, 43, 0.04);
	animation: home-float 6s ease-in-out infinite;
}
.home-hero__chip strong { font-weight: 800; color: var(--color-primary-dark); }
.home-hero__chip-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px; border-radius: 9px;
	background: var(--color-primary-light); color: var(--color-primary-dark);
}
.home-hero__chip-icon--star { background: #fdf3e0; color: var(--color-rating-dark); font-size: 0.95rem; }
/* Chips hug the card's edges over its photo/corners only, never over the
   body text (RTL: inline-start = right, where the name/price sit). */
.home-hero__chip--1 { top: 8%; inset-inline-end: 0; }
.home-hero__chip--2 { top: 5%; inset-inline-start: -6px; animation-delay: -2s; }
.home-hero__chip--3 { bottom: 0; inset-inline-end: 10%; animation-delay: -4s; }
@keyframes home-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) { .home-hero__chip { animation: none; } }

/* ---------- Stats strip (overlaps the hero) ---------- */
.home-stats { margin-top: -56px; position: relative; z-index: 2; }
.home-stats__list {
	list-style: none; margin: 0; padding: 8px;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
	background: var(--color-surface); border-radius: 20px;
	box-shadow: 0 20px 40px -18px rgba(15, 23, 43, 0.22), 0 0 0 1px rgba(15, 23, 43, 0.04);
}
.home-stats__item {
	display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px;
	align-items: center; padding: 16px 18px; border-radius: 14px;
}
.home-stats__item + .home-stats__item { position: relative; }
.home-stats__item + .home-stats__item::before {
	content: ""; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%; width: 1px; background: var(--color-border);
}
.home-stats__icon {
	grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 14px;
	background: var(--color-primary-light); color: var(--color-primary-dark);
}
.home-stats__value { font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: var(--color-text); }
.home-stats__value small { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); }
.home-stats__label { font-size: 0.82rem; color: var(--color-text-muted); }

/* ---------- Areas ---------- */
.home-areas { padding-top: 72px; }
.home-area-card { position: relative; border: 1px solid var(--color-border); box-shadow: none; }
.home-area-card:hover { border-color: rgba(0, 166, 147, 0.35); box-shadow: 0 16px 32px -16px rgba(0, 91, 80, 0.25); }
.home-area-card .service-card__icon { transition: background 0.2s ease, color 0.2s ease; }
.home-area-card:hover .service-card__icon { background: var(--color-primary); color: #fff; }
.home-area-card__arrow {
	/* Opposite corner from the icon (icon sits at inline-start = right in RTL). */
	position: absolute; top: var(--space-xl); inset-inline-end: var(--space-xl);
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 50%;
	background: var(--color-primary-light); color: var(--color-primary-dark);
	opacity: 0; transform: translateX(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.home-area-card:hover .home-area-card__arrow { opacity: 1; transform: translateX(0); }

/* ---------- Steps (timeline) ---------- */
.home-steps { background: var(--color-card); }
.home-steps__list {
	list-style: none; margin: 0; padding: 0; counter-reset: none;
	display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg);
}
.home-steps__item { position: relative; text-align: center; padding: 0 var(--space-sm); }
.home-steps__item:not(:last-child)::before {
	/* Dashed connector to the next step (runs toward the inline-end side in RTL) */
	content: ""; position: absolute; top: 34px; inset-inline-start: calc(50% + 40px); inset-inline-end: calc(-50% + 40px);
	border-top: 2px dashed rgba(0, 166, 147, 0.45);
}
.home-steps__icon {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: 68px; height: 68px; border-radius: 22px; margin-bottom: var(--space-md);
	background: var(--color-surface); color: var(--color-primary-dark);
	box-shadow: 0 12px 24px -12px rgba(0, 91, 80, 0.35), 0 0 0 1px rgba(15, 23, 43, 0.05);
}
.home-steps__num {
	position: absolute; top: -8px; inset-inline-end: -8px;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--color-primary); color: #fff; font-size: 0.8rem; font-weight: 800;
	display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--color-card);
}
.home-steps__heading { display: block; margin-bottom: var(--space-xs); }
.home-steps__text { display: block; color: var(--color-text-muted); font-size: 0.88rem; }

/* ---------- Testimonials ---------- */
.home-testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.home-testimonial {
	position: relative; margin: 0; padding: var(--space-xl); display: flex; flex-direction: column; gap: 10px;
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}
.home-testimonial__quote {
	position: absolute; top: 6px; inset-inline-end: 18px; font-size: 5rem; line-height: 1;
	color: var(--color-primary-light); font-weight: 800; pointer-events: none;
}
.home-testimonial__stars { color: var(--color-rating); letter-spacing: 2px; font-size: 0.95rem; }
.home-testimonial__stars-off { color: var(--color-primary-light-2); }
.home-testimonial__text { margin: 0; font-size: 0.95rem; line-height: 1.9; flex: 1; }
.home-testimonial__meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.home-testimonial__meta strong { display: block; font-size: 0.9rem; }
.home-testimonial__meta small { display: block; color: var(--color-text-muted); font-size: 0.78rem; }
.home-testimonial__avatar {
	width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 800;
}

/* ---------- Tests (dark band) ---------- */
.home-tests {
	position: relative; overflow: hidden; color: #fff;
	background:
		radial-gradient(50% 80% at 100% 0%, rgba(0, 166, 147, 0.45), transparent 70%),
		radial-gradient(40% 70% at 0% 100%, rgba(0, 166, 147, 0.25), transparent 70%),
		linear-gradient(135deg, #064a41, var(--color-primary-dark));
	padding-block: 64px;
}
.home-tests .section__eyebrow { color: rgba(255, 255, 255, 0.75); }
.home-tests h2 { color: #fff; }
.home-tests__lead { color: rgba(255, 255, 255, 0.8); margin: var(--space-sm) 0 0; max-width: 560px; }
.home-tests .link-arrow { color: #fff; }
.home-tests__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.home-test-card {
	display: flex; flex-direction: column; gap: 8px; padding: var(--space-xl);
	background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-lg); color: #fff; backdrop-filter: blur(6px);
	transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.home-test-card:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35); transform: translateY(-3px); text-decoration: none; color: #fff; }
.home-test-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.14); color: #fff;
}
.home-test-card__name { font-size: 1rem; }
.home-test-card__desc { color: rgba(255, 255, 255, 0.78); font-size: 0.85rem; flex: 1; }
.home-test-card__meta { display: flex; gap: 8px; font-size: 0.78rem; color: rgba(255, 255, 255, 0.65); }
.home-test-card__cta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.88rem; margin-top: 4px; }

/* ---------- Trust ---------- */
.home-trust__layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-4xl); align-items: center; }
.home-trust__intro h2 { font-size: 1.75rem; }
.home-trust__intro p { color: var(--color-text-muted); margin-bottom: var(--space-xl); }
.home-trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.home-trust-card {
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
	padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.home-trust-card:hover { box-shadow: 0 16px 32px -16px rgba(0, 91, 80, 0.25); transform: translateY(-2px); }
.home-trust-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; border-radius: 14px;
	background: var(--color-primary-light); color: var(--color-primary-dark);
}
.home-trust-card p { margin: 0; color: var(--color-text-muted); font-size: 0.88rem; }

/* ---------- CTA (leaf artwork through a dark-teal overlay) ---------- */
.home-cta {
	position: relative; overflow: hidden; border-radius: 24px; color: #fff; text-align: center;
	padding: var(--space-4xl) var(--space-xl) 64px;
	background:
		/* Solid over the top ~half (the banner's logo/tagline sit there), then
		   fading so only the leaf artwork at the bottom shows through. */
		linear-gradient(180deg, rgba(0, 91, 80, 1) 0%, rgba(0, 91, 80, 1) 62%, rgba(0, 91, 80, 0.5) 100%),
		var(--home-cta-image) center bottom / cover no-repeat, var(--color-primary-dark);
}
.home-cta__inner { position: relative; max-width: 640px; margin-inline: auto; }
.home-cta h2 { color: #fff; font-size: 1.9rem; margin-bottom: var(--space-sm); }
.home-cta p { color: rgba(255, 255, 255, 0.85); font-size: 1.05rem; margin-bottom: var(--space-xl); }
.home-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------- FAQ ---------- */
.home-faq__layout { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-4xl); align-items: start; }
.home-faq__intro p { color: var(--color-text-muted); }
.home-faq__list { display: flex; flex-direction: column; gap: 10px; }
.home-faq__item {
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
	padding: 0 var(--space-lg); transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.home-faq__item[open] { border-color: rgba(0, 166, 147, 0.4); box-shadow: 0 12px 28px -18px rgba(0, 91, 80, 0.3); }
.home-faq__item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 16px 0; cursor: pointer; font-weight: 700; list-style: none;
}
.home-faq__item summary::-webkit-details-marker { display: none; }
.home-faq__chevron { flex-shrink: 0; color: var(--color-primary-dark); transition: transform 0.2s ease; }
.home-faq__item[open] .home-faq__chevron { transform: rotate(180deg); }
.home-faq__item p { margin: 0 0 16px; color: var(--color-text-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
	.home-hero__title { font-size: 40px; }
	.home-hero__inner { grid-template-columns: 1fr 0.9fr; gap: var(--space-2xl); }
	.home-steps__list, .home-tests__grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-2xl); }
	.home-steps__item:not(:last-child)::before { display: none; }
}
@media (max-width: 900px) {
	.home-hero { padding-block: 48px 96px; }
	.home-hero__inner { grid-template-columns: 1fr; text-align: center; }
	.home-hero__actions, .home-hero__quick, .home-hero__trust { justify-content: center; }
	.home-hero__lead { margin-inline: auto; }
	.home-hero__visual { max-width: 420px; margin: var(--space-md) auto 0; }
	.home-stats__list { grid-template-columns: repeat(2, 1fr); }
	.home-stats__item + .home-stats__item::before { display: none; }
	.home-testimonials__grid { grid-template-columns: 1fr; }
	.home-trust__layout, .home-faq__layout { grid-template-columns: 1fr; gap: var(--space-2xl); }
}
@media (max-width: 640px) {
	.home-hero__title { font-size: 32px; }
	.home-hero__lead { font-size: 1rem; }
	.home-hero__actions .btn { flex: 1 1 100%; }
	.home-hero__visual { padding: 20px 8px 48px 12px; }
	.home-hero__chip { font-size: 0.76rem; padding: 7px 10px; }
	.home-hero__chip--1 { top: 4%; }
	/* Narrow card: the cover's caption sits where this chip lands on desktop,
	   so park it in the opposite top corner instead. */
	.home-hero__chip--2 { top: 5%; inset-inline-start: 2%; }
	.home-hero__chip--3 { bottom: 0; inset-inline-end: 2%; }
	.home-stats { margin-top: -44px; }
	.home-stats__item { padding: 12px 12px; column-gap: 10px; }
	.home-stats__icon { width: 38px; height: 38px; }
	.home-stats__value { font-size: 1.2rem; }
	.home-areas { padding-top: 56px; }
	.home-section-head__title, .home-trust__intro h2, .home-cta h2 { font-size: 1.45rem; }
	.home-trust__grid { grid-template-columns: 1fr; }
	.home-cta { padding: var(--space-2xl) var(--space-lg) 48px; border-radius: 18px; }
	.home-cta__actions .btn { flex: 1 1 100%; }
}
@media (max-width: 480px) {
	.home-steps__list, .home-tests__grid { grid-template-columns: 1fr; }
	.home-stats__list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Account security (contact change + 2FA), message attachments, loyalty,
   recommendations, specialist calendar / case file / profile, in-site room
   ========================================================================== */
.acct-card { margin-bottom: 12px; }
.acct-card__title { margin: 0 0 6px; font-size: 1.05rem; }
.acct-contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.acct-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acct-inline input { flex: 1; min-width: 0; }
.acct-flow { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--color-border); }
.acct-twofa__state { margin: 4px 0 10px; }
.pill.is-disabled { opacity: 0.45; cursor: not-allowed; }
.mentayar-modal__error.is-error { color: var(--color-danger); }
.mentayar-modal__error:not(.is-error):not(:empty) { color: var(--color-primary-dark); }
@media (max-width: 640px) { .acct-contact-grid { grid-template-columns: 1fr; } }

/* Messages: attachments */
.messages-thread__composer { position: relative; flex-wrap: wrap; }
.messages-thread__attach { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--color-text-muted); cursor: pointer; flex-shrink: 0; transition: background 0.15s, color 0.15s; }
.messages-thread__attach:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.messages-thread__file-chip { flex: 0 0 100%; font-size: 0.8rem; color: var(--color-primary-dark); background: var(--color-primary-light); border-radius: 999px; padding: 4px 12px; display: inline-flex; align-items: center; gap: 8px; width: fit-content; }
.messages-thread__file-chip button { background: none; border: 0; cursor: pointer; color: inherit; font-size: 1rem; line-height: 1; }
.message-bubble__file { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 12px; border-radius: var(--radius-sm); background: rgba(0, 91, 80, 0.08); color: var(--color-primary-dark); font-size: 0.85rem; font-weight: 600; text-decoration: none; }
.message-bubble.is-mine .message-bubble__file { background: rgba(255, 255, 255, 0.18); color: #fff; }
.message-bubble__file small { font-weight: 400; opacity: 0.8; }
.message-bubble__img { display: block; max-width: 260px; max-height: 220px; border-radius: var(--radius-sm); margin-top: 6px; object-fit: cover; }

/* Loyalty club */
.loy-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-bottom: 14px; }
.loy-balance { background: linear-gradient(135deg, var(--color-primary-dark), #0a8f7f); color: #fff; border-radius: var(--radius-lg); padding: 22px 24px; position: relative; overflow: hidden; }
.loy-balance::after { content: ""; position: absolute; inset-inline-end: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.loy-balance__value { font-size: 2.2rem; font-weight: 800; line-height: 1.1; }
.loy-balance__label { opacity: 0.85; font-size: 0.85rem; }
.loy-balance__worth { margin-top: 8px; font-weight: 600; }
.loy-tier { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px 20px; }
.loy-tier__name { font-size: 1.15rem; font-weight: 800; color: var(--color-primary-dark); }
.loy-progress { height: 10px; border-radius: 999px; background: var(--color-primary-light); overflow: hidden; margin: 10px 0 6px; }
.loy-progress > span { display: block; height: 100%; background: var(--color-primary); border-radius: 999px; }
.loy-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.loy-tiers span { font-size: 0.75rem; padding: 3px 10px; border-radius: 999px; background: var(--color-card); color: var(--color-text-muted); }
.loy-tiers span.is-current { background: var(--color-primary); color: #fff; }
.loy-redeem { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.loy-redeem .mentayar-field { margin: 0; min-width: 160px; }
.loy-earn { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.loy-earn div { background: var(--color-card); border-radius: var(--radius-md); padding: 12px 14px; font-size: 0.85rem; }
.loy-earn strong { display: block; color: var(--color-primary-dark); font-size: 1.05rem; }
.loy-history { list-style: none; margin: 0; padding: 0; }
.loy-history li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
.loy-history li:last-child { border-bottom: 0; }
.loy-history .is-plus { color: var(--color-success); font-weight: 700; }
.loy-history .is-minus { color: var(--color-danger); font-weight: 700; }
@media (max-width: 780px) { .loy-hero, .loy-earn { grid-template-columns: 1fr; } }

/* Recommendations */
.rec-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 10px; }
.rec-item__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.rec-item__kind { font-size: 0.75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--color-primary-light); color: var(--color-primary-dark); }
.rec-item__kind--exercise { background: #fdf3e0; color: var(--color-rating-dark); }
.rec-item__kind--referral { background: #e2e8f0; color: #334155; }
.rec-item__kind--medication_note { background: #fee2e2; color: #b91c1c; }
.rec-item__title { font-weight: 700; }
.rec-item__meta { font-size: 0.78rem; color: var(--color-text-muted); }
.rec-item__body { margin: 0; white-space: pre-wrap; font-size: 0.92rem; }
.rec-item__actions { display: flex; gap: 8px; margin-top: 8px; }
.recs-form .mentayar-row { display: flex; gap: 12px; flex-wrap: wrap; }
.recs-form .mentayar-row .mentayar-field { flex: 1; }

/* Specialist calendar */
.cal-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.cal-toolbar .dashboard-tabs { margin-bottom: 0; }
.cal-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-title { margin-inline-start: 6px; font-size: 1.05rem; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 10px; }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.cal-dot--paid, .cal-event--paid { background: var(--color-primary); }
.cal-dot--completed, .cal-event--completed { background: var(--color-primary-dark); }
.cal-dot--noshow, .cal-event--no_show_client, .cal-event--no_show_specialist { background: var(--color-warning); }
.cal-dot--cancelled, .cal-event--cancelled { background: #cbd5e1; }
.cal-dot--blocked, .cal-event--blocked { background: repeating-linear-gradient(45deg, #e2e8f0, #e2e8f0 4px, #f1f5f9 4px, #f1f5f9 8px); }
.cal-body { overflow-x: auto; }
.cal-month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; min-width: 640px; }
.cal-month__head { font-size: 0.8rem; font-weight: 700; color: var(--color-text-muted); text-align: center; padding: 4px 0; }
.cal-cell { min-height: 92px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 6px; background: var(--color-surface); display: flex; flex-direction: column; gap: 4px; }
.cal-cell.is-other { opacity: 0.45; }
.cal-cell.is-today { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.cal-cell.is-weekend .cal-cell__day { color: var(--color-weekend); }
.cal-cell.is-blocked-day { background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 6px, #f1f5f9 6px, #f1f5f9 12px); }
.cal-cell__day { font-weight: 700; font-size: 0.85rem; }
.cal-event { font-size: 0.72rem; color: #fff; border-radius: 6px; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.cal-event--cancelled { color: #475569; text-decoration: line-through; }
.cal-event--blocked { color: #475569; }
.cal-more { font-size: 0.72rem; color: var(--color-primary-dark); font-weight: 600; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; min-width: 700px; }
.cal-week__col { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); min-height: 240px; display: flex; flex-direction: column; }
.cal-week__col.is-today { border-color: var(--color-primary); }
.cal-week__head { padding: 8px; text-align: center; border-bottom: 1px solid var(--color-border); font-size: 0.85rem; }
.cal-week__head strong { display: block; }
.cal-week__col.is-weekend .cal-week__head { color: var(--color-weekend); }
.cal-week__events { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.cal-week__col .cal-event { white-space: normal; padding: 6px 8px; font-size: 0.78rem; }
.cal-week__col .cal-event strong { display: block; font-size: 0.85rem; }
.cal-day { display: flex; flex-direction: column; gap: 8px; }
.cal-day__row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: stretch; }
.cal-day__time { font-weight: 700; color: var(--color-primary-dark); padding-top: 8px; }
.cal-day__card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 10px 14px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; border-inline-start: 4px solid var(--color-primary); }
.cal-day__card.is-completed { border-inline-start-color: var(--color-primary-dark); }
.cal-day__card.is-noshow { border-inline-start-color: var(--color-warning); }
.cal-day__card.is-cancelled { border-inline-start-color: #cbd5e1; opacity: 0.7; }
.cal-day__card.is-blocked { border-inline-start-color: #94a3b8; background: var(--color-card); }
.cal-empty { text-align: center; color: var(--color-text-muted); padding: 24px 0; }

/* Case file card */
.case-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.case-number { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: var(--color-primary-dark); background: var(--color-primary-light); padding: 4px 12px; border-radius: 999px; direction: ltr; display: inline-block; }
.case-card__status { display: inline-flex; align-items: center; gap: 8px; }
.case-files { list-style: none; margin: 10px 0 0; padding: 0; }
.case-file { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; flex-wrap: wrap; }
.case-file:last-child { border-bottom: 0; }
.case-file__meta { color: var(--color-text-muted); font-size: 0.78rem; }
.case-upload { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.case-upload .mentayar-field { margin: 0; flex: 1; min-width: 180px; }

/* Specialist profile view */
.prof-layout { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.prof-photo { text-align: center; }
.prof-photo img, .prof-photo__placeholder { width: 180px; height: 180px; border-radius: 20px; object-fit: cover; background: var(--color-primary-light); display: inline-block; }
.prof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.prof-grid .mentayar-field.is-wide { grid-column: 1 / -1; }
.prof-pending { border-inline-start: 4px solid var(--color-warning); }
.prof-diff { list-style: none; margin: 8px 0 0; padding: 0; font-size: 0.88rem; }
.prof-diff li { padding: 6px 0; border-bottom: 1px dashed var(--color-border); }
.prof-diff .old { color: var(--color-text-muted); text-decoration: line-through; margin-inline-end: 8px; }
.prof-diff .new { color: var(--color-primary-dark); font-weight: 600; }
.prof-history li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-border); font-size: 0.88rem; flex-wrap: wrap; }
.prof-status { font-size: 0.75rem; padding: 3px 10px; border-radius: 999px; }
.prof-status--pending { background: #fdf3e0; color: var(--color-rating-dark); }
.prof-status--approved { background: var(--color-primary-light); color: var(--color-primary-dark); }
.prof-status--rejected { background: #fee2e2; color: #b91c1c; }
.prof-terms { display: flex; flex-wrap: wrap; gap: 6px; }
.prof-terms label { font-size: 0.85rem; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--color-border); cursor: pointer; }
.prof-terms label:has(input:checked) { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.prof-terms input { display: none; }
@media (max-width: 780px) { .prof-layout, .prof-grid { grid-template-columns: 1fr; } }

/* Financial report bar */
.fin-report-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fin-report-bar__presets, .fin-report-bar__exports { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fin-report-bar .dashboard-tabs { margin-bottom: 0; }
.fin-report-bar__label { font-weight: 700; font-size: 0.85rem; color: var(--color-text-muted); }
.fin-report-bar__range { font-size: 0.8rem; color: var(--color-text-muted); }

/* In-site session room */
.session-room__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.session-room__head h1 { margin-bottom: 4px; }
.session-room__meta { color: var(--color-text-muted); margin: 0; }
.session-room__frame { height: min(72vh, 720px); min-height: 420px; border-radius: var(--radius-lg); overflow: hidden; background: #0f172b; display: flex; align-items: center; justify-content: center; }
.session-room__frame iframe { width: 100%; height: 100%; border: 0; }
.session-room__loading { color: #fff; opacity: 0.8; }
.session-room__hint { color: var(--color-text-muted); font-size: 0.85rem; margin-top: 10px; }
.session-room__denied { max-width: 520px; margin: 0 auto; text-align: center; }

/* ==========================================================================
   Client dashboard — profile tab redesign
   ========================================================================== */
.prof-hero {
	display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
	padding: 24px 28px; border-radius: 20px; margin-bottom: 20px; color: #fff; position: relative; overflow: hidden;
	background:
		radial-gradient(60% 120% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
		linear-gradient(135deg, var(--color-primary-dark) 0%, #0a8f7f 100%);
}
.prof-hero::after { content: ""; position: absolute; inset-inline-end: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.prof-hero__avatar {
	width: 84px; height: 84px; border-radius: 26px; display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, 0.16); border: 2px solid rgba(255, 255, 255, 0.35); font-size: 2rem; font-weight: 800; color: #fff; flex-shrink: 0;
	box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.35);
}
.prof-hero__eyebrow { display: block; font-size: 0.78rem; font-weight: 700; opacity: 0.8; margin-bottom: 2px; }
.prof-hero__name { margin: 0 0 8px; font-size: 1.5rem; color: #fff; }
.prof-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.prof-chip {
	display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
	background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); font-size: 0.8rem; font-weight: 600; color: #fff;
}
.prof-hero__completion { text-align: center; position: relative; z-index: 1; }
.prof-hero__completion small { display: block; margin-top: 6px; font-size: 0.78rem; opacity: 0.85; }
.prof-ring {
	--p: 0; width: 76px; height: 76px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	background: conic-gradient(#fff calc(var(--p) * 1%), rgba(255, 255, 255, 0.22) 0);
	position: relative;
}
.prof-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--color-primary-dark); }
.prof-ring span { position: relative; font-weight: 800; font-size: 0.95rem; }

.prof-cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.prof-main, .prof-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.prof-card {
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
	padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.prof-card__head { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.prof-card__head h2 { margin: 0 0 2px; font-size: 1.05rem; }
.prof-card__head p { margin: 0; color: var(--color-text-muted); font-size: 0.82rem; }
.prof-card__icon {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
	background: var(--color-primary-light); color: var(--color-primary-dark);
}
.prof-card__icon--tg { background: #e8f1fb; color: #1d6fb8; }
.prof-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.prof-card__foot p { margin: 0; flex: 1; }
.prof-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; }
.prof-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prof-form-grid .mentayar-field { margin-bottom: 12px; position: relative; }
.prof-form-grid .mentayar-field > label { font-size: 0.82rem; color: var(--color-text-muted); font-weight: 600; margin-bottom: 4px; }
.prof-form-grid .mentayar-field input:not([type="checkbox"]):not([type="radio"]),
.prof-form-grid .mentayar-field select { background: var(--color-card); border-color: transparent; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.prof-form-grid .mentayar-field input:focus,
.prof-form-grid .mentayar-field select:focus { background: var(--color-surface); border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 166, 147, 0.15); }
.prof-field--locked input { color: var(--color-text-muted); padding-inline-end: 34px; }
.prof-field__lock { position: absolute; inset-inline-end: 12px; bottom: 25px; color: var(--color-text-muted); pointer-events: none; }
.prof-savebar {
	position: sticky; bottom: 12px; z-index: 5;
	display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 10px 14px 10px 18px;
	box-shadow: 0 16px 36px -18px rgba(15, 23, 43, 0.35);
}
.prof-savebar__status { margin: 0; flex: 1; font-size: 0.88rem; }
.prof-savebar .btn { min-width: 150px; }
.prof-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--color-border); }
.prof-row:first-of-type { border-top: 0; padding-top: 0; }
.prof-row > div { min-width: 0; }
.prof-row strong { display: block; font-size: 0.92rem; }
.prof-row .fin-card__hint { margin-top: 2px; }
.prof-row .btn { flex-shrink: 0; }
.prof-row--danger { display: block; }
.prof-row--danger .btn { margin-top: 6px; }
/* The shared account-security widget renders its own cards; flatten them inside the profile card. */
.prof-card .acct-card { border: 0; box-shadow: none; padding: 0; margin: 0; }
.prof-card .acct-card + .acct-card { border-top: 1px solid var(--color-border); padding-top: 14px; margin-top: 14px; }
.prof-card .acct-card__title { font-size: 0.95rem; }
.prof-card .acct-contact-grid { grid-template-columns: 1fr; gap: 8px; }
.prof-card [data-telegram-card] p, .prof-card [data-transfer-request-card] p, .prof-card [data-deletion-request-card] p { margin-bottom: 8px; }
@media (max-width: 1100px) { .prof-cols { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
	.prof-hero { grid-template-columns: auto 1fr; padding: 18px; }
	.prof-hero__completion { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; text-align: start; }
	.prof-hero__completion small { margin: 0; }
	.prof-ring { width: 56px; height: 56px; }
	.prof-ring::before { inset: 5px; }
	.prof-form-grid, .prof-form-grid--2 { grid-template-columns: 1fr; }
	.prof-card { padding: 16px; }
	.prof-savebar { bottom: 8px; }
	.prof-savebar .btn { width: 100%; }
}

/* Specialist profile tab (shares the client profile's prof-* components) */
.prof-hero--specialist { grid-template-columns: auto 1fr auto; }
.prof-hero__avatar--photo { overflow: hidden; padding: 0; }
.prof-hero__avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prof-hero__sub { margin: -4px 0 10px; opacity: 0.9; font-size: 0.95rem; }
.prof-hero__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; position: relative; z-index: 1; }
.prof-hero__status { font-size: 0.8rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25); white-space: nowrap; }
.prof-hero__status.is-active { background: rgba(255, 255, 255, 0.92); color: var(--color-primary-dark); }
.prof-card__icon--warn { background: #fdf3e0; color: var(--color-rating-dark); }
.prof-photo-row { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; padding: 14px; border-radius: var(--radius-md); background: var(--color-card); }
.prof-photo-row__preview img, .prof-photo-row__preview .prof-photo__placeholder { width: 88px; height: 88px; border-radius: 18px; object-fit: cover; display: block; background: var(--color-primary-light); }
.prof-photo-row strong { display: block; margin-bottom: 2px; }
.prof-photo-row .fin-card__hint { margin: 0 0 8px; }
.prof-main form.prof-main { display: contents; }
@media (max-width: 640px) {
	.prof-hero--specialist { grid-template-columns: auto 1fr; }
	.prof-hero__actions { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
	.prof-photo-row { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Dashboard sidebar redesign (client / specialist / admin panels)
   ========================================================================== */
.dashboard-sidebar {
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 20px;
	padding: 12px; box-shadow: 0 18px 40px -28px rgba(15, 23, 43, 0.35);
	/* Own stacking context (position: sticky, set above) needs an explicit
	   z-index above .dash-hero's — otherwise .dash-hero (a later sibling,
	   also position:relative) paints over the notif-bell dropdown despite
	   the dropdown's own higher z-index, since that only wins comparisons
	   inside this same stacking context. */
	z-index: 5;
}
.dashboard-sidebar__user {
	display: flex; align-items: center; gap: 12px; padding: 14px 14px; margin: 0 0 10px; border: 0; border-radius: 16px;
	color: #fff;
	background:
		radial-gradient(70% 120% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
		linear-gradient(135deg, var(--color-primary-dark) 0%, #0a8f7f 100%);
}
.dashboard-sidebar__avatar {
	width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, 0.18); border: 1.5px solid rgba(255, 255, 255, 0.35); color: #fff; font-weight: 800; font-size: 1.15rem;
}
.dashboard-sidebar__name { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.dashboard-sidebar__name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.dashboard-sidebar__name small { font-size: 0.72rem; opacity: 0.85; }
.dashboard-sidebar__user .notif-bell { color: #fff; }
.dashboard-nav { gap: 2px; }
.dashboard-nav__item {
	display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
	padding: 10px 12px; border: 0; border-inline-start: 0; border-radius: 12px; background: none; cursor: pointer;
	color: var(--color-text); font: inherit; font-size: 0.92rem; font-weight: 500;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.dashboard-nav__item:hover { background: var(--color-card); color: var(--color-primary-dark); text-decoration: none; }
.dashboard-nav__item.is-active { background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 700; border-inline-start: 0; box-shadow: inset 3px 0 0 var(--color-primary); }
.dashboard-nav__item.is-active .dashboard-nav__icon { background: var(--color-primary); color: #fff; border-color: transparent; }
.dashboard-nav__item svg.dashboard-nav__icon {
	flex-shrink: 0; width: 30px; height: 30px; padding: 6px; border-radius: 9px; box-sizing: border-box; opacity: 1;
	background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted);
	transition: background 0.15s ease, color 0.15s ease;
}
.dashboard-nav__item:hover .dashboard-nav__icon { color: var(--color-primary-dark); border-color: rgba(0, 166, 147, 0.35); }
.dashboard-nav__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-nav__badge { margin-inline-start: auto; }
.dashboard-nav__item--logout { color: var(--color-danger); margin-top: 6px; }
.dashboard-nav__item--logout .dashboard-nav__icon { color: var(--color-danger); border-color: #fee2e2; background: #fff5f5; }
.dashboard-nav__item--logout:hover { background: #fff1f1; color: var(--color-danger); }
.dashboard-nav__group { border-radius: 12px; }
.dashboard-nav__group-toggle {
	display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px 8px;
	border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.74rem; font-weight: 800;
	letter-spacing: 0.02em; color: var(--color-text-muted); text-transform: uppercase; border-radius: 10px;
}
.dashboard-nav__group-toggle:hover { background: var(--color-card); color: var(--color-primary-dark); }
.dashboard-nav__group-toggle::after {
	content: ""; width: 7px; height: 7px; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform 0.2s ease; margin-inline-end: 6px; opacity: 0.7;
}
.dashboard-nav__group.is-open .dashboard-nav__group-toggle { color: var(--color-primary-dark); }
.dashboard-nav__group.is-open .dashboard-nav__group-toggle::after { transform: rotate(-135deg); }
.dashboard-nav__group-items { position: relative; margin-inline-start: 12px; padding-inline-start: 8px; border-inline-start: 2px solid var(--color-border); }
.dashboard-nav__group-items .dashboard-nav__item { padding: 8px 10px; font-size: 0.86rem; }
/* Sub-items carry the long admin labels — wrap to two lines rather than truncating. */
.dashboard-nav__group-items .dashboard-nav__label { white-space: normal; line-height: 1.35; }
.dashboard-nav__group-items .dashboard-nav__item svg.dashboard-nav__icon { width: 26px; height: 26px; padding: 5px; border-radius: 8px; }
.dashboard-nav__divider { margin: 8px 6px; border-top-color: var(--color-border); }
@media (max-width: 780px) {
	.dashboard-sidebar { border-radius: 16px; }
}

/* Admin panel hero + consistent panel headings */
.dash-hero {
	display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
	padding: 18px 22px; border-radius: 18px; margin-bottom: 18px; color: #fff; position: relative; overflow: hidden;
	background:
		radial-gradient(60% 120% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
		linear-gradient(135deg, var(--color-primary-dark) 0%, #0a8f7f 100%);
}
.dash-hero::after { content: ""; position: absolute; inset-inline-end: -50px; bottom: -70px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.dash-hero__avatar { width: 56px; height: 56px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.16); border: 2px solid rgba(255, 255, 255, 0.35); font-size: 1.4rem; font-weight: 800; }
.dash-hero__eyebrow { display: block; font-size: 0.75rem; font-weight: 700; opacity: 0.8; }
.dash-hero__name { margin: 0 0 6px; color: #fff; font-size: 1.25rem; }
.dash-hero__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-hero__actions { display: flex; gap: 8px; flex-wrap: wrap; position: relative; z-index: 1; }
.dashboard-content > section > h1 { display: flex; align-items: center; gap: 10px; font-size: 1.25rem; margin-bottom: 16px; }
.dashboard-content > section > h1::before { content: ""; width: 6px; height: 22px; border-radius: 3px; background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark)); }
@media (max-width: 640px) {
	.dash-hero { grid-template-columns: auto 1fr; padding: 16px; }
	.dash-hero__actions { grid-column: 1 / -1; }
	.dash-hero__actions .btn { flex: 1; }
}

/* Danger zone (account deletion request) */
.prof-row--danger { padding-top: 14px; }
.danger-zone { border: 1px solid #fecaca; background: #fff8f8; border-radius: var(--radius-md); padding: 14px 16px; }
.danger-zone--pending { border-color: #fde68a; background: #fffbeb; }
.danger-zone__head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.danger-zone__head > div { flex: 1; min-width: 200px; }
.danger-zone__head strong { display: block; color: #b91c1c; font-size: 0.92rem; margin-bottom: 2px; }
.danger-zone--pending .danger-zone__head strong { color: #92400e; }
.danger-zone__head .fin-card__hint { margin: 0; }
.danger-zone__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #fee2e2; color: #b91c1c; flex-shrink: 0; }
.danger-zone--pending .danger-zone__icon { background: #fef3c7; color: #b45309; }
.danger-zone__badge { align-self: center; font-size: 0.75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #fef3c7; color: #92400e; white-space: nowrap; }
.danger-zone__form { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #fecaca; }
.danger-zone__form .mentayar-field { margin-bottom: 10px; }
.danger-zone__form .mentayar-field > label { font-size: 0.85rem; font-weight: 600; color: var(--color-text); margin-bottom: 6px; }
.danger-zone__form textarea { width: 100%; background: #fff; border-color: #fecaca; resize: vertical; }
.danger-zone__form textarea:focus { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
.danger-zone__confirm { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: var(--color-text-muted); margin: 6px 0 12px; cursor: pointer; }
.danger-zone__confirm input { margin-top: 3px; accent-color: #ef4444; flex-shrink: 0; }
.danger-zone__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn--danger { background: #dc2626; color: #fff; border-color: #dc2626; }
.btn--danger:hover { background: #b91c1c; color: #fff; text-decoration: none; }
.btn--danger:disabled { opacity: 0.45; cursor: not-allowed; }
.btn--danger-outline { background: transparent; color: #b91c1c; border-color: #fca5a5; }
.btn--danger-outline:hover { background: #fee2e2; color: #b91c1c; text-decoration: none; }
@media (max-width: 640px) { .danger-zone__head .btn { width: 100%; } }

/* ==========================================================================
   Admin panel — settings view redesign
   ========================================================================== */
.settings-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.settings-nav { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 4px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 8px; box-shadow: var(--shadow-sm); }
.settings-nav__item {
	display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; padding: 10px 10px; border: 0; border-radius: 12px;
	background: none; cursor: pointer; font: inherit; color: var(--color-text); transition: background 0.15s ease, color 0.15s ease;
}
.settings-nav__item:hover { background: var(--color-card); }
.settings-nav__item.is-active { background: var(--color-primary-light); color: var(--color-primary-dark); box-shadow: inset 3px 0 0 var(--color-primary); }
.settings-nav__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); }
.settings-nav__item.is-active .settings-nav__icon { background: var(--color-primary); border-color: transparent; color: #fff; }
.settings-nav__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.settings-nav__text strong { font-size: 0.88rem; font-weight: 600; }
.settings-nav__item.is-active .settings-nav__text strong { font-weight: 700; }
.settings-nav__text small { font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.settings-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.settings-body [data-settings-panel] > h2 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; margin: 6px 0 12px; }
.settings-body [data-settings-panel] > h2::before { content: ""; width: 6px; height: 20px; border-radius: 3px; background: linear-gradient(180deg, var(--color-primary), var(--color-primary-dark)); }
.settings-body [data-settings-panel] > .fin-card__hint { margin: -6px 0 12px; }
.settings-body .dashboard-card {
	background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 14px;
	box-shadow: var(--shadow-sm);
}
.settings-body .integration-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--color-border); }
.settings-body .integration-card__header h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 10px; }
.settings-body .integration-card__header h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 4px var(--color-primary-light); }
.settings-body .mentayar-field { margin-bottom: 12px; }
.settings-body .mentayar-field > label { font-size: 0.82rem; color: var(--color-text-muted); font-weight: 600; margin-bottom: 4px; }
.settings-body .mentayar-field input:not([type="checkbox"]):not([type="radio"]),
.settings-body .mentayar-field select,
.settings-body .mentayar-field textarea { background: var(--color-card); border-color: transparent; transition: background 0.15s, border-color 0.15s, box-shadow 0.15s; }
.settings-body .mentayar-field input:focus,
.settings-body .mentayar-field select:focus,
.settings-body .mentayar-field textarea:focus { background: var(--color-surface); border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 166, 147, 0.15); }
.settings-body .policy-tier { padding: 12px 4px; flex-wrap: wrap; }
.settings-body .policy-tier__input-group { flex-wrap: wrap; row-gap: 6px; }
.settings-body .policy-tier .client-note__delete { margin-inline-start: 4px; }
.settings-body .policy-tier__input { background: var(--color-card); border-color: transparent; }
.settings-body .policy-tier__input:focus { background: var(--color-surface); }
.settings-savebar { margin-top: 6px; }

/* Toggle checkboxes rendered as switches (markup untouched: <label class="settings-toggle"><input type="checkbox"> label</label>) */
.settings-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--color-text-muted); user-select: none; }
.settings-toggle input[type="checkbox"] {
	appearance: none; -webkit-appearance: none; width: 42px; height: 24px; margin: 0; border-radius: 999px; position: relative; cursor: pointer;
	background: #cbd5e1; border: 0; transition: background 0.2s ease; flex-shrink: 0;
}
.settings-toggle input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; }
.settings-toggle input[type="checkbox"]:checked { background: var(--color-primary); }
.settings-toggle input[type="checkbox"]:checked::after { transform: translateX(-18px); }
[dir="ltr"] .settings-toggle input[type="checkbox"]:checked::after { transform: translateX(18px); }
.settings-toggle:has(input:checked) { color: var(--color-primary-dark); }
.settings-toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (max-width: 900px) {
	.settings-layout { grid-template-columns: 1fr; }
	.settings-nav { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding: 8px; scrollbar-width: thin; }
	.settings-nav__item { flex: 0 0 auto; width: auto; padding: 6px 12px 6px 8px; gap: 8px; border-radius: 999px; border: 1px solid var(--color-border); white-space: nowrap; }
	.settings-nav__icon { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--color-card); }
	.settings-nav__text strong { font-size: 0.82rem; }
	.settings-nav__text small { display: none; }
	.settings-nav__item.is-active { box-shadow: none; border-color: var(--color-primary); }
}

/* ---- "Add to calendar" menu (checkout confirmation, dashboards) ---- */
.cal-add { position: relative; display: inline-block; }
.cal-add__btn::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-start: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.cal-add__menu { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; min-width: 220px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-md, 0 10px 30px rgba(15, 23, 43, 0.12)); padding: 6px; z-index: 30; text-align: start; }
.cal-add__item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--color-text); font-size: 0.9rem; text-decoration: none; white-space: nowrap; }
.cal-add__item:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.cal-add__item::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; }
.cal-add__item--google::before { background: #4285f4; }
.cal-add__item--outlook::before, .cal-add__item--office::before { background: #0078d4; }
.cal-add__item--yahoo::before { background: #6001d2; }
.cal-add__item--apple::before, .cal-add__item--device::before { background: #111; }
.confirmation-box__actions .cal-add__menu { inset-inline-start: 50%; transform: translateX(50%); }