/*
 * TASK-040 — signed-out customer registration, approved screens 60-61.
 *
 * WooCommerce retains the register form markup and behaviour (nonce, validation, submit). This
 * stylesheet styles only the presentation of the native register column and the extra fields
 * added by inc/account-registration.php. Mobile first, logical properties, Zahra tokens only.
 */

.zahra-account-login .woocommerce-form-register {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 0;
	border: 0;
}

.zahra-account-register__lead {
	margin: 0 0 4px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--zahra-color-ink);
}

.zahra-account-register__notice {
	border: 1px solid var(--zahra-color-field);
	background: var(--zahra-color-sand);
	padding: 12px 14px;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--zahra-color-ink);
}

.zahra-account-register__section {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.zahra-account-register__section legend {
	padding: 0 0 8px;
	margin-block-end: 4px;
	border-block-end: 1px solid var(--zahra-color-line);
	inline-size: 100%;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--zahra-color-brand);
}

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

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

.zahra-account-register__consent {
	padding-block-start: 6px;
	border-block-start: 1px solid var(--zahra-color-line);
}

.zahra-account-register__consent label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px;
	align-items: center;
	min-block-size: 44px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.8;
	color: var(--zahra-color-ink);
}

.zahra-account-register__consent label:has(input:disabled) {
	cursor: not-allowed;
	color: var(--zahra-color-on-dark, #7A7264);
}

.zahra-account-register__consent input[type="checkbox"] {
	inline-size: 18px;
	block-size: 18px;
	margin-block-start: 2px;
	accent-color: var(--zahra-color-brand);
}

/*
 * Privacy notice (TASK-057). Informational only, immediately after the required Terms
 * checkbox - not a checkbox itself, so it reuses the lead paragraph's plain-text rhythm
 * rather than the consent row's checkbox grid.
 */
.zahra-account-register__privacy-notice {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--zahra-color-muted);
}

.zahra-account-register__privacy-notice a,
.zahra-account-register__consent a {
	color: var(--zahra-color-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.zahra-account-register__privacy-notice a:hover,
.zahra-account-register__privacy-notice a:focus-visible,
.zahra-account-register__consent a:hover,
.zahra-account-register__consent a:focus-visible {
	color: var(--zahra-color-brand-dark);
}

.woocommerce .zahra-account-login button.woocommerce-form-register__submit {
	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-register__submit:hover,
.woocommerce .zahra-account-login button.woocommerce-form-register__submit:focus-visible {
	background-color: var(--zahra-color-brand-dark);
}

@media (min-width: 1024px) {

	.zahra-account-register__section {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 16px 20px;
	}

	.zahra-account-register__section legend {
		grid-column: 1 / -1;
	}

	.zahra-account-register__section .woocommerce-form-row--wide {
		grid-column: 1 / -1;
	}
}