/**
 * Darban core styles.
 *
 * Theming is driven by CSS custom properties so templates and the color
 * palette only need to override variables, never rules. No dark-mode styles are
 * defined by design. Icons are SVG; no emoji fonts are used anywhere.
 */

.darban-form {
	--darban-primary: #4f46e5;
	--darban-primary-hover: #4338ca;
	--darban-on-primary: #ffffff;
	--darban-text: #1f2330;
	--darban-muted: color-mix( in srgb, var(--darban-text, #1f2330) 55%, transparent );
	--darban-bg: #ffffff;
	--darban-field-bg: #f4f5f7;
	--darban-field-border: color-mix( in srgb, var(--darban-text, #1f2330) 14%, transparent );
	--darban-radius: 14px;
	--darban-field-radius: 11px;
	--darban-success: #16a34a;
	--darban-error: #dc2626;
	--darban-warning: #d97706;
	--darban-gap: 16px;
	--darban-font: inherit;

	box-sizing: border-box;
	color: var(--darban-text);
	font-family: var(--darban-font);
	width: 100%;
}

.darban-form *,
.darban-form *::before,
.darban-form *::after {
	box-sizing: border-box;
}

.darban-form__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--darban-gap);
	background: var(--darban-bg);
	padding: 28px;
	border-radius: var(--darban-radius);
}

.darban-form--plain .darban-form__inner {
	padding: 0;
	background: transparent;
}

.darban-form__title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.35;
}

/* Unified step header: a heading column (title + optional subtitle, fixed
 * rhythm) with the pencil "edit what I entered" button pinned to the title
 * line on the password / OTP steps. Every step uses this same structure, so
 * headings never jump or re-align while moving through the flow. */
.darban-step__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.darban-step__heading {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.darban-step__heading .darban-form__title,
.darban-step__heading .darban-form__subtitle {
	margin: 0;
}

/* The pencil: sized to the title's line box (22px x 1.35 ≈ 30px) so it sits
 * exactly on the title line, never inflating the header or pushing the text. */
.darban-form__edit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	align-self: flex-start;
	width: 30px !important;
	height: 30px;
	padding: 0;
	border: 1px solid var(--darban-field-border, #d6d9e0);
	border-radius: 50%;
	background: var(--darban-field-bg, #f4f5f7);
	color: var(--darban-muted, #9aa0ab);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.darban-form__edit:hover {
	color: var(--darban-primary, #4f46e5);
	border-color: var(--darban-primary, #4f46e5);
	background: color-mix( in srgb, var(--darban-primary, #4f46e5) 8%, transparent );
}

.darban-form__edit:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--darban-primary, #4f46e5) 22%, transparent );
}

.darban-form__edit svg {
	display: block;
	width: 14px;
	height: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.darban-form__edit {
		transition: none;
	}
}

.darban-form__subtitle {
	margin: -6px 0 4px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--darban-muted);
}

/* Steps lay their children out in a wrapping row so that two half-width
 * builder fields can share a line. Anything that is not explicitly half width
 * claims the whole row (see .darban-field--full and the flex-basis rule below),
 * which reproduces the previous stacked column exactly for every existing
 * step — only fields marked "half" behave differently. */
.darban-step {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--darban-gap);
}

/* Every direct child of a step is full width unless it opts out. */
.darban-step > * {
	flex: 1 1 100%;
	min-width: 0;
}

.darban-step[hidden] {
	display: none;
}

/* Fields */
.darban-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.darban-field__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--darban-text);
}

.darban-field__req {
	color: var(--darban-error);
	margin-inline-start: 2px;
}

.darban-field__input {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	font-size: 15px;
	color: var(--darban-text);
	background: var(--darban-field-bg);
	border: 1px solid var(--darban-field-border);
	border-radius: var(--darban-field-radius);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
	font-family: inherit;
}

.darban-field__input:focus {
	outline: none;
	border-color: var(--darban-primary);
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--darban-primary) 18%, transparent );
}

/* Invalid state -----------------------------------------------------------
 *
 * Set when a required field is submitted empty (or the server rejects a
 * value) and removed as soon as the user edits the field. The colour is not
 * the only signal: the message in the notification area names the problem, so
 * this reads for colour-blind users too. */
.darban-field--invalid .darban-field__input,
.darban-field--invalid .darban-field__select,
/* The native select is visually hidden, so the error must show on the custom
 * trigger that stands in for it. */
.darban-field--invalid .darban-combo__trigger {
	border-color: var(--darban-error);
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--darban-error) 15%, transparent );
}

.darban-field--invalid .darban-check__box,
.darban-field--invalid .darban-radio__input {
	border-color: var(--darban-error);
}

.darban-field--invalid .darban-field__label,
.darban-field--invalid .darban-check__text {
	color: var(--darban-error);
}

/* Inputs whose CONTENT is left-to-right regardless of the page language:
 * phone numbers, emails, usernames and passwords. On a Persian or Arabic page
 * the label above stays RTL, but the value itself must read left-to-right and
 * start from the left edge — otherwise "09123456789" or "user@mail.com" is
 * rendered with the cursor and text hugging the right, which is wrong for this
 * kind of data.
 *
 * `text-align: left` is deliberate rather than `start`: `start` would resolve
 * against the element's own (now LTR) direction and happen to be correct, but
 * stating it physically documents the intent and survives a theme that resets
 * the direction. The matching dir="ltr" attribute in the markup makes the
 * browser place the caret and any selection correctly too. */
.darban-field__input--ltr {
	direction: ltr;
	text-align: left;
	/* Latin digits/letters even if the theme picks a Persian-digit font. */
	font-variant-numeric: lining-nums tabular-nums;
}

/* A right-to-left page still aligns the placeholder to the left here, so the
 * hint sits where the user will actually start typing. */
.darban-field__input--ltr::placeholder {
	text-align: left;
}

/* Buttons */
.darban-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 20px;
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	border: none;
	border-radius: var(--darban-field-radius);
	cursor: pointer;
	transition: background 0.18s ease, transform 0.08s ease;
}

.darban-btn:active {
	transform: translateY(1px);
}

.darban-btn--primary {
	background: var(--darban-primary);
	color: var(--darban-on-primary);
}

.darban-btn--primary:hover {
	opacity:.8;
}

.darban-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.darban-link {
	background: none;
	border: none;
	padding: 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--darban-primary);
	cursor: pointer;
	align-self: center;
	font-family: inherit;
}

.darban-link:disabled {
	color: var(--darban-muted);
	cursor: not-allowed;
}

/* Tabs */
.darban-tabs {
	display: flex;
	gap: 6px;
	padding: 5px;
	background: var(--darban-field-bg);
	border-radius: var(--darban-field-radius);
}

.darban-tabs__tab {
	flex: 1;
	height: 40px;
	border: none;
	background: transparent;
	font-size: 14px;
	font-weight: 600;
	color: var(--darban-muted);
	border-radius: 8px;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.18s ease, color 0.18s ease;
}

.darban-tabs__tab.is-active {
	background: var(--darban-bg);
	color: var(--darban-text);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* OTP */
.darban-otp {
	display: flex;
	gap: 10px;
	justify-content: center;
	direction: ltr;
}

.darban-otp__box {
	width: 48px;
	height: 56px;
	text-align: center;
	font-size: 22px;
	font-weight: 700;
	color: var(--darban-text);
	background: var(--darban-field-bg);
	border: 1px solid var(--darban-field-border);
	border-radius: var(--darban-field-radius);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.darban-otp__box:focus {
	outline: none;
	border-color: var(--darban-primary);
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--darban-primary) 18%, transparent );
}

/* Width control for builder fields. `--half` lets two fields share a row;
 * `--full` is the explicit counterpart so a field's width never depends on
 * what happens to sit next to it. */
.darban-field--half {
	flex: 1 1 calc(50% - var(--darban-gap));
	max-width: calc(50% - var(--darban-gap) / 2);
}

.darban-field--full {
	flex: 1 1 100%;
	max-width: 100%;
}

/* Below the mobile breakpoint two half fields would be too cramped, so they
 * fall back to a full row each. */
@media (max-width: 480px) {
	.darban-field--half {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* Select ------------------------------------------------------------------
 *
 * The real <select> stays in the DOM (it holds the value and the `required`
 * flag) but is visually replaced by a styled trigger + listbox. Without JS the
 * native control is shown instead, so the form never depends on the script. */

.darban-combo {
	position: relative;
	display: block;
	width: 100%;
}

/* The native control. It is only taken out of view once the script has built
 * the custom trigger (which is what adds .darban-combo__native), so with
 * JavaScript disabled the plain <select> renders and stays fully usable. */
.darban-combo__native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* No script: the untouched select keeps the normal field look. */
.darban-combo > select:not(.darban-combo__native) {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 15px;
	color: var(--darban-text);
	background: var(--darban-field-bg);
	border: 1px solid var(--darban-field-border);
	border-radius: var(--darban-field-radius);
}

.darban-combo__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	height: 48px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 15px;
	text-align: start;
	color: var(--darban-text);
	background: var(--darban-field-bg);
	border: 1px solid var(--darban-field-border);
	border-radius: var(--darban-field-radius);
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.darban-combo__trigger:focus-visible {
	outline: none;
	border-color: var(--darban-primary);
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--darban-primary) 18%, transparent );
}

.darban-combo.is-open .darban-combo__trigger {
	border-color: var(--darban-primary);
}

.darban-combo__value {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Nothing chosen yet: the trigger shows the placeholder, so it reads as a hint
 * rather than as a real value. */
.darban-combo--empty .darban-combo__value {
	color: var(--darban-muted);
}

.darban-combo__caret {
	display: flex;
	flex: 0 0 auto;
	color: var(--darban-muted);
	transition: transform 0.18s ease;
}

.darban-combo.is-open .darban-combo__caret {
	transform: rotate(180deg);
}

.darban-combo__menu {
	position: absolute;
	inset-inline-start: 0;
	top: calc(100% + 6px);
	width: 100%;
	background: var(--darban-bg, #fff);
	border: 1px solid var(--darban-field-border);
	border-radius: var(--darban-field-radius);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
	padding: 6px;
	z-index: 20;
	box-sizing: border-box;
	transform-origin: top;
	animation: darban-combo-pop 0.16s ease;
}

/* Not enough room below: the script flips the menu above the trigger. */
.darban-combo__menu--up {
	top: auto;
	bottom: calc(100% + 6px);
	transform-origin: bottom;
	animation-name: darban-combo-pop-up;
}

.darban-combo__menu[hidden] {
	display: none !important;
}

/* While the script measures the menu (which happens on every scroll step),
 * the pop animation must not restart — see the same guard on the dial menu. */
.darban-combo__menu--measuring {
	animation: none !important;
	transition: none !important;
}

/* The height cap is written by the script from the room actually available;
 * the list scrolls inside it when there are many options. */
.darban-combo__list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.darban-combo__list::-webkit-scrollbar {
	width: 8px;
}

.darban-combo__list::-webkit-scrollbar-thumb {
	background: color-mix( in srgb, var(--darban-text) 22%, transparent );
	border-radius: 8px;
}

.darban-combo__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--darban-text);
	cursor: pointer;
	text-align: start;
}

