/* ═══════════════════════════════════════════
   NEWS WEATHER WIDGET PRO v6.3
   Final Polish — Bug fixes + UI improvements
═══════════════════════════════════════════ */

.nww-wrapper { --nww-font:'Bebas Neue',sans-serif; width:100%; max-width:480px; font-family:'IBM Plex Sans',sans-serif; }
.nww-wrapper,.nww-wrapper * { box-sizing:border-box; }

/* ══════════════════════════════
   DARK THEME
══════════════════════════════ */
.nww-dark .nww-widget        { background:#1A1A1A; border:1px solid #333; border-top:3px solid #D72638; overflow:hidden; }
.nww-dark .nww-header        { background:#0D0D0D; border-bottom:1px solid #333; }
.nww-dark .nww-label         { color:#D72638; }
.nww-dark .nww-live          { color:#888; }
.nww-dark .nww-city-tabs     { background:#111; border-bottom:1px solid #333; }
.nww-dark .nww-city-tab      { color:#888; border-right:1px solid #222; border-bottom:2px solid transparent; }
.nww-dark .nww-city-tab:hover{ color:#F0F0F0; background:#1a1a1a; }
.nww-dark .nww-city-tab.active { color:#F5A623; border-bottom-color:#F5A623; background:#1a1a1a; }
.nww-dark .nww-tab-close     { color:#555; }
.nww-dark .nww-tab-close:hover { background:#D72638 !important; color:#fff; }
.nww-dark .nww-city-tab-add  { color:#555; }
.nww-dark .nww-city-tab-add:hover { color:#F5A623; }
.nww-dark .nww-search-bar    { border-bottom:1px solid #333; }
.nww-dark .nww-city-input    { background:#0D0D0D; color:#F0F0F0; }
.nww-dark .nww-city-input::placeholder { color:#555; }
.nww-dark .nww-main-weather  { background:linear-gradient(135deg,#1a1a1a,#141414); border-bottom:1px solid #333; }
.nww-dark .nww-city-name     { color:#F0F0F0; }
.nww-dark .nww-date          { color:#888; }
.nww-dark .nww-condition     { color:#F5A623; }
.nww-dark .nww-temp          { color:#F0F0F0; }
.nww-dark .nww-temp sup      { color:#888; }
.nww-dark .nww-feels         { color:#888; }
/* UI FIX: Light theme no drop-shadow glow */
.nww-dark .nww-weather-icon  { filter:drop-shadow(0 0 8px rgba(245,166,35,0.3)); }
.nww-light .nww-weather-icon { filter:none; }
.nww-dark .nww-stats-row     { border-bottom:1px solid #333; }
.nww-dark .nww-stat-item     { border-right:1px solid #333; }
.nww-dark .nww-stat-label    { color:#888; }
.nww-dark .nww-stat-value    { color:#F0F0F0; }
.nww-dark .nww-stat-unit     { color:#888; }
.nww-dark .nww-stats-row2    { background:#161616; border-bottom:1px solid #333; }
.nww-dark .nww-stat2-item    { border-right:1px solid #2a2a2a; }
.nww-dark .nww-stat2-label   { color:#666; }
.nww-dark .nww-stat2-value   { color:#F0F0F0; }
.nww-dark .nww-bar-wrap      { background:#2a2a2a; }
/* AQI */
.nww-dark .nww-aqi-overview  { background:#111; border-bottom:1px solid #333; }
.nww-dark .nww-aqi-label     { color:#888; }
.nww-dark .nww-aqi-bar-bg    { background:#2a2a2a; }
.nww-dark .nww-aqi-scroll    { background:#161616; border-bottom:1px solid #333; }
.nww-dark .nww-aqi-card      { border-right:1px solid #2a2a2a; }
.nww-dark .nww-aqi-card-label{ color:#666; }
.nww-dark .nww-aqi-card-unit { color:#555; }
/* UI FIX: Arrow hover transition */
.nww-dark .nww-aqi-arrow     { color:#555; }
.nww-dark .nww-aqi-arrow:hover { color:#F5A623; }
.nww-dark .nww-hourly-wrap   { background:#161616; border-bottom:1px solid #333; }
.nww-dark .nww-hourly-item   { border-right:1px solid #2a2a2a; }
.nww-dark .nww-hourly-time   { color:#888; }
.nww-dark .nww-hourly-temp   { color:#F0F0F0; }
.nww-dark .nww-hourly-rain   { color:#4fc3f7; }
.nww-dark .nww-hourly-arrow  { color:#555; }
.nww-dark .nww-hourly-arrow:hover { color:#F5A623; }
/* UI FIX: Section header border */
.nww-dark .nww-hourly-hdr    { border-bottom:1px solid #2a2a2a; }
.nww-dark .nww-section-hdr   { color:#888; }
.nww-dark .nww-forecast-title{ color:#888; }
.nww-dark .nww-divider       { background:#333; }
.nww-dark .nww-forecast-day:hover { background:#222; }
.nww-dark .nww-day-name      { color:#888; }
.nww-dark .nww-day-high      { color:#F0F0F0; }
.nww-dark .nww-day-low       { color:#888; }
/* Map */
.nww-dark .nww-map-hdr       { border-bottom:1px solid #333; }
.nww-dark .nww-map-container { background:#1a1a1a; border-bottom:1px solid #333; }
.nww-dark .nww-map-section .nww-section-hdr { color:#888; }
/* Ticker */
.nww-dark .nww-ticker-wrap   { background:#0D0D0D; border-top:1px solid #222; }
.nww-dark .nww-ticker-label  { background:#D72638; color:#fff; }
.nww-dark .nww-ticker-inner  { color:#ccc; }
/* Stock */
.nww-dark .nww-stock-wrap    { background:#0a0a0a; border-top:1px solid #1a1a1a; }
.nww-dark .nww-stock-label   { background:#1a6b1a; color:#fff; }
.nww-dark .nww-stock-inner   { color:#ccc; }
/* Footer */
.nww-dark .nww-footer        { background:#0D0D0D; border-top:1px solid #333; }
.nww-dark .nww-powered       { color:#444; }
.nww-dark .nww-refresh-btn   { border-color:#444 !important; color:#888 !important; }
.nww-dark .nww-refresh-btn:hover { border-color:#D72638 !important; color:#D72638 !important; }
.nww-dark .nww-status p      { color:#888; }
.nww-dark .nww-spinner       { border-color:#333; border-top-color:#D72638; }
.nww-dark .nww-modal         { background:#1a1a1a; border-color:#444; }
.nww-dark .nww-modal h3      { color:#F0F0F0; }
.nww-dark .nww-modal-input   { background:#0D0D0D; border-color:#444; color:#F0F0F0; }
.nww-dark .nww-modal-cancel  { color:#888 !important; border-color:#444 !important; }

/* ══════════════════════════════
   LIGHT THEME
══════════════════════════════ */
.nww-light .nww-widget        { background:#fff; border:1px solid #E0E0E0; border-top:3px solid #D72638; box-shadow:0 2px 16px rgba(0,0,0,0.07); overflow:hidden; }
.nww-light .nww-header        { background:#F8F8F8; border-bottom:1px solid #E8E8E8; }
.nww-light .nww-label         { color:#D72638; }
.nww-light .nww-live          { color:#999; }
.nww-light .nww-city-tabs     { background:#F2F2F2; border-bottom:1px solid #E0E0E0; }
.nww-light .nww-city-tab      { color:#999; border-right:1px solid #E8E8E8; border-bottom:2px solid transparent; }
.nww-light .nww-city-tab:hover{ color:#1A1A1A; background:#fff; }
.nww-light .nww-city-tab.active { color:#D72638; border-bottom-color:#D72638; background:#fff; }
.nww-light .nww-tab-close     { color:#bbb; }
.nww-light .nww-tab-close:hover { background:#D72638 !important; color:#fff; }
.nww-light .nww-city-tab-add  { color:#bbb; }
.nww-light .nww-city-tab-add:hover { color:#D72638; }
.nww-light .nww-search-bar    { border-bottom:1px solid #E0E0E0; }
.nww-light .nww-city-input    { background:#F8F8F8; color:#1A1A1A; }
.nww-light .nww-city-input::placeholder { color:#bbb; }
.nww-light .nww-main-weather  { background:linear-gradient(135deg,#fff,#f7f7f7); border-bottom:1px solid #E8E8E8; }
.nww-light .nww-city-name     { color:#1A1A1A; }
.nww-light .nww-date          { color:#999; }
.nww-light .nww-condition     { color:#D72638; }
.nww-light .nww-temp          { color:#1A1A1A; }
.nww-light .nww-temp sup      { color:#999; }
.nww-light .nww-feels         { color:#999; }
.nww-light .nww-stats-row     { border-bottom:1px solid #E8E8E8; }
.nww-light .nww-stat-item     { border-right:1px solid #E8E8E8; }
.nww-light .nww-stat-label    { color:#aaa; }
.nww-light .nww-stat-value    { color:#1A1A1A; }
.nww-light .nww-stat-unit     { color:#bbb; }
.nww-light .nww-stats-row2    { background:#F5F5F5; border-bottom:1px solid #E8E8E8; }
.nww-light .nww-stat2-item    { border-right:1px solid #E8E8E8; }
.nww-light .nww-stat2-label   { color:#aaa; }
.nww-light .nww-stat2-value   { color:#1A1A1A; }
.nww-light .nww-bar-wrap      { background:#E0E0E0; }
/* AQI */
.nww-light .nww-aqi-overview  { background:#F5F5F5; border-bottom:1px solid #E8E8E8; }
.nww-light .nww-aqi-label     { color:#aaa; }
.nww-light .nww-aqi-bar-bg    { background:#E0E0E0; }
.nww-light .nww-aqi-scroll    { background:#F0F0F0; border-bottom:1px solid #E8E8E8; }
.nww-light .nww-aqi-card      { border-right:1px solid #E8E8E8; }
.nww-light .nww-aqi-card-label{ color:#aaa; }
.nww-light .nww-aqi-card-unit { color:#bbb; }
.nww-light .nww-aqi-arrow     { color:#ccc; }
.nww-light .nww-aqi-arrow:hover { color:#D72638; }
.nww-light .nww-hourly-wrap   { background:#F5F5F5; border-bottom:1px solid #E8E8E8; }
.nww-light .nww-hourly-item   { border-right:1px solid #E8E8E8; }
.nww-light .nww-hourly-time   { color:#aaa; }
.nww-light .nww-hourly-temp   { color:#1A1A1A; }
.nww-light .nww-hourly-rain   { color:#0288d1; }
.nww-light .nww-hourly-arrow  { color:#ccc; }
.nww-light .nww-hourly-arrow:hover { color:#D72638; }
/* UI FIX: Section header border light */
.nww-light .nww-hourly-hdr   { border-bottom:1px solid #E8E8E8; }
.nww-light .nww-section-hdr  { color:#aaa; }
.nww-light .nww-forecast-title{ color:#aaa; }
.nww-light .nww-divider       { background:#E0E0E0; }
.nww-light .nww-forecast-day:hover { background:#F0F0F0; }
.nww-light .nww-day-name      { color:#aaa; }
.nww-light .nww-day-high      { color:#1A1A1A; }
.nww-light .nww-day-low       { color:#999; }
/* Map */
.nww-light .nww-map-hdr       { border-bottom:1px solid #E8E8E8; }
.nww-light .nww-map-container { background:#f5f5f5; border-bottom:1px solid #E8E8E8; }
.nww-light .nww-map-section .nww-section-hdr { color:#aaa; }
/* Ticker */
.nww-light .nww-ticker-wrap   { background:#F2F2F2; border-top:1px solid #E0E0E0; }
.nww-light .nww-ticker-label  { background:#D72638; color:#fff; }
.nww-light .nww-ticker-inner  { color:#444; }
/* Stock */
.nww-light .nww-stock-wrap    { background:#efefef; border-top:1px solid #E0E0E0; }
.nww-light .nww-stock-label   { background:#1a6b1a; color:#fff; }
.nww-light .nww-stock-inner   { color:#333; }
/* Footer */
.nww-light .nww-footer        { background:#F8F8F8; border-top:1px solid #E8E8E8; }
.nww-light .nww-powered       { color:#ccc; }
.nww-light .nww-refresh-btn   { border-color:#ddd !important; color:#aaa !important; background:transparent !important; }
.nww-light .nww-refresh-btn:hover { border-color:#D72638 !important; color:#D72638 !important; }
.nww-light .nww-status p      { color:#aaa; }
.nww-light .nww-spinner       { border-color:#E0E0E0; border-top-color:#D72638; }
.nww-light .nww-modal         { background:#fff; border-color:#ddd; }
.nww-light .nww-modal h3      { color:#1A1A1A; }
.nww-light .nww-modal-input   { background:#F5F5F5; border-color:#ddd; color:#1A1A1A; }
.nww-light .nww-modal-cancel  { color:#999 !important; border-color:#ddd !important; }

/* ══════════════════════════════
   SHARED STRUCTURAL STYLES
══════════════════════════════ */
.nww-header { padding:10px 16px; display:flex; align-items:center; justify-content:space-between; }
.nww-label  { font-family:var(--nww-font); letter-spacing:2px; font-size:13px; }
.nww-live   { display:flex; align-items:center; gap:6px; font-size:10px; 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; flex-shrink:0; }
@keyframes nww-pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* Breaking News */
.nww-breaking-bar {
  display:flex; align-items:center; overflow:hidden;
  height:34px; background:#D72638; border-bottom:2px solid #aa1020;
}
.nww-breaking-tag {
  flex-shrink:0; padding:0 12px; font-family:var(--nww-font);
  font-size:12px; letter-spacing:2px; color:#fff; height:100%;
  display:flex; align-items:center; gap:6px;
  background:#8B0000; border-right:2px solid #aa1020;
  animation:nww-blink 1.2s ease-in-out infinite;
}
@keyframes nww-blink { 0%,100%{opacity:1} 50%{opacity:0.6} }
.nww-breaking-track { flex:1; overflow:hidden; }
/* UI FIX: Breaking text starts from right edge smoothly */
.nww-breaking-text {
  display:inline-block; white-space:nowrap;
  font-size:12px; color:#fff; font-weight:500;
  padding:0 20px; letter-spacing:0.3px;
  animation:nww-breaking 22s linear infinite;
}
.nww-breaking-text:hover { animation-play-state:paused; cursor:default; }
a.nww-breaking-text:hover { cursor:pointer; text-decoration:underline; }
@keyframes nww-breaking {
  0%   { transform:translateX(100vw); }
  100% { transform:translateX(-100%); }
}
.nww-breaking-bar a.nww-breaking-text { text-decoration:none; color:#fff; }

/* Tabs */
.nww-city-tabs { display:flex; overflow-x:auto; scrollbar-width:none; user-select:none; }
.nww-city-tabs::-webkit-scrollbar { display:none; }
.nww-city-tab {
  flex-shrink:0; display:inline-flex !important; align-items:center; gap:5px;
  padding:8px 12px; font-size:11px; cursor:pointer;
  border-top:none !important; border-left:none !important; background:none !important;
  font-family:'IBM Plex Sans',sans-serif; white-space:nowrap;
  transition:color 0.2s, border-color 0.2s, background 0.2s;
}
.nww-wrapper .nww-tab-close {
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:15px !important; height:15px !important; min-width:15px !important;
  border-radius:50% !important; font-size:9px !important; line-height:1 !important;
  cursor:pointer !important; padding:0 !important; margin:0 !important;
  border:none !important; background:none !important;
  transition:background 0.2s, color 0.2s !important; font-family:sans-serif !important;
}
.nww-city-tab-add {
  flex-shrink:0; padding:6px 14px; font-size:20px; line-height:1; cursor:pointer;
  background:none !important; border:none !important; transition:color 0.2s; font-family:sans-serif;
}

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

/* Main weather */
.nww-main-weather { padding:18px 20px 14px; display:flex; align-items:center; justify-content:space-between; }
.nww-city-name  { font-family:var(--nww-font); font-size:24px; letter-spacing:1px; line-height:1; }
.nww-date       { font-size:11px; margin-top:4px; letter-spacing:0.5px; }
.nww-condition  { font-size:13px; margin-top:8px; font-weight:500; }
.nww-weather-icon { font-size:50px; text-align:center; line-height:1; transition:transform 0.3s; display:flex; align-items:center; justify-content:center; }
.nww-weather-icon.nww-icon-anim { animation:nww-iconPop 0.5s ease; }
.nww-weather-icon:hover { transform:scale(1.1); }
@keyframes nww-iconPop {
  0%   { opacity:0; transform:scale(0.6) rotate(-8deg); }
  60%  { opacity:1; transform:scale(1.08) rotate(2deg); }
  100% { opacity:1; transform:scale(1) rotate(0deg); }
}

/* Animated SVG Sun — slow continuous ray rotation + soft breathing glow */
.nww-sun-svg { display:block; overflow:visible; }
.nww-sun-rays {
  transform-origin:50px 50px;
  animation:nww-sunRotate 24s linear infinite;
}
@keyframes nww-sunRotate {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
.nww-sun-glow {
  animation:nww-sunGlow 2.6s ease-in-out infinite;
  transform-origin:50px 50px;
}
@keyframes nww-sunGlow {
  0%,100% { opacity:0.55; transform:scale(1); }
  50%     { opacity:0.9;  transform:scale(1.12); }
}

/* Animated SVG Moon — soft glow + twinkling stars */
.nww-moon-glow {
  animation:nww-moonGlow 3.2s ease-in-out infinite;
  transform-origin:50px 50px;
}
@keyframes nww-moonGlow {
  0%,100% { opacity:0.35; transform:scale(1); }
  50%     { opacity:0.6;  transform:scale(1.08); }
}
.nww-moon-star { animation:nww-starTwinkle 1.8s ease-in-out infinite; }
.nww-moon-star-1 { animation-delay:0s; }
.nww-moon-star-2 { animation-delay:0.5s; }
.nww-moon-star-3 { animation-delay:1s; }
@keyframes nww-starTwinkle {
  0%,100% { opacity:0.2; }
  50%     { opacity:1; }
}

.nww-temp-block { text-align:right; flex-shrink:0; }
.nww-temp       { font-family:var(--nww-font); font-size:58px; line-height:1; letter-spacing:-1px; }
.nww-temp sup   { font-size:20px; vertical-align:super; }
.nww-feels      { font-size:11px; margin-top:2px; }

/* Stats row 1 */
.nww-stats-row { display:grid; grid-template-columns:repeat(3,1fr); }
.nww-stat-item { padding:10px 12px; text-align:center; }
.nww-stat-item:last-child { border-right:none !important; }
.nww-stat-label { font-size:9px; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:4px; }
.nww-stat-value { font-family:var(--nww-font); font-size:18px; line-height:1.1; }
.nww-stat-unit  { font-size:10px; margin-top:2px; }

/* Stats row 2 */
.nww-stats-row2 { display:grid; grid-template-columns:repeat(4,1fr); }
.nww-stat2-item { padding:10px 6px; text-align:center; }
.nww-stat2-item:last-child { border-right:none !important; }
.nww-stat2-svg  { display:block; margin:0 auto 4px; width:18px; height:18px; }
.nww-stat2-label{ font-size:8px; text-transform:uppercase; letter-spacing:1px; margin-bottom:3px; }
.nww-stat2-value{ font-family:var(--nww-font); font-size:14px; line-height:1.2; }
.nww-stat2-sub  { font-size:8px; letter-spacing:0.5px; margin-top:1px; }

/* Progress bars */
.nww-bar-wrap { margin-top:4px; height:3px; border-radius:4px; overflow:hidden; }
.nww-bar-fill { height:100%; border-radius:4px; transition:width 1s ease; }

/* AQI Overview */
.nww-aqi-overview { padding:10px 16px 8px; }
.nww-aqi-ov-top   { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.nww-aqi-label    { font-size:9px; text-transform:uppercase; letter-spacing:1.5px; }
.nww-aqi-ov-right { display:flex; align-items:center; gap:8px; }
.nww-aqi-num      { font-family:var(--nww-font); font-size:22px; line-height:1; }
.nww-aqi-badge    { font-size:9px; padding:2px 8px; border-radius:2px; letter-spacing:1px; text-transform:uppercase; font-weight:600; color:#fff; }
/* UI FIX: AQI bar uses correct class */
.nww-aqi-bar-bg   { height:4px; border-radius:4px; overflow:hidden; }

/* AQI Scroll */
.nww-aqi-section { }
.nww-aqi-hdr     { padding:8px 16px 4px; display:flex; align-items:center; justify-content:space-between; }
.nww-section-hdr { font-family:var(--nww-font); font-size:11px; letter-spacing:2px; }
.nww-aqi-nav     { display:flex; gap:4px; }
/* UI FIX: Arrow transition polished */
.nww-aqi-arrow   {
  background:none !important; border:none !important; cursor:pointer;
  font-size:16px; padding:0 4px; line-height:1;
  transition:color 0.2s, transform 0.15s; font-family:sans-serif;
}
.nww-aqi-arrow:hover { transform:scale(1.2); }
.nww-aqi-scroll  { display:flex; overflow-x:auto; scrollbar-width:none; cursor:grab; }
.nww-aqi-scroll:active { cursor:grabbing; }
.nww-aqi-scroll::-webkit-scrollbar { display:none; }
.nww-aqi-card    { flex-shrink:0; min-width:68px; padding:10px 8px; text-align:center; transition:background 0.2s; }
.nww-aqi-card:last-child { border-right:none !important; }
.nww-aqi-card-label { font-size:8px; text-transform:uppercase; letter-spacing:1px; margin-bottom:5px; }
.nww-aqi-card-val   { font-family:var(--nww-font); font-size:18px; line-height:1; margin-bottom:3px; }
.nww-aqi-card-unit  { font-size:8px; margin-bottom:4px; }
.nww-aqi-dot-wrap   { display:flex; justify-content:center; }
.nww-aqi-dot        { width:8px; height:8px; border-radius:50%; }

/* Hourly Forecast */
/* UI FIX: Added border-bottom + padding consistent */
.nww-hourly-hdr  { padding:10px 16px 6px; display:flex; align-items:center; justify-content:space-between; }
.nww-hourly-nav  { display:flex; gap:4px; }
.nww-hourly-arrow {
  background:none !important; border:none !important; cursor:pointer;
  font-size:16px; padding:0 4px; line-height:1;
  transition:color 0.2s, transform 0.15s; font-family:sans-serif;
}
.nww-hourly-arrow:hover { transform:scale(1.2); }
.nww-hourly-wrap { display:flex; overflow-x:auto; scrollbar-width:none; cursor:grab; }
.nww-hourly-wrap:active { cursor:grabbing; }
.nww-hourly-wrap::-webkit-scrollbar { display:none; }
.nww-hourly-item { flex-shrink:0; min-width:58px; padding:8px 6px; text-align:center; }
.nww-hourly-item:last-child { border-right:none !important; }
.nww-hourly-time { font-size:9px; text-transform:uppercase; letter-spacing:1px; margin-bottom:5px; }
.nww-hourly-icon { font-size:18px; margin-bottom:5px; line-height:1; }
.nww-hourly-temp { font-family:var(--nww-font); font-size:15px; }
.nww-hourly-rain { font-size:9px; margin-top:3px; display:flex; align-items:center; justify-content:center; gap:2px; }

/* 5-Day Forecast */
.nww-forecast-hdr  { padding:10px 16px 6px; display:flex; align-items:center; }
.nww-forecast-title{ font-family:var(--nww-font); font-size:12px; letter-spacing:2px; white-space:nowrap; }
.nww-divider       { flex:1; height:1px; margin-left:10px; }
.nww-forecast-row  { display:grid; grid-template-columns:repeat(5,1fr); padding:4px 10px 14px; gap:2px; }
.nww-forecast-day  { text-align:center; padding:8px 2px; border-radius:2px; transition:background 0.2s; }
.nww-day-name  { font-size:10px; text-transform:uppercase; letter-spacing:1px; margin-bottom:5px; }
.nww-day-icon  { font-size:20px; margin-bottom:5px; line-height:1; }
.nww-day-high  { font-family:var(--nww-font); font-size:14px; }
.nww-day-low   { font-size:10px; margin-top:1px; }
.nww-day-rain  { font-size:9px; color:#4fc3f7; margin-top:3px; display:flex; align-items:center; justify-content:center; gap:2px; }

/* Alert Banner */
.nww-alert-bar {
  padding:10px 16px; border-bottom:1px solid #ff4444;
  background:linear-gradient(90deg,#7B0000,#D72638);
  animation:nww-alertpulse 3s ease-in-out infinite, nww-alertSlideIn 0.4s ease;
  position:relative;
  overflow:hidden;
  transition:background 0.4s ease, border-color 0.4s ease;
}
/* Alert type colour themes — banner gradient matches the kind of alert showing */
.nww-alert-bar.nww-alert-heat { background:linear-gradient(90deg,#7B0000,#D72638); border-bottom-color:#ff4444; }
.nww-alert-bar.nww-alert-rain { background:linear-gradient(90deg,#0d3a66,#1565c0); border-bottom-color:#4fa3f7; }
.nww-alert-bar.nww-alert-fog  { background:linear-gradient(90deg,#3a3a3a,#5a5a5a); border-bottom-color:#888888; }
.nww-alert-bar.nww-alert-aqi  { background:linear-gradient(90deg,#4a0d66,#7b1fa2); border-bottom-color:#b366d9; }
@keyframes nww-alertpulse { 0%,100%{opacity:1} 50%{opacity:0.88} }
@keyframes nww-alertSlideIn { from{opacity:0; transform:translateY(-100%);} to{opacity:1; transform:translateY(0);} }
/* Subtle moving sheen for a "live broadcast" feel */
.nww-alert-bar::after {
  content:'';
  position:absolute; top:0; left:-150%; width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  animation:nww-alertSheen 4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes nww-alertSheen { 0%{left:-150%;} 100%{left:150%;} }
.nww-alert-title  { font-family:var(--nww-font); font-size:13px; letter-spacing:1.5px; color:#fff; margin-bottom:3px; display:flex; align-items:center; gap:6px; }
.nww-alert-title::before {
  content:''; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#fff; flex-shrink:0;
  animation:nww-livedot 1.4s ease-in-out infinite;
  box-shadow:0 0 0 0 rgba(255,255,255,0.7);
}
@keyframes nww-livedot {
  0%   { transform:scale(1);   box-shadow:0 0 0 0 rgba(255,255,255,0.6); }
  70%  { transform:scale(1.15); box-shadow:0 0 0 6px rgba(255,255,255,0); }
  100% { transform:scale(1);   box-shadow:0 0 0 0 rgba(255,255,255,0); }
}
.nww-alert-desc   { font-size:11px; color:rgba(255,255,255,0.88); line-height:1.5; }
.nww-alert-source { font-size:9px; color:rgba(255,255,255,0.55); margin-top:3px; letter-spacing:0.5px; text-transform:uppercase; }

/* Map Section */
.nww-map-section { }
.nww-map-hdr     { padding:10px 16px 6px; display:flex; align-items:center; }
.nww-map-container { height:260px; width:100%; position:relative; overflow:hidden; }

/* Weather Ticker */
.nww-ticker-wrap  { display:flex; align-items:center; overflow:hidden; padding:7px 0; height:32px; }
.nww-ticker-label {
  flex-shrink:0; padding:0 10px; font-family:var(--nww-font);
  font-size:11px; letter-spacing:1.5px; height:100%;
  display:flex; align-items:center; margin-right:0;
}
.nww-ticker-track { flex:1; overflow:hidden; position:relative; height:100%; }
.nww-ticker-inner {
  display:flex; align-items:center; white-space:nowrap;
  font-size:11px; animation-name:nww-ticker; animation-timing-function:linear; animation-iteration-count:infinite; animation-duration:60s;
  will-change:transform;
}
.nww-ticker-inner:hover { animation-play-state:paused; }
@keyframes nww-ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.nww-tick-item { display:inline-flex; align-items:center; gap:4px; padding:0 18px; }
.nww-tick-sep  { opacity:0.3; }

/* Stock Ticker */
.nww-stock-wrap  { display:flex; align-items:center; overflow:hidden; height:32px; }
.nww-stock-label {
  flex-shrink:0; padding:0 10px; font-family:var(--nww-font);
  font-size:11px; letter-spacing:1.5px; height:100%;
  display:flex; align-items:center;
}
.nww-stock-track { flex:1; overflow:hidden; height:100%; display:flex; align-items:center; }
.nww-stock-inner {
  display:inline-flex; align-items:center; white-space:nowrap;
  font-size:11px; animation-name:nww-ticker; animation-timing-function:linear; animation-iteration-count:infinite; animation-duration:60s;
  will-change:transform;
}
.nww-stock-inner:hover { animation-play-state:paused; }
.nww-stock-item  { display:inline-flex; align-items:center; gap:4px; padding:0 16px; }
.nww-stock-up    { color:#4CAF50 !important; animation:nww-stockFlashUp 1s ease; }
.nww-stock-down  { color:#F44336 !important; animation:nww-stockFlashDown 1s ease; }
.nww-stock-up.nww-noflash,
.nww-stock-down.nww-noflash { animation:none; }
@keyframes nww-stockFlashUp {
  0%   { background:rgba(76,175,80,0.35); border-radius:3px; }
  100% { background:transparent; }
}
@keyframes nww-stockFlashDown {
  0%   { background:rgba(244,67,54,0.35); border-radius:3px; }
  100% { background:transparent; }
}
.nww-stock-sep   { opacity:0.25; }

/* Footer */
.nww-footer  { padding:8px 16px; display:flex; align-items:center; justify-content:space-between; }
.nww-powered { font-size:9px; letter-spacing:1px; text-transform:uppercase; }
.nww-wrapper .nww-refresh-btn {
  display:inline-block !important; background:transparent !important;
  font-size:9px !important; letter-spacing:1px !important; text-transform:uppercase !important;
  padding:4px 10px !important; cursor:pointer !important;
  font-family:'IBM Plex Sans',sans-serif !important; text-decoration:none !important;
  border-width:1px !important; border-style:solid !important; border-radius:0 !important;
  transition:border-color 0.2s, color 0.2s !important;
}
.nww-refresh-icon { display:inline-block; }
.nww-wrapper .nww-refresh-btn.nww-spinning { pointer-events:none; opacity:0.8; }
.nww-wrapper .nww-refresh-btn.nww-spinning .nww-refresh-icon {
  animation:nww-refreshSpin 0.8s linear;
}
@keyframes nww-refreshSpin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

/* Status */
.nww-status    { padding:36px 20px; text-align:center; }
.nww-status p  { font-size:13px; margin-top:12px; }
.nww-spinner   { width:28px; height:28px; border-width:2px; border-style:solid; 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:34px; margin-bottom:8px; }
.nww-retry-btn  {
  background:#D72638 !important; color:#fff !important; border:none !important;
  padding:8px 20px; font-size:11px; letter-spacing:1px; text-transform:uppercase;
  font-family:'IBM Plex Sans',sans-serif; cursor:pointer; margin-top:8px;
  display:inline-block !important; transition:background 0.2s;
}
.nww-retry-btn:hover { background:#b01e2b !important; }

/* Fade in animation */
.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)} }

/* UI FIX: Modal backdrop blur */
.nww-modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,0.72);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  z-index:99999; align-items:center; justify-content:center;
}
.nww-modal-overlay.open { display:flex; }
.nww-modal {
  border-top:3px solid #D72638; padding:24px;
  width:88%; max-width:320px;
  border-width:1px; border-style:solid;
  animation:nww-modalIn 0.25s ease forwards;
}
@keyframes nww-modalIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }
.nww-modal h3 { font-family:var(--nww-font); letter-spacing:2px; font-size:17px; margin:0 0 14px; }
.nww-modal-input {
  width:100%; padding:10px 12px; font-family:'IBM Plex Sans',sans-serif; font-size:13px;
  outline:none; margin-bottom:12px; box-sizing:border-box;
  border-width:1px; border-style:solid; transition:border-color 0.2s;
}
.nww-modal-input:focus { border-color:#D72638 !important; }
.nww-modal-input::placeholder { color:#888; }
.nww-modal-btns   { display:flex; gap:8px; }
.nww-modal-add    {
  flex:1; background:#D72638 !important; color:#fff !important; border:none !important;
  padding:9px; font-size:11px; letter-spacing:1px; text-transform:uppercase;
  font-family:'IBM Plex Sans',sans-serif; cursor:pointer; transition:background 0.2s;
}
.nww-modal-add:hover { background:#b01e2b !important; }
.nww-modal-cancel {
  flex:1; background:none !important; border-width:1px !important; border-style:solid !important;
  padding:9px; font-size:11px; letter-spacing:1px; text-transform:uppercase;
  font-family:'IBM Plex Sans',sans-serif; cursor:pointer; transition:opacity 0.2s;
}
.nww-modal-cancel:hover { opacity:0.7; }

/* ══════════════════════════════
   TOP CITIES — Horizontal Scroll Cards
   (Same pattern as AQI Pollutants scroll)
══════════════════════════════ */
.nww-topcities-holder { }

.nww-topcities-hdr {
  padding:10px 16px 4px;
  display:flex; align-items:center; justify-content:space-between;
}
.nww-topcities-hdr .nww-section-hdr { display:flex; align-items:center; gap:6px; }
.nww-topcities-hdr .nww-section-hdr::before {
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:#4CAF50; flex-shrink:0;
  animation:nww-tclive 1.6s ease-in-out infinite;
}
@keyframes nww-tclive {
  0%   { box-shadow:0 0 0 0 rgba(76,175,80,0.6); }
  70%  { box-shadow:0 0 0 5px rgba(76,175,80,0); }
  100% { box-shadow:0 0 0 0 rgba(76,175,80,0); }
}
.nww-topcities-nav { display:flex; gap:4px; }
.nww-topcities-arrow {
  background:none !important; border:none !important; cursor:pointer;
  font-size:16px; padding:0 4px; line-height:1;
  transition:color 0.2s, transform 0.15s; font-family:sans-serif;
}
.nww-topcities-arrow:hover { transform:scale(1.2); }

.nww-topcities-scroll {
  display:flex; overflow-x:auto; scrollbar-width:none; cursor:grab;
  padding:4px 10px 14px;
  gap:8px;
}
.nww-topcities-scroll:active { cursor:grabbing; }
.nww-topcities-scroll::-webkit-scrollbar { display:none; }

.nww-topcity-card {
  flex-shrink:0;
  min-width:84px;
  padding:12px 10px;
  text-align:center;
  border-radius:8px;
  position:relative;
  transition:transform 0.2s ease, background 0.2s, box-shadow 0.25s;
  animation:nww-tcCardIn 0.45s ease both;
}
/* Staggered entrance — each card appears slightly after the previous one */
.nww-topcity-card:nth-child(1)  { animation-delay:0.00s; }
.nww-topcity-card:nth-child(2)  { animation-delay:0.05s; }
.nww-topcity-card:nth-child(3)  { animation-delay:0.10s; }
.nww-topcity-card:nth-child(4)  { animation-delay:0.15s; }
.nww-topcity-card:nth-child(5)  { animation-delay:0.20s; }
.nww-topcity-card:nth-child(6)  { animation-delay:0.25s; }
.nww-topcity-card:nth-child(7)  { animation-delay:0.30s; }
.nww-topcity-card:nth-child(8)  { animation-delay:0.35s; }
.nww-topcity-card:nth-child(9)  { animation-delay:0.40s; }
.nww-topcity-card:nth-child(10) { animation-delay:0.45s; }
.nww-topcity-card:nth-child(n+11) { animation-delay:0.5s; }
@keyframes nww-tcCardIn {
  from { opacity:0; transform:translateY(10px) scale(0.95); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.nww-topcity-card:hover { transform:translateY(-3px) scale(1.03); box-shadow:0 6px 16px rgba(0,0,0,0.18); }
.nww-topcity-card:active { transform:translateY(-1px) scale(0.98); }

.nww-topcity-name {
  font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:0.5px;
  margin-bottom:6px;
  white-space:nowrap;
}
.nww-topcity-icon {
  font-size:22px; margin-bottom:6px; line-height:1;
  display:inline-block;
  animation:nww-tcIconFloat 3s ease-in-out infinite;
}
@keyframes nww-tcIconFloat {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-2px); }
}
.nww-topcity-temp {
  font-family:var(--nww-font);
  font-size:18px; line-height:1;
  transition:text-shadow 0.3s;
}

/* Dark theme */
.nww-dark .nww-topcities-holder { background:#161616; border-bottom:1px solid #333; }
.nww-dark .nww-topcities-arrow  { color:#555; }
.nww-dark .nww-topcities-arrow:hover { color:#F5A623; }
.nww-dark .nww-topcity-card     { background:#1f1f1f; border:1px solid #2a2a2a; }
.nww-dark .nww-topcity-card:hover { background:#252525; border-color:#D72638; box-shadow:0 6px 16px rgba(215,38,56,0.15); }
.nww-dark .nww-topcity-card:hover .nww-topcity-temp { text-shadow:0 0 10px rgba(245,166,35,0.5); }
.nww-dark .nww-topcity-name     { color:#aaa; }
.nww-dark .nww-topcity-temp     { color:#F0F0F0; }

/* Light theme */
.nww-light .nww-topcities-holder { background:#F5F5F5; border-bottom:1px solid #E8E8E8; }
.nww-light .nww-topcities-arrow  { color:#ccc; }
.nww-light .nww-topcities-arrow:hover { color:#D72638; }
.nww-light .nww-topcity-card     { background:#fff; border:1px solid #E8E8E8; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
.nww-light .nww-topcity-card:hover { border-color:#D72638; box-shadow:0 6px 16px rgba(215,38,56,0.12); }
.nww-light .nww-topcity-card:hover .nww-topcity-temp { text-shadow:0 0 8px rgba(215,38,56,0.25); }
.nww-light .nww-topcity-name     { color:#888; }
.nww-light .nww-topcity-temp     { color:#1A1A1A; }