/* ============================================
   SMS.ir OTP Login - استایل هماهنگ با هویت بصری سایت
   رنگ اصلی: #E7A98D  |  رنگ پس‌زمینه ملایم: #FDF2E7
   ============================================ */

:root {
	--sotp-primary: #E7A98D;
	--sotp-primary-dark: #D6906F;
	--sotp-primary-light: #FDF2E7;
	--sotp-text: #4A3B34;
	--sotp-text-muted: #9C8B82;
	--sotp-border: #F0DFD1;
	--sotp-success-bg: #EAF6EE;
	--sotp-success-text: #2F8552;
	--sotp-success-border: #CFEBD9;
	--sotp-error-bg: #FDECEA;
	--sotp-error-text: #C0392B;
	--sotp-error-border: #F5C2BD;
	--sotp-radius-lg: 20px;
	--sotp-radius-md: 14px;
	--sotp-radius-pill: 999px;
	--sotp-gap: 18px;
}

.sotp-login-wrapper {
	max-width: 420px;
	margin: 0 auto;
}

.sotp-login-box,
.sotp-auth-form {
	padding: 24px 10px;
	border-radius: var(--sotp-radius-lg);
	background: var(--sotp-primary-light);
}

.sotp-modal-box .sotp-auth-form {
	border: none;
	padding: 0;
	background: transparent;
}

.sotp-login-box h2 {
	margin-top: 0;
	margin-bottom: var(--sotp-gap);
	font-size: 1.25em;
	text-align: center;
	color: var(--sotp-text);
}

.sotp-auth-form .form-row {
	margin-bottom: var(--sotp-gap);
}

