/*!
 * SIM Theme — WooCommerce My Account (front-end /mi-cuenta).
 * Enqueued from inc/enqueue.php on is_account_page() && !is_user_logged_in()
 * styling kept loaded on the dashboard side too so the orders/addresses/etc.
 * tabs look consistent.
 *
 * Goals:
 *   - Two clean columns (Login | Register) on desktop.
 *   - Single column stacked on tablet/mobile.
 *   - Hairline-bordered card per column to match the storefront's Salomon-
 *     style (no shadows, no rounded corners on the card itself).
 *   - Inputs with proper border + breathing room + accent focus state.
 *   - Red accent submit button (matches --c-accent on the front-end).
 *   - Suppress Chrome's blue autofill background.
 */


/* =============================================================================
   1. CONTAINER & HEADINGS
   ============================================================================= */

.woocommerce-account .woocommerce {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px;
	/* main.css sets .woocommerce to display:grid which then makes child
	   blocks (like #customer_login) shrink to their content width. Force
	   block-flow so the columns fill the wrapper. */
	display: block !important;
}

.woocommerce-account .woocommerce > h2,
.woocommerce-account .u-column1 > h2,
.woocommerce-account .u-column2 > h2 {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: #0a0a0a;
	margin: 0 0 20px;
	text-transform: none;
}

/* "Required *" small print under the headings. */
.woocommerce-account .woocommerce > p:first-of-type {
	font-size: 12px;
	color: #6b6b6b;
	margin: -12px 0 24px;
}


/* =============================================================================
   2. COLUMNS — Login | Register
   ============================================================================= */

.woocommerce-account #customer_login.u-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	width: 100%;
	margin: 0;
	padding: 0;
}

/* Override WooCommerce's default float-based columns. */
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2,
.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2 {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}


/* =============================================================================
   3. FORM CARDS
   ============================================================================= */

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
	background: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 0;
	padding: 32px 28px;
	box-shadow: none;
	margin: 0;
}


/* =============================================================================
   4. FORM ROWS, LABELS, INPUTS
   ============================================================================= */

.woocommerce-account .woocommerce-form .form-row {
	display: block;
	width: 100%;
	margin: 0 0 18px;
	padding: 0;
}

.woocommerce-account .woocommerce-form label {
	display: block;
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	font-weight: 500;
	color: #2a2a2a;
	margin: 0 0 6px;
	line-height: 1.3;
	/* Allow long labels to wrap naturally — but on a card this wide they
	   usually fit on one line. */
	white-space: normal;
}

.woocommerce-account .woocommerce-form label .required {
	color: #e63946;
	text-decoration: none;
	font-weight: 700;
	margin-left: 2px;
}

.woocommerce-account .woocommerce-Input.input-text,
.woocommerce-account .woocommerce-form input[type="text"],
.woocommerce-account .woocommerce-form input[type="email"],
.woocommerce-account .woocommerce-form input[type="password"],
.woocommerce-account .woocommerce-form input[type="tel"] {
	width: 100%;
	box-sizing: border-box;
	background: #ffffff;
	border: 1px solid #d4d4d4;
	border-radius: 0;
	padding: 12px 14px;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	color: #0a0a0a;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
	box-shadow: none;
	outline: none;
	max-width: 100%;
	min-width: 0;
}

.woocommerce-account .woocommerce-Input.input-text:focus,
.woocommerce-account .woocommerce-form input[type="text"]:focus,
.woocommerce-account .woocommerce-form input[type="email"]:focus,
.woocommerce-account .woocommerce-form input[type="password"]:focus {
	border-color: #0a0a0a;
	outline: 1px solid #0a0a0a;
	outline-offset: -2px;
}

/* Suppress Chrome's blue autofill highlight. */
.woocommerce-account input:-webkit-autofill,
.woocommerce-account input:-webkit-autofill:hover,
.woocommerce-account input:-webkit-autofill:focus,
.woocommerce-account input:-webkit-autofill:active {
	-webkit-text-fill-color: #0a0a0a !important;
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
	box-shadow: 0 0 0 1000px #ffffff inset !important;
	caret-color: #0a0a0a !important;
	transition: background-color 600000s 0s, color 600000s 0s !important;
}


/* =============================================================================
   5. REMEMBER ME + SUBMIT BUTTON
   ============================================================================= */

.woocommerce-account .woocommerce-form-login__rememberme,
.woocommerce-account .woocommerce-form-register__rememberme {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 500;
	color: #2a2a2a;
}

.woocommerce-account .woocommerce-form-login__rememberme input[type="checkbox"],
.woocommerce-account .woocommerce-form-register__rememberme input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: #e63946;
}

.woocommerce-account .form-row .button,
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit,
.woocommerce-account button.woocommerce-button {
	display: inline-block;
	background: #e63946 !important;
	border: 1px solid #e63946 !important;
	border-radius: 0 !important;
	color: #ffffff !important;
	font-family: 'Roboto', sans-serif !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 13px 22px !important;
	line-height: 1 !important;
	height: auto !important;
	cursor: pointer;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	margin-top: 4px;
}

