/*
 * Ennoble Modern My Account - frontend styles
 * No inline styles; customizable via CSS variables.
 */

.ennoble-mma {
	/* SaaS-grade defaults (customizable via Elementor + CSS overrides) */
	--ennoble-app-bg: #F6F7FB;
	--ennoble-container-max: 1320px;
	--ennoble-pad-top: 48px;
	--ennoble-pad-bottom: 64px;
	--ennoble-pad-x: 16px;
	--ennoble-sidebar-width: 260px;

	--ennoble-accent: #334155;
	--ennoble-surface: #FFFFFF;
	--ennoble-card-bg: #FAFAFA;
	--ennoble-text: #0f172a;
	--ennoble-muted: #64748b;
	--ennoble-border: rgba(0, 0, 0, 0.08);

	--ennoble-radius: 16px;
	--ennoble-radius-content: 18px;
	--ennoble-radius-pill: 10px;
	--ennoble-gap: 16px;

	--ennoble-shadow-nav: 0 10px 30px rgba(0, 0, 0, 0.06);
	--ennoble-shadow-content: 0 20px 50px rgba(0, 0, 0, 0.08);
	--ennoble-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);
	--ennoble-font-family: inherit;
	--ennoble-font-size: 14px;
	--ennoble-line-height: 1.6;

	color: var(--ennoble-text);
	font-family: var(--ennoble-font-family);
	font-size: var(--ennoble-font-size);
	line-height: var(--ennoble-line-height);
	background: var(--ennoble-app-bg);
	width: 100%;
}

.ennoble-mma__app {
	max-width: var(--ennoble-container-max);
	margin: 0 auto;
	padding: var(--ennoble-pad-top) var(--ennoble-pad-x) var(--ennoble-pad-bottom);
}

.ennoble-mma__shell {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ennoble-gap);
}

.ennoble-mma__nav {
	background: var(--ennoble-surface);
	border: 1px solid var(--ennoble-border);
	border-radius: var(--ennoble-radius);
	box-shadow: var(--ennoble-shadow-nav);
	padding: 20px;
}

.ennoble-mma__navToggle {
	width: 100%;
	min-height: 44px;
	border-radius: var(--ennoble-radius-pill);
	border: 1px solid var(--ennoble-border);
	background: var(--ennoble-surface);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ennoble-text);
}

.ennoble-mma__navToggle:focus-visible {
	outline: 2px solid var(--ennoble-accent);
	outline-offset: 2px;
}

.ennoble-mma__navToggleChevron {
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.6;
}

.ennoble-mma__navPanel {
	margin-top: 12px;
}

.ennoble-mma__menu {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-auto-flow: row;
	gap: 4px;
}

.ennoble-mma__section + .ennoble-mma__section {
	margin-top: 14px;
}

.ennoble-mma__sectionTitle {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ennoble-muted);
	margin: 0 0 8px;
	padding: 0 10px;
}

.ennoble-mma__menuLink {
	display: grid;
	grid-template-columns: 20px 1fr;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 12px;
	border-radius: var(--ennoble-radius-pill);
	text-decoration: none;
	color: var(--ennoble-text);
	line-height: 1.2;
	outline: none;
	position: relative;
}

.ennoble-mma--no-icons .ennoble-mma__menuLink {
	grid-template-columns: 1fr;
}

.ennoble-mma__menuItem.is-active .ennoble-mma__menuLink,
.ennoble-mma__menuLink:hover,
.ennoble-mma__menuLink:focus {
	background: rgba(0, 0, 0, 0.04);
	background: color-mix(in srgb, var(--ennoble-accent) 8%, transparent);
}

.ennoble-mma__menuItem.is-active .ennoble-mma__menuLink::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 999px;
	background: var(--ennoble-accent);
}

.ennoble-mma__menuLink:focus-visible {
	outline: 2px solid var(--ennoble-accent);
	outline-offset: 2px;
}

.ennoble-mma__icon {
	font-size: 18px;
	width: 18px;
	height: 18px;
	color: var(--ennoble-muted);
}

