/* =========================
   Base / Reset
========================= */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: #f3f6ff;
}

/* =========================
   Page Centering Wrapper
========================= */
.auth-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 14px;
}

/* =========================
   Shell (Desktop)
========================= */
.auth-shell {
    width: 100vw;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    border-radius: 0; 
    overflow: hidden;
    background: transparent; 
    border: 0;
    box-shadow: none;
}

/* =========================
   LEFT (Desktop)
========================= */
.auth-left {
    background: radial-gradient( 800px 500px at 0% 0%, #7c8cff 0%, #6f6bff 35%, #7a4cff 70%, #6a3bff 100% );
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 26px;
}

    .auth-left::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(600px 300px at 20% 20%, rgba(255,255,255,.22), transparent 55%);
        pointer-events: none;
    }

.auth-left {
    min-height: 100vh;
}



.auth-left-top {
    padding: 10px 0 0 10px;
}

.auth-logo {
    height: 22px;
    width: auto;
    display: block;
   
}

.auth-left-body {
    display: grid;
    place-items: center;
    padding: 10px;
}

.auth-illustration {
    width: min(520px, 86%);
    height: auto;
    object-fit: contain;
}


.mobile-header {
    display: none;
}

/* =========================
   RIGHT
========================= */
.auth-right {
    background: radial-gradient(900px 420px at 30% 10%, #eef2ff 0%, #f7f9ff 45%, #ffffff 100%);
    padding: 36px;
    height: 100vh; 
    overflow: hidden; 
    display: flex; 
    align-items: stretch; 
    justify-content: center; 
}


/* =========================
   Card
========================= */
.reg-card {
    width: min(980px, 100%); 
    height: 100%; 
    max-height: 100%; 
    background: #fff;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.06);
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
    padding: 16px;
    overflow: auto; 
}

/* =========================
   Stepper
========================= */
.reg-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: nowrap;
}

    .reg-steps .bar {
        width: 44px;
        height: 2px;
        background: #e2e8f0;
        border-radius: 999px;
    }

    .reg-steps .step {
        display: grid;
        gap: 4px;
        justify-items: center;
        font-size: 11px;
        color: #94a3b8;
        min-width: 60px;
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
    }

    .reg-steps .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #cbd5e1;
    }

    .reg-steps .step.active {
        color: #3b82f6;
    }

        .reg-steps .step.active .dot {
            background: #3b82f6;
        }

/* =========================
   Step Pages (show/hide)
========================= */
.step-page {
    display: none;
}

    .step-page.is-active {
        display: block;
    }

/* =========================
   Header
========================= */
.reg-header {
    margin-bottom: 6px;
}

    .reg-header h1 {
        margin: 4px 0 3px;
        font-size: 26px;
        font-weight: 780;
        letter-spacing: -0.02em;
        color: #0f172a;
    }

    .reg-header p {
        margin: 0;
        font-size: 13px;
        color: #64748b;
    }

.accent {
    color: #3b82f6;
}

.accent2 {
    color: #8b5cf6;
}

/* =========================
   Form
========================= */
.reg-form {
    display: grid;
    gap: 6px;
}

.form-group {
    margin: 0;
}

.form-label {
    display: block;
    font-size: 12.5px;
    font-weight: 650;
    margin: 8px 0 5px;
    color: #334155;
}

.reg-input {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    padding: 10px 12px;
    outline: none;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .reg-input:focus {
        border-color: rgba(59,130,246,.55);
        box-shadow: 0 0 0 3px rgba(59,130,246,.14);
    }


.reg-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
}

/* dropdown arrow */
.reg-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
}


.reg-btn {
    width: 100%;
    border: 0;
    border-radius: 14px;
    padding: 12px;
    font-weight: 750;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(90deg, #5b6bff 0%, #7c3aed 100%);
}

    .reg-btn:hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 10px 22px rgba(91,107,255,.45);
        filter: brightness(1.06);
    }



/* =========================
   Add More Header
========================= */
.addmore-header h2 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 750;
    color: #0f172a;
}

.addmore-header p {
    margin: 0 0 12px;
    font-size: 13px;
    color: #64748b;
}

/* =========================
   Accordion
========================= */
.acc {
    display: grid;
    gap: 10px;
}

.acc-item {
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 0;
    background: #eef2ff;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
}

.acc-chevron {
    transition: transform .18s ease;
}

.acc-item.is-open .acc-chevron {
    transform: rotate(180deg);
}

.acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .22s ease;
}

.acc-item.is-open .acc-body {
    max-height: 720px;
}

.acc-inner {
    padding: 12px;
}

.btn-add {
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    border-radius: 12px;
    border: 1px dashed rgba(59,130,246,.45);
    background: #fff;
    color: #3b82f6;
    font-weight: 700;
    cursor: pointer;
}

.btn-danger {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 0;
    background: #ef4444;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}


.action-FirstMainBtn {
    margin-top: 18px;
}

    .action-FirstMainBtn button {
        transition: transform 0.25s cubic-bezier(.4,0,.2,1), background 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
        will-change: transform;
    }
    .action-FirstMainBtn button:active {
        transform: scale(0.98);
    }

.addmore-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px; 
}

    .addmore-actions button {
        transition: transform 0.25s cubic-bezier(.4,0,.2,1), background 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
        will-change: transform;
    }


    .addmore-actions button:active {
        transform: scale(0.98);
    }


.btn-secondary {
    width: 100%;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.12);
    background: #e2e8f0;
    color: #0f172a;
    font-weight: 750;
    cursor: pointer;
}

    .btn-secondary:hover {
        color: #0f172a;
        background: #c7d2fe;
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 8px 18px rgba(15,23,42,.15);
    }



/* =========================
   REVIEW
========================= */
.review-card {
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 14px;
    padding: 14px;
    background: #fff;
    margin-bottom: 12px;
}

.review-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 750;
    font-size: 14px;
    margin-bottom: 10px;
    color: #0f172a;
}

.link-edit {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 650;
    color: #3b82f6;
    cursor: pointer;
}

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

.review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    font-size: 13px;
}

    .review-grid .full-row {
        grid-column: 1 / -1;
    }

        .review-grid .full-row span {
            text-align: left;
            word-break: break-word;
        }


    .review-grid div {
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }

    .review-grid label {
        color: #64748b;
        font-weight: 600;
        white-space: nowrap;
    }

    .review-grid span {
        color: #0f172a;
        font-weight: 600;
        text-align: right;
    }

   

