/*
 * Formularz zgłoszeń. Mobile-first: większość zgłoszeń przyjdzie z telefonu.
 *
 * Kolory i kroje bierzemy z motywu przez zmienne CSS, ale każda ma wartość zapasową —
 * wtyczka musi wyglądać znośnie także wtedy, gdy ktoś włączy inny motyw.
 */
.dr-form {
    --f-ink:    var(--dr-ink, #16202F);
    --f-soft:   var(--dr-ink-soft, #5A6B7F);
    --f-line:   var(--dr-line, #C8CFD6);
    --f-accent: var(--dr-accent, #2989CE);
    --f-accent-d: #1F6FA8;
    --f-forest: var(--dr-forest, #2C5E3A);
    --f-err:    var(--dr-cinnabar, #B03A2E);
    --f-note:   var(--dr-note, "Arial Narrow", sans-serif);

    max-width: 40rem;
}

.dr-form fieldset { border: 0; padding: 0; margin: 0 0 2.5rem; }
.dr-form legend {
    font-family: var(--f-note);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--f-soft);
    padding: 0 0 .85rem;
    margin-bottom: .5rem;
    width: 100%;
    border-bottom: 1px solid var(--f-line);
}
.dr-form label { display: block; margin: 1.35rem 0 .4rem; font-weight: 600; }
.dr-form .dr-hint {
    display: block;
    font-weight: 400;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--f-soft);
    margin-top: .25rem;
}
.dr-form .dr-intro { color: var(--f-soft); font-size: .9375rem; }

/*
 * `box-sizing: border-box` na polach — bez tego `width: 100%` liczy się do treści, a padding
 * i ramka dochodzą na zewnątrz: pola wystawały 29 px poza kolumnę formularza i 1 px poza
 * ekran telefonu, czyli strona dawała się przewijać w bok na każdej szerokości.
 * WordPress nie ustawia tego globalnie, a motyw dotąd nie musiał. *(sprawdzone 2026-08-25
 * przy 320 i 390 px)*
 */
.dr-form input,
.dr-form textarea,
.dr-form select { box-sizing: border-box; }

.dr-form input[type="text"],
.dr-form input[type="email"],
.dr-form input[type="tel"],
.dr-form input[type="url"],
.dr-form textarea {
    width: 100%;
    padding: .8rem .85rem;
    font: inherit;
    color: var(--f-ink);
    border: 1px solid var(--f-line);
    border-radius: .15rem;
    background: #fff;
}
.dr-form input[type="file"] {
    width: 100%;
    padding: .8rem;
    font: inherit;
    font-size: .9375rem;
    border: 1px dashed var(--f-line);
    border-radius: .15rem;
    background: #fff;
}
.dr-form input:focus-visible,
.dr-form textarea:focus-visible {
    outline: 2px solid var(--f-accent);
    outline-offset: 1px;
    border-color: var(--f-accent);
}
.dr-form input[aria-invalid="true"],
.dr-form textarea[aria-invalid="true"] { border-color: var(--f-err); border-width: 2px; }

.dr-form .dr-check { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; margin: 1.1rem 0 0; }
/* 1,5 rem w kwadrat to dolna granica wygodnego celu dotykowego na telefonie. */
.dr-form .dr-check input { width: 1.5rem; height: 1.5rem; margin-top: .15rem; flex: 0 0 auto; accent-color: var(--f-forest); }

/* Uwaga pod polem — dotyczy tego, co ktoś właśnie wpisał. Wygląda jak podpowiedź nad polem,
   bo to ta sama rola; różni się tylko miejscem w czasie czytania. */
.dr-form .dr-field-note {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--f-soft);
    margin: .45rem 0 0;
}

/* Informacja o przetwarzaniu danych — na miejscu usuniętego pola zgody (user, 2026-08-25).
   Ma być czytelna, ale nie ma udawać kolejnego pola do zaznaczenia: bez ramki, bez kwadracika. */
.dr-form .dr-consent-note {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--f-soft);
    margin: 1.1rem 0 0;
}

.dr-form button {
    width: 100%;
    min-height: 3.25rem;
    padding: .95rem 1.6rem;
    font-family: var(--f-note);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .02em;
    border: 0;
    border-radius: .15rem;
    background: var(--f-accent);
    color: #fff;
    cursor: pointer;
}
.dr-form button:hover { background: var(--f-accent-d); }

/*
 * Przycisk w trakcie wysyłki. Zablokowany, bo drugie kliknięcie kończyło się drugim
 * zgłoszeniem tego samego drzewa (logi 2026-09-23) — kursor i kolor mają to pokazać,
 * zanim człowiek spróbuje.
 */
.dr-form button[disabled],
.dr-form button[aria-busy="true"] { background: var(--f-soft); cursor: progress; }

.dr-send-note { margin: .6rem 0 0; font-size: .875rem; color: var(--f-soft); }

.dr-error { color: var(--f-err); margin: .4rem 0 0; font-size: .9375rem; }
.dr-error--form { padding: .85rem 1rem; border: 1px solid var(--f-err); border-radius: .15rem; background: #FBF0EE; }

/* Zbiorczy komunikat po odmowie — ma być pierwszym, co człowiek widzi, nie przeoczeniem. */
.dr-error-summary {
    scroll-margin-top: 1rem;
    margin: 0 0 2rem;
    padding: 1.1rem 1.25rem;
    border: 2px solid var(--f-err);
    border-left-width: 6px;
    border-radius: .15rem;
    background: #FBF0EE;
    color: var(--f-ink);
}
/* Fokus dostaje programowo (form.js), nie klawiaturą — obrys motywu tylko dublowałby ramkę. */
.dr-form .dr-error-summary:focus,
.dr-form .dr-error-summary:focus-visible { outline: none; }
/* Krojem tekstu, nie ozdobnym krojem nagłówków: to komunikat, ma być czytelny od pierwszego rzutu oka. */
.dr-form .dr-error-summary h2 {
    margin: 0 0 .5rem;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--f-err);
}
.dr-error-summary p { margin: 0 0 .6rem; }
.dr-error-summary ul { margin: 0; padding-left: 1.2rem; }
.dr-error-summary li + li { margin-top: .35rem; }
.dr-error-summary a { color: var(--f-err); font-weight: 600; }
/* Po kliknięciu w pozycję z listy etykieta pola ma zostać na ekranie, a nie pod krawędzią. */
.dr-form input, .dr-form textarea { scroll-margin-top: 8rem; }

/* Potwierdzenie przyjęcia zgłoszenia — jedyne miejsce, gdzie zieleń jest komunikatem. */
.dr-ok {
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--f-forest);
    background: var(--dr-moss, #E0E9E1);
    margin-bottom: 2.5rem;
}
.dr-ok h2 { margin-top: 0; }
.dr-ok__again { margin-bottom: 0; font-size: .9375rem; }

/*
 * Lista wybranych zdjęć. Rysowana przez assets/form.js — natywne pole pokazuje tylko
 * ostatni wybór, a zgłaszający musi widzieć, co naprawdę poleci na serwer.
 */
.dr-photos { list-style: none; margin: .75rem 0 0; padding: 0; }
.dr-photos li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .75rem;
    border: 1px solid var(--f-line);
    border-radius: .15rem;
    background: #fff;
}
.dr-photos li + li { margin-top: .4rem; }
.dr-photos__name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: .9375rem; }
.dr-photos__size { flex: 0 0 auto; font-size: .8125rem; color: var(--f-soft); font-variant-numeric: tabular-nums; }
/* Zakres `.dr-form` konieczny: reguła `.dr-form button` jest bardziej szczegółowa niż sama klasa. */
.dr-form .dr-photos__remove {
    flex: 0 0 auto;
    width: auto;
    /* Jawnie, a nie „w domyśle": ten przycisk stoi w wierszu obok nazwy pliku i nie ma prawa
       rosnąć od reguł pisanych dla przycisku wysyłki. */
    min-width: 0;
    min-height: 2.25rem;
    padding: .4rem .9rem;
    font-size: .875rem;
    background: transparent;
    color: var(--f-err);
    border: 1px solid var(--f-line);
    border-radius: .15rem;
}
.dr-form .dr-photos__remove:hover { background: #FBF0EE; border-color: var(--f-err); }
/* Licznik znaków pod uzasadnieniem. Po przekroczeniu w kolorze błędu, ale bez blokady —
   twarda blokada w przeglądarce ucina wklejony tekst bez słowa. */
.dr-licznik { margin: .35rem 0 0; font-size: .875rem; color: var(--f-soft); text-align: right; }
.dr-licznik--za-duzo { color: var(--f-err); font-weight: 600; }

.dr-photos__status { margin: .5rem 0 0; font-size: .875rem; color: var(--f-soft); }

/* Zdjęcia znikają po każdym odesłaniu formularza — to nie awaria, ale trzeba to powiedzieć. */
.dr-repick {
    margin: .6rem 0 0;
    padding: .7rem .85rem;
    font-size: .9375rem;
    border-left: 3px solid var(--f-accent);
    background: #EEF5FB;
}

.dr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dr-contact { margin-top: 1.75rem; font-size: .9375rem; color: var(--f-soft); }

@media (min-width: 48em) {
    /*
     * Tylko przycisk wysyłki. Zapisane wcześniej jako `.dr-form button` łapało również
     * „Usuń" przy każdym zdjęciu — na szerokim ekranie robiło się z tego 256-pikselowe
     * pudło obok krótkiej nazwy pliku.
     */
    .dr-form button[type="submit"] { width: auto; min-width: 16rem; }
}