/* --- 整體隱藏/顯示容器 --- */
.for-pc {
    display: none; /* 預設為手機模式，隱藏 PC 版 */
}
.for-mobile {
    display: block; /* 預設為手機模式，顯示 Mobile 版 */
}

@media (min-width: 768px) { /* 桌面版斷點 */
    .for-pc {
        display: block; /* 桌面模式顯示 PC 版 */
    }
    .for-mobile {
        display: none; /* 桌面模式隱藏 Mobile 版 */
    }
}


/* custom-banner-carousel.css */
.custom-banner-carousel-wrapper {
    width: 100vw; /* 確保寬度是視窗寬度的 100% */
    overflow: hidden; /* 隱藏超出部分 */
    position: relative; /* 為內部絕對定位元素提供參考點 */
    display: block;
    /* 不再需要 min-height，因為內部的 padding-bottom 會撐開 */
}

.custom-banner-carousel {
    width: 100%;
    position: relative;
    /* 這裡使用 padding-bottom 來維持高度比例 */
    /* 預設為桌面版的比例，請根據你的桌面圖片實際比例修改！ */
    /* 舉例: 如果桌面圖片是 1920x600，則為 (600 / 1920) * 100% = 31.25% */
    padding-bottom: 66.67%; /* <<===== 請修改為你的桌面圖片比例！ */
    height: 0; /* 必須設定為 0 才能讓 padding-bottom 生效 */
    overflow: hidden; /* 確保內容不溢出 */
}

@media (max-width: 767px) { /* 手機版斷點 */
    .custom-banner-carousel {
        /* 手機版使用手機圖片的比例，請根據你的手機圖片實際比例修改！ */
        /* 舉例: 如果手機圖片是 750x1200，則為 (1200 / 750) * 100% = 160% */
        padding-bottom: 133.25%; /* <<===== 請修改為你的手機圖片比例！ */
    }
}

.custom-banner-carousel .carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* 預設為 hidden，且不觸發事件 */
    visibility: hidden; 
    /* 延遲 visibility 變為 visible，與 opacity 漸變結束同步 */
    transition: opacity 1.5s ease-in-out, visibility 0s linear 1.5s; 
    /* 0s linear 1.5s 的意思是：visibility 變化不耗時 (0s)，但在 opacity 變化的 1.5 秒後才發生 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-banner-carousel .carousel-item.active {
    opacity: 1;
    /* 立即變為 visible，以便 opacity 漸變時可以看到元素 */
    visibility: visible; 
    /* 移除 visibility 的延遲，讓它立即生效 */
    transition: opacity 1.5s ease-in-out; 
}

.custom-banner-carousel .carousel-item img {
    /* 圖片填滿其父級 carousel-item */
    width: 100%; 
    height: 100%; /* 圖片高度填滿容器 */
    /* 使用 cover 或 contain 根據你的設計需求 */
    /* contain: 完整顯示圖片，可能會留白 */
    /* cover: 填滿容器，可能會裁剪圖片 */
    object-fit: contain; /* 如果不想裁剪，請保持這個。如果想填滿，改為 cover */
    display: block;
}


/* 1. 為你新增的全屏遮罩層定義樣式 */
.clb-popup-full-screen-overlay {
    position: fixed; /* 固定定位，覆蓋整個視窗 */
    top: 0;
    left: 0;
    width: 100vw; /* 佔滿整個視窗寬度 */
    height: 100vh; /* 佔滿整個視窗高度 */
    z-index: 999; /* 確保它在大部分頁面內容之上，但在菜單本身之下 */
    display: none; /* 預設隱藏 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* 淡入淡出動畫 */
    cursor: pointer; /* 鼠標變成手型，表示可點擊 */
}

.clb-popup-full-screen-overlay.active {
    display: block; /* 顯示遮罩 */
    opacity: 1;
    visibility: visible;
}


/* 底部社群圖標的樣式調整 */
.clb-popup.hamburger-nav > div[style*="z-index: 999;"] { /* 選擇帶有 z-index: 999 style 的 div */
    position: absolute; /* 相對於 .hamburger-nav 定位 */
    bottom: 0;
    right: 0;
    padding: 1rem 2rem; /* 保持原有的 padding */
    width: 100%; /* 讓它佔滿底部寬度，方便對齊 */
    box-sizing: border-box;
    display: flex !important; /* 確保顯示 */
    justify-content: flex-end; /* 靠右對齊 */
    align-items: center;
    background-color: transparent; /* 背景透明 */
    z-index: 1001; /* 確保在菜單內容和遮罩之上 */
}

.clb-popup.hamburger-nav > div[style*="z-index: 999;"] img {
    /* 保持圖片原始樣式或根據需要調整 */
    width: 30px;
    height: auto;
    margin-right: 25px; /* 圖標間距 */
}


/* 防止頁面滾動當 Modal 打開時 */
body.modal-open-no-scroll {
    overflow: hidden !important;
}

/* Modal 的全屏背景遮罩和容器定位 */
.tipf-modal-fullscreen {
    position: fixed; /* 固定定位，覆蓋整個視窗 */
    top: 0;
    left: 0;
    width: 100vw; /* 佔滿整個視窗寬度 */
    height: 100vh; /* 佔滿整個視窗高度 */
    background-color: rgba(0,0,0,0.5); /* 半透明黑色背景 */
    z-index: 9999; /* 確保它在所有頁面內容之上 */
    display: flex; /* 讓內容居中 */
    justify-content: center;
    align-items: center;
    padding: 2rem; /* 內邊距，防止內容貼邊 */

    /* 初始隱藏狀態，並添加淡入淡出過渡效果 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}

/* Modal 顯示時的狀態 */
.tipf-modal-fullscreen.active {
    opacity: 1;
    visibility: visible;
}

/* Modal 內容容器 */
.tipf-modal-container {
    background-color: white;
    width: 100%;
    max-width: 700px; /* 最大寬度 */
    max-height: 90vh; /* 最大高度 */
    overflow: hidden; /* 防止內容超出容器時產生外部滾動條 */
    border-radius: 10px;
    position: relative; /* 為了關閉按鈕的絕對定位 */
    display: flex; /* 使用 flexbox 讓內容垂直排列 */
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); /* 陰影效果 */
}

/* Modal 內容區塊 */
.tipf-modal-content {
    padding: 1rem;
    overflow-y: auto;        /* 如果內容過高，內部可以滾動 */
    max-height: calc(90vh - 3rem);  /* 計算實際內容高度 (減去關閉按鈕和 padding) */
    color: #444;
}

/* Modal 關閉按鈕 */
.tipf-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
    z-index: 10; /* 確保關閉按鈕在內容之上 */
}