/* =========================
   PAYMENT
========================= */
.pay-amount {
    border-radius: 14px;
    padding: 14px;
    text-align: center;
    color: #fff;
    background: linear-gradient(90deg, #5b6bff 0%, #7c3aed 100%);
    box-shadow: 0 14px 28px rgba(91,107,255,.18);
    margin: 10px 0 12px;
}

.pay-amount-label {
    font-size: 12px;
    opacity: .9;
    font-weight: 650;
    margin-bottom: 4px;
}

.pay-amount-value {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .2px;
}


.pay-box {
    border: 1px dashed rgba(15,23,42,.16);
    border-radius: 14px;
    padding: 12px;
    background: #fff;
    margin-bottom: 12px;
}

.pay-box-inner {
    border-radius: 12px;
    background: #f8fbff;
    border: 1px solid rgba(15,23,42,.06);
    padding: 14px;
    text-align: center;
}

.pay-qr {
    display: grid;
    place-items: center;
    padding: 8px;
}

.pay-qr-img {
    width: min(160px, 70%);
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(15,23,42,.10);
    background: #fff;
    padding: 8px;
}

.pay-help {
    font-size: 12.5px;
    color: #475569;
    margin-top: 10px;
    line-height: 1.35;
}

.pay-note {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 4px;
}


.pay-upload {
    display: block;
    border: 1px dashed rgba(15,23,42,.18);
    border-radius: 14px;
    padding: 14px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    margin-bottom: 10px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

    .pay-upload:hover {
        border-color: rgba(59,130,246,.45);
        box-shadow: 0 10px 22px rgba(15,23,42,.08);
    }

    .pay-upload:active {
        transform: translateY(1px);
    }

.pay-upload-title {
    font-weight: 800;
    color: #0f172a;
    font-size: 13px;
    margin-bottom: 4px;
}

.pay-upload-sub {
    font-size: 12px;
    color: #64748b;
}

.pay-file {
    display: none;
}

.pay-secure {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #16a34a;
    margin: 8px 0 12px;
}

/* =========================
   Responsive: below 869px (stack)
========================= */
@media (max-width: 869px) {
    .auth-page {
        place-items: stretch;
        padding: 12px;
    }

    .auth-shell {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .auth-right {
        overflow: visible;
        padding: 14px;
    }

    .reg-card {
        width: 100%;
    }

    .reg-grid-2 {
        grid-template-columns: 1fr;
    }

    .reg-steps {
        flex-wrap: wrap;
        row-gap: 8px;
    }

        .reg-steps .bar {
            display: none;
        }
}
/* =========================================================
   MOBILE REVIEW (<=520px)

========================================================= */
@media (max-width: 520px) {

    #step-review .review-grid {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

        #step-review .review-grid > div {
            display: grid !important;
            grid-template-columns: 1fr !important;
            gap: 4px;
            padding: 10px 0;
            border-bottom: 1px solid rgba(15,23,42,.06);
        }

            #step-review .review-grid > div:last-child {
                border-bottom: 0;
            }

    
        #step-review .review-grid label {
            font-weight: 700;
            color: #64748b;
            margin: 0;
            line-height: 1.15;
        }

        #step-review .review-grid span {
            font-weight: 500 !important; 
            color: #0f172a;
            text-align: left !important;
            line-height: 1.25;
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

    #step-review .review-head {
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    #step-review .link-edit {
        font-size: 13px;
        padding: 6px 10px;
        border-radius: 10px;
        background: rgba(59,130,246,.10);
        white-space: nowrap;
    }
    #step-review .acc-head {
        font-size: 14px;
        padding: 12px;
    }
}


@media (max-width: 869px) {
    .auth-right {
        height: auto;
        overflow: visible;
    }

    .reg-card {
        height: auto;
        max-height: none;
        overflow: visible;
    }
}

.reg-grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px 12px;
}

.regtype-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: grid;
    place-items: center;
    z-index: 9999;
}

.regtype-card {
    width: min(420px, 92vw);
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    border: 1px solid rgba(15,23,42,.08);
    text-align: center;
}

.regtype-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.regtype-btn {
    border: 1px dashed rgba(99,102,241,.45);
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

    .regtype-btn:hover {
        transform: scale(1.07);
        background: #eef2ff;
        box-shadow: 0 12px 25px rgba(99,102,241,0.25);
    }



.tshirt-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tshirt-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 14px;
    border-radius: 9999px;
    border: none;
    background: #6366f1;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .tshirt-help:hover {
        transform: scale(1.08);
        box-shadow: 0 4px 10px rgba(99,102,241,.35);
    }

    .tshirt-help:active {
        transform: scale(0.96);
    }

.tshirt-help {
    margin-left: auto; 
}


/* overlay */
.tshirt-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.45);
    display: none;
    place-items: center;
    z-index: 9999;
}

    .tshirt-overlay.is-open {
        display: grid;
    }


.tshirt-card {
    width: min(920px, 94vw); 
    max-height: 90vh; 
    overflow: auto; 
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    text-align: center;
}


    .tshirt-card h3 {
        margin: 0 0 12px;
        font-size: 16px;
        font-weight: 800;
        color: #0f172a;
    }

/* table */
.tshirt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
    margin-bottom: 14px;
}

@media (max-width: 900px) {
    .tshirt-grid {
        grid-template-columns: 1fr;
    }
}


.tshirt-block h4 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
}


.tshirt-note {
    font-size: 11.5px;
    color: #64748b;
    margin-top: 6px;
}


@media (max-width: 640px) {
    .tshirt-grid {
        grid-template-columns: 1fr;
    }
}

.tshirt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .tshirt-table th,
    .tshirt-table td {
        border: 1px solid #e2e8f0;
        padding: 6px 8px;
        text-align: center;
        white-space: nowrap; 
    }

    .tshirt-table th {
        background: #f1f5f9;
        font-weight: 800;
    }


.reg-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}


.calc-wrap {
    position: relative;
    display: inline-block;
}

/* pill */
.header-action-pill {
    background: #eef2ff;
    color: #4f46e5;
    border: 0;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .25s cubic-bezier(.4,0,.2,1), background .25s ease, box-shadow .25s ease;
    will-change: transform;
}

.calc-wrap:hover .header-action-pill {
    background: #e0e7ff;
    transform: translateY(-1px) scale(1.04); 
    box-shadow: 0 8px 18px rgba(79,70,229,.22);
}


.empv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 15px;
}

.empv-card {
    width: 420px; 
    max-width: 92vw; 
    background: #fff;
    border-radius: 22px;
    padding: 26px 28px;
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
    text-align: center;
}


.empv-icon {
    width: 52px;
    height: 52px;
    margin: 4px auto 10px;
    display: grid;
    place-items: center;
}

.empv-lock {
    font-size: 30px;
    line-height: 1;
}

.empv-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #1f2a37;
}

.empv-sub {
    margin: 8px 0 22px;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.4;
}

.empv-field {
    text-align: left;
    margin: 0 auto 18px;
    width: min(520px, 100%);
}

.empv-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
}

.empv-input {
    width: 100%;
    height: 56px;
    border-radius: 14px;
    border: 1px solid #dbe3ff;
    padding: 0 16px;
    outline: none;
    background: #fff;
}

    .empv-input:focus {
        border-color: #7aa2ff;
        box-shadow: 0 0 0 4px rgba(122,162,255,.20);
    }

.empv-error {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #ffe6e6;
    color: #b00020;
    border: 1px solid #ffb3b3;
    font-size: 13px;
}

.empv-btn {
    width: min(520px, 100%);
    height: 56px;
    border-radius: 14px;
    border: 0;
    cursor: pointer;
    font-weight: 800;
    font-size: 14px;
}

