/**
 * vo-catalogo.css — chrome dos cards/toggle do catálogo (#35, Task 4)
 *
 * Cobre só o que wp-content/mu-plugins/lib/vo-catalogo-render.php NÃO já resolve via
 * estilo inline (badge, eyebrow, heading, tagline, bloco de preço, indisponível: todos
 * inline no PHP, paridade pixel com o fixture 55 — ver docblocks de lá). O que falta
 * aqui é o "chrome" estrutural: grid do card (agora também os 8 TRILHOS FIXOS de
 * linhas do próprio `.vo-ct-card`, proposta aprovada #35 — ver docblock de
 * vo_catalogo_render_card()), moldura do card (bg/borda/raio/sombra/hover), variante
 * popular, toggle de pílulas (container + botão + subtexto + nota/selo), CTA
 * (`.vo-ct-cta`, sem NENHUM estilo inline no PHP), linha de ciclo (`.vo-ct-price-ciclo`
 * — cor/tamanho que era inline no PHP, moveu para cá junto dos trilhos fixos) e
 * foco/mobile.
 *
 * Valores exatos do recon (grid/card/popular/toggle-container/pílula ativa/
 * focus-visible/mobile): docs/superpowers/plans/2026-08-22-catalogo-fiacao-35.md,
 * Task 4 · Step 2. Valores complementares (pílula inativa, subtexto, CTA, nota, selo —
 * não enumerados byte-a-byte no plano) vêm do fixture verbatim
 * docs/analysis/exports-catalogo-2026-08-22/pagina-50-biblioteca-componentes.json
 * (widget 6769cba, toggle price-toggle · Endereço Fiscal) e
 * docs/analysis/exports-catalogo-2026-08-22/pagina-55-planos.json (widgets de botão
 * "Escolher plano" b08b7f1/a8b8d82/a7e3eb5) — mesma fonte de paridade visual usada
 * pelas libs PHP desta feature.
 *
 * Cores sempre via var(--e-global-color-*, #hex) (mesmos tokens de vo_ds(),
 * 02-vo-conteudo.php) — nunca hex puro fora desse padrão.
 */

/* ---------- Grid ---------- */

.vo-ct-grid {
    display: flex;
    gap: 22px;
    align-items: stretch;
    flex-wrap: wrap;
}

/* ---------- Card ---------- */