.woocommerce-account .form-row .button:hover,
.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-form-register__submit:hover,
.woocommerce-account button.woocommerce-button:hover,
.woocommerce-account .form-row .button:focus,
.woocommerce-account .woocommerce-form-login__submit:focus,
.woocommerce-account .woocommerce-form-register__submit:focus {
	background: #c52936 !important;
	border-color: #c52936 !important;
	color: #ffffff !important;
	outline: none;
}


/* =============================================================================
   6. LOST PASSWORD LINK
   ============================================================================= */

.woocommerce-account .lost_password {
	margin: 16px 0 0;
	font-size: 13px;
}

.woocommerce-account .lost_password a {
	color: #6b6b6b;
	text-decoration: none;
	border-bottom: 1px solid #d4d4d4;
	padding-bottom: 1px;
	transition: color .15s ease, border-color .15s ease;
}

.woocommerce-account .lost_password a:hover,
.woocommerce-account .lost_password a:focus {
	color: #e63946;
	border-bottom-color: #e63946;
}


/* =============================================================================
   7. REGISTER FORM — password strength meter, privacy text
   ============================================================================= */

.woocommerce-account .woocommerce-password-strength {
	font-family: 'Roboto', sans-serif;
	font-size: 12px;
	padding: 6px 10px;
	margin: 6px 0 0;
	border-radius: 0;
	border-left: 3px solid #d4d4d4;
	background: #fafafa;
}

.woocommerce-account .woocommerce-password-strength.short {
	border-left-color: #e63946;
	color: #e63946;
}

.woocommerce-account .woocommerce-password-strength.bad {
	border-left-color: #e9b949;
	color: #b88a1f;
}

.woocommerce-account .woocommerce-password-strength.good,
.woocommerce-account .woocommerce-password-strength.strong {
	border-left-color: #2a9d8f;
	color: #2a9d8f;
}

.woocommerce-account .woocommerce-privacy-policy-text,
.woocommerce-account .woocommerce-privacy-policy-text p {
	font-size: 12px;
	color: #6b6b6b;
	line-height: 1.5;
	margin: 0 0 14px;
}


/* =============================================================================
   8. NOTICES & MESSAGES
   ============================================================================= */

.woocommerce-account .woocommerce-notices-wrapper {
	margin: 0 0 24px;
}

.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-message {
	background: #fafafa;
	border-left: 3px solid #e63946;
	border-radius: 0;
	padding: 12px 16px;
	margin: 0 0 16px;
	font-size: 14px;
	box-shadow: none;
}

.woocommerce-account .woocommerce-info {
	border-left-color: #4f46e5;
}

.woocommerce-account .woocommerce-message {
	border-left-color: #2a9d8f;
}


/* =============================================================================
   9. MY ACCOUNT DASHBOARD (after login — orders / addresses / etc.)
   ============================================================================= */

/* Dashboard layout — nav + content side by side. Wrap in a grid so the
   columns work regardless of main.css's parent display rules. */
.woocommerce-account .woocommerce-MyAccount-navigation + .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-content {
	box-sizing: border-box;
}

.woocommerce-account form,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	width: 100%;
}

/* Dashboard sidebar navigation. */
.woocommerce-account .woocommerce-MyAccount-navigation {
	float: left;
	width: 25%;
	padding-right: 24px;
	box-sizing: border-box;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid #e5e5e5;
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 14px 0;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #2a2a2a;
	text-decoration: none;
	transition: color .15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: #e63946;
}

.woocommerce-account .woocommerce-MyAccount-content {
	float: right;
	width: 75%;
	padding-left: 24px;
	box-sizing: border-box;
}

/* Clearfix so the wrapper grows around the floated children. */
.woocommerce-account .woocommerce::after {
	content: "" !important;
	display: table !important;
	clear: both !important;
}


/* =============================================================================
   10. RESPONSIVE — tablet (<=1024px) and mobile (<=768px)
   ============================================================================= */

@media (max-width: 1024px) {

	/* Stack the Login / Register columns vertically. */
	.woocommerce-account #customer_login.u-columns {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* Stack the dashboard nav + content too. */
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		width: 100% !important;
		padding: 0 !important;
		float: none !important;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		margin-bottom: 24px;
		border: 1px solid #e5e5e5;
		padding: 4px 16px !important;
	}
}

@media (max-width: 768px) {

	.woocommerce-account .woocommerce {
		padding: 0 12px;
	}

	.woocommerce-account .woocommerce-form-login,
	.woocommerce-account .woocommerce-form-register {
		padding: 24px 20px;
	}

	.woocommerce-account .woocommerce > h2,
	.woocommerce-account .u-column1 > h2,
	.woocommerce-account .u-column2 > h2 {
		font-size: 22px;
		margin-bottom: 16px;
	}

	/* Full-width buttons on mobile so the tap target is bigger. */
	.woocommerce-account .form-row .button,
	.woocommerce-account .woocommerce-form-login__submit,
	.woocommerce-account .woocommerce-form-register__submit {
		display: block;
		width: 100%;
		text-align: center;
	}
}