/* Wrapper principal */
#custom_um_otp_wrapper {
    display: flex;
    flex-direction: column; /* Elementos em coluna */
    align-items: center; /* Centraliza horizontalmente */
    gap: 10px; /* Espaço entre os elementos */
}

/* Campo de telefone */
.mobile_number_input {
    flex-grow: 1; /* Ocupa o restante do espaço */
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    max-width: 280px; /* Define o tamanho máximo */
}

/* Sucesso na validação */
.mobile_number_input.otp-success {
    border-color: green;
    background-color: #eaffea;
}

/* Falha na validação */
.mobile_number_input.otp-failed {
    border-color: red;
    background-color: #ffeaea;
}

/* Estilo para o campo de número de telefone não editável */
.mobile_number_input[readonly] {
    background-color: #f0f0f0; /* Fundo cinza claro */
    cursor: not-allowed; /* Indicador visual de bloqueio */
    color: #333; /* Texto com contraste adequado */
    border: 1px solid #ccc; /* Borda padrão */
}

/* Estilo da seção OTP */
#otp_section {
    margin-top: 15px;
}

#otp_section input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
}

/* Botão "VERIFICAR" */
#verify_number {
    margin-top: 10px; /* Espaço entre o campo e o botão */
    padding: 10px 20px;
    background-color: #0073aa; /* Cor azul */
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}


#verify_number:hover {
    background-color: #005177;
}

/* Linha com dropdown e campo de telefone */
#phone_row {
    display: flex;
    align-items: center; /* Alinha verticalmente */
    gap: 5px; /* Espaço entre dropdown e campo */
    width: 100%;
    justify-content: center; /* Centraliza horizontalmente */
}

/* Dropdown de país */
#country_dropdown select {
    padding: 6px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    cursor: pointer;
    width: 60px; /* Largura do dropdown */
    height: 42px; /* Alinha com o campo de telefone */
    text-align: center;
}

#resend_timer {
    color: #555;
    font-size: 14px;
    margin-top: 5px;
}

/* Estilo para o ícone de check verde */
#otp_verified {
    color: #28a745; /* Verde mais discreto */
    font-size: 8px; /* Tamanho ajustado */
    margin-left: 10px;
    vertical-align: middle; /* Alinha com o texto */
}