/*
 * استایل فرم ورود/ثبت‌نام پیامکی — CSS معمولی (بدون Tailwind).
 * متغیرهای --wbkb-sms-* توسط کنترل‌های استایل ویجت المنتور
 * (widgets/class-wbkb-sms-login-widget.php) به‌صورت inline بازنویسی می‌شوند؛
 * موقع تغییر این مقادیر پیش‌فرض، آن کنترل‌ها را هم هماهنگ به‌روزرسانی کن.
 */

.wbkb-sms-login * {
	box-sizing: border-box;
}

.wbkb-sms-login {
	width: 100%;
	max-width: 24rem;
	margin-inline: auto;
	font-family: "iransans", Vazirmatn, Tahoma, Arial, sans-serif;

	--wbkb-sms-card-bg: #ffffff;
	--wbkb-sms-card-radius: 16px;
	--wbkb-sms-card-shadow: 0 10px 30px rgba(15, 23, 42, .08);

	--wbkb-sms-input-text: #0f172a;
	--wbkb-sms-input-bg: #eef1f6;
	--wbkb-sms-input-bg-focus: #ffffff;
	--wbkb-sms-input-border: transparent;
	--wbkb-sms-input-hover-border: #dbe1ea;
	--wbkb-sms-focus: var(--wbkb-color-primary, #093c75);
	--wbkb-sms-focus-ring: #e0e7ff;
	--wbkb-sms-input-radius: 10px;
	--wbkb-sms-otp-size: 56px;

	--wbkb-sms-primary: var(--wbkb-color-primary, #093c75);
	--wbkb-sms-primary-hover: #0f2a4a;
	--wbkb-sms-primary-text: #ffffff;

	--wbkb-sms-secondary: var(--wbkb-color-primary, #093c75);
	--wbkb-sms-secondary-hover: #0f2a4a;
	--wbkb-sms-secondary-text: #ffffff;

	--wbkb-sms-btn-radius: 10px;
	--wbkb-sms-link: var(--wbkb-color-primary, #093c75);
	--wbkb-sms-hint: #64748b;
}

/* ==========================================================================
   کارت
   ========================================================================== */

.wbkb-sms-card {
	position: relative;
	background: var(--wbkb-sms-card-bg);
	border: 1px solid transparent;
	border-radius: var(--wbkb-sms-card-radius);
	box-shadow: var(--wbkb-sms-card-shadow);
	padding: 40px 36px;
}

@media (min-width: 640px) {
	.wbkb-sms-card {
		padding: 34px 30px;
	}
}

/*
 * وقتی فرم داخل مودال سراسری افزونه رندر می‌شود (WBKB_SMS_Login_Render::render_modal)،
 * قاب/سایه/حاشیه اختصاصی کارت با قاب مودال (.wbkb-modal-dialog) تداخل دوتایی
 * (دو باکس تودرتو) ایجاد می‌کرد؛ داخل مودال، کارت کاملاً flat می‌شود و پدینگ/
 * حاشیه/سایه از خود .wbkb-sms-dialog گرفته می‌شود.
 */
.wbkb-modal-dialog .wbkb-sms-card {
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

/* ==========================================================================
   لوگو
   ========================================================================== */

.wbkb-sms-logo-site {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.wbkb-sms-logo-site img {
	max-width: 160px;
	max-height: 64px;
	height: auto;
	width: auto;
}

/* ==========================================================================
   پیام خطا / راهنما / متن‌ها
   ========================================================================== */

.wbkb-sms-alert {
	margin-bottom: 16px;
	border-radius: 8px;
	background: #fef2f2;
	color: #b91c1c;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.6;
}

.wbkb-sms-alert[hidden],
.wbkb-sms-step[hidden],
.wbkb-sms-adminlogin-panel[hidden] {
	display: none;
}

/* ==========================================================================
   دکمه بازگشت به مرحله قبل
   ========================================================================== */

.wbkb-sms-back-btn {
	position: absolute !important;
	top: 16px;
	left: 16px;
	width: 32px !important;
	height: 32px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	border: none !important;
	border-radius: 8px !important;
	color: var(--wbkb-color-primary, #093c75) !important;
	cursor: pointer !important;
	transition: background .15s ease, color .15s ease;
}

.wbkb-sms-back-btn:hover,
.wbkb-sms-back-btn:focus {
	background: var(--wbkb-sms-input-bg) !important;
	color: var(--wbkb-color-primary, #093c75);
}

.wbkb-sms-back-btn svg {
	display: block;
}

/*
 * چون `.wbkb-sms-back-btn` خودش `display: flex !important` دارد (برای وسط‌چین
 * کردن آیکن)، قانون عمومی‌تر `[hidden] { display: none; }` بدون !important
 * روی این المان اثری نداشت (این‌جا واقعاً اتفاق افتاد: دکمه در مرحله اول هم
 * دیده می‌شد). به همین دلیل این المان یک قانون [hidden] اختصاصی با !important دارد.
 */
.wbkb-sms-back-btn[hidden] {
	display: none !important;
}

.wbkb-sms-label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 500;
	color: #374151;
}

.wbkb-sms-hint {
	margin: 0 0 16px;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--wbkb-sms-hint);
}

.wbkb-sms-strong {
	font-weight: 600;
	color: #1f2937;
}

/* ==========================================================================
   فیلدهای ورودی
   ========================================================================== */

/*
 * !important در سراسر این فایل روی input/button عمداً و لازم است: تم فعال
 * سایت (و گاهی خود المنتور) استایل پیش‌فرض خودش را روی تگ‌های <input>/<button>
 * با specificity برابر یا ترتیب بارگذاری بعد از ما اعمال می‌کند، بنابراین
 * بدون !important استایل ما دیده نمی‌شود (این باگ واقعی روی سایت مشاهده شد).
 */

.wbkb-sms-input {
	width: 100% !important;
	padding: 12px 16px !important;
	font-family: "iransans" !important;
	font-size: 16px !important;
	color: var(--wbkb-sms-input-text) !important;
	background: var(--wbkb-sms-input-bg) !important;
	border: 1.5px solid var(--wbkb-sms-input-border) !important;
	border-radius: var(--wbkb-sms-input-radius) !important;
	box-shadow: none !important;
	outline: none !important;
	appearance: none !important;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
}

.wbkb-sms-input::placeholder {
	color: #9ca3af !important;
}

.wbkb-sms-input:hover {
	border-color: var(--wbkb-sms-input-hover-border) !important;
}

.wbkb-sms-input:focus {
	background: var(--wbkb-sms-input-bg-focus) !important;
	border-color: var(--wbkb-sms-focus) !important;
	box-shadow: 0 0 0 3px var(--wbkb-sms-focus-ring) !important;
}

.wbkb-sms-mt {
	margin-top: 12px;
}

.wbkb-sms-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* ==========================================================================
   باکس‌های کد تایید
   ========================================================================== */

.wbkb-sms-otp-group {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 12px;
}

.wbkb-sms-otp-box {
	width: var(--wbkb-sms-otp-size) !important;
	height: var(--wbkb-sms-otp-size) !important;
	max-width: none !important;
	padding: 0 !important;
	text-align: center !important;
	font-family: "iransans" !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--wbkb-sms-input-text) !important;
	background: var(--wbkb-sms-input-bg) !important;
	border: 1.5px solid var(--wbkb-sms-input-border) !important;
	border-radius: var(--wbkb-sms-input-radius) !important;
	box-shadow: none !important;
	outline: none !important;
	appearance: none !important;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
}

.wbkb-sms-otp-box:hover {
	border-color: var(--wbkb-sms-input-hover-border) !important;
}

.wbkb-sms-otp-box:focus {
	background: var(--wbkb-sms-input-bg-focus) !important;
	border-color: var(--wbkb-sms-focus) !important;
	box-shadow: 0 0 0 3px var(--wbkb-sms-focus-ring) !important;
}

/* شمارنده ارسال دوباره — دقیقاً زیر باکس‌های کد، فقط یک متن ساده و خنثی */
.wbkb-sms-countdown {
	margin: 0 0 16px;
	text-align: center;
	font-size: 13.5px;
	font-variant-numeric: tabular-nums;
	color: var(--wbkb-sms-hint);
}

.wbkb-sms-countdown[hidden] {
	display: none;
}

/* ==========================================================================
   دکمه‌ها
   ========================================================================== */

.wbkb-sms-btn {
	position: relative !important;
	text-align: center !important;
	display: block !important;
	width: 100% !important;
	margin: 12px 0 0 !important;
	padding: 13px 16px !important;
	font-family: "iransans" !important;
	font-size: 14.5px !important;
	font-weight: normal !important;
	line-height: normal !important;
	border: none !important;
	border-radius: var(--wbkb-sms-btn-radius) !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: background .15s ease, transform .1s ease !important;
}

.wbkb-sms-btn:active {
	transform: translateY(1px) !important;
}

.wbkb-sms-btn-primary {
	background: var(--wbkb-sms-primary) !important;
	color: var(--wbkb-sms-primary-text) !important;
}

.wbkb-sms-btn-primary:hover,
.wbkb-sms-btn-primary:focus {
	background: var(--wbkb-sms-primary-hover) !important;
	color: var(--wbkb-sms-primary-text) !important;
}

.wbkb-sms-btn-primary:disabled {
	opacity: .6 !important;
	cursor: not-allowed !important;
}

.wbkb-sms-btn-secondary {
	background: var(--wbkb-sms-secondary) !important;
	color: var(--wbkb-sms-secondary-text) !important;
}

.wbkb-sms-btn-secondary:hover,
.wbkb-sms-btn-secondary:focus {
	background: var(--wbkb-sms-secondary-hover) !important;
	color: var(--wbkb-sms-secondary-text) !important;
}

.wbkb-sms-btn.is-loading {
	color: transparent !important;
	pointer-events: none !important;
}

.wbkb-sms-btn.is-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	animation: wbkb-sms-spin .7s linear infinite;
}

/* ==========================================================================
   لینک‌ها
   ========================================================================== */

.wbkb-sms-row {
	margin-top: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 13.5px;
}

.wbkb-sms-link {
	display: inline !important;
	width: auto !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: "iransans" !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	color: var(--wbkb-sms-link) !important;
	cursor: pointer !important;
}

.wbkb-sms-link:hover,
.wbkb-sms-link:focus {
	color: var(--wbkb-sms-link) !important;
	text-decoration: underline !important;
}

.wbkb-sms-link:disabled {
	color: #9ca3af !important;
	text-decoration: none !important;
	cursor: not-allowed !important;
}

.wbkb-sms-link-muted {
	color: var(--wbkb-sms-hint) !important;
}

.wbkb-sms-link-back {
	display: block !important;
	margin-top: 14px !important;
	font-size: 12.5px !important;
	color: var(--wbkb-sms-hint) !important;
}

/* «کد را دریافت نکردید؟ دوباره ارسال کنید» — پایین‌ترین ردیف، متن ساده + لینک */
.wbkb-sms-resend-line {
	margin: 16px 0 0;
	text-align: center;
	font-size: 13.5px;
	color: var(--wbkb-sms-hint);
}

.wbkb-sms-resend-line .wbkb-sms-link {
	font-weight: 600 !important;
	margin-right: 4px !important;
}

/* ==========================================================================
   صفحه موفقیت
   ========================================================================== */

.wbkb-sms-success[hidden] {
	display: none;
}

.wbkb-sms-success {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(2px);
}

.checkmark {
  margin-bottom: 3.5em;
  position: relative;
  border-radius: 50%;
  border:1px solid #5cb85c;
  width: 7em;
  height: 7em;
}
.checkmark.draw:after {
  animation-duration: 800ms;
  animation-timing-function: ease;
  animation-name: checkmark;
  transform: scaleX(-1) rotate(135deg);
}
.checkmark:after {
  opacity: 1;
  height: 3.5em;
  width: 1.75em;
  transform-origin: left top;
  border-right: 3px solid #5cb85c;
  border-top: 3px solid #5cb85c;
  content: "";
  left: 1.75em;
  top: 3.5em;
  position: absolute;
}

.wbkb-sms-success-text {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 500;
	color: #5cb85c;
}

/* ==========================================================================
   صفحات قفل‌شده
   ========================================================================== */

.wbkb-sms-locked-notice {
	max-width: 28rem;
	margin: 4rem auto;
	text-align: center;
	font-size: 16px;
	line-height: 2;
	color: #6b7280;
}

/* ==========================================================================
   تب‌های صفحه ورود وردپرس (wp-login.php)
   ========================================================================== */

.wbkb-sms-adminlogin {
	max-width: 28rem;
	margin-inline: auto;
	font-family: "iransans", Vazirmatn, Tahoma, Arial, sans-serif;
}

.wbkb-sms-adminlogin-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
}

.wbkb-sms-adminlogin-tab {
	flex: 1;
	border: 1px solid #d1d5db;
	background: #ffffff;
	border-radius: 8px;
	padding: 8px 12px;
	font-family: "iransans";
	font-size: 14px;
	font-weight: 600;
	color: #4b5563;
	cursor: pointer;
}

.wbkb-sms-adminlogin-tab.is-active {
	background: #0f2a4a;
	border-color: #0f2a4a;
	color: #ffffff;
}

.wbkb-sms-adminlogin-panel {
	background: #ffffff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	padding: 16px;
}

/*
 * .wbkb-modal-dialog (کلاس مشترک سیستم مودال افزونه) برای سنتر کردن خودش از
 * transform استفاده می‌کند؛ اگر انیمیشن لرزش/بوردر رنگی مستقیماً روی همین
 * المان اجرا شود، آن transform موقتاً بازنویسی و بعد از پایان انیمیشن به‌طور
 * ناگهانی برمی‌گردد (باگ «تکان‌خوردن و جابه‌جایی مودال»). راه‌حل: خودِ
 * .wbkb-modal-dialog فقط یک پوسته شفاف برای موقعیت‌دهی می‌ماند و ظاهر واقعی
 * کارت (پس‌زمینه، پدینگ، حاشیه هدف لرزش) به یک div فرزند (.wbkb-sms-dialog-inner)
 * منتقل شده که هیچ transform مخصوص به خودش ندارد.
 */
.wbkb-sms-modal .wbkb-modal-dialog {
	background: transparent;
	box-shadow: none;
}

.wbkb-sms-dialog-inner {
	background: #ffffff;
	border-radius: 18px;
	padding: 28px 24px;
	border: 2px solid transparent;
}

@media (min-width: 640px) {
	.wbkb-sms-dialog-inner {
		padding: 34px 30px;
	}
}

/* ==========================================================================
   انیمیشن‌ها — لرزش هنگام خطا، بوردر سبز/قرمز، اسپینر، تیک موفقیت
   ========================================================================== */

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

.wbkb-sms-shake {
	animation: wbkb-sms-shake .5s;
}

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

@keyframes wbkb-sms-border-success {
	0%   { border-color: transparent; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
	25%  { border-color: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .18); }
	100% { border-color: transparent; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

@keyframes wbkb-sms-border-error {
	0%   { border-color: transparent; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
	25%  { border-color: #ef4444; box-shadow: 0 0 0 4px rgba(239, 68, 68, .18); }
	100% { border-color: transparent; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.wbkb-sms-border-success {
	animation: wbkb-sms-border-success 1.2s ease;
}

.wbkb-sms-border-error {
	animation: wbkb-sms-border-error 1.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.wbkb-sms-shake,
	.wbkb-sms-border-success,
	.wbkb-sms-border-error,
	.wbkb-sms-success-check {
		animation: none;
	}
}

@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 1.75em;
    opacity: 1;
  }
  40% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
  100% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
}