@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

/* ================= RESET ================= */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

body {
  overflow-x: hidden;
  color: white;
  -webkit-tap-highlight-color: transparent;
}

/* ================= ROOT ================= */
:root {
  --glass: rgba(255,255,255,0.18);
  --glow: 0 0 15px rgba(255,255,255,0.25);
  --radius: 18px;
  --blur: blur(14px);
  --transition: .3s ease;
}

/* ================= BACKGROUND ================= */
.bg-animation {
  position: fixed;
  inset: 0;
  z-index: -1;
  transition: 1s;
  background: linear-gradient(120deg, #141e30, #243b55);
}

/* Themes */
.bg-animation.day.hot { background: linear-gradient(120deg, #ff9a00, #ff3d00); }
.bg-animation.day.normal { background: linear-gradient(120deg, #00c6ff, #0072ff); }
.bg-animation.day.cold { background: linear-gradient(120deg, #74ebd5, #4facfe); }

.bg-animation.night.hot { background: linear-gradient(120deg, #2c3e50, #fd746c); }
.bg-animation.night.normal { background: linear-gradient(120deg, #141e30, #243b55); }
.bg-animation.night.cold { background: linear-gradient(120deg, #000428, #004e92); }

/* ================= APP ================= */
.app {
  padding: 25px;
  min-height: 100vh;
}

/* ================= TITLES ================= */
.title {
  font-size: 2.8rem;
  text-align: center;
}

.subtitle {
  text-align: center;
  opacity: 0.8;
  margin-bottom: 20px;
}

/* ================= SEARCH ================= */
.search-box {
  text-align: center;
}

.search-box input {
  padding: 10px;
  width: 230px;
  border-radius: 25px;
  border: none;
}

.search-box button {
  padding: 12px 24px;
  border-radius: 30px;
  border: none;
  margin-left: 10px;
  cursor: pointer;
  font-weight: 600;
  background: linear-gradient(135deg, #00c6ff, #0072ff);
  color: white;
  box-shadow: 0 0 10px rgba(0,198,255,0.6);
  transition: 0.3s;
}

.search-box button:hover {
  box-shadow: 0 0 20px rgba(0,198,255,1);
  transform: translateY(-2px);
}

/* ================= LOADER ================= */
.loader {
  display: none;
  margin: 20px auto;
  width: 45px;
  height: 45px;
  border: 4px solid rgba(255,255,255,0.3);
  border-top: 4px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* ================= CARD ================= */
.card {
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,0.18);
  border-radius: 25px;
  padding: 20px;
  margin: 25px auto;
  width: 330px;
  text-align: center;
  animation: popIn 0.6s ease;
}

.card:hover {
  transform: scale(1.03);
  transition: 0.3s;
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ================= BIG CARD ================= */
.big-card {
  width: auto;             
  max-width: 400px;

  margin: 30px auto 0;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: var(--blur);
  box-shadow: var(--glow);
  text-align: center;
  animation: pop .6s ease;
}

@keyframes pop {
  from { transform: scale(.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ================= TOP ROW ================= */
.top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fav-btn {
  font-size: 24px;
  cursor: pointer;
  transition: transform .2s;
}

.fav-btn:hover {
  transform: scale(1.2);
}

/* ================= FLOATING EMOJI ================= */
.floating-emoji {
  font-size: 64px;
  margin: 10px 0;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

/* ================= TEMP ================= */
.temp {
  font-size: 42px;
  margin: 4px 0;
}

.desc {
  text-transform: capitalize;
  opacity: .85;
  margin-bottom: 12px;
}

/* ================= SUN BAR ================= */
.sun-bar-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
}

.sun-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20px;
}

.sun-time {
  font-size: 0.7rem;
  opacity: 0.75;
  margin-top: 2px;
}

.sun-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.sun-bar .bar {
  flex: 1;
  height: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.25);
  overflow: hidden;
}

.sun-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, #ffd86b, #ff9f00);
  box-shadow: 0 0 12px rgba(255,200,0,.7);
  transition: width 1s ease;
}

/* ================= GLOW GRID ================= */
.glow-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px;
  margin-top: 14px;
}

.glow-box {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 12px rgba(255,255,255,.25);
  font-size: .9rem;
  transition: transform .2s, box-shadow .2s;
}

.glow-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 18px rgba(255,255,255,.45);
}

/* ================= UNIT BUTTON ================= */
.unit-btn {
  margin-top: 14px;
  padding: 8px 18px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg,#ffffff,#d6e6ff);
  color: #333;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(255,255,255,.6);
  transition: var(--transition);
}

.unit-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255,255,255,.9);
}

/* ================= SCROLL ================= */
.scroll-row,
.fav-scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 15px 0;
  scrollbar-width: none;
}

.scroll-row::-webkit-scrollbar,
.fav-scroll::-webkit-scrollbar {
  display: none;
}

/* ================= CITY CARD ================= */


.city-card:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

@keyframes floatCard {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

.city-card p {
  font-size: 1.1rem;
  font-weight: 600;
}

.badge {
  margin-top: 6px;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  background: rgba(0,0,0,0.25);
}



@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ================= EFFECTS ================= */
.rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.2) 0px,
    rgba(255,255,255,.2) 2px,
    transparent 4px
  );
  animation: rain 0.6s linear infinite;
  opacity: .4;
  z-index: -1;
}

@keyframes rain {
  from { background-position-y: 0; }
  to { background-position-y: 100px; }
}

.cloud-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url("https://i.imgur.com/Uc4Kx6O.png") repeat-x;
  opacity: .25;
  animation: clouds 120s linear infinite;
  z-index: -2;
}

@keyframes clouds {
  from { background-position-x: 0; }
  to { background-position-x: 2000px; }
}



/* Container */
.title-gif {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    pointer-events: none;
}

/* Glow wrapper */
.gif-glow {
    width: 145px;
    height: 145px;
    border-radius: 50%;
    padding: 7px;

    /* Soft glass + adaptive border */
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.85),
            rgba(255,255,255,0.35)
        ),
        radial-gradient(circle at top left, #ffffff, #7fdfff, #4facfe);

    /* Border that blends naturally */
    border: 1px solid rgba(255,255,255,0.35);

    /* Improved glow */
    box-shadow:
        0 0 12px rgba(255,255,255,0.6),
        0 0 22px rgba(127,223,255,0.65),
        0 0 40px rgba(79,172,254,0.5),
        inset 0 0 10px rgba(255,255,255,0.55);

    backdrop-filter: blur(6px);

    animation: floatGif 4s ease-in-out infinite;
}

.gif-glow img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    clip-path: inset(15% round 50%);
}




@keyframes glowPulse {
    0%,100% { box-shadow:
        0 0 12px rgba(255,255,255,0.6),
        0 0 22px rgba(127,223,255,0.65),
        0 0 40px rgba(79,172,254,0.5);
    }
    50% { box-shadow:
        0 0 18px rgba(255,255,255,0.8),
        0 0 30px rgba(127,223,255,0.8),
        0 0 55px rgba(79,172,254,0.7);
    }
}


.gif-glow {
    animation:
        floatGif 4s ease-in-out infinite,
        glowPulse 3.5s ease-in-out infinite;
}



.aqi-1 { box-shadow: 0 0 20px #00ff88; }
.aqi-2 { box-shadow: 0 0 20px #ffee55; }
.aqi-3 { box-shadow: 0 0 20px #ff9933; }
.aqi-4 { box-shadow: 0 0 20px #ff4444; }
.aqi-5 { box-shadow: 0 0 20px #aa00ff; }

.forecast-section {
  margin-top: 20px;
}




@keyframes forecastFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}


.weather-alert {
  background: linear-gradient(135deg, #ff6b6b, #ff4757);
  padding: 12px;
  border-radius: 14px;
  color: white;
  margin-top: 15px;
  animation: pulseAlert 2s infinite;
}

@keyframes pulseAlert {
  0% { box-shadow: 0 0 10px rgba(255,75,75,.5); }
  50% { box-shadow: 0 0 20px rgba(255,75,75,.9); }
  100% { box-shadow: 0 0 10px rgba(255,75,75,.5); }
}



/* ================= AQI INLINE BOX ================= */

#aqiBox {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 14px rgba(255,255,255,0.15),
    inset 0 0 10px rgba(255,255,255,0.2);
  text-align: center;
  animation: popIn 0.4s ease;
}

/* AQI Title */
#aqiBox h4 {
  margin-bottom: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  opacity: 0.9;
}

/* AQI Value */
.aqi-value {
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 2px;
  text-shadow: 0 0 10px rgba(255,255,255,0.35);
}

/* Subtle hover */
#aqiBox:hover {
  transform: translateY(-2px) scale(1.02);
  transition: 0.25s ease;
  box-shadow:
    0 0 22px rgba(255,255,255,0.25),
    inset 0 0 12px rgba(255,255,255,0.3);
}

/* ===== 5 DAY FORECAST (UPDATED) ===== */

.forecast-row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 14px 0;
  scrollbar-width: none;
}
.forecast-row::-webkit-scrollbar {
  display: none;
}

.forecast-card {
  min-width: 200px;              /* ⬅ bigger cards */
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(12px);
  text-align: center;

  /* ❌ removed glow */
  box-shadow: none;

  transition: transform .25s;


   display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}




.forecast-card:hover {
  transform: translateY(-4px) scale(1.03);
}

.forecast-emoji {
  
  margin: 8px 0;
  font-size: 36px;
  margin-bottom: 6px;
}

.forecast-temp {
  font-size: 1.25rem;            /* ⬆ temp text */
  font-weight: 600;
}

.forecast-desc {
  font-size: .8rem;
  opacity: .7;
}


.update-note {
  margin-top: 6px;
  font-size: 0.75rem;
  opacity: 0.75;
  color: #cfefff;
}

.forecast-desc,
.update-note {
  display: block;
  width: 100%;
}

@media (max-width: 600px) {
  .forecast-card {
    min-width: 70%;   /* feels full-width when swiping */
  }
}

.section-title,
h2 {
  margin-top: 32px;
  margin-bottom: 16px;
}


.scroll-row,
.forecast-section,
.alert-section,
#aqiSection,
#mainWeather {
  margin-bottom: 28px;
}


.card h4,
.card h3 {
  margin-bottom: 10px;
}

.card p {
  margin-top: 6px;
}


/* ================= RESPONSIVE ================= */
@media (max-width: 600px) {
  .title { font-size: 2.1rem; }
  .card { width: 100%; }
  .big-card { width: 95%; }
  .points { flex-wrap: wrap; gap: 10px; }
  .point { width: 48%; }
  .search-box input { width: 70%; }
  .glow-grid { grid-template-columns: 1fr; }
}


/* FIX FAVORITES GOING TO BOTTOM */
.app {
  position: relative;
  z-index: 1;
}

/* Ensure page grows with content */
body {
  min-height: 100vh;
}

/* Keep effects behind content */
.bg-animation,
.rain,
.cloud-layer {
  pointer-events: none;
}





/* ================= MOBILE FIX (FINAL) ================= */
@media (max-width: 600px) {

  /* App padding */
  .app {
    padding: 16px;
  }

  /* Main weather card */
  .big-card {
    max-width: 100%;
    padding: 16px;
    margin-top: 16px;
  }

  /* Weather emoji */
  .floating-emoji {
    font-size: 48px;
    margin: 6px 0;
  }

  /* Temperature */
  .temp {
    font-size: 36px;
  }

  /* Sunrise / Sunset bar */
  .sun-bar-wrapper {
    gap: 6px;
    margin: 10px 0;
  }

  /* Info grid (Humidity, Wind, etc.) */
  .glow-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .glow-box {
    padding: 10px;
    font-size: 0.8rem;
  }

  /* AQI box */
  #aqiBox {
    padding: 10px;
    margin-top: 10px;
  }

  /* Popular / Recent / Favorite cards */
  .city-card {
    min-width: 140px;
    padding: 12px;
  }

  /* Forecast section */
  .forecast-row {
    gap: 14px;
    padding: 10px 0;
  }

  .forecast-card {
    min-width: 160px;
    padding: 14px;
  }

  .forecast-emoji {
    font-size: 30px;
  }

  .forecast-temp {
    font-size: 1.1rem;
  }

  /* Reduce section spacing */
  .section-title,
  h2 {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  /* Title */
  .title {
    font-size: 2rem;
  }

  .subtitle {
    font-size: 0.9rem;
  }
}




/* ================= UNIVERSAL MOBILE FIX ================= */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Fix main container */
.app{
  max-width: 1200px;
  margin: auto;
}

/* Fix main weather container */
#mainWeather{
  display:flex;
  justify-content:center;
  width:100%;
}

/* Big Weather Card */
.big-card{
  width:100%;
  max-width:380px;
  margin:20px auto;
  box-sizing:border-box;
}



.city-card{
  min-width:130px;
  max-width:140px;
  padding:15px;
  border-radius:18px;

  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.22);

  cursor:pointer;
  transition:.25s;

  text-align:center;
  animation: floatCard 4s ease-in-out infinite;
  flex-shrink:0;   /* prevents stretching */
}







.city-card h4{
  font-size:0.9rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Scroll rows smooth */
.scroll-row{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:10px 0;
}

/* Search box mobile fix */
.search-box{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
}

.search-box input{
  width:200px;
  max-width:70%;
}

/* Forecast cards fix */
.forecast-card{
  min-width:150px;
  flex-shrink:0;
}

/* Prevent overflow */
img{
  max-width:100%;
}

/* ================= SMALL SCREEN FIX ================= */

@media (max-width:480px){

  .title{
    font-size:1.8rem;
  }

  .subtitle{
    font-size:0.85rem;
  }

  .big-card{
    padding:16px;
  }

  .temp{
    font-size:34px;
  }

  .floating-emoji{
    font-size:46px;
  }

  .city-card{
    min-width:120px;
    padding:10px;
  }

  .forecast-card{
    min-width:140px;
    padding:12px;
  }

}