:root{--pay-green:#0f4835;--pay-mint:#eaf8f1;--pay-line:#cfe0d8;--pay-text:#17352b;--pay-muted:#64748b}
.sidebar .payment-feature{background:#ffffff10;border-left:3px solid #3dd6a0}
.payment-hero{display:flex;justify-content:space-between;gap:1.5rem;align-items:center;padding:1.25rem 1.4rem;margin-bottom:1rem;border:1px solid #b9d9cb;border-radius:1rem;background:linear-gradient(135deg,#f4fff9,#e6f7ef)}.payment-hero h2,.payment-hero p{margin:.2rem 0}.payment-hero p{max-width:760px;color:#52645b}.payment-eyebrow{font-size:.68rem;letter-spacing:.12em;font-weight:850;color:#147753}.payment-mode{min-width:180px;display:grid;gap:.2rem;padding:.8rem 1rem;border:1px solid #a8d1be;border-radius:.75rem;background:#fff}.payment-mode small{font-size:.62rem;color:#64748b}.payment-mode strong{font-size:1.25rem;color:var(--pay-green)}.payment-mode span{margin-top:.2rem;padding:.28rem .5rem;border-radius:999px;font-size:.7rem;font-weight:800}.payment-mode .is-on{background:#dcfce7;color:#166534}.payment-mode .is-off{background:#f1f5f9;color:#475569}
.payment-notice{padding:.8rem 1rem;margin:.8rem 0;border:1px solid;border-radius:.7rem}.payment-notice.warning{background:#fffbeb;border-color:#f6c862;color:#744a00}.payment-notice.success{background:#f0fdf4;border-color:#86efac;color:#166534}.payment-notice.info{background:#eff6ff;border-color:#93c5fd;color:#1d4ed8}
.payment-metrics{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:.7rem;margin:1rem 0}.payment-metrics article{display:grid;gap:.25rem;padding:1rem;border:1px solid var(--pay-line);border-radius:.8rem;background:#fff}.payment-metrics span{font-size:.72rem;color:var(--pay-muted)}.payment-metrics strong{font-size:1.55rem;color:var(--pay-green)}.payment-metrics .pending{border-left:6px solid #eab308}.payment-metrics .paid{border-left:6px solid #16a34a}.payment-metrics .money{border-left:6px solid #2563eb}.payment-metrics .failed{border-left:6px solid #dc2626}
.payment-form-grid{display:grid;grid-template-columns:1fr 1.5fr 1fr 1fr 1fr auto;gap:.7rem;align-items:end}.payment-form-grid label,.payment-parent-form label{display:grid;gap:.3rem;font-size:.75rem;font-weight:750}.payment-form-grid input,.payment-form-grid select,.payment-parent-form input,.payment-parent-form select{width:100%;padding:.68rem;border:1px solid #bfcfc8;border-radius:.55rem;background:#fff}.payment-section-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem}.payment-section-heading h2,.payment-section-heading p{margin:.2rem 0}.payment-table{min-width:970px}.payment-table td small{display:block;margin-top:.25rem;color:var(--pay-muted);font-size:.68rem}.payment-status{display:inline-flex;padding:.27rem .55rem;border-radius:999px;font-size:.65rem;font-weight:850;border:1px solid #cbd5e1;background:#f1f5f9;color:#475569}.payment-status-paid,.payment-status-posted{background:#dcfce7;color:#166534;border-color:#86efac}.payment-status-pending,.payment-status-queued,.payment-status-processing{background:#fef9c3;color:#854d0e;border-color:#fde047}.payment-status-failed,.payment-status-cancelled{background:#fee2e2;color:#991b1b;border-color:#fca5a5}.payment-status-manual-review,.payment-status-refunded{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}.payment-status-expired{background:#f1f5f9;color:#475569}.payment-actions{display:flex;gap:.35rem;align-items:center;flex-wrap:wrap}.payment-actions form{margin:0}.payment-actions .payment-simulate-button{border-color:var(--pay-green);background:var(--pay-green);color:#fff}.payment-actions .payment-simulate-button:hover,.payment-actions .payment-simulate-button:focus{border-color:#176249;background:#176249;color:#fff}
.payment-parent-body{margin:0;min-height:100vh;background:linear-gradient(160deg,#edf9f3 0,#f8fafc 48%,#e8f4ee 100%);color:var(--pay-text)}.payment-parent-shell{width:min(920px,100%);min-height:100vh;margin:auto;padding:1rem;box-sizing:border-box}.payment-parent-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 0 1rem}.payment-parent-header>a{display:flex;align-items:center;gap:.7rem;color:var(--pay-text);text-decoration:none}.payment-parent-header>a>span{display:grid;place-items:center;width:42px;height:42px;border-radius:.75rem;background:var(--pay-green);color:#fff;font-size:1.35rem;font-weight:900}.payment-parent-header div{display:grid}.payment-parent-header small{font-size:.62rem;letter-spacing:.08em;color:var(--pay-muted)}.payment-parent-header>div{text-align:right}.payment-parent-shell>footer{text-align:center;padding:1.2rem;color:var(--pay-muted);font-size:.68rem}.payment-alert{margin:.6rem 0;padding:.75rem 1rem;border-radius:.7rem}.payment-alert.error{background:#fee2e2;color:#991b1b}.payment-alert.success{background:#dcfce7;color:#166534}
.payment-login-card,.payment-parent-card,.payment-status-card{padding:1.3rem;border:1px solid var(--pay-line);border-radius:1rem;background:#fff;box-shadow:0 15px 45px #0f48350d}.payment-login-card{max-width:520px;margin:5vh auto}.payment-login-intro span{font-size:.65rem;letter-spacing:.1em;color:#147753;font-weight:850}.payment-login-intro h1{margin:.35rem 0 .2rem}.payment-login-intro p{margin:0 0 1rem;color:var(--pay-muted)}.payment-parent-form{display:grid;gap:.8rem}.payment-parent-form button{width:100%;padding:.8rem}.payment-parent-form button:disabled{opacity:.45;cursor:not-allowed}.payment-security-note{margin-top:1rem;padding:.8rem;border-radius:.7rem;background:#f5f8f7;color:#52645b;font-size:.75rem}.payment-security-note p{margin:.2rem 0}.payment-back{display:inline-block;margin-top:1rem;color:#147753;font-size:.75rem}.payment-parent-welcome{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;padding:1rem 1.2rem;border-radius:1rem;background:var(--pay-green);color:#fff}.payment-parent-welcome small{font-size:.62rem;letter-spacing:.08em;color:#bfe4d3}.payment-parent-welcome h1,.payment-parent-welcome p{margin:.15rem 0}.payment-parent-card{margin:1rem 0}.payment-card-title{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:1rem}.payment-card-title>span{display:grid;place-items:center;min-width:32px;height:32px;border-radius:50%;background:var(--pay-green);color:#fff;font-weight:850}.payment-card-title h2,.payment-card-title p{margin:.1rem 0}.payment-card-title p{color:var(--pay-muted);font-size:.78rem}.payment-order-form{grid-template-columns:1fr 1fr}.payment-order-form button{grid-column:1/-1}.payment-money-input{display:flex;align-items:center;border:1px solid #bfcfc8;border-radius:.55rem;overflow:hidden}.payment-money-input span{padding:.68rem;background:#f1f5f9;font-weight:850}.payment-money-input input{border:0;border-radius:0}.payment-parent-orders{display:grid;gap:.5rem}.payment-parent-orders>a{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:.7rem;border:1px solid #dbe5e0;border-radius:.7rem;color:var(--pay-text);text-decoration:none}.payment-parent-orders>a:hover{border-color:#42a982;background:#f5fff9}.payment-parent-orders>a>div{display:grid;gap:.2rem}.payment-parent-orders>a>div:last-child{text-align:right}.payment-parent-orders small{color:var(--pay-muted);font-size:.66rem}
.payment-status-card{max-width:650px;margin:3vh auto}.payment-status-card>header{display:flex;gap:.8rem;align-items:center;padding-bottom:1rem;border-bottom:1px solid #e2e8f0}.payment-status-card>header>span{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:#fef3c7;color:#92400e;font-size:1.6rem;font-weight:900}.payment-status-card.is-paid>header>span{background:#dcfce7;color:#166534}.payment-status-card.is-closed>header>span{background:#fee2e2;color:#991b1b}.payment-status-card h1,.payment-status-card p{margin:.1rem 0}.payment-status-card header small,.payment-status-amount small{font-size:.62rem;letter-spacing:.08em;color:var(--pay-muted)}.payment-status-amount{display:grid;gap:.2rem;padding:1.2rem 0;text-align:center}.payment-status-amount strong{font-size:2rem;color:var(--pay-green)}.payment-status-card dl{display:grid;grid-template-columns:150px 1fr;gap:.55rem;margin:0 0 1rem}.payment-status-card dt{color:var(--pay-muted);font-size:.72rem}.payment-status-card dd{margin:0}.payment-code{font-size:1.15rem;letter-spacing:.08em}.payment-pay-link{display:block;padding:.8rem;text-align:center;text-decoration:none}.payment-qr-reference{display:grid;gap:.4rem;padding:.8rem;border-radius:.7rem;background:#f1f5f9}.payment-qr-reference code{overflow-wrap:anywhere}.payment-status-actions{display:flex;justify-content:center;gap:.5rem;margin-top:1rem}
.payment-login-switch{display:block;margin-top:1rem;text-align:center}.payment-portal-links{display:flex;gap:.5rem;flex-wrap:wrap}.payment-cart-form{gap:1rem}.payment-cart-group{overflow:hidden;border:1px solid var(--pay-line);border-radius:.8rem;background:#fff}.payment-cart-group>header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1rem;background:#f0f8f4}.payment-cart-group>header div{display:grid;gap:.15rem}.payment-cart-group>header small{font-size:.7rem;color:var(--pay-muted)}.payment-cart-open{padding:1rem;max-width:380px}.payment-cart-lines{display:grid}.payment-cart-line{display:grid;grid-template-columns:auto minmax(220px,1fr) minmax(145px,190px);align-items:center;gap:.8rem;padding:.65rem 1rem;border-top:1px solid #e5eee9;cursor:pointer}.payment-cart-line:hover{background:#f8fcfa}.payment-cart-line>input[type=checkbox]{width:19px;height:19px;accent-color:var(--pay-green)}.payment-cart-line>span{display:grid;gap:.15rem}.payment-cart-line small{font-size:.67rem;color:var(--pay-muted)}.payment-line-amount input{width:100%;padding:.5rem;border:1px solid #bfcfc8;border-radius:.45rem}.payment-line-amount input:disabled{opacity:.48;background:#f1f5f9}.payment-cart-checkout{position:sticky;bottom:.5rem;display:grid;grid-template-columns:minmax(180px,1fr) auto auto;align-items:end;gap:1rem;padding:1rem;border:1px solid #9bcab5;border-radius:.9rem;background:#ecf9f2;box-shadow:0 12px 35px #0f483520}.payment-cart-checkout label{display:grid;gap:.3rem}.payment-cart-checkout select{padding:.65rem;border:1px solid #bfcfc8;border-radius:.55rem;background:#fff}.payment-cart-checkout>div,.payment-employee-total{display:grid;min-width:170px}.payment-cart-checkout>div small,.payment-employee-total small{font-size:.6rem;letter-spacing:.08em;color:var(--pay-muted)}.payment-cart-checkout>div strong,.payment-employee-total strong{font-size:1.35rem;color:var(--pay-green)}.payment-cart-checkout>div em{font-size:.65rem;color:var(--pay-muted);font-style:normal}.payment-status-items{margin:1rem 0;border:1px solid var(--pay-line);border-radius:.75rem;overflow:hidden}.payment-status-items>header,.payment-status-items>div,.payment-status-items>footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.65rem .8rem}.payment-status-items>header,.payment-status-items>footer{background:#f0f8f4}.payment-status-items>header small,.payment-status-items>div small{font-size:.66rem;color:var(--pay-muted)}.payment-status-items>div{border-top:1px solid #e5eee9}.payment-status-items>div span{display:grid}.payment-status-items>footer{border-top:1px solid #cbded5}.payment-catalog select,.payment-catalog input[type=number]{max-width:180px;padding:.45rem;border:1px solid #cbd5e1;border-radius:.4rem}.payment-catalog td label{display:block;font-size:.7rem;margin:.2rem 0}.payment-account-map{display:grid;gap:.22rem;min-width:280px}.payment-account-map>span{font-size:.72rem}.payment-account-map b{display:inline-block;min-width:76px;color:var(--pay-green)}.payment-account-map small{margin-top:.25rem!important}.payment-scope{display:inline-flex;margin-top:.35rem;padding:.2rem .45rem;border-radius:999px;font-size:.6rem;font-weight:850;background:#f1f5f9;color:#475569}.payment-scope-santri{background:#dcfce7;color:#166534}.payment-scope-calon-santri{background:#dbeafe;color:#1d4ed8}.payment-scope-lainnya{background:#f1f5f9;color:#475569}
.payment-period-banner{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;padding:.75rem 1rem;border:1px solid #9bcab5;border-radius:.75rem;background:#f0fdf6}.payment-period-banner>div{display:grid;gap:.15rem}.payment-period-banner small,.payment-billing-settings-form small{font-size:.6rem;letter-spacing:.08em;color:var(--pay-muted)}.payment-period-banner strong{color:var(--pay-green)}.payment-period-banner>span{max-width:440px;font-size:.72rem;color:#52645b}.payment-arrears-group{border-color:#e8c66a}.payment-arrears-group>header{background:#fffbeb}.payment-previous-group{border-color:#9fc5f8}.payment-previous-group>header{background:#eff6ff}.payment-line-description>label{display:grid;gap:.15rem;cursor:pointer}.payment-bill-balance{color:#334155!important}.payment-bill-balance b{color:var(--pay-green)}.payment-arrears-details{margin-top:.35rem}.payment-arrears-details summary{width:max-content;max-width:100%;cursor:pointer;color:#147753;font-size:.68rem;font-weight:800}.payment-arrears-details[open]{margin:.45rem 0;padding:.55rem;border:1px solid #dbe5e0;border-radius:.55rem;background:#fff}.payment-arrears-year+ .payment-arrears-year{margin-top:.55rem;padding-top:.55rem;border-top:1px dashed #cbd5e1}.payment-arrears-year header,.payment-arrears-year p{display:flex;justify-content:space-between;gap:.8rem;margin:.15rem 0}.payment-arrears-year header{color:var(--pay-green)}.payment-arrears-year p{font-size:.68rem;color:#52645b}.payment-arrears-year p span{display:grid;gap:.1rem}.payment-arrears-year p span small{font-size:.61rem;color:var(--pay-muted)}.payment-arrears-year p b{white-space:nowrap}.payment-oldest-note{margin-top:.25rem;color:#92400e!important}.payment-billing-settings-form{display:grid;grid-template-columns:minmax(260px,1.2fr) minmax(280px,1fr) auto;align-items:end;gap:1rem}.payment-billing-settings-form label,.payment-billing-settings-form>div{display:grid;gap:.25rem}.payment-billing-settings-form select{width:100%;padding:.65rem;border:1px solid #bfcfc8;border-radius:.55rem;background:#fff}.payment-billing-settings-form>div{padding:.55rem .7rem;border-radius:.55rem;background:#f0fdf4}.payment-billing-settings-form>div strong{color:var(--pay-green)}.payment-billing-settings-form>div span{font-size:.67rem;color:var(--pay-muted)}
@media(max-width:1050px){.payment-metrics{grid-template-columns:repeat(3,1fr)}.payment-form-grid{grid-template-columns:repeat(2,1fr)}.payment-form-grid button{grid-column:1/-1}.payment-billing-settings-form{grid-template-columns:1fr 1fr}.payment-billing-settings-form button{grid-column:1/-1}}
@media(max-width:640px){.payment-hero,.payment-section-heading,.payment-parent-welcome,.payment-period-banner{align-items:stretch;flex-direction:column}.payment-mode{min-width:0}.payment-metrics{grid-template-columns:repeat(2,1fr)}.payment-metrics .money{grid-column:1/-1}.payment-form-grid,.payment-order-form,.payment-billing-settings-form{grid-template-columns:1fr}.payment-order-form button,.payment-billing-settings-form button{grid-column:auto}.payment-parent-header>div{display:none}.payment-parent-orders>a{align-items:flex-start}.payment-status-card dl{grid-template-columns:1fr}.payment-status-card dt{margin-top:.35rem}.payment-status-actions{display:grid}.payment-status-actions>*{width:100%;text-align:center}.payment-login-card{margin:1vh auto}.payment-cart-line{grid-template-columns:auto 1fr}.payment-line-amount{grid-column:2}.payment-cart-checkout{position:static;grid-template-columns:1fr}.payment-cart-checkout>div{order:-1}.payment-portal-links{display:grid}.payment-portal-links>*{text-align:center}}
@media print{.payment-parent-body{background:#fff}.payment-parent-header,.payment-parent-shell>footer,.payment-status-actions,.payment-pay-link{display:none!important}.payment-status-card{box-shadow:none;border:0;margin:0;max-width:none}}
.payment-target-picker{margin-top:.45rem}.payment-target-picker summary{cursor:pointer;font-weight:700}.payment-target-picker>b{display:block;margin-top:.5rem;font-size:.68rem;color:var(--pay-green)}.payment-target-options{display:grid;grid-template-columns:repeat(3,minmax(54px,1fr));gap:.15rem}.payment-target-options label{margin:0!important}.payment-target-classes{grid-template-columns:repeat(2,minmax(115px,1fr));max-height:180px;overflow:auto}
.payment-identity{display:flex!important;align-items:center;gap:.9rem;text-align:left}
.payment-identity>div{display:block}
.payment-profile-photo,.payment-profile-fallback{width:76px;height:88px;flex:0 0 76px;border:3px solid #ffffffb8;border-radius:.8rem;background:#e8f4ee;box-shadow:0 6px 18px #052a1e44}
.payment-profile-photo{display:block;object-fit:cover;object-position:center top}
.payment-profile-fallback{place-items:center;color:#0f4835;font-size:2rem;font-weight:900}
.payment-profile-fallback:not([hidden]){display:grid}
@media(max-width:640px){.payment-identity{align-items:center}.payment-profile-photo,.payment-profile-fallback{width:66px;height:76px;flex-basis:66px}}

/* Payment Hub login: header sejajar dengan kartu */
.payment-parent-body:has(.payment-login-card) .payment-parent-header {
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.payment-parent-body:has(.payment-login-card) .kulni-logo-payment {
    width: 82px;
    height: auto;
    flex: 0 0 82px;
}

.payment-parent-body:has(.payment-login-card) .payment-parent-shell > footer {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Payment Hub: penataan akhir header halaman login */
.payment-parent-header {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.payment-parent-header .kulni-logo-payment {
    width: 82px !important;
    height: auto !important;
    flex: 0 0 82px !important;
    object-fit: contain !important;
}

@media (max-width: 640px) {
    .payment-parent-header {
        max-width: calc(100% - 32px) !important;
    }

    .payment-parent-header .kulni-logo-payment {
        width: 72px !important;
        flex-basis: 72px !important;
    }
}
/* Payment Hub: logo dan identitas di tengah */
.payment-parent-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.payment-parent-header .kulni-logo-payment {
    display: block !important;
    width: 100px !important;
    height: auto !important;
    flex: none !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

.payment-parent-header > div {
    width: 100% !important;
    text-align: center !important;
}

.payment-parent-header h1,
.payment-parent-header h2,
.payment-parent-header strong {
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

.payment-parent-header p,
.payment-parent-header small,
.payment-parent-header span {
    text-align: center !important;
}

@media (max-width: 640px) {
    .payment-parent-header .kulni-logo-payment {
        width: 88px !important;
    }

    .payment-parent-header h1,
    .payment-parent-header h2,
    .payment-parent-header strong {
        font-size: 21px !important;
    }
}
/* Memperjelas tulisan KULNISMART MODULE pada logo */
.payment-parent-header .kulni-logo-payment {
    width: 145px !important;
    max-width: 145px !important;
    height: auto !important;
    flex: none !important;
}

@media (max-width: 640px) {
    .payment-parent-header .kulni-logo-payment {
        width: 125px !important;
        max-width: 125px !important;
    }
}
/* Payment Hub: susunan identitas vertikal dan terpusat */
.payment-parent-header {
    display: block !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto 24px !important;
    text-align: center !important;
}

.payment-parent-header > a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 10px !important;
    text-align: center !important;
}

.payment-parent-header .kulni-logo-payment {
    display: block !important;
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
    margin: 0 auto 6px !important;
    flex: none !important;
    object-fit: contain !important;
}

.payment-parent-header > a > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 4px !important;
    text-align: center !important;
}

.payment-parent-header > a > div > small {
    display: block !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-align: center !important;
}

.payment-parent-header > a > div > strong {
    display: block !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    text-align: center !important;
}

@media (max-width: 640px) {
    .payment-parent-header .kulni-logo-payment {
        width: 130px !important;
        max-width: 130px !important;
    }

    .payment-parent-header > a > div > small {
        font-size: 16px !important;
    }

    .payment-parent-header > a > div > strong {
        font-size: 24px !important;
    }
}