/**
 * NextGen Commerce: the sign-in pages (loaded only there, after the shared
 * design in ui.css): the login page of My Account for visitors, and a B2B
 * plugin's business login and registration.
 *
 * Mobile first, no script. Everything is scoped to NextGen's frame
 * (.ngc-signin, which also carries .ngc-ui). WooCommerce's and the B2B
 * plugin's forms keep their markup and the theme's font, colours and buttons;
 * NextGen sets the cards, spacing, visible labels, field sizes (16px text, 48px
 * tall), focus rings and the store's accent. Lines and tints mix from
 * currentColor, so light and dark themes both work. No @layer: theme rules
 * for WooCommerce's markup must not win over the frame. Field rules use
 * ".ngc-signin.ngc-ui .ngc-signin__card .woocommerce-form" (every form sits in
 * a card) so they outrank the themes' account-page rules without !important,
 * e.g. Glozin's floating labels (".woocommerce-account .woocommerce-form
 * .woocommerce-form-row.focused > label", which loads after this file).
 * Cards sit side by side when the frame is wide enough (container queries),
 * not by the window's width. Nothing here sets `display` on the B2B plugin's
 * own rows, which its script shows and hides.
 */

/* stylelint-disable selector-id-pattern -- WooCommerce's own element id. */

.ngc-signin {
	container: ngc-signin / inline-size;
	box-sizing: border-box;
	inline-size: 100%;
	margin-block: 0 2rem;
	text-align: start;
}

.ngc-signin--card {
	margin-block-start: 2rem;
}

/*
 * Cards: one column; two side by side from 48rem of the frame, each its own
 * height (a B2B plugin's fields can make the registration card long).
 */

.ngc-signin__cards {
	display: grid;
	gap: 1.5rem;
	align-items: start;
}

.ngc-signin__card {
	container: ngc-signin-form / inline-size;
	box-sizing: border-box;
	min-inline-size: 0;
	padding: clamp(1.25rem, 5cqi, 2rem);
	border: 1px solid var(--ngc-line);
	border-radius: min(calc(var(--ngc-radius) * 1.5), 16px);
	box-shadow: 0 1px 3px color-mix(in srgb, currentcolor 8%, transparent);
}

/*
 * The business card: its text, then its call to action as a full-width
 * button; once the card is wide enough (a band under the forms), the button
 * sits beside the text.
 */
.ngc-signin__card--business {
	background: var(--ngc-tint);
}

.ngc-signin__band {
	display: grid;
	gap: 1.25rem;
}

.ngc-signin__band-text > :last-child {
	margin-block-end: 0;
}

/*
 * Outranks themes that underline links in page content (Storefront:
 * ".hentry .entry-content a").
 */
.ngc-signin.ngc-ui .ngc-signin__cta {
	inline-size: 100%;
	min-block-size: 3rem;
	text-decoration: none;
}

[dir="rtl"] .ngc-signin__cta .ngc-icon {
	scale: -1 1;
}

@media (prefers-reduced-motion: no-preference) {

	.ngc-signin__cta .ngc-icon {
		transition: translate 0.15s ease-out;
	}

	.ngc-signin__cta:hover .ngc-icon {
		translate: 0.1875rem 0;
	}

	[dir="rtl"] .ngc-signin__cta:hover .ngc-icon {
		translate: -0.1875rem 0;
	}
}

@container ngc-signin-form (min-width: 40rem) {

	.ngc-signin__band {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 2rem;
		align-items: center;
	}

	.ngc-signin.ngc-ui .ngc-signin__cta {
		inline-size: auto;
	}
}

.ngc-signin__card--solo {
	max-inline-size: 30rem;
	margin-inline: auto;
}

.ngc-signin--b2b-register .ngc-signin__card--solo {
	max-inline-size: 46rem;
}

