/* ================================================================
   VALSKUY — QA Channel Picker Modal (tombol JUAL & TUKER TAMBAH
   di katalog.html)

   File BARU, berdiri sendiri. Semua class dikasih prefix "qcm-"
   supaya TIDAK numpang / bentrok sama class modal lain yang sudah
   ada (mis. sm-* punya popup_selector.css, mbuy/modal-* punya
   style.css). Jangan ganti nama class di sini tanpa update
   qa-channel-modal.js juga.
================================================================ */

.qcm-overlay{
  position:fixed;
  inset:0;
  z-index:999996;
  background:rgba(8,8,8,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;
}
.qcm-overlay.qcm-visible{
  opacity:1;
  visibility:visible;
}

.qcm-box{
  position:relative;
  width:100%;
  max-width:420px;
  background:var(--base,#0e0e0e);
  border:1px solid var(--border,#242424);
  border-radius:20px;
  padding:36px 28px 28px;
  display:flex;
  flex-direction:column;
  gap:26px;
  transform:translateY(20px);
  opacity:0;
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .35s ease;
}
.qcm-overlay.qcm-visible .qcm-box{
  transform:translateY(0);
  opacity:1;
}

.qcm-header{
  text-align:center;
}
.qcm-eyebrow{
  display:block;
  font-size:9px;
  font-weight:700;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--muted,#5a5855);
  margin-bottom:12px;
}
.qcm-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(24px,6vw,32px);
  letter-spacing:3px;
  color:var(--ivory,#ede9e1);
  line-height:1.1;
  margin-bottom:8px;
}
.qcm-sub{
  font-size:12.5px;
  color:var(--muted,#5a5855);
  line-height:1.6;
  max-width:320px;
  margin:0 auto;
}

.qcm-options{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.qcm-opt{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  width:100%;
  text-align:left;
  background:var(--surface,#141414);
  border:1px solid var(--border,#242424);
  border-radius:12px;
  padding:16px 18px;
  cursor:pointer;
  font-family:inherit;
  color:inherit;
  transition:border-color .2s,background .2s,transform .2s;
  -webkit-tap-highlight-color:transparent;
}
.qcm-opt:hover{
  border-color:var(--br2,#2e2e2e);
  background:#181818;
  transform:translateY(-2px);
}
.qcm-opt:active{
  transform:translateY(0);
}

.qcm-opt-tag{
  font-family:'Bebas Neue',sans-serif;
  font-size:16px;
  letter-spacing:2px;
  color:var(--gold,#c8a878);
}
.qcm-opt[data-opt="cs"] .qcm-opt-tag{
  color:var(--silver,#c0bdb8);
}
.qcm-opt[data-opt="wa"] .qcm-opt-tag{
  color:#25d366;
}

.qcm-opt-desc{
  font-size:11.5px;
  color:var(--muted,#5a5855);
  line-height:1.5;
}

.qcm-close{
  position:absolute;
  top:14px;
  right:14px;
  width:26px;
  height:26px;
  background:none;
  border:1px solid var(--border,#242424);
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--muted,#5a5855);
  transition:border-color .2s,color .2s;
}
.qcm-close:hover{
  border-color:var(--br2,#2e2e2e);
  color:var(--silver,#c0bdb8);
}

@media (max-width:480px){
  .qcm-box{
    padding:30px 22px 24px;
    gap:22px;
  }
}