/* ===========================================================================
   前端廣告管理樣式 (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. 【關鍵修正】平滑隱藏無廣告區塊 (避免閃爍與誤殺) */
.wp-ad-single[data-ad-status="unfilled"] {
    /* 改用 max-height 與 opacity 進行平滑隱藏 */
    max-height: 0 !important;
    min-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;
    
    /* 延遲 0.5 秒執行，避免誤判時瞬間閃爍 */
    transition: all 0.5s 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 {
    opacity: 0;
    transition: opacity 0.2s;
}


/* --- 載入成功狀態 --- */
/* 確保 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;
}

/* 裝置切換基礎設定：預設全部隱藏，避免閃爍 */
#addesktop, #adtablet, #admobile {
    display: none;
    width: 100%;
    justify-content: center;
}

/* 只有當內容不為空時才設為 flex (配合 CSS :empty 或 JS 邏輯) */
#addesktop:not(:empty), 
#adtablet:not(:empty), 
#admobile:not(:empty) {
    /* display: flex;  <-- 這裡不直接設，由下方 Media Query 控制 */
}

/* --- RWD Breakpoints (依照您的要求) --- */

/* 1. 小型手機：≤320px */
@media (max-width: 320px) {
    #admobile { display: flex !important; }
    #addesktop, #adtablet { display: none !important; }
    
    .model {
        white-space: normal;
        flex-wrap: wrap;
        padding: 0.03rem;
        font-size: clamp(1rem, 3vw + 2vh, 1rem);
    }
    .model img { margin: 0 0.2rem !important; }
}

/* 2. 標準手機：321px - 400px */
@media (min-width: 321px) and (max-width: 400px) {
    #admobile { display: flex !important; }
    #addesktop, #adtablet { display: none !important; }
    
    .model {
        padding: 0.03rem;
        font-size: clamp(1.1rem, 2.5vw + 1.8vh, 2.5rem);
    }
    .model img { margin: 0 0.2rem !important; }
}

/* 3. 標準手機（擴展）：401px - 414px */
@media (min-width: 401px) and (max-width: 414px) {
    #admobile { display: flex !important; }
    #addesktop, #adtablet { display: none !important; }
    
    .model {
        padding: 0.05rem;
        font-size: clamp(1.15rem, 2.5vw + 1.8vh, 2.8rem);
    }
    .model img { margin: 0 0.25rem !important; }
}

/* 4. 大型手機：415px - 768px */
@media (min-width: 415px) and (max-width: 768px) {
    #admobile { display: flex !important; }
    #addesktop, #adtablet { display: none !important; }
    
    .model {
        padding: 0.1rem;
        font-size: clamp(1.2rem, 2.5vw + 2vh, 3.5rem);
    }
    .model img { margin: 0 0.3rem !important; }
}

/* 5. 平板：769px - 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
    #adtablet { display: flex !important; }
    #addesktop, #admobile { display: none !important; }
    
    .model {
        padding: 0.1rem;
        font-size: clamp(1.3rem, 2.2vw + 1.8vh, 4rem);
    }
    .model img { margin: 0 0.3rem !important; }
}

/* 6. 中型桌面：1025px - 1920px */
@media (min-width: 1025px) and (max-width: 1920px) {
    #addesktop { display: flex !important; }
    #adtablet, #admobile { display: none !important; }
    
    .model {
        padding: 0.15rem;
        font-size: clamp(1.3rem, 2vw + 1.5vh, 4.5rem);
    }
    .model img { margin: 0 0.35rem !important; }
}

/* 7. 大型桌面：>1920px */
@media (min-width: 1921px) {
    #addesktop { display: flex !important; }
    #adtablet, #admobile { display: none !important; }
    
    .model {
        padding: 0.2rem;
        font-size: clamp(1.4rem, 1.8vw + 1.3vh, 4.5rem);
    }
    .model img { margin: 0 0.4rem !important; }
}

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

/* =================================================================== */
/*  5. RWD 裝置強制隱藏邏輯 (優先級修正版)                             */
/* =================================================================== */

/* 
   使用 html body 提升權重，確保覆蓋 PHP 輸出的 inline style 
   和 JS 可能產生的 style 修改 
*/

/* --- 1. 手機版 (<= 767.98px) --- */
@media (max-width: 767.98px) {
    /* 強制隱藏桌機和平板廣告 */
    html body .wp-ad-single.device-is-desktop,
    html body .wp-ad-single.device-is-tablet {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        visibility: hidden !important;
    }
    /* 顯示手機廣告 */
    #admobile { display: flex !important; }
    #addesktop, #adtablet { display: none !important; }
}

/* --- 2. 平板版 (768px - 1199.98px) --- */
@media (min-width: 768px) and (max-width: 1199.98px) {
    /* 強制隱藏手機和桌機廣告 */
    html body .wp-ad-single.device-is-mobile,
    html body .wp-ad-single.device-is-desktop {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        visibility: hidden !important;
    }
    /* 顯示平板廣告 */
    #adtablet { display: flex !important; }
    #addesktop, #admobile { display: none !important; }
}

/* --- 3. 桌機版 (>= 1200px) --- */
@media (min-width: 1200px) {
    /* 強制隱藏手機和平板廣告 */
    html body .wp-ad-single.device-is-mobile,
    html body .wp-ad-single.device-is-tablet {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        visibility: hidden !important;
    }
    /* 顯示桌機廣告 */
    #addesktop { display: flex !important; }
    #adtablet, #admobile { display: none !important; }
}