/* ITI theme — blue-white landing (matches other form fields) */

.iti {
    width: 100%;
    display: block;
    position: relative;
}

/* Shared: dial code + digits same color as other inputs */
.iti__selected-dial-code {
    color: var(--ink, #0c2340) !important;
    font-size: 15px;
    font-family: var(--sans, 'Inter', sans-serif);
}

.iti__selected-country-primary {
    background: transparent !important;
}

.iti__country-container {
    border: none !important;
    background: transparent !important;
}

.iti__selected-country {
    background: transparent !important;
}

.iti__arrow {
    border-top-color: var(--muted, #5a7a9a) !important;
}

/* ── Hero + modal: underline style like other fields ── */
.hero-form .form-group:not(.form-group--light) .iti__tel-input,
.modal-form-group .iti__tel-input {
    width: 100%;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--line, #c8d9ec) !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    padding-left: 88px !important;
    font-size: 15px !important;
    color: var(--ink, #0c2340) !important;
    outline: none;
    box-shadow: none !important;
    height: auto !important;
    box-sizing: border-box;
    transition: border-color .2s;
}

.hero-form .form-group:not(.form-group--light) .iti__tel-input:focus,
.modal-form-group .iti__tel-input:focus {
    border-bottom-color: var(--blue, #1e6fd9) !important;
    box-shadow: none !important;
}

/* Dark section forms */
.section--dark .iti__tel-input {
    color: #fff !important;
    border-bottom-color: rgba(255,255,255,.25) !important;
    background: transparent !important;
}

.section--dark .iti__selected-dial-code {
    color: rgba(255,255,255,.85) !important;
}

.section--dark .iti__arrow {
    border-top-color: rgba(255,255,255,.5) !important;
}

/* ── CTA bottom form: boxed style like other --light fields ── */
.form-group--light .iti__tel-input,
.cta-form .iti__tel-input {
    width: 100%;
    height: 50px !important;
    box-sizing: border-box;
    padding: 14px 16px 14px 88px !important;
    background: var(--paper, #fff) !important;
    border: 1px solid var(--line, #c8d9ec) !important;
    border-radius: 0 !important;
    color: var(--ink, #0c2340) !important;
    font-size: 15px !important;
    outline: none;
    transition: border-color .2s;
}

.form-group--light .iti__tel-input:focus,
.cta-form .iti__tel-input:focus {
    border-color: var(--blue, #1e6fd9) !important;
    box-shadow: none !important;
}

/* Phone label removed — field is self-explanatory via intlTelInput */
.form-group--phone::before {
    display: none;
}

/* Validation */
.hero-form .form-group:not(.form-group--light) .iti__tel-input.error,
.modal-form-group .iti__tel-input.error {
    border-bottom-color: #e74c3c !important;
}

.form-group--light .iti__tel-input.error,
.cta-form .iti__tel-input.error {
    border-color: #e74c3c !important;
}

.hero-form .form-group:not(.form-group--light) .iti__tel-input.correct,
.modal-form-group .iti__tel-input.correct,
.form-group--light .iti__tel-input.correct,
.cta-form .iti__tel-input.correct {
    border-color: #27ae60 !important;
}

/* Dropdown */
.iti__dropdown-content {
    background: var(--paper, #fff);
    border: 1px solid var(--line, #c8d9ec);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(12,35,64,.12);
}

.iti__country-list {
    background: var(--paper, #fff);
    color: var(--ink, #0c2340);
    z-index: 10000 !important;
}

.iti__country-list .iti__country-name { color: var(--ink, #0c2340); }
.iti__country-list .iti__dial-code { color: var(--blue, #1e6fd9); }
.iti__country-list .iti__country.iti__highlight { background: var(--blue-light, #e8f2fc); }

.iti__search-input {
    background: var(--paper, #fff);
    color: var(--ink, #0c2340);
    border: 1px solid var(--line, #c8d9ec);
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
}

.iti__search-input::placeholder { color: var(--muted, #5a7a9a); }
.iti__search-input:focus { border-color: var(--blue, #1e6fd9); outline: none; }

.form-group input.phone + label,
.form-group--light input.phone + label,
.modal-form-group input.phone + label {
    display: none !important;
}