/* 🌐 TEMA DE CORES */
:root {
  --cor-primaria: #2563eb; /* Azul principal */
  --cor-primaria-hover: #1d4ed8; /* Hover mais escuro */
  --cor-primaria-fundo: #dbeafe; /* Fundo claro */
  --cor-secundaria: #f8fafc;
  --cor-destaque: #10b981;
  --cor-texto: #1f2937;
  --cor-card: #ffffff;
  --cor-sombra: rgba(0, 0, 0, 0.05);
}

/* 🔄 LOADING SPINNER */
.spinner {
  border: 2px solid #ffffff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ✨ ANIMAÇÕES SUAVES */
.animate-fly {
  transition: all 0.5s ease-in-out;
}
#carrinho, #filtros-modal {
  transition: opacity 0.3s ease-in-out;
}
#carrinho > div, #filtros-modal > div {
  animation: slideIn 0.3s ease-in-out;
}
@keyframes slideIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 🧾 INPUTS E FORMULÁRIOS */
#login-form, #dashboard form {
  transition: all 0.2s ease-in-out;
}
#login-form input,
#dashboard input,
#dashboard select,
#dashboard textarea {
  transition: border-color 0.2s ease-in-out;
}
#login-form input:focus,
#dashboard input:focus,
#dashboard select:focus,
#dashboard textarea:focus {
  border-color: var(--cor-primaria);
  outline: none;
}

/* ✅ TOAST */
#toast {
  transition: opacity 0.3s ease-in-out;
}

/* 🧾 CATEGORIAS E CARROSSEL */
#categorias-carrossel, #produtos-destaque {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#categorias-carrossel::-webkit-scrollbar, #produtos-destaque::-webkit-scrollbar {
  display: none;
}
#categorias-menu {
  top: 64px;
  z-index: 20;
}
#categorias-vazio,
#filtros-vazio,
#filtros-vazio-mobile,
#destaques-vazio,
#produtos-vazio {
  font-style: italic;
}

/* ✅ FILTROS */
#filtros-sidebar {
  transition: transform 0.3s ease-in-out;
}
#filtros-tags-selos button,
#filtros-tags-selos-mobile button {
  transition: background-color 0.2s ease-in-out;
}

/* 📱 RESPONSIVIDADE */
@media (max-width: 640px) {
  #categorias-menu {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
    min-height: 80px !important;
  }
  #categorias-carrossel {
    gap: 0.75rem !important;
  }
  #categorias-carrossel button {
    font-size: 1.1rem !important;
    padding: 0.75rem 1.4rem !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
}
.categoria-ativa {
  background-color: var(--cor-primaria) !important;
  color: white !important;
  font-weight: bold !important;
  border-radius: 9999px !important;
}

/* 🟢 STATUS CORES */
.bg-green-100 {
  background-color: #d1fae5;
}
.text-green-600 {
  color: #059669;
}

/* 💬 WHATSAPP */
#botao-whatsapp {
  position: fixed;
  bottom: 80px;
  left: 20px;
  background-color: transparent;
  padding: 0;
  border: none;
  z-index: 999;
}
#botao-whatsapp img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}
#botao-whatsapp img:hover {
  transform: scale(1.1);
}

/* 🧩 TIPOGRAFIA E ESTRUTURA */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--cor-secundaria);
  color: var(--cor-texto);
}

h1, h2, h3 {
  font-family: 'Inter', sans-serif;
  color: var(--cor-texto);
  font-weight: 600;
  margin-bottom: 1rem;
}

section {
  margin-bottom: 2.5rem;
}

/* 🧱 COMPONENTES VISUAIS */
.card {
  background-color: var(--cor-card);
  border-radius: 1rem;
  box-shadow: 0 4px 12px var(--cor-sombra);
  padding: 1.5rem;
  transition: all 0.2s ease-in-out;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px var(--cor-sombra);
}

.botao-principal {
  background: linear-gradient(to bottom, var(--cor-primaria), var(--cor-primaria-hover));
  color: white;
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  font-weight: bold;
  box-shadow: 0 2px 4px var(--cor-sombra);
  transition: all 0.2s ease;
}
.botao-principal:hover {
  background: var(--cor-primaria-hover);
  box-shadow: 0 4px 8px var(--cor-sombra);
  transform: translateY(-1px);
}

.produto-card {
  position: relative;
  border: 2px solid var(--cor-primaria-fundo);
  border-radius: 1rem;
  overflow: hidden;
}
.produto-card img {
  height: 12rem; /* h-48 */
  object-fit: contain;
}
.produto-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background-color: var(--cor-primaria);
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}
.produto-badge.bg-yellow-400 {
  background-color: #facc15; /* Amarelo pra Mais Vendido */
}
.produto-badge.bg-green-500 {
  background-color: #22c55e; /* Verde pra Novo */
}
.produto-badge.bg-red-500 {
  background-color: #ef4444; /* Vermelho pra Promoção */
}

/* Header Responsivo */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 1rem;
}
#saudacao-cliente {
  flex: 1;
  text-align: left;
  margin-right: 1rem;
}
@media (max-width: 640px) {
  #saudacao-cliente {
    font-size: 0.9rem;
    margin-right: 0.5rem;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  header > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
}

@media (max-width: 640px) {
  #ordenar-por {
    width: 100% !important;
    margin-top: 0.5rem;
    display: block !important;
  }

  #ordenar-por option:first-child {
    color: #6b7280; /* text-gray-500 */
  }
}

.swiper-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 0;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 1rem;
}
.swiper-slide-text {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: white;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 1.25rem;
  font-weight: bold;
}
@media (max-width: 640px) {
  .swiper-slide img {
    height: 200px;
  }
  .swiper-slide-text {
    font-size: 1rem;
  }
}