/*
 * FN — Design: pasek premium (top bar + promo scalone w 1), 2026-07-22
 *
 * Tło espresso marki (--fn-secondary #2E2321) + tekst kremowy (#F3E9E5,
 * ten sam odcień co --fn-bg-soft, użyty tu w roli tekstu na ciemnym tle,
 * nie tła) + akcent złoty (--fn-accent #C9A15A) na ikonach + jaśniejsze
 * złoto (--fn-accent-light #E4C989) na kluczowych liczbach/kodach.
 *
 * === WERSJA 2 (poprawka tego samego dnia, po feedbacku Dawida) ===
 * v1 rotowała WSZYSTKO, także na desktopie — komunikaty o dostawie/wysyłce
 * były "za małe" i przez większość czasu (3/4 cyklu rotacji) niewidoczne.
 * v2: DESKTOP (>=1025px) pokazuje wszystkie komunikaty NARAZ, obok siebie,
 * bez rotacji/animacji podmiany (bo nic się tu nie podmienia). MOBILE
 * (<1025px) zostaje przy rotatorze (za mało miejsca na 4 komunikaty naraz),
 * font podniesiony do min. 12,5px. Próg 1025px wybrany spójnie z resztą
 * responsywnych reguł w tym projekcie (fn-design-width.php, mega-menu).
 *
 * Kontrast WCAG (tekst kremowy #F3E9E5 na tle #2E2321): ratio ~14,3:1 —
 * dokładnie ta sama para kolorów, którą audyt a11y z 15.07 już zweryfikował
 * jako PASS. Złoto jasne #E4C989 na #2E2321: ratio ~8,9:1 — również PASS AA.
 *
 * Zmienne --fn-* są już zdefiniowane globalnie w Customizer Additional CSS
 * (post 19068) — używane tu WYŁĄCZNIE przez var(--fn-x, fallback), nigdy
 * redefiniowane w tym pliku.
 */

