/**
 * Стили для intl-tel-input integration
 * Адаптация под дизайн Undersun Estate
 */

/* Основной контейнер */
.iti {
    width: 100% !important;
    position: relative;
}

/* Поле ввода */
.iti__tel-input {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    padding-left: 60px !important; /* Место для флага */
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    font-size: 1rem !important;
    transition: all 0.2s ease-in-out !important;
    background-color: white !important;
    color: #374151 !important;
}

/* Фокус */
.iti__tel-input:focus {
    outline: none !important;
    border-color: #F1B400 !important; /* accent color */
    box-shadow: 0 0 0 2px rgba(241, 180, 0, 0.2) !important;
}

/* Ошибка валидации */
.iti__tel-input.border-red-500 {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1) !important;
}

/* Контейнер для флага и кода страны */
.iti__flag-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: auto !important;
    left: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
}

/* Кнопка выбора страны */
.iti__selected-flag {
    width: 52px !important;
    height: 100% !important;
    padding: 0 8px !important;
    display: flex !important;
    align-items: center !important;
    border: none !important;
    background-color: transparent !important;
    cursor: pointer !important;
    border-radius: 0.375rem 0 0 0.375rem !important;
}

.iti__selected-flag:hover {
    background-color: #f9fafb !important;
}

.iti__selected-flag:focus {
    outline: none !important;
    background-color: #f3f4f6 !important;
}

/* Флаг - оставляем библиотеке управлять размерами и позицией */
.iti__flag {
    margin-right: 6px !important;
    /* НЕ переопределяем width, height, background-* - библиотека управляет ими */
}

/* Стрелка */
.iti__arrow {
    border-left: 3px solid transparent !important;
    border-right: 3px solid transparent !important;
    border-top: 4px solid #6b7280 !important;
    margin-left: 4px !important;
    width: 0 !important;
    height: 0 !important;
}

.iti__selected-flag:hover .iti__arrow {
    border-top-color: #374151 !important;
}

/* Dropdown стран */
.iti__country-list {
    position: absolute !important;
    z-index: 1001 !important;
    list-style: none !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 2px 0 0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    background-color: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.375rem !important;
    max-height: 200px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    width: 100% !important;
    min-width: 260px !important;
    font-size: 0.875rem !important;
    scroll-behavior: smooth !important;
    /* Включаем нативную прокрутку на всех устройствах */
    -webkit-overflow-scrolling: touch !important;
    /* Firefox scrollbar */
    scrollbar-width: thin !important;
    scrollbar-color: #d1d5db #f8f9fa !important;
    /* Фиксируем позиционирование */
    top: 100% !important;
    left: 0 !important;
    transform: none !important;
    /* Предотвращаем флоатинг */
    contain: layout style paint !important;
}

/* Элементы списка стран */
.iti__country {
    padding: 8px 12px !important;
    line-height: 1.4 !important;
    color: #374151 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
}

.iti__country:hover {
    background-color: #f3f4f6 !important;
}

.iti__country.iti__highlight {
    background-color: #F1B400 !important; /* accent color */
    color: white !important;
}

