/* ==========================================
   PAYMENT PAGE
========================================== */

.payment-page{

    background:#f5f7fb;

    min-height:100vh;

    padding:60px 20px;

}

.payment-container{

    max-width:1100px;

    margin:auto;

}

/* ==========================================
   PAGE HEADER
========================================== */

.payment-page-header{

    text-align:center;

    margin-bottom:40px;

}

.payment-page-header h1{

    font-size:42px;

    font-weight:700;

    color:#222;

    margin-bottom:10px;

}

.payment-page-header p{

    font-size:18px;

    color:#666;

}

/* ==========================================
   CARD
========================================== */

.payment-card{

    background:#fff;

    border-radius:18px;

    padding:30px;

    margin-bottom:30px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.payment-card-header{

    margin-bottom:25px;

}

.payment-card-header h2{

    margin:0;

    color:#ff6b35;

}

.payment-card-header p{

    margin-top:8px;

    color:#777;

}

/* ==========================================
   SUMMARY GRID
========================================== */

.summary-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}

.summary-item{

    background:#fafafa;

    border:1px solid #ececec;

    border-radius:12px;

    padding:18px;

}

.summary-label{

    display:block;

    font-size:13px;

    color:#888;

    margin-bottom:8px;

}

.summary-value{

    font-size:18px;

    font-weight:600;

    color:#222;

}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:768px){

.summary-grid{

grid-template-columns:1fr;

}

.payment-page-header h1{

font-size:30px;

}

}

/*==========================================================
    PAYMENT WIZARD
==========================================================*/

.payment-wizard{

    background:#fff;

    border-radius:20px;

    padding:40px;

    margin-bottom:35px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

}

/*==========================================================
    HEADER
==========================================================*/

.wizard-header{

    text-align:center;

    margin-bottom:40px;

}

.wizard-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:#fff3ee;

    color:#ff6b35;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

.wizard-header h2{

    margin:18px 0 10px;

    font-size:36px;

    color:#222;

    font-weight:700;

}

.wizard-header p{

    margin:0;

    color:#666;

    font-size:16px;

}

/*==========================================================
    PROGRESS
==========================================================*/

.wizard-progress{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

}

.wizard-step{

    display:flex;

    flex-direction:column;

    align-items:center;

    position:relative;

    flex:1;

}

/*==========================================================
    CIRCLE
==========================================================*/

.wizard-circle{

    width:56px;

    height:56px;

    border-radius:50%;

    border:3px solid #d9d9d9;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.3s;

}

.wizard-circle span{

    font-size:18px;

    font-weight:700;

    color:#888;

}

/*==========================================================
    LABEL
==========================================================*/

.wizard-label{

    margin-top:12px;

    font-size:14px;

    font-weight:600;

    color:#777;

    text-align:center;

}

/*==========================================================
    CONNECTOR
==========================================================*/

.wizard-line{

    height:4px;

    flex:1;

    background:#e5e5e5;

    margin:26px -5px 0;

    border-radius:20px;

}

/*==========================================================
    ACTIVE STEP
==========================================================*/

.wizard-step.active .wizard-circle{

    background:#ff6b35;

    border-color:#ff6b35;

    box-shadow:0 8px 20px rgba(255,107,53,.35);

}

.wizard-step.active .wizard-circle span{

    color:#fff;

}

.wizard-step.active .wizard-label{

    color:#ff6b35;

}

/*==========================================================
    COMPLETED STEP
==========================================================*/

.wizard-step.completed .wizard-circle{

    background:#16a34a;

    border-color:#16a34a;

}

.wizard-step.completed .wizard-circle span{

    font-size:0;

}

.wizard-step.completed .wizard-circle::before{

    content:"✓";

    color:#fff;

    font-size:22px;

    font-weight:bold;

}

.wizard-step.completed + .wizard-line{

    background:#16a34a;

}

.wizard-step.completed .wizard-label{

    color:#16a34a;

}

/*==========================================================
    HOVER
==========================================================*/

.wizard-step:hover .wizard-circle{

    transform:translateY(-3px);

}

/*==========================================================
    MOBILE
==========================================================*/

