/**
 * @third-party:PowerCourse
 *
 * PowerCourse(J7 / Tailwind + DaisyUI)樣式覆蓋
 *
 * Loaded by: canvas/src/Services/HeaderFooter/WooCommerceIntegration.php
 *            (enqueue_powercourse_styles())
 *
 * Plugin 用 Tailwind + DaisyUI v3 short-name variables(--p / --pc / --b1 等 oklch)
 * 控制色彩,主 class prefix 是 .pc-*。我們不覆蓋 DaisyUI variable 本身(要轉 oklch
 * 格式麻煩,且其他用 DaisyUI 的 plugin 可能也受影響),改用直接 selector + !important
 * 把 hauzii hex token 寫到 .pc-* / .bg-base-* / .pc-alert-* / SVG fill 等位置。
 *
 * Selector 限定策略:
 * - .pc-* prefix 本身有 plugin namespace → 直接用即可
 * - 通用 DaisyUI utility(.bg-base-100 / .text-base-content / hr.bg-base-300 / .stroke-info)
 *   → 用 :has([class*="pc-"]) 或 ancestor selector 限定到 PowerCourse 範圍內,
 *   避免將來其他用 DaisyUI 的 plugin 被誤套(:has() 支援 Chrome 105+ /
 *   Safari 15.4+ / Firefox 121+,2022 後普及)。
 *
 * SVG fill 覆蓋:plugin 給 SVG 寫 inline fill="var(--fallback-p, oklch(var(--p)/1))"。
 * SVG presentation attribute 的 specificity 為 0,任何 stylesheet rule 都直接贏,
 * 加 !important 是過度防禦但無害。
 */

/* === PowerCourse Override === */

/* Card 容器 — :has([class*="pc-"]) 限定「裡面有 .pc-* 元素」的 .bg-base-100,
   不覆蓋其他用 DaisyUI 但無 PowerCourse 元件的 plugin。
   .pc-alert-info 已有 pc-* 前綴,精準不需限定。 */
.bg-base-100:has([class*="pc-"]),
.pc-alert-info {
	background-color: var(--hz-color-02) !important;
	border-color: var(--hz-color-02) !important;
}

/* Card / alert 內文字色 — .text-base-content 是 DaisyUI utility,
   限定到 PowerCourse 容器內(.pc-* 容器或 .bg-base-100:has(.pc-*)) */
.bg-base-100:has([class*="pc-"]) .text-base-content,
.pc-alert-info,
.pc-alert-info span,
.pc-alert-info .text-base-content {
	color: var(--hz-color-09) !important;
}

/* Alert info icon stroke(SVG)— .stroke-info 是 DaisyUI utility,
   限定到 .pc-alert-info 內 */
.pc-alert-info .stroke-info {
	stroke: var(--hz-color-07) !important;
}

/* Card 內分隔線(.bg-base-300 用在 hr,DaisyUI utility)—
   限定到 PowerCourse card 內 */
.bg-base-100:has([class*="pc-"]) hr.bg-base-300 {
	background-color: var(--hz-color-03) !important;
}

/* Primary badge(課程資訊區段的圓形 icon 容器)— badge 本身是 DaisyUI
   primary 藍,內含的 svg inline stroke="#ffffff" 白色 icon。整體
   視覺看起來「藍色 icon」,實際是「藍底 + 白 icon」。覆蓋 badge bg
   為 color.04 深棕,白色 icon 在深底上對比佳。 */
.pc-badge-primary {
	background-color: var(--hz-color-04) !important;
	border-color: var(--hz-color-04) !important;
	color: var(--hz-color-11) !important;
}

/* Accent badge(課程進度狀態提示 — 「未完成」等)— DaisyUI accent 預設
   通常是綠/橘,改用 color.14 brand 紅棕讓「狀態提醒」明顯 */
.pc-badge-accent {
	background-color: var(--hz-color-14) !important;
	border-color: var(--hz-color-14) !important;
	color: var(--hz-color-11) !important;
}

/* Secondary button(課程章節「標記為已完成」按鈕)— DaisyUI secondary
   預設通常紫/粉,改用 color.04 跟主 CTA 同色(完成標記也是正向動作)。
   若想跟 primary 視覺區隔,可改 color.14 brand 紅棕。 */
.pc-btn-secondary {
	background-color: var(--hz-color-04) !important;
	color: var(--hz-color-11) !important;
	border-color: var(--hz-color-04) !important;
}
.pc-btn-secondary:hover {
	background-color: var(--hz-color-04) !important;
	border-color: var(--hz-color-04) !important;
	opacity: 0.85 !important;
}

/* Primary 實心按鈕(立即購買 / 前往教室 / 送出)— .pc-* 自帶 plugin
   namespace,精準,不需限定;.pc-btn-primary.pc-add-to-cart-link
   chain 用更高 specificity 蓋 Blocksy inline `.pc-add-to-cart-link
   { bg: --color-primary !important }`(同 specificity 它會贏載入順序) */
.pc-btn-primary,
.pc-btn-primary.pc-add-to-cart-link {
	background-color: var(--hz-color-04) !important;
	color: var(--hz-color-11) !important;
	border-color: var(--hz-color-04) !important;
}
.pc-btn-primary:hover,
.pc-btn-primary.pc-add-to-cart-link:hover {
	background-color: var(--hz-color-04) !important;
	border-color: var(--hz-color-04) !important;
	opacity: 0.85 !important;
}

