/* Naisu Store - halaman cek transaksi */
.trx-page { padding-top: 30px; padding-bottom: 20px; }
.trx-section { margin-bottom: 36px; }
.trx-section h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: #fff; }
.trx-desc { display: block; margin-bottom: 14px; font-size: 13px; line-height: 1.4; color: var(--text-soft); }

.trx-card { padding: 20px; background: rgba(25, 26, 27, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
.trx-card-table { padding: 8px 20px; }

/* pencarian */
.trx-search { display: flex; gap: 10px; }
.trx-input { position: relative; flex: 1; }
.trx-input svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: #888; pointer-events: none; }
.trx-input input { width: 100%; height: 46px; padding: 0 14px 0 44px; font-size: 14px; color: #fff; background: #191a1b; border: 1px solid #444; border-radius: 8px; transition: border-color .2s, box-shadow .2s; }
.trx-input input::placeholder { color: #777; }
.trx-input input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(245, 182, 19, 0.3); }
.btn-cari { height: 46px; padding: 0 28px; font-size: 14px; font-weight: 700; color: #191a1b; background: var(--primary); border: 0; border-radius: 8px; cursor: pointer; transition: box-shadow .2s, transform .2s; }
.btn-cari:hover { box-shadow: 0 0 18px rgba(245, 182, 19, 0.5); transform: translateY(-1px); }

.trx-result { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.trx-msg { margin: 0; padding: 12px 0; font-size: 14px; color: var(--text-soft); text-align: center; }
.trx-msg b { color: #fff; }
.trx-detail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; }
.trx-detail dt { margin-bottom: 4px; font-size: 12px; color: var(--text-soft); }
.trx-detail dd { margin: 0; font-size: 14px; font-weight: 600; color: #fff; word-break: break-all; }

/* tabel */
.trx-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.trx-table th { padding: 14px 10px; font-size: 12px; font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: .04em; color: var(--text-soft); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.trx-table td { padding: 14px 10px; color: #ddd; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.trx-table tbody tr:last-child td { border-bottom: 0; }
.trx-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

/* status */
.badge { display: inline-block; padding: 4px 12px; font-size: 12px; font-weight: 700; border-radius: 999px; border: 1px solid transparent; }
.badge-success { color: #22c55e; background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.35); }
.badge-pending { color: #3b82f6; background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.35); }
.badge-refund  { color: #ef4444; background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.35); }

@media (max-width: 756px) {
  .trx-detail { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .trx-search { flex-direction: column; }
  .btn-cari { width: 100%; }
  .trx-card-table { padding: 4px 16px; }
  .trx-table thead { display: none; }
  .trx-table, .trx-table tbody, .trx-table tr, .trx-table td { display: block; }
  .trx-table tr { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .trx-table tbody tr:last-child { border-bottom: 0; }
  .trx-table td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; border: 0; }
  .trx-table td::before { content: attr(data-label); font-size: 12px; color: var(--text-soft); }
}

.trx-new { margin-bottom: 16px; padding: 12px 16px; font-size: 13px; line-height: 1.5; color: #22c55e; background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.35); border-radius: 8px; }
.trx-new b { color: #fff; }
.trx-link { display: inline-flex; align-items: center; margin-top: 16px; height: 40px; padding: 0 20px; font-size: 13px; font-weight: 700; color: #191a1b; text-decoration: none; background: var(--primary); border-radius: 8px; }
.trx-link:hover { box-shadow: 0 0 14px rgba(245, 182, 19, .5); }