/* Didkav SMS auth — white glass card, brand teal. RTL; the code boxes are LTR. */

@property --dka-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

.dka {
	--dka-primary: #00919c;
	--dka-primary-2: #005f66;
	--dka-ink: #1e2b2f;
	--dka-ink-2: #3d4a4e;
	--dka-muted: #606060;
	--dka-line: #dfe7e8;
	--dka-ok: #15803d;
	--dka-err: #dc2626;
	--dka-primary-ink: color-mix(in srgb, var(--dka-primary) 80%, #000);
	--dka-deep: color-mix(in srgb, var(--dka-primary) 88%, #000);
	--dka-soft: color-mix(in srgb, var(--dka-primary) 9%, #fff);
	--dka-ring: color-mix(in srgb, var(--dka-primary) 22%, transparent);
	/* Light → dark shades of the brand teal; the middle stop keeps white text above 4.5:1. */
	--dka-grad: linear-gradient(135deg, var(--dka-primary) 0%, color-mix(in srgb, var(--dka-primary) 50%, var(--dka-primary-2)) 55%, var(--dka-primary-2) 100%);
	--dka-ease: cubic-bezier(.22, .8, .24, 1);
	--dka-box: 56px;
	position: relative;
	isolation: isolate;
	display: grid;
	width: 100%;
	grid-template-columns: min(420px, 100%);
	justify-content: center;
	align-items: center;
	padding: 48px 16px;
	font-family: "YekanBakh", Vazirmatn, Tahoma, system-ui, sans-serif;
	direction: rtl;
	text-align: right;
	color: var(--dka-ink);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
.dka *, .dka *::before, .dka *::after { box-sizing: border-box; }
.dka [hidden] { display: none !important; }
.dka svg { display: block; flex-shrink: 0; }

/* Decorative colour behind the glass (siblings of the card, so they never break its blur). */
.dka-decor {
	position: absolute;
	z-index: -1;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
	mask-image: radial-gradient(closest-side, #000 55%, transparent);
}
.dka-decor span {
	position: absolute;
	border-radius: 50%;
	filter: blur(50px);
	opacity: .7;
	animation: dka-drift 14s ease-in-out infinite alternate;
}
.dka-decor span:nth-child(1) { top: 6%; right: 18%; width: 260px; height: 260px; background: color-mix(in srgb, var(--dka-primary) 55%, transparent); }
.dka-decor span:nth-child(2) { bottom: 4%; left: 16%; width: 220px; height: 220px; background: rgba(245, 158, 11, .35); animation-delay: -5s; }
.dka-decor span:nth-child(3) { top: 40%; left: 42%; width: 200px; height: 200px; background: color-mix(in srgb, var(--dka-primary-2) 45%, transparent); animation-delay: -9s; }

.dka-card {
	position: relative;
	width: 100%;
	padding: 30px 28px 26px;
	overflow: hidden;
	border-radius: 28px;
	background: linear-gradient(160deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .62));
	-webkit-backdrop-filter: blur(24px) saturate(180%);
	backdrop-filter: blur(24px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, .85);
	box-shadow:
		0 0 0 1px rgba(15, 23, 42, .05),
		inset 0 1px 0 #fff,
		0 30px 70px -30px rgba(14, 52, 58, .38);
	animation: dka-in .7s var(--dka-ease) backwards;
}
.dka-card::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -140px;
	left: 50%;
	width: 360px;
	height: 260px;
	border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--dka-primary) 16%, transparent), transparent);
	transform: translateX(-50%);
	pointer-events: none;
}
.dka-card--compact { text-align: center; }

.dka-handle { display: block; width: 44px; height: 5px; margin: -10px auto 20px; border-radius: 99px; background: rgba(30, 43, 47, .12); }

.dka-step.is-enter { animation: dka-step .45s var(--dka-ease) backwards; }

