/* Estilos para os botões de ação nas telas de recuperação */
.form-actions-recover {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.form-actions-recover button {
    flex: 1;
    width: 100%;
}

/* Estilo padronizado para botões secundários */
.btn-secondary {
    background: #f0f5ff;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 14px 24px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-secondary:hover {
    background: #e1e9ff;
}

@media (max-width: 480px) {
    .form-actions-recover {
        flex-direction: column;
    }
}

/* --- EFEITO INTERATIVO INDEPENDENTE PARA BOTÕES DE AÇÃO --- */

/* 
  Regra genérica que adiciona uma transição suave para ambos os botões.
  Isso garante que a animação de subida seja suave.
*/
.form-actions-recover .btn-primary,
.form-actions-recover .btn-secondary {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* 
  Regra para o BOTÃO PRIMÁRIO:
  Quando o mouse estiver sobre ele (:hover) ou quando ele for selecionado
  pelo teclado (:focus-visible), ele se move para cima.
*/
.form-actions-recover .btn-primary:hover,
.form-actions-recover .btn-primary:focus-visible {
    transform: translateY(-5px); /* Move para cima */
    box-shadow: 0 6px 16px rgba(67, 97, 238, 0.3); /* Sombra mais pronunciada */
}

/* 
  Regra para o BOTÃO SECUNDÁRIO:
  Quando o mouse estiver sobre ele (:hover) ou quando ele for selecionado
  pelo teclado (:focus-visible), ele também se move para cima,
  de forma totalmente independente do outro botão.
*/
.form-actions-recover .btn-secondary:hover,
.form-actions-recover .btn-secondary:focus-visible {
    transform: translateY(-5px); /* Move para cima */
    box-shadow: 0 4px 10px rgba(67, 97, 238, 0.15); /* Sombra mais pronunciada */
}