/* Index page specific styles */

/* Filter panel animation */
.filter-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
}

.filter-panel.expanded {
  max-height: 1000px;
  /* Value large enough to contain the content */
}

/* Advanced filters always visible in sidebar */
#filters-sidebar #advanced-filters-section {
  opacity: 1 !important;
  visibility: visible !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Keep original behavior for commute page (default state) */
#advanced-filters-section {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  max-height: 0;
  overflow: hidden;
}

#advanced-filters-section.visible {
  opacity: 1;
  visibility: visible;
  max-height: 3000px;
  transition: opacity 0.3s ease, visibility 0.3s ease, max-height 0.5s ease;
}

/* Mobile filter modal styles */
#mobile-filter-modal {
  transition: opacity 0.3s ease;
}

#mobile-filter-modal.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Active filter tag */
.filter-tag {
  transition: all 0.2s ease;
}

.filter-tag:hover {
  background-color: #f3f4f6;
}

/* Enhanced card hover effects */
.vehicle-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.vehicle-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Card section base styles are in vehicle_cards.css */
/* Only override trip-section color here */
.trip-section {
  position: relative;
}

.trip-section::after {
  background-color: #0a98a8;
  /* ev-secondary */
}

/* Variant name container styles */
.variant-name-container {
  min-height: 40px;
  margin-bottom: 8px;
  align-items: flex-start;
}

/* Price input styles */
.price-input {
  padding-right: 20px !important;
}

.price-preset {
  font-size: 10px;
  padding: 3px 6px;
}

/* Trip pills responsive styles */
.trip-category-selector .flex {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}

.trip-category-selector .flex::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

/* Mobile responsive adjustments - only for things that can't be done with Tailwind */
@media (max-width: 640px) {
  .trip-pill {
    min-width: 140px;
    /* Ensure readability on mobile */
  }

  .trip-pill-container {
    flex: 0 0 auto;
    /* Prevent flex shrinking */
  }
}

/* Focus states for accessibility */
.trip-radio:focus + .trip-pill {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}