.empv-btn-primary {
    margin-top: 6px;
    background: linear-gradient(90deg, #5b7cff, #7b3fb0);
    color: #fff;
    box-shadow: 0 10px 22px rgba(91,124,255,.25);
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

    .empv-btn-primary:hover {
        transform: scale(1.04);
        box-shadow: 0 14px 28px rgba(91,124,255,.35);
        filter: brightness(1.03);
    }

.empv-btn-secondary {
    margin-top: 12px;
    background: #e9eef6;
    color: #4b5563;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

    .empv-btn-secondary:hover {
        transform: scale(1.03);
        box-shadow: 0 10px 20px rgba(0,0,0,.08);
        filter: brightness(0.98);
    }

    .empv-btn-primary:active,
    .empv-btn-secondary:active {
        transform: scale(0.98);
    }


body.modal-lock {
    overflow: hidden;
}


.fam-overlay,
.cn-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

body.modal-lock {
    overflow: hidden;
}

/* =====================================================
   FAMILY MODAL (Who Will Attend?)
===================================================== */
.fam-card {
    width: min(420px, calc(100% - 32px));
    background: #fff;
    border-radius: 20px;
    padding: 28px 26px;
    box-shadow: 0 25px 60px rgba(0,0,0,.25);
    text-align: center;
    max-height: 80vh;
    overflow: hidden;
    display: flex; 
    flex-direction: column; 
}

#familyList {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px;
    max-height: 260px;
    overflow-y: auto; 
    padding-right: 6px;
}


    .fam-card h3 {
        margin-bottom: 18px;
        font-size: 22px;
        font-weight: 700;
        color: #1f2937;
    }



.fam-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    font-size: 15px;
}

    .fam-row input {
        width: 18px;
        height: 18px;
    }

    .fam-row:hover {
        background: #f9fafb;
    }

.fam-row {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

    .fam-row span {
        text-align: left;
        line-height: 1.5;
    }
.fam-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 9999;
}

/* =====================================================
   CONTACT NUMBER MODAL
===================================================== */
.cn-card {
    width: min(460px, calc(100% - 32px));
    background: #fff;
    border-radius: 22px;
    padding: 30px 28px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
    text-align: center;
}

    .cn-card h3 {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 16px;
        color: #111827;
    }

    .cn-card p {
        font-size: 15px;
        line-height: 1.7;
        color: #6b7280;
        margin-bottom: 16px;
    }

        .cn-card p strong {
            color: #374151;
            font-weight: 600;
        }

.cn-question {
    margin-top: 18px;
    color: #111827;
    font-size: 15px;
}



.cn-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cn-btn {
    padding: 14px 0;
    border-radius: 14px;
    border: 2px solid #e5e7eb;
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .cn-btn:hover {
        background: #f3f4f6;
    }

#btnContactYes {
    border-color: #6366f1;
    color: #4f46e5;
}

    #btnContactYes:hover {
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: #fff;
        border-color: transparent;
    }

.limit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.limit-card {
    width: min(420px, calc(100% - 32px));
    background: #fff;
    border-radius: 18px;
    padding: 22px 20px;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0,0,0,.25);
}

    .limit-card h3 {
        margin: 0 0 8px 0;
    }

    .limit-card p {
        margin: 0 0 16px 0;
        color: #5b6472;
    }

/* ===== Acknowledge / Terms step ===== */
.ack-card {
    background: #fff;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 18px 40px rgba(0,0,0,.10);
    max-width: 520px;
    margin: 0 auto;
}

.ack-box {
    border: 1px solid #e6e9f2;
    border-radius: 14px;
    padding: 14px;
    height: 330px;
    overflow: auto;
    background: #f8f9ff;
}

.ack-content {
    font-size: 14px;
    line-height: 1.6;
    color: #3c4353;
}

    .ack-content strong {
        color: #1d2433;
    }

.ack-list {
    margin: 10px 0 0 18px;
    padding: 0;
}

.ack-sep {
    border: none;
    border-top: 1px solid #e6e9f2;
    margin: 14px 0;
}

.ack-small {
    font-size: 13px;
    color: #4c5568;
}

.ack-check {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 14px 2px 4px;
    padding: 14px;
    border: 1px solid #e6e9f2;
    border-radius: 14px;
    background: #fff;
    user-select: none;
}

    .ack-check input {
        width: 18px;
        height: 18px;
    }

.ack-actions .reg-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.ack-bottom-pad {
    height: 8px;
}

.pay-upload-error {
    color: #e53935;
    font-size: 0.9rem;
    margin-top: 6px;
    display: none;
}

.pay-upload.error {
    border: 2px solid #e53935;
    background: #fff5f5;
}

    .pay-upload.error .pay-upload-title {
        color: #e53935;
    }
.form-popup-error {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #e53935;
    color: #fff;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
    display: none;
    z-index: 9999;
}


/* =========================
   Calculation Popup
========================= */
.calc-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.45);
    z-index: 999999;
    padding: 16px;
}

    .calc-overlay.is-open {
        display: flex;
    }

.calc-pop {
    width: min(720px, 92vw);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.calc-pop-inner {
    padding: 0; 
    overflow: visible;
}


.calc-head {
    display: flex; 
    align-items: center;
    justify-content: space-between; 
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    padding: 18px 22px 12px; 
    border-bottom: 1px solid rgba(15,23,42,.08);
}

.calc-body {
    padding: 0 22px 22px; 
    overflow: auto; 
    -webkit-overflow-scrolling: touch;
}


.calc-title {
    font-weight: 900;
    font-size: 20px;
    color: #0f172a;
}

.calc-x {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 0;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s ease, transform .15s ease;
}

    .calc-x:hover {
        background: #f1f5f9;
        transform: scale(1.05);
    }

/* =========================
   Calculation Table
========================= */
.calc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: #0f172a;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
}


    .calc-table thead th {
        text-align: left;
        font-weight: 800;
        padding: 12px;
        background: #f8fafc;
        border-bottom: 1px solid rgba(15,23,42,.10);
        position: sticky;
        top: 0;
        z-index: 1;
    }


    .calc-table tbody td {
        padding: 12px;
        border-bottom: 1px solid rgba(15,23,42,.06);
        vertical-align: top;
    }

  
    .calc-table tbody tr:nth-child(even) {
        background: #fbfdff;
    }

    
    .calc-table tbody tr:hover {
        background: #f1f5ff;
    }


    .calc-table th:first-child,
    .calc-table td:first-child {
        width: 56px;
        text-align: center;
        color: #64748b;
        font-weight: 700;
    }


    .calc-table th:nth-child(3),
    .calc-table td:nth-child(3) {
        width: 140px;
        font-weight: 600;
        color: #334155;
    }


    .calc-table th:nth-child(4),
    .calc-table td:nth-child(4),
    .calc-table .num {
        width: 140px;
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }


    .calc-table .muted {
        display: block;
        font-size: 12px;
        color: #64748b;
        line-height: 1.2;
    }

    .calc-table .strong {
        display: block;
        font-weight: 800;
        color: #0f172a;
        margin-top: 2px;
        line-height: 1.2;
    }

   
    .calc-table tfoot td {
        padding: 14px 12px;
        background: #f6f8ff;
        border-top: 1px solid rgba(15,23,42,.10);
        font-weight: 900;
    }

    .calc-table .total-label {
        text-align: center;
        color: #64748b;
    }

    .calc-table .total-val {
        text-align: right;
        font-size: 14px;
        font-weight: 900;
    }

    .calc-table thead th:first-child {
        border-top-left-radius: 12px;
    }

    .calc-table thead th:last-child {
        border-top-right-radius: 12px;
    }

    .calc-table tfoot td:first-child {
        border-bottom-left-radius: 12px;
    }

    .calc-table tfoot td:last-child {
        border-bottom-right-radius: 12px;
    }

/* =========================
   Mobile tweaks
========================= */

