/* ITLIVE-PAKKET-WIDGET-20261019 — gedeelde selectie-widget ("je selectie") voor /pakketten/ en elke
   pagina die pkCart gebruikt. Desktop/tablet: zwevende donkere kaart linksonder (rechtsonder zitten
   chat-, WhatsApp- en terug-naar-boven-knop). Mobiel: compacte balk onderaan, boven de vaste
   contactbalk en de veilige zone. Nooit over de sitekop. Hoogte/afstand rekent pk-mand.js uit. */
.pk-mand{
  --pk-gold:#fbbf24;--pk-gold-d:#f59e0b;--pk-ink:#0b1224;--pk-line:rgba(255,255,255,.12);
  position:fixed;left:24px;bottom:var(--pk-mand-bottom,24px);z-index:9990;width:380px;max-width:calc(100vw - 48px);
  color:#e2e8f0;font:500 14px/1.45 inherit;font-family:inherit;
  background:linear-gradient(160deg,rgba(17,27,54,.94),rgba(8,13,30,.96));
  -webkit-backdrop-filter:saturate(150%) blur(14px);backdrop-filter:saturate(150%) blur(14px);
  border:1px solid var(--pk-line);border-radius:18px;
  box-shadow:0 22px 50px -12px rgba(2,6,23,.55),0 0 0 1px rgba(2,6,23,.06),inset 0 1px 0 rgba(255,255,255,.06);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear .3s,bottom .2s ease;
}
.pk-mand.is-shown{opacity:1;visibility:visible;transform:none;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s,bottom .2s ease}
.pk-mand.is-bump{animation:pkMandBump .45s ease}
@keyframes pkMandBump{0%{transform:none}35%{transform:translateY(-4px) scale(1.015)}100%{transform:none}}
.pk-mand *{box-sizing:border-box}
.pk-mand svg{width:1em;height:1em;flex:none;fill:currentColor}

