/* ══════════════════════════════════════════════════════════════════════════
   OFERTAS — Conceito OAB
   Grade de produtos + quadro comparativo
   Usa os tokens definidos em :root no style.css principal
   (--gold, --gold-deep, --gold-soft, --foreground, --muted-foreground,
   --card, --hairline, --shadow-card, --shadow-gold, --shadow-soft, --ease-premium)

   Estados da grade (controlados via atributo no <div data-ofertas-grid>,
   aplicado por ofertas.js):
     - sem atributo / [data-state="expanded"]  → todos os 5 cards, grid atual
     - [data-state="collapsed"]                → 3 cards, Full Pack central e maior
   Sem JS (ou enquanto o JS ainda não rodou), a grade renderiza como "expanded"
   por padrão — ninguém fica sem ver os planos.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Section wrap ───────────────────────────────────────────────────────── */
.ofertas-section {
    position: relative;
    overflow: hidden;
}

.ofertas-wrap {
    position: relative;
    z-index: 1;
}

.ofertas-header {
    text-align: center;
    max-width: 40rem;
    margin-inline: auto;
}

.ofertas-h2 {
    margin-top: 0.75rem;
    font-size: clamp(2rem, 4.5vw, 2.75rem);
}

.offer-divider {
    margin-inline: auto;
}

.ofertas-sub {
    margin-top: 1rem;
    font-size: 1.05rem;
    line-height: 1.65;
}

/* ── Grade de cards ─────────────────────────────────────────────────────── */
.ofertas-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3.5rem;
    align-items: stretch;
}

/* Cards ocultados pela regra de cliques (estado colapsado).
   data-oferta-hidden é aplicado pelo ofertas.js nos 2 cards não-selecionados;
   o Full Pack nunca recebe esse atributo. */
.oferta-card[data-oferta-hidden] {
    display: none;
}

.oferta-card {
    --oferta-card-pad-x: 1.75rem;
    position: relative;
    background: var(--card);
    border: 1px solid var(--hairline);
    border-radius: 1.25rem;
    box-shadow: var(--shadow-card);
    padding: 2rem var(--oferta-card-pad-x);
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    transition:
        transform 0.5s var(--ease-premium),
        border-color 0.5s var(--ease-premium),
        box-shadow 0.5s var(--ease-premium);
}

/* ocupa o espaço disponível e empurra o botão para a base do card,
   alinhando todos os botões da grade na mesma linha horizontal */
.oferta-card-top {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.oferta-card:hover {
    transform: translateY(-4px);
    border-color: oklch(0.7 0.16 78 / 0.4);
    box-shadow: var(--shadow-soft);
}

.oferta-card--destaque {
    border-color: var(--gold);
    box-shadow: var(--shadow-gold);
    background: linear-gradient(180deg, oklch(0.7 0.16 78 / 0.05), var(--card) 30%);
}

.oferta-card--destaque:hover {
    transform: translateY(-6px);
}

.oferta-card-badge {
    position: absolute;
    top: -0.9rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--gold);
    color: var(--noir);
    border-radius: 9999px;
    padding: 0.4rem 0.9rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 10px 24px -8px oklch(0.7 0.16 78 / 0.6);
}

.oferta-card-tier {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--gold-deepest);
    margin-top: 0.5rem;
    min-height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.oferta-card-nome {
    margin-top: 0.5rem;
    font-size: 1.4rem;
    line-height: 1.25;
    min-height: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oferta-card-pacote-wrap {
    margin-top: 0.55rem;
    margin-inline: calc(var(--oferta-card-pad-x) * -1);
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oferta-card-pacote {
    margin: 0;
    width: 100%;
    padding: 0.46rem 0.85rem;
    background: linear-gradient(100deg, oklch(0.9 0.09 90), oklch(0.84 0.16 83) 45%, oklch(0.78 0.15 75));
    color: var(--noir);
    border-top: 1px solid oklch(0.7 0.16 78 / 0.4);
    border-bottom: 1px solid oklch(0.66 0.14 72 / 0.42);
    box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.35), inset 0 -1px 0 oklch(0.18 0.012 60 / 0.06);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
}

.oferta-card-resumo-list {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0;
    text-align: left;
    min-height: 5.9rem;
}

.oferta-card-resumo-item {
    display: grid;
    grid-template-columns: 0.95rem 1fr;
    align-items: start;
    gap: 0.45rem;
    font-size: 0.78rem;
    line-height: 1.35;
    padding: 0.38rem 0;
}

.oferta-card-resumo-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.05rem;
    color: var(--gold-deepest);
}

