﻿@media (max-width: 768px) {
    html, body {
        padding: 0;
        margin: 0;
        height: 100dvh; /*250902 vh->dvh*/
        min-height: 100%;
        -webkit-overflow-scrolling: touch;
    }

/*    * {
        margin: 0;
        padding: 0;
    }*/

    .bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100dvh; /*250902 vh->dvh*/
        display: flex;
        justify-content: flex-end;
        flex-direction: column;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s linear, transform 0.3s ease;
        z-index: 10000;
    }

        .bottom-sheet.show {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
            overflow-y: hidden; /*250214*/
        }

    /*250902*/
    .filter-btn-wrapper {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0; /* 直接固定在底部，不再依賴祖先是否 .filter-open */
        z-index: 1010; /* 高於 overlay(1001)、content(1005)、header(1006) */
        background: #fff;
        box-shadow: 0 -6px 12px rgba(0,0,0,.06);
        padding: 12px 16px;
        /* 安全區域：先給一般 padding，再用 env 疊加 */
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
    }

        /*.bottom-sheet .filter-btn-wrapper {
            box-sizing: border-box;
            z-index: 1006;*/
            /*250819 begin*/
            /*flex: none;*/ /* 佔自己的自然高度 */
            /*position: sticky;*/ /* 也可用普通的 static，放在 content 末端 */
            /*bottom: 0;
            padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0));
            background: #fff;
            box-shadow: 0 -6px 12px rgba(0,0,0,.06);*/
            /*250819 end*/
        /*}*/

    /*250214*/
    .selector-content__wrapper.open-bottomsheet .selector-content {
        overflow-y: hidden;
    }

    .selector-filter.filter-open {
        z-index: 2000;
    }



    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
    }

    .bottom-sheet.show .overlay {
        z-index: 1001;
        touch-action: none;
        pointer-events: auto;
    }

    .bottom-sheet .content {
        width: 100%;
        max-width: 1150px;
        height: 50dvh; /*250902 vh->dvh*/
        background: #fff;
        padding-top: 20px;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.06);
        position: relative;
        transform: translateY(50%);
        transition: transform 0.3s ease;
        z-index: 1005;
    }

    .bottom-sheet.show .content {
        transform: translateY(0);
    }

    .bottom-sheet.dragging .content {
        transition: none;
    }

    .selector-filter {
/*        background-color: transparent;
*/    }

    .bottom-sheet.fullscreen .content {
        border-radius: 0;
        transform: translateY(0);
        padding-bottom: env(safe-area-inset-bottom, 0); /*250902*/
        /* 250819 begin */
        /*position: fixed;*/ /* 讓抽屜覆蓋全畫面 */
        /*inset: 0;
        display: flex;
        flex-direction: column;
        height: 100vh;*/ /* 先給退場 */
        /*height: 100dvh;*/ /* 動態視窗高度，解決行動瀏覽器網址列收合 */
        /*background: #fff;
        padding-bottom: env(safe-area-inset-bottom, 0);*/ /* 250819 iOS 瀏海安全區 */
        /* 250819 end */
    }

    .bottom-sheet .content .header {
        display: flex;
        justify-content: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 30px;
        background-color: white;
        border-radius: 50px;
        z-index: 1006;
    }

    /*  250214*/
    .bottom-sheet.fullscreen .content .header {
        top: 15px;
    }

    .bottom-sheet .content .header .drag-icon {
        padding: 15px;
        cursor: grab;
        user-select: none;
    }

        .bottom-sheet .content .header .drag-icon span {
            height: 4px;
            width: 40px;
            background: #000;
            display: block;
            border-radius: 50px;
        }

    .bottom-sheet .content .body {
        height: 100%;
        padding: 15px 0 40px;
        overflow-y: auto;
        /* 250819 begin */
        /*flex: 1 1 auto;
        min-height: 0;*/ /* 讓 flex 子元素可縮、才能出現滾動條 */
        /*overflow: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;*/
        /* 250819 end */
    }

        /*    body.overflow-hidden .selector-content__wrapper {
        overflow-y: hidden;
    }*/

        .bottom-sheet .content .body.overflow-hidden {
            overflow-y: hidden;
        }

        .bottom-sheet .content .body::-webkit-scrollbar {
            width: 0;
        }

        .bottom-sheet .content .body h2 {
            font-size: 1.8rem;
        }

        .bottom-sheet .content .body p {
            font-size: 1.06rem;
            margin-top: 20px;
        }
}
