/* ============================================================ */
/* Oportunidades Page Redesign v2.0                             */
/* Apenas mudanças visuais — NÃO altera lógica/funcionalidade   */
/* Escopo: Só afeta elementos dentro de [data-loc*="OportunidadesPage"] */
/* ============================================================ */

/* ============================================================ */
/* 1. HERO SECTION — Centralizado, mais premium                 */
/* ============================================================ */

/* Hero background — mais suave e elegante */
[data-loc="client/src/pages/OportunidadesPage.tsx:122"] {
  background: linear-gradient(160deg, #FFFBEB 0%, #FFFFFF 40%, #FFF7ED 100%) !important;
  padding-bottom: 0.5rem !important;
  position: relative !important;
}

/* Hero container — centralizar conteúdo */
[data-loc="client/src/pages/OportunidadesPage.tsx:127"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding-top: 1.5rem !important;
  padding-bottom: 1rem !important;
}

/* Botão Voltar — manter à esquerda */
[data-loc="client/src/pages/OportunidadesPage.tsx:128"] {
  align-self: flex-start !important;
  margin-bottom: 1.25rem !important;
}

/* Área do título — centralizar */
[data-loc="client/src/pages/OportunidadesPage.tsx:136"] {
  max-width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

/* Badge "Atualizado automaticamente" — centralizado */
[data-loc="client/src/pages/OportunidadesPage.tsx:137"] {
  justify-content: center !important;
  margin-bottom: 0.75rem !important;
}

/* Ícone do badge — mais destaque */
[data-loc="client/src/pages/OportunidadesPage.tsx:138"] {
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: 0.625rem !important;
}

/* Título H1 — maior e mais impactante */
[data-loc="client/src/pages/OportunidadesPage.tsx:145"] {
  text-align: center !important;
  font-size: 1.75rem !important;
  line-height: 1.15 !important;
  margin-bottom: 0.5rem !important;
  letter-spacing: -0.02em !important;
}

@media (min-width: 640px) {
  [data-loc="client/src/pages/OportunidadesPage.tsx:145"] {
    font-size: 2.25rem !important;
  }
}

@media (min-width: 768px) {
  [data-loc="client/src/pages/OportunidadesPage.tsx:145"] {
    font-size: 2.75rem !important;
  }
}

/* Subtítulo — centralizado e mais legível */
[data-loc="client/src/pages/OportunidadesPage.tsx:148"] {
  text-align: center !important;
  max-width: 32rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  font-size: 0.9375rem !important;
  line-height: 1.6 !important;
  color: #64748b !important;
}

@media (min-width: 640px) {
  [data-loc="client/src/pages/OportunidadesPage.tsx:148"] {
    font-size: 1rem !important;
  }
}

/* ============================================================ */
/* 1.5. STATS DASHBOARD — Cards premium (injetados pelo JS)     */
/* ============================================================ */

.opr-stats-dashboard {
  display: flex !important;
  justify-content: center !important;
  gap: 0.75rem !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.5rem !important;
  flex-wrap: wrap !important;
  padding: 0 1rem !important;
}

.opr-stat-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.875rem 1.5rem !important;
  border-radius: 1rem !important;
  min-width: 8.5rem !important;
  flex: 1 !important;
  max-width: 11rem !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.opr-stat-card:hover {
  transform: translateY(-2px) !important;
}

/* Card Oportunidades — Amber/Dourado */
.opr-stat-oportunidades {
  background: linear-gradient(145deg, #FFFBEB 0%, #FEF3C7 100%) !important;
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.12), 0 1px 3px rgba(0,0,0,0.04) !important;
}

.opr-stat-oportunidades:hover {
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.2), 0 2px 6px rgba(0,0,0,0.04) !important;
}

/* Card Desconto — Verde */
.opr-stat-desconto {
  background: linear-gradient(145deg, #F0FDF4 0%, #DCFCE7 100%) !important;
  box-shadow: 0 2px 12px rgba(22, 163, 74, 0.1), 0 1px 3px rgba(0,0,0,0.04) !important;
}

.opr-stat-desconto:hover {
  box-shadow: 0 4px 20px rgba(22, 163, 74, 0.18), 0 2px 6px rgba(0,0,0,0.04) !important;
}

.opr-stat-icon {
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: 0.625rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0.375rem !important;
}

.opr-stat-oportunidades .opr-stat-icon {
  background: rgba(245, 158, 11, 0.12) !important;
}

.opr-stat-desconto .opr-stat-icon {
  background: rgba(22, 163, 74, 0.1) !important;
}

.opr-stat-number {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: 1.625rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  margin-bottom: 0.125rem !important;
}

.opr-stat-oportunidades .opr-stat-number {
  color: #d97706 !important;
}

.opr-stat-desconto .opr-stat-number {
  color: #16a34a !important;
}

.opr-stat-label {
  font-size: 0.6875rem !important;
  color: #64748b !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  line-height: 1.2 !important;
}

/* ============================================================ */
/* 1.6. SCROLL INDICATORS — Incentivos visuais para rolar       */
/* ============================================================ */

.opr-scroll-indicator {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0.75rem 0 0.25rem !important;
  gap: 0.25rem !important;
  opacity: 0.85 !important;
  transition: opacity 0.3s ease !important;
}

.opr-scroll-indicator:hover {
  opacity: 1 !important;
}

.opr-scroll-arrow {
  animation: opr-bounce-down 1.8s ease-in-out infinite !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 50% !important;
  background: rgba(245, 158, 11, 0.08) !important;
}

.opr-scroll-text {
  font-size: 0.6875rem !important;
  color: #92400e !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

@keyframes opr-bounce-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* Mid-scroll hint — separador elegante */
.opr-mid-scroll-hint {
  padding: 0.5rem 0 !important;
  opacity: 0 !important;
  animation: opr-fade-in 0.6s ease forwards !important;
  animation-delay: 0.3s !important;
}

@keyframes opr-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================ */
/* 2. FILTROS — Centralizados e mais acessíveis                 */
/* ============================================================ */

/* Filtros — centralizados */
[data-loc="client/src/pages/OportunidadesPage.tsx:154"] {
  justify-content: center !important;
  margin-top: 1.5rem !important;
  gap: 0.625rem !important;
}

/* Botões de filtro — maiores e mais acessíveis (48px touch target) */
[data-loc="client/src/pages/OportunidadesPage.tsx:163"] {
  min-height: 2.75rem !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: 0.75rem !important;
  font-size: 0.9375rem !important;
  font-weight: 600 !important;
  gap: 0.5rem !important;
  transition: all 0.2s ease !important;
}

/* Stats row — centralizada com mais destaque */
[data-loc="client/src/pages/OportunidadesPage.tsx:181"] {
  justify-content: center !important;
  margin-top: 1.25rem !important;
  gap: 1.25rem !important;
  flex-wrap: wrap !important;
}

/* ============================================================ */
/* 3. CARDS DE VEÍCULOS — Mais limpos e legíveis                */
/* ============================================================ */

/* Card container — sombra mais suave, bordas mais arredondadas */
[data-loc="client/src/pages/OportunidadesPage.tsx:382"] {
  border-radius: 1rem !important;
  border: 1px solid #f1f5f9 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
}

[data-loc="client/src/pages/OportunidadesPage.tsx:382"]:hover {
  border-color: #fbbf24 !important;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.08), 0 4px 10px rgba(0,0,0,0.04) !important;
  transform: translateY(-2px) !important;
}

/* Foto do card — mais alta no mobile */
[data-loc="client/src/pages/OportunidadesPage.tsx:389"] {
  height: 11rem !important;
}

@media (min-width: 640px) {
  [data-loc="client/src/pages/OportunidadesPage.tsx:389"] {
    height: 12rem !important;
  }
}

/* Rank badge top 3 — mais destaque */
[data-loc="client/src/pages/OportunidadesPage.tsx:399"] {
  width: 2.25rem !important;
  height: 2.25rem !important;
  font-size: 0.875rem !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

/* Badge de desconto — mais impactante */
[data-loc="client/src/pages/OportunidadesPage.tsx:413"] {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 0.625rem !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35) !important;
}

[data-loc="client/src/pages/OportunidadesPage.tsx:416"] {
  font-size: 0.9375rem !important;
  font-weight: 800 !important;
}

/* Texto "mais barato" no badge */
[data-loc="client/src/pages/OportunidadesPage.tsx:418"] {
  font-size: 0.5625rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
}

/* Leiloeira badge — mais legível */
[data-loc="client/src/pages/OportunidadesPage.tsx:424"] {
  font-size: 0.6875rem !important;
  padding: 0.25rem 0.625rem !important;
  border-radius: 0.375rem !important;
  letter-spacing: 0.02em !important;
}

/* Área de conteúdo do card — mais espaçamento */
[data-loc="client/src/pages/OportunidadesPage.tsx:442"] {
  padding: 1rem !important;
}

@media (min-width: 640px) {
  [data-loc="client/src/pages/OportunidadesPage.tsx:442"] {
    padding: 1.125rem !important;
  }
}

/* Nome do veículo — mais legível, sem CAPS */
[data-loc="client/src/pages/OportunidadesPage.tsx:443"] {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 0.25rem !important;
  text-transform: capitalize !important;
}

@media (min-width: 640px) {
  [data-loc="client/src/pages/OportunidadesPage.tsx:443"] {
    font-size: 1.0625rem !important;
  }
}

/* Info do veículo (ano, leiloeira, local) — mais legível */
[data-loc="client/src/pages/OportunidadesPage.tsx:449"] {
  font-size: 0.75rem !important;
  margin-bottom: 0.75rem !important;
  color: #94a3b8 !important;
}

/* Grid de preços — mais destaque */
[data-loc="client/src/pages/OportunidadesPage.tsx:454"] {
  gap: 0.5rem !important;
  margin-bottom: 0.625rem !important;
}

/* Box "Preço agora" */
[data-loc="client/src/pages/OportunidadesPage.tsx:455"] {
  border-radius: 0.625rem !important;
  padding: 0.625rem !important;
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
}

/* Label "Preço agora" */
[data-loc="client/src/pages/OportunidadesPage.tsx:456"] {
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  color: #16a34a !important;
  letter-spacing: 0.06em !important;
}

/* Valor do preço atual — GRANDE e verde */
[data-loc="client/src/pages/OportunidadesPage.tsx:457"] {
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  color: #16a34a !important;
}

@media (min-width: 640px) {
  [data-loc="client/src/pages/OportunidadesPage.tsx:457"] {
    font-size: 1.25rem !important;
  }
}

/* Box "Preço normal" (FIPE) */
[data-loc="client/src/pages/OportunidadesPage.tsx:462"] {
  border-radius: 0.625rem !important;
  padding: 0.625rem !important;
}

/* Label "Preço normal" */
[data-loc="client/src/pages/OportunidadesPage.tsx:463"] {
  font-size: 0.625rem !important;
  font-weight: 600 !important;
}

/* Valor FIPE — com riscado */
[data-loc="client/src/pages/OportunidadesPage.tsx:464"] {
  font-size: 0.8125rem !important;
  text-decoration: line-through !important;
  opacity: 0.7 !important;
}

/* Box de economia — mais impactante */
[data-loc="client/src/pages/OportunidadesPage.tsx:480"] {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5) !important;
  border: 1px solid #86efac !important;
  border-radius: 0.75rem !important;
  padding: 0.625rem 0.75rem !important;
  margin-bottom: 0.75rem !important;
}

/* "Você economiza:" — mais destaque */
[data-loc="client/src/pages/OportunidadesPage.tsx:483"] {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
}

/* "XX% mais barato" */
[data-loc="client/src/pages/OportunidadesPage.tsx:486"] {
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
}

/* Tags de localização/dano — mais legíveis */
[data-loc="client/src/pages/OportunidadesPage.tsx:494"] {
  gap: 0.5rem !important;
  margin-bottom: 0.75rem !important;
  flex-wrap: wrap !important;
}

/* ============================================================ */
/* 4. BOTÕES DE AÇÃO — Simplificados e mais acessíveis          */
/* ============================================================ */

/* Container dos botões de ação */
[data-loc="client/src/pages/OportunidadesPage.tsx:500"] {
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

/* Botão "Detalhes" — transformar no botão principal */
[data-loc="client/src/pages/OportunidadesPage.tsx:509"] {
  flex: 1 !important;
  min-height: 2.75rem !important;
  border-radius: 0.625rem !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.25) !important;
  transition: all 0.2s ease !important;
}

[data-loc="client/src/pages/OportunidadesPage.tsx:509"]:hover {
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Botão "Custos" — secundário */
[data-loc="client/src/pages/OportunidadesPage.tsx:519"] {
  min-height: 2.75rem !important;
  border-radius: 0.625rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  border: 1.5px solid #e2e8f0 !important;
  background: white !important;
  transition: all 0.2s ease !important;
}

[data-loc="client/src/pages/OportunidadesPage.tsx:519"]:hover {
  border-color: #f59e0b !important;
  background: #fffbeb !important;
}

/* Botão "Ver Lote" — terciário, discreto */
[data-loc="client/src/pages/OportunidadesPage.tsx:530"] {
  min-height: 2.75rem !important;
  border-radius: 0.625rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  border: 1.5px solid #e2e8f0 !important;
  background: white !important;
  transition: all 0.2s ease !important;
}

[data-loc="client/src/pages/OportunidadesPage.tsx:530"]:hover {
  border-color: #0559d2 !important;
  color: #0559d2 !important;
  background: #eff6ff !important;
}

/* ============================================================ */
/* 5. CTA FINAL — Mais premium                                  */
/* ============================================================ */

[data-loc="client/src/pages/OportunidadesPage.tsx:323"] {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 50%, #FFF7ED 100%) !important;
  border: 1px solid #fcd34d !important;
  border-radius: 1.25rem !important;
  padding: 2rem !important;
}

@media (min-width: 768px) {
  [data-loc="client/src/pages/OportunidadesPage.tsx:323"] {
    padding: 3rem !important;
  }
}

[data-loc="client/src/pages/OportunidadesPage.tsx:324"] {
  font-size: 1.375rem !important;
}

@media (min-width: 768px) {
  [data-loc="client/src/pages/OportunidadesPage.tsx:324"] {
    font-size: 1.625rem !important;
  }
}

/* ============================================================ */
/* 6. GRID LAYOUT — Melhor responsividade mobile                */
/* ============================================================ */

/* Grid de cards — gap maior no mobile */
[data-loc="client/src/pages/OportunidadesPage.tsx:212"] {
  gap: 1rem !important;
}

@media (min-width: 640px) {
  [data-loc="client/src/pages/OportunidadesPage.tsx:212"] {
    gap: 1.25rem !important;
  }
}

/* Grid de cards bloqueados */
[data-loc="client/src/pages/OportunidadesPage.tsx:261"] {
  gap: 1rem !important;
}

@media (min-width: 640px) {
  [data-loc="client/src/pages/OportunidadesPage.tsx:261"] {
    gap: 1.25rem !important;
  }
}

/* ============================================================ */
/* 7. INTERAÇÃO BUTTONS — Mais acessíveis                       */
/* ============================================================ */

/* Like button */
[data-loc="client/src/components/InteractionButtons.tsx:31"] {
  min-height: 2.25rem !important;
  min-width: 2.25rem !important;
  border-radius: 0.5rem !important;
  padding: 0.375rem 0.5rem !important;
}

/* Favorite button */
[data-loc="client/src/components/InteractionButtons.tsx:85"] {
  min-height: 2.25rem !important;
  min-width: 2.25rem !important;
  border-radius: 0.5rem !important;
  padding: 0.375rem 0.5rem !important;
}

/* ============================================================ */
/* 8. CARDBLURLOCK — Bloqueio mais suave                        */
/* ============================================================ */

/* Container do blur */
[data-loc="client/src/components/CardBlurLock.tsx:78"] {
  border-radius: 1rem !important;
}

/* Overlay do blur — mais suave */
[data-loc="client/src/components/CardBlurLock.tsx:92"] {
  background: rgba(255, 255, 255, 0.4) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

/* Botão de desbloquear — mais acessível */
[data-loc="client/src/components/CardBlurLock.tsx:93"] {
  padding: 0.75rem 1.5rem !important;
  border-radius: 0.75rem !important;
  font-size: 0.9375rem !important;
  min-height: 3rem !important;
  box-shadow: 0 4px 15px rgba(5, 89, 210, 0.3) !important;
}

/* ============================================================ */
/* 9. LOADING STATE — Mais elegante                             */
/* ============================================================ */

[data-loc="client/src/pages/OportunidadesPage.tsx:200"] {
  padding: 5rem 0 !important;
}

[data-loc="client/src/pages/OportunidadesPage.tsx:202"] {
  font-size: 0.9375rem !important;
  color: #64748b !important;
}

/* ============================================================ */
/* 10. ACESSIBILIDADE — Touch targets e legibilidade            */
/* ============================================================ */

/* Garantir touch target mínimo de 44px em todos os botões interativos */
@media (max-width: 768px) {
  [data-loc*="OportunidadesPage"] button,
  [data-loc*="OportunidadesPage"] a {
    min-height: 2.75rem !important;
  }
  
  /* Texto base maior no mobile para idosos */
  [data-loc*="OportunidadesPage"] p {
    font-size: max(0.8125rem, inherit) !important;
  }
}

/* ============================================================ */
/* 11. ANIMAÇÕES SUAVES — Micro-interações                      */
/* ============================================================ */

/* Cards aparecem com fade-in suave (complementa Framer Motion) */
[data-loc="client/src/pages/OportunidadesPage.tsx:382"] {
  will-change: transform, box-shadow !important;
}

/* Hover sutil na foto */
[data-loc="client/src/pages/OportunidadesPage.tsx:390"] {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[data-loc="client/src/pages/OportunidadesPage.tsx:389"]:hover [data-loc="client/src/pages/OportunidadesPage.tsx:390"] {
  transform: scale(1.05) !important;
}

/* ============================================================ */
/* 12. PENDING CONFIRMATION BANNER — Mais compacto              */
/* ============================================================ */

/* O banner de confirmação de email dentro da página */
[data-loc*="PendingConfirmationBanner"] {
  border-radius: 0.75rem !important;
  margin-bottom: 1rem !important;
}