#fsnb-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--fsnb-color, #2e7d32);
    color: #fff;
    text-align: center;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 600;
    z-index: 9999;
    transition: background 0.3s, top 0.3s, opacity 0.5s ease;

    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* Show bar when visible */
#fsnb-bar.visible {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* Desktop: bar at top */
@media (min-width: 768px) {
    #fsnb-bar {
        top: 0;
        bottom: auto;
    }
    body.fsnb-padding {
        padding-top: var(--fsnb-bar-height, 50px); /* Adjust dynamically with JS */
        padding-bottom: 0;
    }
}

/* Mobile: bar at bottom */
@media (max-width: 767px) {
    #fsnb-bar {
        top: auto;
        bottom: 0;
    }
    body.fsnb-padding {
        padding-bottom: var(--fsnb-bar-height, 50px); /* Adjust dynamically with JS */
        padding-top: 0;
    }
}