/*
 * نکته مهم درباره اختصاصیت (specificity): تمام سلکتورهای زیر که یک ویژگی قابل‌کنترل از المنتور
 * (بخش ۱ پرامپت اول) را تنظیم می‌کنند، عمداً فقط با «یک کلاس» نوشته شده‌اند (مثلاً
 * ".map-auth-form__button")، نه دو کلاس تودرتو. کنترل‌های استایل ویجت المنتور با سلکتور
 * "{{WRAPPER}} .map-auth-form__x" همیشه دو کلاس دارند و اختصاصیت بالاتری از یک کلاس تنها
 * دارند، پس همیشه روی این استایل پایه غالب می‌شوند - این دقیقاً هدف اصلی افزونه است.
 * (نسخه قبلی این فایل با دوکلاسه‌کردن همه سلکتورها اختصاصیت را با المنتور برابر کرده بود که
 * باعث رگرسیون شد: در تساوی اختصاصیت، هرکدام دیرتر لود می‌شد برنده می‌شد، نه همیشه المنتور.)
 *
 * برای مقاومت در برابر ریست‌های عمومی قالب (مثل تعریف margin/padding روی تگ خام input/button/
 * label/p در CSS قالب)، به‌جای یک بلاک ریست جداگانه با سلکتور تگ خام (که خودش با المنتور یا با
 * همین کلاس‌های زیر تداخل ایجاد می‌کرد)، هر مقدار لازم (margin/border/font) مستقیماً و به‌صورت
 * صریح داخل همان سلکتور تک‌کلاسه‌ی مربوطه تنظیم شده است.
 */

.map-auth-form {
	--map-form-bg: #ffffff;
	--map-input-bg: #f7f7f8;
	--map-label-color: #1e1e2d;
	--map-input-color: #1e1e2d;
	--map-input-border: #d7d7de;
	--map-input-border-focus: #6b5bff;
	--map-input-border-error: #e0392b;
	--map-error-color: #e0392b;
	--map-success-color: #1fa858;
	--map-button-bg: #6b5bff;
	--map-button-bg-hover: #5647d9;
	--map-button-bg-disabled: #bdbde0;
	--map-button-color: #ffffff;
	--map-timer-color: #7a7a8c;
	--map-icon-color: #8a8aa3;

	box-sizing: border-box;
	max-width: 420px;
	width: 100%;
	margin: 0;
	background: var( --map-form-bg );
	border-radius: 12px;
	padding: 24px;
	text-align: right;
	direction: rtl;
	font-family: inherit;
	line-height: 1.5;
}

.map-auth-form,
.map-auth-form * {
	box-sizing: border-box;
}

.map-auth-form__honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.map-auth-form__label {
	display: block;
	margin: 0 0 8px;
	color: var( --map-label-color );
	font: inherit;
	font-size: 14px;
	font-weight: 600;
}

.map-auth-form__input-wrap {
	position: relative;
	margin-bottom: 8px;
}

.map-auth-form__icon {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY( -50% );
	color: var( --map-icon-color );
	pointer-events: none;
}

.map-auth-form__input {
	display: block;
	width: 100%;
	margin: 0;
	background: var( --map-input-bg );
	color: var( --map-input-color );
	border: 1px solid var( --map-input-border );
	border-radius: 8px;
	padding: 12px 40px 12px 12px;
	font: inherit;
	font-size: 15px;
	transition: border-color 0.15s ease;
}

.map-auth-form__input:focus {
	outline: none;
	border-color: var( --map-input-border-focus );
}

.map-auth-form__input.is-error {
	border-color: var( --map-input-border-error );
}

.map-auth-form__helper {
	display: block;
	margin: 4px 0 16px;
	font-size: 12px;
	color: var( --map-timer-color );
}