@media (max-width: 620px) {

    .calc-pop {
        width: min(720px, 96vw);
        max-height: 90vh;
    }

    .calc-table thead th:nth-child(2),
    .calc-table tbody td:nth-child(2) {
        max-width: 260px;
        white-space: nowrap; 
        word-break: normal;
        overflow-wrap: normal;
        overflow: hidden;
        text-overflow: ellipsis; 
    }
}

/* =========================
   Mobile phones
   (<= 520px)
========================= */
@media (max-width: 520px) {

    .calc-pop {
        width: 96vw;
        max-height: 92vh;
    }

    .calc-table thead th:nth-child(2),
    .calc-table tbody td:nth-child(2) {
        max-width: 220px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    .calc-table {
        font-size: 12px;
    }

        .calc-table thead th,
        .calc-table tbody td {
            padding: 10px;
        }
}



.addmore-note {
    margin: 12px 0 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 13px;
    display: flex;
    gap: 10px;
    line-height: 1.4;
}

.addmore-note strong {
    font-weight: 800;
}

.note-icon {
    font-size: 16px;
    line-height: 1;
    margin-top: 2px;
}

.addmore-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .addmore-header-top h2 {
        margin: 0; 
    }

.header-action-pill {
    flex: 0 0 auto;
}


@media (max-width: 520px) {
    .addmore-header-top {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* preview wrapper */
.pay-preview {
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(15,23,42,.10);
    border: 2px dashed #93c5fd; 
    background: #eff6ff;
    display: none;
    gap: 10px;
}

    .pay-preview img,
    .pay-preview canvas {
        width: 100%;
        height: 240px; 
        object-fit: contain; 
        border-radius: 12px;
        border: 1px solid rgba(15,23,42,.10);
        background: #fff;
        box-shadow: 0 10px 22px rgba(15,23,42,.08);
        display: block;
    }

    /* pdf pages container */
    .pay-preview .pdf-pages {
        display: grid;
        grid-template-columns: 1fr; 
        gap: 10px;
    }

/* small screens */
@media (max-width: 520px) {
    .pay-preview img,
    .pay-preview canvas {
        height: 200px;
    }
}

.is-locked {
    background: #f1f5f9 !important;
    color: #64748b !important;
    cursor: not-allowed;
}


/* 3-column layout */
.reg-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 16px;
    align-items: end;
}


.staff-lookup-row .btn-col {
    display: flex;
}

.staff-lookup-row .reg-btn {
    height: 46px; 
    padding: 0 20px;
    white-space: nowrap;
}


.invisible-label {
    visibility: hidden;
}

.field-error {
    border: 2px solid #e11d48 !important;
}

.field-error-msg {
    color: #e11d48;
    font-size: 12px;
    margin-top: 6px;
}

.reg-steps .step.disabled {
    pointer-events: none;
    opacity: .4;
    color: #9aa3b2;
}

.reg-steps .step.active {
    color: #1d4ed8;
    font-weight: 600;
}

.reg-steps .step.done {
    color: #16a34a;
}


/* Backdrop */
.modalDraft {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: modalDraft-fadeIn 0.25s ease-out;
}

/* Card */
.modalDraft-card {
    background: #ffffff;
    border-radius: 16px;
    width: min(420px, 90%);
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.08);
    animation: modalDraft-scaleIn 0.25s ease-out;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

    /* Title */
    .modalDraft-card h3 {
        margin: 0 0 0.5rem;
        font-size: 1.25rem;
        font-weight: 600;
        color: #0f172a;
    }

    /* Text */
    .modalDraft-card p {
        margin: 0 0 1.5rem;
        font-size: 0.95rem;
        color: #475569;
        line-height: 1.5;
    }

/* Actions */
.modalDraft-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

    /* Buttons */
    .modalDraft-actions button {
        border: none;
        border-radius: 10px;
        padding: 0.55rem 1.1rem;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }

/* Restore */
#btnDraftRestoreYes {
    background: #2563eb;
    color: #ffffff;
}

    #btnDraftRestoreYes:hover {
        background: #1d4ed8;
        box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
        transform: translateY(-1px);
    }

/* Cancel */
#btnDraftRestoreNo {
    background: #f1f5f9;
    color: #0f172a;
}

    #btnDraftRestoreNo:hover {
        background: #e2e8f0;
    }

/* Animations */
@keyframes modalDraft-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalDraft-scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/*
image SLIDE LEFT SIDE*/
/* ===== CANVA STYLE CAROUSEL ===== */
.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* ✅ create a safe area for arrows so they never overlap image */
    padding: 0 92px;
}

/* container that holds absolute slides */
.illustration-container {
    position: relative;
    width: min(920px, 100%);
    height: 520px;
    overflow: visible;
    perspective: 1000px;
}

/* slide base */
.illustration-slide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(520px, 86%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.82);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1), filter .55s ease;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
    filter: blur(0px);
}

    /* ACTIVE in center (BIG) */
    .illustration-slide.active {
        display: flex;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
        pointer-events: auto;
        z-index: 10;
    }

    /* If you truly don't want side slides visible, keep these disabled */
    .illustration-slide.prev-slide,
    .illustration-slide.next-slide {
        display: none !important;
    }

/* image */
.image-card {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

.hero-real-img {
    width: 100%;
    max-width: 720px; /* ✅ bigger */
    height: auto;
    display: block;
    border-radius: 28px;
    background: rgba(255,255,255,.14);
    padding: 18px;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 22px 55px rgba(0,0,0,.14);
    cursor: zoom-in;
}

/* text */
.slide-text {
    margin-top: 22px;
    text-align: center;
    color: #fff;
    max-width: 760px;
    padding: 0 12px;
}

.hero-title-text {
    font-size: 44px;
    font-weight: 900;
    line-height: 1.1;
    margin: 0;
}

.hero-sub-text {
    margin: 10px 0 0;
    font-size: 15px;
    opacity: .88;
}

/* arrows: OUTSIDE the slide area */
.hero-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 999px;
    background: rgba(255,255,255,.22);
    color: #fff;
    font-size: 34px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform .2s ease, background .2s ease;
    z-index: 50;
}

    .hero-nav-btn:hover {
        background: rgba(255,255,255,.32);
        transform: translateY(-50%) scale(1.06);
    }

/* ✅ these sit in the padding space, not on the image */
.hero-nav-prev {
    left: 22px;
}

.hero-nav-next {
    right: 22px;
}

/* dots */
.hero-dots {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 60;
}

.hero-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,.45);
    cursor: pointer;
    transition: all .35s cubic-bezier(.22,1,.36,1);
}

    .hero-dot:hover {
        transform: scale(1.2);
    }

    .hero-dot.is-active {
        width: 32px;
        background: #fff;
    }

/* responsive */
@media (max-width: 620px) {
    .hero-slider {
        padding: 0 18px;
    }
    /* less padding */
    .hero-nav-prev {
        left: 10px;
    }

    .hero-nav-next {
        right: 10px;
    }

    .illustration-container {
        height: 420px;
    }

    .hero-title-text {
        font-size: 30px;
    }
}

/* ===== Modal viewer (same as yours) ===== */
.imgmodal {
    position: fixed;
    inset: 0;
    z-index: 999999;
}

.imgmodal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
}

.imgmodal-card {
    position: relative;
    width: min(960px, 92vw);
    max-height: 90vh;
    margin: 5vh auto;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    padding: 14px;
    backdrop-filter: blur(10px);
}

