/* ============================================================
   NOTECEL — Loja — sistema de design próprio (2026-08-02)
   Conceito: "ativação instantânea" — cada produto é tratado como
   uma credencial digital que liga na hora (like uma recarga
   pré-paga), daí a etiqueta estilo ticket/canhoto no preço e a
   fita "AO VIVO" no topo, em vez de um hero genérico de banner.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --ink:        #10131a;
  --ink-2:      #1a1f29;
  --paper:      #f3f4f6;
  --card:       #ffffff;
  --line:       #e3e5ea;
  --red:        #e11d2e;
  --red-deep:   #9c1220;
  --red-soft:   #fdeaec;
  --gold:       #f5b301;
  --ink-soft:   #5b6270;
  --ink-faint:  #9aa1ad;

  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;
}

body{ background:var(--paper); }

/* ---------- Nav ---------- */
nav.glass{
  background: rgba(16,19,26,0.92) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
nav.glass a.text-slate-900{ color:#fff !important; font-family:var(--font-display); }
nav.glass .nav-link{ color:rgba(255,255,255,0.62) !important; }
nav.glass .nav-link:hover{ color:#fff !important; }
nav.glass #userArea button{ color:rgba(255,255,255,0.75) !important; }
nav.glass #userArea button:hover{ color:#fff !important; }
nav.glass button.bg-slate-900{ background:var(--red) !important; }
nav.glass button.bg-slate-900:hover{ background:var(--red-deep) !important; }
nav.glass #mobileMenuBtn{ color:#fff !important; }

/* ---------- Faixa "AO VIVO" (substitui o header genérico) ---------- */
.onair-strip{
  background: var(--ink);
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.onair-strip .wrap{
  max-width: 80rem; margin:0 auto; padding: 2.75rem 1.5rem 2.25rem;
  display:flex; flex-direction:column; gap:.9rem;
}
.onair-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  align-self:flex-start;
  background: var(--red); color:#fff;
  font-family: var(--font-mono); font-size: 10px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  padding: .38rem .8rem; border-radius: 999px;
}
.onair-tag .dot{
  width:6px; height:6px; border-radius:50%; background:#fff;
  animation: dot-blink 1.6s ease-in-out infinite;
}
@keyframes dot-blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
.onair-strip h1{
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  letter-spacing: -0.02em; line-height:1.05; color:#fff;
}
.onair-strip p{
  color: rgba(255,255,255,0.58); font-size:.95rem; max-width:34rem;
}
.onair-meta{
  display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:.35rem;
  font-family: var(--font-mono); font-size:11px; color:rgba(255,255,255,0.4);
  text-transform:uppercase; letter-spacing:.08em;
}
.onair-meta strong{ color:#fff; font-weight:700; }

/* ---------- Filtros ---------- */
.filter-row{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  margin-bottom: 2.5rem;
}
.filter-pill{
  padding:.55rem 1.15rem; border-radius:999px;
  background:var(--card); border:1px solid var(--line);
  font-family: var(--font-mono); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft);
  transition: all .2s ease; cursor:pointer;
}
.filter-pill:hover{ border-color:var(--red); color:var(--red); }
.filter-pill.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.filter-toggle{
  display:flex; align-items:center; gap:.65rem; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:.5rem 1rem; margin-left:auto;
}
.filter-toggle span{
  font-family: var(--font-mono); font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint);
}
.filter-toggle:hover span{ color:var(--red); }

/* ---------- Cards de produto (canhoto de ativação) ---------- */
#product-grid{ align-items:stretch; }

.pcard{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius: 1.25rem;
  padding: .9rem .9rem 1.1rem;
  display:flex; flex-direction:column; height:100%;
  cursor:pointer;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.pcard:hover{
  transform: translateY(-6px);
  border-color: rgba(225,29,46,0.35);
  box-shadow: 0 24px 40px -20px rgba(16,19,26,0.35);
}
.pcard.is-unavailable{ opacity:.55; filter:grayscale(.5); cursor:not-allowed; }

.pcard-best{
  position:absolute; top:.85rem; left:.85rem; z-index:2;
  display:flex; align-items:center; gap:.35rem;
  background:var(--gold); color:var(--ink);
  font-family:var(--font-mono); font-size:9px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:999px;
}

.pcard-img{
  position:relative; overflow:hidden; border-radius:.85rem;
  aspect-ratio:1/1; background:var(--paper); margin-bottom:.85rem;
}
.pcard-img img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.pcard:hover .pcard-img img{ transform:scale(1.08); }

.pcard-cat{
  font-family:var(--font-mono); font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; color:var(--red);
  margin-bottom:.3rem;
}
.pcard-name{
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  color:var(--ink); line-height:1.2; margin-bottom:.3rem;
}
.pcard-desc{
  font-size:.75rem; color:var(--ink-faint); line-height:1.4;
  margin-bottom:.9rem; flex:1;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Canhoto de ativação — a etiqueta de preço estilo ticket */
.pcard-stub{
  display:flex; align-items:center; justify-content:space-between;
  gap:.6rem; margin-top:auto;
  border-top: 1px dashed var(--line); padding-top:.75rem;
  position:relative;
}
.pcard-stub::before, .pcard-stub::after{
  content:''; position:absolute; top:-6px; width:12px; height:12px;
  border-radius:50%; background:var(--paper); border:1px solid var(--line);
}
.pcard-stub::before{ left:-1.35rem; }
.pcard-stub::after{ right:-1.35rem; }
.pcard-price{ display:flex; flex-direction:column; }
.pcard-price .old{
  font-family:var(--font-mono); font-size:10px; color:var(--ink-faint);
  text-decoration:line-through;
}
.pcard-price .now{
  font-family:var(--font-mono); font-weight:700; font-size:1.15rem; color:var(--ink);
  letter-spacing:-0.02em;
}
.pcard-add{
  width:2.6rem; height:2.6rem; border-radius:.8rem; flex-shrink:0;
  background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: all .25s ease;
}
.pcard-add:hover{ background:var(--red); transform:scale(1.06); }
.pcard-add:disabled{ background:var(--line); color:var(--ink-faint); cursor:not-allowed; transform:none; }

.pcard-status{
  font-family:var(--font-mono); font-size:8px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.2rem .5rem; border-radius:.4rem;
}
.pcard-status.ok{ background:#e8f8ee; color:#0e9f4f; }
.pcard-status.out{ background:var(--paper); color:var(--ink-faint); }

/* ---------- Modais / carrinho — alinhar tokens sem tocar comportamento ---------- */
#cartSidebar h2, #authModal h2, #historyModal h2, #checkoutFields h2{
  font-family: var(--font-display);
}
#cartSidebar .p-6.border-b{ background:var(--ink); }
#cartSidebar .p-6.border-b h2{ color:#fff; }
#cartSidebar button.bg-red-700, #checkoutFields button.bg-green-600,
#authModal button[type="submit"]{ font-family: var(--font-display); }

@media (max-width: 640px){
  .onair-strip .wrap{ padding: 2.25rem 1.25rem 1.75rem; }
  .filter-toggle{ margin-left:0; width:100%; justify-content:center; }
}

/* ============================================================
   Reforço de utilitários Tailwind ausentes do build (2026-08-20)
   `output.css` é um build ESTÁTICO (compilado uma vez, sem watch/CLI
   no projeto) — qualquer classe Tailwind usada que não existia nos
   templates quando ele foi gerado simplesmente não tem CSS nenhum.
   Bloco abaixo cobre as classes novas (cupom/favoritos/avaliações/
   busca/cookies/detalhe de produto/404) + algumas já usadas antes
   (checkoutModal/authModal/toast) que também nunca foram compiladas.
   Não usar classes Tailwind com valor arbitrário/responsivo daqui pra
   frente sem checar `output.css` antes — ou escrever a regra aqui.
   ============================================================ */
.h-56{ height:14rem; }
.inset-x-0{ left:0px; right:0px; }
.max-h-\[85vh\]{ max-height:85vh; }
.max-w-2xl{ max-width:42rem; }
.pl-11{ padding-left:2.75rem; }
.pt-6{ padding-top:1.5rem; }
.py-6{ padding-top:1.5rem; padding-bottom:1.5rem; }
.space-y-3 > :not([hidden]) ~ :not([hidden]){ margin-top:0.75rem; }
.text-3xl{ font-size:1.875rem; line-height:2.25rem; }
.text-amber-500{ color:rgb(245 158 11); }
.top-1\/2{ top:50%; }
.-translate-y-1\/2{ transform:translateY(-50%); }
.whitespace-nowrap{ white-space:nowrap; }
.font-normal{ font-weight:400; }
.z-\[140\]{ z-index:140; }
.z-\[300\]{ z-index:300; }
.z-\[1050\]{ z-index:1050; }
.z-\[1100\]{ z-index:1100; }
.z-\[1200\]{ z-index:1200; }
@media (min-width:768px){
  .md\:flex-row{ flex-direction:row; }
  .md\:gap-6{ gap:1.5rem; }
  .md\:p-6{ padding:1.5rem; }
  .md\:text-4xl{ font-size:2.25rem; line-height:2.5rem; }
  .md\:text-sm{ font-size:0.875rem; line-height:1.25rem; }
}