.oferta-card-resumo-item + .oferta-card-resumo-item {
    border-top: 1px solid var(--hairline);
}

.oferta-card-pricing-block {
    margin-top: auto;
}

.oferta-card-preco {
    margin-top: 1.5rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35rem;
}

.oferta-card-preco-currency {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--muted-foreground);
}

.oferta-card-preco-value {
    font-size: 2.1rem;
    line-height: 1;
    font-weight: 700;
    color: var(--gold-deepest);
}

.oferta-card-preco-avista {
    margin-top: 0.35rem;
    font-size: 0.8rem;
}

.oferta-card-btn {
    margin-top: 1.75rem;
}

/* ── Countdown dentro do card Full Pack ──────────────────────────────────────
   Versão compacta de uma linha (não usa mais .countdown-unit em caixas,
   que ocupava muita altura). O texto "1º lote expira em Xd Yh Zmin Wseg"
   fica numa única linha; ofertas.js controla quais unidades (dias/horas/
   minutos/segundos) ficam visíveis via [data-cd-unit], mostrando só a mais
   relevante quando a grade está expandida (5 cards) — mais sutil — e todas
   quando está colapsada (3 cards, card maior, há espaço de sobra). */
.oferta-card-countdown-wrap {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--hairline);
    min-height: 4.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oferta-card-countdown-wrap--placeholder {
    border-top-color: transparent;
}

.oferta-card-countdown-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--gold-deepest);
}

.oferta-card-countdown-compact svg {
    flex-shrink: 0;
    width: 0.9rem;
    height: 0.9rem;
}

.oferta-card-countdown-text {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--muted-foreground);
}

.oferta-cd-unit {
    display: none;
    white-space: nowrap;
}

.oferta-cd-unit strong {
    color: var(--foreground);
    font-weight: 600;
}

/* Grade EXPANDED (5 cards): mostra só a unidade mais relevante do prazo —
   dias enquanto houver dias, senão horas, senão minutos, senão segundos.
   ofertas.js seta [data-cd-focus] no wrap da grade com o nome da unidade. */
[data-ofertas-grid][data-cd-focus='days'] .oferta-cd-unit[data-cd-unit='days'],
[data-ofertas-grid][data-cd-focus='hours'] .oferta-cd-unit[data-cd-unit='hours'],
[data-ofertas-grid][data-cd-focus='minutes'] .oferta-cd-unit[data-cd-unit='minutes'],
[data-ofertas-grid][data-cd-focus='seconds'] .oferta-cd-unit[data-cd-unit='seconds'] {
    display: inline;
}

/* Grade COLLAPSED (3 cards): card Full Pack tem mais espaço — mostra o
   prazo completo (todas as unidades) numa única linha compacta. */
.ofertas-grid[data-state='collapsed'] .oferta-cd-unit {
    display: inline;
}

/* ── Botão "Mostrar mais planos" ────────────────────────────────────────── */
.ofertas-toggle-wrap {
    margin-top: 2.5rem;
    display: flex;
    justify-content: center;
}

.ofertas-toggle-btn {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.75rem;
}

.ofertas-toggle-btn svg {
    transition: transform 0.4s var(--ease-premium);
}

.ofertas-toggle-btn[data-expanded] svg {
    transform: rotate(45deg);
}

/* ── Quadro comparativo ─────────────────────────────────────────────────── */
.ofertas-comparativo-wrap {
    margin-top: 5rem;
}

.ofertas-comparativo-header {
    text-align: center;
    max-width: 34rem;
    margin-inline: auto;
}

