/*
 * com_panditji wizard styling.
 * Scoped entirely under .panditji-wizard; reuses the Avyani template's own
 * design tokens (--c-*, --font-*, --sp-*, --radius-*, --shadow-*) so this
 * never has to duplicate or diverge from the site's visual language.
 */

.panditji-wizard {
	--pj-max: 46rem;
	max-width: var(--pj-max);
	margin: var(--sp-7, 3rem) auto;
	padding: var(--sp-6, 2rem);
	font-family: var(--font-body, inherit);
	background: var(--c-surface, #fff);
	border: 1px solid var(--c-border, #ede2cd);
	border-radius: var(--radius-lg, 22px);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
	color: var(--c-ink, #2b2622);
}

.panditji-wizard--intro {
	text-align: center;
}

/* ---------------------------------------------------------------
   Header
--------------------------------------------------------------- */
.panditji-header {
	margin-bottom: var(--sp-6, 2rem);
	text-align: center;
}

.panditji-header h1 {
	font-family: var(--font-heading, serif);
	font-size: var(--fs-h2, 1.75rem);
	line-height: var(--lh-heading, 1.25);
	margin: 0 0 0.15em;
	color: var(--c-ink, #2b2622);
}

.panditji-header__hi {
	display: block;
	font-family: var(--font-heading, serif);
	font-size: 0.62em;
	font-weight: 400;
	color: var(--c-saffron-dark, #a35c16);
	margin-top: 0.15em;
}

.panditji-header__tagline {
	color: var(--c-ink-soft, #6b6259);
	font-size: var(--fs-small, 0.9rem);
	max-width: 34rem;
	margin: 0.5em auto 0;
}

.panditji-lead {
	color: var(--c-ink-soft, #555);
	margin-bottom: 1.5rem;
}

/* Section headings inside a single-page multi-section form (e.g. the
   Yajman profile's Basic/Address/Family/Vedic/Preferences sections) —
   distinct from .panditji-header, which is the page's own top title. */
.panditji-section-title {
	font-family: var(--font-heading, serif);
	font-size: var(--fs-h4, 1.1rem);
	color: var(--c-saffron-dark, #a35c16);
	margin: 2rem 0 1rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--c-border, #ede2cd);
}

.panditji-section-title:first-of-type {
	margin-top: 0.5rem;
}

/* Major page-level sections (h2, e.g. "Edit Your Profile", "Guidance
   Requests") vs. individual fieldset groupings within a long form (h3,
   e.g. "Basic Info & Identity") share .panditji-section-title but need
   distinct visual weight so a reader can tell them apart at a glance —
   otherwise a form's own subsection headings look identical to the
   page's own major section breaks. */
h3.panditji-section-title {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--c-ink-soft, #6b6259);
	border-bottom-color: transparent;
	margin: 2rem 0 0.75rem;
}

/* ---------------------------------------------------------------
   Stepper
--------------------------------------------------------------- */
.panditji-stepper {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 0;
	margin: 0 0 var(--sp-5, 1.5rem);
	list-style: none;
	padding: 0 0 0.35rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.panditji-step {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 0.5rem;
	font-size: 0.82rem;
	color: var(--c-ink-faint, #8f867a);
	white-space: nowrap;
	padding-right: 0.9rem;
}

.panditji-step:not(:last-child)::after {
	content: "";
	width: 1.5rem;
	height: 1px;
	background: var(--c-border-strong, #e2d3b3);
	margin: 0 0.4rem 0 0.1rem;
	flex: 0 0 auto;
}

.panditji-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	flex: 0 0 auto;
	border-radius: 50%;
	border: 1.5px solid var(--c-border-strong, #ccc);
	font-size: 0.78rem;
	font-weight: 700;
	background: var(--c-surface, #fff);
	color: var(--c-ink-faint, #999);
	transition: background-color var(--transition-fast, 150ms ease), border-color var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease);
}

.panditji-step__label {
	font-weight: 500;
}

.panditji-step--done {
	color: var(--c-success, #2e7d32);
}

.panditji-step--done .panditji-step__num {
	background: var(--c-success, #2e7d32);
	border-color: var(--c-success, #2e7d32);
	color: #fff;
}

.panditji-step--current {
	color: var(--c-saffron-dark, #b45309);
}

.panditji-step--current .panditji-step__num {
	border-color: var(--c-saffron, #dd8a2e);
	background: var(--c-saffron, #dd8a2e);
	color: #fff;
	box-shadow: 0 0 0 3px var(--c-saffron-tint, #fbead2);
}

.panditji-step--current .panditji-step__label {
	font-weight: 700;
}

.panditji-step--error .panditji-step__num {
	border-color: var(--c-danger, #8a3a32);
	background: var(--c-danger-bg, #f7e4e1);
	color: var(--c-danger, #8a3a32);
}

.panditji-step--error .panditji-step__label {
	color: var(--c-danger, #8a3a32);
}

@media (min-width: 640px) {
	.panditji-stepper {
		flex-wrap: wrap;
		overflow-x: visible;
		row-gap: 0.6rem;
	}
}

/* ---------------------------------------------------------------
   Progress
--------------------------------------------------------------- */
.panditji-completion {
	margin-bottom: var(--sp-6, 2rem);
	font-size: 0.85rem;
}

.panditji-completion__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.35rem;
	color: var(--c-ink-soft, #555);
}

.panditji-completion__head strong {
	color: var(--c-saffron-dark, #b45309);
}

.panditji-completion__bar {
	height: 8px;
	background: var(--c-bg-alt, #eee);
	border-radius: var(--radius-pill, 4px);
	overflow: hidden;
}

.panditji-completion__fill {
	height: 100%;
	background: var(--c-saffron, #b45309);
	transition: width 0.3s ease;
}

.panditji-regid,
.panditji-regid-big {
	font-weight: 700;
	color: var(--c-saffron-dark, #b45309);
}

.panditji-regid-big {
	font-size: 1.5rem;
	margin: 1rem 0;
}

/* ---------------------------------------------------------------
   Correction items list (Panditji dashboard, CORRECTION_REQUIRED)
--------------------------------------------------------------- */
.panditji-correction-list {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin: 1.25rem 0;
	text-align: left;
}

.panditji-correction-item {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.85rem 1rem;
	border-radius: var(--radius-md, 14px);
	border: 1px solid var(--c-warning-border, #f3e3bf);
	background: var(--c-warning-bg, #fbf0da);
	color: var(--c-ink, #333);
	text-decoration: none;
	transition: box-shadow var(--transition-fast, 150ms ease);
}

.panditji-correction-item:hover {
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.panditji-correction-item__icon {
	flex: 0 0 auto;
	font-size: 1.1rem;
	line-height: 1.4;
}

.panditji-correction-item__note {
	display: block;
	font-size: 0.85rem;
	color: var(--c-ink-soft, #6b6259);
	margin-top: 0.15rem;
}

/* ---------------------------------------------------------------
   Messages
--------------------------------------------------------------- */
.panditji-messages {
	margin-bottom: 1rem;
}

.panditji-message {
	padding: 0.6rem 0.9rem;
	border-radius: var(--radius-sm, 6px);
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
}

.panditji-message--error {
	background: var(--c-danger-bg, #fdecea);
	color: var(--c-danger, #b71c1c);
	border: 1px solid var(--c-danger-border, #f5c6cb);
}

.panditji-message--message,
.panditji-message--notice {
	background: var(--c-success-bg, #eef7ee);
	color: var(--c-success, #1b5e20);
	border: 1px solid var(--c-success-border, #c8e6c9);
}

/* ---------------------------------------------------------------
   Section heading
--------------------------------------------------------------- */
.panditji-section {
	margin: 1.25rem 0 1.4rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--c-border, #eee);
}

.panditji-section h2 {
	font-family: var(--font-heading, serif);
	font-size: var(--fs-h4, 1.2rem);
	margin: 0 0 0.1em;
	color: var(--c-ink, #222);
}

.panditji-section__hi {
	display: block;
	font-size: 0.7em;
	font-weight: 400;
	color: var(--c-saffron-dark, #a35c16);
	margin-bottom: 0.3em;
}

.panditji-section__help {
	color: var(--c-ink-soft, #666);
	font-size: 0.88rem;
	margin: 0;
}

/* ---------------------------------------------------------------
   Fields
--------------------------------------------------------------- */
.panditji-field {
	margin-bottom: 1.1rem;
}

.panditji-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.3rem;
	font-size: 0.92rem;
	color: var(--c-ink, #333);
}

.panditji-field label .star {
	color: var(--c-danger, #a33);
}

.panditji-field input[type="text"],
.panditji-field input[type="tel"],
.panditji-field input[type="email"],
.panditji-field input[type="number"],
.panditji-field input[type="date"],
.panditji-field textarea,
.panditji-field select,
.panditji-input {
	width: 100%;
	max-width: 480px;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--c-border-strong, #ccc);
	border-radius: var(--radius-sm, 6px);
	font-size: 1rem;
	font-family: inherit;
	box-sizing: border-box;
	background: var(--c-bg, #fff);
	color: var(--c-ink, #222);
	transition: border-color var(--transition-fast, 150ms ease), box-shadow var(--transition-fast, 150ms ease);
}

.panditji-field input:focus-visible,
.panditji-field textarea:focus-visible,
.panditji-field select:focus-visible,
.panditji-btn:focus-visible,
.panditji-input:focus-visible {
	outline: none;
	border-color: var(--c-saffron, #dd8a2e);
	box-shadow: 0 0 0 3px var(--c-saffron-tint, #fbead2);
}

.panditji-field input.invalid,
.panditji-field textarea.invalid,
.panditji-field select.invalid {
	border-color: var(--c-danger, #a33);
}

.panditji-field-error {
	color: var(--c-danger, #a33);
	font-size: 0.82rem;
	margin-top: 0.3rem;
}

.panditji-field small,
.panditji-field .form-text {
	display: block;
	color: var(--c-ink-faint, #888);
	font-size: 0.8rem;
	margin-top: 0.3rem;
}

/* ---------------------------------------------------------------
   Checkboxes, checkbox groups, and plain radio options.

   Joomla renders every checkboxes/checkbox/plain-radio option as
   Bootstrap's standard `.form-check` pair — an <input> immediately
   followed by a <label class="form-check-label">. This site loads no
   Bootstrap CSS at all, so with nothing here that label falls back to
   the generic ".panditji-field label" rule above (display:block,
   its own margin) and renders as a separate full-width block UNDER the
   checkbox instead of beside it — the large-gap, checkbox-detached-
   from-its-text bug. Fixed by making each .form-check its own flex row
   (input + label side by side, vertically centred) and overriding the
   label back to an inline, no-margin element specifically inside it.
   The <label for="..."> already toggles its checkbox natively — no JS
   needed for "click the text to select it".
--------------------------------------------------------------- */
.panditji-field fieldset.checkboxes,
.panditji-field fieldset.radio {
	border: 1px solid var(--c-border, #eee);
	border-radius: var(--radius-sm, 6px);
	padding: 0.5rem 0.85rem;
	margin: 0;
}

.panditji-field .form-check {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.1rem;
	border-bottom: 1px solid var(--c-border, #f2ede2);
}

.panditji-field .form-check:last-child {
	border-bottom: none;
}

.panditji-field .form-check-input {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--c-saffron, #dd8a2e);
	cursor: pointer;
}

.panditji-field .form-check-label,
.panditji-field label.form-check-label {
	display: inline;
	font-weight: 400;
	margin: 0;
	font-size: 0.95rem;
	color: var(--c-ink, #333);
	cursor: pointer;
	flex: 1 1 auto;
}

/* The single "I agree to the declaration" checkbox uses the same
   .form-check markup but has no surrounding fieldset border. */
.panditji-field--checkbox .form-check {
	border-bottom: none;
	padding: 0.2rem 0;
}

.panditji-input--otp {
	max-width: 220px;
	letter-spacing: 0.35rem;
	text-align: center;
	font-size: 1.3rem;
}

.panditji-field--checkbox label {
	font-weight: 400;
	cursor: pointer;
}

.panditji-radio-inline {
	display: inline-block;
	font-weight: 400;
	margin: 0 1.25rem 0.4rem 0;
	cursor: pointer;
}

.panditji-declaration-text,
.panditji-help {
	font-size: 0.85rem;
	color: var(--c-ink-soft, #666);
	background: var(--c-bg-alt, #faf7f2);
	border: 1px solid var(--c-border, #eee);
	border-radius: var(--radius-sm, 6px);
	padding: 0.85rem 1rem;
	margin: 1rem 0;
}

/* ---------------------------------------------------------------
   Mobile verification (Phase 9)
--------------------------------------------------------------- */
.panditji-mobile-verify {
	display: flex;
	align-items: center;
	gap: var(--sp-3, 0.75rem);
	flex-wrap: wrap;
	margin-top: -0.5rem;
	margin-bottom: 1.5rem;
	padding: 0.75rem 1rem;
	background: var(--c-bg-alt, #faf7f2);
	border: 1px solid var(--c-border, #eee);
	border-radius: var(--radius-sm, 6px);
	font-size: 0.88rem;
}

.panditji-mobile-verify__status {
	color: var(--c-ink-soft, #666);
}

.panditji-mobile-verify__status--verified {
	color: var(--c-success, #2f7d4f);
	font-weight: 600;
}

/* ---------------------------------------------------------------
   Photo upload
--------------------------------------------------------------- */
.panditji-photo {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.panditji-photo__preview {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--c-border-strong, #e2d3b3);
	background: var(--c-bg-alt, #f4ecd8);
	flex: 0 0 auto;
}

.panditji-photo__placeholder {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	border: 2px dashed var(--c-border-strong, #e2d3b3);
	background: var(--c-bg-alt, #f4ecd8);
	color: var(--c-ink-faint, #b98f3f);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	flex: 0 0 auto;
}

.panditji-photo__controls {
	flex: 1 1 200px;
	min-width: 200px;
}

.panditji-photo__controls input[type="file"] {
	font-size: 0.85rem;
}

/* ---------------------------------------------------------------
   Repeatable subform cards (qualifications / service locations /
   yajman references) — styling Joomla's native subform-repeatable
   markup, not replacing it.

   Joomla renders TWO controls per row (a per-row "Add" AND "Remove"
   button, both bound by the <joomla-field-subform> web component to the
   same "add a row" / "remove this row" actions) plus one more master
   "Add" button before the first row. Each button's only visible content
   is an empty <span class="icon-plus">/<span class="icon-minus"> — these
   come from Joomla's ADMIN icon font, which isn't loaded on the site
   side, so with no CSS the buttons render as blank, unlabeled pills.
   Fix: hide the redundant per-row Add (one clearly-labelled master Add
   is enough), inject real bilingual text via ::after + a CSS custom
   property (same technique as --panditji-row-label below), and use flex
   ordering to move both the master Add button and each row's own Remove
   button to the bottom of their container — "add" reads naturally as
   "add another, after what's already here" and "remove" as a clear,
   separate action per card, not two mystery icons stacked at the top.
--------------------------------------------------------------- */
.panditji-field--Subform .subform-repeatable-wrapper {
	counter-reset: panditji-row;
}

.panditji-field--Subform joomla-field-subform {
	display: flex;
	flex-direction: column;
}

/* The master "Add" button (rendered once, before any rows) — push it
   below every row card. */
.panditji-field--Subform joomla-field-subform > .btn-toolbar {
	order: 999;
	margin-top: 0.25rem;
}

.panditji-field--Subform .subform-repeatable-group {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--c-border, #ede2cd);
	border-radius: var(--radius-md, 14px);
	padding: 1rem;
	margin-bottom: 1rem;
	background: var(--c-bg, #fffdf9);
	counter-increment: panditji-row;
}

.panditji-field--Subform .subform-repeatable-group::before {
	content: var(--panditji-row-label, "Item") " " counter(panditji-row);
	display: block;
	font-weight: 700;
	font-size: 0.85rem;
	color: var(--c-saffron-dark, #a35c16);
	margin-bottom: 0.5rem;
}

/* Each row's own toolbar (Add + Remove) — pushed below that row's own
   fields, with a divider so "Remove" reads as a distinct footer action. */
.panditji-field--Subform .subform-repeatable-group > .btn-toolbar {
	order: 999;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--c-border, #ede2cd);
	text-align: right;
}

/* The per-row Add is redundant with the one master Add button below the
   list — hide it so there is exactly one, unambiguous "add another". */
.panditji-field--Subform .subform-repeatable-group .group-add {
	display: none;
}

.panditji-field--Subform .group-add,
.panditji-field--Subform .group-remove {
	border-radius: var(--radius-pill, 999px);
	border: 1px solid var(--c-border-strong, #ccc);
	background: var(--c-surface, #fff);
	color: var(--c-ink, #333);
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.55rem 1.1rem;
	cursor: pointer;
}

/* The icon-font span is empty on the site (no icon font loaded) —
   remove it from flow entirely and show real bilingual text instead. */
.panditji-field--Subform .group-add span,
.panditji-field--Subform .group-remove span {
	display: none;
}

.panditji-field--Subform .group-add {
	border-color: var(--c-saffron, #dd8a2e);
	color: var(--c-saffron-dark, #a35c16);
}

.panditji-field--Subform .group-add::after {
	content: var(--panditji-add-label, "+ Add");
}

.panditji-field--Subform .group-remove {
	color: var(--c-danger, #8a3a32);
	border-color: var(--c-danger-border, #f0d2cd);
}

.panditji-field--Subform .group-remove::after {
	content: "Remove / \0939\091f\093e\090f\0902";
}

/* Joomla's native calendar-picker button icon relies on an icon font not
   loaded on this site — the template's own sitewide rule hides
   `.icon-calendar` entirely (correct for its other, purely decorative
   uses, e.g. article meta rows), which leaves this FUNCTIONAL button
   blank with nothing to click. Override scoped to just the picker
   button (`.field-calendar`) with a visible emoji fallback. */
.field-calendar .icon-calendar {
	display: inline-block;
}

.field-calendar .icon-calendar::before {
	content: "\1F4C5";
}

/* ---------------------------------------------------------------
   Document upload status
--------------------------------------------------------------- */
.panditji-doc {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	border: 1px solid var(--c-border, #ede2cd);
	border-radius: var(--radius-md, 14px);
	padding: 0.85rem 1rem;
	margin-bottom: 0.75rem;
	background: var(--c-bg, #fffdf9);
}

.panditji-doc__info {
	flex: 1 1 220px;
}

.panditji-doc__type {
	font-weight: 700;
	font-size: 0.92rem;
}

.panditji-doc__filename {
	color: var(--c-ink-soft, #666);
	font-size: 0.82rem;
	word-break: break-all;
}

.panditji-doc__status {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.78rem;
	font-weight: 700;
	padding: 0.2rem 0.6rem;
	border-radius: var(--radius-pill, 999px);
	white-space: nowrap;
}

.panditji-doc__status--uploaded {
	background: var(--c-success-bg, #e6efe4);
	color: var(--c-success, #35603f);
}

.panditji-doc__status--required {
	background: var(--c-danger-bg, #f7e4e1);
	color: var(--c-danger, #8a3a32);
}

.panditji-doc__status--optional {
	background: var(--c-bg-alt, #f4ecd8);
	color: var(--c-ink-soft, #8f867a);
}

.panditji-doc__upload {
	flex: 1 1 100%;
	margin-top: 0.4rem;
}

.panditji-doc__upload input[type="file"] {
	font-size: 0.85rem;
	width: 100%;
}

/* The wizard's own uploaded-documents summary (step_documentslist.php)
   had no styling at all for its own heading or the upload date next to
   each filename — genuinely missing, not merely undecorated: the "Uploaded
   Documents" heading fell back to the browser's default <h3>, and the
   date ran straight into the filename with no visual separation. */
.panditji-uploaded-docs h3 {
	font-family: var(--font-heading, serif);
	font-size: var(--fs-h4, 1.05rem);
	margin: 1.5rem 0 0.75rem;
	color: var(--c-ink, #2b2622);
}

.panditji-uploaded-docs h3:first-child {
	margin-top: 0;
}

.panditji-doc-date {
	display: inline-block;
	margin-left: 0.5rem;
	color: var(--c-ink-faint, #8f867a);
}

/* ---------------------------------------------------------------
   "Add new" forms (My Services: add a service / a weekly slot / a
   blocked date) — previously plain unboxed forms sitting directly under
   a section heading, easy to miss as a distinct action versus the
   read-only list just above them. A dashed border reads as "this is
   where you create something new", distinct from the solid-border
   .panditji-summary-card used for existing items.
--------------------------------------------------------------- */
.panditji-add-card {
	border: 1.5px dashed var(--c-border-strong, #e2d3b3);
	border-radius: var(--radius-md, 14px);
	padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem);
	margin-top: var(--sp-3, 0.75rem);
	background: var(--c-bg-alt, #faf7f2);
}

.panditji-add-card__title {
	font-family: var(--font-heading, serif);
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--c-saffron-dark, #a35c16);
	margin: 0 0 0.85rem;
}

/* ---------------------------------------------------------------
   Bank / privacy notice
--------------------------------------------------------------- */
.panditji-privacy-notice {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	background: var(--c-info-bg, #e6f0f1);
	border: 1px solid var(--c-info-border, #d3e3e5);
	color: var(--c-info, #3a5f66);
	border-radius: var(--radius-sm, 6px);
	padding: 0.85rem 1rem;
	font-size: 0.85rem;
	margin-bottom: 1.25rem;
}

.panditji-privacy-notice__icon {
	flex: 0 0 auto;
	font-size: 1.1rem;
	line-height: 1;
}

/* ---------------------------------------------------------------
   Actions / navigation
--------------------------------------------------------------- */
.panditji-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
	align-items: center;
}

.panditji-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	gap: 0.4rem;
	padding: 0.65rem 1.4rem;
	border-radius: var(--radius-pill, 999px);
	border: 1px solid transparent;
	font-size: 0.92rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	transition: background-color var(--transition-fast, 150ms ease), color var(--transition-fast, 150ms ease), border-color var(--transition-fast, 150ms ease);
}

.panditji-btn--primary,
.panditji-btn--submit {
	background: var(--c-saffron, #b45309);
	color: #fff;
}

.panditji-btn--primary:hover,
.panditji-btn--submit:hover {
	background: var(--c-saffron-dark, #a35c16);
}

.panditji-btn--primary::after {
	content: "\2192";
}

.panditji-btn--secondary {
	background: transparent;
	border-color: var(--c-border-strong, #ccc);
	color: var(--c-ink, #333);
}

.panditji-btn--secondary:hover {
	border-color: var(--c-saffron, #dd8a2e);
	color: var(--c-saffron-dark, #a35c16);
}

.panditji-btn--secondary::before {
	content: "\2190";
}

.panditji-btn--link {
	background: transparent;
	border-color: transparent;
	color: var(--c-ink-soft, #666);
	text-decoration: underline;
	font-weight: 500;
}

.panditji-btn--submit {
	font-size: 1.05rem;
	padding: 0.85rem 2.2rem;
}

.panditji-btn--submit::after {
	content: none;
}

.panditji-submit-form {
	margin-top: 1rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--c-border, #eee);
}

/* ---------------------------------------------------------------
   My Profile
--------------------------------------------------------------- */
.panditji-profile-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	margin-bottom: var(--sp-5, 1.25rem);
	padding: 0.35rem;
	background: var(--c-bg-alt, #faf7f2);
	border: 1px solid var(--c-border, #ede2cd);
	border-radius: var(--radius-pill, 999px);
}

/* Turn the plain underlined "link" buttons into a proper pill/tab menu
   when they live inside the page nav bar — scoped to this container only
   so every OTHER use of .panditji-btn--link (inline Cancel/Decline
   actions inside a card, etc.) keeps its original, appropriately lighter
   look. */
.panditji-profile-nav .panditji-btn--link {
	border: 1px solid transparent;
	color: var(--c-ink-soft, #6b6259);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.85rem;
	padding: 0.5rem 1rem;
	border-radius: var(--radius-pill, 999px);
}

.panditji-profile-nav .panditji-btn--link:hover {
	background: var(--c-surface, #fff);
	color: var(--c-saffron-dark, #a35c16);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.06));
}

.panditji-profile-nav .panditji-nav-icon {
	margin-right: 0.35rem;
}

/* The Logout form is the one "leave" action among "go somewhere" links —
   pushed to the far end of the pill bar so it reads as visually separate
   from the primary navigation choices next to it. */
.panditji-profile-nav form.panditji-form--inline {
	margin-left: auto;
}

/* Compact role-local and in-page navigation. My Avyani remains the global
   account/logout surface; these links only move within the active role. */
.panditji-section-nav {
	position: sticky;
	top: calc(4.75rem + var(--sp-2, 0.5rem));
	z-index: 10;
	overflow: visible;
	flex-wrap: wrap;
}

.panditji-section-nav .panditji-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

.panditji-section-panel,
.panditji-form-section {
	scroll-margin-top: 8rem;
	border: 1px solid var(--c-border, #e5ddcf);
	border-radius: var(--radius-md, 10px);
	background: var(--c-surface, #fff);
	padding: var(--sp-5, 1.5rem);
	margin-block: var(--sp-5, 1.5rem);
}

.panditji-form-section > .panditji-section-title:first-child,
.panditji-section-panel > .panditji-section-title:first-child {
	margin-block-start: 0;
}

@media (max-width: 47.99em) {
	.panditji-section-nav {
		position: static;
		padding: var(--sp-2, 0.5rem);
	}

	.panditji-section-nav .panditji-btn {
		max-width: 100%;
		white-space: normal;
		text-align: left;
	}

	.panditji-section-panel,
	.panditji-form-section {
		padding: var(--sp-4, 1rem);
	}
}

.panditji-profile-photo {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: var(--sp-3, 0.75rem);
	border: 1px solid var(--c-border, #eee);
}

/* ---------------------------------------------------------------
   Dashboard
--------------------------------------------------------------- */
.panditji-dashboard-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4, 1rem);
	margin: var(--sp-4, 1rem) 0 var(--sp-5, 1.25rem);
	padding-bottom: var(--sp-4, 1rem);
	border-bottom: 1px solid var(--c-border, #eee);
}

.panditji-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 0.35rem 0.85rem;
	border-radius: var(--radius-pill, 999px);
	white-space: nowrap;
}

/* A quick-glance icon per status family — helps a card's status register
   before the eye even reads the text, without adding any new markup
   (every status badge already carries one of these modifier classes). */
.panditji-status-badge--success::before {
	content: "\2713";
}

.panditji-status-badge--danger::before {
	content: "\2715";
}

.panditji-status-badge--warning::before {
	content: "\26A0";
}

.panditji-status-badge--info::before {
	content: "\23F3";
}

.panditji-status-badge--neutral {
	background: var(--c-bg-alt, #f4ecd8);
	color: var(--c-ink-soft, #6b6259);
}

.panditji-status-badge--info {
	background: var(--c-info-bg, #e3edf7);
	color: var(--c-info, #2c5a8a);
}

.panditji-status-badge--warning {
	background: var(--c-warning-bg, #fbf0da);
	color: var(--c-warning, #8a6d1d);
}

.panditji-status-badge--success {
	background: var(--c-success-bg, #e6efe4);
	color: var(--c-success, #2e7d32);
}

.panditji-status-badge--danger {
	background: var(--c-danger-bg, #f7e4e1);
	color: var(--c-danger, #8a3a32);
}

.panditji-dashboard-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5, 1.5rem);
	margin: 0;
}

.panditji-dashboard-meta dt {
	font-size: 0.75rem;
	color: var(--c-ink-faint, #8f867a);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.panditji-dashboard-meta dd {
	margin: 0.1rem 0 0;
	font-weight: 600;
	color: var(--c-ink, #2b2622);
}

.panditji-dashboard-meta .panditji-regid {
	color: var(--c-saffron-dark, #b45309);
}

.panditji-dashboard-action {
	border-radius: var(--radius-md, 14px);
	padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem);
	margin-bottom: var(--sp-4, 1rem);
	background: var(--c-bg-alt, #f4ecd8);
}

.panditji-dashboard-action p {
	margin: 0;
}

.panditji-dashboard-action--info {
	background: var(--c-info-bg, #e3edf7);
	color: var(--c-info, #2c5a8a);
}

.panditji-dashboard-action--warning {
	background: var(--c-warning-bg, #fbf0da);
	color: var(--c-warning, #8a6d1d);
}

.panditji-dashboard-action--success {
	background: var(--c-success-bg, #e6efe4);
	color: var(--c-success, #2e7d32);
}

.panditji-dashboard-action--danger {
	background: var(--c-danger-bg, #f7e4e1);
	color: var(--c-danger, #8a3a32);
}

.panditji-dashboard-reason {
	margin-top: 0.5rem;
}

.panditji-dashboard-reason span {
	display: block;
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	opacity: 0.8;
	margin-bottom: 0.2rem;
}

.panditji-correction-progress {
	font-weight: 700;
	color: var(--c-saffron-dark, #b45309);
}

.panditji-correction-item__cta {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--c-saffron-dark, #a35c16);
	margin-top: 0.3rem;
}

.panditji-dashboard-section {
	margin-top: var(--sp-6, 1.75rem);
}

.panditji-dashboard-section h2 {
	font-family: var(--font-heading, inherit);
	font-size: 1.05rem;
	margin: 0 0 var(--sp-4, 1rem);
	color: var(--c-ink, #2b2622);
	padding-left: 0.65rem;
	border-left: 3px solid var(--c-saffron, #dd8a2e);
}

.panditji-doc__status--pending {
	background: var(--c-bg-alt, #f4ecd8);
	color: var(--c-ink-soft, #6b6259);
}

.panditji-dashboard-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sp-4, 1rem);
}

.panditji-dashboard-summary h2 {
	grid-column: 1 / -1;
}

.panditji-summary-card {
	border: 1px solid var(--c-border, #ede2cd);
	border-radius: var(--radius-md, 14px);
	padding: var(--sp-4, 1rem);
	background: var(--c-bg, #fffdf9);
	box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.04));
}

.panditji-summary-card--action {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 8rem;
}

.panditji-summary-card--action .panditji-btn {
	margin-top: auto;
}

.panditji-summary-card h3 {
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--c-ink-faint, #8f867a);
	margin: 0 0 0.5rem;
}

.panditji-summary-card p,
.panditji-summary-card ul {
	margin: 0 0 0.3rem;
	font-size: 0.92rem;
	color: var(--c-ink, #2b2622);
}

.panditji-summary-card ul {
	padding-left: 1.1rem;
}

.panditji-summary-sub {
	color: var(--c-ink-soft, #6b6259) !important;
	font-size: 0.85rem !important;
}

/* ---------------------------------------------------------------
   Public directory + profile
--------------------------------------------------------------- */
.panditji-directory {
	max-width: 1100px;
}

.panditji-directory-filters {
	margin: var(--sp-5, 1.5rem) 0;
}

.panditji-directory-filters__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3, 0.75rem);
	align-items: center;
}

.panditji-directory-filters__search {
	flex: 1 1 220px;
	min-width: 0;
}

.panditji-directory-filters select.panditji-input {
	flex: 0 1 180px;
	width: auto;
}

.panditji-directory-empty {
	text-align: center;
	padding: var(--sp-7, 3rem) var(--sp-4, 1rem);
	color: var(--c-ink-soft, #6b6259);
}

.panditji-directory-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--sp-5, 1.25rem);
}

.panditji-directory-card {
	display: block;
	border: 1px solid var(--c-border, #ede2cd);
	border-radius: var(--radius-lg, 18px);
	overflow: hidden;
	background: var(--c-bg, #fffdf9);
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.panditji-directory-card:hover {
	box-shadow: var(--shadow-md, 0 6px 18px rgba(0, 0, 0, 0.08));
	transform: translateY(-2px);
}

.panditji-directory-card__photo {
	aspect-ratio: 1 / 1;
	background: var(--c-bg-alt, #f4ecd8);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.panditji-directory-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.panditji-directory-card__placeholder {
	font-size: 3rem;
	opacity: 0.35;
}

.panditji-directory-card__body {
	padding: var(--sp-4, 1rem);
}

.panditji-directory-card__name {
	font-family: var(--font-heading, inherit);
	font-size: 1.05rem;
	margin: 0.4rem 0 0.2rem;
	color: var(--c-ink, #2b2622);
}

.panditji-directory-card__specialization {
	color: var(--c-saffron-dark, #a35c16);
	font-weight: 600;
	font-size: 0.88rem;
	margin: 0 0 0.2rem;
}

.panditji-directory-card__rating {
	color: var(--c-ink-soft, #6b6259);
	font-size: 0.85rem;
	margin: 0 0 0.3rem;
}

.panditji-directory-card__meta {
	color: var(--c-ink-soft, #6b6259);
	font-size: 0.82rem;
	margin: 0 0 0.15rem;
}

.panditji-directory-pagination {
	margin-top: var(--sp-6, 1.75rem);
	display: flex;
	justify-content: center;
}

.panditji-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--c-success, #2e7d32);
	background: var(--c-success-bg, #e6efe4);
	padding: 0.2rem 0.55rem;
	border-radius: var(--radius-pill, 999px);
}

.panditji-profile {
	max-width: 760px;
}

.panditji-profile__back {
	margin: 0 0 var(--sp-4, 1rem);
}

.panditji-profile__back a {
	color: var(--c-ink-soft, #6b6259);
	text-decoration: none;
	font-size: 0.9rem;
}

.panditji-profile__header {
	display: flex;
	gap: var(--sp-5, 1.25rem);
	align-items: center;
	flex-wrap: wrap;
}

.panditji-profile__photo {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--c-bg-alt, #f4ecd8);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.panditji-profile__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.panditji-profile__placeholder {
	font-size: 3.5rem;
}

/* Each "About / Karmakand / Education / Locations / Languages / Services /
   Availability / Reviews / Request a Booking" block on the public profile
   was previously a plain heading + paragraphs with no visual boundary
   between one section and the next, relying on the reader to notice a new
   <h2>. Boxing each one as its own card makes the whole page scannable at
   a glance, matching the same card language already used for individual
   services/reviews inside it. */
.panditji-profile .panditji-dashboard-section {
	border: 1px solid var(--c-border, #ede2cd);
	border-radius: var(--radius-lg, 18px);
	padding: var(--sp-5, 1.25rem) var(--sp-5, 1.25rem);
	margin-top: var(--sp-5, 1.25rem);
	background: var(--c-surface, #fff);
}

.panditji-profile .panditji-dashboard-section h2 {
	margin-top: 0;
}

/* Cards-within-a-card (each service/review) read better on a faint tint
   than the identical white as their own section card. */
.panditji-profile .panditji-summary-card {
	background: var(--c-bg-alt, #faf7f2);
}

.panditji-profile__name {
	font-family: var(--font-heading, inherit);
	font-size: 1.6rem;
	margin: 0.3rem 0 0.2rem;
	color: var(--c-ink, #2b2622);
}

.panditji-profile__regid {
	color: var(--c-ink-soft, #6b6259);
	font-size: 0.85rem;
	margin: 0;
}

/* ---------------------------------------------------------------
   Mobile
--------------------------------------------------------------- */
@media (max-width: 560px) {
	.panditji-wizard {
		margin: 0;
		padding: var(--sp-4, 1.1rem);
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	.panditji-field input[type="text"],
	.panditji-field input[type="tel"],
	.panditji-field input[type="email"],
	.panditji-field input[type="number"],
	.panditji-field input[type="date"],
	.panditji-field textarea,
	.panditji-field select,
	.panditji-input {
		max-width: 100%;
	}

	.panditji-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.panditji-btn {
		width: 100%;
	}

	.panditji-summary-card--action {
		min-height: 0;
	}

	.panditji-summary-card form,
	.panditji-summary-card details {
		width: 100%;
	}

	.panditji-doc {
		flex-direction: column;
	}

	.panditji-dashboard-status {
		flex-direction: column;
		align-items: flex-start;
	}

	.panditji-dashboard-meta {
		gap: var(--sp-4, 1rem);
	}

	.panditji-dashboard-summary {
		grid-template-columns: 1fr;
	}

	.panditji-directory-filters__row {
		flex-direction: column;
		align-items: stretch;
	}

	.panditji-directory-filters select.panditji-input {
		flex: 1 1 auto;
		width: 100%;
	}

	.panditji-directory-grid {
		grid-template-columns: 1fr;
	}

	.panditji-profile__header {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ----------------------------------------------------------------
   mod_panditji_vani — Public Mentor Vani homepage module (Phase 8).
   Reuses .panditji-summary-card/.panditji-summary-sub as-is; only the
   grid wrapper and mentor-name line below are new.
---------------------------------------------------------------- */
.mod-panditji-vani__title {
	font-family: var(--font-heading, serif);
	font-size: 1.4rem;
	color: var(--c-saffron-dark, #a35c16);
	margin: 0 0 var(--sp-4, 1rem);
}

.mod-panditji-vani__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--sp-5, 1.25rem);
}

.mod-panditji-vani__card {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease;
}

.mod-panditji-vani__card:hover {
	box-shadow: var(--shadow-md, 0 4px 10px rgba(0, 0, 0, 0.08));
}

.mod-panditji-vani__mentor {
	color: var(--c-saffron-dark, #a35c16) !important;
	font-size: 0.85rem !important;
	font-weight: 600;
	margin: 0 !important;
}

@media (max-width: 640px) {
	.mod-panditji-vani__grid {
		grid-template-columns: 1fr;
	}
}

/* Dakshina QR preview (Mentor dashboard + Offer Dakshina reveal), 2026-08-20 */
.panditji-dakshina-qr {
	display: block;
	max-width: 180px;
	width: 100%;
	height: auto;
	margin-block-start: var(--sp-2, 0.5rem);
	border: 1px solid var(--c-border, #e5ddcf);
	border-radius: var(--radius-sm, 6px);
}

/* Short-field grid layout (2026-08-20 UI/UX pass) — pairs up short
   single-line fields side by side instead of one-per-row on long
   profile/registration forms, cutting scroll length. Opt-in via
   .panditji-field-grid on the wrapping <form>/element; direct children
   that aren't .panditji-field (section headers, notices, action rows,
   hidden inputs) always span full width so they can't share a row with
   a field, and only genuinely short field types get the 50% column —
   textarea/checkboxes/file/subform/note/photo stay full width by not
   being listed. */
.panditji-field-grid {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--sp-5, 1.5rem);
}

.panditji-field-grid > .panditji-field {
	flex: 1 1 100%;
	min-width: 0;
}

.panditji-field-grid > :not(.panditji-field) {
	flex: 1 1 100%;
}

@media (min-width: 48em) {
	.panditji-field-grid > .panditji-field--text,
	.panditji-field-grid > .panditji-field--email,
	.panditji-field-grid > .panditji-field--telephone,
	.panditji-field-grid > .panditji-field--number,
	.panditji-field-grid > .panditji-field--calendar,
	.panditji-field-grid > .panditji-field--date,
	.panditji-field-grid > .panditji-field--time,
	.panditji-field-grid > .panditji-field--list,
	.panditji-field-grid > .panditji-field--spiritualidentity,
	.panditji-field-grid > .panditji-field--radio {
		flex: 1 1 calc(50% - var(--sp-5, 1.5rem) / 2);
	}
}

/* Checkbox option groups: compact flex-wrap chip layout on desktop
   instead of one option per full-width row. Mobile keeps the original
   stacked layout (already fine at narrow widths). */
@media (min-width: 48em) {
	.panditji-field--checkboxes fieldset.checkboxes {
		display: flex;
		flex-wrap: wrap;
		gap: var(--sp-2, 0.5rem);
		border: none;
		padding: 0;
	}

	.panditji-field--checkboxes fieldset.checkboxes .form-check {
		flex: 0 0 auto;
		border: 1px solid var(--c-border, #eee);
		border-radius: var(--radius-pill, 999px);
		padding: 0.4rem 0.9rem;
	}

	.panditji-field--checkboxes fieldset.checkboxes .form-check:has(.form-check-input:checked) {
		border-color: var(--c-saffron, #dd8a2e);
		background: var(--c-saffron-tint, #fdf1e2);
	}
}

/* Rolepicker role-card icons (2026-08-20 UI/UX pass) — reuses the
   homepage's own SVG icon sprite (defined once in templates/avyani/
   index.php, available on every page) rather than a new icon library. */
.panditji-role-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: var(--sp-2, 0.5rem);
	border-radius: var(--radius-pill, 999px);
	background: var(--c-saffron-tint, #fbead2);
	color: var(--c-saffron-dark, #a35c16);
}

.panditji-role-icon svg {
	width: 1.3rem;
	height: 1.3rem;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

/* ---------------------------------------------------------------------
   Public Samagri detail page (Phase C, v1.32.0).

   Reuses the existing .panditji-profile header, .panditji-dashboard-section
   card and .panditji-status-badge chrome — these rules only add the
   definition-list layout those did not already cover. Mobile-first: the
   facts list stacks by default and becomes a two-column grid from 34rem up,
   so a long Devanagari label never squeezes its value into a sliver.
   --------------------------------------------------------------------- */

.panditji-samagri__alt {
	margin: 0.15rem 0 0;
	font-size: 1.05rem;
	opacity: 0.75;
}

.panditji-samagri__facts {
	margin: 0;
}

.panditji-samagri__fact {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.15rem 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.panditji-samagri__fact:last-child {
	border-bottom: 0;
}

.panditji-samagri__fact dt {
	font-weight: 600;
	opacity: 0.7;
	font-size: 0.92rem;
}

.panditji-samagri__fact dd {
	margin: 0;
}

@media (min-width: 34rem) {
	.panditji-samagri__fact {
		grid-template-columns: 12rem 1fr;
		align-items: baseline;
	}
}

.panditji-samagri__hint {
	display: inline-block;
	font-size: 0.86rem;
	opacity: 0.65;
}

.panditji-samagri__related {
	list-style: none;
	margin: 0;
	padding: 0;
}

.panditji-samagri__related li {
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.panditji-samagri__related li:last-child {
	border-bottom: 0;
}

/* 44px minimum tap target on the related-item links, matching the
   established P2 accessibility convention for this component. */
.panditji-samagri__related a {
	display: inline-block;
	min-height: 44px;
	line-height: 44px;
	margin-inline-end: 0.5rem;
}

.panditji-samagri__note {
	margin-top: 1.25rem;
	font-size: 0.88rem;
	opacity: 0.7;
}

/* ---------------------------------------------------------------------
   Panditji Samagri checklist builder (Phase D, v1.33.0).

   Reuses the existing .panditji-dashboard-section card, .panditji-btn and
   .panditji-status-badge chrome; these rules only add the row/picker layout.
   Mobile-first: rows stack, and the field strip becomes a single wrapping
   flex line so a long Devanagari name never squeezes the inputs.
   --------------------------------------------------------------------- */

.panditji-samagri__templates,
.panditji-samagri__rows {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}

.panditji-samagri__templates li {
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.panditji-samagri__templates li:last-child {
	border-bottom: 0;
}

.panditji-samagri__templates form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	justify-content: space-between;
}

.panditji-samagri__template-name {
	font-weight: 600;
}

.panditji-samagri__blank {
	margin-top: 0.75rem;
}

.panditji-samagri__row {
	padding: 0.75rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.panditji-samagri__row:last-of-type {
	border-bottom: 0;
}

.panditji-samagri__row-name {
	margin-bottom: 0.4rem;
}

.panditji-samagri__row-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.9rem;
	align-items: flex-end;
}

.panditji-samagri__field {
	display: inline-flex;
	flex-direction: column;
	gap: 0.15rem;
	font-size: 0.9rem;
}

.panditji-samagri__field label {
	font-size: 0.8rem;
	opacity: 0.7;
}

.panditji-samagri__field input[type="number"] {
	width: 6rem;
}

.panditji-samagri__field--wide {
	flex: 1 1 16rem;
}

.panditji-samagri__field--wide input,
.panditji-samagri__field--wide textarea {
	width: 100%;
}

.panditji-samagri__field--narrow input[type="number"] {
	width: 4.5rem;
}

.panditji-samagri__unit {
	display: inline-block;
	padding-top: 0.35rem;
	opacity: 0.75;
}

/* 44px minimum tap targets, per the established P2 accessibility convention. */
.panditji-samagri__remove,
.panditji-samagri__learn {
	min-height: 44px;
	line-height: 44px;
	display: inline-block;
}

.panditji-samagri__learn {
	margin-inline-start: 0.5rem;
	font-size: 0.86rem;
}

.panditji-samagri__newrow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 0.9rem;
	align-items: flex-end;
	border: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius: 0.4rem;
	padding: 0.75rem;
	margin: 1rem 0;
}

.panditji-samagri__newrow legend {
	font-size: 0.9rem;
	font-weight: 600;
	padding: 0 0.35rem;
}

.panditji-samagri__search {
	width: 100%;
	margin-bottom: 0.6rem;
}

.panditji-samagri__picker {
	max-height: 30rem;
	overflow-y: auto;
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: 0.4rem;
}

.panditji-samagri__picker-group {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.panditji-samagri__picker-group h3 {
	font-size: 0.92rem;
	margin: 0 0 0.35rem;
	opacity: 0.8;
}

.panditji-samagri__picker-item {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.3rem 0;
	font-size: 0.92rem;
}

@media (min-width: 48rem) {
	.panditji-samagri__row {
		display: grid;
		grid-template-columns: 18rem 1fr;
		gap: 0.5rem 1rem;
		align-items: start;
	}

	.panditji-samagri__row-name {
		margin-bottom: 0;
	}
}

/* ---------------------------------------------------------------------
   Samagri sharing + Yajman marking (Phase E, v1.34.0).
   Builds on the Phase D row/picker rules; adds the progress bar, the
   three-state marking control and the read-only locked presentation.
   --------------------------------------------------------------------- */

.panditji-samagri__bar {
	display: block;
	height: 8px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.09);
	overflow: hidden;
	margin: 0.35rem 0 0.6rem;
}

.panditji-samagri__bar > span {
	display: block;
	height: 100%;
	background: currentColor;
	opacity: 0.55;
}

.panditji-samagri__note-box {
	border-inline-start: 3px solid rgba(0, 0, 0, 0.15);
	padding: 0.4rem 0 0.4rem 0.75rem;
	margin: 0.75rem 0 0;
}

.panditji-samagri__instruction {
	font-size: 0.88rem;
	opacity: 0.8;
	margin-top: 0.2rem;
}

/* Three-state marking. Each state is a full 44px tap target with a visible
   selected state, per the established P2 accessibility convention — a Yajman
   will most often use this on a phone while shopping. */
.panditji-samagri__states {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.panditji-samagri__state {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 0.75rem;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.9rem;
	gap: 0.4rem;
}

.panditji-samagri__state input {
	margin: 0;
}

.panditji-samagri__state:has(input:checked) {
	border-color: currentColor;
	box-shadow: inset 0 0 0 1px currentColor;
	font-weight: 600;
}

/* Fallback for browsers without :has() — the radio itself still shows state. */
.panditji-samagri__state--undo {
	opacity: 0.75;
	font-size: 0.85rem;
}

.panditji-samagri__row--mark .panditji-samagri__row-fields {
	gap: 0.6rem 0.9rem;
}

@media (min-width: 48rem) {
	.panditji-samagri__row--mark {
		grid-template-columns: 20rem 1fr;
	}
}

/* ---------------------------------------------------------------------
   Samagri print sheet + WhatsApp text (Phase F, v1.35.0).

   The print sheet is served with &tmpl=component, so it has no site chrome
   and these rules are the whole design. Screen styles stay deliberately
   plain; the @media print block is what actually matters.
   --------------------------------------------------------------------- */

.panditji-samagri__watext {
	width: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.88rem;
	line-height: 1.5;
	white-space: pre;
	overflow-x: auto;
}

.samagri-print {
	max-width: 48rem;
	margin: 0 auto;
	padding: 1.25rem;
	font-size: 0.95rem;
	line-height: 1.45;
}

.samagri-print__title {
	margin: 0 0 0.15rem;
	font-size: 1.5rem;
}

.samagri-print__subtitle {
	margin: 0 0 1rem;
	opacity: 0.7;
	font-size: 0.9rem;
}

.samagri-print__meta {
	margin: 0 0 1rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.2rem 1rem;
}

.samagri-print__meta > div {
	display: flex;
	gap: 0.5rem;
}

.samagri-print__meta dt {
	font-weight: 600;
	min-width: 7rem;
	opacity: 0.75;
}

.samagri-print__meta dd {
	margin: 0;
}

.samagri-print__panditji-note {
	border-inline-start: 3px solid rgba(0, 0, 0, 0.25);
	padding: 0.35rem 0 0.35rem 0.7rem;
	margin: 0 0 1rem;
}

.samagri-print__group {
	font-size: 1.05rem;
	margin: 1.1rem 0 0.35rem;
	padding-bottom: 0.2rem;
	border-bottom: 2px solid rgba(0, 0, 0, 0.35);
}

.samagri-print__table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 0.5rem;
}

.samagri-print__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.samagri-print__table th,
.samagri-print__table td {
	text-align: start;
	padding: 0.3rem 0.4rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	vertical-align: top;
}

.samagri-print__table thead th {
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	opacity: 0.7;
}

.samagri-print__tick {
	width: 1.6rem;
	font-size: 1.15rem;
	line-height: 1;
}

.samagri-print__qty {
	white-space: nowrap;
}

.samagri-print__status {
	white-space: nowrap;
	font-size: 0.88rem;
}

.samagri-print__muted {
	opacity: 0.65;
	font-size: 0.85rem;
}

.samagri-print__note {
	font-size: 0.85rem;
	opacity: 0.8;
	margin-top: 0.1rem;
}

.samagri-print__progress {
	margin: 0.75rem 0 0;
	font-weight: 600;
}

.samagri-print__footer {
	margin-top: 1.25rem;
	padding-top: 0.5rem;
	border-top: 1px solid rgba(0, 0, 0, 0.2);
	font-size: 0.82rem;
	opacity: 0.75;
}

@media (min-width: 34rem) {
	.samagri-print__meta {
		grid-template-columns: 1fr 1fr;
	}
}

@media print {
	.samagri-print {
		max-width: none;
		padding: 0;
		font-size: 11pt;
	}

	/* Anything interactive is meaningless on paper. */
	.samagri-print__noprint {
		display: none !important;
	}

	/* Never split a Samagri row across two pages — a half-printed item is
	   worse than a slightly shorter page. */
	.samagri-print__table tr {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	.samagri-print__group {
		break-after: avoid;
		page-break-after: avoid;
	}

	.samagri-print__table th,
	.samagri-print__table td {
		border-bottom: 1px solid #999;
	}
}

/* ---------------------------------------------------------------------------
   H2 — the public Puja catalogue. Reuses the existing panditji-* vocabulary;
   these rules only add what the catalogue's own shapes need.
   --------------------------------------------------------------------------- */
.panditji-puja__search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: flex-end;
}

.panditji-puja__search .panditji-samagri__field {
	flex: 1 1 12rem;
	min-width: 0;
}

.panditji-puja__search .panditji-samagri__field--wide {
	flex: 2 1 20rem;
}

.panditji-puja__cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.panditji-puja__cat {
	border: 1px solid var(--panditji-border, #e5ddd0);
	border-radius: 0.5rem;
	padding: 0.85rem 1rem;
	background: var(--panditji-surface, #fffdf9);
}

.panditji-puja__cat > a {
	text-decoration: none;
}

.panditji-puja__desc {
	margin-top: 0.35rem;
	font-size: 0.9rem;
	line-height: 1.45;
	opacity: 0.85;
}

.panditji-puja__name {
	text-decoration: none;
}

.panditji-puja__name:hover,
.panditji-puja__name:focus {
	text-decoration: underline;
}

.panditji-puja__article :is(p, ul, ol) {
	line-height: 1.65;
}

/* One column on a phone; the grid above already collapses, the search row
   needs telling. */
@media (max-width: 40rem) {
	.panditji-puja__search {
		flex-direction: column;
		align-items: stretch;
	}

	.panditji-puja__search .panditji-samagri__field,
	.panditji-puja__search .panditji-samagri__field--wide {
		flex: 1 1 auto;
	}
}

/* H4 — the template mapped to this booking's Puja. Lifted, not preselected:
   the Panditji still chooses. */
.panditji-samagri__template--recommended {
	border-left: 3px solid var(--avy-accent, #b45309);
	padding-left: 0.75rem;
}

/* ---------------------------------------------------------------
 * 1.41.3 — wizard steps as clickable tabs.
 *
 * The stepper markup became <a> elements so any step is reachable
 * directly. These rules only neutralise the anchor defaults the
 * browser adds and give the affordances a tab needs (pointer, hover,
 * focus ring); the existing .panditji-step--done/current/error
 * styling above is untouched and still drives the colours.
 * --------------------------------------------------------------- */
a.panditji-step {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	border-radius: var(--radius-sm, 6px);
	transition: background-color 0.15s ease;
}

a.panditji-step:hover,
a.panditji-step:focus-visible {
	background: var(--c-saffron-tint, #fbead2);
	text-decoration: none;
}

a.panditji-step:focus-visible {
	outline: 2px solid var(--c-saffron, #dd8a2e);
	outline-offset: 2px;
}

/* The connector line is decorative; it must not pick up hover paint. */
a.panditji-step:hover::after,
a.panditji-step:focus-visible::after {
	background: var(--c-border-strong, #e2d3b3);
}

.panditji-help--warning {
	color: var(--c-danger, #8a3a32);
	font-weight: 600;
}

/* 1.41.5: consistent controls and readable spacing across self-service pages. */
.panditji-wizard { padding: clamp(1rem, 3vw, 2.25rem); margin-block: 2rem; }
.panditji-wizard--samvad, .panditji-wizard--mentor { --pj-max: 68rem; }
.panditji-wizard--samvad .panditji-dashboard-section { text-align: start; margin-block: 2rem; }
.panditji-wizard--samvad .panditji-lead { max-width: 52rem; margin-inline: auto; }
.panditji-wizard .panditji-dashboard-summary { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.panditji-wizard .panditji-summary-card { min-width: 0; padding: 1.25rem; overflow-wrap: anywhere; }
.panditji-wizard .panditji-summary-card h3 { line-height: 1.55; letter-spacing: normal; text-transform: none; }
.panditji-wizard .panditji-summary-card--action { display: flex; flex-direction: column; align-items: start; }
.panditji-wizard .panditji-summary-card--action > a { margin-top: auto; }
.panditji-wizard .panditji-btn { min-height: 44px; border-radius: .65rem; line-height: 1.45; text-decoration: none !important; padding: .65rem 1rem; font: inherit; font-weight: 600; max-width: 100%; }
.panditji-wizard .panditji-btn--primary, .panditji-wizard .panditji-btn--submit { color: #fff; background: #87551d; border-color: #87551d; }
.panditji-wizard .panditji-btn--primary:hover, .panditji-wizard .panditji-btn--submit:hover { background: #694016; }
.panditji-wizard .panditji-btn--link { color: #68431d; background: #fffaf2; border-color: #d7c4a8; }
.panditji-wizard .panditji-btn--link:hover { background: #f3e9d9; }
.panditji-wizard .panditji-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.panditji-wizard :is(a, button, input, select, textarea):focus-visible { outline: 3px solid #926629; outline-offset: 3px; }
.panditji-wizard .panditji-actions { gap: .65rem; flex-wrap: wrap; margin-top: 1rem; }
.panditji-wizard .panditji-actions .panditji-form { margin: 0; flex: 0 1 auto; }
.panditji-wizard .panditji-profile-nav { border-radius: .85rem; gap: .5rem; padding: .6rem; }
.panditji-wizard .panditji-section-nav { position: static; }
.panditji-wizard .panditji-section-nav .panditji-btn { flex: 1 1 150px; white-space: normal; text-align: center; }
.panditji-wizard .panditji-section-panel { padding: clamp(.85rem, 2.5vw, 1.5rem); margin-block: 1.5rem; }
.panditji-wizard .panditji-field { margin-bottom: 1.2rem; }
.panditji-wizard .panditji-field > label { display: block; font-weight: 600; margin-bottom: .45rem; }
.panditji-wizard :is(.panditji-input, .panditji-select, .panditji-textarea) { width: 100%; box-sizing: border-box; min-height: 44px; border-radius: .55rem; }
.panditji-wizard .panditji-status-badge { white-space: normal; max-width: 100%; letter-spacing: normal; text-transform: none; }
@media (max-width: 575px) {
    .panditji-wizard { margin-block: 1rem; border-radius: 1rem; }
    .panditji-wizard .panditji-summary-card { padding: 1rem; }
    .panditji-wizard .panditji-actions { align-items: stretch; }
    .panditji-wizard .panditji-actions > :is(a,button,form) { flex: 1 1 100%; width: 100%; }
    .panditji-wizard .panditji-actions form .panditji-btn { width: 100%; }
    .panditji-wizard .panditji-section-nav .panditji-btn { flex-basis: 100%; }
}