/* =============================================================================
   ofertop.css — Design system da marca Ofertop (tema escuro premium)
   -----------------------------------------------------------------------------
   Fonte ÚNICA da identidade visual: tokens (custom properties) + componentes
   reutilizáveis. Servido de /static (CSP 'self') e carregado via _head.html em
   todos os shells. A ideia é definir a marca UMA vez e reaproveitar no site
   inteiro — as páginas usam as classes .of-* em vez de repetir utilitários.

   Convive com o Tailwind Play CDN: os utilitários do Tailwind continuam
   disponíveis e podem sobrescrever pontualmente (specificity baixa aqui de
   propósito). Cores da marca vêm do guia do kit Ofertop.
   ========================================================================== */

:root {
  /* --- Superfícies / fundo (do quase-preto ao card) --- */
  --of-bg:          #01050C;   /* fundo base (ink) */
  --of-bg-soft:     #070B14;   /* faixas/painéis levemente acima do fundo */
  --of-surface:     #0A1120;   /* card padrão */
  --of-surface-2:   #0E1626;   /* card elevado / hover */

  /* --- Linhas / bordas (hairline sobre fundo escuro) --- */
  --of-line:        rgba(255,255,255,.07);
  --of-line-strong: rgba(255,255,255,.14);

  /* --- Texto (branco quente da marca + variações) --- */
  --of-text:        #F6F2E7;   /* texto principal (branco quente) */
  --of-text-dim:    #AEB6C4;   /* texto secundário */
  --of-text-mute:   #7A8291;   /* legendas / hints */

  /* --- Cores da marca + gradiente assinatura --- */
  --of-orange:      #FF8A0F;
  --of-pink:        #F01B7E;
  --of-magenta:     #B928DC;
  --of-gradient:      linear-gradient(92deg, #FF8A0F 0%, #F01B7E 55%, #B928DC 100%);
  --of-gradient-soft: linear-gradient(92deg, rgba(255,138,15,.16), rgba(240,27,126,.14) 55%, rgba(185,40,220,.12));

  /* --- Status (afinados à marca) --- */
  --of-ok:     #34D399;   /* verde esmeralda — "desconto real" / sucesso */
  --of-warn:   #FBBF24;   /* âmbar — atenção / "bombando" */
  --of-info:   #56B6FF;   /* azul — informativo / categorias */
  --of-danger: #FB7185;   /* rosa-vermelho — erro / perigo */

  /* --- Forma / profundidade --- */
  --of-radius:    12px;   /* controles (botões, inputs, chips) */
  --of-radius-lg: 16px;   /* cards */
  --of-glow:     0 10px 30px -8px rgba(240,27,126,.45);   /* brilho rosado do CTA */
  --of-shadow:   0 18px 50px -20px rgba(0,0,0,.65);

  /* --- Placa de foto: fundo claro pra "sumir" o fundo branco das fotos --- */
  --of-photo-bg: #F6F2E7;  /* branco quente da marca (um tom abaixo do branco puro) */
}

/* ===================== BASE ===================== */

body {
  background-color: var(--of-bg);
  color: var(--of-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Realce em gradiente para o wordmark e trechos de destaque (ex.: "melhor preço."). */
.of-gradient-text {
  background: var(--of-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Título de seção com a fonte de display (Sora vem do Tailwind config em _head). */
.of-section-title {
  font-family: Sora, Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--of-text);
}

/* Barra de rolagem discreta e coerente com o tema escuro. */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--of-bg-soft); }
::-webkit-scrollbar-thumb { background: #26303f; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #33404f; }

/* Utilitário legado usado nos cards (mantido para não quebrar a marcação). */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Alpine: esconde elementos com x-cloak até o componente hidratar. */
[x-cloak] { display: none !important; }

/* Esconde as setas (spinners) de inputs number marcados com .no-spin. */
input.no-spin::-webkit-outer-spin-button,
input.no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.no-spin { -moz-appearance: textfield; }

/* Carrossel horizontal (ex.: "produtos semelhantes" no detalhe): scroll nativo
   por snap, sem lib JS — as setas prev/next só dão um empurrão (scrollBy). */
.carrossel-track { scroll-snap-type: x mandatory; scrollbar-width: thin; }
.carrossel-track > * { scroll-snap-align: start; }

/* ===================== BOTÕES ===================== */

/* CTA primário: gradiente da marca + brilho. Texto escuro para contraste. */
.of-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  color: #2A0D00;
  background: var(--of-gradient);
  padding: 10px 18px;
  border-radius: var(--of-radius);
  border: 0;
  box-shadow: var(--of-glow);
  cursor: pointer;
  transition: filter .15s ease, box-shadow .15s ease, transform .15s ease;
  text-decoration: none;
}
.of-btn:hover { filter: brightness(1.06); box-shadow: 0 12px 34px -8px rgba(240,27,126,.6); }
.of-btn:active { transform: translateY(1px); }

/* CTA claro (branco quente) — para ações neutras de alto destaque. */
.of-btn-soft {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; color: #1A0A00;
  background: var(--of-text);
  padding: 10px 18px; border-radius: var(--of-radius); border: 0;
  cursor: pointer; transition: background .15s ease, transform .15s ease; text-decoration: none;
}
.of-btn-soft:hover { background: #fff; }
.of-btn-soft:active { transform: translateY(1px); }

/* Botão fantasma: borda hairline sobre o escuro. Ação secundária. */
.of-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; color: var(--of-text);
  background: rgba(255,255,255,.03);
  padding: 10px 18px; border-radius: var(--of-radius);
  border: 1px solid var(--of-line-strong);
  cursor: pointer; transition: background .15s ease, border-color .15s ease; text-decoration: none;
}
.of-btn-ghost:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.24); }

