/* ====================================================================
 * Sign in / sign up — the dialog, and the canonical account page
 * --------------------------------------------------------------------
 * The dialog is <dialog>, so the browser owns focus trapping, page
 * inertness, Escape, and the top layer. ::backdrop is the page behind.
 * ==================================================================== */

.alrasly-auth {
	inline-size: min(26rem, calc(100vw - 2rem));
	padding: 1.75rem 1.6rem 1.6rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--wp--custom--radius--card, 12px);
	background-color: var(--wp--preset--color--ground-alt, #150F35);
	color: var(--wp--preset--color--text, #F4F1FF);
	font-family: var(--wp--preset--font-family--body, inherit);
	direction: rtl;
	box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.95);
}
.alrasly-auth::backdrop {
	background-color: rgba(9, 6, 24, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

/* The close control sits in its own method="dialog" form, which is how a
   dialog closes without a line of JavaScript. */
.alrasly-auth__x { margin: 0; }
.alrasly-auth__close {
	position: absolute;
	inset-block-start: 0.6rem;
	inset-inline-end: 0.7rem;
	inline-size: 44px;
	block-size: 44px;
	border: none;
	background: none;
	color: var(--wp--preset--color--text-3, #A79AD9);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	border-radius: 8px;
}
.alrasly-auth__close:hover { color: var(--wp--preset--color--text, #F4F1FF); }

.alrasly-auth__tabs {
	display: flex;
	gap: 0.35rem;
	margin-block-end: 1.1rem;
	padding-inline-end: 2.5rem;
}
.alrasly-auth__tab {
	flex: 1;
	min-block-size: 44px;
	padding-inline: 0.5rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: transparent;
	color: var(--wp--preset--color--text-2, #B9AEE4);
	font-family: inherit;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.alrasly-auth__tab.is-on {
	background-color: rgba(255, 178, 122, 0.14);
	border-color: rgba(255, 178, 122, 0.42);
	color: var(--wp--preset--color--accent, #FFB27A);
}

/* Says why the dialog opened. A sign-in box that appears with no reason
   given is the internet's most ignored object. */
.alrasly-auth__why:empty { display: none; }
.alrasly-auth__why {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	line-height: 1.75;
	color: var(--wp--preset--color--text-2, #B9AEE4);
}

.alrasly-auth__field { margin-block-end: 0.85rem; }
.alrasly-auth__label {
	display: block;
	margin-block-end: 0.3rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-2, #B9AEE4);
}
.alrasly-auth__input {
	inline-size: 100%;
	box-sizing: border-box;
	min-block-size: 48px;
	padding: 0.55rem 0.85rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background-color: rgba(0, 0, 0, 0.22);
	color: var(--wp--preset--color--text, #F4F1FF);
	font-family: inherit;
	font-size: 1rem;   /* 16px: anything less and iOS zooms the page on focus */
}
.alrasly-auth__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #FFB27A);
	outline-offset: 1px;
	border-color: transparent;
}

.alrasly-auth__submit {
	inline-size: 100%;
	min-block-size: 48px;
	margin-block-start: 0.35rem;
	border: none;
	border-radius: 8px;
	background-color: var(--wp--preset--color--brand, #7C3AF5);
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: filter 160ms ease;
}
.alrasly-auth__submit:hover:not(:disabled) { filter: brightness(1.08); }
.alrasly-auth__submit:disabled { opacity: 0.6; cursor: not-allowed; }

.alrasly-auth__error {
	margin: 0.75rem 0 0;
	padding: 0.6rem 0.8rem;
	border-radius: 8px;
	background-color: rgba(255, 178, 122, 0.12);
	border: 1px solid rgba(255, 178, 122, 0.34);
	color: var(--wp--preset--color--text, #F4F1FF);
	font-size: 0.85rem;
	line-height: 1.7;
}
.alrasly-auth__foot {
	margin: 0.85rem 0 0;
	font-size: 0.78rem;
	line-height: 1.7;
	color: var(--wp--preset--color--text-3, #A79AD9);
}
.alrasly-auth__foot a { color: var(--wp--preset--color--accent, #FFB27A); }

/* ── The canonical account page ───────────────────────────────────────
 * /حسابي-2/ is where plan/redirect-map.md sends all eleven auth URLs, so
 * it is the login page whether or not it is called one. WooCommerce
 * renders it; this brings its markup onto the palette rather than
 * replacing it, because Woo owns the checkout path too and a rewritten
 * form is a rewritten checkout. */
.woocommerce-account .woocommerce h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 600;
	margin-block-end: 1rem;
}
.woocommerce-account .woocommerce form.login,
.woocommerce-account .woocommerce form.register {
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--wp--custom--radius--card, 12px);
	background-color: var(--wp--preset--color--card);
	padding: 1.6rem 1.5rem;
}
.woocommerce-account .woocommerce label {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-2);
}
/* Woo marks required fields with a red asterisk that belongs to no palette
   on this site. */
.woocommerce-account .woocommerce .required,
.woocommerce-account .woocommerce abbr.required,
.woocommerce-account .woocommerce abbr[title] {
	/* Woo sets this red from its own stylesheet, which loads after the theme's,
	   so the selector has to be at least as specific to win. */
	color: var(--wp--preset--color--accent) !important;
	text-decoration: none !important;
	border: none !important;
}
.woocommerce-account .woocommerce input.input-text,
.woocommerce-account .woocommerce input[type="text"],
.woocommerce-account .woocommerce input[type="email"],
.woocommerce-account .woocommerce input[type="password"] {
	inline-size: 100%;
	box-sizing: border-box;
	min-block-size: 48px;
	padding: 0.55rem 0.85rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background-color: rgba(0, 0, 0, 0.22);
	color: var(--wp--preset--color--text);
	font-family: inherit;
	font-size: 1rem;
}
.woocommerce-account .woocommerce button.button,
.woocommerce-account .woocommerce .button {
	min-block-size: 48px;
	padding-inline: 1.4rem;
	border-radius: 8px;
	background-color: var(--wp--preset--color--brand);
	color: #FFFFFF;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 500;
	border: none;
}
.woocommerce-account .woocommerce .woocommerce-privacy-policy-text p,
.woocommerce-account .woocommerce .woocommerce-form__label span {
	font-size: 0.8125rem;
	line-height: 1.8;
	color: var(--wp--preset--color--text-2);
}

/* ── The single sign-in panel ─────────────────────────────────────────
 * Replaces WooCommerce's two-column login/register block on the
 * canonical account page. One implementation, one set of copy. */
.alrasly-signin {
	max-inline-size: 32rem;
	margin-inline: auto;
	padding: 1.75rem 1.6rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: var(--wp--custom--radius--card, 12px);
	background-color: var(--wp--preset--color--card);
	text-align: center;
}
.alrasly-signin__title {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--wp--preset--color--text);
}
.alrasly-signin__body {
	margin: 0 0 1.4rem;
	font-size: 0.9rem;
	line-height: 1.85;
	color: var(--wp--preset--color--text-2);
}
.alrasly-signin__actions {
	display: flex;
	gap: 0.6rem;
	justify-content: center;
	flex-wrap: wrap;
}
.alrasly-signin__btn {
	min-block-size: 48px;
	padding-inline: 1.5rem;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: transparent;
	color: var(--wp--preset--color--text-2);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 500;
	cursor: pointer;
	transition: filter 160ms ease, border-color 160ms ease, color 160ms ease;
}
.alrasly-signin__btn:hover { border-color: rgba(255, 178, 122, 0.5); color: var(--wp--preset--color--text); }
.alrasly-signin__btn--primary {
	background-color: var(--wp--preset--color--brand);
	border-color: transparent;
	color: #FFFFFF;
}
.alrasly-signin__btn--primary:hover { filter: brightness(1.08); color: #FFFFFF; }
.alrasly-signin__lost { margin: 1.1rem 0 0; font-size: 0.8125rem; }
.alrasly-signin__lost a { color: var(--wp--preset--color--text-3); }

/* Checkout: one line, nothing else touched on the purchase path. */
.alrasly-checkout-login {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-block-end: 1.25rem;
	padding: 0.85rem 1rem;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	font-size: 0.9rem;
	color: var(--wp--preset--color--text-2);
}
.alrasly-checkout-login__btn {
	min-block-size: 44px;
	padding-inline: 1rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 178, 122, 0.4);
	background: rgba(255, 178, 122, 0.12);
	color: var(--wp--preset--color--accent);
	font-family: inherit;
	font-size: 0.875rem;
	cursor: pointer;
}
.alrasly-checkout-login__btn:hover { background: rgba(255, 178, 122, 0.2); }

/* Tutor's own login modal never opens — its trigger is intercepted in
   auth-modal.js. This is the belt to that braces: if a Tutor update ever
   adds another way to reveal it, it still cannot appear. The markup is
   left in the DOM so nothing Tutor does with it errors. */
.tutor-modal.tutor-login-modal { display: none !important; }