/**
 * Flavor Weather Samsung Pro - Complete CSS
 * Version 5.0.0
 * 
 * Full-width layout with realistic weather animations
 */

/* ========================================
   CSS Variables
   ======================================== */
:root {
    /* Sky Colors */
    --sky-clear-day-start: #4FC3F7;
    --sky-clear-day-end: #81D4FA;
    --sky-clear-night-start: #0D1B2A;
    --sky-clear-night-mid: #1B263B;
    --sky-clear-night-end: #1E3A5F;
    --sky-cloudy-start: #78909C;
    --sky-cloudy-end: #B0BEC5;
    --sky-rain-start: #546E7A;
    --sky-rain-end: #78909C;
    --sky-storm-start: #263238;
    --sky-storm-end: #37474F;
    --sky-snow-start: #B0BEC5;
    --sky-snow-end: #CFD8DC;
    
    /* UI Colors */
    --glass-bg: rgba(255, 255, 255, 0.12);
    --glass-bg-dark: rgba(0, 0, 0, 0.2);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-blur: 25px;
    
    /* Text */
    --text-primary: #FFFFFF;
    --text-secondary: rgba(255, 255, 255, 0.85);
    --text-muted: rgba(255, 255, 255, 0.6);
    
    /* Spacing */
    --content-padding: clamp(20px, 5vw, 80px);
    --section-gap: clamp(20px, 4vw, 40px);
}

/* ========================================
   Reset & Full Width Base
   ======================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

/* CRITICAL: Override ALL WordPress theme constraints */
body.single-fws_location,
body.single-fws_location .site,
body.single-fws_location .site-content,
body.single-fws_location .content-area,
body.single-fws_location #content,
body.single-fws_location #main,
body.single-fws_location main,
body.single-fws_location .container,
body.single-fws_location .wrapper,
body.single-fws_location article,
body.single-fws_location .entry-content,
body.single-fws_location .post-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide ALL WordPress theme elements on weather pages */
body.single-fws_location .site-header,
body.single-fws_location .site-footer,
body.single-fws_location #masthead,
body.single-fws_location #colophon,
body.single-fws_location .entry-header,
body.single-fws_location .entry-footer,
body.single-fws_location .post-navigation,
body.single-fws_location .sidebar,
body.single-fws_location #secondary,
body.single-fws_location aside,
body.single-fws_location .widget-area,
body.single-fws_location .breadcrumbs,
body.single-fws_location .comments-area,
body.single-fws_location header:not(.fws-header),
body.single-fws_location footer:not(.fws-footer) {
    display: none !important;
}

/* ========================================
   Main Container - FULL SCREEN
   ======================================== */
.fws-samsung-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'SF Pro Display', sans-serif;
    color: var(--text-primary);
    transition: background 0.8s ease;
    z-index: 99999;
}

/* ========================================
   Sky Backgrounds
   ======================================== */
