/* ==========================================
   Formularz kontaktowy - elegancki dwukolumnowy układ: formularz po lewej,
   dane kontaktowe firmy (e-mail, telefon, adres, NIP/REGON, social media) po prawej.
   Animacja wejścia (.cet-wrapper / .cet-animated / .cet-item) WSPÓLNA z pozostałymi
   "eleganckimi" widgetami - patrz elegant-animations.css / elegant-animations.js.
   ========================================== */

.ncf-wrapper {
    /* Tło sekcji to teraz delikatny pionowy gradient w tym samym kremowym
       odcieniu (#f6f2e9) co kółka z ikonami w sekcji "Dane kontaktowe"
       (.ncf-icon-circle). Gradient jest zaszyty na sztywno (nie przez zmienną
       --ncf-icon-bg jak wcześniej tło) - jeśli ktoś zmieni kolor w kontrolce
       Elementora "Kolor tła ikon", kółka z ikonami się przekolorują, ale ten
       gradient zostanie taki jak jest, dopóki nie zostanie ręcznie
       zaktualizowany tutaj w CSS. Gradient przechodzi od pełnej
       przezroczystości (00 = alpha 0%) u góry do ok. 51% krycia (82 w hex =
       ~0.51 alpha) u dołu, więc sekcja "wyłania się" z tła strony zamiast mieć
       twardą górną krawędź.
       Sekcja jest też celowo "full-bleed" - rozciągnięta na całą szerokość
       ekranu (poza ograniczenie kontenera Elementora), żeby gradient tła
       obejmował całą stronę, a nie tylko wąski kontener treści. Faktyczna
       zawartość (nagłówek, pola, dane kontaktowe) jest z powrotem
       wyśrodkowana i ograniczona szerokością przez .ncf-row (patrz niżej),
       żeby tekst nie rozciągał się na całą szerokość ekranu. */
    /* Kolor ujednolicony na wyraźną prośbę klienta - dokładnie ten sam
       odcień co powiadomienie WooCommerce ".woocommerce-message" (koszyk
       zaktualizowany), czyli rgb(247, 246, 247) - zamiast wcześniejszego,
       lekko innego kremowego odcienia (#f6f2e9). Gradient (przezroczysty
       u góry -> widoczny u dołu) zostaje, zgodnie z prośbą "zachowaj
       gradient" - zmienia się tylko sam kolor. */
    background: linear-gradient(to bottom, rgba(247, 246, 247, 0) 0%, rgba(247, 246, 247, 0.82) 100%);
    box-sizing: border-box;
    position: relative;
    /* Full-bleed - PODSTAWOWA wersja CSS-owa (tylko fallback/pierwszy render
       zanim JS zdąży zadziałać). Ten sam efekt jest potem PRECYZYJNIE
       dociągany przez JS (patrz custom-contact-form.js, funkcja
       applyFullBleed), bo sama matematyka CSS (calc(50% - 50vw)) zakłada, że
       bezpośredni rodzic tego diva jest idealnie wyśrodkowany na stronie -
       w kontenerach Elementora (.e-con-boxed, zagnieżdżone flexy, różne
       marginesy/paddingi w zależności od strony) to założenie czasem nie
       jest prawdziwe, przez co ta wersja CSS-owa potrafi się "rozjechać"
       względem prawdziwej krawędzi ekranu. JS mierzy RZECZYWISTĄ pozycję
       elementu (getBoundingClientRect) i nadpisuje te wartości dokładnymi
       pikselami, więc działa poprawnie niezależnie od zagnieżdżenia. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Kompensacja paddingu kontenera Elementora ujemnym marginesem - patrz
       identyczny mechanizm i pełne wyjaśnienie w custom-image-banner.css
       (.cib-wrapper). Zastępuje wcześniejszą regułę
       .e-con-full:has(.ncf-wrapper) itd. poniżej, która zerowała padding
       wprost na WSPÓLNYM kontenerze - a :has() dopasowuje każdego przodka z
       .ncf-wrapper gdziekolwiek w poddrzewie, więc gdyby ten formularz
       dzielił kontener najwyższego poziomu z innymi, niepowiązanymi
       sekcjami strony, ta reguła zerowałaby odstęp też między nimi. Ujemny
       margines dotyka tylko tego jednego elementu, nie wartości paddingu na
       kontenerze. */
    margin-block-start: calc(-1 * var(--padding-block-start, 0px));
    margin-block-end: calc(-1 * var(--padding-block-end, 0px));
    /* !important na padding - ten sam element ma też klasę .cet-wrapper
       (wspólny "silnik" animacji wejścia, patrz elegant-animations.css),
       która NIEZALEŻNIE ustawia własny padding (tylko góra/dół, boki na 0).
       Obie reguły mają identyczną specyficzność (sam selektor klasy), więc o
       tym, kto wygrywa, decyduje wyłącznie kolejność wczytania plików -
       .cet-wrapper akurat ładuje się później i zerowałby padding po bokach
       (stąd tekst "przyklejony" do krawędzi). !important tutaj gwarantuje, że
       nasz padding zawsze wygrywa, niezależnie od kolejności wczytywania
       arkuszy CSS. Padding poziomy jest teraz liczony od krawędzi ekranu
       (bo sekcja jest full-bleed), stąd większe wartości niż wcześniej. */
    padding: clamp(40px, 6vw, 72px) clamp(24px, 6vw, 80px) !important;
}

