/* Filteri kataloga (js/filters.js): kompaktne kontrole i agentove postavke prikaza */
.fpanel .fg{padding:8px 0}
.fpanel .fgi{padding-top:8px}
.fhead-r{display:flex;gap:12px;align-items:center}
.fcnt{display:inline-block;min-width:18px;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--wine);color:#fff;font-style:normal;font-size:11px;line-height:18px;text-align:center;letter-spacing:0}
.fg summary{align-items:center}
.floc{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.floc select{min-width:0;padding:7px 8px;font-size:13px}

/* jedan red (spol, tetovaže) */
.fseg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.fseg button{flex:1;padding:6px 4px;border:0;background:transparent;color:inherit;font-size:12.5px;font-weight:500;cursor:pointer;border-left:1px solid var(--line);white-space:nowrap}
.fseg button:first-child{border-left:0}
.fseg button.on{background:var(--wine);color:#fff}
.fseg>span{align-self:center;padding:0 8px;font-size:11.5px;color:var(--muted);font-weight:600}

/* klizač s dvije ručice */
.fslider{--a:0%;--b:100%}
.fsl-v{display:flex;gap:6px;align-items:baseline;font-size:12.5px;margin-bottom:2px}
.fsl-v b{font-variant-numeric:tabular-nums}
.fsl-v small,.fsl-v span{color:var(--muted)}
.fsl-t{position:relative;height:22px}
.fsl-t i{position:absolute;left:0;right:0;top:9px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--line) var(--a),var(--wine) var(--a),var(--wine) var(--b),var(--line) var(--b))}
.fsl-t input[type=range]{position:absolute;inset:0;width:100%;margin:0;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;-webkit-appearance:none;appearance:none;pointer-events:none;height:22px}
.fsl-t input[type=range]::-webkit-slider-runnable-track{background:none;height:22px}
.fsl-t input[type=range]::-moz-range-track{background:none}
.fsl-t input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:16px;height:16px;margin-top:3px;border-radius:50%;background:#fff;border:2px solid var(--wine);box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:grab}
.fsl-t input[type=range]::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid var(--wine);cursor:grab}
.fsl-t input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--gold-2,#d9b45a);outline-offset:2px}

/* padajući izbornik s kvačicama (otvara se u panelu, ne preko njega) */
.msel-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:transparent;color:inherit;font-size:13px;cursor:pointer;text-align:left}
.msel-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.msel-btn.on{border-color:var(--wine)}
.msel-btn.on span{color:inherit;font-weight:600}
.msel-btn i{font-style:normal;color:var(--muted);font-size:11px}
.msel-pop{margin-top:6px;padding:6px;border:1px solid var(--line);border-radius:10px}
.msel-q{width:100%;padding:6px 8px;font-size:12.5px;margin-bottom:4px}
.msel-list{max-height:210px;overflow:auto;display:flex;flex-direction:column}
.msel-o{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:7px;font-size:13px;cursor:pointer;margin:0}
.msel-o:hover{background:rgba(127,127,127,.12)}
.msel-o input{margin:0;accent-color:var(--wine)}
.msel-o .sw{width:12px;height:12px;border-radius:50%;display:inline-block}
.msel-clr{margin-top:4px;font-size:12px}

/* boje očiju i kose */
.swatches{display:flex;flex-wrap:wrap;gap:5px}
.swatches .swt{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 4px;font-size:11.5px}
.swatches .swt i{width:16px;height:16px;border-radius:50%;display:inline-block;border:1px solid rgba(127,127,127,.4)}
.swatches .swt.on i{box-shadow:0 0 0 2px var(--paper,#111),0 0 0 3px var(--wine)}

/* agentove postavke */
.fedbar{margin:4px 0 8px;padding:10px;border:1px dashed rgba(217,180,90,.55);border-radius:10px;background:rgba(217,180,90,.06);display:flex;flex-direction:column;gap:8px}
.fedbar p{margin:0;font-size:12px;color:var(--muted)}
.fordseg button{font-size:11.5px}
.fed{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.fed select{padding:4px 6px;font-size:12px;width:auto}
.fed .ck{font-size:12px;margin:0}
.fmv{display:inline-flex;gap:2px}
.fmv button{border:1px solid var(--line);background:transparent;color:inherit;border-radius:6px;width:24px;height:22px;font-size:12px;cursor:pointer}
.fuse{color:var(--muted);font-size:11px;margin-left:auto}
.fg-off>summary{opacity:.45;text-decoration:line-through}
.fordseg{flex-wrap:wrap}.fordseg>span{flex-basis:100%;padding:4px 8px 2px}.fordseg button{flex:1 1 auto;border-top:1px solid var(--line)}

/* mobitel: panel filtera pomiče se samo gore-dolje, stranica iza njega stoji; polja 16 px da iPhone ne uvećava stranicu pri dodiru */
@media (max-width:980px){
  .fpanel{overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch}
  html:has(#fpanel.open),html:has(#fpanel.open) body{overflow:hidden}
  .fpanel :is(input,select){font-size:16px}
  .fpanel .range{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;align-items:center}
  .fpanel .range select{min-width:0;width:100%}
  .fpanel .floc{grid-template-columns:1fr}
}