/* FS25 Mod Search: zelfde huisstijl als het FS25-dashboard */
:root{
  --bg:#10130e; --bg2:#161a13; --panel:#1c2118; --panel2:#242a1f; --line:#343c2c;
  --green:#8cc63f; --green2:#b5de6e; --wheat:#e6c068; --text:#eaeddf; --muted:#9da88f;
  --red:#e0654f; --ok:#57c84d; --modhub:#5aa9c9; --kingmods:#e6c068;
  --shadow:0 6px 20px rgba(0,0,0,.45);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
:focus-visible{outline:2px solid var(--green2); outline-offset:2px; border-radius:5px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
}
body{
  background:radial-gradient(1200px 600px at 50% -200px, #232b1a 0%, rgba(35,43,26,0) 70%), var(--bg);
  color:var(--text); font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:15px; line-height:1.4;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
a{color:var(--green2)}
h1,h2,h3{margin:0}
.visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skiplink{position:absolute; left:-9999px; top:8px; z-index:2000; background:var(--green2); color:#10130e;
  padding:9px 14px; border-radius:8px; font-weight:700; text-decoration:none}
.skiplink:focus{left:12px}
button{font:inherit; color:inherit}
.link{background:none; border:0; padding:0; color:var(--green2); cursor:pointer; text-decoration:underline; text-underline-offset:2px}

/* ---------- kop ---------- */
header.top{position:sticky; top:0; z-index:100; background:linear-gradient(180deg,#1b2116 0%,#141810 100%);
  border-bottom:1px solid var(--line); box-shadow:0 3px 14px rgba(0,0,0,.4); padding:14px 20px 10px}
.titlebar{display:flex; align-items:center; gap:14px; flex-wrap:wrap; max-width:1720px; margin:0 auto}
.backhub{display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--green2);
  background:rgba(140,198,63,.08); border:1px solid var(--line); padding:6px 13px; border-radius:20px;
  font-size:13px; font-weight:600; white-space:nowrap; transition:background .15s,border-color .15s,transform .15s}
.backhub:hover{background:rgba(140,198,63,.16); border-color:var(--green); transform:translateX(-2px)}
.backhub .ar{font-size:16px; line-height:1}
.titlebar h1{font-size:24px; font-weight:800; letter-spacing:.3px; text-transform:uppercase}
.titlebar h1 span{color:var(--green)}
.titlebar .sub{color:var(--muted); font-size:14px}
.langsw{margin-left:auto; display:inline-flex; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--panel)}
.langsw button{background:none; border:0; color:var(--muted); font-size:12px; font-weight:700; padding:6px 10px; cursor:pointer}
.langsw button.active{background:var(--green); color:#10130e}
.langsw button:not(.active):hover{color:var(--text)}
.badge{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; padding:6px 12px;
  border-radius:20px; border:1px solid var(--line); background:var(--panel); white-space:nowrap}
.badge .dot{width:9px; height:9px; border-radius:50%; background:var(--muted)}
.badge.on .dot{background:var(--ok)}

.searchbar{display:flex; gap:10px; max-width:1720px; margin:12px auto 0}
.searchbar input[type=search]{flex:1; min-width:0; background:var(--bg2); border:1px solid var(--line); color:var(--text);
  border-radius:12px; padding:12px 16px; font:inherit; font-size:16px}
.searchbar input[type=search]:focus{border-color:var(--green); outline:none; box-shadow:0 0 0 3px rgba(140,198,63,.2)}
select, .range input, .fsearch{background:var(--bg2); border:1px solid var(--line); color:var(--text); border-radius:9px; padding:9px 10px; font:inherit; font-size:14px}
.searchbar select{border-radius:12px; padding:0 12px}
.filterbtn{display:none; background:var(--panel2); border:1px solid var(--line); border-radius:12px; padding:0 16px; font-weight:700; cursor:pointer}

.groups{display:flex; flex-wrap:wrap; gap:6px; max-width:1720px; margin:10px auto 0}
.chip{flex:none; background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:6px 12px; font-size:13px;
  font-weight:600; color:var(--muted); cursor:pointer; white-space:nowrap; transition:color .15s,border-color .15s,background .15s}
.chip span{font-weight:500; opacity:.75; margin-left:3px; font-variant-numeric:tabular-nums}
.chip:hover{color:var(--text); border-color:#4a5540}
.chip.on{background:var(--green); border-color:var(--green); color:#10130e}

/* ---------- indeling ---------- */
main{max-width:1720px; margin:0 auto; padding:20px; display:grid; grid-template-columns:280px minmax(0,1fr); gap:22px; align-items:start}
.filters{position:sticky; top:var(--hdr, 170px); max-height:calc(100vh - var(--hdr, 170px) - 20px); overflow:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; scrollbar-width:thin}
.fhead{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px}
.fhead h2{font-size:15px; text-transform:uppercase; letter-spacing:.5px}
.fblock{border:0; border-top:1px solid var(--line); margin:0; padding:12px 0 10px; min-width:0}
.fblock legend{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding:12px 0 6px; float:left; width:100%}
.fblock select{width:100%}
.opts{clear:both; display:flex; flex-direction:column; gap:2px}
.opt{display:flex; align-items:center; gap:8px; padding:4px 2px; cursor:pointer; font-size:14px; border-radius:6px}
.opt:hover{background:rgba(255,255,255,.03)}
.opt[hidden]{display:none}
.opt input{accent-color:var(--green); width:16px; height:16px; flex:none; margin:0}
.opt .ol{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.opt .on{color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums}
.opt.solo .ol{white-space:normal}
.fsearch{width:100%; margin-bottom:6px; clear:both}
.more{font-size:13px; margin-top:4px}
.range{clear:both; display:flex; align-items:center; gap:6px}
.range input{width:100%; min-width:0}
.hint{color:var(--muted); font-size:12px; margin:4px 0 2px; clear:both}

.rhead{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; min-height:32px}
#count{font-weight:700; font-size:16px}
.pills{display:flex; gap:6px; flex-wrap:wrap}
.pill{background:rgba(140,198,63,.12); border:1px solid rgba(140,198,63,.4); border-radius:20px; padding:4px 10px; font-size:13px; cursor:pointer}
.pill span{margin-left:4px; opacity:.8}
.pill:hover{border-color:var(--green)}
body.loading .grid{opacity:.55; transition:opacity .2s .15s}

/* ---------- resultaten ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:16px}
.mod{display:flex; flex-direction:column; background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:border-color .15s, transform .15s}
.mod:hover{border-color:#4a5540; transform:translateY(-2px)}
.thumb{position:relative; display:block; aspect-ratio:16/9; background:var(--bg2); overflow:hidden}
.thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1}
.thumb .ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  color:var(--muted); font-size:13px; font-weight:600; background:radial-gradient(circle at 50% 40%, #2a3322 0%, var(--bg2) 70%)}
.thumb .phi{font-size:42px; line-height:1; filter:saturate(.8)}
.specs{position:absolute; left:8px; bottom:8px; z-index:2; display:flex; gap:5px; flex-wrap:wrap}
.spec{background:rgba(16,19,14,.85); border:1px solid rgba(255,255,255,.15); border-radius:6px; padding:2px 7px; font-size:12px; font-weight:700; backdrop-filter:blur(4px)}
.spec.map{background:var(--green); color:#10130e; border-color:var(--green)}
.body{display:flex; flex-direction:column; gap:7px; padding:12px 14px 14px; flex:1}
.body h3{font-size:16px; line-height:1.25}
.mod.installed{border-color:rgba(140,198,63,.55); box-shadow:0 0 0 1px rgba(140,198,63,.25)}
.onserver{align-self:flex-start; font-size:12px; font-weight:700; color:#10130e; background:var(--green); border-radius:6px; padding:3px 8px}
.onserver span{font-weight:600; opacity:.75}
.onserver b{color:#10130e; background:var(--wheat); border-radius:4px; padding:0 5px; margin-left:4px}
.body h3 a{color:var(--text); text-decoration:none}
.body h3 a:hover{color:var(--green2); text-decoration:underline}
.by{color:var(--muted); font-size:13px}
.by .link{color:var(--muted)}
.by .link:hover{color:var(--green2)}
.rate{font-size:13px; display:flex; align-items:center; gap:5px}
.rate span{color:var(--muted)}
.stars{display:inline-flex; gap:1px}
.stars i{width:12px; height:12px; background:#3a4232; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stars i.f{background:var(--wheat)}
.stars i.h{background:linear-gradient(90deg, var(--wheat) 50%, #3a4232 50%)}
.meta{color:var(--muted); font-size:12.5px; display:flex; flex-wrap:wrap; gap:4px}
.meta .sep{opacity:.5}
.desc{margin:0; font-size:13px; color:#c9d0bd; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.req{font-size:12.5px; color:var(--wheat); background:rgba(230,192,104,.08); border:1px solid rgba(230,192,104,.25); border-radius:8px; padding:6px 8px}
.foot{margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; padding-top:6px}
.plats{display:flex; gap:4px; flex-wrap:wrap}
.plat{font-size:11px; font-weight:700; color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:1px 6px}
.plat.warn{color:var(--red); border-color:rgba(224,101,79,.5)}
.plat.ok{color:var(--ok); border-color:rgba(87,200,77,.45)}
.links{display:flex; gap:6px}
.go{font-size:13px; font-weight:700; text-decoration:none; border-radius:8px; padding:6px 10px; border:1px solid; white-space:nowrap}
.go.modhub{color:var(--modhub); border-color:rgba(90,169,201,.5); background:rgba(90,169,201,.08)}
.go.kingmods{color:var(--kingmods); border-color:rgba(230,192,104,.5); background:rgba(230,192,104,.08)}
.go:hover{filter:brightness(1.2)}
.empty{grid-column:1/-1; text-align:center; color:var(--muted); padding:60px 20px; background:var(--panel); border:1px dashed var(--line); border-radius:14px}

.pager{display:flex; justify-content:center; align-items:center; gap:14px; margin:22px 0 4px; color:var(--muted)}
.pager button{background:var(--panel2); border:1px solid var(--line); border-radius:10px; padding:8px 14px; cursor:pointer; font-weight:600}
.pager button:disabled{opacity:.4; cursor:default}
.pager button:not(:disabled):hover{border-color:var(--green)}

footer{max-width:1720px; margin:0 auto; padding:10px 20px 40px; color:var(--muted); font-size:13px}

/* ---------- smal scherm: filters als uitklapbaar paneel ---------- */
@media (max-width: 900px){
  header.top{padding:12px 16px 8px; position:static}
  .titlebar .sub{display:none}
  .titlebar h1{font-size:20px}
  .filterbtn{display:block}
  .searchbar{flex-wrap:wrap}
  .searchbar input[type=search]{flex-basis:100%}
  .searchbar select{flex:1; padding:10px 12px}
  main{grid-template-columns:1fr; padding:14px 16px}
  .filters{display:none; position:static; max-height:none}
  body.filters-open .filters{display:block}
  .grid{grid-template-columns:1fr}
  footer{padding:10px 16px 30px}
}