/* ------------------------------------------
   Ozdobny separator nad sekcją formularza - linia w kolorze akcentu (złoto marki),
   przerwana małym obróconym kwadratem ("diamentem") na środku, zamiast zwykłej,
   płaskiej poziomej kreski. Linie zwężają się do przezroczystości na zewnętrznych
   końcach (gradient), żeby całość wyglądała lekko i "unosiła się" nad formularzem,
   zamiast ciąć sekcję twardą krawędzią na całą szerokość.
   ------------------------------------------ */
.ncf-section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    max-width: 360px;
    margin: 0 auto clamp(32px, 6vw, 56px);
}

.ncf-divider-line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(to right, transparent, #b8974f 50%, transparent);
}

.ncf-divider-ornament {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border: 1px solid #b8974f;
    transform: rotate(45deg);
}

.ncf-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 64px;
    width: 100%;
    /* Wyśrodkowana i ograniczona szerokość treści, mimo że tło (.ncf-wrapper)
       rozciąga się na cały ekran (full-bleed) - dzięki temu gradient
       "oddycha" na całej szerokości strony, ale tekst i pola formularza nie
       stają się nieczytelnie rozciągnięte na szerokich ekranach. 1200px to
       typowa szerokość kontenera treści na tej stronie. */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.ncf-form-col {
    flex: 1 1 420px;
    min-width: min(320px, 100%);
}

.ncf-sidebar-col {
    flex: 0 1 320px;
    min-width: min(280px, 100%);
}

.ncf-form-heading {
    /* Celowo BEZ własnego font-family - dziedziczy krój z reszty strony (Astra/
       motyw nadrzędny), zamiast narzucać tu inny (np. szeryfowy). */
    font-weight: 400;
    font-size: clamp(1.85rem, 3.2vw, 2.7rem);
    line-height: 1.3em;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #1c1c1c;
    /* !important na marginesach - niektóre motywy (np. Astra) mają własne,
       bardziej "specyficzne" reguły dla nagłówków (h2) wewnątrz treści strony
       (np. z ujemnym marginesem dla optycznego wyrównania), które inaczej
       mogłyby wybić ten nagłówek poza padding .ncf-wrapper. */
    margin: 0 0 clamp(28px, 4vw, 44px) !important;
}

/* ------------------------------------------
   Formularz - pola

   Pola są celowo BEZ osobnych "pudełek" (bez tła/obwódki) - każde ma tylko
   cienką linię pod spodem, a etykieta siedzi nad nią jak podpowiedź. Sam
   formularz też jest BEZ własnego tła/obramowania (patrz .ncf-wrapper wyżej,
   gdzie jest wspólne tło całej sekcji) - dzięki temu nie ma efektu "pudełka"
   na innym tle, tylko jedna spójna, bezramkowa powierzchnia.
   ------------------------------------------ */
.ncf-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ncf-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 40px;
}

.ncf-field-row .ncf-field {
    flex: 1 1 200px;
    min-width: 0;
}

.ncf-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ncf-label {
    font-weight: 400;
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
    color: #7a756a;
}

.ncf-required {
    color: inherit;
}

