/* ============================================================
   EuroSafe Online Portal — online_portal.css
   CSS variables + components extracted from index.html design
   ============================================================ */

:root {
    --c-blue: #1f7bba;
    --c-blue-dark: #175f90;
    --c-blue-light: #a5d9ff;
    --c-blue-50: #ebf5ff;
    --c-green: #8cc63e;
    --c-green-50: #eaf5d4;
    --c-success: #2e7d32;
    --c-success-bg: #e8f5e9;
    --c-g50: #fafbfc;
    --c-g100: #f1f3f5;
    --c-g200: #e9ecef;
    --c-g300: #dee2e6;
    --c-g400: #ced4da;
    --c-g500: #adb5bd;
    --c-g600: #6c757d;
    --c-g700: #495057;
    --c-g900: #212529;
    --ff-d: "Playfair Display", serif;
    --ff-b: "Inter", Arial, sans-serif;
    --r: 12px;
    --rs: 8px;
}

body {
    font-family: var(--ff-b);
    background: var(--c-g100);
    color: var(--c-g900);
    font-size: 16px;
}

h1, h2, h3, h4, h5 { font-family: var(--ff-b); }

/* ── Hero Banner ── */
.hero {
    position: relative;
    min-height: 202px;
    overflow: hidden;
    color: #fff;
    background: var(--c-blue-dark);
    display: grid;
    align-items: end;
}
.hero-bg {
    position: absolute; inset: 0;
    background: url("/Images/EuroSafe_bg.jpg") center 40% / cover no-repeat;
}
.hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(4,44,70,.95) 0%, rgba(10,88,135,.84) 48%, rgba(8,74,110,.72) 100%);
}
.hero-in {
    position: relative; z-index: 1;
    padding: 36px 10px 68px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 36px;
    align-items: end;
}
.hero-left { min-width: 0; }
.hero-eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(255,255,255,.72);
    margin: 0 0 13px;
}
.hero-eyebrow .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #8cc63e;
    box-shadow: 0 0 0 4px rgba(140,198,62,.26);
    flex-shrink: 0;
    display: inline-block;
}
.hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(28px, 3.8vw, 50px);
    line-height: .96;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0 0 13px;
}
.hero h1 em {
    font-style: normal;
    background: linear-gradient(90deg, #c6e87a, #8cc63e);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub {
    font-size: 13.5px; line-height: 1.6;
    color: rgba(255,255,255,.68);
    margin: 0;
}

/* ── Hero stat box — training centres ── */
.hero-stat {
    align-self: end;
    min-width: 460px;
    padding: 18px 24px 20px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 16px;
    background: rgba(255,255,255,.11);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 48px rgba(0,0,0,.18);
}
.hsb-status {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #8cc63e;
    margin-bottom: 14px;
}
.hsb-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #8cc63e;
    box-shadow: 0 0 0 3px rgba(140,198,62,.3);
    flex-shrink: 0;
    display: inline-block;
}
.hsb-grid {
    display: flex;
    align-items: flex-start;
}
.hsb-item {
    max-width: 140px;
    display: flex; flex-direction: column;
    align-items: flex-start; text-align: left;
    padding: 0 16px;
}
.hsb-item:first-child { padding-left: 0; }
.hsb-item:last-child  { padding-right: 0; }
.hsb-n {
    font-size: 13px; font-weight: 700; line-height: 1.2;
    color: #fff; letter-spacing: .01em;
    margin-bottom: 5px;
}
.hsb-addr {
    font-size: 10.5px; line-height: 1.55;
    color: rgba(255,255,255,.6);
    text-decoration: none;
    transition: color .15s;
    display: block;
}
.hsb-addr:hover { color: rgba(255,255,255,.92); text-decoration: underline; }
.hsb-tel {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; line-height: 1.5;
    color: rgba(255,255,255,.6);
    margin-top: 4px;
}
.hsb-tel svg { flex-shrink: 0; opacity: .75; }
.hsb-sep {
    width: 1px; align-self: stretch; flex-shrink: 0;
    background: rgba(255,255,255,.18);
    margin: 2px 0;
}

/* compact hero (register / tc / payment pages) */
.hero.compact { min-height: 0; }
.hero.compact .hero-in  { padding: 16px 0; display: block; }
.hero.compact h1        { font-size: 20px; line-height: 1.2; margin-bottom: 4px; }
.hero.compact .hero-eyebrow,
.hero.compact .hero-sub { display: none; }

/* 全站響應式斷點統一 991.98px（Bootstrap lg）：≥992 桌機版、<992 手機版，
   跟篩選列（col-lg-*）、課程卡（col-lg-6）、卡片縮小徽章同一條線切換，避免中間出現混搭區間 */
@media (max-width: 991.98px) {
    .hero-in { grid-template-columns: 1fr; padding-bottom: 58px; }
    .hero-stat { min-width: 0; width: 100%; justify-self: start; }
    .hsb-item { align-items: center !important; text-align: center !important; padding: 0 10px !important; }
}
@media (max-width: 991.98px) {
    .hero { min-height: 0; }
    .hero-in { padding: 14px 0 52px; gap: 0; }
    .hero-eyebrow { font-size: 12px; }
    .hero h1 { font-size: 22px; line-height: 1.1; }
    .hero-sub  { display: none; }
    .hero-stat { display: none; }
    .hero.compact h1 { font-size: 18px; }
}
/* 768~991：hero-in 左右 padding 歸零後，header 文字會比內容 container（12px gutter）凸出去，
   補回 12px 讓 header 與下方卡片左緣對齊（<768 由 hero-left 的 ms-16 補償，不需要這條） */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-in { padding-left: 12px; padding-right: 12px; }
}

