.wpnb-bar {
    width: 100%;
    padding: 10px;
    text-align: center;
    z-index: 999999;
    overflow: hidden;
    white-space: nowrap;
    /* Use CSS variable so each bar can choose its own font (or inherit theme font) */
    font-family: var(--wpnb-font-family, inherit);
    font-size: var(--font-size, 16px);
}

/* Inline placement: the bar stays where the shortcode is placed */
.wpnb-bar.wpnb-inline {
    position: relative;
}

/* Fixed placements: the bar is pinned to viewport */
.wpnb-bar.wpnb-fixed-top,
.wpnb-bar.wpnb-fixed-bottom {
    position: fixed;
    left: 0;
    width: 100%;
}

.wpnb-bar.wpnb-fixed-top {
    top: 0;
}

.wpnb-bar.wpnb-fixed-bottom {
    bottom: 0;
}

/* Items */
.wpnb-bar a,
.wpnb-bar span {
    display: inline-block;
    will-change: transform;
    font-family: var(--wpnb-font-family, inherit);
    font-size: var(--font-size, 16px);
}

/* Links should not turn blue; keep the chosen text color */
.wpnb-bar a,
.wpnb-bar a:visited,
.wpnb-bar a:hover,
.wpnb-bar a:focus {
    color: inherit;
}

/* Optional: subtle hover without changing color */
.wpnb-bar a:hover,
.wpnb-bar a:focus {
    text-decoration: underline;
}

/* Animation direction */
.wpnb-bar[data-direction="right"] a,
.wpnb-bar[data-direction="right"] span {
    animation: marquee var(--animation-speed, 10s) linear infinite;
}

.wpnb-bar[data-direction="left"] a,
.wpnb-bar[data-direction="left"] span {
    animation: marquee-reverse var(--animation-speed, 10s) linear infinite;
}

/* Pause on hover */
.wpnb-bar:hover a,
.wpnb-bar:hover span {
    animation-play-state: paused;
}

@keyframes marquee {
    0% { transform: translateX(100vw); }
    100% { transform: translateX(-100vw); }
}

@keyframes marquee-reverse {
    0% { transform: translateX(-100vw); }
    100% { transform: translateX(100vw); }
}