.ofertas-comparativo-h3 {
    margin-top: 0.5rem;
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.comp-table-scroll {
    margin-top: 2.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 1.25rem;
    border: 1px solid var(--hairline);
    box-shadow: var(--shadow-card);
    background: var(--card);
    /* contém o conteúdo (e o scroll, quando existir) dentro do próprio card —
       nunca deixa a tabela vazar a largura da página */
    max-width: 100%;
}

.comp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.comp-table thead th {
    vertical-align: bottom;
    padding: 1.5rem 1rem 1.25rem;
    text-align: center;
    border-bottom: 1px solid var(--hairline);
    background: var(--secondary);
}

.comp-table-feature-col {
    text-align: left;
    padding: 0.9rem 1.25rem;
    vertical-align: middle;
}

.comp-table thead .comp-table-feature-col {
    background: var(--card);
    border-bottom: 1px solid var(--hairline);
}

.comp-table-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--gold);
    color: var(--noir);
    border-radius: 9999px;
    padding: 0.25rem 0.6rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.comp-table-tier {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-deepest);
}

.comp-table-nome {
    display: block;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 1.05rem;
    line-height: 1.3;
    color: var(--foreground);
    margin-top: 0.3rem;
    min-height: 2.6rem;
}

.comp-table-preco {
    display: block;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 1.25rem;
    color: var(--gold-deepest);
    margin-top: 0.4rem;
}

.comp-table-col--destaque {
    background: oklch(0.7 0.16 78 / 0.06);
}

.comp-table thead .comp-table-col--destaque {
    background: oklch(0.7 0.16 78 / 0.1);
}

.comp-table tbody tr {
    border-bottom: 1px solid var(--hairline);
}

.comp-table tbody tr:last-child {
    border-bottom: none;
}

.comp-table tbody td {
    text-align: center;
    padding: 0.9rem 1rem;
}

.comp-feature-label {
    display: block;
    font-weight: 500;
    color: var(--foreground);
    font-size: 0.85rem;
    line-height: 1.4;
}

.comp-feature-desc {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: var(--muted-foreground);
    line-height: 1.4;
}

