/* Room Wangy & Joki MLBB — mengikuti warna tema toko (--pri/--pri2), terang & gelap. */
.jsh{display:flex;gap:12px;align-items:flex-start;margin:14px 0 6px;padding:14px;border-radius:20px;background:var(--card);border:1px solid var(--line);box-shadow:0 8px 22px -16px rgba(15,23,42,.35)}
.jsh-ic{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:15px;font-size:19px;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 8px 18px var(--pri-glow)}
.jsh-t{min-width:0;flex:1}
.jsh h1{margin:0;font-size:19px;line-height:1.25;font-weight:800;letter-spacing:-.02em}
.jsh p{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.jsh-b{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.jsh-b span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:700;color:var(--pri);background:var(--pri-l)}
.jsg{font:inherit;text-align:center;cursor:pointer;width:100%}

/* kartu kalkulator (joki) */
.jsk{display:flex;align-items:center;gap:12px;margin-top:18px;padding:14px;border-radius:18px;color:var(--ink);background:var(--card);border:1px solid var(--line);text-decoration:none;transition:border-color .2s,transform .2s}
.jsk:hover{border-color:var(--pri);transform:translateY(-2px)}
.jsk>span{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:13px;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2))}
.jsk>div{flex:1;min-width:0}
.jsk b{display:block;font-size:14.5px}
.jsk small{display:block;font-size:12.5px;line-height:1.4;color:var(--muted)}
.jsk>i{color:var(--pri)}

