/* ═══════════════════════════════════════════════════════════
   RIFA BABY — Estilos Modernos
   ═══════════════════════════════════════════════════════════ */

* {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── Navegação SPA ────────────────────────────────────── */
.page {
  animation: fadeSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.page.hidden { display: none !important; }

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Animação Float ───────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }

/* ── Hero Brand ───────────────────────────────────────── */
.hero-gradient-brand {
  background: linear-gradient(135deg, #be185d 0%, #9d174d 40%, #831843 80%, #500724 100%);
  position: relative;
  overflow: hidden;
}

/* ── Glass Card Brand ─────────────────────────────────── */
.glass-card-brand {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

/* ── Stats Cards ──────────────────────────────────────── */
.stat-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* ═══════════════════════════════════════════════════════════
   CARDS DOS PLANOS — portado do "Protótipo Seção de Planos v2"
   ───────────────────────────────────────────────────────────
   O protótipo é dark. O site abre CLARO e tem botão de dark
   mode, então cada cor que o protótipo fixou escuro virou uma
   variável: valor claro por padrão, valor do protótipo dentro
   de `.dark`. Sem isso o preço do Unitário e do Básico ficaria
   branco sobre branco (o .price-value do protótipo é #ffffff).

   O grid NÃO foi portado: o site já usa o grid do Tailwind e as
   quebras (640px / 1024px) são equivalentes às do protótipo
   (680px / 1040px).
   ═══════════════════════════════════════════════════════════ */
#packages-container {
  /* superfícies e texto */
  --plan-surface: #ffffff;
  --plan-text: #14171f;
  --plan-text-muted: #5b6472;
  /* Borda rosa: no tema claro o card branco sobre fundo slate-50 ficava
     sem definição e os planos "sumiam". Cinza de 10% não resolvia
     (1,1:1 contra a página). #db2777 dá 4,4:1 e ainda deixa o Plus
     (#ec4899, 1,5px) e o Premium (dourado) se destacarem. */
  --plan-border: #db2777;
  /* nome do plano: branco no dark, cinza-escuro no light (era text-gray-800 dark:text-white) */
  --plan-name: #1f2937;
  /* preço em rosa, como era no gradiente from-brand-500 to-brand-700 */
  --plan-price-from: #ec4899;
  --plan-price-to: #be185d;
  /* caixa de números */
  --plan-box-bg: #f8fafc;
  --plan-box-border: rgba(20, 23, 31, 0.08);
  --plan-box-text: #14171f;
  /* divisória sob o preço */
  --plan-divider: rgba(20, 23, 31, 0.08);
  /* botão */
  --plan-btn-border: rgba(20, 23, 31, 0.12);
  --plan-btn-color: #1f2937;
  --plan-btn-hover-bg: #fce7f3;
  --plan-btn-hover-border: #f9a8d4;
  --plan-btn-hover-color: #9d174d;
  /* sombras e hover */
  --plan-shadow-hover: 0 12px 28px rgba(20, 23, 31, 0.12);
  /* hover fecha o rosa da borda, para o card ganhar força ao passar o mouse */
  --plan-hover-border: #ec4899;
  /* seleção */
  /* seleção: rosa mais quente que a borda base, para o card escolhido
     não se confundir com um card normal */
  --plan-selected-border: #ec4899;
  --plan-selected-shadow: 0 0 0 4px rgba(219, 39, 119, 0.2), 0 16px 32px rgba(219, 39, 119, 0.15);
  --plan-selected-bg: linear-gradient(135deg, #fdf2f8, #fff);
  /* Plus: fundo neutro + detalhe rosa */
  --plan-plus-surface: #ffffff;
  --plan-plus-box-bg: rgba(236, 72, 153, 0.06);
  --plan-plus-box-border: rgba(236, 72, 153, 0.22);
  --plan-plus-rule-text: #9d174d;
  --plan-plus-clarification: #be185d;
  /* Premium: fundo neutro + detalhe dourado */
  --plan-premium-surface: #ffffff;
  --plan-premium-box-bg: rgba(180, 83, 9, 0.07);
  --plan-premium-box-text: #92400e;
  --plan-premium-title: #b45309;
  --plan-premium-desc: #475569;
  --plan-premium-hover-border: #b45309;
  --plan-premium-btn-bg: rgba(180, 83, 9, 0.04);
  --plan-premium-btn-border: rgba(180, 83, 9, 0.35);
  --plan-premium-btn-color: #92400e;
  --plan-premium-btn-hover-bg: rgba(180, 83, 9, 0.12);
  --plan-premium-btn-hover-border: #b45309;
  --plan-premium-btn-hover-color: #78350f;
  /* áureas */
  --plan-accent: #ec4899;
  /* O botão do Plus volta ao rosa do protótipo, que é o que estava
     bom. Aviso: branco sobre #ec4899 dá 3.5:1 e o WCAG pede 4.5:1
     para texto normal. Quem decide é o dono do site; o tom fechado
     #db2777 ficava em 4.6:1, se um dia quiser trocar. */
  --plan-accent-btn: #ec4899;
  --plan-accent-btn-hover: #db2777;
  --plan-accent-hover: #db2777;
  --plan-gold: #fbbf24;
  /* O dourado do texto precisa ser ESCURO no tema claro: #fcd34d
     sobre branco dá contraste 1.4 e some na tela. */
  --plan-gold-text: #92400e;
  --plan-gold-subtle: rgba(180, 83, 9, 0.09);
  /* dourado do Premium: o alpha 0,28 dava só 1,5:1 e o card sumia no claro */
  --plan-gold-border: #d97706;
}
.dark #packages-container {
  --plan-surface: #121829;
  --plan-text: #f8fafc;
  --plan-text-muted: #94a3b8;
  --plan-border: #222d47;
  --plan-name: #ffffff;
  /* pinks mais claros: o gradiente escuro do light não passaria em contraste no dark */
  --plan-price-from: #f472b6;
  --plan-price-to: #fbcfe8;
  --plan-box-bg: rgba(255, 255, 255, 0.04);
  --plan-box-border: rgba(255, 255, 255, 0.08);
  --plan-box-text: #ffffff;
  --plan-divider: rgba(255, 255, 255, 0.06);
  --plan-btn-border: var(--plan-border);
  --plan-btn-color: #f1f5f9;
  --plan-btn-hover-bg: #1c263d;
  --plan-btn-hover-border: #3b4e78;
  --plan-btn-hover-color: #ffffff;
  --plan-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.4);
  --plan-hover-border: #33446b;
  --plan-selected-border: #ec4899;
  --plan-selected-shadow: 0 0 0 4px rgba(236, 72, 153, 0.25), 0 16px 32px rgba(0, 0, 0, 0.4);
  --plan-selected-bg: linear-gradient(135deg, rgba(219, 39, 119, 0.2), rgba(219, 39, 119, 0.05));
  --plan-plus-surface: #141b2e;
  --plan-plus-box-bg: rgba(236, 72, 153, 0.1);
  --plan-plus-box-border: rgba(236, 72, 153, 0.28);
  --plan-plus-rule-text: #fdf2f8;
  --plan-plus-clarification: #f9a8d4;
  --plan-premium-surface: linear-gradient(180deg, #1b1626 0%, #131726 100%);
  --plan-premium-box-bg: rgba(251, 191, 36, 0.06);
  --plan-premium-box-text: #fcd34d;
  --plan-premium-title: #fcd34d;
  --plan-premium-desc: #e2e8f0;
  --plan-premium-hover-border: rgba(251, 191, 36, 0.5);
  --plan-premium-btn-bg: rgba(251, 191, 36, 0.05);
  --plan-premium-btn-border: rgba(251, 191, 36, 0.4);
  --plan-premium-btn-color: #fef08a;
  --plan-premium-btn-hover-bg: rgba(251, 191, 36, 0.15);
  --plan-premium-btn-hover-border: #fcd34d;
  --plan-premium-btn-hover-color: #ffffff;
  /* áureas: no dark o dourado pode ser claro, porque o fundo é escuro */
  --plan-accent: #ec4899;
  --plan-accent-btn: #ec4899;
  --plan-accent-btn-hover: #db2777;
  --plan-gold: #fbbf24;
  --plan-gold-text: #fcd34d;
  --plan-gold-subtle: rgba(251, 191, 36, 0.12);
  --plan-gold-border: rgba(251, 191, 36, 0.35);
}

/* ── Card base ───────────────────────────────────────────── */
/* Tamanhos reduzidos de propósito: a primeira versão do protótipo
   ficou grande demais na tela real. O preço desceu de 2.75rem (44px)
   para 1.875rem (30px), que era o `text-3xl` do card de 4 camadas —
   o tamanho que ficou "quase ideal". A caixa de números continua
   sendo o segundo elemento mais forte do card, só que menor. */
.plan-card {
  background: var(--plan-surface);
  border: 1px solid var(--plan-border);
  border-radius: 15px;
  padding: 1.4375rem 1.375rem 1.375rem;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.3s ease;
}
.plan-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--plan-shadow-hover);
  border-color: var(--plan-hover-border);
}

/* ── Cabeçalho: ícone + nome ─────────────────────────────── */
.plan-header {
  margin-bottom: 0.8rem;
}
.plan-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 20px;
  gap: 0.45rem;
}
.plan-icon-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.plan-icon {
  font-size: 1.25rem;
  line-height: 1;
}
.plan-name {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--plan-name);
  margin: 0;
  overflow-wrap: anywhere;
}