.fws-sky-clear-day {
    background: linear-gradient(180deg, 
        #4FC3F7 0%, 
        #81D4FA 40%, 
        #B3E5FC 70%,
        #E1F5FE 100%);
}

.fws-sky-clear-night {
    background: linear-gradient(180deg, 
        #0D1B2A 0%, 
        #1B263B 30%, 
        #1E3A5F 60%,
        #2D4A6F 100%);
}

.fws-sky-cloudy-day {
    background: linear-gradient(180deg, 
        #78909C 0%, 
        #90A4AE 40%, 
        #B0BEC5 70%,
        #CFD8DC 100%);
}

.fws-sky-cloudy-night {
    background: linear-gradient(180deg, 
        #263238 0%, 
        #37474F 40%, 
        #455A64 70%,
        #546E7A 100%);
}

.fws-sky-rain {
    background: linear-gradient(180deg, 
        #455A64 0%, 
        #546E7A 30%, 
        #607D8B 60%,
        #78909C 100%);
}

.fws-sky-storm {
    background: linear-gradient(180deg, 
        #1A1A2E 0%, 
        #16213E 30%, 
        #263238 60%,
        #37474F 100%);
}

.fws-sky-snow {
    background: linear-gradient(180deg, 
        #90A4AE 0%, 
        #B0BEC5 30%, 
        #CFD8DC 60%,
        #ECEFF1 100%);
}

/* ========================================
   SUN Animation
   ======================================== */
.fws-sun {
    position: absolute;
    top: 8%;
    right: 12%;
    width: 180px;
    height: 180px;
    z-index: 5;
    pointer-events: none;
}

.fws-sun-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 90px;
    background: radial-gradient(circle, 
        #FFFDE7 0%, 
        #FFF9C4 30%, 
        #FFEE58 60%, 
        #FFD54F 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 40px 20px rgba(255, 238, 88, 0.4),
        0 0 80px 40px rgba(255, 213, 79, 0.3),
        0 0 120px 60px rgba(255, 202, 40, 0.2),
        0 0 160px 80px rgba(255, 183, 77, 0.1);
    animation: sunPulse 4s ease-in-out infinite;
}

.fws-sun-rays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(255, 255, 255, 0.15) 5deg,
        transparent 10deg,
        transparent 20deg,
        rgba(255, 255, 255, 0.15) 25deg,
        transparent 30deg,
        transparent 40deg,
        rgba(255, 255, 255, 0.15) 45deg,
        transparent 50deg,
        transparent 60deg,
        rgba(255, 255, 255, 0.15) 65deg,
        transparent 70deg,
        transparent 80deg,
        rgba(255, 255, 255, 0.15) 85deg,
        transparent 90deg
    );
    border-radius: 50%;
    animation: sunRotate 30s linear infinite;
}

@keyframes sunPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.95; }
}

@keyframes sunRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========================================
   MOON Animation
   ======================================== */
.fws-moon {
    position: absolute;
    top: 10%;
    right: 15%;
    width: 100px;
    height: 100px;
    z-index: 5;
    pointer-events: none;
    display: none;
}

.fws-sky-clear-night .fws-moon,
.fws-sky-cloudy-night .fws-moon {
    display: block;
}

.fws-sky-clear-night .fws-sun,
.fws-sky-cloudy-night .fws-sun {
    display: none;
}

.fws-moon::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 30%, 
        #FFF9C4 0%, 
        #F5F5DC 50%, 
        #E0E0E0 100%);
    border-radius: 50%;
    box-shadow: 
        0 0 30px 10px rgba(255, 255, 255, 0.3),
        0 0 60px 20px rgba(255, 255, 255, 0.2),
        inset -15px -10px 20px rgba(0, 0, 0, 0.1);
    animation: moonGlow 6s ease-in-out infinite;
}

/* Moon craters */
.fws-moon::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    top: 25%;
    left: 30%;
    box-shadow: 
        25px 15px 0 8px rgba(0, 0, 0, 0.05),
        10px 40px 0 5px rgba(0, 0, 0, 0.06),
        35px 35px 0 3px rgba(0, 0, 0, 0.04);
}

@keyframes moonGlow {
    0%, 100% { opacity: 0.95; }
    50% { opacity: 1; }
}

/* ========================================
   STARS Animation
   ======================================== */
.fws-stars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    z-index: 2;
    pointer-events: none;
    display: none;
}

.fws-sky-clear-night .fws-stars,
.fws-sky-cloudy-night .fws-stars {
    display: block;
}

.fws-stars::before,
.fws-stars::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.fws-stars::before {
    background-image: 
        radial-gradient(2px 2px at 20px 30px, white, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, white, transparent),
        radial-gradient(2px 2px at 130px 80px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 160px 120px, white, transparent),
        radial-gradient(2px 2px at 200px 50px, white, transparent),
        radial-gradient(1px 1px at 250px 160px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px at 300px 100px, white, transparent),
        radial-gradient(1px 1px at 350px 30px, white, transparent),
        radial-gradient(2px 2px at 400px 140px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 450px 80px, white, transparent),
        radial-gradient(2px 2px at 500px 200px, white, transparent);
    background-repeat: repeat;
    background-size: 550px 250px;
    animation: twinkle 4s ease-in-out infinite;
}

.fws-stars::after {
    background-image: 
        radial-gradient(1px 1px at 15px 50px, white, transparent),
        radial-gradient(2px 2px at 60px 120px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 110px 20px, white, transparent),
        radial-gradient(2px 2px at 170px 170px, white, transparent),
        radial-gradient(1px 1px at 220px 90px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 280px 60px, white, transparent),
        radial-gradient(1px 1px at 340px 180px, white, transparent),
        radial-gradient(2px 2px at 390px 130px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1px 1px at 440px 40px, white, transparent),
        radial-gradient(2px 2px at 490px 110px, white, transparent);
    background-repeat: repeat;
    background-size: 520px 220px;
    animation: twinkle 5s ease-in-out infinite reverse;
    animation-delay: 1s;
}

