/**
 * Czerwona obwodka na polu telefonu odrzuconym przez walidacje.
 *
 * Elementor po odbiciu od serwera oznacza grupe pola klasa .elementor-error
 * i dokleja do niej komunikat .elementor-message-danger. Samo pole zostaje
 * bez zmian - dlatego uzytkownik widzi tekst bledu, ale nie widzi, ktore pole
 * poprawic. Ten arkusz to nadrabia.
 *
 * Dwa selektory, bo Elementor w roznych wersjach oznacza blad raz klasa na
 * grupie, raz samym dorzuconym komunikatem - lapiemy oba przypadki.
 *
 * !important jest konieczne: obramowanie pol formularza Elementor generuje
 * do arkusza per-strona selektorem .elementor-{id} .elementor-element-{id}
 * .elementor-field-group .elementor-field, ktory ma wyzsza specyficznosc.
 *
 * Zakres celowo zawezony do .elementor-field-type-tel - to wtyczka do numeru
 * telefonu, nie globalny restyling bledow formularza.
 */

.elementor-field-group.elementor-field-type-tel.elementor-error input,
.elementor-field-group.elementor-field-type-tel:has(> .elementor-message-danger) input {
    border: 2px solid #d63638 !important;
    box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.12) !important;
}

/* Obwodka ma zostac widoczna takze po kliknieciu w pole - inaczej styl focus
   motywu zamalowalby ja dokladnie w chwili, w ktorej uzytkownik poprawia numer. */
.elementor-field-group.elementor-field-type-tel.elementor-error input:focus,
.elementor-field-group.elementor-field-type-tel:has(> .elementor-message-danger) input:focus {
    border-color: #d63638 !important;
    outline-color: #d63638;
}