/* ===========================================================================
   前端廣告管理樣式 (frontend-style.css) - 最終完整修復版 v5.0
   包含：AdSense 自動隱藏、Width=0 修復、完整酒類警語 RWD、所有 UI 元件
   =========================================================================== */

/* =================================================================== */
/*  1. 全局變數與基礎重設                                              */
/* =================================================================== */
:root {
    --vh: 1vh;
}

/* 舊瀏覽器支援 */
@supports not (height: var(--vh)) {
    .wp-ad-single[data-ad-placement="bottom"] {
        height: auto !important;
        max-height: 100vh !important;
    }
}

.wp-ad-single,
.wp-ad-single *,
.wp-ad-single ::before,
.wp-ad-single ::after {
  box-sizing: border-box;
}

/* =================================================================== */
/*  2. 核心容器與 AdSense 狀態控制 (解決 Width=0 與 空白框)              */
/* =================================================================== */

/* 預設狀態：確保有最小寬度，防止 AdSense 報錯 availableWidth=0 */
.wp-ad-single {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    /* 給予初始最小高度防止 CLS，JS 載入完畢後會自動調整 */
    min-height: 250px; 
    position: relative;
    overflow: hidden;
    clear: both;
    transition: opacity 0.3s ease;
    margin: 0 auto;
}

/* 2. 【關鍵修正 v2】平滑隱藏無廣告區塊 (避免閃爍與誤殺) */
.wp-ad-single[data-ad-status="unfilled"] {
    /* 使用多重方法確保完全隱藏 */
    display: none !important;
    max-height: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
    pointer-events: none !important;
    overflow: hidden !important;
    visibility: hidden !important;
    
    /* 縮短延遲到 0.3 秒，加快隱藏速度 */
    transition: all 0.3s ease-in-out;
}

/* 配合上述設定，隱藏內部元素 */
.wp-ad-single[data-ad-status="unfilled"] .wp-ad-fixed-wrapper,
.wp-ad-single[data-ad-status="unfilled"] .wp-ad-label-wrapper {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    max-height: 0 !important;
    overflow: hidden !important;
    transition: opacity 0.2s;
}

/* 也要處理 data-all-unfilled 的情況 */
.wp-ad-single[data-all-unfilled="true"] .wp-ad-fixed-wrapper,
.wp-ad-single[data-all-unfilled="true"] .wp-ad-label-wrapper {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    max-height: 0 !important;
    overflow: hidden !important;
}


/* --- 載入成功狀態 --- */
/* 確保 Google 把廣告設為 display:block */
ins.adsbygoogle[data-ad-status="done"],
ins.adsbygoogle[data-ad-status="filled"] {
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
}

/* --- 載入中佔位符 (防止塌陷) --- */
.wp-ad-single:not(.ad-processed) {
    background: #f9f9f9; /* 載入時顯示淡灰色背景 */
}

.wp-ad-single.ad-processed {
    background: transparent;
    min-height: auto; /* 載入完成後釋放高度限制，適應內容 */
}

/* --- 固定包裝器 (AdSense 的直接父層) --- */
.wp-ad-fixed-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    /* 確保內部 iframe 不會超出 */
    max-width: 100%; 
}

/* 解決 iframe 有時會帶有額外 margin 的問題 */
.wp-ad-single .adsbygoogle iframe {
    margin: 0 auto !important;
    max-width: 100%;
}

/* =================================================================== */
/*  3. UI 元件樣式 (標籤、關閉按鈕、連結)                              */
/* =================================================================== */

