/* ── intl-tel-input style overrides to match site design ── */

/* Container — must be full width and display inline */
.iti {
    width: 100%;
    font-family: 'Outfit', sans-serif;
}

/* The tel input needs enough left padding for the flag + dial code.
   intl-tel-input sets --iti-input-padding automatically,
   but we add a generous fallback. */
.iti input.iti__tel-input {
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    padding-left: 110px !important;
}

/* Selected country button (flag + code section) */
.iti__selected-country {
    border-radius: 8px 0 0 8px;
    background: #f8fbfe !important;
    padding: 0 10px !important;
    border-right: 1px solid #dce2e8 !important;
    transition: background 0.3s ease;
}

.iti__selected-country:hover {
    background: #eef2f5 !important;
}

/* Dial code display */
.iti__selected-dial-code {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1a2a32;
    margin-left: 6px;
}

/* Dropdown arrow */
.iti__arrow {
    margin-left: 6px;
    border-top-color: #6a7c88;
}

.iti__arrow--up {
    border-bottom-color: #6a7c88;
}

/* Dropdown container */
.iti__dropdown-content {
    border-radius: 12px !important;
    border: 1px solid #dce2e8 !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
}

/* Search input inside dropdown */
.iti__search-input {
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.9rem !important;
    padding: 10px 14px !important;
    border: 1px solid #dce2e8 !important;
    border-radius: 8px !important;
    margin: 8px 10px !important;
    width: calc(100% - 20px) !important;
    box-sizing: border-box !important;
    transition: border-color 0.3s ease !important;
}

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

/* Country list */
.iti__country-list {
    border: none !important;
    max-height: 260px;
}

/* Each country item */
.iti__country {
    padding: 10px 14px !important;
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    transition: background 0.15s ease;
}

.iti__country:hover {
    background: #f3f6f8 !important;
}

.iti__country.iti__highlight {
    background: #e8f0f5 !important;
}

/* Country name */
.iti__country-name {
    color: #1a2a32;
}

/* Dial code in list */
.iti__dial-code {
    color: #485e68;
    font-weight: 600;
}

/* ═══════════════════════════════════════
   Page-specific overrides
   ═══════════════════════════════════════ */

/* ── Pitch form ── */
.pitch-form .iti {
    width: 100%;
}

/* Validation for pitch form */
.pitch-form .form-field.valid .iti input {
    border-color: #27ae60 !important;
}

.pitch-form .form-field.error .iti input {
    border-color: #e74c3c !important;
}

/* ── Investor form ── */
.relations-form .iti input.iti__tel-input {
    padding: 14px 20px 14px 110px !important;
    border: 1px solid #E6EBED !important;
    border-radius: 12px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 1rem !important;
    color: #0F1F22 !important;
    background: #fff !important;
    transition: border-color 0.3s ease !important;
    height: auto !important;
}

.relations-form .iti input.iti__tel-input::placeholder {
    color: #C0C8CC !important;
}

.relations-form .iti input.iti__tel-input:focus {
    outline: none !important;
    border-color: #1C323A !important;
    box-shadow: none !important;
}

.relations-form .iti__selected-country {
    border-radius: 12px 0 0 12px;
}

/* ── Mentorship form ── */
.mentorship-form .iti {
    width: 100%;
}

.mentorship-form .iti input.iti__tel-input {
    padding-left: 110px !important;
    border-radius: 10px !important;
    height: auto !important;
}

.mentorship-form .iti__selected-country {
    border-radius: 10px 0 0 10px;
}

/* Mentorship form validation states */
.mentorship-form .iti:has(input.invalid) input {
    border-color: #e74c3c !important;
    background: #fff5f5 !important;
}

.mentorship-form .iti:has(input.valid) input {
    border-color: #27ae60 !important;
    background: #f0fff4 !important;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .iti input.iti__tel-input {
        padding-left: 95px !important;
    }

    .iti__selected-dial-code {
        font-size: 0.8rem;
    }

    .iti__dropdown-content {
        width: 280px !important;
    }
}