/* Event Filters Styling */
.event-filters-form {
  /* Estilos base já definidos no HTML com Tailwind */
}

/* Loading states */
#loading-state,
#loading-more {
  @apply transition-opacity duration-300;
}

/* Filtros com transições suaves */
.filter-button {
  @apply transition-all duration-200 ease-in-out;
}

.filter-button:hover:not(.active) {
  @apply transform scale-[1.02];
}

.filter-button.active {
  @apply shadow-md;
}

/* Mobile filters accordion */
[data-event-filters-target="mobileFilters"] {
  @apply transition-all duration-300 ease-in-out;
}

/* Event cards hover effect */
.event-card {
  @apply transition-transform duration-200 ease-in-out;
}

.event-card:hover {
  @apply transform translateY(-1px);
}

/* Turbo Frame loading indicator */
turbo-frame[busy] {
  @apply opacity-70 pointer-events-none;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100 rounded-lg;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 rounded-lg;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400;
}

/* Carousel Styles */
.carousel-container {
  @apply overflow-hidden cursor-grab active:cursor-grabbing;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.carousel-container:active {
  cursor: grabbing;
}

.carousel-track {
  @apply flex transition-transform duration-300 ease-out items-stretch;
  will-change: transform;
}

.carousel-slide {
  @apply flex-shrink-0 select-none;
  touch-action: pan-y;
}

/* Navigation buttons */
.carousel-nav-button {
  @apply absolute top-1/2 transform -translate-y-1/2 bg-white hover:bg-gray-50 border border-gray-200 rounded-full p-2 shadow-md transition-all duration-200;
  z-index: 10;
}

.carousel-nav-button:hover {
  @apply shadow-lg scale-110;
}

.carousel-nav-button:active {
  @apply scale-95;
}

.carousel-nav-prev {
  @apply left-0 -translate-x-1/2;
}

.carousel-nav-next {
  @apply right-0 translate-x-1/2;
}

/* Responsive behavior */
@media (max-width: 640px) {
  .carousel-nav-button {
    @apply p-1;
  }
  
  .carousel-nav-prev {
    @apply left-2 translate-x-0;
  }
  
  .carousel-nav-next {
    @apply right-2 translate-x-0;
  }
}