.dka-head { margin-bottom: 22px; text-align: center; }
.dka-badge {
	position: relative;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	margin: 0 auto 14px;
	overflow: hidden;
	border-radius: 18px;
	background: var(--dka-grad);
	color: #fff;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.dka-badge svg { width: 28px; height: 28px; }

/* Logo above the form: glass plate, breathing halo, and a light streak masked by the logo file itself. */
.dka-logo {
	--dka-logo-h: 56px;
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	max-width: 100%;
	margin: 0 auto 16px;
	padding: 10px 20px;
	border-radius: 20px;
	background: linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .45));
	-webkit-backdrop-filter: blur(14px) saturate(170%);
	backdrop-filter: blur(14px) saturate(170%);
	border: 1px solid rgba(255, 255, 255, .9);
	box-shadow: inset 0 1px 0 #fff, 0 14px 30px -18px rgba(0, 95, 102, .45);
	line-height: 0;
}
.dka-logo-halo {
	position: absolute;
	z-index: -1;
	inset: -10px -18px;
	border-radius: 50%;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--dka-primary, #00919c) 24%, transparent), transparent);
	pointer-events: none;
	animation: dka-halo 3.2s ease-in-out infinite alternate;
}
/* Forced size: Elementor's `.elementor img { height: auto }` would otherwise show the file at full size. */
body .dka .dka-logo img {
	position: relative;
	display: block;
	width: auto !important;
	height: var(--dka-logo-h) !important;
	max-width: 220px !important;
	max-height: none !important;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: contain;
}
.dka-logo::after {
	content: "";
	position: absolute;
	inset: 10px 20px;
	background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%) no-repeat;
	background-size: 250% 100%;
	-webkit-mask: var(--dka-logo-mask) center / contain no-repeat;
	mask: var(--dka-logo-mask) center / contain no-repeat;
	pointer-events: none;
	animation: dka-logo-shine 4.5s ease-in-out infinite;
}
@keyframes dka-logo-shine {
	0%, 62% { background-position: 150% 0; }
	100% { background-position: -50% 0; }
}
@keyframes dka-halo {
	from { opacity: .55; transform: scale(.92); }
	to { opacity: 1; transform: scale(1.06); }
}
@media (max-width: 600px) {
	.dka-logo { --dka-logo-h: 46px; padding: 8px 16px; }
	.dka-logo::after { inset: 8px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.dka-logo::after, .dka-logo-halo { animation: none; }
}
.dka-badge::after,
.dka-check::after {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: -90%;
	width: 55%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
	transform: skewX(-20deg);
	animation: dka-sweep 4.5s ease-in-out infinite;
}

.dka .dka-title { margin: 0 0 6px; font-family: inherit; font-size: 21px; font-weight: 800; line-height: 1.5; color: var(--dka-ink); }
.dka .dka-sub { margin: 0; font-size: 14px; line-height: 1.9; color: var(--dka-muted); }
.dka-sub b { color: var(--dka-ink); font-weight: 800; letter-spacing: .5px; }

.dka-label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--dka-ink-2); }

.dka-field {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	margin-bottom: 14px;
	padding: 0 14px;
	border: 1.5px solid var(--dka-line);
	border-radius: 16px;
	background: rgba(255, 255, 255, .78);
	box-shadow: inset 0 1px 0 #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.dka-field:focus-within { border-color: var(--dka-primary); box-shadow: 0 0 0 4px var(--dka-ring); }
.dka-field-ico { color: var(--dka-primary-ink); }
.dka-field-ico svg { width: 22px; height: 22px; }

.dka .dka-input {
	flex: 1;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	box-shadow: none;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--dka-ink);
	text-align: left;
}
.dka .dka-input--text { font-size: 16px; letter-spacing: 0; text-align: right; }
.dka .dka-input::placeholder { color: #a3adb0; font-weight: 600; }

.dka-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.dka-turnstile { display: flex; justify-content: center; margin-bottom: 10px; }

.dka-msg { min-height: 22px; margin: 0 0 10px; font-size: 13px; font-weight: 600; line-height: 1.7; color: var(--dka-err); text-align: center; }
.dka-msg.is-ok { color: var(--dka-ok); }
/* The way out of a refusal that has one — see `msg()` in auth.js. */
.dka-msg-link {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	margin-top: 8px;
	padding: 0 18px;
	border-radius: 12px;
	font-size: 13.5px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	background: var(--dka-grad);
}

.dka .dka-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 54px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-radius: 16px;
	background: var(--dka-grad);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
	transition: transform .25s var(--dka-ease), filter .2s ease;
}
.dka .dka-btn:hover { color: #fff; background: var(--dka-grad); transform: translateY(-2px); filter: brightness(1.05); }
.dka .dka-btn:focus-visible { outline: 3px solid var(--dka-ring); outline-offset: 3px; }
.dka .dka-btn[disabled] { cursor: progress; transform: none; }
.dka-spinner {
	display: none;
	width: 22px;
	height: 22px;
	border: 2.5px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: dka-rot .8s linear infinite;
}
.dka-btn.is-loading .dka-btn-text { visibility: hidden; }
.dka-btn.is-loading .dka-spinner { position: absolute; display: block; }

.dka-note, .dka-secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 14px 0 0;
	font-size: 12.5px;
	color: var(--dka-muted);
}
.dka-note svg, .dka-secure svg { width: 15px; height: 15px; }

