/* --- 基礎結構 --- */
.wpts-container {
    margin-top: 20px;
    margin-bottom: var(--wpts-content-bottom, 20px); /* 使用變數控制下方間距 */
    clear: both;
    box-sizing: border-box;
}

/* 字體變數應用 */
.wpts-container .wpts-nav li a {
    font-size: var(--wpts-tab-font-size, inherit);
}
.wpts-container .wpts-content {
    font-size: var(--wpts-content-font-size, inherit);
}

/* Reset 列表樣式 */
.wpts-container .wpts-nav {
    margin: 0;
    padding: 0;
    list-style: none !important;
    display: flex;
    gap: 0;
    width: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid transparent; 
}

.wpts-container .wpts-nav::before,
.wpts-container .wpts-nav::after {
    content: none;
    display: none;
}

/* --- 外框與內距控制 --- */
.wpts-container.wpts-tab-border-on .wpts-nav {
    border-bottom: 1px solid var(--wpts-border-color, #ddd);
}

/* 內容區內距變數化 - 解決偏移問題 */
.wpts-container .wpts-content {
    padding: var(--wpts-content-padding, 20px);
    background: #fff;
    clear: both;
    border: 1px solid transparent;
    border-top: none;
    box-sizing: border-box;
}

.wpts-container.wpts-content-border-on .wpts-content {
    border-color: var(--wpts-border-color, #ddd);
}

/* --- 排列模式 --- */
.wpts-container.wpts-mode-wrap .wpts-nav {
    flex-wrap: wrap;
}

.wpts-container.wpts-mode-scroll .wpts-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 15px;
}
.wpts-container.wpts-mode-scroll .wpts-nav::-webkit-scrollbar {
    height: 6px;
}
.wpts-container.wpts-mode-scroll .wpts-nav::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* 通用連結樣式 */
.wpts-container .wpts-nav li {
    margin: 0;
    padding: 0;
    list-style: none !important;
    margin-bottom: -1px;
    flex-shrink: 0;
}

.wpts-container .wpts-nav li a {
    display: block;
    text-decoration: none;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
    color: #555;
    background: #f5f5f5;
    margin-right: 5px;
    transition: all 0.3s ease;
    outline: none;
    box-shadow: none;
    white-space: nowrap;
}

.wpts-content { display: none; }

/* --- 樣式區 (Themes) --- */

/* 1. 預設 */
.wpts-theme-default .wpts-nav li.ui-tabs-active a {
    background: #fff;
    border-color: var(--wpts-border-color, #ddd);
    border-bottom-color: #fff;
    color: #333;
    font-weight: bold;
}
.wpts-theme-default.wpts-tab-border-off .wpts-nav li.ui-tabs-active a {
    border-bottom-color: transparent;
}

/* 2. 現代藍調 */
.wpts-theme-modern-blue .wpts-nav { border-bottom-color: #0073aa; }
.wpts-theme-modern-blue .wpts-nav li a {
    background: #eef6fa;
    color: #0073aa;
    border: none;
    margin-right: 2px;
    border-radius: 0;
}
.wpts-theme-modern-blue .wpts-nav li.ui-tabs-active a {
    background: #0073aa;
    color: #fff;
}
.wpts-theme-modern-blue.wpts-content-border-on .wpts-content {
    border: 2px solid #0073aa;
    border-top: none;
}

/* 3. TV 串流風格 (TV Streaming) - 重製版 (類 default.zip) */
/* 風格特徵：未選為淺灰底+深灰字；選取為深灰底+白字+下方箭頭 */
.wpts-theme-tv-streaming .wpts-nav {
    border-bottom: none; /* 移除底線，由箭頭銜接 */
    background: transparent;
    padding-bottom: 0;
}
.wpts-theme-tv-streaming .wpts-nav li {
    margin-right: 4px;
    margin-bottom: 0;
}
.wpts-theme-tv-streaming .wpts-nav li a {
    background: #EFEFEF; /* Inactive Background */
    color: #5E5E5E;    /* Inactive Text */
    border: none;
    border-radius: 0; /* 方形 */
    font-weight: bold;
    padding: 10px 20px;
    position: relative; /* For arrow */
    transition: background 0.2s;
}

.wpts-theme-tv-streaming .wpts-nav li.ui-tabs-active a {
    background: #5E5E5E; /* Active Background */
    color: #FFFFFF;    /* Active Text */
    cursor: default;
}

/* 使用 CSS 繪製下方三角形箭頭，取代 default.zip 中的 arrowt.gif */
.wpts-theme-tv-streaming .wpts-nav li.ui-tabs-active a::after {
    content: '';
    position: absolute;
    bottom: -6px; /* 向下突出 */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #5E5E5E; /* 顏色與 Active 背景一致 */
    z-index: 10;
}

/* 針對此風格，通常內容區沒有明顯邊框，但要保持間距 */
.wpts-theme-tv-streaming .wpts-content {
    /* padding 已經由變數控制，這裡不需要額外覆寫 */
}
/* 如果開啟了內容邊框，增加一點頂部距離以免箭頭壓到線 */
.wpts-theme-tv-streaming.wpts-content-border-on .wpts-content {
    margin-top: 5px;
}


/* 4. 深色模式 */
.wpts-theme-dark-mode { background: #222; border-radius: 8px; }
.wpts-theme-dark-mode .wpts-nav { border-bottom: 1px solid #444; }
.wpts-theme-dark-mode .wpts-nav li a {
    background: #333; color: #aaa; border: 1px solid #444; border-bottom: none;
}
.wpts-theme-dark-mode .wpts-nav li.ui-tabs-active a {
    background: #444; color: #fff; border-color: #444;
}
.wpts-theme-dark-mode .wpts-content {
    background: #333; color: #eee; 
}
.wpts-theme-dark-mode.wpts-content-border-on .wpts-content {
    border-color: #444;
}

/* 5. 圓角膠囊 */
.wpts-theme-pills .wpts-nav { border-bottom: none; gap: 10px; }
.wpts-theme-pills .wpts-nav li { margin-bottom: 10px; }
.wpts-theme-pills .wpts-nav li a {
    border-radius: 50px; background: #eee; border: 1px solid #ddd; padding: 8px 25px;
}
.wpts-theme-pills .wpts-nav li.ui-tabs-active a {
    background: #6c5ce7; color: #fff; border-color: #6c5ce7;
}
.wpts-theme-pills.wpts-content-border-on .wpts-content {
    border: 1px solid #eee; border-radius: 10px; margin-top: 5px;
}

/* 6. 極簡底線 */
.wpts-theme-clean-underline .wpts-nav { border-bottom: 2px solid #eee; }
.wpts-theme-clean-underline .wpts-nav li a {
    background: transparent; border: none; color: #888; margin-bottom: -2px; border-bottom: 2px solid transparent; border-radius: 0;
}
.wpts-theme-clean-underline .wpts-nav li.ui-tabs-active a {
    color: #d63031; border-bottom: 2px solid #d63031; background: transparent;
}

/* 7. 紅框焦點 */
.wpts-theme-red-box .wpts-nav {
    border-top: 4px solid #d63031;
    border-bottom: none;
    background: #f1f1f1;
}
.wpts-theme-red-box .wpts-nav li { margin: 0; }
.wpts-theme-red-box .wpts-nav li a {
    border-radius: 0; margin-right: 0; border: none;
    background: #f1f1f1; color: #666; padding: 12px 25px; position: relative;
}
.wpts-theme-red-box .wpts-nav li.ui-tabs-active a {
    background: #555; color: #fff;
}
.wpts-theme-red-box .wpts-nav li.ui-tabs-active a::after {
    content: '';
    position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; border-left: 6px solid transparent;
    border-right: 6px solid transparent; border-top: 6px solid #555; z-index: 2;
}
.wpts-theme-red-box .wpts-content { padding-top: 30px; }

/* --- 導覽按鈕 --- */
.wpts-nav-buttons {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
    display: flex;
    justify-content: space-between;
}
.wpts-btn {
    padding: 8px 15px;
    border: 1px solid #ccc;
    background: #f9f9f9;
    cursor: pointer;
    border-radius: 4px;
}
.wpts-next { margin-left: auto; }