/* پیام — فرم ورود با کد یکبارمصرف + مودال.
   رنگ/گردی/فونت از پنل می‌آیند؛ این فایل ویرایش نمی‌شود. */

/* --pa-primary / --pa-accent / --pa-radius / --pa-font از پنل تنظیمات تزریق می‌شوند
   (Payam_Auth::theme_css با wp_add_inline_style). این فایل هیچ‌وقت ویرایش نمی‌شود. */

.payam-auth {
	--ga-teal: var(--pa-primary, #0e4b4c);
	--ga-green: var(--pa-accent, #8eb27a);
	--ga-r: var(--pa-radius, 8px);
	--ga-ink: #252525;
	--ga-line: #ebebeb;
	--ga-soft: #fbfbfb;
	--ga-mut: #888888;
	--ga-err: #c0392b;
	--ga-ease: cubic-bezier(0.22, 1, 0.36, 1);

	direction: rtl;
	font-family: var(--pa-font, inherit);
	color: var(--ga-ink);
	width: 100%;
	max-width: 380px;
	margin-inline: auto;
}

/* لوگوی اختیاری بالای فرم */
.payam-f-logo {
	margin: 0 0 24px;
	text-align: center;
	animation: payam-rise 0.5s var(--ga-ease) both;
}

.payam-f-logo img {
	max-width: 132px;
	height: auto;
	display: inline-block;
}

/* ───────── مراحل ───────── */

.payam-f-step { display: none; }

.payam-f-step.is-active {
	display: block;
	animation: payam-step-in 0.5s var(--ga-ease) both;
}

/* بچه‌ها با تأخیر پلکانی می‌آیند — حسِ «چیده‌شدن» به‌جای ظاهرشدن یکجا. */
.payam-f-step.is-active > * {
	animation: payam-rise 0.55s var(--ga-ease) both;
}

.payam-f-step.is-active > *:nth-child(1) { animation-delay: 0.04s; }
.payam-f-step.is-active > *:nth-child(2) { animation-delay: 0.11s; }
.payam-f-step.is-active > *:nth-child(3) { animation-delay: 0.18s; }
.payam-f-step.is-active > *:nth-child(4) { animation-delay: 0.25s; }
.payam-f-step.is-active > *:nth-child(5) { animation-delay: 0.32s; }

@keyframes payam-step-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes payam-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* ───────── تیتر ───────── */

.payam-f-head { margin-bottom: 28px; }

.payam-f-title {
	margin: 0 0 10px;
	font-size: 26px;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ga-teal);
}

.payam-f-title span {
	color: var(--ga-green);
	font-weight: 300;
	margin-inline: 2px;
}

.payam-f-title--center { text-align: center; }

.payam-f-sub {
	margin: 0;
	font-size: 14px;
	line-height: 2;
	color: var(--ga-mut);
}

.payam-f-sub--center { text-align: center; }

.payam-f-phone-echo {
	display: inline-block;
	color: var(--ga-ink);
	font-weight: 700;
	letter-spacing: 0.03em;
}

/* ───────── ورودی شماره ───────── */

.payam-f-field { position: relative; }

.payam-f-label {
	display: block;
	margin-bottom: 10px;
	font-size: 13px;
	color: var(--ga-mut);
	transition: color 0.25s;
}

.payam-f-field:focus-within .payam-f-label { color: var(--ga-teal); }

.payam-f-input {
	width: 100%;
	height: 54px;
	padding: 0 16px;
	border: 1.5px solid var(--ga-line);
	border-radius: var(--ga-r);
	background: #fff;
	color: var(--ga-ink);
	font: inherit;
	font-size: 17px;
	letter-spacing: 0.12em;
	text-align: center;
	transition: border-color 0.3s var(--ga-ease), box-shadow 0.3s var(--ga-ease), transform 0.3s var(--ga-ease);
}

.payam-f-input::placeholder {
	color: #cfd4d3;
	letter-spacing: 0.1em;
}

.payam-f-input:hover { border-color: #d3d9d7; }

.payam-f-input:focus {
	outline: none;
	border-color: var(--ga-teal);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--ga-teal) 9%, transparent);
	transform: translateY(-1px);
}

/* ───────── مربع‌های کد ───────── */

.payam-f-otp {
	position: relative;
	direction: ltr; /* کد چپ‌به‌راست خوانده می‌شود */
	margin-bottom: 4px;
}

/* ورودی واقعی نامرئی روی مربع‌ها — paste، autofill پیامک و کیبورد موبایل سالم می‌ماند. */
.payam-f-otp-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	border: 0;
	padding: 0;
	font-size: 16px; /* زیر ۱۶ باعث زوم iOS می‌شود */
	cursor: pointer;
	z-index: 2;
}

