#setup_button {
  display: none;
}
/* Base container for the paginator */
.paginator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  /* 8px spacing between items */
}

/* Styling for all individual pagination items (links/buttons) */
.paginator_item {
  padding: 0.5rem 1rem;
  /* Equivalent to px-4 py-2 (16px horizontal, 8px vertical) */
  border-radius: 0.375rem;
  /* Equivalent to rounded-md (6px) */
  transition-property: background-color, color, border-color;
  /* Equivalent to transition-colors */
  transition-duration: 300ms;
  /* Equivalent to duration-300 */
  transition-timing-function: ease-in-out;
  /* Tailwind's default ease */

  background-color: #ffffff;
  /* bg-white */
  border: 1px solid #cbd5e1;
  /* border border-slate-300 */
  color: #475569;
  /* text-slate-600 */
  font-weight: 600;
  /* font-semibold */

  /* Hover effects */
  /* Assumindo que você quer hover:bg-slate-100 hover:text-slate-700 */
  cursor: pointer;
  /* Makes it look clickable */
}

.paginator_item:hover {
  background-color: #f1f5f9;
  /* bg-slate-100 */
  color: #334155;
  /* text-slate-700 */
}

/* Styling for the active (current) page */
.paginator_active {
  /* Cor primária - você precisa substituir '#FF6F00' pela sua cor real */
  background-color: #ff6f00;
  /* bg-cartalogoPrimary (exemplo) */
  color: #ffffff;
  /* text-white */
  border-color: #ff6f00;
  /* border-cartalogoPrimary (exemplo) */
  cursor: default;
  /* No pointer cursor for the active page */

  /* Garantir que o hover não mude o estilo ativo */
  background-color: #ff6f00 !important;
  color: #ffffff !important;
  border-color: #ff6f00 !important;
}

.paginator_active:hover {
  background-color: #ff6f00;
  /* Maintain active style on hover */
  color: #ffffff;
}

/* Optional: Styling for disabled links (e.g., first/last page when active) */
/* Se a sua biblioteca adiciona 'aria-disabled="true"' ou uma classe 'disabled' */
.paginator_item[aria-disabled="true"],
.paginator_item.disabled {
  opacity: 0.5;
  /* Visually dim */
  cursor: not-allowed;
  /* Change cursor */
  /* Remove hover effects for disabled items */
  background-color: #ffffff;
  color: #475569;
  border-color: #cbd5e1;
}

.paginator_item[aria-disabled="true"]:hover,
.paginator_item.disabled:hover {
  background-color: #ffffff;
  /* Keep original background on hover for disabled */
  color: #475569;
  /* Keep original text color on hover for disabled */
}

/* Optional: Icon styling if you're using Font Awesome or similar */
.paginator_item i {
  font-size: 0.875rem;
  /* Equivalent to text-sm (14px) */
}

.hero-bg {
  background-image: url("https://www.infomoney.com.br/wp-content/uploads/2019/06/carros-1.jpg");
  /* Imagem de fundo atraente */
  background-size: cover;
  background-position: center;
  position: relative;
}

.hero-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  /* Overlay escuro para melhorar contraste do texto */
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.filter-chip {
  @apply px-4 py-2 bg-gray-100 text-gray-700 rounded-full cursor-pointer hover:bg-orange-100 hover:text-cartalogoPrimary transition duration-300 ease-in-out;
}

.filter-chip.active {
  @apply bg-cartalogoPrimary text-white;
}

/* Ajuste para o padding do body quando o menu mobile está visível */
body.mobile-menu-open {
  overflow: hidden;
}

/* Classes para a transição do modal */
.modal-enter-active,
.modal-leave-active {
  transition: all 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
  transform: scale(0.95);
}