/* =========================================================================
   ورود و ثبت‌نام با کد پیامکی (OTP) — طراحی اختصاصی روی [clw_profile]
   برگرفته از طرح اثرانگشت/زرد ارسالی؛ فقط برای حالت مهمان (خروج از سیستم)
   بارگذاری می‌شود. تمام کلاس‌ها با پیشوند otp- برای جلوگیری از تداخل با
   استایل قالب و بقیه بخش‌های افزونه ایزوله شده‌اند.
   ========================================================================= */

.otp-showcase{
	--otp-yellow:#f0ab05;
	--otp-yellow-2:#ffc83d;
	--otp-ink:#1b1b1b;
	--otp-muted:#8a8a8a;
	--otp-line:#ececec;
	--otp-white:#ffffff;

	box-sizing:border-box;
	width:100%;
	padding:32px 16px;
	display:flex;
	justify-content:center;
	font-family:"Vazirmatn",Tahoma,sans-serif;
	color:var(--otp-ink);
}

.otp-showcase *, .otp-showcase *::before, .otp-showcase *::after{box-sizing:border-box}
.otp-showcase button, .otp-showcase input{font:inherit}

/* =========================================================================
   سوییچ ورود / ثبت‌نام
   کد ملی و نام همین‌جا گرفته می‌شود تا بعد از ورود هیچ فرم اضافه‌ای لازم نباشد.
   ========================================================================= */

.otp-auth-switch{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	margin-top:22px;
}

