/* MGD Konfetti – Frontend */
.mgd-konfetti-button {
    position: fixed;
    bottom: var(--mgd-konfetti-bottom, 105px);
    width: var(--mgd-konfetti-size, 62px);
    height: var(--mgd-konfetti-size, 62px);
    padding: 0;
    border: 3px solid var(--mgd-konfetti-border, #f4b52b);
    border-radius: 999px;
    background: var(--mgd-konfetti-bg, #df2029);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999998;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
    line-height: 1;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    animation: mgd-konfetti-pulse 2.8s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mgd-konfetti-root--left .mgd-konfetti-button {
    left: var(--mgd-konfetti-side, 22px);
}

.mgd-konfetti-root--right .mgd-konfetti-button {
    right: var(--mgd-konfetti-side, 22px);
}

.mgd-konfetti-button:hover {
    transform: scale(1.08) rotate(-7deg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .30);
    filter: brightness(1.06);
    animation-play-state: paused;
}

.mgd-konfetti-root--right .mgd-konfetti-button:hover {
    transform: scale(1.08) rotate(7deg);
}

.mgd-konfetti-button:active {
    transform: scale(.92);
}

.mgd-konfetti-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(0, 0, 0, .30), 0 8px 24px rgba(0, 0, 0, .24);
}

.mgd-konfetti-button__icon {
    display: block;
    font-family: system-ui, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    font-size: calc(var(--mgd-konfetti-size, 62px) * .48);
    line-height: 1;
    transform: translateY(1px);
    user-select: none;
}

.mgd-konfetti-button.is-boom .mgd-konfetti-button__icon {
    animation: mgd-konfetti-boom .42s ease;
}

.mgd-konfetti-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999997;
}

@keyframes mgd-konfetti-pulse {
    0%,
    100% {
        box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
    }

    50% {
        box-shadow: 0 8px 28px rgba(244, 181, 43, .42);
    }
}

@keyframes mgd-konfetti-boom {
    0% {
        transform: scale(1) rotate(0deg);
    }

    35% {
        transform: scale(1.48) rotate(-16deg);
    }

    65% {
        transform: scale(.90) rotate(12deg);
    }

    100% {
        transform: scale(1) rotate(0deg);
    }
}

@media (max-width: 767px) {
    .mgd-konfetti-button {
        width: min(var(--mgd-konfetti-size, 62px), 56px);
        height: min(var(--mgd-konfetti-size, 62px), 56px);
    }

    .mgd-konfetti-button__icon {
        font-size: min(calc(var(--mgd-konfetti-size, 62px) * .48), 27px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mgd-konfetti-button,
    .mgd-konfetti-button:hover,
    .mgd-konfetti-button:active {
        transition: none;
        animation: none;
        transform: none;
    }

    .mgd-konfetti-button.is-boom .mgd-konfetti-button__icon {
        animation: none;
    }
}

@media (forced-colors: active) {
    .mgd-konfetti-button {
        border: 2px solid ButtonText;
        background: ButtonFace;
        color: ButtonText;
        forced-color-adjust: auto;
    }
}