/* AFGELEID BESTAND - NIET MET DE HAND WIJZIGEN.
   De opmaak van de cookiemelding, afgeleid uit madvance-liquid-glass.html door
   dev-test/cookiekopie-test.cjs. Wijzig de melding in het WERKBESTAND en draai
   daarna `node dev-test/cookiekopie-test.cjs --zet`. */
/* DE TOKENS STAAN HIER LOKAAL, en dat is wat dit bestand zelfstandig maakt.
   De melding is op allebei de sites hetzelfde donkere blok onderaan het scherm.
   Zou hij de tokens van de pagina erven, dan kreeg hij op de witte site andere
   kleuren en andere maten dan waarop hij is doorgemeten - en juist van dit
   onderdeel liggen de hoogte (217px), de knopmaat (2 x 44px) en het contrast
   vast. Ze staan op #cookie-banner zelf, dus ze lekken nergens heen. */
#cookie-banner {
  --coral: #FF536C; --coral-rgb: 255, 83, 108; --coral-tx: var(--coral);
  --crimson: #F2135E; --cyan-rgb: 194, 248, 255; --cyan-tx: #C2F8FF;
  --dark3: #22303D; --ink: 255, 255, 255; --shade: 0, 0, 0;
  --ka: 1; --kb: 1; --ks: 1; --kt: 1;
  --navy: #1A2530; --salmon: #F78D7C; --teal: #9FD6DB;
  --teal-rgb: 159, 214, 219; --teal-tx: var(--teal);
  --r-md: 18px; --r-lg: 24px;
  --sans: 'Barlow', system-ui, sans-serif;
  --serif: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  /* DE MELDING ERFT GEEN TYPOGRAFIE VAN DE PAGINA. De titel zet wel een
     lettergrootte maar geen regelhoogte, dus hij erfde die van de body. Op de
     witte site is dat 1,65 en in de SPA staat hij op normal: gemeten werd de
     titel daar 23 pixels hoog in plaats van 17, en de hele melding 223 in
     plaats van 217.
     Dat valt niet op als een fout - de melding ziet er gewoon iets ruimer uit -
     terwijl juist van dit blok de hoogte is doorgemeten tegen de vaste
     actieknop op /start en /plan. */
  font-size: 16px;
  line-height: normal;
}
#cookie-banner{
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9999;
      width: calc(100% - 48px);
      max-width: 760px;
      background: rgba(var(--pnl, 26,37,48), 0.97);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(var(--ink), calc(0.12 * var(--ka)));
      border-radius: 18px;
      padding: 20px 24px;
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      box-shadow: 0 8px 40px rgba(var(--shade), calc(0.55 * var(--ks)));
      transition: opacity .35s, transform .35s;
      
      max-height: calc(100dvh - 32px);
      overflow-y: auto;
    }
#cookie-banner.hidden{
      opacity: 0;
      transform: translateX(-50%) translateY(20px);
      pointer-events: none;
    }
.cookie-banner-text{
      flex: 1;
      min-width: 200px;
    }
.cookie-banner-title{
      font-size: 14px;
      font-weight: 600;
      color: rgb(var(--ink));
      margin-bottom: 4px;
    }
.cookie-banner-sub{
      font-size: 12px;
      font-weight: 400;
      color: rgba(var(--ink), calc(0.78 * var(--kt)));
      line-height: 1.6;
    }
.cookie-banner-sub a{
      color: rgba(var(--cyan-rgb), 0.85);
      text-decoration: none;
    }
.cookie-banner-sub a:hover{
      color: var(--cyan-tx);
    }
.cookie-banner-keuzes{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 9px;
      flex-shrink: 0;
    }
.cookie-banner-keuzes[hidden]{ display: none; }
.cookie-banner-btns{
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      flex-shrink: 0;
    }
.cookie-btn-accept, .cookie-btn-wijzig{
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      border: 1px solid transparent;
      border-radius: 100px;
      padding: 10px 20px;
      cursor: pointer;
      white-space: nowrap;
      transition: background .2s, border-color .2s, color .2s;
    }
.cookie-btn-wijzig{
      background: transparent;
      color: rgba(var(--ink), calc(0.92 * var(--kt)));
      border-color: rgba(var(--ink), calc(0.30 * var(--ka)));
    }
.cookie-btn-accept{
      background: var(--coral);
      color: var(--navy);
      border-color: var(--coral);
    }
.cookie-btn-wijzig:hover{
      background: rgba(var(--ink), calc(0.07 * var(--kb)));
      border-color: rgba(var(--ink), calc(0.55 * var(--ka)));
      color: rgb(var(--ink));
    }
.cookie-btn-accept:hover{
      background: var(--crimson);
      border-color: var(--crimson);
      color: #fff;
    }
.cookie-btn-accept:focus-visible, .cookie-btn-wijzig:focus-visible{
      outline: 2px solid var(--teal);
      outline-offset: 2px;
    }
