@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

.nww-wrapper { width:100%; max-width:480px; font-family:'IBM Plex Sans',sans-serif; }

.nww-widget {
  background:#1A1A1A;
  border:1px solid #333;
  border-top:3px solid #D72638;
  overflow:hidden;
}

/* HEADER */
.nww-header {
  background:#0D0D0D;
  padding:10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #333;
}
.nww-label { font-family:'Bebas Neue',sans-serif; letter-spacing:2px; font-size:13px; color:#D72638; }
.nww-live { display:flex; align-items:center; gap:6px; font-size:10px; color:#888; letter-spacing:1px; text-transform:uppercase; }
.nww-dot { display:inline-block; width:6px; height:6px; background:#4CAF50; border-radius:50%; animation:nww-pulse 2s infinite; }
@keyframes nww-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* CITY TABS */
.nww-city-tabs {
  display:flex;
  background:#111;
  border-bottom:1px solid #333;
  overflow-x:auto;
  scrollbar-width:none;
}
.nww-city-tabs::-webkit-scrollbar { display:none; }
.nww-city-tab {
  flex-shrink:0;
  padding:8px 14px;
  font-size:11px;
  color:#888;
  cursor:pointer;
  border-right:1px solid #222;
  border-bottom:2px solid transparent;
  transition:all 0.2s;
  font-family:'IBM Plex Sans',sans-serif;
  white-space:nowrap;
  background:none;
  border-top:none;
  border-left:none;
}
.nww-city-tab:hover { color:#F0F0F0; background:#1a1a1a; }
.nww-city-tab.active { color:#F5A623; border-bottom-color:#F5A623; background:#1a1a1a; }
.nww-city-tab-add {
  flex-shrink:0;
  padding:8px 14px;
  font-size:16px;
  color:#555;
  cursor:pointer;
  background:none;
  border:none;
  transition:color 0.2s;
}
.nww-city-tab-add:hover { color:#D72638; }

/* SEARCH */
.nww-search-bar { display:flex; border-bottom:1px solid #333; }
.nww-city-input {
  flex:1; background:#0D0D0D; border:none !important;
  padding:10px 14px; color:#F0F0F0;
  font-family:'IBM Plex Sans',sans-serif; font-size:13px;
  outline:none; box-shadow:none !important;
}
.nww-city-input::placeholder { color:#555; }
.nww-search-btn { background:#D72638; border:none; padding:10px 16px; color:#fff; cursor:pointer; font-size:14px; transition:background 0.2s; }
.nww-search-btn:hover { background:#b01e2b; }

/* MAIN WEATHER */
.nww-main-weather {
  padding:18px 20px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #333;
  background:linear-gradient(135deg,#1a1a1a 0%,#141414 100%);
}
.nww-city-name { font-family:'Bebas Neue',sans-serif; font-size:24px; color:#F0F0F0; letter-spacing:1px; line-height:1; }
.nww-date { font-size:11px; color:#888; margin-top:4px; letter-spacing:0.5px; }
.nww-condition { font-size:13px; color:#F5A623; margin-top:8px; font-weight:500; }
.nww-weather-icon { font-size:50px; text-align:center; line-height:1; filter:drop-shadow(0 0 10px rgba(245,166,35,0.3)); }
.nww-temp-block { text-align:right; }
.nww-temp { font-family:'Bebas Neue',sans-serif; font-size:58px; color:#F0F0F0; line-height:1; letter-spacing:-1px; }
.nww-temp sup { font-size:20px; vertical-align:super; color:#888; }
.nww-feels { font-size:11px; color:#888; margin-top:2px; }

/* STATS ROW 1 - Humidity, Wind, Visibility */
.nww-stats-row {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid #333;
}
.nww-stat-item { padding:10px 12px; border-right:1px solid #333; text-align:center; }
.nww-stat-item:last-child { border-right:none; }
.nww-stat-label { font-size:9px; color:#888; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:4px; }
.nww-stat-value { font-family:'Bebas Neue',sans-serif; font-size:18px; color:#F0F0F0; }
.nww-stat-unit { font-size:10px; color:#888; margin-top:1px; }

/* STATS ROW 2 - Rain, UV, Sunrise, Sunset */
.nww-stats-row2 {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid #333;
  background:#161616;
}
.nww-stat2-item { padding:10px 8px; border-right:1px solid #2a2a2a; text-align:center; }
.nww-stat2-item:last-child { border-right:none; }
.nww-stat2-icon { font-size:16px; margin-bottom:3px; }
.nww-stat2-label { font-size:8px; color:#666; text-transform:uppercase; letter-spacing:1px; margin-bottom:3px; }
.nww-stat2-value { font-family:'Bebas Neue',sans-serif; font-size:15px; color:#F0F0F0; }

/* UV BAR */
.nww-uv-bar-wrap { margin-top:3px; height:3px; background:#333; border-radius:2px; overflow:hidden; }
.nww-uv-bar { height:100%; border-radius:2px; transition:width 0.6s; }

/* RAIN BAR */
.nww-rain-bar-wrap { margin-top:3px; height:3px; background:#333; border-radius:2px; overflow:hidden; }
.nww-rain-bar { height:100%; background:linear-gradient(90deg,#4fc3f7,#0288d1); border-radius:2px; }

/* FORECAST */
.nww-forecast-header { padding:10px 16px 6px; display:flex; align-items:center; }
.nww-forecast-title { font-family:'Bebas Neue',sans-serif; font-size:12px; letter-spacing:2px; color:#888; white-space:nowrap; }
.nww-divider { flex:1; height:1px; background:#333; margin-left:10px; }
.nww-forecast-row { display:grid; grid-template-columns:repeat(5,1fr); padding:4px 12px 14px; gap:4px; }
.nww-forecast-day { text-align:center; padding:8px 4px; border-radius:2px; transition:background 0.2s; }
.nww-forecast-day:hover { background:#222; }
.nww-day-name { font-size:10px; color:#888; text-transform:uppercase; letter-spacing:1px; margin-bottom:5px; }
.nww-day-icon { font-size:20px; margin-bottom:5px; }
.nww-day-high { font-family:'Bebas Neue',sans-serif; font-size:15px; color:#F0F0F0; }
.nww-day-low { font-size:10px; color:#888; margin-top:1px; }
.nww-day-rain { font-size:9px; color:#4fc3f7; margin-top:2px; }

/* FOOTER */
.nww-footer {
  background:#0D0D0D; padding:8px 16px;
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid #333;
}
.nww-powered { font-size:9px; color:#444; letter-spacing:1px; text-transform:uppercase; }
.nww-refresh-btn {
  background:none; border:1px solid #333; color:#888;
  font-size:9px; letter-spacing:1px; text-transform:uppercase;
  padding:4px 10px; cursor:pointer;
  font-family:'IBM Plex Sans',sans-serif; transition:all 0.2s;
}
.nww-refresh-btn:hover { border-color:#D72638; color:#D72638; }

/* STATUS */
.nww-status { padding:36px 20px; text-align:center; }
.nww-status p { font-size:13px; color:#888; margin-top:12px; }
.nww-spinner { width:28px; height:28px; border:2px solid #333; border-top-color:#D72638; border-radius:50%; animation:nww-spin 0.8s linear infinite; margin:0 auto; }
@keyframes nww-spin { to{transform:rotate(360deg)} }
.nww-error-icon { font-size:36px; margin-bottom:8px; }
.nww-retry-btn { background:#D72638; color:#fff; border:none; padding:8px 20px; font-size:11px; letter-spacing:1px; text-transform:uppercase; font-family:'IBM Plex Sans',sans-serif; cursor:pointer; margin-top:8px; }

/* FADE IN */
.nww-fade-in { animation:nww-fadeIn 0.4s ease forwards; }
@keyframes nww-fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ADD CITY MODAL */
.nww-modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.7); z-index:9999;
  align-items:center; justify-content:center;
}
.nww-modal-overlay.open { display:flex; }
.nww-modal {
  background:#1a1a1a; border:1px solid #444; border-top:3px solid #D72638;
  padding:24px; width:90%; max-width:340px;
}
.nww-modal h3 { font-family:'Bebas Neue',sans-serif; letter-spacing:2px; color:#F0F0F0; font-size:18px; margin-bottom:14px; }
.nww-modal-input {
  width:100%; background:#0D0D0D; border:1px solid #444; color:#F0F0F0;
  padding:10px 12px; font-family:'IBM Plex Sans',sans-serif; font-size:13px;
  outline:none; margin-bottom:12px; box-sizing:border-box;
}
.nww-modal-input::placeholder { color:#555; }
.nww-modal-btns { display:flex; gap:8px; }
.nww-modal-add { flex:1; background:#D72638; color:#fff; border:none; padding:9px; font-size:11px; letter-spacing:1px; text-transform:uppercase; font-family:'IBM Plex Sans',sans-serif; cursor:pointer; }
.nww-modal-cancel { flex:1; background:none; color:#888; border:1px solid #444; padding:9px; font-size:11px; letter-spacing:1px; text-transform:uppercase; font-family:'IBM Plex Sans',sans-serif; cursor:pointer; }