:root{
  --card-bg: rgba(255,255,255,0.18);
  --card-bg-strong: rgba(255,255,255,0.25);
  --glass-blur: 8px;
  --radius-lg: 16px;
  --radius-md: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
  background: #1e1e1e;
  min-height: 100vh;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: background 1s ease;
}

/* header / toolbar */
.header {
  width: 100%;
  max-width: 700px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.header h1 { font-size: 24px; font-weight: 600; margin: 0; }
.day-night-icon { width: 40px; height: 40px; }

.unit-toggle {
  background: rgba(255,255,255,0.25);
  border: none;
  padding: 10px 15px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

#time-icon { transition: opacity 0.4s ease; }

.favorite-dropdown {
  position: relative;
}

.favorite-toggle-btn {
  background: rgba(255,255,255,0.25);
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  color: #fff;
  font-weight: 600;
}

.favorite-dropdown-list {
  position: absolute;
  top: 45px;           /* below button */
  left: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  padding: 10px;
  border-radius: 10px;
  list-style: none;
  width: 180px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 20;
}

.favorite-dropdown-list.hidden {
  display: none;
}

.favorite-dropdown-list li {
  color: white;
  display: flex;
  justify-content: space-between;
  padding: 6px 4px;
  cursor: pointer;
}

.favorite-dropdown-list .remove-fav {
  background: transparent;
  border: none;
  cursor: pointer;
  color: red;
  font-size: 14px;
}

/* search & favorites */
.search-section {
  width: 100%;
  max-width: 700px;
  display: flex;
  gap: 12px;
  margin-top: 15px;
  padding: 0 20px;
}
.search-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  outline: none;
  font-size: 16px;
}
.search-btn,
.get-location-btn {
  background: #ffffff;
  color: #1e90ff;
  border: none;
  padding: 12px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.location-icon { width: 20px; height: 20px; }

.search-with-fav {
  position: relative;
  display: inline-block;
  width: 100%;
}

.search-with-fav .search-input {
  width: 100%;
  padding-right: 40px; /* space for the star */
}

.search-with-fav .favorite-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #fff;  
  -webkit-text-stroke: 1px gray;
}

.search-with-fav .favorite-btn.favorited {
  color: gold;
  -webkit-text-stroke: 1.2px gray;
}


.weather-info {
  margin-top: 25px;
  width: 100%;
  max-width: 700px;
  padding: 0 16px;
}

.weather-info .weather-description {
  text-align: center;
  font-size: 20px;
  margin-bottom: 12px;
  font-weight: 600;
}

/* =========================
   WEATHER GRID (MAIN)
   ========================= */

/* outer wrapper around the cards */
.weather-details {
  background: rgba(255,255,255,0.06); /* subtle, real cards inside */
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.2);
}

/* grid that defines the 4 rows you requested */
.weather-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* three columns */
  gap: 14px;
  align-items: start;
}

/* Row 1 — main card spanning full width */
.card-main {
  grid-column: 1 / -1; /* span all columns */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--card-bg-strong);
  padding: 22px;
  border-radius: var(--radius-lg);
  text-align: center;
  min-height: 110px;
}
.card-main #weather-icon { font-size: 48px; display:block; margin-bottom: 8px; }
.card-main #temperature { font-size: 28px; margin: 0; }
.card-main #main-description { margin: 6px 0 0; opacity: 0.95; }

.city-title {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 4px;
  color: #004c6d;
}

