.mirza-otp-box{
	--mo-primary: var(--mirza-otp-primary, #F95D4B);
	--mo-text: var(--mirza-otp-text, #17181A);
	--mo-muted: #5c5650;
	--mo-surface: #fff;
	--mo-border: #e2d9c9;
	max-width:380px;
	font-family: var(--mirza-otp-font, "Mirza Vazir", "Vazirmatn", Tahoma, sans-serif);
	direction:rtl;
	text-align:right;
	background:var(--mo-surface);
	border:2px solid var(--mo-text);
	border-radius:22px;
	padding:22px;
	box-shadow:4px 4px 0 var(--mo-text);
}
.mirza-otp-step{
	display:flex;
	flex-direction:column;
	gap:12px;
}
.mirza-otp-input{
	width:100%;
	padding:13px 16px;
	border:2px solid var(--mo-border);
	border-radius:12px;
	font-size:1rem;
	font-family:inherit;
	color:var(--mo-text);
	background:#fdfaf5;
	box-sizing:border-box;
	transition:border-color .15s ease;
}
.mirza-otp-input:focus{
	outline:none;
	border-color:var(--mo-primary);
}
.mirza-otp-btn{
	padding:13px 20px;
	border:2px solid var(--mo-text);
	border-radius:999px;
	background:var(--mo-primary);
	color:var(--mo-text);
	font-weight:700;
	font-family:inherit;
	cursor:pointer;
	box-shadow:3px 3px 0 var(--mo-text);
	transition:transform .1s cubic-bezier(.34,1.56,.64,1), box-shadow .1s ease, background .15s ease;
}
.mirza-otp-btn:hover{ background:#fdeae6; }
.mirza-otp-btn:active{ transform:translate(3px,3px); box-shadow:0 0 0 var(--mo-text); }
.mirza-otp-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; box-shadow:3px 3px 0 var(--mo-text); }
.mirza-otp-resend{
	font-size:.85rem;
	text-align:center;
	color:var(--mo-muted);
	font-weight:600;
}
.mirza-otp-resend:hover{ color:var(--mo-text); }
.mirza-otp-message{
	margin-top:10px;
	font-size:.88rem;
	min-height:1.4em;
	font-weight:600;
}
.mirza-otp-message.is-error{ color:#a12222; }
.mirza-otp-message.is-success{ color:#146c3c; }
.mirza-otp-verify-label{ font-weight:700; margin-bottom:12px; color:var(--mo-text); }
.mirza-otp-verified-badge{ font-weight:700; margin-top:10px; color:#146c3c; }

/* فیلد تله‌ی مگس (Honeypot) — با انتقال بصری به بیرون از صفحه پنهان می‌شود،
   نه با display:none، چون بعضی بات‌های ساده فیلدهای display:none را
   نادیده می‌گیرند ولی این روش برای همه‌ی آن‌ها مؤثرتر است. */
.mirza-otp-hp-wrap{
	position:absolute;
	left:-9999px;
	top:-9999px;
	width:1px;
	height:1px;
	overflow:hidden;
}

@media (max-width:420px){
	.mirza-otp-box{ max-width:100%; padding:18px; border-radius:18px; }
}