/*
 * Omoda — Formularze. Wygląd wg Figma (node 85:408): jasna karta na ciemnym
 * tle sekcji, cienkie obramowania pól, przycisk czarny w wersji uppercase.
 * Kolory/spacing/typografia reużywają tokenów z omoda-core.css, żeby nie
 * wprowadzać drugiej palety obok istniejącej.
 */

/*
 * Tło formularza jest CZĘŚCIĄ komponentu (patrz Figma — cała sekcja jest
 * ciemna), nie czymś, co ma zapewnić strona/sekcja dookoła. ".omoda-form"
 * dlatego "wychodzi" na pełną szerokość viewportu (full-bleed), nawet gdy
 * shortcode wyląduje w wąskiej, wyśrodkowanej kolumnie Elementora — dzięki
 * temu wygląda tak samo wszędzie, 1:1 jak w projekcie, bez ustawień w Elementorze.
 */
.omoda-form {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--omoda-color-dark, #121212);
    font-family: var(--omoda-font-base, sans-serif);
    box-sizing: border-box;
}

.omoda-form *,
.omoda-form *::before,
.omoda-form *::after {
    box-sizing: border-box;
}

/*
 * SIATKA BEZPIECZEŃSTWA — motyw (Hello Elementor) ma w swoim reset.css reguły
 * "button:hover/:focus" (różowe tło #cc3366 + biały tekst) i "a:hover"
 * (granatowy kolor), które nadpisują KAŻDY przycisk/link bez własnego stylu
 * hover. Zamiast łatać to punktowo przy każdym nowym elemencie, neutralizujemy
 * to raz, dla całego formularza. Specyficzność (.omoda-form + element + pseudo)
 * jest CELOWO niższa niż konkretnych reguł poniżej (.omoda-form .klasa:hover,
 * dwie klasy) — więc własny styl hover danego przycisku/linku i tak wygrywa,
 * a to jest tylko domyślny, neutralny fallback dla wszystkiego innego.
 */
.omoda-form a:hover,
.omoda-form a:focus,
.omoda-form a:active,
.omoda-form button:hover,
.omoda-form button:focus {
    background-color: transparent;
    color: inherit;
}

.omoda-form__inner {
    max-width: var(--omoda-container-width, 1280px);
    margin: 0 auto;
    padding: var(--omoda-space-xl, 64px) var(--omoda-container-padding, 20px);
}

/* Strona podziękowania: pełna wysokość ekranu, treść wyśrodkowana w obu osiach. */
.omoda-form--thankyou {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.omoda-form__inner--center {
    width: 100%;
}

.omoda-form__thankyou-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--omoda-space-sm, 16px);
    color: var(--omoda-color-dark, #121212);
}

.omoda-form__thankyou-icon svg {
    width: 100%;
    height: 100%;
}

.omoda-form__intro {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var(--omoda-space-lg, 40px);
}

