/* Basisstijlen pop-up */
    .cookie-popup {
      position:fixed;
      background: white;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
      z-index: 1000;
      animation: fadeIn 0.5s ease-out;
      margin: 15px;
      max-width: 90%;
    }

    /* Desktop - midden van het scherm */
    @media (min-width: 768px) {
      .cookie-popup {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        max-width: 80%;
      }
    }

    /* Mobiel - onderkant (compact) */
    @media (max-width: 767px) {
      .cookie-popup {
        bottom: 10px;
        left: 10px;
        right: 10px;
        max-width: none;
        padding: 10px;
        font-size: 13px;
        animation: slideUp 0.5s ease-out;
      }

      /* Automatisch verbergen na 5 seconden op mobiel */
      .cookie-popup {
        animation: 
          slideUp 0.5s ease-out,
          fadeOut 0.5s ease-out 1.5s forwards;
      }
    }

    .cookie-popup p {
      margin: 0 0 12px 0;
      line-height: 1.4;
    }

    .cookie-knop {
      background: #2c3e50;
      color: white;
      border: none;
      padding: 6px 12px;
      border-radius: 4px;
      cursor: pointer;
      font-size: inherit;
    }

    /* Animaties */
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes slideUp {
      from { transform: translateY(100%); }
      to { transform: translateY(0); }
    }

    @keyframes fadeOut {
      to { opacity: 0; visibility: hidden; }
    }

    /* Verbergen na acceptatie */
    #cookie-check:checked ~ .cookie-popup {
      display: none;
    }

    /* Alternatief voor als animaties niet werken */
    .cookie-popup {
      transition: opacity 0.5s;
    }
    #cookie-check:checked ~ .cookie-popup {
      opacity: 0;
      pointer-events: none;
    }