/* ==========================================================================
   T-REX ULTRA-CLEAN & PRECISION UI/UX SYSTEM (OPSI A: BEBAS AI SLOP)
   Berlaku di PC, Tablet, dan Smartphone (HP) untuk Customer & Admin
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONDASI TIPOGRAFI & ANGKA PRESISI
   -------------------------------------------------------------------------- */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color-scheme: dark;
}

/* Tabular figures: Angka tidak goyang/loncat saat bertambah atau berhitung mundur */
.mono,
.pm-nominal-harga,
.pm-nominal-koin,
.pm-bawah-total,
.tiket .nominal,
.col-trx,
.col-bayar,
.ps-card-trx,
.ps-card-val,
#hitungMundur,
.countdown-box,
.pill-count,
.tab-badge {
  font-variant-numeric: tabular-nums lining-nums !important;
}

/* Peningkatan kontras teks sekunder di HP (tidak lagi abu-abu pudar) */
.muted,
.pm-redup,
.ps-card-label,
.katalog-desc,
.tiket .kepala small,
.pm-bantu {
  color: #ABA59B !important;
}

/* --------------------------------------------------------------------------
   2. SENTUHAN KACA GELAP & KARTU MEWAH (QUIET LUXURY)
   -------------------------------------------------------------------------- */
.pm-kotak,
.pm-produk,
.card,
.tiket,
.katalog-card,
.ps-card-hp {
  border: 1px solid rgba(255, 255, 255, 0.088) !important;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%), #0D0F15 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 12px 32px -8px rgba(0, 0, 0, 0.75) !important;
  border-radius: 16px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* --------------------------------------------------------------------------
   3. STEP PROGRESSION BADGES PADA FORM PEMESANAN
   -------------------------------------------------------------------------- */
.pm-kotak h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #F1EDE4 !important;
  letter-spacing: -0.01em;
}