.imgmodal-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 14px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
}

.imgmodal-toolbar {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 10px;
}

.imgmodal-btn {
    border: none;
    border-radius: 12px;
    padding: 10px 14px;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-weight: 800;
    cursor: pointer;
}

.imgmodal-view {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    max-height: calc(90vh - 90px);
}

#imgModalImg {
    transform: scale(1);
    transform-origin: center center;
    transition: transform .15s ease;
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    background: rgba(255,255,255,.10);
    padding: 10px;
}

.imgmodal-view {
    height: 70vh; 
    width: 100%;
    overflow: hidden; /* ✅ no scrollbars */
    border-radius: 16px;
}

.imgmodal-zoomWrap {
    width: 100%;
    height: 100%;
    touch-action: none; /* ✅ required for pan/pinch */
    display: grid;
    place-items: center;
}

#imgModalImg {
    max-width: 100%;
    max-height: 100%;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    cursor: grab;
}

    #imgModalImg:active {
        cursor: grabbing;
    }

/*/grid column/*/
/* 4-column layout for staff lookup row */
.reg-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr auto auto;
    gap: 16px;
    align-items: end;
}

.staff-lookup-row .btn-col {
    display: flex;
    align-items: flex-end;
}

.staff-lookup-row .reg-btn,
.staff-lookup-row .btn-secondary {
    height: 46px;
    padding: 0 20px;
    white-space: nowrap;
}
@media (max-width: 869px) {
    .reg-grid-4 {
        grid-template-columns: 1fr;
    }

    .staff-lookup-row .reg-btn,
    .staff-lookup-row .btn-secondary {
        width: 100%;
    }
}




/* =========================================================
   MOBILE HEADER (<=869px) — SINGLE CLEAN VERSION (NO DUPLICATES)
   Goals:
   1) Purple header TOUCHES TOP (no grey frame)
   2) Everything below is plain WHITE page (no "white container" card)
   3) Full page scroll works (no stuck scrolling)
   4) auth-left-body hidden on mobile (no overlap / reserved height)
   5) Stepper: 1 row + SHORT connector line + GAP from circles
========================================================= */


/* =========================
   DESKTOP DEFAULTS
========================= */
.reg-card #stepper {
    display: flex;
}

.mobile-header {
    display: none;
}

    .mobile-header #stepper {
        display: none;
    }


/* =========================
   MOBILE / TABLET
========================= */
@media (max-width: 869px) {

    /* ✅ Ensure the PAGE can scroll */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 100% !important;
        overflow-y: auto !important; /* ✅ page scroll */
        overflow-x: hidden !important;
        background: #ffffff !important; /* ✅ bottom is plain white */
    }

    /* remove any centered "frame" layout */
    .auth-page {
        padding: 0 !important;
        min-height: auto !important;
        height: auto !important;
        place-items: stretch !important;
        display: block !important; /* ✅ stop centering */
        background: #ffffff !important;
    }

    .auth-shell {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    /* Mobile header lives inside auth-left */
    .auth-left {
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: auto !important;
        position: relative !important;
        overflow: visible !important;
    }

        .auth-left::before {
            display: none !important;
        }

    .auth-left-top {
        display: none !important;
    }

    /* ✅ Kill slider space on mobile (common culprit of weird gaps/overlap) */
    .auth-left-body {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* ✅ Right becomes normal flowing content (NO 100vh / NO hidden overflow) */
    .auth-right {
        background: #ffffff !important; /* ✅ plain white page */
        padding: 0 !important; /* ✅ remove top gap */
        margin: 0 !important;
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important; /* ✅ do NOT trap scroll */
        display: block !important;
    }

    /* ✅ Remove the "white container" look from reg-card */
    .reg-card {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important; /* ✅ page scroll */
        margin: 0 !important; /* ✅ remove top gap */
        padding: 14px !important; /* keep some spacing for form (optional) */
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

        /* show ONLY the header stepper on mobile */
        .reg-card #stepper {
            display: none !important;
        }

    .mobile-header {
        display: block !important;
    }

        .mobile-header #stepper {
            display: flex !important;
        }


    /* =========================
     MOBILE HEADER (PURPLE)
  ========================== */
    .mobile-header {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        background: #6d59ff !important;
        border: 0 !important;
        position: relative !important;
        z-index: 1000 !important;
        /* if you want absolute top with NO safe area:
       set padding-top: 0 !important;
    */
        padding-top: env(safe-area-inset-top) !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 12px !important;
        /* Stepper variables */
        --dot: 24px; /* circle size */
        --gap: 6px; /* gap between dot and line */
        --line: 2px; /* line thickness */
        --num: 10px; /* number size */
    }

    /* LOGO: adjust size here */
    .mobile-logo {
        height: 8px !important; /* ✅ LOGO SIZE */
        width: auto !important;
        display: block !important;
        margin: 4px 0 6px 0 !important; /* ✅ logo spacing */
        filter: brightness(0) invert(1);
    }

    .mobile-toprow {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
    }

    .mobile-welcome {
        font-size: 16px !important;
        font-weight: 800 !important;
        color: #fff !important;
        margin: 0 !important;
        line-height: 1.1 !important;
    }

    .mobile-desc {
        margin: 4px 0 10px 0 !important;
        font-size: 12px !important;
        color: rgba(255,255,255,.88) !important;
        line-height: 1.25 !important;
    }

    .mobile-preview-btn,
    #btnMobilePreview {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 7px 10px !important;
        border-radius: 10px !important;
        border: 1px solid rgba(255,255,255,.35) !important;
        background: rgba(255,255,255,.14) !important;
        color: #fff !important;
        font-weight: 800 !important;
        font-size: 12px !important;
        cursor: pointer !important;
        white-space: nowrap !important;
    }

        .mobile-preview-btn::before,
        #btnMobilePreview::before {
            content: "" !important;
            display: none !important;
        }


    /* =========================
     STEPPER (1 ROW) + SHORT CONNECTOR + GAP
  ========================== */
    .mobile-header #stepper .bar {
        display: none !important;
    }

    .mobile-header #stepper {
        counter-reset: mstep;
    }

        .mobile-header #stepper.reg-steps {
            margin: 8px 0 0 !important;
            padding: 0 !important;
            display: flex !important;
            flex-wrap: nowrap !important;
            justify-content: space-between !important;
            align-items: flex-start !important;
            gap: 0 !important;
            background: transparent !important;
            border: 0 !important;
        }

        .mobile-header #stepper .step {
            width: 20% !important;
            min-width: 0 !important;
            padding: 0 !important;
            border: 0 !important;
            background: transparent !important;
            cursor: pointer !important;
            position: relative !important;
            z-index: 2 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 4px !important;
            counter-increment: mstep;
            color: rgba(255,255,255,.85) !important;
        }

        .mobile-header #stepper .dot {
            width: var(--dot) !important;
            height: var(--dot) !important;
            border-radius: 999px !important;
            background: rgba(255,255,255,.22) !important;
            display: grid !important;
            place-items: center !important;
        }

            .mobile-header #stepper .dot::before {
                content: counter(mstep);
                font-size: var(--num) !important;
                font-weight: 900 !important;
                color: rgba(255,255,255,.95) !important;
                line-height: 1 !important;
            }

        .mobile-header #stepper .step.active .dot {
            background: #fff !important;
        }

            .mobile-header #stepper .step.active .dot::before {
                color: #5b6bff !important;
            }

        .mobile-header #stepper .label {
            font-size: 7px !important;
            font-weight: 700 !important;
            color: rgba(255,255,255,.88) !important;
            white-space: nowrap !important;
            line-height: 1 !important;
        }

        /* short line with GAP from circles */
        .mobile-header #stepper .step:not(:last-child)::after {
            content: "" !important;
            position: absolute !important;
            top: calc(var(--dot) / 2) !important;
            left: calc(50% + (var(--dot) / 2) + var(--gap)) !important;
            width: calc(100% - var(--dot) - (var(--gap) * 2)) !important;
            height: var(--line) !important;
            background: rgba(255,255,255,.35) !important;
            border-radius: 999px !important;
            transform: translateY(calc(var(--line) / -2)) !important;
            z-index: 1 !important;
        }

    /* Preview overlay */
    #heroSlider {
        display: none !important;
    }

        #heroSlider.is-open {
            display: flex !important;
            position: fixed !important;
            inset: 0 !important;
            z-index: 99990 !important;
            padding: 18px 14px 24px !important;
            background: #6d59ff !important;
        }
}