@container ngc-signin (min-width: 48rem) {

	.ngc-signin__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ngc-signin--application .ngc-signin__cards {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	.ngc-signin__cards > :only-child {
		grid-column: 1 / -1;
		justify-self: center;
		inline-size: min(100%, 30rem);
	}

	/* A third card (the business card) as a band under the two forms. */
	.ngc-signin__cards > :nth-child(3) {
		grid-column: 1 / -1;
	}

	.ngc-signin__jump {
		display: none;
	}
}

/* Heading with its audience badge above it. */

.ngc-signin__head {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
	margin-block-end: 1.25rem;
}

.ngc-signin__head .ngc-badge {
	order: -1;
}

/* :is() with the id outranks themes' "#customer_login h2". */
.ngc-signin :is(#customer_login, .ngc-signin__card) .ngc-signin__title {
	margin: 0;
	padding: 0;
	font-size: 1.375rem;
	letter-spacing: normal;
	line-height: 1.25;
	text-transform: none;
}

.ngc-signin__text,
.ngc-signin__note {
	margin: 0 0 1.25rem;
}

.ngc-signin__note {
	padding: 0.75rem 1rem;
	border-inline-start: 3px solid var(--ngc-info);
	border-radius: min(var(--ngc-radius), 12px);
	background: var(--ngc-tint);
}

.ngc-signin__points {
	display: grid;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
}

.ngc-signin__points li {
	display: flex;
	gap: 0.625rem;
	margin: 0;
	padding: 0;
}

.ngc-signin__points li::before {
	content: "";
	flex: none;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	margin-block-start: 0.15em;
	background: var(--ngc-accent);
	mask: var(--ngc-icon-check) center / contain no-repeat;
}

.ngc-signin__action,
.ngc-signin__line {
	margin: 0;
}

.ngc-signin__lines {
	display: grid;
	gap: 0.5rem;
	margin-block-start: 1.5rem;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--ngc-line);
}

.ngc-signin__jump,
.ngc-signin .lost_password {
	margin: 1rem 0 0;
	font-size: 0.9375rem;
	text-align: center;
}

.ngc-signin__jump {
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--ngc-line);
}

.ngc-signin__jump a,
.ngc-signin .lost_password a {
	color: var(--ngc-link);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ngc-signin :is(.woocommerce-error, .woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner) {
	margin-block: 0 1.25rem;
}

/* Forms: no frame of their own (the card is the frame), rows stacked. */

.ngc-signin.ngc-ui .ngc-signin__card .woocommerce-form {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.ngc-signin.ngc-ui .ngc-signin__card .woocommerce-form .form-row {
	float: none;
	inline-size: auto;
	margin: 0 0 1rem;
	padding: 0;
}

/* Labels always visible above their field (no floating labels). */
.ngc-signin.ngc-ui .ngc-signin__card .woocommerce-form .form-row > label {
	position: static;
	display: block;
	block-size: auto;
	margin: 0 0 0.375rem;
	padding: 0;
	opacity: 1;
	color: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: normal;
	line-height: 1.4;
	text-transform: none;
	transform: none;
	pointer-events: auto;
}

.ngc-signin.ngc-ui .ngc-signin__card .woocommerce-form .required {
	visibility: visible;
	border: 0;
	color: color-mix(in srgb, var(--ngc-danger) 75%, currentcolor);
	text-decoration: none;
}

.ngc-signin.ngc-ui .ngc-signin__card .woocommerce-form :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="submit"], [type="button"]), select, textarea) {
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	block-size: auto;
	min-block-size: 3rem;
	margin: 0;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--ngc-field);
	border-radius: var(--ngc-radius);
	background-color: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	font-size: max(1rem, 16px);
	line-height: 1.5;
}

.ngc-signin.ngc-ui .ngc-signin__card .woocommerce-form .form-row textarea {
	min-block-size: 7rem;
}

.ngc-signin.ngc-ui .ngc-signin__card .woocommerce-form .form-row ::placeholder {
	opacity: 1;
	color: color-mix(in srgb, currentcolor 75%, transparent);
}

.ngc-signin.ngc-ui .ngc-signin__card .woocommerce-form :is(input, select, textarea, button):focus-visible {
	outline: 2px solid var(--ngc-link);
	outline-offset: 2px;
}

