/*
 * ARQUIVO: public/assets/css/ticket.css
 * MÓDULO: Telas — o visual do TICKET MÉDIO (D320), num arquivo à parte para não mexer no site.css e no novo_visual.css
 *         (carregado em toda página, depois deles, pelo layout).
 * FAZ: - a caixinha do catálogo no pagamento da 1 série e das 3 séries (.caixinha-catalogo);
 *      - o catálogo primeiro na escolha do plano: o 1º maior e em destaque (.plano-destaque), os outros menores (.plano-menor);
 *        na série bloqueada do visitante, o selo e o "sai R$ X por série" do botão principal (.bloqueada-selo, .bloqueada-cada);
 *      - a subida com relógio logo depois de pagar (.subida-pronto — o resto vem do .relogio-subida de sempre).
 *      Só cores, letras e medidas do design system (tokens.css).
 * RECEBE: nada. DEVOLVE: nada (é lido pelo navegador).
 * DEPENDE: public/assets/css/tokens.css; resources/views/checkout/plano.php, resources/views/partes/(planos_compra,
 *          subida_pronto).php, resources/views/(catalogo_serie, indicacao_convite, teste_acabou).php.
 */

/* item 1: a caixinha DESMARCADA "Por só +R$ X leve TODAS as séries" */
.caixinha-catalogo { display: flex; align-items: flex-start; gap: var(--space-3); margin: 0 0 var(--space-3); padding: var(--space-3);
    border: 2px dashed var(--brand); border-radius: var(--radius-lg); background: var(--brand-soft); cursor: pointer; text-align: left; }
.caixinha-catalogo input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--brand); cursor: pointer; }
.caixinha-catalogo:has(input:checked) { border-style: solid; box-shadow: var(--shadow-brand); }
.caixinha-texto { display: flex; flex-direction: column; gap: 2px; font-size: .95rem; line-height: 1.3; color: var(--text-strong); }
.caixinha-texto strong { font-weight: var(--fw-bold); }
.caixinha-texto small { font-size: .78rem; color: var(--text-muted); }

/* item 2: o catálogo primeiro, maior; a 1 série e as 3 séries embaixo, menores */
.plano.plano-destaque { padding: 20px 14px 16px; margin-top: 14px; border: 2px solid var(--brand); background: var(--brand-soft); box-shadow: var(--shadow-brand); }
.plano-destaque .plano-icone { font-size: 2rem; }
.plano-destaque .plano-info strong { font-size: 1.1rem; }
.plano-destaque .plano-info span { color: var(--text-body); }
.plano-destaque .plano-preco { font-size: 1.4rem; }
.plano-destaque .plano-selo { font-size: .72rem; padding: 3px 10px; }
.plano.plano-menor { padding: 9px 14px; margin-bottom: 8px; }
.plano-menor .plano-icone { font-size: 1.15rem; }
.plano-menor .plano-info strong { font-size: .88rem; }
.plano-menor .plano-preco { font-size: .92rem; }
.bloqueada-botao.bloqueada-destaque { position: relative; padding: var(--space-4) var(--space-3); box-shadow: var(--shadow-brand); }
.bloqueada-destaque strong { font-size: 1.05rem; }
.bloqueada-botao span.bloqueada-selo { position: absolute; top: -10px; right: 12px; padding: 2px 10px; border-radius: var(--radius-full);
    background: var(--on-brand); color: var(--brand); opacity: 1; font-size: .7rem; font-weight: var(--fw-bold); }
.bloqueada-botao.bloqueada-menor { padding: var(--space-2) var(--space-3); }
.bloqueada-menor strong { font-size: .88rem; font-weight: var(--fw-semibold); }

/* item 3: a subida com relógio logo depois de pagar */
.subida-pronto { margin: var(--space-4) 0; text-align: center; }
.subida-pronto .relogio-subida-tempo { font-size: 2.6rem; }