*{box-sizing:border-box}.payment-page{margin:0;background:#f6f4fb;color:#241d36;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.payment-header{background:#fff;border-bottom:1px solid #e8e2f2}.payment-header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}.payment-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#241d36}.payment-brand-icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4b2b83,#8064bd);color:#fff;font-size:1.05rem}.payment-brand strong{display:block;font-size:.95rem;font-weight:800}.payment-brand small{display:block;color:#8c84a0;font-size:.68rem;margin-top:2px}.payment-back-btn{display:inline-flex;align-items:center;gap:7px;text-decoration:none;border:1px solid #ddd5ec;color:#51486a;border-radius:10px;padding:9px 13px;font-size:.75rem;font-weight:700;background:#fff}.payment-hero{padding:58px 0 64px;background:linear-gradient(135deg,#35215d 0%,#5b3ca4 55%,#8d73c5 100%);color:#fff}.payment-kicker{font-size:.66rem;font-weight:800;letter-spacing:.14em;opacity:.78}.payment-hero h1{margin:7px 0 10px;font-size:clamp(2rem,4vw,3.1rem);font-weight:850;letter-spacing:-.04em}.payment-hero p{max-width:760px;margin:0;color:rgba(255,255,255,.78);line-height:1.7;font-size:.88rem}.payment-section{padding:34px 0 70px}.payment-selected-card,.payment-card,.payment-note{border:1px solid #e5def1;border-radius:18px;background:#fff;box-shadow:0 10px 30px rgba(38,25,68,.06)}.payment-selected-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;margin-bottom:20px}.payment-label{display:block;color:#8d849e;text-transform:uppercase;letter-spacing:.08em;font-size:.61rem;font-weight:800}.payment-selected-card h2{margin:5px 0 0;font-size:1.15rem;font-weight:800}.payment-price{white-space:nowrap;font-size:1.55rem;font-weight:850;color:#5b3ca4}.payment-card{padding:22px}.payment-card-heading{display:flex;align-items:center;gap:9px;margin-bottom:18px;font-size:.9rem;font-weight:800;color:#352a4d}.payment-card-heading i{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:#efeafb;color:#5b3ca4}.qr-card{text-align:center}.payment-qr-wrap{display:flex;justify-content:center;padding:7px 0 14px}.payment-qr{width:min(260px,100%);aspect-ratio:1;object-fit:contain;border:10px solid #fff;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,.08)}.payment-muted{margin:0;color:#817890;font-size:.72rem;line-height:1.6}.payment-number-box{padding:15px 16px;border-radius:12px;background:#f6f2fc;border:1px solid #e5dcf2;margin-bottom:18px}.payment-number-box span{display:block;color:#8b819d;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.payment-number-box strong{display:block;margin-top:4px;font-size:1.05rem;color:#3d3152;letter-spacing:.02em}.payment-steps{display:grid;gap:11px}.payment-steps>div{display:flex;align-items:flex-start;gap:10px}.payment-steps span{width:25px;height:25px;flex:0 0 25px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#5b3ca4;color:#fff;font-size:.68rem;font-weight:800}.payment-steps p{margin:2px 0 0;color:#6e657e;font-size:.74rem;line-height:1.55}.conditions-card ul{margin:0;padding-left:20px;color:#6e657e;font-size:.74rem;line-height:1.75}.payment-note{display:flex;align-items:flex-start;gap:10px;padding:15px 17px;color:#61576e;font-size:.73rem;line-height:1.6;background:#fbf9fe}.payment-note i{color:#5b3ca4;font-size:1rem;margin-top:2px}@media(max-width:767.98px){.payment-header-inner{min-height:68px}.payment-hero{padding:45px 0 50px}.payment-selected-card{align-items:flex-start;flex-direction:column}.payment-price{font-size:1.35rem}}

/* =========================================================
   Payment page inside the LMS shell
   ========================================================= */

.payment-page-wrap{
    width:100%;
}

.payment-hero-card{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:190px;
    margin-bottom:20px;
    padding:32px 34px;
    border-radius:20px;
    background:linear-gradient(135deg,#31215f 0%,#5b3ca4 52%,#8b63c7 100%);
    box-shadow:0 18px 40px rgba(50,31,92,.14);
}

.payment-hero-card::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    right:-70px;
    top:-110px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
}

.payment-hero-content{
    position:relative;
    z-index:1;
    max-width:760px;
    color:#fff;
}

.payment-hero-content h1{
    margin:8px 0 9px;
    font-size:clamp(1.7rem,3vw,2.5rem);
    line-height:1.1;
    font-weight:850;
    letter-spacing:-.045em;
}

.payment-hero-content p{
    max-width:700px;
    margin:0;
    color:rgba(255,255,255,.82);
    font-size:.84rem;
    line-height:1.7;
}

.payment-hero-icon{
    position:relative;
    z-index:1;
    width:74px;
    height:74px;
    flex:0 0 74px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.18);
    border-radius:20px;
    background:rgba(255,255,255,.11);
    color:#fff;
    font-size:1.8rem;
}

