.forecastIconSlot {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.forecast-icon-style-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  color: #334155;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.forecast-icon-style-btn:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

html.dark .forecast-icon-style-btn {
  border-color: rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.05);
  color: #e5e5e5;
}

html.dark .forecast-icon-style-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.forecast-icon-style-glyph {
  display: block;
  transition: transform 0.2s ease;
}

.forecast-icon-style-btn[data-icon-style="fontawesome"] .forecast-icon-style-glyph {
  transform: scaleX(-1);
}

.forecastDayContainer .forecastIconSlot {
  margin-left: 0;
}

.forecastDayContainer .forecastIconSlot .weatherIcon {
  margin-left: 0;
  margin-right: 0;
}

.meteocon-icon svg {
  display: block;
  width: 44px;
  height: 44px;
}

.meteocon-icon--light svg {
  filter: drop-shadow(0 1px 1px rgba(71, 85, 105, 0.12));
}

/* Font Awesome icons — animate the <i> element (not the flex wrapper) */
.forecastIconSlot .forecastIcon {
  display: inline-block;
  font-size: 2rem;
  line-height: 1;
  transform-origin: center center;
}

.forecastIconSlot .fc-anim-sun {
  animation: fc-sun-pulse 2.5s ease-in-out infinite;
}

.forecastIconSlot .fc-anim-moon {
  animation: fc-moon-glow 3s ease-in-out infinite;
}

.forecastIconSlot .fc-anim-cloud {
  animation: fc-cloud-drift 3s ease-in-out infinite;
}

.forecastIconSlot .fc-anim-rain {
  animation: fc-rain-bounce 1.2s ease-in-out infinite;
}

.forecastIconSlot .fc-anim-thunder {
  animation: fc-thunder-flash 2.5s ease-in-out infinite;
}

.forecastIconSlot .fc-anim-wind {
  animation: fc-wind-sway 1.8s ease-in-out infinite;
}

.forecastIconSlot .fc-anim-snow {
  animation: fc-snow-float 2s ease-in-out infinite;
}

.forecastIconSlot .fc-anim-fog {
  animation: fc-fog-pulse 2.5s ease-in-out infinite;
}

@keyframes fc-sun-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.15) rotate(8deg); }
}

@keyframes fc-moon-glow {
  0%, 100% { transform: scale(1); opacity: 0.75; filter: drop-shadow(0 0 2px rgba(255, 255, 200, 0.3)); }
  50% { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 8px rgba(255, 255, 200, 0.8)); }
}

@keyframes fc-cloud-drift {
  0%, 100% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
}

@keyframes fc-rain-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

@keyframes fc-thunder-flash {
  0%, 90%, 100% { opacity: 1; transform: scale(1); }
  91% { opacity: 0.3; transform: scale(1.05); }
  92% { opacity: 1; transform: scale(1); }
  93% { opacity: 0.4; }
  94% { opacity: 1; }
}

@keyframes fc-wind-sway {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(12deg); }
}

@keyframes fc-snow-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes fc-fog-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .forecastIconSlot .fc-anim-sun,
  .forecastIconSlot .fc-anim-moon,
  .forecastIconSlot .fc-anim-cloud,
  .forecastIconSlot .fc-anim-rain,
  .forecastIconSlot .fc-anim-thunder,
  .forecastIconSlot .fc-anim-wind,
  .forecastIconSlot .fc-anim-snow,
  .forecastIconSlot .fc-anim-fog {
    animation: none;
  }
}