/* ==========================================================================
   輪播控制鍵樣式集中地（前台）
   --------------------------------------------------------------------------
   涵蓋三組輪播控制鍵：
     - Banner（首頁橫幅）的暫停／播放鍵 + 上下箭頭／數字按鈕
     - 側邊欄 LinkBlock 輪播的暫停／播放鍵
     - 跑馬燈 Marquee 的暫停／播放鍵
   含：按鈕本身樣式、容器絕對定位、預設隱藏／focus-within 顯示、
       後台「常駐顯示」開關（banner-pause-always / banner-nav-always /
       linkblock-pause-always / marquee-pause-always）對應的 CSS 規則。

   底色設計：default `#666`、focus `#555`，白字對比 5.7:1 / 7.4:1（過 WCAG AA 4.5:1），
   2026-06-08 客戶反映 #333 太深調整而來。

   原本散落在 banner.html / linkBlock.html / marquee.html 內的 <style> 區塊，
   2026-06-08 統一搬到此處。
   ========================================================================== */


/* --------------------------------------------------------------------------
   Banner 輪播控制鍵
   -------------------------------------------------------------------------- */
.banner_odd {
    position: relative;
}

#bannerPlayControler {
    position: absolute;  /* 絕對定位，不佔空間 */
    bottom: 50px;        /* 在 dots 上方 */
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;          /* > .owl-carousel(1) 蓋輪播、< div.menuColumn_odd(3) 讓子選單展開時蓋過按鈕 */
    /* 預設隱藏 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.bannerPlayControlerShow {
    opacity: 1;
    pointer-events: auto;
}

.banner_odd:focus-within #bannerPlayControler {
    opacity: 1;
    pointer-events: auto;
}

/* 後台開關：Banner 暫停／播放鍵常駐顯示 */
.banner_odd.banner-pause-always #bannerPlayControler {
    opacity: 1;
    pointer-events: auto;
}

/* 後台開關：Banner 上下箭頭與數字按鈕常駐顯示 */
.banner_odd.banner-nav-always .owl-nav,
.banner_odd.banner-nav-always .owl-dots {
    opacity: 1 !important;
}

/* 強制 icon span 走「文字符號字型」，避開 Apple Color Emoji 把 ▶ / ⏸ 渲染成大顆彩色 emoji
   font-variant-emoji: text 是 CSS Fonts 4，Chrome 117+ 有效；font-family fallback 兜舊瀏覽器 */
.bannerPlayPauseBtn-icon,
.linkBlockPlayPauseBtn-icon,
.marqueePlayPauseBtn-icon {
    font-variant-emoji: text;
    font-family: 'Apple Symbols', 'Segoe UI Symbol', 'Symbola', 'Noto Sans Symbols 2', sans-serif;
}

#bannerPlayPause {
    font-size: 0.93em;
    background: rgba(60, 60, 80, 0.75);
    color: white;
    padding: 3px 8px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.banner_odd.banner-pause-text-hidden #bannerPlayPause .bannerPlayPauseBtn-label {
    display: none;
}

#bannerPlayPause:focus {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
    background: rgba(45, 45, 65, 0.75);
}


/* --------------------------------------------------------------------------
   LinkBlock（側邊欄輪播）控制鍵
   -------------------------------------------------------------------------- */
.linkBlockBlock_odd {
    position: relative;
}

.linkBlockPlayControler {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;          /* 同 bannerPlayControler：壓過輪播、讓選單(3)蓋過 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.linkBlockBlock_odd:focus-within .linkBlockPlayControler {
    opacity: 1;
    pointer-events: auto;
}

/* 後台開關：側邊欄輪播暫停鍵常駐顯示 */
.linkBlockBlock_odd.linkblock-pause-always .linkBlockPlayControler {
    opacity: 1;
    pointer-events: auto;
}

/* 暫停按鈕出現時，把 .owl-prev 推到最左邊，視覺呈現「左、暫停、右」。
   用 transform 而非 position，避免拉出 flow 造成 owl 殘留狀態。
   位移量由 owl.carousel.cus.js 計算後寫入 --owl-prev-shift。 */
.linkBlockContent_odd .owl-prev {
    transition: transform 0.3s ease;
}

.linkBlockBlock_odd:focus-within .linkBlockContent_odd .owl-prev {
    transform: translateX(var(--owl-prev-shift, 0px));
}

.linkBlockPlayPause {
    font-size: 0.85em;
    line-height: 1.2;
    background: rgba(60, 60, 80, 0.75);
    color: white;
    padding: 2px 5px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.linkBlockBlock_odd.linkblock-pause-text-hidden .linkBlockPlayPause .linkBlockPlayPauseBtn-label {
    display: none;
}

.linkBlockPlayPause:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
    background: rgba(45, 45, 65, 0.75);
}


/* --------------------------------------------------------------------------
   Marquee（跑馬燈）控制鍵
   按鈕本體由 /oddi_src/lib/marquee/marquee.js 動態建立，沒有對應的 html template，
   所以樣式只能寫在這支 CSS。
   -------------------------------------------------------------------------- */
#marqueePlayPause {
    /* 預設隱藏 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
    /* 底色與另兩顆輪播暫停鍵一致 */
    background: rgba(60, 60, 80, 0.75);
    color: white;
    padding: 2px 5px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.marquee_odd.marquee-pause-text-hidden #marqueePlayPause .marqueePlayPauseBtn-label {
    display: none;
}

#marqueePlayPause:focus {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
    background: #555;
    opacity: 1;
    pointer-events: auto;
}

/* 後台開關：跑馬燈暫停鍵常駐顯示 */
.marquee_odd.marquee-pause-always #marqueePlayPause {
    opacity: 1;
    pointer-events: auto;
}