/* Pemilih domain (menggantikan <select data-picker> bawaan browser). Lihat public/js/picker.js. */
.picker{position:relative;flex:1;min-width:0;max-width:420px}
.picker select{position:absolute;inset:0;opacity:0;pointer-events:none}
.picker-btn{width:100%;display:flex;align-items:center;gap:12px;padding:9px 14px 9px 10px;background:var(--bg2);border:1px solid var(--line2);border-radius:12px;color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.picker-btn:hover{border-color:#3A4658;background:#101620}
.picker-btn:focus-visible,.picker.open .picker-btn{outline:none;border-color:rgba(46,229,157,.55);box-shadow:0 0 0 3px rgba(46,229,157,.12)}
.picker-av{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font:700 12px var(--mono);flex:none}
.picker-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.picker-txt b{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker-txt small{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker-dot{width:7px;height:7px;border-radius:50%;background:var(--dim);flex:none}
.picker-dot.good{background:var(--green);box-shadow:0 0 0 3px rgba(46,229,157,.15)}
.picker-dot.warn{background:var(--amber)}.picker-dot.bad{background:var(--red);box-shadow:0 0 0 3px rgba(255,92,108,.15)}
.picker-chev{color:var(--muted);flex:none;transition:transform .18s}
.picker.open .picker-chev{transform:rotate(180deg);color:var(--green)}
.picker-pop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:40;background:var(--card2);border:1px solid var(--line2);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02) inset;padding:6px;opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top;pointer-events:none;transition:opacity .14s,transform .14s}
.picker.open .picker-pop{opacity:1;transform:none;pointer-events:auto}
.picker-head{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:8px 10px 6px}
.picker-list{list-style:none;margin:0;padding:0;max-height:300px;overflow:auto}
.picker-opt{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;cursor:pointer;color:var(--text)}
.picker-opt .picker-av{width:30px;height:30px;font-size:11px}
.picker-opt.active{background:rgba(255,255,255,.05)}
.picker-opt[aria-selected=true]{background:var(--green-dim)}
.picker-opt[aria-selected=true] .picker-txt b{color:var(--green)}
.picker-check{color:var(--green);flex:none;visibility:hidden}
.picker-opt[aria-selected=true] .picker-check{visibility:visible}
@media(max-width:640px){.picker{max-width:none}}
@media(prefers-reduced-motion:reduce){.picker-pop,.picker-chev,.picker-btn{transition:none}}
.picker-list:focus{outline:none}
.picker-row{flex-wrap:nowrap}
@media(max-width:640px){.picker-row{flex-wrap:wrap}.picker-row .picker{flex-basis:100%}.picker-row .btn{width:100%;justify-content:center}}
.picker-pop{min-width:min(300px,calc(100vw - 32px))}

/* Slot domain yang tertahan setelah dihapus (paket Gratis), di halaman Domain. */
.held-slots{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.held-slot{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px dashed rgba(245,184,75,.35);border-radius:14px;background:linear-gradient(90deg,rgba(245,184,75,.07),rgba(245,184,75,.02))}
.held-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(245,184,75,.12);color:var(--amber);flex:none}
.held-slot b{font-size:14.5px}
.held-bar{height:4px;border-radius:4px;background:rgba(255,255,255,.06);margin-top:10px;overflow:hidden;max-width:420px}
.held-bar i{display:block;height:100%;background:var(--amber);border-radius:4px}
.held-left{white-space:nowrap;flex:none}
@media(max-width:640px){.held-slot{flex-wrap:wrap}.held-left{margin-left:50px}}

/* Gaya polos untuk semua <select> lain (paket, status, pengaturan…): tampil seperti kolom isian gelap,
   daftar pilihannya kartu gelap yang sama dengan pemilih domain. */
.picker-plain{max-width:none;width:100%}
.row>.picker-plain,.pz-track>.picker-plain{width:auto;flex:1 1 160px}
.picker-plain .picker-btn{gap:10px;padding:11px 14px;min-height:48px;border-color:var(--line);font-size:15px}
.picker-plain .picker-txt b{font-weight:600;font-size:15px}
.picker-plain .picker-btn .picker-txt small{display:none}
.picker-plain .picker-pop{right:auto;min-width:100%;width:max-content;max-width:min(440px,calc(100vw - 24px))}
.picker-plain .picker-opt{gap:10px;padding:10px 12px;min-height:42px}
.picker-plain .picker-opt .picker-txt b{white-space:normal}
.picker-plain .picker-opt[aria-selected=true]{background:var(--green-dim);box-shadow:inset 2px 0 0 var(--green)}
.picker-btn:disabled{opacity:.55;cursor:not-allowed}
.picker-opt[aria-disabled=true]{opacity:.4;cursor:not-allowed}
.picker-group{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:10px 10px 4px}
.picker.up .picker-pop{top:auto;bottom:calc(100% + 8px);transform-origin:bottom}
.picker.up:not(.open) .picker-pop{transform:translateY(4px) scale(.98)}
.picker.open{z-index:41}
@media(max-width:640px){.picker-plain .picker-opt{min-height:46px}}
/* Daftar yang tertutup tetap ikut dihitung lebar halaman; di HP itu membuat geser ke samping beberapa piksel.
   Saat tertutup, lebarnya dikunci ke tombolnya (setelah animasi tutup selesai). */
.picker:not(.open) .picker-pop{min-width:0;max-width:100%;transition:opacity .14s,transform .14s,min-width 0s .14s,max-width 0s .14s}