/* app.min.css - Consolidado de 6 sprint files (2026-05-26) */

/* === design-tokens.css === */
/**
 * /assets/css/design-tokens.css
 * Sprint 0 — Foundation. Tokens adicionais do design system 2026.
 *
 * REGRA: nunca sobrescrever tokens existentes em header.php (--radius, --orange,
 * --ink, --shadow-*, --line, --bg, --surface, etc). Apenas ADICIONA novos com
 * prefixo --eco-* pra uso progressivo nos próximos sprints.
 *
 * Carregar ANTES de motion.css (motion.css depende destes tokens).
 */

:root {
  /* === SPACING — escala 4px base (sem valores aleatórios) === */
  --eco-space-4:  4px;
  --eco-space-8:  8px;
  --eco-space-12: 12px;
  --eco-space-16: 16px;
  --eco-space-20: 20px;
  --eco-space-24: 24px;
  --eco-space-32: 32px;
  --eco-space-40: 40px;
  --eco-space-48: 48px;
  --eco-space-64: 64px;
  --eco-space-80: 80px;

  /* === RADIUS — complementa --radius/--radius-sm/--radius-lg existentes === */
  --eco-r-full: 9999px;

  /* === TOUCH TARGETS — mínimo 48x48px (WCAG / Material / Apple HIG) === */
  --eco-touch-min: 48px;

  /* === MOTION — easing premium e durações canônicas === */
  --eco-ease-premium: cubic-bezier(0.23, 1, 0.32, 1);
  --eco-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --eco-d-fast:  150ms;
  --eco-d-base:  200ms;
  --eco-d-slow:  350ms;

  /* === Z-INDEX SCALE — referência única pra evitar valores mágicos === */
  --eco-z-base:    1;
  --eco-z-sticky:  99;     /* mobile-nav, sticky-cta-btn */
  --eco-z-overlay: 9990;   /* mob-drawer-overlay */
  --eco-z-drawer:  9991;
  --eco-z-modal:   9995;
  --eco-z-toast:   10001;  /* maior que tudo */

  /* === SHADOW — adicional aos --shadow-sm/--shadow/--shadow-lg existentes === */
  --eco-shadow-card-hover: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* === CHAMPION THEME — tema dinamico por loja campea (oferta redesign 2026-05).
     Default = Amazon. Override via [data-store="..."] no wrapper page-level.
     --champion-accent: cor solida (bordas, sparkline, trofeu, links)
     --champion-cta-bg: gradiente do botao CTA principal (pode divergir do accent — caso ML) */
  --champion-tint-1:           #EBF3FC;
  --champion-tint-2:           #FAFCFF;
  --champion-accent:           #146EB4;
  --champion-accent-deepest:   #073968;
  --champion-accent-soft:      rgba(20, 110, 180, 0.08);
  --champion-cta-text:         #FFFFFF;
  --champion-shadow-close:     rgba(20, 110, 180, 0.22);
  --champion-shadow-far:       rgba(20, 110, 180, 0.30);
  --champion-cta-bg:           linear-gradient(180deg, #1F86D2 0%, #146EB4 50%, #0B4B82 100%);
  --champion-cta-bg-hover:     linear-gradient(180deg, #2A95E0 0%, #1A7BCC 50%, #0F5A95 100%);
  --champion-cta-sheen:        rgba(255, 255, 255, 0.22);
}

[data-store="shopee"] {
  --champion-tint-1:           #FFEEE5;
  --champion-tint-2:           #FFFAF6;
  --champion-accent:           #EE4D2D;
  --champion-accent-deepest:   #962A0C;
  --champion-accent-soft:      rgba(238, 77, 45, 0.08);
  --champion-cta-text:         #FFFFFF;
  --champion-shadow-close:     rgba(238, 77, 45, 0.22);
  --champion-shadow-far:       rgba(238, 77, 45, 0.30);
  --champion-cta-bg:           linear-gradient(180deg, #F36A4D 0%, #EE4D2D 50%, #C53814 100%);
  --champion-cta-bg-hover:     linear-gradient(180deg, #F78164 0%, #F25A3D 50%, #D14422 100%);
  --champion-cta-sheen:        rgba(255, 255, 255, 0.22);
}

[data-store="mercadolivre"], [data-store="ml"] {
  --champion-tint-1:           #FFF8C8;
  --champion-tint-2:           #FFFEEC;
  --champion-accent:           #2D3277;
  --champion-accent-deepest:   #141738;
  --champion-accent-soft:      rgba(255, 230, 0, 0.34);
  --champion-cta-text:         #1F234F;
  --champion-shadow-close:     rgba(212, 165, 0, 0.32);
  --champion-shadow-far:       rgba(180, 138, 0, 0.30);
  --champion-cta-bg:           linear-gradient(180deg, #FFE600 0%, #FFD500 55%, #F5C400 100%);
  --champion-cta-bg-hover:     linear-gradient(180deg, #FFF066 0%, #FFE600 55%, #F5C400 100%);
  --champion-cta-sheen:        rgba(255, 255, 255, 0.55);
}

/* === motion.css === */
/**
 * /assets/css/motion.css
 * Sprint 0 — Foundation Motion. Regras conservadoras e seguras.
 *
 * Inclui:
 *   - scale(0.97):active ESCOPADO a classes específicas (não <button> global)
 *   - will-change: transform APENAS nos 3 CTAs principais
 *   - :focus-visible padronizado (site público)
 *   - prefers-reduced-motion respeitado globalmente
 *
 * NÃO inclui:
 *   - blur pesado, keyframes agressivos, animações contínuas, skeleton
 *   - (esses ficam pro Sprint 4 — Perceived Performance)
 *
 * Depende de design-tokens.css (carregar tokens ANTES deste arquivo).
 */

/* ==========================================================
   ACTIVE FEEDBACK — scale(0.97) escopado
   Aplicado APENAS nas classes principais de botão/CTA.
   Não afeta <button> genérico, inputs, ou forms críticos (ex: countdown go.php).
   ========================================================== */
.btn:active,
.btn-primary:active,
.btn-text:active,
.deal-cta:active,
.sticky-cta-btn:active,
.go-btn-main:active,
.pc-btn:active,
.ns-form button:active {
  transform: scale(0.97);
  transition: transform var(--eco-d-fast, 150ms) var(--eco-ease-premium, cubic-bezier(0.23, 1, 0.32, 1));
}

/* ==========================================================
   WILL-CHANGE — limitado a 3 CTAs principais
   Hint pro browser pré-alocar layer GPU. Não aplicar global
   (cada will-change consome memória, anti-padrão se exagerado).
   ========================================================== */
.deal-cta,
.sticky-cta-btn,
.go-btn-main {
  will-change: transform;
}

/* ==========================================================
   FOCUS VISIBLE — navegação por teclado
   Só aparece quando browser detecta intent de teclado (não em clique mouse).
   Cor laranja casa com a paleta existente (--orange).
   ========================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--orange, #FF6B35);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 8px);
}

/* ==========================================================
   PREFERS-REDUCED-MOTION — respeito a preferência do usuário
   Reduz todas as transitions/animations a ~instantâneo.
   Mantém feedback tátil (:active scale), mas sem easing.
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:active,
  .btn-primary:active,
  .btn-text:active,
  .deal-cta:active,
  .sticky-cta-btn:active,
  .go-btn-main:active,
  .pc-btn:active,
  .ns-form button:active {
    transform: scale(0.98);
    transition: none;
  }
}

/* === sprint1.css === */
/**
 * /assets/css/sprint1.css
 * Sprint 1 — Quick Wins (site público).
 *
 * Inclui:
 *   - .cta-sub          → subtexto dentro do CTA principal ("📲 Abre direto no app")
 *   - .cta-social-proof → chip verde de prova social acima do CTA
 *   - .btn-share-wa     → botão "Mandar pra uma amiga" verde WhatsApp
 *   - Touch targets refinados mobile (≥44px) em botões pequenos
 */

/* === CTA SUBTEXTO — fórmula verbo+benefício+redução-ansiedade === */
.go-btn-main .cta-sub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.88;
  margin-top: 4px;
  letter-spacing: 0.01em;
}

/* === PROVA SOCIAL próxima ao CTA — chip verde, alta visibilidade === */
.cta-social-proof {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 10px;
  padding: 7px 14px;
  background: var(--green-light, #DCFCE7);
  color: var(--green-dark, #14532D);
  border-radius: var(--eco-r-full, 9999px);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid rgba(22, 163, 74, 0.18);
}
.cta-social-proof i { font-size: 14px; color: var(--green, #16A34A); }
.cta-social-proof strong { font-weight: 800; }

/* === MANDAR PRA UMA AMIGA — loop viral WhatsApp === */
.btn-share-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: #25D366;       /* verde WhatsApp oficial */
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--radius-sm, 8px);
  font-weight: 700;
  font-size: 14px;
  margin: 10px 0 12px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  min-height: var(--eco-touch-min, 48px);
  transition: background var(--eco-d-fast, 150ms) var(--eco-ease-premium, cubic-bezier(0.23, 1, 0.32, 1)),
              transform var(--eco-d-fast, 150ms) var(--eco-ease-premium, cubic-bezier(0.23, 1, 0.32, 1));
}
.btn-share-wa:hover { background: #1FB855; }
.btn-share-wa:active { transform: scale(0.97); }
.btn-share-wa i { font-size: 20px; }

/* === TOUCH TARGETS REFINADOS — mobile pequenos botões === */
@media (max-width: 768px) {
  /* Botões de voto/save dentro de cards no feed */
  .vote-mini, .dia-btn {
    min-width: 44px;
    min-height: 44px;
  }
  /* Botões salvar / compartilhar na página da oferta */
  .actions-row .action-btn {
    min-height: 48px;
  }
  /* Pílulas de filtro pequenas no mobile */
  .qf-pill {
    min-height: 36px;
    padding: 8px 14px;
  }
}

/* === sprint3.css === */
/**
 * /assets/css/sprint3.css
 * Sprint 3 — Sticky CTA refinement + CTA inline repetido em páginas longas.
 *
 * Skill: "CTA repetido em listas longas" — pra usuário scrollado lá embaixo
 * não precisar voltar ao topo pra agir.
 *
 * Conservador: depende de tokens Sprint 0 + estilos Sprint 1.
 */

/* ==========================================================
   CTA INLINE REPETIDO (mid-page, depois do bloco comparativos)
   Layout: full-width, mesmo padrão visual do .go-btn-main mas com
   header mais discreto "Pronto pra aproveitar?"
   ========================================================== */
.inline-cta-wrap {
  margin: 24px 0 8px;
  padding: 18px 16px;
  background: linear-gradient(135deg, var(--orange-light, #FFF4ED), #FFE8DB);
  border: 1px solid rgba(255, 107, 53, 0.25);
  border-radius: var(--radius, 12px);
  text-align: center;
}
.inline-cta-wrap .icr-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2, #334155);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.inline-cta-wrap .icr-label i { color: var(--orange, #FF6B35); font-size: 16px; }

.inline-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: linear-gradient(135deg, var(--orange, #FF6B35), var(--orange-dark, #E55520));
  color: #fff;
  padding: 14px 20px;
  border-radius: var(--radius-sm, 8px);
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  min-height: var(--eco-touch-min, 48px);
  box-shadow: 0 6px 18px rgba(255, 107, 53, 0.25);
  transition: transform var(--eco-d-fast, 150ms) var(--eco-ease-premium, cubic-bezier(0.23, 1, 0.32, 1)),
              box-shadow var(--eco-d-base, 200ms) var(--eco-ease-premium, cubic-bezier(0.23, 1, 0.32, 1));
  will-change: transform;
  line-height: 1.2;
}
.inline-cta-btn:hover {
  box-shadow: 0 8px 22px rgba(255, 107, 53, 0.35);
}
.inline-cta-btn:active { transform: scale(0.97); }
.inline-cta-btn i { font-size: 18px; }

.inline-cta-btn .icr-price {
  background: rgba(255, 255, 255, 0.22);
  padding: 3px 10px;
  border-radius: var(--eco-r-full, 9999px);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

/* ==========================================================
   STICKY CTA — refinement (Sprint 3)
   Adicionar pequeno gradient pra destacar visualmente do conteúdo
   sem ser intrusivo. Já existe estilo em oferta.php, só refino.
   ========================================================== */
.sticky-cta {
  /* Refinement leve: shadow mais sutil em mobile pra parecer "elevado" */
  box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.10) !important;
}

/* Hint visual quando user scrolar perto do final da pagina (sticky pulsa
   discretamente — sinal "ainda dá tempo"). Sem animação contínua. */
.sticky-cta.near-bottom .sticky-cta-btn {
  /* leve pulso 1x quando entrou nessa zona via JS */
  animation: stickyPulseOnce var(--eco-d-slow, 350ms) var(--eco-ease-premium, cubic-bezier(0.23, 1, 0.32, 1)) 1;
}
@keyframes stickyPulseOnce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sticky-cta.near-bottom .sticky-cta-btn { animation: none; }
}

/* === sprint4.css === */
/**
 * /assets/css/sprint4.css
 * Sprint 4 — Edge Cases protetivos + Empty states refinados.
 *
 * Cobertura:
 *   - Títulos gigantes sem espaço (URLs, hashtags) — word-break / overflow-wrap
 *   - Preços enormes (R$ 99.999) — fluid sizing + protection
 *   - Badges/chips overflow — flex-wrap + max-width
 *   - Empty state com layout decente em mobile
 *   - Skeleton: refinement do blur global existente (depende de img.loaded)
 *
 * Conservador. Sem keyframes agressivos. Sem animações contínuas.
 */

/* ==========================================================
   EDGE CASES — proteção contra overflow horizontal
   ========================================================== */

/* Título do card: já tem line-clamp 2; adiciona word-break pra strings sem espaço */
.deal-title {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Preço gigante (5+ dígitos) — manter mas reduzir size se ultrapassar */
.deal-price {
  word-break: keep-all;
  white-space: nowrap;
  max-width: 100%;
}
.deal-price-row {
  min-width: 0;            /* permite shrink em flex container */
  overflow: hidden;
}

/* Tags/chips dentro do card: wrap em vez de overflow */
.deal-tags {
  flex-wrap: wrap;
  min-width: 0;
}
.deal-tag {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Title da oferta (h1 em oferta.php) — proteção idêntica */
.offer-title {
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Price-box em oferta.php: preço enorme protegido */
.price-main {
  word-break: keep-all;
  white-space: nowrap;
}

/* Store-row: wrap dos badges */
.store-row {
  flex-wrap: wrap;
  min-width: 0;
}

/* ==========================================================
   EMPTY STATE — melhor layout em mobile + CTAs múltiplos
   ========================================================== */
.empty-state-v2 {
  text-align: center;
  padding: 48px 20px;
  background: var(--surface, #fff);
  border-radius: var(--radius-lg, 16px);
  border: 1px dashed var(--line-2, #CBD5E1);
  margin: 24px 0;
}
.empty-state-v2 .es-icon {
  font-size: 56px;
  color: var(--ink-3, #64748B);
  margin-bottom: 12px;
  line-height: 1;
}
.empty-state-v2 h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #0F172A);
  margin-bottom: 6px;
  font-family: 'Bricolage Grotesque', sans-serif;
  letter-spacing: -0.01em;
}
.empty-state-v2 p {
  font-size: 14px;
  color: var(--ink-2, #334155);
  line-height: 1.5;
  margin-bottom: 18px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.empty-state-v2 .es-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}
.empty-state-v2 .es-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--eco-r-full, 9999px);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  min-height: var(--eco-touch-min, 48px);
  transition: transform var(--eco-d-fast, 150ms) var(--eco-ease-premium, cubic-bezier(0.23, 1, 0.32, 1));
}
.empty-state-v2 .es-btn-primary {
  background: var(--red, #E11D48);
  color: #fff;
}
.empty-state-v2 .es-btn-primary:hover { background: var(--red-dark, #BE123C); }
.empty-state-v2 .es-btn-secondary {
  background: var(--surface-2, #F8FAFC);
  color: var(--ink-2, #334155);
  border: 1px solid var(--line, #E2E8F0);
}
.empty-state-v2 .es-btn:active { transform: scale(0.97); }

.empty-state-v2 .es-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 14px;
}
.empty-state-v2 .es-sugg-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  background: var(--surface-2, #F8FAFC);
  color: var(--ink-2, #334155);
  border: 1px solid var(--line, #E2E8F0);
  border-radius: var(--eco-r-full, 9999px);
  text-decoration: none;
}
.empty-state-v2 .es-sugg-chip:hover {
  border-color: var(--orange, #FF6B35);
  color: var(--orange, #FF6B35);
}

@media (max-width: 480px) {
  .empty-state-v2 { padding: 36px 16px; }
  .empty-state-v2 h3 { font-size: 16px; }
  .empty-state-v2 .es-icon { font-size: 48px; }
}

/* ==========================================================
   SKELETON refinement — depende do blur global em header.php
   ========================================================== */
/* Garante que cards sem imagem (fallback icon) tenham altura mínima
   pra evitar layout shift quando imagem chega depois */
.deal-card .deal-img {
  min-height: 0;
  background: var(--surface-2, #F8FAFC);
}
.deal-card .deal-img i.ti-shopping-bag {
  color: var(--ink-3, #64748B);
  opacity: 0.5;
}

/* === sprint7.css === */
/**
 * /assets/css/sprint7.css
 * Sprint 7 — a11y refinements + Mandatory Self-Review.
 *
 * Inclui:
 *   - .skip-link  → "Pular para conteúdo principal" (teclado)
 *   - .sr-only    → texto visível só pra screen readers
 *   - Refinement de focus em formulários
 *   - Aria states visíveis (hover/focus pra leitores)
 */

/* ==========================================================
   SKIP LINK — primeiro tab navega aqui, oculto até foco
   ========================================================== */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  background: var(--ink, #0F172A);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-sm, 8px);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  z-index: 100000;
  transition: top var(--eco-d-fast, 150ms) var(--eco-ease-premium, cubic-bezier(0.23, 1, 0.32, 1));
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  outline: 3px solid var(--orange, #FF6B35);
  outline-offset: 2px;
}

/* ==========================================================
   SR-ONLY — texto invisível visualmente, lido por screen reader
   ========================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================
   FORMS — focus refinement
   Tornar focus em campos de form mais óbvio (a11y + UX premium)
   ========================================================== */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--orange, #FF6B35);
  outline-offset: 1px;
  border-color: var(--orange, #FF6B35) !important;
}

/* ==========================================================
   ARIA pressed/expanded — feedback visual claro
   ========================================================== */
[aria-pressed="true"] {
  background: var(--orange-light, #FFF4ED);
  color: var(--orange, #FF6B35);
}
[aria-expanded="true"] > .ti-chevron-down,
[aria-expanded="true"] > i.ti-chevron-down {
  transform: rotate(180deg);
  transition: transform var(--eco-d-fast, 150ms) var(--eco-ease-premium, cubic-bezier(0.23, 1, 0.32, 1));
}

/* ==========================================================
   IMAGENS sem alt — destaque dev (debug only, sutil)
   Removível pra produção; ajuda admin notar quando esqueceu alt.
   Comentado por padrão.
   ========================================================== */
/*
img:not([alt]) {
  outline: 3px dashed #DC2626;
}
*/

/* ==========================================================
   REDUCED MOTION — garante que skip-link funcione sem transition
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}