/* Site-wide phone+OTP login sheet. Reuses the OTP box look from checkout.css
   (duplicated minimally here since checkout.css only loads on the checkout page). */

.yef-login-sheet { position: fixed; inset: 0; z-index: 300; }
.yef-login-sheet[hidden] { display: none; }
.yef-login-sheet__scrim { position: absolute; inset: 0; background: rgba(17,17,17,.45); }
.yef-login-sheet__panel {
	position: absolute; inset-inline: 0; bottom: 0; background: #fff;
	border-radius: 18px 18px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
	max-width: 480px; margin-inline: auto;
	box-shadow: 0 -6px 24px rgba(0,0,0,.12);
}
.yef-login-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.yef-login-sheet__head h2 { margin: 0; font-size: 1.0625rem; }
.yef-login-sheet__step label { font-size: .8125rem; font-weight: 600; display: block; margin-bottom: 6px; }
.yef-login-sheet__step input[type="tel"] {
	width: 100%; box-sizing: border-box; border: 1px solid var(--wp--preset--color--line, #EAEAEA);
	border-radius: 16px; padding: 0 16px; height: 56px; font: inherit; font-size: 1rem; margin-bottom: 16px;
}

.yef-otp-hint { color: var(--wp--preset--color--muted, #6E6E6E); font-size: .875rem; margin: 0 0 18px; }
.yef-otp-boxes { display: flex; gap: 12px; justify-content: center; margin-bottom: 16px; }
.yef-otp-box {
	width: 60px; max-width: 20vw; height: 60px; box-sizing: border-box; padding: 0; text-align: center;
	font: inherit; font-size: 1.5rem; font-weight: 800;
	border: 1.5px solid var(--wp--preset--color--line, #EAEAEA); border-radius: 16px;
	background: #fff; -webkit-appearance: none; appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.yef-otp-box:focus {
	outline: none; border-color: var(--wp--preset--color--accent, #66c7cc);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent, #66c7cc) 22%, transparent);
}
.yef-otp-box.is-error { border-color: #c0392b; }
.yef-otp-status { min-height: 1.3em; font-size: .8125rem; color: var(--wp--preset--color--muted, #6E6E6E); margin: 0 0 8px; text-align: center; }
.yef-otp-status.is-error { color: #c0392b; }
.yef-otp-resend {
	display: block; margin: 0 auto 14px; background: none; border: 0; font: inherit;
	font-size: .8125rem; font-weight: 700; color: var(--wp--preset--color--ink, #111); cursor: pointer;
}
.yef-otp-resend:disabled { color: var(--wp--preset--color--muted, #6E6E6E); cursor: default; }

/* ---- standalone "تسجيل الدخول / الاشتراك" page ----
   Same two steps as the sheet, laid out as a centred card inside the normal
   page chrome instead of a bottom sheet. */
.yef-login-page { direction: rtl; padding: 24px 16px 48px; }
.yef-login-page__card {
	max-width: 420px; margin-inline: auto; background: #fff;
	border: 1px solid var(--wp--preset--color--line, #EAEAEA);
	border-radius: 16px; padding: 26px 22px;
}
.yef-login-page__title { font-size: 1.25rem; margin: 0 0 8px; }
.yef-login-page__lead {
	color: var(--wp--preset--color--muted, #6E6E6E);
	font-size: .875rem; line-height: 1.6; margin: 0 0 22px;
}
.yef-login-page .yef-login-sheet__step label { font-size: .8125rem; font-weight: 600; display: block; margin-bottom: 6px; }
.yef-login-page .yef-login-sheet__step input[type="tel"] {
	width: 100%; box-sizing: border-box; border: 1px solid var(--wp--preset--color--line, #EAEAEA);
	border-radius: 16px; padding: 0 16px; height: 56px; font: inherit; font-size: 1rem; margin-bottom: 16px;
}

.yef-login-back {
	display: block; margin: 14px auto 0; background: none; border: 0; font: inherit;
	font-size: .8125rem; color: var(--wp--preset--color--muted, #6E6E6E);
	text-decoration: underline; cursor: pointer;
}

@media (max-width: 600px) {
	.yef-login-page__card { border: 0; padding: 8px 0 0; }
}