/* The placeholder row is never offered as a real choice. */
.darban-combo__item--placeholder {
	display: none;
}

.darban-combo__item.is-active {
	background: color-mix( in srgb, var(--darban-primary) 10%, transparent );
}

.darban-combo__item.is-selected {
	color: var(--darban-primary);
	font-weight: 600;
}

.darban-combo__item.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

@keyframes darban-combo-pop {
	from { opacity: 0; transform: translateY(-4px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes darban-combo-pop-up {
	from { opacity: 0; transform: translateY(4px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.darban-combo__menu {
		animation: none;
	}
	.darban-combo__caret {
		transition: none;
	}
}

/* Checkbox ---------------------------------------------------------------- */

/* A consent checkbox is a row, not a stacked label + control: the box sits
 * inline beside its text and keeps its natural size instead of being stretched
 * to the full width of the form by the generic input rules. */
.darban-field--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: 9px;
	cursor: pointer;
}

.darban-check__box {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	min-height: 18px;
	max-width: 18px;
	margin: 0;
	padding: 0 !important;
	/* Nudge the box onto the first line of its text. */
	margin-block-start: 2px;
	border: 1.5px solid var(--darban-field-border);
	border-radius: 5px;
	background: var(--darban-field-bg, #fff);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	position: relative;
}

.darban-check__box:checked {
	background-color: var(--darban-primary);
	border-color: var(--darban-primary);
	/* The tick is drawn rather than shipped as an image so it always matches
	 * the box size and inherits crisply on high-DPI screens. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
}

.darban-check__box:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--darban-primary) 22%, transparent );
}

.darban-check__text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--darban-text);
}

/* Radio ------------------------------------------------------------------- */

.darban-field--radio {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.darban-radio__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.darban-radio {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.darban-radio__input {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	min-height: 18px;
	max-width: 18px;
	margin: 0;
	padding: 0 !important;
	border: 1.5px solid var(--darban-field-border);
	border-radius: 50%;
	background: var(--darban-field-bg, #fff);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The dot is an inset shadow, so it scales with the control and needs no
 * extra element in the markup. */
.darban-radio__input:checked {
	border-color: var(--darban-primary);
	box-shadow: inset 0 0 0 4px var(--darban-primary);
}

.darban-radio__input:focus-visible {
	outline: none;
	box-shadow: inset 0 0 0 4px var(--darban-primary), 0 0 0 3px color-mix( in srgb, var(--darban-primary) 22%, transparent );
}

.darban-radio__text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--darban-text);
}

/* Loading */
.darban-form.is-loading .darban-form__inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix( in srgb, var(--darban-bg) 60%, transparent );
	border-radius: inherit;
	z-index: 1;
}

/* Notifications — Darban floating toasts.
 * Self-contained identity (own variables), so toasts look identical no matter
 * which template or host page the form lives in. Layer spans the viewport with
 * equal side insets and centers each toast — avoids 50%/100vw scrollbar skew. */
.darban-toast-layer {
	position: fixed;
	top: 18px;
	left: 12px;
	right: 12px;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	pointer-events: none;
	transform: none;
}

.darban-toast {
	--dt-accent: #4f46e5;
	--dt-text: #1f2330;
	--dt-bg: #ffffff;

	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 420px;
	box-sizing: border-box;
	padding: 11px 13px;
	background: var(--dt-bg);
	color: var(--dt-text);
	border: 1px solid rgba(15, 23, 42, 0.07);
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.06);
	overflow: hidden;
	cursor: pointer;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(-14px) scale(0.97);
	transition: opacity 0.28s cubic-bezier(0.21, 1.02, 0.53, 1.15), transform 0.28s cubic-bezier(0.21, 1.02, 0.53, 1.15);
}

.darban-toast.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

.darban-toast.is-leaving {
	opacity: 0;
	transform: translateY(-10px) scale(0.97);
}

/* Dedupe cue: the same message arriving again bumps the existing toast. */
.darban-toast.is-bump {
	animation: darban-toast-bump 0.3s ease;
}

@keyframes darban-toast-bump {
	40% {
		transform: scale(1.03);
	}
}

.darban-toast--success { --dt-accent: #16a34a; }
.darban-toast--error   { --dt-accent: #dc2626; }
.darban-toast--warning { --dt-accent: #d97706; }
.darban-toast--info    { --dt-accent: #4f46e5; }

/* Status-tinted icon bubble; the stroke icon inside draws itself in. */
.darban-toast__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: color-mix( in srgb, var(--dt-accent) 12%, #ffffff );
	color: var(--dt-accent);
}

.darban-toast__draw {
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
	animation: darban-toast-draw 0.45s ease-out 0.12s forwards;
}

@keyframes darban-toast-draw {
	to {
		stroke-dashoffset: 0;
	}
}

.darban-toast__text {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
}

.darban-toast__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: rgba(31, 35, 48, 0.45);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.darban-toast__close:hover {
	background: rgba(15, 23, 42, 0.06);
	color: var(--dt-text);
}

/* Auto-dismiss countdown; hovering the toast pauses it (the JS timer pauses
 * in step). Anchored inline-start so it drains correctly in RTL and LTR. */
.darban-toast__progress {
	position: absolute;
	bottom: 0;
	inset-inline-start: 0;
	height: 3px;
	width: 100%;
	background: linear-gradient( 90deg, var(--dt-accent), color-mix( in srgb, var(--dt-accent) 55%, #ffffff ) );
	animation: darban-toast-progress linear forwards;
}

.darban-toast:hover .darban-toast__progress {
	animation-play-state: paused;
}

@keyframes darban-toast-progress {
	from {
		width: 100%;
	}
	to {
		width: 0%;
	}
}

/* Responsive */
@media ( max-width: 480px ) {
	.darban-form__inner {
		padding: 20px;
	}

	.darban-otp__box {
		width: 42px;
		height: 50px;
		font-size: 19px;
	}

	.darban-toast-layer {
		top: max(12px, env(safe-area-inset-top, 0px));
		left: max(12px, env(safe-area-inset-left, 0px));
		right: max(12px, env(safe-area-inset-right, 0px));
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.darban-form *,
	.darban-toast {
		transition: none !important;
	}

	.darban-toast,
	.darban-toast__draw,
	.darban-toast__progress,
	.darban-rc__panel,
	.darban-rc__tile,
	.darban-rc__check.is-checked,
	.darban-rc__check.is-checked .darban-rc__box::after {
		animation: none !important;
	}

	.darban-toast__draw {
		stroke-dashoffset: 0;
	}
}

/* Captcha */
.darban-captcha {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.darban-captcha__image {
	align-self: center;
	border-radius: var(--darban-field-radius);
	border: 1px solid var(--darban-field-border);
}

.darban-captcha__prompt {
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.darban-captcha__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.darban-captcha__tile {
	height: 56px;
	font-size: 22px;
	font-weight: 700;
	color: var(--darban-text);
	background: var(--darban-field-bg);
	border: 2px solid var(--darban-field-border);
	border-radius: var(--darban-field-radius);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
	font-family: inherit;
}

.darban-captcha__tile.is-on {
	border-color: var(--darban-primary);
	background: color-mix( in srgb, var(--darban-primary) 12%, var(--darban-field-bg) );
}

/* Divider and Google button */
.darban-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--darban-muted);
	font-size: 13px;
	margin: 2px 0;
}

.darban-divider::before,
.darban-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--darban-field-border);
}

.darban-btn--google {
	background: var(--darban-bg);
	color: var(--darban-text);
	border: 1px solid var(--darban-field-border);
	text-decoration: none;
	gap: 10px;
}

.darban-btn--google:hover {
	border-color: var(--darban-primary);
}

/* Country dial-code selector
 *
 * DIRECTION: a phone number, an email and a username are all left-to-right
 * data even when the surrounding page is Persian or Arabic. The inputs that
 * hold them therefore carry dir="ltr" (see .darban-field__input--ltr below),
 * and the dial selector must sit on the PHYSICAL LEFT of the box in every
 * language, with the input's free space reserved on that same left side.
 *
 * Logical properties (inset-inline-start / padding-inline-start) resolve
 * against the element's own direction, so on an RTL page they flip to the
 * right — the selector jumped to the right edge while the digits still ran
 * left-to-right, and the padding was reserved on the wrong side. Because the
 * dial wrapper is a plain div it inherits the page direction, so these are
 * pinned with physical left/right values instead. */
.darban-field--has-dial {
	position: relative;
}

.darban-field--has-dial .darban-field__input {
	/* Physical left: the dial button's side, in every language. */
	padding-left: 100px !important;
	padding-right: 14px !important;
}

.darban-dial {
    position: absolute;
    left: 0px;
    right: auto;
    bottom: 0;
    height: 46px;
    z-index: 1;
}

/* Only the trigger's own contents (flag, +code, caret) are forced
 * left-to-right. The wrapper itself is left on the page direction so the
 * dropdown below can list country names in the site's own language without
 * having to undo an inherited LTR. */
.darban-dial__button {
	direction: ltr;
}

.darban-dial__button {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 46px;
	padding: 0 10px;
	background: transparent;
	border: none;
	/* Physical right: the divider always faces the number, never the page edge. */
	border-right: 1px solid var(--darban-field-border);
	border-left: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	color: var(--darban-text);
}

.darban-dial__flag {
	height: 16px;
	object-fit: cover;
	border-radius: 2px;
	display: block;
}

.darban-dial__code {
	direction: ltr;
	font-weight: 600;
}

.darban-dial__caret {
	display: inline-flex;
	color: var(--darban-muted);
}

.darban-dial__caret svg {
	display: block;
	transition: transform 0.18s ease;
}

.darban-dial.is-open .darban-dial__caret svg {
	transform: rotate(180deg);
}

/* The dropdown lists country names in the page's own language, so its rows
 * follow the page direction; only the dial codes inside stay LTR (see
 * .darban-dial__code). */
.darban-dial__search,
.darban-dial__item {
	text-align: start;
}

.darban-dial__menu {
	position: absolute;
	/* Physical left: the menu hangs under the button, which is itself pinned
	 * to the left of the field in every language. */
	left: 0;
	right: auto;
	top: calc(100% + 6px);
	width: 280px;
	max-width: min(80vw, calc(100vw - 16px));
	background: var(--darban-bg, #fff);
	border: 1px solid var(--darban-field-border);
	border-radius: var(--darban-field-radius);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
	padding: 8px;
	z-index: 20;
	box-sizing: border-box;
	transform-origin: top;
	animation: darban-dial-pop 0.16s ease;
}

/* Themes sometimes un-hide [hidden] or force content-box on inputs; both
 * break the menu, so pin the essentials down. */
.darban-dial__menu[hidden] {
	display: none !important;
}

/* While the script is measuring the menu to decide which side it opens on
 * (which happens on every scroll step of the page), the pop animation must not
 * run. Without this, toggling the --up class restarted the keyframes and the
 * menu visibly blinked/faded with each notch of the scroll wheel. */
.darban-dial__menu--measuring {
	animation: none !important;
	transition: none !important;
}

.darban-dial__menu,
.darban-dial__menu * {
	box-sizing: border-box !important;
}

/* Not enough room below the field: the menu flips above it. */
.darban-dial__menu--up {
	top: auto;
	bottom: calc(100% + 6px);
	transform-origin: bottom;
	box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.14);
}

/* Menu would overflow the side of the viewport: anchor to the other edge.
 * Physical values, so this always means "swap to the right", matching what
 * darban-country.js measures with getBoundingClientRect(). */
.darban-dial__menu--flip-x {
	left: auto;
	right: 0;
}

@keyframes darban-dial-pop {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.darban-dial__menu--up {
	animation-name: darban-dial-pop-up;
}

@keyframes darban-dial-pop-up {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.darban-dial__menu {
		animation: none;
	}
	.darban-dial__caret svg {
		transition: none;
	}
}

.darban-dial__search {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 38px;
    min-height: 38px;
    padding: 0 12px !important;
    margin: 0 0 8px !important;
    border: 1px solid var(--darban-field-border) !important;
    border-radius: 8px !important;
    background: var(--darban-bg, #fff);
    color: var(--darban-text);
    font-family: inherit;
    font-size: 14px  !important;
    line-height: normal;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-shadow: none !important;
    outline: none;
}

.darban-dial__search:focus,
.darban-dial__search:focus-visible {
	border-color: var(--darban-primary, #4f46e5) !important;
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--darban-primary, #4f46e5) 18%, transparent ) !important;
}

.darban-dial__list {
	max-height: 240px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--darban-field-border) transparent;
}

.darban-dial__list::-webkit-scrollbar {
	width: 6px;
}

.darban-dial__list::-webkit-scrollbar-thumb {
	background: var(--darban-field-border);
	border-radius: 999px;
}

.darban-dial__list::-webkit-scrollbar-track {
	background: transparent;
}

.darban-dial__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: transparent;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
	text-align: start;
	width: 100%;
}

.darban-dial__item:hover {
	background: var(--darban-field-bg);
}

.darban-dial__name {
	flex: 1;
	color: var(--darban-text);
}

.darban-dial__item .darban-dial__code {
	color: var(--darban-muted);
}

/* reCAPTCHA-style unified captcha box */
.darban-rc {
	border: 1px solid var(--darban-field-border, #d6d9e0);
	border-radius: 12px;
	background: var(--darban-field-bg, #f9fafb);
	max-width: 320px;
	position: relative;
}

.darban-rc__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
}

/* The whole head row triggers the challenge (like the real thing). */
.darban-rc__head--clickable {
	cursor: pointer;
	border-radius: 12px;
	transition: background-color 0.15s ease;
}

.darban-rc__head--clickable:hover {
	background: color-mix( in srgb, var(--darban-primary, #4f46e5) 4%, transparent );
}

.darban-rc__head--clickable:hover .darban-rc__check {
	border-color: var(--darban-primary, #4f46e5);
	box-shadow: 0 0 0 4px color-mix( in srgb, var(--darban-primary, #4f46e5) 10%, transparent );
}

.darban-rc__text {
	flex: 1 1 auto;
	min-width: 0;
}

/* Brand corner opposite the texts: the site's favicon (or a neutral shield
 * when the site has none), small and subtle — the familiar captcha layout. */
.darban-rc__brand {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.darban-rc__brand-icon {
	width: 26px;
	height: 26px;
	object-fit: cover;
	border-radius: 6px;
	opacity: 0.9;
	display: block;
}

.darban-rc__brand-shield {
	color: var(--darban-muted, #9aa0ab);
	opacity: 0.8;
	display: block;
}

.darban-rc__check {
	width: 28px;
	height: 28px;
	border: 2px solid var(--darban-muted, #9aa0ab);
	border-radius: 7px;
	background: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	flex-shrink: 0;
	transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.darban-rc__check.is-checked {
	border-color: var(--darban-primary, #4f46e5);
	background: var(--darban-primary, #4f46e5);
	animation: darban-rc-check-pop 0.32s cubic-bezier(0.21, 1.02, 0.53, 1.3);
}

@keyframes darban-rc-check-pop {
	45% {
		transform: scale(1.15);
	}
}

.darban-rc__check.is-checked .darban-rc__box::after {
	content: "";
	display: block;
	width: 7px;
	height: 13px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg) translate(-1px, -1px);
	animation: darban-rc-check-draw 0.24s ease-out 0.08s both;
}

@keyframes darban-rc-check-draw {
	from {
		opacity: 0;
		clip-path: inset(0 0 100% 0);
	}
	to {
		opacity: 1;
		clip-path: inset(0 0 0 0);
	}
}

.darban-rc__label {
	font-size: 14px;
	color: var(--darban-text, #1f2330);
}

.darban-rc__spinner {
	width: 22px;
	height: 22px;
	border: 3px solid var(--darban-field-border, #d6d9e0);
	border-top-color: var(--darban-primary, #4f46e5);
	border-radius: 50%;
	animation: darban-rc-spin 0.7s linear infinite;
}

@keyframes darban-rc-spin {
	to { transform: rotate(360deg); }
}

.darban-rc__panel {
	position: absolute;
	bottom: calc(100% + 10px);
	inset-inline-start: 0;
	width: 320px;
	max-width: 86vw;
	border: 1px solid var(--darban-field-border, #d6d9e0);
	border-radius: 12px;
	padding: 14px 16px;
	background: #fff;
	box-shadow: 0 16px 44px rgba(0, 0, 0, 0.18);
	z-index: 30;
	transform-origin: bottom;
	animation: darban-rc-pop 0.18s ease;
}

.darban-rc__panel[hidden] {
	display: none !important;
}

/* Not enough room above the box: the panel flips underneath, arrow included —
 * same measured behaviour as the country dial dropdown. */
.darban-rc__panel--down {
	bottom: auto;
	top: calc(100% + 10px);
	transform-origin: top;
	animation-name: darban-rc-pop-down;
}

@keyframes darban-rc-pop {
	from {
		opacity: 0;
		transform: translateY(6px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes darban-rc-pop-down {
	from {
		opacity: 0;
		transform: translateY(-6px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.darban-rc__panel::after {
	content: "";
	position: absolute;
	top: 100%;
	inset-inline-start: 24px;
	border: 8px solid transparent;
	border-top-color: #fff;
	filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.08));
}

.darban-rc__panel--down::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: #fff;
	filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, 0.06));
}

.darban-rc__prompt {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 10px;
	color: var(--darban-text, #1f2330);
}

.darban-rc__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.darban-rc__tile {
	position: relative;
	border: 1px solid var(--darban-field-border, #d6d9e0);
	border-radius: 8px;
	background: var(--darban-field-bg, #f4f5f7);
	cursor: pointer;
	color: var(--darban-text, #1f2330);
	transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
	animation: darban-rc-tile-in 0.3s cubic-bezier(0.21, 1.02, 0.53, 1.15) both;
}

@keyframes darban-rc-tile-in {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.9);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.darban-rc__tile:hover {
	border-color: var(--darban-primary, #4f46e5);
	transform: translateY(-1px);
}

/* Corner badge that pops in when a tile is selected. */
.darban-rc__tile-badge {
	position: absolute;
	top: -6px;
	inset-inline-end: -6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--darban-primary, #4f46e5);
	color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	transform: scale(0);
	transition: transform 0.16s cubic-bezier(0.21, 1.02, 0.53, 1.3);
	pointer-events: none;
	z-index: 1;
}

.darban-rc__tile.is-on {
	border-color: var(--darban-primary, #4f46e5);
	background: color-mix( in srgb, var(--darban-primary, #4f46e5) 14%, #fff );
	transform: scale(0.96);
	box-shadow: 0 0 0 2px color-mix( in srgb, var(--darban-primary, #4f46e5) 25%, transparent );
}

.darban-rc__tile.is-on .darban-rc__tile-badge {
	transform: scale(1);
}

.darban-rc__image {
	display: block;
	width: 100%;
	border-radius: 8px;
	margin-bottom: 10px;
}

.darban-rc__input {
	width: 100%;
}

/* Captcha box helper text, verify button, animated tick */
.darban-rc__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.darban-rc__hint {
	font-size: 11px;
	color: var(--darban-muted, #9aa0ab);
	line-height: 1.4;
}

.darban-rc__check.is-pop {
	animation: darban-rc-pop 0.4s ease;
}

@keyframes darban-rc-pop {
	0% { transform: scale(0.5); }
	60% { transform: scale(1.15); }
	100% { transform: scale(1); }
}

.darban-rc__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
}

.darban-rc__status {
	font-size: 12px;
	color: var(--darban-muted, #9aa0ab);
	flex: 1;
}

.darban-rc__verify {
	min-width: 96px;
	height: 38px;
	padding: 0 16px;
}

/* Login trigger button (shortcode) */
.darban-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: none;
	border-radius: var(--darban-field-radius, 10px);
	color: var(--darban-on-primary, #fff);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
	transition: opacity 0.15s ease;
}

.darban-trigger:hover {
	opacity: 0.92;
}

/* Signed-in account chip: avatar + display name + caret, rendered by the
 * button shortcode for signed-in visitors. Colors come from the same
 * shortcode/setting values as the login button. */
.darban-chip {
	position: relative;
	display: inline-block;
}

.darban-chip__toggle {
	padding-inline-start: 10px;
}

.darban-chip__avatar {
	display: inline-flex;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.darban-chip__avatar-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.darban-chip__avatar-letter {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.25);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
}

.darban-chip__caret {
	display: inline-flex;
	opacity: 0.8;
}

.darban-chip__caret svg {
	display: block;
	transition: transform 0.18s ease;
}

.darban-chip.is-open .darban-chip__caret svg {
	transform: rotate(180deg);
}

/* Floating menu: self-contained identity (independent of theme variables),
 * anchored to the chip's inline-end edge, opening below by default and
 * flipping above / to the other edge when measured space demands it. */
.darban-chip__menu {
	position: absolute;
	top: calc(100% + 8px);
	inset-inline-end: 0;
	min-width: 200px;
	background: #ffffff;
	color: #1f2330;
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 12px;
	padding: 6px;
	z-index: 99998;
	transform-origin: top;
	animation: darban-chip-pop 0.16s ease;
}

.darban-chip__menu[hidden] {
	display: none !important;
}

.darban-chip__menu--up {
	top: auto;
	bottom: calc(100% + 8px);
	transform-origin: bottom;
	animation-name: darban-chip-pop-up;
}

.darban-chip__menu--x-start {
	inset-inline-end: auto;
	inset-inline-start: 0;
}

@keyframes darban-chip-pop {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes darban-chip-pop-up {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.darban-chip__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #1f2330;
	text-decoration: none !important;
	transition: background-color 0.13s ease, color 0.13s ease;
}

.darban-chip__item svg {
	flex-shrink: 0;
	color: #6b7180;
	transition: color 0.13s ease;
}

.darban-chip__item:hover {
	background: rgba(79, 70, 229, 0.08);
	color: #4f46e5;
}

.darban-chip__item:hover svg {
	color: #4f46e5;
}

.darban-chip__item--danger:hover {
	background: rgba(220, 38, 38, 0.08);
	color: #dc2626;
}

.darban-chip__item--danger:hover svg {
	color: #dc2626;
}

@media (prefers-reduced-motion: reduce) {
	.darban-chip__menu {
		animation: none;
	}
	.darban-chip__caret svg {
		transition: none;
	}
}

.darban-trigger__icon {
	display: inline-flex;
	align-items: center;
}

/* Responsive: show only the icon on small screens when enabled */
@media ( max-width: 600px ) {
	.darban-trigger--mobile-icon {
		padding: 10px;
	}
	.darban-trigger--mobile-icon .darban-trigger__text {
		display: none;
	}
}

/* Popup */
.darban-popup {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	justify-content: center;
	/* Vertical centring is done with the dialog's auto margins (below) rather
	 * than align-items: a centred flex item in a scroll container has its
	 * overflowing top clipped and unreachable, whereas auto margins centre
	 * while still yielding to the scroll. `safe center` solves this too but is
	 * not supported everywhere. */
	align-items: flex-start;
	padding: 20px;
	/* Scrolling lives here rather than on the dialog: see the note on
	 * .darban-popup__dialog. */
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.darban-popup[hidden] {
	display: none;
}

/* Checkout OTP modal: hidden by default regardless of the [hidden] attribute,
 * shown only when explicitly opened. This is robust against block re-renders
 * that can drop boolean attributes. */
.darban-checkout-modal {
	display: none;
}

.darban-checkout-modal.is-open {
	display: flex;
}

/* Fixed, not absolute: .darban-popup is now a scroll container, so an absolute
 * backdrop would only cover the first viewport-height of it and scroll away
 * with the content. Fixed keeps it covering the viewport at all times.
 *
 * The tint and blur come from the active template's palette (Darban →
 * Appearance), with the previous hardcoded values as the fallback so an
 * un-themed popup looks exactly as it did before. */
.darban-popup__backdrop {
	position: fixed;
	inset: 0;
	background: var(--darban-popup-overlay, rgba(15, 18, 30, 0.55));
	backdrop-filter: blur( calc( var(--darban-popup-blur, 2) * 1px ) );
	-webkit-backdrop-filter: blur( calc( var(--darban-popup-blur, 2) * 1px ) );
}

/* The dialog must scroll when a form is taller than the viewport, but an
 * `overflow` other than `visible` also establishes a clipping box: the country
 * dropdown (and the custom select menu) were being cut off at the dialog edge
 * instead of hanging over it.
 *
 * The fix is to move the scrolling OUT to .darban-popup, which is the full
 * viewport, and leave the dialog itself unclipped. The popup is a flex centring
 * container, so `overflow-y: auto` there scrolls the whole dialog when it is
 * too tall, while the dialog's own box no longer clips anything. Menus can then
 * overhang freely and darban-country.js keeps them inside the viewport as
 * before, since it measures against the viewport rather than the dialog. */
.darban-popup__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
	/* Auto margins centre the dialog vertically while letting an over-tall one
	 * scroll from its top instead of being clipped. */
	margin: auto;
	/* Minimal/split use --darban-bg (Card). Glass uses --darban-popup-card
	 * because it has no solid card token on the branded page. */
	background: var(--darban-popup-card, var(--darban-bg, #fff));
	border-radius: 18px;
	/* Padding lives on .darban-form__inner so the loading veil covers the
	 * whole surface — dialog padding left a coloured frame around it. */
	padding: 0;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
	/* No max-height / overflow here: both would clip the dropdowns. */
	overflow: visible;
	animation: darban-popup-in 0.25s ease;
}

/* One surface: dialog paints the card; the form only holds content + padding. */
.darban-popup .darban-form--plain .darban-form__inner {
	padding: 28px;
	background: transparent;
	border: none;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	/* Same corners as .darban-popup__dialog so the loading veil matches. */
	border-radius: 18px;
}

/* In the popup, frost-on-frost fields need a readable edge more than a
 * different fill — derive the border from text so dark cards stay legible. */
.darban-popup .darban-form {
	--darban-field-border: color-mix( in srgb, var(--darban-text, #1f2330) 22%, transparent );
}

/* Loading veil must tint with the dialog card, not the frosted page --darban-bg. */
.darban-popup .darban-form.is-loading .darban-form__inner::after {
	background: color-mix( in srgb, var(--darban-popup-card, var(--darban-bg, #fff)) 72%, transparent );
	border-radius: inherit;
}

@keyframes darban-popup-in {
	from { opacity: 0; transform: translateY(12px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Close button.
 *
 * It floats on the backdrop, OUTSIDE the dialog, so it can never collide with
 * anything the form renders (previously it shared the dialog's top-right
 * corner with the step header's pencil button and the two overlapped).
 *
 * Positioned relative to .darban-popup, which is `position: fixed; inset: 0`,
 * so it stays pinned to the viewport corner rather than to the dialog — the
 * dialog's height changes between steps, and the button must not move with it. */
/* Close button.
 *
 * It floats on the backdrop, OUTSIDE the dialog, so it can never collide with
 * anything the form renders (previously it shared the dialog's top-right
 * corner with the step header's pencil button and the two overlapped).
 *
 * SIDE: it sits on the trailing edge of the reading direction — the visual
 * RIGHT on an RTL (Persian/Arabic) page, the visual LEFT on an LTR one. The
 * two explicit direction rules below pin this with PHYSICAL values so it holds
 * even if a theme resets `direction` on the body or the popup, which would
 * otherwise make a logical `inset-inline-end` resolve to the wrong side. */
.darban-popup__close {
	position: fixed;
	top: 18px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* No surface of its own: it sits on the blurred backdrop. */
	background: transparent;
	color: #fff;
	cursor: pointer;
	line-height: 1;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
	/* Fades and scales in just after the dialog, so the eye lands on the form
	 * first and the control arrives as a secondary detail. */
	animation: darban-popup-close-in 0.28s ease 0.12s both;
}

/* LTR page: trailing edge is the physical left. */
.darban-popup__close {
	left: 18px;
	right: auto;
}

/* RTL page: trailing edge is the physical right. Scoped to the direction so
 * it wins over the LTR default above regardless of source order. */
[dir="rtl"] .darban-popup__close,
.rtl .darban-popup__close {
	left: auto;
	right: 18px;
}

.darban-popup__close:hover {
	color: #fff;
	background: var(--darban-error, #dc2626);
	transform: rotate(90deg) scale(1.06);
}

.darban-popup__close:active {
	transform: rotate(90deg) scale(0.96);
}

.darban-popup__close:focus-visible {
	outline: none;
	background: var(--darban-error, #dc2626);
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--darban-error, #dc2626) 40%, transparent );
}

@keyframes darban-popup-close-in {
	from { opacity: 0; transform: scale(0.7); }
	to   { opacity: 1; transform: scale(1); }
}

/* Google reCAPTCHA v3 floating badge.
 *
 * Google appends this badge to <body> with an inline z-index of 2000000000,
 * which normally floats above everything. The Darban popup, however, paints a
 * backdrop with `backdrop-filter: blur()`. A backdrop-filtered element samples
 * every pixel painted behind it that belongs to the SAME stacking context —
 * and the badge, as a plain <body> child, has no stacking context of its own,
 * so it was being sampled and blurred UNDER the popup no matter how high its
 * z-index was. Raising the z-index alone (the earlier fix) could not solve
 * this: the badge and the popup are siblings, but backdrop-filter capture is
 * about paint/stacking contexts, not z-order between siblings.
 *
 * The real fix is to give the badge its OWN stacking context so the popup's
 * backdrop-filter can no longer reach into it:
 *   - `isolation: isolate` creates a stacking context with zero side effects.
 *   - a fixed position + high z-index keep it pinned above the dialog.
 * With its own context, the badge is composited as a self-contained layer that
 * the blur cannot sample, so it stays crisp and clickable while the dialog is
 * open. Google's own widget markup is untouched. !important is required
 * because Google sets z-index (and position) inline on the element. */
.grecaptcha-badge {
	z-index: 2147483000 !important;
	isolation: isolate !important;
	/* Connection-error copy can expand the badge into a tall panel that
	 * covers / shoves the login card; keep the collapsed footprint. */
	max-width: 256px !important;
	max-height: 60px !important;
	overflow: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
	.darban-popup__close {
		animation: none;
		transition: color 0.18s ease, background-color 0.18s ease;
	}
	.darban-popup__close:hover,
	.darban-popup__close:active {
		transform: none;
	}
}

/* Narrow screens: the dialog fills most of the width, so the button tucks in
 * closer to the edge to stay clear of it. Same per-direction anchoring as the
 * desktop rule, only nearer the corner. */
@media (max-width: 480px) {
	.darban-popup__close {
		top: 10px;
		left: 10px;
		right: auto;
		width: 36px;
		height: 36px;
	}

	[dir="rtl"] .darban-popup__close,
	.rtl .darban-popup__close {
		left: auto;
		right: 10px;
	}
}

/* Checkout phone verification widget */
.darban-checkout-verify {
	margin: 16px 0;
	padding: 16px;
	border: 1px solid var(--darban-field-border, #d6d9e0);
	border-radius: 12px;
	background: var(--darban-field-bg, #f9fafb);
}

.darban-checkout-verify__note {
	margin: 0 0 12px;
	font-size: 13px;
	color: var(--darban-text, #1f2330);
}

.darban-checkout-verify__otp {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.darban-checkout-verify__done {
	margin: 10px 0 0;
	color: #1f9d55;
	font-weight: 600;
	font-size: 14px;
}

/* Captcha tile image */
.darban-rc__tile-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	border-radius: 6px;
}

/* Comfortable tile box: three per row, tall enough that word tiles (2:1
 * SVGs) render large and readable, not as thin slivers. */
.darban-rc__tile {
	min-height: 56px;
	padding: 3px;
}

/* Checkout: country selector on billing phone */
.darban-checkout-modal .darban-otp-mount {
	margin: 16px 0;
}

.darban-otp--error {
	animation: darban-shake 0.4s ease;
}

@keyframes darban-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}

/* ---------------------------------------------------------------------------
 * Dedicated Darban mobile field on the WooCommerce checkout (classic + block).
 * The field is independent of the native phone field; these rules make the
 * country dial selector sit correctly against the checkout's own inputs.
 * ------------------------------------------------------------------------- */
.wc-block-components-address-form__darban-mobile {
	position: relative;
}

/* Make room for the dial selector regardless of the checkout's input class. */
.wc-block-components-address-form__darban-mobile.darban-field--has-dial .input-text,
/* Physical left: the dial selector's side in every language. */
.wc-block-components-address-form__darban-mobile.darban-field--has-dial .darban-checkout-field__input {
	padding-left: 98px;
	padding-right: 12px;
}

/* Pin the selector to the input box. Classic checkout inputs are ~auto height,
 * so align to the top of the input wrapper and stretch to its height. */
.wc-block-components-address-form__darban-mobile.darban-field--has-dial .darban-dial {
	bottom: auto;
	top: auto;
	align-self: stretch;
	display: flex;
	align-items: center;
}

/* Classic checkout: the input is inside a .woocommerce-input-wrapper that sits
 * below the label, so anchor the selector to that wrapper. */
.wc-block-components-address-form__darban-mobile .woocommerce-input-wrapper {
	position: relative;
	display: block;
}

/* Physical left, matching the input's padding side. */
.wc-block-components-address-form__darban-mobile .woocommerce-input-wrapper .darban-dial {
	position: absolute;
	left: 1px;
	right: auto;
	top: 1px;
	bottom: 1px;
	height: auto;
}

/* Fixed (non-selectable) dial badge shown when the country selector is off. */
.darban-dial-host { position: relative; }
/* The non-interactive badge (single-country / selector disabled) sits on the
 * same physical side as the interactive selector: left in every language,
 * because the number beside it is left-to-right data. */
.darban-dial.darban-dial--fixed {
	position: absolute;
	left: 1px;
	right: auto;
	bottom: 1px;
	display: flex;
	align-items: center;
	pointer-events: none;
	z-index: 0;
}
.darban-dial.darban-dial--fixed .darban-dial__button {
	cursor: default;
	background: transparent;
}

/* Checkout mobile only: stretch dial to the theme input height (unknown).
 * Plugin forms keep the fixed 46px height above. */
.darban-checkout-field .darban-dial,
.darban-checkout-field .darban-dial.darban-dial--fixed {
	height: 100%;
	top: 0;
	bottom: 0;
}
.darban-checkout-field .darban-dial__button {
	height: 100%;
}

/* Block checkout: the field is a .wc-block-components-text-input with a
 * floating label. Give the input padding and float the label clear of the
 * dial selector. */
.wc-block-components-text-input.wc-block-components-address-form__darban-mobile {
	position: relative;
}

/* Physical left in every language: the number beside it is LTR data. */
.wc-block-components-text-input.wc-block-components-address-form__darban-mobile .darban-dial {
	position: absolute;
	left: 1px;
	right: auto;
	top: 50%;
	transform: translateY(-50%);
	height: calc( 100% - 6px );
	display: flex;
	align-items: center;
	z-index: 2;
}
.wc-block-components-text-input.wc-block-components-address-form__darban-mobile .darban-dial__button {
	height: 100%;
	padding: 0 10px;
}
/* The phone number itself is left-to-right data, so the input reads LTR and
 * reserves its free space on the physical left, where the dial selector sits.
 * (This previously forced direction:rtl, which rendered the number backwards
 * on Persian/Arabic stores.) */
.wc-block-components-text-input.wc-block-components-address-form__darban-mobile input {
	padding-left: 98px !important;
	padding-right: 12px !important;
	direction: ltr;
	text-align: left;
}

/* The dial selector occupies the inline-start edge, so both the resting and the
 * floated label must stay clear of it. We keep the label offset by the same
 * amount as the input padding in every state, so it never collides with the
 * selector (the previous 12px float position overlapped the dial in RTL). */
/* The label must clear the dial selector, which is pinned to the physical
 * left, so it is offset from the left in every language rather than from the
 * inline-start (which would flip to the right on an RTL store and leave the
 * label sitting on top of the selector). */
.wc-block-components-text-input.wc-block-components-address-form__darban-mobile label {
	left: 104px;
	right: auto;
	max-width: calc( 100% - 116px );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Checkout verification modal — single view: code on top, captcha below.
 * The dialog carries the active template class (.darban-tpl-*), so its surface,
 * text and buttons inherit the template tokens (--darban-bg, --darban-text,
 * --darban-primary).
 * ------------------------------------------------------------------------- */
.darban-checkout-modal .darban-popup__dialog {
	/* Inherit the same base tokens the form uses, since the modal lives outside
	 * .darban-form. The active template class (.darban-tpl-*) still overrides
	 * the palette on top of these, so inputs and buttons match the form. */
	--darban-primary: #4f46e5;
	--darban-primary-hover: #4338ca;
	--darban-on-primary: #ffffff;
	--darban-text: #1f2330;
	--darban-muted: #6b7180;
	--darban-bg: #ffffff;
	--darban-field-bg: #f4f5f7;
	--darban-field-border: #e3e5ea;
	--darban-radius: 14px;
	--darban-field-radius: 11px;
	--darban-gap: 16px;

	background: var(--darban-popup-card, var(--darban-bg, #fff));
	color: var(--darban-text, #1f2330);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* First-load loader: only a spinner, centered, no form. */
.darban-checkout-modal__loader {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 140px;
}

.darban-checkout-modal__loader[hidden] {
	display: none;
}

.darban-checkout-modal__form[hidden] {
	display: none;
}

.darban-checkout-modal__form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Header: title and close on one line. */
.darban-checkout-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.darban-checkout-modal__title {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--darban-text, #1f2330);
}

/* Reset the absolutely-positioned close from the base popup so it sits inline
 * with the title in the header row. */
/* The checkout modal builds its own markup with the close button INSIDE a
 * header row, so it opts out of the floating-on-the-backdrop treatment: no
 * fixed positioning, no entry animation, no rotate-on-hover. */
.darban-checkout-modal .darban-popup__close {
	position: static;
	margin: 0;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	font-size: 22px;
	line-height: 1;
	color: var(--darban-muted, #9aa0ab);
	border-radius: 8px;
	animation: none;
}

.darban-checkout-modal .darban-popup__close:hover {
	color: var(--darban-text);
	background: var(--darban-field-bg, #f4f5f7);
	transform: none;
}

.darban-checkout-modal .darban-popup__close:active {
	transform: none;
}

.darban-checkout-modal .darban-popup__close:focus-visible {
	background: var(--darban-field-bg, #f4f5f7);
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--darban-primary, #4f46e5) 22%, transparent );
}

.darban-checkout-modal__subtitle {
	margin: 0;
	font-size: 13px;
	color: color-mix( in srgb, var(--darban-text, #1f2330) 65%, transparent );
	text-align: start;
}

.darban-checkout-modal__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: opacity 0.2s ease;
}

.darban-checkout-modal__body.is-loading {
	opacity: 0.5;
	pointer-events: none;
}

.darban-checkout-modal__body .darban-btn--primary {
	width: 100%;
}

/* Resend: a quiet text button, small font, themed colour. */
.darban-checkout-modal__resend {
	background: none;
	border: none;
	color: var(--darban-primary, #4f46e5);
	cursor: pointer;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 500;
	text-align: center;
	padding: 2px;
	width: auto;
	align-self: center;
}

.darban-checkout-modal__resend:disabled {
	color: color-mix( in srgb, var(--darban-text, #1f2330) 45%, transparent );
	cursor: default;
}

/* Captcha sits below the code input. */
.darban-checkout-modal__captcha {
	margin-top: 4px;
}

.darban-checkout-modal__captcha[hidden] {
	display: none;
}

/* Inline status line (sending / verifying). */
.darban-checkout-modal__status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 13px;
	color: color-mix( in srgb, var(--darban-text, #1f2330) 70%, transparent );
}

.darban-checkout-modal__status[hidden] {
	display: none;
}

/* Send-failed retry view: replaces the whole form when the FIRST code
 * dispatch fails. Illustration + error copy + a single Retry button. Colors
 * inherit the active template through the shared CSS variables. */
.darban-checkout-modal__error {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 10px 6px 6px;
}
.darban-checkout-modal__error[hidden] {
	display: none;
}
.darban-checkout-modal__error .darban-popup__close {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
}
.darban-checkout-modal__error-art {
	display: inline-flex;
	margin: 4px auto 12px;
}
.darban-checkout-modal__error-title {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	color: var(--darban-text, #1f2330);
}
.darban-checkout-modal__error-text {
	margin: 0 0 18px;
	font-size: 13px;
	line-height: 1.8;
	color: color-mix( in srgb, var(--darban-text, #1f2330) 72%, transparent );
}
.darban-checkout-modal__retry {
	min-width: 170px;
}

/* --- Illustration parts (paper plane, broken dashed trail, alert badge) --- */
.darban-checkout-modal__error-art .dz-halo {
	fill: var(--darban-primary, #4f46e5);
	opacity: .08;
}
.darban-checkout-modal__error-art .dz-trail {
	stroke: var(--darban-primary, #4f46e5);
	stroke-width: 3;
	opacity: .45;
}
.darban-checkout-modal__error-art .dz-plane-body {
	fill: var(--darban-primary, #4f46e5);
}
.darban-checkout-modal__error-art .dz-plane-fold {
	fill: #ffffff;
	opacity: .25;
}
.darban-checkout-modal__error-art .dz-spark path {
	stroke: var(--darban-primary, #4f46e5);
	stroke-width: 2.5;
	opacity: .35;
}
.darban-checkout-modal__error-art .dz-badge-bg {
	fill: #f59e0b;
	stroke: var(--darban-panel, #ffffff);
	stroke-width: 4;
}
.darban-checkout-modal__error-art .dz-badge-line {
	stroke: #ffffff;
	stroke-width: 3.5;
}
.darban-checkout-modal__error-art .dz-badge-dot {
	fill: #ffffff;
}
/* Gentle motion: the plane drifts, the badge taps for attention. */
.darban-checkout-modal__error-art .dz-plane {
	animation: darban-err-drift 3.2s ease-in-out infinite;
	transform-origin: 62px 50px;
}
.darban-checkout-modal__error-art .dz-badge {
	animation: darban-err-tap 2.4s ease-in-out infinite;
	transform-origin: 85px 86px;
}
@keyframes darban-err-drift {
	0%, 100% { transform: translate(0, 0) rotate(0deg); }
	50%      { transform: translate(0, -4px) rotate(-2.5deg); }
}
@keyframes darban-err-tap {
	0%, 84%, 100% { transform: scale(1); }
	90%           { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
	.darban-checkout-modal__error-art .dz-plane,
	.darban-checkout-modal__error-art .dz-badge {
		animation: none;
	}
}

/* Loading spinner, tinted with the template's primary colour. */
.darban-spinner {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 3px solid color-mix( in srgb, var(--darban-primary, #4f46e5) 22%, transparent );
	border-top-color: var(--darban-primary, #4f46e5);
	animation: darban-spin 0.7s linear infinite;
	display: inline-block;
	flex: 0 0 auto;
}

.darban-spinner--sm {
	width: 18px;
	height: 18px;
	border-width: 2px;
}

@keyframes darban-spin {
	to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------------
 * Ghost button (e.g. resend), themed by the active template.
 * ------------------------------------------------------------------------- */
.darban-btn--ghost {
	background: transparent;
	color: var(--darban-primary);
	border: 1px solid color-mix( in srgb, var(--darban-primary) 35%, transparent );
}

.darban-btn--ghost:hover:not(:disabled) {
	background: color-mix( in srgb, var(--darban-primary) 10%, transparent );
}

.darban-btn--ghost:disabled {
	color: var(--darban-muted, #9aa0ad);
	border-color: color-mix( in srgb, var(--darban-muted, #9aa0ad) 30%, transparent );
}

/* Locked mobile field (verified users cannot change their number). */
.darban-checkout-field--locked .darban-checkout-field__input,
.darban-checkout-field--locked input[readonly] {
	background: color-mix( in srgb, var(--darban-field-bg, #f4f5f7) 70%, transparent );
	cursor: not-allowed;
	opacity: 0.85;
}

/* Legal acceptance line under the auth forms. */
.darban-form__legal {
	margin: 14px 4px;
	font-size: 12px;
	line-height: 1.7;
	text-align: center;
	color: color-mix( in srgb, var(--darban-text, #1f2330) 60%, transparent );
}

.darban-form__legal a {
	color: var(--darban-primary, #4f46e5);
	text-decoration: none;
	font-weight: 600;
}

.darban-form__legal a:hover {
	text-decoration: underline;
}

/* Locked dial selector (verified users cannot change their country code). */
.darban-dial--locked {
	cursor: not-allowed !important;
	pointer-events: none;
}

.darban-dial--locked .darban-dial__caret {
    display:none !important;
}

/* My Account — Darban mobile field.
 *
 * Layout: label on its own line, then ONE row: the input (with the dial
 * selector inside it) and the "Change number" button, separated by a 10px gap
 * and vertically centered. The input flexes to fill the remaining width; the
 * button keeps its natural width but is forced to the SAME HEIGHT as the
 * input (44px), so the row reads as one balanced control.
 *
 * The verification state is a small floating dot INSIDE the input, pinned to
 * the edge opposite the dial selector (green = verified, pulsing amber = not
 * verified), with a CSS tooltip on hover/focus.
 *
 * The button carries WooCommerce's own classes (woocommerce-Button button
 * wp-element-button) so the THEME styles its colors and font; the rules below
 * only handle layout — flex behaviour, matched height, the disabled state —
 * never colors.
 *
 * RTL note: a phone number is left-to-right data whatever the page language,
 * so this field is laid out with PHYSICAL sides rather than logical ones: the
 * dial selector is always at the visual left, the verification dot always at
 * the visual right, and the input reads LTR. Persian, Arabic and English
 * stores therefore all render the row identically, and no direction-specific
 * padding override is required.
 */
.darban-account-scope {
	--darban-primary: #4f46e5;
	--darban-primary-hover: #4338ca;
	--darban-on-primary: #ffffff;
	--darban-radius: 12px;
	--darban-field-radius: 10px;
}
.darban-account-row { display:block; }
.darban-account-row > label { display:block; margin-bottom:6px; font-weight:600; }

/* --- Row: input + button, one line, 10px apart, vertically centered --- */
.darban-account-group {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: space-between;
	gap: 10px;
}
.darban-account-field {
	position:relative;
	display:block;
	flex:1 1 auto;
	min-width:0;
	margin:0;
}
/* The dial selector sits at the physical left and the verification dot at the
 * physical right, so the space each needs is reserved with physical padding —
 * identical in Persian, Arabic, Turkish and English. */
.darban-account-field__input {
	width:100%; box-sizing:border-box; height:44px; line-height:44px;
	padding-left:96px !important; padding-right:34px !important;
	text-align:left;
	border-radius:var(--darban-field-radius) !important;
	margin:0 !important;
}
/* The wrapper is a span that follows the PAGE direction, while the input
 * inside it is dir="ltr". Anchoring the selector with inset-inline-start
 * therefore threw it to the right on Persian/Arabic pages, while the input's
 * own LTR padding still reserved the space on the left. Physical values keep
 * the selector and the space it needs on the same side in every language. */
.darban-account-field .darban-dial {
	position:absolute; left:1px; right:auto; top:50%; transform:translateY(-50%);
	display:flex; align-items:center; height:42px; border:0; background:transparent;
}
.darban-account-field .darban-dial__button { height:42px; padding:0 10px; }

/* Button: natural width, forced to the input's height so both match. Colors,
 * font and borders stay with the theme's WooCommerce button styles. */
.darban-account-change {
	display:inline-flex !important;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	height:44px;
	box-sizing:border-box;
	margin:0 !important;
	padding-top:0 !important;
	padding-bottom:0 !important;
	white-space:nowrap;
	cursor:pointer;
}
.darban-account-change:disabled {
	opacity:.5;
	cursor:not-allowed;
}

/* --- Floating verification dot inside the input (replaces the old pill).
 * Positioned on the wrapper, at the edge OPPOSITE the dial selector:
 * inline-end of the page — the input's visual left on RTL, right on LTR. --- */
/* Physical right: always the edge opposite the dial selector, which is pinned
 * to the physical left. Using inset-inline-end put the dot on the visual LEFT
 * on RTL pages, i.e. straight on top of the selector. */
.darban-account-dot {
	position:absolute;
	right:14px;
	left:auto;
	top:50%;
	transform:translateY(-50%);
	display:inline-block;
	width:10px; height:10px;
	border-radius:50%;
	cursor:help;
	outline:none;
	z-index:3;
}
.darban-account-dot.is-verified {
	background:#16a34a;
	box-shadow:0 0 0 3px rgba(22,163,74,.15);
}
.darban-account-dot.is-unverified {
	background:#f59e0b;
	box-shadow:0 0 0 0 rgba(245,158,11,.55);
	animation:darban-dot-pulse 2s ease-out infinite;
}
@keyframes darban-dot-pulse {
	70%  { box-shadow:0 0 0 7px rgba(245,158,11,0); }
	100% { box-shadow:0 0 0 0 rgba(245,158,11,0); }
}
@media (prefers-reduced-motion: reduce) {
	.darban-account-dot.is-unverified { animation:none; box-shadow:0 0 0 3px rgba(245,158,11,.2); }
}
/* Reserve room for the dot on ITS side of the input, so digits never slide
 * under it. The input is dir="ltr" even on RTL pages, so this is switched by
 * page direction rather than logical properties on the input itself. */
/* No direction-specific override is needed any more: the dial and the dot are
 * pinned to fixed physical edges, so the padding above already holds on RTL
 * pages. (This previously reserved the dot's space on the left, which is now
 * the selector's side.) */
/* Locked mode still shows the dial as a fixed, non-interactive badge (see
 * darban-country.js), so the left padding stays; only the dot's side on the
 * right needs reserving. Physical values, so this holds in every language. */
.darban-account-group--locked .darban-account-field__input {
	padding-right:34px !important;
	cursor:default;
}

/* Tooltip (CSS, from data-tip; shown on hover and keyboard focus). Physical
 * left/translate keep it centered on the dot in both RTL and LTR. */
.darban-account-dot::after {
	content:attr(data-tip);
	position:absolute;
	bottom:calc(100% + 8px);
	left:50%;
	transform:translate(-50%, 4px);
	background:#111827;
	color:#ffffff;
	font-size:11px;
	font-weight:600;
	line-height:1;
	padding:6px 10px;
	border-radius:6px;
	white-space:nowrap;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity .15s ease, transform .15s ease, visibility .15s;
	z-index:9;
}
.darban-account-dot::before {
	content:"";
	position:absolute;
	bottom:calc(100% + 3px);
	left:50%;
	transform:translate(-50%, 4px);
	border:5px solid transparent;
	border-top-color:#111827;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity .15s ease, transform .15s ease, visibility .15s;
	z-index:9;
}
.darban-account-dot:hover::after,
.darban-account-dot:focus::after,
.darban-account-dot:focus-visible::after,
.darban-account-dot:hover::before,
.darban-account-dot:focus::before,
.darban-account-dot:focus-visible::before {
	opacity:1;
	visibility:visible;
	transform:translate(-50%, 0);
}

/* Narrow screens: stay on one row; the input shrinks, the button never wraps. */
@media (max-width: 480px) {
	.darban-account-change { padding-inline-start:12px !important; padding-inline-end:12px !important; }
}

/* ------------------------------------------------------------------ *
 * Password visibility toggle (the eye)
 *
 * Injected by darban-form.js next to every password input: the sign-in
 * password step, the reset flow's new-password fields, and any password
 * field the form builder renders. The button sits inside the field on
 * the inline-end side, so RTL pages place it on the left automatically.
 * The slash "draws" over the eye via a dash offset transition, a gap
 * line in the field background heals the outline under it, the pupil
 * shrinks while covered, and a quick blink plays on every toggle.
 * ------------------------------------------------------------------ */
/* Password reveal toggle — direction-aware.
 *
 * The password field mirrors with the page direction, unlike the phone/email
 * inputs (whose VALUE always stays LTR because a number or address read
 * backwards is wrong). A password is opaque characters the user is echoing,
 * so it reads naturally from the writing side of the page:
 *
 *   • LTR page (English): value starts at the LEFT,  eye sits on the RIGHT.
 *   • RTL page (Persian/Arabic): value starts at the RIGHT, eye sits on the LEFT.
 *
 * The default rules below are the LTR layout. The [dir="rtl"] / .rtl block that
 * follows flips the button to the left edge, moves the reserved padding to that
 * same left edge, and switches the value/placeholder to read from the right.
 *
 * IMPLEMENTATION NOTES:
 * - The visual flip is done entirely in CSS. The markup keeps dir="ltr" on the
 *   input so nothing else that relies on it (autocomplete, caret handling in
 *   the JS toggle, the captcha mount) changes. On RTL pages this rule pair
 *   overrides direction/text-align to right for the password field only — the
 *   phone and email --ltr inputs are untouched because they are matched by a
 *   different, more specific selector and never carry .darban-field--password.
 * - Selectors use the wrapper class .darban-field--password, never
 *   [type="password"]: the input's type flips to "text" while the password is
 *   revealed, so a type-based rule would drop the padding at exactly the moment
 *   the text becomes visible.
 * - Both the LTR and RTL rules are marked important for the same reason the
 *   dial-code padding is: the "form supremacy layer" further down this file
 *   restates padding and direction on .darban-form .darban-field__input, which
 *   would otherwise win on source order. */
.darban-field--password {
	position: relative;
}

/* Scoped to the form/popup and marked important for the same reason the
 * dial-code padding is: the "form supremacy layer" further down this file
 * restates `padding: 0 14px` on `.darban-form .darban-field__input`, which
 * would otherwise win on source order and throw the reserved space away. */
/* LTR default: value starts at the left, room reserved on the right. */
.darban-field--password .darban-field__input,
.darban-form .darban-field--password .darban-field__input,
.darban-popup .darban-field--password .darban-field__input {
	padding-right: 46px !important;
	padding-left: 14px !important;
	direction: ltr;
	text-align: left;
}

/* RTL page: mirror the whole password field. The value now reads from the
 * right, so the reserved space and the eye button move to the LEFT edge. This
 * targets ONLY the password field (via .darban-field--password), so the LTR
 * phone/email inputs on the same page keep their left-to-right value. */
[dir="rtl"] .darban-field--password .darban-field__input,
[dir="rtl"] .darban-form .darban-field--password .darban-field__input,
[dir="rtl"] .darban-popup .darban-field--password .darban-field__input,
.rtl .darban-field--password .darban-field__input,
.rtl .darban-form .darban-field--password .darban-field__input,
.rtl .darban-popup .darban-field--password .darban-field__input {
	padding-left: 46px !important;
	padding-right: 14px !important;
	direction: rtl;
	text-align: right;
}

/* The placeholder follows the same side as the value it stands in for. */
[dir="rtl"] .darban-field--password .darban-field__input::placeholder,
.rtl .darban-field--password .darban-field__input::placeholder {
	text-align: right;
}

.darban-eye {
	position: absolute;
	right: 6px;
	left: auto;
	bottom: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	border-radius: calc( var(--darban-field-radius, 11px) - 4px );
	color: var(--darban-muted, #6b7180);
	cursor: pointer;
	transition: color 0.18s ease, background-color 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}

/* RTL page: the eye moves to the LEFT edge, matching the padding reserved for
 * it above. The button lives inside the .darban-field wrapper, which follows
 * the page direction, so it is switched by the page's dir/.rtl, not by the
 * input's own (still LTR) direction. */
[dir="rtl"] .darban-field--password .darban-eye,
.rtl .darban-field--password .darban-eye {
	left: 6px;
	right: auto;
	width: 36px !important;
}

[dir="ltr"] .darban-field--password .darban-eye,
.ltr .darban-field--password .darban-eye {
	right: 6px;
	left: auto;
	width: fit-content !important;
}

.darban-eye:hover,
.darban-eye.is-visible {
	color: var(--darban-primary, #4f46e5);
}

.darban-eye:hover {
	background: color-mix( in srgb, var(--darban-primary, #4f46e5) 10%, transparent );
}

.darban-eye:active .darban-eye__icon {
	transform: scale( 0.88 );
}

.darban-eye__icon {
	display: block;
	transition: transform 0.15s ease;
}

/* The slash and its background-colored gap share one dash length; both
 * are fully drawn (hidden password) by default and retract together
 * when the password becomes visible. */
.darban-eye__slash,
.darban-eye__gap {
	stroke-dasharray: 23;
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.3s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.darban-eye.is-visible .darban-eye__slash,
.darban-eye.is-visible .darban-eye__gap {
	stroke-dashoffset: 23;
}

/* The pupil sits small while the eye is covered and opens with it. */
.darban-eye__pupil {
	transform-origin: 12px 12px;
	transform: scale( 0.72 );
	transition: transform 0.3s cubic-bezier( 0.34, 1.56, 0.64, 1 );
}

.darban-eye.is-visible .darban-eye__pupil {
	transform: scale( 1 );
}

/* One quick blink on every toggle; restarted from JS by re-adding the
 * class after a reflow. Respects reduced-motion. */
@keyframes darban-eye-blink {
	0%   { transform: scaleY( 1 ); }
	45%  { transform: scaleY( 0.12 ); }
	100% { transform: scaleY( 1 ); }
}

.darban-eye__icon.darban-eye--blink {
	animation: darban-eye-blink 0.32s ease-in-out;
	transform-origin: 12px 12px;
}

@media ( prefers-reduced-motion: reduce ) {
	.darban-eye__icon.darban-eye--blink {
		animation: none;
	}
	.darban-eye__slash,
	.darban-eye__gap,
	.darban-eye__pupil {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * Elementor editor helpers
 * ------------------------------------------------------------------ */
/* Inert preview inside the Elementor editor: the real markup renders,
 * but nothing can be clicked or submitted by accident. */
.darban-el-inert {
	pointer-events: none;
	user-select: none;
}

/* Inside the editor the chip menu is forced open, so the dropdown can be
 * styled visually without hover gymnastics. */
.darban-el-menu-open .darban-chip__menu[hidden] {
	display: block !important;
	position: static;
	margin-top: 8px;
}

/* Elementor-picked menu icons align with the built-in 16px SVG set. */
.darban-chip__custom-icon,
.darban-chip__item .darban-chip__custom-icon svg {
	width: 16px;
	height: 16px;
	font-size: 15px;
	line-height: 1;
	flex: 0 0 auto;
}

/* ------------------------------------------------------------------ *
 * Style hardening
 *
 * These rules assert Darban's own base primitives with enough weight
 * that theme and page-builder (Elementor editor included) styles cannot
 * bleed into the form, trigger or chip. They restate what the styles
 * above already intend, so the frontend look is unchanged — they exist
 * to make that look survive hostile cascades.
 * ------------------------------------------------------------------ */
.darban-form,
.darban-form *,
.darban-popup,
.darban-popup *,
.darban-chip,
.darban-chip *,
.darban-trigger,
.darban-trigger * {
	box-sizing: border-box;
}

.darban-form input[type="text"],
.darban-form input[type="tel"],
.darban-form input[type="email"],
.darban-form input[type="password"],
.darban-form input[type="number"],
.darban-form select.darban-field__select,
.darban-popup input[type="text"],
.darban-popup input[type="tel"],
.darban-popup input[type="email"],
.darban-popup input[type="password"],
.darban-popup input[type="number"],
.darban-popup select.darban-field__select {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	max-width: 100%;
	box-shadow: none;
	outline-offset: 0;
}

.darban-form button,
.darban-popup button,
button.darban-trigger,
.darban-chip button {
	-webkit-appearance: none;
	appearance: none;
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	margin: 0;
}

button.darban-trigger {
	border: 0;
	text-decoration: none;
}

.darban-chip__item,
.darban-chip__item:hover,
.darban-chip__item:focus {
	text-decoration: none;
	box-shadow: none;
	outline-offset: 0;
}

.darban-form a,
.darban-popup a {
	box-shadow: none; /* Some themes underline links with box-shadow. */
}

/* ------------------------------------------------------------------ *
 * Form supremacy layer
 *
 * The form has ONE source of truth: Darban → Appearance. These rules
 * restate the field and button declarations above with !important —
 * with the exact same values and the exact same CSS variables — so no
 * theme, page builder or editor stylesheet can override the form's
 * look on any page. The Appearance settings keep full control because
 * the variables remain the values being enforced.
 * ------------------------------------------------------------------ */
.darban-form .darban-field__input,
.darban-popup .darban-field__input {
	height: 48px !important;
	/* No !important on padding: the dial-code layout must be able to
	 * widen padding-inline-start for the country prefix. */
	padding: 0 14px;
	font-size: 15px !important;
	color: var(--darban-text) !important;
	background: var(--darban-field-bg) !important;
	border: 1px solid var(--darban-field-border) !important;
	border-radius: var(--darban-field-radius) !important;
	font-family: inherit !important;
	box-shadow: none !important;
}

.darban-form .darban-field__input:focus,
.darban-popup .darban-field__input:focus {
	outline: none !important;
	border-color: var(--darban-primary) !important;
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--darban-primary) 18%, transparent ) !important;
}

.darban-form .darban-btn,
.darban-popup .darban-btn {
	height: 48px !important;
	padding: 0 20px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	border-radius: var(--darban-field-radius) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
}

/* The border is asserted separately so the Google button — which NEEDS
 * its outline border — is exempt from the border reset. */
.darban-form .darban-btn:not(.darban-btn--google),
.darban-popup .darban-btn:not(.darban-btn--google) {
	border: none !important;
}

/* Google button: its outlined look survives every theme and builder,
 * including hover — Elementor button styles love to recolor link text
 * on hover, so both states are pinned to Darban's variables. */
.darban-form .darban-btn--google,
.darban-popup .darban-btn--google,
.darban-form .darban-btn--google:hover,
.darban-form .darban-btn--google:focus,
.darban-popup .darban-btn--google:hover,
.darban-popup .darban-btn--google:focus {
	background: var(--darban-bg) !important;
	color: var(--darban-text) !important;
	border: 1px solid var(--darban-field-border) !important;
	text-decoration: none !important;
}

/* Country dial toggle: transparent chrome in every state. Theme and
 * Elementor button styles must never paint it on hover or focus. */
.darban-form .darban-dial__button,
.darban-popup .darban-dial__button,
.darban-form .darban-dial__button:hover,
.darban-form .darban-dial__button:focus,
.darban-popup .darban-dial__button:hover,
.darban-popup .darban-dial__button:focus {
	background: transparent !important;
	color: var(--darban-text) !important;
	border: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	outline: none !important;
}

.darban-form .darban-btn--primary,
.darban-popup .darban-btn--primary {
	background: var(--darban-primary) !important;
	color: var(--darban-on-primary) !important;
}

.darban-form .darban-field__label,
.darban-popup .darban-field__label {
	color: var(--darban-text) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* ------------------------------------------------------------------ *
 * Chip icon color inheritance
 *
 * Every menu icon — the built-in stroke set AND icons picked in the
 * Elementor widget (font icons or uploaded SVGs) — follows the item's
 * text color, in rest and hover states alike.
 * ------------------------------------------------------------------ */
.darban-chip__item svg {
	color: inherit;
}

.darban-chip__custom-icon,
.darban-chip__custom-icon i {
	color: inherit;
	line-height: 1;
}

/* Elementor-rendered SVG icons are fill-based (unlike the stroke-based
 * built-in set), so their fill maps to the current text color. */
.darban-chip__custom-icon svg,
.darban-chip__custom-icon svg path {
	fill: currentColor;
}

.darban-trigger__icon,
.darban-trigger__icon svg {
	color: inherit;
	fill: currentColor;
}

.darban-chip__item,
.darban-chip__item svg,
.darban-chip__custom-icon,
.darban-trigger,
.darban-trigger__icon {
	transition: color 0.15s ease, background-color 0.15s ease;
}

/* ------------------------------------------------------------------ *
 * Front two-factor panel (My Account endpoint + [darban_two_factor])
 *
 * Designed to sit inside any theme's account area: it borrows the
 * theme's typography and colors through the Darban CSS variables, while
 * enforcing its own rhythm (consistent spacing, aligned controls,
 * clearly bordered inputs) so it never looks broken regardless of theme.
 * ------------------------------------------------------------------ */
.darban-2fa {
	max-width: 640px;
	color: var(--darban-text);
	text-align: start;
}

.darban-2fa * {
	box-sizing: border-box;
}

.darban-2fa-state + .darban-2fa-state {
	margin-top: 4px;
}

/* Status card ------------------------------------------------------- */
.darban-2fa-active {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
}

.darban-2fa-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #10b981;
	box-shadow: 0 0 0 4px color-mix( in srgb, #10b981 20%, transparent );
	flex: 0 0 auto;
}

.darban-2fa-sub {
	font-size: 13.5px;
	line-height: 1.9;
	opacity: 0.72;
	margin: 0 0 16px;
}

.darban-2fa-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 600;
}

/* Setup layout ------------------------------------------------------ */
.darban-2fa-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding: 22px;
	border: 1px solid var(--darban-field-border, #d7dae2);
	border-radius: 14px;
	background: color-mix( in srgb, var(--darban-field-bg, #f4f5f7) 45%, transparent );
}

.darban-2fa-side {
	flex: 1 1 250px;
	min-width: 230px;
	display: flex;
	flex-direction: column;
}

.darban-2fa-side--qr {
	align-items: center;
	text-align: center;
	gap: 12px;
	flex: 0 0 auto;
}

.darban-2fa-qr {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 196px;
	height: 196px;
	padding: 10px;
	background: #fff;
	border: 1px solid var(--darban-field-border);
	border-radius: 12px;
}

/* qrcode.js draws both canvas + img; only the img should be visible. */
.darban-2fa-qr canvas {
	display: none !important;
}

.darban-2fa-qr img {
	display: block !important;
	width: 100%;
	height: 100%;
	border-radius: 0 !important;
	-webkit-border-radius: 0 !important;
}

.darban-2fa-secret {
	display: inline-block;
	padding: 9px 14px;
	background: var(--darban-field-bg, #f4f5f7);
	border: 1px dashed var(--darban-field-border, #d7dae2);
	border-radius: 8px;
	letter-spacing: 3px;
	font-size: 14px;
	font-family: monospace;
	cursor: pointer;
	user-select: all;
	direction: ltr;
	word-break: break-all;
	transition: border-color 0.15s ease;
}

.darban-2fa-secret:hover {
	border-color: var(--darban-primary);
}

.darban-2fa-steps {
	margin: 0 0 18px;
	padding-inline-start: 20px;
	font-size: 13.5px;
	line-height: 1.7;
}

.darban-2fa-steps li {
	margin-bottom: 10px;
}

/* Six-box code inputs — always visibly bordered and evenly spaced ---- */
.darban-2fa-digits {
	display: flex;
	gap: 10px;
	margin: 0 0 18px;
	direction: ltr;
	justify-content: flex-end;
}

.darban-2fa-digits input {
	width: 46px !important;
	height: 54px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	color: var(--darban-text, #1f2330) !important;
	background: var(--darban-field-bg, #f4f5f7) !important;
	border: 1.5px solid var(--darban-field-border, #d7dae2) !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.darban-2fa-digits input:focus {
	outline: none !important;
	border-color: var(--darban-primary) !important;
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--darban-primary) 18%, transparent ) !important;
}

/* Buttons within the panel keep the form button rhythm --------------- */
.darban-2fa .darban-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 22px;
	font-size: 14.5px;
	font-weight: 600;
	border-radius: var(--darban-field-radius);
	cursor: pointer;
	align-self: flex-start;
}

.darban-2fa-remove {
	background: transparent;
	color: #b91c1c;
	border: 1.5px solid color-mix( in srgb, #b91c1c 40%, transparent );
}

.darban-2fa-remove:hover {
	background: color-mix( in srgb, #b91c1c 8%, transparent );
	border-color: #b91c1c;
}

.darban-2fa-remove-hint {
	margin: 12px 0 0;
}

.darban-2fa-msg {
	font-size: 13px;
	font-weight: 600;
	margin: 14px 0 0;
	min-height: 1em;
}

.darban-2fa-msg.is-ok { color: #059669; }
.darban-2fa-msg.is-error { color: #b91c1c; }

/* Access-denied notice ---------------------------------------------- */
.darban-2fa-denied {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 40px 24px;
	border: 1px dashed var(--darban-field-border);
	border-radius: 14px;
	color: var(--darban-text);
	opacity: 0.72;
	text-align: center;
	max-width: 440px;
}

.darban-2fa-denied p {
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
}

/* ------------------------------------------------------------------ *
 * Inline captcha (text mode): the classic [refresh + code image] box
 * beside the answer field — right inside the form, no extra clicks.
 * ------------------------------------------------------------------ */
.darban-cap-inline {
	display: flex;
	align-items: stretch;
	gap: 10px;
	margin-bottom: 14px;
}

.darban-cap-inline__media {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	background: var(--darban-field-bg);
	border: 1px solid var(--darban-field-border);
	border-radius: var(--darban-field-radius);
	flex: 0 0 auto;
}

.darban-cap-inline__refresh {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 6px;
	color: var(--darban-text) !important;
	opacity: 0.65;
	cursor: pointer;
	box-shadow: none !important;
	flex: 0 0 auto;
	transition: opacity 0.15s ease, transform 0.3s ease;
}

.darban-cap-inline__refresh:hover,
.darban-cap-inline__refresh:focus {
	opacity: 1;
	background: transparent !important;
	color: var(--darban-text) !important;
	outline: none !important;
}

.darban-cap-inline__refresh.is-spinning svg {
	animation: darban-cap-spin 0.7s linear infinite;
}

@keyframes darban-cap-spin {
	to { transform: rotate(360deg); }
}

.darban-cap-inline__image {
	display: block;
	height: 38px !important;
	border-radius: 6px;
	user-select: none;
	-webkit-user-drag: none;
}

.darban-cap-inline__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px !important;
}

/* Google reCAPTCHA v2 widget rendered inline in the form. */
.darban-cap-inline-rc {
	margin-bottom: 14px;
	min-height: 78px;
	max-width: 100%;
	overflow: hidden;
}

.darban-cap-inline-rc > div {
	max-width: 100%;
}

/* When Google cannot reach its servers it dumps a long connection-error
 * string into a textarea inside the widget. Without containment that block
 * grows, shoves the rest of the form, and can eat most of the page. */
.darban-cap-inline-rc textarea,
.g-recaptcha textarea {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	max-height: 5.5em;
	box-sizing: border-box;
	margin: 0;
	padding: 8px 10px;
	font-size: 12px !important;
	line-height: 1.45;
	resize: none;
	overflow: auto;
}

@media (max-width: 400px) {
	.darban-cap-inline-rc .g-recaptcha,
	.darban-cap-inline-rc > div {
		transform: scale(0.86);
		transform-origin: 0 0;
	}
}