/*
 * RahkarTheme — OTP login form.
 *
 * Loaded ONLY on /my-account/ (when logged-out) and on posts/pages
 * containing the [rahkar_otp_login] shortcode. See inc/otp-login.php +
 * the rahkar_feature_assets registry.
 *
 * Kept lean — under ~3KB unminified. Uses theme.json tokens via the
 * --wp--preset--color--primary custom property fallbacks so colors
 * track the active palette without hard-coding.
 */

.rahkar-account-login{display:flex;justify-content:center;padding:24px 0}

/* ----------------------------------------------------------------------
 *  Dedicated /my-account/ login screen (logged-out only).
 *  Loaded via inc/account-login-template.php which bypasses the FSE
 *  header/footer entirely — these rules carry the entire page chrome.
 * ---------------------------------------------------------------------- */
body.rahkar-login-screen{
	background:#f6f7f9;
	min-height:100vh;
	min-height:100dvh;
}
.rahkar-login{
	min-height:100vh;
	min-height:100dvh;
	display:flex;
	flex-direction:column;
}
.rahkar-login__bar{
	display:grid;
	grid-template-columns:1fr auto 1fr;
	align-items:center;
	gap:12px;
	min-height:68px;
	padding:0 var(--rh-pad-x,clamp(12px,3vw,28px));
	background:#fff;
	border-bottom:1px solid #ececef;
}
.rahkar-login__back{
	justify-self:start;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:40px;
	height:40px;
	color:#3f3f46;
	text-decoration:none;
	border-radius:var(--wp--custom--radius--md);
	transition:background-color .12s,color .12s;
}
.rahkar-login__back:hover{background:#f4f4f5;color:#111}
.rahkar-login__logo{justify-self:center;display:inline-flex;align-items:center}
.rahkar-login__spacer{justify-self:end;width:40px;height:40px}
.rahkar-login__logo .rh-logo{
	display:inline-flex;
	align-items:center;
	text-decoration:none;
	color:inherit;
	font-weight:var(--wp--custom--fw--strong);
}
.rahkar-login__logo .rh-logo__img,
.rahkar-login__logo .rh-logo svg{
	max-height:40px;
	width:auto;
}
@media (max-width:900px){
	.rahkar-login__bar{min-height:56px}
	.rahkar-login__back,
	.rahkar-login__spacer{width:36px;height:36px}
	.rahkar-login__logo .rh-logo__img,
	.rahkar-login__logo .rh-logo svg{max-height:32px}
}
.rahkar-login__main{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:32px 18px;
}
.rahkar-login__main .rh-otp-login{margin:0}

.rh-otp-login{
	max-width:420px;
	width:100%;
	background:#fff;
	border:1px solid #e5e7eb;
	border-radius:var(--wp--custom--radius--md);
	padding:24px 22px;
	box-shadow:0 1px 2px rgba(0,0,0,.03);
}

.rh-otp-login__title{margin:0 0 6px;font-size:1.2rem;font-weight:var(--wp--custom--fw--strong)}
.rh-otp-login__lead{margin:0 0 18px;color:#52525b;font-size:.92rem;line-height:1.7}

.rh-otp-step{display:none}
.rh-otp-step[data-active]{display:block}

.rh-otp-label{display:block;font-size:.88rem;font-weight:var(--wp--custom--fw--strong);margin-bottom:6px}

.rh-otp-input{
	width:100%;
	box-sizing:border-box;
	font:inherit;
	padding:10px 12px;
	border:1px solid #d4d4d8;
	border-radius:var(--wp--custom--radius--sm);
	background:#fff;
	transition:border-color .12s,box-shadow .12s;
}
.rh-otp-input:focus{
	outline:none;
	border-color:var(--wp--preset--color--primary,#0a66c2);
	box-shadow:0 0 0 3px color-mix(in srgb,var(--wp--preset--color--primary,#0a66c2) 15%,transparent);
}
.rh-otp-input.is-error{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.12)}

.rh-otp-input--code{
	text-align:center;
	font-size:1.6rem;
	letter-spacing:.4em;
	font-variant-numeric:tabular-nums;
	padding:12px 8px;
}

.rh-otp-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:var(--wp--custom--button--gap,8px);
	font:inherit;
	cursor:pointer;
	border:1px solid transparent;
	border-radius:var(--wp--custom--button--radius,10px);
	padding:0 var(--wp--custom--button--px--md,20px);
	min-height:var(--wp--custom--button--h--md,44px);
	background:transparent;
	color:inherit;
	transition:background-color .12s,opacity .12s;
}
.rh-otp-btn:disabled{opacity:.55;cursor:not-allowed}

.rh-otp-btn--primary{
	box-sizing:border-box;
	width:100%;
	margin-top:12px;
	background:var(--wp--preset--color--primary,#0a66c2);
	color:#fff;
	font-weight:var(--wp--custom--button--fw,600);
	font-size:var(--wp--custom--button--fs--md,0.9375rem);
}
.rh-otp-btn--primary:hover:not(:disabled){filter:brightness(1.08)}

.rh-otp-btn--link{
	min-height:auto;
	padding:6px 10px;
	color:var(--wp--preset--color--primary,#0a66c2);
	font-size:.86rem;
	font-weight:var(--wp--custom--fw--base);
	text-decoration:underline;
	text-underline-offset:3px;
}
.rh-otp-btn--link:hover:not(:disabled){text-decoration-thickness:2px}

.rh-otp-actions{
	display:flex;justify-content:space-between;align-items:center;
	margin-top:8px;gap:8px;flex-wrap:wrap;
}

.rh-otp-sent{margin:0 0 14px;color:#3f3f46;font-size:.92rem;line-height:1.7}
.rh-otp-sent strong{color:#111;margin:0 4px}

.rh-otp-msg{
	margin-top:10px;font-size:.86rem;line-height:1.6;
	min-height:1.2em;
}
.rh-otp-msg[data-tone="error"]{color:#b91c1c}
.rh-otp-msg[data-tone="success"]{color:#15803d}

.rh-otp-fallback{
	margin:18px 0 0;padding-top:14px;
	border-top:1px dashed #e5e7eb;
	text-align:center;font-size:.85rem;color:#71717a;
}
.rh-otp-fallback a{color:var(--wp--preset--color--primary,#0a66c2);text-decoration:none}
.rh-otp-fallback a:hover{text-decoration:underline}

.rh-otp-already-in{text-align:center;padding:18px;background:#f4f4f5;border-radius:var(--wp--custom--radius--sm)}

/* Busy-state spinner is provided globally by assets/css/loading.css. */