/* ==========================================================================
   Magic SMS Login - Frontend Styles
   طراحی مینیمال، موبایل-فرست، الهام گرفته از تجربه کاربری صفحات ورود مدرن.
   ========================================================================== */

:root {
	--ml-primary: #3e9597;
	--ml-page-bg: #f7f7fb;
	--ml-card-bg: #ffffff;
	--ml-box-bg: #ffffff;
	--ml-box-border: #d9d9e3;
	--ml-box-active: #006660;
	--ml-box-error: #e8394a;
	--ml-box-text: #1c1c28;
	--ml-ring-color: rgba(0, 102, 96, 0.14);
}

.ml-auth-page {
	margin: 0;
	padding: 0;
	background: var(--ml-page-bg);
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
}

.ml-auth-page * {
	box-sizing: border-box;
}

.ml-auth-page img {
	max-width: 100%;
}

.ml-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
}

.ml-card {
	position: relative;
	width: 100%;
	max-width: 400px;
	background: var(--ml-card-bg);
	border-radius: 20px;
	box-shadow: 0 10px 40px rgba(20, 20, 43, 0.08), 0 2px 8px rgba(20, 20, 43, 0.04);
	padding: 36px 28px 32px;
	overflow: hidden;
	animation: ml-card-in 0.4s ease;
}

@keyframes ml-card-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.ml-logo {
	text-align: center;
	margin-bottom: 22px;
}

.ml-logo img {
	max-height: 46px;
	margin: 0 auto;
}

.ml-logo-text a {
	font-size: 22px;
	font-weight: 800;
	color: var(--ml-box-text);
	text-decoration: none;
}

.ml-title {
	font-size: 19px;
	font-weight: 700;
	text-align: center;
	color: var(--ml-box-text);
	margin: 0 0 8px;
}

.ml-subtitle {
	font-size: 13.5px;
	line-height: 1.9;
	text-align: center;
	color: #8b8b9a;
	margin: 0 0 26px;
	padding: 0 6px;
}

/* ---------- مرحله شماره موبایل ---------- */

.ml-step {
	display: none;
}

.ml-step.is-active {
	display: block;
	animation: ml-step-fade 0.18s ease;
}

