/* Kontrol — tombol, field, chip, slider, checkbox, file, toast.
   Disalin polanya dari Texureon Web: .tx-btn (layouts.css), .pf-btn (tx-profile.css), .addons-search-input (search.css),
   .chip (tx2.css + gold.css), .tx-ss-pose-input / .tx-ss-dropzone (skin-studio.css). Datar: tanpa blur, glow, radius. */

/* ---------- Tombol sekunder (.tx-btn) ---------- */
.tx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;background:#2d2d2d;color:#fff;
  border:2px solid #0d0d0d;border-radius:0;box-shadow:inset 2px 2px 0 rgba(255,255,255,.16),inset -2px -3px 0 rgba(0,0,0,.45);
  font-family:var(--mc);font-size:13px;letter-spacing:.5px;white-space:nowrap;transition:background .15s ease,color .15s ease}
.tx-btn:hover{background:#3a3a3a;color:var(--gold)}
.tx-btn:active{transform:translateY(2px);box-shadow:inset 2px 2px 0 rgba(0,0,0,.35)}

/* ---------- Tombol utama kuning (.pf-btn) ---------- */
.pf-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:10px 22px;
  border:2px solid var(--gold-edge);border-radius:2px;background-color:var(--gold);
  background-image:linear-gradient(135deg,var(--gold-hi) 0 14%,transparent 14%),linear-gradient(135deg,transparent 0 70%,var(--gold-hi) 70% 84%,transparent 84%);
  color:var(--gold-ink);font-family:var(--mc);font-size:13px;letter-spacing:.7px;text-transform:uppercase;white-space:nowrap;
  box-shadow:2px 2px 0 #000;transition:opacity .15s ease}
.pf-btn:hover{opacity:.88}
.pf-btn:active{opacity:.55}
.pf-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- Chip pilihan (.chip) ---------- */
.tx-chips{display:flex;flex-wrap:wrap;gap:8px}
.tx-chips .chip{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border:2px solid #2a2a2a;border-radius:2px;
  background:#131313;color:#A0A0A0;font-family:var(--mc);font-size:13px;letter-spacing:.5px;text-align:center;transition:border-color .15s ease,color .15s ease}
.tx-chips .chip:hover{border-color:rgba(255,201,51,.5);color:#fff}
.tx-chips .chip.active{border-color:#191919;background:var(--gold);color:#171717}
.tx-chips .chip.active:hover{color:#171717;border-color:var(--gold-hi)}
.tx-chips-cat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- Label & field ---------- */
.tx-editor label{display:block;margin:0 0 14px}
.tx-editor label>span,.tx-label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 7px;font-size:13px;color:var(--muted)}
.tx-editor label>span em,.tx-sec .tx-hint em{font-style:normal;font-size:12px;color:#7a7a7a;text-align:right}
.tx-label{display:block}
.tx-field-block{margin:0 0 14px}

.tx-editor input[type=text],.tx-editor textarea,.tx-editor select{display:block;width:100%;padding:10px 12px;background:var(--field);color:#EDEDED;
  border:2px solid var(--field-line);border-radius:0;font-size:14px;line-height:1.5;transition:border-color .16s ease;-webkit-appearance:none;appearance:none}
.tx-editor input[type=text]::placeholder,.tx-editor textarea::placeholder{color:#666;opacity:1}
.tx-editor input[type=text]:hover,.tx-editor textarea:hover,.tx-editor select:hover{border-color:rgba(255,201,51,.5)}
.tx-editor input[type=text]:focus,.tx-editor textarea:focus,.tx-editor select:focus{border-color:var(--gold);outline:0}
.tx-editor input[type=text]:focus-visible,.tx-editor textarea:focus-visible,.tx-editor select:focus-visible{outline:2px solid #fff;outline-offset:2px}
.tx-editor textarea{resize:vertical;min-height:110px}
.tx-editor textarea.tx-short{min-height:68px}
.tx-editor select{padding-right:42px;cursor:pointer;text-overflow:ellipsis;
  background-image:url("../img/ui/chevron-down.svg");background-repeat:no-repeat;background-position:right 14px center;background-size:15px 9px;image-rendering:pixelated}
.tx-editor select option{background:#0C0C0C;color:#fff;font-family:Arial,sans-serif}

/* ---------- Checkbox ---------- */
.tx-check{display:flex!important;align-items:center;gap:10px;color:var(--cream);font-size:13px;line-height:1.4;cursor:pointer}
.tx-check input{flex:none;width:22px;height:22px;margin:0;display:grid;place-content:center;background:var(--field);border:2px solid var(--field-line);border-radius:0;
  -webkit-appearance:none;appearance:none;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.tx-check input:hover{border-color:rgba(255,201,51,.5)}
.tx-check input::before{content:"";width:12px;height:12px;background:var(--gold-ink);transform:scale(0);
  clip-path:polygon(0 50%,17% 50%,17% 67%,33% 67%,33% 83%,50% 83%,50% 67%,67% 67%,67% 50%,83% 50%,83% 33%,100% 33%,100% 17%,83% 17%,83% 33%,67% 33%,67% 50%,50% 50%,50% 67%,33% 67%,33% 50%,17% 50%)}
.tx-check input:checked{background:var(--gold);border-color:var(--gold-edge)}
.tx-check input:checked::before{transform:scale(1)}
.tx-check input:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------- Slider ---------- */
.tx-editor input[type=range]{display:block;width:100%;height:22px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.tx-editor input[type=range]::-webkit-slider-runnable-track{height:8px;background:var(--field);border:2px solid var(--field-line)}
.tx-editor input[type=range]::-moz-range-track{height:8px;background:var(--field);border:2px solid var(--field-line);border-radius:0}
.tx-editor input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:20px;margin-top:-8px;background:var(--gold);border:2px solid var(--gold-edge);border-radius:0}
.tx-editor input[type=range]::-moz-range-thumb{width:10px;height:16px;background:var(--gold);border:2px solid var(--gold-edge);border-radius:0}
.tx-editor input[type=range]:hover::-webkit-slider-runnable-track{border-color:rgba(255,201,51,.5)}
.tx-editor input[type=range]:hover::-moz-range-track{border-color:rgba(255,201,51,.5)}
.tx-editor input[type=range]:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- Input file ---------- */
.tx-editor input[type=file]{display:block;width:100%;padding:8px;background:var(--field);border:2px solid var(--field-line);border-radius:0;
  color:var(--muted);font-size:12px;transition:border-color .16s ease;cursor:pointer}
.tx-editor input[type=file]:hover{border-color:rgba(255,201,51,.5)}
.tx-editor input[type=file]::file-selector-button{margin-right:12px;min-height:34px;padding:0 14px;background:#2d2d2d;color:#fff;border:2px solid #0d0d0d;border-radius:0;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.16),inset -2px -3px 0 rgba(0,0,0,.45);font-family:var(--mc);font-size:12px;letter-spacing:.5px;cursor:pointer;transition:background .15s ease,color .15s ease}
.tx-editor input[type=file]:hover::file-selector-button{background:#3a3a3a;color:var(--gold)}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:22px;z-index:2000;transform:translateX(-50%);padding:10px 18px;background:var(--gold);color:var(--gold-ink);
  border:2px solid var(--gold-edge);border-radius:2px;box-shadow:2px 2px 0 #000;font-family:var(--mc);font-size:13px;letter-spacing:.5px;
  opacity:0;pointer-events:none;transition:opacity .2s ease}
.toast.on{opacity:1}