/**
 * My Account design layer.
 *
 * Scoped to body.woocommerce-account so nothing here can leak into the rest of the site.
 *
 * Colour intent: the theme accent is a lime that measures 1.94:1 (#8BCD03) and 1.24:1
 * (#BEFA45) against white -- far below the 4.5:1 WCAG asks of body text, which is why it
 * read as washed out rather than as an accent. Interactive states move to ink + the brand
 * cyan, and green is demoted from decoration to data: it now appears only to mean "this
 * license is live".
 *
 * Nav icons are CSS masks over inline SVG, so they inherit the link colour in every state
 * and survive theme updates (no navigation.php override needed).
 */

body.woocommerce-account {
	--apmd-ink: #0f1729;          /* 17.9:1 on white */
	--apmd-slate: #5a6779;        /*  5.8:1 on white, 5.5:1 on --apmd-surface */
	--apmd-line: #e4e8ef;
	--apmd-surface: #f7f9fc;
	--apmd-accent-soft: #e8f4fb;

	/* Two variants per hue. The bright one is for graphics only -- bars, dots, focus
	   rings -- where WCAG asks for 3:1. The -text one is darkened to clear 4.5:1, because
	   the same hue set as 11-15px type is what made the old lime unreadable. */
	--apmd-accent: #0091d5;       /*  3.5:1 -- graphics */
	--apmd-accent-text: #0077b0;  /*  4.9:1 -- links, button fills */
	--apmd-live: #1f9d55;         /*  3.5:1 -- status dot */
	--apmd-live-text: #177f43;    /*  5.1:1 -- status label */
	--apmd-warn: #8f5600;         /*  6.0:1 */
	--apmd-alert: #c2352c;        /*  5.5:1 */

	--apmd-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* -------------------------------------------------------------------------
 * Navigation rail
 * ---------------------------------------------------------------------- */

body.woocommerce-account .woocommerce-MyAccount-navigation > div > ul.menu {
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--apmd-surface);
	border: 1px solid var(--apmd-line);
	border-radius: 14px;
}

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

