/*
 * 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;
}