/* ==========================================================================
   Mobile OTP Login — frontend (minimal • modern • premium • RTL)
   ========================================================================== */

.mol-form-wrapper {
	--acc: #635bff;
	--acc-press: #4b45d1;
	--acc-soft: #f1f0ff;
	--acc-ring: rgba( 99, 91, 255, 0.14 );
	--ink: #14161c;
	--muted: #6b7280;
	--faint: #9aa0ac;
	--line: #ececf1;
	--surface: #ffffff;
	--radius: 24px;
	--radius-in: 13px;
	direction: rtl;
	font-family: inherit, sans-serif;
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

/* پیش از بارگذاری CSS پنهان بماند تا پرش رخ ندهد */
.mol-step[hidden] { display: none !important; }

.mol-form-box {
	position: relative;
	max-width: 408px;
	margin: 0 auto;
	padding: 38px 34px 32px;
	background: var(--surface);
	border: 1px solid rgba( 20, 22, 28, 0.06 );
	border-radius: var(--radius);
	box-shadow:
		0 1px 1px rgba( 20, 22, 28, 0.03 ),
		0 10px 24px -12px rgba( 20, 22, 28, 0.12 ),
		0 30px 60px -30px rgba( 99, 91, 255, 0.22 );
	transition: box-shadow 0.28s ease;
}

.mol-form-icon {
	position: relative;
	box-sizing: border-box;
	width: var( --mol-icon-box, 56px );
	height: var( --mol-icon-box, 56px );
	margin: 0 auto 18px;
	border-radius: var( --mol-icon-radius, 16px );
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --mol-icon-color, var(--acc) );
	background: var( --mol-icon-bg, var(--acc-soft) );
}
/* حلقهٔ تزئینی پیش‌فرض؛ با انتخاب حاشیه در ویجت خاموش می‌شود */
.mol-form-icon::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: calc( var( --mol-icon-radius, 16px ) + 4px );
	border: 1px solid var(--acc-ring);
	opacity: var( --mol-icon-ring, 1 );
	pointer-events: none;
}
.mol-form-icon svg,
.mol-form-icon i {
	width: var( --mol-icon-size, 26px );
	height: var( --mol-icon-size, 26px );
	font-size: var( --mol-icon-size, 26px );
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.mol-form-icon img {
	width: var( --mol-icon-size, 100% );
	height: var( --mol-icon-size, 100% );
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}
.mol-form-icon.mol-icon-image { overflow: hidden; }

.mol-title {
	margin: 0 0 7px;
	font-size: 1.35rem;
	font-weight: 750;
	text-align: center;
	color: var(--ink);
	letter-spacing: -0.02em;
}
.mol-subtitle,
.mol-otp-hint {
	margin: 0 0 24px;
	font-size: 0.9rem;
	text-align: center;
	color: var(--muted);
	line-height: 1.75;
}
.mol-otp-hint { color: #4b5563; font-weight: 500; }
.mol-otp-hint bdi { font-weight: 700; color: var(--ink); }

.mol-label {
	display: block;
	margin-bottom: 9px;
	font-size: 0.8rem;
	font-weight: 650;
	color: #3a3f4b;
	letter-spacing: -0.01em;
}

/* ورودی موبایل با آیکون */
.mol-input-wrap { position: relative; margin-bottom: 22px; }
.mol-input-ic {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY( -50% );
	width: 19px;
	height: 19px;
	color: var( --mol-input-border, var(--faint) );
	pointer-events: none;
	transition: color 0.18s ease;
}
.mol-input-ic svg { width: 19px; height: 19px; }

.mol-input {
	width: 100%;
	box-sizing: border-box;
	height: 52px;
	padding: 0 16px;
	font-size: 1rem;
	font-family: inherit;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-in);
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.mol-input--icon { padding-right: 46px; }
.mol-input::placeholder { color: var(--faint); letter-spacing: 0.02em; }
.mol-input:focus {
	outline: none;
	border-color: var(--acc);
	box-shadow: 0 0 0 4px var(--acc-ring);
}
.mol-input-wrap:focus-within .mol-input-ic { color: var( --mol-input-focus, var(--acc) ); }

/* فیلد رمز عبور در مرحلهٔ دو */
.mol-pw-field { margin-bottom: 18px; text-align: right; }
.mol-pw-field .mol-label { display: block; margin-bottom: 8px; }
.mol-pw-toggle {
	display: block;
	width: 100%;
	text-align: center;
	margin: 0 0 12px;
	text-decoration: none;
}

/* خانه‌های کد */
.mol-otp-boxes {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 100%;
	margin-bottom: 24px;
	direction: ltr;
	transition: opacity 0.2s ease;
}
.mol-otp-box {
	box-sizing: border-box;
	flex: 0 1 auto;
	min-width: 1.2em;
	max-width: 100%;
	padding: 0 2px;
	width: 52px;
	height: 60px;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ink);
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 14px;
	caret-color: var(--acc);
	transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
	-moz-appearance: textfield;
}
.mol-otp-box::-webkit-outer-spin-button,
.mol-otp-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mol-otp-box:focus {
	outline: none;
	border-color: var(--acc);
	box-shadow: 0 0 0 4px var(--acc-ring);
	transform: translateY( -2px );
}
.mol-otp-box.is-filled { border-color: var(--acc); }
.mol-otp-boxes.is-error .mol-otp-box { border-color: #ef4444; animation: molShake 0.4s; }
.mol-otp-boxes.is-success .mol-otp-box { border-color: #10b981; }
.mol-otp-boxes.is-loading { opacity: 0.5; pointer-events: none; }


/* دکمهٔ اصلی */
button.mol-btn {
	position: relative;
	width: 100%;
	height: 52px;
	padding: 0 18px;
	font-size: 0.98rem;
	font-weight: 650;
	font-family: inherit;
	letter-spacing: -0.01em;
	border: none;
	border-radius: var(--radius-in);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	color: #fff;
	background: var(--acc);
	transition: transform 0.14s cubic-bezier( 0.16, 1, 0.3, 1 ), background 0.18s ease, box-shadow 0.2s ease;
}
.mol-btn-primary:hover { background: var(--acc-press); }
.mol-btn-primary:active { transform: translateY( 0 ); }
.mol-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }

.mol-btn.is-loading,
.mol-open-popup.is-loading { color: transparent !important; text-shadow: none !important; }

/* لودرهای قابل‌انتخاب (داخل دکمه) — مرکزچینی با flex تا با چرخش تداخل نکند */
.mol-loader {
	--mol-loader-color: #fff;
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	pointer-events: none;
}
.mol-loader-spinner::before {
	content: "";
	display: block;
	width: 19px;
	height: 19px;
	border: 2.5px solid rgba( 255, 255, 255, 0.35 );
	border-top-color: var(--mol-loader-color);
	border-radius: 50%;
	animation: molSpin 0.7s linear infinite;
}
.mol-loader-dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mol-loader-color);
	display: inline-block;
	animation: molBounce 0.6s ease-in-out infinite;
}
.mol-loader-dots i:nth-child(2) { animation-delay: 0.15s; }
.mol-loader-dots i:nth-child(3) { animation-delay: 0.3s; }
.mol-loader-bars i {
	width: 4px;
	height: 18px;
	border-radius: 3px;
	background: var(--mol-loader-color);
	display: inline-block;
	animation: molBars 0.9s ease-in-out infinite;
}
.mol-loader-bars i:nth-child(2) { animation-delay: 0.15s; }
.mol-loader-bars i:nth-child(3) { animation-delay: 0.3s; }
.mol-loader-bars i:nth-child(4) { animation-delay: 0.45s; }
.mol-loader-pulse::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--mol-loader-color);
	animation: molPulse 1s ease-in-out infinite;
}

