/* ===========================================================================================
	                          Lightbox Video 放大_for Rich Content
=========================================================================================== */

/* Product Page 內頁專用 >> 為了覆蓋原有的樣式 >> 給新的 Dynamic Modal 的 Rich Content 用 */
/* 這段程式碼使用了 SCSS/Less (CSS 預處理器) 的語法（因為它包含了 & 符號與層級巢狀結構）*/
.content-wrap:has(#product_detail) {

    & .modal {

        /* 這裡指的是 .modal-dialog 的寬度變更 (新的 Dynamic Modal 的 Rich Content 用) */
        @media (min-width: 768px) {

            .modal-dialog {
            min-width: 600px;/* 要覆蓋 */
            }

        }

        /* 這裡指的是 .modal-dialog 的寬度變更 (新的 Dynamic Modal 的 Rich Content 用) */
        @media (min-width: 1024px) {

            .modal-dialog {
            min-width: 800px !important;/* 要覆蓋 */
            }

        }

        /* 這裡指的是 .modal-dialog 的寬度變更 (新的 Dynamic Modal 的 Rich Content 用) */
        @media (min-width: 1200px) {

            .modal-dialog {
            min-width: 900px !important;/* 要覆蓋 */
            }

        }

    }

}

/* Product Page 內頁專用 >> 為了覆蓋原有的樣式 >> 給新的 Dynamic Modal 的 Rich Content 用 */
/* 這段程式碼使用了 SCSS/Less (CSS 預處理器) 的語法（因為它包含了 & 符號與層級巢狀結構）*/
.content-wrap:has(#product_detail) {

    & .modal {

        & .modal-dialog {

            /* (.no-title/ Rich Content 模組沒有標題的 Lightbox) .modal-dialog 下的 .modal-content */
            .modal-content.no-title {
            background-color: transparent !important;
            box-shadow: unset !important;
            border: unset !important;
            }

            /* .modal-dialog 下的 .modal-header */
            .modal-header {
            padding: 15px;
            border-bottom: none !important;
            }

            /* .modal-dialog 下的 .modal-body */
            .modal-body {
            padding: 5px !important;
            }

        }

    }

}



/* Icon 變大*/ 
.tab-content a.play_btn:before {
    cursor: pointer;
    position: absolute;
    width: 100%;
    height: 100%;
    content: "\00a0";
    background: rgba(0%,0%,0%,.15) url(https://www.aten.com/file/template/1/images/icons/Play_Icon_Mline.png) no-repeat center center;
    filter: drop-shadow(1px 1px 3px rgb(0, 0, 0)) !important;
    transition: background-color 0.3s ease-out;
}

.tab-content a:hover.play_btn:before {
    background: rgba(0%,0%,0%,.05) url(https://www.aten.com/file/template/1/images/icons/Play_Icon_Mline.png) no-repeat center center;
    filter: brightness(130%) contrast(110%) drop-shadow(2px 22px 12px rgba(0, 0, 0, 0.1)) !important;
}  



/* Product Page 內頁專用 >> 給舊的 Legacy Content + 新的 Dynamic Modal 的 Rich Content 用 */
.modal.fade.in .modal-content .modal-header/* 新的 Dynamic Modal 的 Rich Content 用 */, 
.modal .modal-content .modal-header/* 新的 Dynamic Modal 的 Rich Content 用 */, 
.video .modal-header/* 舊的 Legacy Content 用 */ {
    padding: 15px;
    border-bottom: none !important; 
}

/* Product Page 內頁專用 >> 給新的 Dynamic Modal 的 Rich Content 用 */
.modal.fade.in .modal-content .modal-body,
.modal .modal-content .modal-body {
    padding: 5px !important;
}


/* (.no-title/ Rich Content 模組沒有標題的 Lightbox) .modal-content */
.modal.fade.in .modal-content.no-title, 
.modal .modal-content.no-title {
    background-color: transparent !important;
    border: unset !important;
}

/* (.no-title/ Rich Content 模組沒有標題的 Lightbox) .modal-content >> .close */
.modal.fade.in .modal-content.no-title .close, 
.modal .modal-content.no-title .close {
    color: #fff !important;
    opacity: 0.7 !important;
    font-size: 30px !important;
    font-weight: 300 !important;
    border-radius: 30px;
    position: relative;
    display: block;
    width: 40px;
    height: 40px;
    /* border: 2px solid rgba(255, 255, 255, .7); */
    border: 3px solid rgba(255, 255, 255, .7);
    padding-bottom: 7px;
    top: -30px;
    left: 1%;
} 





/* 1024 以上 */
@Media (min-width: 1024px) {

    /* Video Lightbox 變大*/ 
    div.video .modal-dialog {
    max-width: 860px !important;
    max-width: 900px !important;
    max-width: 63% !important;
    width: 97%;
    margin-top: 10% !important;
    }


    /* Video Lightbox 變大*/ 
    div.video .fluid-width-video-wrapper {
    min-height: 400px;
    min-height: 480px;
    min-height: 55vh;
    min-height: 59.8vh;
    }

    /* 新的 Dynamic Modal 的 Rich Content 用 >> Lightbox 變寬 */
    .modal.fade.in .modal-dialog {
    min-width: 800px !important;/* 要覆蓋 */
    }

}


/* 1200 以上 */
@Media (min-width: 1200px) {

    /* 新的 Dynamic Modal 的 Rich Content 用 >> Lightbox 變寬 */
    .modal.fade.in .modal-dialog {
    min-width: 900px !important;/* 要覆蓋 */
    }

}


/* 2000 以上 */
@Media (min-width: 2000px) {

    /* Video Lightbox 變大*/ 
    div.video .modal-dialog {
    max-width: 53% !important;
    }

}


/* Bowei 筆電寬螢幕 */
@Media (min-width: 1281px) and (max-width: 1366px) {

    /* Video Lightbox 變大*/ 
    div.video .modal-dialog {
    max-width: 63% !important;
    }

}


/* 820 以下 */
@media (max-width: 820px) {}


/* 480 以下 */
@media (max-width: 480px) {

    /* (.no-title/ Rich Content 模組沒有標題的 Lightbox) .modal-content >> .close */
    .modal.fade.in .modal-content.no-title .close, 
    .modal .modal-content.no-title .close {
    border: none !important;
    top: -15px;
    left: 1%;
    } 

}