/* Design 02 - Soft Green. Dipakai halaman kategori (order/kategori.php)
   dan halaman order/daftar produk (order/index.php).
   Memakai kembali design system homepage (assets/home.css) dan
   menambahkan komponen daftar provider serta tabel nominal produk. */

.crumb{font-size:12px;color:var(--muted);margin:14px 0 10px}
.crumb a{color:var(--p);font-weight:600}
.crumb span{margin:0 4px;color:#9aa8a1}

.kathero{padding:14px;background:linear-gradient(180deg,#f2fbf5 0%,var(--soft) 100%);
  border:1px solid var(--line);border-radius:10px}
.kathero .eyebrow{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--p);font-weight:700}
.kathero h1{margin:4px 0 4px;font-size:20px;color:var(--dark)}
.kathero p{margin:0;color:var(--muted);font-size:13px}

.warnbox{margin-top:10px;padding:10px 12px;background:#fffaed;border:1px solid #f0e2bd;
  border-radius:8px;font-size:13px;color:#6b5a28}
.warnbox b{color:#a5761b}

.prolist{margin-top:8px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.prolist .rowhead{display:grid;grid-template-columns:1fr 110px 110px;gap:10px;padding:9px 12px;
  background:var(--soft);color:var(--dark);font-weight:800;font-size:12px;
  text-transform:uppercase;letter-spacing:.04em}
.prolist .rowhead span:nth-child(2),.prolist .rowhead span:nth-child(3){text-align:center}
.prow{display:grid;grid-template-columns:1fr 110px 110px;gap:10px;align-items:center;
  padding:10px 12px;border-top:1px solid var(--line)}
.prow:nth-child(even){background:#fcfdfc}
.prow .pv{display:flex;align-items:center;gap:8px;min-width:0}
.pv .pvicon{flex:0 0 26px;width:26px;height:26px;border-radius:7px;background:var(--soft);
  color:var(--dark);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.pv .pvlogo{padding:0;background:#fff;border:1px solid var(--line);object-fit:contain;display:block}
.pv .pvname{font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .pcount{text-align:center;font-size:12px;color:var(--muted);white-space:nowrap}
.prow .btn{height:34px;padding:0 14px;font-size:13px;border-radius:7px}
.prow .pact{display:flex;justify-content:center}

.katwhy{margin-top:12px;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.katwhy .boxhead{padding:9px 11px;background:var(--soft);color:var(--dark);font-weight:800;font-size:13px}
.katwhy ul{margin:0;padding:10px 12px;list-style:none;display:grid;
  grid-template-columns:repeat(4,1fr);gap:8px}
.katwhy li{padding:9px 8px;border:1px solid var(--line);border-radius:7px;font-size:12px;
  text-align:center;color:var(--text)}

.kathist{margin-top:14px;padding-top:4px;border-top:1px solid var(--line)}
/* Riwayat Order tetap memakai markup asli inc/nav_order.php; hanya diberi
   wadah agar tidak menempel pada daftar di atasnya. */
.kathist h4{margin:12px 0 6px;padding:9px 11px;background:var(--soft);color:var(--dark);
  border-radius:8px;font-size:14px}
.kathist ul{margin:0;padding:0}
.kathist li.orderHistory{padding:8px 4px;list-style:none;border-bottom:1px solid var(--line);font-size:13px}
.kathist li.cat-item{list-style:none;padding:8px 4px;font-size:13px;color:var(--muted)}

/* ---- Daftar nominal produk (order/index.php?opr=...) ---- */
.nomlist{margin-top:8px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.nomlist .rowhead{display:grid;grid-template-columns:34px 1fr 110px;gap:10px;padding:9px 12px;
  background:var(--soft);color:var(--dark);font-weight:800;font-size:12px;
  text-transform:uppercase;letter-spacing:.04em}
.nomlist .rowhead span:last-child{text-align:right}
.nrow{display:grid;grid-template-columns:34px 1fr 110px;gap:10px;align-items:center;
  padding:10px 12px;border-top:1px solid var(--line);cursor:pointer}
.nrow:nth-child(even){background:#fcfdfc}
.nrow:hover{background:var(--soft)}
.nrow input[type=radio]{width:17px;height:17px;accent-color:var(--p);margin:0;cursor:pointer}
.nrow .nname{font-weight:700;color:var(--text);min-width:0}
.nrow .ninfo{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px}
.nrow .nprice{text-align:right;font-weight:800;color:var(--dark);white-space:nowrap}
.nhint{margin-top:9px;padding:9px 12px;background:var(--soft);border:1px solid var(--line);
  border-radius:8px;font-size:12px;color:var(--dark)}
.nbuy{margin-top:10px;display:flex}
.nbuy .btn{width:100%;height:44px;font-size:15px;border-radius:9px}
.helplinks{margin-top:10px;font-size:13px}
.helplinks a{display:inline-block;margin-right:14px}
.emptybox{margin-top:10px;padding:16px;border:1px solid var(--line);border-radius:9px;
  text-align:center;color:var(--muted);font-size:13px}

/* ---- Review order / pembayaran (order/payment.php) ---- */
.revlist{margin-top:8px;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.revrow{display:grid;grid-template-columns:130px 1fr;gap:10px;padding:9px 12px;
  border-top:1px solid var(--line);font-size:13px}
.revrow:first-child{border-top:0}
.revrow:nth-child(even){background:#fcfdfc}
.revrow .rk{color:var(--muted)}
.revrow .rv{font-weight:700;color:var(--text);word-break:break-word}
.revrow.total .rv{color:var(--dark);font-size:16px}

.infobox{margin-top:10px;padding:10px 12px;background:var(--soft);border:1px solid var(--line);
  border-radius:8px;font-size:13px;color:var(--dark)}
.infobox p{margin:0 0 5px}
.infobox p:last-child{margin:0}

.payform{margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:9px;background:#fff}
.payform label{display:block;font-size:12px;font-weight:700;color:var(--dark);margin-bottom:5px}
.payform input[type=text]{width:100%;height:42px;border:1px solid var(--line);border-radius:8px;
  padding:0 12px;font-size:15px;font-family:inherit;color:var(--text);background:#fff}
.payform input[type=text]:focus{outline:0;border-color:var(--p)}
.payform .btn{width:100%;height:44px;margin-top:10px;font-size:15px;border-radius:9px;border:0}
.paynote{margin-top:9px;font-size:12px;color:var(--muted);line-height:1.55}
.paynote b{color:var(--text)}

.alertbox{margin-top:10px;padding:12px;border:1px solid #f0cfcf;background:#fff6f6;
  border-radius:9px;font-size:13px;color:#8a3b3b;text-align:center}
.alertbox b{color:#a12b2b}

/* ---- Konfirmasi pembayaran (order/transfer_konfirmasi.php) ---- */
.statbox{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:9px;
  background:var(--soft);font-size:13px;color:var(--dark);line-height:1.6}
.statbox.warn{background:#fffaed;border-color:#f0e2bd;color:#6b5a28}
.statbox.bad{background:#fff6f6;border-color:#f0cfcf;color:#8a3b3b}
.statbox.good{background:#eef9f1;border-color:#cde8d6;color:#1d6b3c}
.statbox b{color:inherit}

.paylink{margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:13px}
.paylink .btn{display:inline-flex;margin:8px 0;height:42px;border-radius:9px;font-size:14px}
.paylink .small{color:var(--muted);font-size:12px;line-height:1.55}

.badge-status{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800}
.badge-status.s-unpaid{background:#fff3d6;color:#8a6100}
.badge-status.s-success{background:#dff2e6;color:#0d6f35}
.badge-status.s-illegal,.badge-status.s-diblokir{background:#ffe0e0;color:#a12b2b}
.badge-status.s-other{background:var(--soft);color:var(--dark)}

.payimg{margin-top:12px;text-align:center}
.payimg img{max-width:100%;border:1px solid var(--line);border-radius:9px}
.payimg figcaption{margin-top:6px;font-size:12px;color:var(--muted)}

@media(max-width:640px){
  .prolist .rowhead{display:none}
  .prow{grid-template-columns:1fr auto;gap:8px}
  .prow .pcount{grid-column:1;text-align:left;padding-left:34px}
  .prow .pact{grid-column:2;grid-row:1 / span 2;align-self:center}
  .prow .btn{padding:0 16px}
  .katwhy ul{grid-template-columns:repeat(2,1fr)}
  .kathero h1{font-size:18px}
  .nomlist .rowhead{display:none}
  .nrow{grid-template-columns:30px 1fr auto;gap:8px}
  .nrow .nprice{text-align:right}
  .revrow{grid-template-columns:105px 1fr;gap:8px}
}