/**
 * OM 會員儀表板 — 樣式
 *
 * 所有顏色、圓角、邊框、字體都定義為 CSS 自訂變數，集中在 :root。
 * 未來年度換色，只要修改 :root 內的值即可全站套用。
 *
 * 命名：所有 class 與變數一律以 `omd-` 或 `--omd-` 開頭，避免與佈景主題衝突。
 * 作用域：所有元件選擇器都鎖在 `html body.omd-account-page` 之下，避免漏出影響其他頁面。
 *
 * 特異性策略：所有規則使用 `html body.omd-account-page` 雙層選擇器（特異性 0,1,2），
 * 確保贏過 Elementor 的 `body.elementor-default` 等單層選擇器（特異性 0,1,1）。
 * 對核心視覺（背景、字體、顏色）額外加上 !important 防禦頑固覆蓋。
 */

/* ============================================================
   設計 Token
   ============================================================ */
:root {
	/* ----- 背景 ----- */
	--omd-bg-page:       #F5F2ED;
	--omd-bg-page-alt:   #E8E4DE;
	--omd-bg-card:       #ffffff;
	--omd-bg-icon-tile:  #F5F2ED;

	/* ----- 主要色 ----- */
	--omd-primary:       #2C2C2A;
	--omd-accent:        #D4920A;

	/* ----- 文字 ----- */
	--omd-text-primary:   #2C2C2A;
	--omd-text-secondary: #5F5E5A;
	--omd-text-muted:     #888780;
	--omd-text-light:     #B4B2A9;

	/* ----- 邊框 ----- */
	--omd-border:         0.5px solid rgba(0, 0, 0, 0.10);
	--omd-border-soft:    0.5px solid rgba(0, 0, 0, 0.07);
	--omd-border-strong:  0.5px solid rgba(0, 0, 0, 0.15);

	/* ----- 圓角 ----- */
	--omd-radius-card:    10px;
	--omd-radius-button:  6px;
	--omd-radius-badge:   4px;

	/* ----- Badge ----- */
	--omd-badge-warn-bg:       #FAEEDA;
	--omd-badge-warn-fg:       #633806;
	--omd-badge-progress-bg:   #E6F1FB;
	--omd-badge-progress-fg:   #0C447C;
	--omd-badge-done-bg:       #EAF3DE;
	--omd-badge-done-fg:       #27500A;
	--omd-badge-cancelled-bg:  #F5F0EE;
	--omd-badge-cancelled-fg:  #888780;

	/* ----- 警示 ----- */
	--omd-danger:        #C0392B;

	/* ----- 字體 ----- */
	--omd-font-serif:    'Noto Serif TC', 'Songti TC', serif;
	--omd-font-sans:     -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Noto Sans TC', 'Helvetica Neue', Arial, sans-serif;

	/* ----- 排版 ----- */
	--omd-sidebar-width:        220px;
	--omd-content-max:          720px;
	--omd-mobile-breakpoint:    768px;
	--omd-tabbar-height:        56px;
	--omd-tabbar-total:         calc(var(--omd-tabbar-height) + env(safe-area-inset-bottom, 0px));

	/* ----- 動畫 ----- */
	--omd-transition:    150ms ease;
}

/* ============================================================
   全域作用域 — 只在會員中心頁面套用
   用 html body 雙層 + !important 確保贏過 Elementor / Themify
   ============================================================ */
