/* AthletiSync — My Account shell: navigation, dashboard, and the standard WooCommerce tabs (orders, addresses,
   payment methods, profile). Brand tokens match the marketing site: navy #0B1B3F, blue #1349E4, volt #B4F32D;
   Barlow Condensed for display, Inter for text. Loaded only on account pages (SF_Account::assets()).

   The page is an Elementor "My Account" widget. It is themed through CSS variables, so most of this sets those variables
   instead of fighting selectors; the few hard-coded rules (nav pills, form fields) are beaten with higher specificity. */

body.woocommerce-account {
	--as-navy: #0b1b3f;
	--as-blue: #1349e4;
	--as-blue-d: #0e37b8;
	--as-text: #26324f;
	--as-muted: #566280;
	--as-line: #e1e7f2;
	--as-line-strong: #c9d3e8;
	--as-tint: #f4f7fe;
	--as-blue-tint: #e8efff;
	--as-volt: #b4f32d;
	--as-good-bg: #eaf8d2;
	--as-good-fg: #2f5000;
	--as-warn-bg: #fff3d6;
	--as-warn-fg: #7a4a00;
	--as-bad-bg: #fdeaea;
	--as-bad-fg: #9a1b1b;
	--as-neutral-bg: #eef1f7;
	--as-neutral-fg: #46526b;
	--as-r-card: 8px;
	--as-r: 6px;
	--as-r-tag: 3px;
	--as-shadow: none;
}

