/* public/css/planos.css (Versão 2.0 - Mais Atrativa) */

/* Estilo geral da seção de planos */
.pricing-header {
    max-width: 700px;
    margin: 0 auto;
}

/* Estilo individual de cada card de plano */
.pricing-card {
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
    border-radius: 0.75rem; /* Bordas mais arredondadas */
    overflow: hidden; /* Essencial para a faixa "Mais Popular" */
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0.8rem 1.5rem rgba(0, 0, 0, 0.1) !important;
}

/* Destaque para o plano "Pro" */
.pricing-card.pro-plan {
    border: 2px solid #0d6efd;
    box-shadow: 0 0.5rem 1rem rgba(0, 123, 255, 0.2);
}

/* Estilo do preço */
.pricing-card .card-price {
    font-size: 3.5rem;
    font-weight: 700;
    color: #212529;
}

.pricing-card .card-price .period {
    font-size: 1rem;
    font-weight: 300;
    color: #6c757d;
}

/* Lista de funcionalidades */
.pricing-card .fa-ul {
    margin-left: 1em;
    padding-left: 1.2em;
}

.pricing-card .fa-ul li {
    padding-bottom: 0rem;
    font-size: 0.95rem;
}

/* Faixa "Mais Popular" - CORREÇÃO APLICADA */
.popular-badge {
    position: absolute;
    top: 22px;      /* Distância do topo */
    right: -32px;     /* Distância da direita */
    background-color: #ffc107;
    color: #000;
    padding: 5px 35px;
    transform: rotate(45deg); /* Rotação da faixa */
    font-size: 0.75rem;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    z-index: 2; /* Garante que fique por cima do conteúdo */
}

/* Estilo do botão de assinar */
.pricing-card .btn {
    font-size: 1.1rem;
    font-weight: bold;
    padding: 0.75rem 1rem;
    border-radius: 30px; /* Botão mais arredondado */
}

/* Estilos para o seletor Anual/Mensal */
.plan-toggle-container .form-check-input {
    width: 3em;
    height: 1.5em;
    cursor: pointer;
}
.plan-toggle-container .plan-label {
    font-weight: 500;
    color: #6c757d;
    transition: color 0.2s ease-in-out;
}
.plan-toggle-container .plan-label.active {
    color: #0d6efd;
    font-weight: 700;
}
.price-container {
    min-height: 60px; /* Garante altura fixa para não "pular" */
}
.anual-info s {
  opacity: 0.6;
  text-decoration-thickness: 2px;
}