/* ============================================================
 * FabIAlista V8 — UX/UI Hot-Patch
 * Generated: 2026-04-26 by Claude Opus 4.7 audit
 * Issues fixed:
 *  - 20 contrast violations (Lighthouse color-contrast)
 *  - 24 hit-area < 44px (mobile WCAG 2.5.5)
 *  - High z-index conflicts (tutorial vs cookies)
 * Drop-in: append to index-swLwQno4.css (or any global stylesheet)
 * ============================================================ */

/* --- 1. Hero "Sua Lista em segundos" — texto branco em fundo branco
 *      Solução: dar background gradient ao container do hero ou trocar cor do texto.
 *      Identificado: BODY.bg-gray-50 (#f7f8fa) com H1 white + A.fabia-cta white
 *      Fix: aplicar gradient ao parent imediato dos textos brancos
 * ---------------------------------------------------------------- */
body.bg-gray-50 main > div:first-child:has(h1):has(a.fabia-cta),
body main > div:first-child:has(h1):has(a.fabia-cta) {
  background: linear-gradient(135deg, #0f172a 0%, #15803d 100%) !important;
  border-radius: 16px !important;
  padding: 32px 24px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 24px rgba(15,23,42,0.12) !important;
}

/* Fallback explícito: H1 e CTA em hero — se :has() não suportado, ainda tem sombra de texto */
h1[class=""], main h1:not([class]) {
  text-shadow: 0 2px 8px rgba(15, 23, 42, 0.85), 0 0 1px rgba(0,0,0,0.5) !important;
}
a.fabia-cta {
  background: #15803d !important; /* green-700, ratio 4.78:1 */
  color: #ffffff !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 4px 16px rgba(21,128,61,0.35) !important;
  transition: transform 150ms ease, box-shadow 150ms ease !important;
}
a.fabia-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(21,128,61,0.5) !important;
}