.ncf-optional {
    color: #9a9a9a;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}

.ncf-input,
.ncf-textarea {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 0.95rem;
    color: #1c1c1c;
    padding: 4px 2px 10px;
    transition: border-color 0.25s ease;
    /* !important na tle/rogach/grubości boków obramowania - celowo, żeby ten
       bezramkowy, "tylko-kreska" wygląd był gwarantowany nawet na stronach,
       gdzie ten widget był dodany wcześniej i ma zapisane w Elementorze stare
       wartości (białe tło, zaokrąglone rogi) - bez tego trzeba by ręcznie
       otworzyć i zapisać widget na każdej takiej stronie, żeby zniknął
       efekt "pudełka". BEZ !important zostaje tylko sam KOLOR dolnej kreski
       (border-bottom-color) - to jedyne, co nadal da się normalnie zmienić
       z panelu Elementora ("Kolor linii pod polem"). */
    background-color: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom-width: 1px !important;
    border-bottom-style: solid !important;
    border-bottom-color: #c9c3b4;
    border-radius: 0 !important;
    /* !important - usuwa domyślny "shadowbox" (box-shadow) dokładany przez
       motyw/przeglądarkę na polach formularza (np. Astra stawia subtelny
       wewnętrzny cień na inputach/textarea domyślnie) - przy bezramkowym,
       "tylko-kreska" stylu tego formularza taki cień wygląda jak resztka
       pudełka wokół pola, którego celowo się tu pozbywamy. */
    box-shadow: none !important;
}

.ncf-input::placeholder,
.ncf-textarea::placeholder {
    color: #a8a294;
}

.ncf-textarea {
    resize: vertical;
    min-height: 100px;
}

.ncf-input:focus,
.ncf-textarea:focus {
    outline: none;
    /* box-shadow: none jest już wymuszony !important w bazowej regule wyżej -
       tutaj tylko dopilnowujemy, że stan :focus (który w wielu motywach/
       przeglądarkach dokłada WŁASNY, mocniejszy "glow" na focusie) też nic
       nie dokłada od siebie. */
    box-shadow: none !important;
    border-bottom-color: #b8974f;
}

/* Podświetlenie niewypełnionych/niepoprawnych pól na czerwono - dokładane przez
   JS (klasa "ncf-invalid") dopiero po nieudanej próbie wysłania formularza,
   a zdejmowane od razu, gdy użytkownik zacznie poprawiać dane pole (patrz
   custom-contact-form.js) - dzięki temu formularz nie "krzyczy" czerwienią
   od samego początku, zanim ktokolwiek w ogóle zacznie go wypełniać. */
.ncf-input.ncf-invalid,
.ncf-textarea.ncf-invalid {
    border-bottom-color: #c0392b;
}

/* Pole-pułapka dla botów - fizycznie na stronie, ale niedostępne dla ludzi:
   przesunięte poza ekran (nie display:none/visibility:hidden - część botów to wykrywa
   i pomija właśnie te pola), z tabindex="-1" i aria-hidden, żeby czytniki ekranu
   i nawigacja klawiaturą też je pomijały. */
.ncf-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------
   Załącznik pliku - kompaktowy, jednowierszowy wiersz (ikona spinacza + "Dodaj
   załącznik" + limit rozmiaru), a NIE duże, obwiedzione pole - zgodnie z
   referencyjnym projektem od klienta. To wciąż JEDEN element (<label> powiązana
   z ukrytym <input type="file">), więc przeciąganie i upuszczanie pliku
   (custom-contact-form.js) działa dokładnie tak samo jak wcześniej - zmienia
   się tylko to, jak duży/wyglądający jest ten obszar, nie jego zachowanie.
   ------------------------------------------ */
.ncf-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.ncf-dropzone {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 4px 12px;
    border: none;
    border-bottom: 1px dashed #c9c3b4;
    border-radius: 0;
    background-color: transparent;
    cursor: pointer;
    transition: border-color 0.25s ease;
}

.ncf-dropzone:hover,
.ncf-dropzone.ncf-dropzone-active {
    border-bottom-color: #b8974f;
}

.ncf-dropzone.ncf-dropzone-has-file {
    border-bottom-style: solid;
    border-bottom-color: #b8974f;
}

.ncf-dropzone-icon {
    width: 16px;
    height: 16px;
    color: #1C1C1C;
    flex-shrink: 0;
}

.ncf-dropzone-icon svg {
    width: 100%;
    height: 100%;
}

.ncf-dropzone-text {
    font-size: 0.9rem;
    color: #9a958a;
}

.ncf-dropzone-cta {
    font-weight: 600;
    color: #1c1c1c;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ncf-file-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1c1c1c;
    word-break: break-all;
}

.ncf-file-hint {
    margin: 0;
    font-size: 0.78rem;
    color: #8a8a8a;
}

/* ------------------------------------------
   Zgoda RODO
   ------------------------------------------ */
.ncf-consent-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    margin: -10px;
    border-radius: 2px;
    border: 1px solid transparent;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ncf-consent-checkbox {
    margin-top: 4px;
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    accent-color: #b8974f;
    cursor: pointer;
}

/* Brak zaznaczonej zgody przy próbie wysłania - podświetlamy CAŁY wiersz
   (obwódka + delikatne tło), bo samego checkboxa trudno stylizować spójnie
   między przeglądarkami, a to i tak jest znacznie bardziej zauważalne. */
.ncf-consent-row.ncf-invalid {
    border-color: #c0392b;
    background-color: rgba(192, 57, 43, 0.05);
}

.ncf-consent-row.ncf-invalid .ncf-consent-label {
    color: #a3352b;
}

.ncf-consent-label {
    font-size: 0.8rem;
    line-height: 1.6em;
    color: #6b6b6b;
    cursor: pointer;
}

/* ------------------------------------------
   Przycisk wysyłki
   ------------------------------------------ */
.ncf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: flex-end;
    width: fit-content;
    max-width: 100%;
    margin-top: 4px;
    padding: 15px 42px;
    border: 1.5px solid #1c1c1c;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #1c1c1c;
    background-color: transparent;
    cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.ncf-submit:hover {
    background-color: #1c1c1c;
    border-color: #1c1c1c;
    color: #ffffff;
}

.ncf-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ncf-submit-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    display: none;
    animation: ncf-spin 0.7s linear infinite;
}

.ncf-form.ncf-submitting .ncf-submit-spinner {
    display: inline-block;
}

@keyframes ncf-spin {
    to { transform: rotate(360deg); }
}

.ncf-privacy-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    font-size: 0.75rem;
    color: #9a9a9a;
}

