/*
 * Pasek informacyjny sklepu (cms.AnnouncementBar, CMS → Paski informacyjne).
 * Jeden arkusz dla sklepu (components/_announcement_bar.html) i podglądu na żywo w MIS
 * (mis/_announcement_bar_preview.html), żeby edycja była WYSIWYG.
 *
 * Kolory i tempo przychodzą ze zmiennych na elemencie: --xab-bg, --xab-fg, --xab-speed.
 * Tryb „Pływający” (.xab--fixed) = position: fixed przy krawędzi okna; sklep odsuwa <body>
 * o --ab-top-h / --ab-bottom-h (ustawiane w _announcement_bar_assets.html), a nagłówek
 * sticky przykleja się POD paskiem (top: var(--ab-top-h)).
 */
.xab {
    --xab-h: 38px;
    position: relative;
    width: 100%;
    background: var(--xab-bg, #e5006d);
    color: var(--xab-fg, #ffffff);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    overflow: hidden;
    box-sizing: border-box;
}
.xab--fixed { position: fixed; left: 0; right: 0; z-index: 1000; }
.xab--fixed.xab--top { top: 0; }
.xab--fixed.xab--bottom { bottom: 0; }
.xab--fixed.xab--top { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); }
.xab--fixed.xab--bottom { box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12); }
/* Podgląd w MIS — ta sama grafika, ale w ramce formularza zamiast przy krawędzi okna. */
.xab--preview { position: relative !important; z-index: auto; border-radius: 0.5rem; }

.xab strong, .xab b { font-weight: 700; }
.xab a { color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.xab a:hover { opacity: 0.85; }

/* ── Ticker poziomy: dwie kopie grupy, każda min. szerokości okna → pętla bez przeskoku ── */
.xab--marquee, .xab--rotate { height: var(--xab-h); }
.xab-viewport { display: flex; align-items: center; height: 100%; overflow: hidden; }
.xab-track {
    display: flex;
    width: max-content;
    white-space: nowrap;
    animation: xab-scroll var(--xab-speed, 24s) linear infinite;
}
.xab--marquee:hover .xab-track { animation-play-state: paused; }
.xab-group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-around;
    gap: 3rem;
    min-width: 100vw;
    padding-right: 3rem;
}
.xab--preview .xab-group { min-width: 100%; }
@keyframes xab-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ── Zmiana pionowa: komunikaty wjeżdżają od dołu, aktywny = .is-active ── */
.xab-rotator { position: relative; height: 100%; }
.xab-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.xab-slide > span { overflow: hidden; text-overflow: ellipsis; }
.xab-slide.is-active { opacity: 1; transform: translateY(0); }
.xab-slide.is-leaving { opacity: 0; transform: translateY(-100%); }

/* ── Statyczny: tekst wyśrodkowany, łamie się na wąskich ekranach ── */
.xab-static {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 2rem;
    min-height: var(--xab-h);
    padding: 0.4rem 1rem;
    text-align: center;
}

@media (max-width: 640px) {
    .xab { font-size: 13px; }
}

/* Ograniczony ruch: bez przewijania i przejeżdżania — tekst stoi i łamie się. */
@media (prefers-reduced-motion: reduce) {
    .xab--marquee, .xab--rotate { height: auto; }
    .xab-track { animation: none; width: auto; white-space: normal; }
    .xab-group[aria-hidden="true"] { display: none; }
    .xab-group { min-width: 0; flex-wrap: wrap; justify-content: center; gap: 0.25rem 2rem; padding: 0.4rem 1rem; text-align: center; }
    .xab-slide { position: static; opacity: 1; transform: none; white-space: normal; }
    .xab-slide:not(:first-child) { display: none; }
}