* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#background {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  transition: opacity 1s ease-in-out, filter 1s ease, transform 1s ease;
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}

.background-fade.fade-out {
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.05);
}

body {
  font-family: "Segoe UI", sans-serif;
  transition: background 1.2s ease-in-out, color 0.3s ease;
  min-height: 100vh;
  background: linear-gradient(to right, #83a4d4, #b6fbff);
  color: #fff;
  padding: 2vw;
  overflow-x: hidden;
  transition: background 1.2s ease-in-out, color 0.4s ease-in-out;
  will-change: background, color;
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(5px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loader.hidden {
  display: none;
}

#bg-fade {
  position: fixed;
  inset: 0;
  z-index: -2;
  transition: background 1.2s ease-in-out;
  will-change: background;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: inherit;
  transition: opacity 1s ease-in-out;
  opacity: 1;
}

.spinner {
  border: 5px solid #eee;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* THEMES */
/* Smooth background fade effect */
body {
  transition: background 1s ease-in-out;
}

/* Weather condition gradient backgrounds */
body.sunny {
  background: linear-gradient(135deg, #f9d423, #ff4e50); /* Bright sun */
}

body.clear {
  background: linear-gradient(135deg, #56ccf2, #2f80ed); /* Clear sky */
}

body.cloudy {
  background: linear-gradient(135deg, #d7d2cc, #304352); /* Cloudy sky */
}

body.rainy {
  background: linear-gradient(135deg, #4e54c8, #8f94fb); /* Rainy mood */
}

body.stormy {
  background: linear-gradient(135deg, #232526, #414345); /* Thunderstorms */
}

body.snowy {
  background: linear-gradient(135deg, #83a4d4, #b6fbff); /* Snowy */
}

body.foggy {
  background: linear-gradient(135deg, #757f9a, #d7dde8); /* Fog/Mist */
}

body.hazy {
  background: linear-gradient(135deg, #e0c3fc, #8ec5fc); /* Haze */
}
body.windy {
  background: linear-gradient(135deg, #a8edea, #fed6e3); /* Windy */
}
body.default-weather {
  background: linear-gradient(135deg, #bdc3c7, #2c3e50); /* Fallback */
}


.container {
  max-width: 1100px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

/* HEADER */
header h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  text-align: center;
}

/* SEARCH */
.search {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.search input,
.search button {
  padding: 0.8rem 1.2rem;
  border-radius: 1rem;
  border: none;
  font-size: 1rem;
  outline: none;
}

.search input {
  flex: 1 1 300px;
  min-width: 200px;
}

.search button {
  background-color: #ffffff33;
  color: white;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

/* CLOCK */
.clock {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  text-align: center;
  font-weight: bold;
  letter-spacing: 2px;
}

/* WEATHER CARD */
.weather-card {
  text-align: center;
  padding: 2rem;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  width: 100%;
}

.weather-card img {
  width: 80px;
}

.weather-card .emoji {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}

.glass {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* HOURLY SCROLL */
.hourly-scroll {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  overflow-x: auto;
  padding-top: 1rem;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.hourly-scroll::-webkit-scrollbar,
#forecastCards::-webkit-scrollbar {
  display: none;
}

.hourly-card {
  flex: 0 0 auto;
  min-width: 100px;
  text-align: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 1rem;
  padding: 1rem;
  backdrop-filter: blur(6px);
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hourly-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.2);
}

/* FORECAST */
#forecastCards {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 1rem;
  scrollbar-width: none;
}

.forecast-card {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 1rem;
  min-width: 160px;
  text-align: center;
  color: #fff;
  transition: transform 0.3s;
}

.forecast-card:hover {
  transform: scale(1.05);
}

.forecast-card .day-name {
  font-weight: bold;
  font-size: 1.2rem;
}

.forecast-card .temp-range {
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0;
  font-size: 0.95rem;
}

.forecast-card i {
  margin-right: 5px;
  color: #f9f9f9;
}

.forecast-card img {
  margin: 0.5rem 0;
}

/* DETAILS GRID */
.details {
  padding: 20px;
  border-radius: 15px;
  color: #fff;
}

.details h3 {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 15px 20px;
}

.details-grid div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 10px;
  border-radius: 10px;
  transition: background 0.3s ease;
}

.details-grid div:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* MAP */
#map {
  height: 300px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  margin: 1rem 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.map-container {
  height: 300px;
  border-radius: 1rem;
  overflow: hidden;
}

/* CLOUD TOGGLE BUTTON */
.cloud-toggle-btn {
  background: rgba(255, 255, 255, 0.8);
  border: none;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .forecast-card,
  .hourly-card {
    min-width: 120px;
  }

  .weather-card {
    padding: 1.2rem;
  }
}
@media (min-width: 1440px) {
  .container {
    max-width: 1200px;
    padding: 2vw 4vw;
  }

  .forecast-card,
  .hourly-card {
    min-width: 180px;
  }

  .weather-card {
    font-size: 1.2rem;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .search input {
    flex: 1 1 50%;
  }

  .details-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }

  .forecast-card {
    min-width: 140px;
  }
}
@media (max-width: 480px) {
  .container {
    padding: 1rem;
  }

  .weather-card {
    padding: 1rem;
  }

  .forecast-card,
  .hourly-card {
    min-width: 100px;
    padding: 0.8rem;
  }

  .forecast-card .day-name {
    font-size: 1rem;
  }

  .details-grid {
    gap: 10px;
  }

  .details-grid div {
    font-size: 0.9rem;
    padding: 8px;
  }

  .clock {
    font-size: 1rem;
  }

  .search input,
  .search button {
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
  }
}