/**
 * Setak OTP — Styles
 *
 * متغیرهای CSS توسط Setak_OTP_Page::setak_otp_inject_branding_css() تنظیم می‌شوند:
 *   --setak-primary    رنگ اصلی
 *   --setak-secondary  رنگ فرعی
 *   --setak-font       فونت
 *
 * @package Setak_OTP_Login
 */

/* ── متغیرهای پیش‌فرض (در صورت نبود branding) ────────────── */
:root {
	--setak-primary:   #2563EB;
	--setak-secondary: #1E40AF;
	--setak-font:      "IranYekan" ,Tahoma, Arial, sans-serif;
	--setak-radius:    12px;
	--setak-radius-sm: 8px;
	--setak-shadow:    0 4px 24px rgba(0, 0, 0, 0.08);
	--setak-gap:       1.25rem;
	--setak-border:    #E2E8F0;
	--setak-text:      #1E293B;
	--setak-muted:     #64748B;
	--setak-bg:        #FFFFFF;
	--setak-error-bg:  #FEF2F2;
	--setak-error:     #DC2626;
	--setak-success-bg:#F0FDF4;
	--setak-success:   #16A34A;
	--setak-info-bg:   #EFF6FF;
	--setak-info:      #2563EB;
}

/* ── Wrapper ──────────────────────────────────────────────── */
.setak-otp-wrap {
	display:         flex;
	justify-content: center;
	align-items:     flex-start;
	padding:         2rem 1rem;
	font-family:     "IranYekan" !important;
	direction:       rtl;
}

/* ── کارت فرم ────────────────────────────────────────────── */
.setak-otp-box {
	width:            100%;
	max-width:        420px;
	background:       var(--setak-bg);
	border-radius:    var(--setak-radius);
	box-shadow:       var(--setak-shadow);
	padding:          2rem 2rem 1.75rem;
	border:           1px solid var(--setak-border);
}

/* ── لوگو ────────────────────────────────────────────────── */
.setak-otp-logo {
	text-align: center;
	margin-bottom: var(--setak-gap);
}

.setak-otp-logo img {
	max-height: 64px;
	max-width:  180px;
	object-fit: contain;
}

.setak-otp-site-name {
	font-size:    1.125rem;
	font-weight:  700;
	color:        var(--setak-primary);
	text-align:   center;
	margin-bottom: var(--setak-gap);
}

/* ── عنوان ───────────────────────────────────────────────── */
.setak-otp-title {
	font-size:     1.25rem;
	font-weight:   700;
	color:         var(--setak-text);
	margin:        0 0 var(--setak-gap);
	text-align:    center;
}

/* ── توضیح ───────────────────────────────────────────────── */
.setak-otp-desc {
	font-size:   0.9rem;
	color:       var(--setak-muted);
	margin:      0 0 var(--setak-gap);
	line-height: 1.6;
	text-align:  center;
}

.setak-otp-mobile-display {
	display:     block;
	font-weight: 600;
	color:       var(--setak-text);
	direction:   ltr;
	margin-top:  0.25rem;
}

/* ── فیلد ────────────────────────────────────────────────── */
.setak-otp-field {
	margin-bottom: var(--setak-gap);
}

.setak-otp-input {
	width:          100%;
	box-sizing:     border-box;
	padding:        0.75rem 1rem;
	font-size:      1rem;
	font-family:    "IranYekan" !important;
	color:          var(--setak-text);
	background:     #F8FAFC;
	border:         1.5px solid var(--setak-border);
	border-radius:  var(--setak-radius-sm);
	outline:        none;
	transition:     border-color 0.15s, box-shadow 0.15s;
	text-align:     center;
	letter-spacing: 0.03em;
}

.setak-otp-input:focus {
	border-color: var(--setak-primary);
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--setak-primary) 18%, transparent);
	background:   #FFFFFF;
}

/* کد OTP — بزرگتر و فاصله‌دار */
.setak-otp-input--code {
	font-size:      1.5rem;
	letter-spacing: 0.35em;
	padding:        0.75rem 0.5rem;
}

/* ── دکمه‌ها ─────────────────────────────────────────────── */
.setak-otp-btn {
	display:       block;
	width:         100%;
	padding:       0.8rem 1rem;
	font-size:     1rem;
	font-family:   "IranYekan" !important;
	font-weight:   600;
	border:        none;
	border-radius: var(--setak-radius-sm);
	cursor:        pointer;
	transition:    background 0.15s, opacity 0.15s, transform 0.1s;
	text-align:    center;
}

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

.setak-otp-btn:disabled {
	opacity: 0.55;
	cursor:  not-allowed;
	transform: none;
}

/* دکمه اصلی */
.setak-otp-btn--primary {
	background: var(--setak-primary);
	color:      #FFFFFF;
	margin-bottom: 0.75rem;
}

.setak-otp-btn--primary:hover:not(:disabled) {
	background: var(--setak-secondary);
}

/* دکمه ghost (ارسال مجدد) */
.setak-otp-btn--ghost {
	background:  transparent;
	color:       var(--setak-primary);
	border:      1.5px solid var(--setak-border);
	font-size:   0.875rem;
	font-weight: 500;
	margin-bottom: 0.5rem;
}

.setak-otp-btn--ghost:hover:not(:disabled) {
	border-color: var(--setak-primary);
	background:   color-mix(in srgb, var(--setak-primary) 6%, transparent);
}

/* دکمه link */
.setak-otp-btn--link {
	background:  transparent;
	color:       var(--setak-muted);
	font-size:   0.85rem;
	font-weight: 400;
	padding:     0.4rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.setak-otp-btn--link:hover {
	color: var(--setak-primary);
}

/* ── ناحیه resend ────────────────────────────────────────── */
.setak-otp-resend {
	margin-bottom: 0.25rem;
}

/* ── Alert ───────────────────────────────────────────────── */
.setak-otp-alert {
	padding:       0.75rem 1rem;
	border-radius: var(--setak-radius-sm);
	font-size:     0.9rem;
	margin-bottom: var(--setak-gap);
	text-align:    center;
	line-height:   1.5;
}

.setak-otp-alert--error {
	background: var(--setak-error-bg);
	color:      var(--setak-error);
	border:     1px solid color-mix(in srgb, var(--setak-error) 20%, transparent);
}

.setak-otp-alert--success {
	background: var(--setak-success-bg);
	color:      var(--setak-success);
	border:     1px solid color-mix(in srgb, var(--setak-success) 20%, transparent);
}

.setak-otp-alert--info {
	background: var(--setak-info-bg);
	color:      var(--setak-info);
	border:     1px solid color-mix(in srgb, var(--setak-info) 20%, transparent);
}

/* ── لاگین‌شده ───────────────────────────────────────────── */
.setak-otp-already-logged-in {
	text-align: center;
	color:      var(--setak-muted);
	font-family: "IranYekan" !important;
}

.setak-otp-already-logged-in a {
	color: var(--setak-primary);
}

/* ── screen-reader-text ──────────────────────────────────── */
.screen-reader-text {
	position:   absolute;
	width:      1px;
	height:     1px;
	padding:    0;
	margin:     -1px;
	overflow:   hidden;
	clip:       rect(0, 0, 0, 0);
	white-space: nowrap;
	border:     0;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 480px) {
	.setak-otp-box {
		padding:       1.5rem 1.25rem 1.25rem;
		border-radius: var(--setak-radius-sm);
		box-shadow:    none;
		border:        none;
	}

	.setak-otp-wrap {
		padding: 1rem 0;
	}
}