/* ——— Layout ——— */
#kolam-cookie-banner{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0);z-index:9999;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;transition:background .3s ease}
#kolam-cookie-banner.show{display:flex;background:rgba(0,0,0,var(--overlay-opacity))}
#kolam-cookie-banner .modal{background:var(--background-color);color:var(--text-color);padding:var(--modal-padding);max-width:660px;width:90%;border-radius:var(--border-radius);box-shadow:0 10px 25px rgba(0,0,0,.4);position:relative;opacity:0;transform:scale(0.95);transition:opacity .3s ease, transform .3s ease}
#kolam-cookie-banner.show .modal{opacity:1;transform:scale(1)}
#kolam-cookie-banner .close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.5rem;color:var(--text-color);cursor:pointer}
#kolam-cookie-banner .title{margin:0 1.5rem .75rem 0;font-size:1.5rem;font-weight:500;}
#kolam-cookie-banner .description{margin:0 0 1.5rem}

/* ——— Details toggles ——— */
#kolam-cookie-banner .details{margin-bottom:1.5rem;display:none;flex-direction:column;gap:.5rem}
#kolam-cookie-banner .details label{position:relative;padding-left:3.5rem;min-height:1.5rem;display:inline-flex;align-items:center;cursor:default;width:fit-content}
#kolam-cookie-banner .details input[type=checkbox]{display:none}

/* Custom Switch Styling */
#kolam-cookie-banner .details label::before {content:'';display:inline-block;width:2.5rem;height:1.25rem;background:#333;border-radius:1rem;position:absolute;left:0;top:50%;transform:translateY(-50%);transition:background .2s ease;cursor:pointer}
#kolam-cookie-banner .details label::after{content:'';display:inline-block;width:1rem;height:1rem;background:#fff;border-radius:50%;position:absolute;left:.125rem;top:50%;transform:translateY(-50%);transition:transform .2s ease}
#kolam-cookie-banner .details input[type=checkbox]:checked + label::before{background:var(--toggle-color)}
#kolam-cookie-banner .details input[type=checkbox]:checked + label::after{transform:translate(1.25rem, -50%)}
#kolam-cookie-banner .details input[type=checkbox]:disabled + label::before{background:#666;opacity:.5;cursor:not-allowed}
#kolam-cookie-banner .details input[type=checkbox]:disabled + label::after{background:#ccc}

/* Adjust label positioning */
#kolam-cookie-banner .details label{position:relative;padding-left:3.5rem;min-height:1.5rem;display:flex;align-items:center;cursor:default}
#kolam-cookie-banner .details input[type=checkbox]{display:none}

/* ——— Actieknoppen ——— */
#kolam-cookie-banner .actions{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content: space-between;}
#kolam-cookie-banner .actions .buttons{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
#kolam-cookie-banner .btn{border:none;padding:.75rem 1.5rem;font-size:1rem;cursor:pointer;border-radius:var(--button-border-radius);transition:background .2s ease}
#kolam-cookie-banner .btn--deny{background:var(--deny-background);color:var(--deny-text-color);border:1px solid var(--deny-border-color)}
#kolam-cookie-banner .btn--deny:hover{background:var(--deny-hover-color);border-color:var(--deny-border-hover-color)}
#kolam-cookie-banner .btn--accept{background:var(--accept-color);color:var(--accept-text-color);border:1px solid var(--accept-border-color)}
#kolam-cookie-banner .btn--accept:hover{background:var(--accept-hover-color);border-color:var(--accept-border-hover-color)}
#kolam-cookie-banner .btn--details{background:transparent;color:#b4b4b4;padding:0;}
#kolam-cookie-banner .btn--details:hover{background:none;color:var(--text-color)}
#kolam-cookie-banner .btn--save{background:var(--accept-color);color:var(--accept-text-color);border:1px solid var(--accept-border-color)}
#kolam-cookie-banner .btn--save:hover{background:var(--accept-hover-color);border-color:var(--accept-border-hover-color)}
#kolam-cookie-banner .icon-gear{width:1em;height:1em;margin-right:.5em;vertical-align:-0.125em;fill:currentColor;flex-shrink:0;}
#kolam-cookie-banner .icon-close{width:0.75em;height:0.75em;fill:currentColor;vertical-align:middle;}

@media (max-width:768px){
    #kolam-cookie-banner .actions{flex-direction:column}
    #kolam-cookie-banner .btn{width:100%;width:-webkit-fill-available;}
    #kolam-cookie-banner .btn--details{margin-bottom:0.5rem;}
}