@keyframes twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ========================================
   RAIN Animation
   ======================================== */
.fws-rain-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
    display: none;
}

.fws-sky-rain .fws-rain-overlay,
.fws-sky-storm .fws-rain-overlay {
    display: block;
}

.fws-rain-drop {
    position: absolute;
    width: 2px;
    height: 20px;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(174, 194, 224, 0.5) 50%, 
        rgba(174, 194, 224, 0.8) 100%);
    border-radius: 0 0 5px 5px;
    animation: rainFall linear infinite;
}

/* Storm has heavier rain */
.fws-sky-storm .fws-rain-drop {
    width: 3px;
    height: 30px;
    background: linear-gradient(180deg, 
        transparent 0%, 
        rgba(144, 164, 194, 0.6) 50%, 
        rgba(144, 164, 194, 0.9) 100%);
}

@keyframes rainFall {
    0% {
        transform: translateY(-100px) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(20px);
        opacity: 0;
    }
}

/* ========================================
   SNOW Animation
   ======================================== */
.fws-snow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
    display: none;
}

.fws-sky-snow .fws-snow-overlay {
    display: block;
}

.fws-snowflake {
    position: absolute;
    color: white;
    opacity: 0.9;
    animation: snowFall linear infinite;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

@keyframes snowFall {
    0% {
        transform: translateY(-50px) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.9;
    }
    90% {
        opacity: 0.9;
    }
    100% {
        transform: translateY(100vh) translateX(50px) rotate(360deg);
        opacity: 0;
    }
}

/* ========================================
   LIGHTNING Animation (Storm)
   ======================================== */
.fws-lightning {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 15;
    pointer-events: none;
    display: none;
}

.fws-sky-storm .fws-lightning {
    display: block;
    animation: lightning 8s infinite;
}

@keyframes lightning {
    0%, 89%, 91%, 93%, 95%, 100% { 
        background: transparent; 
    }
    90%, 92%, 94% { 
        background: rgba(255, 255, 255, 0.3); 
    }
}

/* ========================================
   CLOUDS Animation
   ======================================== */
.fws-clouds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}

.fws-cloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 100px;
    filter: blur(2px);
}

.fws-cloud::before,
.fws-cloud::after {
    content: '';
    position: absolute;
    background: inherit;
    border-radius: 50%;
}

.fws-cloud-1 {
    width: 200px;
    height: 60px;
    top: 15%;
    animation: cloudFloat 40s linear infinite;
}
.fws-cloud-1::before { width: 100px; height: 100px; top: -50px; left: 30px; }
.fws-cloud-1::after { width: 120px; height: 120px; top: -70px; left: 70px; }

.fws-cloud-2 {
    width: 150px;
    height: 45px;
    top: 25%;
    animation: cloudFloat 55s linear infinite;
    animation-delay: -15s;
}
.fws-cloud-2::before { width: 70px; height: 70px; top: -35px; left: 20px; }
.fws-cloud-2::after { width: 90px; height: 90px; top: -50px; left: 55px; }

.fws-cloud-3 {
    width: 180px;
    height: 55px;
    top: 35%;
    animation: cloudFloat 45s linear infinite;
    animation-delay: -30s;
    opacity: 0.7;
}
.fws-cloud-3::before { width: 85px; height: 85px; top: -45px; left: 25px; }
.fws-cloud-3::after { width: 100px; height: 100px; top: -55px; left: 65px; }

@keyframes cloudFloat {
    from { transform: translateX(-300px); }
    to { transform: translateX(calc(100vw + 300px)); }
}

/* Darker clouds for rain/storm */
.fws-sky-rain .fws-cloud,
.fws-sky-storm .fws-cloud {
    background: rgba(100, 100, 110, 0.8);
}

/* ========================================
   LANDSCAPE
   ======================================== */
.fws-landscape {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25%;
    z-index: 3;
    pointer-events: none;
}

