/**
 * Darban core styles — themed via CSS custom properties.
 */

.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__logo {
	width: var(--darban-logo-width, 70%);
	max-width: 100%;
	line-height: 0;
}

.darban-form__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.darban-form__logo--auto {
	align-self: flex-start;
	margin-inline-end: auto;
}

.darban-form__logo--center {
	align-self: center;
	margin-inline: auto;
}

/* WooCommerce checkout login: keep Darban centered. */
.woocommerce-form .darban-form--plain {
	width: 400px;
	max-width: 95%;
	margin-left: auto;
	margin-right: auto;
	padding: 10px 0 50px;
	box-sizing: border-box;
}

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

/* Step header: title column + edit (pencil) on password/OTP steps. */
.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;
}

/* Pencil edit — sized to the title line box. */
.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);
}

/* Step children wrap so half-width builder fields can share a row. */
.darban-step {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--darban-gap);
}

/* Direct children full width unless opted 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;
}

/* Beat UA [hidden] so gated fields stay hidden. */
.darban-field[hidden] {
	display: none;
}

.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 */
.darban-field--invalid .darban-field__input,
.darban-field--invalid .darban-field__select,
/* Error on custom select trigger (native is visually hidden). */
.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);
}

/* LTR content inputs (phone/email/username/password) — physical left align. */
.darban-field__input--ltr {
	direction: ltr;
	text-align: left;
	/* Latin digits/letters even under Persian-digit fonts. */
	font-variant-numeric: lining-nums tabular-nums;
}

/* Placeholder stays left-aligned with LTR 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 );
}

/* Builder field widths: --half shares a row; --full is explicit. */
.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%;
}

/* Mobile: half fields stack full-width. */
@media (max-width: 480px) {
	.darban-field--half {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* Select — custom trigger + listbox; native kept for no-JS. */

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

/* Hide native select once JS builds the custom trigger. */
.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-JS: native select keeps 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;
}

/* Empty: trigger shows placeholder as hint. */
.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;
}

/* Flip menu above when room below is tight. */
.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;
}

/* Suppress pop animation while measuring (scroll). */
.darban-combo__menu--measuring {
	animation: none !important;
	transition: none !important;
}

/* Height cap from JS; list scrolls inside. */
.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;
}

/* Placeholder row is not a 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 */

/* Consent checkbox: inline row, natural size. */
.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;
	/* Align box to first text line. */
	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);
	/* Drawn tick (scales with box). */
	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;
}

/* Selected dot via inset shadow. */
.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;
}

/* Floating toasts — local vars; centered with equal side insets. */
.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: repeat message bumps 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. */
.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 bar; pause on hover. Anchored inline-start for RTL/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 — physical left (phone is always LTR data). */
.darban-field--has-dial {
	position: relative;
}

.darban-field--has-dial .darban-field__input {
	/* Physical left: dial button side. */
	padding-left: 100px !important;
	padding-right: 14px !important;
}

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

/* Trigger contents LTR; wrapper keeps page dir for country names. */
.darban-dial__button {
	direction: ltr;
}

.darban-dial__button {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 46px;
	padding: 0 10px;
	background: transparent;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 14px;
}

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

.darban-dial__code {
	direction: ltr;
	font-weight: 600;
	line-height: 1;
	color: var(--darban-text, #1f2330);
}

.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);
}

/* Menu rows follow page dir; dial codes stay LTR. */
.darban-dial__search,
.darban-dial__item {
	text-align: start;
}

.darban-dial__menu {
	position: absolute;
	/* Physical left: menu under the dial button. */
	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;
}

/* Pin essentials against theme [hidden]/content-box overrides. */
.darban-dial__menu[hidden] {
	display: none !important;
}

/* No pop animation while measuring open side on scroll. */
.darban-dial__menu--measuring {
	animation: none !important;
	transition: none !important;
}

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

/* Flip menu above when room below is tight. */
.darban-dial__menu--up {
	top: auto;
	bottom: calc(100% + 6px);
	transform-origin: bottom;
	box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.14);
}