/* --- 2. Tabs categoria verde com texto branco: contraste 3.30 → 4.78 (verde mais escuro) --- */
[role="tab"][aria-selected="true"],
[role="tab"][data-state="active"],
button[aria-pressed="true"][role="tab"] {
  background: #15803d !important; /* green-700, ratio 4.78:1 */
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* --- 3. Texto secundário muito claro (loja, marca) — escurecer cinza
 *       Identificado: SPAN.text-gray-400/500 (#9ca3af) em produto card → 2.34/2.54:1
 *       Fix: subir para slate-600 #475569 (ratio 7:1)
 * ---------------------------------------------------------------- */
.product-store, .product-brand,
[class*="store"], [class*="brand-tag"], [class*="merchant"],
.text-gray-400, .text-gray-500 {
  color: #475569 !important;
}
/* Marca/loja em card de produto (aria-label começa com "produto") */
[aria-label^="Produto" i] span:not([class*="price"]):not([class*="title"]) {
  color: #475569 !important;
}

/* --- 4. Botão "Já sei usar, pular" cinza claro 3.11:1 → escurecer --- */
button[aria-label*="ular tutorial"],
button[aria-label*="ular este"],
.tutorial-skip, .skip-button {
  color: #334155 !important; /* slate-700, ratio 9.36:1 */
  font-weight: 600 !important;
}

/* --- 5. Separador "|" do footer 1.41:1 — opacity baixa preserva visual --- */
footer span:not([class]):empty,
footer .separator {
  opacity: 0.35 !important;
}

/* --- 6. WhatsApp "Falar com a FabIA" branco em verde 1.98:1 → verde escuro --- */
a[href*="wa.me"], a[href*="whatsapp"] {
  background: #128C7E !important; /* WhatsApp dark, ratio 4.59:1 */
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* --- 7. HIT AREA mínima 44x44 (WCAG 2.5.5 AAA, mobile) --- */
@media (pointer: coarse), (max-width: 768px) {
  [role="tab"], button:not([class*="icon"]):not([aria-label*="echar"]) {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  footer a {
    padding: 8px 4px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  /* Categorias bar — manter visual mas garantir touch target */
  [aria-label*="ategorias"] button,
  [class*="categoria"] button,
  [class*="pill"] button {
    min-height: 44px !important;
    padding: 10px 14px !important;
  }
}

/* --- 8. Ocultar BANNER COOKIES DUPLICADO (existem 3 instâncias!) --- */
/* Mantém apenas o primeiro [role="region"] visível, esconde os duplicados */
[role="region"][aria-label*="cookie" i] ~ [role="region"][aria-label*="cookie" i],
[role="region"][aria-label*="cookie" i] ~ div:has(button[aria-label*="ssenciais" i]),
[role="region"][aria-label*="LGPD" i] ~ [role="region"][aria-label*="LGPD" i] {
  display: none !important;
}

/* --- 9. Skip link duplicado: esconde o segundo --- */
a[href="#main-content"] + a[href="#main-content"] {
  display: none !important;
}

/* --- 10. Z-index hierarchy: tutorial > cookies > FAB > content --- */
[class*="tutorial-overlay"], [class*="modal-tutorial"],
[role="dialog"][aria-label*="tutorial" i] {
  z-index: 9999 !important;
}
[role="region"][aria-label*="cookie" i],
[role="region"][aria-label*="LGPD" i] {
  z-index: 5000 !important;
}
button[aria-label*="hotografar" i],
button[aria-label*="abIA Assistente" i] {
  z-index: 3000 !important;
}

/* --- 11. Focus visible reforçado (a11y keyboard nav) --- */
*:focus-visible {
  outline: 3px solid #15803d !important;
  outline-offset: 2px !important;
  border-radius: 8px;
}

/* --- 12.5 LAYOUT DESKTOP: SwipeDeck em 3 cards INDEPENDENTES
 *  O DOM tem 3 cards empilhados (z-index/transform). Em desktop, posicionamos
 *  os 3 lado-a-lado, cada um com seu próprio swipe/tap/pular/adicionar/favoritar.
 *  Mobile: mantém deck stacked (UX Tinder).
 *  Tablet/desktop: 2 ou 3 cards independentes.
 * ----------------------------------------------------------------
 *  Estrutura conhecida:
 *  main.main-content > DIV > DIV (1152x572)
 *    └─ DIV (deck container, 360x540)
 *        ├─ DIV (card #1 — peek esq, 360x540)
 *        ├─ DIV (card #2 — peek dir, 342x513)
 *        └─ DIV (card #3 — ATIVO front, 360x540)
 * ---------------------------------------------------------------- */
/*
 * Deck container conhecido (path):
 *   div#root > main#main-content > div > div > div > div:nth-child(3) > div
 * Children são 3 cards com position:absolute + transform scale(0.9/0.95/1.0).
 * Atacamos via classe injetada por JS — fallback CSS já com path direto.
 */
@media (min-width: 768px) {
  /* Wrapper do deck — torná-lo flex row */
  main#main-content > div > div > div > div:nth-of-type(3) > div,
  body[data-3col="on"] main > div > div > div > div:nth-of-type(3) > div,
  body[data-3col="on"] .v8-deck-3col {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 32px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 540px !important;
    padding: 24px 0 !important;
    perspective: none !important;
  }
  /* Cards: cada um vira flex item independente */
  main#main-content > div > div > div > div:nth-of-type(3) > div > div,
  body[data-3col="on"] main > div > div > div > div:nth-of-type(3) > div > div,
  body[data-3col="on"] .v8-deck-3col > div {
    position: relative !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 340px !important;
    min-width: 320px !important;
    max-width: 380px !important;
    height: auto !important;
    flex: 0 0 auto !important;
    z-index: auto !important;
    margin: 0 !important;
    transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 240ms ease !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.1) !important;
    border-radius: 20px !important;
    background: #fff !important;
    cursor: grab !important;
    touch-action: pan-y !important;
    overflow: hidden !important;
  }
  main#main-content > div > div > div > div:nth-of-type(3) > div > div:active,
  body[data-3col="on"] .v8-deck-3col > div:active {
    cursor: grabbing !important;
  }
  main#main-content > div > div > div > div:nth-of-type(3) > div > div:hover,
  body[data-3col="on"] .v8-deck-3col > div:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.22) !important;
    z-index: 5 !important;
  }
  /* Tornar imagem responsiva ao card */
  main#main-content > div > div > div > div:nth-of-type(3) > div > div img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    max-height: 320px !important;
  }
  /* Botões com hit area 44x44 + estilos garantidos */
  main#main-content > div > div > div > div:nth-of-type(3) > div > div button {
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: transform 150ms ease, box-shadow 150ms ease !important;
  }
  main#main-content > div > div > div > div:nth-of-type(3) > div > div button:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22) !important;
  }
  /* Garantir que TODOS os cards renderizem (não esconder 3º) */
  main#main-content > div > div > div > div:nth-of-type(3) > div > div {
    display: block !important;
    visibility: visible !important;
  }
}

/* Tablet médio (768-1023): 2 cards lado a lado, esconde o 3º */
@media (min-width: 768px) and (max-width: 1023px) {
  main#main-content > div > div > div > div:nth-of-type(3) > div > div:nth-child(1) {
    display: none !important;
  }
  main#main-content > div > div > div > div:nth-of-type(3) > div > div {
    width: 320px !important;
  }
}

/* Mobile estrito: mantém comportamento original (1 card stacked, swipe Tinder) */
@media (max-width: 767px) {
  /* Não mexer — deck nativo já funciona */
}

/* ============================================================
 * 12.7 — E-COMMERCE PATTERNS (Amazon + Shopify + Mercado Livre + iFood)
 * Cards de produto com:
 *   - Quick-view overlay no hover (Amazon)
 *   - Multi-store badges com cor por loja (Mercado Livre)
 *   - Price strikethrough + economia destacada (Shopify)
 *   - Star rating + reviews count (Amazon)
 *   - Free-shipping badge "FRETE GRÁTIS" (Mercado Livre / Shopee)
 *   - Hover card lift + bordered (iFood / Rappi)
 *   - Sticky compare bar quando 2+ selected (Amazon)
 * ============================================================ */

