/**
 * Login panel — Figma "login-in" (Pages 1:1 → /login-open).
 *
 * Used by the header's login drawer (blocks/account-link) and the WooCommerce
 * My account page when logged out (woocommerce/myaccount/form-login.php).
 * Markup: inc/login.php. Fields take their box from the global "field" rules
 * in theme.css; the button from assets/css/blocks/core/button.css.
 */

.pw-login {
	--pw-login-gap: var(--wp--preset--spacing--lg);

	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--lg);
	box-sizing: border-box;
	width: 100%;
	max-width: calc(592px + 2 * var(--pw-login-pad-x, 0px));
	color: var(--wp--preset--color--text-secondary);
}

/* Close · title · intro (12px apart). */
.pw-login__intro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.pw-login__close {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: 1.4;
	cursor: pointer;

	&:hover {
		color: var(--wp--preset--color--text-primary);
	}
}

.pw-login__close-icon {
	flex: 0 0 auto;
	width: var(--wp--custom--icon-size--lg);
	height: var(--wp--custom--icon-size--lg);
	background-color: currentColor;
	mask: url("../icons/close.svg") center / contain no-repeat;
}

.pw-login .pw-login__title {
	margin: 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--display);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0.02em;
}

.pw-login__lead {
	margin: 0;
	font-size: var(--wp--preset--font-size--body-l);
	line-height: 1.4;
}

/*
 * Form: 10px inset and 10px between rows, as in the frame. The doubled class
 * outranks WooCommerce's `.woocommerce form.login` box (border, 20px padding).
 */
.pw-login form.pw-login__form.pw-login__form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 10px;
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--text-primary);

	& p {
		margin: 0;
	}

	& input:is([type="text"], [type="email"], [type="password"]) {
		width: 100%;
	}
}

.pw-login__field {
	display: flex;
	flex-direction: column;
	gap: 4px;

	& label {
		font-size: var(--wp--preset--font-size--body);
		font-weight: 600;
		line-height: 1.5;
	}
}

.pw-login__remember label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 300;
	line-height: 1.43;
	cursor: pointer;

	& input {
		width: 16px;
		height: 16px;
		margin: 0;
		accent-color: var(--wp--preset--color--brand-blue);
	}
}

.pw-login__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md);
	padding-block: 4px;
}

.pw-login__lost {
	color: var(--wp--preset--color--info);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.28571;
	text-decoration: none;

	&:hover {
		text-decoration: underline;
	}
}

/* -------------------------------------------------------------------------
 * Drawer — 720px panel on the right, below the site header.
 * --pw-login-top is the header's bottom edge, set by account-link/view.js.
 * The panel fills the dialog, so a click on the dialog itself is a click on
 * the backdrop.
 * ---------------------------------------------------------------------- */
dialog.pw-login-drawer {
	position: fixed;
	inset: var(--pw-login-top, 0px) 0 0 auto;
	box-sizing: border-box;
	width: min(720px, 100%);
	max-width: 100%;
	height: auto;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	border: 0;
	background-color: var(--wp--preset--color--surface-raised);
	color: var(--wp--preset--color--text-primary);
	text-align: start;

	&::backdrop {
		background: transparent;
	}

	& .pw-login {
		--pw-login-pad-x: 64px;

		min-height: 100%;
		max-width: none;
		padding: 120px var(--pw-login-pad-x);
	}

	@media (max-width: 781px) {
		& .pw-login {
			--pw-login-pad-x: var(--wp--preset--spacing--lg);

			padding-block: var(--wp--preset--spacing--xl);
		}
	}

	@media not (prefers-reduced-motion: reduce) {
		&[open] {
			animation: pw-login-in var(--wp--custom--motion--duration-base) var(--wp--custom--motion--ease-standard);
		}
	}
}

@keyframes pw-login-in {
	from {
		transform: translateX(2rem);
		opacity: 0;
	}
}

/* -------------------------------------------------------------------------
 * WooCommerce My account page (logged out): the same panel, centred in the
 * page, with WooCommerce notices and the optional registration panel in the
 * same column.
 * ---------------------------------------------------------------------- */
.pw-login-page {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3-xl);
	box-sizing: border-box;
	width: 100%;
	max-width: 592px;
	margin: var(--wp--preset--spacing--5-xl) auto;

	& > .woocommerce-notices-wrapper:empty {
		display: none;
	}

	& :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) {
		margin: 0 0 calc(var(--wp--preset--spacing--xl) - var(--wp--preset--spacing--3-xl));
	}
}

.pw-login .pw-login__subtitle {
	margin: 0;
	color: inherit;
	font-size: var(--wp--preset--font-size--headline-3);
	font-weight: 400;
	line-height: 1.25;
}

.pw-login__note {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
}