/* ===== Flavor Weather Samsung Pro v10 — FULL WIDTH ===== */
*,:before,:after{box-sizing:border-box}
.fws-page{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:#1e293b;line-height:1.6;margin:0;padding:0;width:100%}
.fws-body{max-width:1200px;margin:0 auto;padding:0 20px}

/* ===== HERO — FULL WIDTH EDGE TO EDGE ===== */
.fws-hero{position:relative;padding:60px 40px 50px;color:#fff;overflow:hidden;min-height:340px;display:flex;align-items:center}
.fws-hero *{color:#fff}
.fws-hero-content{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1200px;margin:0 auto}
.fws-hero-left{flex:1}
.fws-hero-right{flex-shrink:0;font-size:6em;text-align:center;filter:drop-shadow(0 4px 20px rgba(0,0,0,.15));animation:fws-float 4s ease-in-out infinite}
@keyframes fws-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.fws-hero-location{font-size:1.1em;font-weight:500;margin-bottom:10px;display:flex;align-items:center;gap:6px;opacity:.9}
.fws-hero-temp{font-size:6em;font-weight:200;line-height:1;letter-spacing:-4px;margin:0}
.fws-unit{font-size:.35em;font-weight:300;vertical-align:super}
.fws-hero-desc{font-size:1.4em;font-weight:400;margin:8px 0}
.fws-hero-sub{font-size:1em;opacity:.8}
.fws-hero-hilo{margin-top:8px;font-size:1.1em;font-weight:500;opacity:.85}

/* ===== WEATHER BACKGROUNDS ===== */
.fws-bg-clear.is-day{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%)}
.fws-bg-clear.is-night,.fws-bg-mostly-clear.is-night{background:linear-gradient(135deg,#0c1445 0%,#1a237e 50%,#283593 100%)}
.fws-bg-mostly-clear.is-day{background:linear-gradient(135deg,#56CCF2 0%,#2F80ED 100%)}
.fws-bg-partly-cloudy{background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#56a0d3 100%)}
.fws-bg-overcast{background:linear-gradient(135deg,#606c88 0%,#3f4c6b 100%)}
.fws-bg-fog{background:linear-gradient(135deg,#90a4ae 0%,#78909c 100%)}
.fws-bg-drizzle,.fws-bg-rain-light{background:linear-gradient(135deg,#4b6cb7 0%,#182848 100%)}
.fws-bg-rain,.fws-bg-showers{background:linear-gradient(135deg,#3f51b5 0%,#283593 100%)}
.fws-bg-rain-heavy,.fws-bg-showers-heavy{background:linear-gradient(135deg,#1a237e 0%,#0d1b4a 100%)}
.fws-bg-freezing-rain{background:linear-gradient(135deg,#00695c 0%,#004d40 100%)}
.fws-bg-snow{background:linear-gradient(135deg,#e3f2fd 0%,#90caf9 100%);color:#1e293b !important}
.fws-bg-snow *{color:#1e293b !important}
.fws-bg-snow-heavy{background:linear-gradient(135deg,#cfd8dc 0%,#90a4ae 100%);color:#1e293b !important}
.fws-bg-snow-heavy *{color:#1e293b !important}
.fws-bg-thunderstorm{background:linear-gradient(135deg,#311b92 0%,#0d0d2b 100%)}
.fws-bg-unknown{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}

/* ===== WEATHER ANIMATIONS (Scene-based, no person) ===== */
.fws-hero-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}

/* Rain drops */
.fws-rain-drop{position:absolute;width:2px;background:rgba(255,255,255,.5);border-radius:0 0 2px 2px;animation:fws-rain-fall linear infinite}
@keyframes fws-rain-fall{0%{transform:translateY(-20px);opacity:1}100%{transform:translateY(400px);opacity:.3}}

/* Snow flakes */
.fws-snow-flake{position:absolute;width:6px;height:6px;background:#fff;border-radius:50%;opacity:.8;animation:fws-snow-drift linear infinite}
@keyframes fws-snow-drift{0%{transform:translateY(-20px) translateX(0) rotate(0deg);opacity:1}100%{transform:translateY(400px) translateX(40px) rotate(360deg);opacity:.4}}

/* Stars */
.fws-star{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;animation:fws-twinkle ease-in-out infinite}
@keyframes fws-twinkle{0%,100%{opacity:.3}50%{opacity:1}}

/* Lightning flash */
.fws-lightning{position:absolute;inset:0;background:rgba(255,255,255,.9);opacity:0;animation:fws-flash 6s ease-in-out infinite}
@keyframes fws-flash{0%,95%,100%{opacity:0}96%{opacity:.8}97%{opacity:0}98%{opacity:.4}}

/* Clouds floating */
.fws-cloud{position:absolute;background:rgba(255,255,255,.12);border-radius:50%;animation:fws-cloud-drift linear infinite}
@keyframes fws-cloud-drift{0%{transform:translateX(-200px)}100%{transform:translateX(calc(100vw + 200px))}}

/* Fog layers */
.fws-fog-layer{position:absolute;width:200%;height:60px;background:rgba(255,255,255,.1);border-radius:50%;animation:fws-fog-move linear infinite}
@keyframes fws-fog-move{0%{transform:translateX(-50%)}100%{transform:translateX(0%)}}

/* Sun rays */
.fws-sun-ray{position:absolute;top:-50px;right:-50px;width:300px;height:300px;background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);border-radius:50%;animation:fws-pulse 4s ease-in-out infinite}
@keyframes fws-pulse{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.1);opacity:1}}

/* ===== CARDS ===== */
.fws-card{background:#fff;padding:28px;border-radius:20px;box-shadow:0 2px 16px rgba(0,0,0,.06);margin:20px 0}
.fws-title{font-size:1.3em;font-weight:700;margin:0 0 20px;color:#1e293b}

/* ===== 6-COLUMN GRID ===== */
.fws-grid-6{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fws-cell{background:#f8fafc;padding:16px;border-radius:14px;text-align:center}
.fws-cell-icon{font-size:1.6em;margin-bottom:6px}
.fws-cell-lbl{font-size:.8em;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.fws-cell-val{font-size:1.3em;font-weight:700;color:#1e293b}
.fws-cell-sub{font-size:.8em;color:#64748b;margin-top:4px}

/* ===== HOURLY SCROLL ===== */
.fws-hourly{display:flex;overflow-x:auto;gap:4px;padding:4px 0;scrollbar-width:thin}
.fws-hourly::-webkit-scrollbar{height:4px}.fws-hourly::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}
.fws-h-item{min-width:64px;padding:12px 8px;text-align:center;border-radius:14px;flex-shrink:0;transition:background .2s}
.fws-h-item:first-child{background:#eff6ff}
.fws-h-item:hover{background:#f1f5f9}
.fws-h-time{font-size:.8em;color:#64748b;font-weight:600}
.fws-h-icon{font-size:1.4em;margin:6px 0}
.fws-h-temp{font-size:1em;font-weight:700}
.fws-h-rain{font-size:.7em;color:#3b82f6;height:16px}

/* ===== DAILY FORECAST ===== */
.fws-daily{display:flex;flex-direction:column;gap:2px}
.fws-d-row{display:grid;grid-template-columns:140px 36px 60px 1fr;align-items:center;padding:12px 16px;border-radius:12px;gap:12px}
.fws-d-row:hover{background:#f8fafc}
.fws-today{background:#eff6ff !important;border-radius:12px}
.fws-d-name{line-height:1.3}.fws-d-name strong{font-size:.95em;display:block}.fws-d-name span{font-size:.78em;color:#94a3b8}
.fws-d-icon{font-size:1.3em;text-align:center}
.fws-d-rain{font-size:.78em;color:#3b82f6;text-align:center;min-width:48px}
.fws-d-temps{display:flex;align-items:center;gap:8px}
.fws-lo{color:#94a3b8;font-size:.9em;min-width:28px;text-align:right}
.fws-hi{color:#1e293b;font-weight:700;font-size:.9em;min-width:28px}
.fws-bar{flex:1;height:6px;background:#e2e8f0;border-radius:3px;position:relative;min-width:60px}
.fws-bar-fill{position:absolute;height:100%;background:linear-gradient(90deg,#60a5fa,#f97316);border-radius:3px}

/* ===== TWO-COLUMN ROW ===== */
.fws-row-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}

/* ===== AQI ===== */
.fws-aqi{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.fws-aqi-circle{width:100px;height:100px;border-radius:50%;border:5px solid;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0}
.fws-aqi-num{font-size:2em;font-weight:800;line-height:1;color:#1e293b}
.fws-aqi-lbl{font-size:.7em;color:#64748b;text-transform:uppercase}
.fws-aqi-list{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fws-aqi-list div{text-align:center;padding:8px;background:#f8fafc;border-radius:10px}
.fws-aqi-list span{display:block;font-size:.7em;color:#94a3b8;text-transform:uppercase}
.fws-aqi-list strong{font-size:1.1em;color:#1e293b}

/* ===== UV ===== */
.fws-uv{text-align:center;padding:20px 0}
.fws-uv-num{font-size:3.5em;font-weight:800;line-height:1}
.fws-uv-lbl{font-size:1em;font-weight:600;margin:4px 0 16px}
.fws-uv-track{position:relative;height:10px;border-radius:5px;margin:0 20px}
.fws-uv-grad{height:100%;border-radius:5px;background:linear-gradient(90deg,#4CAF50,#FFC107,#FF9800,#F44336,#9C27B0)}
.fws-uv-dot{position:absolute;top:-4px;width:18px;height:18px;background:#fff;border:3px solid #333;border-radius:50%;transform:translateX(-9px)}
.fws-uv-scale{display:flex;justify-content:space-between;margin:6px 20px 0;font-size:.75em;color:#94a3b8}

/* ===== CHARTS ===== */
.fws-charts-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fws-chart-wrap{position:relative;height:280px;max-height:280px;overflow:hidden}
.fws-chart-wrap h3{font-size:1em;margin:0 0 12px;color:#64748b}
.fws-chart-wrap canvas{max-height:240px !important;width:100% !important}

/* ===== MAP ===== */
#fws-map{border-radius:16px;border:1px solid #e2e8f0}

/* ===== INFO GRID ===== */
.fws-info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.fws-info-grid div{padding:14px;background:#f8fafc;border-radius:12px}
.fws-info-grid span{display:block;font-size:.78em;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.fws-info-grid strong{font-size:1.05em;color:#1e293b}

/* ===== SEO CONTENT ===== */
.fws-seo-content{margin:30px 0;line-height:1.8;color:#334155}
.fws-seo-content h2{font-size:1.5em;font-weight:700;color:#0f172a;margin:32px 0 12px;padding-bottom:8px;border-bottom:2px solid #e2e8f0}
.fws-seo-content h3{font-size:1.2em;font-weight:600;color:#1e293b;margin:24px 0 8px}
.fws-seo-content p{margin:0 0 16px;font-size:1.02em}
.fws-seo-content ul{margin:8px 0 16px 20px}.fws-seo-content li{margin:6px 0}
.fws-seo-content a{color:#3b82f6;text-decoration:none}.fws-seo-content a:hover{text-decoration:underline}

/* ===== AD ZONES ===== */
.fws-ad{margin:20px 0;text-align:center}

/* ===== CREDIT ===== */
.fws-credit{text-align:center;padding:20px 0;font-size:.8em;color:#94a3b8}
.fws-credit a{color:#64748b}

/* ===== ARCHIVE ===== */
.fws-archive{max-width:1200px;margin:0 auto;padding:20px}
.fws-search-box{margin:20px 0;display:flex;gap:8px}
.fws-search-box input{flex:1;padding:14px 20px;font-size:1.1em;border:2px solid #e2e8f0;border-radius:14px;outline:none}
.fws-search-box input:focus{border-color:#3b82f6}
.fws-city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:24px 0}
.fws-city-card{padding:20px;background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.06);text-decoration:none;color:#1e293b;transition:transform .2s,box-shadow .2s}
.fws-city-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1)}
.fws-city-name{font-weight:700;font-size:1.1em}.fws-city-country{font-size:.85em;color:#64748b}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
    .fws-row-2{grid-template-columns:1fr}
    .fws-charts-row{grid-template-columns:1fr}
    .fws-chart-wrap{height:220px;max-height:220px}
    .fws-chart-wrap canvas{max-height:180px !important}
    .fws-grid-6{grid-template-columns:repeat(2,1fr)}
    .fws-hero{padding:40px 24px}
    .fws-hero-temp{font-size:4.5em}
    .fws-hero-right{font-size:4em}
}
@media(max-width:640px){
    .fws-body{padding:0 12px}
    .fws-hero{padding:32px 16px;min-height:260px}
    .fws-hero-content{flex-direction:column;text-align:center}
    .fws-hero-location{justify-content:center}
    .fws-hero-right{margin-top:8px;font-size:3.5em}
    .fws-hero-temp{font-size:4em}
    .fws-card{padding:18px;border-radius:16px;margin:12px 0}
    .fws-grid-6{grid-template-columns:repeat(2,1fr);gap:10px}
    .fws-charts-row{grid-template-columns:1fr}
    .fws-chart-wrap{height:200px;max-height:200px}
    .fws-chart-wrap canvas{max-height:160px !important}
    .fws-d-row{grid-template-columns:90px 30px 44px 1fr;padding:10px 8px;gap:8px}
    .fws-d-name strong{font-size:.85em}
    .fws-aqi{flex-direction:column;align-items:stretch}
    .fws-aqi-circle{margin:0 auto 12px}
    .fws-aqi-list{grid-template-columns:repeat(2,1fr)}
    .fws-city-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}