/**
 * Tema Personalizado - Açaí Delivery
 * 
 * Este arquivo sobrescreve as variáveis CSS do tema global
 * para criar um tema roxo personalizado para loja de açaí.
 */

:root {
  /* Cores Principais - Roxo */
  --color-primary: #9333ea; /* purple-600 - Roxo principal vibrante */
  --color-secondary: #7b2cbf; /* purple-700 - Roxo escuro */

  /* Cores de Fundo - Claro com tom roxo */
  --color-bg: #faf5ff; /* purple-50 - Fundo muito claro roxo */
  --color-card: #ffffff; /* Branco para cards */
  --color-card-glass: rgba(
    243,
    232,
    255,
    0.75
  ); /* Glass effect - roxo muito claro */

  /* Cores de Texto */
  --color-text: #581c87; /* purple-900 - Texto escuro roxo */
  --color-text-secondary: #7b2cbf; /* purple-700 - Texto secundário */
  --color-text-muted: #9333ea; /* purple-600 - Texto desabilitado */

  /* Cores de Botões - Roxo */
  --color-button: #9333ea; /* purple-600 - Botão roxo */
  --color-button-hover: #7b2cbf; /* purple-700 - Hover do botão */
  --color-button-text: #ffffff; /* Branco - Texto do botão */

  /* Cores de Borda - Roxo */
  --color-border: rgba(147, 51, 234, 0.3); /* purple-600 com transparência */
  --color-border-light: rgba(
    255,
    255,
    255,
    0.5
  ); /* Branco com mais opacidade */

  /* Cores de Glass Effect - Roxo */
  --color-glass-bg: rgba(243, 232, 255, 0.75); /* Fundo glass roxo */
  --color-glass-border: rgba(255, 255, 255, 0.4); /* Borda glass */

  /* Cores de Estados (mantém padrão) */
  --color-success: #10b981; /* green-500 - Sucesso */
  --color-error: #ef4444; /* red-500 - Erro */
  --color-warning: #f59e0b; /* yellow-500 - Aviso */

  /* Cores de Paginação - Roxo */
  --color-pagination-active: #9333ea; /* Botão ativo roxo */
  --color-pagination-hover: #f3e8ff; /* Hover roxo claro */

  /* Cores de Modal - Roxo */

  /* Cores de Sidebar - Roxo */
  --color-sidebar-bg: rgba(243, 232, 255, 0.75); /* Fundo da sidebar roxo */
  --color-sidebar-item-bg: rgba(255, 255, 255, 0.5); /* Item da sidebar */

  /* Cores de Notificação - Mantém padrão do sistema (cinza) */
  --color-notification-success: #10b981; /* Ícone de sucesso (mantém verde) */
}

/*
 * Ajustes de layout para cards de produtos abaixo dos filtros.
 * Mantém grid organizado mesmo com imagens em formatos diferentes.
 */
.park-acai-grid {
  align-items: stretch;
}

.park-acai-grid .park-acai-card {
  margin: 0;
  border-radius: 1rem;
  overflow: hidden;
  min-height: 100%;
}

.park-acai-grid .park-acai-image-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(180deg, #2d0f44 0%, #170826 100%);
}

.park-acai-grid .service-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.park-acai-grid .service-content {
  gap: 0.375rem;
}

.park-acai-grid .park-acai-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.park-acai-grid .service-title {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}

.park-acai-grid .service-description {
  min-height: 3.2rem;
}

.park-acai-grid .park-acai-actions {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  align-items: stretch;
}

.park-acai-grid .park-acai-action-btn {
  width: 100%;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 0.45rem 0.65rem !important;
  font-size: 0.78rem !important;
  line-height: 1.1;
  gap: 0.35rem !important;
  overflow: hidden;
}

.park-acai-grid .park-acai-action-btn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.park-acai-grid .park-acai-actions > * {
  min-width: 0;
}

.park-acai-grid .park-acai-action-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .park-acai-grid .park-acai-image-shell {
    aspect-ratio: 5 / 4;
  }

  .park-acai-grid .service-image {
    object-position: center 34%;
  }

  .park-acai-grid .park-acai-actions {
    grid-template-columns: 1fr;
  }
}