/* KAMAR — formularz newslettera w stopce ([kamar_newsletter_footer]).
   Stopka ma ciemne tło (navy marki) — kolory dobrane pod nie, inne niż
   w popupie (biały modal). Nie ustawiamy tła kontenera: sekcja stopki
   już je ma, dokładanie własnego dawałoby podwójny box. */

.kamar-nc-footer { font-family: inherit; }
.kamar-nc-footer-form { display: flex; flex-direction: column; gap: 10px; }

.kamar-nc-footer-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Wysokość pola i przycisku dopasowana do ORYGINALNEGO widgetu Elementora,
   który ten shortcode zastępuje (`.elementor-field-textual`/`.elementor-button.elementor-size-sm`,
   zdjęte z wyrenderowanego markupu na żywo, nie z domysłu): oba mają
   `min-height: 40px`. Bez tego nasz przycisk (padding 13px, jak wcześniej)
   wychodzi ~46px — zauważalnie wyższy niż sąsiadujące pole i niż to, co
   stało tu wcześniej. Zgłoszenie właściciela 29.08.2026 (zrzut edytora
   Elementora, stary widget obok nowego shortcode'u w tym samym miejscu). */
.kamar-nc-footer-email {
    width: 100%;
    min-height: 40px;
    padding: 5px 14px;
    font-size: 15px;
    border: 0 !important;
    border-radius: 10px !important;
    box-sizing: border-box;
    color: #212529;
    background: #fff;
}
.kamar-nc-footer-email:focus { outline: none; box-shadow: 0 0 0 3px rgba(246, 183, 103, .45); }
.kamar-nc-footer-email.kamar-nc-footer-invalid { box-shadow: 0 0 0 2px #D40513; }

.kamar-nc-footer-err { color: #f6a3ab; font-size: 12px; margin-top: -2px; }
.kamar-nc-footer-err[hidden] { display: none; }

/* !important niżej: goły [type="button"]/[type="submit"] z resetu motywu
   maluje różowo-malinowe #cc3366 (patrz sekcja o kolorze marki w CLAUDE.md)
   — bez !important przegrałby przy remisie specyficzności z regułą motywu,
   gdy ta stoi później w dokumencie. */
.kamar-nc-footer-btn {
    width: 100%;
    min-height: 40px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    box-sizing: border-box;
    cursor: pointer;
    background: #F6B767 !important;
    color: #103547 !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
/* Hover/focus: zgłoszenie właściciela 29.08.2026 — delikatny gradient
   zielonego sukcesu marki, ramka 1px w tym samym zielonym i biały tekst,
   zamiast poprzedniego białego tła (kłóciło się z ciemnym tłem stopki,
   wyglądało jak błąd).
   ŻADEN STOPIEŃ NIE JEST GOŁYM #059239 ("Zielony Success" z kitu
   Elementora) — na białym TEKŚCIE ten kolor daje 4,06:1, poniżej progu
   WCAG AA (4,5:1) dla 14px/700 (to NIE jest "duży tekst" WCAG, próg
   18,66px bold). Ten sam kształt błędu co PR #1179 (panel podpowiedzi
   literówki w popupie) — tu w drugą stronę: biały tekst NA zielonym tle,
   nie zielony tekst na białym. Cztery odcienie niżej są o oczko ciemniejsze
   niż nazwany kolor marki, każdy zmierzony osobno (Python, formuła WCAG):
   4,85:1 / 5,44:1 / 6,74:1 / 6,68:1 — wszystkie nad progiem z zapasem. */
.kamar-nc-footer-btn:hover,
.kamar-nc-footer-btn:focus {
    background: linear-gradient(180deg, #0b8340 0%, #0a7a3a 35%, #086a32 70%, #046b2c 100%) !important;
    border-color: #046b2c !important;
    color: #fff !important;
}
.kamar-nc-footer-btn:active { transform: translateY(1px); }
.kamar-nc-footer-btn:disabled { opacity: .7; cursor: default; }

/* Podpowiedź literówki jako PRAWDZIWY MODAL — zgłoszenie właściciela
   29.08.2026 ("nie widzę żeby to był popup"): panel WEWNĄTRZ formularza
   (podmiana w miejscu) nie liczył się jako popup, mimo tej samej treści.
   Ten sam mechanizm co `.kamar-nc-overlay`/`.kamar-nc-modal` w popup.css —
   osobna kopia w tym pliku (nie zależność od popup.css), bo footer.css ładuje
   się TEŻ na checkout/cart, gdzie popup.css jest świadomie wyłączony
   ("Don't nag on checkout/cart" w enqueue popupu) — poleganie na cudzych
   regułach zostawiłoby modal bez stylu akurat tam. */
.kamar-nc-footer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(16, 53, 71, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
    font-family: inherit;
}
.kamar-nc-footer-overlay.is-open { opacity: 1; visibility: visible; }

.kamar-nc-footer-modal {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    padding: 30px 26px 26px;
    transform: translateY(16px) scale(.98);
    transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.kamar-nc-footer-overlay.is-open .kamar-nc-footer-modal { transform: translateY(0) scale(1); }

/* !important na rozmiarach — style motywu/Elementora potrafią zmniejszyć
   przycisk do nieczytelnej ikonki (ten sam wzorzec co `.kamar-nc-close`
   w popup.css). */
.kamar-nc-footer-modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    border: 0 !important;
    background: transparent !important;
    color: #9aa0a6 !important;
    font-size: 30px !important;
    line-height: 1 !important;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}
.kamar-nc-footer-modal-close:hover { background: #f1f1f1 !important; color: #333 !important; }

/* Treść panelu — DOKŁADNIE ten sam przepis co `.kamar-nc-confirm` w
   popup.css (biały modal, więc navy/zielony/pomarańcz zamiast bieli na
   ciemnym tle, którego panel używał, gdy był wewnątrz stopki). */
.kamar-nc-footer-confirm { display: flex; flex-direction: column; align-items: center; text-align: center; }
.kamar-nc-footer-confirm-icon { width: 80px; height: 80px; margin-bottom: 10px; }
.kamar-nc-footer-confirm-text { margin: 0 0 20px; font-size: 16px; line-height: 1.5; color: #103547; }
/* #059239 (zielony marki) na białym tle daje 4,06:1 — poniżej progu WCAG AA
   (4,5:1) dla 16px/800. Ten sam kształt błędu co PR #1179 — #046b2c daje
   6,68:1, patrz tests/js/kolorMarki.test.mjs. */
.kamar-nc-footer-confirm-domain { color: #046b2c; font-weight: 800; }
.kamar-nc-footer-confirm-actions { display: flex; gap: 10px; width: 100%; }

.kamar-nc-footer-confirm-yes,
.kamar-nc-footer-confirm-no {
    flex: 1 1 0;
    padding: 13px 10px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 10px !important;
    cursor: pointer;
    transition: background .15s ease, transform .05s ease;
}
/* !important wszędzie niżej: goły `[type="button"]` z resetu motywu maluje
   różowo-malinowe #cc3366 (patrz sekcja o kolorze marki w CLAUDE.md). */
.kamar-nc-footer-confirm-yes {
    border: 0 !important;
    color: #fff !important;
    background: #103547 !important;
}
.kamar-nc-footer-confirm-yes:hover,
.kamar-nc-footer-confirm-yes:focus { background: #F6B767 !important; color: #103547 !important; }
.kamar-nc-footer-confirm-yes:active { transform: translateY(1px); }

.kamar-nc-footer-confirm-no {
    border: 1.5px solid #d8dce0 !important;
    color: #103547 !important;
    background: #fff !important;
}
.kamar-nc-footer-confirm-no:hover,
.kamar-nc-footer-confirm-no:focus { background: #f4f5f6 !important; border-color: #9aa0a6 !important; color: #103547 !important; }
.kamar-nc-footer-confirm-no:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
    .kamar-nc-footer-overlay, .kamar-nc-footer-modal { transition: none; }
}

.kamar-nc-footer-done[hidden] { display: none; }
.kamar-nc-footer-done { color: #fff; font-size: 14px; line-height: 1.5; }

/* ── [kamar_newsletter_main] — sekcja "Zapisz się do newslettera" na
   stronie głównej (Krok 3 planu). Tło/typografia zdjęte z ŻYWEJ
   konfiguracji Elementora (SSH tylko-do-odczytu) — `#103547` to global
   color "primary" w kicie Elementora, Montserrat to font marki. Formularz
   wewnątrz reużywa `.kamar-nc-footer-*` wyżej BEZ ZMIAN — jedyna różnica
   to ten wrapper (nagłówek/logo/tagline) i układ pola+przycisku W JEDNYM
   WIERSZU (oryginalny widget Elementora miał email:button = 66:33, nie
   kolumnę jak stopka). */
/* Gradient delikatny jak na przyciskach "Do koszyka" (`kamar-przycisk-do-koszyka.php`
   `linear-gradient(135deg, #17475E 0%, #103547 55%, #0B2836 100%)`) — sam kąt
   i ten sam trzystopniowy przepis granatu marki, ale zakres odcienia szerszy
   i przesunięty w stronę rozjaśnienia (zgłoszenie właściciela 29.08.2026):
   jasny koniec `#345363` (granat rozjaśniony ~15% bielą) zamiast `#17475E`
   z przycisku, który ledwo odróżnia się od bazy `#103547`. */
/* Odstępy RÓWNE między wszystkimi czterema dziećmi (nagłówek/tagline/formularz/
   dolny nagłówek), zgłoszenie właściciela 29.08.2026 — wcześniej każdy element
   miał WŁASNY margines (16px/20px/…), więc odstępy różniły się od siebie o oko.
   `gap` na flex-column, nie osobne marginesy: jedna wartość rządzi WSZYSTKIMI
   odstępami naraz, nie da się jej rozjechać przy kolejnej zmianie treści. */
.kamar-nc-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: linear-gradient(135deg, #345363 0%, #103547 50%, #0B2836 100%);
    padding: 40px;
    border-radius: 10px;
    text-align: center;
}
@media (max-width: 480px) {
    .kamar-nc-main { padding: 30px 20px; gap: 16px; }
}

/* !important na color: Elementor Kit stosuje `.elementor-kit-6 h2 {color:
   var(--e-global-color-primary)}` — klasa + element (0,1,1) bije nasz
   pojedynczy `.kamar-nc-main-heading` (0,1,0), więc bez !important nagłówek
   wychodzi w kolorze marki (#103547), nie na biało (zgłoszenie właściciela
   30.08.2026, zmierzone przez getComputedStyle na żywej stronie — `color`
   nigdy wcześniej nie było w tym sprawdzeniu, stąd przeoczone w poprzedniej
   rundzie). `.kamar-nc-main-sub` (paragraf, nie nagłówek) nie ma dziś
   odpowiednika w Kicie, ale dostaje ten sam !important prewencyjnie — to
   ta sama pułapka, tylko jeszcze nieaktywna. */
.kamar-nc-main-heading {
    margin: 0;
    color: #fff !important;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    font-size: 30px;
    line-height: 1.25;
}
@media (max-width: 480px) {
    .kamar-nc-main-heading { font-size: 18px; line-height: 1.4; }
}

.kamar-nc-main-sub {
    margin: 0;
    color: #fff !important;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    font-size: 22px;
    line-height: 1.4;
}
@media (max-width: 480px) {
    .kamar-nc-main-sub { font-size: 14px; }
}

.kamar-nc-main .kamar-nc-footer {
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
}
/* Pole i przycisk W JEDNYM WIERSZU (oryginalny widget: email 66% / przycisk
   33%) — inaczej niż stopka, gdzie kolumna dobrze mieści się w wąskiej
   szpalcie footera. `flex-wrap` chroni telefony: rząd zwija się do kolumny
   poniżej ~380px sumy `flex-basis`, zanim pole zrobi się nieczytelnie wąskie. */
.kamar-nc-main .kamar-nc-footer-form { flex-direction: row; flex-wrap: wrap; }
.kamar-nc-main .kamar-nc-footer-email { flex: 2 1 220px; width: auto; }
.kamar-nc-main .kamar-nc-footer-btn { flex: 1 1 140px; width: auto; padding: 10px 10px; }
.kamar-nc-main .kamar-nc-footer-err { flex-basis: 100%; }