/*
 * Customer sign-in / registration: one unified card (Customer Account V2).
 *
 * Loaded only on the signed-out My Account root (no endpoint), where the body gets
 * .brina-auth-card. Every rule is scoped beneath that class and the page's own
 * Bricks elements, so seller pages, other WooCommerce forms and the signed-in
 * account are never matched.
 *
 * #brxe-riqiig  intro card (icon, Welcome back / Create your account, copy)
 * #brxe-hmvkkb  [woocommerce_my_account] shortcode (notices, OTP/recovery panels, forms)
 *
 * The two siblings are joined into one card: the intro is the top of the card and
 * the shortcode wrapper is the bottom. Each keeps the original card shadow, clipped
 * at the shared edge so no seam shows. Markup, field IDs/names and JS are unchanged.
 */

body.brina-auth-card #brxe-riqiig,
body.brina-auth-card #brxe-hmvkkb:has(#customer_login) {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	width: 100%;
	max-width: 500px;
	margin-right: auto;
	margin-left: auto;
	background: #ffffff;
	box-shadow: none;
}

/* The card shadow (original 2px 10px 30px rgba(0,0,0,.08)) is drawn by a pseudo-element
   that runs 60px past the shared edge and is clipped exactly at it, so the side shadows
   stay continuous across the join. */
body.brina-auth-card #brxe-riqiig::before,
body.brina-auth-card #brxe-hmvkkb:has(#customer_login)::before {
	position: absolute;
	z-index: -1;
	right: 0;
	left: 0;
	content: "";
	pointer-events: none;
	box-shadow: 2px 10px 30px 0 rgba(0, 0, 0, 0.08);
}

body.brina-auth-card #brxe-riqiig::before {
	top: 0;
	bottom: -60px;
	border-radius: 14px 14px 0 0;
	clip-path: inset(-48px -48px 60px -48px);
}

body.brina-auth-card #brxe-hmvkkb:has(#customer_login)::before {
	top: -60px;
	bottom: 0;
	border-radius: 0 0 14px 14px;
	clip-path: inset(60px -48px -48px -48px);
}

/* Top of the card: intro. */
body.brina-auth-card #brxe-riqiig {
	row-gap: 10px;
	margin-bottom: 0;
	padding: 32px 40px 0;
	border-radius: 14px 14px 0 0;
}

body.brina-auth-card #brxe-riqiig #brxe-kzonoo,
body.brina-auth-card #brxe-riqiig #brxe-ofduyu {
	margin: 0;
}

/* Bottom of the card: the WooCommerce forms. */
body.brina-auth-card #brxe-hmvkkb:has(#customer_login) {
	margin-top: 0;
	padding: 24px 40px 32px;
	border-radius: 0 0 14px 14px;
}

/* Inside the card, notices and the new-device / account-recovery panels sit between the
   intro copy and the fields with the card's own rhythm (their 28px top offset existed
   only to clear the old separate intro card). */
body.brina-auth-card #brxe-hmvkkb:has(#customer_login) > .woocommerce {
	row-gap: 20px;
}

body.brina-auth-card #brxe-hmvkkb:has(#customer_login) .woocommerce-notices-wrapper {
	margin-bottom: 0;
}

body.brina-auth-card #brxe-hmvkkb:has(#customer_login) .woocommerce-notices-wrapper > :last-child {
	margin-bottom: 0;
}

body.brina-auth-card #brxe-hmvkkb:has(#customer_login) .brina-device-verify,
body.brina-auth-card #brxe-hmvkkb:has(#customer_login) .brina-recovery {
	margin-top: 0;
	margin-bottom: 0;
}

/* The standalone "Login" / "Register" headings are replaced by the card title. */
body.brina-auth-card #customer_login > .u-column1 > h2,
body.brina-auth-card #customer_login > .u-column2 > h2 {
	display: none;
}

body.brina-auth-card #customer_login > .u-column1,
body.brina-auth-card #customer_login > .u-column2 {
	max-width: none;
}

body.brina-auth-card #customer_login form.login,
body.brina-auth-card #customer_login form.register {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	row-gap: 16px;
}

/* Field rhythm: the forms are flex columns, so the row gap alone spaces the rows. */
body.brina-auth-card #customer_login .form-row {
	margin: 0;
}

/* Attribution wrapper holds only hidden inputs: no flex box, no extra gap (inputs still submit). */
body.brina-auth-card #customer_login form.register wc-order-attribution-inputs {
	display: contents;
}

/* Empty verification-message slot keeps no height until a message is shown. */
body.brina-auth-card #customer_login #brina-verification-message:empty {
	margin: 0 !important;
}

body.brina-auth-card #customer_login form.login input[type="text"]:focus,
body.brina-auth-card #customer_login form.login input[type="password"]:focus,
body.brina-auth-card #customer_login form.register input[type="text"]:focus,
body.brina-auth-card #customer_login form.register input[type="email"]:focus,
body.brina-auth-card #customer_login form.register input[type="tel"]:focus,
body.brina-auth-card #customer_login form.register input[type="password"]:focus {
	box-shadow: 0 0 0 3px rgba(23, 59, 108, 0.14);
}

/* Login: Remember me above a full-width Log in button, Lost password below. */
body.brina-auth-card #customer_login form.login .woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
	margin: 0 0 16px;
	cursor: pointer;
}

body.brina-auth-card #customer_login form.login .woocommerce-form-login__rememberme input {
	width: 18px;
	height: 18px;
	margin: 0;
}

body.brina-auth-card #customer_login form.login .woocommerce-form-login__submit {
	float: none;
	width: 100%;
	margin: 0;
}

body.brina-auth-card #customer_login form.login .lost_password {
	margin: -2px 0 0;
	text-align: center;
}

@media (max-width: 767px) {
	body.brina-auth-card #brxe-riqiig {
		padding: 24px 20px 0;
	}

	body.brina-auth-card #brxe-hmvkkb:has(#customer_login) {
		padding: 20px 20px 24px;
	}
}

@media (max-width: 478px) {
	/* Page container gutter 16px -> 0 (section keeps its 24px), so the card gains width on phones. */
	body.brina-auth-card #brxe-diejdd {
		padding-right: 0;
		padding-left: 0;
	}

	body.brina-auth-card #brxe-riqiig #brxe-kzonoo {
		font-size: 26px;
	}

	body.brina-auth-card #brxe-riqiig,
	body.brina-auth-card #brxe-hmvkkb:has(#customer_login) {
		padding-right: 18px;
		padding-left: 18px;
	}
}