/*
 * member-base.css
 * 取代 bootstrap 的最小集合：只補頁面實際用到、但 member-*.css 沒定義的 class。
 * class 名稱與 bootstrap 相同，HTML 不需修改；數值沿用 bootstrap 5 預設。
 * 載入順序：放在 member-bw.css / member-smart.css 之後。
 */

/* .container：置中、隨視窗寬度分段限制最大寬度 */
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: .75rem;
    padding-left: .75rem;
    box-sizing: border-box;
}

@media (min-width: 576px) {
    .container { max-width: 540px; }
}

@media (min-width: 768px) {
    .container { max-width: 720px; }
}

@media (min-width: 992px) {
    .container { max-width: 960px; }
}

@media (min-width: 1200px) {
    .container { max-width: 1140px; }
}

@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

/* .text-danger：錯誤訊息文字色 */
.text-danger {
    color: #dc3545;
}

/*
 * 燈箱（由 js/member.js 產生的結構）
 * class 名稱沿用 .modaal-*，讓既有的 custom class（idle-modaal、teach-modaal…）樣式仍然套得上。
 */
.modaal-noscroll {
    overflow: hidden;
}

.modaal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.modaal-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    overflow: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.modaal-wrapper * {
    box-sizing: border-box;
}

.modaal-container {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    text-align: left;
    color: #000;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, .2);
}

.modaal-content-container {
    padding: 30px;
}

.modaal-close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    padding: 0;
    border: none;
    border-radius: 100%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background .2s ease-in-out;
}

.modaal-close:hover,
.modaal-close:focus {
    outline: 0;
    background: #fff;
}

.modaal-close:hover::before,
.modaal-close:hover::after,
.modaal-close:focus::before,
.modaal-close:focus::after {
    background: #b93d0c;
}

.modaal-close::before,
.modaal-close::after {
    content: " ";
    display: block;
    position: absolute;
    top: 14px;
    left: 23px;
    width: 4px;
    height: 22px;
    border-radius: 4px;
    background: #fff;
    transition: background .2s ease-in-out;
}

.modaal-close::before {
    transform: rotate(-45deg);
}

.modaal-close::after {
    transform: rotate(45deg);
}

/* 關閉按鈕的文字只給螢幕閱讀器 */
.modaal-close span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

/*
 * 網路請求 loading 遮罩（js/ajax-load-black.js 產生的結構）
 */
.jq-loading-body,
.jq-loading-body::before,
.jq-loading-body::after,
.jq-loading-fixed,
.jq-loading-fixed::before,
.jq-loading-fixed::after,
.jq-loading,
.jq-loading::before,
.jq-loading::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html.jq-loading-html {
    width: 100%;
    height: 100%;
}

body.jq-loading-body {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body.jq-loading-body > *:not(.jq-loading-fixed) {
    filter: blur(6px);
}

.jq-loading-fixed {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, .54);
    transition: .4s;
}

.jq-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.jq-loading span {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border-radius: 100%;
    animation: loading 1.4s infinite ease-in-out both;
}

.jq-loading .load1 {
    margin-right: 6px;
    animation-delay: -.32s;
}

.jq-loading .load2 {
    margin-right: 6px;
    animation-delay: -.16s;
}

@keyframes loading {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/*
 * 觸控裝置的「使用網路流量提示」遮罩（js/video_live.js 產生的結構）
 */
.container {
    position: relative;
}

.playerCover {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .7);
    transition: 1s ease;
}

.playerCover.trans {
    opacity: 0;
    visibility: hidden;
}

.playerCover div {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 100%;
    padding: 50px 20px;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-family: "Microsoft JhengHei", "微軟正黑體", arial, sans-serif;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}

.playerCover div p {
    display: block;
    margin-bottom: 30px;
    line-height: 1.5em;
    font-size: 15px;
}

.playerCover .startBtn {
    display: inline-block;
    padding: 10px 30px 12px;
    line-height: 1em;
    border-radius: 5px;
    transition: .3s ease;
    cursor: pointer;
    background: #cd0505;
    color: #fff;
}

.playerCover .startBtn:hover {
    background: #ccc;
    color: #000;
}

/*
 * footer 左右兩欄對齊
 * 原本左右兩欄各自 float，高度不同時頂端對齊、底部參差。
 * 改成 flex 並以底部對齊：左欄的「網站連結」「版權」與右欄的「客服專線」「服務時間」
 * 都是同樣行高的兩行，會各自落在同一條水平線上；友站 logo 與訂閱按鈕則在最上面一列。
 * 640px 以下維持原本的上下堆疊。
 */
@media screen and (min-width: 641px) {
    .footer-bottom {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }

    /* clearfix 的偽元素在 flex 容器裡會變成多餘的欄位 */
    .footer-bottom::before,
    .footer-bottom::after {
        display: none;
    }

    .footer-bottom > .left,
    .footer-bottom > .right {
        float: none;
    }
}

/*
 * footer 中間寬度（641～1024px）：兩欄各只有半個畫面，文字需要能換行，
 * 不然左欄連結會被擠成一字一行、右欄服務時間會被切掉。
 */
@media screen and (min-width: 641px) and (max-width: 1024px) {
    .footer-bottom > .left,
    .footer-bottom > .right {
        min-width: 0;
    }

    .footer-bottom .sitemap {
        flex-wrap: wrap;
    }

    .footer-bottom .sitemap li {
        white-space: nowrap;
    }

    .footer-bottom h6 {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}