.vo-ct-card {
    flex: 1 1 0;
    min-width: 280px;
    box-sizing: border-box;
    position: relative;
    background: var(--e-global-color-vosrf0, #FFFFFF);
    border: 1px solid var(--e-global-color-vobrd1, #E6DFD2);
    border-radius: 12px;
    padding: 28px 24px 24px;
    box-shadow: 0 6px 20px rgba(19, 45, 61, 0.06);
    transition: box-shadow .18s ease, transform .18s ease;
    /* Trilhos fixos (proposta aprovada, #35): TODO card emite os mesmos 8 filhos
     * diretos, na ordem eyebrow/título/tagline/preço/contexto/ciclo/botão/features —
     * ver docblock de vo_catalogo_render_card() (lib/vo-catalogo-render.php). Valores
     * de partida, ajustados ao conteúdo real dos 3 planos vivos; slot vazio (contexto/
     * ciclo sem texto) ainda reserva a altura da linha. Badge "★ Mais vendido" é
     * `position:absolute` — não participa do grid, não conta como um dos 8. */
    display: grid;
    grid-template-rows: 18px 34px 44px 46px 22px 20px 68px auto;
    row-gap: 8px;
}

/* Filhos diretos do card SEM margem — o espaçamento entre trilhos é só o `row-gap`
 * do grid acima. Classe a classe, de propósito: um `.vo-ct-card > *` genérico pegaria
 * o badge `position:absolute`, que precisa do próprio `top`/`left` intactos. */
.vo-ct-card > .vo-ct-eyebrow,
.vo-ct-card > .vo-ct-heading,
.vo-ct-card > .vo-ct-tagline,
.vo-ct-card > .vo-ct-price,
.vo-ct-card > .vo-ct-price-sub,
.vo-ct-card > .vo-ct-price-ciclo {
    margin: 0;
}

.vo-ct-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(19, 45, 61, 0.14);
}

.vo-ct-card--popular {
    border: 2px solid var(--e-global-color-primary, #20759C);
    box-shadow: 0 12px 40px rgba(19, 45, 61, 0.14);
}

/* ---------- CTA "Escolher plano" ----------
 * vo_catalogo_render_card() não aplica NENHUM estilo inline ao <a class="vo-ct-cta">
 * (diferente do resto do card) — valores do botão "Escolher plano" da fixture 55
 * (widgets b08b7f1/a8b8d82/a7e3eb5): secundário = fundo branco + borda/texto primary;
 * `--primary` (card popular) = fundo primary + texto branco.
 *
 * Seletores com `a` + classe DENTRO de .vo-ct-card: precisam VENCER o
 * `.elementor-kit-N a{color}` do kit (0-1-1) — mesma armadilha documentada no
 * [vo_header_conta] (02-vo-conteudo.php). Sem isso o texto do CTA popular fica
 * primary sobre primary (invisível — visto ao vivo no runbook #35).
 */

.vo-ct-card a.vo-ct-cta {
    box-sizing: border-box;
    /* flex+center: o grid estica o <a> para os 68px do trilho — sem isto o label
     * fica ancorado no topo com ~22px vazios abaixo (achado médio do review). */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Trilhos fixos (#35): margem 0 — o espaçamento vem do `row-gap` do grid do
     * card, não mais de uma margem própria do botão. */
    margin: 0;
    padding: 12px 20px;
    border: 1px solid var(--e-global-color-vobrd1, #E6DFD2);
    border-radius: 8px;
    background: var(--e-global-color-vosrf0, #FFFFFF);
    color: var(--e-global-color-primary, #20759C);
    font: 600 15px/1.3 'Hanken Grotesk', sans-serif;
    text-align: center;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.vo-ct-card a.vo-ct-cta:hover {
    background: var(--e-global-color-vop075, #E9F3F8);
    color: var(--e-global-color-vop700, #1A5F80);
}

.vo-ct-card a.vo-ct-cta--primary {
    border-color: var(--e-global-color-primary, #20759C);
    background: var(--e-global-color-primary, #20759C);
    color: var(--e-global-color-vosrf0, #FFFFFF);
}

.vo-ct-card a.vo-ct-cta--primary:hover {
    background: var(--e-global-color-vop700, #1A5F80);
    border-color: var(--e-global-color-vop700, #1A5F80);
    color: var(--e-global-color-vosrf0, #FFFFFF);
}

/* ---------- Toggle de vigência ----------
 * Pílulas são <button>: o kit estiliza `button` globalmente (.elementor-kit-N
 * button, 0-1-1) e pintava TODAS de primary — seletores com o prefixo do container
 * (duas classes, 0-2-0) vencem. Mesma armadilha do CTA (visto ao vivo no runbook). */

/* Wrapper do toggle no grid de cards ([vo_plan_cards toggle=1]): centraliza o
 * seletor E a nota no eixo dos cards (ajuste pós-merge, protótipo V4.5). O
 * [vo_price_toggle] avulso não tem o wrapper e segue o fluxo local. */
.vo-ct-toggle-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 0 20px;
}

.vo-ct-toggle {
    /* inline-grid com colunas 1fr: TODAS as pílulas com a MESMA largura (a "Mensal",
     * sem subtexto de economia, ficava mais estreita — ajuste pós-merge). */
    display: inline-grid;
    grid-auto-flow: column;
    /* minmax(0,1fr): colunas iguais que podem ENCOLHER abaixo do conteúdo (o
     * subtexto quebra linha) — com 1fr puro, a coluna herda a largura da pílula
     * mais larga e o toggle estourava o buybox da PDP (visto ao vivo). */
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    max-width: 100%;
    background: var(--e-global-color-vosrf0, #FFFFFF);
    border: 1px solid var(--e-global-color-vobrd1, #E6DFD2);
    border-radius: 12px;
    padding: 5px;
    font-family: 'Hanken Grotesk', sans-serif;
}

.vo-ct-toggle .vo-ct-pill {
    min-width: 0;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-radius: 9px;
    padding: 9px 16px;
    background: transparent;
    color: var(--e-global-color-text, #3F5563);
    font: 600 13.5px/1.35 'Hanken Grotesk', sans-serif;
    text-align: center;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.vo-ct-toggle .vo-ct-pill:hover {
    background: var(--e-global-color-vosbg2, #EFE9DF);
}

.vo-ct-toggle .vo-ct-pill[aria-pressed="true"],
.vo-ct-toggle .vo-ct-pill.vo-ct-pill--ativa {
    background: var(--e-global-color-primary, #20759C);
    color: var(--e-global-color-vosrf0, #FFFFFF);
    font-weight: 700;
}

.vo-ct-toggle .vo-ct-pill[aria-pressed="true"]:hover,
.vo-ct-toggle .vo-ct-pill.vo-ct-pill--ativa:hover {
    background: var(--e-global-color-primary, #20759C);
}

.vo-ct-pill-sub {
    display: inline-block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 700;
    color: var(--e-global-color-vomute, #8A8D98);
}

/* Contraste do subtexto sobre o fundo primary da pílula ativa. */
.vo-ct-toggle .vo-ct-pill[aria-pressed="true"] .vo-ct-pill-sub,
.vo-ct-toggle .vo-ct-pill.vo-ct-pill--ativa .vo-ct-pill-sub {
    color: var(--e-global-color-vop075, #E9F3F8);
}

/* Nota de microcopy contratual abaixo das pílulas (`data-nota`) — sem estilo inline no PHP. */
.vo-ct-nota {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--e-global-color-vomute, #8A8D98);
}

/* Selo estático de vigência única (toggle de 1 plano-1 vigência). */
.vo-ct-selo {
    color: var(--e-global-color-vomute, #8A8D98);
    font-size: 12.5px;
    font-weight: 700;
}

/* Modificador do selo "Nosso plano de entrada" — contexto do card/buybox de
 * vigência única (proposta dos trilhos fixos, #35: vo_catalogo_render_preco_bloco()).
 * Cor de destaque (accent/gold) em vez do muted padrão de `.vo-ct-selo`. */
.vo-ct-selo--entrada {
    color: var(--e-global-color-accent, #B07D2B);
    font-weight: 700;
    letter-spacing: .3px;
}

/* Linha muted de total do ciclo — estilo que era inline em
 * vo_catalogo_render_preco_bloco() (lib/vo-catalogo-render.php), agora só no CSS
 * (proposta dos trilhos fixos, #35: filhos diretos do card sem estilo de posição
 * inline). Vazia (sem desconto/sem múltiplo de 12 meses) não tem texto, mas a linha
 * do grid continua reservada. */
.vo-ct-price-ciclo {
    color: var(--e-global-color-vomute, #8A8D98);
    font-size: 12px;
}

/* Features é o último dos 8 trilhos fixos do card — separador tracejado do resto do
 * card (aprovado no artefato, #35). */
.vo-ct-card > .vo-ct-features {
    margin: 0;
    border-top: 1px dashed var(--e-global-color-vobrd1, #E6DFD2);
    padding-top: 14px;
}

/* Buybox da PDP NÃO é grid de trilhos fixos (só o card da vitrine é) — contexto/ciclo
 * vazios (multi-vigência sem desconto, ou o slot nunca usado no estado indisponível)
 * não devem deixar um `<p>` vazio ocupando espaço visual ali. */
/* No buybox (que NÃO é grid de trilhos) a margem do ciclo era o inline
 * margin:4px 0 0 removido na PR #54 — sem isto o <p> herda ~1em do navegador
 * (achado médio do review pós-merge). */
.vo-pdp-buybox .vo-ct-price-ciclo {
    margin: 4px 0 0;
}

.vo-pdp-buybox .vo-ct-price-sub:empty,
.vo-pdp-buybox .vo-ct-price-ciclo:empty {
    display: none;
}

/* Toggle dentro do buybox da PDP: largura total do card — as três colunas
 * dividem o espaço por igual e o subtexto de preço/economia quebra linha em vez
 * de estourar a coluna (ajuste pós-#53, visto ao vivo). */
.vo-pdp-col-buybox .vo-ct-toggle {
    display: grid;
    width: 100%;
    box-sizing: border-box;
}

/* ---------- Foco de teclado ---------- */

.vo-ct-toggle .vo-ct-pill:focus-visible,
.vo-ct-card a.vo-ct-cta:focus-visible {
    outline: 3px solid var(--e-global-color-vop075, #E9F3F8);
    outline-offset: 2px;
}

/* ---------- Mobile ---------- */

@media (max-width: 767px) {
    .vo-ct-grid {
        flex-direction: column;
    }

    .vo-ct-card {
        min-width: 0;
    }

    .vo-ct-toggle {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/**
 * ==================== PDP dos planos (#36, Task 3) ====================
 *
 * Chrome do template wp-content/themes/vo-child/woocommerce/content-single-product.php
 * (grid, moldura do buybox, chips, radios de adicional, selo, total, CTA, FAQ,
 * incluso, placeholder) — mesma regra do bloco acima: só o que
 * wp-content/mu-plugins/lib/vo-pdp-render.php NÃO já resolve via estilo inline
 * (badge/eyebrow/h1/tagline/bloco de preço/selos/breadcrumb: inline no PHP, paridade
 * com o protótipo design/src/v45/pages-shop.jsx — ver docblock de lá). Cores sempre
 * via var(--e-global-color-*, #hex) (tokens de vo_ds(), 02-vo-conteudo.php) — nunca
 * hex puro fora desse padrão.
 *
 * `.vo-pdp-adicional-opcao--ativa` é ligada/desligada pelo JS (módulo buybox,
 * vo-catalogo.js) em vez de um seletor `:has(input:checked)` — mesma decisão de
 * compatibilidade do resto do arquivo (JS em ES5, sem depender de feature CSS nova).
 */

.vo-pdp {
    max-width: 1120px;
    margin: 0 auto;
    padding: 32px 24px 64px;
    box-sizing: border-box;
}

.vo-pdp-breadcrumb {
    margin: 0 0 20px;
}

.vo-pdp-breadcrumb a:hover {
    text-decoration: underline;
}

/* ---------- Grid 2 colunas ---------- */

.vo-pdp-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
    align-items: start;
}

.vo-pdp-col-info {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}

.vo-pdp-col-buybox {
    min-width: 0;
}

/* Sticky SÓ desktop — mobile empilha e o buybox some do fluxo fixo (bloco Mobile abaixo). */
@media (min-width: 768px) {
    .vo-pdp-col-buybox {
        position: sticky;
        top: 92px;
    }
}

/* ---------- Placeholder de imagem ----------
 * Fundo (vop050), aspect-ratio e centralização do rótulo já são inline no PHP
 * (vo_pdp_render_placeholder_imagem()) — aqui só a largura no grid.
 */

.vo-pdp-placeholder {
    width: 100%;
    box-sizing: border-box;
}

/* ---------- "Incluído neste plano" ---------- */

.vo-pdp-incluso {
    margin-top: 4px;
}

.vo-pdp-incluso-lista {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vo-pdp-incluso-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.vo-pdp-incluso-icone {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vo-pdp-incluso-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vo-pdp-incluso-titulo {
    font: 600 14.5px/1.3 'Hanken Grotesk', sans-serif;
}

.vo-pdp-incluso-descricao {
    font-size: 13px;
    line-height: 1.45;
}

/* ---------- Buybox (moldura) ---------- */

.vo-pdp-buybox {
    box-sizing: border-box;
    background: var(--e-global-color-vosrf0, #FFFFFF);
    border: 1px solid var(--e-global-color-vobrd1, #E6DFD2);
    border-radius: 14px;
    padding: 28px 26px;
    box-shadow: 0 6px 20px rgba(19, 45, 61, 0.06);
}

/* ---------- Chips de unidade ---------- */

.vo-pdp-unidades {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

.vo-pdp .vo-pdp-chip-unidade {
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--e-global-color-vobrd1, #E6DFD2);
    border-radius: 16px;
    background: var(--e-global-color-vosrf0, #FFFFFF);
    color: var(--e-global-color-text, #3F5563);
    font: 600 13px/1 'Hanken Grotesk', sans-serif;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.vo-pdp .vo-pdp-chip-unidade:hover {
    background: var(--e-global-color-vosbg2, #EFE9DF);
}

.vo-pdp .vo-pdp-chip-unidade[aria-pressed="true"] {
    border-color: var(--e-global-color-primary, #20759C);
    background: var(--e-global-color-primary, #20759C);
    color: var(--e-global-color-vosrf0, #FFFFFF);
}

.vo-pdp .vo-pdp-chip-unidade:focus-visible {
    outline: 3px solid var(--e-global-color-vop075, #E9F3F8);
    outline-offset: 2px;
}

/* ---------- Adicionais ---------- */

.vo-pdp-adicionais {
    margin: 18px 0;
}

.vo-pdp-selo-estimativa {
    display: inline-block;
    margin: 0 0 10px;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--e-global-color-vogd02, #F6EDDA);
    color: var(--e-global-color-accent, #B07D2B);
    font: 700 10.5px/1.3 'Hanken Grotesk', sans-serif;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.vo-pdp-adicional-opcao {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    padding: 10px 14px;
    border: 1px solid var(--e-global-color-vobrd1, #E6DFD2);
    border-radius: 10px;
    color: var(--e-global-color-text, #3F5563);
    font: 500 13.5px/1.4 'Hanken Grotesk', sans-serif;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.vo-pdp-adicional-opcao:hover {
    border-color: var(--e-global-color-primary, #20759C);
}

.vo-pdp-adicional-opcao--ativa {
    border-color: var(--e-global-color-primary, #20759C);
    background: var(--e-global-color-vop075, #E9F3F8);
}

.vo-pdp-adicional-opcao input[type="radio"] {
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--e-global-color-primary, #20759C);
}

.vo-pdp-adicional-preco {
    margin-left: auto;
    color: var(--e-global-color-secondary, #132D3D);
    font-weight: 700;
    white-space: nowrap;
}

.vo-pdp-adicional-nota {
    margin: 8px 0 0;
    color: var(--e-global-color-vomute, #8A8D98);
    font-size: 11.5px;
    font-style: italic;
}

.vo-pdp-adicionais--indisponivel p {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--e-global-color-vosbg2, #EFE9DF);
    color: var(--e-global-color-text, #3F5563);
    font-size: 13px;
    line-height: 1.5;
}

.vo-pdp-adicionais--indisponivel a {
    color: var(--e-global-color-primary, #20759C);
    font-weight: 600;
}

/* ---------- Total ---------- */

.vo-pdp-total {
    margin: 18px 0 10px;
    color: var(--e-global-color-secondary, #132D3D);
    font: 700 18px 'Hanken Grotesk', sans-serif;
}

/* ---------- CTA ----------
 * Mesma armadilha de especificidade do `.vo-ct-card a.vo-ct-cta` acima (runbook #35):
 * `.elementor-kit-N a{color}` do kit tem especificidade 0-1-1. Duas classes no
 * seletor (`.vo-pdp-col-buybox` + `.vo-pdp-cta`) vencem sem precisar de `!important`.
 */

.vo-pdp-col-buybox a.vo-pdp-cta {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 4px 0 12px;
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    background: var(--e-global-color-primary, #20759C);
    color: var(--e-global-color-vosrf0, #FFFFFF);
    font: 700 15.5px/1.3 'Hanken Grotesk', sans-serif;
    text-align: center;
    text-decoration: none;
    transition: background .18s ease;
}

.vo-pdp-col-buybox a.vo-pdp-cta:hover {
    background: var(--e-global-color-vop700, #1A5F80);
    color: var(--e-global-color-vosrf0, #FFFFFF);
}

.vo-pdp-col-buybox a.vo-pdp-cta:focus-visible {
    outline: 3px solid var(--e-global-color-vop075, #E9F3F8);
    outline-offset: 2px;
}

/* ---------- FAQ ---------- */

.vo-pdp-faq {
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--e-global-color-vobrd1, #E6DFD2);
}

.vo-pdp-faq-lista {
    max-width: 720px;
}

.vo-pdp-faq-item:last-child {
    border-bottom: none;
}

.vo-pdp-faq-item summary {
    outline: none;
}

.vo-pdp-faq-item summary:focus-visible {
    outline: 3px solid var(--e-global-color-vop075, #E9F3F8);
    outline-offset: 2px;
}

/* ---------- Mobile (PDP) ---------- */

@media (max-width: 767px) {
    .vo-pdp {
        padding: 20px 16px 48px;
    }

    .vo-pdp-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .vo-pdp-col-buybox {
        position: static;
        top: auto;
    }

    .vo-pdp-buybox {
        padding: 22px 18px;
    }
}