html body.omd-account-page {
	background: var(--omd-bg-page) !important;
	font-family: var(--omd-font-serif) !important;
	color: var(--omd-text-primary) !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 防止 tab bar 蓋住頁尾內容（行動裝置下會 fixed bottom） */
@media (max-width: 767.98px) {
	html body.omd-account-page {
		padding-bottom: var(--omd-tabbar-total) !important;
	}
}

/* ============================================================
   Badge — 訂單狀態
   ============================================================ */
html body.omd-account-page .omd-badge {
	display: inline-block;
	font-size: 11px;
	font-weight: 500;
	padding: 3px 8px;
	border-radius: var(--omd-radius-badge);
	white-space: nowrap;
	line-height: 1.5;
}

html body.omd-account-page .omd-badge--warn       { background: var(--omd-badge-warn-bg);      color: var(--omd-badge-warn-fg); }
html body.omd-account-page .omd-badge--progress   { background: var(--omd-badge-progress-bg);  color: var(--omd-badge-progress-fg); }
html body.omd-account-page .omd-badge--done       { background: var(--omd-badge-done-bg);      color: var(--omd-badge-done-fg); }
html body.omd-account-page .omd-badge--cancelled  { background: var(--omd-badge-cancelled-bg); color: var(--omd-badge-cancelled-fg); }
html body.omd-account-page .omd-badge--default    { background: var(--omd-bg-page-alt);        color: var(--omd-text-secondary); }

/* ============================================================
   通用：卡片、區塊標籤、空狀態
   ============================================================ */
html body.omd-account-page .omd-card {
	background: var(--omd-bg-card);
	border: var(--omd-border);
	border-radius: var(--omd-radius-card);
	margin-bottom: 10px;
}

html body.omd-account-page .omd-card-pad {
	padding: 16px;
}

html body.omd-account-page .omd-section-label {
	font-size: 11px;
	font-weight: 500;
	color: var(--omd-text-light);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

html body.omd-account-page .omd-empty-state {
	text-align: center;
	padding: 32px 16px;
}

html body.omd-account-page .omd-empty-state__icon {
	color: var(--omd-text-light);
	margin-bottom: 12px;
	display: inline-block;
}

html body.omd-account-page .omd-empty-state__title {
	font-size: 13px;
	color: var(--omd-text-muted);
	margin: 0 0 6px;
}

html body.omd-account-page .omd-empty-state__desc {
	font-size: 12px;
	color: var(--omd-text-light);
	line-height: 1.7;
	margin: 0;
}

/* ============================================================
   WooCommerce 會員中心版面接管
   ============================================================ */

/* 隱藏 WooCommerce 預設標題（已在側欄 / tab bar 提供導覽） */
html body.omd-account-page .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:first-child:empty {
	display: none !important;
}

/* ------------------------------------------------------------
   頁面標題列「會員中心」
   - 不在 .woocommerce 內，是獨立浮在米白頁面上的標題
   - 透過 the_content filter 注入到 [woocommerce_my_account] shortcode 之前
   ------------------------------------------------------------ */
html body.omd-account-page .omd-page-title-bar {
	max-width: 940px;
	margin: 32px auto 16px;
	padding: 0 24px;
	background: transparent;
}

html body.omd-account-page .omd-page-title {
	font-family: var(--omd-font-serif);
	font-weight: 700;
	font-size: 28px;
	color: var(--omd-text-primary);
	margin: 0;
	padding-bottom: 18px;
	border-bottom: var(--omd-border-soft);
	letter-spacing: 0.02em;
	line-height: 1.4;
}

@media (max-width: 767.98px) {
	html body.omd-account-page .omd-page-title-bar {
		margin: 16px auto 12px;
		padding: 0 16px;
	}

	html body.omd-account-page .omd-page-title {
		font-size: 22px;
		padding-bottom: 12px;
	}
}

/* ------------------------------------------------------------
   桌機：layout 對齊 mockup 的 .browser/.sidebar/.content 結構
   - .woocommerce       = .browser 框架（米白底 + 邊框 + 圓角，包住整個 layout）
   - 側欄                = 貼齊容器左邊的白色 panel（無圓角、只有 border-right）
   - 內容區              = 透明，米白從容器透出
   ------------------------------------------------------------ */
@media (min-width: 768px) {
	html body.omd-account-page .woocommerce-account .woocommerce {
		display: grid !important;
		grid-template-columns: var(--omd-sidebar-width) 1fr !important;
		gap: 0 !important;
		max-width: calc(var(--omd-sidebar-width) + var(--omd-content-max) + 32px) !important;
		margin: 0 auto 40px !important;
		padding: 0 !important;
		background: var(--omd-bg-page) !important;
		border: var(--omd-border) !important;
		border-radius: var(--omd-radius-card) !important;
		overflow: hidden !important;
		align-items: stretch !important;
	}

	html body.omd-account-page .woocommerce-MyAccount-navigation {
		background: var(--omd-bg-card) !important;
		border: none !important;
		border-right: var(--omd-border-soft) !important;
		border-radius: 0 !important;
		padding: 24px 0 !important;
		float: none !important;
		width: 100% !important;
		margin: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		min-height: 100%;
	}

	html body.omd-account-page .woocommerce-MyAccount-content {
		background: transparent !important;
		float: none !important;
		width: 100% !important;
		padding: 28px 32px !important;
		margin: 0 !important;
	}
}

/* ------------------------------------------------------------
   手機：單欄、米白底，隱藏側欄（用底部 tab bar 取代）
   ------------------------------------------------------------ */
@media (max-width: 767.98px) {
	html body.omd-account-page .woocommerce-account .woocommerce {
		display: block !important;
		padding: 0 16px !important;
		background: transparent !important;
		border: none !important;
		border-radius: 0 !important;
		max-width: none !important;
		margin: 0 !important;
	}

	html body.omd-account-page .woocommerce-MyAccount-navigation {
		display: none !important;
	}

	html body.omd-account-page .woocommerce-MyAccount-content {
		width: 100% !important;
		float: none !important;
		padding: 0 !important;
		background: transparent !important;
	}
}

/* ============================================================
   帳戶頁：「基本資料」h2 — 與「變更密碼」legend 同視覺
   ============================================================ */
html body.omd-account-page .omd-account-section-title {
	font-family: var(--omd-font-serif) !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	color: var(--omd-text-primary) !important;
	margin: 0 0 16px !important;
	padding: 0 0 8px !important;
	border-bottom: var(--omd-border-soft) !important;
}

/* ============================================================
   桌機側欄 — 用戶資訊
   ============================================================ */
html body.omd-account-page .omd-sidebar-user {
	padding: 0 20px 20px;
	border-bottom: var(--omd-border-soft);
	margin-bottom: 8px;
}

html body.omd-account-page .omd-sidebar-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--omd-text-primary);
	margin: 0;
}

