/* Flavor Weather Samsung Pro - Frontend CSS v11.3 */
/* Full Samsung-style: animations, charts, hourly scroll, map */

.fws-weather-page .entry-content,
.fws-weather-page .site-content,
.fws-weather-page .content-area { max-width: 100% !important; padding: 0 !important; }

#fws-weather-app { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: #fff; min-height: 400px; }

/* Loading */
.fws-loading { text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #1565c0, #0d47a1); border-radius: 20px; margin: 0 auto; max-width: 1200px; }
.fws-spinner { width: 50px; height: 50px; border: 4px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: fws-spin 1s linear infinite; margin: 0 auto 16px; }
@keyframes fws-spin { to { transform: rotate(360deg); } }

/* ===== HERO ===== */
.fws-hero { background: linear-gradient(135deg, #1565c0 0%, #0d47a1 50%, #1a237e 100%); padding: 50px 20px 40px; text-align: center; position: relative; overflow: hidden; border-radius: 20px; margin: 0 auto 24px; max-width: 1200px; }
.fws-hero.night { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); }
.fws-hero-city { font-size: 1.3em; font-weight: 300; opacity: .9; margin: 0; position: relative; z-index: 2; }
.fws-hero-temp { font-size: 5.5em; font-weight: 100; margin: 5px 0; line-height: 1; position: relative; z-index: 2; }
.fws-hero-desc { font-size: 1.2em; opacity: .85; margin: 0; position: relative; z-index: 2; }
.fws-hero-feels { font-size: .95em; opacity: .7; margin-top: 6px; position: relative; z-index: 2; }
.fws-hero-emoji { font-size: 4.5em; margin: 8px 0; animation: fws-float 3s ease-in-out infinite; position: relative; z-index: 2; }
@keyframes fws-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ===== ANIMATIONS ===== */
.fws-scene { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }

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

/* Snow */
.fws-snowflake { position: absolute; color: rgba(255,255,255,.7); animation: fws-snow linear infinite; }
@keyframes fws-snow { 0% { transform: translateY(-20px) rotate(0deg) translateX(0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translateY(250px) rotate(180deg) translateX(30px); } 100% { transform: translateY(500px) rotate(360deg) translateX(-10px); opacity: .2; } }

/* Stars (night) */
.fws-star { position: absolute; background: #fff; border-radius: 50%; animation: fws-twinkle 2s ease-in-out infinite alternate; }
@keyframes fws-twinkle { 0% { opacity: .2; transform: scale(.8); } 100% { opacity: 1; transform: scale(1.2); } }

/* Sun Rays */
.fws-sun-rays { position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255,235,59,.3) 0%, transparent 70%); animation: fws-pulse 4s ease-in-out infinite; border-radius: 50%; }
@keyframes fws-pulse { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.3); opacity: .8; } }

/* Clouds */
.fws-cloud { position: absolute; opacity: .3; animation: fws-drift linear infinite; }
@keyframes fws-drift { 0% { transform: translateX(-150px); } 100% { transform: translateX(calc(100vw + 150px)); } }

/* Lightning */
.fws-lightning { position: absolute; inset: 0; animation: fws-flash 4s ease-in-out infinite; pointer-events: none; }
@keyframes fws-flash { 0%,100% { background: transparent; } 8% { background: rgba(255,255,255,.8); } 10% { background: transparent; } 12% { background: rgba(255,255,255,.5); } 14% { background: transparent; } }

/* Fog */
.fws-fog-layer { position: absolute; left: -10%; width: 120%; height: 40px; background: rgba(255,255,255,.15); border-radius: 20px; animation: fws-fog 8s ease-in-out infinite alternate; }
@keyframes fws-fog { 0% { transform: translateX(-5%); opacity: .1; } 100% { transform: translateX(5%); opacity: .25; } }

