/* ================= BASE ================= */
body{
    font-family:'Inter',sans-serif;
    background:#f8fafc;
    font-size:14px;
    color:#1e293b;
}

@media(max-width:576px){
    body{font-size:12px;}
}

/* ================= LAYOUT ================= */
.container-custom{
    max-width:760px;
    margin:auto;
    padding:16px;
}

/* ================= CARD ================= */
.card-modern{
    background:#fff;
    border-radius:16px;
    padding:16px;
    box-shadow:0 6px 20px rgba(0,0,0,0.05);
}

/* ================= HEADER ================= */
.header-modern{
    background:linear-gradient(135deg,#ff7a00,#ff9a3c);
    color:#fff;
    border-radius:16px;
    padding:18px;
    box-shadow:0 10px 25px rgba(255,122,0,0.25);
}

/* ================= TEXT ================= */
.text-orange{color:#ff7a00;}
.label-muted{
    color:hsl(39, 96%, 21%);
    font-size:12px;
}

/* ================= FLEX ================= */
.flex-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* ================= INFO ================= */
.info-item{
    display:flex;
    gap:6px;
    align-items:flex-start;
    margin-top:4px;
}

/* ================= BOX ================= */
.bill-box{
    background:#fff;
    border-radius:14px;
    padding:14px;
    border:1px solid #f1f5f9;
}

.summary-box{
    background:#fff7f2;
    border-radius:12px;
    padding:12px;
}

/* ================= BUTTON ================= */
.btn-orange{
    background:linear-gradient(135deg,#ff7a00,#ff9a3c);
    color:#fff;
    border:none;
    border-radius:14px;
    padding:10px;
    font-weight:600;
    transition:all 0.2s ease;
}

.btn-orange:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(255,122,0,0.3);
}

.btn-orange:disabled{
    background:#ccc;
    box-shadow:none;
    transform:none;
}

.btn-abu{
    background:linear-gradient(135deg,#6b7280,#9ca3af);
    color:#fff;
    border:none;
    border-radius:14px;
    padding:10px;
    font-weight:600;
    transition:all 0.2s ease;
}

.btn-abu:hover{
    transform:translateY(-1px);
    box-shadow:0 6px 18px rgba(107,114,128,0.3);
}

.btn-abu:disabled{
    background:#d1d5db;
    box-shadow:none;
    transform:none;
}

/* ================= PRICE ================= */
.price{
    white-space:nowrap;
    font-weight:600;
}

/* ================= BADGE ================= */
.badge-soft{
    background:#fff3e6;
    color:#ff7a00;
    padding:6px 10px;
    border-radius:10px;
    font-size:11px;
}

/* ================= TITLE ================= */
.section-title{
    font-weight:600;
    margin-bottom:10px;
}

/* ================= HISTORY ================= */
.history-item{
    padding:12px 0;
    border-bottom:1px solid #f1f5f9;
}

/* ================= PAYMENT OPTION ================= */
.payment-option{
    border:1px solid #eee;
    border-radius:12px;
    padding:14px;
    cursor:pointer;
    transition:all 0.2s ease;
}

.payment-option:hover{
    background:#fff7f0;
    border-color:#ff7a00;
    transform:translateY(-2px);
}

.payment-option.active{
    border:2px solid #ff7a00;
    background:#fff3e6;
    box-shadow:0 4px 12px rgba(255,122,0,0.15);
}

.payment-icon{
    font-size:22px;
}

/* ================= ACCORDION (TIDAK DIUBAH STYLE ASLI) ================= */
.accordion-button{
    font-weight:600;
}

.accordion-button:not(.collapsed){
    background-color:#fff3e6;
    color:#ff7a00;
    box-shadow:none;
}

.accordion-item{
    border-radius:12px;
    overflow:hidden;
    border:1px solid #f1f1f1;
}

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

    .header-modern{padding:14px;}
    .card-modern{padding:12px;}
    .bill-box{padding:12px;}

    .btn-orange,
    .btn-abu{
        font-size:12px;
        padding:10px;
    }

    .payment-icon{
        font-size:20px;
    }
}

/* ================= SWEETALERT FIX ================= */
.swal2-popup{
    width:90% !important;
    max-width:320px;
    border-radius:14px !important;
    padding:18px !important;
}

.swal2-title{
    font-size:16px !important;
}

.swal2-html-container{
    font-size:13px !important;
}

.swal2-actions{
    margin-top:12px !important;
}

.swal2-confirm{
    font-size:13px !important;
    padding:8px 14px !important;
    border-radius:10px !important;
}

.swal2-loader{
    width:28px !important;
    height:28px !important;
}

/* EXTRA MOBILE */
@media(max-width:576px){

    .swal2-popup{
        width:88% !important;
        padding:14px !important;
    }

    .swal2-title{
        font-size:14px !important;
    }

    .swal2-html-container{
        font-size:12px !important;
    }

    .swal2-confirm{
        font-size:12px !important;
        padding:7px 12px !important;
    }
}

/* ================= STATUS PAGE ================= */

.status-icon{
    font-size:48px;
}

.va-number{
    font-size:18px;
    font-weight:700;
    letter-spacing:1px;
}

.qr-image{
    max-width:180px;
    width:100%;
}

/* MOBILE */
@media(max-width:576px){

    .status-icon{
        font-size:40px;
    }

    .va-number{
        font-size:16px;
    }

    .qr-image{
        max-width:150px;
    }
}