/**
 * Polish wyglądu strony /dolacz-do-spolecznosci - TYLKO CSS (v0.76.1).
 *
 * Ładowany przez wtyczkę wyłącznie na tej stronie (page-gated enqueue), więc
 * selektory mogą być ogólne (.fluentform ...) - nie dotykają formularzy na
 * innych stronach. ZERO zmian w blokach Kadence i w samym formularzu/automatyzacji
 * - poprawiamy wyłącznie wygląd istniejących elementów.
 */

:root {
    --cz-primary: #f58220;
    --cz-primary-d: #d96e12;
    --cz-ink: #16202b;
    --cz-soft: #5b6775;
    --cz-border: #e2e6ea;
}

/* ---- Nagłówek strony "Dołącz do społeczności" ---- */
.wp-block-kadence-advancedheading h3,
h3.wp-block-kadence-advancedheading {
    letter-spacing: -0.01em;
}

/* ---- Karta formularza (kolumna Kadence, w której siedzi formularz) ---- */
.kt-tabs-content-wrap .kadence-column .kt-inside-inner-col {
    border-radius: 14px;
}

/* ============ Fluent Forms - tylko na tej stronie ============ */

/* Pola: zaokrąglenia, oddech, focus pomarańczowy */
.fluentform .ff-el-input--content input[type="text"],
.fluentform .ff-el-input--content input[type="email"],
.fluentform .ff-el-input--content input[type="tel"],
.fluentform .ff-el-input--content input[type="password"],
.fluentform .ff-el-input--content input[type="number"],
.fluentform .ff-el-input--content textarea,
.fluentform .ff-el-input--content select {
    border: 1px solid var(--cz-border) !important;
    border-radius: 11px !important;
    padding: 13px 15px !important;
    font-size: 15px !important;
    background: #fcfcfd !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.fluentform .ff-el-input--content input:focus,
.fluentform .ff-el-input--content textarea:focus,
.fluentform .ff-el-input--content select:focus {
    border-color: var(--cz-primary) !important;
    box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.15) !important;
    background: #fff !important;
    outline: none !important;
}

/* Odstępy między polami */
.fluentform .ff-el-group {
    margin-bottom: 16px !important;
}

/* Etykiety pól */
.fluentform .ff-el-input--label label {
    font-weight: 650 !important;
    font-size: 13.5px !important;
    color: var(--cz-ink) !important;
    margin-bottom: 6px !important;
}

/* Przycisk "Zapisz mnie" - pomarańczowy, pełna szerokość, zaokrąglony */
.fluentform .ff-btn-submit,
.fluentform .ad21-button-newsletter-landing,
.fluentform button[type="submit"] {
    width: 100% !important;
    background: var(--cz-primary) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 750 !important;
    font-size: 16px !important;
    border-radius: 12px !important;
    padding: 15px 18px !important;
    box-shadow: 0 6px 18px rgba(245, 130, 32, 0.28) !important;
    transition: background .18s ease, transform .18s ease !important;
    cursor: pointer;
}

.fluentform .ff-btn-submit:hover,
.fluentform .ad21-button-newsletter-landing:hover,
.fluentform button[type="submit"]:hover {
    background: var(--cz-primary-d) !important;
    transform: translateY(-1px);
}

/* RODO / zgoda - drobniej, czytelniej */
.fluentform .ad21-rodo-landing,
.fluentform .ff-el-custom-html {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    color: var(--cz-soft) !important;
    margin-top: 4px;
}

/* ============ Zakładki Kadence (Zaloguj się / Nie mam konta) ============ */
.kt-tabs-wrap .kt-tabs-title-list .kt-tab-title {
    font-weight: 600;
    border-radius: 10px 10px 0 0 !important;
}

/* ============================================================================
 * v0.76.2 - Zakladka "Zaloguj sie": kolumna ma Vertical Align = Space Between,
 * co po dodaniu przycisku Google rozpychalo przycisk i formularz na cala wysokosc
 * taba (duze odstepy). Wyrownujemy zawartosc do gory + sensowny gap.
 * ========================================================================== */
.kadence-column15651_f4a455-d6 > .kt-inside-inner-col {
    justify-content: flex-start !important;
    gap: 10px !important;
    row-gap: 10px !important;
}
/* przycisk Google (z wtyczki) ma wlasny margin 20px + <hr> 20px - lekko sciagamy */
.kadence-column15651_f4a455-d6 .kt-inside-inner-col > div:has(a[href*="google-login/auth"]) {
    margin: 6px 0 0 !important;
}
.kadence-column15651_f4a455-d6 .kt-inside-inner-col > hr {
    margin: 10px 0 !important;
}


/* v0.76.5 - dociagniecie odstepow wokol przycisku Google na zakladce logowania:
 * padding kolumny 2rem + margin 20px przycisku (inline) + hr 20px. */
.kt-inner-tab-1 .kadence-column15651_f4a455-d6 > .kt-inside-inner-col {
    padding-top: 10px !important;
    padding-bottom: 12px !important;
}
.kt-inner-tab-1 .kadence-column15651_f4a455-d6 > .kt-inside-inner-col > div:first-child {
    margin: 0 !important;
}
.kt-inner-tab-1 .kadence-column15651_f4a455-d6 > .kt-inside-inner-col > hr {
    margin: 4px 0 14px !important;
}

/* v0.76.6 - PRAWDZIWA przyczyna luki: kolumna logowania ma align-self:center w wysokim
 * tabie (rowna wysokosc tabow) -> wycentrowana pionowo. Przyklejamy do gory, pelna szerokosc. */
.kt-inner-tab-1 .kadence-column15651_f4a455-d6 {
    align-self: flex-start !important;
}
.kt-tabs-content-wrap .kt-inner-tab-1,
.kt-tabs-content-wrap .kt-inner-tab-1 > .kt-tab-inner-content-inner {
    justify-content: flex-start !important;
    align-content: flex-start !important;
}

/* v0.76.7 - WINOWAJCA luki tabs->tresc: panel zakladki ma padding-top: var(--global-kb-spacing-lg)
 * (duze w motywie). Scinamy padding panelu TYLKO zakladki logowania (kt-inner-tab-1). */
.kt-tabs-id15651_86f9eb-19 > .kt-tabs-content-wrap > .wp-block-kadence-tab.kt-inner-tab-1 {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}