/*adBanner相關CSS 開頭*/
/* 基礎樣式 (電腦版) */
#adbanner {
    position: fixed;
    bottom: 5%;
    left: 20px;
    width: 260px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 12px;
    z-index: 9999;
    padding: 10px;
    transition: left 0.5s ease;
    /* 確保 section 本身也是垂直排列 */
    display: flex;
    flex-direction: column;
}

/* 廣告容器：強制垂直排列 */
.ad-vertical-container {
    display: flex;
    flex-direction: column; /* 強制垂直 */
    gap: 10px;
    width: 100%; /* 寬度撐滿父層 */
}

/* 內部捲動軸核心設定 */
.ad-scroll-area {
    max-height: 400px; 
    overflow-y: auto;   /* 垂直捲動 */
    overflow-x: hidden; /* 禁用水平捲動 */
    /*padding-right: 8px;  留給捲動軸空間，避免擋到圖片 */
}

/* 廣告項包裝：確保寬度 */
.ad-item-wrapper {
    width: 100%;
}

.ad-item-wrapper a {
    display: block;
    width: 100%;
}

/* 圖片樣式：確保圖片垂直佔據空間 */
.ad-img-fluid {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* 客製化捲動軸樣式 */
.ad-scroll-area::-webkit-scrollbar {
    width: 6px; /* 稍微加寬一點點比較好滑 */
}
.ad-scroll-area::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 10px;
}
.ad-scroll-area::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

/* 當廣告摺疊時移到右側 */
#adbanner.collapsed {
    left: -260px;
}

/* 隱藏摺疊後的箭頭按鈕 */
#toggleAdButton {
    position: absolute;
    bottom: 5%;
    right: -40px;
    font-size: 2rem;
    cursor: pointer;
    border: none;
    border-radius: 10px;
    transition: right 0.5s ease-in-out;
    background: none;
}

/* 當廣告摺疊時，箭頭移動並且隱藏 */
#adbanner.collapsed+#toggleAdButton {
    right: 0;
    visibility: hidden;
}

/* 自訂的 SVG 按鈕樣式 */
#toggleAdButton svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

#currentDateTime {
    color: white;
    text-align: center;
}

#adbannertext {
    color: white;
    text-align: center;
}

/*adBanner相關CSS 結尾*/