.cookie-paneel{
      flex-basis: 100%;
      display: flex;
      flex-direction: column;
      gap: 11px;
      min-height: 0;
      padding-top: 14px;
      border-top: 1px solid rgba(var(--ink), calc(0.12 * var(--ka)));
    }
.cookie-paneel[hidden]{ display: none; }
.cookie-pan-lijst{
      display: flex;
      flex-direction: column;
      gap: 11px;
      min-height: 0;
      
      max-height: max(96px, min(40vh, 260px, calc(100dvh - 280px)));
      overflow-y: auto;
    }
.cookie-pan-rij{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }
.cookie-pan-tekst{
      flex: 1;
      min-width: 0;
    }
.cookie-pan-naam{
      font-size: 12.5px;
      font-weight: 600;
      color: rgb(var(--ink));
      margin-bottom: 2px;
    }
.cookie-pan-uitleg{
      font-size: 11.5px;
      font-weight: 400;
      line-height: 1.5;
      color: rgba(var(--ink), calc(0.70 * var(--kt)));
    }
.cookie-pan-vast{
      flex-shrink: 0;
      padding-top: 2px;
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      white-space: nowrap;
      color: rgba(var(--ink), calc(0.55 * var(--kt)));
    }
.cookie-pan-schakel{
      position: relative;
      flex-shrink: 0;
      box-sizing: border-box;
      width: 44px;
      height: 26px;
      padding: 0;
      border: 1px solid rgba(var(--ink), calc(0.30 * var(--ka)));
      border-radius: 100px;
      background: rgba(var(--ink), calc(0.08 * var(--kb)));
      cursor: pointer;
      transition: background .2s, border-color .2s;
    }
.cookie-pan-schakel::after{
      content: '';
      position: absolute;
      inset: -9px -4px;
    }
.cookie-pan-bol{
      position: absolute;
      top: 50%;
      left: 3px;
      width: 18px;
      height: 18px;
      margin-top: -9px;
      border-radius: 50%;
      background: rgba(var(--ink), calc(0.55 * var(--kt)));
      transition: transform .2s, background .2s;
    }
.cookie-pan-schakel[aria-checked="true"]{
      background: var(--coral);
      border-color: var(--coral);
    }
.cookie-pan-schakel[aria-checked="true"] .cookie-pan-bol{
      transform: translateX(18px);
      background: var(--navy);
    }
.cookie-pan-schakel:focus-visible{
      outline: 2px solid var(--teal);
      outline-offset: 3px;
    }
@media(max-height: 560px){
#cookie-banner.paneel-open .cookie-banner-sub{ display: none; }
}
.cookie-pan-btns{
      display: flex;
      gap: 8px;
      margin-top: 1px;
    }
.cookie-pan-opslaan, .cookie-pan-weiger{
      flex: 1 1 0;
      font-family: var(--sans);
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      border: 1px solid transparent;
      border-radius: 100px;
      padding: 10px 14px;
      min-height: 40px;
      cursor: pointer;
      transition: background .2s, border-color .2s, color .2s;
    }
.cookie-pan-opslaan{
      background: var(--coral);
      color: var(--navy);
      border-color: var(--coral);
    }
.cookie-pan-weiger{
      background: transparent;
      color: rgba(var(--ink), calc(0.92 * var(--kt)));
      border-color: rgba(var(--ink), calc(0.30 * var(--ka)));
    }
.cookie-pan-opslaan:hover{
      background: var(--crimson);
      border-color: var(--crimson);
      color: #fff;
    }
.cookie-pan-weiger:hover{
      background: rgba(var(--ink), calc(0.07 * var(--kb)));
      border-color: rgba(var(--ink), calc(0.55 * var(--ka)));
      color: rgb(var(--ink));
    }
.cookie-pan-opslaan:focus-visible, .cookie-pan-weiger:focus-visible{
      outline: 2px solid var(--teal);
      outline-offset: 2px;
    }
@media(max-width:600px){
#cookie-banner{
        bottom: 16px;
        left: 16px;
        right: 16px;
        width: auto;
        transform: none;
        
        padding: 13px;
        gap: 14px;
      }
#cookie-banner.hidden{
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
      }
.cookie-banner-keuzes{ width: 100%; }
body.lp-cta-aan #cookie-banner{ bottom: calc(16px + var(--lp-cta-h) + env(safe-area-inset-bottom)); }
body.lp-cta-aan #cookie-banner.hidden{ transform: translateY(20px); }
.cookie-banner-btns{ width: 100%; }
.cookie-btn-accept, .cookie-btn-wijzig{
        flex: 1 1 100%;
        text-align: center;
        
        min-height: 44px;
      }
.cookie-pan-lijst{ max-height: max(96px, min(38vh, 240px, calc(100dvh - 268px))); }
}
.cookie-cat-badge{
      display: inline-block;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .06em;
      text-transform: uppercase;
      padding: 3px 9px;
      border-radius: 4px;
      margin-bottom: 8px;
    }