/* ===================== CARDS ===================== */

.of-card {
  background: var(--of-surface);
  border: 1px solid var(--of-line);
  border-radius: var(--of-radius-lg);
  overflow: hidden;
}
/* Variante clicável: eleva sutilmente e acende a borda no hover. */
.of-card-hover { transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.of-card-hover:hover {
  border-color: var(--of-line-strong);
  transform: translateY(-2px);
  box-shadow: var(--of-shadow);
}
/* Card patrocinado: distinto do orgânico (NÃO é look-alike) — âmbar contido. */
.of-card-sponsored { border-color: rgba(251,191,36,.4); box-shadow: 0 0 0 1px rgba(251,191,36,.14) inset; }

/* ===================== PLACA DE FOTO (§2.1) =====================
   As fotos das lojas vêm com fundo branco/transparente/colorido e em proporções
   variadas. A placa clara "absorve" o fundo branco e a proporção fixa + contain
   alinha tudo — quadradas, largas e altas ficam iguais. */
.of-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--of-photo-bg);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.of-photo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  padding: 12px;
}
/* Fallback (sem imagem): ícone/silhueta cinza-suave sobre a placa clara. */
.of-photo-fallback { color: #A8A29E; }

/* ===================== INPUTS ===================== */

.of-input, .of-select {
  width: 100%;
  background: var(--of-bg-soft);
  color: var(--of-text);
  border: 1px solid var(--of-line-strong);
  border-radius: var(--of-radius);
  padding: 10px 14px;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.of-input::placeholder { color: var(--of-text-mute); }
.of-input:focus, .of-select:focus {
  outline: none;
  border-color: rgba(240,27,126,.6);
  box-shadow: 0 0 0 3px rgba(240,27,126,.15);
}

/* ===================== CHIPS ===================== */

.of-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--of-text-dim);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--of-line);
  padding: 5px 12px; border-radius: 999px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  text-decoration: none; cursor: pointer;
}
.of-chip:hover { background: rgba(255,255,255,.07); color: var(--of-text); }
.of-chip-active {
  color: #FFCF9A;
  background: rgba(255,138,15,.14);
  border-color: rgba(240,27,126,.4);
  font-weight: 600;
}

/* ===================== BADGES / PÍLULAS ===================== */

.of-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid transparent;
}
.of-badge-ok     { color: var(--of-ok);     background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.28); }
.of-badge-warn   { color: var(--of-warn);   background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.28); }
.of-badge-info   { color: var(--of-info);   background: rgba(86,182,255,.12); border-color: rgba(86,182,255,.28); }
.of-badge-danger { color: var(--of-danger); background: rgba(251,113,133,.12); border-color: rgba(251,113,133,.28); }
/* Badge de desconto em gradiente (ex.: "−25%"). Texto escuro para contraste. */
.of-badge-grad { color: #2A0D00; background: var(--of-gradient); font-weight: 700; border: 0; }

/* Selo "Desconto real": esmeralda + pulso suave (respeitando reduced-motion).
   IMPORTANTE: mantém a classe .selo-real usada na marcação/testes. */
.selo-real, .of-seal-real {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  color: var(--of-ok);
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.3);
  padding: 3px 9px; border-radius: 999px;
  animation: of-pulse 2.4s ease-in-out infinite;
}
@keyframes of-pulse { 0%,100% { opacity: 1; } 50% { opacity: .62; } }