.omoda-form__heading {
    color: var(--omoda-color-text-inverse, #fff);
    font-size: var(--omoda-font-size-h2, 32px);
    line-height: var(--omoda-line-height-heading, 1.15);
    margin: 0 0 var(--omoda-space-sm, 16px);
}

.omoda-form__subheading {
    color: rgba(255, 255, 255, 0.75);
    font-size: var(--omoda-font-size-body, 16px);
    line-height: var(--omoda-line-height-body, 1.6);
    margin: 0;
}

.omoda-form__card {
    max-width: 620px;
    margin: 0 auto;
    background: #f7f7f7;
    border-radius: 4px;
    padding: var(--omoda-space-lg, 40px);
}

.omoda-form__card--center {
    text-align: center;
}

.omoda-form--thankyou .omoda-form__card {
    max-width: 480px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.omoda-form__card .omoda-form__heading,
.omoda-form__card .omoda-form__subheading {
    color: var(--omoda-color-text, #121212);
}

.omoda-form__card .omoda-form__subheading {
    opacity: 0.7;
}

.omoda-form__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.omoda-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--omoda-space-sm, 16px) var(--omoda-space-md, 24px);
}

.omoda-form__field--full {
    grid-column: 1 / -1;
}

.omoda-form__label {
    display: block;
    font-size: 13px;
    color: var(--omoda-color-text, #121212);
    margin-bottom: 6px;
}

.omoda-form__required {
    color: #b32d2e;
}

/*
 * Selektory świadomie zaczepione o ".omoda-form" (specyficzność 0,2,0), nie
 * gołe ".omoda-form__control" (0,1,0) — motyw Hello Elementor ma w swoim
 * reset.css regułę "input[type=text], input[type=email], ..." o specyficzności
 * 0,1,1, która bez tego wygrywałaby z naszą klasą dla zwykłych pól tekstowych
 * (Imię/E-mail/Telefon), narzucając szare obramowanie #666 i inny padding —
 * dokładnie to sprawiało wrażenie "rozjechanego" UI.
 */
.omoda-form .omoda-form__control {
    width: 100%;
    background: #fff;
    border: 1px solid var(--omoda-color-border, #e5e5e5);
    border-radius: 2px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 14px;
    color: var(--omoda-color-text, #121212);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.omoda-form .omoda-form__control:hover {
    border-color: var(--omoda-color-border-hover, #c2c2c2);
}

.omoda-form .omoda-form__control:focus {
    outline: none;
    border-color: var(--omoda-color-dark, #121212);
}

.omoda-form .omoda-form__control:hover:focus {
    border-color: var(--omoda-color-dark, #121212);
}

.omoda-form .omoda-form__control.omoda-form__control--error {
    border-color: #b32d2e;
}

.omoda-form textarea.omoda-form__control {
    min-height: 110px;
    resize: vertical;
}

/* Licznik znaków WEWNĄTRZ textarea, w prawym dolnym rogu (nie pod polem) —
   textarea dostaje zapas miejsca na dole (padding-bottom), żeby wpisywany
   tekst nigdy nie chował się pod licznikiem. */
.omoda-form__textarea-wrap {
    position: relative;
}

.omoda-form__textarea-wrap textarea.omoda-form__control {
    padding-bottom: 26px;
}

.omoda-form__counter {
    position: absolute;
    right: 14px;
    bottom: 8px;
    font-size: 11px;
    color: var(--omoda-color-text-muted, #5c5c5c);
    pointer-events: none;
}

/*
 * Strzałka selecta jako osobny element (SVG w <span>), NIE tło CSS —
 * Elementor globalnie wymusza "background-image: none !important" na
 * elementach wewnątrz kontenerów, które jeszcze nie są oznaczone jako
 * "e-lazyloaded" (mechanizm lazy-load teł), co po prostu kasowało strzałkę
 * ustawioną przez background-image, niezależnie od specyficzności/!important
 * po naszej stronie. Wrapper + realny element z boku to jedyny pewny sposób.
 */
.omoda-form__select {
    position: relative;
}

.omoda-form select.omoda-form__control {
    padding-right: 36px;
}

.omoda-form__select-arrow {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--omoda-color-text, #121212);
    pointer-events: none;
    display: flex;
}

.omoda-form__field--checkbox_group {
    margin-top: var(--omoda-space-xs, 8px);
}

.omoda-form__consent-heading {
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 8px;
}

.omoda-form__consent-text {
    font-size: 12px;
    color: var(--omoda-color-text-muted, #5c5c5c);
    line-height: 1.5;
    margin: 0 0 12px;
}

.omoda-form__consent-collapsible {
    margin-top: 10px;
}

.omoda-form__consent-toggle {
    background: none;
    border: none;
    padding: 0;
    margin-left: 2px;
    font-size: 12px;
    font-weight: 600;
    color: var(--omoda-color-text, #121212);
    text-decoration: underline;
    cursor: pointer;
}

.omoda-form .omoda-form__consent-toggle:hover,
.omoda-form .omoda-form__consent-toggle:focus {
    background: none;
    color: var(--omoda-color-text, #121212);
}

.omoda-form__checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 8px;
    cursor: pointer;
}

.omoda-form__checkbox input {
    flex-shrink: 0;
}

.omoda-form__checkbox--all {
    font-weight: 700;
}

.omoda-form__consent-link {
    display: inline-block;
    font-size: 12px;
    color: var(--omoda-color-text, #121212);
    text-decoration: underline;
    margin-top: 4px;
}

.omoda-form .omoda-form__consent-link:hover,
.omoda-form .omoda-form__consent-link:focus {
    color: var(--omoda-color-text, #121212);
}

/*
 * ".omoda-form" jako prefiks (nie goła klasa) — motyw ma "a:visited {
 * text-decoration: underline }" o specyficzności (0,1,1), wyższej niż sama
 * klasa (0,1,0), więc odwiedzony link (np. "Strona główna" po powrocie na tę
 * stronę) wracał z podkreśleniem mimo "text-decoration: none" tutaj.
 */
.omoda-form .omoda-form__submit,
.omoda-form .omoda-form__submit:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--omoda-space-md, 24px);
    background: var(--omoda-color-dark, #121212);
    color: var(--omoda-color-text-inverse, #fff);
    border: 1px solid var(--omoda-color-dark, #121212);
    border-radius: 2px;
    padding: 14px 32px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--omoda-duration-fast, 180ms) var(--omoda-ease, ease), color var(--omoda-duration-fast, 180ms) var(--omoda-ease, ease);
}

.omoda-form .omoda-form__submit:hover,
.omoda-form .omoda-form__submit:focus {
    background: #2e2e2e;
    border-color: #2e2e2e;
    color: var(--omoda-color-text-inverse, #fff);
}

.omoda-form__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.omoda-form .omoda-form__submit--outline,
.omoda-form .omoda-form__submit--outline:visited {
    background: transparent;
    color: var(--omoda-color-text, #121212);
}

.omoda-form .omoda-form__submit--outline:hover,
.omoda-form .omoda-form__submit--outline:focus {
    background: var(--omoda-color-dark, #121212);
    color: var(--omoda-color-text-inverse, #fff);
}

.omoda-form__notice {
    margin-top: var(--omoda-space-sm, 16px);
    font-size: 13px;
}

.omoda-form__notice--error {
    color: #b32d2e;
}

.omoda-form__thankyou-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--omoda-space-sm, 16px);
    margin-top: var(--omoda-space-md, 24px);
}

@media (max-width: 767px) {
    .omoda-form__grid {
        grid-template-columns: 1fr;
    }

    .omoda-form__field--half {
        grid-column: 1 / -1;
    }

    .omoda-form__card {
        padding: var(--omoda-space-md, 24px);
    }
}