/* ============================================================
   SPIS TREŚCI - components.css (style komponentów obsługiwanych przez JS)
   1. Accordion
   2. Tabs
   3. Mobile menu
   4. Popup
   5. Gallery (lightbox)
   6. Megamenu
   7. Mapa realizacji (Leaflet)
   8. Custom scroll
   9. Smooth scroll
   10. Contact Form 7
   11. Siatka atutów (odstęp czwartego atutu w bloku home-why)
   12. Ocena w gwiazdkach (bloki home-opinia, opinie-karta, opinie-instytucja)
   13. Siatka opinii (blok opinie-lista)
   14. Formularz wielokrokowy (blok kontakt-formularz)
   15. Mapa biura (Leaflet, jeden punkt)
   16. Formularz CF7 - karty tematów, chipsy, zgoda, wysyłka, pola plików (bloki kontakt-formularz, kontakt-cta, serwis-formularz)
   17. Siatka zespołu (blok onas-zespol)
   18. Ocena w gwiazdkach w hero (bloki home-hero, opinie-hero)
   ------------------------------------------------------------
   Plik ładuje inc/enqueue.php hakiem enqueue_block_assets (front + edytor).
   Ładuje się PO tailwind.css, a utilities Tailwinda siedzą w @layer - reguły stąd
   są niewarstwowe, więc wygrywają z klasami utility niezależnie od specyficzności.
   ============================================================ */

/* ------------------- 1. Accordion ------------------- */
    .accordion_margin:before {
        content: "";
        margin-top: 0;
        float: left;
        width: 100%;
    }
    .accordion_margin:after {
        content: "";
        margin-bottom: 20px;
        float: left;
        width: 100%;
    }

    [accordion-button].active {
        /* Active accordion styles go here */
    }

    [accordion-button].active .rotate_bar {
        rotate: -90deg;
        transition: rotate .3s ease-in-out;
    }

    [accordion-panel].active {
        display: block;
    }

    [accordion-button] {
        cursor: pointer;
    }

    [accordion-panel] {
        display: none;
        overflow: hidden;
        height: 0;
        transition: height .3s ease-in-out;
    }

    /* Show more FAQ button */
    @keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
    }

    .hide-accordion {
        max-height: 0;
        display: none;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
    }

    .show-more-btn {
        margin: 20px auto 0 auto;
        display: block;
        font-family: 'Inter', sans-serif;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        width: 100%;
        padding: 18px 0 18px 0;
        background-color: #000;   /* TODO kolor projektu (przycisk „Pokaż więcej") */
        transition: transform 300ms;
        border: none;
        cursor: pointer;
        border-radius: 24px;
    }

    .show-more-btn:hover {
        transform: scale(1.05);
    }

/* ------------------- 2. Tabs ------------------- */
    [tab-button].active {
        /* Active tab styles go here */
    }

    [tab-panel].active {
        display: block;
        animation: fadeIn .5s ease-in-out;
    }

    [tab-button] {
        cursor: pointer;
    }

    [tab-panel] {
        display: none;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }


/* ------------------- 3. Mobile menu ------------------- */
    /* Makieta: panel na całą szerokość i wysokość ekranu, zaczyna się pod paskiem headera.
       Nawigacja desktopowa z przyciskiem CTA mieści się w kontenerze dopiero od 1280 px,
       dlatego próg to xl, a nie lg ze startera. Ikona hamburgera zamienia się w X przez
       aria-expanded (group-aria-expanded w index.html), więc paski .bar i overlay startera
       zniknęły razem ze swoimi regułami. */
    @media (max-width: 1279px) {
        .nav-menu {
            position: fixed;
            top: var(--header-height, 4.625rem);
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1001;
            visibility: hidden;
            opacity: 0;
            transform: translateY(-0.5rem);
            transition: opacity .3s ease, transform .3s ease, visibility .3s;
        }

        .nav-menu.active {
            visibility: visible;
            opacity: 1;
            transform: none;
        }
    }

/* ------------------- 4. Popup ------------------- */
            /* Popup specyfic styles */


/* ------------------- 5. Gallery (lightbox - kropki paginacji) ------------------- */
    .gallery-dot {
        width: 8px;
        height: 8px;
        border-radius: 9999px;
        background-color: #fff;
        opacity: 0.2;
        transition: opacity .2s ease;
    }

    .gallery-dot-active {
        opacity: 1;
    }


/* ------------------- 6. Megamenu (Dropdown mwnu) ------------------- */
    [megamenu-panel] {
        display: none;
    }

    [megamenu-panel].active {
        display: flex;
    }

    .megamenu-item svg.active{
        rotate: 180deg;
    }

    /* Ikony kart megamenu Oferta daje wtyczka Menu Icons: klient wybiera plik przy pozycji
       w Wygląd > Menu, a wtyczka wstawia <img class="_mi _before _svg"> jako pierwsze dziecko
       linku. Link jest na desktopie flex-col, więc bez tych reguł ikona staje nad nazwą,
       a arkusz wtyczki (.menu-item ._svg { width: 1em }) zmniejsza ją do 16 px. Stawiamy ją
       w miejscu z makiety: 24 px, 24 px od lewego brzegu karty, na środku wysokości.
       Selektor ma trzy klasy, żeby wygrać z regułami wtyczki bez względu na kolejność arkuszy.
       Podtytuł dalej idzie z pola "Atrybut tytułu" (after:content-[attr(title)] w index.html).
       W podmenu na telefonie ikon nie ma, tak jak w makiecie. */
    .megamenuLink .nav-link img._mi {
        display: none;
    }

    @media (min-width: 1280px) {
        .megamenuLink .nav-link img._mi {
            position: absolute;
            top: 50%;
            left: 1.5rem;
            display: block;
            width: 1.5rem;
            height: 1.5rem;
            margin: 0;
            transform: translateY(-50%);
        }
    }