.ennoble-mma__menuItem.is-active .ennoble-mma__icon {
	color: var(--ennoble-accent);
}

.ennoble-mma__label {
	font-weight: 500;
	font-size: 14px;
}

.ennoble-mma__content {
	min-width: 0;
}

.ennoble-mma__card {
	background: var(--ennoble-surface);
	border: 1px solid var(--ennoble-border);
	border-radius: var(--ennoble-radius-content);
	box-shadow: var(--ennoble-shadow-content);
	padding: 32px;
}

.ennoble-mma__header {
	margin: 0 0 18px;
}

.ennoble-mma__kicker {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ennoble-muted);
	margin: 0 0 6px;
}

.ennoble-mma__title {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}

.ennoble-mma__desc {
	font-size: 14px;
	color: var(--ennoble-muted);
	margin: 8px 0 0;
}

/* Tabs mode (optional): nav becomes horizontal scroll */
.ennoble-mma--nav-tabs .ennoble-mma__menu {
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	overflow-x: auto;
	padding: 10px;
	gap: 8px;
}

.ennoble-mma--nav-tabs .ennoble-mma__menuLink {
	grid-template-columns: 20px 1fr;
	white-space: nowrap;
}

/* Desktop: sidebar layout */
@media (min-width: 960px) {
	.ennoble-mma__shell {
		grid-template-columns: var(--ennoble-sidebar-width) 1fr;
		align-items: start;
	}

	.ennoble-mma--nav-tabs .ennoble-mma__shell {
		grid-template-columns: 1fr;
	}

	.ennoble-mma__navToggle {
		display: none;
	}

	.ennoble-mma__navPanel {
		margin-top: 0;
	}
}

/* Make Woo content sit nicely inside our card */
.ennoble-mma__card .woocommerce,
.ennoble-mma__card .woocommerce-MyAccount-content {
	float: none;
	width: auto;
}

/* Remove big Woo-style heading when our header is present */
.ennoble-mma__card .woocommerce-MyAccount-content > h2:first-child,
.ennoble-mma__card .woocommerce-MyAccount-content > h3:first-child {
	display: none;
}

.ennoble-mma__card h1,
.ennoble-mma__card h2,
.ennoble-mma__card h3 {
	color: var(--ennoble-text);
}

.ennoble-mma__card a {
	color: var(--ennoble-accent);
}

.ennoble-mma__card a:focus-visible,
.ennoble-mma__card button:focus-visible,
.ennoble-mma__card input:focus-visible,
.ennoble-mma__card select:focus-visible,
.ennoble-mma__card textarea:focus-visible {
	outline: 2px solid var(--ennoble-accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.ennoble-mma * {
		scroll-behavior: auto;
		transition: none;
		animation: none;
	}
}

.ennoble-mma__card .button,
.ennoble-mma__card button,
.ennoble-mma__card input[type="submit"] {
	border-radius: var(--ennoble-radius-pill);
	min-height: 40px;
}

/* Address cards */
.ennoble-mma__card .woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 960px) {
	.ennoble-mma__card .woocommerce-Addresses {
		grid-template-columns: 1fr 1fr;
	}
}

.ennoble-mma__card .woocommerce-Address {
	background: var(--ennoble-card-bg);
	border: 1px solid var(--ennoble-border);
	border-radius: 14px;
	padding: 24px;
	box-shadow: var(--ennoble-shadow-soft);
}

.ennoble-mma__card .woocommerce-Address-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 12px;
}

.ennoble-mma__card .woocommerce-Address-title h3 {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}

.ennoble-mma__card .woocommerce-Address-title .edit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0 12px;
	border-radius: var(--ennoble-radius-pill);
	border: 1px solid var(--ennoble-border);
	background: rgba(0, 0, 0, 0.03);
	text-decoration: none;
	color: var(--ennoble-text);
	font-size: 14px;
	font-weight: 500;
}

.ennoble-mma__card .woocommerce-Address address {
	color: var(--ennoble-muted);
	font-style: normal;
	line-height: 1.6;
}