/* ------------------------------------------------------------------
   Cookiebanner — Binnenstebuiten

   Markup:  index.html  (#cc-banner en #cc-settings-tab, onderaan <body>)
   Gedrag:  js/cookieConsent.js

   Alles staat standaard verborgen, zodat er niets kort in beeld flitst
   voordat het script weet of er al een keuze gemaakt is. Het script
   zet vervolgens de juiste class:

     #cc-banner.cc-open           toont de banner
     #cc-main.cc-active           toont het eerste scherm
     #cc-prefs.cc-active          toont het voorkeurenscherm
     #cc-settings-tab.cc-visible  toont de knop linksonder

   De kleuren komen uit de variabelen van style.css; de waarden erachter
   zijn een terugvalwaarde als dit bestand ooit apart gebruikt wordt.
   ------------------------------------------------------------------ */

  #cc-banner{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:300;
    display:none;
    justify-content:center;
    padding:16px;
    pointer-events:none;
    font-family:'Poppins',sans-serif;
  }
  #cc-banner.cc-open{display:flex;}
  #cc-banner *{box-sizing:border-box;}

  #cc-box{
    pointer-events:auto;
    width:100%;
    max-width:640px;
    background:var(--cream,#fcf2f2);
    color:var(--navy,#282c61);
    border:1px solid rgba(40,44,97,.12);
    border-radius:16px;
    box-shadow:0 8px 28px rgba(40,44,97,.18);
    padding:22px 24px;
    animation:cc-slide-in .35s ease-out;
  }
  @keyframes cc-slide-in{
    from{transform:translateY(16px);opacity:0;}
    to{transform:translateY(0);opacity:1;}
  }
  @media (prefers-reduced-motion:reduce){
    #cc-box{animation:none;}
  }

  #cc-box h2{margin:0 0 8px;font-size:17px;font-weight:600;}
  #cc-box p{margin:0 0 16px;font-size:14px;line-height:1.5;}
  #cc-box a{color:inherit;text-decoration:underline;}

  /* de twee schermen: overzicht en voorkeuren */
  #cc-main,#cc-prefs{display:none;}
  #cc-main.cc-active,#cc-prefs.cc-active{display:block;}

  .cc-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;}
  .cc-actions button{
    cursor:pointer;
    border:1px solid var(--navy,#282c61);
    border-radius:999px;
    padding:10px 20px;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    transition:opacity .15s ease;
  }
  .cc-actions button:hover{opacity:.85;}
  .cc-btn-primary{background:var(--navy,#282c61);color:var(--cream,#fcf2f2);}
  .cc-btn-secondary{background:transparent;color:var(--navy,#282c61);}

  /* één regel per cookiecategorie */
  .cc-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:12px 0;
    border-top:1px solid rgba(40,44,97,.12);
  }
  .cc-row:first-of-type{border-top:none;}
  .cc-row-text{flex:1;}
  .cc-row-text strong{display:block;font-size:14px;margin-bottom:2px;}
  .cc-row-text span{display:block;font-size:12.5px;line-height:1.4;opacity:.85;}

  /* aan/uit-schakelaar */
  .cc-switch{position:relative;flex-shrink:0;width:42px;height:24px;}
  .cc-switch input{position:absolute;width:0;height:0;opacity:0;}
  .cc-slider{
    position:absolute;
    inset:0;
    background:rgba(40,44,97,.25);
    border-radius:999px;
    cursor:pointer;
    transition:background .15s ease;
  }
  .cc-slider::before{
    content:'';
    position:absolute;
    left:3px;top:3px;
    width:18px;height:18px;
    background:#fff;
    border-radius:50%;
    transition:transform .15s ease;
  }
  .cc-switch input:checked + .cc-slider{background:var(--navy,#282c61);}
  .cc-switch input:checked + .cc-slider::before{transform:translateX(18px);}
  .cc-switch input:disabled + .cc-slider{cursor:not-allowed;opacity:.6;}
  .cc-switch input:focus-visible + .cc-slider{outline:2px solid var(--navy,#282c61);outline-offset:2px;}

  /* knop linksonder om de keuze achteraf aan te passen */
  #cc-settings-tab{
    position:fixed;
    left:16px;bottom:16px;
    z-index:290;
    display:none;
    align-items:center;
    gap:6px;
    background:var(--navy,#282c61);
    color:var(--cream,#fcf2f2);
    border:none;
    border-radius:999px;
    padding:9px 16px;
    font-family:'Poppins',sans-serif;
    font-size:12.5px;
    font-weight:600;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(40,44,97,.25);
  }
  #cc-settings-tab.cc-visible{display:inline-flex;}

  @media (max-width:480px){
    .cc-actions{justify-content:stretch;}
    .cc-actions button{flex:1;}
  }