/* =====================================================================
   bayaran-20260930.css — blok bayaran pelanggan (FPX primer · manual fallback)
   Ditambah 30/09/2026 mengikut arahan pemilik:
     · "JUMLAH PERLU DIBAYAR RMxxx" + butang besar [BAYAR RMxxx DENGAN FPX]
       = aliran utama, paling menonjol.
     · Transfer Bank / DuitNow = pautan kecil <details> TERTUTUP secara lalai.
   Dimuatkan SELEPAS pro.css / tema / pembaikan-* supaya tidak menimpa gaya asas.
   ===================================================================== */

/* ---------- blok utama: jumlah + butang FPX ---------- */
.bayar-kad { min-width: 0; overflow-wrap: anywhere; }

.bayar-utama { display: grid; gap: 12px; min-width: 0; }

.bayar-jumlah {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--card-2);
  padding: 14px 16px;
  min-width: 0;
}
.bayar-label {
  margin: 0;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.bayar-amaun {
  margin: 4px 0 0;
  font-size: clamp(1.85rem, 8vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--brand-800);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
:root[data-tema="gelap"] .bayar-amaun { color: var(--accent-500); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) .bayar-amaun { color: var(--accent-500); }
}

/* butang FPX: penuh lebar, paling menonjol pada kad */
.btn-fpx {
  --btn-bg: var(--brand-700);
  --btn-fg: #fff;
  width: 100%;
  margin: 0;
  padding: 16px 18px;
  border-radius: var(--r-md);
  font-size: 1rem;
  letter-spacing: .02em;
  line-height: 1.25;
  white-space: normal;
  text-align: center;
  display: flex;
}
.btn-fpx:hover { --btn-bg: var(--brand-600); }
form[data-fpx] { margin: 0; min-width: 0; }
form[data-fpx] .btn-fpx { margin-top: 2px; }

/* ---------- fallback: Transfer Bank / DuitNow (TERTUTUP secara lalai) ---------- */
details.bank-manual {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  min-width: 0;
}
details.bank-manual > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
details.bank-manual > summary::-webkit-details-marker { display: none; }
details.bank-manual > summary::marker { content: ""; }
details.bank-manual > summary::before {
  content: "\25B8";           /* ▸ */
  flex: 0 0 auto;
  text-decoration: none;
}
details.bank-manual[open] > summary::before { content: "\25BE"; } /* ▾ */
details.bank-manual > summary:hover { color: var(--brand-600); }

.bank-isi { margin-top: 12px; min-width: 0; }
.bank-isi .kv { min-width: 0; }
.bank-isi .kv dd { overflow-wrap: anywhere; }
.bank-akaun-baris {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  max-width: 100%;
}
.bank-akaun-baris .mono { overflow-wrap: anywhere; }

/* butang SALIN — kecil, tidak menonjol berbanding butang FPX */
.btn-salin {
  --btn-bg: var(--card);
  /* F3-PAPARAN 1f: --brand-800 (#0F3D3E) di atas --card tema gelap = 1.38:1 (gagal AA).
     --ink menyesuaikan diri ikut tema (gelap #EAF2F0 ~14.7:1, terang #14201F ~16.7:1). */
  --btn-fg: var(--ink);
  padding: 5px 11px;
  font-size: .72rem;
  letter-spacing: .06em;
  border: 1px solid var(--line-2);
  box-shadow: none;
  white-space: nowrap;
}
.btn-salin:hover { --btn-bg: var(--brand-100); }
.btn-salin.selesai { --btn-bg: var(--brand-100); --btn-fg: var(--ink); }

.bank-isi .bank-borang { margin-top: 16px; }
.bank-isi .bank-borang .btn-accent { width: 100%; }

/* ---------- telefon: elak limpah mendatar ---------- */
@media (max-width: 420px) {
  .bayar-jumlah { padding: 12px 13px; }
  .btn-fpx { padding: 15px 12px; font-size: .95rem; }
  details.bank-manual > summary { font-size: .84rem; }
  .bank-isi .kv { font-size: .86rem; gap: 8px 10px; }
}