.ngc-signin.ngc-ui .ngc-signin__card .woocommerce-form :is(input[type="checkbox"], input[type="radio"]) {
	position: static;
	flex: none;
	inline-size: 1.125rem;
	block-size: 1.125rem;
	margin: 0;
	opacity: 1;
	accent-color: var(--ngc-accent);
	appearance: auto;
}

.ngc-signin.ngc-ui .ngc-signin__card .woocommerce-form .form-row > label.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	gap: 0.625rem;
	align-items: center;
	min-block-size: 2.75rem;
	margin: 0;
	font-weight: 400;
	cursor: pointer;
}

.ngc-signin.ngc-ui .ngc-signin__card .woocommerce-form input[type="file"] {
	inline-size: 100%;
	max-inline-size: 100%;
	font-size: 0.9375rem;
}

.ngc-signin.ngc-ui .ngc-signin__card .woocommerce-form input[type="file"]::file-selector-button {
	min-block-size: 2.75rem;
	margin-inline-end: 0.75rem;
	padding: 0.5rem 1rem;
	border: 1px solid currentcolor;
	border-radius: var(--ngc-button-radius);
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* WooCommerce's password toggle (its icon is the theme's): a 48px target. */
.ngc-signin.ngc-ui .ngc-signin__card .woocommerce-form .form-row .password-input {
	position: relative;
	display: block;
}

.ngc-signin.ngc-ui .ngc-signin__card .woocommerce-form .password-input input {
	padding-inline-end: 3rem;
}

.ngc-signin.ngc-ui .show-password-input {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 3rem;
	block-size: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	transform: none;
	cursor: pointer;
}

.ngc-signin .woocommerce-password-strength {
	margin-block-start: 0.375rem;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-size: 0.875rem;
	font-weight: 600;
}

.ngc-signin .woocommerce-password-strength.strong {
	background: color-mix(in srgb, var(--ngc-success) 15%, transparent);
}

.ngc-signin .woocommerce-password-strength:is(.short, .bad) {
	background: color-mix(in srgb, var(--ngc-danger) 15%, transparent);
}

.ngc-signin .woocommerce-password-hint,
.ngc-signin .woocommerce-privacy-policy-text {
	display: block;
	margin-block: 0.25rem 1rem;
	font-size: 0.875rem;
}

.ngc-signin.ngc-ui .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	block-size: auto;
	min-block-size: 3rem;
	border: 1px solid var(--ngc-field);
	border-radius: var(--ngc-radius);
	background-color: transparent;
}

.ngc-signin.ngc-ui .select2-container .select2-selection__rendered {
	padding-inline: 0.875rem 2rem;
	color: inherit;
	line-height: 1.5;
}

.ngc-signin.ngc-ui .select2-container .select2-selection__arrow {
	inset-block: 0;
	block-size: auto;
}

/* Main buttons: full width and 48px tall; their look stays the theme's. */
.ngc-signin.ngc-ui :is(.woocommerce-form-login__submit, .woocommerce-form-register__submit) {
	display: flex;
	align-items: center;
	justify-content: center;
	float: none;
	inline-size: 100%;
	min-block-size: 3rem;
	margin: 0.5rem 0 0;
}

/* The store chose its colour: the main buttons take it too. */
.ngc-signin.ngc-ui--brand :is(.woocommerce-form-login__submit, .woocommerce-form-register__submit) {
	border-color: var(--ngc-fill);
	background-color: var(--ngc-fill);
	color: var(--ngc-fill-text);
}

.ngc-signin.ngc-ui--brand :is(.woocommerce-form-login__submit, .woocommerce-form-register__submit):hover {
	box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--ngc-fill-text) 14%, transparent);
}

/*
 * Registration: one column, two from 40rem of the card. Every row spans both
 * (no specificity, so a B2B plugin's rules put two fields side by side).
 */
.ngc-signin.ngc-ui form.register {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 1rem;
}

:where(.ngc-signin form.register > *) {
	grid-column: 1 / -1;
	min-inline-size: 0;
}

@container ngc-signin-form (min-width: 40rem) {

	.ngc-signin.ngc-ui form.register {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}