/* De vormgeving van de cookiebanner staat in het theme (style.css, blok
   "15 may 24") en mikt op de classnamen van Complianz. Hier staat alleen wat
   de plugin zelf meebracht en het theme dus niet invult: de indeling van de
   knoppenrij en van de categorieën. */

#cmplz-cookiebanner-container[hidden] { display: none; }

.cmplz-cookiebanner .cmplz-header { align-items: center; }
.cmplz-cookiebanner .cmplz-title { width: 100%; }

.cmplz-cookiebanner .cmplz-body {
    /* De banner staat midden in beeld; als de voorkeuren openklappen moet de
       lijst schuiven en niet de knoppen uit beeld duwen. */
    max-height: 45vh;
    overflow-y: auto;
    width: 100%;
}

.cmplz-cookiebanner .cmplz-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.cmplz-cookiebanner .cmplz-buttons button[hidden] { display: none; }

/* Het theme verbergt Weigeren, zoals op de oude site. Toestemming intrekken
   hoort net zo makkelijk te zijn als geven, dus hier staat hij wél in beeld. */
.cmplz-cookiebanner .cmplz-buttons button.cmplz-deny {
    display: inline-block;
    background: #fff !important;
    color: #000b2b !important;
    /* Als rand zou hij 2px hoger worden dan de knop ernaast. */
    box-shadow: inset 0 0 0 1px #000b2b;
}

.cmplz-cookiebanner .cmplz-buttons button.cmplz-deny:hover {
    background: #98b2dc !important;
    color: #fff !important;
}

.cmplz-cookiebanner .cmplz-categories[hidden] { display: none; }

.cmplz-cookiebanner .cmplz-category:not(:last-child) { margin-bottom: 16px; }

.cmplz-cookiebanner .cmplz-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cmplz-cookiebanner .cmplz-category-header input { accent-color: #000b2b; }

.cmplz-cookiebanner .cmplz-always-active {
    margin-left: auto;
    font: 13px/26px 'Lato-Regular', sans-serif;
    color: #000b2b;
    opacity: .7;
}

/* De link onderin de footer waarmee je je keuze weer kunt aanpassen. */
.cookiebanner__voorkeuren {
    border: 0;
    padding: 0;
    background: none;
    /* De footer zet zijn kleur op de tekst zelf, niet op de omliggende div. */
    color: #fff;
    font: 14px/23px 'Lato-Regular', sans-serif;
    opacity: .7;
    text-decoration: underline;
    cursor: pointer;
}

.cookiebanner__voorkeuren:hover { opacity: 1; }