/* ── Preço ───────────────────────────────────────────────── */
.plan-price-block {
  padding: 0.1rem 0 0.8rem;
  margin-bottom: 0.8rem;
  border-bottom: 1px solid var(--plan-divider);
}
.price-row {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.price-currency {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--plan-price-to);
}
.price-value {
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--plan-price-to);
  background-image: linear-gradient(to right, var(--plan-price-from), var(--plan-price-to));
  -webkit-background-clip: text;
  background-clip: text;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .price-value {
    background-image: none;
    color: var(--plan-price-to);
  }
}

/* ── Caixa de números (2º elemento mais forte) ───────────── */
.plan-tickets-highlight {
  background: var(--plan-box-bg);
  border: 1px solid var(--plan-box-border);
  border-radius: 13px;
  padding: 1.3rem 0.85rem;
  text-align: center;
  margin-bottom: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plan-tickets-qty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--plan-box-text);
  line-height: 1;
  white-space: nowrap;
}
.plan-tickets-num {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.plan-tickets-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0.9;
}
.plan-tickets-emoji {
  font-size: 1.375rem;
  line-height: 1;
}

/* ── Regra de prêmio ─────────────────────────────────────── */
.plan-prize-block {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 0.95rem;
  padding-top: 0.15rem;
}
.prize-main-rule {
  font-size: 0.85rem;
  font-weight: 600;
  color: #e2e8f0;
  line-height: 1.3;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
}
#packages-container .prize-main-rule {
  color: var(--plan-text);
}
.prize-clarification {
  font-size: 0.72rem;
  color: var(--plan-text-muted);
  line-height: 1.4;
  margin: 0;
}