.dka .dka-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 10px auto 0;
	padding: 4px 8px;
	border: 0;
	border-radius: 8px;
	background: none;
	box-shadow: none;
	color: var(--dka-primary-ink);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.dka .dka-link:hover { color: var(--dka-primary-2); background: var(--dka-soft); }
.dka .dka-link svg { width: 15px; height: 15px; }
.dka-step--profile .dka-link, .dka-card--compact .dka-link { display: flex; }

/* ---------- Code boxes ---------- */

.dka-otp {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 12px;
	height: var(--dka-box);
	margin: 6px 0 14px;
	transition: height .55s var(--dka-ease);
}
.dka .dka-digit {
	position: relative;
	z-index: 1;
	width: var(--dka-box);
	height: var(--dka-box);
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--dka-line);
	border-radius: 16px;
	outline: 0;
	background: rgba(255, 255, 255, .85);
	box-shadow: inset 0 1px 0 #fff, 0 8px 18px -12px rgba(14, 52, 58, .35);
	color: var(--dka-ink);
	caret-color: var(--dka-primary);
	font-family: inherit;
	font-size: 24px;
	font-weight: 800;
	text-align: center;
	transition: border-color .2s ease, box-shadow .2s ease, transform .6s var(--dka-ease), opacity .4s ease;
}
.dka .dka-digit:focus { border-color: var(--dka-primary); box-shadow: 0 0 0 4px var(--dka-ring), 0 10px 22px -12px color-mix(in srgb, var(--dka-primary) 60%, transparent); }
.dka .dka-digit.is-filled { border-color: color-mix(in srgb, var(--dka-primary) 45%, var(--dka-line)); }

