/**
 * @third-party:WooCommerce
 * My Account 會員中心視覺接管（Phase 2）。
 *
 * 只在 is_account_page() 載入（見 WooCommerceIntegration::enqueue_woocommerce_account_styles）。
 * 機能零改動 —— 純外皮：把 WC My Account 原生 DOM（navigation / dashboard / orders / downloads /
 * addresses / account-details）+ 我們自產的「我的訂閱」卡片，全部用 design token 上色排版。
 *
 * 規範：
 * - 顏色一律 var(--hz-color-NN)（dt-16 語意：bg 01-04 / 文字 07-10 / accent 14 / 狀態 17-19 / 邊框 20-21）。
 * - 間距一律 var(--hz-gap-NN)（GapDomain spacing scale）；我方自產 markup 另用 .hz-flow/gap/pad-NN utility。
 * - 全部 scope 在 .woocommerce-account 底下，不外洩其他頁面。
 * - 互動元素（按鈕）內部 padding 允許用固定值（命中區，非元素間距）。
 * - 不進 Tailwind input（避免 purge），由 enqueue helper 直接載入。
 */

/* ============================================================
 * 版面：navigation + content 併排（桌機），手機堆疊
 * ============================================================ */
.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hz-gap-08);
	color: var(--hz-color-09);
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .ct-acount-nav {
	flex: 0 0 240px;
	max-width: 240px;
}

.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 320px;
	min-width: 0;
}

/* ============================================================
 * 側欄導航
 * ============================================================ */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--hz-gap-02);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a {
	display: block;
	padding: var(--hz-gap-04) var(--hz-gap-05);
	border-radius: var(--hz-button-01-radius, 8px);
	color: var(--hz-color-09);
	text-decoration: none;
	font-weight: 500;
	line-height: 1.4;
	transition: background-color .15s ease, color .15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation-link a:focus-visible {
	background-color: var(--hz-color-02);
	color: var(--hz-color-07);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
	background-color: var(--hz-color-14);
	color: var(--hz-color-11);
}

/* ============================================================
 * 內容區共用：標題 / 段落 / 連結
 * ============================================================ */
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3 {
	color: var(--hz-color-07);
	margin-block: 0 var(--hz-gap-04);
}

.woocommerce-account .woocommerce-MyAccount-content p {
	color: var(--hz-color-09);
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.hz-mc-sub-card__buy) {
	color: var(--hz-color-14);
}

/* ============================================================
 * 表格（orders / downloads）
 * ============================================================ */
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--hz-color-21);
	border-radius: var(--hz-button-01-radius, 8px);
	overflow: hidden;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table th,
.woocommerce-account .woocommerce-MyAccount-content .shop_table th {
	background-color: var(--hz-color-02);
	color: var(--hz-color-07);
	text-align: start;
	padding: var(--hz-gap-04) var(--hz-gap-05);
	font-weight: 600;
}

.woocommerce-account .woocommerce-MyAccount-content .woocommerce-table td,
.woocommerce-account .woocommerce-MyAccount-content .shop_table td {
	padding: var(--hz-gap-04) var(--hz-gap-05);
	border-top: 1px solid var(--hz-color-21);
	color: var(--hz-color-09);
	vertical-align: middle;
}

/* ============================================================
 * 地址卡（addresses）
 * ============================================================ */
.woocommerce-account .woocommerce-Addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--hz-gap-06);
	margin-block-start: var(--hz-gap-05);
}

.woocommerce-account .woocommerce-Address {
	border: 1px solid var(--hz-color-20);
	border-radius: var(--hz-button-01-radius, 8px);
	padding: var(--hz-gap-06);
	background-color: var(--hz-color-01);
}

.woocommerce-account .woocommerce-Address-title h3 {
	margin-block: 0 var(--hz-gap-03);
}

/* ============================================================
 * 表單（edit-address / edit-account）
 * ============================================================ */
.woocommerce-account .woocommerce-MyAccount-content form .woocommerce-form-row label,
.woocommerce-account .woocommerce-MyAccount-content form .form-row label {
	display: block;
	margin-block-end: var(--hz-gap-02);
	color: var(--hz-color-08);
	font-weight: 500;
}

.woocommerce-account .woocommerce-MyAccount-content form input.input-text,
.woocommerce-account .woocommerce-MyAccount-content form select,
.woocommerce-account .woocommerce-MyAccount-content form textarea {
	width: 100%;
	padding: var(--hz-gap-03) var(--hz-gap-04);
	border: 1px solid var(--hz-color-20);
	border-radius: var(--hz-button-01-radius, 8px);
	background-color: var(--hz-color-01);
	color: var(--hz-color-09);
}

.woocommerce-account .woocommerce-MyAccount-content form input.input-text:focus,
.woocommerce-account .woocommerce-MyAccount-content form select:focus,
.woocommerce-account .woocommerce-MyAccount-content form textarea:focus {
	outline: 2px solid var(--hz-color-14);
	outline-offset: 1px;
	border-color: var(--hz-color-14);
}

.woocommerce-account .woocommerce-MyAccount-content form .woocommerce-form-row {
	margin-block-end: var(--hz-gap-05);
}