/* ===================== TERMÔMETRO SOCIAL (votos) =====================
   Mantém as classes .vote-btn / .vote-active usadas pelo JS de voto ao vivo. */
.vote-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--of-text-dim);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--of-line);
  padding: 4px 10px; border-radius: 10px;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.vote-btn:hover { background: rgba(255,255,255,.08); }
.vote-active { color: #FFCF9A; border-color: rgba(240,27,126,.45); background: rgba(255,138,15,.14); }

/* ===================== HEADER (glass) ===================== */

.of-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(1,5,12,.72);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--of-line);
}

/* ===================== HERÓI ===================== */

.of-hero { position: relative; overflow: hidden; }
/* Brilho radial da marca por trás do conteúdo do herói (mesh sutil). */
.of-hero-glow::before {
  content: "";
  position: absolute; inset: -30% -10% auto auto;
  width: 60%; height: 140%;
  background:
    radial-gradient(closest-side, rgba(240,27,126,.20), transparent 70%),
    radial-gradient(closest-side, rgba(255,138,15,.14), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
.of-hero > * { position: relative; z-index: 1; }

/* ===================== MARCA / LOGO ===================== */

.of-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.of-logo { display: block; height: 30px; width: auto; }
.of-logo-sm { height: 24px; }
.of-logo-lg { height: 40px; }
.of-wordmark {
  font-family: Sora, Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--of-text);
}

/* ===================== ACESSIBILIDADE ===================== */

/* Respeita quem prefere menos movimento: mata pulsos, glows animados e transições. */
@media (prefers-reduced-motion: reduce) {
  .selo-real, .of-seal-real { animation: none; }
  .of-btn, .of-btn-soft, .of-btn-ghost, .of-chip, .of-card-hover, .vote-btn { transition: none; }
}

/* ===================== CSP: SUBSTITUTOS DE style= INLINE =====================
   Com o Tailwind compilado, removemos `style-src 'unsafe-inline'` da CSP. Isso
   bloqueia TAMBÉM atributos style="..." no HTML. Estes componentes substituem
   os estilos inline dinâmicos (largura de termômetro, cor por faixa, posição de
   marcador) por CLASSES — CSP-safe e sem JS. Valores contínuos viram degraus de
   5% (imperceptível numa barra). Bindings :style do Alpine seguem OK (CSSOM). */

/* Trilho + preenchimento do termômetro/medidor. */
.of-meter { height: 8px; border-radius: 9999px; background: rgba(255,255,255,.1); overflow: hidden; }
.of-meter__fill { display: block; height: 100%; }

/* Cores de preenchimento por faixa (escolhidas via condicional no template). */
.of-fill-hot  { background: var(--of-orange); }
.of-fill-mid  { background: var(--of-warn); }
.of-fill-low  { background: #4B5563; }
.of-fill-grad { background: var(--of-gradient); }
.of-fill-orange { background: #f97316; }

/* Larguras em degraus de 5% (0–100). Uso: class="of-meter__fill of-fill-hot of-w-45". */
.of-w-0 { width: 0%; }
.of-w-5 { width: 5%; }
.of-w-10 { width: 10%; }
.of-w-15 { width: 15%; }
.of-w-20 { width: 20%; }
.of-w-25 { width: 25%; }
.of-w-30 { width: 30%; }
.of-w-35 { width: 35%; }
.of-w-40 { width: 40%; }
.of-w-45 { width: 45%; }
.of-w-50 { width: 50%; }
.of-w-55 { width: 55%; }
.of-w-60 { width: 60%; }
.of-w-65 { width: 65%; }
.of-w-70 { width: 70%; }
.of-w-75 { width: 75%; }
.of-w-80 { width: 80%; }
.of-w-85 { width: 85%; }
.of-w-90 { width: 90%; }
.of-w-95 { width: 95%; }
.of-w-100 { width: 100%; }

/* Posição de marcador (left) em degraus de 5% — centraliza com -4px. */
.of-left-0 { left: calc(0% - 4px); }
.of-left-5 { left: calc(5% - 4px); }
.of-left-10 { left: calc(10% - 4px); }
.of-left-15 { left: calc(15% - 4px); }
.of-left-20 { left: calc(20% - 4px); }
.of-left-25 { left: calc(25% - 4px); }
.of-left-30 { left: calc(30% - 4px); }
.of-left-35 { left: calc(35% - 4px); }
.of-left-40 { left: calc(40% - 4px); }
.of-left-45 { left: calc(45% - 4px); }
.of-left-50 { left: calc(50% - 4px); }
.of-left-55 { left: calc(55% - 4px); }
.of-left-60 { left: calc(60% - 4px); }
.of-left-65 { left: calc(65% - 4px); }
.of-left-70 { left: calc(70% - 4px); }
.of-left-75 { left: calc(75% - 4px); }
.of-left-80 { left: calc(80% - 4px); }
.of-left-85 { left: calc(85% - 4px); }
.of-left-90 { left: calc(90% - 4px); }
.of-left-95 { left: calc(95% - 4px); }
.of-left-100 { left: calc(100% - 4px); }

/* Caixas de destaque (help): nota (info) e aviso (âmbar). */
.of-nota  { border-radius: 12px; padding: 1rem; margin: 1.25rem 0; background: rgba(86,182,255,.06); border: 1px solid rgba(86,182,255,.22); }
.of-nota__t  { color: var(--of-info); }
.of-aviso { border-radius: 12px; padding: 1rem; margin: 1.25rem 0; background: rgba(251,191,36,.06); border: 1px solid rgba(251,191,36,.22); }
.of-aviso__t { color: var(--of-warn); }

/* Caixa do veredito da IA (violeta). */
.of-ai-box { color: #E9D5FF; background: rgba(185,40,220,.10); border: 1px solid rgba(185,40,220,.25); }

/* Badges extras que usavam cor inline. */
.of-badge-violet  { color: #C4B5FD; background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.3); }
.of-badge-neutral { background: rgba(255,255,255,.04); border-color: var(--of-line); }

/* Placa de foto quadrada (thumbs de lista) + só o fundo da placa. */
.of-photo-sq { aspect-ratio: 1 / 1; }
.of-plate { background: var(--of-photo-bg); }

/* Sombra de card em classe (era box-shadow inline). */
.of-shadow { box-shadow: var(--of-shadow); }

/* Aba ativa do CRM: sublinhado com o gradiente da marca (era border-image inline). */
.of-tab-active { border-image: var(--of-gradient) 1; }


/* Barra de alvo (produtos): amarelo até o alvo, vermelho no excedente.
   Parada do gradiente em degraus de 5% (era gradiente com % inline). */
.of-tgtbar-0 { background: linear-gradient(90deg, #facc15 0%, #ef4444 100%); }
.of-tgtbar-5 { background: linear-gradient(90deg, #facc15 5%, #ef4444 100%); }
.of-tgtbar-10 { background: linear-gradient(90deg, #facc15 10%, #ef4444 100%); }
.of-tgtbar-15 { background: linear-gradient(90deg, #facc15 15%, #ef4444 100%); }
.of-tgtbar-20 { background: linear-gradient(90deg, #facc15 20%, #ef4444 100%); }
.of-tgtbar-25 { background: linear-gradient(90deg, #facc15 25%, #ef4444 100%); }
.of-tgtbar-30 { background: linear-gradient(90deg, #facc15 30%, #ef4444 100%); }
.of-tgtbar-35 { background: linear-gradient(90deg, #facc15 35%, #ef4444 100%); }
.of-tgtbar-40 { background: linear-gradient(90deg, #facc15 40%, #ef4444 100%); }
.of-tgtbar-45 { background: linear-gradient(90deg, #facc15 45%, #ef4444 100%); }
.of-tgtbar-50 { background: linear-gradient(90deg, #facc15 50%, #ef4444 100%); }
.of-tgtbar-55 { background: linear-gradient(90deg, #facc15 55%, #ef4444 100%); }
.of-tgtbar-60 { background: linear-gradient(90deg, #facc15 60%, #ef4444 100%); }
.of-tgtbar-65 { background: linear-gradient(90deg, #facc15 65%, #ef4444 100%); }
.of-tgtbar-70 { background: linear-gradient(90deg, #facc15 70%, #ef4444 100%); }
.of-tgtbar-75 { background: linear-gradient(90deg, #facc15 75%, #ef4444 100%); }
.of-tgtbar-80 { background: linear-gradient(90deg, #facc15 80%, #ef4444 100%); }
.of-tgtbar-85 { background: linear-gradient(90deg, #facc15 85%, #ef4444 100%); }
.of-tgtbar-90 { background: linear-gradient(90deg, #facc15 90%, #ef4444 100%); }
.of-tgtbar-95 { background: linear-gradient(90deg, #facc15 95%, #ef4444 100%); }
.of-tgtbar-100 { background: linear-gradient(90deg, #facc15 100%, #ef4444 100%); }


/* Chip de categoria (info claro) — era cor inline no feed. */
.of-chip-cat { color: #9BD0FF; background: rgba(86,182,255,.1); border-color: rgba(86,182,255,.3); }