/**
 * Estilos customizados para Phone DDI
 * Otimizados para mobile-first e acessibilidade
 */

/* Ajuste para melhor exibição em dispositivos móveis */
.iti {
    width: 100%;
    display: block;
    margin-bottom: 0.5rem;
}

/* Melhora estilo da seta de expansão */
.iti__arrow {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #555;
    transition: transform 0.2s ease; /* Transição suave para feedback visual */
}

.iti.iti--open .iti__arrow {
    transform: rotate(180deg); /* Rotaciona seta quando menu está aberto */
}

/* Garante que o campo de input ocupe toda a largura disponível */
.iti__tel-input {
    width: 100% !important;
    padding: 0.8rem 0.5rem 0.8rem 90px !important; /* Espaço suficiente para o DDI */
    font-size: 16px !important; /* Evita zoom em iOS */ 
    height: auto;
}

/* Exibe flag e código do país de forma mais proeminente */
.iti__selected-flag {
    padding: 0 12px 0 8px;
    border-radius: 4px 0 0 4px;
    transition: background-color 0.2s ease;
}

/* Estilo para indicar erro de validação */
.iti input.error {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 1px #e74c3c !important;
    background-color: rgba(231, 76, 60, 0.05) !important;
}

/* Feedback visual ao passar o mouse sobre a bandeira */
.iti__selected-flag:hover {
    background-color: rgba(0,0,0,0.05);
}

/* Adiciona foco visível para acessibilidade */
.iti__tel-input:focus {
    outline: 2px solid #3498db;
    outline-offset: -1px;
}

/* Melhor legibilidade para texto do dropdown de países */
.iti__country-name {
    color: #333;
    font-weight: 500;
}

/* Otimização para toque em dispositivos móveis */
.iti__country {
    padding: 10px 9px;
    outline: none;
}

/* Ajustes responsivos para telas pequenas */
@media screen and (max-width: 767px) {
    .iti__country-list {
        max-width: 280px;
        max-height: 220px;
    }
    
    .iti__country {
        padding: 12px 9px; /* Área de toque maior em dispositivos móveis */
    }
}

/* Melhora contraste para acessibilidade */
.iti__dial-code {
    color: #333;
}

/* Versão de alto contraste para usuários com deficiência visual */
@media (prefers-contrast: more) {
    .iti__tel-input {
        border: 2px solid #000;
    }
    
    .iti__selected-flag {
        background-color: #f1f1f1;
    }
    
    .iti input.error {
        border: 2px solid #c00;
        box-shadow: none;
    }
}