/* 連結包裹 */
.wp-ad-single > a.wp-ad-link {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

/* 圖片與 Iframe 自適應 */
.wp-ad-single .wp-ad-fixed-wrapper img,
.wp-ad-single .wp-ad-fixed-wrapper iframe {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border: none !important;
}

/* --- 關閉按鈕 --- */
.wp-ad-single .wp-ad-close {
    position: absolute;
    width: 28px;
    height: 28px;
    padding: 0;
    background-color: rgba(150, 150, 150, 0.8);
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: background-color 0.2s ease;
    z-index: 20; /* 確保在標籤之上 */
}

.wp-ad-single .wp-ad-close:hover {
    background-color: rgba(100, 100, 100, 0.9);
}

/* 使用者手動關閉後的狀態 */
.wp-ad-single.wp-ad-closed-by-user {
    display: none !important;
}

/* --- 廣告標籤 --- */
.wp-ad-label-wrapper {
    width: 100%;
    line-height: 1;
    pointer-events: none; /* 防止遮擋點擊 */
}

/* 外部標籤位置 */
.wp-ad-label-wrapper.label-pos-top { 
    order: -1; 
    margin-bottom: 5px; 
}
.wp-ad-label-wrapper.label-pos-bottom { 
    order: 1; 
    margin-top: 5px; 
}

/* 對齊 */
.wp-ad-label-wrapper.label-align-left { text-align: left; }
.wp-ad-label-wrapper.label-align-center { text-align: center; }
.wp-ad-label-wrapper.label-align-right { text-align: right; }

/* 標籤文字本體 */
.wp-ad-label-text {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px; /* 稍微縮小以顯精緻 */
    color: #999;
    background-color: #f0f0f0;
    border-radius: 2px;
    pointer-events: auto; /* 恢復文字可選取 */
}

/* 內嵌覆蓋式標籤 */
.wp-ad-label-wrapper[class*="label-pos-embed-"] {
    position: absolute !important;
    z-index: 5;
    width: auto;
    margin: 0;
}
.wp-ad-label-wrapper.label-pos-embed-top-left { top: 0; left: 0; }
.wp-ad-label-wrapper.label-pos-embed-top-right { top: 0; right: 0; }
.wp-ad-label-wrapper.label-pos-embed-bottom-left { bottom: 0; left: 0; }
.wp-ad-label-wrapper.label-pos-embed-bottom-right { bottom: 0; right: 0; }

.wp-ad-label-wrapper[class*="label-pos-embed-"] .wp-ad-label-text {
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
}

/* =================================================================== */
/*  4. 特殊廣告模式 (Sticky / Overlay / Text Ad)                       */
/* =================================================================== */

/* --- Text Ad (文字廣告卡片) --- */
.wam-text-ad {
    border: 1px solid #e0e0e0;
    padding: 12px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    text-align: left;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.wam-text-ad .wam-h { font-weight: 700; color: #005e9b; font-size: 16px; margin: 0; }
.wam-text-ad .wam-cta {
    align-self: flex-start;
    background: #005e9b;
    color: #fff;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 12px;
    text-transform: uppercase;
}

/* --- Overlay (彈窗覆蓋) --- */
.wp-ad-single[data-ad-placement="overlay"] {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 99999 !important;
    max-width: 90vw;
    max-height: 90vh;
    width: auto !important; /* 覆蓋原本的 width:100% */
    min-height: auto !important;
    background: transparent;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
}

/* --- Bottom Fixed (置底) --- */
#wp-ad-bottom-active {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 99998 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

/* --- Sticky Sidebar (側邊欄固定) --- */
#sticky-anchor { display: block; height: 1px; margin-top: -1px; visibility: hidden; }
#sidebar-fixed { margin: 0 auto; position: relative; width: 100%; }
#sidebar-fixed.sidebar-fixed-open { position: fixed !important; z-index: 999; }

/* =================================================================== */
/*  5. 酒類警語與 RWD 邏輯 (完整保留您的設定)                          */
/* =================================================================== */

/* 基礎樣式 */
.model {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: Arial, 'Noto Sans TC', sans-serif;
    text-align: center;
    white-space: nowrap;
    width: 100vw;
    height: 10vh;
    box-sizing: border-box;
    padding: 0.1rem;
    font-size: clamp(1.2rem, 2.5vw + 2vh, 4.5rem);
    background-color: #000; /* 預設背景色，確保可見 */
}

.model img {
    width: 1em !important;
    height: 1em !important;
    margin: 0 0.3rem !important;
    object-fit: contain;
}

.model span {
    text-align: center;
}

/* =================================================================== */
/*  廣告 RWD 裝置切換 (使用 class 選擇器) - 強化版 v2.0                  */
/* =================================================================== */

/* 廣告裝置區塊：預設全部隱藏 */
.rwd-device-block {
    display: none !important;
    visibility: hidden !important;
    width: 100%;
    justify-content: center;
}
.addesktop, .adtablet, .admobile {
    display: none !important;
    visibility: hidden !important;
    width: 100%;
    justify-content: center;
}

/* 酒類警語：保留 ID 選擇器向下兼容 */
#addesktop, #adtablet, #admobile {
    display: none !important;
    visibility: hidden !important;
    width: 100%;
    justify-content: center;
}

/* --- RWD Breakpoints (廣告 + 酒類警語共用) --- */

/* 1. 手機版：≤768px */
@media (max-width: 768px) {
    /* 顯示手機版廣告 */
    .admobile, #admobile { 
        display: block !important; 
        visibility: visible !important;
    }
    /* 隱藏桌機和平板版廣告 */
    .addesktop, .adtablet, #addesktop, #adtablet { 
        display: none !important; 
        visibility: hidden !important;
    }
    
    /* 防止 AdSense 強制顯示隱藏的裝置區塊 */
    .addesktop ins.adsbygoogle,
    .adtablet ins.adsbygoogle,
    #addesktop ins.adsbygoogle,
    #adtablet ins.adsbygoogle {
        display: none !important;
        visibility: hidden !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }
    
    .model {
        white-space: normal;
        flex-wrap: wrap;
        padding: 0.05rem;
        font-size: clamp(1.1rem, 2.5vw + 1.8vh, 2.5rem);
    }
    .model img { margin: 0 0.2rem !important; }
}