/* lembar pesanan */
.js-bs .bs-p{padding-top:8px}
.js-ph{display:flex;align-items:center;gap:12px;margin:6px 0 10px}
.js-pi{width:62px;height:62px;flex:none;display:grid;place-items:center;overflow:hidden;border-radius:16px;font-size:24px;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2))}
.js-pi img{width:100%;height:100%;object-fit:cover}
.js-ph>div{flex:1;min-width:0}
.js-ph small{display:block;font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.js-ph b{display:block;font-size:16px;line-height:1.3;font-weight:800}
.js-ph em{display:block;font-style:normal;font-weight:800;color:var(--pri);margin-top:2px}
.js-ph em span{font-weight:600;color:var(--muted);font-size:12px}
.js-ph em s{font-weight:500;color:var(--muted);font-size:12px;margin-left:4px}
.js-ph .bs-x{align-self:flex-start}
.js-ben{list-style:none;margin:0 0 8px;padding:10px 12px;border-radius:14px;background:var(--pri-l);display:grid;gap:5px}
.js-ben li{display:flex;gap:8px;font-size:13px;line-height:1.4}
.js-ben i{color:var(--pri);margin-top:3px;font-size:11px}
.js-ket{margin:0 0 8px;font-size:13px;line-height:1.5;color:var(--muted);white-space:pre-line}
.js-f{display:grid;gap:10px}
.js-f label{display:grid;gap:5px;font-size:12.5px;font-weight:700;color:var(--ink)}
.js-f label em{font-style:normal;font-weight:500;color:var(--muted)}
.js-f input:not([type=radio]),.js-f select,.js-f textarea{width:100%;min-width:0;box-sizing:border-box;padding:11px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--ink);font:inherit;font-weight:500;font-size:14px}
.js-f textarea{resize:vertical}
.js-f input:focus,.js-f select:focus,.js-f textarea:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px var(--pri-l)}
.js-f .is-salah{border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.15)!important}
.js-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:380px){.js-2{grid-template-columns:1fr}}
.js-sec{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:13px;font-weight:800;color:var(--pri)}
.js-qty small{font-size:11.5px;color:var(--muted)}
.js-step{display:grid;grid-template-columns:44px 1fr 44px;gap:6px}
.js-step button{height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card2);color:var(--ink);font-size:20px;font-weight:700;cursor:pointer}
.js-step input{text-align:center;font-weight:800!important;font-size:16px!important}
.js-pay{display:flex;flex-wrap:wrap;gap:6px}
.js-pay label{display:block}
.js-pay input{position:absolute;opacity:0;pointer-events:none}
.js-pay span{display:inline-block;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card2);font-size:12.5px;font-weight:700;cursor:pointer}
.js-pay input:checked+span{border-color:var(--pri);background:var(--pri-l);color:var(--pri)}
.js-pay input:focus-visible+span{box-shadow:0 0 0 3px var(--pri-l)}
.js-aman{display:flex;gap:8px;margin:0;padding:9px 11px;border-radius:12px;font-size:12px;line-height:1.45;color:var(--muted);background:var(--card2)}
.js-aman i{color:#16a34a;margin-top:2px}
.js-tot{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff}
.js-tot span{font-size:12.5px;font-weight:700;opacity:.9}
.js-tot b{font-size:18px;font-weight:800}
.js-err{margin:0;padding:9px 12px;border-radius:12px;font-size:13px;font-weight:600;color:#b91c1c;background:rgba(239,68,68,.1)}
[data-theme=dark] .js-err{color:#fca5a5}
.js-go{width:100%;padding:13px 18px;font-size:15px}
.js-go.is-wa{background:linear-gradient(135deg,#16a34a,#22c55e);box-shadow:0 8px 18px rgba(34,197,94,.35)}
.js-go[disabled]{opacity:.7;cursor:progress}

/* ---------- Vilog & Bengkel (model Lisensi DK) ---------- */
.jl{margin-top:14px}
.jl-ket{display:block;font-size:11.5px;line-height:1.4;color:var(--muted);font-weight:500}
.jl-coret{font-size:11.5px;font-weight:500;color:var(--muted)}
.jl-opt{font-style:normal;font-weight:500;font-size:11px;color:var(--muted)}
.jl .fi.jl-ta>i{top:18px;transform:none}
.jl .fi textarea.input{min-height:96px;resize:vertical;padding-top:14px;font-family:inherit}
.jl-pay{padding:0 2px 6px}
.jl .ket a{color:var(--pri);font-weight:700}
.btn.big.jl-wa{background:linear-gradient(135deg,#16a34a,#22c55e);box-shadow:0 10px 22px rgba(34,197,94,.35)}
#lyDur.belum .ly-list::before{content:"\f023\00a0\00a0Pilih kategori terlebih dahulu"}

/* ---------- Katalog (Item Roblox / Jasa Admin / Produk Fisik) ---------- */
.jk-h{margin:16px 0 10px}
.jk-list{display:grid;gap:8px}
.jk-it{display:block;cursor:pointer}
.jk-it input{position:absolute;opacity:0;pointer-events:none}
.jk-it>span{position:relative;display:grid;gap:2px;padding:11px 40px 11px 13px;border-radius:14px;border:1.5px solid var(--line);background:var(--card2);transition:.15s}
.jk-it b{font-size:13.5px;font-weight:800;color:var(--ink)}
.jk-it small{font-size:12px;line-height:1.4;color:var(--muted)}
.jk-it em{font-style:normal;font-weight:800;color:var(--pri);font-size:14px}
.jk-it em s{font-weight:500;color:var(--muted);font-size:11.5px}
.jk-it>span>i{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--line)}
.jk-it input:checked+span{border-color:var(--pri);background:var(--pri-l);box-shadow:0 6px 16px -8px var(--pri-glow)}
.jk-it input:checked+span>i{color:var(--pri)}
.jk-it input:focus-visible+span{box-shadow:0 0 0 3px var(--pri-l)}

/* Room Wangy — kartu produk 1 baris 1 kartu, gaya sama dengan kartu game (gradasi tema + bingkai gambar) */
.rw-list{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.rwc.jsg{text-align:left;display:block;position:relative;overflow:hidden;width:100%;padding:6px;border-radius:22px;color:#fff;cursor:default;
  background:linear-gradient(160deg,var(--pri),var(--pri2));box-shadow:0 14px 30px var(--pri-glow);transition:transform .2s,box-shadow .2s}
.rwc.jsg::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1.5px) 0 0/9px 9px;opacity:.5;pointer-events:none}
.rwc.jsg:hover{transform:translateY(-2px);box-shadow:0 18px 36px var(--pri-glow)}
.rwc-im{position:relative;z-index:1;aspect-ratio:16/10;overflow:hidden;border-radius:17px;background:color-mix(in srgb,var(--pri) 30%,#0b1020);box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.rwc-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
.rwc-im::before{content:"";position:absolute;inset:0;z-index:0;background:var(--rw-bg,none) center/cover;filter:blur(18px) brightness(.8);transform:scale(1.2)}
.rwc-fb{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;color:#fff;opacity:.95}
.rwc-tg{position:absolute;left:10px;top:10px;z-index:3;display:flex;gap:6px}
.rwc-tg span{padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:800;color:#fff;background:rgba(15,23,42,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.rwc-tg .is-hot{background:linear-gradient(135deg,#f97316,#ef4444)}
.rwc-tg .is-disc{background:linear-gradient(135deg,#22c55e,#16a34a)}
.rwc-bd{position:relative;z-index:1;padding:14px 12px 12px}
.rwc-bd h3{margin:0;font-size:18px;line-height:1.3;font-weight:800;letter-spacing:-.015em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.25)}
.rwc-pr{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:4px}
.rwc-pr strong{font-size:22px;font-weight:900;letter-spacing:-.02em;color:#fff}
.rwc-pr s{font-size:13px;color:rgba(255,255,255,.75)}
.rwc-kt{margin:8px 0 0;font-size:13px;line-height:1.6;color:rgba(255,255,255,.88)}
.rwc-bn{list-style:none;margin:12px 0 0;padding:12px;display:grid;gap:9px;border-radius:16px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.rwc-bn li{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;line-height:1.35;color:#fff}
.rwc-bn li i{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;font-size:11px;color:var(--pri);background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.2)}
.rwc-go{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:14px;padding:14px 16px;border:0;border-radius:16px;font:inherit;font-size:15px;font-weight:800;color:var(--pri);cursor:pointer;background:#fff;box-shadow:0 10px 22px -8px rgba(0,0,0,.35);transition:transform .15s,filter .15s}
.rwc-go:hover{filter:brightness(.97)}.rwc-go:active{transform:scale(.98)}
@media(min-width:760px){.rw-list{max-width:640px;margin-inline:auto}}

/* ---------- Lembar pesanan Room Wangy/Joki: header ala menu & isian ala pembelian game ---------- */
.js-bs .bs-p{padding-top:8px}
.js-hero{margin:6px 0 12px}
.js-hero .bs-hi{overflow:hidden;padding:0}
.js-hero .bs-hi img{width:100%;height:100%;object-fit:cover;display:block}
.js-hero .bs-ht small{order:-1;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.js-hero .bs-ht b{font-size:17px;line-height:1.25}
.js-hero .bs-ht em{font-style:normal;font-weight:800;font-size:15px;margin-top:2px}
.js-hero .bs-ht em span{font-weight:600;opacity:.85;font-size:12px}
.js-hero .bs-ht em s{font-weight:500;opacity:.75;font-size:12px;margin-left:5px}
.js-hero .bs-x{align-self:flex-start}
.js-f .f{margin:0}
.js-f .f label{display:block;margin:0 0 7px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.js-f .f label em{text-transform:none;letter-spacing:0;font-weight:500}
.js-f .fi .input,.js-f .fi select.input,.js-f .fi textarea.input{width:100%;box-sizing:border-box;padding:14px 14px 14px 43px;min-height:52px;border-radius:var(--r-s);font-size:15.5px;
  background:color-mix(in srgb,var(--ink) 7%,var(--card));border:1.5px solid color-mix(in srgb,var(--ink) 20%,var(--card))}
.js-f .fi .input:hover{border-color:color-mix(in srgb,var(--pri) 45%,var(--line))}
.js-f .fi .input::placeholder{color:color-mix(in srgb,var(--ink) 50%,var(--card));opacity:1;font-weight:500}
.js-f .fi select.input{padding-right:40px}
.js-f .fi textarea.input{padding-top:14px;min-height:84px;resize:vertical}
.js-f .fi.fi-ta>i{top:26px}
.js-f .fi .input:focus{background:var(--card);border-color:var(--pri);box-shadow:0 0 0 4px var(--pri-l)}
.js-f .fi .is-salah{border-color:#ef4444!important}
.js-lb{padding:4px 2px 0}
.js-qty.f .js-step input{padding:0 8px;min-height:44px;text-align:center}

/* Video singkat (Room Wangy / Joki): kartu embed YouTube */
.vd-list{display:grid;gap:14px}
.vdc{overflow:hidden;border-radius:20px;background:var(--card);border:1px solid color-mix(in srgb,var(--pri) 20%,var(--line));box-shadow:0 12px 28px -20px var(--pri-glow)}
.vdc-fr{position:relative;aspect-ratio:16/9;background:#000}
.vdc-fr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vdc-t{display:flex;align-items:center;gap:10px;padding:12px 14px}
.vdc-t span{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;font-size:11px;color:#fff;background:linear-gradient(135deg,var(--pri),var(--pri2));box-shadow:0 5px 12px var(--pri-glow)}
.vdc-t b{font-size:14.5px;line-height:1.35;font-weight:800}
#jvVid[hidden],#jvBeli[hidden]{display:none}
@media(min-width:760px){.vd-list{grid-template-columns:1fr 1fr}}