/* ------------------- 7. Mapa realizacji (Leaflet) ------------------- */
    /* Moduł: assets/js/modules/map.js. Vendor (leaflet.css, MarkerCluster*.css) ładuje
       się przed tym plikiem, więc nadpisania są scope'owane pod .realizacjeMap -
       dwie klasy biją selektory Leafleta o jednej klasie niezależnie od kolejności. */

    /* Własny kontekst układania: panele i kontrolki Leafleta mają z-index do 1000
       i nie mają się mieszać z poświatami sekcji ani z fixed headerem. */
    .realizacjeMapCanvas {
        z-index: 0;
    }

    /* Leaflet narzuca kontenerowi swój font (Helvetica), a dymek dziedziczy go dalej. */
    .realizacjeMap .leaflet-container {
        font-family: inherit;
    }

    /* Podłoże w makiecie jest jednolicie szare - filtr na warstwie kafelków,
       żeby pinezki, dymek i kontrolki zostały w kolorach marki. */
    .realizacjeMap .leaflet-tile-pane {
        filter: grayscale(1) brightness(1.02);
    }

    /* --- Pinezka: poświata 24 px z rdzeniem 16 px, stan aktywny zmienia sam kolor --- */
    .realizacjeMap .realizacjeMapMarker {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9999px;
        background-color: color-mix(in srgb, var(--color-primary-500) 25%, transparent);
        cursor: pointer;
    }

    .realizacjeMap .realizacjeMapMarkerCore {
        display: block;
        width: 16px;
        height: 16px;
        border-radius: 9999px;
        background-color: var(--color-primary-500);
    }

    .realizacjeMap .realizacjeMapMarker.is-active {
        background-color: color-mix(in srgb, var(--color-secondary-500) 25%, transparent);
    }

    .realizacjeMap .realizacjeMapMarker.is-active .realizacjeMapMarkerCore {
        background-color: var(--color-secondary-500);
    }

    /* --- Klaster: makieta go nie pokazuje, więc trzymamy geometrię pinezki w kolorach marki --- */
    .realizacjeMap .marker-cluster {
        background-color: color-mix(in srgb, var(--color-primary-500) 25%, transparent);
    }

    .realizacjeMap .marker-cluster div {
        background-color: var(--color-primary-500);
        color: #fff;
        font-family: inherit;
        font-size: 12px;
        font-weight: 700;
        line-height: 30px;
    }

    /* --- Dymek: 275x80, białe tło, promień 12 px, bez cienia, dzióbka i zamykania --- */
    .realizacjeMap .leaflet-popup.realizacjeMapPopup {
        /* Domyślne 20 px podnosi dymek nad pinezkę; całą pozycję liczy offset w map.js. */
        margin-bottom: 0;
    }

    .realizacjeMap .realizacjeMapPopup .leaflet-popup-content-wrapper {
        padding: 0;
        border-radius: 12px;
        box-shadow: none;
        background-color: #fff;
        overflow: hidden;
    }

    /* Leaflet wpisuje w treść dymka zmierzoną szerokość powiększoną o 1 px - to jedyne
       miejsce, gdzie !important jest potrzebne, żeby szerokość została dokładnie z makiety
       (od niej zależy przeliczenie pozycji dymka względem pinezki). */
    .realizacjeMap .realizacjeMapPopup .leaflet-popup-content {
        width: 275px !important;
        margin: 0;
        line-height: inherit;
    }

    .realizacjeMap .realizacjeMapPopup .leaflet-popup-tip-container {
        display: none;
    }

    /* Wysokość jest sztywna, bo od niej zależy przeliczenie pozycji dymka w map.js
       (lewy górny róg ma trafić 20 px pod środek pinezki). */
    .realizacjeMap .realizacjeMapPopupCard {
        display: flex;
        height: 80px;
        overflow: hidden;
        color: inherit;
        text-decoration: none;
    }

    .realizacjeMap .realizacjeMapPopupImage {
        flex-shrink: 0;
        align-self: stretch;
        width: 80px;
        height: auto;
        object-fit: cover;
    }

    /* Odstęp górny i boczny wprost z makiety; dolny wychodzi 6 px zamiast 8, bo trzy
       linie po 21 px nie zmieściłyby się w 80 px wysokości karty. */
    .realizacjeMap .realizacjeMapPopupBody {
        min-width: 0;
        padding: 11px 12px 6px;
    }

    .realizacjeMap :is(.realizacjeMapPopupCategory, .realizacjeMapPopupTitle, .realizacjeMapPopupMeta) {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 21px;
    }

    .realizacjeMap .realizacjeMapPopupCategory {
        font-size: 12px;
        color: var(--color-primary-500);
    }

    .realizacjeMap .realizacjeMapPopupTitle {
        font-size: 14px;
        font-weight: 700;
        color: var(--color-accent-500);
    }

    .realizacjeMap .realizacjeMapPopupMeta {
        font-size: 12px;
        color: var(--color-accent_tertiary-500);
    }

    /* --- Karta wskazana na mapie: obrys w kolorze marki. Reguła jest niewarstwowa,
           więc podświetlenie nie znika pod kursorem (hover:ring-* siedzi w @layer). --- */
    .realizacjeMapCard.is-active {
        --tw-ring-color: var(--color-primary-500);
    }