.map-auth-form__button {
	display: block;
	width: 100%;
	margin: 0;
	background: var( --map-button-bg );
	color: var( --map-button-color );
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 12px 16px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.map-auth-form__button:hover:not(:disabled) {
	background: var( --map-button-bg-hover );
}

.map-auth-form__button:disabled {
	background: var( --map-button-bg-disabled );
	cursor: not-allowed;
}

.map-auth-form__link {
	display: inline-block;
	margin: 0;
	background: none;
	border: none;
	padding: 8px 0;
	color: var( --map-button-bg );
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	text-decoration: underline;
}

.map-auth-form__link:disabled {
	color: var( --map-timer-color );
	cursor: not-allowed;
	text-decoration: none;
}

/* فعلاً طبق درخواست غیرفعال است؛ برای بازگرداندن، همین یک قانون را حذف کن. */
.map-auth-form__link--change {
	display: none;
}

/*
 * توجه: هیچ "display" ای اینجا ست نمی‌شود. این دو باکس با ویژگی HTML بومی "hidden" کنترل
 * می‌شوند (که معادل UA-stylesheet یک "display:none" است). نسخه قبلی اینجا "display:block"
 * داشت که چون یک قانون author-level است، همیشه روی حالت hidden مرورگر غالب می‌شد و همین باعث
 * می‌شد هر دو باکس پیام (خطا/موفقیت) همیشه نمایان بمانند - همان دو نوار رنگی صورتی/سبز بالای
 * فیلد شماره موبایل که در باگ ۷ گزارش شد. div به‌طور طبیعی block است، نیازی به ست‌کردن ندارد.
 */
.map-auth-form__message {
	margin: 0 0 16px;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 13px;
}

.map-auth-form__message--error {
	background: rgba( 224, 57, 43, 0.08 );
	color: var( --map-error-color );
}

.map-auth-form__message--success {
	background: rgba( 31, 168, 88, 0.08 );
	color: var( --map-success-color );
}

.map-auth-form__otp-boxes {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 12px 0;
	direction: ltr;
}

.map-otp-box {
	width: 48px;
	height: 56px;
	margin: 0;
	text-align: center;
	font: inherit;
	font-size: 20px;
	background: var( --map-input-bg );
	color: var( --map-input-color );
	border: 1px solid var( --map-input-border );
	border-radius: 8px;
}

.map-otp-box:focus {
	outline: none;
	border-color: var( --map-input-border-focus );
}

.map-otp-box.is-error {
	border-color: var( --map-input-border-error );
}

.map-auth-form__timer {
	margin: 0 0 8px;
	text-align: center;
	color: var( --map-timer-color );
	font-size: 13px;
}

.map-auth-form__step--otp {
	text-align: center;
}

.map-auth-form__masked-mobile {
	unicode-bidi: isolate;
	font-weight: 700;
}

/*
 * آیکون ورود/خروج هدر. مثل بقیه‌ی سلکتورهای هدف کنترل المنتور، عمداً تک‌کلاسه‌اند تا
 * اختصاصیت‌شان همیشه از "{{WRAPPER}} .map-icon-widget__x" المنتور کمتر بماند.
 */

.map-icon-widget__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.map-icon-widget__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	line-height: 1;
}

.map-icon-widget__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.map-icon-widget__label {
	font: inherit;
	font-size: 14px;
}

/* دکمه بازکننده مودال و مودال (خارج از .map-auth-form، توسط هیچ کنترل المنتوری هدف قرار
   نمی‌گیرند، پس نیازی به محدودیت اختصاصیت ندارند) */

.map-login-open-modal {
	display: inline-block;
	box-sizing: border-box;
	margin: 0;
	background: var( --map-button-bg, #6b5bff );
	color: var( --map-button-color, #fff );
	border: none;
	border-radius: 8px;
	padding: 10px 20px;
	font: inherit;
	font-size: 14px;
	line-height: 1.5;
	cursor: pointer;
}

.map-modal-root {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.map-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.55 );
}

.map-modal-box {
	position: relative;
	z-index: 1;
	max-height: 90vh;
	overflow-y: auto;
	border-radius: 14px;
	background: transparent;
}

.map-modal-close {
	box-sizing: border-box;
	position: absolute;
	top: 8px;
	left: 8px;
	margin: 0;
	background: rgba( 0, 0, 0, 0.06 );
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

/* صفحه اختصاصی ورود */

.map-login-page {
	display: flex;
	justify-content: center;
	padding: 60px 20px;
	box-sizing: border-box;
}

.map-login-page__container {
	width: 100%;
	max-width: 420px;
}

.map-login-page__title {
	text-align: center;
	margin: 0 0 24px;
}

@media ( max-width: 480px ) {
	.map-login-page {
		padding: 32px 16px;
	}

	.map-auth-form {
		padding: 18px;
	}
}