/* ── Step Bar ── */
.stp-wrap {
    background: #fff;
    border-bottom: 1px solid var(--c-g300);
    z-index: 100;
}
.stp {
    display: flex; width: 100%;
    margin: 0; padding: 0; list-style: none;
}
.stp li {
    flex: 1; position: relative;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 18px 10px 24px;
    font-size: 13px; font-weight: 500;
    color: var(--c-g500); background: var(--c-g200);
    cursor: default; transition: all 0.25s;
    font-family: var(--ff-b);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
    margin-left: -7px;
}
.stp li:first-child {
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
    margin-left: 0; padding-left: 16px;
}
.stp li:last-child {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
}
.stp li .si {
    width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
    background: var(--c-g400); color: #fff; transition: all 0.3s;
}
.stp li.act { background: var(--c-green); color: #fff; font-weight: 600; }
.stp li.act .si { background: rgba(255,255,255,0.35); }
.stp li.dn  { background: var(--c-green-50); color: var(--c-blue); }
.stp li.dn  .si { background: var(--c-green); color: #fff; }

@media (max-width: 991.98px) {
    .stp li {
        gap: 4px;
        padding: 8px 12px 8px 20px;
        font-size: 12px;
        line-height: 1.15;
    }

    .stp li:first-child {
        padding-left: 12px;
    }

    .stp li .si {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }
}

@media (max-width: 600px) {
    .stp li {
        flex-direction: row;
        gap: 3px;
        padding: 6px 5px 6px 13px;
        font-size: 10px;
        line-height: 1.15;
        text-align: left;
    }

    .stp li:first-child {
        padding-left: 8px;
    }

    .stp li span:not(.si):not(.material-icons) {
        display: block;
        max-width: 100%;
        white-space: normal;
        word-break: keep-all;
    }

    .stp li .si {
        width: 18px;
        height: 18px;
        font-size: 10px;
    }

    .stp li:nth-child(4) span:not(.si):not(.material-icons) {
        font-size: 0;
    }

    .stp li:nth-child(4) span:not(.si):not(.material-icons)::after {
        content: "Confirm";
        font-size: 10px;
    }
}

/* ── Filter Bar ── */
.flt {
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(220,229,237,.8);
    border-radius: var(--r);
    padding: 13px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.flt-float {
    position: relative;
    z-index: 3;
    margin-top: -44px;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}
/* 平板 (641px~960px): hero 內容改為單欄堆疊變高，浮動卡片改為與 hero 保持 30px 距離 */
/*@media (min-width: 641px) and (max-width: 960px) {
    .flt-float {
        margin-top: 30px;
    }
}
*/
/*** ── DevExpress BootstrapComboBox + DateEdit → form-select look ── ***/
.flt-cmb .dxbs-fl-cpt {
    display: none !important;
}

.flt-cmb .dxbs-combobox,
.flt-cmb .dxbs-date-edit {
    width: 100%;
}

    .flt-cmb .dxbs-combobox > .input-group,
    .flt-cmb .dxbs-date-edit > .input-group {
        height: 49px;
        flex-wrap: nowrap;
        border: 1px solid var(--c-g300);
        border-radius: var(--rs);
        background: #fff;
        transition: border-color 0.15s, box-shadow 0.15s;
    }

        .flt-cmb .dxbs-combobox > .input-group:focus-within,
        .flt-cmb .dxbs-date-edit > .input-group:focus-within {
            border-color: rgb(162.5, 192.5, 217.5);
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgba(70, 130, 180, 0.25);
        }

        .flt-cmb .dxbs-combobox > .input-group > .dxbs-input-cntr,
        .flt-cmb .dxbs-date-edit > .input-group > .dxbs-input-cntr {
            flex: 1;
            min-width: 0;
        }

            .flt-cmb .dxbs-combobox > .input-group > .dxbs-input-cntr > .form-control,
            .flt-cmb .dxbs-date-edit > .input-group > .dxbs-input-cntr > .form-control {
                height: 47px;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                font-size: 14px;
                font-family: var(--ff-b);
                color: var(--c-g900);
                background: transparent !important;
                padding: 0 12px;
            }

                .flt-cmb .dxbs-combobox > .input-group > .dxbs-input-cntr > .form-control:focus,
                .flt-cmb .dxbs-date-edit > .input-group > .dxbs-input-cntr > .form-control:focus {
                    outline: none !important;
                    box-shadow: none !important;
                }

    .flt-cmb .dxbs-combobox .dxbs-placeholder,
    .flt-cmb .dxbs-date-edit .dxbs-placeholder {
        color: var(--c-g500) !important;
    }

    .flt-cmb .dxbs-combobox > .input-group > .input-group-append,
    .flt-cmb .dxbs-date-edit > .input-group > .input-group-append {
        display: flex;
        align-items: stretch;
        flex-shrink: 0;
    }

        .flt-cmb .dxbs-combobox > .input-group > .input-group-append > .btn,
        .flt-cmb .dxbs-combobox > .input-group > .input-group-append > button,
        .flt-cmb .dxbs-date-edit > .input-group > .input-group-append > .btn,
        .flt-cmb .dxbs-date-edit > .input-group > .input-group-append > button {
            border: none !important;
            background: transparent !important;
            box-shadow: none !important;
            padding: 0;
            width: 36px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0 !important;
        }

            .flt-cmb .dxbs-combobox > .input-group > .input-group-append > .btn:focus,
            .flt-cmb .dxbs-combobox > .input-group > .input-group-append > button:focus,
            .flt-cmb .dxbs-date-edit > .input-group > .input-group-append > .btn:focus,
            .flt-cmb .dxbs-date-edit > .input-group > .input-group-append > button:focus {
                box-shadow: none !important;
                outline: none;
            }
.op-chevron {
    font-size: 14px;
    line-height: 40px;
    color: #212529;
    user-select: none;
    display: block;
    text-align: center;
    cursor: pointer;
}

/* ── Combobox dropdown list — smaller font ── */
.dxbs-listbox,
.dxbs-listbox .dropdown-item,
.dxbs-listbox > li,
.dxbs-listbox-item,
.dxbs-popup-listbox > li,
.dxbs-cs > li {
    font-size: 13px !important;
}

/*** ── DevExpress BootstrapComboBox + DateEdit → form-select look ── ***/
/* ── Buttons ── */
.btn-s {
    background: var(--c-blue);
    color: #fff;
    border: none;
    font-weight: 600;
    height: 42px;
    padding: 0 20px;
    border-radius: var(--rs);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-s:hover { background: var(--c-blue-dark); color: #fff; }

.btn-m {
    background: var(--c-green);
    color: #fff;
    border: none;
    transition: all 0.2s;
}
.btn-m:hover { background: var(--c-blue-dark); color: #fff; }

.btn-bk {
    background: #fff; color: var(--c-g700);
    border: 1px solid var(--c-g400);
}
.btn-bk:hover { background: var(--c-g100); }

/* ══ COURSE CARD (v9) ══════════════════════════════════ */
.cc {
    background: #fff;
    border: 1px solid #dde5ed;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 1px 3px rgba(15,27,45,.04), 0 4px 12px rgba(15,27,45,.06);
    transition: box-shadow .2s;
}
.cc:hover { box-shadow: 0 4px 20px rgba(15,27,45,.1); }

/* ── Card Header ── */
.cc-head {
    padding: 14px 20px 8px;
    border-bottom: 1px solid #edf1f6;
    flex-shrink: 0;
}
.cc-code {
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: .12em; text-transform: uppercase;
    color: #64748b; margin-bottom: 6px;
}
.cc-name {
    font-size: 19px; font-weight: 700;
    line-height: 1.2; letter-spacing: -.02em;
    color: #0f1b2d; margin: 0 0 3px;
}
.cc-range {
    font-size: 19px; font-weight: 700;
    line-height: 1.2;
    color: var(--c-blue);
    margin: 0 0 3px;
}
.cc-head .cc-tlbl { margin-bottom: 3px; }

/* ── Card Header: Agent invite-link copy chip ──
   裸 icon 太不明顯，改成淺藍底＋藍框＋文字的 chip；複製成功時整顆轉綠底打勾 */
.cc-copy-btn {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 8px;
    padding: 3px 9px;
    border: 1px solid #bcd4ee; border-radius: 999px;
    background: #eef4fb; color: var(--c-blue);
    font-family: inherit;
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0; line-height: 1.4;
    white-space: nowrap; vertical-align: middle;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.cc-copy-btn:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.cc-copy-btn i { font-size: 13px; line-height: 1; }
.cc-copy-btn.is-copied {
    background: var(--c-green); border-color: var(--c-green); color: #fff;
}

/* ── Card Body ── */
.cc-body { flex: 1; display: flex; flex-direction: column; }

/* ── Main: timetable (left) + slots card (right) ── */
.cc-main {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: stretch;
}
.cc-timetable-section {
    padding: 16px 16px 14px 20px;
    display: flex;
    flex-direction: column;
}
.cc-tlbl {
    font-size: 13px; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    color: #9baabc; margin-bottom: 6px;
}

/* ── Date Table ── */
.cc-date-table { border-collapse: collapse; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-date-table td { padding: 3px 0; vertical-align: baseline; font-size: 14px; font-weight: 700; }
.cc-date-table td + td { padding-left: 0; }
.cc-date-table .date { width: 76px; color: #0f1b2d; }
.cc-date-table .dot { width: 12px; color: #0f1b2d; text-align: center; }
.cc-date-table .dow  { width: 30px; color: #0f1b2d; text-align: left; }
.cc-date-table .time { width: 76px; color: #0f1b2d; }
.cc-date-columns {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.cc-date-col { flex-shrink: 0; }
.cc-date-divider {
    width: 1px;
    height: 78px;
    align-self: center;
    margin: 0 4px;
    background: #d8e0ea;
    flex-shrink: 0;
}

/* ── +N more pure-CSS expand ── */
.tt-toggle { display: none; }
.cc-date-wrap { overflow: hidden; }
.cc-date-columns.tt-extra { display: none; margin-top: 8px; }
.tt-toggle:checked ~ .cc-date-wrap .cc-date-columns.tt-extra { display: flex; }
.tt-more {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 7px;
    font-size: 11.5px; font-weight: 600;
    color: var(--c-blue);
    cursor: pointer; user-select: none;
    transition: color .14s;
}
.tt-more:hover { color: var(--c-blue-dark); }
.tt-chevron { display: block; flex-shrink: 0; transition: transform .2s; }
.tt-less-txt { display: none; }
.tt-toggle:checked ~ .tt-more .tt-more-txt { display: none; }
.tt-toggle:checked ~ .tt-more .tt-less-txt { display: inline; }
.tt-toggle:checked ~ .tt-more .tt-chevron { transform: rotate(180deg); }

/* ── Slots Card ── */
.cc-slot-col {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 18px 14px 6px;
}
.cc-slot-card {
    width: 116px;
    min-height: 110px;
    padding: 0 16px;
    border-radius: 13px;
    background: linear-gradient(150deg, #4da8e0 0%, #1f7bba 52%, #175f90 100%);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.cc-slot-card .sc-n {
    font-size: 52px; font-weight: 800; line-height: 1;
    letter-spacing: -.04em; color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.cc-slot-card .sc-lbl {
    font-size: 13px; font-weight: 700;
    letter-spacing: .04em;
    color: rgba(255,255,255,.85);
    margin-top: 6px; white-space: nowrap;
}
.cc-slot-card.full { background: #f0f0f0; }
.cc-slot-card.full .sc-n {
    font-size: 16px; font-weight: 700;
    letter-spacing: .04em; color: #b0b0b0;
    text-shadow: none; line-height: 1.45; text-align: center;
}

/* ── Info Bar ── */
.cc-info-bar {
    display: flex;
    padding: 12px 20px 16px;
    border-top: 1px solid #edf1f6;
    flex-shrink: 0;
}
.cc-info-item { flex: 1; padding-right: 12px; }
.cc-info-item:not(:first-child) {
    padding-left: 12px;
    border-left: 1px solid #edf1f6;
}
.cc-info-item .lbl {
    font-size: 13px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    color: #9baabc; margin-bottom: 4px;
}
.cc-info-item .val { font-size: 15px; font-weight: 700; color: #1e2d42; }
.cc-info-item:last-child .val { font-size: 20px; color: var(--c-green); }

/* ── Footer / Register Button ── */
.cc-foot { padding: 0 20px 18px; flex-shrink: 0; }
.cc-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    background: var(--c-green); color: #fff;
    border: none; border-radius: 8px;
    padding: 12px 20px;
    font-size: 12.5px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase;
    transition: background .15s;
    text-decoration: none;
    cursor: pointer;
}
.cc-btn:hover { background: var(--c-blue-dark); color: #fff; }
.cc-btn.dis {
    background: #f0f0f0; color: #9aa0aa; cursor: not-allowed;
    pointer-events: none;
}

/* backward-compat aliases (register/confirm pages) */
.btn-reg { display: flex; align-items: center; justify-content: center;
    width: 100%; height: 48px; border: none; border-radius: 10px;
    background: var(--c-green); color: #fff; font-size: 15px; font-weight: 700;
    font-family: var(--ff-b); cursor: pointer; transition: all 0.2s; text-decoration: none; }
.btn-reg:hover { background: #6ea530; color: #fff; }
.btn-reg.dis { background: var(--c-g200); color: var(--c-g600); cursor: not-allowed; }

/* ── Responsive card ──
   <992（Bootstrap lg，與 hero／篩選列同一斷點）套手機版卡片：徽章縮小移到右上角、
   字級縮小。桌機大徽章只在 ≥992 出現，避免窄卡片塞不下 116px 徽章被切掉 */
@media (max-width: 991.98px) {
    .cc { position: relative; }
    .cc-head {
        min-height: 92px;
        padding: 14px 108px 10px 16px;
    }
    .cc-code { margin-bottom: 5px; font-size: 11px; }
    .cc-name { font-size: 16px; margin-bottom: 5px; }
    .cc-copy-btn { margin-left: 6px; padding: 2px 8px; font-size: 11px; }
    .cc-copy-btn i { font-size: 12px; }
    .cc-range { font-size: 16px; }
    .cc-main { display: block; }
    .cc-timetable-section { padding: 12px 12px 10px 14px; }
    .cc-info-bar { padding: 10px 14px 12px; }
    .cc-foot { padding: 0 14px 14px; }
    .cc-date-table td { font-size: 12px; }
    .cc-date-table td + td { padding-left: 0; }
    .cc-date-table .date { width: 66px; }
    .cc-date-table .dot { width: auto; padding: 0 3px; }
    .cc-date-table .dow  { width: 30px; }
    .cc-date-table .time { width: 60px; }
    .cc-date-columns { display: flex; gap: 8px; }
    .cc-date-columns.tt-extra { display: none; }
    .tt-toggle:checked ~ .cc-date-wrap .cc-date-columns.tt-extra { display: flex; }
    .cc-date-divider { height: 70px; margin: 0 3px; }
    .cc-slot-col {
        position: absolute;
        top: 14px;
        right: 14px;
        padding: 0;
        z-index: 2;
    }
    .cc-slot-card { width: 74px; min-height: 64px; padding: 0 6px; border-radius: 10px; }
    .cc-slot-card .sc-n  { font-size: 28px; }
    .cc-slot-card .sc-lbl { font-size: 9px; margin-top: 1px; }
    .cc-slot-card.full .sc-n { font-size: 12px; }
    .cc-info-item .lbl { font-size: 10px; letter-spacing: .07em; }
    .cc-info-item .val { font-size: 13px; }
    .cc-info-item:last-child .val { font-size: 14px; }
}

/* ── Phone: left/right date columns don't fit side-by-side without
   overflowing the card (X-axis breakage) → stack into a single column ── */
@media (max-width: 575.98px) {
    .cc-date-columns { flex-direction: column; gap: 4px; }
    .cc-date-divider { display: none; }
}

/* ── Section card (register / T&C / payment pages) ── */
.sec { border: 1px solid var(--c-g300); border-radius: var(--r); background: #fff; overflow: hidden; margin-bottom: 16px; }
.sec-h {
    padding: 13px 20px !important; font-size: 14px; font-weight: 600;
    background: linear-gradient(135deg, var(--c-blue) 0%, #3d9be0 100%) !important;
    color: #fff !important; font-family: var(--ff-b); letter-spacing: 0.3px;
    border-bottom: none !important;
}
.sec-h .material-icons-outlined {
    background: transparent !important;
    color: #fff !important;
    width: auto !important; height: auto !important;
    border-radius: 0 !important;
}
.sec-b { padding: 20px; }
@media (max-width: 767.98px) {
    .sec-h { font-size: 13px; padding: 10px 16px; }
}
@media (max-width: 575.98px) {
    .sec-h { font-size: 12px; padding: 9px 14px; }
}

/* ── Course summary bar (register page) ── */
.op-sum { border: 1px solid var(--c-g300); border-radius: var(--r); background: #fff; margin-bottom: 24px; overflow: hidden; }
.op-sum-title { font-family: var(--ff-b); font-size: 18px; font-weight: 700; padding: 16px 24px; }
.op-sum-code  { padding: 0 24px 14px; font-size: 14px; color: var(--c-g600); font-weight: 500; }
.op-sum-meta  { display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--c-g200); }
.sm-i {
    flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px;
    padding: 16px 24px; font-size: 15px; font-weight: 500; color: var(--c-g700);
    border-right: 1px solid var(--c-g200);
}
.sm-i:last-child { border-right: none; }
.sm-i .material-icons-outlined { font-size: 18px; color: var(--c-blue); }
@media (max-width: 991.98px) {
    .op-sum {
        margin-bottom: 12px;
    }

    .has-bar > .op-sum.mt-16 {
        margin-top: 7px !important;
    }

    .op-sum-title {
        padding: 16px 18px;
        font-size: 15px;
    }

    .op-sum-code {
        padding: 0 18px 11px;
        font-size: 13px;
    }

    .sm-i {
        gap: 8px;
        padding: 10px 18px;
        font-size: 14px;
    }
}

@media (max-width: 767.98px) {
    .has-bar > .op-sum.mt-16 {
        margin-top: 7px !important;
    }

    .op-sum-title {
        padding: 14px 16px;
        font-size: 14px;
    }

    .op-sum-code {
        padding: 0 16px 10px;
    }

    .sm-i {
        border-right: none;
        border-bottom: 1px solid var(--c-g200);
        flex: 0 0 100%;
        min-width: 100%;
        padding: 9px 16px;
    }

        .sm-i:last-child {
            border-bottom: none;
        }
}

/* ── T&C box ── */
.tc-box {
    border: 1px solid var(--c-g300); border-radius: var(--r);
    background: #fff; padding: 32px; max-height: 620px;
    overflow-y: auto; margin-bottom: 24px;
    font-size: 14px; line-height: 1.8; color: var(--c-g700);
}
.tc-box h5 { color: var(--c-g900); margin: 24px 0 8px; font-size: 16px; }
.tc-box h5:first-child { margin-top: 0; }
.agr-box {
    background: var(--c-blue-50); padding: 16px 20px; border-radius: 10px;
    margin-bottom: 24px; border: 1px solid var(--c-blue-light);
}

/* ── Payment ── */
.pay-total {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 0 0; margin-top: 12px; border-top: 1px solid var(--c-g600);
    font-size: 20px; font-weight: 700; font-family: var(--ff-b);
}

/* ── Confirmation / Success ── */
.ok-wrap { text-align: center; margin-bottom: 30px; }
.ok-svg  { width: 90px; height: 90px; display: block; margin: 0 auto 12px; overflow: visible; }
.ok-circle {
    fill: none; stroke: var(--c-success); stroke-width: 3; stroke-linecap: round;
    stroke-dasharray: 166; stroke-dashoffset: 166;
    animation: okC 0.6s 0.1s cubic-bezier(0.65,0,0.45,1) forwards;
}
.ok-check {
    fill: none; stroke: var(--c-success); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 48; stroke-dashoffset: 48;
    animation: okK 0.35s 0.55s cubic-bezier(0.65,0,0.45,1) forwards;
}
.ok-bg   { fill: var(--c-success-bg); opacity: 0; animation: okB 0.3s 0.8s ease forwards; }
@keyframes okC { to { stroke-dashoffset: 0; } }
@keyframes okK { to { stroke-dashoffset: 0; } }
@keyframes okB { to { opacity: 1; } }
.ok-title { opacity: 0; transform: translateY(10px); animation: okF 0.4s 0.9s ease forwards; }
.ok-sub   { opacity: 0; transform: translateY(10px); animation: okF 0.4s 1.1s ease forwards; }
@keyframes okF { to { opacity: 1; transform: translateY(0); } }

/* ── Info row (confirmation page) ── */
.ir   { display: flex; padding: 9px 0; font-size: 14px; border-bottom: 1px solid var(--c-g100); }
.ir:last-child { border-bottom: none; }
.ir-l { color: var(--c-g600); width: 140px; flex-shrink: 0; font-weight: 400; font-size: 14px; }
.ir-v { color: #0f1b2d; flex: 1; font-size: 14px; font-weight: 400; }
.ir-v.hl { color: #0f1b2d; font-weight: 400; }
.sched-list span {
    display: block;
    color: #0f1b2d;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
}
.confirm-schedule-table {
    border-collapse: collapse;
    color: #0f1b2d;
    font-size: 14px;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.confirm-schedule-table td {
    padding: 2px 0;
    line-height: 1.45;
    vertical-align: baseline;
    white-space: nowrap;
}
.confirm-schedule-table .schedule-line {
    display: inline-flex;
    align-items: baseline;
}
.confirm-schedule-table .dot {
    display: inline-block;
    margin: 0 8px;
    text-align: center;
}


/* ── Fixed bottom action bar ── */
.acts {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 99;
    background: #fff; border-top: 1px solid var(--c-g300);
    padding: 12px 0; box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
}
.acts-in { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; }
.acts-in .a-l { flex: 0 0 33.33%; }
.acts-in .a-m { flex: 0 0 33.33%; text-align: center; }
.acts-in .a-r { flex: 0 0 33.33%; text-align: right; }
.acts .btn {
    height: 48px;
    font-size: 15px;
    font-weight: 500;
    font-family: var(--ff-b);
    border-radius: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.has-bar      { padding-bottom: 120px !important; }

@media (max-width: 991.98px) {
    .acts {
        padding: 8px 0;
    }

    .acts .btn {
        height: 40px;
        font-size: 14px;
        border-radius: 8px;
    }

    .has-bar {
        padding-bottom: 104px !important;
    }
}

@media (max-width: 575.98px) {
    .acts-in { flex-direction: row; gap: 0; padding: 0 12px; }
    .acts-in .a-l, .acts-in .a-r { flex: 1; width: auto; }
    .acts-in .a-m { display: none; }
    .acts-in .a-l .btn { margin-right: 6px; }
    .acts-in .a-r .btn { margin-left: 6px; }
}
/* ══════════════════════════════════════════════════════
   Register page additions — append to online_register_portal.css
   ══════════════════════════════════════════════════════ */

/* ── Registration Type radios ── */
.reg-type-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.reg-type-title {
    font-family: var(--ff-b);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Agent 邀請連結報名（有 ag 參數，或本身以 Agent 身分登入 Portal）── 中性灰 chip，
   配色比照 request-type-badge 的預設灰階（#d9e2ec / #f8fafc），刻意避開藍色，
   免得跟旁邊選中的 Registration Type 卡片（藍框藍字）混淆成另一個可點選項。 */
.agent-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    border: 1px solid #d9e2ec;
    background: #f8fafc;
    color: #475569;
    padding: 3px 11px 3px 9px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.agent-badge-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    margin-bottom: .25rem !important;
    transform: translateY(-2px);
}

@media (max-width: 991.98px) {
    .agent-badge { font-size: 11px; padding: 2px 9px 2px 7px; }
    .agent-badge-emoji { font-size: 18px; }
}

.reg-type-radios {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

    .reg-type-radios label {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 24px;
        border-radius: 10px;
        cursor: pointer;
        font-size: 15px;
        font-weight: 500;
        color: var(--c-g700);
        transition: all 0.2s;
    }

        .reg-type-radios label:hover {
            border-color: var(--c-blue-light);
        }

    .reg-type-radios input[type="radio"] {
        width: 18px;
        height: 18px;
        accent-color: var(--c-blue);
        margin: 0;
        cursor: pointer;
    }

    .reg-type-radios label:has(input:checked) {
        border-color: var(--c-blue);
        color: var(--c-blue);
        font-weight: 600;
    }

/* ── Company section title ── */
.co-title {
    font-family: var(--ff-b);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--c-g900);
}

    .co-title .material-icons-outlined {
        font-size: 18px;
        color: var(--c-blue);
    }

/* ── Trainee card ── */
.tc {
    border: 1px solid var(--c-g300);
    border-radius: var(--r);
    background: #fff;
}

.tc-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--c-blue) 0%, #3d9be0 100%);
    color: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

    .tc-h .tn {
        font-size: 14px;
        font-weight: 600;
    }

    .tc-h .td {
        border: none;
        background: rgba(255,255,255,0.2);
        color: #fff;
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
        padding: 3px 8px;
        border-radius: 6px;
        transition: background 0.2s;
        text-decoration: none;
    }

        .tc-h .td:hover {
            background: rgba(255,255,255,0.35);
            color: #fff;
        }

.tc-b {
    padding: 20px;
}

/* ── Trainee Details bar ── */
.bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .bar h5 {
        font-weight: 600;
        margin: 0;
        font-size: 16px;
        letter-spacing: 0.3px;
    }

.bdg {
    background: var(--c-blue);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
}

/* ── Course Amount row ── */
.op-amt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--c-blue-50);
    border-radius: var(--rs);
    font-size: 14px;
    border-left: 4px solid var(--c-blue);
}

/* ── Add Trainee button ── */
.btn-at {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 80px;
    border: 2px dashed var(--c-g400);
    border-radius: var(--r);
    background: var(--c-g50);
    color: var(--c-blue);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

    .btn-at:hover {
        border-color: var(--c-blue);
        background: var(--c-blue-50);
        color: var(--c-blue);
    }

/* ── Footer ── */
.op-footer {
    background: var(--c-g900);
    color: var(--c-g400);
    padding: 32px 0 20px;
    margin-top: 48px;
    font-size: 14px;
}

.op-footer-brand {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 20px;
}

.op-footer-venues {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.op-fv {
    flex: 1;
    min-width: 220px;
}

.op-fv-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    font-size: 14px;
}

    .op-fv-name .material-icons-outlined {
        font-size: 16px;
        color: var(--c-blue-light);
    }

.op-fv-addr {
    margin-bottom: 6px;
    line-height: 1.5;
}

.op-fv-tel {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .op-fv-tel .material-icons-outlined {
        font-size: 15px;
        color: var(--c-blue-light);
    }

.op-footer-copy {
    font-size: 12px;
    color: var(--c-g500);
}

.op-fv-link {
    color: var(--c-g400);
    text-decoration: none;
}

    .op-fv-link:hover {
        color: var(--c-blue-light);
    }

.frm-ctrl .form-control:focus {
    border-color: var(--c-g300) !important;
}
.reg-type-radios {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

    /* DevExpress BootstrapRadioButtonList 卡片風格 */
    .reg-type-radios .dxbs-cbl > div {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }

    .reg-type-radios .column-element > div > .form-check {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 24px;
        margin: 0;
        border: 2px solid var(--c-g300);
        border-radius: 10px;
        background: #fff;
        cursor: pointer;
        transition: all 0.2s;
    }

        .reg-type-radios .column-element > div > .form-check:hover {
            border-color: var(--c-blue-light);
        }

        .reg-type-radios .column-element > div > .form-check:has(input:checked) {
            border-color: var(--c-blue);
            background: var(--c-blue-50);
        }

    .reg-type-radios .form-check-input {
        width: 18px;
        height: 18px;
        accent-color: var(--c-blue);
        margin: 0;
        cursor: pointer;
        float: none;
        position: static;
    }

    .reg-type-radios .form-check-label {
        font-size: 15px;
        font-weight: 500;
        color: var(--c-g700);
        cursor: pointer;
        padding: 0;
        margin: 0;
    }

    .reg-type-radios .form-check-input:checked + .form-check-label {
        color: var(--c-blue);
        font-weight: 600;
    }

@media (max-width: 991.98px) {
    .reg-type-title-row {
        margin-bottom: 8px;
    }

    .reg-type-title {
        font-size: 14px;
    }

    .reg-type-radios,
    .reg-type-radios .dxbs-cbl > div {
        gap: 8px;
        flex-wrap: nowrap;
    }

    .reg-type-radios.mb-24 {
        margin-bottom: 14px !important;
    }

    .reg-type-radios .column-element {
        flex: 1 1 0;
        min-width: 0;
    }

    .reg-type-radios .column-element > div > .form-check {
        width: 100%;
        gap: 6px;
        padding: 14px 16px;
        border-width: 1px;
    }

    .reg-type-radios .form-check-input {
        width: 16px;
        height: 16px;
    }

    .reg-type-radios .form-check-label {
        min-width: 0;
        font-size: 13px;
        line-height: 1.2;
    }
}

.btn-m.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   Payment & Confirmation pages — append to online_register_portal.css
   ══════════════════════════════════════════════════════ */

/* ── Section table (Bill Advice / Invoice) ── */
.pay-tbl {
    width: 100%;
    font-size: 15px;
    table-layout: fixed;
}

    .pay-tbl th {
        background: transparent;
        color: var(--c-blue);
        padding: 10px 0;
        font-weight: 400;
        font-size: 15px;
    }

    .pay-tbl td {
        padding: 10px 0;
        border-bottom: none;
        vertical-align: top;
    }

    .pay-tbl .pay-fee-row td {
        padding: 1px 0;
    }

.pay-advice-body {
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: hidden;
}

.pay-table-wrap {
    overflow-x: auto;
}

.pay-tbl th:first-child,
.pay-tbl td:first-child {
    width: 76%;
}

.pay-tbl th:last-child,
.pay-tbl td:last-child {
    width: 24%;
    padding-right: 0;
}
@media (max-width: 576px) {
    .pay-tbl th:first-child,
    .pay-tbl td:first-child { width: 62%; }
    .pay-tbl th:last-child,
    .pay-tbl td:last-child  { width: 38%; white-space: nowrap; }
}

.pay-class-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 0 0 14px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--c-g200);
    font-size: 15px;
}

.pay-class-info div {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
    color: #0f1b2d;
}

.pay-class-info .pay-class-value {
    color: #0f1b2d;
    font-size: 16px;
    font-weight: bold;
}

.pay-class-info span {
    color: var(--c-g600);
}

.pay-company-wrap {
    margin: 0 0 12px 0;
}

.pay-company-name {
    color: #0f1b2d;
    font-weight: bold;
    font-size: 18px;
    padding: 10px 0 !important;
    text-align: center;
}

.pay-trainee-name {
    color: #0f1b2d;
    font-weight: bold;
    font-size: 16px;
    padding-top: 8px !important;
    padding-bottom: 10px !important;
}
.pay-trainee-nric { font-weight: normal; }

.pay-trainee-divider td {
    padding: 0 !important;
    border-bottom: none !important;
    border-top: 1px solid var(--c-g300);
}

.pay-fee-desc {
    color: #0f1b2d;
    font-size: 15px;
    line-height: 1.4;
    font-weight: normal;
}

.pay-fee-amount {
    margin-top: 0;
}

.pay-fee-amount-neg {
    color: #1a7f37;
}

.pay-sep-dotted {
    border-top: 1.5px dashed var(--c-g300);
    margin: 14px 0 0 0;
}

.pay-subtotal-section {
    background: var(--c-g50);
    border-radius: 0 0 8px 8px;
    margin: 0 -20px -20px -20px;
    padding: 14px 20px 18px 20px;
}

.pay-summary-row {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 15px;
    color: #0f1b2d;
}

.pay-saved {
    margin-top: 8px;
    font-size: 12px;
    color: #2da44e;
}

.pay-summary-row > :last-child,
.pay-total > :last-child {
    min-width: 120px;
    text-align: right;
}

@media (max-width: 576px) {
    .pay-advice-body         { padding-top: 10px; }
    .pay-class-info          { font-size: 11px; gap: 2px; padding-bottom: 10px; margin-bottom: 8px; line-height: 1.3; }
    .pay-class-info div      { grid-template-columns: 72px minmax(0, 1fr); gap: 6px; }
    .pay-class-info .pay-class-value { font-size: 12px; }
    .pay-tbl                 { font-size: 13px; }
    .pay-tbl th              { font-size: 13px; padding: 5px 0; }
    .pay-fee-desc            { font-size: 13px; }
    .pay-company-name        { font-size: 12px; }
    .pay-trainee-name        { font-size: 14px; }
    .pay-summary-row         { font-size: 13px; margin-top: 4px; }
    .pay-saved               { font-size: 11px; }
}

/* ── Payment method radio group ── */
.op-rg {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.op-rg-payment {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
}

    .op-rg label {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 18px;
        border: 2px solid var(--c-g300);
        border-radius: 10px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        color: var(--c-g600);
        transition: all 0.2s;
    }

    .op-rg-payment label {
        width: 100%;
        min-height: 44px;
        margin: 0;
    }

        .op-rg label:has(input:checked) {
            border-color: var(--c-blue);
            color: var(--c-blue);
            background: var(--c-blue-50);
        }

        .op-rg label input {
            display: none;
        }

/* ── Payment card input ── */
.pay-input {
    height: 44px;
    border-radius: 8px;
    font-size: 14px;
}

.pay-card-row {
    margin-top: 12px;
}

.pay-card-row .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin: 0;
}

.pay-card-row .row > [class*="col-"] {
    width: auto;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.pay-card-row .row > .col-12 {
    grid-column: 1 / -1;
}

/* ── Invoice link ── */
.inv-link {
    color: var(--c-blue);
    font-weight: 600;
    text-decoration: none;
}

/* ── SweetAlert2 — mobile title size ── */
@media (max-width: 575.98px) {
    .swal2-title { font-size: 1.1rem !important; }
}

/* ── Confirmation — all ir rows stack on mobile ── */
@media (max-width: 575.98px) {
    .ir                          { flex-direction: column; gap: 2px; padding: 7px 0; }
    .ir .ir-l                    { width: auto; font-size: 11px; color: var(--c-blue); }
    .ir .ir-v                    { padding-left: 0; font-size: 15px; color: #0f1b2d; font-weight: 500; }
    .confirm-schedule-table,
    .confirm-schedule-table td   { font-weight: 500; color: #0f1b2d; font-size: 15px; }
}

    .inv-link:hover {
        text-decoration: underline;
    }

/* DEVExpress BootstrapComboBox readonly — .form-control 是 transparent，背景色要設在 .input-group
   用 :has(input[readonly]) 偵測，因為 dxbs-combobox 本身不加任何 readonly class */
.flt-cmb .dxbs-combobox:has(input[readonly]) > .input-group,
.flt-cmb .dxbs-date-edit:has(input[readonly]) > .input-group {
    background: whitesmoke !important;
}