/* Estilo para o campo de telefone com erro */
.iti--allow-dropdown.error input[type="tel"] {
    border: 2px solid red !important;
}

/* Garante que o contêiner do intl-tel-input ocupe 100% da largura */
.iti, .iti--allow-dropdown {
    width: 100% !important;
    position: relative;
    box-sizing: border-box;
}

.iti--separate-dial-code .iti__selected-flag {
    background-color: rgba(0, 0, 0, 0);
}

.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
    background-color: rgba(0, 0, 0, 0);
}

/* Garante que o input respeite o espaço do seletor de país */
.iti--allow-dropdown input[type="tel"] {
    box-sizing: border-box;
}

/* Estilo para a mensagem de erro */
.phone-error-message {
    color: red;
    font-size: 12px;
    text-align: center;
    display: none;
    position: absolute; /* Remove a mensagem do fluxo normal do layout */
    top: 100%; /* Posiciona logo abaixo do campo */
    left: 0;
    width: 100%;
    z-index: 0; /* Garante que não sobreponha o seletor de país */
}

/* Exibe a mensagem de erro quando o campo está inválido */
.iti--allow-dropdown.error .phone-error-message {
    display: block;
}

/* Ajusta o tamanho da fonte do seletor de país e lista */
.iti__selected-dial-code {
    font-size: 16px;
}

.iti__country-name {
    font-size: 16px;
}

.iti__dial-code {
    font-size: 16px;
}