/**
 * MBM GDPR — frontend styling.
 * Zware banner-styling komt uit cookieconsent.css; brand-CSS-vars uit InlineCss.php.
 *
 * Class-hooks voor overrule via theme of "Custom CSS":
 *   .mbm-gdpr-revoke                  ← de knop zelf
 *   .mbm-gdpr-revoke--bottom-left     ← positie-modifier (+ bottom-right, top-left, top-right)
 *   .mbm-gdpr-revoke--hidden          ← verbergt knop vóór consent is opgeslagen
 *   .mbm-gdpr-revoke__icon            ← SVG container
 *   .mbm-gdpr-revoke__icon-body       ← cookie-vorm
 *   .mbm-gdpr-revoke__icon-chip       ← chocolade-stippen
 *
 * Alle visuele waarden zitten in --mbm-gdpr-revoke-* CSS-variabelen
 * zodat een klant ze via custom CSS kan overrulen zonder !important.
 */

.mbm-gdpr-revoke {
    /* Defensieve resets tegen theme/Elementor button-defaults */
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    background: none;

    /* Layout */
    position: fixed;
    width: var(--mbm-gdpr-revoke-size, 44px);
    height: var(--mbm-gdpr-revoke-size, 44px);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2147483646;

    /* Vormgeving */
    border-radius: var(--mbm-gdpr-revoke-radius, 999px);
    background-color: var(--mbm-gdpr-revoke-bg, #fffaf2);
    box-shadow:
        var(--mbm-gdpr-revoke-shadow,
            0 6px 18px -8px rgba(20, 14, 8, 0.35),
            0 2px 4px -2px rgba(20, 14, 8, 0.15)),
        inset 0 0 0 1px var(--mbm-gdpr-revoke-border, rgba(13, 110, 253, 0.35));

    transition:
        transform 220ms cubic-bezier(.2, .7, .2, 1.2),
        box-shadow 220ms ease,
        background-color 220ms ease,
        opacity 220ms ease;
}

/* Positie-modifiers */
.mbm-gdpr-revoke--bottom-left  { left:  var(--mbm-gdpr-revoke-offset, 22px); bottom: var(--mbm-gdpr-revoke-offset, 22px); }
.mbm-gdpr-revoke--bottom-right { right: var(--mbm-gdpr-revoke-offset, 22px); bottom: var(--mbm-gdpr-revoke-offset, 22px); }
.mbm-gdpr-revoke--top-left     { left:  var(--mbm-gdpr-revoke-offset, 22px); top:    var(--mbm-gdpr-revoke-offset, 22px); }
.mbm-gdpr-revoke--top-right    { right: var(--mbm-gdpr-revoke-offset, 22px); top:    var(--mbm-gdpr-revoke-offset, 22px); }

/* Hover / focus */
.mbm-gdpr-revoke:hover,
.mbm-gdpr-revoke:focus-visible {
    transform: translateY(-2px) scale(1.08);
    background-color: var(--mbm-gdpr-revoke-bg-hover, rgba(13, 110, 253, 0.12));
    box-shadow:
        var(--mbm-gdpr-revoke-shadow-hover,
            0 14px 32px -10px rgba(20, 14, 8, 0.45),
            0 4px 10px -2px rgba(20, 14, 8, 0.2)),
        inset 0 0 0 1px var(--mbm-gdpr-primary, #0d6efd);
    outline: none;
}

.mbm-gdpr-revoke:active {
    transform: translateY(0) scale(0.96);
}

/* Visibility — verborgen tot consent is opgeslagen */
.mbm-gdpr-revoke--hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.9);
}

/* SVG cookie-icoon */
.mbm-gdpr-revoke__icon {
    width: 24px;
    height: 24px;
    display: block;
    fill: none;
}
.mbm-gdpr-revoke__icon-body { fill: var(--mbm-gdpr-revoke-icon-cookie, #d4a574); }
.mbm-gdpr-revoke__icon-chip { fill: var(--mbm-gdpr-revoke-icon-chip, #3d2817); }

/* Tooltip via aria-label — verschijnt enkel bij hover/focus */
.mbm-gdpr-revoke::after {
    content: attr(aria-label);
    position: absolute;
    font-family: var(--mbm-gdpr-revoke-tooltip-font, system-ui, -apple-system, sans-serif);
    font-size: 11px;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--mbm-gdpr-revoke-tooltip-color, #fff);
    background: var(--mbm-gdpr-revoke-tooltip-bg, #2a1f15);
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 180ms ease, transform 180ms ease;
    pointer-events: none;
}
.mbm-gdpr-revoke--bottom-left::after,
.mbm-gdpr-revoke--bottom-right::after { bottom: calc(100% + 10px); transform: translateY(4px); }
.mbm-gdpr-revoke--top-left::after,
.mbm-gdpr-revoke--top-right::after    { top:    calc(100% + 10px); transform: translateY(-4px); }
.mbm-gdpr-revoke--bottom-left::after,
.mbm-gdpr-revoke--top-left::after     { left:  0; }
.mbm-gdpr-revoke--bottom-right::after,
.mbm-gdpr-revoke--top-right::after    { right: 0; }
.mbm-gdpr-revoke:hover::after,
.mbm-gdpr-revoke:focus-visible::after { opacity: 1; transform: translateY(0); }

/* Mobiel kleinere knop + minder offset */
@media (max-width: 480px) {
    .mbm-gdpr-revoke {
        --mbm-gdpr-revoke-size: 40px;
        --mbm-gdpr-revoke-offset: 16px;
    }
}