/* ============================================================================
   TELAS DO FORMANDO — o mesmo estilo do dashboard (ago/2026): DM Sans no corpo,
   Space Mono nos títulos, borda preta, sombra dura, vermelho SuperA só na ação
   principal, uma ação por tela. Carregado DEPOIS de theme.css em gallery,
   checkout, cart, minha-area, download, album-builder, editor e privacidade.
   É uma camada por cima: as páginas mantêm a lógica; aqui só muda a casca.
   ========================================================================== */

/* Títulos: a fonte de destaque do tema (Space Mono), como no Painel */
h1, .hero h1, .sample-hero h1, .promo-head h2, .panel h2, .modal h2, .paid-ok h2, .pb-head h2 {
  font-family: var(--font-serif, 'Space Mono', monospace) !important;
  font-weight: 700; letter-spacing: -0.02em;
}
.hero h1 em { color: var(--primary-color); }
.hero h1 em::after { display: none; }        /* sem o "traço à mão" */
.hero p, .sample-hero p, .promo-head p { font-weight: 400; }

/* Topo: logo + turma, filete preto */
.header, .topbar { border-bottom: 1px solid var(--border) !important; height: 56px !important; background: var(--surface-0); box-shadow: var(--shadow-xs); }
.logo { font-weight: 800; }
.logo .f { font-weight: 800; }

/* Passos da jornada (selfie → suas fotos → ofertas → pagamento) */
.jsteps { display: flex; gap: 6px; padding: 10px 16px 0; max-width: 720px; margin: 0 auto; }
.jsteps i { flex: 1; height: 4px; background: #ddd; display: block; }
.jsteps i.on { background: var(--primary-color); }
.jsteps-lbl { display: flex; justify-content: space-between; max-width: 720px; margin: 4px auto 0; padding: 0 16px; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-color-secondary); }
.jsteps-lbl b { color: var(--text-color); }

/* Selos e etiquetas: quadrados, sem pílula */
.hero-eyebrow, .sample-hero .campaign, .promo-head .campaign, .promo-card .ptag {
  border-radius: 999px !important; background: #000 !important; color: #fff !important; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .66rem; padding: 4px 10px;
}
.promo-card .ptag { top: -13px; left: 16px; transform: none; }

/* Cartões: borda preta, sombra dura, sem raio */
.hero, .promo-card, .panel, .card, .modal, .results-band, .avulsa-band, .purchases-banner, .pb-item, .upsell-box, .pix-result, .select-banner, .notice, .pay-method, .event-block {
  border-radius: var(--radius-card) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-card) !important; background: var(--surface-0);
}
.hero { box-shadow: var(--shadow-lg) !important; }
.promo-card.hi { border: 2px solid var(--primary-color) !important; transform: none !important; box-shadow: var(--shadow-lg) !important; }
.promo-card.sold-out { opacity: .7; }
.promo-card .btn { margin-top: auto; }
.results-band { color: var(--text-color); background: hsl(0 60% 98.3%); }
.results-band.dl { background: rgba(21,128,61,.08); }
.pay-method.selected { background: #000; color: #fff; }
.pay-method { box-shadow: none !important; border-width: 1.5px !important; }
.modal { box-shadow: var(--shadow-lg) !important; text-align: left; }
.modal h2 { text-align: left; }

/* Números em destaque: fundo rosado discreto, como os tiles do painel */
.pb-item, .upsell-box, .select-banner { background: hsl(0 60% 98.3%); }

/* Fotos: quadradas, com borda fina */
.photo, .sm-item, .dc-item, .free-item, .dl-item, .thumbs img { border-radius: 6px !important; overflow: hidden; }
.sm-item, .photo, .free-item, .dl-item { border: 1px solid var(--border); }
.photo.selected { outline: 3px solid var(--primary-color); outline-offset: 1px; }
.photo .check { border-radius: 999px; }

/* Campos: 44px de toque, borda preta */
.lead-input, .input, input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  border: 1px solid var(--border) !important; border-radius: var(--radius-button) !important; min-height: 44px; background: var(--surface-0); font-family: inherit;
}
.lead-lbl, label.muted { font-weight: 700; font-size: .78rem; color: var(--text-color); }
.consent { font-size: .82rem; }
.consent input { width: 18px; height: 18px; accent-color: #000; }

/* Filtros/segmentos: botões colados com uma borda só */
.buy-mode .seg-box { border-radius: 8px !important; overflow: hidden; border: 1px solid var(--border) !important; padding: 0 !important; gap: 0 !important; background: var(--surface-0) !important; }
.buy-mode .bm { border-radius: 0 !important; border-right: 1px solid var(--border); box-shadow: none !important; }
.buy-mode .bm:last-child { border-right: none; }
.buy-mode .bm.on { background: #000 !important; color: #fff !important; }
.g-fchip, .g-jchip, .tz-chip { border-radius: 999px; border: 1px solid var(--border); }
.g-fchip.on { background: #000; color: #fff; }

/* Barra de baixo (compra / download): a ÚNICA ação principal da tela */
.purchase-bar { background: var(--surface-0) !important; color: var(--text-color) !important; border-top: 1px solid var(--border); box-shadow: 0 -1px 2px hsl(0 0% 0% / 0.09); height: auto !important; min-height: 72px; padding: 10px 16px; }
.purchase-bar .count { font-weight: 500; }
.purchase-bar .total { font-family: var(--font-mono, monospace); font-weight: 700; }
.purchase-bar .btn-primary { min-height: 44px; }

/* Link discreto para avulsas na tela de ofertas: texto + link, sem preço */
.offers-avulsa { font-size: .9rem; color: var(--text-color-secondary); }
.offers-avulsa button { color: var(--primary-color); font-weight: 700; text-decoration: underline; padding: 8px 4px; min-height: 44px; }

/* Botão "voltar" (ofertas → amostra) no vocabulário do tema */
.btn-back { border: 1px solid var(--border) !important; border-radius: var(--radius-button) !important; box-shadow: var(--shadow-xs); background: var(--surface-0); }

/* Ajuda discreta "?" (mesma do dashboard) */
.help { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--surface-300); color: var(--text-color-secondary); font-size: .68rem; font-weight: 700; margin-left: 6px; vertical-align: middle; cursor: help; position: relative; }
.help::after { content: attr(data-tip); position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 280px; background: #000; color: #fff; font-size: .74rem; font-weight: 400; line-height: 1.4; padding: 8px 10px; white-space: normal; text-align: left; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 30; }
.help:hover::after, .help:focus::after { opacity: 1; }

/* Álbum: cards do configurador e miniaturas do editor */
.addon, .opt, .o-card, .option, .page-thumb, .pg { border-radius: 8px !important; border: 1px solid var(--border); }
.addon.selected, .opt.selected, .o-card.selected, .option.selected { background: #000; color: #fff; }