html body.omd-account-page .omd-sidebar-email {
	font-size: 11px;
	color: var(--omd-text-light);
	margin: 2px 0 0;
	word-break: break-all;
}

/* ============================================================
   桌機側欄 — 導覽列表
   ============================================================ */
html body.omd-account-page .woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

html body.omd-account-page .woocommerce-MyAccount-navigation li {
	margin: 0 !important;
	padding: 0 !important;
}

html body.omd-account-page .woocommerce-MyAccount-navigation li a {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 9px 20px !important;
	font-size: 13px !important;
	color: var(--omd-text-secondary) !important;
	text-decoration: none !important;
	transition: color var(--omd-transition), background var(--omd-transition);
}

html body.omd-account-page .woocommerce-MyAccount-navigation li a:hover {
	color: var(--omd-text-primary) !important;
	background: rgba(0, 0, 0, 0.02);
}

html body.omd-account-page .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--omd-text-primary) !important;
	font-weight: 500;
	background: var(--omd-bg-page) !important;
}

html body.omd-account-page .omd-nav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: inherit;
	flex-shrink: 0;
}

html body.omd-account-page .omd-nav-icon .omd-icon {
	display: block;
}

html body.omd-account-page .omd-nav-label {
	display: inline-block;
}

/* ============================================================
   桌機側欄 — 分隔線 + 登出
   ============================================================ */
html body.omd-account-page .omd-nav-divider {
	border: none;
	border-top: var(--omd-border-soft);
	margin: 8px 0;
}

html body.omd-account-page .omd-logout-btn--sidebar {
	display: flex !important;
	align-items: center;
	gap: 10px;
	padding: 9px 20px !important;
	font-size: 13px !important;
	color: var(--omd-danger) !important;
	text-decoration: none !important;
	margin-top: auto;
	transition: background var(--omd-transition);
}

html body.omd-account-page .omd-logout-btn--sidebar:hover {
	background: rgba(192, 57, 43, 0.04);
}

/* ============================================================
   手機底部 Tab Bar
   ============================================================ */
.omd-tab-bar {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: var(--omd-bg-card);
	border-top: var(--omd-border);
	padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
	z-index: 9000;
}

@media (max-width: 767.98px) {
	html body.omd-account-page .omd-tab-bar {
		display: flex !important;
	}
}

.omd-tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 4px 0;
	text-decoration: none !important;
	color: var(--omd-text-light);
	transition: color var(--omd-transition);
}

.omd-tab-item:hover,
.omd-tab-item:focus {
	color: var(--omd-text-secondary);
}

.omd-tab-item--active {
	color: var(--omd-text-primary) !important;
}

.omd-tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
}

.omd-tab-label {
	font-size: 10px;
	font-family: var(--omd-font-sans);
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* ============================================================
   WooCommerce 預設訊息（success / info / error）視覺
   ============================================================ */
html body.omd-account-page .woocommerce-message,
html body.omd-account-page .woocommerce-info,
html body.omd-account-page .woocommerce-error {
	background: var(--omd-bg-card);
	border: var(--omd-border);
	border-radius: var(--omd-radius-card);
	border-left: 3px solid var(--omd-primary);
	padding: 12px 16px;
	font-size: 13px;
	color: var(--omd-text-primary);
	margin-bottom: 16px;
	box-shadow: none;
}

html body.omd-account-page .woocommerce-error {
	border-left-color: var(--omd-danger);
}

html body.omd-account-page .woocommerce-message {
	border-left-color: var(--omd-badge-done-fg);
}

/* ============================================================
   總覽頁 — 容器
   ============================================================ */
html body.omd-account-page .omd-overview {
	width: 100%;
}

/* ============================================================
   總覽頁 — 問候語
   ============================================================ */
html body.omd-account-page .omd-greeting {
	padding: 8px 0 14px;
}

html body.omd-account-page .omd-greeting__lead {
	font-size: 13px;
	color: var(--omd-text-muted);
	margin: 0;
}

html body.omd-account-page .omd-greeting__name {
	font-size: 22px;
	font-weight: 500;
	color: var(--omd-text-primary);
	margin: 3px 0 0;
	line-height: 1.4;
}

@media (max-width: 767.98px) {
	html body.omd-account-page .omd-greeting__name {
		font-size: 18px;
	}
}

/* ============================================================
   總覽頁 — 個人化提示卡
   ============================================================ */
html body.omd-account-page .omd-hint-card {
	background: var(--omd-bg-card);
	border: var(--omd-border);
	border-radius: var(--omd-radius-card);
	padding: 14px 18px;
	margin-bottom: 14px;
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

html body.omd-account-page .omd-hint-card__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--omd-text-light);
	margin-top: 8px;
	flex-shrink: 0;
}