.otp-auth-tab{
	width:100%;
	min-height:52px;
	padding:12px 16px;
	border:2px solid transparent;
	border-radius:18px;
	color:#777;
	background:#f7f7f5;
	cursor:pointer;
	font-weight:900;
	transition:.22s ease;
	-webkit-tap-highlight-color:transparent;
}
.otp-auth-tab:hover{color:#5a5a5a;background:#f1f1ee}
.otp-auth-tab.is-active{
	color:#1e1808;
	background:linear-gradient(135deg,var(--otp-yellow-2),var(--otp-yellow));
	box-shadow:0 14px 22px -16px rgba(181,126,0,.68);
}

.otp-auth-view[hidden]{display:none !important}

.otp-register-field{margin-top:14px}

.otp-text-wrap{
	display:flex;
	align-items:center;
	width:100%;
	height:58px;
	overflow:hidden;
	border:2px solid transparent;
	border-radius:21px;
	background:#fff;
	box-shadow:0 12px 22px -13px rgba(240,171,5,.48);
	transition:.25s ease;
}
.otp-text-wrap:focus-within{
	border-color:var(--otp-yellow);
	box-shadow:0 0 0 5px rgba(240,171,5,.1),0 14px 25px -14px rgba(240,171,5,.6);
	transform:translateY(-1px);
}
/* حالت خطا: کادر قرمز تا کاربر بفهمد کدام فیلد مشکل دارد */
.otp-text-wrap.is-invalid,
.otp-phone-wrap.is-invalid{
	border-color:#e5484d;
	box-shadow:0 0 0 4px rgba(229,72,77,.1);
}

.otp-text-input{
	width:100%;
	height:100%;
	padding:0 18px;
	border:0;
	outline:0;
	color:#222;
	background:transparent;
	font-weight:700;
}
.otp-text-input::placeholder{color:#b2b2b2;font-weight:500}

.otp-national-input{
	direction:ltr;
	text-align:left;
	letter-spacing:.6px;
	font-variant-numeric:lining-nums tabular-nums;
}

.otp-field-hint{
	display:block;
	margin:7px 8px 0;
	font-size:11px;
	line-height:1.7;
	color:#e5484d;
	font-weight:700;
}
.otp-field-hint.is-ok{color:#15803d}

@media (max-width:430px){
	.otp-auth-switch{gap:7px}
	.otp-auth-tab{min-height:48px;padding:10px 12px;font-size:13px}
	.otp-text-wrap{height:54px;border-radius:18px}
	/* زیر ۱۶px، سافاری iOS هنگام فوکوس صفحه را زوم می‌کند */
	.otp-text-input,.otp-phone-input{font-size:16px}
}

.otp-panel{
	position:relative;
	width:100%;
	max-width:420px;
	padding:10px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.otp-card{
	width:100%;
	position:relative;
	padding:38px 34px 30px;
	border:5px solid var(--otp-white);
	border-radius:40px;
	background:linear-gradient(180deg,#fff 0%,#fbfbf8 100%);
	box-shadow:
		0 30px 35px -25px rgba(157,112,0,.46),
		inset 0 1px 0 rgba(255,255,255,.96);
	animation:otpCardIn .55s cubic-bezier(.2,.8,.2,1) both;
}

.otp-step[hidden]{display:none}

.fingerprint-container{
	position:relative;
	width:92px;
	height:92px;
	margin:0 auto 20px;
	animation:fingerprintPulse 2.4s ease-in-out infinite;
}

.fingerprint-svg{
	position:relative;
	z-index:3;
	width:100%;
	height:100%;
	overflow:visible;
	filter:drop-shadow(0 8px 14px rgba(240,171,5,.18));
}

.fingerprint-path{
	fill:rgba(240,171,5,.14);
	stroke:#f0ab05;
	stroke-width:.32;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-dasharray:100;
	stroke-dashoffset:100;
	animation:fingerprintDraw 4.2s linear infinite;
}

.fingerprint-container .scan-line{
	position:absolute;
	z-index:4;
	top:6%;
	left:8%;
	width:84%;
	height:3px;
	border-radius:999px;
	background:linear-gradient(90deg,transparent,#ffd86a,#f0ab05,#ffd86a,transparent);
	box-shadow:0 0 12px rgba(240,171,5,.85);
	animation:fingerprintScan 2.25s ease-in-out infinite;
}

.fingerprint-container .ripple1,
.fingerprint-container .ripple2{
	position:absolute;
	z-index:1;
	inset:4%;
	border-radius:50%;
	border:1.5px solid rgba(240,171,5,.38);
	opacity:0;
	animation:fingerprintRipple 3s ease-out infinite;
}

.fingerprint-container .ripple2{animation-delay:1.5s}

.fingerprint-container .glow{
	position:absolute;
	z-index:0;
	inset:8%;
	border-radius:50%;
	background:radial-gradient(circle,rgba(240,171,5,.22),rgba(240,171,5,.06) 52%,transparent 72%);
	box-shadow:0 0 28px rgba(240,171,5,.22);
	animation:fingerprintGlow 2.4s ease-in-out infinite;
}

@keyframes fingerprintPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes fingerprintDraw{0%{stroke-dashoffset:100;opacity:.45}45%,70%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-100;opacity:.45}}
@keyframes fingerprintScan{0%{top:7%;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:89%;opacity:0}}
@keyframes fingerprintRipple{0%{transform:scale(.75);opacity:.55}100%{transform:scale(1.42);opacity:0}}
@keyframes fingerprintGlow{0%,100%{opacity:.45;transform:scale(.94)}50%{opacity:1;transform:scale(1.05)}}

.otp-title{
	margin:0;
	text-align:center;
	font-size:26px;
	line-height:1.45;
	font-weight:900;
	color:#222;
}

.otp-subtitle{
	max-width:290px;
	margin:8px auto 0;
	text-align:center;
	color:var(--otp-muted);
	font-size:13px;
	line-height:1.9;
}

.otp-alert{
	margin-top:16px;
	padding:10px 14px;
	border-radius:14px;
	background:#fdecec;
	color:#b42318;
	border:1px solid #f6c6c2;
	font-size:12.5px;
	text-align:center;
	line-height:1.8;
}

.otp-form{margin-top:22px}

.otp-field-label{
	display:block;
	margin:0 8px 9px;
	font-size:12px;
	font-weight:800;
	color:#555;
}

.otp-phone-wrap{
	direction:ltr;
	display:flex;
	align-items:center;
	width:100%;
	height:58px;
	overflow:hidden;
	border:2px solid transparent;
	border-radius:21px;
	background:#fff;
	box-shadow:0 12px 22px -13px rgba(240,171,5,.48);
	transition:.25s ease;
}

.otp-phone-wrap:focus-within{
	border-color:var(--otp-yellow);
	box-shadow:0 0 0 5px rgba(240,171,5,.1),0 14px 25px -14px rgba(240,171,5,.6);
	transform:translateY(-1px);
}

.otp-prefix{
	height:100%;
	min-width:78px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	font-weight:900;
	color:#3b3b3b;
	border-right:1px solid var(--otp-line);
	background:#fffaf0;
}

.otp-prefix::before{
	content:"";
	width:10px;
	height:10px;
	border-radius:50%;
	background:var(--otp-yellow);
	box-shadow:0 0 0 4px rgba(240,171,5,.13);
}

.otp-phone-input{
	direction:ltr;
	width:100%;
	height:100%;
	padding:0 18px;
	border:0;
	outline:0;
	color:#222;
	background:transparent;
	font-weight:700;
	letter-spacing:.6px;
}

.otp-phone-input::placeholder{
	color:#b2b2b2;
	font-weight:500;
	letter-spacing:0;
}

.otp-button{
	position:relative;
	width:100%;
	min-height:56px;
	margin-top:20px;
	padding:14px 20px;
	overflow:hidden;
	border:0;
	border-radius:20px;
	color:#1e1808;
	background:linear-gradient(135deg,var(--otp-yellow-2),var(--otp-yellow));
	box-shadow:0 19px 24px -16px rgba(181,126,0,.68);
	cursor:pointer;
	font-weight:900;
	transition:transform .2s ease,box-shadow .2s ease,opacity .2s ease;
}

.otp-button:disabled{cursor:default;opacity:.72}

.otp-button::before{
	content:"";
	position:absolute;
	top:-80%;
	left:-25%;
	width:36%;
	height:260%;
	transform:rotate(24deg);
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
	animation:otpShine 3.2s ease-in-out infinite;
}

.otp-button:not(:disabled):hover{
	transform:translateY(-2px) scale(1.01);
	box-shadow:0 23px 30px -17px rgba(181,126,0,.78);
}

.otp-button:not(:disabled):active{transform:scale(.97)}

.otp-note{
	display:flex;
	align-items:flex-start;
	justify-content:center;
	gap:7px;
	margin-top:17px;
	color:#a0a0a0;
	font-size:10.5px;
	line-height:1.7;
	text-align:center;
}

.otp-note-icon{
	flex:0 0 auto;
	width:15px;
	height:15px;
	margin-top:1px;
	display:grid;
	place-items:center;
	border:1.5px solid #bbb;
	border-radius:50%;
	font-size:9px;
	font-weight:900;
}

.otp-code{
	direction:ltr;
	margin-top:22px;
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:10px;
}

.otp-digit{
	width:100%;
	aspect-ratio:1/1.08;
	min-width:0;
	border:2px solid transparent;
	border-radius:18px;
	outline:0;
	text-align:center;
	font-size:26px;
	font-weight:900;
	color:#232323;
	background:#fff;
	box-shadow:0 12px 20px -14px rgba(240,171,5,.55);
	transition:.22s ease;
	caret-color:var(--otp-yellow);
}

.otp-digit:focus{
	border-color:var(--otp-yellow);
	box-shadow:0 0 0 5px rgba(240,171,5,.1),0 15px 22px -14px rgba(240,171,5,.7);
	transform:translateY(-3px) scale(1.02);
}

.otp-change-number{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin:14px 7px 0;
	font-size:11px;
	color:#8b8b8b;
}

.otp-change-number button{
	padding:0;
	border:0;
	color:#b67e00;
	background:transparent;
	cursor:pointer;
	font-weight:900;
}

.otp-resend{
	margin-top:17px;
	text-align:center;
	font-size:11px;
	color:#9c9c9c;
}

.otp-resend strong{
	direction:ltr;
	display:inline-block;
	color:#4c4c4c;
}

.otp-resend button{
	display:none;
	padding:0;
	border:0;
	background:transparent;
	color:#af7900;
	font-weight:900;
	cursor:pointer;
}

@keyframes otpCardIn{
	from{opacity:0;transform:translateY(24px) scale(.96);filter:blur(7px)}
	to{opacity:1;transform:none;filter:none}
}

@keyframes otpShine{
	0%,45%{left:-45%}
	75%,100%{left:125%}
}

@media (max-width:430px){
	.otp-card{
		padding:31px 23px 25px;
		border-width:4px;
		border-radius:32px;
	}

	.otp-title{font-size:23px}
	.otp-subtitle{font-size:12px}
	.otp-code{gap:7px}
	.otp-digit{border-radius:15px;font-size:22px}
}

@media (prefers-reduced-motion:reduce){
	.otp-showcase *, .otp-showcase *::before, .otp-showcase *::after{
		animation-duration:.01ms!important;
		animation-iteration-count:1!important;
		transition-duration:.01ms!important;
	}
}