/* =========================================================
   Sticky Footer Bar Pro — Frontend CSS
   De Wouw Factor Internet | https://wouwfactor.com
   ========================================================= */

/* ── Animaties ─────────────────────────────────────────── */
@keyframes sfb-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.18); }
}
@keyframes sfb-bounce {
    0%, 100% { transform: translateY(0); }
    40%       { transform: translateY(-8px); }
    60%       { transform: translateY(-4px); }
}
@keyframes sfb-swing {
    0%, 100% { transform: rotate(0deg); }
    20%       { transform: rotate(12deg); }
    40%       { transform: rotate(-8deg); }
    60%       { transform: rotate(5deg); }
    80%       { transform: rotate(-3deg); }
}
@keyframes sfb-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-4px); }
    40%       { transform: translateX(4px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

.sfb-anim-pulse .sfb-btn__icon  { animation: sfb-pulse  1.4s ease-in-out infinite; }
.sfb-anim-bounce .sfb-btn__icon { animation: sfb-bounce 1.6s ease-in-out infinite; }
.sfb-anim-swing .sfb-btn__icon  { animation: sfb-swing  1.8s ease-in-out infinite; }
.sfb-anim-shake .sfb-btn__icon  { animation: sfb-shake  1.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .sfb-anim-pulse .sfb-btn__icon,
    .sfb-anim-bounce .sfb-btn__icon,
    .sfb-anim-swing .sfb-btn__icon,
    .sfb-anim-shake .sfb-btn__icon { animation: none; }
}

/* ── Badge ─────────────────────────────────────────────── */
.sfb-btn {
    position: relative;
}

.sfb-badge {
    position:     absolute;
    top:          4px;
    right:        4px;
    min-width:    18px;
    height:       18px;
    padding:      0 4px;
    background:   #e53e3e;
    color:        #ffffff;
    border-radius: 9px;
    font-size:    0.6rem;
    font-weight:  700;
    line-height:  18px;
    text-align:   center;
    pointer-events: none;
    box-shadow:   0 1px 3px rgba(0,0,0,.3);
}

/* ── WooCommerce winkelwagen-teller ────────────────────── */
.sfb-btn[data-woo-count]::after {
    content:      attr(data-woo-count);
    position:     absolute;
    top:          4px;
    right:        4px;
    min-width:    18px;
    height:       18px;
    padding:      0 4px;
    background:   #e53e3e;
    color:        #fff;
    border-radius: 9px;
    font-size:    0.6rem;
    font-weight:  700;
    line-height:  18px;
    text-align:   center;
}

.sfb-btn[data-woo-count="0"]::after {
    display: none;
}

/* ── Pro admin kaarten ─────────────────────────────────── */
.sfb-pro-card {
    border-left: 3px solid #f59e0b;
}

.sfb-vis-rule {
    display:     flex;
    gap:         8px;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap:   wrap;
}