/* ===================================================================
   BUDGET — pil tab History + dialog Top Up (Arip, 248, 17 Sep 2026)
   Semua nilai hasil bedah live https://konten.com/brand/budget.
   =================================================================== */

/* --- 1. Tab History: pil bulat, bukan garis bawah -----------------------
   konten.com: <button> radius 20px, tinggi 40px, garis tepi 1px,
   teks abu rgb(184,184,184) -> putih saat aktif. */
.pill-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.pill-tab{appearance:none;background:transparent;cursor:pointer;
  border:1px solid #22222c;border-radius:20px;
  padding:8px 14px;min-height:40px;
  font:inherit;font-size:.78rem;font-weight:600;
  color:#b8b8b8;transition:color .15s,background .15s,border-color .15s;
  white-space:nowrap}
.pill-tab:hover{color:#f5f8ff}
.pill-tab.active{background:#24202b;color:#ffffff;border-color:#3a3d5c}
/* `ui-sama.css:114-117` memasang `border-radius:10px !important` untuk
   SEMUA tombol di dalam `main` (aturan tombol seragam). Pil tab History
   adalah pengecualian: konten.com memakai radius 20px (diukur live).
   Karena sumbernya `!important`, satu-satunya cara menandingi adalah
   `!important` juga — bukan asal tempel, sudah ditelusuri dulu. */
main .pill-tabs .pill-tab{border-radius:20px !important;
  /* aturan tinggi/ukuran dari ui-sama.css ikut hilang karena .pill-tab
     dikecualikan di sana — dikembalikan di sini dengan nilai
     konten.com (tinggi 40px, diukur live). */
  min-height:40px !important;font-size:14px !important}

/* --- 2. Dialog Top Up ---------------------------------------------------
   Diukur live di konten.com pada layar HP 393x852:
     panel 361x458 · radius 12px · padding 20px · gap 24px
     tombol 155x44 · latar gelap rgba(0,0,0,.7)
     bingkai di sekitar input: 0 lapis (hanya pembungkus .rp-field)
   Angka di bawah mengikuti itu, bukan kira-kira. */
#topup-dialog{border:0;padding:16px;background:rgba(0,0,0,.7);
  max-width:100%;max-height:100%;width:100%;height:100%}
#topup-dialog::backdrop{background:rgba(0,0,0,.7)}
#topup-dialog .dialog-card{width:361px;max-width:calc(100% - 32px);
  margin:auto;padding:20px;
  /* `ui-sama.css` memasang `border-radius:14px !important` untuk semua
     dialog. konten.com memakai 12px (diukur live) -> ditandingi. */
  border-radius:12px !important;
  display:flex;flex-direction:column;gap:24px;
  max-height:calc(100vh - 32px);overflow-y:auto}
/* jarak antar blok diatur oleh `gap` di atas — margin bawaan dibuang
   supaya tidak dobel dan tampak tidak rapi. Tombol tutup dikecualikan
   karena posisinya absolut di pojok, bukan bagian dari aliran gap. */
#topup-dialog .dialog-card > *:not(.dialog-close){margin:0}
/* <h2> bawaan browser masih menyisakan margin sehingga celah pertama
   38px sedangkan sisanya 24px. Dinolkan supaya jaraknya seragam. */
#topup-dialog .dialog-card h2{margin:0 !important;line-height:1.25}
/* <input type="hidden"> (CSRF) tetap dihitung sebagai anak flex sehingga
   memakan satu celah `gap` 24px — membuat jarak pertama jadi 38px.
   Dikeluarkan dari aliran supaya celahnya seragam. */
#topup-dialog .dialog-card > input[type="hidden"]{display:none !important}
#topup-dialog .dialog-close{position:absolute;top:14px;right:14px;
  margin:0}
#topup-dialog .dialog-card{position:relative}

