/**
 * Style formularza zgloszeniowego.
 *
 * Wszystkie kolory, odstepy i czcionki sterowane sa zmiennymi CSS
 * zdefiniowanymi ponizej w ":root". Zmien tylko wartosci w sekcji
 * "USTAWIENIA DO EDYCJI", reszty pliku nie musisz ruszac.
 */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,500&display=swap');

:root {
    /* ====== USTAWIENIA DO EDYCJI ====== */

    --zf-color-primary: #10525F;       /* kolor glowny (przycisk, linki, akcenty) */
    --zf-color-primary-hover: #0c3f49; /* kolor przycisku po najechaniu */
    --zf-color-text: #222222;          /* kolor tekstu */
    --zf-color-border: #cccccc;        /* kolor obramowan pol */
    --zf-color-error-bg: #fdecea;      /* tlo komunikatu bledu */
    --zf-color-error-border: #f5c2c0;  /* obramowanie komunikatu bledu */
    --zf-color-error-text: #611a15;    /* kolor tekstu komunikatu bledu */

    --zf-font-family: inherit;         /* np. 'Poppins', sans-serif; domyslnie dziedziczy z motywu */
    --zf-font-size: 15px;              /* rozmiar tekstu w polach */
    --zf-heading-font-size: 20px;      /* rozmiar naglowkow h3 w formularzu */

    --zf-radius: 6px;                  /* zaokraglenie rogow (pola, przycisk) */
    --zf-max-width: 640px;             /* maksymalna szerokosc formularza */
    --zf-spacing: 14px;                /* odstep pomiedzy polami */

    --zf-button-padding: 12px 28px;    /* wewnetrzny odstep przycisku */
    --zf-button-font-size: 16px;       /* rozmiar tekstu przycisku */

    /* ====== KONIEC USTAWIEN DO EDYCJI ====== */
}

.zf-form-wrapper {
    max-width: var(--zf-max-width);
    margin: 0 auto;
    color: var(--zf-color-text);
    font-family: var(--zf-font-family);
    font-size: var(--zf-font-size);
}

.zf-form h3 {
    margin-top: 28px;
    margin-bottom: 6px;
    font-size: var(--zf-heading-font-size);
}

.zf-form .zf-label {
    display: block;
    margin: var(--zf-spacing) 0 6px;
    font-weight: 600;
}

.zf-form .zf-label input,
.zf-form .zf-label textarea {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    border: 1px solid var(--zf-color-border);
    border-radius: var(--zf-radius);
    font-size: var(--zf-font-size);
    font-family: var(--zf-font-family);
    box-sizing: border-box;
}

.zf-form .zf-label input:focus,
.zf-form .zf-label textarea:focus {
    outline: none;
    border-color: var(--zf-color-primary);
}

.zf-form .zf-check,
.zf-form .zf-radio {
    display: block;
    margin: 8px 0;
    font-weight: 400;
}

.zf-form .zf-check input,
.zf-form .zf-radio input {
    margin-right: 8px;
}

.zf-inne-input {
    margin-left: 8px;
    padding: 4px 8px;
    border: 1px solid var(--zf-color-border);
    border-radius: var(--zf-radius);
    font-family: var(--zf-font-family);
}

.zf-check a {
    color: var(--zf-color-primary);
    word-break: break-all;
}

.zf-submit {
    margin-top: 24px;
    padding: var(--zf-button-padding);
    background: var(--zf-color-primary);
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    font-size: var(--zf-button-font-size);
    font-family: 'Satoshi', var(--zf-font-family), sans-serif;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.zf-submit:hover {
    background: var(--zf-color-primary-hover);
}

.zf-errors {
    background: var(--zf-color-error-bg);
    border: 1px solid var(--zf-color-error-border);
    color: var(--zf-color-error-text);
    padding: 14px 18px;
    border-radius: var(--zf-radius);
    margin-bottom: 20px;
}

.zf-thankyou {
    max-width: var(--zf-max-width);
    margin: 0 auto;
    text-align: center;
    padding: 40px 20px;
}

.zf-intro {
    background: rgba(0, 0, 0, 0.03);
    border-left: 3px solid var(--zf-color-primary);
    padding: 14px 18px;
    border-radius: 4px;
    margin: 16px 0 24px;
    font-size: 0.95em;
}

.zf-path {
    margin-top: 8px;
}

.zf-required {
    color: #d32f2f;
    font-weight: 700;
}