/* Resultatenpagina — dicht maar rustig */

/* ---------- zoekbalk ---------- */
.searchbar{background:var(--surface);border-bottom:1px solid var(--line);padding:12px 20px 14px}
.sb-in{max-width:1360px;margin:0 auto}
.sb-opts{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.drop{height:28px;padding:0 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);font-size:14px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.drop:hover{border-color:var(--line-3);color:var(--ink)}
.drop svg{color:var(--ink-4)}
.drop.hot{border-color:var(--brand);color:var(--brand);background:var(--brand-lo)}
.sb-opts .sep{width:1px;height:16px;background:var(--line);margin:0 3px}
.sb-fields{display:grid;grid-template-columns:1fr 34px 1fr 128px 128px auto;gap:6px;align-items:stretch}
.fld{position:relative;background:var(--surface);border:1.4px solid var(--line-2);border-radius:var(--r-m);padding:7px 12px;min-height:46px;display:flex;flex-direction:column;justify-content:center;cursor:pointer;transition:border-color .13s,box-shadow .13s}
.fld:hover{border-color:var(--line-3)}
.fld.act{border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,107,69,.11)}
.fld .lb{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);margin-bottom:1px}
.fld .vl{font-size:16.5px;font-weight:600;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fld .vl .iata{color:var(--ink-3);font-weight:500}
.swap{border:1.4px solid var(--line-2);border-radius:var(--r-m);background:var(--surface);display:grid;place-items:center;color:var(--ink-2)}
.swap:hover{border-color:var(--brand);color:var(--brand)}
.sb-fields .btn{min-height:46px;padding:0 26px;border-radius:var(--r-m);font-size:16.5px}
.sb-under{display:flex;align-items:center;gap:16px;margin-top:9px;flex-wrap:wrap}
.cbx{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;user-select:none}
.cbx .bx{width:16px;height:16px;border:1.5px solid var(--line-3);border-radius:4px;background:var(--surface);position:relative;flex-shrink:0;transition:background .12s,border-color .12s}
.cbx:hover .bx{border-color:var(--brand)}
.cbx.on .bx{background:var(--brand);border-color:var(--brand)}
.cbx.on .bx::after{content:"";position:absolute;left:4.5px;top:1px;width:4px;height:8.5px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}

/* ---------- prijspositie ---------- */
.verdict{max-width:1360px;margin:16px auto 0;padding:0 20px}
.vd-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:16px 20px;display:grid;grid-template-columns:1fr 400px;gap:32px;align-items:center}
.vd-l h2{font-size:21.5px;margin-bottom:3px}
.vd-l h2 .em{color:var(--brand)}
.vd-l p{margin:0;color:var(--ink-2);font-size:14.5px;max-width:60ch}
.vd-adv{display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:5px 11px;border-radius:99px;font-size:13.5px;font-weight:700;border:1px solid}
.scale{position:relative;padding-top:30px}
.scale .bar{display:flex;gap:3px;height:7px}
.scale .bar span{flex:1;border-radius:99px}
.scale .bar .c{background:#2f9367}.scale .bar .m{background:#e0a92f}.scale .bar .h{background:#cf5b3f}
.scale .mark{position:absolute;top:26px;width:15px;height:15px;border-radius:50%;background:var(--surface);border:3.5px solid var(--dark);transform:translateX(-50%);box-shadow:var(--sh-1)}
.scale .tip{position:absolute;top:0;transform:translateX(-50%);background:var(--dark);color:#fff;font-size:13.5px;font-weight:600;padding:5px 10px;border-radius:7px;white-space:nowrap}
.scale .tip::after{content:"";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%) rotate(45deg);width:8px;height:8px;background:var(--dark)}
.scale .ax{display:flex;justify-content:space-between;margin-top:7px;font-size:12.5px;font-weight:600;color:var(--ink-3)}

/* ---------- dagstrip ---------- */
.days{max-width:1360px;margin:12px auto 0;padding:0 20px;display:flex;gap:5px;overflow-x:auto}
.day{flex:1 0 auto;min-width:96px;border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);padding:8px 10px;text-align:left;transition:border-color .12s,transform .07s}
.day:hover{border-color:var(--line-3)}
.day:active{transform:translateY(1px)}
.day .dd{display:block;font-size:12.5px;font-weight:600;color:var(--ink-3);margin-bottom:2px}
.day .dp{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em}
.day.heat-c{background:var(--cheap-bg);border-color:var(--cheap-bd)}
.day.heat-c .dd,.day.heat-c .dl{color:var(--cheap-ink);opacity:.72}
.day.heat-c .dp{color:var(--cheap-ink)}
.day.heat-h{background:var(--high-bg);border-color:var(--high-bd)}
.day.heat-h .dd,.day.heat-h .dl{color:var(--high-ink);opacity:.72}
.day.heat-h .dp{color:var(--high-ink)}
.day.on{background:var(--dark);border-color:var(--dark)}
.day.on .dd{color:rgba(255,255,255,.62)}
.day.on .dp{color:#fff}
.day.on .dl{color:rgba(255,255,255,.5)}
.day .dl{display:block;font-size:12.5px;font-weight:600;color:var(--ink-4);margin-top:1px}

/* ---------- layout ---------- */
.wrap{max-width:1360px;margin:0 auto;padding:16px 20px 70px;display:grid;grid-template-columns:236px 1fr;gap:20px;align-items:start}
.rail{position:sticky;top:70px;display:grid;gap:10px}
.mfilter{display:none}

/* filterkaart */
.fcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:14px 15px}
.fcard>.hd{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.fcard>.hd h3{font-size:15.5px;letter-spacing:-.01em}
.fg{padding:11px 0;border-top:1px solid var(--line)}
.fg:first-of-type{border-top:0;padding-top:6px}
.fg>.t{font-size:13.5px;font-weight:700;color:var(--ink-2);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.fg>.t .n{color:var(--ink-4);font-weight:600;font-size:12.5px}
.seg3{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.opt{border:1px solid var(--line);border-radius:8px;background:var(--surface-2);padding:6px 4px;text-align:center;font-size:12.5px;font-weight:600;color:var(--ink-2);transition:background .12s,border-color .12s}
.opt:hover{border-color:var(--line-3)}
.opt .p{display:block;font-size:12.5px;font-weight:600;color:var(--ink-4);margin-top:1px}
.opt.on{background:var(--dark);border-color:var(--dark);color:#fff}
.opt.on .p{color:rgba(255,255,255,.58)}
.opt[disabled]{opacity:.4;cursor:not-allowed}
.chk{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer;user-select:none}
.chk .bx{width:15px;height:15px;border:1.5px solid var(--line-3);border-radius:4px;background:var(--surface);position:relative;flex-shrink:0}
.chk:hover .bx{border-color:var(--brand)}
.chk.on .bx{background:var(--brand);border-color:var(--brand)}
.chk.on .bx::after{content:"";position:absolute;left:4px;top:.5px;width:4px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.chk .pr{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--ink-4)}
.rng{padding-top:2px}
.rng input{width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:99px;accent-color:var(--brand);background:linear-gradient(90deg,var(--brand) 0 var(--fill,60%),var(--surface-3) var(--fill,60%) 100%);outline:0}
.rng input::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--surface);border:3px solid var(--dark);cursor:grab}
.rng input::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--surface);border:3px solid var(--dark);cursor:grab;border-color:var(--dark)}
.rng .ax,.rng.ax{display:flex;justify-content:space-between;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--ink-3)}

