/**
 * Menu V8 - Mega Menu Component
 * 
 * Full mega menu styling including tabs, slider, grid layouts
 * 
 * @package Menu_V8
 * @since 2.0.0
 */


/* ===========================================
   Mega Menu Styling (簡化選擇器)
   =========================================== */

/* Mega Menu Parent Item - 直接使用 .mega-menu 類別 */
.unified-v8-nav-item.mega-menu {
position: static;
}

/* Mega Menu Dropdown */
.unified-v8-nav-item.mega-menu > .unified-v8-nav-submenu {
position: absolute;
left: 0;
right: 0;
width: 100%;
max-width: 100%;
min-width: 100vw;
padding: 24px;
display: flex;
flex-wrap: wrap;
gap: 12px;
background: var(--menu-v8-submenu-bg);
box-shadow: var(--menu-v8-shadow-strong);
border-top: 1px solid var(--menu-v8-slideout-border);
/* Animation */
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

/* ★ Hover 顯示 Mega Menu - 使用 !important 覆蓋 base display:none */
.unified-v8-nav-item.mega-menu:not([data-mega-disabled="device"]):hover > .unified-v8-nav-submenu,
.unified-v8-nav-item.mega-menu:not([data-mega-disabled="device"]):focus-within > .unified-v8-nav-submenu,
.unified-v8-nav-item.mega-menu:not([data-mega-disabled="device"]).is-hover > .unified-v8-nav-submenu {
display: flex !important;
opacity: 1;
visibility: visible;
transform: translateY(0);
z-index: 9999;
}

/* Mega Menu Sub-items Grid Layout - 第一層子選單 = Tab 標籤 */
.unified-v8-nav-item.mega-menu > .unified-v8-nav-submenu > .unified-v8-nav-item {
flex: 0 0 auto;
min-width: 180px;
max-width: 220px;
}

/* Mega Menu Level 1 Links (Tab 標籤樣式) */
.unified-v8-nav-item.mega-menu > .unified-v8-nav-submenu > .unified-v8-nav-item > .unified-v8-nav-link {
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--menu-v8-active-bg);
padding-bottom: 8px;
margin-bottom: 8px;
}

/* Mega Menu Level 2 - 孫選單 (Tab 內容區，永遠可見) */
.unified-v8-nav-item.mega-menu > .unified-v8-nav-submenu .unified-v8-nav-submenu,
.unified-v8-nav-item.mega-menu > .unified-v8-nav-submenu .mega-menu-posts-grid {
position: static !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
box-shadow: none;
padding: 0;
background: transparent;
display: block !important;
}

/* Mega Menu Posts Grid Layout */
.mega-menu-posts-grid {
	display: grid !important;
	grid-template-columns: repeat(var(--grid-cols, 3), 1fr);
	gap: 15px;
	padding: 10px 0;
	margin: 0;
	list-style: none;
}

.mega-menu-posts-grid.layout-list {
	display: flex !important;
	flex-direction: column;
	gap: 8px;
}

/* ★ 美化：文章卡片樣式 */
.mega-menu-post-item {
list-style: none;
min-width: 0;
width: 100%;
overflow: hidden;
border-radius: 10px;
background: var(--menu-v8-submenu-bg, #fff);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-menu-post-item:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
transform: translateY(-3px);
}

.mega-menu-post-link {
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--menu-v8-link-color, #333);
transition: all 0.3s ease;
padding: 0;
height: 100%;
}

.mega-menu-post-link:hover {
opacity: 1;
}

.mega-menu-post-thumb {
display: flex;
align-items: center;
justify-content: center;
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: 10px 10px 0 0;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
}

.mega-menu-post-thumb picture {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}

/* 圖片漸層遮罩 */
.mega-menu-post-thumb::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50%;
background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}

.mega-menu-post-item:hover .mega-menu-post-thumb::after {
opacity: 1;
}

.mega-menu-post-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: 10px 10px 0 0;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-menu-post-link:hover .mega-menu-post-thumb img {
transform: scale(1.08);
}

.unified-v8-mega-menu-dropdown.mega-menu-thumb-fit-contain .mega-menu-post-thumb img {
object-fit: contain;
background: transparent;
}

.unified-v8-mega-menu-dropdown.mega-menu-thumb-fit-centered .mega-menu-post-thumb {
padding: 8px;
}

.unified-v8-mega-menu-dropdown.mega-menu-thumb-fit-centered .mega-menu-post-thumb img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}

.unified-v8-mega-menu-dropdown.mega-menu-thumb-fit-contain .mega-menu-post-link:hover .mega-menu-post-thumb img,
.unified-v8-mega-menu-dropdown.mega-menu-thumb-fit-centered .mega-menu-post-link:hover .mega-menu-post-thumb img {
transform: none;
}

.mega-menu-post-content {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px 12px 12px;
min-width: 0;
flex: 1 1 auto;
}

.mega-menu-post-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
font-size: 13px;
line-height: 1.5;
font-weight: 600;
color: var(--menu-v8-slideout-text, #333);
margin: 0;
padding: 0;
min-height: 0;
}

.mega-menu-post-excerpt {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: 12px;
line-height: 1.65;
color: rgba(15, 23, 42, 0.72);
}

.mega-menu-post-meta {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(15, 23, 42, 0.48);
}

.mega-menu-posts-grid.layout-list .mega-menu-post-item,
.mega-menu-posts-grid.layout-compact .mega-menu-post-item {
box-shadow: none;
border-radius: 12px;
}

.mega-menu-posts-grid.layout-list .mega-menu-post-link,
.mega-menu-posts-grid.layout-compact .mega-menu-post-link {
flex-direction: row;
align-items: stretch;
gap: 12px;
padding: 10px 12px;
}

.mega-menu-posts-grid.layout-list .mega-menu-post-thumb,
.mega-menu-posts-grid.layout-compact .mega-menu-post-thumb {
width: 88px;
min-width: 88px;
aspect-ratio: 1 / 1;
border-radius: 10px;
}

.mega-menu-posts-grid.layout-list .mega-menu-post-thumb img,
.mega-menu-posts-grid.layout-compact .mega-menu-post-thumb img {
border-radius: 10px;
}

.mega-menu-posts-grid.layout-list .mega-menu-post-content,
.mega-menu-posts-grid.layout-compact .mega-menu-post-content {
padding: 0;
justify-content: center;
}

.mega-menu-posts-grid.layout-compact .mega-menu-post-item {
background: rgba(255, 255, 255, 0.78);
}

.mega-menu-posts-grid.layout-cards .mega-menu-post-item {
border: 1px solid rgba(15, 23, 42, 0.06);
}

.mega-menu-feature-split {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr);
gap: 18px;
align-items: stretch;
}

.mega-menu-feature-split-primary,
.mega-menu-feature-split-secondary {
list-style: none;
margin: 0;
padding: 0;
}

.mega-menu-feature-split-primary .mega-menu-post-item {
height: 100%;
}

.mega-menu-feature-split-primary .mega-menu-post-thumb {
aspect-ratio: 16 / 10;
}

.mega-menu-feature-split-primary .mega-menu-post-content {
padding: 16px 18px 18px;
gap: 10px;
}

.mega-menu-feature-split-primary .mega-menu-post-title {
font-size: 18px;
line-height: 1.4;
}

.mega-menu-feature-split-primary .mega-menu-post-excerpt {
-webkit-line-clamp: 3;
font-size: 13px;
}

.mega-menu-feature-split-secondary {
display: flex;
flex-direction: column;
gap: 10px;
}

