/* ===========================
   WeatherWave — CLEAN CSS
   =========================== */

/* Palette / tokens */
:root{
  --bg-start: #f7fbff;
  --bg-end:   #e9f7ff;
  --accent:   #67b7ff;
  --muted:    #6b7b8c;
  --card-bg:  rgba(255,255,255,0.95);
  --glass:    rgba(255,255,255,0.8);
  --shadow:   0 18px 40px rgba(6,40,60,0.06);
  --radius:   16px;
}

/* Base */
*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  padding:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background: linear-gradient(180deg,var(--bg-start),var(--bg-end));
  color:#073241;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* Page wrapper */
.page-wrap{
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:22px;
}

/* HEADER */
.topbar{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  margin-bottom:18px;
  padding-top:6px;
}

.site-title{
  margin:0;
  font-size:64px;
  font-weight:800;
  letter-spacing:0.6px;
  text-align:center;
  color:#063244;
  cursor:pointer;
  line-height:1;
}

.site-desc{
  max-width:1100px;
  margin-top:8px;
  font-size:15px;
  color:var(--muted);
  text-align:center;
  padding:0 8px;
}

/* LANG SWITCH */
.lang-switch{
  position:fixed;
  top:12px;
  right:12px;
  z-index:1200;
  display:flex;
  gap:8px;
  align-items:center;
  padding:6px;
}
.lang-btn{
  width:36px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 6px 18px rgba(6,40,60,0.06);
  border:1px solid rgba(6,40,60,0.04);
  cursor:pointer;
  font-size:18px;
}
.lang-btn:hover{ transform:translateY(-3px); transition:.12s; }

/* MAIN */
.stage{
  width:100%;
  margin-top:6px;
}

/* CARDS layout */
.cards{
  display:flex;
  gap:22px;
  width:100%;
  justify-content:space-between;
  margin: 10px 0 22px 0;
}

.card{
  flex:1 1 0;
  min-width:0;
  background: var(--card-bg);
  border-radius: var(--radius);
  padding:24px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  transition: all 0.35s ease;
  min-height:320px;
  position:relative;
}

/* Hover */
.card:hover{
  transform: translateY(-8px);
  box-shadow: 0 36px 80px rgba(6,40,60,0.09);
}

/* Expanded card */
.card.expanded{
  transform: scale(1.04);
  z-index: 5;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}

/* Main content */
.card-main{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex:1;
}
.city-name{ font-size:22px; font-weight:700; color:#063244; }
.temp{ font-size:48px; font-weight:900; color:#063244; }
.cond{ font-size:16px; color:var(--muted); }

/* EXPANDED TEXT (fixed version — only this exists now) */
.card-more{
  display:none;
  opacity:0;
  margin-top:14px;
  padding-top:12px;
  border-top:1px dashed rgba(6,40,60,0.04);
  color:var(--muted);
  font-size:14px;
  transition: opacity 0.35s ease;
}

.card.expanded .card-more{
  display:block;
  opacity:1;
}

/* Search card */
.card-search{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}
.search-inner{ width:100%; max-width:520px; }

#searchInput{
  width:100%;
  padding:16px 20px;
  border-radius:999px;
  border:1px solid rgba(6,40,60,0.06);
  font-size:18px;
  background: linear-gradient(180deg,#fff,#fafafa);
  box-shadow: 0 10px 30px rgba(6,40,60,0.04);
  color:#063244;
}
#searchInput::placeholder{
  color:#9aa6b2;
  font-size:15px;
}

/* Suggestions */
.suggestions{
  position:absolute;
  left:0; right:0;
  margin-top:8px;
  background:white;
  color:#063244;
  border-radius:10px;
  box-shadow: 0 10px 30px rgba(6,40,60,0.08);
  padding:8px;
  max-height:260px;
  overflow:auto;
  display:none;
  z-index:999;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:10px;
  background:var(--accent);
  color:white;
  cursor:pointer;
  font-weight:600;
  border:0;
}
.btn.small{
  padding:6px 10px;
  font-size:13px;
  background:transparent;
  color:var(--muted);
  border:1px solid rgba(6,40,60,0.04);
}

/* FOOTER */
.footer{
  width:100%;
  margin-top:26px;
  text-align:center;
  padding-bottom:28px;
}
.developer{
  max-width:1100px;
  margin:0 auto;
  color:var(--muted);
}
.developer h3{
  margin:0 0 8px 0;
  color:#063244;
  font-size:18px;
}
#devText{ line-height:1.5; font-size:15px; }

/* RESPONSIVE */
@media (max-width:1200px){
  .site-title{ font-size:48px; }
  .card{ min-height:320px; padding:22px; }
}
@media (max-width:900px){
  .page-wrap{ padding:14px; max-width:980px; }
  .cards{ flex-wrap:wrap; gap:16px; justify-content:center; }
  .card{ flex:1 1 45%; min-width:320px; }
  .site-title{ font-size:40px; }
}
@media (max-width:600px){
  .site-title{ font-size:28px; }
  .card{ flex:1 1 100%; min-height:220px; padding:16px; }
  #searchInput{ font-size:16px; padding:12px 14px; }
  .lang-btn{ width:30px; height:20px; font-size:16px; }
}
/* ✅ TEMP SWITCH (LEFT TOP, SAME STYLE AS LANG) */
.temp-switch{
  position:fixed;
  top:12px;
  left:12px;
  z-index:1200;
  display:flex;
  gap:8px;
  padding:6px;
}

.temp-btn{
  width:36px;
  height:24px;
  border-radius:6px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 6px 18px rgba(6,40,60,0.06);
  border:1px solid rgba(6,40,60,0.04);
  cursor:pointer;
  font-size:14px;
  font-weight:700;
}

.temp-btn.active{
  background:#67b7ff;
  color:white;
}