/* Small phones */
@media (max-width: 520px) {
    .mobile-header {
        --dot: 22px;
        --gap: 6px;
        --num: 9px;
    }

    .mobile-logo {
        height: 8px !important;
    }

    .mobile-header #stepper .label {
        font-size: 6.6px !important;
    }
}





/* Card-like header layout */
.p-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    background: #eaf3ff; 
    border-radius: 14px;
}


.p-card-left {
    display: grid;
    gap: 4px;
}

.p-card-title {
    font-weight: 800;
    color: #0f172a;
}

.p-card-sub {
    font-size: 12px;
    color: #64748b;
    display: flex;
    gap: 6px;
    align-items: center;
}

.p-dot {
    opacity: .6;
}

.p-card-right {
    display: flex;
    gap: 10px;
    align-items: center;
}

.p-remove {
    border: 0;
    background: #ef4444;
    color: #fff;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
}

.p-toggle {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 6px 8px;
}
.btn-add .ico {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(59,130,246,.12);
    margin-right: 8px;
    font-size: 18px;
    font-weight: 900;
}
.p-name {
    color: #0f172a;
}

.p-gender, .p-category {
    font-weight: 400; /* not bold */
}
.p-arrow {
    color: #2563eb; /* blue */
    font-size: 14px;
    margin-right: 8px;
}


@media (max-width: 869px) {

    /* Hero header container */
    .mobile-header.hero-header {
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        color: #fff !important;
        background: linear-gradient(180deg,#6b6cff,#6a38d9) !important;
        padding: calc(env(safe-area-inset-top) + 18px) 18px 120px !important;
    }

    /* Preview top-right */
    .hero-preview-btn,
    #btnMobilePreview.hero-preview-btn {
        position: absolute !important;
        top: calc(env(safe-area-inset-top) + 10px) !important;
        right: 12px !important;
        z-index: 5 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 10px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255,255,255,.35) !important;
        background: rgba(255,255,255,.14) !important;
        color: #fff !important;
        font-weight: 800 !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    /* Centered content */
    .hero-content {
        position: relative !important;
        z-index: 3 !important;
        min-height: 260px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 10px !important;
    }

    /* Logo centered (adjust size here) */
    .hero-logo {
        height: 19px !important; /* change this to resize logo */
        width: auto !important;
        display: block !important;
        margin-bottom: 12px !important;
       
    }

    .hero-title {
        font-size: 20px !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
    }

    .hero-sub {
        font-size: 13px !important;
        opacity: .92 !important;
    }

    /* Dots */
    .hero-dots {
        display: flex !important;
        gap: 12px !important;
        margin-top: 10px !important;
    }

        .hero-dots .hdot {
            width: 10px !important;
            height: 10px !important;
            border-radius: 999px !important;
            background: rgba(255,255,255,.30) !important;
        }

            .hero-dots .hdot.active {
                background: #fff !important;
            }

    .hero-steptext {
        font-size: 13px !important;
        opacity: .85 !important;
        margin-top: 4px !important;
    }

    /* Waves at bottom */
    .hero-waves {
        position: absolute !important;
        bottom: 0 !important;
        left: -2px !important;
        width: calc(100% + 4px) !important;
        height: 180px !important;
        display: block !important;
        pointer-events: none !important;
        transform: translateZ(0);
        z-index: 2 !important;
        overflow: hidden !important;
    }

        .hero-waves .w1 {
            fill: rgba(255,255,255,.18);
        }

        .hero-waves .w2 {
            fill: rgba(255,255,255,.38);
        }

        .hero-waves .w3 {
            fill: #fff;
        }

    /* Make sure content below header is white and starts right after wave */
    .auth-right {
        background: #fff !important;
        padding: 0 !important;
    }

    .reg-card {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 14px !important;
    }
}
/* IMPORTANT: do not let the connector line block taps */
.mobile-header #stepper .step::after {
    pointer-events: none !important;
}
.mobile-header #stepper .dot,
.mobile-header #stepper .label {
    position: relative !important;
    z-index: 3 !important;
}

.hero-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

.hdot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1; 
    cursor: pointer;
}

    .hdot.active {
        background: #2563eb; 
    }

    .hdot.done {
        background: #16a34a; 
    }

/* =========================
   MOBILE PREVIEW MODAL (FULL)
   ========================= */

/* Core overlay behavior (always works) */
.mPreview {
    display: none;
}

    .mPreview.is-open {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 999999;
    }

.mPreview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(6px);
}

/* Card base (works on all sizes; mobile overrides below) */
.mPreview-card {
    position: relative;
    margin: 0 auto;
}

/* Close (X) */
.mPreview-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 14px;
    background: rgba(255,255,255,.16);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    display: grid;
    place-items: center;
    z-index: 30;
    cursor: pointer;
}

/* Lock scroll */
.modal-lock {
    overflow: hidden;
}

/* =========================
   MOBILE LAYOUT
   ========================= */
