/* 會員品牌頁共用的彈窗（Bootstrap modal）樣式。
   _Layout 只在品牌頁（body.jl-login-page）載入，未改版的頁面不受影響。
   站上的 Bootstrap CSS 是 v5.0.0-alpha1，沒有 .btn-close 的樣式（空的關閉鈕原本是隱形的），
   這裡統一畫成深綠標頭上的圓形 X。各頁寫在標頭上的 inline 背景色一律換成品牌綠。 */

body.jl-login-page .modal-backdrop.show {
    background: #0e2d28;
    opacity: .55;
}

body.jl-login-page .modal-content {
    border: 0 !important;
    border-radius: 8px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 60px #0e2d2833 !important;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    color: #163e38;
}

/* ── 標頭 ── */
body.jl-login-page .modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 14px 16px 14px 24px;
    border-bottom: 0;
    border-radius: 0 !important;
    background: #07574e !important;
    color: #fff !important;
}

    body.jl-login-page .modal-header.bg-danger { background: #b4443c !important; }

    body.jl-login-page .modal-header.bg-warning {
        background: #d4d83d !important;
        color: #163e38 !important;
    }

body.jl-login-page .modal-title {
    margin: 0;
    color: inherit !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.5;
    letter-spacing: .06em;
}

/* 關閉鈕：.btn-close（Bootstrap）與 .modal-x（推薦入會頁自訂）統一外觀；按鈕內原本的「x」文字隱藏 */
body.jl-login-page .modal-header :is(.btn-close, .modal-x) {
    position: relative;
    flex: none;
    width: 36px;
    height: 36px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 1px solid #ffffff40;
    border-radius: 50%;
    background: #ffffff14;
    box-shadow: none;
    color: transparent;
    font-size: 0;
    line-height: 0;
    opacity: 1;
    cursor: pointer;
    transition: background-color .15s;
}

    body.jl-login-page .modal-header :is(.btn-close, .modal-x)::before,
    body.jl-login-page .modal-header :is(.btn-close, .modal-x)::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 14px;
        height: 1.5px;
        border-radius: 1px;
        background: #fff;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    body.jl-login-page .modal-header :is(.btn-close, .modal-x)::after { transform: translate(-50%, -50%) rotate(-45deg); }

    body.jl-login-page .modal-header :is(.btn-close, .modal-x) > * { display: none; }

    body.jl-login-page .modal-header :is(.btn-close, .modal-x):hover { background: #ffffff2e; }

    body.jl-login-page .modal-header :is(.btn-close, .modal-x):focus-visible {
        outline: 3px solid #d4d83d;
        outline-offset: 2px;
    }

body.jl-login-page .modal-header.bg-warning :is(.btn-close, .modal-x) { border-color: #163e3840; background: #163e3812; }
    body.jl-login-page .modal-header.bg-warning :is(.btn-close, .modal-x)::before,
    body.jl-login-page .modal-header.bg-warning :is(.btn-close, .modal-x)::after { background: #163e38; }

/* 標頭上若是一般按鈕（例如公告的「關閉」） */
body.jl-login-page .modal-header .btn {
    margin-left: auto;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid #ffffff66;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

    body.jl-login-page .modal-header .btn:hover { background: #ffffff1f; color: #fff; }

/* ── 內容 ── */
body.jl-login-page .modal-body {
    font-size: 15px;
    line-height: 1.8;
    color: #163e38;
}

    body.jl-login-page .modal-body:not([style*="padding"]) { padding: 20px 24px; }

    body.jl-login-page .modal-body .text-muted { color: #62736b !important; }

    body.jl-login-page .modal-body a:not(.btn) { color: #07574e; text-underline-offset: 3px; }

/* 彈窗裡的表格、清單 */
body.jl-login-page .modal .table {
    margin-bottom: 0;
    color: #163e38;
    font-variant-numeric: tabular-nums;
}

    body.jl-login-page .modal .table > :not(caption) > * > * {
        padding: 10px 12px;
        border-bottom-color: #eef2ea;
        box-shadow: none;
    }

    body.jl-login-page .modal .table thead th,
    body.jl-login-page .modal .table .table-light > * > *,
    body.jl-login-page .modal .table-light th,
    body.jl-login-page .modal .table-light td {
        background: #f2f5ee !important;
        color: #2f4a43;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: .04em;
    }

    body.jl-login-page .modal .table-hover > tbody > tr:hover > * { background: #f7f9f4; }

body.jl-login-page .modal .badge {
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
}

    body.jl-login-page .modal .badge.bg-danger { background: #fbecea !important; color: #9b3b33 !important; }
    body.jl-login-page .modal .badge.bg-success { background: #e3eee8 !important; color: #07574e !important; }
    body.jl-login-page .modal .badge.bg-warning { background: #fbf3dc !important; color: #7a5f12 !important; }

body.jl-login-page .modal .list-group-item {
    border-color: #eef2ea;
    color: #163e38;
}

/* ── 底部 ── */
body.jl-login-page .modal-footer {
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #e3e9de !important;
    background: #f7f9f4;
}

    body.jl-login-page .modal-footer > * { margin: 0; }

    body.jl-login-page .modal-footer :is(.btn, .btn-confirm, .custom-outline, .jl-od-btn) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 0 20px !important;
        border-radius: 4px !important;
        font-family: inherit;
        font-size: 15px !important;
        font-weight: 600;
        letter-spacing: .06em;
        line-height: 1;
        box-shadow: none;
    }

    /* 主要動作：品牌綠 */
    body.jl-login-page .modal-footer :is(.btn-primary, .btn-success, .btn-confirm, .custom-outline) {
        border: 1px solid #07574e !important;
        background: #07574e !important;
        color: #fff !important;
    }

        body.jl-login-page .modal-footer :is(.btn-primary, .btn-success, .btn-confirm, .custom-outline):hover {
            border-color: #0b6a5f !important;
            background: #0b6a5f !important;
        }

    /* 次要動作（取消、關閉）：白底描邊 */
    body.jl-login-page .modal-footer :is(.btn-secondary, .btn-outline-secondary, .btn-outline-dark, .btn-light),
    body.jl-login-page .modal-footer .custom-outline#closeReminderBtn {
        border: 1px solid #d9e1d5 !important;
        background: #fff !important;
        color: #2f4a43 !important;
    }

        body.jl-login-page .modal-footer :is(.btn-secondary, .btn-outline-secondary, .btn-outline-dark, .btn-light):hover,
        body.jl-login-page .modal-footer .custom-outline#closeReminderBtn:hover { background: #edf2e6 !important; }

/* ── 手機 ── */
@media (max-width: 767px) {
    /* 有些彈窗寫死 max-width:30%，手機上會擠成一條 */
    body.jl-login-page .modal-dialog {
        max-width: calc(100% - 24px) !important;
        margin: 12px auto;
    }

    body.jl-login-page .modal-header { min-height: 56px; padding: 12px 12px 12px 18px; }
    body.jl-login-page .modal-title { font-size: 16px !important; }
    body.jl-login-page .modal-body:not([style*="padding"]) { padding: 16px 18px; }
    body.jl-login-page .modal-footer { padding: 12px 16px; }

    body.jl-login-page .modal-footer :is(.btn, .btn-confirm, .custom-outline, .jl-od-btn) { flex: 1 1 0; }
}