/* ------------------- 8. Custom scroll ------------------- */
    .hide-scroll {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .hide-scroll::-webkit-scrollbar {
        display: none;
    }

    .scroller {
        scrollbar-width: auto;
        scrollbar-color: #1E1E1E #E2E2E2;
    }

    .scroller::-webkit-scrollbar {
        height: 5px;
    }

    .scroller::-webkit-scrollbar-track {
        background: #E2E2E2;
        border-radius: 20px;
    }

    .scroller::-webkit-scrollbar-thumb {
        background-color: #1E1E1E;
        border-radius: 20px;
    }


/* ------------------- 9. Smooth scroll ------------------- */
    html {
        scroll-behavior: smooth;
    }


/* ------------------- 10. Contact Form 7 ------------------- */
    /* Układ formularza robimy klasami Tailwinda w shortcode (class:...), a <p>/<br>
       wyłącza filtr w inc/custom.php. Przez class: przechodzą TYLKO proste klasy
       (litery/cyfry/dywiz); warianty (focus:), arbitrary ([..]) i kroki .5 psują
       parser form-tagów - takie style siedzą tutaj. Wartości ramki/promienia
       podmień pod design projektu, kolory przez tokeny palety. */

    /* Ramka pól: to, czego nie da się podać przez class: (border z kryciem itd.). */
    .wpcf7-form input[type="text"],
    .wpcf7-form input[type="email"],
    .wpcf7-form input[type="tel"],
    .wpcf7-form input[type="number"],
    .wpcf7-form select,
    .wpcf7-form textarea {
        width: 100%;
        border: 1px solid color-mix(in srgb, var(--color-accent_tertiary-500) 15%, transparent);
        border-radius: 0.5rem;
        background-color: var(--color-background);
    }

    /* Wnętrze pól: przez class: w form-tagu nie da się podać ani kroków .5, ani wariantów,
       a sanitize_html_class wycina z klasy kropki i nawiasy (mt-4.5 wychodzi jako mt-45).
       Padding i typografia pól tekstowych siedzą więc tutaj. Selecty mają własny padding
       w sekcji 16 (robią miejsce na strzałkę). */
    .wpcf7-form input[type="text"],
    .wpcf7-form input[type="email"],
    .wpcf7-form input[type="tel"],
    .wpcf7-form input[type="number"],
    .wpcf7-form textarea {
        padding: 0.75rem 1rem;
        font-size: 1rem;
        line-height: 1.5rem;
        color: var(--color-accent-500);
    }

    /* Wysokość z makiety (140 px); atrybut rows z form-tagu dałby 146 px. */
    .wpcf7-form textarea {
        height: 8.75rem;
        resize: none;
    }

    .wpcf7-form input::placeholder,
    .wpcf7-form textarea::placeholder {
        color: color-mix(in srgb, var(--color-accent_tertiary-500) 50%, transparent);
    }

    .wpcf7-form input:focus,
    .wpcf7-form select:focus,
    .wpcf7-form textarea:focus {
        outline: none;
        border-color: var(--color-primary-500);
    }

    /* Select: bez natywnej strzałki (dubluje się z własnym SVG chevron w wrapperze .relative). */
    .wpcf7-form select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: none;
    }

    /* Checkbox zgody: własny wygląd zamiast systemowego. Scope pod .wpcf7-acceptance,
       żeby wygrać z globalnymi regułami startera dla input[type=checkbox]. */
    .wpcf7-acceptance input[type="checkbox"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
        margin-top: 0.125rem;
        border: 1px solid color-mix(in srgb, var(--color-accent_tertiary-500) 15%, transparent);
        border-radius: 0.125rem;
        background-color: var(--color-background);
        cursor: pointer;
    }

    .wpcf7-acceptance input[type="checkbox"]:checked {
        border-color: var(--color-secondary-500);
        background-color: var(--color-secondary-500);
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
        background-size: 0.75rem;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* Zerowanie marginesów wrapperów CF7 - bez tego akceptacja ma wcięcie z lewej
       i za duży odstęp od pola powyżej (odstęp reguluje klasa mt-* na kontenerze w shortcode). */
    .wpcf7-list-item,
    .wpcf7-form-control-wrap {
        margin: 0;
    }

    /* Treść zgody idzie między znacznikami [acceptance ...] ... [/acceptance], więc CF7
       renderuje ją w <label> razem z inputem. Odstęp pole - tekst z makiety (12 px). */
    .wpcf7-acceptance .wpcf7-list-item label {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        margin: 0;
        cursor: pointer;
    }

    /* Komunikat walidacji pod polem. */
    .wpcf7-not-valid-tip {
        margin-top: 0.25rem;
        font-size: 0.75rem;
        color: #dc2626;
    }

    .wpcf7-not-valid {
        border-color: #dc2626 !important;
    }

    /* Zbiorczy komunikat CF7 (sukces/błąd) pod formularzem. */
    .wpcf7-response-output {
        margin: 1rem 0 0;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
    }

    .wpcf7-spinner {
        margin-left: 0.5rem;
    }


/* === 11. SIATKA ATUTÓW (blok home-why) === */
/* Makieta ma na telefonie odstępy 27/27/40 px - czwarty atut leży niżej niż reszta.
   Reguła siedzi tutaj, a NIE jako wariant [&>*:nth-child(4)] w atrybucie class.
   Powód: znak > w nazwie klasy rozwala wptexturize WordPressa. Ten filtr dzieli
   treść wpisu na tagi i tekst regexem, który nie rozumie cudzysłowów w atrybutach,
   więc > w środku klasy bierze za koniec tagu, a zamykający cudzysłów zamienia na
   typograficzny (&#8243;). Atrybut zostaje niedomknięty i przeglądarka gubi markup. */
.whyGrid > *:nth-child(4) {
  margin-top: 13px;
}

@media (min-width: 768px) {
  .whyGrid > *:nth-child(4) {
    margin-top: 0;
  }
}

/* === 12. OCENA W GWIAZDKACH (bloki home-opinia, opinie-karta, opinie-instytucja) === */
/* Liczbę zapalonych gwiazdek ustawia pole select bloku przez atrybut data-rating
   na kontenerze. Gwiazdki to <use> w jednym SVG, więc wygaszamy je selektorem
   nth-child - a ten musi siedzieć tutaj, a NIE jako wariant [&>use]:... w atrybucie
   class. Powód: znak > w nazwie klasy rozwala wptexturize WordPressa (patrz sekcja 11).
   Makieta pokazuje wyłącznie oceny 5/5, więc kolor wygaszonej gwiazdki to decyzja
   projektowa: szarość palety na białej karcie, białe 30% na karcie w stanie hover. */
.opinieStars[data-rating="1"] use:nth-child(n+2),
.opinieStars[data-rating="2"] use:nth-child(n+3),
.opinieStars[data-rating="3"] use:nth-child(n+4),
.opinieStars[data-rating="4"] use:nth-child(n+5) {
  color: var(--color-accent_secondary-500);
}

.opinieCard:hover .opinieStars[data-rating="1"] use:nth-child(n+2),
.opinieCard:hover .opinieStars[data-rating="2"] use:nth-child(n+3),
.opinieCard:hover .opinieStars[data-rating="3"] use:nth-child(n+4),
.opinieCard:hover .opinieStars[data-rating="4"] use:nth-child(n+5),
.opinieCardDark .opinieStars[data-rating="1"] use:nth-child(n+2),
.opinieCardDark .opinieStars[data-rating="2"] use:nth-child(n+3),
.opinieCardDark .opinieStars[data-rating="3"] use:nth-child(n+4),
.opinieCardDark .opinieStars[data-rating="4"] use:nth-child(n+5) {
  color: rgb(255 255 255 / 0.3);
}

/* Same gwiazdki są dla czytnika ekranu niewidoczne (SVG ma aria-hidden), więc
   ocenę podaje treść generowana z atrybutu - czyta ją NVDA i VoiceOver. */
.opinieStars::before {
  content: "Ocena: " attr(data-rating) " na 5";
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* === 13. SIATKA OPINII (blok opinie-lista) === */
/* Liczbę kolumn na desktopie wybiera klient polem select bloku (data-cols na
   wrapperze). Reguły siedzą tutaj, bo klasa Tailwinda podmieniana atrybutem
   musiałaby wejść w cały atrybut class - a wariant z selektorem dziecka
   ([&>*]) rozwala wptexturize (patrz sekcja 11). Na telefonie zawsze jedna
   kolumna, na tablecie dwie, wybór klienta działa od 1024 px. */
.opinieListaGrid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .opinieListaGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .opinieListaWrap[data-cols="2"] .opinieListaGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opinieListaWrap[data-cols="3"] .opinieListaGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* === 14. FORMULARZ WIELOKROKOWY (blok kontakt-formularz) === */
/* Moduł: assets/js/modules/formsteps.js. Bez JS nie powstaje żadna klasa stanu,
   więc formularz zostaje jedną długą stroną z widocznymi krokami - dlatego panele
   chowa dopiero .formSteps.is-ready, a nie reguła na samym [data-step-panel]. */
.formSteps.is-ready [data-step-panel] {
  display: none;
}

.formSteps.is-ready [data-step-panel].is-current {
  display: block;
}

/* Utility .hidden Tailwinda siedzi w @layer, a reguły stąd są niewarstwowe i wygrywają
   z nią niezależnie od specyficzności. Elementy komponentu, które mają własną regułę
   display, potrzebują więc jawnego wyjątku - inaczej klasa `hidden` na nich nie działa. */
.formSteps.hidden,
.formSteps.is-ready [data-step-panel].hidden,
[data-step-thanks].hidden {
  display: none;
}

/* Ekran podziękowania przed startem JS jest widoczny (treść dostępna bez skryptów).
   Po starcie modułu decyduje o nim stan na sekcji bloku. */
[data-form-state] [data-step-thanks] {
  display: none;
}

[data-form-state="sent"] [data-step-thanks] {
  display: flex;
}

[data-form-state="sent"] .formSteps {
  display: none;
}

/* Po wysłaniu to samo mówi ekran podziękowania - zbiorczy komunikat CF7 byłby dublem pod nim. */
[data-form-state="sent"] .wpcf7-response-output {
  display: none;
}

/* Po wysłaniu podziękowanie idzie na pełną szerokość: siatka spada do jednej kolumny,
   karta gubi tło, promień i cień, sidebar znika. Która kolumna jest którą, poznajemy
   po panelu podziękowania - blok nie musi nieść dodatkowych klas pod ten stan. */
[data-form-state="sent"] > div {
  grid-template-columns: minmax(0, 1fr);
}

[data-form-state="sent"] > div > div:has([data-step-thanks]) {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

[data-form-state="sent"] > div > div:not(:has([data-step-thanks])) {
  display: none;
}

/* === 15. MAPA BIURA (Leaflet, jeden punkt) === */
/* Moduł: assets/js/modules/map.js, wariant .kontaktMapa (współrzędne w data-lat/data-lng).
   Reguły są osobne od mapy realizacji (sekcja 7), żeby zmiana w jednym komponencie nie
   ruszała drugiego. Nadpisania Leafleta scope'owane dwiema klasami - vendor ładuje się
   wcześniej, więc pojedyncze klasy arkusza Leafleta przegrywają. */
.kontaktMapaCanvas {
  z-index: 0;
}

.kontaktMapa .leaflet-container {
  font-family: inherit;
}

.kontaktMapa .leaflet-tile-pane {
  filter: grayscale(1) brightness(1.02);
}

/* Biuro świeci żółtym akcentem, żeby nie myliło się z niebieskimi pinezkami realizacji. */
.kontaktMapa .kontaktMapaMarker {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--color-secondary-500) 25%, transparent);
}

.kontaktMapa .kontaktMapaMarkerCore {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background-color: var(--color-secondary-500);
}


/* === 16. FORMULARZ CF7 - KARTY TEMATÓW, CHIPSY, ZGODA, WYSYŁKA (blok kontakt-formularz) === */
/* Contact Form 7 renderuje [radio], [checkbox], [acceptance] i [submit] własnym, sztywnym
   markupem (span.wpcf7-form-control-wrap > span.wpcf7-form-control > span.wpcf7-list-item >
   label > input + span.wpcf7-list-item-label) i nie wpuszcza do środka ani ikony, ani drugiego
   wiersza tekstu, ani SVG w przycisku. Cały wygląd robią więc reguły poniżej. Podgląd formularza
   w blocks-kontakt.html niesie DOKŁADNIE ten sam DOM, dlatego jedna sekcja obsługuje i podgląd
   w Pinegrow, i front WordPressa. Zmieniasz tu - patrz też cf7/kontakt.txt.

   POLSKA TREŚĆ W CSS: podtytuły kart tematów wchodzą jako content w ::after (koniec sekcji 16.1).
   To jedyne miejsce w projekcie, gdzie tekst dla użytkownika siedzi w arkuszu stylów - CF7 nie
   pozwala wstawić drugiego wiersza do etykiety opcji. Przy zmianie copy poprawiasz dwa miejsca:
   wartości w form-tagu [radio temat ...] i te reguły.

   Kolejność opcji w form-tagu wyznacza kolejność w DOM, więc ikony i podtytuły po :nth-child są
   stabilne. Dopisanie szóstej opcji = dopisanie tu kolejnego bloku nth-child (bez tego karta
   zostaje bez ikony i podtytułu).

   Reguły są celowo dwuklasowe: muszą wygrać z arkuszem wtyczki (includes/css/styles.css nadaje
   .wpcf7-list-item display:inline-block i margin-left:1em, a .wpcf7-list-item-label::before/::after
   wstawiają spacje). Kolejność wczytania obu arkuszy nie jest gwarantowana. */

/* --- 16.1 Karty tematów ([radio temat use_label_element default:1]) --- */
    .kontaktTematy .wpcf7-form-control-wrap {
        display: block;
    }

    .kontaktTematy .wpcf7-radio {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    @media (min-width: 640px) {
        .kontaktTematy .wpcf7-radio {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (min-width: 1024px) {
        .kontaktTematy .wpcf7-radio {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    .kontaktTematy .wpcf7-list-item {
        display: block;
        margin: 0;
        border: 1px solid color-mix(in oklab, var(--color-accent_tertiary-500) 15%, transparent);
        border-radius: 1rem;
        background-color: var(--color-background);
        transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .kontaktTematy .wpcf7-list-item:hover {
        border-color: color-mix(in oklab, var(--color-primary-500) 40%, transparent);
        background-color: color-mix(in oklab, var(--color-primary-500) 5%, transparent);
    }

    /* Po hoverze, żeby karta wybrana została wybrana także pod kursorem. */
    .kontaktTematy .wpcf7-list-item:has(input:checked) {
        border-color: var(--color-primary-500);
        background-color: color-mix(in oklab, var(--color-primary-500) 10%, transparent);
    }

    .kontaktTematy .wpcf7-list-item:has(input:focus-visible) {
        outline: 2px solid var(--color-primary-500);
        outline-offset: 2px;
    }

    .kontaktTematy .wpcf7-list-item label {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
        padding: 2.25rem 1rem 1.875rem;
        text-align: center;
        cursor: pointer;
    }

    /* Input zostaje w DOM (klik w etykietę przełącza opcję, klawiatura działa), tylko znika z oczu. */
    .kontaktTematy .wpcf7-list-item input {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* Ikona jako maska: kolor daje background-color, więc stan zaznaczony przemalowuje ją jedną
       deklaracją. SVG 1:1 z podglądu bloku - do etykiety CF7 nie da się wstawić grafiki. */
    .kontaktTematy .wpcf7-list-item label::before {
        content: "";
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        flex-shrink: 0;
        background-color: var(--color-accent_tertiary-500);
        transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .kontaktTematy .wpcf7-list-item:has(input:checked) label::before {
        background-color: var(--color-primary-500);
    }

    /* Znacznik zaznaczenia w prawym górnym rogu. Siedzi na etykiecie, a nie na .wpcf7-list-item,
       bo pseudo-element karty nie przełączałby opcji przy kliknięciu w róg. */
    .kontaktTematy .wpcf7-list-item label::after {
        content: "";
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 9999px;
        background-color: var(--color-primary-500);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8.82' fill='%23fff'%3E%3Cpath d='M11.8616 1.8045L4.98545 8.67916C4.80115 8.86271 4.50279 8.86271 4.31923 8.67916L0.137664 4.47083C-0.045888 4.28654 -0.045888 3.98706 0.137664 3.80388L1.1368 2.80549C1.32109 2.62156 1.61946 2.62156 1.80301 2.80549L4.65587 5.6773L10.1951 0.137664C10.3787 -0.045888 10.677 -0.045888 10.8621 0.137664L11.8612 1.13754C12.0466 1.32146 12.0466 1.62094 11.8616 1.8045Z'/%3E%3C/svg%3E");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 0.75rem auto;
        opacity: 0;
        transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .kontaktTematy .wpcf7-list-item:has(input:checked) label::after {
        opacity: 1;
    }

    .kontaktTematy .wpcf7-list-item-label {
        display: block;
        margin-top: 0.625rem;
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 700;
        color: var(--color-accent-500);
    }

    /* Spacje dokładane przez arkusz wtyczki (content: " ") są tu zbędne, a ::after przejmujemy
       na podtytuł - bez content: none szósta opcja dostałaby pustą linię zamiast niczego. */
    .kontaktTematy .wpcf7-list-item-label::before {
        content: none;
    }

    .kontaktTematy .wpcf7-list-item-label::after {
        content: none;
        display: block;
        margin-top: 0.125rem;
        font-size: 0.875rem;
        line-height: 1.3125rem;
        font-weight: 300;
        color: var(--color-accent_tertiary-500);
    }

    @media (min-width: 1024px) {
        .kontaktTematy .wpcf7-list-item-label::after {
            font-size: 1rem;
            line-height: 1.5rem;
        }
    }

    /* Ikony i podtytuły per opcja - kolejność jak w form-tagu [radio temat ...] */
    .kontaktTematy .wpcf7-list-item:nth-child(1) label::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000'%3E%3Cpath d='M20 4H4C3.44772 4 3 4.44772 3 5V13C3 13.5523 3.44772 14 4 14H20C20.5523 14 21 13.5523 21 13V5C21 4.44772 20.5523 4 20 4Z' stroke-width='1.75'/%3E%3Cpath d='M9 4V14M15 4V14M3 9H21M12 14V18M8 20H16' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000'%3E%3Cpath d='M20 4H4C3.44772 4 3 4.44772 3 5V13C3 13.5523 3.44772 14 4 14H20C20.5523 14 21 13.5523 21 13V5C21 4.44772 20.5523 4 20 4Z' stroke-width='1.75'/%3E%3Cpath d='M9 4V14M15 4V14M3 9H21M12 14V18M8 20H16' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
    }

    .kontaktTematy .wpcf7-list-item:nth-child(1) .wpcf7-list-item-label::after {
        content: "Nowa instalacja";
    }

    .kontaktTematy .wpcf7-list-item:nth-child(2) label::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000'%3E%3Cpath d='M12 3V21M19 8L12 3L5 8M7 21V13H17V21' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000'%3E%3Cpath d='M12 3V21M19 8L12 3L5 8M7 21V13H17V21' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .kontaktTematy .wpcf7-list-item:nth-child(2) .wpcf7-list-item-label::after {
        content: "Nowa instalacja";
    }

    .kontaktTematy .wpcf7-list-item:nth-child(3) label::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000'%3E%3Cpath d='M14.5003 6.50003C15.2356 6.14694 16.0613 6.02712 16.8667 6.15664C17.6721 6.28615 18.4186 6.6588 19.0062 7.22462C19.5938 7.79044 19.9943 8.52238 20.1541 9.3223C20.3139 10.1222 20.2253 10.9519 19.9003 11.7L11.7003 19.9C11.2574 20.2064 10.7211 20.3476 10.1848 20.2991C9.64851 20.2507 9.14622 20.0156 8.76545 19.6348C8.38469 19.2541 8.1496 18.7518 8.10113 18.2155C8.05267 17.6792 8.19391 17.1429 8.50025 16.7L14.5003 10.7' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 20L7 17' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000'%3E%3Cpath d='M14.5003 6.50003C15.2356 6.14694 16.0613 6.02712 16.8667 6.15664C17.6721 6.28615 18.4186 6.6588 19.0062 7.22462C19.5938 7.79044 19.9943 8.52238 20.1541 9.3223C20.3139 10.1222 20.2253 10.9519 19.9003 11.7L11.7003 19.9C11.2574 20.2064 10.7211 20.3476 10.1848 20.2991C9.64851 20.2507 9.14622 20.0156 8.76545 19.6348C8.38469 19.2541 8.1496 18.7518 8.10113 18.2155C8.05267 17.6792 8.19391 17.1429 8.50025 16.7L14.5003 10.7' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 20L7 17' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E");
    }

    .kontaktTematy .wpcf7-list-item:nth-child(3) .wpcf7-list-item-label::after {
        content: "Istniejąca instalacja";
    }

    .kontaktTematy .wpcf7-list-item:nth-child(4) label::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000'%3E%3Cpath d='M3 21H21M5 21V8L10 4V21M14 21V11L19 14V21' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000'%3E%3Cpath d='M3 21H21M5 21V8L10 4V21M14 21V11L19 14V21' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .kontaktTematy .wpcf7-list-item:nth-child(4) .wpcf7-list-item-label::after {
        content: "Samorządy, instytucje";
    }

    .kontaktTematy .wpcf7-list-item:nth-child(5) label::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000'%3E%3Cpath d='M7.99941 11H15.9994M7.99941 15H12.9994M20.9994 12C20.9889 13.5265 20.5902 15.0252 19.841 16.3552C19.0918 17.6852 18.0166 18.8027 16.7165 19.6028C15.4164 20.4028 13.9342 20.859 12.4093 20.9285C10.8844 20.998 9.36685 20.6785 7.99941 20L3.49941 21L4.79941 17C3.93606 15.8451 3.36283 14.4997 3.12799 13.077C2.89314 11.6544 3.00355 10.1961 3.44993 8.82506C3.89631 7.45398 4.66558 6.21022 5.69297 5.19851C6.72036 4.18679 7.9758 3.43674 9.35358 3.01149C10.7314 2.58625 12.1911 2.49828 13.61 2.75497C15.0289 3.01166 16.3653 3.60551 17.5068 4.48652C18.6483 5.36752 19.5613 6.50989 20.1691 7.81743C20.777 9.12498 21.0617 10.5594 20.9994 12Z' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000'%3E%3Cpath d='M7.99941 11H15.9994M7.99941 15H12.9994M20.9994 12C20.9889 13.5265 20.5902 15.0252 19.841 16.3552C19.0918 17.6852 18.0166 18.8027 16.7165 19.6028C15.4164 20.4028 13.9342 20.859 12.4093 20.9285C10.8844 20.998 9.36685 20.6785 7.99941 20L3.49941 21L4.79941 17C3.93606 15.8451 3.36283 14.4997 3.12799 13.077C2.89314 11.6544 3.00355 10.1961 3.44993 8.82506C3.89631 7.45398 4.66558 6.21022 5.69297 5.19851C6.72036 4.18679 7.9758 3.43674 9.35358 3.01149C10.7314 2.58625 12.1911 2.49828 13.61 2.75497C15.0289 3.01166 16.3653 3.60551 17.5068 4.48652C18.6483 5.36752 19.5613 6.50989 20.1691 7.81743C20.777 9.12498 21.0617 10.5594 20.9994 12Z' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    .kontaktTematy .wpcf7-list-item:nth-child(5) .wpcf7-list-item-label::after {
        content: "Media, praca, partnerstwa";
    }

/* --- 16.2 Chipsy zakresu ([checkbox zakres use_label_element]) --- */
    .kontaktChipsy .wpcf7-form-control-wrap {
        display: block;
    }

    .kontaktChipsy .wpcf7-checkbox {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .kontaktChipsy .wpcf7-list-item {
        display: block;
        margin: 0;
        border: 1px solid color-mix(in oklab, var(--color-accent-500) 25%, transparent);
        border-radius: 0.5rem;
        background-color: var(--color-background);
        transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1), background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .kontaktChipsy .wpcf7-list-item:hover {
        background-color: color-mix(in oklab, var(--color-primary-500) 5%, transparent);
    }

    .kontaktChipsy .wpcf7-list-item:has(input:checked) {
        border-color: var(--color-primary-500);
        background-color: var(--color-primary-500);
    }

    .kontaktChipsy .wpcf7-list-item:has(input:focus-visible) {
        outline: 2px solid var(--color-primary-500);
        outline-offset: 2px;
    }

    .kontaktChipsy .wpcf7-list-item label {
        display: block;
        margin: 0;
        padding: 0.875rem 1.5rem;
        text-align: center;
        cursor: pointer;
    }

    .kontaktChipsy .wpcf7-list-item input {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .kontaktChipsy .wpcf7-list-item-label {
        display: block;
        font-size: 1rem;
        line-height: 1.375rem;
        font-weight: 500;
        color: var(--color-accent-500);
        transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .kontaktChipsy .wpcf7-list-item:has(input:checked) .wpcf7-list-item-label {
        color: var(--color-background);
    }

    .kontaktChipsy .wpcf7-list-item-label::before,
    .kontaktChipsy .wpcf7-list-item-label::after {
        content: none;
    }

/* --- 16.3 Zgoda ([acceptance zgoda] ... [/acceptance]) --- */
/* Wygląd samego checkboxa i układ etykiety są w sekcji 10 (.wpcf7-acceptance). Tekst zgody
   siedzi MIĘDZY znacznikami, więc CF7 wkłada go do <label> razem z inputem - pole ma dostępną
   nazwę, a klik w tekst je przełącza. Trzy zagnieżdżone spany wtyczki są inline, muszą zejść
   na blok; typografia tekstu idzie tutaj, bo span.wpcf7-list-item-label generuje wtyczka
   i nie da się dopisać mu klasy z form-tagu. */
    .kontaktZgoda .wpcf7-form-control-wrap,
    .kontaktZgoda .wpcf7-acceptance,
    .kontaktZgoda .wpcf7-list-item {
        display: block;
        margin: 0;
    }

    .kontaktZgoda .wpcf7-list-item-label {
        min-width: 0;
        font-size: 0.875rem;
        line-height: 1.3125rem;
        color: var(--color-accent_tertiary-500);
    }

    /* Spacje dokładane przez arkusz wtyczki (content: " ") rozsuwałyby pole od tekstu
       i zostawiały spację przed kropką na końcu zdania. */
    .kontaktZgoda .wpcf7-list-item-label::before,
    .kontaktZgoda .wpcf7-list-item-label::after {
        content: none;
    }

/* --- 16.4 Przycisk wysyłki ([submit class:kontaktBtnWyslij]) --- */
/* [submit] renderuje <input type="submit">, który nie może zawierać SVG ani spanów - strzałka
   wchodzi jako background-image, a wyrównanie tekstu wynika z asymetrycznego paddingu
   (24 px z lewej, 24 + 16 + 10 z prawej), dokładnie jak gap-2.5 w przycisku Dalej. */
    .kontaktBtnWyslij {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0.875rem 3.125rem 0.875rem 1.5rem;
        -webkit-appearance: none;
        appearance: none;
        border: 0;
        border-radius: 0.5rem;
        background-color: var(--color-secondary-500);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.0008 9.5872' fill='%23333333'%3E%3Cpath d='M15.7878 4.27926L11.7212 0.21264C11.5123 0.00481428 11.2 -0.0569306 10.9289 0.0552126C10.6572 0.168372 10.4802 0.432354 10.4802 0.726616V2.50316H5.2071C4.67253 2.5037 4.23828 2.93744 4.23828 3.47147V6.11498C4.23828 6.64907 4.67249 7.0823 5.2076 7.0823H10.4802V8.85989C10.4802 9.15466 10.6572 9.41915 10.9289 9.53231C11.2 9.64402 11.5123 9.58227 11.7212 9.3739L15.7878 5.30725C16.0718 5.02328 16.0718 4.56326 15.7878 4.27926Z'/%3E%3Cpath d='M2.70575 2.50421H2.43408C1.98389 2.50421 1.61914 2.86899 1.61914 3.31922V6.26831C1.61914 6.71847 1.98389 7.08332 2.43408 7.08332H2.70575C3.15595 7.08332 3.52073 6.71851 3.52073 6.26831V3.31922C3.52073 2.86902 3.15595 2.50421 2.70575 2.50421Z'/%3E%3Cpath d='M0.526846 2.46668C0.235667 2.46668 0 2.70235 0 2.99356V6.59457C0 6.88575 0.235667 7.12142 0.526846 7.12142C0.818059 7.12142 1.05373 6.88575 1.05373 6.59457V2.99356C1.05369 2.70235 0.818026 2.46668 0.526846 2.46668Z'/%3E%3C/svg%3E");
        background-position: right 1.5rem center;
        background-repeat: no-repeat;
        background-size: 1rem auto;
        font-family: inherit;
        font-size: 1rem;
        line-height: 1.375rem;
        font-weight: 500;
        text-align: center;
        color: var(--color-accent-500);
        cursor: pointer;
        transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    @media (min-width: 1024px) {
        .kontaktBtnWyslij {
            width: auto;
        }
    }

    .kontaktBtnWyslij:hover {
        background-color: var(--color-secondary-600);
    }

    .kontaktBtnWyslij:focus-visible {
        outline: 2px solid var(--color-primary-500);
        outline-offset: 2px;
    }

    /* Formularz ma acceptance_as_validation: on, więc CF7 nie blokuje przycisku przy braku zgody.
       Stan disabled zostaje na wypadek wyłączenia tej opcji w panelu CF7. */
    .kontaktBtnWyslij:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    /* Kręciołek CF7 dokłada skrypt wtyczki PO przycisku (span z klasy has-spinner). W rzędzie
       flex z przyciskiem Wstecz byłby trzecim elementem i rozjechałby justify-between, więc
       zdejmujemy go z układu, a wysyłkę sygnalizuje sam przycisk. */
    .wpcf7-form .kontaktBtnWyslij + .wpcf7-spinner {
        display: none;
    }

    .wpcf7-form.submitting .kontaktBtnWyslij {
        opacity: 0.6;
        cursor: progress;
    }

/* --- 16.5 Selecty ([select] w grupach warunkowych) --- */
/* Sekcja 10 daje selectowi szerokość, ramkę, promień i zdejmuje natywną strzałkę. Tu dochodzi
   to, czego nie da się podać przez class: w form-tagu: padding z miejscem na strzałkę,
   sama strzałka (select nie ma pseudo-elementów) i kolor tekstu. */
    .kontaktSelekty select {
        padding: 0.75rem 3rem 0.75rem 1rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.5 9' fill='%235d6970'%3E%3Cpath d='M8.25 9C8.025 9 7.875 8.925 7.725 8.775L0.225 1.275C-0.075 0.975 -0.075 0.525 0.225 0.225C0.525 -0.075 0.975 -0.075 1.275 0.225L8.25 7.2L15.225 0.225C15.525 -0.075 15.975 -0.075 16.275 0.225C16.575 0.525 16.575 0.975 16.275 1.275L8.775 8.775C8.625 8.925 8.475 9 8.25 9Z'/%3E%3C/svg%3E");
        background-position: right 1.5rem center;
        background-repeat: no-repeat;
        background-size: 0.75rem auto;
        font-size: 1rem;
        line-height: 1.5rem;
        color: var(--color-accent_tertiary-500);
        cursor: pointer;
    }

    /* Pole „Rachunek" jest opcjonalne, więc pierwsza pozycja to zwykła opcja-placeholder
       (nie include_blank). Dopóki jest wybrana, tekst i strzałka są przygaszone jak w makiecie;
       po wyborze wartości wracają do pełnego koloru. Selektor po id z form-tagu (id:rachunek). */
    .kontaktSelekty select#rachunek:has(option:first-child:checked) {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.5 9' fill='%235d6970' fill-opacity='0.5'%3E%3Cpath d='M8.25 9C8.025 9 7.875 8.925 7.725 8.775L0.225 1.275C-0.075 0.975 -0.075 0.525 0.225 0.225C0.525 -0.075 0.975 -0.075 1.275 0.225L8.25 7.2L15.225 0.225C15.525 -0.075 15.975 -0.075 16.275 0.225C16.575 0.525 16.575 0.975 16.275 1.275L8.775 8.775C8.625 8.925 8.475 9 8.25 9Z'/%3E%3C/svg%3E");
        color: color-mix(in oklab, var(--color-accent_tertiary-500) 50%, transparent);
    }

    /* To samo przygaszenie dla selecta z first_as_label (formularz kontakt-cta, "Wybierz temat"):
       CF7 daje wtedy pierwszej opcji pustą wartość, więc wystarczy sprawdzić value="". */
    .kontaktSelekty select:has(option[value=""]:checked) {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.5 9' fill='%235d6970' fill-opacity='0.5'%3E%3Cpath d='M8.25 9C8.025 9 7.875 8.925 7.725 8.775L0.225 1.275C-0.075 0.975 -0.075 0.525 0.225 0.225C0.525 -0.075 0.975 -0.075 1.275 0.225L8.25 7.2L15.225 0.225C15.525 -0.075 15.975 -0.075 16.275 0.225C16.575 0.525 16.575 0.975 16.275 1.275L8.775 8.775C8.625 8.925 8.475 9 8.25 9Z'/%3E%3C/svg%3E");
        color: color-mix(in oklab, var(--color-accent_tertiary-500) 50%, transparent);
    }

/* --- 16.6 Przycisk wysyłki bez strzałki ([submit class:ctaBtnWyslij], blok kontakt-cta) --- */
/* Mechanika jak w 16.4 (input type="submit" nie przyjmie klas z kropką ani wariantów), ale bez
   strzałki i zawsze na pełną szerokość karty, jak na makiecie strony głównej. */
    .ctaBtnWyslij {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0.875rem 1.5rem;
        -webkit-appearance: none;
        appearance: none;
        border: 0;
        border-radius: 0.5rem;
        background-color: var(--color-secondary-500);
        font-family: inherit;
        font-size: 1rem;
        line-height: 1.375rem;
        font-weight: 500;
        text-align: center;
        color: var(--color-accent-500);
        cursor: pointer;
        transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .ctaBtnWyslij:hover {
        background-color: var(--color-secondary-600);
    }

    .ctaBtnWyslij:focus-visible {
        outline: 2px solid var(--color-primary-500);
        outline-offset: 2px;
    }

    /* Kręciołek CF7 pod pełnoszerokim przyciskiem dokładałby pusty wiersz pod kartą. */
    .wpcf7-form .ctaBtnWyslij + .wpcf7-spinner {
        display: none;
    }

    .wpcf7-form.submitting .ctaBtnWyslij {
        opacity: 0.6;
        cursor: progress;
    }

/* --- 16.7 Formularz serwisowy: opis i pola plików ([mfile], wtyczka Drag and Drop Multiple File Upload) --- */
/* Wtyczka buduje własną strefę: .codedropz-upload-handler > .codedropz-upload-container >
   .codedropz-upload-inner (nagłówek, "lub", link .cd-upload-btn) + licznik .dnd-upload-counter,
   a pod strefą listę .dnd-upload-status. Jej teksty są wspólne dla wszystkich pól, a makieta ma
   inne napisy dla zdjęć i wideo, więc ikona i napisy stoją w formularzu jako .serwisPlikOpis nad
   strefą, a teksty wtyczki zostają tylko dla czytników ekranu. Link wtyczki jest rozciągnięty na
   całą strefę, żeby klik w dowolne miejsce otwierał wybór plików. */
    .serwisFormularz textarea {
        height: 11.25rem;
    }

    .serwisPlikPole {
        position: relative;
    }

    .serwisPlikPole .wpcf7-form-control-wrap {
        display: block;
    }

    .serwisPlikOpis {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1;
        display: flex;
        height: 11.25rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 1rem;
        text-align: center;
        pointer-events: none;
    }

    .serwisPlikPole .codedropz-upload-wrapper,
    .serwisPlikPole .codedropz-upload-container,
    .serwisPlikPole .codedropz-upload-inner {
        margin: 0;
        padding: 0;
    }

    .serwisPlikPole .codedropz-upload-handler {
        position: relative;
        height: 11.25rem;
        margin: 0;
        padding: 0;
        border: 1px dashed var(--color-primary-500);
        border-radius: 0.5rem;
        background-color: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
        transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .serwisPlikWideo .codedropz-upload-handler {
        border-color: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
    }

    .serwisPlikPole .codedropz-upload-handler:hover,
    .serwisPlikPole .codedropz-upload-handler.codedropz-dragover {
        background-color: color-mix(in srgb, var(--color-primary-500) 15%, transparent);
    }

    .serwisPlikPole .codedropz-upload-handler.codedropz-dragover {
        border-style: solid;
        border-color: var(--color-primary-500);
    }

    .serwisPlikPole .codedropz-upload-inner > :not(.codedropz-btn-wrap) {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .serwisPlikPole .dnd-upload-counter {
        display: none;
    }

    .serwisPlikPole .codedropz-btn-wrap,
    .serwisPlikPole .cd-upload-btn {
        position: absolute;
        inset: 0;
        margin: 0;
    }

    .serwisPlikPole .cd-upload-btn {
        display: block;
        padding: 0;
        border: 0;
        border-radius: 0.5rem;
        background: transparent;
        font-size: 0;
        color: transparent;
        cursor: pointer;
    }

    .serwisPlikPole .cd-upload-btn:focus-visible {
        outline: 2px solid var(--color-primary-500);
        outline-offset: 2px;
    }

    /* Kafelek dodanego pliku jak w makiecie: plakietka z rozszerzeniem (data-ext ustawia
       fileupload.js), nazwa z rozmiarem, cienki pasek postępu i krzyżyk usuwania z prawej.
       Selektory mają prefiks .serwisPlikPole, żeby wygrać z arkuszem wtyczki (dnd-upload-cf7.css). */
    .serwisPlikPole .dnd-upload-status {
        gap: 1rem;
        margin-top: 0.75rem;
        padding: 0.875rem 1rem;
        border: 1px solid color-mix(in srgb, var(--color-accent_tertiary-500) 15%, transparent);
        border-radius: 0.75rem;
        background-color: var(--color-background);
    }

    .serwisPlikPole .dnd-upload-status + .dnd-upload-status {
        margin-top: 0.5rem;
    }

    .serwisPlikPole .dnd-upload-status .dnd-upload-image {
        display: flex;
        flex-shrink: 0;
        width: 2.75rem;
        height: 2.75rem;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 0.375rem;
        background-color: color-mix(in srgb, var(--color-primary-500) 12%, transparent);
    }

    .serwisPlikPole .dnd-upload-status .dnd-upload-image span.file {
        display: none;
    }

    .serwisPlikPole .dnd-upload-status .dnd-upload-image::after {
        content: attr(data-ext);
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: 700;
        color: var(--color-primary-500);
    }

    .serwisPlikPole .dnd-upload-status .dnd-upload-details {
        position: relative;
        flex: 1;
        min-width: 0;
        width: auto;
        padding: 0 2rem 0 0;
    }

    .serwisPlikPole .dnd-upload-status .dnd-upload-details .name {
        display: flex;
        gap: 0.375rem;
        padding: 0;
        font-size: 0.875rem;
        line-height: 1.3125rem;
        color: var(--color-accent_tertiary-500);
    }

    .serwisPlikPole .dnd-upload-status .dnd-upload-details .name span {
        padding-right: 0;
    }

    .serwisPlikPole .dnd-upload-status .dnd-upload-details .name em {
        flex-shrink: 0;
        font-style: normal;
        font-weight: 400;
        white-space: nowrap;
        color: color-mix(in srgb, var(--color-accent_tertiary-500) 70%, transparent);
    }

    .serwisPlikPole .dnd-upload-status .dnd-upload-details .dnd-progress-bar {
        height: 0.25rem;
        margin-top: 0.5rem;
        border-radius: 9999px;
        background: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
    }

    .serwisPlikPole .dnd-upload-status .dnd-upload-details .dnd-progress-bar span {
        border-radius: 9999px;
        background: var(--color-primary-500);
        font-size: 0;
        line-height: 0;
        color: transparent;
    }

    .serwisPlikPole .dnd-upload-status .dnd-upload-details .dnd-progress-bar span.complete {
        padding-right: 0;
    }

    .serwisPlikPole .dnd-upload-status .dnd-upload-details .remove-file {
        top: 50%;
        right: 0;
        display: flex;
        width: 1.5rem;
        height: 1.5rem;
        align-items: center;
        justify-content: center;
        border-radius: 0.25rem;
        transform: translateY(-50%);
    }

    .serwisPlikPole .dnd-upload-status .dnd-upload-details .remove-file span:after {
        width: 0.75rem;
        height: 0.75rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%235d6970' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M2 2l8 8M10 2l-8 8'/%3E%3C/svg%3E");
    }

    .serwisPlikPole .dnd-upload-status .dnd-upload-details .remove-file:focus-visible {
        outline: 2px solid var(--color-primary-500);
        outline-offset: 2px;
    }

    .serwisPlikPole .dnd-upload-status .dnd-upload-details span.has-error,
    .serwisPlikPole span.has-error-msg {
        font-size: 0.75rem;
        font-style: normal;
        color: #dc2626;
    }

    /* Ekran po wysłaniu zgłoszenia. CF7 daje formularzowi klasę sent, więc wystarczy CSS:
       pola i nagłówek karty znikają, zostaje podziękowanie (markup w cf7/serwis.txt).
       Nagłówek karty chowa klasa-hak serwisFormularzKarta z bloku serwis-formularz. */
    .serwisDziekujemy {
        display: none;
    }

    .wpcf7-form.sent .serwisDziekujemy {
        display: flex;
    }

    .wpcf7-form.sent .serwisFormularz,
    .wpcf7-form.sent:has(.serwisDziekujemy) .wpcf7-response-output {
        display: none;
    }

    .serwisFormularzKarta:has(.wpcf7-form.sent) > h2 {
        display: none;
    }

    .serwisFormularzKarta:has(.wpcf7-form.sent) > h2 + div {
        margin-top: 0;
    }

/* === 17. SIATKA ZESPOŁU (blok onas-zespol) === */
/* Liczbę kolumn na desktopie wybiera klient polem select bloku (data-cols na
   wrapperze). Reguły siedzą tutaj z tego samego powodu co siatka opinii w
   sekcji 13: klasa Tailwinda podmieniana atrybutem musiałaby zająć cały atrybut
   class. Na telefonie jedna kolumna, od 640 px dwie, wybór klienta od 1024 px. */
.zespolListaGrid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .zespolListaGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .zespolListaWrap[data-cols="3"] .zespolListaGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zespolListaWrap[data-cols="4"] .zespolListaGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* === 18. OCENA W GWIAZDKACH W HERO (bloki home-hero, opinie-hero) === */
/* Ten sam mechanizm co w sekcji 12 (data-rating z pola select bloku), ale SVG
   w obu hero ma na początku <defs>, więc nth-child liczyłby definicje razem
   z gwiazdkami. Stąd nth-of-type plus ograniczenie do bezpośrednich dzieci SVG:
   use ukryty w <defs> (pełna piąta gwiazdka w opinie-hero) nie może się wygasić
   samodzielnie, bo wygaszanie dziedziczy z gwiazdki, która go używa.
   Selektory z > siedzą tutaj, a NIE jako wariant [&>use]: w atrybucie class -
   znak > w nazwie klasy rozwala wptexturize WordPressa (patrz sekcja 11).
   Oba hero stoją na białym tle, więc kolor wygaszonej gwiazdki jest ten sam
   co na białej karcie opinii. */
.heroStars[data-rating="1"] svg > use:nth-of-type(n+2),
.heroStars[data-rating="2"] svg > use:nth-of-type(n+3),
.heroStars[data-rating="3"] svg > use:nth-of-type(n+4),
.heroStars[data-rating="4"] svg > use:nth-of-type(n+5) {
  color: var(--color-accent_secondary-500);
}

/* SVG ma aria-hidden, więc ocenę dla czytnika ekranu podaje treść z atrybutu. */
.heroStars::before {
  content: "Ocena: " attr(data-rating) " na 5";
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}