/* Hourly Forecast Styles
-------------------------------------------------- */
.hourly-weather {
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  display: flex;
  margin-top: var(--spacing-sm);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  position: relative;
  scrollbar-color: #aec7e6 transparent;
  scrollbar-width: thin;
  touch-action: pan-x;
  user-select: none;
}

.hourly-weather:active {
  cursor: grabbing;
}

.hourly-weather::-webkit-scrollbar {
  height: 7px;
}

.hourly-weather::-webkit-scrollbar-track {
  background: transparent;
}

.hourly-weather::-webkit-scrollbar-thumb {
  background-color: #b4cae4;
  border-radius: 999px;
}

.hourly-weather-container {
  -webkit-overflow-scrolling: touch;
  display: flex;
  gap: 12px;
  padding: var(--spacing-xs);
  transition: transform var(--transition-normal);
}

.hourly-item {
  background: linear-gradient(180deg, #fafdff 0%, #f1f7ff 100%);
  border: 1px solid rgba(123, 165, 206, 0.2);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  flex: 0 0 104px;
  padding: 10px 8px;
  text-align: center;
  transition: transform var(--transition-quick), box-shadow var(--transition-quick);
  user-select: none;
}

.hourly-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.hourly-item img {
  height: 42px;
  margin: 6px 0;
  transition: transform var(--transition-quick);
  width: 42px;
}

.hourly-item:hover img {
  transform: scale(1.08);
}

.hourly-item p {
  color: var(--text-secondary);
  font-size: 12px;
  margin: 2px 0;
  white-space: nowrap;
}

.hourly-item p:first-child {
  color: var(--header-bg);
  font-weight: 600;
}