/* ============================================================
   MELHORIAS EXPRESS BEBIDAS — Mobile First
   ============================================================ */

/* ---------- GERAL ---------- */
:root {
  --amber-main: #f59e0b;
  --amber-dark: #d97706;
  --tap-min: 44px;
}

* {
  -webkit-tap-highlight-color: rgba(245, 158, 11, 0.15);
}

html {
  scroll-behavior: smooth;
}

/* ---------- IMAGENS DE PRODUTO — fallback bonito quando falha ---------- */
.object-contain {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* Estado "Sem imagem" renderizado pelo JS — melhorar aparência */
.w-full.h-full.flex.items-center.justify-center.text-gray-400.text-xs.bg-gray-100 {
  background: linear-gradient(145deg, #f8faff 0%, #eef2f7 100%) !important;
  color: #94a3b8 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  flex-direction: column;
  gap: 8px;
}

/* ---------- CARDS DE PRODUTO — melhorar legibilidade mobile ---------- */

/* Nome do produto: aumentar de 11px para 12.5px no mobile */
@media (max-width: 639px) {
  /* Título do produto */
  h3.font-semibold {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    min-height: 36px !important;
  }

  /* Texto de desconto (badge OFF) */
  .text-\[9px\] {
    font-size: 9.5px !important;
  }

  /* Card container — dar mais respiro */
  a.rounded-2xl.p-2 {
    padding: 6px !important;
  }
}

/* ---------- BOTÕES DE AÇÃO — tap target mínimo 44px ---------- */
button.bg-amber-400,
button.hover\:bg-amber-500 {
  min-height: var(--tap-min);
  font-size: 13px;
  letter-spacing: 0.01em;
}

@media (max-width: 639px) {
  button.bg-amber-400 {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* ---------- BADGE DE DESCONTO — tornar mais visível ---------- */
.bg-red-500.rounded-full {
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45) !important;
  letter-spacing: -0.02em;
}

/* ---------- SEÇÕES DE CATEGORIA — melhorar cabeçalhos ---------- */
h2.text-xl,
h2.text-2xl {
  letter-spacing: -0.02em;
}

/* ---------- CARDS — sombra e hover mais expressivos ---------- */
a.bg-zinc-50.rounded-2xl {
  transition: box-shadow 0.2s ease, transform 0.15s ease !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

a.bg-zinc-50.rounded-2xl:active {
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
}

@media (hover: hover) {
  a.bg-zinc-50.rounded-2xl:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    transform: translateY(-2px);
    border-color: rgba(245,158,11,0.2) !important;
  }
}

/* ---------- PREÇO — mais destaque ---------- */
p.text-amber-600.font-bold {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---------- SEÇÃO DE COMBOS / OFERTAS ---------- */
/* Os cards de combo usam os mesmos estilos de produto */

/* ---------- ÍCONES DE CATEGORIA ---------- */
/* Círculos de categoria no topo */
.w-12.h-12.rounded-full,
.w-14.h-14.rounded-full {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.group:active .w-12.h-12.rounded-full,
.group:active .w-14.h-14.rounded-full {
  transform: scale(0.92) !important;
}

/* Legenda da categoria */
span.text-\[10px\] {
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* ---------- HERO BANNER ---------- */
section.aspect-\[2\/1\] {
  /* Melhorar a imagem no mobile */
  background-color: #1a1a2e;
}

/* Gradiente do banner mais elaborado */
section.aspect-\[2\/1\] .absolute.inset-x-0.bottom-0 {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.80) 0%,
    rgba(0,0,0,0.40) 60%,
    transparent 100%
  ) !important;
  padding: 16px 20px !important;
}

/* ---------- SCROLL SUAVE NOS PRODUTOS ---------- */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: 16px;
}

/* Indicador de scroll em mobile */
@media (max-width: 639px) {
  .overflow-x-auto.scrollbar-hide {
    /* Adicionar padding no final para indicar que tem mais */
    padding-right: 32px !important;
  }
}

/* ---------- BARRA SUPERIOR DE INFO ---------- */
/* Melhorar legibilidade da barra de CNPJ */
.bg-amber-50.border-b {
  border-bottom-color: #fde68a !important;
}

/* ---------- SEÇÃO "QUEM SOMOS" ---------- */
section p.text-gray-600.leading-relaxed {
  line-height: 1.75 !important;
}

/* ---------- FOOTER ---------- */
footer.bg-\[\#1a1a1a\] {
  border-top: 3px solid var(--amber-main);
}

/* ---------- TRANSPARÊNCIA / TRUST SECTION ---------- */
.bg-white.rounded-2xl.border.border-gray-200 {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.bg-white.rounded-2xl.border.border-gray-200:hover {
  box-shadow: 0 4px 16px rgba(245,158,11,0.15) !important;
  border-color: rgba(245,158,11,0.3) !important;
}

/* ---------- NAVEGAÇÃO MOBILE STICKY ---------- */
/* Garantir que a barra inferior do footer não cubra conteúdo */
@media (max-width: 767px) {
  .pb-20 {
    padding-bottom: 80px !important;
  }
}

/* ---------- CARRINHO — melhorar usabilidade mobile ---------- */

/* Botões de quantidade no carrinho (+/-) - aumentar para 44px de tap target */
@media (max-width: 767px) {
  /* Botões w-7 h-7 (28px) são pequenos demais */
  button.w-7.h-7.rounded.bg-gray-700 {
    width: 36px !important;
    height: 36px !important;
  }

  /* Botão de Finalizar Pedido */
  a[href="/checkout"] {
    min-height: 52px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
  }
}

/* MiniCart bar de bottom — leve sombra superior */
.md\:hidden.fixed.bottom-0.left-0.right-0.z-40 {
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

/* ---------- HEADER DINÂMICO — melhorias da barra de busca ---------- */

/* Dropdown de resultados de busca */
@media (max-width: 639px) {
  /* Garantir que a barra de busca não seja muito estreita */
  input[type="text"][placeholder] {
    font-size: 16px !important; /* Evita zoom automático no iOS */
    border-radius: 12px;
  }
}

/* ---------- ANIMAÇÕES LEVES ---------- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Suave entrada das seções */
section > .container {
  animation: fadeInUp 0.4s ease both;
}

/* ---------- TOAST NOTIFICATIONS ---------- */
/* Manter toasts acima do MiniCart no mobile */
[class*="Toastify"],
[class*="toast"] {
  z-index: 999 !important;
}

/* ---------- MODO ESCURO BÁSICO (respeitar preferência do sistema) ---------- */
@media (prefers-color-scheme: dark) {
  /* Não forçar dark mode — o site usa temas claros por padrão */
  /* Apenas melhorar contraste em telas escuras */
  .bg-zinc-50 {
    background-color: #fafafa;
  }
}

/* ---------- PREVENÇÃO DE LAYOUT SHIFT ---------- */
img {
  height: auto;
}

/* Placeholder de produto enquanto carrega */
.relative.aspect-square.rounded-xl.overflow-hidden {
  background-color: #f9fafb;
}

/* ---------- FOCO MELHORADO PARA ACESSIBILIDADE ---------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

/* ---------- SAFE AREA (iOS notch / dynamic island) ---------- */
@supports (padding: env(safe-area-inset-bottom)) {
  .md\:hidden.fixed.bottom-0 {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  footer {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  }
}

/* ---------- MELHORAR LEGIBILIDADE EM TELAS PEQUENAS ---------- */
@media (max-width: 375px) {
  /* iPhone SE e similares */
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .text-2xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }
}

/* ---------- HOVER APENAS EM DISPOSITIVOS COM CURSOR ---------- */
@media (hover: none) {
  /* Em touch, remover hover effects que travam o estado */
  .hover\:shadow-lg:hover {
    box-shadow: var(--tw-shadow) !important;
  }
}

/* ---------- IMAGEM DO HERO — texto mais legível ---------- */
@media (max-width: 639px) {
  /* Aumentar tamanho do texto do hero no mobile */
  section.aspect-\[2\/1\] p.font-semibold {
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  section.aspect-\[2\/1\] p.text-xs {
    font-size: 11px !important;
  }
}

/* ---------- RODAPÉ — melhor separação ---------- */
footer h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

footer ul li,
footer p {
  line-height: 1.7;
}

/* Link de contato no footer */
footer a.hover\:text-amber-400 {
  transition: color 0.15s ease;
}

/* ---------- ACESSIBILIDADE ---------- */
:focus-visible {
  outline: 2px solid var(--amber-main);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- SCROLLBAR PERSONALIZADA (Desktop) ---------- */
@media (min-width: 768px) {
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    background: #f1f5f9;
  }
  ::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }
}

/* ---------- BADGE "VER MAIS" ---------- */
a.text-amber-500[href*="/categoria/"] {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

a.text-amber-500[href*="/categoria/"]:hover {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
}

/* ---------- IMAGENS DE COMBO — lazy load placeholder ---------- */
img[src*=".png"][loading="lazy"] {
  background: linear-gradient(135deg, #fef9ee 0%, #fdf4d1 100%);
  transition: opacity 0.3s ease;
}

/* ---------- MELHORIAS DE PERFORMANCE VISUAL ---------- */
img {
  content-visibility: auto;
}

/* Forçar hardware acceleration nos cards */
a.rounded-2xl {
  will-change: transform;
}