@media (max-width: 620px) {

    .mPreview-card {
        position: absolute; /* key */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 92vw;
        height: 66vh;
        border-radius: 18px;
        background: rgba(20,20,20,.72);
        border: 1px solid rgba(255,255,255,.16);
        overflow: hidden;
        padding: 10px;
    }


    /* center the whole slide area */
    .mPreview-body {
        height: 100%;
        padding: 18px 12px 18px; /* ✅ no big bottom padding (dots are under text now) */
        position: relative;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* slides container */
    .mPreview-slides {
        width: 100%;
        height: 100%;
        position: relative; /* required for absolute slides */
        display: block;
    }

    /* each slide overlays same area for smooth fade */
    .mPreview-slide {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: 820px; /* ✅ wider slide */
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        opacity: 0;
        transform: translateY(10px) scale(.985);
        transition: opacity .42s ease, transform .42s cubic-bezier(.22,1,.36,1);
        pointer-events: none;
    }

        .mPreview-slide.is-active {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }

        /* ✅ bigger image */
        .mPreview-imgCard,
        .mPreview-slide .image-card {
            width: 100%;
            max-width: 820px; /* ✅ bigger */
            padding: 6px;
            border-radius: 18px;
        }

        .mPreview-img,
        .mPreview-slide .hero-real-img {
            width: 100%;
            max-width: 100%;
            height: auto;
            display: block;
            border-radius: 16px;
        }

    /* text row + arrows beside text */
    .mPreview-textRow {
        width: 100%;
        max-width: 820px;
        display: grid;
        grid-template-columns: 34px 1fr 34px;
        align-items: center;
        gap: 10px;
    }

    /* text */
    .mPreview-text {
        text-align: center;
        padding: 0 6px;
    }

    .hero-title-text {
        margin: 0;
        font-size: 30px;
        line-height: 1.12;
    }

    .hero-sub-text {
        margin: 8px 0 0;
        font-size: 14px;
        opacity: .85;
    }

    /* arrows smaller circles */
    .mPreview-nav {
        width: 34px;
        height: 34px;
        border: none;
        border-radius: 999px;
        background: rgba(255,255,255,.22);
        color: #fff;
        font-size: 22px;
        display: grid;
        place-items: center;
        cursor: pointer;
    }

    /* ✅ dots directly under description (NOT pinned at bottom) */
    .mPreview-dots {
        position: static; /* important */
        transform: none;
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 8px; /* just below description */
        z-index: 5;
        pointer-events: auto;
    }

    .mPreview-dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        border: none;
        background: rgba(255,255,255,.35);
        cursor: pointer;
    }

        .mPreview-dot.is-active {
            width: 34px;
            background: #fff;
        }
}

@media (max-width: 620px) {

    /* Make the modal card stable and scroll-friendly */
    .mPreview-card {
        height: 78vh; /* a bit taller for scroll comfort */
        max-height: 620px; /* optional */
    }

    /* Make body scrollable */
    .mPreview-body {
        height: 100%;
        overflow: auto; /* ✅ scroll inside modal */
        -webkit-overflow-scrolling: touch;
        padding: 64px 12px 18px; /* ✅ top padding so X never overlaps */
        align-items: stretch; /* override your center */
        justify-content: flex-start; /* override your center */
    }

    /* Keep X always visible */
    .mPreview-close {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 50;
    }

    /* Stop absolute slides on mobile so content can grow */
    .mPreview-slides {
        height: auto;
        position: static;
        width: 100%;
    }

    .mPreview-slide {
        position: static; /* ✅ was absolute */
        inset: auto;
        height: auto;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        display: none; /* ✅ show only active slide */
        width: 100%;
        max-width: 820px;
        margin: 0 auto;
        flex-direction: column;
        gap: 12px;
    }

        .mPreview-slide.is-active {
            display: flex; /* ✅ only active visible */
        }

        /* Image should not exceed screen height */
        .mPreview-img,
        .mPreview-slide .hero-real-img {
            width: 100%;
            height: auto;
            max-height: 42vh; /* ✅ prevents overlapping X/buttons */
            object-fit: contain;
        }

    /* Keep arrows + text visible and not overlapped */
    .mPreview-textRow {
        margin-top: 6px;
    }

    /* Dots stay under text */
    .mPreview-dots {
        margin-top: 10px;
    }
}

.mPreview-zoomWrap {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    touch-action: none; /* allow pinch/pan */
}

    .mPreview-zoomWrap img {
        width: 100%;
        height: auto;
        display: block;
        transform-origin: center;
        user-select: none;
        -webkit-user-drag: none;
    }

/* download button */
.qr-download {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #1d4ed8;
    background: #eef4ff;
    border: 1px solid #c7d8ff;
    border-radius: 999px;
    text-decoration: none;
    transition: all .18s ease;
}

    .qr-download:hover {
        background: #e2ecff;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(29,78,216,.18);
    }

    .qr-download:active {
        transform: translateY(0);
        box-shadow: 0 3px 10px rgba(29,78,216,.14);
    }


/* 3 items in one row: Email | IC | Button */


/* parent row */
.email-ic-draft {
    display: grid;
    grid-template-columns: 1fr 0.6fr auto;
    gap: 12px;
}

    .email-ic-draft .form-group {
        display: grid;
        grid-template-rows: auto 40px 18px; /* label / input / validation */
        align-items: end;
    }

    .email-ic-draft .custom-validation-message {
        display: block;
        min-height: 10px;
        margin-top: 2px;
    }

    .email-ic-draft .reg-input,
    .email-ic-draft .btn-secondary--input {
        height: 40px;
    }


    .email-ic-draft .btn-secondary--input {
        padding: 0 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
    }

/* invisible */
.invisible-label {
    visibility: hidden;
}
@media (max-width: 869px) {
    .email-ic-draft {
        grid-template-columns: 1fr max-content; /* IC wide, button small */
        gap: 10px;
        align-items: end;
    }

        /* 1st item (Email) full row */
        .email-ic-draft > .form-group:nth-child(1) {
            grid-column: 1 / -1;
        }

        /* 2nd item (IC) left */
        .email-ic-draft > .form-group:nth-child(2) {
            grid-column: 1 / 2;
        }

        /* 3rd item (Button) right */
        .email-ic-draft > .form-group:nth-child(3) {
            grid-column: 2 / 3;
        }

        /* keep button compact */
        .email-ic-draft .btn-secondary--input {
            width: auto;
            white-space: nowrap;
        }
}



/* lock the whole page when modal open */
body.modal-lock #pageApp {
    pointer-events: none !important;
    user-select: none !important;
}

/* modal is still clickable */
body.modal-lock #mobilePreviewModal,
body.modal-lock #mobilePreviewModal * {
    pointer-events: auto !important;
}

/* make sure modal covers the screen */
#mobilePreviewModal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important; /* max */
}

/* backdrop must catch taps */
#mPreviewBackdrop {
    position: absolute !important;
    inset: 0 !important;
}

/* Fix click-through ONLY on the image area */
#mobilePreviewModal .mPreview-imgCard,
#mobilePreviewModal .mPreview-zoomWrap,
#mobilePreviewModal .mPreview-img {
    pointer-events: auto !important;
}

    /* (optional) make sure nothing inside the image-card disables it */
    #mobilePreviewModal .mPreview-imgCard * {
        pointer-events: auto !important;
    }
#mPreviewShield {
    position: fixed;
    inset: 0;
    z-index: 2147483646; /* just under modal */
    background: transparent;
    pointer-events: auto;
}

#mobilePreviewModal {
    z-index: 2147483647 !important; /* above shield */
}


/* Confirm overlay with blur */
.cfrm-overlay {
    position: fixed;
    inset: 0;
    display: none; /* hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 100000;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

/* Modal card */
.cfrm-card {
    width: min(92vw, 420px);
    background: #fff;
    border-radius: 16px;
    padding: 22px 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    transform: scale(0.98);
    opacity: 0;
    animation: cfrmPop 0.16s ease-out forwards;
}

@keyframes cfrmPop {
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.cfrm-title {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
}

.cfrm-text {
    margin: 0 0 18px;
    color: #555;
    font-size: 14px;
    line-height: 1.45;
}

.cfrm-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.cfrm-btn {
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 14px;
    cursor: pointer;
}

.cfrm-btn-ghost {
    border: 1px solid #d1d5db;
    background: #fff;
}

.cfrm-btn-primary {
    border: 0;
    background: #2563eb;
    color: #fff;
}

    .cfrm-btn-primary:hover {
        filter: brightness(0.95);
    }




/* ================================
   MOBILE PREVIEW MODAL - FULL CSS
   ================================ */

.mPreview {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: none;
}

body.modal-lock {
    overflow: hidden;
}

/* Backdrop */
.mPreview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 0;
}

/* Card */
.mPreview-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(92vw, 420px);
    max-height: 92vh;
    background: rgba(30,30,30,.92);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    z-index: 1;
    overflow: hidden;
}

