/* =========================================================================
   PMX — Modal Metode Pembayaran 2 langkah (jiplak konten.com, 16 Sep 2026)
   Langkah 1: pilih logo (Dana / BCA / GoPay / ShopeePay)
   Langkah 2: isi Nomor + Nama Akun
   Aset logo asli: /static/payment-methods/*.png
   ========================================================================= */

dialog.pmx-dialog{
  width:min(560px,100%);
  max-width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:#fafafa;
  font-family:'neue',system-ui,-apple-system,'Segoe UI',sans-serif;
  overflow:visible;
}
dialog.pmx-dialog::backdrop{
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(3px);
}

.pmx-card{
  background:#0a0a0a;
  border:1px solid #1c1c1c;
  border-radius:18px;
  padding:22px 18px 24px;
  box-shadow:0 26px 60px rgba(0,0,0,.66);
}

/* ---- header ---- */
.pmx-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;margin-bottom:20px;
}
.pmx-head h2{
  margin:0;font-size:clamp(20px,4.4vw,26px);
  font-weight:600;line-height:1.25;color:#fff;
}
.pmx-close{
  flex:0 0 40px;
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;
  background:#1c1c1e;border:0;border-radius:50%;
  color:#d4d4d8;cursor:pointer;transition:background .18s,color .18s;
}
.pmx-close:hover{background:#2a2a2d;color:#fff;}
.pmx-close svg{
  width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:2.1;stroke-linecap:round;
}

/* ---- langkah 1: daftar metode ---- */
.pmx-options{display:flex;flex-direction:column;gap:14px;}
.pmx-option{
  display:flex;align-items:center;gap:16px;
  width:100%;padding:12px 16px;
  background:#0e0e0e;border:1px solid #1f1f1f;border-radius:14px;
  color:#fafafa;text-align:left;cursor:pointer;
  transition:border-color .18s,background .18s,transform .12s;
}
.pmx-option:hover{background:#121212;border-color:#2f2f2f;}
.pmx-option:active{transform:scale(.995);}
.pmx-logo{
  flex:0 0 96px;
  display:flex;align-items:center;justify-content:center;
  width:96px;height:56px;padding:8px 10px;
  background:#fff;border-radius:10px;
}
.pmx-logo img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;display:block;
}
.pmx-name{flex:1;min-width:0;font-size:17px;font-weight:500;}
.pmx-arrow{
  flex:0 0 22px;width:22px;height:22px;
  fill:none;stroke:#71717a;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;
}
.pmx-option:hover .pmx-arrow{stroke:#a1a1aa;}

/* ---- langkah 2: form ---- */
.pmx-step[hidden]{display:none;}
.pmx-picked{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;margin-bottom:20px;
  background:#0e0e0e;border:1px solid #1f1f1f;border-radius:14px;
}
.pmx-picked b{font-size:16px;font-weight:500;}
.pmx-field{display:block;margin-bottom:16px;}
.pmx-field > span{
  display:block;margin-bottom:8px;
  font-size:14px;font-weight:500;color:#e4e4e7;
}
.pmx-field input{
  width:100%;height:52px;padding:0 15px;
  font-size:15px;font-family:inherit;color:#fafafa;
  background:#0e0e0e;border:1px solid #232323;border-radius:12px;
  outline:none;transition:border-color .18s,box-shadow .18s;
  box-sizing:border-box;
}
.pmx-field input::placeholder{color:#52525b;}
.pmx-field input:focus{
  border-color:#ff2e6a;
  box-shadow:0 0 0 3px rgba(255,46,106,.16);
}

.pmx-actions{display:flex;gap:12px;margin-top:22px;}
.pmx-back,.pmx-submit{
  flex:1;height:50px;
  font-size:15px;font-weight:600;font-family:inherit;
  border-radius:12px;cursor:pointer;
  transition:filter .18s,background .18s;
}
.pmx-back{
  background:#161616;border:1px solid #262626;color:#d4d4d8;
}
.pmx-back:hover{background:#1e1e1e;color:#fff;}
.pmx-submit{
  border:0;color:#ffffff;
  background:linear-gradient(180deg,#ff6f9e 0%,#ff2e6a 52%,#8f04c4 100%);
  box-shadow:0 4px 16px rgba(255,46,106,.3);
}
.pmx-submit:hover{filter:brightness(1.07);}

@media (max-width:480px){
  .pmx-card{padding:18px 14px 20px;border-radius:16px;}
  .pmx-option{gap:12px;padding:10px 12px;}
  .pmx-logo{flex-basis:84px;width:84px;height:50px;}
  .pmx-name{font-size:16px;}
  .pmx-head h2{font-size:21px;}
}

/* logo pada daftar metode tersimpan */
.pm-item-logo{
  flex:0 0 62px;
  display:flex;align-items:center;justify-content:center;
  width:62px;height:38px;padding:5px 7px;
  background:#fff;border-radius:8px;
}
.pm-item-logo img{
  max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;display:block;
}

/* ikon WhatsApp di tombol Kontak Admin (sidebar) */
.nav-help .nav-wa-icon{
  fill:currentColor;
  stroke:none;
  width:20px;height:20px;
  flex:0 0 20px;
}