body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li > a {
	/* Fallback icon for any endpoint added later. Every rule below is deliberately one
	   class more specific than this so it wins regardless of source order. */
	--apmd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7.5'/%3E%3C/svg%3E");
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	border-radius: 9px;
	color: var(--apmd-slate);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
	transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

/* The theme hangs a lime bullet off :before and a 30px spacer off :after. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li > a::after {
	display: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li > a::before {
	content: "";
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin: 0;
	border: 0;
	position: static;
	font-size: 0;
	background-color: currentColor;
	background-image: none;
	opacity: 0.7;
	-webkit-mask-image: var(--apmd-icon);
	mask-image: var(--apmd-icon);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transition: opacity 0.18s ease;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li > a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li > a:focus-visible {
	color: var(--apmd-ink);
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 23, 41, 0.06), 0 0 0 1px var(--apmd-line);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li > a:hover::before,
body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li > a:focus-visible::before {
	opacity: 1;
}

/* Overrides the theme's global a:active lime. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li > a:active {
	color: var(--apmd-ink);
}

/* One unmistakable "you are here": solid ink, cyan leading bar. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li.is-active > a,
body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li.is-active > a:hover,
body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li.is-active > a:active {
	color: #fff;
	background: var(--apmd-ink);
	box-shadow: inset 3px 0 0 var(--apmd-accent);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li.is-active > a::before {
	opacity: 1;
}

/* Grouping carries meaning: what you bought / how the account is set up / leaving. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li.woocommerce-MyAccount-navigation-link--edit-address,
body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: 9px;
	padding-top: 9px;
	border-top: 1px solid var(--apmd-line);
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li.woocommerce-MyAccount-navigation-link--customer-logout > a:hover {
	color: var(--apmd-alert);
}

/* --- Icons ------------------------------------------------------------- */

body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li.woocommerce-MyAccount-navigation-link--dashboard > a {
	--apmd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1.6'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1.6'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1.6'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1.6'/%3E%3C/svg%3E");
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li.woocommerce-MyAccount-navigation-link--orders > a {
	--apmd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5l9-4.2 9 4.2v9l-9 4.2-9-4.2z'/%3E%3Cpath d='M3 7.5l9 4.2 9-4.2'/%3E%3Cpath d='M12 11.7v9'/%3E%3C/svg%3E");
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li.woocommerce-MyAccount-navigation-link--hosting > a {
	--apmd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='6.5' rx='2'/%3E%3Crect x='3' y='13.5' width='18' height='6.5' rx='2'/%3E%3Cpath d='M6.8 7.25h.01M6.8 16.75h.01'/%3E%3C/svg%3E");
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li.woocommerce-MyAccount-navigation-link--subscriptions > a {
	--apmd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.5-6'/%3E%3Cpath d='M20.5 3.5v5h-5'/%3E%3Cpath d='M12 7.8V12l2.8 1.8'/%3E%3C/svg%3E");
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li.woocommerce-MyAccount-navigation-link--downloads > a {
	--apmd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v11'/%3E%3Cpath d='M7.2 9.8l4.8 4.8 4.8-4.8'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E");
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li.woocommerce-MyAccount-navigation-link--edit-address > a {
	--apmd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s6.8-5.5 6.8-10.8a6.8 6.8 0 1 0-13.6 0C5.2 15.5 12 21 12 21z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E");
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li.woocommerce-MyAccount-navigation-link--payment-methods > a {
	--apmd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' 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 10h19'/%3E%3Cpath d='M6.5 15h3.5'/%3E%3C/svg%3E");
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li.woocommerce-MyAccount-navigation-link--edit-account > a {
	--apmd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 20a7.2 7.2 0 0 1 14.4 0'/%3E%3C/svg%3E");
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li.woocommerce-MyAccount-navigation-link--customer-logout > a {
	--apmd-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 20H5.8A1.8 1.8 0 0 1 4 18.2V5.8A1.8 1.8 0 0 1 5.8 4h3.7'/%3E%3Cpath d='M15.2 16.2L19.5 12l-4.3-4.2'/%3E%3Cpath d='M19.5 12H9.8'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------
 * Content
 * ---------------------------------------------------------------------- */

body.woocommerce-account .woocommerce-MyAccount-content {
	color: var(--apmd-ink);
}

body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button) {
	color: var(--apmd-accent-text);
	text-decoration: none;
}

body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):hover {
	color: var(--apmd-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):active {
	color: var(--apmd-accent-text);
}

body.woocommerce-account .woocommerce-MyAccount-content h2 {
	margin: 0 0 16px;
	font-size: 19px;
	letter-spacing: -0.01em;
	color: var(--apmd-ink);
}

/* --- Tables ------------------------------------------------------------ */

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	border: 1px solid var(--apmd-line);
	border-radius: 12px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
	padding: 12px 16px;
	background: var(--apmd-surface);
	border-bottom: 1px solid var(--apmd-line);
	color: var(--apmd-slate);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	text-align: left;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody th {
	padding: 14px 16px;
	background: transparent;
	border-top: 1px solid var(--apmd-line);
	font-size: 15px;
	vertical-align: middle;
}

body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:first-child > td,
body.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:first-child > th {
	border-top: 0;
}

/* --- Buttons ----------------------------------------------------------- */

body.woocommerce-account .woocommerce-MyAccount-content .button,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button {
	display: inline-block;
	padding: 9px 16px;
	border: 1px solid var(--apmd-ink);
	border-radius: 8px;
	background: var(--apmd-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

body.woocommerce-account .woocommerce-MyAccount-content .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button:hover {
	background: var(--apmd-accent-text);
	border-color: var(--apmd-accent-text);
	color: #fff;
}

/* --- Notices -----------------------------------------------------------
 * WooCommerce emits the action link *before* the message text in the source, and the
 * theme lays the notice out as a centred flex row -- so "Resend" rendered inline ahead of
 * the sentence and read as part of it. Stacking into a column puts the message first and
 * drops the action onto its own row. That also lets the icon align to the first line
 * instead of floating in the middle of a two-line notice.
 *
 * Selectors carry both body classes to out-specify the theme's `body.woocommerce-page`
 * rules; `!important` appears only on the two properties the theme itself marks.
 * ------------------------------------------------------------------- */

body.woocommerce-account.woocommerce-page .woocommerce-info {
	--apmd-notice-ink: var(--apmd-accent-text);
	--apmd-notice-bg: #e8f4fb;
	--apmd-notice-line: #c5e2f3;
}

body.woocommerce-account.woocommerce-page .woocommerce-message,
body.woocommerce-account.woocommerce-page .woocommerce-notice--success {
	--apmd-notice-ink: var(--apmd-live-text);
	--apmd-notice-bg: #e9f6ef;
	--apmd-notice-line: #c2e3d0;
}

body.woocommerce-account.woocommerce-page .woocommerce-error,
body.woocommerce-account.woocommerce-page .woocommerce-notice--error {
	--apmd-notice-ink: var(--apmd-alert);
	--apmd-notice-bg: #fdeceb;
	--apmd-notice-line: #f6cbc7;
}

body.woocommerce-account.woocommerce-page .woocommerce-info,
body.woocommerce-account.woocommerce-page .woocommerce-message,
body.woocommerce-account.woocommerce-page .woocommerce-error,
body.woocommerce-account.woocommerce-page .woocommerce-notice--success,
body.woocommerce-account.woocommerce-page .woocommerce-notice--error {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	min-height: 0;
	margin: 0 0 28px;
	padding: 18px 22px 18px 54px !important;
	border: 1px solid var(--apmd-notice-line);
	border-radius: 10px !important;
	background: var(--apmd-notice-bg);
	color: var(--apmd-ink);
	font-size: 15px;
	line-height: 1.55;
}

/* Core adds an ::after clearfix for the floated button; as a flex item it would render as
   an empty third row. */
body.woocommerce-account.woocommerce-page .woocommerce-info::after,
body.woocommerce-account.woocommerce-page .woocommerce-message::after,
body.woocommerce-account.woocommerce-page .woocommerce-error::after {
	display: none;
}

body.woocommerce-account.woocommerce-page .woocommerce-info::before,
body.woocommerce-account.woocommerce-page .woocommerce-message::before,
body.woocommerce-account.woocommerce-page .woocommerce-error::before,
body.woocommerce-account.woocommerce-page .woocommerce-notice--success::before,
body.woocommerce-account.woocommerce-page .woocommerce-notice--error::before {
	top: 18px;
	left: 20px;
	margin: 0;
	transform: none;
	color: var(--apmd-notice-ink);
}

/* Secondary action: the message is the point, the button is the follow-up. */
body.woocommerce-account.woocommerce-page .woocommerce-info .button,
body.woocommerce-account.woocommerce-page .woocommerce-message .button,
body.woocommerce-account.woocommerce-page .woocommerce-error .button {
	order: 1;
	float: none;
	margin: 0;
	padding: 8px 15px;
	border: 1px solid var(--apmd-notice-line);
	border-radius: 8px;
	background: #fff;
	color: var(--apmd-notice-ink);
	font-size: 14px;
	font-weight: 550;
	line-height: 1.4;
}

body.woocommerce-account.woocommerce-page .woocommerce-info .button:hover,
body.woocommerce-account.woocommerce-page .woocommerce-message .button:hover,
body.woocommerce-account.woocommerce-page .woocommerce-error .button:hover {
	border-color: var(--apmd-notice-ink);
	background: var(--apmd-notice-ink);
	color: #fff;
}

/* "Resend" is an action, not navigation -- the wc-forward arrow misdescribes it. */
body.woocommerce-account.woocommerce-page .woocommerce-info .button.wc-forward::after,
body.woocommerce-account.woocommerce-page .woocommerce-message .button.wc-forward::after,
body.woocommerce-account.woocommerce-page .woocommerce-error .button.wc-forward::after {
	content: none;
}

@media (max-width: 767px) {
	body.woocommerce-account.woocommerce-page .woocommerce-info,
	body.woocommerce-account.woocommerce-page .woocommerce-message,
	body.woocommerce-account.woocommerce-page .woocommerce-error,
	body.woocommerce-account.woocommerce-page .woocommerce-notice--success,
	body.woocommerce-account.woocommerce-page .woocommerce-notice--error {
		padding: 16px 16px 16px 48px !important;
	}
}

/* -------------------------------------------------------------------------
 * Shared
 * ---------------------------------------------------------------------- */

body.woocommerce-account .woocommerce-MyAccount-navigation a:focus-visible,
body.woocommerce-account .woocommerce-MyAccount-content a:focus-visible,
body.woocommerce-account .woocommerce-MyAccount-content button:focus-visible {
	outline: 2px solid var(--apmd-accent);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	body.woocommerce-account .woocommerce-MyAccount-navigation > div > ul.menu {
		border-radius: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li > a,
	body.woocommerce-account .woocommerce-MyAccount-navigation ul.menu li > a::before,
	body.woocommerce-account .woocommerce-MyAccount-content .button,
	body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button {
		transition: none;
	}
}