/* ============================================================
 * 按鈕（互動元素內部 padding 用固定值 = 命中區，允許）
 * ============================================================ */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button {
	display: inline-block;
	padding: .625rem 1.25rem;
	border-radius: var(--hz-button-01-radius, 8px);
	background-color: var(--hz-color-14);
	color: var(--hz-color-11);
	border: 1px solid var(--hz-color-14);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: opacity .15s ease;
}

.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Button:hover {
	opacity: .88;
}

/* 次要按鈕（如「取消」/ view）用外框款 */
.woocommerce-account .woocommerce-MyAccount-content .button.wc-forward,
.woocommerce-account .woocommerce-MyAccount-content a.button.view {
	background-color: transparent;
	color: var(--hz-color-14);
}

/* ============================================================
 * WC 通知（message / info / error）
 * ============================================================ */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error {
	border-radius: var(--hz-button-01-radius, 8px);
	padding: var(--hz-gap-04) var(--hz-gap-05);
	border-inline-start: 3px solid;
}

.woocommerce-account .woocommerce-message {
	background-color: var(--hz-color-02);
	border-color: var(--hz-color-18);
	color: var(--hz-color-09);
}

.woocommerce-account .woocommerce-info {
	background-color: var(--hz-color-02);
	border-color: var(--hz-color-14);
	color: var(--hz-color-09);
}

.woocommerce-account .woocommerce-error {
	background-color: var(--hz-color-02);
	border-color: var(--hz-color-17);
	color: var(--hz-color-09);
	list-style: none;
}

/* ============================================================
 * Dashboard 快速入口卡（我方自產：MemberCenterService::dashboard_quicknav）
 * ============================================================ */
.hz-mc-quicknav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.hz-mc-quicknav__item a {
	display: flex;
	flex-direction: column;
	gap: var(--hz-gap-02);
	height: 100%;
	padding: var(--hz-gap-06);
	border: 1px solid var(--hz-color-20);
	border-radius: var(--hz-button-01-radius, 8px);
	background-color: var(--hz-color-01);
	color: var(--hz-color-07);
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.hz-mc-quicknav__item a:hover,
.hz-mc-quicknav__item a:focus-visible {
	border-color: var(--hz-color-14);
	background-color: var(--hz-color-02);
}

.hz-mc-quicknav__label {
	font-weight: 600;
}

.hz-mc-quicknav__desc {
	color: var(--hz-color-10);
	font-size: .875em;
}

/* ============================================================
 * 我的訂閱卡片（我方自產：MemberSubscriptionView / MemberCenterService::render_card）
 * ============================================================ */
.hz-mc-sub-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hz-mc-sub-card {
	border: 1px solid var(--hz-color-20);
	border-radius: var(--hz-button-01-radius, 8px);
	padding: var(--hz-gap-06);
	background-color: var(--hz-color-01);
}

.hz-mc-sub-card.is-expired {
	background-color: var(--hz-color-02);
	opacity: .92;
}

.hz-mc-sub-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hz-gap-03);
}

.hz-mc-sub-card__name {
	font-weight: 600;
	font-size: 1.0625em;
	color: var(--hz-color-07);
}

.hz-mc-badge {
	display: inline-block;
	padding: .1875rem .625rem;
	border-radius: 999px;
	font-size: .8125em;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.hz-mc-badge--active {
	background-color: var(--hz-color-18);
	color: var(--hz-color-11);
}

.hz-mc-badge--expired {
	background-color: var(--hz-color-21);
	color: var(--hz-color-10);
}

.hz-mc-badge--revoked {
	background-color: var(--hz-color-17);
	color: var(--hz-color-11);
}

.hz-mc-sub-card__meta {
	margin: 0;
}

.hz-mc-sub-card__row {
	display: flex;
	gap: var(--hz-gap-03);
}

.hz-mc-sub-card__row dt {
	flex: 0 0 5em;
	color: var(--hz-color-10);
}

.hz-mc-sub-card__row dd {
	margin: 0;
	color: var(--hz-color-09);
}

.hz-mc-sub-card__order {
	color: var(--hz-color-14);
}

.hz-mc-sub-card__actions {
	display: flex;
	flex-wrap: wrap;
}

.hz-mc-sub-card__buy {
	display: inline-block;
	padding: .5rem 1rem;
	border-radius: var(--hz-button-01-radius, 8px);
	border: 1px solid var(--hz-color-14);
	color: var(--hz-color-14);
	text-decoration: none;
	font-weight: 600;
}

.hz-mc-sub-card__buy:hover {
	background-color: var(--hz-color-14);
	color: var(--hz-color-11);
}

/* 空狀態 */
.hz-mc-empty {
	padding: var(--hz-gap-08) var(--hz-gap-06);
	text-align: center;
	color: var(--hz-color-10);
	border: 1px dashed var(--hz-color-20);
	border-radius: var(--hz-button-01-radius, 8px);
}

/* ============================================================
 * 響應式：手機（navigation 移到上方、滿版）
 * ============================================================ */
@media (max-width: 767px) {
	.woocommerce-account .woocommerce {
		flex-direction: column;
		gap: var(--hz-gap-06);
	}

	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .ct-acount-nav {
		flex-basis: auto;
		max-width: none;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation ul {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--hz-gap-02);
	}
}