.mol-resend-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 18px;
}
button.mol-link {
	background: none;
	border: none;
	color: var(--acc);
	cursor: pointer;
	font-size: 0.84rem;
	font-weight: 650;
	padding: 6px 4px;
	font-family: inherit;
	border-radius: 8px;
	transition: color 0.15s ease, background 0.15s ease;
}
.mol-link:hover:not(:disabled) { color: var(--acc-press); background: var(--acc-soft); }
.mol-link:disabled { color: var(--faint); cursor: not-allowed; }

.mol-message {
	margin-top: 18px;
	font-size: 0.85rem;
	text-align: center;
	border-radius: 11px;
	transition: all 0.2s ease;
}
.mol-message.mol-error { color: #b42318; background: #fef3f2; padding: 11px 14px; }
.mol-message.mol-success { color: #067647; background: #ecfdf3; padding: 11px 14px; }

/* فقط مرحلهٔ کد انیمیشن ورود بگیرد؛ مرحلهٔ اول بدون پرش لود شود */
.mol-step-otp:not( [hidden] ) { animation: molIn 0.36s cubic-bezier( 0.16, 1, 0.3, 1 ); }

/* ==========================================================================
   Popup
   ========================================================================== */
.mol-popup {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0.32s ease;
}
.mol-popup.mol-open { visibility: visible; pointer-events: auto; }
.mol-popup-overlay {
	position: absolute;
	inset: 0;
	background: rgba( 17, 18, 24, 0 );
	backdrop-filter: blur( 0 );
	-webkit-backdrop-filter: blur( 0 );
	transition: background 0.32s ease, backdrop-filter 0.32s ease, -webkit-backdrop-filter 0.32s ease;
}
.mol-popup.mol-open .mol-popup-overlay {
	background: var( --mol-overlay, rgba( 17, 18, 24, 0.5 ) );
	backdrop-filter: blur( 8px ) saturate( 120% );
	-webkit-backdrop-filter: blur( 8px ) saturate( 120% );
}
.mol-popup .mol-form-box {
	position: relative;
	z-index: 1;
	width: 100%;
	opacity: 0;
	transform: translateY( 22px ) scale( 0.96 );
	transition: transform 0.4s cubic-bezier( 0.16, 1, 0.3, 1 ), opacity 0.32s ease;
}
.mol-popup.mol-anim-fade .mol-form-box { transform: none; }
.mol-popup.mol-anim-slide .mol-form-box { transform: translateY( 42px ); }
.mol-popup.mol-anim-zoom .mol-form-box { transform: scale( 0.88 ); }
.mol-popup.mol-open .mol-form-box { opacity: 1; transform: none; }

.mol-close {
	position: absolute;
	top: 16px;
	left: 18px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f4f4f6;
	border: none;
	border-radius: 10px;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	color: #4b5563;
	transition: background 0.15s ease, color 0.15s ease;
	z-index: 2;
}
.mol-close:hover { background: #e9e9ee; color: var(--ink); }

body.mol-noscroll { overflow: hidden; }

/* هانی‌پات: کاملاً پنهان بدون ایجاد اسکرول */
.mol-captcha { margin: 0 0 18px; display: flex; justify-content: center; }
.mol-hp {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect( 0, 0, 0, 0 ) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ==========================================================================
   Launcher button (Elementor / shortcode)
   ========================================================================== */
.mol-popup-launcher { line-height: 1; }

.mol-open-popup {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	padding: 12px 26px;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-weight: 650;
	font-size: 0.98rem;
	letter-spacing: -0.01em;
	line-height: 1;
	text-decoration: none;
	color: #fff;
	background: var(--acc, #635bff);
	border-radius: 12px;
	transition: transform 0.16s ease, box-shadow 0.22s ease, background 0.2s ease;
}
.mol-open-popup:not(.mol-hover-none):hover { background: var(--acc-press, #4b45d1 ); }

/* حالت «بدون انیمیشن»: هیچ تغییری هنگام هاور رخ ندهد */
.mol-open-popup.mol-hover-none { transition: none; }
.mol-open-popup.mol-hover-none:hover { transform: none; filter: none; }

.mol-open-popup.mol-size-sm { padding: 9px 18px; font-size: 0.85rem; }
.mol-open-popup.mol-size-md { padding: 12px 26px; font-size: 0.98rem; }
.mol-open-popup.mol-size-lg { padding: 16px 38px; font-size: 1.1rem; }
.mol-open-popup.mol-btn-block { display: flex; width: 100%; }

.mol-btn-ic { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.mol-btn-ic svg,
.mol-btn-ic i { width: 18px; height: 18px; font-size: 18px; display: inline-flex; }
.mol-btn-label { line-height: 1; }

.mol-hover-lift:hover { transform: translateY( -2px ); box-shadow: 0 14px 26px -10px rgba( 99, 91, 255, 0.55 ); }
.mol-hover-grow:hover { transform: scale( 1.04 ); }
.mol-hover-glow:hover { box-shadow: 0 0 0 4px var( --acc-ring, rgba( 99, 91, 255, 0.2 ) ); }

/* رفع نامرئی‌شدن دکمه در المنتور */
.elementor-widget-mol_login_popup.elementor-invisible { opacity: 1 !important; visibility: visible !important; }

/* ==========================================================================
   محافظ المنتور — جلوگیری از سرریز استایل‌های سراسری روی داخل فرم
   (تایپوگرافی/رنگ/بوردر داخلی؛ کنترل‌های استایل ویجت دست‌نخورده می‌مانند)
   ========================================================================== */
.mol-form-wrapper .mol-label,
.mol-form-wrapper .mol-subtitle,
.mol-form-wrapper .mol-otp-hint,
.mol-form-wrapper .mol-message,
.mol-form-wrapper .mol-link {
	font-family: inherit !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* فیلدها: specificity بالا (بدون !important) تا کنترل‌های بوردر ویجت غالب بمانند */
.mol-form-wrapper .mol-form-box .mol-input,
.mol-form-wrapper .mol-form-box .mol-otp-box {
	box-sizing: border-box;
	font-family: inherit;
	letter-spacing: normal;
	text-transform: none;
	line-height: normal;
	background: #fff;
	color: var(--ink);
	box-shadow: none;
	min-height: 0;
	max-width: 100%;
}
.mol-form-wrapper .mol-form-box .mol-input {
	width: 100%;
	border: 1px solid var( --mol-input-border, var(--line) );
	border-radius: var(--radius-in);
	height: 52px;
}
.mol-form-wrapper .mol-form-box .mol-otp-boxes {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	max-width: 100%;
	justify-content: center;
	align-items: center;
}
.mol-form-wrapper .mol-form-box .mol-otp-box {
	width: 52px;
	flex: 0 1 auto;
	min-width: 1.2em;
	padding: 0 2px;
	border: 1.5px solid var( --mol-otp-border, var(--line) );
	border-radius: 14px;
	text-align: center;
}
.mol-form-wrapper .mol-form-box .mol-input:focus {
	border-color: var( --mol-input-focus, var(--acc) );
	box-shadow: 0 0 0 4px var(--acc-ring);
}
.mol-form-wrapper .mol-form-box .mol-otp-box:focus {
	border-color: var( --mol-otp-border-active, var(--acc) );
	box-shadow: 0 0 0 4px var(--acc-ring);
}
.mol-form-wrapper .mol-form-box .mol-otp-box.is-filled {
	border-color: var( --mol-otp-border-active, var(--acc) );
}
/* حالت خطا/موفقیت همیشه باید غالب باشد */
.mol-form-wrapper .mol-otp-boxes.is-error .mol-otp-box { border-color: #ef4444 !important; }
.mol-form-wrapper .mol-otp-boxes.is-success .mol-otp-box { border-color: #10b981 !important; }

/* دکمه‌های داخل فرم: مقادیر از متغیر می‌آیند تا کنترل‌های ویجت اثر کنند
   و هم‌زمان استایل پیش‌فرض قالب/المنتور بی‌اثر شود. */
.mol-form-wrapper .mol-btn,
.mol-form-wrapper .mol-btn-primary {
	font-family: inherit !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	text-decoration: none !important;
	border: none !important;
	border-radius: var( --mol-btn-radius, var(--radius-in) ) !important;
	color: #fff;
	background: var(--acc);
}
.mol-form-wrapper .mol-btn-primary:hover {
	background: var(--acc-press);
}
.mol-form-wrapper .mol-btn:disabled { opacity: 0.6 !important; }

.mol-popup-launcher .mol-open-popup {
	font-family: inherit;
	letter-spacing: -0.01em;
	text-transform: none;
	text-decoration: none;
	border: none;
	border-radius: 12px;
	color: #fff;
	background: var( --acc, #635bff );
}

/* ==========================================================================
   Success layer (animated checkmark)
   ========================================================================== */
.mol-success-layer {
	position: absolute;
	inset: 0;
	background: #fff;
	border-radius: inherit;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 6;
}
.mol-success-layer.mol-show { opacity: 1; }
.mol-success-layer[hidden] { display: none; }

.mol-check svg { width: 82px; height: 82px; }
.mol-check-circle {
	stroke: #10b981;
	stroke-width: 2.5;
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
}
.mol-check-mark {
	stroke: #10b981;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
}
.mol-success-layer.mol-show .mol-check { animation: molPop 0.45s cubic-bezier( 0.16, 1, 0.3, 1 ); }
.mol-success-layer.mol-show .mol-check-circle { animation: molDraw 0.5s ease forwards; }
.mol-success-layer.mol-show .mol-check-mark { animation: molDraw 0.35s 0.45s ease forwards; }

.mol-success-text {
	margin: 0;
	color: #067647;
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
	opacity: 0;
	animation: molFadeText 0.3s 0.5s ease forwards;
}

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes molSpin { to { transform: rotate( 360deg ); } }
@keyframes molBounce { 0%, 100% { transform: translateY( 0 ); opacity: 0.7; } 50% { transform: translateY( -7px ); opacity: 1; } }
@keyframes molBars { 0%, 100% { transform: scaleY( 0.4 ); opacity: 0.6; } 50% { transform: scaleY( 1 ); opacity: 1; } }
@keyframes molPulse { 0% { transform: scale( 0.5 ); opacity: 1; } 100% { transform: scale( 1.3 ); opacity: 0; } }
@keyframes molIn { from { opacity: 0; transform: translateY( 8px ); } to { opacity: 1; transform: none; } }
@keyframes molDraw { to { stroke-dashoffset: 0; } }
@keyframes molPop { 0% { transform: scale( 0.5 ); } 60% { transform: scale( 1.06 ); } 100% { transform: scale( 1 ); } }
@keyframes molFadeText { to { opacity: 1; } }
@keyframes molShake {
	0%, 100% { transform: translateX( 0 ); }
	25% { transform: translateX( -5px ); }
	50% { transform: translateX( 5px ); }
	75% { transform: translateX( -3px ); }
}

@media ( max-width: 480px ) {
	.mol-form-box { padding: 30px 22px 26px; }
}

/* ==========================================================================
   حالت لودینگ — باید از همهٔ قواعد رنگ (محافظ و کنترل‌های ویجت) قوی‌تر باشد
   ========================================================================== */
.mol-form-wrapper .mol-btn.is-loading,
.mol-form-wrapper .mol-btn-primary.is-loading,
.mol-popup-launcher .mol-open-popup.is-loading,
.mol-btn.is-loading,
.mol-open-popup.is-loading {
	color: transparent !important;
	text-shadow: none !important;
}
.mol-form-wrapper .mol-btn.is-loading .mol-btn-label,
.mol-open-popup.is-loading .mol-btn-label { visibility: hidden !important; }

/* ==========================================================================
   پیش‌نمایش زنده در ویرایشگر المنتور
   این کلاس‌ها فقط در حالت ویرایش به مارک‌آپ افزوده می‌شوند و در سایت واقعی
   هرگز رندر نمی‌شوند (کنترل در PHP با is_edit_mode).
   ========================================================================== */
.mol-preview-otp .mol-step-mobile { display: none !important; }
.mol-preview-otp .mol-step-otp { display: block !important; animation: none !important; }

/* پیش‌نمایش حالت رمز عبور داخل مرحلهٔ دو */
.mol-preview-pw .mol-code-group { display: none !important; }
.mol-preview-pw .mol-pw-field { display: block !important; }

/* پاپ‌آپ در حالت پیش‌نمایش: داخل خود ویجت نمایش داده شود، نه تمام‌صفحه،
   تا ویرایشگر قابل استفاده بماند. */
.mol-popup.mol-preview-inline {
	position: relative;
	inset: auto;
	z-index: 1;
	padding: 24px 0;
	visibility: visible;
	pointer-events: auto;
}
.mol-popup.mol-preview-inline .mol-popup-overlay { display: none; }
.mol-popup.mol-preview-inline .mol-form-box {
	opacity: 1;
	transform: none;
	transition: none;
}

/* ==========================================================================
   پیش‌فرض‌های واکنش‌گرا — در انتهای فایل تا بر لایهٔ محافظ اثر کند.
   کنترل‌های ریسپانسیو ویجت (که بعد از این بارگذاری می‌شوند) همچنان غالب‌اند.
   ========================================================================== */
@media ( max-width: 420px ) {
	.mol-form-wrapper .mol-form-box .mol-otp-box { width: 44px; }
	.mol-form-wrapper .mol-form-box .mol-otp-boxes { gap: 7px; }
}

/* هر المانی با این کلاس، با کلیک پاپ‌آپ ورود را باز می‌کند (data-mol-open-login هم پشتیبانی می‌شود) */
.mol-login-trigger { cursor: pointer; }