/*---*\
WooCommerce My Account
Sidebar navigation and dashboard layout per BCD mockup.
Uses theme tokens from custom-properties.css and Dashicons in templates.
\*---*/

.woocommerce-account .woocommerce {
	--bcd-account-page-bg: var(--bg-off-white, #f0f7fa);
	--bcd-account-nav-active-bg: var(--color-tertiary-super-light, #d7f3ff);
	--bcd-account-info-bg: var(--color-tertiary-super-light, #d7f3ff);
	--bcd-account-nav-border: var(--color-darker-off-white, #e2eef3);
	--bcd-account-shadow: 0 4px 24px var(--color-primary-20, rgba(0, 40, 85, 0.2));
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-MyAccount-navigation ul li::before {
    content: none;
}
.woocommerce-MyAccount-navigation ul li{
    padding: 0;
}
/* Two-column layout: nav + content */
.bcd-my-account {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: var(--container-max-width, 1366px);
	margin-left: auto;
	margin-right: auto;
}
/* Login and lost password only (not orders, dashboard, edit-account, etc.) */
.woocommerce-account .section-padding .woocommerce:has(.woocommerce-form-login),
.woocommerce-account.woocommerce-lost-password .section-padding .woocommerce {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background-image: linear-gradient(180deg, var(--color-off-white) 0%, var(--color-tertiary-super-light) 100%);
	padding: 50px;
	border-radius: 20px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.woocommerce-account .section-padding .woocommerce:has(.woocommerce-form-login) h2,
.woocommerce-account.woocommerce-lost-password .section-padding .woocommerce h2 {
	text-align: center;
}

.woocommerce-account .section-padding .woocommerce:has(.woocommerce-form-login) .woocommerce-form,
.woocommerce-account.woocommerce-lost-password .section-padding .woocommerce .woocommerce-ResetPassword {
	background-color: var(--color-white, #fff);
	max-width: 100%;
	padding: 25px;
    border-radius: 20px;
}
.woocommerce-form-row {
    width: 100%;
}
@media (min-width: 768px) {
	.bcd-my-account {
		flex-direction: row;
		align-items: flex-start;
		gap: 32px;
	}
   
}

@media (min-width: 1200px) {
	.bcd-my-account {
		gap: 48px;
	}
    
}

/* Sidebar navigation card */
.woocommerce-MyAccount-navigation {
	flex: 0 0 auto;
	width: 100%;
	background-color: var(--color-white, #fff);
	border-radius: 20px;
	box-shadow: var(--bcd-account-shadow);
	overflow: hidden;
}
.woocommerce-Addresses h2,
.woocommerce h2 {
    font-size: var(--font-size-h3);
}
.woocommerce-form {
    margin: 0 !important;
}

@media (min-width: 768px) {
	.woocommerce-MyAccount-navigation {
		width: 280px;
		max-width: 100%;
	}
}

@media (min-width: 1200px) {
	.woocommerce-MyAccount-navigation {
		width: 300px;
	}
}

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

.woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--bcd-account-nav-border);
}

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

.woocommerce-MyAccount-navigation a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
    padding-bottom: 18px !important;
	color: var(--color-primary, #002855);
	font-family: var(--font-family-body);
	font-size: var(--font-size-paragraph, 15px);
	font-weight: var(--font-weight-bold, 700);
	text-decoration: none;
	border-left: 4px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    background-image: none !important;
}

.woocommerce-MyAccount-navigation a:hover {
	color: var(--color-secondary, #0057b7);
	background-color: var(--bcd-account-nav-active-bg);
}

.woocommerce-MyAccount-navigation a:focus-visible {
	outline: 2px solid var(--color-secondary, #0057b7);
	outline-offset: -2px;
}

.woocommerce-MyAccount-navigation .is-active a {
	color: var(--color-primary, #002855);
	background-color: var(--bcd-account-nav-active-bg);
	border-left-color: var(--color-primary, #002855);
}

.bcd-my-account-nav__icon {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	font-size: 22px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bcd-my-account-nav__label {
	line-height: 1.2;
}

/* Main content column */
.woocommerce-MyAccount-content {
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
}

/* Dashboard greeting + info box */
.bcd-account-dashboard__header {
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--bcd-account-nav-border);
}

.bcd-account-dashboard__title {
	margin: 0 0 12px;
	color: var(--color-primary, #002855);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h2, 28px);
	font-weight: var(--font-weight-bold, 700);
	line-height: 1.2;
}

.bcd-account-dashboard__title strong {
	font-weight: inherit;
}

.bcd-account-dashboard__logout-line {
	margin: 0;
	color: var(--color-paragraph-light, #636363);
	font-size: var(--font-size-paragraph, 15px);
	line-height: 1.5;
}

.bcd-account-dashboard__logout-line a {
	color: var(--color-link, #0057b7);
	text-decoration: underline;
}

.bcd-account-dashboard__logout-line a:hover {
	color: var(--color-link-hover, #002855);
}

.bcd-account-dashboard__logout-line a:focus-visible {
	outline: 2px solid var(--color-secondary, #0057b7);
	outline-offset: 2px;
}

.bcd-account-dashboard__info {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 24px;
	background-color: var(--bcd-account-info-bg);
	border-radius: 20px;
	color: var(--color-primary, #002855);
	font-size: var(--font-size-paragraph, 15px);
	line-height: 1.6;
}

.bcd-account-dashboard__info-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: var(--color-white, #fff);
	color: var(--color-primary, #002855);
	font-size: 28px;
}

.bcd-account-dashboard__info-text {
	margin: 0;
	flex: 1 1 auto;
}

.bcd-account-dashboard__info-text p {
	margin: 0;
}

.bcd-account-dashboard__info a {
	color: var(--color-link, #0057b7);
	text-decoration: underline;
	font-weight: var(--font-weight-bold, 700);
}

.bcd-account-dashboard__info a:hover {
	color: var(--color-link-hover, #002855);
}

.bcd-account-dashboard__info a:focus-visible {
	outline: 2px solid var(--color-secondary, #0057b7);
	outline-offset: 2px;
}

/* Other account endpoints: headings and tables */
.woocommerce-MyAccount-content > h2,
.woocommerce-MyAccount-content > h3 {
	color: var(--color-primary, #002855);
	font-family: var(--font-family-heading);
}

.woocommerce-MyAccount-content .woocommerce-orders-table,
.woocommerce-MyAccount-content .woocommerce-table--order-downloads,
.woocommerce-MyAccount-content .account-orders-table {
	border-radius: 12px;
	overflow: hidden;
}

.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-MyAccount-content .woocommerce-error {
	border-radius: 12px;
}

/* Account forms: match global.css text inputs and .btn-primary */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-ResetPassword,
.woocommerce-account .woocommerce-ResetPassword.lost_reset_password {
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

.woocommerce-account form .form-row {
	margin-bottom: 15px;
    width: 100%;
}

.woocommerce-account form .form-row label:not(.woocommerce-form__label-for-checkbox) {
	display: block;
	margin-bottom: 5px;
	color: var(--color-primary, #002855);
	font-family: var(--font-family-body);
	font-size: var(--font-size-paragraph, 15px);
	font-weight: var(--font-weight-bold, 700);
	line-height: 1.2;
}

.woocommerce-account form fieldset {
	margin: 24px 0 0;
	padding: 0;
	border: 0;
}

.woocommerce-account form fieldset legend {
	display: block;
	margin-bottom: 15px;
	padding: 0;
	color: var(--color-primary, #002855);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h3, 24px);
	font-weight: var(--font-weight-bold, 700);
	line-height: 1.2;
}

.woocommerce-account form .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 0;
	font-weight: var(--font-weight-regular, 400);
	color: var(--color-primary, #002855);
	cursor: pointer;
}

.woocommerce-account form .input-text,
.woocommerce-account form select,
.woocommerce-account form textarea,
.woocommerce-account form .woocommerce-Input:not([type="checkbox"]):not([type="radio"]) {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 11px 20px;
	border: 0.5px solid var(--color-tertiary, #38b6fe);
	border-radius: 600px;
	background-color: var(--color-white, #fff);
	font-family: var(--font-family-body);
	font-size: var(--font-size-input, 15px);
	font-weight: 400;
	line-height: 0.9;
	color: var(--color-primary, #002855);
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce-account form textarea {
	min-height: 88px;
	line-height: 1.2;
	border-radius: 20px;
	resize: vertical;
}

.woocommerce-account form select {
	padding-right: 40px;
	cursor: pointer;
	background-image: linear-gradient(
		45deg,
		transparent 50%,
		var(--color-quaternary, #00c389) 50%
	),
	linear-gradient(
		135deg,
		var(--color-quaternary, #00c389) 50%,
		transparent 50%
	);
	background-position: calc(100% - 22px) calc(50% - 3px),
		calc(100% - 16px) calc(50% - 3px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.woocommerce-account form .input-text::placeholder,
.woocommerce-account form textarea::placeholder {
	color: var(--color-paragraph-light, #636363);
	font-weight: 400;
}

.woocommerce-account form .input-text:focus-visible,
.woocommerce-account form select:focus-visible,
.woocommerce-account form textarea:focus-visible,
.woocommerce-account form .woocommerce-Input:focus-visible {
	outline: 2px solid var(--color-secondary, #0057b7);
	outline-offset: 2px;
	border-color: var(--color-secondary, #0057b7);
}

.woocommerce-account form .woocommerce-form__input-checkbox:focus-visible {
	outline: 2px solid var(--color-secondary, #0057b7);
	outline-offset: 2px;
}

@media (min-width: 1200px) {
	.woocommerce-account form .input-text,
	.woocommerce-account form select,
	.woocommerce-account form textarea,
	.woocommerce-account form .woocommerce-Input:not([type="checkbox"]):not([type="radio"]) {
		padding: 15px 20px;
	}

	.woocommerce-account form select {
		padding-right: 40px;
	}
}

/* WooCommerce .button -> global .btn.btn-primary */
.woocommerce-account .button,
.woocommerce-account button.button,
.woocommerce-account a.button,
.woocommerce-account .woocommerce-Button.button,
.woocommerce-account button.woocommerce-Button,
.woocommerce-account a.woocommerce-Button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	box-sizing: border-box;
	margin: 0;
	padding: var(--btn-padding, 10px 35px 12px 15px);
	border: none;
	border-radius: var(--btn-border-radius, 600px);
	background: linear-gradient(
		90deg,
		var(--color-primary, #002855) 0%,
		var(--color-secondary, #0057b7) 75%,
		var(--color-quaternary, #00c389) 100%
	);
	color: var(--color-white, #fff);
	font-family: var(--font-family-button);
	font-size: var(--button-font-size, 15px);
	font-weight: var(--font-weight-bold, 700);
	line-height: 100%;
	letter-spacing: var(--letter-spacing-button, 0.05em);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce-account .button::after,
.woocommerce-account button.button::after,
.woocommerce-account a.button::after,
.woocommerce-account .woocommerce-Button.button::after,
.woocommerce-account button.woocommerce-Button::after,
.woocommerce-account a.woocommerce-Button::after {
	position: absolute;
	top: 50%;
	right: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: 'bcd', sans-serif;
	font-size: calc(var(--button-font-size, 15px) + 0.5rem);
	line-height: 1;
	color: currentColor;
	content: "\e909";
	transform: translateY(-50%);
	transition: all 0.3s ease;
}

.woocommerce-account .button:focus-visible,
.woocommerce-account button.button:focus-visible,
.woocommerce-account a.button:focus-visible,
.woocommerce-account .woocommerce-Button.button:focus-visible,
.woocommerce-account button.woocommerce-Button:focus-visible,
.woocommerce-account a.woocommerce-Button:focus-visible {
	outline: 2px solid var(--color-secondary, #0057b7);
	outline-offset: 2px;
}

.woocommerce-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit),
.woocommerce-account .woocommerce-form-register .form-row:has(.woocommerce-form-register__submit),
.woocommerce-account form p:has(> .button),
.woocommerce-account form p:has(> .woocommerce-Button) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

@media (min-width: 1025px) {
	.woocommerce-account .button:hover,
	.woocommerce-account button.button:hover,
	.woocommerce-account a.button:hover,
	.woocommerce-account .woocommerce-Button.button:hover,
	.woocommerce-account button.woocommerce-Button:hover,
	.woocommerce-account a.woocommerce-Button:hover {
		border-radius: 600px;
		background: linear-gradient(
			90deg,
			var(--color-primary, #002855) 0%,
			var(--color-secondary, #0057b7) 25%,
			var(--color-quaternary, #00c389) 100%
		);
		color: var(--color-white, #fff);
	}

	.woocommerce-account .button:hover::after,
	.woocommerce-account button.button:hover::after,
	.woocommerce-account a.button:hover::after,
	.woocommerce-account .woocommerce-Button.button:hover::after,
	.woocommerce-account button.woocommerce-Button:hover::after,
	.woocommerce-account a.woocommerce-Button:hover::after,
	.woocommerce-account .button:focus-visible::after,
	.woocommerce-account button.button:focus-visible::after,
	.woocommerce-account a.button:focus-visible::after,
	.woocommerce-account .woocommerce-Button.button:focus-visible::after,
	.woocommerce-account button.woocommerce-Button:focus-visible::after,
	.woocommerce-account a.woocommerce-Button:focus-visible::after {
		right: 2px;
		font-size: 2.5rem;
	}
}

/* Override default Woo float layout on account pages */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

@media (max-width: 767px) {
	.woocommerce-MyAccount-navigation {
		margin-bottom: 0;
	}
}