/* 
   Carousel Layout Fix for mcwbdlogin.games (Nested Carousel Standalone)
   Final Verified Version: 2026-01-31
*/

/* 引入 Swiper 基礎樣式 */
@import url('https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css');

/* 1. 容器與基礎佈局 */
.elementor-element-93a1506 {
    width: 100% !important;
    display: block !important;
    margin: 20px auto !important;
    clear: both;
}

/* 修正頂部 Banner (或其它組件) 在手機端的 450px 強制高度導致的空白 */
.elementor-element-d489c63 .swiper,
.elementor-element-d489c63 .e-n-carousel {
    min-height: 0 !important;
}

.elementor-element-93a1506 .swiper,
.elementor-element-93a1506 .e-n-carousel {
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    display: block !important;
}

/* 2. 核心修復：解鎖 Wrapper 與 Slide 堆疊 */
.elementor-element-93a1506 .swiper-wrapper {
    display: flex !important;
    /* 強制並排 */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    transform: none !important;
    /* 解除可能導致位移失效的鎖定 */
    box-sizing: content-box !important;
}

.elementor-element-93a1506 .swiper-slide {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    background-color: #242e4a !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* --- 核心：精確隔離不同裝置的欄數 (使用超高權限路徑) --- */

/* 1. 電腦版 (1025px 以上)：強制 5 欄 (20%) */
@media (min-width: 1025px) {
    html body .elementor-element-93a1506 .swiper-slide {
        width: calc((100% - (4 * 10px)) / 5) !important;
        flex: 0 0 calc((100% - (4 * 10px)) / 5) !important;
        max-width: calc((100% - (4 * 10px)) / 5) !important;
        min-width: calc((100% - (4 * 10px)) / 5) !important;
    }
}

/* 圖片容器維持比例 */
.elementor-element-93a1506 .elementor-element-34432eb {
    flex: 0 0 auto !important;
    width: 100% !important;
}

.elementor-element-93a1506 .swiper-slide img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    object-fit: cover;
}

/* 恢復上方大圖容器的正常比例 */
.elementor-element-93a1506 .swiper-slide .elementor-element-34432eb {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
}

/* 確保上方大圖不被限制 (強制設定為寬度 100%) */
.elementor-element-93a1506 .swiper-slide .elementor-element-34432eb img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: cover !important;
}

/* 精準鎖定描述欄 (Bottom Bar)：使用 data-settings 屬性 */
.elementor-element-93a1506 .swiper-slide div[data-settings*="background_background"] {
    flex: 0 0 55px !important;
    height: 55px !important;
    min-height: 55px !important;
    max-height: 55px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 12px !important;
    background-color: #2d385e !important;
    width: 100% !important;
    margin-top: auto !important;
}

/* 僅針對描述欄內部的 Logo 進行限制 (不再使用通用的 widget-image img) */
.elementor-element-93a1506 .swiper-slide div[data-settings*="background_background"] .elementor-widget-image img {
    width: 30px !important;
    max-width: 30px !important;
    height: auto !important;
    max-height: 30px !important;
    display: inline-block !important;
    object-fit: contain !important;
}

/* 修正描述欄文字 */
.elementor-element-93a1506 .swiper-slide div[data-settings*="background_background"] .elementor-widget-heading h3 {
    font-size: 13px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    color: #fff !important;
    white-space: nowrap;
}

.elementor-element-93a1506 .swiper-slide div[data-settings*="background_background"] .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* 確保全區連結覆蓋在最上層 */
.elementor-element-93a1506 .ea-wrapper-link,
.elementor-element-93a1506 [class*="wrapper-link"] {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 10 !important;
}

/* 3. 箭頭樣式與定位 (精確定位在圖片區域) */
.elementor-element-93a1506 .elementor-swiper-button {
    position: absolute;
    top: 50% !important;
    /* 相對於容器垂直置中 */
    transform: translateY(-50%) !important;
    z-index: 100 !important;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.4) !important;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* 消除下方的多餘空白，鎖定容器高度並強制裁切溢出內容 (解決桌機顯示 6 欄問題) */
.elementor-element-93a1506 .swiper,
.elementor-element-93a1506 .e-n-carousel,
.elementor-element-93a1506 .swiper-container,
div.elementor-element.elementor-element-93a1506 .swiper {
    height: auto !important;
    min-height: 0px !important;
    max-height: none !important;
    overflow: hidden !important;
    /* 關鍵修正：改回 hidden 以隱藏第 6 欄 */
}

.elementor-element-93a1506 .swiper-wrapper {
    height: auto !important;
    align-items: flex-start !important;
    padding-bottom: 5px !important;
}

.elementor-element-93a1506 .elementor-swiper-button::before,
.elementor-element-93a1506 .elementor-swiper-button::after {
    display: none !important;
}

.elementor-element-93a1506 .elementor-swiper-button-prev {
    left: 10px !important;
}

.elementor-element-93a1506 .elementor-swiper-button-next {
    right: 10px !important;
}

.elementor-element-93a1506 .elementor-swiper-button-prev::after {
    content: '❮';
    font-size: 20px;
    display: block !important;
}

.elementor-element-93a1506 .elementor-swiper-button-next::after {
    content: '❯';
    font-size: 20px;
    display: block !important;
}

/* 4. RWD 適配 (修復手機版寬度鎖定問題) */
@media (max-width: 1024px) {
    .elementor-element-93a1506 .swiper-slide {
        width: calc((100% - (2 * 10px)) / 3) !important;
        flex: 0 0 calc((100% - (2 * 10px)) / 3) !important;
        max-width: calc((100% - (2 * 10px)) / 3) !important;
        /* 解除全域 5 欄限制 */
    }
}

@media (max-width: 767px) {
    .elementor-element-93a1506 .swiper-slide {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        /* 強制解鎖為 1 欄 */
    }

    /* 手機版標題字體調整 */
    .elementor-element-93a1506 .swiper-slide div[data-settings*="background_background"] .elementor-widget-heading h3 {
        font-size: 15px !important;
    }
}