/* assets/css/components/_calculator.css */

/* Estilo customizado para os inputs da calculadora */
.plan-input:checked+label {
    border-color: #CB99FF;
    box-shadow: 0 0 15px rgba(203, 153, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.05);
}

.plan-input:checked+label h4 {
    color: #CB99FF;
}

/* Estilos para mobile (telas com até 1023px de largura) */
@media (max-width: 1023px) {

    /* Estilo para o resumo do plano fixo no mobile */
    .summary-mobile-sticky {
        position: fixed;
        top: 75px;
        left: 0;
        right: 0;
        z-index: 30;
        background-color: #040308;
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        transform: translateY(-150%);
        transition: transform 0.3s ease-in-out;
    }

    .summary-mobile-sticky.visible {
        transform: translateY(0);
    }

    /*
      Solução Definitiva: Desativa o efeito de hover em dispositivos de toque (mobile).
      Isso impede que o estilo de "hover" fique "preso" após um toque.
    */
    .plan-input:not(:checked)+label:hover {
        /* Mantém a cor da borda padrão para itens não selecionados */
        border-color: rgba(255, 255, 255, 0.2) !important;
    }

    .plan-input:checked+label:hover {
        /* Mantém a cor da borda de seleção para itens já selecionados */
        border-color: #CB99FF !important;
    }
}