/* ── Botão ───────────────────────────────────────────────── */
.btn-plan {
  width: 100%;
  padding: 0.65rem 0.925rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--plan-btn-border);
  background: transparent;
  color: var(--plan-btn-color);
  text-decoration: none;
}
.btn-plan:hover {
  background: var(--plan-btn-hover-bg);
  border-color: var(--plan-btn-hover-border);
  color: var(--plan-btn-hover-color);
}
.btn-plan:focus-visible {
  outline: 2px solid var(--plan-accent);
  outline-offset: 2px;
}

/* ── Plus: o único com destaque ──────────────────────────── */
.plan-card.plan-plus {
  background: var(--plan-plus-surface);
  border: 1.5px solid var(--plan-accent);
  box-shadow: 0 4px 20px rgba(236, 72, 153, 0.08);
}
.plan-card.plan-plus:hover {
  border-color: #f472b6;
  box-shadow: 0 8px 28px rgba(236, 72, 153, 0.16);
}
.plan-card.plan-plus .plan-tickets-highlight {
  background: var(--plan-plus-box-bg);
  border-color: var(--plan-plus-box-border);
}
/* A caixa do Plus NÃO usa mais cor própria: o usuário pediu o ticket 6
   igual ao 1 e ao 3. A caixa se diferencia só pelo fundo/borda rosados. */