.payam-f-otp-cells {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.payam-f-cell {
	position: relative;
	flex: 1 1 0;
	aspect-ratio: 1;
	max-width: 62px;
	display: grid;
	place-items: center;
	border: 1.5px solid var(--ga-line);
	border-radius: calc(var(--ga-r) + 2px);
	background: var(--ga-soft);
	font-size: 24px;
	font-weight: 700;
	color: var(--ga-ink);
	transition:
		border-color 0.3s var(--ga-ease),
		background 0.3s var(--ga-ease),
		transform 0.35s var(--ga-ease),
		box-shadow 0.3s var(--ga-ease);
}

/* رقم داخل مربع — با یک «پاپ» می‌نشیند */
.payam-f-cell b {
	display: block;
	font-weight: inherit;
	line-height: 1;
}

.payam-f-cell.is-filled {
	border-color: var(--ga-teal);
	background: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--ga-teal) 12%, transparent);
}

.payam-f-cell.is-filled b { animation: payam-pop 0.32s var(--ga-ease) both; }

@keyframes payam-pop {
	0%   { opacity: 0; transform: scale(0.5) translateY(6px); }
	60%  { transform: scale(1.12) translateY(0); }
	100% { opacity: 1; transform: scale(1); }
}

/* مربع فعال — نفس می‌کشد و یک کاراتِ چشمک‌زن دارد */
.payam-f-cell.is-active {
	border-color: var(--ga-teal);
	background: #fff;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--ga-teal) 9%, transparent);
}

.payam-f-cell.is-active::after {
	content: "";
	position: absolute;
	width: 2px;
	height: 26px;
	border-radius: 2px;
	background: var(--ga-teal);
	animation: payam-caret 1.1s steps(1, end) infinite;
}

.payam-f-cell.is-active.is-filled::after { display: none; }

@keyframes payam-caret {
	0%, 45%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}

/* خطا — کل ردیف تکان می‌خورد */
.payam-f-otp.is-error .payam-f-otp-cells { animation: payam-shake 0.5s var(--ga-ease) both; }

.payam-f-otp.is-error .payam-f-cell {
	border-color: var(--ga-err);
	background: #fff;
	box-shadow: none;
	transform: none;
}

@keyframes payam-shake {
	0%, 100% { transform: translateX(0); }
	15%      { transform: translateX(-9px); }
	30%      { transform: translateX(7px); }
	45%      { transform: translateX(-5px); }
	60%      { transform: translateX(3px); }
	80%      { transform: translateX(-1px); }
}

/* موفقیت — مربع‌ها موج‌وار سبز می‌شوند (تأخیر از --i) */
.payam-f-otp.is-ok .payam-f-cell {
	border-color: var(--ga-green);
	color: var(--ga-green);
	animation: payam-cell-ok 0.5s var(--ga-ease) both;
	animation-delay: calc(var(--i) * 55ms);
}

@keyframes payam-cell-ok {
	50%  { transform: translateY(-8px) scale(1.06); }
	100% { transform: translateY(-2px); }
}

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

.payam-f-btn {
	position: relative;
	display: block;
	width: 100%;
	height: 54px;
	margin-top: 22px;
	padding: 0;
	border: 0;
	border-radius: var(--ga-r);
	background: var(--ga-teal);
	color: #fff;
	font: inherit;
	font-size: 15px;
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.3s var(--ga-ease), box-shadow 0.3s var(--ga-ease), opacity 0.2s;
}

.payam-f-btn > span {
	position: relative;
	z-index: 1;
	transition: opacity 0.2s;
}

/* براقی که از راست رد می‌شود */
.payam-f-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.16), transparent);
	transform: translateX(-100%);
	transition: transform 0.7s var(--ga-ease);
}

.payam-f-btn:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px color-mix(in srgb, var(--ga-teal) 24%, transparent);
}

.payam-f-btn:hover:not(:disabled)::before { transform: translateX(100%); }

.payam-f-btn:active:not(:disabled) { transform: translateY(0) scale(0.99); }

.payam-f-btn:disabled { opacity: 0.5; cursor: default; }

.payam-f-btn.is-loading > span { opacity: 0; }

.payam-f-btn.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 20px;
	height: 20px;
	border: 2px solid rgb(255 255 255 / 0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: payam-spin 0.65s linear infinite;
}

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

/* دکمه‌های متنی */
.payam-f-edit,
.payam-f-resend {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: var(--ga-teal);
	cursor: pointer;
	transition: opacity 0.2s, color 0.2s;
}

.payam-f-edit {
	position: relative;
	margin-inline-start: 6px;
}

/* زیرخطی که از راست باز می‌شود */
.payam-f-edit::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -3px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.35s var(--ga-ease);
}

.payam-f-edit:hover::after { transform: scaleX(1); }

