/* ==========================================================================
   Cleafs CTA - styl czterech formatow boxa (karta, pasek, inline, sticky)
   ASCII only in comments - polish letters break the CSS parser.
   Wartosci zmierzone na zywych sklepach 2026-07-25, patrz _recon_wizualia.md.

   REGULA SPECYFICZNOSCI (zmierzone 2026-07-25 na /blog/znaczenie-emotek/):
   motyw ma [id^="single-post"] a {color;text-decoration;font-weight} = 0,1,1
   oraz p:not(:last-child){margin;padding} = 0,1,1, a blok wp-custom-css
   stoi w dokumencie PO naszym arkuszu. Dlatego kazda regula dotyczaca
   <a> i <p> ma DWIE klasy (0,2,0), nie jedna.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokeny. Zawsze na .cleafs-cta, NIGDY na :root - tresc produktow
   wstrzykuje wlasne :root i nadpisalaby nam --bg, --card, --radius.
   -------------------------------------------------------------------------- */
.cleafs-cta{
    --cta-font:              inherit;
    --cta-naglowek-rozmiar:  20px;
    --cta-naglowek-waga:     800;
    --cta-naglowek-lh:       1.25;
    --cta-naglowek-ls:       -.01em;
    --cta-tekst-rozmiar:     15px;
    --cta-tekst-lh:          1.55;
    --cta-mikro-rozmiar:     12.5px;
    --cta-mikro-lh:          1.45;
    --cta-czas-rozmiar:      13.5px;

    --cta-tlo:               #FFFFFF;
    --cta-obwodka:           #E4E9F4;
    --cta-promien:           16px;
    --cta-promien-maly:      12px;
    --cta-cien:              0 6px 20px rgba(17,36,79,.06);

    --cta-tekst:             #132A5F;
    --cta-tekst-drugi:       #5F6B85;
    --cta-niebieski:         #1F5BBD;
    --cta-zolty-miekki:      #FFEEB3;

    --cta-gwiazdka:          #FFDE65;
    --cta-gwiazdka-pusta:    #E5E7EB;
    --cta-gwiazdka-rozmiar:  16px;

    --cta-cena:              #1F5ABC;
    --cta-cena-rozmiar:      17px;

    --cta-btn-tlo:           #000000;
    --cta-btn-tekst:         #FFFFFF;
    --cta-btn-tlo-hover:     #1F5BBD;
    --cta-btn-cien-hover:    0 6px 18px rgba(31,91,189,.28);
    --cta-btn-tlo-off:       rgba(0,0,0,.51);
    --cta-btn-promien:       5px;
    --cta-btn-wysokosc:      45px;
    --cta-btn-wysokosc-tel:  48px;
    --cta-btn-padding:       8px 22px 9px;
    --cta-btn-rozmiar:       15px;
    --cta-btn-lh:            22px;
    --cta-btn-przejscie:     .2s linear;

    --cta-pad:               24px;
    --cta-pad-tel:           16px;
    --cta-odstep:            14px;
    --cta-odstep-maly:       8px;
    --cta-margines:          28px;

    --cta-sticky-z:          999998;
    --cta-sticky-dol:        0px;
    --cta-sticky-dol-dymek:  184px;
}

/* Warianty sklepow. Jedyna realna roznica wizualna to cien karty. */
.cleafs-cta--wypromowani{ --cta-cien: 0 6px 20px rgba(17,36,79,.06) }
.cleafs-cta--kumplo{      --cta-cien: 0 6px 30px rgba(15,23,42,.06) }

/* Ton. Twardy = czern przycisku kupna. Miekki = granat nawigacyjny,
   dla zimnego ruchu, gdzie czarne KUP czyta sie jak reklama.
   Wartosc domyslna i zapasowa pola _cta_ton to miekki. */
