/*
 * TASK-015 — signed-out customer login, approved screens 11-12.
 * TASK-040 — reconciled against the now-canonical screens 58-59 (eyebrow, perks list, register
 * prompt, relabeled fields).
 *
 * WooCommerce retains the form markup and behaviour. This stylesheet is loaded only for the
 * signed-out base My Account route; account endpoints and authenticated screens are excluded.
 * Mobile first, logical properties throughout, and all colours come from Zahra tokens.
 */

.woocommerce-account:not(.logged-in) .zahra-entry-title {
	display: none;
}

.woocommerce-account:not(.logged-in) .zahra-entry-content {
	margin: 0;
}

.zahra-account-login {
	margin-block: 20px;
	background: var(--zahra-color-sand);
}

.zahra-account-login__hero {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px 16px;
	background: var(--zahra-color-ink);
	color: var(--zahra-color-sand);
}

.zahra-account-login__title {
	margin: 0;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.4;
}

.zahra-account-login__eyebrow {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--zahra-color-on-dark);
}

.zahra-account-login__lead {
	margin: 0;
	max-inline-size: 440px;
	color: var(--zahra-color-on-dark);
	font-size: 13px;
	line-height: 1.8;
}

.zahra-account-login__perks {
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.zahra-account-login__perks li {
	position: relative;
	padding-inline-start: 16px;
	color: var(--zahra-color-on-dark);
	font-size: 12.5px;
	line-height: 1.7;
}

.zahra-account-login__perks li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .65em;
	inline-size: 5px;
	block-size: 5px;
	background: var(--zahra-color-brand);
}

.zahra-account-login__body {
	padding: 20px 16px 28px;
}

.zahra-account-login__panel {
	max-inline-size: 520px;
	margin-inline: auto;
	padding: 20px 16px;
	border: 1px solid var(--zahra-color-line);
	background: var(--zahra-color-surface);
}

.zahra-account-login__panel > h2 {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
}

.woocommerce .zahra-account-login form.woocommerce-form-login {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin: 0;
	padding: 0;
	border: 0;
}

.zahra-account-login .woocommerce-form-row,
.zahra-account-login .form-row,
.zahra-account-login .lost_password {
	margin: 0;
	padding: 0;
}

.zahra-account-login .woocommerce-form-row > label {
	display: block;
	margin-block-end: 6px;
	font-size: 12.5px;
	font-weight: 600;
}

.zahra-account-login .required {
	color: var(--zahra-color-brand);
}

.woocommerce .zahra-account-login input.input-text {
	display: block;
	inline-size: 100%;
	block-size: 48px;
	padding-inline: 12px;
	border: 1px solid var(--zahra-color-field);
	border-radius: 0;
	background: var(--zahra-color-surface);
	font-size: 14px;
}

.zahra-account-login #username {
	direction: ltr;
	text-align: start;
}

.zahra-account-login #password {
	padding-inline-end: 52px;
}

.woocommerce .zahra-account-login .password-input .show-password-input {
	inset-block-start: 0;
	inset-inline-end: 0;
	inline-size: 44px;
	block-size: 48px;
	transform: none;
}

.zahra-account-login .woocommerce-form-login > .form-row:not(.woocommerce-form-row) {
	display: contents;
}

.zahra-account-login .woocommerce-form-login__rememberme {
	display: inline-flex;
	grid-row: 3;
	align-items: center;
	justify-self: start;
	gap: 9px;
	min-block-size: 44px;
	font-size: 13px;
}

.zahra-account-login .woocommerce-form-login__rememberme input {
	inline-size: 18px;
	block-size: 18px;
	accent-color: var(--zahra-color-brand);
}

.woocommerce .zahra-account-login button.woocommerce-form-login__submit {
	grid-row: 5;
	inline-size: 100%;
	block-size: 52px;
	border: 0;
	border-radius: 0;
	background-color: var(--zahra-color-brand);
	color: var(--zahra-color-surface);
	font-size: 15px;
	font-weight: 600;
}

.woocommerce .zahra-account-login button.woocommerce-form-login__submit:hover,
.woocommerce .zahra-account-login button.woocommerce-form-login__submit:focus-visible {
	background-color: var(--zahra-color-brand-dark);
}

.zahra-account-login .lost_password {
	grid-row: 4;
}

.zahra-account-login .lost_password a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--zahra-color-ink);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.zahra-account-login .lost_password a:hover,
.zahra-account-login .lost_password a:focus-visible {
	color: var(--zahra-color-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.zahra-account-login__register-prompt {
	margin-block-start: 18px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--zahra-color-line);
	font-size: 13px;
	color: var(--zahra-color-ink);
}

@media (min-width: 1024px) {

	.zahra-account-login {
		margin-block: 32px;
	}

	.zahra-account-login__hero {
		min-block-size: 210px;
		justify-content: center;
		padding: 40px 56px;
	}

	.zahra-account-login__title {
		font-size: 36px;
	}

	.zahra-account-login__lead {
		font-size: 15px;
		line-height: 1.9;
	}

	.zahra-account-login__perks li {
		font-size: 13.5px;
	}

	.zahra-account-login__body {
		padding: 36px 40px 48px;
	}

	.zahra-account-login__panel {
		padding: 28px 32px 32px;
	}

	/*
	 * The panel's own max-inline-size (520px, above) is sized for the single-column login-only
	 * layout. Once WooCommerce's registration column joins it, the panel needs enough width for
	 * both native columns to actually sit side by side instead of wrapping despite the flex
	 * rule below - two 360px flex-basis columns plus the 32px gap need at least ~752px.
	 */
	.zahra-account-login__panel--with-register {
		max-inline-size: 920px;
	}

	.zahra-account-login #customer_login.u-columns {
		display: flex;
		flex-wrap: wrap;
		gap: 32px;
		align-items: flex-start;
	}

	.zahra-account-login #customer_login .u-column1,
	.zahra-account-login #customer_login .u-column2 {
		flex: 1 1 360px;
		min-inline-size: 0;
	}

	.woocommerce .zahra-account-login input.input-text {
		padding-inline: 14px;
	}

	.zahra-account-login .woocommerce-form-login {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.zahra-account-login .woocommerce-form-row,
	.zahra-account-login .woocommerce-form-login__submit {
		grid-column: 1 / -1;
	}

	.zahra-account-login .woocommerce-form-login__rememberme,
	.zahra-account-login .lost_password {
		grid-row: 3;
	}

	.zahra-account-login .lost_password {
		grid-column: 2;
		justify-self: end;
	}

	.zahra-account-login .woocommerce-form-login__submit {
		grid-row: 4;
	}
}