/* ===== DETAILS ===== */
.fws-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1200px; margin: 0 auto 24px; padding: 0 20px; }
.fws-detail-card { background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 2px 10px rgba(0,0,0,.06); border: 1px solid #eee; color: #333; }
.fws-detail-card h3 { margin: 0 0 8px; font-size: .9em; color: #666; font-weight: 500; }
.fws-detail-card .value { font-size: 1.5em; font-weight: 700; color: #1565c0; }
.fws-detail-card .sub { font-size: .82em; color: #999; margin-top: 4px; }

/* ===== AQI & UV ===== */
.fws-aqi-uv { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 1200px; margin: 0 auto 24px; padding: 0 20px; }
.fws-aqi-card, .fws-uv-card { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.06); border: 1px solid #eee; color: #333; }
.fws-aqi-card h3, .fws-uv-card h3 { margin: 0 0 12px; font-size: 1em; color: #333; }
.fws-aqi-badge, .fws-uv-badge { display: inline-block; padding: 6px 16px; border-radius: 20px; font-weight: 600; color: #fff; font-size: .9em; }
.fws-aqi-bar, .fws-uv-meter { height: 8px; background: #e0e0e0; border-radius: 4px; margin-top: 12px; overflow: hidden; }

/* ===== HOURLY SCROLL ===== */
.fws-hourly-wrap { max-width: 1200px; margin: 0 auto 24px; padding: 0 20px; }
.fws-hourly-card { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.06); border: 1px solid #eee; color: #333; }
.fws-hourly-scroll { display: flex; overflow-x: auto; gap: 4px; padding: 8px 0; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.fws-hourly-scroll::-webkit-scrollbar { height: 6px; }
.fws-hourly-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.fws-hourly-item { flex: 0 0 auto; width: 68px; text-align: center; padding: 10px 6px; border-radius: 12px; scroll-snap-align: start; transition: background .2s; }
.fws-hourly-item:hover { background: #e3f2fd; }
.hr-time { font-size: .75em; color: #888; font-weight: 600; }
.hr-icon { font-size: 1.6em; margin: 6px 0; }
.hr-temp { font-size: 1em; font-weight: 700; color: #333; }
.hr-precip { font-size: .7em; color: #42a5f5; margin-top: 2px; }

/* ===== CHARTS ===== */
.fws-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 1200px; margin: 0 auto 24px; padding: 0 20px; }
.fws-chart-card { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.06); border: 1px solid #eee; color: #333; }
.fws-chart-card h3 { margin: 0 0 12px; font-size: 1em; color: #333; }
.fws-chart-wrap { height: 200px; position: relative; }

/* ===== 16 DAY FORECAST ===== */
.fws-daily { max-width: 1200px; margin: 0 auto 24px; padding: 0 20px; }
.fws-daily-card { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 2px 10px rgba(0,0,0,.06); border: 1px solid #eee; }
.fws-daily-row { display: grid; grid-template-columns: 120px 44px 50px 1fr 50px auto; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f0f0; color: #333; gap: 8px; }
.fws-daily-row:last-child { border-bottom: none; }
.fws-daily-day { font-weight: 600; font-size: .88em; }
.fws-daily-emoji { font-size: 1.4em; text-align: center; }
.fws-daily-bar { height: 6px; background: #e0e0e0; border-radius: 3px; position: relative; }
.fws-daily-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #42a5f5, #ef5350); position: absolute; top: 0; }
.fws-daily-high { font-weight: 700; text-align: right; color: #e53935; font-size: .9em; }
.fws-daily-low { text-align: right; color: #42a5f5; font-size: .9em; }
.fws-daily-precip { font-size: .75em; color: #42a5f5; white-space: nowrap; }

/* ===== MAP ===== */
.fws-map-wrap { max-width: 1200px; margin: 0 auto 24px; padding: 0 20px; }

/* ===== ADS ===== */
.fws-ad-slot { margin: 16px auto; max-width: 1200px; text-align: center; }

/* ===== SEO CONTENT ===== */
.fws-weather-page .entry-content h2 { font-size: 1.5em; color: #1565c0; margin: 32px 0 14px; padding-bottom: 8px; border-bottom: 2px solid #e3f2fd; }
.fws-weather-page .entry-content h3 { font-size: 1.15em; color: #333; margin: 20px 0 10px; }
.fws-weather-page .entry-content p { font-size: 1.05em; line-height: 1.75; color: #444; max-width: 900px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .fws-details { grid-template-columns: repeat(2, 1fr); }
    .fws-aqi-uv { grid-template-columns: 1fr; }
    .fws-charts { grid-template-columns: 1fr; }
    .fws-hero-temp { font-size: 3.5em; }
    .fws-hero-emoji { font-size: 3em; }
    .fws-daily-row { grid-template-columns: 80px 36px 40px 1fr 40px auto; font-size: .85em; gap: 4px; }
    .fws-hourly-item { width: 58px; }
}
@media (max-width: 480px) {
    .fws-details { grid-template-columns: 1fr; }
    .fws-hero { padding: 30px 16px; border-radius: 0; margin-left: -20px; margin-right: -20px; }
    .fws-hero-temp { font-size: 3em; }
    .fws-daily-row { grid-template-columns: 70px 30px 35px 1fr 35px; }
    .fws-daily-precip { display: none; }
    .fws-chart-wrap { height: 160px; }
}