/**
 * HP Blocksy Support — Account / Dashboard Pages
 *
 * User account, vendor dashboard, HP tabbed menus.
 */

/* === Account Page Layout === */
body.hp-template--user-account-page .hp-row {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}

body.hp-template--user-account-page .hp-page__content {
	flex: 1;
	min-width: 0;
}

/* === Account Menu === */
.hp-menu--user-account {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Remove all bullets — Blocksy ::marker still fires even with list-style: none on parent */
.hp-menu--user-account .hp-menu__item,
.hp-menu--user-account .hp-menu__item::marker {
	list-style: none;
	content: none;
}

/* Reset sub-menu ul — Blocksy sets padding-inline-start: 2.5em on all ul */
.hp-menu--user-account .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
}

.hp-menu--user-account .sub-menu .hp-menu__item::marker {
	content: none;
}

.hp-menu--user-account .hp-menu__item {
	margin: 0;
}

.hp-menu--user-account .hp-menu__item a {
	display: flex;
	align-items: center;
	width: 100%; /* needed: without this, justify-content: space-between won't push arrow to right */
	padding: 10px 16px;
	color: var(--hp-color-text, #333);
	text-decoration: none;
	border-radius: var(--hp-border-radius, 3px);
	transition: background var(--duration-fast, 0.15s) var(--ease-default, ease);
	box-sizing: border-box;
}

.hp-menu--user-account .hp-menu__item a:hover {
	background: var(--hp-color-surface, #EFEFEF);
}

.hp-menu--user-account .hp-menu__item--current a {
	background: var(--hp-color-primary, #A8B9A4);
	color: var(--color-text-primary, #3A3530); /* dark on sage green = 5.6:1 ✅ WCAG AA; inverse (#FAF3E3) only 1.8:1 */
	font-weight: 600;
}

/* Count badge — circular, inline with label */
.hp-menu--user-account .hp-menu__item small {
	flex-shrink: 0;
	margin-left: auto;
	width: 1.5rem;
	height: 1.5rem;
	min-width: unset;
	padding: 0;
}

/* === Tabbed Menu === */
.hp-menu--tabbed {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border-bottom: 2px solid var(--hp-color-border, #eee);
	margin-bottom: 24px;
	list-style: none;
	padding: 0;
}

.hp-menu--tabbed .hp-menu__item a {
	display: block;
	padding: 10px 20px;
	color: var(--hp-color-muted, #666666);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	transition: color var(--duration-fast, 0.15s) var(--ease-default, ease), border-color var(--duration-fast, 0.15s) var(--ease-default, ease);
}

.hp-menu--tabbed .hp-menu__item a:hover {
	color: var(--hp-color-text, #333);
}

.hp-menu--tabbed .hp-menu__item--current a {
	color: var(--color-text-primary, #3A3530); /* primary green fails AA as text; underline carries brand color */
	border-bottom-color: var(--hp-color-primary, #A8B9A4);
	font-weight: 600;
}

/* === Vendor Balance Block === */
/* HP sets flex-direction: column via ".hp-vendor__actions--secondary, .hp-vendor__balance" — must override */
.hp-vendor__balance {
	display: flex;
	flex-direction: row; /* override HP's column */
	align-items: center;
	justify-content: space-between;
	text-align: left; /* override HP's center */
	padding: 10px 14px;
	border: 1px solid var(--hp-color-border, #e5e7eb);
	border-radius: var(--radius-sm);
	margin-bottom: 12px;
	background: var(--color-bg-secondary, #FAF9F6);
}

.hp-vendor__balance strong {
	font-size: 12px;
	color: var(--hp-color-muted, #666666);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.hp-vendor__balance > span {
	font-size: 16px;
	font-weight: 700;
	color: var(--hp-color-text, #333333);
}

/* === Account Sidebar Widget === */
body.hp-template--user-account-page .hp-page__sidebar .widget {
	margin-bottom: 24px;
}

body.hp-template--user-account-page .hp-page__sidebar .widget__title {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--hp-color-muted, #666666);
	margin-bottom: 12px;
}

/* === HP Tables (orders, etc.) === */
.hp-table {
	width: 100%;
	border-collapse: collapse;
}

.hp-table th,
.hp-table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid var(--hp-color-border, #eee);
}

.hp-table th {
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--hp-color-muted, #666666);
}

.hp-table tr:hover td {
	background: var(--hp-color-surface, #EFEFEF);
}