.ncf-privacy-note .ncf-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: inline-flex;
}

.ncf-privacy-note .ncf-icon svg {
    width: 100%;
    height: 100%;
}

/* ------------------------------------------
   Komunikaty sukcesu / błędu
   ------------------------------------------ */
.ncf-message {
    padding: 14px 18px;
    margin-bottom: 20px;
    border-radius: 2px;
    font-size: 0.9rem;
    line-height: 1.5em;
}

.ncf-message-success {
    background-color: #eef6ee;
    color: #2f6a35;
    border: 1px solid #cde4cd;
}

.ncf-message-error {
    background-color: #fbeceb;
    color: #a3352b;
    border: 1px solid #f0cac7;
}

/* ------------------------------------------
   Sekcja kontaktowa (sidebar)
   ------------------------------------------ */
.ncf-sidebar-heading {
    font-weight: 300;
    font-size: 1.6rem;
    margin: 0 0 28px;
    color: #1c1c1c;
}

.ncf-info-list {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ncf-info-item {
    display: block;
}

.ncf-info-link {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-decoration: none;
    color: inherit;
}

a.ncf-info-link:hover .ncf-info-text {
    color: #b8974f;
}

.ncf-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: #f6f2e9;
    color: #1c1c1c;
}

.ncf-icon-circle svg {
    width: 19px;
    height: 19px;
}

.ncf-info-text {
    padding-top: 9px;
    font-size: 0.95rem;
    line-height: 1.5em;
    color: #5b5b5b;
    transition: color 0.25s ease;
}

.ncf-social-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    /* Cały rząd wyśrodkowany w poziomie względem szerokości .ncf-sidebar-col -
       stąd width: 100% (bez tego flexbox skurczyłby kontener dokładnie do
       szerokości samych ikon i nie byłoby czego wyśrodkowywać). */
    width: 100%;
}

/* Ten sam "okrągły z obwódką" wygląd, co ikony social media w stopce
   (.nesslighting-footer-social a w custom-footer.css) - na wyraźną prośbę
   klienta, żeby oba miejsca wyglądały spójnie zamiast "gołych" ikon bez tła
   i obramowania, jak było wcześniej. Rozmiar (38px) zostaje trochę większy
   niż w stopce (28px), bo ta sekcja ma więcej "powietrza" wokół siebie -
   proporcje ikony w środku (padding) są odpowiednio dobrane, żeby nie
   wyglądały nieproporcjonalnie duże w większym kółku. */
.ncf-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, #1c1c1c 25%, transparent);
    color: #1c1c1c;
    transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.ncf-social-link:hover {
    color: #b8974f;
    border-color: #b8974f;
    transform: translateY(-2px);
}

.ncf-social-link svg {
    width: 100%;
    height: 100%;
}

/* ------------------------------------------
   Responsywność - na wąskim ekranie (tablet i telefon) sekcja "Dane kontaktowe"
   znika CAŁKOWICIE, zamiast lądować pod formularzem - na tej szerokości robi się
   z tego bardzo długie przewijanie (kontakt + social media pod całym formularzem),
   a te same dane i tak są dostępne gdzie indziej na stronie (np. w stopce).
   ------------------------------------------ */
@media (max-width: 900px) {
    .ncf-row {
        display: block;
    }

    .ncf-form-col {
        width: 100%;
        min-width: 0;
    }

    .ncf-sidebar-col {
        display: none;
    }
}