/* prijsalarm */
.alarm{background:var(--dark);border-radius:var(--r-l);padding:14px 15px;color:#fff}
.alarm h3{color:#fff;font-size:15.5px;margin-bottom:3px}
.alarm p{margin:0 0 10px;font-size:13.5px;color:rgba(255,255,255,.62);line-height:1.4}
.alarm .row{display:flex;align-items:center;gap:9px}
.sw{width:38px;height:22px;border-radius:99px;background:rgba(255,255,255,.2);border:0;position:relative;flex-shrink:0;transition:background .15s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.sw.on{background:#2f9367}
.sw.on::after{left:19px}
.alarm .st{font-size:13.5px;font-weight:600}

/* ---------- resultaten ---------- */
.head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.head .cnt{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.head .cnt b{color:var(--ink);font-weight:800}
.sorts{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:3px;gap:2px}
.sorts button{height:32px;padding:0 13px;border:0;border-radius:8px;background:transparent;font-size:14px;font-weight:600;color:var(--ink-3);display:inline-flex;align-items:baseline;gap:6px}
.sorts button:hover{background:var(--surface-2);color:var(--ink)}
.sorts button .v{font-size:12.5px;font-weight:600;color:var(--ink-4)}
.sorts button.on{background:var(--dark);color:#fff}
.sorts button.on .v{color:rgba(255,255,255,.6)}

.list{display:grid;gap:8px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);transition:border-color .13s,box-shadow .13s}
.card:hover{border-color:var(--line-3);box-shadow:var(--sh-2)}
.card.best{border-color:var(--brand-lo-2)}
.c-top{display:flex;align-items:center;gap:7px;padding:9px 15px 0;flex-wrap:wrap}
.bdg{height:21px;padding:0 8px;border-radius:5px;font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:5px;border:1px solid}
.bdg.g{background:var(--brand-lo);border-color:var(--brand-lo-2);color:var(--brand)}
.bdg.n{background:var(--surface-2);border-color:var(--line);color:var(--ink-2)}
.bdg.w{background:var(--mid-bg);border-color:var(--mid-bd);color:var(--mid-ink)}
.c-body{display:grid;grid-template-columns:1fr 178px;gap:0}
.legs{padding:8px 15px 11px}
.leg{display:grid;grid-template-columns:26px 1fr 116px;gap:12px;align-items:center;padding:6px 0}
.leg+.leg{border-top:1px dashed var(--line)}
.leg .al{width:26px;height:26px;border-radius:6px;display:grid;place-items:center;font-size:12.5px;font-weight:800;color:var(--bg);background:var(--dark);letter-spacing:-.02em}
.leg .tm{display:flex;align-items:center;gap:10px}
.leg .tm .t{font-size:17.5px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.leg .tm .ap{font-size:12.5px;font-weight:600;color:var(--ink-3);white-space:nowrap}
.leg .tm .ln{flex:1;min-width:34px;height:1.5px;background:var(--line-2);border-radius:99px;position:relative}
.leg .tm .ln.s1::after,.leg .tm .ln.s2::after{content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:5.5px;height:5.5px;border-radius:50%;background:var(--mid-ink)}
.leg .tm .ln.s2::before{content:"";position:absolute;top:-2px;left:30%;width:5.5px;height:5.5px;border-radius:50%;background:var(--mid-ink)}
.leg .mt{text-align:right;font-size:12.5px;font-weight:600;color:var(--ink-3);line-height:1.35}
.leg .mt .du{color:var(--ink);font-weight:700;font-size:14px}
.leg .mt .dr{color:var(--brand)}
.legs .fx{display:flex;align-items:center;gap:12px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:12.5px;font-weight:600;color:var(--ink-3);flex-wrap:wrap}
.legs .fx .x{display:inline-flex;align-items:center;gap:5px}
.legs .fx .x svg{color:var(--ink-4)}
.legs .fx .x.no{color:var(--mid-ink)}
.legs .fx .x.no svg{color:var(--mid-ink)}
.legs .fx .dt{margin-left:auto}
.buy{border-left:1px dashed var(--line);padding:12px 15px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.buy .pv{font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1}
.buy .pu{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.buy .pd{font-size:12.5px;font-weight:700;margin-top:2px}
.buy .btn{margin-top:9px;width:100%}
.buy .tot{font-size:12.5px;font-weight:600;color:var(--ink-4);margin-top:5px;text-align:center}

/* detail uitklap */
.det{display:none;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 var(--r-l) var(--r-l);padding:14px 15px}
.card.open .det{display:block}
.det .dh{font-size:13.5px;font-weight:800;letter-spacing:-.01em;margin-bottom:8px;display:flex;justify-content:space-between;align-items:baseline}
.det .dh .m{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.det .dh+.dh{margin-top:14px}
.tl{display:grid;gap:0}
.tr{display:grid;grid-template-columns:52px 1fr;gap:12px}
.tr .wn{text-align:right;font-size:14.5px;font-weight:700;letter-spacing:-.015em;padding-top:1px}
.tr .wn i{display:block;font-size:12.5px;font-weight:600;color:var(--ink-4);font-style:normal}
.tr .wt{position:relative;padding-left:20px;padding-bottom:13px}
.tr .wt::before{content:"";position:absolute;left:3px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--surface);border:2px solid var(--brand)}
.tr.tsf .wt::before{border-color:var(--ink-4)}
.tr .wt::after{content:"";position:absolute;left:6.2px;top:14px;bottom:0;width:1.5px;background:var(--line-2)}
.tr:last-child .wt::after{display:none}
.tr .wt .pl{font-size:14px;font-weight:700;letter-spacing:-.01em}
.tr .wt .sb{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.sgm{margin-top:6px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:8px 10px;display:flex;align-items:center;gap:10px}
.sgm .al{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;font-size:12.5px;font-weight:800;color:var(--bg);background:var(--dark);flex-shrink:0}
.sgm .in{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.sgm .in i{display:block;font-style:normal;font-weight:600;color:var(--ink-4);font-size:12.5px}
.warn{margin-top:6px;background:var(--mid-bg);border:1px solid var(--mid-bd);border-radius:9px;padding:8px 10px;font-size:12.5px;font-weight:600;color:var(--mid-ink);display:flex;gap:8px;align-items:center}
.warn svg{flex-shrink:0}

.empty{background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r-l);padding:44px 24px;text-align:center}
.empty h3{font-size:19px;margin-bottom:5px}
.empty p{margin:0 0 14px;color:var(--ink-3);font-size:14.5px}

/* ---------- kalender overlay ---------- */
.scrim{position:fixed;inset:0;background:rgba(20,32,28,.42);opacity:0;pointer-events:none;transition:opacity .18s;z-index:60}
.scrim.on{opacity:1;pointer-events:auto}
.cal{position:fixed;z-index:61;left:50%;top:50%;transform:translate(-50%,-48%) scale(.98);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:20px;width:min(680px,calc(100vw - 32px))}
.cal.on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.cal .ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal .ch h3{font-size:18px}
.cal .ch .cl{width:30px;height:30px;border:1px solid var(--line);border-radius:8px;background:var(--surface);display:grid;place-items:center;color:var(--ink-2)}
.cal .ch .cl:hover{border-color:var(--line-3)}
.cmonths{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cm .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cm .mh .t{font-size:14.5px;font-weight:800;letter-spacing:-.01em}
.cm .mh button{width:24px;height:24px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink-2);display:grid;place-items:center}
.cm .dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px}
.cm .dow span{text-align:center;font-size:12.5px;font-weight:700;color:var(--ink-4)}
.cm .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cd{aspect-ratio:1/.86;border:1px solid transparent;border-radius:6px;background:var(--surface-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;font-family:inherit;padding:0}
.cd .n{font-size:13.5px;font-weight:700;line-height:1.1}
.cd .p{font-size:12.5px;font-weight:600;opacity:.85;line-height:1.1}
.cd:hover{border-color:var(--dark)}
.cd.heat-c{background:var(--cheap-bg);color:var(--cheap-ink)}
.cd.heat-m{background:var(--mid-bg);color:var(--mid-ink)}
.cd.heat-h{background:var(--high-bg);color:var(--high-ink)}
.cd.void{background:transparent;pointer-events:none}
.cd.sel{background:var(--dark);border-color:var(--dark);color:#fff}
.cd.sel .p{color:rgba(255,255,255,.65)}
.cal .lg{display:flex;align-items:center;gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink-3);flex-wrap:wrap}
.cal .lg .k{display:inline-flex;align-items:center;gap:6px}
.cal .lg .k i{width:11px;height:11px;border-radius:3px;display:block}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .vd-card{grid-template-columns:1fr;gap:18px}
  .wrap{grid-template-columns:1fr}
  .rail{position:static;display:none}
  .rail.open{display:grid}
  .mfilter{display:flex;align-items:center;gap:8px}
  .cmonths{grid-template-columns:1fr}
  .cm:last-child{display:none}
}
@media(max-width:820px){
  .sb-fields{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .swap{display:none}
  .sb-fields .btn{grid-column:1/-1}
  .c-body{grid-template-columns:1fr}
  .buy{border-left:0;border-top:1px dashed var(--line);flex-direction:row;align-items:center;justify-content:space-between;padding:11px 15px}
  .buy .btn{width:auto;margin-top:0;padding:0 20px}
  .buy .tot{display:none}
  .leg{grid-template-columns:22px 1fr;gap:9px}
  .leg .mt{grid-column:2;text-align:left;display:flex;gap:10px}
  .verdict,.days,.wrap,.sb-in{padding-left:14px;padding-right:14px}
  .top{padding:0 14px;gap:14px}
  .top nav{display:none}
}