/* Side overflow: re-anchor (physical; matches 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: color-mix( in srgb, var(--darban-text, #1f2330) 28%, transparent ) transparent;
}

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

.darban-dial__list::-webkit-scrollbar-thumb {
	background: color-mix( in srgb, var(--darban-text, #1f2330) 28%, transparent );
	border-radius: 999px;
}

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

.darban-dial__item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 42px;
	padding: 10px 12px;
	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);
}

/* Dial dropdown supremacy vs theme/Elementor button kits. */
.darban-dial .darban-dial__menu,
.darban-form .darban-dial__menu,
.darban-popup .darban-dial__menu,
.darban-account-scope .darban-dial__menu,
.darban-checkout-field .darban-dial__menu,
.wc-block-components-address-form__darban-mobile .darban-dial__menu {
	position: absolute !important;
	width: 280px !important;
	max-width: min(80vw, calc(100vw - 16px)) !important;
	margin: 0 !important;
	padding: 8px !important;
	background: var(--darban-bg, #fff) !important;
	background-color: var(--darban-bg, #fff) !important;
	border: 1px solid var(--darban-field-border, #d7dae2) !important;
	border-radius: var(--darban-field-radius, 10px) !important;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14) !important;
	color: var(--darban-text, #1f2330) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	z-index: 100050 !important;
	overflow: visible !important;
}

.darban-dial .darban-dial__menu--up,
.darban-form .darban-dial__menu--up,
.darban-popup .darban-dial__menu--up,
.darban-account-scope .darban-dial__menu--up,
.darban-checkout-field .darban-dial__menu--up,
.wc-block-components-address-form__darban-mobile .darban-dial__menu--up {
	box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.14) !important;
}

.darban-dial .darban-dial__search,
.darban-form .darban-dial__search,
.darban-popup .darban-dial__search,
.darban-account-scope .darban-dial__search,
.darban-checkout-field .darban-dial__search,
.wc-block-components-address-form__darban-mobile .darban-dial__search,
.darban-dial input.darban-dial__search,
.darban-checkout-field input.darban-dial__search,
.darban-checkout-field.darban-field--has-dial input.darban-dial__search {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	height: 38px !important;
	min-height: 38px !important;
	padding: 0 12px !important;
	padding-left: 12px !important;
	padding-right: 12px !important;
	margin: 0 0 8px !important;
	border: 1px solid var(--darban-field-border, #d7dae2) !important;
	border-radius: 8px !important;
	background: var(--darban-bg, #fff) !important;
	background-color: var(--darban-bg, #fff) !important;
	color: var(--darban-text, #1f2330) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: normal !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-align: start !important;
	direction: inherit !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.darban-dial .darban-dial__search:focus,
.darban-dial .darban-dial__search:focus-visible,
.darban-form .darban-dial__search:focus,
.darban-popup .darban-dial__search:focus,
.darban-account-scope .darban-dial__search:focus,
.darban-checkout-field .darban-dial__search:focus,
.wc-block-components-address-form__darban-mobile .darban-dial__search:focus {
	border-color: var(--darban-primary, #4f46e5) !important;
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--darban-primary, #4f46e5) 18%, transparent ) !important;
	outline: none !important;
}

.darban-dial .darban-dial__list,
.darban-form .darban-dial__list,
.darban-popup .darban-dial__list,
.darban-account-scope .darban-dial__list,
.darban-checkout-field .darban-dial__list,
.wc-block-components-address-form__darban-mobile .darban-dial__list {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	max-height: 240px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow-x: hidden !important;
	overflow-y: auto !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	list-style: none !important;
	scrollbar-width: thin !important;
	scrollbar-color: color-mix( in srgb, var(--darban-text, #1f2330) 28%, transparent ) transparent !important;
}

.darban-dial .darban-dial__list::-webkit-scrollbar,
.darban-form .darban-dial__list::-webkit-scrollbar,
.darban-popup .darban-dial__list::-webkit-scrollbar,
.darban-account-scope .darban-dial__list::-webkit-scrollbar,
.darban-checkout-field .darban-dial__list::-webkit-scrollbar,
.wc-block-components-address-form__darban-mobile .darban-dial__list::-webkit-scrollbar {
	width: 6px !important;
}

.darban-dial .darban-dial__list::-webkit-scrollbar-thumb,
.darban-form .darban-dial__list::-webkit-scrollbar-thumb,
.darban-popup .darban-dial__list::-webkit-scrollbar-thumb,
.darban-account-scope .darban-dial__list::-webkit-scrollbar-thumb,
.darban-checkout-field .darban-dial__list::-webkit-scrollbar-thumb,
.wc-block-components-address-form__darban-mobile .darban-dial__list::-webkit-scrollbar-thumb {
	background: color-mix( in srgb, var(--darban-text, #1f2330) 28%, transparent ) !important;
	border-radius: 999px !important;
}

.darban-dial .darban-dial__list::-webkit-scrollbar-track,
.darban-form .darban-dial__list::-webkit-scrollbar-track,
.darban-popup .darban-dial__list::-webkit-scrollbar-track,
.darban-account-scope .darban-dial__list::-webkit-scrollbar-track,
.darban-checkout-field .darban-dial__list::-webkit-scrollbar-track,
.wc-block-components-address-form__darban-mobile .darban-dial__list::-webkit-scrollbar-track {
	background: transparent !important;
}

.darban-dial .darban-dial__item,
.darban-dial button.darban-dial__item,
.darban-form .darban-dial__item,
.darban-popup .darban-dial__item,
.darban-account-scope .darban-dial__item,
.darban-checkout-field .darban-dial__item,
.wc-block-components-address-form__darban-mobile .darban-dial__item,
.darban-dial .darban-dial__item:hover,
.darban-dial .darban-dial__item:focus,
.darban-dial button.darban-dial__item:hover,
.darban-dial button.darban-dial__item:focus,
.darban-form .darban-dial__item:hover,
.darban-form .darban-dial__item:focus,
.darban-popup .darban-dial__item:hover,
.darban-popup .darban-dial__item:focus,
.darban-account-scope .darban-dial__item:hover,
.darban-account-scope .darban-dial__item:focus,
.darban-checkout-field .darban-dial__item:hover,
.darban-checkout-field .darban-dial__item:focus,
.wc-block-components-address-form__darban-mobile .darban-dial__item:hover,
.wc-block-components-address-form__darban-mobile .darban-dial__item:focus {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px !important;
	width: 100% !important;
	min-width: 0 !important;
	min-height: 42px !important;
	height: auto !important;
	margin: 0 !important;
	padding: 10px 12px !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	color: var(--darban-text, #1f2330) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-align: start !important;
	text-shadow: none !important;
	cursor: pointer !important;
	outline: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}

.darban-dial .darban-dial__item:hover,
.darban-dial button.darban-dial__item:hover,
.darban-form .darban-dial__item:hover,
.darban-popup .darban-dial__item:hover,
.darban-account-scope .darban-dial__item:hover,
.darban-checkout-field .darban-dial__item:hover,
.wc-block-components-address-form__darban-mobile .darban-dial__item:hover {
	background: var(--darban-field-bg, #f4f5f7) !important;
	background-color: var(--darban-field-bg, #f4f5f7) !important;
	color: var(--darban-text, #1f2330) !important;
}

.darban-dial .darban-dial__flag,
.darban-form .darban-dial__flag,
.darban-popup .darban-dial__flag,
.darban-account-scope .darban-dial__flag,
.darban-checkout-field .darban-dial__flag,
.wc-block-components-address-form__darban-mobile .darban-dial__flag {
	display: block !important;
	width: auto !important;
	height: 16px !important;
	max-width: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 2px !important;
	object-fit: cover !important;
	box-shadow: none !important;
	flex: 0 0 auto !important;
}

.darban-dial .darban-dial__name,
.darban-form .darban-dial__name,
.darban-popup .darban-dial__name,
.darban-account-scope .darban-dial__name,
.darban-checkout-field .darban-dial__name,
.wc-block-components-address-form__darban-mobile .darban-dial__name {
	flex: 1 1 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--darban-text, #1f2330) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	text-align: start !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	background: transparent !important;
	border: none !important;
}

.darban-dial .darban-dial__item .darban-dial__code,
.darban-form .darban-dial__item .darban-dial__code,
.darban-popup .darban-dial__item .darban-dial__code,
.darban-account-scope .darban-dial__item .darban-dial__code,
.darban-checkout-field .darban-dial__item .darban-dial__code,
.wc-block-components-address-form__darban-mobile .darban-dial__item .darban-dial__code {
	flex: 0 0 auto !important;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--darban-muted, #6b7180) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	direction: ltr !important;
	background: transparent !important;
	border: none !important;
}

/* Dial code (+98): Appearance text token, not theme kits. */
.darban-dial .darban-dial__button .darban-dial__code,
.darban-form .darban-dial__button .darban-dial__code,
.darban-popup .darban-dial__button .darban-dial__code,
.darban-account-scope .darban-dial__button .darban-dial__code,
.darban-checkout-field .darban-dial__button .darban-dial__code,
.wc-block-components-address-form__darban-mobile .darban-dial__button .darban-dial__code,
.darban-dial .darban-dial__button:hover .darban-dial__code,
.darban-dial .darban-dial__button:focus .darban-dial__code,
.darban-form .darban-dial__button:hover .darban-dial__code,
.darban-form .darban-dial__button:focus .darban-dial__code,
.darban-popup .darban-dial__button:hover .darban-dial__code,
.darban-popup .darban-dial__button:focus .darban-dial__code,
.darban-account-scope .darban-dial__button:hover .darban-dial__code,
.darban-account-scope .darban-dial__button:focus .darban-dial__code,
.darban-checkout-field .darban-dial__button:hover .darban-dial__code,
.darban-checkout-field .darban-dial__button:focus .darban-dial__code,
.wc-block-components-address-form__darban-mobile .darban-dial__button:hover .darban-dial__code,
.wc-block-components-address-form__darban-mobile .darban-dial__button:focus .darban-dial__code {
	color: var(--darban-text, #1f2330) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	direction: ltr !important;
}

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

/* Whole head row triggers the challenge. */
.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: site favicon or neutral shield. */
.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;
}

/* Flip panel below when room above is tight. */
.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);
	user-select: none;
	-webkit-user-select: none;
	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);
}

/* Selected-tile corner badge. */
.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 helper, verify button, 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 (shortcode) */
.darban-trigger {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: var(--darban-btn-padding, 10px 18px);
	border: none;
	border-radius: var(--darban-btn-radius, var(--darban-field-radius, 10px));
	background: var(--darban-btn-bg, var(--darban-primary, #4f46e5));
	color: var(--darban-btn-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 + name + caret). */
.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);
}

/* Chip menu — flips when measured space is tight. */
.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,
.darban-chip__item .darban-chip__custom-icon {
	flex-shrink: 0;
	transition: color 0.13s ease, fill 0.13s ease;
}

.darban-chip__item > svg {
	color: inherit;
}

.darban-chip__item:hover {
	background: #f3f4f6;
}

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

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

/* Shenasa status card in signed-in dropdown. */
.darban-chip__status {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 2px 2px 6px;
	padding: 12px;
	border-radius: 10px;
	text-decoration: none !important;
	background: linear-gradient( 135deg, rgba(79, 70, 229, 0.1), rgba(99, 102, 241, 0.04) );
	border: 1px solid rgba(79, 70, 229, 0.12);
	color: #1f2330;
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.darban-chip__status:hover {
	background: linear-gradient( 135deg, rgba(79, 70, 229, 0.14), rgba(99, 102, 241, 0.07) );
	border-color: rgba(79, 70, 229, 0.22);
	color: #1f2330;
}

.darban-chip__status-dot {
	position: relative;
	display: inline-flex;
	width: 10px;
	height: 10px;
	margin-inline: 4px;
	border-radius: 50%;
	flex-shrink: 0;
	background: #4f46e5;
	box-shadow: 0 0 0 0 color-mix( in srgb, currentColor 45%, transparent );
	animation: darban-chip-status-blink 1.6s ease-in-out infinite;
}

.darban-chip__status-dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: inherit;
	opacity: 0.35;
	animation: darban-chip-status-ring 1.6s ease-out infinite;
}

.darban-chip__status-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.darban-chip__status-title {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: #1f2330;
}

.darban-chip__status-meta {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	color: #6b7180;
}

.darban-chip__status--approved {
	background: linear-gradient( 135deg, rgba(22, 163, 74, 0.12), rgba(34, 197, 94, 0.04) );
	border-color: rgba(22, 163, 74, 0.18);
}

.darban-chip__status--approved .darban-chip__status-dot {
	background: #16a34a;
}

.darban-chip__status--approved .darban-chip__status-meta {
	color: #15803d;
}

.darban-chip__status--pending {
	background: linear-gradient( 135deg, rgba(217, 119, 6, 0.12), rgba(245, 158, 11, 0.04) );
	border-color: rgba(217, 119, 6, 0.18);
}

.darban-chip__status--pending .darban-chip__status-dot {
	background: #d97706;
}

.darban-chip__status--pending .darban-chip__status-meta {
	color: #b45309;
}

.darban-chip__status--incomplete .darban-chip__status-dot {
	background: #6366f1;
}

.darban-chip__status--rejected {
	background: linear-gradient( 135deg, rgba(220, 38, 38, 0.1), rgba(248, 113, 113, 0.04) );
	border-color: rgba(220, 38, 38, 0.16);
}

.darban-chip__status--rejected .darban-chip__status-dot {
	background: #dc2626;
}

.darban-chip__status--rejected .darban-chip__status-meta {
	color: #b91c1c;
}

@keyframes darban-chip-status-blink {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.45;
		transform: scale(0.86);
	}
}

@keyframes darban-chip-status-ring {
	0% {
		transform: scale(0.55);
		opacity: 0.45;
	}
	70% {
		transform: scale(1.55);
		opacity: 0;
	}
	100% {
		transform: scale(1.55);
		opacity: 0;
	}
}

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

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

/* Small screens: icon-only when enabled. */
@media ( max-width: 600px ) {
	.darban-trigger--mobile-icon {
		--darban-btn-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;
	/* Center via dialog auto margins (avoids flex clip in scroll container). */
	align-items: flex-start;
	padding: 20px;
	/* Scroll on .darban-popup, not the dialog. */
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

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

/* Checkout OTP modal: hidden until explicitly opened. */
.darban-checkout-modal {
	display: none;
}

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

/* Fixed backdrop (popup is a scroll container); tint/blur from template. */
.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 ) );
}

/* Dialog unclipped so dial/select menus can overhang; scroll on .darban-popup. */
.darban-popup__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 420px;
	/* Auto margins center; tall dialogs scroll from the top. */
	margin: auto;
	/* Card bg: --darban-bg (minimal/split) or --darban-popup-card (glass). */
	background: var(--darban-popup-card, var(--darban-bg, #fff));
	border-radius: 18px;
	/* Padding on .darban-form__inner so the loading veil covers the surface. */
	padding: 0;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
	/* No max-height/overflow here — would clip dropdowns. */
	overflow: visible;
	animation: darban-popup-in 0.25s ease;
}

/* Dialog paints the card; form 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;
	/* Match dialog corners for the loading veil. */
	border-radius: 18px;
}

/* Popup field border from text token for dark-card contrast. */
.darban-popup .darban-form {
	--darban-field-border: color-mix( in srgb, var(--darban-text, #1f2330) 22%, transparent );
}

/* Loading veil tints with dialog card, not 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 — outside dialog; trailing edge via physical LTR/RTL rules. */
.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; sits on 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;
	/* Enter after dialog so focus lands on the form first. */
	animation: darban-popup-close-in 0.28s ease 0.12s both;
}

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

/* RTL: trailing edge = physical right. */
[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); }
}

/* reCAPTCHA v3 badge: own stacking context so popup backdrop-filter cannot blur it. */
.grecaptcha-badge {
	z-index: 2147483000 !important;
	isolation: isolate !important;
	/* Keep collapsed footprint if connection-error copy expands. */
	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: tuck close closer to 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 */
.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;
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	border-radius: 6px;
}

/* Tile grid: three per row, readable height. */
.darban-rc__tile {
	min-height: 56px;
	padding: 3px;
}

/* Checkout: dial 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); }
}

/* Checkout Darban mobile field (classic + block). */
.wc-block-components-address-form__darban-mobile {
	position: relative;
}

/* Room for dial regardless of checkout input class. */
.wc-block-components-address-form__darban-mobile.darban-field--has-dial .input-text,
/* Physical left: dial side. */
.wc-block-components-address-form__darban-mobile.darban-field--has-dial .darban-checkout-field__input {
	padding-left: 98px;
	padding-right: 12px;
}

/* Pin dial to input box; stretch to classic input 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: anchor dial to .woocommerce-input-wrapper. */
.wc-block-components-address-form__darban-mobile .woocommerce-input-wrapper {
	position: relative;
	display: block;
}

/* Physical left, matching input padding. */
.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 dial badge when country selector is off. */
.darban-dial-host { position: relative; }
/* Non-interactive badge on physical left (LTR phone 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: stretch dial to theme input height. */
.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 field. */
.wc-block-components-text-input.wc-block-components-address-form__darban-mobile {
	position: relative;
}

/* Pin dial to the input box. */
.wc-block-components-text-input.wc-block-components-address-form__darban-mobile .darban-dial,
.wc-block-components-text-input.wc-block-components-address-form__darban-mobile .darban-dial.darban-dial--fixed {
	position: absolute;
	left: 1px;
	right: auto;
	top: 0;
	bottom: 0;
	height: auto;
	display: flex;
	align-items: center;
	z-index: 2;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.wc-block-components-text-input.wc-block-components-address-form__darban-mobile .darban-dial__button {
	height: 100%;
	padding: 0 10px;
}
/* Extra left pad when the dial is visible. */
.wc-block-components-text-input.wc-block-components-address-form__darban-mobile.darban-field--has-dial input:not(.darban-dial__search) {
	padding-left: 98px !important;
	padding-right: 12px !important;
	direction: ltr;
	text-align: left;
}

/* RTL: number typed on the right. */
[dir="rtl"] .wc-block-components-text-input.wc-block-components-address-form__darban-mobile input:not(.darban-dial__search),
.rtl .wc-block-components-text-input.wc-block-components-address-form__darban-mobile input:not(.darban-dial__search) {
	text-align: right;
}

.wc-block-components-text-input.wc-block-components-address-form__darban-mobile.darban-field--has-dial label {
	max-width: calc( 100% - 116px );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* LTR: label past the dial. */
[dir="ltr"] .wc-block-components-text-input.wc-block-components-address-form__darban-mobile.darban-field--has-dial label,
html:not([dir="rtl"]) body:not(.rtl) .wc-block-components-text-input.wc-block-components-address-form__darban-mobile.darban-field--has-dial label,
[dir="ltr"] .wc-block-components-form .wc-block-components-text-input.wc-block-components-address-form__darban-mobile.darban-field--has-dial.is-active label,
[dir="ltr"] .wc-block-components-form .wc-block-components-text-input.wc-block-components-address-form__darban-mobile.darban-field--has-dial input:-webkit-autofill + label,
[dir="ltr"] .wc-block-components-text-input.wc-block-components-address-form__darban-mobile.darban-field--has-dial.is-active label,
[dir="ltr"] .wc-block-components-text-input.wc-block-components-address-form__darban-mobile.darban-field--has-dial input:-webkit-autofill + label,
html:not([dir="rtl"]) body:not(.rtl) .wc-block-components-form .wc-block-components-text-input.wc-block-components-address-form__darban-mobile.darban-field--has-dial.is-active label,
html:not([dir="rtl"]) body:not(.rtl) .wc-block-components-form .wc-block-components-text-input.wc-block-components-address-form__darban-mobile.darban-field--has-dial input:-webkit-autofill + label,
html:not([dir="rtl"]) body:not(.rtl) .wc-block-components-text-input.wc-block-components-address-form__darban-mobile.darban-field--has-dial.is-active label,
html:not([dir="rtl"]) body:not(.rtl) .wc-block-components-text-input.wc-block-components-address-form__darban-mobile.darban-field--has-dial input:-webkit-autofill + label {
	left: 100px !important;
	right: auto;
}

[dir="rtl"] .wc-block-components-text-input.wc-block-components-address-form__darban-mobile label,
.rtl .wc-block-components-text-input.wc-block-components-address-form__darban-mobile label {
	text-align: right;
	left: auto !important;
}

/* Contact field: LTR label sits past the dial. */
.wc-block-components-text-input.darban-field--has-dial:has(#contact-darban-mobile) label,
.wc-block-components-text-input:has(#contact-darban-mobile).darban-field--has-dial label,
.darban-checkout-field.darban-field--has-dial label[for="contact-darban-mobile"],
.wc-block-components-text-input:has(.darban-dial) label[for="contact-darban-mobile"] {
	max-width: calc( 100% - 116px );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

[dir="ltr"] .wc-block-components-text-input.darban-field--has-dial label[for="contact-darban-mobile"],
[dir="ltr"] .wc-block-components-text-input.darban-checkout-field.darban-field--has-dial label[for="contact-darban-mobile"],
[dir="ltr"] .wc-block-components-text-input.darban-field--has-dial:has(#contact-darban-mobile) label,
[dir="ltr"] .wc-block-components-text-input:has(.darban-dial) label[for="contact-darban-mobile"],
[dir="ltr"] .darban-checkout-field.darban-field--has-dial label[for="contact-darban-mobile"],
[dir="ltr"] .wc-block-components-text-input.darban-field--has-dial.is-active label[for="contact-darban-mobile"],
[dir="ltr"] .wc-block-components-form .wc-block-components-text-input.darban-field--has-dial label[for="contact-darban-mobile"],
html:not([dir="rtl"]) body:not(.rtl) .wc-block-components-text-input.darban-field--has-dial label[for="contact-darban-mobile"],
html:not([dir="rtl"]) body:not(.rtl) .wc-block-components-text-input.darban-checkout-field.darban-field--has-dial label[for="contact-darban-mobile"],
html:not([dir="rtl"]) body:not(.rtl) .wc-block-components-text-input.darban-field--has-dial:has(#contact-darban-mobile) label,
html:not([dir="rtl"]) body:not(.rtl) .wc-block-components-text-input:has(.darban-dial) label[for="contact-darban-mobile"],
html:not([dir="rtl"]) body:not(.rtl) .darban-checkout-field.darban-field--has-dial label[for="contact-darban-mobile"],
html:not([dir="rtl"]) body:not(.rtl) .wc-block-components-text-input.darban-field--has-dial.is-active label[for="contact-darban-mobile"],
html:not([dir="rtl"]) body:not(.rtl) .wc-block-components-form .wc-block-components-text-input.darban-field--has-dial label[for="contact-darban-mobile"] {
	left: 100px !important;
	right: auto !important;
	inset-inline-start: 100px !important;
	inset-inline-end: auto !important;
	text-align: left;
}

/* Checkout verification modal */
.darban-checkout-modal .darban-popup__dialog {
	/* Base tokens outside .darban-form; template class overrides palette. */
	--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: centered spinner only. */
.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: 0;
}

/* Header: title + close. */
.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);
}

/* Inline close in header (not floating). */
/* Checkout close stays in header — no floating backdrop treatment. */
.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%;
}

/* Quiet resend text button. */
.darban-checkout-modal__resend {
	background: none;
	background-color: transparent;
	border: none;
	border-radius: 0;
	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:hover,
.darban-checkout-modal__resend:focus {
	background: none;
	background-color: transparent;
	color: var(--darban-primary, #4f46e5);
	opacity: 0.85;
}

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

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

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

/* Inline status (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. */
.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 */
.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 plane / badge motion. */
.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;
	}
}

/* Spinner tinted with template primary. */
.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) */
.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 — keep dial padding only while the badge is visible. */
.darban-checkout-field--locked.darban-field--has-dial .darban-checkout-field__input,
.darban-checkout-field--locked.darban-field--has-dial input[readonly]:not(.darban-dial__search),
.darban-checkout-field.darban-checkout-field--locked.darban-field--has-dial .input-text:not(.darban-dial__search),
.darban-checkout-field.darban-checkout-field--locked.darban-field--has-dial input[type="tel"],
.darban-checkout-field.darban-checkout-field--locked.darban-field--has-dial input[type="text"]:not(.darban-dial__search) {
	padding-left: 98px !important;
	padding-right: 12px !important;
	background: transparent !important;
	background-color: transparent !important;
	cursor: not-allowed !important;
	opacity: 1 !important;
}

.darban-checkout-field--locked:not(.darban-field--has-dial) .darban-checkout-field__input,
.darban-checkout-field--locked:not(.darban-field--has-dial) input[readonly]:not(.darban-dial__search),
.darban-checkout-field.darban-checkout-field--locked:not(.darban-field--has-dial) .input-text:not(.darban-dial__search),
.darban-checkout-field.darban-checkout-field--locked:not(.darban-field--has-dial) input[type="tel"],
.darban-checkout-field.darban-checkout-field--locked:not(.darban-field--has-dial) input[type="text"]:not(.darban-dial__search) {
	background: transparent !important;
	background-color: transparent !important;
	cursor: not-allowed !important;
	opacity: 1 !important;
}

/* Checkout: reserve dial space; exclude menu search input. */
.darban-checkout-field.darban-field--has-dial .darban-checkout-field__input,
.darban-checkout-field.darban-field--has-dial input[type="tel"],
.darban-checkout-field.darban-field--has-dial input[type="text"]:not(.darban-dial__search),
.darban-checkout-field.darban-field--has-dial .input-text:not(.darban-dial__search) {
	padding-left: 98px !important;
	padding-right: 12px !important;
	direction: ltr;
}

.darban-checkout-field.darban-field--has-dial:not(.wc-block-components-text-input):not(.wc-block-components-address-form__darban-mobile) .darban-checkout-field__input,
.darban-checkout-field.darban-field--has-dial:not(.wc-block-components-text-input):not(.wc-block-components-address-form__darban-mobile) input[type="tel"],
.darban-checkout-field.darban-field--has-dial:not(.wc-block-components-text-input):not(.wc-block-components-address-form__darban-mobile) input[type="text"]:not(.darban-dial__search),
.darban-checkout-field.darban-field--has-dial:not(.wc-block-components-text-input):not(.wc-block-components-address-form__darban-mobile) .input-text:not(.darban-dial__search) {
	text-align: left;
}

[dir="rtl"] .wc-block-components-text-input.wc-block-components-address-form__darban-mobile.darban-checkout-field input:not(.darban-dial__search),
[dir="rtl"] .wc-block-components-text-input.wc-block-components-address-form__darban-mobile input:not(.darban-dial__search),
.rtl .wc-block-components-text-input.wc-block-components-address-form__darban-mobile.darban-checkout-field input:not(.darban-dial__search),
.rtl .wc-block-components-text-input.wc-block-components-address-form__darban-mobile input:not(.darban-dial__search) {
	text-align: right;
}

/* Legal acceptance line. */
.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 (verified users). */
.darban-dial--locked {
	cursor: not-allowed !important;
	pointer-events: none;
}

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

/* Locked/fixed badge must keep the flag SVG — some themes hide imgs beside readonly inputs. */
.darban-dial--locked .darban-dial__flag,
.darban-dial--fixed .darban-dial__flag,
.darban-checkout-field--locked .darban-dial__flag,
.darban-checkout-field .darban-dial--locked .darban-dial__flag,
.wc-block-components-address-form__darban-mobile .darban-dial__flag {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* My Account mobile field — dial left, status dot right (physical). */
.darban-account-scope {
	--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: 12px;
	--darban-field-radius: 10px;
}

/* Checkout field tokens outside .darban-form. */
.darban-checkout-field {
	--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-field-radius: 11px;
}
.darban-account-row { display:block; }
.darban-account-row > label { display:block; margin-bottom:6px; font-weight:600; }

/* Row: input + button */
.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;
}
/* Right pad for the status dot. */
.darban-account-field__input {
	width:100%; box-sizing:border-box; height:44px; line-height:44px;
	padding-left:14px !important; padding-right:34px !important;
	text-align:left;
	border-radius:var(--darban-field-radius) !important;
	margin:0 !important;
}
.darban-account-field.darban-field--has-dial .darban-account-field__input {
	padding-left:96px !important;
}
/* Dial on physical left; inset-inline flips on RTL. */
.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 !important;
	background:transparent !important;
	background-color:transparent !important;
	border-radius:0 !important;
	box-shadow:none !important;
}
.darban-account-field .darban-dial__button,
.darban-account-field .darban-dial__button:hover,
.darban-account-field .darban-dial__button:focus {
	height:42px !important;
	min-height:0 !important;
	padding:0 10px !important;
	gap:6px !important;
	background:transparent !important;
	background-color:transparent !important;
	border:none !important;
	border-right:none !important;
	border-left:none !important;
	border-radius:0 !important;
	box-shadow:none !important;
	font-size:14px !important;
	font-weight:600 !important;
	text-transform:none !important;
	outline:none !important;
}

/* Button height matches input; theme colors the WC button. */
.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;
}

/* Status dot — physical right, opposite the dial. */
.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); }
}
/* Dial/dot use physical edges — no RTL padding override; locked keeps dial left + dot right. */
.darban-account-group--locked .darban-account-field__input {
	padding-right:34px !important;
	cursor:default;
}

/* Tooltip from data-tip; centered on the dot. */
.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: one row; button never wraps. */
@media (max-width: 480px) {
	.darban-account-change { padding-inline-start:12px !important; padding-inline-end:12px !important; }
}

/* Password reveal — RTL flip (mirrors with page dir; not LTR like phone). */
.darban-field--password {
	position: relative;
}

/* !important: beat form supremacy padding reset. */
/* LTR: value left, eye room 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: mirror password field only (eye + padding to the left). */
[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;
}

/* Placeholder follows value side. */
[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: eye on the left edge. */
[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;
}

/* Slash + gap share dash length; retract when revealed. */
.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;
}

/* Pupil shrinks while covered. */
.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 );
}

/* Blink on toggle (JS restarts class); 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 — inert preview. */
.darban-el-inert {
	pointer-events: none;
	user-select: none;
}

/* Editor: force chip menu open for styling. */
.darban-el-menu-open .darban-chip__menu[hidden] {
	display: block !important;
	position: static;
	margin-top: 8px;
}

/* Elementor menu icons match 16px SVG set. */
.darban-chip__custom-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	font-size: 15px;
	line-height: 1;
	flex: 0 0 auto;
}

.darban-chip__custom-icon i,
.darban-chip__custom-icon svg,
.darban-chip__custom-icon .e-font-icon-svg {
	width: 16px;
	height: 16px;
	font-size: 15px;
	line-height: 1;
}

/* Elementor widget supremacy vs kit button/typography leaks. */
.elementor-widget-darban_auth .darban-elementor-root,
.elementor-widget-darban_auth .darban-form,
.elementor-widget-darban_auth .darban-chip,
.darban-elementor-root .darban-form,
.darban-elementor-root .darban-chip {
	font-style: normal;
	text-transform: none;
	letter-spacing: normal;
}

.elementor-widget-darban_auth button:not(.darban-trigger),
.elementor-widget-darban_auth button:not(.darban-trigger):hover,
.elementor-widget-darban_auth button:not(.darban-trigger):focus,
.elementor-widget-darban_auth button:not(.darban-trigger):active,
.elementor-widget-darban_auth [type="button"]:not(.darban-trigger),
.elementor-widget-darban_auth [type="button"]:not(.darban-trigger):hover,
.elementor-widget-darban_auth [type="button"]:not(.darban-trigger):focus,
.elementor-widget-darban_auth [type="submit"],
.elementor-widget-darban_auth [type="submit"]:hover,
.elementor-widget-darban_auth [type="submit"]:focus,
.darban-elementor-root button:not(.darban-trigger),
.darban-elementor-root button:not(.darban-trigger):hover,
.darban-elementor-root button:not(.darban-trigger):focus,
.darban-elementor-root button:not(.darban-trigger):active,
.darban-elementor-root [type="button"]:not(.darban-trigger),
.darban-elementor-root [type="submit"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	font-family: inherit !important;
	font-style: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	outline-offset: 0 !important;
}

.elementor-widget-darban_auth .darban-btn--primary,
.elementor-widget-darban_auth .darban-btn--primary:hover,
.elementor-widget-darban_auth .darban-btn--primary:focus,
.elementor-widget-darban_auth .darban-btn--primary:active,
.darban-elementor-root .darban-btn--primary,
.darban-elementor-root .darban-btn--primary:hover,
.darban-elementor-root .darban-btn--primary:focus,
.darban-elementor-root .darban-btn--primary:active {
	background: var(--darban-primary) !important;
	background-color: var(--darban-primary) !important;
	color: var(--darban-on-primary) !important;
	border: none !important;
	border-radius: var(--darban-field-radius) !important;
	box-shadow: none !important;
}

.elementor-widget-darban_auth .darban-link,
.elementor-widget-darban_auth .darban-link:hover,
.elementor-widget-darban_auth .darban-link:focus,
.elementor-widget-darban_auth button.darban-link,
.darban-elementor-root .darban-link,
.darban-elementor-root .darban-link:hover,
.darban-elementor-root .darban-link:focus,
.darban-elementor-root button.darban-link {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	color: var(--darban-primary) !important;
	box-shadow: none !important;
}

.elementor-widget-darban_auth .darban-tabs__tab,
.elementor-widget-darban_auth .darban-tabs__tab:hover,
.elementor-widget-darban_auth .darban-tabs__tab:focus,
.darban-elementor-root .darban-tabs__tab,
.darban-elementor-root .darban-tabs__tab:hover,
.darban-elementor-root .darban-tabs__tab:focus {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 8px !important;
	color: var(--darban-muted) !important;
	box-shadow: none !important;
}

.elementor-widget-darban_auth .darban-tabs__tab.is-active,
.elementor-widget-darban_auth .darban-tabs__tab.is-active:hover,
.darban-elementor-root .darban-tabs__tab.is-active,
.darban-elementor-root .darban-tabs__tab.is-active:hover {
	background: var(--darban-bg) !important;
	background-color: var(--darban-bg) !important;
	color: var(--darban-text) !important;
}

.elementor-widget-darban_auth .darban-dial__button,
.elementor-widget-darban_auth .darban-dial__button:hover,
.elementor-widget-darban_auth .darban-dial__button:focus,
.elementor-widget-darban_auth button.darban-dial__button,
.darban-elementor-root .darban-dial__button,
.darban-elementor-root .darban-dial__button:hover,
.darban-elementor-root .darban-dial__button:focus,
.darban-elementor-root button.darban-dial__button {
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.elementor-widget-darban_auth .darban-dial__button .darban-dial__code,
.darban-elementor-root .darban-dial__button .darban-dial__code {
	color: var(--darban-text, #1f2330) !important;
}

.elementor-widget-darban_auth .darban-field__input,
.elementor-widget-darban_auth .darban-otp__box,
.darban-elementor-root .darban-field__input,
.darban-elementor-root .darban-otp__box {
	color: var(--darban-text) !important;
	background: var(--darban-field-bg) !important;
	background-color: var(--darban-field-bg) !important;
	border: 1px solid var(--darban-field-border) !important;
	border-radius: var(--darban-field-radius) !important;
	box-shadow: none !important;
}

/* Style hardening vs theme/Elementor global button rules. */
.darban-form,
.darban-form *,
.darban-popup,
.darban-popup *,
.darban-chip,
.darban-chip *,
.darban-trigger,
.darban-trigger *,
.darban-2fa,
.darban-2fa *,
.darban-checkout-modal,
.darban-checkout-modal *,
.darban-toast-layer,
.darban-toast-layer *,
.darban-otp,
.darban-otp * {
	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,
.darban-2fa input[type="text"],
.darban-2fa input[type="tel"],
.darban-2fa input[type="number"] {
	-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;
}

/* Neutralize theme button kits on Darban controls. */
.darban-form button,
.darban-popup button,
.darban-2fa button,
.darban-checkout-modal button,
.darban-toast-layer button,
button.darban-trigger,
.darban-chip button,
.darban-form [type="button"],
.darban-form [type="submit"],
.darban-popup [type="button"],
.darban-popup [type="submit"],
.darban-2fa [type="button"],
.darban-2fa [type="submit"],
.darban-form button:hover,
.darban-form button:focus,
.darban-form button:focus-visible,
.darban-form button:active,
.darban-popup button:hover,
.darban-popup button:focus,
.darban-popup button:focus-visible,
.darban-popup button:active,
.darban-2fa button:hover,
.darban-2fa button:focus,
.darban-2fa button:focus-visible,
.darban-2fa button:active,
.darban-checkout-modal button:hover,
.darban-checkout-modal button:focus,
.darban-checkout-modal button:focus-visible,
.darban-checkout-modal button:active,
.darban-toast-layer button:hover,
.darban-toast-layer button:focus,
.darban-toast-layer button:active,
button.darban-trigger:hover,
button.darban-trigger:focus,
button.darban-trigger:active,
.darban-chip button:hover,
.darban-chip button:focus,
.darban-chip button:active,
.darban-form [type="button"]:hover,
.darban-form [type="button"]:focus,
.darban-form [type="button"]:active,
.darban-form [type="submit"]:hover,
.darban-form [type="submit"]:focus,
.darban-form [type="submit"]:active,
.darban-popup [type="button"]:hover,
.darban-popup [type="button"]:focus,
.darban-popup [type="button"]:active,
.darban-popup [type="submit"]:hover,
.darban-popup [type="submit"]:focus,
.darban-popup [type="submit"]:active,
.darban-2fa [type="button"]:hover,
.darban-2fa [type="button"]:focus,
.darban-2fa [type="button"]:active,
.darban-2fa [type="submit"]:hover,
.darban-2fa [type="submit"]:focus,
.darban-2fa [type="submit"]:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	font-family: inherit !important;
	font-style: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	text-decoration: none !important;
	margin: 0 !important;
	outline-offset: 0 !important;
	vertical-align: middle !important;
	overflow: visible !important;
	/* Kill theme min-height/gap/uppercase padding. */
	min-height: 0 !important;
	min-width: 0 !important;
	gap: 0 !important;
	line-height: 1.2 !important;
}

/* Kill theme box-shadows except popup trigger (--darban-btn-shadow). */
.darban-form button,
.darban-popup button,
.darban-2fa button,
.darban-checkout-modal button,
.darban-toast-layer button,
.darban-chip button:not(.darban-trigger),
.darban-form [type="button"],
.darban-form [type="submit"],
.darban-popup [type="button"],
.darban-popup [type="submit"],
.darban-2fa [type="button"],
.darban-2fa [type="submit"] {
	box-shadow: none !important;
}

button.darban-trigger {
	text-decoration: none !important;
}

.darban-chip__item,
.darban-chip__item:hover,
.darban-chip__item:focus {
	text-decoration: none !important;
	box-shadow: none !important;
	outline-offset: 0;
	border: none !important;
	border-style: none !important;
	border-radius: 8px !important;
	min-height: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.darban-chip__item {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 10px 12px !important;
	background: transparent !important;
	background-color: transparent !important;
	color: #1f2330 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

.darban-chip__item:hover,
.darban-chip__item:focus {
	background: var(--darban-chip-item-hover-bg, #f3f4f6) !important;
	background-color: var(--darban-chip-item-hover-bg, #f3f4f6) !important;
}

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

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

/* Form supremacy — Appearance vars win over theme/Elementor kits. */
.darban-form .darban-field__input,
.darban-popup .darban-field__input {
	height: 48px !important;
	/* No !important on padding — dial needs wider inline-start. */
	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;
}

/* Primary action buttons */
.darban-form .darban-btn,
.darban-popup .darban-btn,
.darban-2fa .darban-btn,
.darban-checkout-modal .darban-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	height: 48px !important;
	min-height: 48px !important;
	padding: 0 20px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	line-height: 1.2 !important;
	border-radius: var(--darban-field-radius) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	width: auto !important;
	max-width: 100% !important;
}

/* Separate border assert so Google outline survives. */
.darban-form .darban-btn:not(.darban-btn--google):not(.darban-btn--ghost),
.darban-popup .darban-btn:not(.darban-btn--google):not(.darban-btn--ghost),
.darban-2fa .darban-btn:not(.darban-btn--google):not(.darban-btn--ghost),
.darban-checkout-modal .darban-btn:not(.darban-btn--google):not(.darban-btn--ghost) {
	border: none !important;
}

/* Google button outline pinned (incl. hover). */
.darban-form .darban-btn--google,
.darban-popup .darban-btn--google,
.darban-2fa .darban-btn--google,
.darban-checkout-modal .darban-btn--google,
.darban-form .darban-btn--google:hover,
.darban-form .darban-btn--google:focus,
.darban-form .darban-btn--google:active,
.darban-popup .darban-btn--google:hover,
.darban-popup .darban-btn--google:focus,
.darban-popup .darban-btn--google:active,
.darban-2fa .darban-btn--google:hover,
.darban-2fa .darban-btn--google:focus,
.darban-2fa .darban-btn--google:active,
.darban-checkout-modal .darban-btn--google:hover,
.darban-checkout-modal .darban-btn--google:focus,
.darban-checkout-modal .darban-btn--google:active {
	background: var(--darban-bg) !important;
	background-color: var(--darban-bg) !important;
	color: var(--darban-text) !important;
	border: 1px solid var(--darban-field-border) !important;
	border-radius: var(--darban-field-radius) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}

.darban-form .darban-btn--ghost,
.darban-popup .darban-btn--ghost,
.darban-2fa .darban-btn--ghost,
.darban-checkout-modal .darban-btn--ghost,
.darban-form .darban-btn--ghost:hover:not(:disabled),
.darban-form .darban-btn--ghost:focus:not(:disabled),
.darban-form .darban-btn--ghost:active:not(:disabled),
.darban-popup .darban-btn--ghost:hover:not(:disabled),
.darban-popup .darban-btn--ghost:focus:not(:disabled),
.darban-popup .darban-btn--ghost:active:not(:disabled),
.darban-2fa .darban-btn--ghost:hover:not(:disabled),
.darban-2fa .darban-btn--ghost:focus:not(:disabled),
.darban-2fa .darban-btn--ghost:active:not(:disabled),
.darban-checkout-modal .darban-btn--ghost:hover:not(:disabled),
.darban-checkout-modal .darban-btn--ghost:focus:not(:disabled),
.darban-checkout-modal .darban-btn--ghost:active:not(:disabled) {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--darban-primary) !important;
	border: 1px solid color-mix( in srgb, var(--darban-primary) 35%, transparent ) !important;
	border-radius: var(--darban-field-radius) !important;
	box-shadow: none !important;
}

.darban-form .darban-btn--ghost:hover:not(:disabled),
.darban-form .darban-btn--ghost:focus:not(:disabled),
.darban-popup .darban-btn--ghost:hover:not(:disabled),
.darban-popup .darban-btn--ghost:focus:not(:disabled),
.darban-2fa .darban-btn--ghost:hover:not(:disabled),
.darban-2fa .darban-btn--ghost:focus:not(:disabled),
.darban-checkout-modal .darban-btn--ghost:hover:not(:disabled),
.darban-checkout-modal .darban-btn--ghost:focus:not(:disabled) {
	background: color-mix( in srgb, var(--darban-primary) 10%, transparent ) !important;
	background-color: color-mix( in srgb, var(--darban-primary) 10%, transparent ) !important;
}

/* Dial toggle: transparent chrome; ignore theme button kits. */
.darban-dial .darban-dial__button,
.darban-dial button.darban-dial__button,
.darban-dial span.darban-dial__button,
.darban-form .darban-dial__button,
.darban-popup .darban-dial__button,
.darban-account-scope .darban-dial__button,
.darban-dial .darban-dial__button:hover,
.darban-dial .darban-dial__button:focus,
.darban-dial button.darban-dial__button:hover,
.darban-dial button.darban-dial__button:focus,
.darban-form .darban-dial__button:hover,
.darban-form .darban-dial__button:focus,
.darban-popup .darban-dial__button:hover,
.darban-popup .darban-dial__button:focus,
.darban-account-scope .darban-dial__button:hover,
.darban-account-scope .darban-dial__button:focus {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-style: none !important;
	border-width: 0 !important;
	border-left: none !important;
	border-right: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	outline: none !important;
	min-height: 0 !important;
	min-width: 0 !important;
	height: 46px !important;
	padding: 0 10px !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
}

/* Checkout dial: stretch to theme input height. */
.darban-checkout-field .darban-dial .darban-dial__button,
.darban-checkout-field .darban-dial button.darban-dial__button,
.darban-checkout-field .darban-dial span.darban-dial__button,
.darban-checkout-field .darban-dial__button,
.darban-checkout-field button.darban-dial__button,
.darban-checkout-field span.darban-dial__button,
.wc-block-components-address-form__darban-mobile .darban-dial .darban-dial__button,
.wc-block-components-address-form__darban-mobile .darban-dial button.darban-dial__button,
.wc-block-components-address-form__darban-mobile .darban-dial span.darban-dial__button,
.wc-block-components-address-form__darban-mobile .darban-dial__button,
.wc-block-components-address-form__darban-mobile button.darban-dial__button,
.wc-block-components-address-form__darban-mobile span.darban-dial__button,
.darban-checkout-field .darban-dial .darban-dial__button:hover,
.darban-checkout-field .darban-dial .darban-dial__button:focus,
.darban-checkout-field .darban-dial button.darban-dial__button:hover,
.darban-checkout-field .darban-dial button.darban-dial__button:focus,
.darban-checkout-field .darban-dial__button:hover,
.darban-checkout-field .darban-dial__button:focus,
.darban-checkout-field button.darban-dial__button:hover,
.darban-checkout-field button.darban-dial__button:focus,
.wc-block-components-address-form__darban-mobile .darban-dial__button:hover,
.wc-block-components-address-form__darban-mobile .darban-dial__button:focus,
.wc-block-components-address-form__darban-mobile button.darban-dial__button:hover,
.wc-block-components-address-form__darban-mobile button.darban-dial__button:focus {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-style: none !important;
	border-width: 0 !important;
	border-left: none !important;
	border-right: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	outline: none !important;
	min-height: 0 !important;
	min-width: 0 !important;
	height: 100% !important;
	padding: 0 10px !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
}

.darban-account-scope .darban-dial__button,
.darban-account-scope .darban-dial__button:hover,
.darban-account-scope .darban-dial__button:focus {
	height: 42px !important;
}

.darban-dial.darban-dial--fixed .darban-dial__button,
.darban-dial.darban-dial--locked .darban-dial__button {
	cursor: default !important;
}

.darban-account-scope .darban-dial,
.darban-account-scope .darban-dial.darban-dial--fixed,
.darban-checkout-field .darban-dial,
.darban-checkout-field .darban-dial.darban-dial--fixed {
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.darban-form .darban-btn--primary,
.darban-popup .darban-btn--primary,
.darban-2fa .darban-btn--primary,
.darban-checkout-modal .darban-btn--primary,
.darban-form .darban-btn--primary:hover,
.darban-form .darban-btn--primary:focus,
.darban-form .darban-btn--primary:active,
.darban-popup .darban-btn--primary:hover,
.darban-popup .darban-btn--primary:focus,
.darban-popup .darban-btn--primary:active,
.darban-2fa .darban-btn--primary:hover,
.darban-2fa .darban-btn--primary:focus,
.darban-2fa .darban-btn--primary:active,
.darban-checkout-modal .darban-btn--primary:hover,
.darban-checkout-modal .darban-btn--primary:focus,
.darban-checkout-modal .darban-btn--primary:active {
	background: var(--darban-primary) !important;
	background-color: var(--darban-primary) !important;
	color: var(--darban-on-primary) !important;
	border: none !important;
	border-radius: var(--darban-field-radius) !important;
	box-shadow: none !important;
}

.darban-form .darban-btn--primary:hover:not(:disabled),
.darban-popup .darban-btn--primary:hover:not(:disabled),
.darban-2fa .darban-btn--primary:hover:not(:disabled),
.darban-checkout-modal .darban-btn--primary:hover:not(:disabled) {
	opacity: 0.88 !important;
}

/* Pencil edit — small circle, not a theme CTA. */
.darban-form .darban-form__edit,
.darban-popup .darban-form__edit,
.darban-form button.darban-form__edit,
.darban-popup button.darban-form__edit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	align-self: flex-start !important;
	width: 30px !important;
	height: 30px !important;
	min-width: 30px !important;
	min-height: 30px !important;
	padding: 0 !important;
	gap: 0 !important;
	border: 1px solid var(--darban-field-border, #d6d9e0) !important;
	border-radius: 50% !important;
	background: var(--darban-field-bg, #f4f5f7) !important;
	background-color: var(--darban-field-bg, #f4f5f7) !important;
	color: var(--darban-muted, #9aa0ab) !important;
	box-shadow: none !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-transform: none !important;
}

.darban-form .darban-form__edit:hover,
.darban-form .darban-form__edit:focus,
.darban-form .darban-form__edit:active,
.darban-popup .darban-form__edit:hover,
.darban-popup .darban-form__edit:focus,
.darban-popup .darban-form__edit:active {
	color: var(--darban-primary, #4f46e5) !important;
	border-color: var(--darban-primary, #4f46e5) !important;
	background: color-mix( in srgb, var(--darban-primary, #4f46e5) 8%, transparent ) !important;
	background-color: color-mix( in srgb, var(--darban-primary, #4f46e5) 8%, transparent ) !important;
	box-shadow: none !important;
}

/* Password eye — icon-only. */
.darban-form .darban-eye,
.darban-popup .darban-eye,
.darban-form button.darban-eye,
.darban-popup button.darban-eye {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px !important;
	min-height: 36px !important;
	padding: 0 !important;
	gap: 0 !important;
	border: 0 !important;
	border-radius: calc( var(--darban-field-radius, 11px) - 4px ) !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--darban-muted, #6b7180) !important;
	box-shadow: none !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-transform: none !important;
}

.darban-form .darban-eye:hover,
.darban-popup .darban-eye:hover,
.darban-form .darban-eye:focus,
.darban-popup .darban-eye:focus,
.darban-form .darban-eye:active,
.darban-popup .darban-eye:active {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--darban-text, #1f2330) !important;
	box-shadow: none !important;
	outline: none !important;
	border-radius: calc( var(--darban-field-radius, 11px) - 4px ) !important;
}

/* Quiet text controls (resend / change number / OTP). */
.darban-form .darban-link,
.darban-popup .darban-link,
.darban-2fa .darban-link,
.darban-checkout-modal .darban-link,
.darban-form button.darban-link,
.darban-popup button.darban-link,
.darban-2fa button.darban-link,
.darban-checkout-modal button.darban-link,
.darban-form .darban-link:hover,
.darban-form .darban-link:focus,
.darban-form .darban-link:active,
.darban-popup .darban-link:hover,
.darban-popup .darban-link:focus,
.darban-popup .darban-link:active,
.darban-2fa .darban-link:hover,
.darban-2fa .darban-link:focus,
.darban-2fa .darban-link:active,
.darban-checkout-modal .darban-link:hover,
.darban-checkout-modal .darban-link:focus,
.darban-checkout-modal .darban-link:active {
	display: inline-flex !important;
	align-items: center !important;
	height: auto !important;
	min-height: 0 !important;
	width: auto !important;
	max-width: 100% !important;
	padding: 4px !important;
	border: none !important;
	border-style: none !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	color: var(--darban-primary) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	text-transform: none !important;
	text-decoration: none !important;
	letter-spacing: normal !important;
}

.darban-form .darban-link:disabled,
.darban-popup .darban-link:disabled,
.darban-2fa .darban-link:disabled,
.darban-checkout-modal .darban-link:disabled,
.darban-form .darban-link:disabled:hover,
.darban-popup .darban-link:disabled:hover,
.darban-2fa .darban-link:disabled:hover,
.darban-checkout-modal .darban-link:disabled:hover {
	color: var(--darban-muted) !important;
	background: transparent !important;
	background-color: transparent !important;
	cursor: not-allowed !important;
}

/* Checkout/account OTP: quiet resend. */
.darban-checkout-modal .darban-checkout-modal__resend,
.darban-checkout-modal button.darban-checkout-modal__resend,
.darban-checkout-modal .darban-checkout-modal__resend:hover,
.darban-checkout-modal .darban-checkout-modal__resend:focus,
.darban-checkout-modal .darban-checkout-modal__resend:focus-visible,
.darban-checkout-modal .darban-checkout-modal__resend:active,
.darban-checkout-modal button.darban-checkout-modal__resend:hover,
.darban-checkout-modal button.darban-checkout-modal__resend:focus,
.darban-checkout-modal button.darban-checkout-modal__resend:active {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	align-self: center !important;
	width: auto !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	min-width: 0 !important;
	padding: 2px 4px !important;
	margin: 0 !important;
	gap: 0 !important;
	border: none !important;
	border-style: none !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	color: var(--darban-primary, #4f46e5) !important;
	font-family: inherit !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
	outline: none !important;
}

.darban-checkout-modal .darban-checkout-modal__resend:disabled,
.darban-checkout-modal button.darban-checkout-modal__resend:disabled,
.darban-checkout-modal .darban-checkout-modal__resend:disabled:hover,
.darban-checkout-modal button.darban-checkout-modal__resend:disabled:hover {
	color: color-mix( in srgb, var(--darban-text, #1f2330) 45%, transparent ) !important;
	background: transparent !important;
	background-color: transparent !important;
	cursor: default !important;
	opacity: 1 !important;
}

/* Tabs — no theme CTA fills. */
.darban-form .darban-tabs__tab,
.darban-popup .darban-tabs__tab,
.darban-form button.darban-tabs__tab,
.darban-popup button.darban-tabs__tab,
.darban-form .darban-tabs__tab:hover,
.darban-form .darban-tabs__tab:focus,
.darban-popup .darban-tabs__tab:hover,
.darban-popup .darban-tabs__tab:focus {
	flex: 1 !important;
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 10px !important;
	border: none !important;
	border-radius: 8px !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--darban-muted) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	box-shadow: none !important;
	text-transform: none !important;
}

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

/* Shortcode login trigger + account chip (vars for Appearance/Elementor). */
button.darban-trigger,
.darban-chip button.darban-trigger,
.darban-chip__toggle,
button.darban-trigger:hover,
button.darban-trigger:focus,
button.darban-trigger:active,
.darban-chip button.darban-trigger:hover,
.darban-chip button.darban-trigger:focus,
.darban-chip button.darban-trigger:active,
.darban-chip__toggle:hover,
.darban-chip__toggle:focus,
.darban-chip__toggle:active {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	min-height: 0 !important;
	padding: var(--darban-btn-padding, 10px 18px) !important;
	border-style: var(--darban-btn-border-style, none) !important;
	border-width: var(--darban-btn-border-width, 0) !important;
	border-color: var(--darban-btn-border-color, transparent) !important;
	border-radius: var(--darban-btn-radius, var(--darban-field-radius, 10px)) !important;
	background: var(--darban-btn-bg, var(--darban-primary, #4f46e5)) !important;
	background-color: var(--darban-btn-bg, var(--darban-primary, #4f46e5)) !important;
	color: var(--darban-btn-color, var(--darban-on-primary, #fff)) !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: var(--darban-btn-shadow, none) !important;
	text-decoration: none !important;
	cursor: pointer !important;
}

button.darban-trigger:hover,
.darban-chip button.darban-trigger:hover,
.darban-chip__toggle:hover {
	opacity: 0.92 !important;
}

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

/* Combo / listbox trigger. */
.darban-form .darban-combo__trigger,
.darban-popup .darban-combo__trigger,
.darban-form .darban-combo__trigger:hover,
.darban-form .darban-combo__trigger:focus,
.darban-popup .darban-combo__trigger:hover,
.darban-popup .darban-combo__trigger:focus {
	background: var(--darban-field-bg) !important;
	background-color: var(--darban-field-bg) !important;
	color: var(--darban-text) !important;
	border: 1px solid var(--darban-field-border) !important;
	border-radius: var(--darban-field-radius) !important;
	box-shadow: none !important;
	min-height: 48px !important;
	height: 48px !important;
	padding: 0 14px !important;
	text-transform: none !important;
	font-weight: 500 !important;
}

/* Captcha refresh — tiny icon button. */
.darban-form .darban-cap-inline__refresh,
.darban-popup .darban-cap-inline__refresh,
.darban-checkout-modal .darban-cap-inline__refresh,
.darban-form button.darban-cap-inline__refresh,
.darban-popup button.darban-cap-inline__refresh,
.darban-checkout-modal button.darban-cap-inline__refresh,
.darban-form .darban-cap-inline__refresh:hover,
.darban-form .darban-cap-inline__refresh:focus,
.darban-form .darban-cap-inline__refresh:active,
.darban-popup .darban-cap-inline__refresh:hover,
.darban-popup .darban-cap-inline__refresh:focus,
.darban-popup .darban-cap-inline__refresh:active,
.darban-checkout-modal .darban-cap-inline__refresh:hover,
.darban-checkout-modal .darban-cap-inline__refresh:focus,
.darban-checkout-modal .darban-cap-inline__refresh:active {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 30px !important;
	height: 30px !important;
	min-width: 30px !important;
	min-height: 30px !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 6px !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--darban-text) !important;
	box-shadow: none !important;
	text-transform: none !important;
}

/* OTP digit boxes */
.darban-otp .darban-otp__box,
.darban-form .darban-otp__box,
.darban-popup .darban-otp__box,
.darban-checkout-modal .darban-otp__box,
.darban-otp input.darban-otp__box,
.darban-form input.darban-otp__box,
.darban-popup input.darban-otp__box,
.darban-checkout-modal input.darban-otp__box {
	-webkit-appearance: none !important;
	appearance: none !important;
	display: block !important;
	width: 48px !important;
	height: 56px !important;
	min-width: 48px !important;
	min-height: 56px !important;
	max-width: 48px !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--darban-text) !important;
	background: var(--darban-field-bg) !important;
	background-color: var(--darban-field-bg) !important;
	border: 1px solid var(--darban-field-border) !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-color: var(--darban-field-border) !important;
	border-radius: var(--darban-field-radius) !important;
	box-shadow: none !important;
	outline: none !important;
}

.darban-otp .darban-otp__box:focus,
.darban-form .darban-otp__box:focus,
.darban-popup .darban-otp__box:focus,
.darban-checkout-modal .darban-otp__box:focus,
.darban-otp input.darban-otp__box:focus,
.darban-form input.darban-otp__box:focus,
.darban-popup input.darban-otp__box:focus,
.darban-checkout-modal input.darban-otp__box: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;
}

/* 2FA account OTP cells. */
.darban-2fa .darban-2fa-digits input,
.darban-2fa-digits input[type="text"],
.darban-2fa-digits input[type="tel"],
.darban-2fa-digits input[type="number"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 46px !important;
	height: 54px !important;
	min-width: 46px !important;
	min-height: 54px !important;
	max-width: 46px !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: center !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	font-family: inherit !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--darban-text, #1f2330) !important;
	background: var(--darban-field-bg, #f4f5f7) !important;
	background-color: var(--darban-field-bg, #f4f5f7) !important;
	border: 1.5px solid var(--darban-field-border, #d7dae2) !important;
	border-width: 1.5px !important;
	border-style: solid !important;
	border-color: var(--darban-field-border, #d7dae2) !important;
	border-radius: 12px !important;
	box-shadow: none !important;
}

.darban-2fa .darban-2fa-digits input:focus,
.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;
}

/* Toast dismiss (on body). */
.darban-toast-layer .darban-toast__close,
.darban-toast button.darban-toast__close,
button.darban-toast__close {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	min-height: 26px !important;
	padding: 0 !important;
	gap: 0 !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: transparent !important;
	background-color: transparent !important;
	color: rgba(31, 35, 48, 0.45) !important;
	box-shadow: none !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.darban-toast-layer .darban-toast__close:hover,
.darban-toast button.darban-toast__close:hover,
button.darban-toast__close:hover {
	background: rgba(15, 23, 42, 0.06) !important;
	background-color: rgba(15, 23, 42, 0.06) !important;
	color: var(--dt-text, #1f2330) !important;
	box-shadow: none !important;
}

/* Auth popup close. */
.darban-popup > .darban-popup__close,
button.darban-popup__close,
.darban-popup button.darban-popup__close {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	padding: 0 !important;
	gap: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	background-color: transparent !important;
	color: #fff !important;
	box-shadow: none !important;
	font-size: 0 !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.darban-popup > .darban-popup__close:hover,
button.darban-popup__close:hover,
.darban-popup button.darban-popup__close:hover {
	color: #fff !important;
	background: var(--darban-error, #dc2626) !important;
	background-color: var(--darban-error, #dc2626) !important;
	box-shadow: none !important;
}

/* Checkout modal close in header row. */
.darban-checkout-modal .darban-popup__close,
.darban-checkout-modal button.darban-popup__close {
	position: static !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px !important;
	min-height: 32px !important;
	border-radius: 8px !important;
	color: var(--darban-muted, #9aa0ab) !important;
	background: transparent !important;
	background-color: transparent !important;
	animation: none !important;
	transform: none !important;
}

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

@media (max-width: 480px) {
	.darban-popup > .darban-popup__close,
	button.darban-popup__close,
	.darban-popup button.darban-popup__close {
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		min-height: 36px !important;
	}

	.darban-otp .darban-otp__box,
	.darban-form .darban-otp__box,
	.darban-popup .darban-otp__box,
	.darban-checkout-modal .darban-otp__box {
		width: 42px !important;
		height: 50px !important;
		min-width: 42px !important;
		min-height: 50px !important;
		max-width: 42px !important;
		font-size: 19px !important;
	}
}

/* Chip icons inherit item text color. */
.darban-chip__item > svg {
	color: inherit;
}

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

/* Elementor font/SVG icons → currentColor. */
.darban-chip__custom-icon svg,
.darban-chip__custom-icon svg path,
.darban-chip__custom-icon svg [fill]:not([fill="none"]),
.darban-chip__item .e-font-icon-svg,
.darban-chip__item .e-font-icon-svg path {
	fill: currentColor !important;
	color: inherit !important;
}

.darban-chip__item:hover .darban-chip__custom-icon,
.darban-chip__item:hover .darban-chip__custom-icon i,
.darban-chip__item:hover .darban-chip__custom-icon svg,
.darban-chip__item:focus .darban-chip__custom-icon {
	color: inherit !important;
}

.darban-trigger__icon {
	color: var(--darban-btn-icon-color, inherit);
}

.darban-trigger__icon svg,
.darban-trigger__icon svg path {
	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 2FA panel (My Account + shortcode). */
.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: show img only, hide canvas. */
.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 */
.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;
}

/* Panel buttons match form rhythm. */
.darban-2fa .darban-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 46px !important;
	min-height: 46px !important;
	padding: 0 22px !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	border-radius: var(--darban-field-radius) !important;
	cursor: pointer !important;
	align-self: flex-start !important;
}

.darban-2fa .darban-2fa-remove,
.darban-2fa button.darban-2fa-remove,
.darban-2fa .darban-2fa-remove:hover,
.darban-2fa .darban-2fa-remove:focus,
.darban-2fa .darban-2fa-remove:active,
.darban-2fa button.darban-2fa-remove:hover,
.darban-2fa button.darban-2fa-remove:focus,
.darban-2fa button.darban-2fa-remove:active {
	background: transparent !important;
	background-color: transparent !important;
	color: #b91c1c !important;
	border: 1.5px solid color-mix( in srgb, #b91c1c 40%, transparent ) !important;
	border-radius: var(--darban-field-radius) !important;
	box-shadow: none !important;
	text-transform: none !important;
}

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

.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 text captcha (refresh + image beside answer). */
.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;
}

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

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

/* Contain Google connection-error textarea growth. */
.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;
	}
}