.plan-card.plan-plus .prize-main-rule {
  color: var(--plan-plus-rule-text);
  font-weight: 700;
}
.plan-card.plan-plus .prize-clarification {
  color: var(--plan-plus-clarification);
}
.btn-plan.btn-plus-primary {
  background: var(--plan-accent-btn);
  border-color: var(--plan-accent-btn);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(236, 72, 153, 0.25);
}
.btn-plan.btn-plus-primary:hover {
  background: var(--plan-accent-btn-hover);
  border-color: var(--plan-accent-btn-hover);
  color: #ffffff;
}
/* Faixa "Melhor custo-benefício" no topo do Plus */
.plus-flag {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--plan-accent);
  color: #ffffff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.18rem 0.7rem;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
  z-index: 2;
  max-width: calc(100% - 1.25rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Premium: experiência, detalhe dourado ────────────────── */
.plan-card.plan-premium {
  background: var(--plan-premium-surface);
  border: 1px solid var(--plan-gold-border);
}
.plan-card.plan-premium:hover {
  border-color: var(--plan-premium-hover-border);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
.plan-card.plan-premium .plan-tickets-highlight {
  background: var(--plan-premium-box-bg);
  border-color: rgba(180, 83, 9, 0.22);
}
.dark .plan-card.plan-premium .plan-tickets-highlight {
  border-color: rgba(251, 191, 36, 0.22);
}
.plan-card.plan-premium .plan-tickets-qty {
  color: var(--plan-gold-text);
}
.plan-card.plan-premium .plan-name {
  color: var(--plan-gold-text);
}
.plan-card.plan-premium .price-value {
  color: var(--plan-gold-text);
}
.plan-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.premium-badge {
  background: var(--plan-gold-subtle);
  color: var(--plan-gold-text);
  border: 1px solid var(--plan-gold-border);
}
.btn-plan.btn-premium {
  border-color: var(--plan-premium-btn-border);
  color: var(--plan-premium-btn-color);
  background: var(--plan-premium-btn-bg);
}
.btn-plan.btn-premium:hover {
  background: var(--plan-premium-btn-hover-bg);
  border-color: var(--plan-premium-btn-hover-border);
  color: var(--plan-premium-btn-hover-color);
}
.premium-experience-box {
  background: var(--plan-premium-box-bg);
  border-left: 3px solid var(--plan-gold);
  padding: 0.5rem 0.6rem;
  border-radius: 0 8px 8px 0;
  margin-top: 0.3rem;
}
.premium-exp-title {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--plan-premium-title);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.premium-exp-desc {
  font-size: 0.72rem;
  color: var(--plan-premium-desc);
  margin: 0;
  line-height: 1.35;
}

/* ── Estados que o protótipo não tem, mas o site precisa ─── */
/* selecionado: o clique no card marca e leva para a seleção */
.plan-card.selected {
  border-color: var(--plan-selected-border);
  background: var(--plan-selected-bg);
  box-shadow: var(--plan-selected-shadow);
}
.plan-card.selected .plan-tickets-highlight {
  border-color: var(--plan-selected-border);
}
/* esgotado: só o Premium pode ficar assim */
.plan-card.package-card-soldout {
  opacity: 0.6;
  filter: grayscale(0.6);
  cursor: not-allowed;
}
.plan-card.package-card-soldout:hover {
  transform: none;
  box-shadow: none;
}
.btn-plan:disabled,
.btn-plan.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ── Infinity Pay — variante Premium ─────────────────── */
.premium-variant-btn {
  border-color: #e5e7eb;
  background: #fff;
  color: #374151;
  cursor: pointer;
}
.dark .premium-variant-btn {
  border-color: #374151;
  background: #111827;
  color: #d1d5db;
}
.premium-variant-btn:hover {
  border-color: #db2777;
  color: #db2777;
}
.premium-variant-btn.active {
  border-color: #db2777;
  background: #db2777;
  color: #fff;
}
.dark .premium-variant-btn.active {
  border-color: #ec4899;
  background: #be185d;
  color: #fff;
}

/* ── Prize Cards ──────────────────────────────────────── */
.prize-card {
  flex: 0 0 auto;
  width: 16rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 640px) {
  .prize-card {
    width: 18rem;
  }
}
.prize-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(219,39,119,0.2);
}
.prize-image-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fdf2f8, #fce7f3);
}
.dark .prize-image-wrap {
  background: linear-gradient(135deg, #500724, #831843);
}
.prize-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.prize-card:hover .prize-image {
  transform: scale(1.05);
}
.prize-image-hidden {
  display: none;
}
.prize-fallback-icon {
  position: absolute;
  font-size: 3rem;
  opacity: 0.5;
}

/* ── Grid de Números ──────────────────────────────────── */
.tickets-grid-modern {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
@media (min-width: 640px) {
  .tickets-grid-modern { grid-template-columns: repeat(10, 1fr); gap: 10px; }
}
@media (min-width: 1024px) {
  .tickets-grid-modern { grid-template-columns: repeat(15, 1fr); gap: 10px; }
}
@media (min-width: 1280px) {
  .tickets-grid-modern { grid-template-columns: repeat(20, 1fr); gap: 10px; }
}

/* ── Contadores: skeleton de carregamento ──────────────── */
/* CSS puro: animate-pulse existiria no Tailwind purgado, mas usamos uma
   classe própria para não depender do arquivo compilado. */
.counter-skeleton {
  display: inline-block;
  min-width: 1.4em;
  height: 0.9em;
  vertical-align: middle;
  border-radius: 6px;
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: counterSkeleton 1.2s ease-in-out infinite;
}
.dark .counter-skeleton {
  background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
  background-size: 200% 100%;
}
@keyframes counterSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Indicador "Status" dos contadores ───────────────────
   absolute: não ocupa altura, então os 3 blocos ficam exatamente
   onde estavam. Fica no topo da faixa, acima da linha do botão
   "Garantir meu número" (que é centralizado), para não cobri-lo.
   some (is-ready) quando os números aparecem — eles já dizem o status. */
.counters-status {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #6b7280;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  white-space: nowrap;
  max-width: calc(100% - 2rem);
  pointer-events: none;
}
.counters-status.is-ready { display: none; }
.dark .counters-status {
  color: #9ca3af;
  background: rgba(17,24,39,0.9);
}
.counters-status-dot {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #f59e0b;
  animation: statusPulse 1.4s ease-in-out infinite;
}
.counters-status.is-error {
  color: #b91c1c;
}
.dark .counters-status.is-error {
  color: #f87171;
}
.counters-status.is-error .counters-status-dot {
  background: #ef4444;
  animation: none;
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

/* ── Botões de Número ─────────────────────────────────── */
.ticket-btn-modern {
  position: relative; /* âncora do ✓ (::after) e do .ticket-expiry-badge */
  aspect-ratio: 1;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid #e5e7eb;
  background: #fff;
  color: #374151;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}
.dark .ticket-btn-modern {
  border-color: #374151;
  background: #1f2937;
  color: #d1d5db;
}
.ticket-btn-modern:hover:not(.status-reserved):not(.status-sold) {
  border-color: #f472b6;
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 8px 20px rgba(219,39,119,0.2);
}
.ticket-btn-modern:active:not(.status-reserved):not(.status-sold) {
  transform: scale(0.96);
}
.ticket-btn-modern.status-available {
  background: #fff; border-color: #d1d5db; color: #374151;
}
.dark .ticket-btn-modern.status-available {
  background: #1f2937; border-color: #374151; color: #d1d5db;
}
.ticket-btn-modern.status-selected {
  background: linear-gradient(135deg, #ec4899, #db2777);
  border-color: #be185d;
  color: #fff;
  box-shadow: 0 8px 20px rgba(219,39,119,0.4);
  transform: translateY(-2px) scale(1.08);
}
.ticket-btn-modern.status-selected::after {
  content: '✓';
  position: absolute;
  top: 1px; right: 1px;
  font-size: 0.55rem;
  background: #fff; color: #db2777;
  width: 14px; height: 14px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900;
}
.ticket-btn-modern.status-reserved {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  border-color: #f59e0b; color: #78350f;
  cursor: not-allowed; opacity: 0.9;
}
.ticket-btn-modern.status-sold {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-color: #dc2626; color: #fff;
  cursor: not-allowed; opacity: 0.9;
}

/* Badge "expira Xh" nos números reservados.
   Renderizado por ui.js (renderTicketGrid / refreshTicketGrid) e atualizado
   a cada 1s por startExpiryTicker. CSS puro de propósito: a classe não
   existe no tailwind.css pré-compilado e purgado. */
.ticket-expiry-badge {
  position: absolute;
  left: 50%;
  bottom: 1px;
  transform: translateX(-50%);
  z-index: 2;
  padding: 1px 4px;
  border-radius: 9999px;
  background: rgba(120, 53, 15, 0.92);
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  max-width: 100%;
  overflow: hidden;
}

@keyframes selectPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1.08); }
}
.ticket-btn-modern.just-selected {
  animation: selectPop 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ── Barra de Seleção ─────────────────────────────────── */
.selection-bar-modern {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 2px solid #e5e7eb;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.1);
  z-index: 40;
  animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.dark .selection-bar-modern {
  background: rgba(17,24,39,0.98);
  border-top-color: #374151;
}
.selection-bar-modern.hidden { display: none !important; }

/* Correção: no mobile a bottom-nav (.bottom-nav, bottom:0) ficava por cima da
   barra de seleção (ambas fixed, ambas z-index 40) e cobria o botão Continuar.
   Em telas <=768px a barra sobe acima da nav. */
@media (max-width: 768px) {
  .selection-bar-modern {
    bottom: 5.5rem;
  }
  .selection-bar-modern .btn-continue,
  .selection-bar-modern button {
    z-index: 1;
  }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ── Grade Administrativa (aba Reservas) ──────────────── */
.admin-grade-btn { cursor: pointer !important; }
.admin-grade-btn.status-reserved,
.admin-grade-btn.status-sold {
  cursor: pointer !important;
  opacity: 1;
}
.admin-grade-btn:hover:not(.admin-grade-selected) {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.admin-grade-btn.admin-grade-selected {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.35), 0 10px 24px rgba(59,130,246,0.35);
  transform: translateY(-2px) scale(1.08);
  z-index: 2;
}

/* ── Formulário ───────────────────────────────────────── */
input.error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 4px rgba(239,68,68,0.12);
  animation: shake 0.4s ease-in-out;
}
input.valid {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 4px rgba(16,185,129,0.08);
}
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ── Payment Tabs ─────────────────────────────────────── */
.payment-tab.active {
  background: #db2777 !important;
  color: #fff !important;
}

/* ── Toast ────────────────────────────────────────────── */
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* ── Tags do Checkout ─────────────────────────────────── */
.ticket-tag-modern {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #fce7f3, #fbcfe8);
  color: #9d174d; font-weight: 700; font-size: 0.85rem;
  padding: 5px 12px; border-radius: 10px;
  border: 2px solid #f9a8d4;
  box-shadow: 0 2px 6px rgba(219,39,119,0.12);
}
.dark .ticket-tag-modern {
  background: linear-gradient(135deg, rgba(219,39,119,0.2), rgba(219,39,119,0.1));
  color: #f9a8d4;
  border-color: rgba(219,39,119,0.4);
}

/* ── Scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
.dark ::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f472b6, #db2777);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ec4899, #be185d);
}

::selection { background: #fbcfe8; color: #831843; }
.dark ::selection { background: #9d174d; color: #fce7f3; }

/* ── Payment Panels ───────────────────────────────────── */
.payment-panel { animation: fadeSlideIn 0.3s ease; }
.payment-panel.hidden { display: none !important; }

/* ── Categorias de Prêmios (pills horizontais) ───────── */
.prize-cat-btn {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 0 0 auto;
}
.prize-cat-btn:hover:not(.prize-cat-active) {
  transform: translateY(-1px);
}
.prize-cat-active {
  transform: translateY(-1px);
}

/* ── Carrossel horizontal de prêmios ─────────────────── */
.prize-carousel-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-padding: 1rem;
}
.prize-carousel-scroll::-webkit-scrollbar {
  display: none;
}

/* ── Placeholder de Prêmio (posição da foto) ─────────── */
.prize-placeholder {
  flex: 0 0 auto;
  width: 16rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 640px) {
  .prize-placeholder {
    width: 18rem;
  }
}
.prize-placeholder .placeholder-img {
  aspect-ratio: 4 / 3;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fce7f3, #fdf2f8);
}
.dark .prize-placeholder .placeholder-img {
  background: linear-gradient(135deg, #831843, #500724);
}

/* O destaque do Plus migrou para o bloco "CARDS DOS PLANOS" no topo
   deste arquivo, no formato do protótipo v2: borda rosa de 1.5px e
   faixa "Melhor custo-benefício", sem scale(). As classes antigas
   .package-card-plus e .package-plus-tag saíram de uso. */

/* ── Card de Doação ──────────────────────────────────── */
.donation-card {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.dark .donation-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ── Botões Flutuantes de Contato ────────────────────── */
.support-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: supportPulse 2.5s ease-in-out infinite;
}
.support-btn:hover {
  animation-play-state: paused;
}
@keyframes supportPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ── Modal de Sorteio ────────────────────────────────── */
#sorteio-modal {
  animation: fadeSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#sorteio-modal.hidden { display: none !important; }

/* ── Painel Admin ────────────────────────────────────── */
.admin-tab.active {
  color: #be185d !important;
  border-color: #db2777 !important;
}
#confirm-modal.hidden { display: none !important; }

/* ── Bottom-nav mobile fixa ──────────────────────────── */
/* Classes utilitárias ausentes no tailwind.css compilado
   (bottom-0, z-[65], bg-white/95, pb-16, sm:pb-0). Aqui em
   CSS puro para independer do build do Tailwind. */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40; /* abaixo do header (50), modal (60) e lightbox (70) */
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid #e5e7eb;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
}
.dark .bottom-nav {
  background: rgba(15, 23, 42, 0.96);
  border-top-color: #1f2937;
}
@media (min-width: 768px) {
  .bottom-nav { display: none; } /* no desktop o botão do header assum */
}
@media (max-width: 767.98px) {
  body.has-bottom-nav { padding-bottom: 5.5rem; } /* respiro p/ nav fixa */
}

/* ── Bloco "Regras do sorteio" (abaixo dos planos) ─────── */
/* <details>/<summary> não têm equivalente no tailwind.css compilado
   (list-none, cursor-pointer, marker). CSS puro, como o bloco acima. */
#plans-rules .plans-rules__summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 800;
  font-size: 1rem;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}
#plans-rules .plans-rules__summary::-webkit-details-marker { display: none; }
#plans-rules .plans-rules__summary::after {
  content: "▾";
  margin-left: auto;
  color: #9ca3af;
  transition: transform 0.2s;
}
#plans-rules[open] .plans-rules__summary::after { transform: rotate(180deg); }
.dark #plans-rules .plans-rules__summary { color: #f9fafb; }

/* ── Utilitárias ausentes no tailwind.css (v3 dos planos) ──
   O build é purgado e NÃO contém estas regras. Confirmado por busca
   literal no arquivo. Sem elas o botão do card não mudava de cor no
   hover e os números grandes ficavam com entrelinha padrão.
   CSS puro para independer do build do Tailwind. */
.leading-none { line-height: 1; }
.ml-auto { margin-left: auto; }
.opacity-50 { opacity: 0.5; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.text-\[10px\] { font-size: 0.625rem; line-height: 1rem; }
.text-\[11px\] { font-size: 0.6875rem; line-height: 1rem; }
.hover\:bg-brand-600:hover { background-color: #db2777; }
.hover\:text-white:hover { color: #ffffff; }