@keyframes ml-step-fade {
	from {
		opacity: 0;
		transform: translateX(8px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* اجبار در ورود بعد از خرید: تا رسیدن پاسخ ارسال خودکار کد، مرحله شماره موبایل
   (که به‌طور پیش‌فرض is-active است) پنهان می‌ماند و کاربر مستقیماً مرحله‌ی کد تایید
   (خالی، در انتظار پاسخ) را می‌بیند. */
.ml-widget.ml-auto-send .ml-step-phone {
	display: none;
}

.ml-widget.ml-auto-send .ml-step-otp {
	display: block;
}

html[dir="rtl"] .ml-step-otp.is-active {
	animation-name: ml-step-fade-rtl;
}

@keyframes ml-step-fade-rtl {
	from {
		opacity: 0;
		transform: translateX(-8px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.ml-field {
	position: relative;
	margin-bottom: 18px;
}

.ml-phone-field {
	display: flex;
	align-items: center;
	border: 1.5px solid var(--ml-box-border) !important;
	border-radius: 12px;
	background: var(--ml-box-bg);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	padding: 0 14px;
	outline: none;
	box-shadow: none;
}

.ml-phone-field:focus-within {
	border-color: var(--ml-primary) !important;
	box-shadow: 0 0 0 4px var(--ml-ring-color);
}

.ml-phone-prefix {
	color: #a3a3b2;
	font-size: 15px;
	font-weight: 600;
	padding-left: 8px;
	border-left: 1px solid var(--ml-box-border);
	margin-left: 8px;
}

.ml-phone-input {
	flex: 1;
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 14px 4px;
	font-size: 16px;
	font-family: inherit;
	color: var(--ml-box-text);
	text-align: right;
	letter-spacing: 0.5px;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0 !important;
}

.ml-phone-input:focus,
.ml-phone-input:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

.ml-phone-input::placeholder {
	color: #b4b4c2;
	font-size: 13.5px;
}

.ml-btn {
	width: 100%;
	border: 0 !important;
	outline: none;
	-webkit-tap-highlight-color: transparent;
	border-radius: var(--ml-login-btn-radius, 12px) !important;
	padding: var(--ml-login-btn-padding, 15px 10px);
	font-size: var(--ml-login-btn-font, 15px);
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: transform 0.15s ease, opacity 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}

.ml-btn:active {
	transform: scale(0.98);
}

.ml-btn-primary {
	background: var(--ml-login-btn-color, var(--ml-primary)) !important;
	color: #fff !important;
	box-shadow: 0 6px 18px var(--ml-ring-color);
}

.ml-btn-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	box-shadow: none;
}

.ml-spinner {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	display: none;
	animation: ml-spin 0.7s linear infinite;
}

.ml-btn.is-loading .ml-spinner {
	display: inline-block;
}

.ml-btn.is-loading .ml-btn-text {
	opacity: 0.85;
}

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

.ml-error-message {
	color: var(--ml-box-error);
	font-size: 12.5px;
	text-align: center;
	margin-top: 12px;
	min-height: 16px;
	line-height: 1.7;
}

.ml-back-to-site-link {
	display: block;
	text-align: center;
	margin-top: 16px;
	font-size: 12.5px;
	color: #9a9aa8;
	text-decoration: none;
	transition: color 0.15s ease;
}

.ml-back-to-site-link:hover {
	color: var(--ml-primary);
}

/* ---------- مرحله کد تایید ---------- */

.ml-otp-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 18px;
	font-size: 12.5px;
}

.ml-link-btn {
	background: none;
	border: 0;
	outline: none;
	color: var(--ml-primary);
	font-family: inherit;
	font-size: 12.5px;
	cursor: pointer;
	padding: 6px 2px;
}

.ml-otp-boxes {
	display: flex;
	justify-content: center;
	gap: 10px;
	direction: ltr;
	margin: 8px 0 6px;
}

.ml-manual-verify-btn {
	margin-top: 18px;
}

.ml-otp-box {
	width: var(--ml-otp-box-width, 54px) !important;
	height: var(--ml-otp-box-height, 60px) !important;
	max-width: 18vw;
	border-radius: var(--ml-otp-box-radius, 14px) !important;
	border: 1.5px solid var(--ml-box-border) !important;
	background: var(--ml-box-bg) !important;
	color: var(--ml-box-text) !important;
	text-align: center !important;
	font-size: 22px;
	font-weight: 700;
	font-family: inherit;
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
	caret-color: var(--ml-primary);
	box-sizing: border-box;
	padding: 0 !important;
	margin: 0;
	line-height: normal;
}

.ml-otp-box:focus,
.ml-otp-box:focus-visible {
	outline: none !important;
	border-color: var(--ml-box-active) !important;
	box-shadow: 0 0 0 4px var(--ml-ring-color) !important;
	transform: translateY(-2px);
}

.ml-otp-box.is-filled {
	border-color: var(--ml-box-active);
}

.ml-otp-boxes.is-error .ml-otp-box {
	border-color: var(--ml-box-error);
	background: #fdeceb;
	animation: ml-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes ml-shake {
	10%, 90% { transform: translateX(-1px); }
	20%, 80% { transform: translateX(2px); }
	30%, 50%, 70% { transform: translateX(-4px); }
	40%, 60% { transform: translateX(4px); }
}

.ml-otp-status {
	min-height: 20px;
	text-align: center;
	font-size: 12.5px;
	color: var(--ml-box-error);
	margin: 14px 0 4px;
	line-height: 1.7;
}

.ml-otp-status.is-success {
	color: #1fa971;
}

.ml-otp-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 18px;
	font-size: 12.5px;
}

.ml-link-btn {
	background: none;
	border: 0;
	color: var(--ml-primary);
	font-family: inherit;
	font-size: 12.5px;
	cursor: pointer;
	padding: 6px 2px;
}

.ml-link-btn:disabled {
	color: #b4b4c2;
	cursor: not-allowed;
}

/* ---------- انیمیشن موفقیت ---------- */

.ml-success-overlay {
	position: absolute;
	inset: 0;
	background: var(--ml-card-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.ml-success-overlay.is-active {
	opacity: 1;
	pointer-events: auto;
}

.ml-success-circle {
	stroke: #1fa971;
	stroke-width: 2.5;
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	animation: ml-circle 0.5s ease forwards;
}

.ml-success-check {
	stroke: #1fa971;
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: ml-check 0.35s 0.4s ease forwards;
}

@keyframes ml-circle {
	to { stroke-dashoffset: 0; }
}

@keyframes ml-check {
	to { stroke-dashoffset: 0; }
}

.ml-page-footer {
	margin-top: 22px;
	font-size: 11.5px;
	color: #a3a3b2;
	text-align: center;
}

/* ---------- ریسپانسیو موبایل ---------- */

@media (max-width: 420px) {
	.ml-card {
		padding: 28px 18px 26px;
		border-radius: 16px;
	}

	.ml-otp-box {
		width: min(var(--ml-otp-box-width, 54px), 50px) !important;
		height: min(var(--ml-otp-box-height, 60px), 56px) !important;
	}

	.ml-otp-boxes {
		gap: 8px;
	}
}

@media (max-width: 340px) {
	.ml-otp-box {
		width: min(var(--ml-otp-box-width, 54px), 44px) !important;
		height: min(var(--ml-otp-box-height, 60px), 52px) !important;
		font-size: 18px;
	}
}

/* ==========================================================================
   شورتکد فرم اینلاین
   ========================================================================== */

.ml-shortcode-wrap {
	max-width: 420px;
	margin: 0 auto;
}

.ml-card-embed {
	position: relative;
	background: var(--ml-card-bg);
	border-radius: 18px;
	box-shadow: 0 6px 24px rgba(20, 20, 43, 0.06);
	padding: 30px 24px;
	font-family: inherit;
}

.ml-card-embed * {
	box-sizing: border-box;
}

/* ==========================================================================
   شورتکد دکمه + مودال پاپ‌آپ
   ========================================================================== */

.ml-open-modal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ml-login-btn-color, var(--ml-primary)) !important;
	color: #fff !important;
	border: 0 !important;
	outline: none;
	border-radius: var(--ml-login-btn-radius, 10px) !important;
	padding: var(--ml-login-btn-padding, 11px 22px);
	font-size: var(--ml-login-btn-font, 14px);
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	box-shadow: 0 6px 16px var(--ml-ring-color);
	transition: transform 0.15s ease;
}

.ml-open-modal-btn:active {
	transform: scale(0.97);
}

.ml-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.ml-modal-overlay.is-open {
	display: flex;
}

.ml-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 30, 0.55);
	backdrop-filter: blur(2px);
	animation: ml-fade-in 0.2s ease;
}

@keyframes ml-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.ml-modal-box {
	position: relative;
	width: 100%;
	max-width: 400px;
	z-index: 1;
	animation: ml-card-in 0.3s ease;
}

.ml-modal-box .ml-card-embed {
	padding: 34px 26px 28px;
	border-radius: 20px;
}

.ml-modal-close {
	position: absolute;
	top: 12px;
	left: 12px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #f2f2f6;
	color: #6b6b7b;
	border: 0;
	outline: none;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.ml-modal-close:hover,
.ml-modal-close:focus-visible {
	background: #e6e6ee;
	color: #1c1c28;
}

body.ml-modal-open {
	overflow: hidden;
}

/* ==========================================================================
   اجباری‌سازی ورود در سبد خرید (بنر + بلور پس‌زمینه پشت مودال اجباری)
   ========================================================================== */

.ml-cart-required-banner {
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 18px;
	text-align: center;
	font-size: 13.5px;
	font-weight: 600;
	font-family: inherit;
}

.ml-cart-blur-wrapper {
	transition: filter 0.25s ease;
}

.ml-cart-blur-wrapper.is-locked {
	filter: blur(5px);
	pointer-events: none;
	user-select: none;
}

.ml-modal-overlay-forced .ml-modal-backdrop {
	cursor: default;
}

/* ==========================================================================
   تایید شماره در تسویه‌حساب: ردیف Flexbox مستقل کنار فیلد شماره موبایل
   (به‌عمد از position:absolute استفاده نمی‌شود تا در هیچ قالبی از جای خود خارج نشود)
   ========================================================================== */

.ml-inline-verify-field {
	display: flex !important;
	align-items: stretch;
	gap: 8px;
	width: 100% !important;
	box-sizing: border-box;
}

.ml-inline-verify-field input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
}

.ml-inline-verify-btn {
	flex: 0 0 auto;
	align-self: center;
	border: 0;
	outline: none;
	background: var(--ml-checkout-btn-color, var(--ml-primary, #006660));
	color: #fff;
	font-family: inherit;
	font-size: var(--ml-checkout-btn-font, 11px);
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	border-radius: var(--ml-checkout-btn-radius, 8px);
	padding: var(--ml-checkout-btn-padding, 7px 10px);
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.ml-inline-verify-field.is-btn-right {
	flex-direction: row-reverse;
}

.ml-inline-verify-btn:disabled {
	opacity: 0.75;
	cursor: not-allowed;
}

.ml-inline-verify-btn.is-loading {
	opacity: 0.7;
}

.ml-inline-verify-status {
	font-size: 12px;
	min-height: 16px;
	margin: 6px 0 0;
}

.ml-inline-verify-status.is-error {
	color: var(--ml-box-error, #e8394a);
}

.ml-inline-verify-status.is-success {
	color: #1fa971;
	font-weight: 600;
}

@media (max-width: 480px) {
	.ml-inline-verify-field {
		flex-wrap: wrap;
	}

	.ml-inline-verify-field .ml-has-inline-verify {
		flex-basis: 100%;
	}

	.ml-inline-verify-btn {
		flex: 1 1 auto;
	}
}

/* ==========================================================================
   پوسته‌های بصری (Skins) — هر پوسته شکل کارت، سایه، گردی و حس‌وحال کلی فرم را
   تغییر می‌دهد. رنگ‌های اصلی (متغیرهای CSS بالای فایل) روی همه پوسته‌ها اثر
   می‌گذارند؛ پوسته‌های تیره/شیشه‌ای مقادیر پیش‌فرض خودشان را هم اضافه می‌کنند.
   انتخاب پوسته برای هر جایگاه (صفحه/فرم/مودال) جداگانه از تنظیمات انجام می‌شود.
   ========================================================================== */

/* ---------- نرم و گرد (soft-rounded) ---------- */

.ml-card:has(> .ml-widget.ml-skin-soft-rounded),
.ml-card-embed:has(> .ml-widget.ml-skin-soft-rounded) {
	border-radius: 32px !important;
	box-shadow: 0 20px 50px -12px var(--ml-ring-color), 0 4px 14px rgba(20, 20, 43, 0.05) !important;
}

.ml-widget.ml-skin-soft-rounded .ml-otp-box {
	border-radius: 20px !important;
}

.ml-widget.ml-skin-soft-rounded .ml-phone-field {
	border-radius: 20px !important;
}

.ml-widget.ml-skin-soft-rounded .ml-btn {
	border-radius: 999px !important;
}

.ml-widget.ml-skin-soft-rounded .ml-title {
	font-weight: 800;
}

.ml-widget.ml-skin-soft-rounded .ml-otp-boxes {
	gap: 14px;
}

/* ---------- کارت مدرن (modern-card) ---------- */

.ml-card:has(> .ml-widget.ml-skin-modern-card),
.ml-card-embed:has(> .ml-widget.ml-skin-modern-card) {
	border-radius: 14px !important;
	box-shadow: 0 2px 0 var(--ml-primary), 0 18px 40px -18px rgba(20, 20, 43, 0.35) !important;
	border-top: 4px solid var(--ml-primary);
	padding-top: 26px !important;
}

.ml-widget.ml-skin-modern-card .ml-title {
	font-weight: 800;
	letter-spacing: -0.01em;
}

.ml-widget.ml-skin-modern-card .ml-otp-box {
	border-radius: 8px !important;
	border-width: 2px !important;
}

.ml-widget.ml-skin-modern-card .ml-phone-field {
	border-radius: 8px !important;
	border-width: 2px !important;
}

.ml-widget.ml-skin-modern-card .ml-btn {
	border-radius: 8px !important;
	letter-spacing: 0.01em;
}

/* ---------- تیره (dark) ---------- */

.ml-card:has(> .ml-widget.ml-skin-dark),
.ml-card-embed:has(> .ml-widget.ml-skin-dark) {
	background: #15151f !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55) !important;
}

.ml-page:has(.ml-widget.ml-skin-dark) {
	background: radial-gradient(circle at 50% 0%, #22222f 0%, #0d0d13 70%);
}

.ml-widget.ml-skin-dark .ml-title {
	color: #f4f4f8;
}

.ml-widget.ml-skin-dark .ml-subtitle,
.ml-widget.ml-skin-dark .ml-otp-status {
	color: #9c9caa;
}

.ml-widget.ml-skin-dark .ml-phone-field,
.ml-widget.ml-skin-dark .ml-otp-box {
	background: #1e1e2a !important;
	border-color: #34344a !important;
	color: #f4f4f8 !important;
}

.ml-widget.ml-skin-dark .ml-phone-input {
	color: #f4f4f8 !important;
}

.ml-widget.ml-skin-dark .ml-phone-input::placeholder {
	color: #6c6c7d;
}

.ml-widget.ml-skin-dark .ml-otp-box:focus,
.ml-widget.ml-skin-dark .ml-phone-field:focus-within {
	box-shadow: 0 0 0 4px var(--ml-ring-color), 0 0 16px var(--ml-ring-color) !important;
}

.ml-widget.ml-skin-dark .ml-link-btn {
	color: var(--ml-primary);
}

.ml-widget.ml-skin-dark .ml-back-to-site-link {
	color: #6c6c7d;
}

.ml-widget.ml-skin-dark .ml-logo-text a {
	color: #f4f4f8;
}

.ml-page:has(.ml-widget.ml-skin-dark) .ml-page-footer {
	color: #7a7a8c;
}

/* ---------- شیشه‌ای (glass) ---------- */

.ml-page:has(.ml-widget.ml-skin-glass) {
	background: linear-gradient(135deg, var(--ml-primary) 0%, #1c1c28 100%);
}

.ml-card:has(> .ml-widget.ml-skin-glass),
.ml-card-embed:has(> .ml-widget.ml-skin-glass) {
	background: rgba(255, 255, 255, 0.14) !important;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.35);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.35) !important;
}

.ml-widget.ml-skin-glass .ml-title,
.ml-widget.ml-skin-glass .ml-logo-text a {
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.ml-widget.ml-skin-glass .ml-subtitle,
.ml-widget.ml-skin-glass .ml-otp-status,
.ml-widget.ml-skin-glass .ml-back-to-site-link {
	color: rgba(255, 255, 255, 0.75);
}

.ml-widget.ml-skin-glass .ml-phone-field,
.ml-widget.ml-skin-glass .ml-otp-box {
	background: rgba(255, 255, 255, 0.16) !important;
	border-color: rgba(255, 255, 255, 0.4) !important;
	color: #fff !important;
}

.ml-widget.ml-skin-glass .ml-phone-input {
	color: #fff !important;
}

.ml-widget.ml-skin-glass .ml-phone-input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.ml-widget.ml-skin-glass .ml-page-footer {
	color: rgba(255, 255, 255, 0.7);
}

/* ---------- کلاسیک قاب‌دار (classic) ---------- */

.ml-card:has(> .ml-widget.ml-skin-classic),
.ml-card-embed:has(> .ml-widget.ml-skin-classic) {
	border-radius: 6px !important;
	box-shadow: none !important;
	border: 1.5px solid var(--ml-box-border) !important;
}

.ml-widget.ml-skin-classic .ml-otp-box,
.ml-widget.ml-skin-classic .ml-phone-field {
	border-radius: 4px !important;
}

.ml-widget.ml-skin-classic .ml-btn {
	border-radius: 4px !important;
}

.ml-widget.ml-skin-classic .ml-title {
	font-weight: 700;
}

.ml-widget.ml-skin-classic .ml-otp-boxes {
	gap: 8px;
}