/* Базовий wrapper. :not(.iti--container) обовязково: контейнер випадаючого списку теж має клас .iti, і position:relative тут ламав його позиціонування. */ .iti:not(.iti--container) { width: 100%; position: relative; } .mc--loading { font-size: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; } .mc--loading.u-form-control-hidden { display: none !important; } .mc--loading > * { display: none !important; } .mc--loading:before { content: ""; display: block; width: 1.2rem; height: 1.2rem; border: .2rem solid #999999; border-top: .2rem solid #f3f3f3; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Phone validation states */ input.error { border-color: #e74c3c !important; box-shadow: 0 0 4px rgba(231, 76, 60, 0.4); } input.correct { border-color: #27ae60 !important; box-shadow: 0 0 4px rgba(39, 174, 96, 0.4); } /* Validation messages — layout-safe для будь-яких форм. flex-basis/order: у flex-рядку повідомлення переноситься на всю ширину й іде останнім, тож не розриває розкладку; у звичайному блоковому потоці ці властивості ігноруються. */ .phone-error-msg, .field-error-msg { display: none; width: 100%; flex-basis: 100%; order: 99; box-sizing: border-box; color: #e74c3c; font-size: 12px; line-height: 1.35; margin: 4px 0 0; padding: 0; text-align: left; font-weight: 400; white-space: normal; } /* Дропдаун країн: виносимо поверх усього. dropdownContainer=body у form.js виводить список з-під overflow батьків, а максимальний z-index не дає перекрити його елементам лендінга. */ .iti--container { position: fixed !important; width: auto; z-index: 2147483647 !important; } .iti--container .iti__dropdown-content { z-index: 2147483647 !important; } /* Список винесений у , тому наслідує кольори лендінга: на темній темі виходив білий фон + білий текст. Задаємо кольори явно, щоб список був читабельним на будь-якому сайті незалежно від його стилів. */ .iti--container, .iti--container .iti__dropdown-content, .iti--container .iti__country, .iti--container .iti__country-name, .iti--container .iti__search-input { color: #222; font-family: inherit; } .iti--container .iti__dropdown-content { background: var(--iti-dropdown-bg, #fff); } .iti--container .iti__search-input { background: var(--iti-dropdown-bg, #fff); } .iti--container .iti__dial-code { color: var(--iti-dialcode-color, #999); } .iti--container .iti__country-list { max-height: 240px; } .iti:focus-within { z-index: 2147483646; } /* Ліве поле інпута рахує сам intl-tel-input — жодних хардкодів padding-left, інакше між кодом країни і текстом зʼявляється діра. */ .iti--separate-dial-code .iti__selected-dial-code { font-size: inherit; }