/* 2. 平板：769px - 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    /* 顯示平板版廣告 */
    .adtablet, #adtablet { 
        display: block !important; 
        visibility: visible !important;
    }
    /* 隱藏桌機和手機版廣告 */
    .addesktop, .admobile, #addesktop, #admobile { 
        display: none !important; 
        visibility: hidden !important;
    }
    
    /* 防止 AdSense 強制顯示隱藏的裝置區塊 */
    .addesktop ins.adsbygoogle,
    .admobile ins.adsbygoogle,
    #addesktop ins.adsbygoogle,
    #admobile ins.adsbygoogle {
        display: none !important;
        visibility: hidden !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }
    
    .model {
        padding: 0.1rem;
        font-size: clamp(1.3rem, 2.2vw + 1.8vh, 4rem);
    }
    .model img { margin: 0 0.3rem !important; }
}

/* 3. 桌機版：≥1025px */
@media (min-width: 1025px) {
    /* 顯示桌機版廣告 */
    .addesktop, #addesktop { 
        display: block !important; 
        visibility: visible !important;
    }
    /* 隱藏平板和手機版廣告 */
    .adtablet, .admobile, #adtablet, #admobile { 
        display: none !important; 
        visibility: hidden !important;
    }
    
    /* 防止 AdSense 強制顯示隱藏的裝置區塊 */
    .adtablet ins.adsbygoogle,
    .admobile ins.adsbygoogle,
    #adtablet ins.adsbygoogle,
    #admobile ins.adsbygoogle {
        display: none !important;
        visibility: hidden !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }
    
    .model {
        padding: 0.15rem;
        font-size: clamp(1.3rem, 2vw + 1.5vh, 4.5rem);
    }
    .model img { margin: 0 0.35rem !important; }
}

/* =================================================================== */
/*  針對 wam-blog-card 的相容性樣式                                    */
/* =================================================================== */
.wam-blog-card {
    width: 100%;
    max-width: 100%;
}

/* =================================================================== */
/*  AdSense Unfilled 自動隱藏（外層容器全空時隱藏）                     */
/* =================================================================== */

/* 
   當所有裝置區塊內的 AdSense 都未填充時，隱藏整個廣告容器
   這個邏輯由 JavaScript 處理，CSS 只提供樣式支援
*/
.wp-ad-single[data-all-unfilled="true"] {
    display: none !important;
    max-height: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: all 0.3s ease-in-out;
}

/* =================================================================== */
/*  混合 RWD 方案：CSS 視窗寬度 Fallback                                */
/*  PHP 根據 User-Agent 輸出廣告，CSS 根據視窗寬度作為安全網           */
/* =================================================================== */

/* 
   說明：
   - 當 PHP 根據 User-Agent 判斷為桌機並輸出 device-is-desktop 廣告時
   - 如果用戶縮小視窗到手機尺寸，CSS 會隱藏該廣告
   - 這提供了更好的響應式體驗，同時保持廣告主的 targeting 邏輯
*/

/* 手機視窗 (≤768px)：隱藏標記為桌機或平板的容器 */
@media (max-width: 768px) {
    .wp-ad-single.device-is-desktop:not(.device-is-mobile):not(.device-is-all),
    .wp-ad-single.device-is-tablet:not(.device-is-mobile):not(.device-is-all) {
        display: none !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* 平板視窗 (769px - 1024px)：隱藏標記為僅桌機的容器 */
@media (min-width: 769px) and (max-width: 1024px) {
    .wp-ad-single.device-is-desktop:not(.device-is-tablet):not(.device-is-all) {
        display: none !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .wp-ad-single.device-is-mobile:not(.device-is-tablet):not(.device-is-all) {
        display: none !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* 桌機視窗 (≥1025px)：隱藏標記為僅手機或僅平板的容器 */
@media (min-width: 1025px) {
    .wp-ad-single.device-is-mobile:not(.device-is-desktop):not(.device-is-all),
    .wp-ad-single.device-is-tablet:not(.device-is-desktop):not(.device-is-all) {
        display: none !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}