/* ---------- theme the Elementor widget through its own variables ---------- */
body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element {
	--sections-background-color: #fff;
	--sections-border-color: var(--as-line);
	--sections-border-radius: var(--as-r-card);
	--sections-padding: 28px 32px;
	--forms-fields-border-radius: var(--as-r);
	--forms-fields-normal-background-color: #fff;
	--forms-fields-focus-background-color: #fff;
	--forms-fields-normal-color: var(--as-text);
	--forms-fields-focus-color: var(--as-navy);
	--forms-labels-color: var(--as-navy);
	--forms-label-spacing: 6px;
	--forms-rows-gap: 18px;
	--forms-buttons-border-radius: var(--as-r);
	--links-normal-color: var(--as-blue);
	--links-hover-color: var(--as-blue-d);
	--general-text-color: var(--as-text);
	--tables-divider-border-color: var(--as-line);
	--tables-buttons-border-color: var(--as-line-strong);
	--tables-button-border-radius: var(--as-r);
	--tables-button-hover-text-color: var(--as-blue);
	font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* =====================================================================
   LEFT NAVIGATION: icon + label, clear active state, grouped, quiet sign-out
   ===================================================================== */
html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation {
	position: sticky;
	top: 112px;
	align-self: flex-start;
}
/* flat list under a navy rule, hairline between rows: no box, no pills, no left accent bar */
html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	background: transparent;
	border: 0;
	border-top: 3px solid var(--as-navy);
	border-radius: 0;
	box-shadow: none;
}
html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--as-line);
}
html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 52px;
	margin: 0;
	padding: 0 16px;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--as-navy);
	font-family: "Barlow Condensed", Inter, sans-serif;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.15s, color 0.15s;
}
/* icons: stroke SVGs as masks so they take the text colour (so hover/active recolour them for free) */
html body.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--as-icon) center / contain no-repeat;
	mask: var(--as-icon) center / contain no-repeat;
	opacity: 1;
}
.woocommerce-MyAccount-navigation-link--dashboard { --as-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--licenses { --as-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='m10.7 12.3 9.8-9.8M17 6l3 3m-5.5-1.5 2.5 2.5'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--orders { --as-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14v18l-3-2-2 2-2-2-2 2-2-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--downloads { --as-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4-4m4 4 4-4'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--payment-methods { --as-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.5'/%3E%3Cpath d='M2.5 10h19M6 15h4'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-address { --as-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--edit-account { --as-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E"); }
.woocommerce-MyAccount-navigation-link--customer-logout { --as-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5M21 12H9'/%3E%3C/svg%3E"); }

html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--as-tint);
	color: var(--as-blue);
}
/* current page: a solid navy row with a volt icon */
html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--as-navy);
	color: #fff;
	box-shadow: none;
}
html body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::before { background-color: var(--as-volt); }
html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a:focus-visible {
	outline: 3px solid rgba(19, 73, 228, 0.5);
	outline-offset: -3px;
}

/* a small "Account" label above the billing/settings group */
html body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--payment-methods { margin-top: 0; padding-top: 0; border-top: 0; }
html body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--payment-methods::before {
	content: "Account";
	display: block;
	padding: 22px 16px 8px;
	border-top: 3px solid var(--as-navy);
	color: var(--as-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
/* sign out: plain sentence-case link, only turns red when you reach for it */
html body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 0; padding-top: 0; border-top: 0; border-bottom: 0; }
html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a { min-height: 48px; color: var(--as-muted); font-family: Inter, system-ui, sans-serif; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }
html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: var(--as-bad-bg); color: var(--as-bad-fg); }

/* =====================================================================
   DASHBOARD
   ===================================================================== */
html body.as-account-shell .elementor-widget-woocommerce-my-account .e-my-account-tab__dashboard .woocommerce-MyAccount-content { padding-block: 0; padding-inline-end: 0; }
html body.as-account-shell .elementor-widget-woocommerce-my-account .e-my-account-tab__dashboard .woocommerce-MyAccount-content-wrapper {
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}
.as-dash { display: grid; gap: 24px; font-family: Inter, system-ui, sans-serif; color: var(--as-text); }
.as-dash__hello { padding: 4px 2px 0; }
.as-dash__eyebrow { display: block; color: var(--as-blue); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.as-dash__title { margin: 6px 0 0; color: var(--as-navy); font-family: "Barlow Condensed", Inter, sans-serif; font-size: 44px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.05; }
.as-dash__sub { margin: 8px 0 0; color: var(--as-muted); font-size: 16px; }

.as-dash__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.as-card {
	min-width: 0;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--as-line);
	border-radius: var(--as-r-card);
	box-shadow: var(--as-shadow);
}
.as-card--plan, .as-card--links, .as-card--wide { grid-column: 1 / -1; }
.as-card__label { margin: 0 0 14px; color: var(--as-muted); font-family: Inter, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.as-card__empty-title { margin: 0; color: var(--as-navy); font-family: "Barlow Condensed", Inter, sans-serif; font-size: 30px; font-weight: 800; line-height: 1.1; }
.as-card__muted { margin: 6px 0 16px; color: var(--as-muted); font-size: 15px; }

/* plan */
.as-plan + .as-plan { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--as-line); }
.as-plan__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.as-plan__tier { color: var(--as-navy); font-family: "Barlow Condensed", Inter, sans-serif; font-size: 44px; font-weight: 800; letter-spacing: -0.01em; line-height: 1; }
.as-plan__meta { margin: 8px 0 0; color: var(--as-text); font-size: 15px; }
.as-plan__days--warn { color: var(--as-warn-fg); font-weight: 600; }
.as-plan__days--bad { color: var(--as-bad-fg); font-weight: 600; }
.as-plan__days--muted { color: var(--as-muted); }
.as-plan__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }

/* badge + chips (dot + text, never colour alone) */
.as-badge, .as-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; border-radius: var(--as-r-tag); background: var(--as-neutral-bg); color: var(--as-neutral-fg); font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.as-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.as-badge--good { background: var(--as-good-bg); color: var(--as-good-fg); }
.as-badge--warn { background: var(--as-warn-bg); color: var(--as-warn-fg); }
.as-badge--bad { background: var(--as-bad-bg); color: var(--as-bad-fg); }
.as-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.as-chip--on { background: var(--as-good-bg); color: var(--as-good-fg); }
.as-chip--pending { background: #dbe6ff; color: var(--as-blue-d); }
.as-chip--past_due { background: var(--as-warn-bg); color: var(--as-warn-fg); }

/* buttons */
.as-account-shell .as-dash .as-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1.5px solid var(--as-line-strong);
	border-radius: var(--as-r);
	background: #fff;
	color: var(--as-navy);
	font: 600 15px/1 Inter, system-ui, sans-serif;
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.08s;
}
.as-account-shell .as-dash .as-btn:hover { background: var(--as-tint); border-color: var(--as-blue); color: var(--as-blue); }
.as-account-shell .as-dash .as-btn:active { transform: translateY(1px) scale(0.985); }
.as-account-shell .as-dash .as-btn:focus-visible, .as-dash a:focus-visible { outline: 3px solid rgba(19, 73, 228, 0.4); outline-offset: 2px; }
.as-account-shell .as-dash .as-btn--primary { background: var(--as-blue); border-color: var(--as-blue); color: #fff; }
.as-account-shell .as-dash .as-btn--primary:hover { background: var(--as-blue-d); border-color: var(--as-blue-d); color: #fff; }
.as-account-shell .as-dash .as-btn--ghost { background: transparent; }

/* recent orders */
.as-orders { margin: 0 0 14px; padding: 0; list-style: none; }
.as-orders li + li { border-top: 1px solid var(--as-line); }
.as-dash .as-orders__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -10px; padding: 12px 10px; border-radius: var(--as-r); color: inherit; text-decoration: none; transition: background-color 0.15s; }
.as-dash .as-orders__row:hover { background: var(--as-tint); }
.as-orders__main { display: grid; gap: 2px; }
.as-orders__main strong { color: var(--as-navy); font-size: 15px; }
.as-orders__main small { color: var(--as-muted); font-size: 13px; }
.as-orders__right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.as-orders__total { color: var(--as-navy); font-size: 15px; font-weight: 600; }
.as-status { display: inline-block; padding: 2px 10px; border-radius: var(--as-r-tag); background: var(--as-neutral-bg); color: var(--as-neutral-fg); font-size: 12px; font-weight: 600; }
.as-status--completed { background: var(--as-good-bg); color: var(--as-good-fg); }
.as-status--processing { background: #dbe6ff; color: var(--as-blue-d); }
.as-status--on-hold, .as-status--pending { background: var(--as-warn-bg); color: var(--as-warn-fg); }
.as-status--failed, .as-status--cancelled { background: var(--as-bad-bg); color: var(--as-bad-fg); }
.as-dash .as-link { color: var(--as-blue); font-size: 15px; font-weight: 600; text-decoration: none; }
.as-dash .as-link:hover { color: var(--as-blue-d); text-decoration: underline; }

/* getting started */
.as-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.as-steps__item { display: flex; gap: 14px; align-items: flex-start; }
.as-steps__mark { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border: 2px solid var(--as-line-strong); border-radius: 50%; color: var(--as-navy); font-size: 14px; font-weight: 800; }
.as-steps__item.is-done .as-steps__mark { background: var(--as-volt); border-color: var(--as-volt); }
.as-steps__body { display: grid; gap: 2px; min-width: 0; }
.as-steps__body strong { color: var(--as-navy); font-size: 15px; }
.as-steps__body strong a { color: var(--as-blue); text-decoration: none; }
.as-steps__body strong a:hover { text-decoration: underline; }
.as-steps__body small { color: var(--as-muted); font-size: 14px; line-height: 1.45; }

/* quick links */
.as-links { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.as-dash .as-links a { color: var(--as-navy); display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; background: var(--as-tint); border: 1px solid transparent; border-radius: var(--as-r); color: var(--as-navy); font-size: 15px; font-weight: 600; text-decoration: none; transition: border-color 0.15s, background-color 0.15s, color 0.15s; }
.as-dash .as-links a::after { content: "\2192"; color: var(--as-muted); transition: transform 0.15s, color 0.15s; }
.as-dash .as-links a:hover { background: #fff; border-color: var(--as-blue); color: var(--as-blue); }
.as-dash .as-links a:hover::after { color: var(--as-blue); transform: translateX(3px); }

/* =====================================================================
   THE STANDARD TABS: orders, addresses, payment methods, profile
   ===================================================================== */
.as-account-shell .woocommerce-MyAccount-content-wrapper { box-shadow: var(--as-shadow); }
.as-account-shell .woocommerce-MyAccount-content h2,
.as-account-shell .woocommerce-MyAccount-content h3 { color: var(--as-navy); font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 800; letter-spacing: -0.005em; }
.as-account-shell .woocommerce-MyAccount-content fieldset { margin: 28px 0 0; padding: 22px 0 0; border: 0; border-top: 1px solid var(--as-line); }
.as-account-shell .woocommerce-MyAccount-content legend { padding: 0 12px 0 0; color: var(--as-navy); font-family: "Barlow Condensed", Inter, sans-serif; font-size: 24px; font-weight: 800; }

/* notices */
.as-account-shell .woocommerce-notices-wrapper .woocommerce-message,
.as-account-shell .woocommerce-notices-wrapper .woocommerce-info,
.as-account-shell .woocommerce-notices-wrapper .woocommerce-error {
	margin: 0 0 20px;
	padding: 14px 18px;
	background: var(--as-tint);
	border: 1px solid var(--as-line);
	border-left: 4px solid var(--as-blue);
	border-radius: var(--as-r);
	color: var(--as-text);
	font-size: 15px;
	list-style: none;
}
.as-account-shell .woocommerce-notices-wrapper .woocommerce-message { background: #f6fce8; border-color: #cfeb9a; border-left-color: #6aa000; }
.as-account-shell .woocommerce-notices-wrapper .woocommerce-error { background: var(--as-bad-bg); border-color: #edc4c4; border-left-color: var(--as-bad-fg); }
.as-account-shell .woocommerce-notices-wrapper .woocommerce-message::before,
.as-account-shell .woocommerce-notices-wrapper .woocommerce-info::before,
.as-account-shell .woocommerce-notices-wrapper .woocommerce-error::before { display: none; }

/* links inside the standard tabs (the widget hard-codes a cyan default with high specificity) */
html body.woocommerce-account .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-Button):not(.as-dash *) { color: var(--as-blue); font-weight: 600; text-decoration: none; }
html body.woocommerce-account .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-Button):not(.as-dash *):hover { color: var(--as-blue-d); text-decoration: underline; }

/* empty states inside a tab ("No saved methods found", "No order has been made yet") */
html body.woocommerce-account .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content .woocommerce-info,
html body.woocommerce-account .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content .woocommerce-message:not(.woocommerce-notices-wrapper *) {
	margin: 0 0 20px;
	padding: 16px 20px;
	background: var(--as-tint);
	border: 1px dashed var(--as-line-strong);
	border-top: 1px dashed var(--as-line-strong);
	border-radius: var(--as-r);
	color: var(--as-muted);
	font-size: 15px;
}
html body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before { color: var(--as-blue); }

/* orders table */
.as-account-shell .woocommerce-orders-table { width: 100%; border: 0; border-collapse: collapse; }
.as-account-shell .woocommerce-orders-table thead th { padding: 12px 10px; border: 0; border-bottom: 1px solid var(--as-line); background: none; color: var(--as-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: left; }
.as-account-shell .woocommerce-orders-table tbody td, .as-account-shell .woocommerce-orders-table tbody th { padding: 16px 10px; border: 0; border-bottom: 1px solid var(--as-line); background: none; color: var(--as-text); font-size: 15px; vertical-align: middle; }
.as-account-shell .woocommerce-orders-table tbody tr:last-child td, .as-account-shell .woocommerce-orders-table tbody tr:last-child th { border-bottom: 0; }
.as-account-shell .woocommerce-orders-table tbody tr:hover td, .as-account-shell .woocommerce-orders-table tbody tr:hover th { background: var(--as-tint); }
.as-account-shell .woocommerce-orders-table__cell-order-number a { color: var(--as-blue); font-weight: 700; text-decoration: none; }
.as-account-shell .woocommerce-orders-table__cell-order-status { font-weight: 600; }
.as-account-shell .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status { color: var(--as-good-fg); }
.as-account-shell .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status { color: var(--as-blue-d); }
.as-account-shell .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
.as-account-shell .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status { color: var(--as-warn-fg); }
.as-account-shell .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
.as-account-shell .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
.as-account-shell .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status { color: var(--as-bad-fg); }

/* buttons inside the account content */
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content .button:not(.as-licenses *),
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content button.woocommerce-Button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1.5px solid var(--as-line-strong);
	border-radius: var(--as-r);
	background: #fff;
	color: var(--as-navy);
	font: 600 15px/1 Inter, system-ui, sans-serif;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content .button:not(.as-licenses *):hover { background: var(--as-tint); border-color: var(--as-blue); color: var(--as-blue); }
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content button.woocommerce-Button,
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content .woocommerce-form button[type="submit"] { background: var(--as-blue); border-color: var(--as-blue); color: #fff; }
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content button.woocommerce-Button:hover,
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce-MyAccount-content .woocommerce-form button[type="submit"]:hover { background: var(--as-blue-d); border-color: var(--as-blue-d); color: #fff; }

/* form fields: the widget hard-codes a flat grey, borderless field; give them a visible edge and a focus ring */
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce .form-row .input-text,
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce .form-row input[type="text"],
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce .form-row input[type="email"],
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce .form-row input[type="password"],
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce .form-row input[type="tel"],
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce .form-row textarea,
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce .form-row select {
	min-height: 46px;
	padding: 10px 14px !important;
	background: #fff !important;
	border: 1.5px solid var(--as-line-strong) !important;
	border-radius: var(--as-r) !important;
	color: var(--as-navy);
	font-family: Inter, sans-serif;
	font-size: 16px !important;
	transition: border-color 0.15s, box-shadow 0.15s;
}
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce .form-row .input-text:focus,
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce .form-row select:focus,
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce .form-row textarea:focus {
	border-color: var(--as-blue) !important;
	box-shadow: 0 0 0 4px rgba(19, 73, 228, 0.15);
	outline: none;
}
html body.woocommerce-account .elementor-widget-woocommerce-my-account .woocommerce .form-row label { color: var(--as-navy); font-size: 14px; font-weight: 600; }
.as-account-shell .woocommerce-MyAccount-content em { color: var(--as-muted); font-size: 13px; }
/* Headings in the standard tabs: the widget forces weight 400 and a 45px margin on every h2/h3, so match its specificity. */
html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab .woocommerce .woocommerce-MyAccount-content h2,
html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab .woocommerce .woocommerce-MyAccount-content h3 {
	margin: 0 0 14px;
	color: var(--as-navy);
	font-family: "Barlow Condensed", Inter, sans-serif;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
}
/* Addresses: title and "Edit" pill sit in a row above the address instead of floating over it */
html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab__edit-address .woocommerce-Addresses { display: grid; gap: 20px; }
html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab__edit-address .woocommerce-Address { margin: 0; padding: 24px; background: #fff; border: 1px solid var(--as-line); border-radius: var(--as-r-card); }
html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab__edit-address .woocommerce-Address address { margin: 0; padding: 0 !important; background: none; border: 0; color: var(--as-text); font-size: 16px; font-style: normal; line-height: 1.7; }
.as-account-shell .woocommerce-MyAccount-content .woocommerce-Address-title { position: static !important; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 0; }
.as-account-shell .woocommerce-MyAccount-content .woocommerce-Address-title h2,
.as-account-shell .woocommerce-MyAccount-content .woocommerce-Address-title h3 { margin: 0 !important; }
html body.woocommerce-account .elementor-widget-woocommerce-my-account .e-my-account-tab .woocommerce .woocommerce-MyAccount-content .woocommerce-Address-title a.edit { position: static !important; float: none !important; margin: 0 !important; inset: auto !important; }
.as-account-shell .woocommerce-MyAccount-content .woocommerce-Address-title a.edit { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; background: var(--as-tint); border-radius: var(--as-r-tag); font-size: 13px; font-weight: 600; text-decoration: none; }


/* =====================================================================
   SCOREBOARD LAYER: square tags, one dark hero panel, big stat numerals.
   Radii/shadows come from --as-r-card / --as-r / --as-r-tag / --as-shadow, so this whole look can be dialled
   back from the variables at the top of the file.
   ===================================================================== */
/* tags: small, square, uppercase (text + dot, never colour alone) */
.as-badge, .as-chip, .as-status { padding: 5px 10px 5px 9px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.as-status { padding: 3px 8px; }

/* card labels get a small square marker */
.as-card__label { display: flex; align-items: center; gap: 10px; }
.as-card__label::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--as-blue); }

/* the plan card is the one dark panel (navy 30%, volt 10%: the brand ratio) */
.as-card--plan { background: var(--as-navy); border-color: var(--as-navy); color: #fff; }
.as-card--plan .as-card__label { color: rgba(255, 255, 255, 0.7); }
.as-card--plan .as-card__label::before { background: var(--as-volt); }
.as-card--plan .as-card__empty-title { color: #fff; }
.as-card--plan .as-card__muted { color: rgba(255, 255, 255, 0.75); }
.as-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: end; }
.as-plan__main { min-width: 0; }
.as-card--plan .as-plan__tier { color: #fff; font-size: 52px; }
.as-card--plan .as-plan__meta { color: rgba(255, 255, 255, 0.82); }
.as-card--plan .as-plan__days--muted { color: rgba(255, 255, 255, 0.6); }
.as-card--plan .as-plan__days--warn { color: #ffd76a; }
.as-card--plan .as-plan__days--bad { color: #ff9a9a; }
.as-card--plan .as-badge { background: rgba(255, 255, 255, 0.12); color: #fff; }
.as-card--plan .as-badge--good { background: var(--as-volt); color: var(--as-navy); }
.as-card--plan .as-badge--warn { background: #ffd76a; color: #4a2c00; }
.as-card--plan .as-badge--bad { background: #ff9a9a; color: #4d0000; }
.as-card--plan .as-chip { background: rgba(255, 255, 255, 0.12); color: #fff; }
.as-card--plan .as-chip--on { background: rgba(180, 243, 45, 0.18); color: var(--as-volt); }
.as-card--plan .as-chip--pending { background: rgba(91, 140, 255, 0.25); color: #cfe0ff; }
.as-card--plan .as-chip--past_due { background: rgba(255, 215, 106, 0.2); color: #ffd76a; }
.as-account-shell .as-card--plan .as-btn { background: transparent; border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.as-account-shell .as-card--plan .as-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; color: #fff; }
.as-account-shell .as-card--plan .as-btn--primary { background: var(--as-volt); border-color: var(--as-volt); color: var(--as-navy); }
.as-account-shell .as-card--plan .as-btn--primary:hover { background: #c8ff4d; border-color: #c8ff4d; color: var(--as-navy); }
.as-card--plan .as-plan + .as-plan, .as-plan + .as-plan { border-top-color: rgba(255, 255, 255, 0.15); }
.as-card--plan :focus-visible { outline-color: var(--as-volt) !important; }
html body.as-account-shell .as-dash .as-card--plan a.as-btn { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: #fff; }
html body.as-account-shell .as-dash .as-card--plan a.as-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; color: #fff; }
html body.as-account-shell .as-dash .as-card--plan a.as-btn.as-btn--primary { background: var(--as-volt); border-color: var(--as-volt); color: var(--as-navy); }
html body.as-account-shell .as-dash .as-card--plan a.as-btn.as-btn--primary:hover { background: #c8ff4d; border-color: #c8ff4d; color: var(--as-navy); }

/* the "days left" stat, scoreboard-style */
.as-plan__stat { display: grid; justify-items: end; align-self: stretch; align-content: end; line-height: 1; text-align: right; }
.as-plan__num { color: var(--as-volt); font-family: "Barlow Condensed", Inter, sans-serif; font-size: 96px; font-weight: 800; letter-spacing: -0.02em; line-height: 0.85; }
.as-plan__stat--warn .as-plan__num { color: #ffd76a; }
.as-plan__stat--bad .as-plan__num { color: #ff9a9a; }
.as-plan__unit { margin-top: 8px; color: rgba(255, 255, 255, 0.75); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }

/* steps: square markers instead of circles */
.as-steps__mark { border-radius: var(--as-r-tag); }

/* licenses card on the licenses tab: same square, flat treatment */
.as-licenses .as-license { border-top: 3px solid var(--as-navy); }
.as-licenses .as-copy { border-radius: var(--as-r); }

/* =====================================================================
   SMALLER SCREENS: the nav becomes a swipeable strip of tabs
   ===================================================================== */
@media (max-width: 900px) {
	html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation { position: static; margin-bottom: 20px; }
	html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		gap: 0;
		overflow-x: auto;
		border-top: 0;
		border-bottom: 1px solid var(--as-line);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	html body.woocommerce-account .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
	html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li { flex: none; width: auto !important; border-bottom: 0; }
	html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li a { width: auto; min-height: 48px; padding: 0 16px; white-space: nowrap; font-size: 17px; }
	html body.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--payment-methods::before { display: none; }
	html body.woocommerce-account .elementor-widget-woocommerce-my-account.elementor-element .e-my-account-tab .woocommerce .woocommerce-MyAccount-navigation ul li.is-active a { background: transparent; color: var(--as-navy); box-shadow: inset 0 -4px 0 var(--as-blue); }
	html body.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a::before { background-color: var(--as-blue); }
	.as-dash__grid { grid-template-columns: 1fr; }
	.as-dash__title, .as-plan__tier { font-size: 38px; }
	.as-card--plan .as-plan__tier { font-size: 44px; }
	.as-plan { grid-template-columns: 1fr; }
	.as-plan__stat { justify-items: start; text-align: left; align-content: start; }
	.as-plan__num { font-size: 72px; }
	.as-card { padding: 20px; }
	.as-account-shell .woocommerce-orders-table thead { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.as-account-shell * { transition: none !important; }
}