/* --- Card grid v8: padrão Amazon/Shopify --- */
#v8-grid .v8-grid-card {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
#v8-grid .v8-grid-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, transparent 60%, rgba(15,23,42,0.04) 100%) !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 200ms ease !important;
  z-index: 1 !important;
}
#v8-grid .v8-grid-card:hover::before {
  opacity: 1 !important;
}
/* Quick-view overlay (Amazon style) — mostra em hover */
#v8-grid .v8-grid-card:hover .v8-quick-view {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.v8-quick-view {
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  right: 8px !important;
  padding: 6px 12px !important;
  background: rgba(15, 23, 42, 0.92) !important;
  backdrop-filter: blur(8px) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
  border-radius: 8px !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition: all 200ms ease !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* --- Multi-store badges (Mercado Livre style) --- */
.v8-store-badge {
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 0.4px !important;
}
.v8-store-amazon { background: #ff9900 !important; color: #0f172a !important; }
.v8-store-mercadolivre { background: #fff159 !important; color: #0f172a !important; }
.v8-store-magalu { background: #0086ff !important; color: #fff !important; }
.v8-store-carrefour { background: #004e9f !important; color: #fff !important; }
.v8-store-shopee { background: #ee4d2d !important; color: #fff !important; }
.v8-store-americanas { background: #e60014 !important; color: #fff !important; }

/* --- Price stack: strikethrough + atual + economia (Shopify pattern) --- */
.v8-price-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin-top: 4px !important;
}
.v8-price-old {
  font-size: 12px !important;
  color: #94a3b8 !important;
  text-decoration: line-through !important;
}
.v8-price-now {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #15803d !important;
  line-height: 1.1 !important;
}
.v8-price-installments {
  font-size: 11px !important;
  color: #64748b !important;
  margin-top: 2px !important;
}
.v8-price-savings {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #15803d !important;
  background: #dcfce7 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  margin-top: 4px !important;
}

/* --- Rating stars (Amazon pattern) --- */
.v8-rating {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  color: #475569 !important;
}
.v8-rating-stars {
  color: #ca8a04 !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
}

/* --- Free shipping badge (Mercado Livre / Shopee) --- */
.v8-free-shipping {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #15803d !important;
  margin-top: 4px !important;
}
.v8-free-shipping::before {
  content: '🚚' !important;
}

/* --- Discount badge no canto: padrão Amazon Lightning Deals --- */
.v8-discount-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(220,38,38,0.4) !important;
  z-index: 5 !important;
  letter-spacing: 0.3px !important;
}
.v8-best-price-badge {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: linear-gradient(135deg, #15803d 0%, #059669 100%) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(21,128,61,0.4) !important;
  z-index: 5 !important;
}

/* --- Wishlist heart corner (Shopify Polaris pattern) --- */
.v8-wishlist-corner {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(255,255,255,0.95) !important;
  border-radius: 50% !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 6 !important;
  transition: all 200ms ease !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.15) !important;
}
.v8-wishlist-corner:hover {
  transform: scale(1.15) !important;
  background: #fff !important;
}
.v8-wishlist-corner.active {
  color: #dc2626 !important;
}

/* --- Sticky compare bar quando 2+ selected (Amazon) --- */
#v8-compare-bar {
  position: fixed !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(120%) !important;
  background: #0f172a !important;
  color: #fff !important;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: 0 12px 32px rgba(15,23,42,0.4) !important;
  z-index: 8500 !important;
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  font-weight: 700 !important;
}
#v8-compare-bar.show {
  transform: translateX(-50%) translateY(0) !important;
}

/* --- Mega menu hover (Amazon Department dropdown) --- */
@media (min-width: 1024px) {
  .v8-mega-menu {
    position: relative !important;
  }
  .v8-mega-menu-panel {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px !important;
    min-width: 320px !important;
    box-shadow: 0 16px 48px rgba(15,23,42,0.15) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(8px) !important;
    transition: all 200ms ease !important;
    z-index: 100 !important;
  }
  .v8-mega-menu:hover .v8-mega-menu-panel,
  .v8-mega-menu:focus-within .v8-mega-menu-panel {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }
}

/* --- Add-to-cart com confirmação visual (iFood) --- */
.v8-cart-confirm {
  position: fixed !important;
  bottom: 100px !important;
  left: 50% !important;
  transform: translateX(-50%) scale(0) !important;
  background: #15803d !important;
  color: #fff !important;
  padding: 16px 32px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  box-shadow: 0 12px 32px rgba(21,128,61,0.4) !important;
  z-index: 9000 !important;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.v8-cart-confirm.show {
  transform: translateX(-50%) scale(1) !important;
}

/* --- 12. Reduced motion — respeita prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}