.mega-menu-feature-split-secondary .mega-menu-post-item {
box-shadow: none;
}

@media (max-width: 960px) {
  .mega-menu-feature-split {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Mega Menu Tabbed Layout
   ======================================== */

/* Main Dropdown Container - ★ 美化 */
.unified-v8-mega-menu-dropdown {
display: none;
position: absolute;
top: calc(100% + 4px);
left: 50%;
--mega-menu-enter-transform: translateX(-50%) translateY(12px) scale(0.98);
--mega-menu-open-transform: translateX(-50%) translateY(0) scale(1);
transform: var(--mega-menu-enter-transform);
width: min(var(--mega-menu-width, 90vw), calc(100vw - 32px));
max-width: min(var(--mega-menu-main-width, 1280px), calc(100vw - 32px));
min-width: min(600px, calc(100vw - 32px));
background: var(--menu-v8-submenu-bg, #fff);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.08);
border-top: 3px solid var(--menu-v8-primary, #0073aa);
border-radius: 0 0 12px 12px;
z-index: 9999;
flex-direction: row;
padding: 0 20px 0 0; /* ★ 只有右邊空白 */
overflow: visible; /* 改為 visible 以顯示 ::before */
transform-origin: top center;
transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, clip-path 0.25s ease;
box-sizing: border-box; /* ★ 確保 padding 不增加寬度 */
}

@media (min-width: 1181px) {
.unified-v8-mega-menu-dropdown.mega-menu-width-mode-main {
position: fixed;
top: var(--mega-menu-main-top, 80px);
left: 50%;
width: min(var(--mega-menu-main-width, 1280px), calc(100vw - 32px)) !important;
max-width: min(var(--mega-menu-main-width, 1280px), calc(100vw - 32px)) !important;
min-width: 0;
--mega-menu-enter-transform: translateX(-50%) translateY(12px) scale(0.98);
--mega-menu-open-transform: translateX(-50%) translateY(0) scale(1);
}

.unified-v8-mega-menu-dropdown[data-width-mode="item"][style*="width:100%"],
.unified-v8-mega-menu-dropdown[data-width-mode="item"][style*="width: 100%"],
.unified-v8-mega-menu-dropdown[style*="width:100%"]:not(.mega-menu-width-mode-main),
.unified-v8-mega-menu-dropdown[style*="width: 100%"]:not(.mega-menu-width-mode-main) {
position: fixed;
top: var(--mega-menu-main-top, 80px);
left: 50%;
width: min(var(--mega-menu-main-width, 1280px), calc(100vw - 32px)) !important;
max-width: min(var(--mega-menu-main-width, 1280px), calc(100vw - 32px)) !important;
min-width: 0;
--mega-menu-enter-transform: translateX(-50%) translateY(12px) scale(0.98);
--mega-menu-open-transform: translateX(-50%) translateY(0) scale(1);
}
}

@media (min-width: 769px) and (max-width: 1180px) {
.unified-v8-nav-item.mega-menu > .unified-v8-nav-submenu {
width: calc(100vw - 32px);
max-width: calc(100vw - 32px);
min-width: 0;
max-height: min(72vh, 680px);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}

.unified-v8-mega-menu-dropdown {
width: calc(100vw - 32px);
max-width: calc(100vw - 32px);
min-width: 0;
max-height: min(72vh, 680px);
padding-right: 12px;
}

.mega-menu-tabs-header {
flex-basis: clamp(180px, 24vw, 220px);
max-height: min(72vh, 680px);
overflow-y: auto;
}

.mega-menu-tabs-content {
min-width: 0;
max-height: min(72vh, 680px);
overflow: auto;
overscroll-behavior: contain;
padding: 18px clamp(18px, 3vw, 28px);
}

.mega-menu-posts-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mega-menu-feature-split {
grid-template-columns: 1fr;
}
}

/* ★ 橋接偽元素：填補 4px 間隙，防止滑動時選單關閉 */
.unified-v8-mega-menu-dropdown::after {
content: '';
position: absolute;
top: -10px; /* 覆蓋間隙 + 一些額外空間 */
left: 0;
right: 0;
height: 14px; /* 包含間隙 + 邊框 */
background: transparent;
pointer-events: auto;
}

/* ★ 關閉按鈕（用於點擊模式） */
.mega-menu-close-btn {
width: 32px;
height: 32px;
border: none;
background: rgba(0, 0, 0, 0.05);
border-radius: 50%;
cursor: pointer;
transition: all 0.2s ease;
appearance: none;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}

.unified-v8-nav-item.mega-menu .mega-menu-close-btn svg {
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}

.unified-v8-nav-item.mega-menu .mega-menu-close-btn:hover {
background: var(--menu-v8-close-btn-hover-bg, rgba(220, 53, 69, 0.1));
}

.unified-v8-nav-item.mega-menu .mega-menu-close-btn:hover svg {
stroke: currentColor;
}

.unified-v8-nav-item.mega-menu .mega-menu-close-btn {
display: none; /* 預設隱藏 */
position: absolute;
top: 10px;
right: 10px;
z-index: 100;
}

/* 只有在點擊模式且選單開啟時，才顯示關閉按鈕 */
.unified-v8-nav-item.mega-menu:not([data-mega-disabled="device"]).is-click-mode.is-pinned .mega-menu-close-btn {
display: flex;
}

@keyframes megaMenuFadeIn {
from {
opacity: 0;
transform: translateX(-50%) translateY(-8px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}

/* Hover 顯示 mega menu dropdown (div版) - 排除點擊模式 */
.unified-v8-nav-item.mega-menu:not([data-mega-disabled="device"]):not(.is-click-mode):hover > .unified-v8-mega-menu-dropdown,
.unified-v8-nav-item.mega-menu:not([data-mega-disabled="device"]):not(.is-click-mode):focus-within > .unified-v8-mega-menu-dropdown,
.unified-v8-nav-item.mega-menu:not([data-mega-disabled="device"]).is-pinned > .unified-v8-mega-menu-dropdown,
.unified-v8-nav-item.mega-menu:not([data-mega-disabled="device"]).is-hover > .unified-v8-mega-menu-dropdown {
display: flex !important;
transform: var(--mega-menu-open-transform);
}

@media (hover: none), (pointer: coarse), screen and (max-width: 768px) {
.unified-v8-nav-item.mega-menu:not(.is-pinned):not(.is-hover) > .unified-v8-mega-menu-dropdown {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
}

/* 點擊模式 - 點擊固定後顯示 dropdown */
.unified-v8-nav-item.mega-menu:not([data-mega-disabled="device"]).is-click-mode.is-pinned > .unified-v8-mega-menu-dropdown {
display: flex !important;
transform: var(--mega-menu-open-transform);
}

/* 點擊模式 - 預設隱藏 (不受 hover 影響) */
.unified-v8-nav-item.mega-menu.is-click-mode > .unified-v8-mega-menu-dropdown {
display: none;
}

/* Device-disabled Mega Menu must behave like a normal link and never occupy layout space. */
body.mega-menu-disabled-mobile .unified-v8-nav-item.mega-menu > .unified-v8-nav-submenu,
body.mega-menu-disabled-mobile .unified-v8-nav-item.mega-menu > .unified-v8-mega-menu-dropdown,
body.mega-menu-disabled-tablet .unified-v8-nav-item.mega-menu > .unified-v8-nav-submenu,
body.mega-menu-disabled-tablet .unified-v8-nav-item.mega-menu > .unified-v8-mega-menu-dropdown,
.unified-v8-nav-item.mega-menu[data-mega-disabled="device"] > .unified-v8-nav-submenu,
.unified-v8-nav-item.mega-menu[data-mega-disabled="device"] > .unified-v8-mega-menu-dropdown,
.unified-v8-mega-menu-dropdown[data-mega-disabled="true"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
transform: none !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
height: 0 !important;
max-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
}

body.mega-menu-disabled-mobile .unified-v8-nav-item.mega-menu > .unified-v8-nav-link .unified-v8-nav-arrow,
body.mega-menu-disabled-tablet .unified-v8-nav-item.mega-menu > .unified-v8-nav-link .unified-v8-nav-arrow,
.unified-v8-nav-item.mega-menu[data-mega-disabled="device"] > .unified-v8-nav-link .unified-v8-nav-arrow {
display: none !important;
}

.unified-v8-mega-menu-dropdown.mega-menu-anim-fade {
--mega-menu-enter-transform: translateX(-50%) translateY(0) scale(1);
--mega-menu-open-transform: translateX(-50%) translateY(0) scale(1);
}

.unified-v8-mega-menu-dropdown.mega-menu-anim-slide-up {
--mega-menu-enter-transform: translateX(-50%) translateY(18px) scale(1);
--mega-menu-open-transform: translateX(-50%) translateY(0) scale(1);
}

.unified-v8-mega-menu-dropdown.mega-menu-anim-scale {
--mega-menu-enter-transform: translateX(-50%) translateY(6px) scale(0.94);
--mega-menu-open-transform: translateX(-50%) translateY(0) scale(1);
}

.unified-v8-mega-menu-dropdown.mega-menu-anim-reveal {
clip-path: inset(0 0 100% 0 round 0 0 12px 12px);
--mega-menu-enter-transform: translateX(-50%) translateY(0) scale(1);
--mega-menu-open-transform: translateX(-50%) translateY(0) scale(1);
}

.unified-v8-nav-item.mega-menu:not([data-mega-disabled="device"]):not(.is-click-mode):hover > .unified-v8-mega-menu-dropdown.mega-menu-anim-reveal,
.unified-v8-nav-item.mega-menu:not([data-mega-disabled="device"]):not(.is-click-mode):focus-within > .unified-v8-mega-menu-dropdown.mega-menu-anim-reveal,
.unified-v8-nav-item.mega-menu:not([data-mega-disabled="device"]).is-hover > .unified-v8-mega-menu-dropdown.mega-menu-anim-reveal,
.unified-v8-nav-item.mega-menu:not([data-mega-disabled="device"]).is-click-mode.is-pinned > .unified-v8-mega-menu-dropdown.mega-menu-anim-reveal {
clip-path: inset(0 0 0 0 round 0 0 12px 12px);
}

.unified-v8-mega-menu-dropdown.mega-menu-anim-none {
transition: none;
--mega-menu-enter-transform: translateX(-50%) translateY(0) scale(1);
--mega-menu-open-transform: translateX(-50%) translateY(0) scale(1);
}

/* Tab Headers (左側分類列表) - ★ 美化 */
.mega-menu-tabs-header {
flex: 0 0 200px;
background: var(--mega-tabs-header-bg, linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.05) 100%));
border-right: 1px solid var(--mega-tabs-header-border, var(--menu-v8-slideout-border, #e5e5e5));
padding: 16px 0;
display: flex;
flex-direction: column;
gap: 4px;
}

/* Tab 樣式 CSS 變數 (可透過後台設定覆蓋) */
.unified-v8-mega-menu-dropdown {
--mega-tab-text: var(--menu-v8-slideout-text, #333);
--mega-tab-hover-text: var(--mega-tab-text);
--mega-tab-active-text: #fff;
--mega-tab-bg: transparent;
--mega-tab-hover-bg: rgba(0, 115, 170, 0.08);
--mega-tab-active-bg: var(--menu-v8-primary, #0073aa);
--mega-tab-indicator: var(--menu-v8-primary, #0073aa);
--mega-tabs-header-bg: linear-gradient(135deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.05) 100%);
--mega-tabs-header-border: var(--menu-v8-slideout-border, #e5e5e5);
--mega-tab-active-shadow: rgba(0, 115, 170, 0.3);
--mega-tab-active-indicator: rgba(255,255,255,0.5);
}

.mega-menu-tab-btn {
display: block;
width: calc(100% - 20px);
margin: 0 10px;
padding: 12px 16px;
text-align: left;
background: var(--mega-tab-bg);
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: var(--mega-tab-text);
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
border-left: 0;
position: relative;
overflow: hidden;
text-decoration: none;
}

.mega-menu-tab-btn::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--mega-tab-indicator);
transform: scaleY(0);
transition: transform 0.25s ease;
}

.mega-menu-tab-btn:hover {
background: var(--mega-tab-hover-bg);
color: var(--mega-tab-hover-text);
transform: translateX(4px);
text-decoration: var(--menu-v8-link-hover-decoration, none) !important;
}

.mega-menu-tab-btn:focus-visible {
outline: 2px solid var(--mega-tab-indicator);
outline-offset: 2px;
text-decoration: var(--menu-v8-link-hover-decoration, none) !important;
}

.mega-menu-tab-btn:hover::before {
transform: scaleY(1);
}

.mega-menu-tab-btn.active {
background: var(--mega-tab-active-bg);
color: var(--mega-tab-active-text) !important;
font-weight: 600;
box-shadow: 0 4px 12px var(--mega-tab-active-shadow);
border-color: var(--mega-tab-indicator);
}

.mega-menu-tab-btn.active::before {
transform: scaleY(1);
background: var(--mega-tab-active-indicator);
}


/* Tab Content (右側文章區) */
.mega-menu-tabs-content {
flex: 1;
padding: 20px 30px;
min-height: 300px;
position: relative;
overflow: hidden; /* 確保內容不溢出 */
border-radius: 0 0 12px 0; /* 配合容器圓角 */
}

/* Tab Panel - 預設隱藏 */
.mega-menu-tab-panel {
display: none;
}

.mega-menu-tab-panel.active {
display: block;
}

/* Slide Animation */
.mega-menu-slide-enabled .mega-menu-tab-panel {
opacity: 0;
transform: translateX(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}

.mega-menu-slide-enabled .mega-menu-tab-panel.active {
opacity: 1;
transform: translateX(0);
}

/* View More Button - ★ 美化 */
.mega-menu-view-more {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 20px auto 0; /* 置中 */
padding: 12px 28px;
background: linear-gradient(135deg, var(--menu-v8-primary, #0073aa) 0%, #005a87 100%);
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 600;
border-radius: 25px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(0, 115, 170, 0.3);
}

/* 按鈕已經有 » 符號，不需要額外的箭頭 */

.mega-menu-view-more:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 115, 170, 0.4);
color: #fff;
text-decoration: var(--menu-v8-link-hover-decoration, none);
}

.mega-menu-view-more:focus-visible {
outline: 2px solid var(--menu-v8-primary, #0073aa);
outline-offset: 2px;
text-decoration: var(--menu-v8-link-hover-decoration, none);
}

/* Tab 內容底部間距 */
.mega-menu-tab-panel {
padding-bottom: 10px;
text-align: center; /* 讓 View More 按鈕置中 */
}

/* ========================================
   Mega Menu Slider Navigation
   ======================================== */
.mega-menu-slider-container {
position: relative;
}

/* ★ 美化：導航箭頭 */
.mega-menu-slide-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.mega-menu-slide-btn {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: none;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-radius: 10px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
color: #495057;
}

.mega-menu-slide-btn svg {
stroke: currentColor;
fill: none;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.3s ease;
}

.mega-menu-slide-btn:hover:not(:disabled):not(.is-disabled) {
background: #fff;
color: var(--menu-v8-primary, #0073aa);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
transform: scale(1.08);
border: 1px solid var(--menu-v8-primary, #0073aa);
}

.mega-menu-slide-btn:hover:not(:disabled):not(.is-disabled) svg {
stroke: var(--menu-v8-primary, #0073aa); /* 藍色箭頭 */
transform: scale(1.1);
}

.mega-menu-slide-btn:active:not(:disabled):not(.is-disabled) {
transform: scale(0.95);
background: linear-gradient(135deg, var(--menu-v8-primary, #0073aa) 0%, #005a87 100%);
color: #fff;
}

.mega-menu-slide-btn:disabled,
.mega-menu-slide-btn.is-disabled {
opacity: 0.35;
cursor: default;
background: #eee;
box-shadow: none;
}
.mega-menu-slide-btn.is-disabled {
pointer-events: none;
}

/* ★ 美化：數字指示器 */
.mega-menu-slide-indicator {
font-size: 13px;
font-weight: 600;
color: var(--menu-v8-slideout-text, #333);
min-width: 60px;
text-align: center;
padding: 6px 12px;
background: rgba(0, 0, 0, 0.04);
border-radius: 20px;
}

/* Lazy loading */
.mega-menu-tab-panel.is-loading {
min-height: 120px;
}

.mega-menu-tab-loading {
padding: 24px;
text-align: center;
color: #888;
font-size: 13px;
}

/* Featured block */
.mega-menu-post-item.is-featured {
border: 1px solid rgba(0, 115, 170, 0.35);
background: rgba(0, 115, 170, 0.06);
border-radius: 10px;
padding: 6px;
}

.mega-menu-featured-html {
padding: 12px;
margin-bottom: 12px;
background: #f8f9fb;
border-radius: 10px;
border: 1px dashed rgba(0, 0, 0, 0.08);
}

/* Empty fallback */
.mega-menu-empty {
padding: 24px;
text-align: center;
background: #f7f7f7;
border-radius: 12px;
border: 1px dashed rgba(0, 0, 0, 0.08);
}

.mega-menu-empty-title {
font-weight: 700;
color: #333;
margin-bottom: 6px;
}

.mega-menu-empty-desc {
color: #666;
font-size: 13px;
margin-bottom: 12px;
}

.mega-menu-empty-cta {
display: inline-block;
padding: 8px 14px;
border-radius: 20px;
background: var(--menu-v8-primary, #0073aa);
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 600;
}

.mega-menu-fallback-posts {
padding: 20px;
border-radius: 12px;
background: rgba(15, 23, 42, 0.03);
border: 1px dashed rgba(15, 23, 42, 0.08);
}

.mega-menu-fallback-posts__intro {
margin-bottom: 16px;
text-align: center;
}

/* Hide/show items for slide mode */
.mega-menu-slide-enabled .mega-menu-post-item.hidden {
display: none;
}

.mega-menu-slide-enabled .mega-menu-post-item.visible {
display: block;
}

/* ========================================
   Slide Navigation Position Variants
   ======================================== */

/* 預設：底部置中 (center-bottom) - 主要樣式已在上方定義 */
.mega-menu-slide-nav[data-position="center-bottom"] {
justify-content: center;
}

/* 內容兩側：箭頭放在內容區域左右兩端 (content-sides) */
.mega-menu-slider-container[data-nav-position="content-sides"] {
position: relative;
}

.mega-menu-slider-container[data-nav-position="content-sides"] .mega-menu-slide-nav {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
pointer-events: none;
margin: 0;
padding: 0 10px;
border: none;
background: transparent;
}

.mega-menu-slider-container[data-nav-position="content-sides"] .mega-menu-slide-btn {
pointer-events: auto;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
width: 36px;
height: 36px;
}

.mega-menu-slider-container[data-nav-position="content-sides"] .mega-menu-slide-indicator {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
pointer-events: auto;
}

/* 底部兩側：箭頭放在底部左右兩端，指示器置中 (bottom-sides) */
.mega-menu-slider-container[data-nav-position="bottom-sides"] .mega-menu-slide-nav {
display: flex;
justify-content: space-between;
align-items: center;
}

/* 只有箭頭，無指示器 (arrows-only) */
.mega-menu-slider-container[data-nav-position="arrows-only"] .mega-menu-slide-indicator {
display: none;
}

.mega-menu-slider-container[data-nav-position="arrows-only"] .mega-menu-slide-nav {
gap: 8px;
}

/* 只有指示器，無箭頭 (indicator-only) */
.mega-menu-slider-container[data-nav-position="indicator-only"] .mega-menu-slide-btn {
display: none;
}

/* ========================================
   Mega Menu Color Schemes
   ======================================== */

/* 1. Default / Light (v8-color-scheme-default) */
.unified-v8-mega-menu-dropdown.v8-color-scheme-default {
    --mega-tab-text: #334155;
    --mega-tab-hover-text: #0f172a;
    --mega-tab-active-text: #0f172a;
    --mega-tab-bg: transparent;
    --mega-tab-hover-bg: rgba(15, 23, 42, 0.06);
    --mega-tab-active-bg: #eef2f7;
    --mega-tab-indicator: #0b090a;
    --mega-tabs-header-bg: #f8fafc;
    --mega-tabs-header-border: #e5e7eb;
    --mega-tab-active-shadow: rgba(15, 23, 42, 0.14);
    --mega-tab-active-indicator: rgba(15, 23, 42, 0.22);

    background: #fff;
    border-top-color: #e5e7eb;
    color: #0f172a;
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-default .mega-menu-post-item {
    background: #fff;
    border: 1px solid #edf2f7;
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-default .mega-menu-post-title {
    color: #0f172a;
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-default .mega-menu-post-excerpt {
    color: rgba(15, 23, 42, 0.72);
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-default .mega-menu-post-meta {
    color: rgba(15, 23, 42, 0.48);
}

/* 2. Dark Mode (v8-color-scheme-dark) */
.unified-v8-mega-menu-dropdown.v8-color-scheme-dark {
    --mega-tab-text: #ddd;
    --mega-tab-hover-text: #fff;
    --mega-tab-active-text: #fff;
    --mega-tab-bg: transparent;
    --mega-tab-hover-bg: rgba(255,255,255,0.05);
    --mega-tab-active-bg: #444;
    --mega-tab-indicator: var(--menu-v8-primary, #0073aa);
    --mega-tabs-header-bg: rgba(255,255,255,0.03);
    --mega-tabs-header-border: #333;
    --mega-tab-active-shadow: rgba(0, 0, 0, 0.3);
    --mega-tab-active-indicator: rgba(255,255,255,0.45);
    
    background: #1a1a1a;
    border-top-color: #333;
    color: #eee;
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-dark .mega-menu-post-item {
    background: #252525;
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-dark .mega-menu-post-title {
    color: #eee;
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-dark .mega-menu-post-excerpt {
    color: rgba(238, 238, 238, 0.78);
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-dark .mega-menu-post-meta {
    color: rgba(238, 238, 238, 0.58);
}

/* 3. Ocean (v8-color-scheme-ocean) */
.unified-v8-mega-menu-dropdown.v8-color-scheme-ocean {
    --mega-tab-text: #b5e9ff;
    --mega-tab-hover-text: #fff;
    --mega-tab-active-text: #fff;
    --mega-tab-hover-bg: rgba(124, 228, 255, 0.14);
    --mega-tab-indicator: #7ce4ff;
    --mega-tab-active-bg: rgba(17, 138, 178, 0.28);
    --mega-tabs-header-bg: rgba(3, 55, 73, 0.46);
    --mega-tabs-header-border: rgba(124, 228, 255, 0.22);
    --mega-tab-active-shadow: rgba(124, 228, 255, 0.18);
    --mega-tab-active-indicator: rgba(255,255,255,0.45);

    background: linear-gradient(145deg, #073b4c 0%, #118ab2 100%);
    border-top: 3px solid #7ce4ff;
    color: #f4fbff;
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-ocean .mega-menu-post-item {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-ocean .mega-menu-post-title {
    color: #fff;
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-ocean .mega-menu-post-excerpt {
    color: rgba(244, 251, 255, 0.82);
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-ocean .mega-menu-post-meta {
    color: rgba(244, 251, 255, 0.62);
}

/* 4. Forest (v8-color-scheme-forest) */
.unified-v8-mega-menu-dropdown.v8-color-scheme-forest {
    --mega-tab-text: #d8f3dc;
    --mega-tab-hover-text: #fff;
    --mega-tab-active-text: #fff;
    --mega-tab-hover-bg: rgba(149, 213, 178, 0.14);
    --mega-tab-indicator: #95d5b2;
    --mega-tab-active-bg: rgba(45, 106, 79, 0.28);
    --mega-tabs-header-bg: rgba(11, 47, 34, 0.42);
    --mega-tabs-header-border: rgba(149, 213, 178, 0.24);
    --mega-tab-active-shadow: rgba(149, 213, 178, 0.18);
    --mega-tab-active-indicator: rgba(255,255,255,0.45);

    background: linear-gradient(145deg, #1b4332 0%, #2d6a4f 100%);
    border-top: 3px solid #95d5b2;
    color: #f3fff6;
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-forest .mega-menu-post-item {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-forest .mega-menu-post-title {
    color: #fff;
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-forest .mega-menu-post-excerpt {
    color: rgba(243, 255, 246, 0.82);
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-forest .mega-menu-post-meta {
    color: rgba(243, 255, 246, 0.62);
}

/* 5. Sunset (v8-color-scheme-sunset) */
.unified-v8-mega-menu-dropdown.v8-color-scheme-sunset {
    --mega-tab-text: #ffe4c2;
    --mega-tab-hover-text: #fff;
    --mega-tab-active-text: #fff;
    --mega-tab-hover-bg: rgba(255, 210, 154, 0.16);
    --mega-tab-indicator: #ffd29a;
    --mega-tab-active-bg: rgba(217, 119, 6, 0.28);
    --mega-tabs-header-bg: rgba(124, 45, 18, 0.34);
    --mega-tabs-header-border: rgba(255, 210, 154, 0.25);
    --mega-tab-active-shadow: rgba(255, 210, 154, 0.2);
    --mega-tab-active-indicator: rgba(255,255,255,0.45);

    background: linear-gradient(145deg, #7c2d12 0%, #d97706 100%);
    border-top: 3px solid #ffd29a;
    color: #fff7ed;
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-sunset .mega-menu-post-item {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-sunset .mega-menu-post-title {
    color: #fff;
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-sunset .mega-menu-post-excerpt {
    color: rgba(255, 247, 237, 0.82);
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-sunset .mega-menu-post-meta {
    color: rgba(255, 247, 237, 0.62);
}

/* 6. Glassmorphism (v8-color-scheme-glass) */
.unified-v8-mega-menu-dropdown.v8-color-scheme-glass {
    --mega-tab-text: #333;
    --mega-tab-hover-text: #111;
    --mega-tab-hover-bg: rgba(255, 255, 255, 0.4);
    --mega-tab-indicator: var(--menu-v8-primary, #0073aa);
    --mega-tabs-header-bg: rgba(255, 255, 255, 0.35);
    --mega-tabs-header-border: rgba(255, 255, 255, 0.32);
    --mega-tab-active-shadow: rgba(31, 38, 135, 0.16);
    
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

/* 7. Technology Blue (v8-color-scheme-blue) */
.unified-v8-mega-menu-dropdown.v8-color-scheme-blue {
    --mega-tab-text: #b0c4de;
    --mega-tab-hover-text: #fff;
    --mega-tab-active-text: #fff;
    --mega-tab-hover-bg: rgba(0, 210, 255, 0.12);
    --mega-tab-indicator: #00d2ff;
    --mega-tab-active-bg: rgba(0, 210, 255, 0.2);
    --mega-tabs-header-bg: rgba(255,255,255,0.04);
    --mega-tabs-header-border: rgba(0, 210, 255, 0.18);
    --mega-tab-active-shadow: rgba(0, 210, 255, 0.2);
    --mega-tab-active-indicator: rgba(255,255,255,0.45);
    
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
    border-top: 3px solid #00d2ff;
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-blue .mega-menu-post-item {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-blue .mega-menu-post-title {
    color: #fff;
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-blue .mega-menu-post-excerpt {
    color: rgba(255, 255, 255, 0.82);
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-blue .mega-menu-post-meta {
    color: rgba(255, 255, 255, 0.58);
}

/* 8. Luxury Purple (v8-color-scheme-purple) */
.unified-v8-mega-menu-dropdown.v8-color-scheme-purple {
    --mega-tab-text: #e0b0ff;
    --mega-tab-hover-text: #fff;
    --mega-tab-active-text: #fff;
    --mega-tab-hover-bg: rgba(191, 148, 255, 0.12);
    --mega-tab-indicator: #bf94ff;
    --mega-tab-active-bg: rgba(191, 148, 255, 0.2);
    --mega-tabs-header-bg: rgba(255,255,255,0.04);
    --mega-tabs-header-border: rgba(191, 148, 255, 0.18);
    --mega-tab-active-shadow: rgba(191, 148, 255, 0.2);
    --mega-tab-active-indicator: rgba(255,255,255,0.45);
    
    background: linear-gradient(135deg, #240b36 0%, #4a00e0 100%);
    border-top: 3px solid #bf94ff;
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-purple .mega-menu-post-item {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-purple .mega-menu-post-title {
    color: #fff;
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-purple .mega-menu-post-excerpt {
    color: rgba(255, 255, 255, 0.82);
}

.unified-v8-mega-menu-dropdown.v8-color-scheme-purple .mega-menu-post-meta {
    color: rgba(255, 255, 255, 0.58);
}

.mega-menu-slider-container[data-nav-style="dots"] .mega-menu-slide-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}

.mega-menu-slider-container[data-nav-style="dots"] .mega-menu-slide-dot:hover {
background: rgba(0, 115, 170, 0.4);
transform: scale(1.15);
}

.mega-menu-slider-container[data-nav-style="dots"] .mega-menu-slide-dot.active {
background: linear-gradient(135deg, var(--menu-v8-primary, #0073aa) 0%, #005a87 100%);
transform: scale(1.3);
box-shadow: 0 2px 8px rgba(0, 115, 170, 0.4);
}

/* 活躍 dot 脈動動畫 */
@keyframes dotPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 115, 170, 0.4); }
50% { box-shadow: 0 0 0 6px rgba(0, 115, 170, 0); }
}

.mega-menu-slider-container[data-nav-style="dots"] .mega-menu-slide-dot.active {
animation: dotPulse 2s infinite;
}

/* ★ 特別處理: content-sides + dots 時，JS 會把 indicator 移到 container 層級 */
/* 這些規則針對被移動的 indicator 元素 */
.mega-menu-slider-container[data-nav-position="content-sides"][data-nav-style="dots"] {
padding-bottom: 45px; /* 為底部 dots 預留空間 */
}

.mega-menu-slider-container[data-nav-position="content-sides"][data-nav-style="dots"] .mega-menu-slide-nav {
/* Nav 保持在內容兩側 */
}

/* 被 JS 移動到 container 層級的 indicator - ★ 美化 */
.mega-menu-slide-indicator.dots-bottom-center {
position: absolute !important;
top: auto !important;
bottom: 12px !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
pointer-events: auto;
display: flex;
gap: 10px;
/* Glassmorphism 效果 */
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 10px 20px;
border-radius: 25px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
z-index: 100;
}

/* ========================================
   Tab Position Variants
   ======================================== */

/* Tab 位置: 上方 */
.mega-menu-tabs-top {
flex-direction: column;
}

.mega-menu-tabs-top .mega-menu-tabs-header {
flex: none;
flex-direction: row;
border-right: none;
border-bottom: 1px solid var(--mega-tabs-header-border, var(--menu-v8-slideout-border));
padding: 0;
gap: 0;
overflow-x: auto;
}

.mega-menu-tabs-top .mega-menu-tab-btn {
border-left: none;
border-bottom: 3px solid transparent;
padding: 15px 25px;
white-space: nowrap;
}

.mega-menu-tabs-top .mega-menu-tab-btn.active {
border-bottom-color: var(--mega-tab-indicator);
border-left-color: transparent;
}

/* Tab 位置: 右側 */
.mega-menu-tabs-right {
flex-direction: row-reverse;
}

.mega-menu-tabs-right .mega-menu-tabs-header {
border-right: none;
border-left: 1px solid var(--mega-tabs-header-border, var(--menu-v8-slideout-border));
}

.mega-menu-tabs-right .mega-menu-tab-btn {
border-left: none;
border-right: 3px solid transparent;
text-align: right;
}

.mega-menu-tabs-right .mega-menu-tab-btn.active {
border-right-color: var(--mega-tab-indicator);
border-left-color: transparent;
}

/* Tab 位置: 下方 */
.mega-menu-tabs-bottom {
flex-direction: column-reverse;
}

.mega-menu-tabs-bottom .mega-menu-tabs-header {
flex: none;
flex-direction: row;
border-right: none;
border-top: 1px solid var(--mega-tabs-header-border, var(--menu-v8-slideout-border));
padding: 0;
gap: 0;
}

.mega-menu-tabs-bottom .mega-menu-tab-btn {
border-left: none;
border-top: 3px solid transparent;
padding: 15px 25px;
white-space: nowrap;
}

.mega-menu-tabs-bottom .mega-menu-tab-btn.active {
border-top-color: var(--mega-tab-indicator);
}

/* ========================================
   Custom Width Centering
   ======================================== */
.unified-v8-mega-menu-dropdown:not(.mega-menu-width-mode-main):not([style*="width: 100%"]) {
left: 50%;
transform: translateX(-50%);
}

/* ========================================
   Mobile Mega Menu Responsive
   ======================================== */
@media screen and (max-width: 768px) {
.unified-v8-nav-item.mega-menu {
position: relative;
}

.unified-v8-mega-menu-dropdown {
min-width: calc(100vw - 16px) !important;
width: calc(100vw - 16px) !important;
max-width: calc(100vw - 16px) !important;
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
--mega-menu-enter-transform: translateX(-50%) translateY(8px) scale(1);
--mega-menu-open-transform: translateX(-50%) translateY(0) scale(1);
flex-direction: column !important;
position: absolute !important;
top: calc(100% + 6px) !important;
box-sizing: border-box;
overflow-x: hidden;
max-height: 70vh;
overflow-y: auto;
}

.mega-menu-tabs-header {
flex: none !important;
flex-direction: row !important;
border-right: none !important;
border-bottom: 1px solid var(--mega-tabs-header-border, var(--menu-v8-slideout-border));
overflow-x: auto;
}

.mega-menu-tab-btn {
border-left: none !important;
border-bottom: 3px solid transparent;
padding: 10px 15px !important;
white-space: nowrap;
}

.mega-menu-tab-btn.active {
border-bottom-color: var(--mega-tab-indicator);
}

.mega-menu-tabs-content {
padding: 15px;
}

.mega-menu-posts-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px;
}
}

.unified-v8-nav-item.mega-menu > .unified-v8-nav-submenu .unified-v8-nav-submenu .unified-v8-nav-link {
font-size: 13px;
font-weight: 400;
padding: 6px 0;
}

/* Hide arrows for nested items in mega menu */
.unified-v8-nav-item.mega-menu > .unified-v8-nav-submenu .unified-v8-nav-arrow {
display: none;
}

/* Mega Menu Responsive - hide on mobile, use regular slideout */
@media (max-width: 768px) {
.unified-v8-nav-item.mega-menu > .unified-v8-nav-submenu {
position: static;
width: auto;
min-width: auto;
flex-direction: column;
padding: 0;
gap: 0;
}
.unified-v8-nav-item.mega-menu > .unified-v8-nav-submenu > .unified-v8-nav-item {
min-width: auto;
max-width: none;
}
.unified-v8-nav-item.mega-menu > .unified-v8-nav-submenu .unified-v8-nav-submenu {
display: none;
}
}

/* =========================================================================
   Mega Menu - Tab 佈局系統
   ========================================================================= */

/* Tab 基礎結構 */
.unified-v8-nav-item.mega-menu > .unified-v8-nav-submenu {
display: flex;
flex-wrap: nowrap;
background: var(--menu-v8-submenu-bg);
}

/* Tab 左側佈局 (預設) */
.unified-v8-nav-item.mega-menu.mega-menu-tabs-left > .unified-v8-nav-submenu {
flex-direction: row;
}

.unified-v8-nav-item.mega-menu.mega-menu-tabs-left > .unified-v8-nav-submenu > .unified-v8-nav-item {
min-width: 180px;
max-width: 200px;
border-right: 1px solid var(--mega-tabs-header-border, var(--menu-v8-slideout-border, #eee));
background: var(--mega-tabs-header-bg, var(--menu-v8-slideout-submenu-bg, #f8f9fa));
}

.unified-v8-nav-item.mega-menu.mega-menu-tabs-left > .unified-v8-nav-submenu > .unified-v8-nav-item > .unified-v8-nav-link {
padding: 14px 18px;
border-left: 3px solid transparent;
transition: all 0.2s ease;
}

.unified-v8-nav-item.mega-menu.mega-menu-tabs-left > .unified-v8-nav-submenu > .unified-v8-nav-item:hover > .unified-v8-nav-link,
.unified-v8-nav-item.mega-menu.mega-menu-tabs-left > .unified-v8-nav-submenu > .unified-v8-nav-item.tab-active > .unified-v8-nav-link {
background: var(--menu-v8-submenu-bg, #fff);
border-left-color: var(--mega-tab-indicator);
}

/* Tab 右側佈局 */
.unified-v8-nav-item.mega-menu.mega-menu-tabs-right > .unified-v8-nav-submenu {
flex-direction: row-reverse;
}

.unified-v8-nav-item.mega-menu.mega-menu-tabs-right > .unified-v8-nav-submenu > .unified-v8-nav-item {
min-width: 180px;
max-width: 200px;
border-left: 1px solid var(--mega-tabs-header-border, var(--menu-v8-slideout-border, #eee));
background: var(--mega-tabs-header-bg, var(--menu-v8-slideout-submenu-bg, #f8f9fa));
}

.unified-v8-nav-item.mega-menu.mega-menu-tabs-right > .unified-v8-nav-submenu > .unified-v8-nav-item > .unified-v8-nav-link {
padding: 14px 18px;
border-right: 3px solid transparent;
transition: all 0.2s ease;
}

.unified-v8-nav-item.mega-menu.mega-menu-tabs-right > .unified-v8-nav-submenu > .unified-v8-nav-item:hover > .unified-v8-nav-link,
.unified-v8-nav-item.mega-menu.mega-menu-tabs-right > .unified-v8-nav-submenu > .unified-v8-nav-item.tab-active > .unified-v8-nav-link {
background: var(--menu-v8-submenu-bg, #fff);
border-right-color: var(--mega-tab-indicator);
}

/* Tab 上方佈局 */
.unified-v8-nav-item.mega-menu.mega-menu-tabs-top > .unified-v8-nav-submenu {
flex-direction: column;
}

.unified-v8-nav-item.mega-menu.mega-menu-tabs-top > .unified-v8-nav-submenu::before {
content: '';
display: flex;
order: -1;
}

.unified-v8-nav-item.mega-menu.mega-menu-tabs-top > .unified-v8-nav-submenu > .unified-v8-nav-item {
display: inline-flex;
border-bottom: 2px solid transparent;
min-width: auto;
max-width: none;
}

.unified-v8-nav-item.mega-menu.mega-menu-tabs-top > .unified-v8-nav-submenu > .unified-v8-nav-item:hover,
.unified-v8-nav-item.mega-menu.mega-menu-tabs-top > .unified-v8-nav-submenu > .unified-v8-nav-item.tab-active {
border-bottom-color: var(--mega-tab-indicator);
}

/* Tab 下方佈局 */
.unified-v8-nav-item.mega-menu.mega-menu-tabs-bottom > .unified-v8-nav-submenu {
flex-direction: column-reverse;
}

.unified-v8-nav-item.mega-menu.mega-menu-tabs-bottom > .unified-v8-nav-submenu > .unified-v8-nav-item {
display: inline-flex;
border-top: 2px solid transparent;
min-width: auto;
max-width: none;
}

.unified-v8-nav-item.mega-menu.mega-menu-tabs-bottom > .unified-v8-nav-submenu > .unified-v8-nav-item:hover,
.unified-v8-nav-item.mega-menu.mega-menu-tabs-bottom > .unified-v8-nav-submenu > .unified-v8-nav-item.tab-active {
border-top-color: var(--mega-tab-indicator);
}

/* 內容區 Grid 佈局 */
.mega-menu-content-grid {
display: grid;
gap: 16px;
padding: 20px;
flex: 1;
}

.mega-menu-content-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.mega-menu-content-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.mega-menu-content-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.mega-menu-content-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }

/* Mega Menu 內容項目 */
.mega-menu-item {
display: block;
text-decoration: none;
color: inherit;
transition: transform 0.2s ease;
}

.mega-menu-item:hover {
transform: translateY(-4px);
}

.mega-menu-item-image {
width: 100%;
aspect-ratio: 16/10;
object-fit: cover;
border-radius: 6px;
margin-bottom: 10px;
}

.mega-menu-item-title {
font-size: 14px;
font-weight: 500;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2; /* 標準屬性 */
-webkit-box-orient: vertical;
overflow: hidden;
}

/* Slide 控制 */
.mega-menu-slide-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px;
background: var(--menu-v8-slideout-submenu-bg, #f8f9fa);
border-top: 1px solid var(--menu-v8-slideout-border, #eee);
}

.mega-menu-slide-arrow {
width: 32px;
height: 32px;
border: 1px solid var(--menu-v8-slideout-border, #ddd);
border-radius: 50%;
background: var(--menu-v8-main-bg, #fff);
color: var(--menu-v8-main-text, #222);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}

.mega-menu-slide-arrow:hover {
background: var(--menu-v8-active-bg);
color: var(--menu-v8-active-text, #fff);
border-color: var(--menu-v8-active-bg);
}

/* 閱讀更多按鈕 */
.mega-menu-more-link {
display: block;
text-align: center;
padding: 12px 20px;
background: var(--menu-v8-slideout-submenu-bg, #f8f9fa);
border-top: 1px solid var(--menu-v8-slideout-border, #eee);
color: var(--menu-v8-main-text);
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: background 0.2s ease;
}

.mega-menu-more-link:hover {
background: var(--menu-v8-active-bg);
color: var(--menu-v8-active-text);
text-decoration: var(--menu-v8-link-hover-decoration, none);
}

.mega-menu-more-link:focus-visible {
outline: 2px solid var(--menu-v8-active-bg);
outline-offset: 2px;
text-decoration: var(--menu-v8-link-hover-decoration, none);
}

/* ================================================
   ★ Mega Menu Icons & Badges
   ================================================ */

/* 圖示 (Font Awesome) */
.mega-menu-icon {
margin-right: 6px;
font-size: 0.9em;
opacity: 0.85;
transition: opacity 0.2s ease;
}

.unified-v8-nav-link:hover .mega-menu-icon {
opacity: 1;
}

/* 徽章樣式 */
.mega-menu-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
line-height: 1;
padding: 3px 6px;
margin-left: 6px;
border-radius: 3px;
text-transform: uppercase;
vertical-align: middle;
letter-spacing: 0.02em;
animation: badge-pulse 2s infinite;
}

/* NEW 徽章 - 綠色 */
.mega-menu-badge-new {
background: linear-gradient(135deg, #10b981, #059669);
color: #fff;
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

/* HOT 徽章 - 紅色 */
.mega-menu-badge-hot {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff;
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

/* SALE 徽章 - 橘色 */
.mega-menu-badge-sale {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #fff;
box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

/* 徽章輕微脈動動畫 */
@keyframes badge-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}

/* ================================================
   ★ Per-Item Click Mode Visual States
   ================================================ */

/* Click 模式項目的視覺指標 */
.unified-v8-nav-item.mega-click-click > .unified-v8-nav-link .unified-v8-nav-arrow {
opacity: 0.8;
transition: transform 0.2s ease, border-color 0.2s ease;
}

/* Click 模式固定開啟時箭頭旋轉 + 顏色變白 */
.unified-v8-nav-item.mega-click-click.is-pinned > .unified-v8-nav-link .unified-v8-nav-arrow {
transform: rotate(180deg);
color: inherit;
border-top-color: currentColor !important;
opacity: 1;
}

.unified-v8-nav-item.mega-click-click.is-pinned > .unified-v8-nav-link .unified-v8-nav-arrow-right {
border-top-color: transparent !important;
border-bottom-color: transparent !important;
border-left-color: currentColor !important;
}

/* 固定開啟狀態的樣式 */
.unified-v8-nav-item.mega-menu:not([data-mega-disabled="device"]).is-pinned > .unified-v8-nav-link {
background: var(--menu-v8-active-bg);
color: var(--menu-v8-active-text);
}

.unified-v8-nav-item.mega-menu:not([data-mega-disabled="device"]).is-pinned > .unified-v8-nav-link .mega-menu-icon {
opacity: 1;
}

/* Dark Mode 徽章適配 */
:is(body.theme-dark, body.hd-dark-mode, body.fc-dark-mode, body.dark-mode) .mega-menu-badge-new {
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.5);
}

:is(body.theme-dark, body.hd-dark-mode, body.fc-dark-mode, body.dark-mode) .mega-menu-badge-hot {
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.5);
}

:is(body.theme-dark, body.hd-dark-mode, body.fc-dark-mode, body.dark-mode) .mega-menu-badge-sale {
box-shadow: 0 2px 4px rgba(245, 158, 11, 0.5);
}

@media (prefers-color-scheme: dark) {
:is(body.theme-auto, body.hd-dark-mode-auto, body.fc-dark-mode-auto) .mega-menu-badge-new {
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.5);
}

:is(body.theme-auto, body.hd-dark-mode-auto, body.fc-dark-mode-auto) .mega-menu-badge-hot {
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.5);
}

:is(body.theme-auto, body.hd-dark-mode-auto, body.fc-dark-mode-auto) .mega-menu-badge-sale {
box-shadow: 0 2px 4px rgba(245, 158, 11, 0.5);
}
}

/* ========================================
   ★ 列表模式 (List Layout) 樣式
   ======================================== */

/* 列表模式容器 */
.mega-menu-posts-grid.layout-list {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}

/* 列表模式項目 */
.mega-menu-posts-grid.layout-list .mega-menu-post-item {
width: 100% !important;
}

/* 列表模式連結 - 水平排列 */
.mega-menu-posts-grid.layout-list .mega-menu-post-link {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px;
padding: 8px;
background: var(--menu-v8-slideout-submenu-bg, #f8f9fa);
border-radius: 8px;
transition: all 0.2s ease;
}

.mega-menu-posts-grid.layout-list .mega-menu-post-link:hover {
background: var(--menu-v8-submenu-bg, #fff);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transform: translateX(4px);
}

/* 列表模式縮圖 - 小型左側顯示 */
.mega-menu-posts-grid.layout-list .mega-menu-post-thumb {
width: 80px !important;
min-width: 80px !important;
height: 60px !important;
aspect-ratio: auto !important;
border-radius: 6px;
overflow: hidden;
flex-shrink: 0;
}

.mega-menu-posts-grid.layout-list .mega-menu-post-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}

/* 列表模式標題 - 右側顯示 */
.mega-menu-posts-grid.layout-list .mega-menu-post-title {
flex: 1;
padding: 0 !important;
font-size: 14px;
font-weight: 500;
color: var(--menu-v8-submenu-text, #333);
-webkit-line-clamp: 2;
line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

.mega-menu-posts-grid.layout-list .mega-menu-post-title::after {
display: none !important; /* 隱藏底部漸層 */
}

/* 列表模式 - 隱藏不需要的元素 */
.mega-menu-posts-grid.layout-list .mega-menu-post-card {
display: none !important;
}

/* ★★★ HTML 內容類型樣式 ★★★ */
.mega-menu-html-content {
padding: 15px;
min-height: 100px;
color: var(--menu-v8-text, #333);
line-height: 1.6;
}

.mega-menu-html-content h1,
.mega-menu-html-content h2,
.mega-menu-html-content h3 {
margin-top: 0;
margin-bottom: 10px;
color: var(--menu-v8-primary, #0073aa);
}

.mega-menu-html-content p {
margin-bottom: 10px;
}

.mega-menu-html-content a {
color: var(--menu-v8-primary, #0073aa);
text-decoration: none;
}

.mega-menu-html-content a:hover {
text-decoration: var(--menu-v8-link-hover-decoration, none);
}

.mega-menu-html-content img {
max-width: 100%;
height: auto;
border-radius: 6px;
}

/* 深色模式 */
[data-color-scheme="dark"] .mega-menu-html-content {
color: var(--menu-v8-dark-text, rgba(255, 255, 255, 0.9));
}

[data-color-scheme="dark"] .mega-menu-html-content h1,
[data-color-scheme="dark"] .mega-menu-html-content h2,
[data-color-scheme="dark"] .mega-menu-html-content h3 {
color: var(--menu-v8-primary, #4da0de);
}

/* ★★★ 格狀佈局系統 ★★★ */
.mega-menu-grid-layout {
display: grid;
gap: 16px;
width: 100%;
padding: 12px;
}

/* 2 欄佈局 */
.mega-menu-grid-layout.grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}

/* 3 欄佈局 */
.mega-menu-grid-layout.grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}

/* 2×2 格佈局 */
.mega-menu-grid-layout.grid-2x2 {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto);
}

/* 2×3 格佈局 (6宮格) */
.mega-menu-grid-layout.grid-2x3 {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
}

/* 格子基礎樣式 */
.mega-menu-cell {
background: var(--menu-v8-submenu-bg, #fff);
border-radius: 8px;
overflow: hidden;
min-height: 100px;
}

/* 格子內文章列表 */
.cell-posts-list {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px;
}

.cell-post-item {
display: flex;
gap: 8px;
align-items: center;
}

.cell-post-item a {
display: flex;
gap: 8px;
align-items: center;
text-decoration: none;
color: inherit;
}

.cell-post-item a:hover {
color: var(--menu-v8-primary, #0073aa);
}

.cell-post-image {
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: 4px;
overflow: hidden;
}

.cell-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.cell-post-title {
font-size: 13px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* 單篇文章格子 */
.cell-single-post {
padding: 10px;
height: 100%;
}

.cell-single-post .cell-post-link {
display: block;
text-decoration: none;
color: inherit;
}

.cell-single-post .cell-post-image {
width: 100%;
height: auto;
aspect-ratio: 16/9;
margin-bottom: 10px;
}

.cell-single-post .cell-post-title {
font-size: 15px;
font-weight: 600;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* HTML 格子 */
.cell-html-content {
padding: 10px;
height: 100%;
}

/* 小工具格子 */
.cell-widget-content {
padding: 10px;
height: 100%;
}

.cell-widget-content .widget {
margin-bottom: 10px;
}

.cell-widget-content .widget:last-child {
margin-bottom: 0;
}

/* 深色模式 */
[data-color-scheme="dark"] .mega-menu-cell {
background: var(--menu-v8-submenu-bg, #1f2225);
}

[data-color-scheme="dark"] .cell-post-item a:hover,
[data-color-scheme="dark"] .cell-single-post .cell-post-link:hover {
color: var(--menu-v8-primary, #4da0de);
}

/* ★ 格子內網格模式 (Grid Mode) - 卡片式排列 */
.cell-posts-list.cell-grid-mode {
display: flex;
flex-direction: column;
gap: 10px;
padding: 8px;
}

.cell-posts-list.cell-grid-mode .cell-post-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
}

.cell-posts-list.cell-grid-mode .cell-post-item a {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 100%;
}

.cell-posts-list.cell-grid-mode .cell-post-image {
width: 100%;
height: auto;
border-radius: 6px;
overflow: hidden;
}

.cell-posts-list.cell-grid-mode .cell-post-image img {
width: 100%;
height: auto;
object-fit: cover;
}

.cell-posts-list.cell-grid-mode .cell-post-title {
font-size: 13px;
line-height: 1.4;
-webkit-line-clamp: 2;
text-align: center;
width: 100%;
}

/* ★ 格子內列表模式 (List Mode) - 傳統列表排列 */
.cell-posts-list.cell-list-mode {
display: flex;
flex-direction: column;
gap: 6px;
}

.cell-posts-list.cell-list-mode .cell-post-item {
display: flex;
align-items: center;
gap: 10px;
}

.cell-posts-list.cell-list-mode .cell-post-item a {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
}

.cell-posts-list.cell-list-mode .cell-post-image {
width: 45px;
height: 45px;
flex-shrink: 0;
border-radius: 4px;
}

.cell-posts-list.cell-list-mode .cell-post-title {
font-size: 13px;
line-height: 1.4;
flex: 1;
text-align: left;
}