.weather-widget{
  border:1px solid rgba(0,0,0,.08);
  background:hsla(0,0%,100%,.96);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  margin:16px 0;
}

.weather-widget__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.weather-widget__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:800;
  color:#0f172a;
}
.weather-widget__title i{font-size:18px;color:var(--color-primary, #3f8c6b)}

.weather-widget__meta{
  font-size:12px;
  font-weight:700;
  color:#64748b;
  white-space:nowrap;
}

.weather-widget__loading{
  font-size:13px;
  font-weight:700;
  color:#334155;
  padding:10px 0;
}
.weather-widget__error{
  font-size:13px;
  font-weight:700;
  color:#b91c1c;
  background:rgba(220,38,38,.08);
  border:1px solid rgba(220,38,38,.18);
  border-radius:12px;
  padding:10px 12px;
}

.weather-current{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:14px;
  background:rgba(63,140,107,.06);
  border:1px solid rgba(63,140,107,.12);
  margin-bottom:12px;
}
.weather-current__main{display:flex;align-items:center;gap:12px}
.weather-current__main i{font-size:28px;color:#254}
.weather-current__temp{font-size:22px;font-weight:900;color:#0f172a;line-height:1.1}
.weather-current__desc{font-size:13px;font-weight:700;color:#475569;margin-top:2px;max-width:44ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.weather-days{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:10px;
}
.weather-day{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  border-radius:14px;
  padding:10px 10px 12px;
  min-width:0;
}
.weather-day__top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.weather-day__date{
  font-size:13px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:#0f172a;
  white-space:nowrap
}
.weather-day__top i{font-size:18px;color:#334155}
.weather-day__temps{
  font-size:14px;
  font-weight:800;
  color:#0f172a;
  display:flex;
  align-items:baseline;
  gap:6px
}
.weather-day__temps .min{color:#2563eb}
.weather-day__temps .max{color:#b91c1c}
.weather-day__temps .sep{opacity:.6;font-weight:800}
.weather-day__label{
  margin-top:6px;
  font-size:12px;
  font-weight:600;
  color:#475569;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width: 992px){
  .weather-days{grid-template-columns:repeat(5, minmax(0, 1fr))}
}

@media (max-width: 768px){
  .weather-widget{padding:14px;border-radius:18px}
  .weather-widget__title{font-size:15px}
  .weather-current{padding:12px}
  .weather-day__date{font-size:14px;font-weight:700}
  .weather-day__label{font-size:12px}
  .weather-days{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .weather-day{
    flex:0 0 160px;
    scroll-snap-align:start;
  }
}