*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;padding:0;font-family:"Poppins",Arial,sans-serif;color:#17253d;background:#f5f7fa}
a{text-decoration:none}button,input,textarea{font-family:"Poppins",Arial,sans-serif}
.container{width:min(1180px,92%);margin:0 auto}

.site-header{width:100%;height:78px;background:#fff;border-bottom:1px solid #e7ebf0;position:sticky;top:0;z-index:1000}
.header-inner{height:100%;display:flex;align-items:center;gap:35px}
.logo{display:flex;align-items:center;flex-shrink:0}
.logo img{width:145px;height:auto;max-height:58px;object-fit:contain;display:block}
.main-nav{flex:1;display:flex;justify-content:center;align-items:center;gap:25px}
.main-nav a{color:#183052;font-size:13px;font-weight:600;transition:.25s}
.main-nav a:hover{color:#ff6b00}
.cart-button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#f0f5fa;color:#0b3b6f;border-radius:10px;position:relative;font-size:17px}
.cart-button span{position:absolute;right:-7px;top:-7px;width:20px;height:20px;display:flex;justify-content:center;align-items:center;background:#ff6b00;color:#fff;border-radius:50%;font-size:12px;font-weight:700}

.page-hero{background:linear-gradient(115deg,#082e59 0%,#07538f 100%);color:#fff;padding:55px 0}
.breadcrumb{display:flex;align-items:center;gap:10px;margin-bottom:25px;font-size:12px}
.breadcrumb a{color:rgba(255,255,255,.75)}.breadcrumb i{font-size:8px;opacity:.7}.breadcrumb span{color:#fff}
.hero-label{display:block;color:#ffb27c;font-size:12px;font-weight:700;letter-spacing:2px;margin-bottom:8px}
.page-hero h1{margin:0 0 10px;font-size:42px;line-height:1.2;font-weight:800}
.page-hero p{margin:0;color:rgba(255,255,255,.85);font-size:14px}

.checkout-section{padding:45px 0 80px}
.checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.checkout-card{background:#fff;border:1px solid #e2e8ef;border-radius:15px;padding:28px;margin-bottom:22px;box-shadow:0 8px 30px rgba(14,49,84,.05)}
.section-heading{display:flex;gap:15px;align-items:flex-start;margin-bottom:26px}
.step-number{width:40px;height:40px;flex-shrink:0;display:flex;justify-content:center;align-items:center;background:#edf5fb;color:#07538f;border-radius:10px;font-size:12px;font-weight:800}
.section-heading h2{margin:0;font-size:20px;color:#142a45}.section-heading p{margin:5px 0 0;color:#78879a;font-size:12px}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-group{width:100%}.form-group.full{grid-column:1/-1}
.form-group label,.receipt-label{display:block;color:#30435b;font-size:12px;font-weight:600;margin-bottom:8px}
.form-group label span,.receipt-label span{color:#ff6b00}
.form-group input,.form-group textarea,.mobile-money-box input{width:100%;border:1px solid #d7e0e9;border-radius:9px;background:#fff;color:#17253d;outline:0;padding:13px 14px;font-size:13px;transition:.2s}
.form-group textarea{resize:vertical;min-height:105px}
.form-group input:focus,.form-group textarea:focus,.mobile-money-box input:focus{border-color:#07538f;box-shadow:0 0 0 3px rgba(7,83,143,.08)}

.payment-methods{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.payment-method{min-height:86px;border:1px solid #dfe6ed;border-radius:11px;padding:13px;display:flex;align-items:center;gap:10px;cursor:pointer;position:relative;transition:.2s}
.payment-method:hover{border-color:#9eb9d0}.payment-method input{position:absolute;opacity:0;pointer-events:none}
.payment-method.active{border-color:#07538f;background:#f2f8fd;box-shadow:0 0 0 1px #07538f}
.payment-method-icon{width:40px;height:40px;flex-shrink:0;border-radius:9px;background:#edf4fa;color:#07538f;display:flex;justify-content:center;align-items:center}
.payment-method-info{min-width:0}.payment-method-info strong{display:block;color:#182d47;font-size:12px}
.payment-method-info small{display:block;color:#77869a;font-size:12px;line-height:1.5;margin-top:3px}
.selected-icon{position:absolute;right:9px;top:9px;color:#07538f;font-size:13px;display:none}.payment-method.active .selected-icon{display:block}

.payment-panel{display:none;margin-top:20px;border:1px solid #e0e7ee;border-radius:12px;padding:21px;background:#fbfcfd}
.payment-panel.active{display:block}
.payment-panel-header{display:flex;gap:12px;align-items:center;margin-bottom:20px}
.panel-icon{width:43px;height:43px;background:#fff2e8;color:#ff6b00;border-radius:10px;display:flex;justify-content:center;align-items:center;font-size:17px}
.panel-icon.bank{background:#edf5fb;color:#07538f}.payment-panel-header h3{margin:0;color:#162c47;font-size:15px}
.payment-panel-header p{margin:3px 0 0;color:#78879a;font-size:12px}

.mobile-money-box{max-width:520px}.mobile-money-box label{display:block;margin-bottom:8px;color:#30435b;font-size:12px;font-weight:600}
.mobile-money-box label span{color:#ff6b00}.supported-networks{display:flex;gap:18px;margin-top:10px;flex-wrap:wrap}
.supported-networks span{color:#557064;font-size:12px}.supported-networks i{color:#21a366;margin-right:4px}
.payment-action{width:100%;margin-top:17px;border:0;border-radius:9px;padding:14px;background:#ff6b00;color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:.2s}
.payment-action:hover{background:#e85d00;transform:translateY(-1px)}.payment-action:disabled{opacity:.7;cursor:wait;transform:none}
.payment-status{display:none;margin-top:12px;padding:12px;border-radius:8px;background:#fff4e8;color:#875018;font-size:12px;line-height:1.6}.payment-status.show{display:block}

.bank-details{background:#fff;border:1px solid #dfe6ed;border-radius:11px;overflow:hidden;margin-bottom:20px}
.bank-title{padding:16px;display:flex;align-items:center;gap:12px;background:#f3f8fc;border-bottom:1px solid #e2e8ee}
.bank-title>i{width:38px;height:38px;display:flex;justify-content:center;align-items:center;background:#fff;border-radius:9px;color:#07538f}
.bank-title strong{display:block;color:#172d48;font-size:13px}.bank-title span{display:block;color:#77869a;font-size:12px;margin-top:3px}
.bank-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:13px 16px;border-bottom:1px dashed #e1e6eb}
.bank-row:last-child{border-bottom:0}.bank-row span{color:#718096;font-size:12px}.bank-row strong{color:#142a45;font-size:12px;text-align:right}
.reference-row{background:#fff8f2}.reference-row strong{color:#ff6b00}

.receipt-label{margin-bottom:8px}.receipt-upload{width:100%;min-height:135px;border:2px dashed #cbd8e5;border-radius:11px;background:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;cursor:pointer;padding:20px;text-align:center;transition:.2s}
.receipt-upload:hover{border-color:#07538f;background:#f8fbfd}.receipt-upload input{display:none}
.upload-icon{width:44px;height:44px;border-radius:50%;background:#edf5fb;color:#07538f;display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:9px}
.receipt-upload strong{color:#263b54;font-size:12px}.receipt-upload small{color:#8491a1;font-size:12px;margin-top:4px}
.verification-notice{margin-top:15px;padding:13px;border-radius:9px;background:#edf8f2;color:#486b58;display:flex;gap:10px}
.verification-notice>i{color:#22955b;margin-top:2px}.verification-notice strong{display:block;font-size:12px}
.verification-notice p{margin:3px 0 0;font-size:12px;line-height:1.6}

.cash-payment{display:flex;gap:13px;padding:18px;background:#fff8f1;border-radius:10px}
.cash-icon{width:44px;height:44px;flex-shrink:0;display:flex;justify-content:center;align-items:center;background:#fff;color:#ff6b00;border-radius:10px}
.cash-payment h3{margin:0;font-size:14px}.cash-payment p{margin:5px 0 0;color:#748296;font-size:12px;line-height:1.7}

.terms-checkbox{display:flex;align-items:flex-start;gap:9px;color:#64748b;font-size:12px;line-height:1.7;margin:7px 0 17px}
.terms-checkbox input{margin-top:4px;accent-color:#07538f}.terms-checkbox a{color:#07538f;font-weight:600}
.place-order-button{width:100%;border:0;background:#ff6b00;color:#fff;border-radius:9px;padding:15px;font-size:13px;font-weight:700;cursor:pointer;transition:.2s}
.place-order-button:hover{background:#e85d00;transform:translateY(-1px)}

.order-summary{position:sticky;top:100px}.summary-card{background:#fff;border:1px solid #e1e7ed;border-radius:15px;padding:24px;box-shadow:0 8px 30px rgba(14,49,84,.05)}
.summary-header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:17px;border-bottom:1px solid #edf0f3}
.summary-header span{color:#ff6b00;font-size:12px;font-weight:700;letter-spacing:1.5px}.summary-header h2{margin:4px 0 0;font-size:19px}.summary-header a{color:#07538f;font-size:12px;font-weight:600}
.order-items{max-height:350px;overflow-y:auto}.order-item{display:flex;gap:10px;padding:14px 0;border-bottom:1px solid #edf0f3}
.order-item-image{width:58px;height:58px;border-radius:8px;object-fit:cover;background:#f0f3f6;flex-shrink:0}
.order-item-info{flex:1;min-width:0}.order-item-info strong{display:block;color:#1b304a;font-size:12px;line-height:1.5}.order-item-info span{color:#7b8797;font-size:12px}
.order-item-price{color:#172c47;font-size:12px;font-weight:700;white-space:nowrap}
.summary-lines{padding-top:13px}.summary-lines div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;color:#718096;font-size:12px}.summary-lines strong{color:#31445b;font-size:12px}
.total-line{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #e3e8ed;margin-top:7px;padding-top:17px}
.total-line span{color:#172d47;font-size:13px;font-weight:600}.total-line strong{color:#ff6b00;font-size:17px}
.secure-box{margin-top:20px;padding:13px;background:#f1f7fc;border-radius:9px;display:flex;gap:10px}.secure-icon{color:#07538f;font-size:17px}
.secure-box strong{color:#263b53;display:block;font-size:12px}.secure-box p{color:#77869a;font-size:12px;line-height:1.5;margin:3px 0 0}
.help-box{margin-top:20px;padding-top:17px;border-top:1px solid #e7ebef}.help-box span{display:block;color:#8792a0;font-size:12px;letter-spacing:1px;margin-bottom:6px}
.help-box strong{display:block;color:#18324f;font-size:12px;line-height:1.7}.help-box a{display:block;color:#07538f;font-size:12px;margin-top:5px}
.empty-cart{padding:30px 0;text-align:center;color:#718096;font-size:12px}.empty-cart a{color:#07538f;font-weight:600}

/* =========================================================
   COMPACT SUCCESS MODAL
========================================================= */

.modal{
    position:fixed;
    inset:0;
    background:rgba(5,22,40,.70);
    z-index:9999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:12px;
    overflow-y:auto
}

.modal.show{
    display:flex
}

.modal-box{
    position:relative;
    width:min(440px,100%);
    max-height:92vh;
    overflow-y:auto;
    background:#fff;
    border-radius:14px;
    padding:22px 24px 20px;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,.22)
}

.modal-close{
    position:absolute;
    right:10px;
    top:10px;
    border:0;
    background:#f1f3f5;
    color:#69788a;
    width:30px;
    height:30px;
    border-radius:50%;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px
}

.success-icon{
    width:52px;
    height:52px;
    margin:0 auto 10px;
    background:#e9f8f0;
    color:#1d9a5b;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:21px
}

.modal-box h2{
    margin:0 0 7px;
    color:#172d48;
    font-size:21px;
    line-height:1.25
}

.modal-box > p{
    color:#718096;
    font-size:12px;
    line-height:1.45;
    margin:0 auto 12px;
    max-width:390px
}

.order-reference{
    background:#f4f8fb;
    border-radius:8px;
    padding:9px 12px;
    margin:10px 0
}

.order-reference span{
    display:block;
    color:#8794a3;
    font-size:12px;
    line-height:1.2;
    letter-spacing:.7px;
    margin-bottom:3px
}

.order-reference strong{
    display:block;
    color:#07538f;
    font-size:17px;
    line-height:1.2
}

.mtn-merchant-info{
    border:1px solid #f0d8bd;
    background:#fffaf4;
    border-radius:10px;
    padding:11px 13px;
    text-align:left
}

.merchant-heading{
    display:flex;
    align-items:center;
    gap:8px;
    color:#1c3049;
    margin-bottom:7px;
    font-size:14px
}

.merchant-heading i{
    color:#ff6b00;
    font-size:14px
}

.mtn-merchant-row{
    min-height:34px;
    display:flex;
    align-items:center;
    gap:8px;
    border-bottom:1px solid #eadfd3;
    padding:5px 0;
    color:#718096;
    font-size:12px
}

.mtn-merchant-row:last-of-type{
    border-bottom:0
}

.mtn-merchant-row span{
    flex:1
}

.mtn-merchant-row strong{
    color:#1d3048;
    font-size:12px;
    text-align:right
}

.mtn-copy-btn{
    border:0;
    background:#172c47;
    color:#fff;
    border-radius:6px;
    padding:6px 10px;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    flex-shrink:0
}

.mtn-copy-btn:hover{
    background:#07538f
}

.mtn-merchant-note{
    color:#718096;
    font-size:12px;
    line-height:1.45;
    text-align:center;
    margin:8px 0 0
}

.mtn-merchant-note b{
    color:#172c47
}

.continue-shopping{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 20px;
    margin-top:12px;
    background:#ff6b00;
    color:#fff;
    text-decoration:none;
    border-radius:7px;
    font-size:12px;
    font-weight:700
}

.continue-shopping:hover{
    background:#e85f00
}

@media(max-width:600px){
    .modal{
        padding:8px
    }

    .modal-box{
        width:100%;
        max-height:94vh;
        padding:19px 16px 17px;
        border-radius:12px
    }

    .success-icon{
        width:48px;
        height:48px;
        margin-bottom:8px;
        font-size:19px
    }

    .modal-box h2{
        font-size:19px
    }

    .modal-box > p{
        font-size:12px;
        line-height:1.4;
        margin-bottom:10px
    }

    .order-reference{
        padding:8px 10px;
        margin:8px 0
    }

    .order-reference strong{
        font-size:16px
    }

    .mtn-merchant-info{
        padding:9px 10px
    }

    .mtn-merchant-row{
        min-height:32px
    }

    .continue-shopping{
        width:100%;
        margin-top:10px
    }
}

@media(max-width:900px){.main-nav{display:none}.checkout-grid{grid-template-columns:1fr}.order-summary{position:static}.payment-methods{grid-template-columns:1fr}}
@media(max-width:600px){.site-header{height:70px}.header-inner{gap:15px}.logo img{width:125px;max-height:50px}.page-hero{padding:40px 0}.page-hero h1{font-size:32px}.checkout-section{padding:30px 0 55px}.checkout-card{padding:20px}.form-grid{grid-template-columns:1fr}.form-group.full{grid-column:auto}.bank-row{align-items:flex-start;flex-direction:column;gap:4px}.bank-row strong{text-align:left}.summary-card{padding:20px}}

/* =========================================================
   FINAL PAYMENT TAB FIX
========================================================= */
.payment-methods{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}
.payment-method{
    user-select:none;
    -webkit-tap-highlight-color:transparent;
}
.payment-panel{
    display:none !important;
}
.payment-panel.active{
    display:block !important;
}
.momo-payment-box{
    margin-top:18px;
    padding:18px;
    border:1px solid #e4eaf1;
    border-radius:10px;
    background:#fff;
}
.momo-merchant-title{
    display:flex;
    align-items:center;
    gap:11px;
    margin-bottom:13px;
}
.momo-merchant-title>i{color:#ff6b00;font-size:16px}
.momo-merchant-title strong{display:block;font-size:14px;color:#10213c}
.momo-merchant-title span{display:block;margin-top:3px;font-size:12px;color:#667085}
.momo-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:11px 0;
    border-bottom:1px solid #edf0f4;
    font-size:12px;
}
.momo-row>span{color:#667085}
.momo-row>strong{color:#10213c}
.momo-code-wrap{display:flex;align-items:center;gap:8px}
.momo-instructions{margin-top:15px;padding:14px;border-radius:9px;background:#f7f9fc}
.momo-instructions>strong{display:block;margin-bottom:7px;font-size:13px;color:#10213c}
.momo-instructions ol{margin:0;padding-left:20px}
.momo-instructions li{margin:5px 0;font-size:12px;line-height:1.5;color:#667085}
.momo-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.momo-links a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 11px;
    border:1px solid #dfe4eb;
    border-radius:7px;
    background:#fff;
    color:#10213c;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
}
.momo-links a:hover{border-color:#ff6b00;color:#ff6b00}

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

/* Final screenshot-matching desktop layout */
.checkout-section .container.checkout-grid{
    width:100% !important;
    max-width:1190px !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 360px !important;
    gap:28px !important;
    align-items:start !important;
}
.checkout-section .checkout-left{
    grid-column:1 !important;
    grid-row:1 !important;
    min-width:0 !important;
}
.checkout-section .order-summary{
    grid-column:2 !important;
    grid-row:1 !important;
    width:360px !important;
    max-width:360px !important;
    min-width:0 !important;
    margin:0 !important;
    position:sticky !important;
    top:20px !important;
}
.checkout-section .payment-methods{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
@media(max-width:800px){
    .checkout-section .container.checkout-grid{
        grid-template-columns:1fr !important;
    }
    .checkout-section .checkout-left,
    .checkout-section .order-summary{
        grid-column:1 !important;
        grid-row:auto !important;
        width:auto !important;
        max-width:none !important;
        position:static !important;
    }
    .checkout-section .payment-methods{
        grid-template-columns:1fr !important;
    }
}