.pm-kotak h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 18px;
  background: linear-gradient(to bottom, #FFEFCF, #F0BE63, #B47F22);
  border-radius: 99px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   4. KARTU NOMINAL TOP UP (DIAMOND / KOIN MICO)
   -------------------------------------------------------------------------- */
.pm-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.pm-nominal {
  position: relative !important;
  cursor: pointer !important;
  user-select: none !important;
}

.pm-nominal-isi {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 68px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.pm-nominal:hover .pm-nominal-isi {
  border-color: rgba(240, 190, 99, 0.35) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  transform: translateY(-1.5px) !important;
}

.pm-nominal input:checked + .pm-nominal-isi {
  border-color: #F0BE63 !important;
  background: linear-gradient(135deg, rgba(240, 190, 99, 0.18) 0%, rgba(240, 190, 99, 0.06) 100%), #1B1812 !important;
  box-shadow: 0 0 0 1.5px #F0BE63, 0 6px 20px -4px rgba(240, 190, 99, 0.35), inset 0 1px 0 rgba(255, 239, 207, 0.30) !important;
  transform: translateY(-1px) !important;
}

.pm-nominal-koin {
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #F1EDE4 !important;
  line-height: 1.3 !important;
}

.pm-nominal-harga {
  font-size: 0.82rem !important;
  color: #ABA59B !important;
  margin-top: 4px !important;
}

.pm-nominal input:checked + .pm-nominal-isi .pm-nominal-harga {
  color: #F0BE63 !important;
  font-weight: 600 !important;
}

/* Centang emas saat nominal dipilih */
.pm-nominal input:checked + .pm-nominal-isi::after {
  content: "✓";
  position: absolute;
  top: 7px;
  right: 9px;
  width: 17px;
  height: 17px;
  background: #F0BE63;
  color: #17130A;
  font-size: 0.68rem;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   5. METODE PEMBAYARAN
   -------------------------------------------------------------------------- */
.pm-metode {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.pm-metode-isi {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 13px 15px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  transition: all 0.18s ease !important;
}

.pm-metode-item:hover .pm-metode-isi {
  border-color: rgba(240, 190, 99, 0.35) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.pm-metode-item input:checked + .pm-metode-isi {
  border-color: #F0BE63 !important;
  background: linear-gradient(135deg, rgba(240, 190, 99, 0.16) 0%, rgba(240, 190, 99, 0.05) 100%), #1B1E27 !important;
  box-shadow: 0 0 0 1.5px #F0BE63, 0 4px 16px -2px rgba(240, 190, 99, 0.3) !important;
}

/* --------------------------------------------------------------------------
   6. INPUT TEXT & FORM FIELD ERGONOMIS
   -------------------------------------------------------------------------- */
.pm-gabung input,
.pm-telp input,
.pm-teks,
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="password"] {
  height: 46px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #F1EDE4 !important;
  font-size: 0.95rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

.pm-gabung input:focus,
.pm-telp input:focus,
input:focus {
  outline: none !important;
  border-color: #F0BE63 !important;
  background: rgba(255, 255, 255, 0.07) !important;
  box-shadow: 0 0 0 3px rgba(240, 190, 99, 0.18) !important;
}

/* --------------------------------------------------------------------------
   7. FLOATING CHECKOUT BAR DI HP (ERGONOMIS JEMPOL)
   -------------------------------------------------------------------------- */
.pm-bawah {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 950 !important;
  background: rgba(8, 9, 13, 0.94) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.11) !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.75) !important;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}

.pm-bawah-total {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #F0BE63 !important;
  letter-spacing: -0.01em;
}

.pm-tombol-beli {
  height: 48px !important;
  padding: 0 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #FFEFCF 0%, #F3C878 28%, #B47F22 65%, #F0BE63 100%) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #17130A !important;
  font-weight: 800 !important;
  font-size: 0.98rem !important;
  cursor: pointer !important;
  box-shadow: 0 4px 16px rgba(240, 190, 99, 0.35) !important;
  transition: transform 0.12s ease, filter 0.15s ease !important;
}

.pm-tombol-beli:active:not(:disabled) {
  transform: scale(0.97) !important;
}

.pm-tombol-beli:hover:not(:disabled) {
  filter: brightness(1.06) !important;
}

/* --------------------------------------------------------------------------
   8. SISI PANEL ADMIN: STATUS BADGES & DRAWER TABLET/HP
   -------------------------------------------------------------------------- */
.badge-green {
  background: rgba(16, 185, 129, 0.15) !important;
  color: #10B981 !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
  padding: 2px 9px !important;
}

.badge-amber {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #F59E0B !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
  padding: 2px 9px !important;
}

.badge-red {
  background: rgba(239, 68, 68, 0.15) !important;
  color: #EF4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  font-weight: 700 !important;
  border-radius: 99px !important;
  padding: 2px 9px !important;
}

.badge-grey {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ABA59B !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 99px !important;
  padding: 2px 9px !important;
}

.ref-teks {
  font-family: var(--mono) !important;
  font-size: 0.73rem !important;
  color: #8E8B83 !important;
  margin-top: 3px !important;
}

/* Active sidebar item accent */
.side nav a.aktif,
.side nav a[aria-current="page"] {
  border-left: 3px solid #F0BE63 !important;
  background: rgba(240, 190, 99, 0.08) !important;
  color: #F0BE63 !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   9. RESPONSIVE BREAKPOINTS (PC, TABLET & HP)
   -------------------------------------------------------------------------- */

/* TABLET (721px - 1024px) */
@media (min-width: 721px) and (max-width: 1024px) {
  .pm-tata {
    grid-template-columns: 240px minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  .pm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* HP / SMARTPHONE (<= 720px) */
@media (max-width: 720px) {
  .pm-tata {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .pm-produk {
    position: static !important;
    border-radius: 14px !important;
  }
  .pm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .pm-nominal-isi {
    min-height: 60px !important;
    padding: 10px 11px !important;
  }
  .pm-nominal-koin {
    font-size: 0.86rem !important;
  }
  .pm-nominal-harga {
    font-size: 0.78rem !important;
  }
  .pm-metode {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .pm-bawah-isi {
    padding: 0 !important;
  }
  .ps-card-hp {
    border-radius: 14px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
  }
}

/* KECIL (<= 380px) */
@media (max-width: 380px) {
  .pm-nominal-koin {
    font-size: 0.8rem !important;
  }
  .pm-nominal-harga {
    font-size: 0.74rem !important;
  }
}