.payment-course-card{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:20px;
    padding:14px;
    border:1px solid var(--ep-border);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--ep-shadow);
}

.payment-course-media{
    width:118px;
    height:82px;
    flex:0 0 118px;
    overflow:hidden;
    border-radius:11px;
    background:#f2eef9;
}

.payment-course-media img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.payment-course-placeholder{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#7654ad;
    font-size:1.5rem;
    background:linear-gradient(135deg,#f0ebf8,#e7ddf6);
}

.payment-course-info{
    min-width:0;
    flex:1;
}

.payment-course-info h2{
    margin:5px 0 8px;
    color:var(--ep-text);
    font-size:1.05rem;
    font-weight:800;
}

.payment-course-meta{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    color:#7c8494;
    font-size:.7rem;
}

.payment-course-meta span{
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.payment-course-meta i{
    color:#7654ad;
}

.payment-course-price{
    flex:0 0 auto;
    min-width:145px;
    padding:12px 16px;
    border:1px solid #e7def4;
    border-radius:12px;
    background:#faf8fd;
    text-align:right;
}

.payment-course-price span{
    display:block;
    color:#8d839d;
    font-size:.61rem;
    font-weight:750;
    text-transform:uppercase;
    letter-spacing:.07em;
}

.payment-course-price strong{
    display:block;
    margin-top:3px;
    color:#59379b;
    font-size:1.25rem;
    font-weight:850;
}

.payment-info-banner{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:20px;
    padding:15px 17px;
    border:1px solid #ded6ee;
    border-radius:13px;
    background:#faf8fd;
    color:#645b74;
    font-size:.74rem;
    line-height:1.55;
}

.payment-info-banner > i{
    color:#6d45aa;
    font-size:1rem;
    margin-top:2px;
}

.payment-info-banner strong,
.payment-info-banner span{
    display:block;
}

.payment-info-banner strong{
    color:#342949;
    margin-bottom:2px;
}

.payment-panel{
    border:1px solid var(--ep-border);
    border-radius:18px;
    background:#fff;
    padding:22px;
    box-shadow:var(--ep-shadow);
}

.payment-panel-heading{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:19px;
}

.payment-panel-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:#f0eafb;
    color:#6742a6;
}

.payment-panel-heading strong,
.payment-panel-heading small{
    display:block;
}

.payment-panel-heading strong{
    color:#2f2740;
    font-size:.86rem;
    font-weight:800;
}

.payment-panel-heading small{
    margin-top:2px;
    color:#8b8398;
    font-size:.64rem;
}

.payment-qr-box{
    display:flex;
    justify-content:center;
    padding:6px 0 16px;
}

.payment-qr{
    width:min(270px,100%);
    aspect-ratio:1;
    object-fit:contain;
    border:10px solid #fff;
    border-radius:14px;
    box-shadow:0 10px 26px rgba(35,23,64,.10);
}

.payment-help-text{
    margin:0;
    color:#7c7388;
    font-size:.71rem;
    line-height:1.65;
    text-align:center;
}

.payment-phone-box{
    margin-bottom:20px;
    padding:17px;
    border:1px solid #e4daf2;
    border-radius:13px;
    background:#faf8fd;
}

.payment-phone-box span{
    display:block;
    color:#8a8198;
    font-size:.61rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.payment-phone-box strong{
    display:block;
    margin-top:5px;
    color:#382c4d;
    font-size:1.1rem;
    letter-spacing:.02em;
}

.payment-steps{
    display:grid;
    gap:13px;
}

.payment-step{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.payment-step > span{
    width:26px;
    height:26px;
    flex:0 0 26px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#6742a6;
    color:#fff;
    font-size:.65rem;
    font-weight:800;
}

.payment-step strong{
    display:block;
    color:#40364f;
    font-size:.73rem;
    font-weight:800;
}

.payment-step p{
    margin:2px 0 0;
    color:#776e82;
    font-size:.68rem;
    line-height:1.55;
}

.payment-conditions{
    margin-top:0;
}

.payment-condition-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px 20px;
}

.payment-condition-grid > div{
    display:flex;
    align-items:flex-start;
    gap:9px;
    color:#71697d;
    font-size:.7rem;
    line-height:1.6;
}

.payment-condition-grid i{
    flex:0 0 auto;
    margin-top:2px;
    color:#6d48a5;
}

.payment-important-note{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:18px;
    padding:14px 16px;
    border:1px solid #ead9b0;
    border-radius:13px;
    background:#fffaf0;
    color:#766749;
    font-size:.7rem;
    line-height:1.6;
}

.payment-important-note i{
    margin-top:2px;
    color:#b27a16;
}

.payment-important-note strong{
    color:#5f4b25;
}

@media (max-width:767.98px){
    .payment-hero-card{
        align-items:flex-start;
        min-height:auto;
        padding:24px 20px;
    }

    .payment-hero-icon{
        width:52px;
        height:52px;
        flex-basis:52px;
        border-radius:15px;
        font-size:1.3rem;
    }

    .payment-hero-content h1{
        font-size:1.55rem;
    }

    .payment-course-card{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .payment-course-price{
        width:100%;
        text-align:left;
    }

    .payment-course-media{
        width:96px;
        height:70px;
        flex-basis:96px;
    }

    .payment-condition-grid{
        grid-template-columns:1fr;
    }
}

/* WhatsApp help */
.payment-help-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:18px;
    padding:17px 19px;
    border:1px solid #e5def1;
    border-radius:16px;
    background:linear-gradient(135deg,#ffffff 0%,#faf7ff 100%);
    box-shadow:0 8px 24px rgba(38,25,68,.05);
}

.payment-help-content{
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
}

.payment-help-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    background:#eaf8ef;
    color:#22c55e;
    font-size:1.1rem;
}

.payment-help-content strong,
.payment-help-content span{
    display:block;
}

.payment-help-content strong{
    color:#302740;
    font-size:.84rem;
    font-weight:800;
    line-height:1.4;
}

.payment-help-content span:not(.payment-help-icon){
    margin-top:3px;
    color:#7a7188;
    font-size:.68rem;
    line-height:1.55;
}

.payment-help-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    flex:0 0 auto;
    padding:10px 15px;
    border-radius:10px;
    background:#22c55e;
    color:#fff;
    text-decoration:none;
    font-size:.72rem;
    font-weight:800;
    white-space:nowrap;
    box-shadow:0 7px 16px rgba(34,197,94,.18);
    transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}

.payment-help-btn:hover,
.payment-help-btn:focus{
    color:#fff;
    background:#16a34a;
    transform:translateY(-1px);
    box-shadow:0 9px 20px rgba(34,197,94,.24);
}

@media(max-width:767.98px){
    .payment-help-card{
        align-items:stretch;
        flex-direction:column;
        gap:13px;
    }

    .payment-help-btn{
        width:100%;
    }
}
/* Need Help - WhatsApp icon alignment */
.payment-help-icon,
.payment-whatsapp-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0 !important;
    line-height: 1 !important;
}

.payment-help-icon i,
.payment-whatsapp-icon i {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 1.25rem;
}