.cleafs-cta--twardy{ --cta-btn-tlo: #000000 }
.cleafs-cta--miekki{
    --cta-btn-tlo: #132A5F;
    --cta-tlo:     #F5F7FF;
}

/* --------------------------------------------------------------------------
   2. Korzen i powierzchnia
   -------------------------------------------------------------------------- */
.cleafs-cta{
    display:      block;
    font-family:  var(--cta-font, inherit);
    font-size:    var(--cta-tekst-rozmiar, 15px);
    line-height:  var(--cta-tekst-lh, 1.55);
    color:        var(--cta-tekst, #132A5F);
    text-align:   start;
    box-sizing:   border-box;
    margin-block: var(--cta-margines, 28px);
}

.cleafs-cta__box{
    display:       flex;
    flex-direction: column;
    gap:           var(--cta-odstep-maly, 8px);
    background:    var(--cta-tlo, #FFFFFF);
    border:        1px solid var(--cta-obwodka, #E4E9F4);
    border-radius: var(--cta-promien, 16px);
    box-shadow:    var(--cta-cien, 0 6px 20px rgba(17,36,79,.06));
    padding:       var(--cta-pad, 24px);
    box-sizing:    border-box;
}

/* Motyw ustawia p:not(:last-child){margin:0 0 1em;padding:0} o tej samej
   specyficznosci co jedna klasa. Zerujemy dwiema klasami. */
.cleafs-cta .cleafs-cta__tekst,
.cleafs-cta .cleafs-cta__czas,
.cleafs-cta .cleafs-cta__mikro,
.cleafs-cta .cleafs-cta__dowod,
.cleafs-cta .cleafs-cta__kupon,
.cleafs-cta .cleafs-cta__platnosci,
.cleafs-cta .cleafs-cta__licznik{
    margin:  0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   3. Elementy tresci
   -------------------------------------------------------------------------- */

/* Naglowek jako div, NIGDY h2/h3: motyw wymusza h2,h3,h4{margin:10px 0
   !important} oraz h2..h6{font-weight:800 !important} i skaluje je w em. */
.cleafs-cta__naglowek{
    font-size:      var(--cta-naglowek-rozmiar, 20px);
    font-weight:    var(--cta-naglowek-waga, 800);
    line-height:    var(--cta-naglowek-lh, 1.25);
    letter-spacing: var(--cta-naglowek-ls, -.01em);
    color:          var(--cta-tekst, #132A5F);
}

.cleafs-cta .cleafs-cta__mikro,
.cleafs-cta .cleafs-cta__dowod,
.cleafs-cta .cleafs-cta__kupon,
.cleafs-cta .cleafs-cta__platnosci{
    font-size:   var(--cta-mikro-rozmiar, 12.5px);
    line-height: var(--cta-mikro-lh, 1.45);
    color:       var(--cta-tekst-drugi, #5F6B85);
}

/* Czas startu: element numer 3 co do sily wg 7A.1, wiec mocniejszy niz
   mikrolinia i slabszy niz tekst. Puste pole = PHP nie drukuje elementu,
   wiec nie ma tu czego rezerwowac. */
.cleafs-cta .cleafs-cta__czas{
    font-size:   var(--cta-czas-rozmiar, 13.5px);
    line-height: var(--cta-mikro-lh, 1.45);
    font-weight: 700;
    color:       var(--cta-tekst-drugi, #5F6B85);
    margin-block-start: 2px;
}

/* Licznik stoi POZA ramka karty (hierarchia z 7A.1). Miejsce rezerwuje
   PHP, drukujac &nbsp;, wiec dostawienie tekstu nie rusza ukladu. */
.cleafs-cta .cleafs-cta__licznik{
    font-size:   var(--cta-mikro-rozmiar, 12.5px);
    line-height: var(--cta-mikro-lh, 1.45);
    color:       var(--cta-tekst-drugi, #5F6B85);
    padding-block-start: 6px;
    padding-inline: 4px;
}

/* Kod kuponu i kwota: w tekscie arabskim musza zostac lacinskie,
   inaczej algorytm dwukierunkowy przerzuca symbol waluty na zla strone. */
.cleafs-cta__kod,
.cleafs-cta__cena{
    direction:    ltr;
    unicode-bidi: isolate;
}
.cleafs-cta__kod{
    font-weight:    700;
    letter-spacing: .06em;
    color:          var(--cta-tekst, #132A5F);
}

/* Waznosc kuponu ma WLASNA linie: tekst dochodzi w tle i jest calym zdaniem,
   wiec doklejony do linii z kodem przelamalby akapit i przesunal tresc nizej. */
.cleafs-cta__waznosc{
    display: block;
}

/* --------------------------------------------------------------------------
   4. Przycisk. Odwzorowanie .single_add_to_cart_button.button.alt
   (czern, 5px, 45px, 8px 22px 9px, 15px/22px, 700, uppercase, .2s linear).
   Ramka 3px przezroczysta jest w motywie i rezerwuje miejsce - powtarzamy.
   -------------------------------------------------------------------------- */
.cleafs-cta .cleafs-cta__btn{
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-height:      var(--cta-btn-wysokosc, 45px);
    padding:         var(--cta-btn-padding, 8px 22px 9px);
    border:          3px solid transparent;
    border-radius:   var(--cta-btn-promien, 5px);
    background:      var(--cta-btn-tlo, #000000);
    color:           var(--cta-btn-tekst, #FFFFFF);
    font-family:     inherit;
    font-size:       var(--cta-btn-rozmiar, 15px);
    line-height:     var(--cta-btn-lh, 22px);
    font-weight:     700;
    text-transform:  uppercase;
    text-decoration: none;
    text-align:      center;
    cursor:          pointer;
    transition:      background var(--cta-btn-przejscie, .2s linear),
                     box-shadow var(--cta-btn-przejscie, .2s linear);
}

/* Motyw NIE definiuje najechania dla przycisku kupna - nie ma czego
   skopiowac, a brak reakcji to blad uzytecznosci. #1F5BBD to kolor akcji
   tego stosu (wybrana opcja jakosci, przycisk kasy #205BBD). */
.cleafs-cta .cleafs-cta__btn:hover,
.cleafs-cta .cleafs-cta__btn:focus-visible{
    background: var(--cta-btn-tlo-hover, #1F5BBD);
    box-shadow: var(--cta-btn-cien-hover, 0 6px 18px rgba(31,91,189,.28));
    color:      var(--cta-btn-tekst, #FFFFFF);
}
.cleafs-cta .cleafs-cta__btn:active{
    transform:  translateY(1px);
    box-shadow: none;
}
/* Motyw zeruje obrys regula *,:focus{outline:0} o specyficznosci 0,1,0.
   Nasza ma 0,3,0, wiec wygrywa bez !important. */
.cleafs-cta .cleafs-cta__btn:focus-visible,
.cleafs-cta .cleafs-cta__link:focus-visible,
.cleafs-cta .cleafs-cta__zamknij:focus-visible{
    outline:        2px solid var(--cta-niebieski, #1F5BBD);
    outline-offset: 2px;
}
/* Stan wylaczony. Uzywany wylacznie w podgladzie w kokpicie - na froncie
   box bez celu w ogole sie nie renderuje (SPEC sekcja 6). */
.cleafs-cta .cleafs-cta__btn--nieaktywny{
    background:     var(--cta-btn-tlo-off, rgba(0,0,0,.51));
    pointer-events: none;
    cursor:         default;
}

/* Strzalka pseudoelementem, zeby dalo sie ja obrocic w RTL. */
.cleafs-cta__btn::after,
.cleafs-cta__link::after{
    content:             "\2192";
    margin-inline-start: .45em;
}

/* --------------------------------------------------------------------------
   5. Cena. Miejsce zarezerwowane przez &nbsp; w HTML - zero skokow ukladu.
   -------------------------------------------------------------------------- */
.cleafs-cta__cena{
    display:     inline-flex;
    align-items: center;
    min-height:  var(--cta-btn-wysokosc, 45px);
    color:       var(--cta-cena, #1F5ABC);
    font-size:   var(--cta-cena-rozmiar, 17px);
    font-weight: 800;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   6. Gwiazdki. Znak Unicode, zero SVG i zero fontu ikonowego - dokladnie
   tak, jak robi to podsumowanie opinii na produktowce.
   -------------------------------------------------------------------------- */
.cleafs-cta__gwiazdki{
    display:      inline-flex;
    line-height:  1;
    direction:    ltr;
    unicode-bidi: isolate;
}
.cleafs-cta__gwiazdka{
    color:      var(--cta-gwiazdka, #FFDE65);
    font-size:  var(--cta-gwiazdka-rozmiar, 16px);
    line-height: 1;
}
.cleafs-cta__gwiazdka--pusta{ color: var(--cta-gwiazdka-pusta, #E5E7EB) }
.cleafs-cta__sep{ padding-inline: .4em }

/* --------------------------------------------------------------------------
   7. Format KARTA. Przycisk i cena w jednym rzedzie, cena dosuwana logicznie.
   -------------------------------------------------------------------------- */
.cleafs-cta__akcja{
    display:     flex;
    align-items: center;
    gap:         var(--cta-odstep, 14px);
    flex-wrap:   wrap;
    margin-block-start: var(--cta-odstep-maly, 8px);
}
.cleafs-cta--karta .cleafs-cta__cena{ margin-inline-start: auto }

/* --------------------------------------------------------------------------
   8. Format PASEK. Jedna linia: tresc z lewej, akcja z prawej.
   -------------------------------------------------------------------------- */
.cleafs-cta--pasek .cleafs-cta__box{
    flex-direction: row;
    align-items:    center;
    gap:            var(--cta-odstep, 14px);
    padding:        14px 16px;
    border-radius:  var(--cta-promien-maly, 12px);
}
.cleafs-cta--pasek .cleafs-cta__tresc{
    flex:      1 1 auto;
    min-width: 0;
}
.cleafs-cta--pasek .cleafs-cta__naglowek{ font-size: 17px }
.cleafs-cta--pasek .cleafs-cta__akcja{
    flex:               0 0 auto;
    margin-block-start: 0;
    flex-wrap:          nowrap;
}
.cleafs-cta--pasek .cleafs-cta__cena{ min-height: auto }

/* --------------------------------------------------------------------------
   9. Format INLINE. Zdanie w akapicie, nie karta. Zolte podswietlenie
   czyta sie jak zaznaczenie redaktora, a nie jak reklama - a to jest
   format dla ruchu o zerowej intencji zakupowej.
   -------------------------------------------------------------------------- */
.cleafs-cta--inline{
    display:      inline;
    margin-block: 0;
    font-size:    inherit;
    line-height:  inherit;
}
.cleafs-cta .cleafs-cta__link{
    background:            var(--cta-zolty-miekki, #FFEEB3);
    box-decoration-break:  clone;
    -webkit-box-decoration-break: clone;
    border-radius:         4px;
    padding:               .1em .3em;
    color:                 var(--cta-tekst, #132A5F);
    font-weight:           700;
    text-decoration:       underline;
    text-underline-offset: 2px;
}
.cleafs-cta .cleafs-cta__link:hover{
    background: var(--cta-gwiazdka, #FFDE65);
    color:      var(--cta-tekst, #132A5F);
}
.cleafs-cta--inline .cleafs-cta__cena{
    min-height:          0;
    font-size:           inherit;
    font-weight:         700;
    margin-inline-start: .35em;
}

/* --------------------------------------------------------------------------
   10. Format STICKY. Renderowany w stopce, jako bezposrednie dziecko body -
   inaczej dowolny transform na przodku zamienilby position:fixed w
   pozycjonowanie wzgledem tego przodka. Tylko telefon.
   -------------------------------------------------------------------------- */
.cleafs-cta--sticky{
    display:      none;
    position:     fixed;
    inset-inline: 0;
    bottom:       var(--cta-sticky-dol, 0px);
    z-index:      var(--cta-sticky-z, 999998);
    margin:       0;
    transform:    translateY(110%);
    transition:   transform .28s cubic-bezier(.22,1,.36,1);
}
.cleafs-cta--sticky.cleafs-cta--widoczny{ transform: none }
.cleafs-cta--sticky .cleafs-cta__box{
    flex-direction: row;
    align-items:    center;
    gap:            10px;
    padding:        10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    border-radius:  0;
    border-width:   1px 0 0;
    box-shadow:     0 -6px 20px rgba(17,36,79,.10);
}
.cleafs-cta--sticky .cleafs-cta__tresc{
    flex:      1 1 auto;
    min-width: 0;
    overflow:  hidden;
}
/* Dwie linie zamiast ucinania: na 390 px przycisk i krzyzyk zjadaja ponad polowe
   szerokosci, wiec przy nowrap kazdy komunikat konczyl sie trzykropkiem. */
.cleafs-cta--sticky .cleafs-cta__naglowek{
    font-size:          13.5px;
    line-height:        1.25;
    overflow:           hidden;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp:         2;
    -webkit-box-orient: vertical;
}
.cleafs-cta--sticky .cleafs-cta__akcja{
    flex:               0 0 auto;
    margin-block-start: 0;
    flex-wrap:          nowrap;
}
.cleafs-cta--sticky .cleafs-cta__btn{
    min-height:  44px;
    padding:     0 12px;
    font-size:   13px;
    white-space: nowrap;
}
.cleafs-cta__zamknij{
    flex:        0 0 auto;
    width:       44px;
    height:      44px;
    display:     flex;
    align-items: center;
    justify-content: center;
    border:      0;
    border-radius: 50%;
    background:  transparent;
    color:       var(--cta-tekst-drugi, #5F6B85);
    font-size:   20px;
    line-height: 1;
    cursor:      pointer;
}
.cleafs-cta__zamknij:hover{ background: #EEF1F8 }

/* --------------------------------------------------------------------------
   11. Punkty lamania. Wylacznie progi motywu: 991, 767, 480.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px){
    .cleafs-cta--karta .cleafs-cta__box{ padding: 20px }
}

@media screen and (max-width: 767px){
    .cleafs-cta{ --cta-naglowek-rozmiar: 18px }
    .cleafs-cta--karta .cleafs-cta__box,
    .cleafs-cta--pasek .cleafs-cta__box{ padding: var(--cta-pad-tel, 16px) }

    /* Pasek sklada sie w pion i przestaje byc paskiem - to celowe. */
    .cleafs-cta--pasek .cleafs-cta__box{
        flex-direction: column;
        align-items:    stretch;
        gap:            var(--cta-odstep-maly, 8px);
    }

    .cleafs-cta__akcja{
        display:     block;
        margin-block-start: var(--cta-odstep, 14px);
    }
    .cleafs-cta .cleafs-cta__btn{
        display:    flex;
        width:      100%;
        min-height: var(--cta-btn-wysokosc-tel, 48px);
    }
    .cleafs-cta--karta .cleafs-cta__cena,
    .cleafs-cta--pasek .cleafs-cta__cena{
        display:    flex;
        min-height: 24px;
        margin-block-start: var(--cta-odstep-maly, 8px);
        margin-inline-start: 0;
    }

    /* Sticky istnieje wylacznie na telefonie. Klase --aktywny nadaje
       skrypt dopiero wtedy, gdy wolno pokazac pasek (patrz mina G1),
       zeby IntersectionObserver nie liczyl wyswietlen ukrytego elementu. */
    .cleafs-cta--sticky.cleafs-cta--aktywny{ display: block }
    .cleafs-cta--sticky .cleafs-cta__akcja{ display: flex }
    .cleafs-cta--sticky .cleafs-cta__btn{
        display:    inline-flex;
        width:      auto;
        min-height: 44px;
    }
}

@media screen and (max-width: 480px){
    .cleafs-cta--sticky .cleafs-cta__btn{
        padding:   0 14px;
        font-size: 14px;
    }
}

/* --------------------------------------------------------------------------
   12. Uklad od prawej do lewej. Motyw NIE dostarcza regul RTL na front
   (metamax/rtl.css istnieje na dysku, ale nie jest ladowany), wiec
   robimy to sami. Wlasciwosci logiczne zalatwiaja wiekszosc.
   -------------------------------------------------------------------------- */
html[dir="rtl"] .cleafs-cta{
    --cta-naglowek-ls: normal;
    --cta-tekst-lh:    1.7;
    --cta-naglowek-lh: 1.45;
}
html[dir="rtl"] .cleafs-cta__btn::after,
html[dir="rtl"] .cleafs-cta__link::after{ content: "\2190" }

/* --------------------------------------------------------------------------
   13. Mniej ruchu. Zaden efekt nie niesie tu informacji, wiec gasimy.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
    .cleafs-cta .cleafs-cta__btn,
    .cleafs-cta--sticky{ transition: none }
    .cleafs-cta--sticky{ transform: none }
    .cleafs-cta .cleafs-cta__btn:active{ transform: none }
}