/* ==========================================================
    Estilos exclusivos da Página de Login
========================================================= */

/* Grupo de input premium: adiciona borda arredondada e transição suave
   para criar um efeito de anel (ring) de foco ao redor do grupo de inputs. */
.premium-input {
    border-radius: 8px;
    /* O Bootstrap usa radius nos elementos, este radius fica para o ring do focus-within */
    transition: all 0.3s ease;
}

/* Garante a transição das bordas dos componentes internos (input e ícones)
   para acompanhar a mudança de cor do anel de foco. */
.premium-input .form-control,
.premium-input .input-group-text {
    border-color: #d1d5db;
    /* Cor um pouco mais suave que a do default bootstrap */
    background: #fff;
    transition: border-color 0.3s ease;
}

/* Quando qualquer elemento filho (ex. input) recebe foco, as bordas
   internas mudam para a cor principal (primary-color). */
.premium-input:focus-within .form-control,
.premium-input:focus-within .input-group-text {
    border-color: var(--primary-color);
}

/* Efeito de anel de foco (box-shadow) semitransparente aplicado ao container
   do input quando focado, simulando o estilo moderno do Tailwind. */
.premium-input:focus-within {
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
    border-radius: 6px;
}

/* Efeito ao passar o mouse sobre o botão/ícone de alternar visibilidade de senha (olho). */
.toggle-password:hover {
    color: var(--primary-color) !important;
}

/* ==========================================================
   Estilização dos Links do Login (Botão de esquecer a senha)
========================================================== */

/* Link customizado de recuperação de senha com cor principal. */
.custom-link {
    color: var(--primary-color);
    transition: color 0.2s ease;
}

/* Efeito hover no link customizado, mudando de cor e adicionando sublinhado. */
.custom-link:hover {
    color: var(--primary-hover);
    text-decoration: underline !important;
}

/* Botão pequeno estilo Netflix para dispositivos móveis:
   Reduz o preenchimento (padding) e tamanho da fonte em telas pequenas. */
@media (max-width: 576px) {
    .btn-sm-mobile {
        padding: 0.4rem 0.8rem !important;
        font-size: 0.75rem !important;
    }

    .btn-sm-mobile i {
        font-size: 0.7rem !important;
        margin-right: 0.25rem !important;
    }
}