/* ─────────────────────────────────────────────
   Weather App
   ───────────────────────────────────────────── */

.weather-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(135deg, rgba(14, 14, 32, 0.95), rgba(20, 20, 40, 0.95));
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: var(--space-4);
  gap: var(--space-4);
}

.weather-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.weather-location {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-md);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.9);
}

.weather-location i {
  font-size: var(--font-md);
  color: var(--accent-color);
}

.weather-date {
  font-size: var(--font-sm);
  color: rgba(255, 255, 255, 0.5);
  font-weight: var(--weight-normal);
}

.weather-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) 0;
}

.weather-icon {
  font-size: 80px;
  color: #fbbf24;
  filter: drop-shadow(0 4px 20px rgba(251, 191, 36, 0.4));
  animation: weatherPulse 3s ease-in-out infinite;
}

@keyframes weatherPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.weather-temp {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}

.temp-value {
  font-size: 72px;
  font-weight: 100;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  color: #fff;
}

.temp-unit {
  font-size: 32px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  margin-top: var(--space-2);
}

.weather-desc {
  font-size: var(--font-lg);
  font-weight: var(--weight-normal);
  color: rgba(255, 255, 255, 0.8);
  text-transform: capitalize;
  letter-spacing: var(--tracking-wide);
}

.weather-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.weather-detail {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}

.weather-detail:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.weather-detail i {
  font-size: 20px;
  color: var(--accent-color);
  flex-shrink: 0;
}

.detail-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.detail-label {
  font-size: var(--font-xs);
  color: rgba(255, 255, 255, 0.5);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-wide);
}

.detail-value {
  font-size: var(--font-base);
  color: rgba(255, 255, 255, 0.9);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}

.weather-forecast {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.forecast-title {
  font-size: var(--font-sm);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.forecast-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
}

.forecast-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-1);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  transition: all var(--transition-base);
}

.forecast-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.forecast-day {
  font-size: var(--font-xs);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: var(--tracking-wide);
}

.forecast-icon {
  font-size: 24px;
  color: #fbbf24;
}

.forecast-temp {
  font-size: var(--font-base);
  font-weight: var(--weight-medium);
  color: rgba(255, 255, 255, 0.9);
  font-variant-numeric: tabular-nums;
}

.weather-refresh {
  display: flex;
  justify-content: center;
  padding-top: var(--space-2);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-sm);
  font-weight: var(--weight-normal);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-base);
}

.refresh-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.refresh-btn:active {
  transform: translateY(0) scale(0.95);
  transition: transform 0.1s ease-out;
}

.refresh-btn i {
  font-size: 16px;
  transition: transform 0.6s ease;
}

.refresh-btn.spinning i {
  transform: rotate(360deg);
}