/* Uitklapbare lijst (boven de balk). grid-rows 0fr→1fr = vloeiend, zonder layoutsprong op de pagina */
.pk-mand__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.pk-mand.is-open .pk-mand__panel{grid-template-rows:1fr}
.pk-mand__panel-in{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s linear .3s}
.pk-mand.is-open .pk-mand__panel-in{visibility:visible;transition:visibility 0s}
.pk-mand__panel-body{padding:16px 18px 6px;border-bottom:1px solid var(--pk-line)}
.pk-mand__panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.pk-mand__panel-head h2{margin:0;font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#94a3b8}
.pk-mand__list{list-style:none;margin:0;padding:0;max-height:min(46vh,300px);overflow-y:auto;scrollbar-width:thin}
.pk-mand__item{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(255,255,255,.07)}
.pk-mand__item:first-child{border-top:0}
.pk-mand__item-nm{flex:1;min-width:0;color:#f8fafc;font-weight:700;font-size:.88rem;line-height:1.3}
.pk-mand__item-nm small{display:block;color:#94a3b8;font-weight:500;font-size:.74rem;margin-top:1px}
.pk-mand__item-pr{color:#f8fafc;font-weight:800;font-size:.86rem;white-space:nowrap}
.pk-mand__rm{width:30px;height:30px;border-radius:8px;border:0;background:transparent;color:#94a3b8;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem}
.pk-mand__rm:hover{background:rgba(248,113,113,.14);color:#fca5a5}
.pk-mand__panel-foot{display:flex;gap:8px;padding:10px 0 12px}
.pk-mand__link{background:none;border:0;padding:6px 0;color:#cbd5e1;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(203,213,225,.4)}
.pk-mand__link:hover{color:#fff;text-decoration-color:#fff}
.pk-mand__link + .pk-mand__link{margin-left:auto}

/* Balk */
.pk-mand__bar{display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px}
.pk-mand__toggle{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:100%;cursor:pointer;border-radius:12px;padding:4px 4px 4px 2px}
.pk-mand__count{min-width:34px;height:34px;padding:0 9px;border-radius:999px;background:var(--pk-gold);color:var(--pk-ink);font-weight:900;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;flex:none;box-shadow:0 0 0 4px rgba(251,191,36,.16)}
.pk-mand__txt{display:flex;flex-direction:column;min-width:0;flex:1}
.pk-mand__lbl{color:#cbd5e1;font-size:.8rem;font-weight:600}
.pk-mand__tot{color:#fff;font-size:1.15rem;font-weight:900;letter-spacing:-.01em;line-height:1.2}
.pk-mand__tot small{color:#94a3b8;font-size:.72rem;font-weight:600;margin-left:5px;letter-spacing:0}
.pk-mand__chev{color:#94a3b8;font-size:.8rem;transition:transform .25s}
.pk-mand.is-open .pk-mand__chev{transform:rotate(180deg)}
.pk-mand__acts{display:flex;gap:8px}
.pk-mand__ghost{flex:none;padding:10px 14px;border-radius:11px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#e2e8f0;font:inherit;font-size:.85rem;font-weight:700;cursor:pointer}
.pk-mand__ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.pk-mand__cta{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:11px;border:0;background:linear-gradient(135deg,#fcd34d,var(--pk-gold) 45%,var(--pk-gold-d));color:var(--pk-ink);font:inherit;font-size:.95rem;font-weight:900;cursor:pointer;box-shadow:0 8px 22px -8px rgba(251,191,36,.6);transition:transform .15s,filter .15s}
.pk-mand__cta:hover{filter:brightness(1.05);transform:translateY(-1px)}
.pk-mand__cta svg{font-size:.8rem}
.pk-mand button:focus-visible,.pk-mand__toggle:focus-visible{outline:2px solid var(--pk-gold);outline-offset:2px}
.pk-mand__sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Vergelijkbalk staat in dezelfde "stapel" boven de selectiekaart */
#pk-compare-bar.pk-cmp-float{position:fixed;left:24px;right:auto;width:380px;max-width:calc(100vw - 48px);bottom:var(--pk-cmp-bottom,24px);border-radius:14px;padding:10px 12px 10px 16px;justify-content:space-between;gap:10px;background:rgba(15,23,42,.96);border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 34px -10px rgba(2,6,23,.5);z-index:9989;transition:bottom .2s ease}
#pk-compare-bar.pk-cmp-float span{font-weight:700;font-size:.88rem;margin-right:auto}

@media (max-width:767px){
  .pk-mand{left:10px;right:10px;width:auto;max-width:none;border-radius:16px;bottom:calc(var(--pk-mand-bottom,10px) + env(safe-area-inset-bottom,0px))}
  .pk-mand__bar{flex-direction:row;align-items:center;gap:10px;padding:10px 10px 10px 12px}
  .pk-mand__toggle{flex:1;min-width:0;gap:10px;padding:2px}
  .pk-mand__count{min-width:30px;height:30px;font-size:.85rem;box-shadow:none}
  .pk-mand__lbl{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pk-mand__tot{font-size:1rem}
  .pk-mand__acts .pk-mand__ghost{display:none}
  .pk-mand__cta{flex:none;padding:11px 14px;font-size:.88rem}
  .pk-mand__cta .pk-mand__cta-long{display:none}
  .pk-mand__panel-body{padding:14px 14px 4px}
  #pk-compare-bar.pk-cmp-float{left:10px;right:10px;width:auto;max-width:none}
}
@media (min-width:768px){.pk-mand__cta .pk-mand__cta-short{display:none}}
@media (prefers-reduced-motion:reduce){.pk-mand,.pk-mand.is-shown,.pk-mand__panel{transition:none}.pk-mand.is-bump{animation:none}}
/* ITLIVE-PAKKET-WIDGET-TOAST-20261020: melding "toegevoegd" onderin bij de widget i.p.v. bovenin over de kop (positie: pk-mand.js) */
body #pk-toast.pk-toast-dock{top:auto;bottom:calc(var(--pk-toast-bottom,24px) + env(safe-area-inset-bottom,0px));left:var(--pk-toast-left,24px);right:auto;max-width:calc(100vw - 32px);transform:translateY(10px);transition:opacity .25s,transform .25s,bottom .2s,left .2s}
body #pk-toast.pk-toast-dock.show{transform:none}
@media (max-width:767px){
  body #pk-toast.pk-toast-dock{left:50%;transform:translate(-50%,10px)}
  body #pk-toast.pk-toast-dock.show{transform:translate(-50%,0)}
}
/* Open mobiel menu (header zet body.itl-nav-open): widget en vergelijkbalk wijken */
body.itl-nav-open .pk-mand,body.itl-nav-open #pk-compare-bar,body.itl-nav-open #pk-toast{opacity:0!important;visibility:hidden!important;pointer-events:none}
@media print{.pk-mand,#pk-compare-bar{display:none!important}}
/* ITLIVE-PAKKET-VERGELIJK-20261020: totaal in de widget = per maand + eenmalig apart; vergelijkbalk toont de gekozen pakketten */
.pk-mand__tot .pk-mand__per{margin-left:1px;color:#cbd5e1;font-size:.78rem}
.pk-mand__sub{display:block;font-size:.76rem;font-weight:600;color:#cbd5e1;letter-spacing:0;line-height:1.3}
@media (max-width:767px){.pk-mand__txt:has(.pk-mand__sub) .pk-mand__lbl{display:none}}
#pk-compare-bar{flex-wrap:wrap}
#pk-compare-bar .pk-cmp-chips{order:5;flex-basis:100%;display:flex;flex-wrap:nowrap;gap:6px;list-style:none;margin:0;padding:0;min-width:0}
#pk-compare-bar .pk-cmp-chips:empty{display:none}
#pk-compare-bar .pk-cmp-chips li{display:inline-flex;align-items:center;gap:2px;flex:0 1 auto;min-width:0;max-width:calc((100% - 12px) / 3);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:2px 2px 2px 10px;font-size:.76rem;font-weight:600;color:#e2e8f0}
#pk-compare-bar .pk-cmp-chips li span,#pk-compare-bar.pk-cmp-float .pk-cmp-chips li span{margin:0;font-size:.76rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#pk-compare-bar .pk-cmp-chips button{width:26px;height:26px;padding:0;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;line-height:1;color:#cbd5e1;background:transparent;border:0}
#pk-compare-bar .pk-cmp-chips button:hover{background:rgba(255,255,255,.15);color:#fff}
@media (max-width:767px){#pk-compare-bar .pk-cmp-chips{display:none}}
#pk-compare-bar.pk-cmp-float .clr{padding:8px 12px}
#pk-compare-bar.pk-cmp-float #pk-compare-go{padding:8px 16px}
/* ITLIVE-PAKKET-FILTERBALK-20261020 (CSS-deel: ITLIVE-PAKKET-FILTERBALK-CSS-20261020) — filterbalk /pakketten/.
   Oorzaak (gemeten 20-10, Playwright AX102): .filter-row was op ≥769px een flex-KOLOM met flex-wrap:wrap +
   align-items:center. Daardoor kreeg .filter-pills zijn max-content-breedte (3146px), werd de flexlijn even
   breed en stonden zoekveld/sorteren/weergave gecentreerd in die 3146px (x=1383 bij 1024). Nu: rij 1 = zoek +
   meta + tools (altijd in beeld), rij 2 = pillen in een scrollrail met fade en pijltjes. De balk plakt onder
   de sticky sitekop (--pk-navh, gezet door pakketten.php) i.p.v. erachter. */
#pk-filters{top:var(--pk-navh,0px)}
#pk-filters .filter-row{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 12px}
#pk-filters .filter-search-wrap{flex:1 1 280px;max-width:460px;min-width:0;width:auto}
#pk-filters .pk-search-meta{flex:1 1 120px;min-width:0;margin:0;min-height:0}
#pk-filters .filter-tools{flex:0 0 auto;margin-left:auto}
#pk-filters .pk-rail{position:relative;flex:1 1 100%;min-width:0;order:10}
#pk-filters .filter-pills,#pk-filters .filter-pills.pk-pills-open{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;position:relative;
  min-width:0;max-height:none;margin:0;padding:3px 2px 5px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;transition:none}
#pk-filters .filter-pills::-webkit-scrollbar{display:none}
#pk-filters .filter-pills .f-pill{flex:0 0 auto;white-space:nowrap}
#pk-filters .pk-rail.can-next .filter-pills{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 64px),transparent)}
#pk-filters .pk-rail.can-prev .filter-pills{-webkit-mask-image:linear-gradient(90deg,transparent,#000 64px);mask-image:linear-gradient(90deg,transparent,#000 64px)}
#pk-filters .pk-rail.can-prev.can-next .filter-pills{-webkit-mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent);mask-image:linear-gradient(90deg,transparent,#000 64px,#000 calc(100% - 64px),transparent)}
#pk-filters .pk-rail__arrow{position:absolute;top:50%;z-index:2;width:34px;height:34px;margin-top:-17px;padding:0;display:flex;align-items:center;justify-content:center;
  border:1.5px solid var(--border,#e2e8f0);border-radius:50%;background:#fff;color:var(--dark,#0f172a);cursor:pointer;
  box-shadow:0 4px 14px -4px rgba(15,23,42,.25);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s linear .2s,border-color .15s,color .15s}
#pk-filters .pk-rail__arrow svg{width:16px;height:16px}
#pk-filters .pk-rail__arrow:hover{border-color:var(--blue,#1a73e8);color:#1558b0}
#pk-filters .pk-rail__arrow:focus-visible{outline:2px solid var(--blue,#1a73e8);outline-offset:2px}
#pk-filters .pk-rail__arrow--prev{left:0}
#pk-filters .pk-rail__arrow--next{right:0}
#pk-filters .pk-rail.can-prev .pk-rail__arrow--prev,#pk-filters .pk-rail.can-next .pk-rail__arrow--next{opacity:1;visibility:visible;transition:opacity .2s,visibility 0s,border-color .15s,color .15s}
@media (max-width:768px){
  #pk-filters .filter-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center}
  #pk-filters .filter-search-wrap{grid-column:1/-1;order:1;max-width:none}
  #pk-filters .pk-mob-filter-btn{order:2}
  #pk-filters .filter-tools{order:3;width:auto;margin-left:0;min-width:0}
  #pk-filters .pk-sort-sel{min-width:0;width:100%}
  #pk-filters .pk-search-meta{grid-column:1/-1;order:4}
  #pk-filters .pk-search-meta:empty{display:none}
  #pk-filters .pk-rail{grid-column:1/-1;order:5;display:none}
  #pk-filters .pk-rail.is-open{display:block}
  #pk-filters .pk-rail__arrow{width:30px;height:30px;margin-top:-15px}
}
@media (prefers-reduced-motion:reduce){#pk-filters .filter-pills{scroll-behavior:auto}}