/* Флаги в dropdown - библиотека управляет размерами */
.iti__country .iti__flag {
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

/* Название страны */
.iti__country-name {
    flex-grow: 1 !important;
    margin-right: 8px !important;
}

/* Код страны */
.iti__dial-code {
    color: #6b7280 !important;
    font-size: 0.8rem !important;
}

.iti__country.iti__highlight .iti__dial-code {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Поиск в dropdown */
.iti__search-input {
    position: relative !important;
    width: 100% !important;
    padding: 8px 12px !important;
    border: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    font-size: 0.875rem !important;
    margin-bottom: 4px !important;
}

.iti__search-input:focus {
    outline: none !important;
    border-bottom-color: #F1B400 !important;
}

/* Scrollbar для dropdown */
.iti__country-list::-webkit-scrollbar {
    width: 8px !important;
}

.iti__country-list::-webkit-scrollbar-track {
    background: #f8f9fa !important;
    border-radius: 4px !important;
    margin: 4px 0 !important;
}

.iti__country-list::-webkit-scrollbar-thumb {
    background: #d1d5db !important;
    border-radius: 4px !important;
    border: 1px solid #f3f4f6 !important;
    transition: background-color 0.2s ease !important;
}

.iti__country-list::-webkit-scrollbar-thumb:hover {
    background: #9ca3af !important;
}

.iti__country-list::-webkit-scrollbar-thumb:active {
    background: #6b7280 !important;
}

/* Улучшенная прокрутка для Firefox (объединено с основными стилями dropdown выше) */

/* Адаптация под мобильные устройства */
@media (max-width: 640px) {
    .iti__country-list {
        min-width: 240px !important;
        font-size: 0.8rem !important;
    }

    .iti__country {
        padding: 6px 10px !important;
    }

    .iti__tel-input {
        font-size: 0.9rem !important;
        padding-left: 56px !important;
    }

    .iti__selected-flag {
        width: 48px !important;
    }
}

/* Состояние загрузки */
.iti--loading .iti__selected-flag {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor'%3E%3Cpath d='M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 16px 16px !important;
    animation: spin 1s linear infinite !important;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Скрыть стандартные флаги во время загрузки */
.iti--loading .iti__flag {
    display: none !important;
}

/* Состояние ошибки */
.phone-input-error .iti__tel-input {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1) !important;
}

/* Успешная валидация */
.phone-input-valid .iti__tel-input {
    border-color: #10b981 !important;
}

/* Dark mode support (опционально) */
@media (prefers-color-scheme: dark) {
    .iti__tel-input {
        background-color: #1f2937 !important;
        border-color: #374151 !important;
        color: #f9fafb !important;
    }

    .iti__country-list {
        background-color: #1f2937 !important;
        border-color: #374151 !important;
    }

    .iti__country {
        color: #f9fafb !important;
    }

    .iti__country:hover {
        background-color: #374151 !important;
    }
}

/* Интеграция с Tailwind CSS формами */
.iti.form-control {
    display: block !important;
    width: 100% !important;
}

/* Убираем outline при фокусе на контейнере */
.iti:focus-within {
    outline: none !important;
}

/* =================================
   СПЕЦИАЛЬНЫЕ СТИЛИ ДЛЯ ГЛАВНОЙ СТРАНИЦЫ
   ================================= */

/* Основная форма консультации на главной странице */
#phoneConsultationForm .iti {
    flex: 1 !important;
    min-width: 0 !important;
}

#phoneConsultationForm .iti__tel-input {
    height: 100% !important;
    padding: 0.75rem 1rem !important;
    padding-left: 65px !important;
    font-size: 1rem !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    background-color: white !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

#phoneConsultationForm .iti__tel-input:focus {
    outline: none !important;
    border-color: #F1B400 !important;
    box-shadow: 0 0 0 2px rgba(241, 180, 0, 0.2), 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
}

#phoneConsultationForm .iti__tel-input::placeholder {
    color: #9ca3af !important;
    font-weight: 400 !important;
}

/* Контейнер флага для главной формы */
#phoneConsultationForm .iti__flag-container {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-right: 1px solid #e2e8f0 !important;
    border-radius: 0.375rem 0 0 0.375rem !important;
}

#phoneConsultationForm .iti__selected-flag {
    width: 60px !important;
    height: 100% !important;
    padding: 0 10px !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    transition: all 0.2s ease-in-out !important;
}

#phoneConsultationForm .iti__selected-flag:hover {
    background: rgba(241, 180, 0, 0.1) !important;
}

#phoneConsultationForm .iti__selected-flag:focus {
    outline: none !important;
    background: rgba(241, 180, 0, 0.15) !important;
    box-shadow: inset 0 0 0 1px #F1B400 !important;
}

/* Флаг в главной форме - библиотека управляет размерами */
#phoneConsultationForm .iti__flag {
    /* НЕ переопределяем width и height */
}

/* Стрелка в главной форме */
#phoneConsultationForm .iti__arrow {
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
    border-top: 5px solid #6b7280 !important;
    margin-left: 2px !important;
    transition: all 0.2s ease-in-out !important;
}

#phoneConsultationForm .iti__selected-flag:hover .iti__arrow {
    border-top-color: #F1B400 !important;
    transform: translateY(-1px) !important;
}

