/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  color: white;
  background: #0f172a;
}

.page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  transition: background 0.6s ease;
}

.bg-clear { background: linear-gradient(180deg, #38bdf8 0%, #2563eb 100%); }
.bg-clouds { background: linear-gradient(180deg, #94a3b8 0%, #475569 100%); }
.bg-rain { background: linear-gradient(180deg, #475569 0%, #0f172a 100%); }
.bg-snow { background: linear-gradient(180deg, #dbeafe 0%, #94a3b8 100%); }
.bg-thunder { background: linear-gradient(180deg, #1e293b 0%, #020617 100%); }
.bg-mist { background: linear-gradient(180deg, #cbd5e1 0%, #64748b 100%); }
.bg-default { background: linear-gradient(180deg, #0ea5e9 0%, #1e3a8a 100%); }

.overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, rgba(255,255,255,0.12), transparent 35%);
  pointer-events: none;
}

.container {
  position: relative;
  z-index: 2;
  width: min(920px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 64px;
}

.hero {
  text-align: center;
  margin-bottom: 24px;
}

.eyebrow {
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  opacity: 0.85;
}

.hero h1 {
  margin: 0;
  font-size: clamp(32px, 6vw, 56px);
  line-height: 1;
}

.subtitle {
  max-width: 680px;
  margin: 14px auto 0;
  font-size: 18px;
  opacity: 0.92;
}

.searchCard,
.weatherCard,
.message {
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}

.searchCard {
  display: flex;
  gap: 12px;
  padding: 12px;
  margin-bottom: 18px;
}

.input {
  flex: 1 1;
  border: 0;
  outline: none;
  border-radius: 16px;
  padding: 16px 18px;
  font-size: 16px;
  color: #0f172a;
}

.button {
  border: 0;
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  color: white;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.button:disabled {
  opacity: 0.7;
  cursor: wait;
}

.message {
  padding: 18px 20px;
  margin-bottom: 18px;
}

.error {
  background: rgba(190, 24, 93, 0.22);
}

.info {
  background: rgba(255, 255, 255, 0.12);
}

.weatherCard {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-gap: 24px;
  gap: 24px;
  padding: 28px;
}

.location {
  font-size: 28px;
  font-weight: 700;
}

.temp {
  font-size: clamp(56px, 10vw, 92px);
  font-weight: 800;
  line-height: 1;
  margin-top: 10px;
}

.desc {
  margin-top: 10px;
  font-size: 20px;
  text-transform: capitalize;
  opacity: 0.95;
}

.stats {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.stat {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.12);
}

.stat span {
  display: block;
  font-size: 14px;
  opacity: 0.82;
  margin-bottom: 6px;
}

.stat strong {
  font-size: 24px;
}

.sun-glow,
.cloud-layer,
.rain-layer,
.snow-layer,
.fog-layer,
.lightning-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sun-glow {
  background: radial-gradient(circle at 80% 18%, rgba(255, 230, 120, 0.55), transparent 18%);
}

.cloud-layer {
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.18), transparent 12%),
    radial-gradient(circle at 45% 28%, rgba(255,255,255,0.14), transparent 14%),
    radial-gradient(circle at 75% 18%, rgba(255,255,255,0.16), transparent 12%);
  animation: cloud-drift 18s linear infinite alternate;
}

.rain-layer {
  background-image: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 100%);
  background-size: 2px 22px;
  opacity: 0.28;
  transform: skewX(-14deg);
  animation: rain-fall 0.45s linear infinite;
}

.snow-layer {
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.95) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,0.8) 1.5px, transparent 2.5px);
  background-size: 24px 24px, 36px 36px;
  background-position: 0 0, 12px 12px;
  opacity: 0.6;
  animation: snow-fall 8s linear infinite;
}

.fog-layer {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04)),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.18), transparent 20%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.14), transparent 24%);
  animation: fog-move 12s ease-in-out infinite alternate;
}

.lightning-layer {
  background: rgba(255,255,255,0);
  animation: lightning-flash 3.2s infinite;
}

@keyframes cloud-drift {
  from { transform: translateX(-20px); }
  to { transform: translateX(20px); }
}

@keyframes rain-fall {
  from { background-position: 0 -24px; }
  to { background-position: 0 24px; }
}

@keyframes snow-fall {
  from { background-position: 0 0, 12px 12px; }
  to { background-position: 0 120px, 12px 160px; }
}

@keyframes fog-move {
  from { transform: translateX(-10px); opacity: 0.5; }
  to { transform: translateX(10px); opacity: 0.8; }
}

@keyframes lightning-flash {
  0%, 85%, 100% { background: rgba(255,255,255,0); }
  86% { background: rgba(255,255,255,0.18); }
  87% { background: rgba(255,255,255,0.02); }
  88% { background: rgba(255,255,255,0.28); }
}

@media (max-width: 720px) {
  .searchCard {
    flex-direction: column;
  }

  .weatherCard {
    grid-template-columns: 1fr;
  }

  .container {
    padding-top: 28px;
  }
}