/**
 * ParsAccess auth (login + signup) — two-column glass: form + inline-SVG glass
 * key with trust benefits. Fields reuse .pa-field from parsaccess-ui.css.
 * Loaded on the logged-out account page only. @package parsaccess
 */

/* Reset the legacy .pa-auth card rules in main.css (max-inline-size:460px,
   surface bg/border) — that older login skin still targets the same class and,
   left un-reset, caps this wrapper to 460px and pins it to the RTL start. */
.pa-auth { position: relative; min-height: calc(100vh - 220px); display: flex; align-items: center; justify-content: center; padding: 32px 16px 56px; max-inline-size: none; inline-size: 100%; background: none; border: 0; border-radius: 0; }
.pa-pane { display: none; width: 100%; }
.pa-pane.active { display: block; }

.pa-auth-grid {
	display: grid;
	grid-template-columns: 1.08fr 1fr;
	max-width: 1000px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: var(--pa-radius-xl);
}

/* ---- form side (RTL start / right) ---- */
.pa-auth-form { padding: clamp(26px, 4vw, 46px); display: flex; flex-direction: column; }
.pa-auth-logo { margin-block-end: 20px; }
.pa-auth-logo img { height: 52px; width: auto; }
.pa-auth-form h1 { font-family: var(--font-display, inherit); font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--pa-text); margin: 0; letter-spacing: -.01em; }
.pa-auth-sub { margin: 8px 0 24px; color: var(--pa-text-muted); font-size: 14.5px; }
.pa-auth-note { margin: 4px 0 8px; font-size: 12.5px; color: var(--pa-text-muted); }

.pa-auth-fields { display: flex; flex-direction: column; gap: 16px; }
.pa-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-block-start: -2px; }
.pa-auth-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--pa-text-muted); cursor: pointer; }
.pa-auth-check input { width: 18px; height: 18px; accent-color: var(--pa-teal); }
.pa-auth-terms { align-items: flex-start; margin-block: 2px; }
.pa-auth-terms input { margin-block-start: 2px; flex: none; }
.pa-auth-terms a, .pa-auth-forgot { color: var(--pa-teal-strong); text-decoration: none; }
.pa-auth-forgot { font-size: 13px; }
.pa-auth-submit { width: 100%; margin-block-start: 6px; }
.pa-auth-switch { margin-block-start: 20px; font-size: 13.5px; color: var(--pa-text-muted); text-align: center; border: 0; padding: 0; }
.pa-switch-link { border: 0; background: none; color: var(--pa-teal-strong); font: inherit; font-weight: 700; cursor: pointer; }

/* ---- illustration side (RTL end / left) ---- */
.pa-auth-art {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	padding: clamp(26px, 4vw, 46px);
	text-align: center;
	background: linear-gradient(150deg, rgba(142, 233, 230, .30), rgba(169, 199, 255, .22) 46%, rgba(185, 169, 242, .28));
	border-inline-start: 1px solid var(--pa-glass-border);
}
[data-theme="dark"] .pa-auth-art { background: linear-gradient(150deg, rgba(90, 224, 226, .12), rgba(113, 109, 224, .16)); }
.pa-auth-key { width: min(230px, 60%); margin-block-end: 14px; filter: drop-shadow(0 18px 34px rgba(58, 72, 130, .22)); }
.pa-auth-key svg { width: 100%; height: auto; }
.pa-auth-art h2 { font-family: var(--font-display, inherit); font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; color: var(--pa-text); margin: 0; line-height: 1.5; text-wrap: balance; }
.pa-auth-art p { margin: 6px 0 20px; font-size: 13.5px; color: var(--pa-text-muted); max-width: 30ch; line-height: 1.8; }
.pa-auth-benefits { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pa-auth-benefits span { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--pa-text); }
.pa-auth-benefits svg { width: 24px; height: 24px; fill: none; stroke: var(--pa-teal-strong); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- form-level message + OTP hint ---- */
.pa-auth-msg { margin: 2px 0 -6px; padding: 10px 12px; border-radius: var(--pa-radius-md); background: var(--pa-danger-tint); color: var(--pa-danger); font-size: 13px; font-weight: 600; }
.pa-auth-otphint { margin: -4px 0 0; font-size: 12px; color: var(--pa-text-muted); text-align: center; }
.pa-auth-passfield[hidden], .pa-auth-emailonly[hidden], .pa-auth-otphint[hidden] { display: none; }

/* ---- OTP code-entry step ---- */
.pa-otp-step[hidden] { display: none; }
.pa-otp-step { display: flex; flex-direction: column; gap: 4px; }
.pa-otp-back { align-self: flex-start; border: 0; background: none; color: var(--pa-text-muted); font: inherit; font-size: 13px; cursor: pointer; padding: 0 0 6px; }
.pa-otp-back:hover { color: var(--pa-teal-strong); }
.pa-otp-h { font-family: var(--font-display, inherit); font-size: 20px; font-weight: 800; color: var(--pa-text); margin: 0; }
.pa-otp-sub { margin: 6px 0 18px; color: var(--pa-text-muted); font-size: 13.5px; line-height: 1.8; }
.pa-otp-sub b { color: var(--pa-text); font-weight: 800; }
.pa-otp-inputs { display: flex; gap: 10px; justify-content: center; }
.pa-otp-digit {
	width: 48px; height: 56px; text-align: center;
	border: 1.5px solid var(--pa-line); border-radius: var(--pa-radius-md);
	background: var(--pa-surface); color: var(--pa-text);
	font: inherit; font-size: 22px; font-weight: 800;
}
.pa-otp-digit:focus { outline: none; border-color: var(--pa-teal); box-shadow: 0 0 0 3px var(--pa-ok-tint); }
.pa-otp-msg { min-height: 18px; margin: 12px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--pa-danger); text-align: center; }
.pa-otp-verify { width: 100%; margin-block-start: 4px; }
.pa-otp-resend { margin: 14px 0 0; font-size: 12.5px; color: var(--pa-text-muted); text-align: center; }
.pa-otp-resend-btn { border: 0; background: none; color: var(--pa-teal-strong); font: inherit; font-weight: 700; cursor: pointer; }
.pa-otp-resend-btn:disabled { color: var(--pa-text-muted); cursor: default; }
.pa-otp-timer { color: var(--pa-text-muted); }

/* ---- add-phone step (email login/signup with no verified phone) ---- */
.pa-addphone-step[hidden] { display: none; }
.pa-addphone-step { display: flex; flex-direction: column; gap: 4px; }
.pa-addphone-step .pa-field { margin-block: 6px 2px; }
.pa-addphone-msg { min-height: 18px; margin: 8px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--pa-danger); }
.pa-addphone-submit { width: 100%; margin-block-start: 6px; }

@media (max-width: 380px) {
	.pa-otp-digit { width: 42px; height: 50px; font-size: 19px; }
	.pa-otp-inputs { gap: 7px; }
}

/* ---- responsive: form-only; illustration collapses to a slim benefits row ---- */
@media (max-width: 860px) {
	.pa-auth-grid { grid-template-columns: 1fr; }
	.pa-auth-art { order: 2; border-inline-start: 0; border-block-start: 1px solid var(--pa-glass-border); padding: 20px; }
	.pa-auth-key, .pa-auth-art h2, .pa-auth-art p { display: none; }
	.pa-auth-benefits { gap: 24px; }
	.pa-auth-benefits span { flex-direction: row; }
}
@media (max-width: 480px) {
	.pa-auth { padding-block: 18px 40px; }
	.pa-auth-benefits { gap: 16px; }
}