/* 外層容器 */
.bugdorm-slider-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 2em;
}
/* 外層容器：完美對齊 Storefront 的 col-full 尺寸 */
.bugdorm-slider-wrapper {
    position: relative;
    width: 100%;
    max-width: 1064px; /* 對應 Storefront col-full 的標準最大寬度 */
    margin: 0 auto 2em auto; /* 左右設定 auto 來確保輪播圖在螢幕中置中 */
    box-sizing: border-box;
}

/* 輪播圖本體設定 */
.bugdorm-swiper {
    width: 100%;
    height: 500px; /* 可依需求調整高度 */
}

/* 單張幻燈片：背景設定與置中文字 */
.bugdorm-swiper .swiper-slide {
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end; /* 將內容靠下對齊 */
    justify-content: center;
    padding-bottom: 60px; /* 距離底部保留空間 */
}

.bd-slide-content {
    text-align: center;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.bd-slide-title {
    font-size: 1.75em;
    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    font-weight: bold;
    margin-bottom: 15px;
    color: #fff;
}

/* 自訂按鈕設計，讀取 PHP 傳來的 --btn-bg 變數 */
.bd-slide-btn {
    display: inline-block;
    padding: 10px 25px;
    background-color: var(--btn-bg);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: filter 0.3s ease;
}

.bd-slide-btn:hover {
    filter: brightness(1.1); /* 滑鼠游標經過時稍微變亮 */
    color: #fff;
}

/* 修改 Swiper 預設箭頭顏色 */
.bugdorm-swiper .swiper-button-next,
.bugdorm-swiper .swiper-button-prev {
    color: rgba(255, 255, 255, 0.7);
}

/* -----------------------------
   下方客製化頁籤 (Tabs)
------------------------------ */
.bugdorm-tabs-container {
    display: flex;
    width: 100%;
    background-color: #f5f5f5; /* 預設灰底色 */
}

.bd-tab-item {
    flex: 1; /* 平分寬度 */
    text-align: center;
    padding: 15px 10px;
    cursor: pointer;
    font-weight: bold;
    color: #795548; /* 對應圖中的深褐色字體 */
    transition: all 0.3s ease;
}

/* 當頁籤啟動時，讀取 PHP 傳來的 --tab-bg 變數改變底色，字體變白 */
.bd-tab-item.active {
    background-color: var(--tab-bg);
    color: #fff;
}

/* RWD: 手機版將頁籤改為水平滑動，避免擠在一起 */
@media (max-width: 768px) {
    .bugdorm-tabs-container {
        overflow-x: auto;
        white-space: nowrap;
    }
    .bd-tab-item {
        flex: 0 0 auto;
        padding: 15px 20px;
    }
}