.sotp-auth-form .sotp-step-set-password {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.sotp-auth-form .sotp-step-set-password .sotp-new-user-note,
.sotp-auth-form .sotp-step-set-password .form-row-wide,
.sotp-auth-form .sotp-step-set-password > input[type="hidden"] {
	width: 100%;
	flex: 0 0 100%;
}

.sotp-auth-form .sotp-step-set-password .form-row-first,
.sotp-auth-form .sotp-step-set-password .form-row-last {
	width: 48%;
	flex: 0 0 48%;
	box-sizing: border-box;
}

.sotp-auth-form label {
	display: block;
	margin-bottom: 8px;
	font-size: 0.92em;
	color: var(--sotp-text);
}

.sotp-auth-form input[type="password"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	padding: 12px 16px;
	font-size: 1.05em;
	box-sizing: border-box;
	border: 1px solid var(--sotp-border) !important;
	border-radius: var(--sotp-radius-pill) !important;
	background: #fff !important;
	color: var(--sotp-text);
	box-shadow: none !important;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.sotp-auth-form input[type="password"]:focus {
	outline: none;
	border-color: var(--sotp-primary);
	box-shadow: 0 0 0 3px rgba(231, 169, 141, 0.25);
}

.sotp-message {
	padding: 12px 16px;
	border-radius: var(--sotp-radius-md);
	margin-bottom: var(--sotp-gap);
	font-size: 0.92em;
}

.sotp-message.sotp-success {
	background: var(--sotp-success-bg);
	color: var(--sotp-success-text);
	border: 1px solid var(--sotp-success-border);
}

.sotp-message.sotp-error {
	background: var(--sotp-error-bg);
	color: var(--sotp-error-text);
	border: 1px solid var(--sotp-error-border);
}

.sotp-resend-wrapper {
	display: flex;
	justify-content: space-between;
	margin-top: 12px;
	gap: 10px;
}

.sotp-link-button {
	background: none;
	border: none;
	color: var(--sotp-primary-dark);
	cursor: pointer;
	font-size: 0.88em;
	padding: 6px 4px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sotp-link-button:hover:not(:disabled) {
	color: var(--sotp-text);
}

.sotp-link-button:disabled {
	color: var(--sotp-text-muted);
	cursor: not-allowed;
	text-decoration: none;
}

/* ===== تب‌های ورود (OTP / رمز عبور) ===== */
.sotp-auth-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 24px;
	background: #fff;
	border: 1px solid var(--sotp-border);
	border-radius: var(--sotp-radius-pill) !important;
	padding: 5px;
}

.sotp-tab-btn {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	flex: 1;
	background: none !important;
	border: none !important;
	padding: 10px 8px;
	font-size: 0.9em;
	cursor: pointer;
	color: var(--sotp-text-muted);
	border-radius: var(--sotp-radius-pill) !important;
	box-shadow: none !important;
	transition: background 0.15s, color 0.15s;
}

.sotp-tab-btn.sotp-tab-active {
	color: #fff !important;
	background: var(--sotp-primary) !important;
	font-weight: 600;
}

.sotp-tab-panel {
	animation: sotp-fade-in 0.15s ease-in;
}

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

.sotp-new-user-note {
	background: #fff;
	border: 1px solid var(--sotp-border);
	color: var(--sotp-text);
	padding: 14px 16px;
	border-radius: var(--sotp-radius-md);
	font-size: 0.88em;
	line-height: 1.9;
	margin-bottom: var(--sotp-gap);
}

/* ===== دکمه‌ها (کاملاً گرد، پیل‌شکل) ===== */
.sotp-auth-form .sotp-btn,
.sotp-btn {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	background: var(--sotp-primary) !important;
	color: #fff !important;
	border: none !important;
	border-radius: var(--sotp-radius-pill) !important;
	padding: 13px 20px;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, transform 0.1s;
	box-shadow: none !important;
}

.sotp-auth-form .sotp-btn:hover:not(:disabled),
.sotp-btn:hover:not(:disabled) {
	background: var(--sotp-primary-dark) !important;
}

.sotp-btn:active:not(:disabled) {
	transform: scale(0.98);
}

.sotp-btn:disabled,
.sotp-send-btn:disabled,
.sotp-verify-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ===== فیلدهای ورودی (کاملاً گرد) ===== */
.sotp-input {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	padding: 12px 16px;
	font-size: 1.05em;
	box-sizing: border-box;
	border: 1px solid var(--sotp-border) !important;
	border-radius: var(--sotp-radius-pill) !important;
	background: #fff !important;
	color: var(--sotp-text);
	box-shadow: none !important;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.sotp-input:focus {
	outline: none;
	border-color: var(--sotp-primary);
	box-shadow: 0 0 0 3px rgba(231, 169, 141, 0.25);
}

.sotp-mobile-input,
.sotp-otp-input,
.sotp-pw-mobile-input {
	text-align: center;
	letter-spacing: 1px;
}

.sotp-already-logged-in {
	background: var(--sotp-primary-light);
	border: 1px solid var(--sotp-border);
	border-radius: var(--sotp-radius-md);
	padding: 14px 16px;
	color: var(--sotp-text);
	text-align: center;
}

/* ===== مودال ورود اجباری بین سبد خرید و چک‌اوت ===== */
.sotp-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(74, 59, 52, 0.45);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.sotp-modal-box {
	background: #fff;
	border-radius: var(--sotp-radius-lg);
	max-width: 440px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	padding: 32px 26px 26px;
	position: relative;
	box-shadow: 0 16px 48px rgba(74, 59, 52, 0.22);
}

.sotp-modal-close {
	position: absolute;
	top: 16px;
	left: 16px;
	background: var(--sotp-primary-light);
	border: none;
	width: 34px;
	height: 34px;
	border-radius: var(--sotp-radius-pill);
	font-size: 1.3em;
	line-height: 1;
	cursor: pointer;
	color: var(--sotp-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s, color 0.15s;
}

.sotp-modal-close:hover {
	background: var(--sotp-primary);
	color: #fff;
}

.sotp-modal-title {
	margin: 0 0 8px;
	font-size: 1.2em;
	text-align: center;
	color: var(--sotp-text);
}

.sotp-modal-subtitle {
	margin: 0 0 24px;
	font-size: 0.9em;
	color: var(--sotp-text-muted);
	text-align: center;
	line-height: 1.8;
}

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