/* My Account: login-first, with a toggle to the registration form. */

/* The whole login/register box (#customer_login is WooCommerce's white card): focus it
   to a single centered column instead of a wide two-column panel. */
#customer_login.u-columns {
	display: block !important;
	max-width: 520px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: var(--wp--preset--spacing--60, 2.5rem) !important;
	border: none !important;
	border-radius: var(--wp--style--block-custom-border-radius, 16px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Columns and forms fill the card; the register column is hidden until toggled. */
#customer_login .u-column1,
#customer_login .u-column2 {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

#customer_login .u-column2 {
	display: none;
}

#customer_login.prontox-show-register .u-column1 {
	display: none;
}

#customer_login.prontox-show-register .u-column2 {
	display: block;
}

/* Drop WooCommerce's bordered, padded form box so the form blends into the card. */
#customer_login form.login,
#customer_login form.register {
	width: 100%;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

#customer_login .u-column1 > h2,
#customer_login .u-column2 > h2 {
	margin-top: 0;
}

/* Inputs: full width, rounded, with a branded focus ring. */
#customer_login .woocommerce-form-row,
#customer_login .woocommerce-form-row input.input-text,
#customer_login input[type="text"],
#customer_login input[type="email"],
#customer_login input[type="password"] {
	width: 100%;
	box-sizing: border-box;
}

#customer_login input.input-text,
#customer_login input[type="text"],
#customer_login input[type="email"],
#customer_login input[type="password"] {
	padding: 0.8rem 1rem;
	border: 1px solid var(--wp--preset--color--surface, #e2e2e2);
	border-radius: var(--wp--style--block-custom-border-radius, 10px);
}

#customer_login input.input-text:focus,
#customer_login input[type="text"]:focus,
#customer_login input[type="email"]:focus,
#customer_login input[type="password"]:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary, #f68363);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary, #f68363) 20%, transparent);
}

/* Full-width primary action for a cleaner sign-in card. */
#customer_login form.login button.woocommerce-button,
#customer_login form.register button.woocommerce-button {
	width: 100%;
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
}

/* Keep "Remember me" reading naturally next to the full-width button. */
#customer_login .woocommerce-form-login__rememberme {
	display: inline-block;
	margin: 0.75rem 0 0;
}

.prontox-login-toggle {
	margin: 1.25rem 0 0;
	text-align: center;
	color: var(--wp--preset--color--muted, #6b7280);
}

.prontox-login-toggle a {
	font-weight: 700;
	color: var(--wp--preset--color--primary, #f68363);
}