/* Row 2 — 3 small cards (feels / UV / AQI) */
.card-small {
  background: var(--card-bg);
  backdrop-filter: blur(6px);
  padding: 16px;
  border-radius: 12px;
  text-align: center;
  font-weight: 600;
  min-height: 72px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Row 3 — 2 cards stretched equally */
.info-row {
  grid-column: 1 / -1;      /* span the whole grid width */
  display: flex;
  gap: 14px;
}

.info-row .card-small {
  flex: 1;                  /* each takes 50% width */
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Row 4 — forecast full width */
.card-forecast {
  grid-column: 1 / -1;
  background: var(--card-bg-strong);
  padding: 14px;
  border-radius: var(--radius-lg);
}

/* small helper for text inside cards */
.card-small .label,
.card-main .label { display:block; font-size: 13px; color: rgba(255,255,255,0.85); }
.card-small .value,
.card-main .value { font-size: 18px; margin-top:6px; }

/* chart */
.card-forecast canvas { width: 100% !important; height: 180px !important; }

/* =========================
   PARTICLES, CLOUDS, SUN (unchanged, just preserved)
   ========================= */

#weather-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 50;
}

/* SNOW */
.snowflake, .snow-flake {
  position: absolute;
  top: -10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: snowFall linear infinite;
  box-shadow: 0 0 6px #fff;
}
@keyframes snowFall {
  to {
    transform: translateY(110vh) translateX(-10px);
    opacity: 0.2;
  }
}

/* RAIN DROP */
.raindrop, .rain-drop {
  position: absolute;
  top: -20px;
  width: 2px;
  height: 18px;
  border-radius: 0 0 6px 6px;
  background: rgba(255,255,255,0.6);
  animation: rainFall linear infinite;
}
@keyframes rainFall {
  to {
    transform: translateY(120vh);
    opacity: 0.15;
  }
}

/* lightning flash area (full page overlay when active) */
.flash-active {
  position: fixed;
  inset: 0;
  background: white;
  opacity: 0.0;
  pointer-events: none;
  z-index: 60;
}

/* cloud layer */
#cloud-layer {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
/* CLOUD GROUP */
.cloud {
  position: absolute;
  height: auto;
  width: auto;
  animation: float-clouds linear infinite;
  opacity: 0.85;
}

/* INDIVIDUAL PUFFS (the blobs) */
.cloud-puff {
  position: absolute;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255,255,255,0.9) 0%,
    rgba(230,230,230,0.6) 60%,
    rgba(200,200,200,0.4) 100%
  );
  border-radius: 50%;
  filter: blur(2px);
  box-shadow: 
    0 0 40px rgba(255,255,255,0.4),
    0 0 60px rgba(150,150,150,0.2);
}

/* Animation */
@keyframes float-clouds {
  from { transform: translateX(-300px); }
  to   { transform: translateX(120vw); }
}

/* === SUN LENS FLARE === */
#sun-flare {
  position: absolute;
  top: 15vh;
  left: 8vw;
  width: 140px;
  height: 140px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
/* Main sun disc */
#sun-flare::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,180,1) 0%,
    rgba(255,220,80,0.9) 20%,
    rgba(255,190,60,0.6) 50%,
    rgba(255,180,60,0) 100%
  );
  animation: sunPulse 5s infinite ease-in-out;
}

/* Extra flare circles */
#sun-flare .flare-circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.7),
    rgba(255,220,120,0.3),
    rgba(255,200,100,0)
  );
  animation: flareShimmer 6s infinite ease-in-out;
}

/* Pulse animation */
@keyframes sunPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.08); filter: brightness(1.3); }
}
/* Shimmer animation */
@keyframes flareShimmer {
  0%, 100% { transform: scale(1) translateY(0); opacity: 0.65; }
  50% { transform: scale(1.15) translateY(-4px); opacity: 1; }
}

/* =========================
   BACKGROUNDS / MOODS (preserved)
   ========================= */
.bg-clear { background: linear-gradient(to bottom, #87CEFA, #1E90FF); }
.bg-cloudy { background: linear-gradient(to bottom, #d7d7d7, #8a8a8a); }
.bg-rain { background: linear-gradient(to bottom, #4e5d6c, #2f3b47); }
.bg-thunder { background: linear-gradient(to bottom, #2c3e50, #000000); }
.bg-snow { background: linear-gradient(to bottom, #e6f7ff, #b3e5fc); }
.bg-fog { background: linear-gradient(to bottom, #cfcfcf, #9e9e9e); }
.bg-windy { background: linear-gradient(to bottom, #b8e1ff, #6fb4e9); }
.bg-night { background: linear-gradient(to bottom, #0d1b2a, #1b263b); }
.mood-transition { transition: background 1s ease; }

/* =========================
   UTILS / RESPONSIVE
   ========================= */
.fade { transition: opacity 0.3s ease; }
.fade-in { opacity: 1; }
.fade-out { opacity: 0; }

#time-icon, #weather-icon { font-size: 40px; text-align: center; margin: 6px 0; }

.favorites ul { list-style: none; padding: 0; margin: 0; }
.favorite-item { display:flex; justify-content:space-between; padding:6px 10px; background:#ffffff22; border-radius:6px; margin-bottom:5px; cursor:pointer; }
.favorite-item:hover { background:#ffffff33; }
.remove-fav { background:none; border:none; cursor:pointer; }

@media (max-width: 760px) {
  .weather-grid { grid-template-columns: 1fr 1fr; }
  .card-main { grid-column: 1 / -1; }
  .card-forecast { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .weather-grid { grid-template-columns: 1fr; }
  .card-main, .card-forecast { grid-column: 1 / -1; }
  .card-small { width: 100%; }
}