@media(max-width:768px){

.payment-wizard{

padding:25px 20px;

}

.wizard-header h2{

font-size:28px;

}

.wizard-header p{

font-size:14px;

}

.wizard-circle{

width:44px;

height:44px;

}

.wizard-circle span{

font-size:15px;

}

.wizard-label{

font-size:12px;

margin-top:8px;

}

.wizard-line{

margin-top:20px;

}

}

/*==========================================================
    SMALL MOBILE
==========================================================*/

@media(max-width:480px){

.wizard-progress{

overflow-x:auto;

gap:15px;

padding-bottom:10px;

}

.wizard-step{

min-width:90px;

}

.wizard-line{

min-width:40px;

margin-top:20px;

}

}

/*==================================================
NAVIGATION
==================================================*/

.payment-navigation{

    display:flex;

    justify-content:flex-end;

    margin-top:35px;

}

.payment-next,

.payment-back{

    border:none;

    cursor:pointer;

    padding:14px 30px;

    border-radius:12px;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.payment-next{

    background:#ff6b35;

    color:#fff;

}

.payment-next:hover{

    background:#f25a22;

    transform:translateY(-2px);

}

.payment-back{

    background:#ececec;

    color:#444;

}

.payment-back:hover{

    background:#ddd;

}


/*==================================================
FEE SUMMARY
==================================================*/

.fee-summary{

    background:#fafafa;

    border:1px solid #ececec;

    border-radius:16px;

    padding:25px;

}

.fee-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    font-size:17px;

}

.fee-row span{

    color:#666;

}

.fee-row strong{

    color:#222;

}

.discount{

    color:#16a34a !important;

}

.fee-divider{

    height:1px;

    background:#e5e5e5;

    margin:8px 0;

}

.fee-row.total{

    font-size:22px;

    font-weight:700;

}

.fee-row.total strong{

    color:#ff6b35;

}

.payment-note{

    margin-top:25px;

    padding:18px;

    border-left:5px solid #ff6b35;

    background:#fff7f2;

    border-radius:10px;

}

.payment-note strong{

    color:#ff6b35;

    display:block;

    margin-bottom:8px;

}

.payment-note p{

    margin:0;

    line-height:1.7;

    color:#555;

}

@media(max-width:768px){

.fee-row{

    font-size:15px;

}

.fee-row.total{

    font-size:19px;

}

}
/*==================================================
QR PAYMENT
==================================================*/

.payment-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

}

.payment-box{

    background:#fafafa;

    border:1px solid #ececec;

    border-radius:16px;

    padding:25px;

    text-align:center;

}

.payment-box h3{

    margin-bottom:20px;

}

.payment-qr{

    width:220px;

    max-width:100%;

    margin:auto;

    display:block;

}

.payment-detail{

    display:flex;

    justify-content:space-between;

    padding:14px 0;

    border-bottom:1px solid #ececec;

}

.payment-detail:last-child{

    border:none;

}

.copy-btn{

    margin-top:25px;

    width:100%;

    height:48px;

    border:none;

    border-radius:10px;

    background:#ff6b35;

    color:#fff;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.copy-btn:hover{

    background:#f25a22;

}

@media(max-width:768px){

.payment-grid{

grid-template-columns:1fr;

}

}

/*==================================================
UPLOAD PAYMENT PROOF
==================================================*/

.upload-area{

    margin-top:20px;

}

.upload-box{

    display:block;

    text-align:center;

    padding:45px;

    border:3px dashed #ff6b35;

    border-radius:18px;

    cursor:pointer;

    background:#fff8f4;

    transition:.3s;

}

.upload-box:hover{

    background:#fff2eb;

}

.upload-icon{

    font-size:48px;

    margin-bottom:15px;

}

.upload-box h3{

    margin-bottom:10px;

}

.upload-box p{

    color:#666;

    margin-bottom:20px;

}

.upload-btn{

    display:inline-block;

    padding:12px 30px;

    background:#ff6b35;

    color:#fff;

    border-radius:10px;

    font-weight:600;

}

.upload-preview{

    display:none;

    margin-top:25px;

    text-align:center;

}

.upload-preview img{

    max-width:300px;

    border-radius:12px;

    box-shadow:0 8px 20px rgba(0,0,0,.15);

}

#previewFileName{

    margin-top:15px;

    font-weight:600;

    color:#444;

}

@media(max-width:768px){

.upload-box{

padding:30px 20px;

}

.upload-preview img{

max-width:100%;

}

}