html body.omd-account-page .omd-hint-card__text {
	font-size: 13px;
	color: var(--omd-text-secondary);
	line-height: 1.6;
	margin: 0;
}

html body.omd-account-page .omd-hint-card__text strong {
	color: var(--omd-text-primary);
	font-weight: 500;
}

/* ============================================================
   總覽頁 — 兩欄區（桌機 article | recent orders）
   ============================================================ */
html body.omd-account-page .omd-two-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-bottom: 14px;
}

@media (min-width: 768px) {
	html body.omd-account-page .omd-two-col {
		grid-template-columns: 1fr 1fr;
	}
}

/* ============================================================
   總覽頁 — 文章推薦卡
   ============================================================ */
html body.omd-account-page .omd-article-card {
	display: flex;
	flex-direction: column;
	background: var(--omd-bg-card);
	border: var(--omd-border);
	border-radius: var(--omd-radius-card);
	overflow: hidden;
	text-decoration: none !important;
	color: inherit;
	transition: transform var(--omd-transition), box-shadow var(--omd-transition);
}

html body.omd-account-page .omd-article-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

html body.omd-account-page .omd-article-card__img {
	width: 100%;
	height: 160px;
	background-color: var(--omd-bg-page-alt);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

@media (min-width: 768px) {
	html body.omd-account-page .omd-article-card__img {
		height: 120px;
	}
}

html body.omd-account-page .omd-article-card__img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--omd-text-light);
}

html body.omd-account-page .omd-article-card__body {
	padding: 14px 16px;
}

html body.omd-account-page .omd-article-card__tag {
	font-size: 10px;
	font-family: var(--omd-font-sans);
	color: var(--omd-text-light);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: 0 0 6px;
}

html body.omd-account-page .omd-article-card__title {
	font-size: 14px;
	font-weight: 500;
	color: var(--omd-text-primary);
	line-height: 1.5;
	margin: 0 0 6px;
}

html body.omd-account-page .omd-article-card__excerpt {
	font-size: 12px;
	color: var(--omd-text-muted);
	line-height: 1.6;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ============================================================
   總覽頁 — 最近訂單
   ============================================================ */
html body.omd-account-page .omd-recent-orders {
	padding: 16px;
	margin-bottom: 0;
}

html body.omd-account-page .omd-recent-orders .omd-section-label {
	margin-bottom: 6px;
}

html body.omd-account-page .omd-order-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 11px 0;
	border-bottom: var(--omd-border-soft);
	text-decoration: none !important;
	color: inherit;
	transition: background var(--omd-transition);
}

html body.omd-account-page .omd-order-row:hover {
	background: rgba(0, 0, 0, 0.015);
	border-radius: 4px;
}

html body.omd-account-page .omd-order-row:last-of-type {
	border-bottom: none;
}

html body.omd-account-page .omd-order-row__main {
	flex: 1;
	min-width: 0;
}

html body.omd-account-page .omd-order-row__name {
	font-size: 13px;
	font-weight: 500;
	color: var(--omd-text-primary);
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

html body.omd-account-page .omd-order-row__date {
	font-size: 11px;
	color: var(--omd-text-light);
	margin: 2px 0 0;
}

html body.omd-account-page .omd-recent-orders__view-all {
	display: block;
	text-align: right;
	font-size: 12px;
	color: var(--omd-text-light);
	text-decoration: none !important;
	margin-top: 10px;
	transition: color var(--omd-transition);
}

html body.omd-account-page .omd-recent-orders__view-all:hover {
	color: var(--omd-text-secondary);
}

/* ============================================================
   稍後階段會加入：
   - .omd-order-item     訂單列表項（Phase 2C）
   - .omd-menu-item      帳戶頁選單項（Phase 2D）
   ============================================================ */