/* ===============================================
   ITI-THEME.CSS — intlTelInput v24 стили для лендинга
   
   styles.css уже содержит:
     - .form-group .iti__tel-input  (общие инпуты)
     - .cta-form .iti__tel-input    (НЕ применяется, т.к. форма = .hero-form)
   
   Этот файл добавляет ТОЛЬКО недостающие стили:
     1. .iti контейнер — ширина 100%
     2. Hero form — прозрачный, border-bottom
     3. CTA form (.form-group--light) — тёмные pill-инпуты
     4. Modal — прозрачный, border-bottom, тёмный текст
     5. Dropdown стран — тёмная тема
   =============================================== */

/* --- 0. Контейнер ITI — всегда 100% ширины --- */
.iti {
    width: 100%;
    display: block;
}


/* ===============================================
   1. HERO FORM — .hero-form .form-group (без --light)
   Прозрачный фон, только нижняя граница, светлый текст
   =============================================== */
.hero-form .form-group:not(.form-group--light) .iti__tel-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--gray, rgba(240, 231, 213, 0.5));
    border-radius: 0;
    padding: 10px 0;
    padding-left: 92px !important;
    font-size: 16px;
    color: var(--white, #F0E7D5);
    outline: none;
    box-shadow: none;
    height: auto;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.hero-form .form-group:not(.form-group--light) .iti__tel-input:focus {
    border-bottom-color: var(--gold-accent, #c09d57);
    box-shadow: 0 1px 0 0 var(--gold-accent, #c09d57);
}

/* Dial code и стрелка — светлые на тёмном фоне */
.hero-form .form-group:not(.form-group--light) .iti__selected-dial-code {
    color: rgba(240, 231, 213, 0.8);
}

.hero-form .form-group:not(.form-group--light) .iti__country-container {
    border: none;
    background: transparent;
}

.hero-form .form-group:not(.form-group--light) .iti__selected-country {
    background: transparent;
}


/* ===============================================
   2. CTA FORM — .form-group--light
   Тёмный pill-стиль: #3a4363 bg, border, border-radius
   (Совпадает с .cta-form стилями в styles.css)
   =============================================== */
.form-group--light .iti__tel-input {
    width: 100%;
    height: 56px;
    box-sizing: border-box;
    padding: 15px 20px;
    padding-left: 92px !important;
    background-color: #3a4363;
    border: 1px solid #5a647e;
    border-radius: 4px;
    color: var(--white, #F0E7D5);
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group--light .iti__tel-input:focus {
    border-color: var(--gold-accent, #c09d57);
    box-shadow: 0 0 0 2px rgba(192, 157, 87, 0.2);
}

.form-group--light .iti__selected-dial-code {
    color: var(--white, #F0E7D5);
}

.form-group--light .iti__country-container {
    border: none;
    background: transparent;
}

.form-group--light .iti__selected-country {
    background: transparent;
}


/* ===============================================
   3. MODAL — .modal-form-group
   Прозрачный фон, border-bottom, тёмный текст (white bg modal)
   =============================================== */
.modal-form-group .iti__tel-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #5a647e;
    border-radius: 0;
    padding: 10px 0;
    font-size: 16px;
    color: var(--dark-bg, #212842);
    outline: none;
    box-shadow: none;
    height: auto;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.modal-form-group .iti__tel-input:focus {
    border-bottom-color: var(--gold-accent, #c09d57);
    box-shadow: 0 1px 0 0 var(--gold-accent, #c09d57);
}

.modal-form-group .iti__selected-dial-code {
    color: #555;
}

.modal-form-group .iti__country-container {
    border: none;
    background: transparent;
}

.modal-form-group .iti__selected-country {
    background: transparent;
}


/* ===============================================
   4. Validation states — .error / .correct
   =============================================== */
/* Hero & Modal: keep transparent bg */
.hero-form .form-group:not(.form-group--light) .iti__tel-input.error,
.modal-form-group .iti__tel-input.error {
    border-bottom-color: #ff4444 !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.hero-form .form-group:not(.form-group--light) .iti__tel-input.correct,
.modal-form-group .iti__tel-input.correct {
    border-bottom-color: #28a745 !important;
    background-color: transparent !important;
}

/* CTA (.form-group--light): keep dark bg */
.form-group--light .iti__tel-input.error {
    border-color: #ff4444 !important;
    box-shadow: none !important;
}

.form-group--light .iti__tel-input.correct {
    border-color: #28a745 !important;
}


/* ===============================================
   5. Dropdown стран — тёмная тема
   =============================================== */
.iti__dropdown-content {
    background-color: var(--dark-bg, #1a1f35);
    border: 1px solid var(--gold-accent, #c09d57);
    border-radius: 4px;
}

.iti__country-list {
    background-color: var(--dark-bg, #1a1f35);
    color: var(--white, #F0E7D5);
    z-index: 10000 !important;
}

.iti__country-list .iti__country-name {
    color: var(--white, #F0E7D5);
}

.iti__country-list .iti__dial-code {
    color: var(--gold-accent, #c09d57);
}

.iti__country-list .iti__country.iti__highlight {
    background-color: rgba(192, 157, 87, 0.15);
}

.iti__country-list .iti__divider {
    border-bottom-color: rgba(240, 231, 213, 0.2);
}

/* Поиск в dropdown */
.iti__search-input {
    background-color: var(--dark-bg, #1a1f35);
    color: var(--white, #F0E7D5);
    border: 1px solid rgba(240, 231, 213, 0.3);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
}

.iti__search-input::placeholder {
    color: rgba(240, 231, 213, 0.4);
}

.iti__search-input:focus {
    border-color: var(--gold-accent, #c09d57);
    outline: none;
}


/* ===============================================
   6. Скрываем label для телефонных полей
   =============================================== */
.form-group input.phone + label,
.form-group--light input.phone + label,
.modal-form-group input.phone + label {
    display: none !important;
}