/* wh_topbar — front.css */

.wh-topbar {
    /* ------------------------------------------------------------------
       TOKENY MODULU — rozjasnienia na belce.
       Wszystkie interaktywne elementy topbara (CTA, strzalki, zamkniecie)
       podswietlaja sie POLPRZEZROCZYSTA biela, zeby dzialac na dowolnym
       kolorze belki bez znajomosci tego koloru. Paleta nie trzyma barw
       z kanalem alfa, wiec zostaja lokalne — z fallbackiem = wartosc
       dotychczasowa. Standard: CLAUDE.md 5a.

       Trzy tokeny, nie cztery: strzalki i zamkniecie to ten sam typ
       elementu (okragly przycisk ikonowy) i maja miec ten sam stan hover.
       Rozdzielanie ich dawaloby dwa pokretla do zawsze tej samej wartosci.

       ⚠️ Na JASNEJ belce biel z alfa jest niewidoczna. Branza ustawiajaca
       jasny --wh-color-primary powinna nadpisac te trzy tokeny czernia
       z alfa — inaczej CTA i przyciski traca tlo (obramowanie zostaje,
       bo idzie z currentColor).
       ------------------------------------------------------------------ */
    --wh-tb-tint: color-mix(in srgb, var(--wh-color-bg-base, #fff) 8%, transparent);
    --wh-tb-tint-hover: color-mix(in srgb, var(--wh-color-bg-base, #fff) 15%, transparent);
    --wh-tb-tint-strong: color-mix(in srgb, var(--wh-color-bg-base, #fff) 20%, transparent);

    width: 100%;
    font-size: var(--wh-font-size-body, 14px);
    line-height: 1.4;
    z-index: 1000;
    overflow: hidden;
    max-height: 200px;
    transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
    /* Domyslnie kolor z motywu (paleta). Per-item bg/text_color = OPCJONALNY override (inline w tpl). */
    background: var(--wh-color-primary, #333333);
    color: var(--wh-color-white, #ffffff);
}
.wh-topbar--hidden {
    max-height: 0;
    opacity: 0;
    padding: 0;
    pointer-events: none;
}

/* inner — kontener spojny z cala strona: 1235px tresci + 2x20px padding = 1275px (127.5rem).
   Token => jeden punkt zmiany dla calego sklepu (fallback = standalone). */
.wh-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    max-width: var(--wh-container-max, 127.5rem);
    margin: 0 auto;
    padding: max(1.1rem, 11px) max(2rem, 20px);
    min-height: 40px;
    position: relative;
}

/* swiper container */
.wh-topbar__swiper {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.wh-topbar__swiper .swiper-wrapper { align-items: center; }
.wh-topbar__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* content */
.wh-topbar__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1;
    text-align: center;
}
.wh-topbar__content p { margin: 0; }
.wh-topbar__content a:not(.wh-topbar__cta) { color: inherit; text-decoration: underline; }
.wh-topbar__content a:not(.wh-topbar__cta):hover { opacity: .85; }

/* CTA */
.wh-topbar__cta {
    /* Motyw stylizuje <a> na --wh-color-primary, czyli DOKLADNIE ten sam kolor,
       ktory belka ma jako tlo -> przycisk niewidoczny bez hovera, w kazdej branzy.
       Dziedzicz kolor belki (bialy). */
    color: inherit;
    background: var(--wh-tb-tint, rgba(255, 255, 255, .08));
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 14px;
    border: 1px solid currentColor;
    border-radius: 4px;
    text-decoration: none;
    font-weight: var(--wh-font-weight-semibold, 600);
    font-size: var(--wh-font-size-small, 12px);
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .2s, opacity .2s;
}
.wh-topbar__cta:hover {
    background: var(--wh-tb-tint-hover, rgba(255, 255, 255, .15));
    text-decoration: none;
    opacity: .9;
}

/* nav arrows */
.wh-topbar__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    /* <button> ma UA color:ButtonText (czarny) i NIE dziedziczy — wymus dziedziczenie
       koloru belki, zeby currentColor w svg = kolor tekstu topbara (opcjonalny override inline dalej wygrywa) */
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
    opacity: .6;
    transition: background .2s, opacity .2s;
    z-index: 2;
}
.wh-topbar__nav:hover { background: var(--wh-tb-tint-strong, rgba(255, 255, 255, .2)); opacity: 1; }
.wh-topbar__nav svg { display: block; }
.wh-topbar__nav.swiper-button-disabled { opacity: .2; cursor: default; pointer-events: none; }

/* close — przycisk max(2.2rem,22px), svg max(2rem,20px) */
.wh-topbar__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: max(2.2rem, 22px);
    height: max(2.2rem, 22px);
    padding: 0;
    margin-left: 4px;
    border: none;
    border-radius: 50%;
    background: transparent;
    /* jak nav — dziedzicz kolor belki (currentColor svg = biel/override), nie UA czern buttona */
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
    opacity: .6;
    transition: background .2s, opacity .2s;
}
.wh-topbar__close:hover { background: var(--wh-tb-tint-strong, rgba(255, 255, 255, .2)); opacity: 1; }
.wh-topbar__close svg { display: block; width: max(2rem, 20px); height: max(2rem, 20px); }

/* hide default swiper nav */
.wh-topbar .swiper-button-prev,
.wh-topbar .swiper-button-next { display: none; }

/* mobile */
@media (max-width: 768px) {
    .wh-topbar { font-size: var(--wh-font-size-small, 12px); }
    .wh-topbar p { display: inline; }
    .wh-topbar__inner { padding: max(1.1rem, 11px) max(2rem, 20px); gap: 4px; min-height: 36px; }
    .wh-topbar__content { gap: 8px; display: block; }
    .wh-topbar__cta { font-size: var(--wh-font-size-small, 12px); padding: 3px 10px; margin-left: 3px; }
    .wh-topbar__nav { width: 24px; height: 24px; }
    .wh-topbar__nav svg { width: 12px; height: 12px; }
}