.fn-promo-bar {
    position: relative; /* w normalnym przepływie dokumentu, bez fixed/sticky/z-index */
    width: 100%;
    box-sizing: border-box;
    background-color: var(--fn-secondary, #2E2321);
    color: #F3E9E5;
    font-family: var(--fn-font-body, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    font-size: 13px;
    line-height: 1.35;
    overflow: hidden;
    box-shadow: inset 0 -2px 0 rgba(201, 161, 90, .55); /* złota linia akcentu marki, kontynuacja wcześniejszego stylu */
}

.fn-promo-bar__inner {
    position: relative;
    max-width: 1440px; /* spójne z --wd-container-w sitewide (fn-design-width.php) */
    margin: 0 auto;
    padding: 7px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 22px;
}

/* Kluczowe liczby/kody (199 zł, 24h, 4,89/5, NEWSLETTER10, -10%) — jaśniejsze
   złoto + semibold, reszta zostaje kremowa. Używane identycznie w wariancie
   statycznym (desktop) i rotatorze (mobile) — jedno źródło stylu. */
.fn-promo-bar__accent {
    color: var(--fn-accent-light, #E4C989);
    font-weight: 600;
}

/* ============ DESKTOP (>=1025px): wszystkie komunikaty naraz, statycznie ============ */
/* Domyślnie (mobile-first) ukryte — pokazywane dopiero w media query niżej. */

.fn-promo-bar__static {
    display: none;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.fn-promo-bar__static-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    color: inherit;
    /* Zero transition/animacji w wariancie statycznym — treść tu się nigdy
       nie podmienia (nie rotuje), więc nie ma czego animować. Jawnie
       wyzerowane na wypadek dziedziczenia jakiejś globalnej reguły motywu. */
    transition: none;
}

.fn-promo-bar__static-item .fn-promo-bar__icon {
    flex: 0 0 auto;
    color: var(--fn-accent, #C9A15A);
}

.fn-promo-bar__static-sep {
    margin: 0 14px;
    opacity: .45;
    color: inherit;
    user-select: none;
}

/* Komunikat 4. (kupon) — pierwszy do ucięcia, jeśli 4 nie mieszczą się w
   węższym zakresie desktopu. Ukryty domyślnie w całym zakresie >=1025px,
   przywracany dopiero od szerokości, na której faktycznie się mieści
   (zmierzone na żywo 2026-07-22, nie zgadywane — patrz media query niżej). */
.fn-promo-bar__static-item--4,
.fn-promo-bar__static-sep--4 {
    display: none;
}

/* ============ MOBILE (<1025px): rotator, jeden komunikat naraz ============ */

.fn-promo-bar__rotator {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.fn-promo-bar__msg {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    color: inherit;
    /* Stan spoczynkowy ZAWSZE w pełni widoczny (opacity:1) — architektonicznie
       wyklucza "zamrożenie na niewidocznym" (patrz komentarz w .js): nawet
       jeśli fade-in nigdy się nie odpali/nie dokończy przez zablokowany
       główny wątek (pętla błędów sgw.stape.bg z GTM klienta — ten sam
       winowajca co przy toastie/mini-koszyku/dropdownie konta gdzie indziej
       w tym projekcie), komunikat pozostaje czytelny. */
    opacity: 1;
    white-space: nowrap;
}

.fn-promo-bar__msg .fn-promo-bar__icon {
    flex: 0 0 auto;
    color: var(--fn-accent, #C9A15A);
}

/* Fade-in czysto kosmetyczny, retriggerowany w JS (tylko mobile) przy każdej
   podmianie treści. Celowo NIE ma odpowiadającej klasy "fade-out" — nigdy
   nie ma stanu pośredniego, w którym baza CSS definiuje spoczynek jako
   niewidoczny. */
.fn-promo-bar__msg.fn-fade-in {
    animation: fnPromoBarFadeIn .32s ease;
}

@keyframes fnPromoBarFadeIn {
    from { opacity: .2; }
    to   { opacity: 1; }
}

/* ============ Pigułka kodu rabatowego (klik = kopiuj do schowka) ============ */
/* Współdzielona przez wariant statyczny i rotator — ten sam wygląd wszędzie. */

/*
 * !important na całym boksie: potwierdzone getComputedStyle (2026-07-22),
 * że generyczny reset przycisków Woodmartu (ten sam, już wielokrotnie
 * udokumentowany w tym projekcie mechanizm — ładuje się jako <button> base
 * style z wyższą specyficznością niż zwykła klasa) nadpisywał box-model bez
 * !important: wyszło padding "5px 20px" / tło "rgb(243,243,243)" / border
 * "0px solid rgb(233,233,233)" / border-radius 0 zamiast zamierzonej złotej
 * przerywanej pigułki. Dokładnie ten sam wzorzec co closeBtn niżej i co
 * historyczny fix przycisku "Dodaj do koszyka" w innych plikach fn-design-*.
 */
.fn-promo-bar__coupon {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    border: 1px dashed var(--fn-accent, #C9A15A) !important;
    border-radius: 999px !important;
    background: rgba(201, 161, 90, .16) !important;
    background-color: rgba(201, 161, 90, .16) !important;
    color: var(--fn-accent-light, #E4C989) !important;
    font: inherit !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    padding: 1px 10px !important;
    margin: 0 1px !important;
    line-height: 1.7 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    transition: none !important;
}

.fn-promo-bar__coupon:hover,
.fn-promo-bar__coupon:focus-visible {
    background: rgba(201, 161, 90, .32) !important;
    background-color: rgba(201, 161, 90, .32) !important;
}

.fn-promo-bar__coupon:focus-visible {
    outline: 2px solid var(--fn-accent, #C9A15A);
    outline-offset: 2px;
}

/* Stan "skopiowano" — pigułka wypełnia się złotem na ~1,7s (patrz .js). */
.fn-promo-bar__coupon[data-copied="1"] {
    background: var(--fn-accent, #C9A15A) !important;
    background-color: var(--fn-accent, #C9A15A) !important;
    border-style: solid !important;
    color: var(--fn-secondary, #2E2321) !important;
}

/* ============ PRAWA STRONA: telefon / Pomoc / PL (statyczne, nie rotują) ============ */
/* Widoczna tylko >=1025px (spójnie z progiem static/rotator) — patrz media query. */

.fn-promo-bar__right {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    gap: 16px;
}

.fn-promo-bar__right a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    opacity: .92;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
}

.fn-promo-bar__right a:hover,
.fn-promo-bar__right a:focus-visible {
    opacity: 1;
    color: var(--fn-accent, #C9A15A);
}

.fn-promo-bar__right a .fn-promo-bar__icon {
    color: var(--fn-accent, #C9A15A);
}

.fn-promo-bar__lang {
    opacity: .85;
    padding-left: 14px;
    border-left: 1px solid rgba(243, 235, 231, .28);
    font-size: 13px;
}

/* ============ Przycisk zamknięcia (X) ============ */

/*
 * !important na całym boksie: ten sam generyczny reset przycisków Woodmartu
 * co przy .fn-promo-bar__coupon wyżej — potwierdzone getComputedStyle
 * (2026-07-22): bez !important przycisk renderował się 42px wysoki (padding
 * 5px góra/dół) zamiast zamierzonych 24x24, co ciągnęło całą wysokość paska
 * (flex align-items:center rozciąga kontener do najwyższego dziecka).
 * Naprawione.
 */
.fn-promo-bar__close {
    appearance: none !important;
    -webkit-appearance: none !important;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: inherit !important;
    opacity: .75;
    cursor: pointer;
    box-sizing: border-box !important;
}

.fn-promo-bar__close:hover,
.fn-promo-bar__close:focus-visible {
    opacity: 1;
}

.fn-promo-bar__close:focus-visible {
    outline: 2px solid var(--fn-accent, #C9A15A);
    outline-offset: 1px;
}

/* Lista pozostałych komunikatów rotatora — tylko źródło danych dla JS,
   nigdy widoczna (atrybut [hidden] już to załatwia, ta reguła to defensywna
   druga warstwa na wypadek konfliktu specyficzności z resetami motywu). */
.fn-promo-bar__data {
    display: none !important;
}

/* ============ Próg desktop/mobile: 1025px ============ */

@media (min-width: 1025px) {
    .fn-promo-bar__static {
        display: flex;
    }

    .fn-promo-bar__rotator {
        display: none;
    }

    .fn-promo-bar__right {
        display: flex;
    }

    .fn-promo-bar__inner {
        /* Wysokość paska ~44px (Dawid, 22.07). Zmierzone na żywo w
           przeglądarce 1280x900 po wdrożeniu (nie tylko wyliczone na
           papierze): padding 10px dawał 46,09px (line-height bazowy
           dokłada ~2px do 24px przycisku zamknięcia), 9px daje ~44,1px —
           dociągnięte empirycznie. */
        padding: 9px 20px;
    }

    .fn-promo-bar,
    .fn-promo-bar__static-item,
    .fn-promo-bar__right a,
    .fn-promo-bar__lang {
        font-size: 13px; /* "nie mniejszy" — jawne, nie tylko dziedziczone */
    }
}

/* Komunikat 4. (kupon) — mieści się od 1280px w górę (zmierzone na żywo:
   4 komunikaty + prawa strona + zamknij realnie zmieszczone przy 1280px
   szerokości viewportu; poniżej tego progu widoczne tylko pierwsze 3,
   zgodnie z priorytetem dostawa > wysyłka 24h > Trusted Shops). */
@media (min-width: 1280px) {
    .fn-promo-bar__static-item--4,
    .fn-promo-bar__static-sep--4 {
        display: inline-flex;
    }

    .fn-promo-bar__static-sep--4 {
        display: inline;
    }
}

/* ============ Mobile (<1025px): rotator, prawa strona ukryta ============ */

@media (max-width: 1024px) {
    .fn-promo-bar__inner {
        padding: 6px 14px;
        gap: 10px;
    }
}

@media (max-width: 600px) {
    .fn-promo-bar {
        font-size: 12.5px; /* min. 12,5px (Dawid, 22.07) — było 12px */
    }

    .fn-promo-bar__msg {
        white-space: normal;
        text-align: center;
        line-height: 1.25;
    }

    .fn-promo-bar__inner {
        /* Rezerwuje miejsce na 2 linie (12,5px x 1,25 x 2 = ~31,3px), żeby
           rotacja krótszy<->dłuższy komunikat (komunikat kuponu realnie
           łamie się do 2 linii przy 375px, pozostałe 3 mieszczą się w
           1 linii) nie powodowała widocznego "skoku" wysokości / przesunięcia
           treści pod paskiem (CLS) przy każdej rotacji co 4,5s. Zweryfikowane
           na żywo w przeglądarce 375x812 po wdrożeniu, nie tylko wyliczone
           na papierze. */
        padding: 5px 12px;
        min-height: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fn-promo-bar__msg.fn-fade-in {
        animation: none;
    }
}