/* ================= RESET ================= */
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:#64748b;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;
}

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

/* ================= SUMMARY ================= */
.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:0.2s;
}

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

/* ================= 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;
}

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

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

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

/* ================= SWEETALERT MOBILE 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;
}

/* LOADING SIZE */
.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;
    }
}