/* Card do Plano Outubro Rosa na grade de planos.
   É o MESMO .plano-card dos outros planos (section_planos/css/style.css); aqui só
   entram as cores da campanha, no lugar do laranja/ciano. Carregado pela home só
   com a campanha ligada, depois do gamer-tech-v5 para vencer a cascata.

   O selo "Campanha Outubro Rosa" mora na faixa .plan-highlight-slot, que existe em
   TODOS os cards da grade com a mesma altura: nome, preço, lista e botão do card
   rosa caem na mesma linha dos vizinhos (antes era um texto position:absolute
   sobre o topo do card). */

.plano-card.plano-card--outubro-rosa {
    --sor-rosa: #ff4f9a;
    --sor-rosa-claro: #ff8cc0;
    border-color: var(--sor-rosa);
    filter: drop-shadow(0 0 16px rgba(255, 79, 154, 0.32));
    /* O botão de vidro da grade é pintado pelas variáveis --vn-glass-orange-*
       (section_planos/css/style.css, body.dark-theme .assine-agora). Redefinidas
       aqui, elas trocam só o tom do botão deste card para o rosa. */
    --vn-glass-orange-bg: linear-gradient(135deg, rgba(255, 79, 154, 0.24) 0%, rgba(40, 8, 24, 0.62) 58%, rgba(255, 255, 255, 0.06) 100%);
    --vn-glass-orange-bg-hover: linear-gradient(135deg, rgba(255, 79, 154, 0.36) 0%, rgba(52, 8, 30, 0.68) 58%, rgba(255, 255, 255, 0.08) 100%);
    --vn-glass-orange-border: rgba(255, 120, 180, 0.85);
    --vn-glass-orange-glow: 0 0 0 1px rgba(255, 79, 154, 0.12), 0 12px 26px rgba(0, 0, 0, 0.28), 0 0 22px rgba(255, 79, 154, 0.22);
    --vn-glass-orange-glow-hover: 0 0 0 1px rgba(255, 79, 154, 0.2), 0 16px 32px rgba(0, 0, 0, 0.3), 0 0 30px rgba(255, 79, 154, 0.38);
    --vn-glass-text-shadow: 0 0 8px rgba(255, 79, 154, 0.7);
}

.plano-card.plano-card--outubro-rosa:hover,
.plano-card.plano-card--outubro-rosa:focus-within {
    border-color: var(--sor-rosa-claro);
    box-shadow: 0 30px 60px rgba(255, 79, 154, 0.16);
}

.plano-card--outubro-rosa::before {
    background: linear-gradient(90deg, rgba(255, 79, 154, 0), rgba(255, 79, 154, 0.9), rgba(255, 79, 154, 0));
}

.plano-card--outubro-rosa .plan-tag--campanha {
    border-color: rgba(255, 79, 154, 0.65);
    background: rgba(255, 79, 154, 0.14);
    color: var(--sor-rosa-claro);
}

.plano-card--outubro-rosa .plan-logo-text {
    color: var(--sor-rosa-claro);
    border-color: rgba(255, 79, 154, 0.55);
    background: rgba(255, 79, 154, 0.12);
    text-shadow: 0 0 14px rgba(255, 79, 154, 0.5);
}

.plano-card--outubro-rosa .plan-mbps {
    color: var(--sor-rosa-claro);
}

.plano-card--outubro-rosa .plan-feature:not(.plan-feature--off) i {
    color: var(--sor-rosa);
}

/* Configurador no tom da campanha: gatilho do streaming, linhas marcadas e caixas de
   seleção em rosa (nos outros cards são ciano/laranja). O preto da marca do check
   sobre o rosa #ff4f9a dá ~6:1. */
.plano-card--outubro-rosa .sv-trigger {
    border-color: rgba(255, 79, 154, 0.5);
    background: linear-gradient(135deg, rgba(255, 79, 154, 0.12), rgba(120, 20, 80, 0.08));
}

.plano-card--outubro-rosa .sv-trigger:hover,
.plano-card--outubro-rosa .sv-trigger.is-chosen {
    border-color: var(--sor-rosa);
    background: linear-gradient(135deg, rgba(255, 79, 154, 0.18), rgba(120, 20, 80, 0.12));
}

.plano-card--outubro-rosa .sv-trigger__icon,
.plano-card--outubro-rosa .sv-trigger__plus {
    color: var(--sor-rosa-claro);
}

.plano-card--outubro-rosa .sv-trigger__plus {
    border-color: rgba(255, 79, 154, 0.55);
}

.plano-card--outubro-rosa .plan-addon-row:hover {
    border-color: rgba(255, 79, 154, 0.5);
    background: rgba(255, 79, 154, 0.05);
}

.plano-card--outubro-rosa .plan-addon-row:has(input:checked) {
    border-color: rgba(255, 79, 154, 0.7);
    background: rgba(255, 79, 154, 0.09);
}

body.dark-theme .plano-card--outubro-rosa .plan-addon-row input[type="checkbox"] {
    border-color: rgba(255, 120, 180, 0.7) !important;
}

body.dark-theme .plano-card--outubro-rosa .plan-addon-row input[type="checkbox"]:checked {
    border-color: var(--sor-rosa) !important;
    background-color: var(--sor-rosa) !important;
}

.plano-card--outubro-rosa .plan-summary {
    border-color: rgba(255, 79, 154, 0.4);
    background: rgba(255, 79, 154, 0.05);
}

/* "Ver/Ocultar resumo" no rosa claro (era o único ciano do card). #ff8cc0 sobre o
   fundo do resumo (~#0d0c16) dá ~8,9:1. */
.plano-card--outubro-rosa .plan-summary__toggle {
    color: var(--sor-rosa-claro);
}

@media (max-width: 575.98px) {
    .plano-card.plano-card--outubro-rosa {
        border-color: var(--sor-rosa);
    }
}

@media (forced-colors: active) {
    .plano-card--outubro-rosa .assine-agora {
        border: 2px solid ButtonText;
    }
}