/* While verifying: a light runs around each box's border (from the video). */
.dka .dka-otp.is-verifying .dka-digit {
	border-color: transparent;
	background:
		linear-gradient(#fff, #fff) padding-box,
		conic-gradient(from var(--dka-angle), transparent 0 55%, var(--dka-primary) 78%, var(--dka-primary-2) 88%, transparent 100%) border-box;
	animation: dka-trace 1.1s linear infinite;
}

.dka-lines { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dka-lines line {
	stroke: color-mix(in srgb, var(--dka-primary) 70%, transparent);
	stroke-width: 2;
	stroke-linecap: round;
	transition: stroke-dashoffset .45s ease;
}

.dka-otp.is-error .dka-digit { border-color: var(--dka-err); animation: dka-shake .45s ease; }

.dka-resend { display: flex; justify-content: center; min-height: 36px; font-size: 13.5px; color: var(--dka-muted); }
.dka-timer b { color: var(--dka-ink); font-weight: 800; }
.dka-resend .dka-link { margin-top: 0; }

/* ---------- Success ---------- */

.dka-step--done { padding: 6px 0 4px; text-align: center; }
.dka-burst { position: relative; display: grid; place-items: center; height: 150px; margin-bottom: 10px; }
.dka-particles { position: absolute; top: 50%; left: 50%; width: 340px; height: 300px; transform: translate(-50%, -50%); pointer-events: none; }
.dka-check {
	position: relative;
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	overflow: hidden;
	border-radius: 24px;
	background: linear-gradient(135deg, #16a34a, color-mix(in srgb, var(--dka-primary) 85%, #000));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 36px -18px rgba(22, 163, 74, .7);
	animation: dka-pop .6s var(--dka-ease) backwards .1s;
}
.dka-check svg { width: 40px; height: 40px; }
.dka-check path {
	fill: none;
	stroke: #fff;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 24;
	stroke-dashoffset: 24;
	animation: dka-draw .5s ease forwards .45s;
}
.dka .dka-title--ok { color: var(--dka-ok); animation: dka-step .5s var(--dka-ease) backwards .35s; }
.dka-done-sub { animation: dka-step .5s var(--dka-ease) backwards .45s; }
.dka-secure { color: var(--dka-ok); font-weight: 700; animation: dka-step .5s var(--dka-ease) backwards .6s; }

/* ---------- Keyframes ---------- */

@keyframes dka-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes dka-step { from { opacity: 0; transform: translateY(10px); } }
@keyframes dka-rot { to { transform: rotate(360deg); } }
@keyframes dka-trace { to { --dka-angle: 360deg; } }
@keyframes dka-sweep { 0%, 70% { left: -90%; } 100% { left: 140%; } }
@keyframes dka-pop { from { opacity: 0; transform: scale(.4) rotate(-12deg); } 60% { transform: scale(1.08); } }
@keyframes dka-draw { to { stroke-dashoffset: 0; } }
@keyframes dka-drift { to { transform: translate(30px, -24px) scale(1.12); } }
@keyframes dka-shake {
	0%, 100% { translate: 0; }
	20% { translate: -7px; }
	40% { translate: 6px; }
	60% { translate: -4px; }
	80% { translate: 3px; }
}

@media (max-width: 480px) {
	.dka { padding: 28px 12px; }
	.dka-card { padding: 26px 18px 22px; border-radius: 24px; }
	.dka .dka-title { font-size: 19px; }
}

/* ---------- Popup ---------- */

.dka-modal {
	--dka-ease: cubic-bezier(.22, .8, .24, 1);
	position: fixed;
	z-index: 100010;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 16px;
}
.dka-modal[hidden] { display: none; }

.dka-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15, 38, 41, .26);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	opacity: 0;
	transition: opacity .3s ease;
}
.dka-modal.is-open .dka-modal-overlay { opacity: 1; }

.dka-modal-panel {
	position: relative;
	width: min(440px, 100%);
	max-height: calc(100dvh - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	opacity: 0;
	transform: translateY(26px) scale(.96);
	transition: opacity .25s ease, transform .4s var(--dka-ease);
	scrollbar-width: none;
}
.dka-modal-panel::-webkit-scrollbar { display: none; }
.dka-modal.is-open .dka-modal-panel { opacity: 1; transform: none; }

.dka.dka--modal { padding: 0; }
.dka--modal .dka-card {
	background: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .74));
	box-shadow:
		0 0 0 1px rgba(15, 23, 42, .06),
		inset 0 1px 0 #fff,
		0 40px 90px -30px rgba(14, 52, 58, .5);
}

.dka-modal .dka-modal-close {
	position: absolute;
	z-index: 3;
	top: 14px;
	left: 14px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .9);
	border-radius: 12px;
	background: rgba(255, 255, 255, .6);
	box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), inset 0 1px 0 #fff;
	color: #3d4a4e;
	cursor: pointer;
	transition: color .2s ease, background .2s ease, transform .3s var(--dka-ease);
}
.dka-modal .dka-modal-close:hover { background: #fff; color: #1e2b2f; transform: rotate(90deg); }
.dka-modal .dka-modal-close:focus-visible { outline: 3px solid rgba(0, 145, 156, .35); outline-offset: 2px; }
.dka-modal-close svg { width: 18px; height: 18px; }

html.dka-lock, html.dka-lock body { overflow: hidden; }

/* Phones: a bottom sheet — the card's handle bar finally has a job. */
@media (max-width: 600px) {
	/* --dka-kb = height covered by the on-screen keyboard (set by auth.js from visualViewport). */
	.dka-modal { place-items: end center; padding: 0; bottom: var(--dka-kb, 0px); transition: bottom .25s ease; }
	.dka-modal-panel {
		width: 100%;
		max-height: min(92dvh, calc(100% - 12px));
		transform: translateY(100%);
		transition: opacity .2s ease, transform .45s var(--dka-ease);
	}
	.dka--modal .dka-card {
		border-radius: 28px 28px 0 0;
		border-bottom: 0;
		padding-bottom: calc(24px + env(safe-area-inset-bottom));
	}
	.dka-modal .dka-modal-close { top: 12px; left: 12px; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.dka-card { background: #fff; }
	.dka-modal-overlay { background: rgba(15, 38, 41, .5); }
}

@media (prefers-reduced-motion: reduce) {
	.dka-modal *,
	.dka *, .dka *::before, .dka *::after {
		animation: none !important;
		transition-duration: .01ms !important;
	}
	.dka-check path { stroke-dashoffset: 0; }
}