.payam-f-resend {
	display: block;
	margin: 18px auto 0;
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

.payam-f-resend:hover:not(:disabled) { opacity: 0.7; }

.payam-f-resend:disabled {
	color: var(--ga-mut);
	text-decoration: none;
	cursor: default;
}

.payam-f-timer {
	display: inline-block;
	min-width: 2.4em;
	font-variant-numeric: tabular-nums;
}

/* ───────── پیام‌ها ───────── */

.payam-f-msg {
	min-height: 1.6em;
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.8;
	text-align: center;
}

.payam-f-msg:not(:empty) { animation: payam-msg-in 0.35s var(--ga-ease) both; }

.payam-f-msg.is-error { color: var(--ga-err); }
.payam-f-msg.is-info  { color: var(--ga-teal); }

@keyframes payam-msg-in {
	from { opacity: 0; transform: translateY(-5px); }
	to   { opacity: 1; transform: none; }
}

/* ───────── مرحله‌ی موفقیت ───────── */

.payam-f-step[data-step="done"] { text-align: center; padding-block: 24px 8px; }

.payam-f-done-icon {
	width: 76px;
	height: 76px;
	margin: 0 auto 22px;
	color: var(--ga-green);
}

.payam-f-done-icon svg { width: 100%; height: 100%; display: block; }

/* حلقه دور می‌زند، بعد تیک کشیده می‌شود */
.payam-f-done-ring {
	stroke-dasharray: 151;
	stroke-dashoffset: 151;
	animation: payam-draw 0.6s var(--ga-ease) 0.1s forwards;
}

.payam-f-done-check {
	stroke-dasharray: 34;
	stroke-dashoffset: 34;
	animation: payam-draw 0.35s var(--ga-ease) 0.55s forwards;
}

@keyframes payam-draw { to { stroke-dashoffset: 0; } }

/* حالت لاگین‌شده‌ی شورت‌کد */
.payam-auth--logged-in { text-align: center; padding-block: 28px; }
.payam-auth--logged-in a { color: var(--ga-teal); }

/* صفحه‌ی my-account مهمان */
.payam-auth-page { padding: 100px 20px 88px; }

/* ───────── مودال ───────── */

/* متغیرها را اینجا هم تعریف می‌کنیم: کروم مودال بیرون .payam-auth است و
   متغیرهای CSS فقط رو به پایین ارث می‌رسند، پس --ga-* از فرمِ داخلش نمی‌رسد. */
.payam-modal {
	position: fixed;
	inset: 0;
	z-index: 1200;
	--ga-teal: var(--pa-primary, #0e4b4c);
	--ga-green: var(--pa-accent, #8eb27a);
	--ga-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* الزامی: display کلاس‌ها به قانون [hidden] مرورگر می‌بازد و اورلیِ نامرئی کلیک‌ها را می‌خورد. */
.payam-modal[hidden] { display: none !important; }

.payam-modal__scrim {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--ga-teal) 55%, transparent);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.payam-modal.is-open .payam-modal__scrim { opacity: 1; }

.payam-modal__dialog {
	position: absolute;
	inset-inline: 0;
	top: 50%;
	margin-inline: auto;
	width: min(432px, calc(100% - 32px));
	padding: 44px 36px 36px;
	background: #fff;
	border-radius: 14px;
	/* Soft, layered ambient shadow + a faint 1px ring — gentle, but lifts the
	   white card off a white page on every edge. */
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--ga-teal) 5%, transparent),
		0 2px 8px color-mix(in srgb, var(--ga-teal) 6%, transparent),
		0 12px 32px color-mix(in srgb, var(--ga-teal) 9%, transparent),
		0 30px 64px color-mix(in srgb, var(--ga-teal) 11%, transparent);
	transform: translateY(-50%) translateY(24px) scale(0.97);
	opacity: 0;
	transition:
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.3s ease;
}

.payam-modal.is-open .payam-modal__dialog {
	transform: translateY(-50%) scale(1);
	opacity: 1;
}

/* در RTL دکمه‌ی بستن سمت چپ می‌نشیند (inline-end)، نه روی شروع تیتر. */
.payam-modal__x {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: none;
	font-size: 22px;
	line-height: 1;
	color: var(--gray-500, #888);
	cursor: pointer;
	transition: background 0.25s, color 0.25s, transform 0.35s var(--ga-ease);
}

.payam-modal__x:hover {
	background: var(--gray-50, #f4f5f5);
	color: var(--gray-900, #252525);
	transform: rotate(90deg);
}

.payam-modal-lock { overflow: hidden; }

/* موبایل: باتم‌شیت — همان الگوی سبد کناری */
@media (max-width: 767px) {
	.payam-modal__dialog {
		top: auto;
		bottom: 0;
		width: 100%;
		border-radius: 20px 20px 0 0;
		padding: 44px 20px calc(28px + env(safe-area-inset-bottom)); /* جا برای دستگیره + × */
		transform: translateY(100%);
		opacity: 1;
		transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	}

	.payam-modal.is-open .payam-modal__dialog { transform: translateY(0); }

	.payam-modal__dialog::before {
		content: "";
		position: absolute;
		top: 10px;
		inset-inline: 0;
		margin-inline: auto;
		width: 44px;
		height: 4px;
		border-radius: 2px;
		background: var(--gray-100, #ebebeb);
	}

	.payam-f-title { font-size: 22px; }
	.payam-f-otp-cells { gap: 8px; }
	.payam-f-cell { font-size: 21px; border-radius: 9px; }
}

/* ───────── کاهش حرکت ───────── */

@media (prefers-reduced-motion: reduce) {
	.payam-auth *,
	.payam-modal * {
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		transition-duration: 0.01ms !important;
	}
}