/* Стиль телефонного поля (intl-tel-input) под нашу тему. Один файл на все формы. */

/* контейнер занимает всю ширину, как обычный input */
.iti { display: block; width: 100%; }
.iti input.js-phone,
.iti input[type=tel] { width: 100%; }

/* выпадающий список стран — тёмная тема */
.iti__dropdown-content,
.iti__country-list {
    background: #262b30;
    color: #e5e7eb;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.iti__country { color: #e5e7eb; }
.iti__country:hover,
.iti__country.iti__highlight,
.iti__country.iti__active { background: rgba(255, 255, 255, .08); }
.iti__dial-code { color: rgba(255, 255, 255, .55); }

/* поиск по странам */
.iti__search-input {
    background: #2a2e32;
    color: #e5e7eb;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.iti__search-input::placeholder { color: rgba(255, 255, 255, .5); }

/* кнопка выбранной страны / код набора */
.iti__selected-dial-code { color: inherit; }

/* сообщение об ошибке валидации телефона */
.phone-error {
    color: #ff6b6b;
    font-size: .85rem;
    margin-top: .3rem;
    line-height: 1.25;
}
.js-phone.is-invalid { border-color: #ff6b6b !important; box-shadow: 0 0 0 .15rem rgba(255, 107, 107, .25) !important; }

/* Автозаполнение Chrome красит поле в лавандовый фон, ломая тёмную тему
   (светлое поле рядом с тёмными, серый «+48» нечитаем). Надёжный фикс: закрываем
   автозаполнение box-shadow'ом цвета самого поля (тёмный var(--bg-input)),
   текст/каретку — цветом темы. box-shadow inset перекрывает фон автозаполнения,
   в отличие от transition-трюка, который здесь не срабатывал. */
.js-phone:-webkit-autofill,
.js-phone:-webkit-autofill:hover,
.js-phone:-webkit-autofill:focus,
.js-phone:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 100px var(--bg-input, #2a2e32) inset !important;
    box-shadow: 0 0 0 100px var(--bg-input, #2a2e32) inset !important;
    -webkit-text-fill-color: var(--text-primary, #e5e7eb) !important;
    caret-color: var(--text-primary, #e5e7eb);
    transition: background-color 100000s ease-in-out 0s;
}
/* Детект автозаполнения: Chrome не шлёт обычных событий, но запускает CSS-анимацию на :-webkit-autofill.
   JS ловит animationstart и прогоняет значение через iti.setNumber() (отрезает код страны, выбирает флаг). */
@keyframes phoneAutofill { from { } to { } }
.js-phone:-webkit-autofill { animation-name: phoneAutofill; animation-duration: 1ms; }