/* Dropdown для главной формы */
#phoneConsultationForm .iti__country-list {
    border-radius: 0.5rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #e5e7eb !important;
    background: white !important;
    overflow: hidden !important;
    margin-top: 4px !important;
}

#phoneConsultationForm .iti__country {
    padding: 10px 14px !important;
    transition: all 0.15s ease-in-out !important;
    border-bottom: 1px solid rgba(229, 231, 235, 0.5) !important;
}

#phoneConsultationForm .iti__country:last-child {
    border-bottom: none !important;
}

#phoneConsultationForm .iti__country:hover {
    background: rgba(241, 180, 0, 0.08) !important;
    transform: translateX(2px) !important;
}

#phoneConsultationForm .iti__country.iti__highlight {
    background: linear-gradient(135deg, #F1B400 0%, #F59E0B 100%) !important;
    color: white !important;
    transform: translateX(4px) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

#phoneConsultationForm .iti__country.iti__highlight .iti__dial-code {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Поиск в dropdown главной формы */
#phoneConsultationForm .iti__search-input {
    padding: 12px 16px !important;
    border: none !important;
    border-bottom: 2px solid #f3f4f6 !important;
    font-size: 0.9rem !important;
    background: #fafafa !important;
    transition: all 0.2s ease-in-out !important;
}

#phoneConsultationForm .iti__search-input:focus {
    outline: none !important;
    border-bottom-color: #F1B400 !important;
    background: white !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Анимации загрузки для главной формы */
#phoneConsultationForm .iti--loading .iti__selected-flag {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
}

#phoneConsultationForm .iti--loading .iti__selected-flag::before {
    content: '' !important;
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #F1B400 !important;
    border-top: 2px solid transparent !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Успешная валидация для главной формы */
#phoneConsultationForm .phone-input-valid .iti__tel-input {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2), 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

#phoneConsultationForm .phone-input-valid .iti__flag-container {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border-right-color: #10b981 !important;
}

/* Ошибка валидации для главной формы */
#phoneConsultationForm .phone-input-error .iti__tel-input {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2), 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

#phoneConsultationForm .phone-input-error .iti__flag-container {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
    border-right-color: #ef4444 !important;
}

/* Мобильная адаптация для главной формы */
@media (max-width: 640px) {
    #phoneConsultationForm .iti {
        margin-bottom: 0.75rem !important;
    }

    #phoneConsultationForm .iti__tel-input {
        font-size: 1rem !important;
        padding: 0.875rem 1rem !important;
        padding-left: 60px !important;
    }

    #phoneConsultationForm .iti__selected-flag {
        width: 55px !important;
        padding: 0 8px !important;
    }

    #phoneConsultationForm .iti__country-list {
        min-width: 280px !important;
        max-height: 250px !important;
    }
}

/* Hover эффекты для всей формы */
#phoneConsultationForm:hover .iti__tel-input {
    border-color: #F1B400 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

#phoneConsultationForm:hover .iti__flag-container {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
}

/* =================================
   СТИЛИ ДЛЯ ФОРМ ВОПРОСОВ И ВСТРЕЧ
   ================================= */

/* Формы вопросов и встреч */
#question-form .iti,
#meeting-form .iti {
    width: 100% !important;
}

#question-form .iti__tel-input,
#meeting-form .iti__tel-input {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    padding-left: 58px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    font-size: 1rem !important;
    background: white !important;
    color: #1f2937 !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

#question-form .iti__tel-input:focus,
#meeting-form .iti__tel-input:focus {
    outline: none !important;
    border-color: #F1B400 !important;
    box-shadow: 0 0 0 3px rgba(241, 180, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-1px) !important;
}

#question-form .iti__tel-input::placeholder,
#meeting-form .iti__tel-input::placeholder {
    color: #6b7280 !important;
    font-weight: 400 !important;
}

/* Контейнер флага для форм вопросов */
#question-form .iti__flag-container,
#meeting-form .iti__flag-container {
    background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%) !important;
    border-right: 2px solid #e5e7eb !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
}

#question-form .iti__selected-flag,
#meeting-form .iti__selected-flag {
    width: 54px !important;
    height: 100% !important;
    padding: 0 8px !important;
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    transition: all 0.2s ease-in-out !important;
}

#question-form .iti__selected-flag:hover,
#meeting-form .iti__selected-flag:hover {
    background: rgba(241, 180, 0, 0.08) !important;
}