/* Close */
.mPreview-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 0;
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 22px;
    line-height: 44px;
    cursor: pointer;
    z-index: 10;
}

.mPreview-body {
    padding: 18px 16px 16px;
}

/* Slides container */
.mPreview-slides {
    position: relative;
    width: 100%;
    min-height: 420px; /* keep stable */
}

/* ===== Smooth slide fade + scale ===== */
.mPreview-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(.965);
    transition: opacity .35s ease, transform .35s ease;
    will-change: opacity, transform;
}

    .mPreview-slide.is-active {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
    }

    .mPreview-slide:not(.is-active) {
        pointer-events: none;
    }

/* ===== ONE BOX ONLY (remove double box from .image-card) ===== */
.image-card.mPreview-imgCard {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* The single frame */
.mPreview-imgCard {
    width: 100%;
    height: 260px;
    border-radius: 16px;
    background: rgba(255,255,255,.06);
    overflow: hidden;
}

/* Panzoom target must fill the frame */
.mPreview-zoomWrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none; /* allows Panzoom to handle gestures */
}

/* Center image nicely */
.mPreview-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Text row */
.mPreview-textRow {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    gap: 10px;
    align-items: center;
    position: relative;
    z-index: 6;
}

.mPreview-text {
    text-align: center;
    color: #fff;
}

.hero-title-text {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    font-weight: 800;
}

.hero-sub-text {
    margin: 10px 0 0;
    font-size: 14px;
    opacity: .85;
}

/* Nav buttons */
.mPreview-nav {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 0;
    background: rgba(255,255,255,.10);
    color: #fff;
    font-size: 24px;
    line-height: 44px;
    cursor: pointer;
    display: grid;
    place-items: center;
}

/* Dots */
.mPreview-dots {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 10px;
    position: relative;
    z-index: 6;
}

.mPreview-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 0;
    background: rgba(255,255,255,.28);
    cursor: pointer;
    padding: 0;
}

    .mPreview-dot.is-active {
        width: 32px;
        background: rgba(255,255,255,.90);
    }

/* Small screen tweaks */
@media (max-width: 360px) {
    .mPreview-card {
        width: 94vw;
    }

    .hero-title-text {
        font-size: 26px;
    }

    .mPreview-imgCard {
        height: 240px;
    }
}
/* stop iOS from theming the control */
#regTypeModal .regtype-btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #f8fafc !important;
}

    /* force the actual text to black */
    #regTypeModal .regtype-btn .regtype-label {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important; /* iOS safari */
        opacity: 1 !important;
        mix-blend-mode: normal !important;
        filter: none !important;
    }


body.is-processing {
    overflow: hidden;
}

#processingOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

    #processingOverlay .processingCard {
        background: #fff;
        padding: 18px 20px;
        border-radius: 14px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.25);
        text-align: center;
        min-width: 240px;
    }

    #processingOverlay .spinner {
        width: 28px;
        height: 28px;
        margin: 0 auto 10px;
        border-radius: 50%;
        border: 3px solid rgba(0,0,0,0.15);
        border-top-color: rgba(0,0,0,0.65);
        animation: spin .9s linear infinite;
    }

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

body.is-processing main,
body.is-processing form {
    filter: blur(2px);
    pointer-events: none;
    user-select: none;
}


.auto-uppercase {
    text-transform: uppercase;
}
/* Upload Payment Slip box (light blue) */
#payUploadBox.pay-upload {
    background: #eff6ff !important;
    border: 2px dashed #93c5fd !important; 
}
    #payUploadBox.pay-upload:hover {
        background: #e0f2fe !important;
        border-color: #60a5fa !important;
    }

.review-grid div {
    display: grid;
    grid-template-columns: auto 1fr; 
    column-gap: 8px; 
    align-items: start;
}

.review-grid label,
.review-grid span {
    text-align: left;
}
.calc-table {
    width: 100%;
    border-collapse: collapse;
}

    .calc-table th,
    .calc-table td {
        text-align: left !important;
    }

    .calc-table .num {
        text-align: left !important;
    }


/* =========================
   Calculation Popup (FIXED SCROLL)
========================= */

/* overlay */
.calc-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.45);
    z-index: 999999;
    padding: 16px;
    /* IMPORTANT: allow touch scroll inside */
    overscroll-behavior: contain;
}

    .calc-overlay.is-open {
        display: flex;
    }

/* modal box */
.calc-pop {
    width: min(720px, 92vw);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
    /* KEY: give modal a height limit */
    max-height: 85vh;
    /* KEY: make it a column layout */
    display: flex;
    flex-direction: column;
    /* KEY: contain overflow so body scroll works */
    overflow: hidden;
}

/* inner wrapper must also behave like column */
.calc-pop-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* KEY for scroll in flex */
}

/* header stays fixed */
.calc-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    padding: 18px 22px 12px;
    border-bottom: 1px solid rgba(15,23,42,.08);
}

/* scroll area */
.calc-body {
    flex: 1 1 auto;
    min-height: 0; /* KEY for scroll in flex */

    padding: 0 22px 22px;
    /* ✅ BOTH scroll */
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
    overscroll-behavior: contain;
}

/* title + close */
.calc-title {
    font-weight: 900;
    font-size: 20px;
    color: #0f172a;
}

.calc-x {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 0;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s ease, transform .15s ease;
}

    .calc-x:hover {
        background: #f1f5f9;
        transform: scale(1.05);
    }

/* =========================
   Table
========================= */

.calc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    color: #0f172a;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    /* IMPORTANT: allow horizontal scroll on small screens */
    min-width: 680px; /* forces x-scroll on phone */
}

    .calc-table thead th {
        text-align: left;
        font-weight: 800;
        padding: 12px;
        background: #f8fafc;
        border-bottom: 1px solid rgba(15,23,42,.10);
        /* sticky header inside scroll body */
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .calc-table tbody td {
        padding: 12px;
        border-bottom: 1px solid rgba(15,23,42,.06);
        vertical-align: top;
    }

    .calc-table tbody tr:nth-child(even) {
        background: #fbfdff;
    }

    .calc-table tbody tr:hover {
        background: #f1f5ff;
    }

    .calc-table tfoot td {
        padding: 14px 12px;
        background: #f6f8ff;
        border-top: 1px solid rgba(15,23,42,.10);
        font-weight: 900;
    }

    .calc-table .total-label {
        text-align: center;
        color: #64748b;
    }

    .calc-table .total-val {
        text-align: right;
        font-size: 14px;
        font-weight: 900;
    }

    /* optional: keep number column right aligned */
    .calc-table .num {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

/* =========================
   Mobile tweaks
========================= */
@media (max-width: 520px) {
    .calc-pop {
        width: 96vw;
        max-height: 92vh;
    }

    .calc-body {
        padding: 0 14px 14px;
    }

    .calc-table {
        font-size: 12px;
        min-width: 640px; /* keep x-scroll */
    }

        .calc-table thead th,
        .calc-table tbody td {
            padding: 10px;
        }
}