.comp-check {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.comp-check--yes {
    background: var(--gold);
    color: var(--noir);
}

.comp-check--no {
    background: var(--muted);
    color: var(--muted-foreground);
}

.comp-table tfoot td {
    padding: 1.25rem 1rem;
    vertical-align: middle;
}

.comp-table tfoot th {
    padding: 1.25rem 1.25rem;
}

.comp-table-btn {
    width: 100%;
    min-width: 9rem;
    padding: 0.75rem 1rem;
    font-size: 0.62rem;
}

.ofertas-comparativo-footnote {
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
}

/* ════════════════════════════════════════════════════════════════════════════
   TABELA COMPARATIVA — MOBILE (< 769px)
   Mantém o comportamento de scroll horizontal de sempre, e inverte a ordem
   visual das colunas (Full Pack primeiro) já que aqui o usuário rola da
   esquerda pra direita para comparar — faz sentido começar pelo mais
   completo. 'order' não tem efeito em display:table-cell em nenhum browser,
   então as linhas viram flex containers só neste breakpoint — cada th/td
   continua com largura fixa (efeito de coluna preservado), só a ordem muda.
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* 220px (recurso) + 5 × 130px (produto) = 870px de conteúdo real da
       tabela — cabe com folga dentro do min-width abaixo, sem o botão
       (min-width: 9rem = 144px + padding da célula) estourar a coluna. */
    .comp-table {
        min-width: 870px;
    }

    .comp-table-feature-col {
        min-width: 220px;
        max-width: 280px;
    }

    .comp-table thead tr,
    .comp-table tbody tr,
    .comp-table tfoot tr {
        display: flex;
    }

    .comp-table thead th,
    .comp-table tbody td,
    .comp-table tbody th,
    .comp-table tfoot td,
    .comp-table tfoot th {
        flex: 0 0 auto;
        width: 130px;
    }

    .comp-table-feature-col {
        width: 220px;
        flex: 0 0 220px;
        order: -1;
    }

    /* Ordem visual no mobile (rolando da esquerda pra direita):
       1) coluna de recurso (sempre fixa primeiro, order: -1)
       2) Full Pack — mais completo primeiro (order: 0)
       3) demais produtos, mantendo a ordem hierárquica entre si (order: 1) */
    .comp-table thead th:not(.comp-table-feature-col):not(.comp-table-col--destaque),
    .comp-table tbody td:not(.comp-table-feature-col):not(.comp-table-col--destaque),
    .comp-table tfoot td:not(.comp-table-feature-col):not(.comp-table-col--destaque) {
        order: 1;
    }

    .comp-table-col--destaque {
        order: 0;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   TABELA COMPARATIVA — DESKTOP (≥ 769px)
   Sem scroll: table-layout fixed com larguras percentuais garante que a
   tabela sempre cabe na largura do container, encolhendo proporcionalmente
   em vez de transbordar. Ordem volta a ser a hierárquica normal do DOM.
   ════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
    .comp-table-scroll {
        overflow-x: visible;
    }

    .comp-table {
        table-layout: fixed;
    }

    .comp-table-feature-col {
        width: 24%;
    }

    .comp-table thead th:not(.comp-table-feature-col),
    .comp-table tbody td:not(.comp-table-feature-col),
    .comp-table tfoot td:not(.comp-table-feature-col) {
        width: 15.2%;
    }

    .comp-table-nome {
        font-size: clamp(0.85rem, 1.1vw, 1.05rem);
    }

    .comp-table-btn {
        min-width: 0;
        font-size: clamp(0.55rem, 0.85vw, 0.62rem);
        padding: 0.75rem 0.5rem;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   BREAKPOINTS — estado EXPANDED (padrão / todos os 5 cards)
   ════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 640px) {
    .ofertas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .ofertas-grid:not([data-state='collapsed']) {
        grid-template-columns: repeat(var(--ofertas-expanded-cols, 5), minmax(0, 1fr));
        gap: 1.25rem;
    }
    .oferta-card {
        --oferta-card-pad-x: 1.25rem;
        padding: 1.75rem var(--oferta-card-pad-x);
    }
    .oferta-card-nome {
        font-size: 1.15rem;
        min-height: 3rem;
    }
    .oferta-card-preco-value {
        font-size: 1.85rem;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   ESTADO COLLAPSED — 3 cards, Full Pack maior/destacado
   Ativado via [data-ofertas-grid][data-state="collapsed"] pelo ofertas.js.
   A ordem visual continua 100% hierárquica (vem da ordem real do DOM,
   ver $ofertaProdutos em ofertas-snippet.php) — o Full Pack é sempre um dos
   3 cards exibidos e cai naturalmente na última posição, sem precisar de
   'order' em CSS. Aqui só ajustamos tamanho/elevação para reforçar o destaque.
   ════════════════════════════════════════════════════════════════════════════ */

.ofertas-grid[data-state='collapsed'] {
    grid-template-columns: 1fr;
    max-width: 26rem;
    margin-inline: auto;
}

@media (min-width: 640px) {
    .ofertas-grid[data-state='collapsed'] {
        grid-template-columns: repeat(3, 1fr);
        max-width: none;
        align-items: center;
    }
    .ofertas-grid[data-state='collapsed'] .oferta-card--destaque {
        --oferta-card-pad-x: 2rem;
        padding: 2.5rem 2rem;
        transform: scale(1.06);
        z-index: 1;
    }
    .ofertas-grid[data-state='collapsed'] .oferta-card--destaque:hover {
        transform: scale(1.06) translateY(-6px);
    }
    .ofertas-grid[data-state='collapsed'] .oferta-card:not(.oferta-card--destaque) {
        opacity: 0.96;
    }
}

@media (min-width: 1024px) {
    /* No estado colapsado o grid nunca é de 5 colunas — sobrescreve a regra
       de breakpoint do estado expanded acima */
    .ofertas-grid[data-state='collapsed'] {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    .ofertas-grid[data-state='collapsed'] .oferta-card {
        --oferta-card-pad-x: 1.25rem;
        padding: 1.75rem var(--oferta-card-pad-x);
    }
    .ofertas-grid[data-state='collapsed'] .oferta-card--destaque {
        --oferta-card-pad-x: 2rem;
        padding: 2.5rem 2rem;
    }
    .ofertas-grid[data-state='collapsed'] .oferta-card-nome {
        font-size: 1.4rem;
        min-height: 3.5rem;
    }
    .ofertas-grid[data-state='collapsed'] .oferta-card-preco-value {
        font-size: 2.1rem;
    }
}