.fws-landscape-day {
    background: 
        /* Hills */
        radial-gradient(ellipse 80% 100% at 20% 100%, #66BB6A 0%, transparent 70%),
        radial-gradient(ellipse 100% 100% at 50% 100%, #81C784 0%, transparent 65%),
        radial-gradient(ellipse 90% 100% at 80% 100%, #4CAF50 0%, transparent 70%),
        /* Water reflection */
        linear-gradient(180deg, transparent 60%, rgba(100, 181, 246, 0.3) 100%);
}

.fws-landscape-night {
    background: 
        radial-gradient(ellipse 80% 100% at 20% 100%, #1B5E20 0%, transparent 70%),
        radial-gradient(ellipse 100% 100% at 50% 100%, #2E7D32 0%, transparent 65%),
        radial-gradient(ellipse 90% 100% at 80% 100%, #1B5E20 0%, transparent 70%),
        linear-gradient(180deg, transparent 70%, rgba(30, 58, 95, 0.4) 100%);
}

.fws-sky-snow .fws-landscape {
    background: 
        radial-gradient(ellipse 80% 100% at 20% 100%, #ECEFF1 0%, transparent 70%),
        radial-gradient(ellipse 100% 100% at 50% 100%, #F5F5F5 0%, transparent 65%),
        radial-gradient(ellipse 90% 100% at 80% 100%, #E0E0E0 0%, transparent 70%);
}

/* ========================================
   CHARACTER
   ======================================== */
.fws-character-wrapper {
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: clamp(180px, 20vw, 320px);
    height: clamp(250px, 28vw, 450px);
    z-index: 20;
    pointer-events: none;
    animation: characterBreath 4s ease-in-out infinite;
}

.fws-character-svg {
    width: 100%;
    height: 100%;
}

@keyframes characterBreath {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

/* ========================================
   CONTENT AREA
   ======================================== */
.fws-content {
    position: relative;
    z-index: 30;
    padding: var(--content-padding);
    padding-top: 30px;
    min-height: 100vh;
}

/* ========================================
   LOCATION HEADER
   ======================================== */
.fws-location-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.fws-location-icon {
    width: 28px;
    height: 28px;
    opacity: 0.9;
}

.fws-location-name {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 500;
    letter-spacing: -0.5px;
    margin: 0;
}

/* ========================================
   CURRENT WEATHER
   ======================================== */
.fws-current-weather {
    text-align: center;
    margin-bottom: 30px;
}

.fws-temp-display {
    font-size: clamp(80px, 18vw, 160px);
    font-weight: 200;
    line-height: 1;
    margin: 0;
    letter-spacing: -8px;
}

.fws-degree {
    font-size: 0.4em;
    vertical-align: super;
    letter-spacing: 0;
}

.fws-condition-text {
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 400;
    margin: 10px 0;
    opacity: 0.95;
}

.fws-temp-minmax {
    display: flex;
    justify-content: center;
    gap: 25px;
    font-size: 1.2rem;
    margin: 15px 0;
}

.fws-temp-minmax .high {
    color: #FFAB91;
}

.fws-temp-minmax .low {
    color: #81D4FA;
}

.fws-feels-like {
    font-size: 1rem;
    opacity: 0.8;
    margin: 10px 0;
}

.fws-update-time {
    font-size: 0.9rem;
    opacity: 0.6;
    margin: 0;
}

/* ========================================
   SUMMARY
   ======================================== */
.fws-summary {
    text-align: center;
    font-size: 1.1rem;
    opacity: 0.85;
    max-width: 600px;
    margin: 0 auto 30px;
    line-height: 1.6;
    padding: 0 20px;
}

/* ========================================
   GLASS CARDS
   ======================================== */
.fws-glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 20px;
    transition: all 0.3s ease;
}

.fws-glass-card:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
}

/* ========================================
   MAIN GRID - TWO COLUMNS ON DESKTOP
   ======================================== */
.fws-main-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--section-gap);
    max-width: 1400px;
    margin: 0 auto;
}

@media (min-width: 1024px) {
    .fws-main-grid {
        grid-template-columns: 1.2fr 1fr;
    }
}

.fws-left-column,
.fws-right-column {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

/* ========================================
   HOURLY FORECAST
   ======================================== */
.fws-hourly-card {
    overflow: hidden;
}

.fws-hourly-scroll {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding: 10px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.fws-hourly-scroll::-webkit-scrollbar {
    display: none;
}

.fws-hourly-item {
    flex: 0 0 auto;
    width: 70px;
    text-align: center;
    padding: 12px 8px;
    border-radius: 16px;
    transition: background 0.2s;
}

.fws-hourly-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.fws-hourly-item.active {
    background: rgba(255, 255, 255, 0.2);
}

.fws-hourly-time {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-bottom: 8px;
}

.fws-hourly-icon {
    font-size: 1.8rem;
    margin-bottom: 8px;
}

.fws-hourly-temp {
    font-size: 1.1rem;
    font-weight: 500;
}

/* Temperature Graph */
.fws-temp-graph {
    width: 100%;
    height: 60px;
    margin: 10px 0;
}

/* Precipitation Row */
.fws-precip-row {
    display: flex;
    gap: 5px;
    padding: 10px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.fws-precip-row::-webkit-scrollbar {
    display: none;
}

.fws-precip-item {
    flex: 0 0 70px;
    text-align: center;
    font-size: 0.8rem;
    opacity: 0.7;
}

.fws-precip-item::before {
    content: '💧';
    margin-right: 4px;
    font-size: 0.7rem;
}

/* ========================================
   ALERT CARD
   ======================================== */
.fws-alert-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.3);
}

.fws-alert-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fws-alert-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
}

.fws-alert-title svg {
    width: 20px;
    height: 20px;
}

.fws-alert-desc {
    font-size: 0.9rem;
    opacity: 0.8;
}

.fws-alert-value {
    font-size: 2rem;
    font-weight: 300;
}

/* ========================================
   DAILY FORECAST
   ======================================== */
.fws-daily-card #fws-daily {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fws-daily-item {
    display: grid;
    grid-template-columns: 80px auto 1fr 50px 50px 80px;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.fws-daily-item:last-child {
    border-bottom: none;
}

.fws-daily-day {
    font-weight: 500;
    font-size: 0.95rem;
}

.fws-daily-precip {
    font-size: 0.8rem;
    opacity: 0.7;
    min-width: 40px;
}

.fws-daily-bar {
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
}

.fws-daily-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #81D4FA, #FFAB91);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.fws-daily-icon {
    font-size: 1.5rem;
    text-align: center;
}

.fws-daily-icon.night {
    opacity: 0.6;
    font-size: 1.2rem;
}

.fws-daily-temps {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.fws-daily-high {
    font-weight: 500;
}

.fws-daily-low {
    opacity: 0.6;
}

/* ========================================
   WEATHER DETAILS GRID
   ======================================== */
.fws-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.fws-detail-card {
    padding: 18px;
}

.fws-detail-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    opacity: 0.7;
    margin-bottom: 12px;
}

.fws-detail-header svg {
    width: 18px;
    height: 18px;
}

.fws-detail-value {
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 4px;
}

.fws-detail-unit {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-left: 4px;
}

.fws-detail-extra {
    font-size: 0.85rem;
    opacity: 0.6;
}

/* ========================================
   SUN TIMES / ASTRO ROW
   ======================================== */
.fws-astro-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.fws-astro-item {
    text-align: center;
}

.fws-astro-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.fws-astro-label {
    font-size: 0.8rem;
    opacity: 0.6;
    margin-bottom: 4px;
}

.fws-astro-value {
    font-size: 1.1rem;
    font-weight: 500;
}

/* ========================================
   AIR QUALITY
   ======================================== */
.fws-aqi-card {
    padding: 24px;
}

.fws-aqi-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.fws-aqi-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 600;
    flex-shrink: 0;
}

.fws-aqi-circle.good { background: rgba(76, 175, 80, 0.3); color: #81C784; }
.fws-aqi-circle.moderate { background: rgba(255, 235, 59, 0.3); color: #FFF176; }
.fws-aqi-circle.unhealthy-sensitive { background: rgba(255, 152, 0, 0.3); color: #FFB74D; }
.fws-aqi-circle.unhealthy { background: rgba(244, 67, 54, 0.3); color: #E57373; }
.fws-aqi-circle.very-unhealthy { background: rgba(156, 39, 176, 0.3); color: #BA68C8; }
.fws-aqi-circle.hazardous { background: rgba(121, 85, 72, 0.3); color: #A1887F; }

.fws-aqi-info h3 {
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0 0 6px 0;
}

.fws-aqi-info p {
    font-size: 0.9rem;
    opacity: 0.7;
    margin: 0;
    line-height: 1.4;
}

.fws-pollutants {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.fws-pollutant {
    text-align: center;
}

.fws-pollutant-name {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-bottom: 4px;
}

.fws-pollutant-value {
    font-size: 1rem;
    font-weight: 500;
}

/* ========================================
   MAP
   ======================================== */
.fws-map-card {
    padding: 0;
    overflow: hidden;
}

.fws-map-header {
    padding: 16px 20px;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.fws-map-container {
    height: 300px;
    width: 100%;
}

/* ========================================
   SEO CONTENT SECTION
   ======================================== */
.fws-seo-section {
    margin-top: var(--section-gap);
    padding: 40px;
}

.fws-seo-content {
    max-width: 900px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.9;
    color: var(--text-secondary);
}

.fws-seo-content h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0 0 20px 0;
    color: var(--text-primary);
}

.fws-seo-content h3 {
    font-size: 1.4rem;
    font-weight: 500;
    margin: 35px 0 15px 0;
    color: var(--text-primary);
}

.fws-seo-content p {
    margin-bottom: 18px;
}

.fws-seo-content ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.fws-seo-content ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
}

.fws-seo-content ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #4CAF50;
    font-weight: bold;
}

.fws-seo-content strong {
    color: var(--text-primary);
}

.fws-seo-content em {
    opacity: 0.7;
    font-style: normal;
    font-size: 0.9rem;
}

/* ========================================
   SEARCH BAR
   ======================================== */
.fws-search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 500px;
    margin: 40px auto;
    padding: 14px 24px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 50px;
}

.fws-search-bar svg {
    width: 22px;
    height: 22px;
    opacity: 0.6;
    flex-shrink: 0;
}

.fws-search-bar input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 1rem;
}

.fws-search-bar input::placeholder {
    color: var(--text-muted);
}

/* ========================================
   RELATED CITIES
   ======================================== */
.fws-related-section {
    margin-top: 40px;
    text-align: center;
}

.fws-related-title {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 20px;
    opacity: 0.9;
}

.fws-related-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.fws-related-link {
    padding: 10px 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 25px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s;
}

.fws-related-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* ========================================
   BOTTOM NAVIGATION
   ======================================== */
.fws-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 12px 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 100;
}

.fws-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.75rem;
    transition: color 0.2s;
}

.fws-nav-item svg {
    width: 24px;
    height: 24px;
}

.fws-nav-item.active,
.fws-nav-item:hover {
    color: var(--text-primary);
}

.fws-dots {
    display: flex;
    gap: 6px;
}

.fws-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.fws-dot.active {
    background: var(--text-primary);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    :root {
        --content-padding: 16px;
        --section-gap: 16px;
    }
    
    .fws-temp-display {
        font-size: 80px;
        letter-spacing: -4px;
    }
    
    .fws-character-wrapper {
        width: 140px;
        height: 200px;
        right: 2%;
        bottom: 8%;
    }
    
    .fws-sun {
        width: 100px;
        height: 100px;
        right: 8%;
    }
    
    .fws-sun-core {
        width: 50px;
        height: 50px;
    }
    
    .fws-details-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .fws-daily-item {
        grid-template-columns: 60px 35px 1fr 35px 35px 60px;
        font-size: 0.9rem;
    }
    
    .fws-astro-row {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .fws-pollutants {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .fws-seo-section {
        padding: 25px;
    }
    
    .fws-seo-content {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .fws-temp-display {
        font-size: 68px;
    }
    
    .fws-character-wrapper {
        width: 110px;
        height: 160px;
    }
    
    .fws-daily-item {
        grid-template-columns: 50px 1fr 30px 30px 55px;
    }
    
    .fws-daily-precip {
        display: none;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .fws-samsung-container {
        position: static;
        background: white !important;
        color: black !important;
    }
    
    .fws-sun, .fws-moon, .fws-stars, .fws-rain-overlay, 
    .fws-snow-overlay, .fws-character-wrapper, .fws-bottom-nav,
    .fws-clouds, .fws-landscape, .fws-lightning {
        display: none !important;
    }
    
    .fws-glass-card {
        background: #f5f5f5 !important;
        border: 1px solid #ddd !important;
    }
}