#question-form .iti__selected-flag:focus,
#meeting-form .iti__selected-flag:focus {
    outline: none !important;
    background: rgba(241, 180, 0, 0.12) !important;
    box-shadow: inset 0 0 0 1px #F1B400 !important;
}

/* Флаги в формах вопросов - библиотека управляет размерами */
#question-form .iti__flag,
#meeting-form .iti__flag {
    /* НЕ переопределяем width и height */
}

/* Стрелка в формах вопросов */
#question-form .iti__arrow,
#meeting-form .iti__arrow {
    border-left: 3px solid transparent !important;
    border-right: 3px solid transparent !important;
    border-top: 4px solid #6b7280 !important;
    margin-left: 2px !important;
    transition: all 0.2s ease-in-out !important;
}

#question-form .iti__selected-flag:hover .iti__arrow,
#meeting-form .iti__selected-flag:hover .iti__arrow {
    border-top-color: #F1B400 !important;
}

/* Dropdown для форм вопросов */
#question-form .iti__country-list,
#meeting-form .iti__country-list {
    border-radius: 0.5rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    border: 2px solid #e5e7eb !important;
    background: white !important;
    margin-top: 4px !important;
}

#question-form .iti__country,
#meeting-form .iti__country {
    padding: 8px 12px !important;
    transition: all 0.15s ease-in-out !important;
}

#question-form .iti__country:hover,
#meeting-form .iti__country:hover {
    background: rgba(241, 180, 0, 0.06) !important;
}

#question-form .iti__country.iti__highlight,
#meeting-form .iti__country.iti__highlight {
    background: #F1B400 !important;
    color: white !important;
}

/* Валидация для форм вопросов */
#question-form .phone-input-valid .iti__tel-input,
#meeting-form .phone-input-valid .iti__tel-input {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

#question-form .phone-input-valid .iti__flag-container,
#meeting-form .phone-input-valid .iti__flag-container {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
    border-right-color: #10b981 !important;
}

#question-form .phone-input-error .iti__tel-input,
#meeting-form .phone-input-error .iti__tel-input {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

#question-form .phone-input-error .iti__flag-container,
#meeting-form .phone-input-error .iti__flag-container {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
    border-right-color: #ef4444 !important;
}

/* =================================
   ОБЩИЕ СТИЛИ ДЛЯ ВСЕХ ОСТАЛЬНЫХ ФОРМ
   ================================= */

/* Стандартные формы (контакты, свойства и т.д.) */
.iti:not([id*="phoneConsultationForm"]):not([id*="question-form"]):not([id*="meeting-form"]) .iti__tel-input {
    padding: 0.75rem 1rem !important;
    padding-left: 55px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.375rem !important;
    transition: all 0.2s ease-in-out !important;
    background: white !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.iti:not([id*="phoneConsultationForm"]):not([id*="question-form"]):not([id*="meeting-form"]) .iti__tel-input:focus {
    outline: none !important;
    border-color: #F1B400 !important;
    box-shadow: 0 0 0 2px rgba(241, 180, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.iti:not([id*="phoneConsultationForm"]):not([id*="question-form"]):not([id*="meeting-form"]) .iti__flag-container {
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%) !important;
    border-right: 1px solid #d1d5db !important;
    border-radius: 0.375rem 0 0 0.375rem !important;
}

.iti:not([id*="phoneConsultationForm"]):not([id*="question-form"]):not([id*="meeting-form"]) .iti__selected-flag {
    width: 50px !important;
    padding: 0 6px !important;
    gap: 2px !important;
}

.iti:not([id*="phoneConsultationForm"]):not([id*="question-form"]):not([id*="meeting-form"]) .iti__selected-flag:hover {
    background: rgba(241, 180, 0, 0.05) !important;
}

/* Универсальная мобильная адаптация */
@media (max-width: 640px) {
    #question-form .iti__tel-input,
    #meeting-form .iti__tel-input {
        font-size: 1rem !important;
        padding: 0.75rem 0.875rem !important;
        padding-left: 54px !important;
    }

    #question-form .iti__selected-flag,
    #meeting-form .iti__selected-flag {
        width: 50px !important;
        padding: 0 6px !important;
    }

    #question-form .iti__country-list,
    #meeting-form .iti__country-list {
        min-width: 250px !important;
        max-height: 220px !important;
    }
}

