body{

background:var(--ng-inv-bg,#10131a);

font-family:Arial;

color:white;

}

.invoice-container{

max-width:700px;

margin:40px auto;

background:var(--ng-inv-surface,#1b2330);

padding:30px;

border-radius:15px;

}

.header{

text-align:center;

margin-bottom:20px;

}

.game{

display:flex;

gap:15px;

align-items:center;

margin-bottom:20px;

}

table{

width:100%;

border-collapse:collapse;

}

table td{

padding:10px;

border-bottom:1px solid var(--ng-inv-border,#333);

}

.status{

background:var(--ng-warning,#f5b400);

color:black;

padding:5px 10px;

border-radius:5px;

font-weight:bold;

}

#countdown{

margin-top:20px;

font-size:18px;

font-weight:bold;

text-align:center;

color:var(--ng-ok,#00d26a);

}

.btn-bayar{

margin-top:20px;

width:100%;

padding:15px;

border:none;

border-radius:10px;

background:var(--ng-paid,#00c853);

color:white;

font-size:18px;

cursor:pointer;

}

.btn-bayar:disabled{

opacity:.6;

cursor:not-allowed;

}

/* Status badge warna per state */
.status-pending,
.status-proses{ background:var(--ng-warning,#f5b400); color:#000; }

.status-paid,
.status-sukses{ background:var(--ng-paid,#00c853); color:#fff; }

.status-gagal,
.status-failed,
.status-expired{ background:var(--ng-danger,#e53935); color:#fff; }

/* Kotak pesan */
.pay-msg{

margin-top:15px;

padding:0;

text-align:center;

font-size:14px;

}

.pay-msg.ok{

padding:12px;

border-radius:8px;

background:rgba(0,200,83,.15);

color:var(--ng-ok,#00d26a);

}

.pay-msg.err{

padding:12px;

border-radius:8px;

background:rgba(229,57,53,.15);

color:var(--ng-danger-soft,#ff6b6b);

}

/* Form cek transaksi */
.cek-form input{

width:100%;

padding:14px;

border:1px solid var(--ng-inv-border,#333);

border-radius:10px;

background:var(--ng-inv-bg,#10131a);

color:#fff;

font-size:15px;

box-sizing:border-box;

margin-bottom:12px;

}
/* Halaman invoice tidak memuat style.css, jadi border-box global (yang
   diandalkan footer bersama) ikut hilang -> sebagian elemen bocor ~14px di
   mobile. Pulihkan border-box + rapatkan padding di layar kecil. */
*{ box-sizing:border-box; }
@media (max-width:480px){
    .invoice-container{ margin:18px auto; padding:18px; border-radius:12px; }
    body{ overflow-x:hidden; }
}