.topup-amount{display:block;font-size:.8rem;font-weight:600;
  color:#c7cde0;margin:0}

/* kotak input dengan awalan "Rp" di dalam, seperti konten.com */
.rp-field{display:flex;align-items:center;gap:0;margin-top:6px;
  background:#0a0a0e;border:1px solid #22222c;border-radius:12px;
  overflow:hidden}
.rp-prefix{flex:0 0 auto;padding:0 10px;font-size:14px;
  color:#9b93a6;font-weight:600;
  /* JANGAN `align-self:stretch` — pembungkus jadi 51px sedangkan
     input 44px, sehingga "Rp" tidak sebaris dengan angka. */
  border-right:1px solid #22222c;height:44px;align-self:center;
  display:flex;align-items:center}
/* Input di dalamnya TIDAK boleh punya bingkai sendiri — kalau tidak,
   terlihat "kotak di dalam kotak" (dilaporkan Arip 17 Sep, terbukti
   dari potret HP). Sumber bingkai kedua, ditelusuri lewat styleSheets:
     - ui-sama.css  `main input[type="text"]` -> 1px solid var(--uc-line)
     - app.css      `.form-card input`        -> 1px solid var(--edge)
   Keduanya tanpa !important tapi selektornya lebih kuat -> dipaksa. */
.rp-field input,
#topup-dialog .rp-field input[name="amount"]{flex:1 1 auto;min-width:0;
  height:44px;min-height:0 !important;background:transparent !important;
  border:0 !important;outline:0 !important;box-shadow:none !important;
  border-radius:0 !important;
  /* `ui-sama.css` memberi `margin-top:7px` ke semua input di dalam
     main — itu mendorong angka turun 3,5px sehingga tidak sebaris
     dengan "Rp". Dinolkan dan tingginya dikunci 44px. */
  margin:0 !important;height:44px;
  padding:0 12px;font:inherit;font-size:.9rem;color:#f5f8ff}
.rp-field input:focus{border:0 !important;outline:0 !important;
  box-shadow:none !important}
/* Pembungkus sempat punya `outline:3px` yang terbaca sebagai bingkai
   ketiga -> dimatikan, sisakan SATU border milik .rp-field saja. */
.rp-field{outline:0 !important}
.rp-field:focus-within{border-color:#ff2e6a;outline:0 !important}
/* Perataan "Rp" diurus di aturan `.rp-prefix` di atas (height 44px,
   align-self:center) — jangan ditambah aturan lain supaya tidak
   bertabrakan sendiri. */
.rp-field{align-items:center}

/* --- 3. Dua tombol berjajar (konten.com: Cancel kiri, Submit kanan) ----- */
.topup-actions{display:flex;gap:10px;margin-top:16px;align-items:stretch}
.topup-actions .btn{flex:1 1 0;min-width:0;justify-content:center;
  /* "Submit Request" sempat patah 2 baris sehingga tombolnya lebih
     tinggi daripada "Cancel" (terlihat di potret). Dipaksa 1 baris. */
  white-space:nowrap;
  /* konten.com: 155x44. `ui-sama.css:116` memaksa min-height:40px
     !important untuk semua tombol -> ditandingi di sini. */
  min-height:44px !important;height:44px !important}
.topup-actions .btn.secondary{background:transparent;
  border:1px solid #22222c;color:#c7cde0}
.topup-actions .btn.secondary:hover{background:#17171e;color:#f5f8ff}

/* --- 4. Blok keterangan rekening ---------------------------------------- */
#topup-dialog .topup-instructions{font-size:.76rem;color:#9b93a6;
  line-height:1.55}
#topup-dialog .topup-instructions p{margin:0 0 8px}
#topup-dialog .bank-account{display:flex;flex-direction:column;gap:2px;
  background:#0a0a0e;border:1px solid #22222c;border-radius:10px;
  padding:9px 11px;margin:0 0 9px}
#topup-dialog .bank-account span{font-size:.82rem;font-weight:700;
  color:#f5f8ff}
#topup-dialog .bank-account small{font-size:.72rem;color:#9b93a6}
#topup-dialog .wa-link{color:#ff2e6a;text-decoration:none;font-weight:600}
#topup-dialog .wa-link:hover{text-decoration:underline}
#topup-dialog .topup-note{font-size:.72rem;color:#8a8490;margin:0}

/* Layar sempit: konten.com TETAP menaruh dua tombol berjajar
   (Cancel 186px | Submit 186px). Aturan `column-reverse` sebelumnya
   membuat tombol bertumpuk DAN urutannya terbalik (Submit di atas) —
   terbukti dari potret. Jadi tetap berjajar, hanya dikecilkan. */
@media (max-width:420px){
  .topup-actions{flex-direction:row}
  .topup-actions .btn{flex:1 1 0;width:auto;padding-left:8px;
    padding-right:8px;font-size:13px}
}