/* Анимация при загрузке для всех форм */
.iti--loading .iti__selected-flag::before {
    content: '' !important;
    position: absolute !important;
    width: 14px !important;
    height: 14px !important;
    border: 2px solid #F1B400 !important;
    border-top: 2px solid transparent !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Hover эффекты для всех форм */
.iti:hover .iti__tel-input {
    border-color: rgba(241, 180, 0, 0.6) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.iti:hover .iti__flag-container {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
}

/* =================================
   УЛУЧШЕННОЕ ПОЗИЦИОНИРОВАНИЕ DROPDOWN
   ================================= */

/* Принудительное установление контейнера как relative */
.iti {
    position: relative !important;
    z-index: 1 !important;
    contain: layout style !important;
}

/* Улучшенное поведение dropdown */
.iti__dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    contain: layout style paint !important;
    z-index: 1050 !important;
    background: white !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #e5e7eb !important;
    border-top: none !important;
    border-radius: 0 0 0.375rem 0.375rem !important;
    max-width: 100% !important;
    width: 100% !important;
    min-width: 260px !important;
    margin: 0 !important;
    /* Переопределяем все возможные inline стили */
    inset: auto !important;
}

/* Дополнительные специфичные селекторы */
.iti > .iti__dropdown,
.iti .iti__dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
}

/* Еще более специфичные правила для переопределения inline стилей */
div.iti div.iti__dropdown[style] {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
}

/* Упрощенные правила прокрутки без !important */
.iti__dropdown .iti__country-list {
    overflow-y: auto;
    max-height: 200px;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #F1B400 #f3f4f6;
}

.iti__dropdown .iti__country-list::-webkit-scrollbar {
    width: 6px;
}

.iti__dropdown .iti__country-list::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 3px;
}

.iti__dropdown .iti__country-list::-webkit-scrollbar-thumb {
    background: #F1B400;
    border-radius: 3px;
    transition: background-color 0.2s;
}

.iti__dropdown .iti__country-list::-webkit-scrollbar-thumb:hover {
    background: #d97706;
}

/* Фикс для позиционирования на первой загрузке */
.iti--container {
    position: relative !important;
    z-index: 1 !important;
}

/* Принудительное переопределение fixed позиционирования */
.iti__dropdown[style*="position: fixed"] {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
}

/* Дополнительное принудительное позиционирование */
.iti__dropdown[style*="top:"] {
    top: 100% !important;
}

.iti__dropdown[style*="left:"] {
    left: 0 !important;
}

.iti__dropdown[style*="transform:"] {
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
}

/* =================================
   ИСПРАВЛЕНИЕ ПОЗИЦИОНИРОВАНИЯ ФЛАГОВ
   ================================= */

/* Скрываем все флаги полностью */
.iti__flag {
    display: none !important;
}

/* Retina дисплеи */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/img/flags@2x.png") !important;
        background-size: 5652px 15px !important;
    }
}

/* Обеспечиваем правильное выравнивание в контейнере страны */
.iti__country {
    display: flex !important;
    align-items: center !important;
    flex-direction: row !important;
    padding: 8px 12px !important;
}

/* Элементы внутри элемента страны */
.iti__country > * {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Название страны и код */
.iti__country-name,
.iti__dial-code {
    line-height: 15px !important;
    vertical-align: middle !important;
}

/* Фиксируем контейнер флага */
.iti__flag-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Фиксируем выбранный флаг */
.iti__selected-flag {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-direction: row !important;
}

/* Убираем любые трансформации на флагах */
.iti__flag,
.iti__selected-flag .iti__flag,
.iti__country .iti__flag {
    transform: none !important;
    -webkit-transform: none !important;
    position: static !important;
}

/* Приоритетные страны (выше черты) */
.iti__country.iti__preferred {
    background-color: #fafafa !important;
}

.iti__country.iti__preferred .iti__flag {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Разделитель между приоритетными и обычными странами */
.iti__divider {
    padding: 0 !important;
    margin: 4px 0 !important;
    height: 1px !important;
    background-color: #e5e7eb !important;
    border: none !important;
}