/* Outline 變體(加入購物車 icon button)— 透明底 + 深色邊/字,hover 反白成實心 */
.pc-btn-primary.pc-btn-outline {
	background-color: transparent !important;
	color: var(--hz-color-04) !important;
	border-color: var(--hz-color-04) !important;
}
.pc-btn-primary.pc-btn-outline:hover {
	background-color: var(--hz-color-04) !important;
	color: var(--hz-color-11) !important;
	border-color: var(--hz-color-04) !important;
	opacity: 1 !important;
}

/* Outline button 內 SVG fill — plugin 用 inline fill="var(--fallback-p, ...)"。
   SVG presentation attribute specificity 0,stylesheet rule 直接贏,
   加 !important 是過度防禦但無害。 */
.pc-btn-primary.pc-btn-outline svg {
	fill: var(--hz-color-04) !important;
}
.pc-btn-primary.pc-btn-outline:hover svg {
	fill: var(--hz-color-11) !important;
}

/* === PowerCourse Tabs Nav(說明/章節/問答/留言/評價)===
   #courses-product__tabs-nav 是 id namespace(specificity 0,1,0,0)直接贏,
   不需 :has() 限定;裡面 div 沒 .pc-* 前綴所以前面的 .bg-base-100 規則
   match 不到,需獨立覆蓋。 */

/* Tabs 容器 bg — 純白 → color.01 米白,跟 page bg 融合 */
#courses-product__tabs-nav .bg-base-100 {
	background-color: var(--hz-color-01) !important;
}

/* Inactive tab 字色 — DaisyUI text-base-content/30 灰 → color.10 muted */
#courses-product__tabs-nav [class*="text-base-content"] {
	color: var(--hz-color-10) !important;
}

/* Active tab(章節 .active)+ Hover tab — DaisyUI primary 藍 → color.04 深棕。
   Tailwind v4 編譯出 `#tw :is(.[&_.active]:!border-primary .active)`
   specificity 0,1,2,0(html#tw + 2 class),我們需要 `#tw` 前綴湊出
   0,2,1,0(2 id + 1 class)才贏。 */
#tw #courses-product__tabs-nav .active,
#tw #courses-product__tabs-nav > div > div:hover {
	color: var(--hz-color-04) !important;
	border-color: var(--hz-color-04) !important;
}

/* === .pc-title h2 — plugin 加 border-left: 4px solid var(--p) 藍裝飾 === */
.pc-title {
	border-left-color: var(--hz-color-04) !important;
}

/* === PowerCourse Classroom Sidebar(/classroom/* 頁面)===
   #pc-sider__main 是 plugin classroom sidebar root,id namespace 強 specificity。
   所有 selector 加 #tw 前綴,湊到 2 id 贏 Tailwind v4 編譯出的
   `#tw :is(.xxx)`(0,1,2,0)0,2,1,0。 */

/* Chapter list current item / hover bg — DaisyUI bg-primary/10 透明藍 → color.02 米色 */
#tw #pc-sider__main-chapters li[class*="bg-primary"],
#tw #pc-sider__main-chapters li:hover {
	background-color: var(--hz-color-02) !important;
}

/* Chapter list 內 text-primary(章節標題)→ color.04 */
#tw #pc-sider__main-chapters [class*="text-primary"],
#tw #pc-sider__main-chapters li a {
	color: var(--hz-color-04) !important;
}

/* Chapter icon SVG fill(inline 用 var(--p),需 !important 蓋 SVG presentation attribute) */
#tw #pc-sider__main-chapters svg path {
	fill: var(--hz-color-04) !important;
}

/* Sidebar 頂部課程名連結 — plugin 只設 hover:text-primary,default state 跑
   browser/Blocksy link 預設藍。要顯式設 default color.07(heading 深字)
   + hover color.04(brand) */
#tw #pc-sider__main > a {
	color: var(--hz-color-07) !important;
}
#tw #pc-sider__main > a:hover {
	color: var(--hz-color-04) !important;
}

/* Sidebar section header「課程章節」(font-bold span,標題下方)→ color.07 heading。
   結構:#pc-sider__main > div(.flex.justify-between)> span.font-bold */
#tw #pc-sider__main > div > span.font-bold {
	color: var(--hz-color-07) !important;
}

/* Sidebar 內 muted 文字(章節數量 / 返回連結等用 .text-gray-400)→ color.10 muted */
#tw #pc-sider__main span.text-gray-400 {
	color: var(--hz-color-10) !important;
}

/* Progress bar(pc-progress-primary)— DaisyUI primary 藍 → color.04。
   <progress> 元素的 fill 用 vendor pseudo elements 控制(WebKit / Moz) */
.pc-progress-primary {
	accent-color: var(--hz-color-04) !important;
	color: var(--hz-color-04) !important;
}
.pc-progress-primary::-webkit-progress-value {
	background-color: var(--hz-color-04) !important;
}
.pc-progress-primary::-moz-progress-bar {
	background-color: var(--hz-color-04) !important;
}

/* Plugin inline style 用 `color: var(--fallback-p, oklch(var(--p)/1))` 顯示
   DaisyUI primary 藍(如進度條 % 數字)— attribute selector match
   inline style 含 --fallback-p 的元素,強制覆蓋為 color.04。
   --fallback-p 是 PowerCourse 獨有變數名,等同於精準到 plugin 範圍。 */
[style*="--fallback-p"] {
	color: var(--hz-color-04) !important;
}