/* Alpine.js specific styles */

/* Transition styles for Alpine.js transitions */
[x-cloak] {
  display: none !important;
}

/* Smooth transitions for state changes */
.transition {
  transition: all 0.3s ease;
}

/* Override for forecast details smooth transitions */
.forecast-item__details {
  overflow: hidden;
}

/* Ensure loading states are properly styled when visible */
.loading:not([style*="display: none"]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

/* Error state styling when visible */
.error:not([style*="display: none"]) {
  display: block;
  text-align: center;
  padding: 2rem;
}

/* Weather content styling when visible */
.weather-content:not([style*="display: none"]) {
  display: block;
}

/* Active forecast item styling */
.forecast-item.active {
  background-color: var(--color-background-secondary);
  border-radius: var(--border-radius-md);
}

/* Alpine transition classes */
.fade-in {
  opacity: 1;
  transform: translateY(0);
}

.fade-out {
  opacity: 0;
  transform: translateY(-10px);
}