* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
    color: #fff;
}

.app {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

header {
    text-align: center;
    margin-bottom: 2rem;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.search-container {
    position: relative;
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.search-group {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.search-group:focus-within {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.25);
}

#city-search {
    padding: 0.65rem 1rem;
    font-size: 0.9rem;
    border: none;
    border-radius: 0;
    width: 240px;
    background: transparent;
    color: #fff;
    transition: all 0.2s ease;
}

#city-search::placeholder {
    color: rgba(255,255,255,0.4);
}

#city-search:focus {
    outline: none;
}

#search-btn {
    padding: 0.65rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.9);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

#search-btn:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.15);
    margin: 0 0.25rem;
}

#location-btn,
#refresh-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

#location-btn:hover:not(:disabled),
#refresh-all-btn:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.22);
    color: #fff;
}

#location-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}

#location-btn svg,
#refresh-all-btn svg {
    flex-shrink: 0;
    opacity: 0.7;
}

#location-btn:hover svg,
#refresh-all-btn:hover svg {
    opacity: 1;
}

.toolbar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.toolbar-toggle:hover {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.2);
    color: rgba(255,255,255,0.9);
}

.toolbar-toggle.active,
.toolbar-toggle.celsius {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.25);
    color: #fff;
}

.search-results {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    background: rgba(30, 30, 50, 0.95);
    border-radius: 15px;
    margin-top: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    z-index: 100;
}

.search-results.active {
    display: block;
}

.search-result-item {
    padding: 1rem 1.5rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: background 0.2s ease;
}

.search-result-item:hover {
    background: rgba(255,255,255,0.1);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item .city-name {
    font-weight: 500;
}

.search-result-item .country {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
}

main {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    align-items: start;
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.empty-state p {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.empty-state .hint {
    font-size: 1rem;
    color: rgba(255,255,255,0.5);
}

.weather-card {
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.weather-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
    pointer-events: none;
}

.weather-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

/* Drag and Drop Styles */
.weather-card[draggable="true"] {
    cursor: grab;
}

.weather-card[draggable="true"]:active {
    cursor: grabbing;
}

.weather-card.dragging {
    opacity: 0.5;
    transform: scale(1.02);
    box-shadow: 0 25px 50px rgba(0,0,0,0.4);
    cursor: grabbing;
}

.weather-card.drag-over {
    border: 3px dashed rgba(255,255,255,0.5);
    transform: scale(1.02);
    background: rgba(255,255,255,0.15);
}

.weather-card.sunny {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.weather-card.cloudy {
    background: linear-gradient(135deg, #2d6a9f 0%, #1a4a6e 100%);
}

.weather-card.rainy {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.weather-card.snowy {
    background: linear-gradient(135deg, #5a6e8a 0%, #3d5a80 100%);
}

.weather-card.stormy {
    background: linear-gradient(135deg, #373b44 0%, #4286f4 100%);
}

.weather-card.night {
    background: linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 100%);
}

.weather-card.foggy {
    background: linear-gradient(135deg, #8e9eab 0%, #5c6d7e 100%);
}

/* ================================================
   WEATHER ANIMATIONS - Immersive particle effects
   ================================================ */

/* Animation container - shared by all weather effects */
.weather-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    border-radius: 20px;
    overflow: hidden;
}

/* Ensure card content stays above animations */
.weather-card > * {
    position: relative;
    z-index: 2;
}

/* ============ RAIN EFFECT ============ */
.weather-card.rainy::after {
    background-image:
        /* Layer 1 - Close raindrops (faster, larger) */
        linear-gradient(180deg, transparent 0%, transparent 50%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.4) 60%, transparent 60%),
        /* Layer 2 - Mid raindrops */
        linear-gradient(180deg, transparent 0%, transparent 45%, rgba(200,220,255,0.3) 45%, rgba(200,220,255,0.3) 52%, transparent 52%),
        /* Layer 3 - Far raindrops (slower, thinner) */
        linear-gradient(180deg, transparent 0%, transparent 40%, rgba(180,200,255,0.2) 40%, rgba(180,200,255,0.2) 45%, transparent 45%);
    background-size:
        4px 20px,
        3px 15px,
        2px 12px;
    background-position:
        0px 0px,
        10px 5px,
        20px 10px;
    animation: rain-fall 0.4s linear infinite, rain-fall-2 0.6s linear infinite, rain-fall-3 0.8s linear infinite;
    opacity: 0.7;
}

@keyframes rain-fall {
    0% { background-position: 0px 0px, 10px 5px, 20px 10px; }
    100% { background-position: 0px 20px, 10px 25px, 20px 30px; }
}

@keyframes rain-fall-2 {
    0% { background-position: 0px 0px, 10px 5px, 20px 10px; }
    100% { background-position: 0px 15px, 10px 20px, 20px 22px; }
}

@keyframes rain-fall-3 {
    0% { background-position: 0px 0px, 10px 5px, 20px 10px; }
    100% { background-position: 0px 12px, 10px 17px, 20px 19px; }
}

/* Raindrop splash effect at bottom */
.weather-card.rainy {
    box-shadow:
        inset 0 -30px 60px -30px rgba(255,255,255,0.1),
        0 20px 40px rgba(0,0,0,0.3);
}

/* ============ SNOW EFFECT ============ */
.weather-card.snowy::after {
    background-image:
        /* Sparse large snowflakes */
        radial-gradient(circle at center, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 50%, transparent 50%),
        /* Medium snowflakes */
        radial-gradient(circle at center, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 50%, transparent 50%),
        /* Small snowflakes */
        radial-gradient(circle at center, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.4) 50%, transparent 50%);
    background-size:
        90px 90px,
        60px 70px,
        40px 50px;
    background-position:
        10px 10px,
        35px 25px,
        55px 15px;
    animation: snow-fall 8s linear infinite, snow-drift 4s ease-in-out infinite;
    opacity: 0.5;
}

@keyframes snow-fall {
    0% {
        background-position:
            10px 10px,
            35px 25px,
            55px 15px;
    }
    100% {
        background-position:
            10px 310px,
            35px 325px,
            55px 315px;
    }
}

@keyframes snow-drift {
    0%, 100% { transform: translateX(0px); }
    25% { transform: translateX(3px); }
    75% { transform: translateX(-3px); }
}

/* Frost effect */
.weather-card.snowy {
    box-shadow:
        inset 0 0 80px rgba(255,255,255,0.1),
        0 20px 40px rgba(0,0,0,0.3);
}

/* ============ SUNNY EFFECT ============ */
.weather-card.sunny::after {
    background:
        /* Sun rays radiating */
        repeating-conic-gradient(
            from 0deg at 90% -20%,
            rgba(255,255,200,0.15) 0deg 10deg,
            transparent 10deg 20deg
        ),
        /* Warm shimmer overlay */
        linear-gradient(45deg,
            transparent 0%,
            rgba(255,255,200,0.1) 25%,
            transparent 50%,
            rgba(255,220,150,0.1) 75%,
            transparent 100%
        );
    background-size: 100% 100%, 200% 200%;
    animation: sunny-rays 8s linear infinite, sunny-shimmer 3s ease-in-out infinite;
    opacity: 1;
}

@keyframes sunny-rays {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes sunny-shimmer {
    0%, 100% { background-position: 0% 0%, 0% 0%; }
    50% { background-position: 0% 0%, 100% 100%; }
}

/* Warm glow */
.weather-card.sunny {
    box-shadow:
        inset 0 0 100px rgba(255,200,100,0.15),
        0 20px 60px rgba(245,87,108,0.3),
        0 0 120px rgba(255,200,100,0.2);
}

/* Floating heat particles */
.weather-card.sunny .weather-icon {
    animation: sunny-pulse 2s ease-in-out infinite;
}

@keyframes sunny-pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255,200,100,0.5)); }
    50% { transform: scale(1.05); filter: drop-shadow(0 0 20px rgba(255,200,100,0.8)); }
}

/* ============ CLOUDY EFFECT ============ */
.weather-card.cloudy::after {
    background-image:
        /* Drifting cloud layers */
        radial-gradient(ellipse 80px 40px at 20% 30%, rgba(255,255,255,0.15) 0%, transparent 70%),
        radial-gradient(ellipse 100px 50px at 70% 60%, rgba(255,255,255,0.12) 0%, transparent 70%),
        radial-gradient(ellipse 60px 30px at 40% 80%, rgba(255,255,255,0.1) 0%, transparent 70%),
        radial-gradient(ellipse 90px 45px at 85% 20%, rgba(255,255,255,0.08) 0%, transparent 70%);
    animation: clouds-drift 12s ease-in-out infinite;
    opacity: 1;
}

@keyframes clouds-drift {
    0%, 100% {
        background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%;
        transform: translateX(0px);
    }
    50% {
        background-position: 10% 5%, -5% 8%, 8% -3%, -8% 5%;
        transform: translateX(15px);
    }
}

/* Soft diffused light */
.weather-card.cloudy {
    box-shadow:
        inset 0 20px 60px rgba(255,255,255,0.05),
        0 20px 40px rgba(0,0,0,0.3);
}

/* ============ STORMY EFFECT ============ */
.weather-card.stormy::after {
    background-image:
        /* Rain streaks - heavy and angled */
        linear-gradient(170deg, transparent 0%, transparent 45%, rgba(200,220,255,0.5) 45%, rgba(200,220,255,0.5) 48%, transparent 48%),
        linear-gradient(170deg, transparent 0%, transparent 40%, rgba(180,200,255,0.4) 40%, rgba(180,200,255,0.4) 43%, transparent 43%),
        linear-gradient(170deg, transparent 0%, transparent 50%, rgba(160,180,255,0.3) 50%, rgba(160,180,255,0.3) 52%, transparent 52%);
    background-size:
        6px 25px,
        4px 20px,
        3px 18px;
    animation: storm-rain 0.25s linear infinite;
    opacity: 0.8;
}

@keyframes storm-rain {
    0% { background-position: 0px 0px; }
    100% { background-position: -10px 25px; }
}

/* Lightning flash overlay */
.weather-card.stormy {
    animation: lightning-flash 4s ease-in-out infinite;
    box-shadow:
        inset 0 -40px 80px -40px rgba(100,150,255,0.2),
        0 20px 40px rgba(0,0,0,0.4);
}

@keyframes lightning-flash {
    0%, 100% { filter: brightness(1); }
    92% { filter: brightness(1); }
    93% { filter: brightness(1.8); box-shadow: inset 0 0 100px rgba(255,255,255,0.5), 0 0 60px rgba(100,150,255,0.8); }
    94% { filter: brightness(1); }
    96% { filter: brightness(1); }
    97% { filter: brightness(1.5); box-shadow: inset 0 0 80px rgba(255,255,255,0.3), 0 0 40px rgba(100,150,255,0.6); }
    98% { filter: brightness(1); }
}

/* ============ NIGHT EFFECT ============ */
.weather-card.night::after {
    background-image:
        /* Twinkling stars - multiple layers */
        radial-gradient(circle at center, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(200,220,255,0.8) 0%, rgba(200,220,255,0.8) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(255,250,200,0.7) 0%, rgba(255,250,200,0.7) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.6) 0.5px, transparent 0.5px);
    background-size:
        80px 80px,
        120px 60px,
        70px 90px,
        50px 50px;
    background-position:
        10px 10px,
        40px 30px,
        20px 50px,
        60px 20px;
    animation: stars-twinkle 3s ease-in-out infinite alternate;
    opacity: 0.9;
}

@keyframes stars-twinkle {
    0% {
        opacity: 0.6;
        background-position:
            10px 10px,
            40px 30px,
            20px 50px,
            60px 20px;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0.7;
        background-position:
            12px 12px,
            38px 32px,
            22px 48px,
            58px 22px;
    }
}

/* Moonlight glow */
.weather-card.night {
    box-shadow:
        inset 30px -30px 100px rgba(200,220,255,0.05),
        inset 0 0 60px rgba(100,120,180,0.1),
        0 20px 40px rgba(0,0,0,0.5);
}

/* Moon icon glow */
.weather-card.night .weather-icon {
    animation: moon-glow 4s ease-in-out infinite;
}

@keyframes moon-glow {
    0%, 100% { filter: drop-shadow(0 0 15px rgba(255,255,200,0.4)); }
    50% { filter: drop-shadow(0 0 25px rgba(255,255,200,0.7)); }
}

/* ============ FOGGY EFFECT ============ */
.weather-card.foggy::after {
    background:
        /* Multiple fog layers drifting */
        linear-gradient(90deg,
            transparent 0%,
            rgba(255,255,255,0.25) 15%,
            rgba(255,255,255,0.4) 30%,
            rgba(255,255,255,0.3) 50%,
            rgba(255,255,255,0.4) 70%,
            rgba(255,255,255,0.25) 85%,
            transparent 100%
        ),
        linear-gradient(90deg,
            transparent 0%,
            rgba(255,255,255,0.15) 20%,
            rgba(255,255,255,0.25) 40%,
            rgba(255,255,255,0.2) 60%,
            rgba(255,255,255,0.15) 80%,
            transparent 100%
        );
    background-size: 250% 100%, 300% 100%;
    animation: fog-drift-1 10s ease-in-out infinite, fog-drift-2 14s ease-in-out infinite reverse;
    opacity: 1;
}

@keyframes fog-drift-1 {
    0% { background-position: -150% 0%, 0% 0%; }
    100% { background-position: 150% 0%, 0% 0%; }
}

@keyframes fog-drift-2 {
    0% { background-position: 0% 0%, -150% 0%; }
    100% { background-position: 0% 0%, 150% 0%; }
}

/* Foggy atmosphere */
.weather-card.foggy {
    box-shadow:
        inset 0 0 100px rgba(255,255,255,0.15),
        0 20px 40px rgba(0,0,0,0.2);
}

/* ============ PERFORMANCE: Reduce motion ============ */
@media (prefers-reduced-motion: reduce) {
    .weather-card::after,
    .weather-card,
    .weather-card .weather-icon {
        animation: none !important;
    }
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.city-info h2 {
    font-size: 1.5rem;
    font-weight: 600;
}

.city-info .country-code {
    font-size: 0.9rem;
    opacity: 0.8;
}

.city-info .local-time {
    display: block;
    font-size: 0.85rem;
    opacity: 0.9;
    margin-top: 0.25rem;
}

.card-actions {
    display: flex;
    gap: 0.5rem;
}

.remove-btn, .refresh-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-btn:hover {
    background: rgba(255,0,0,0.5);
    transform: scale(1.1);
}

.refresh-btn:hover {
    background: rgba(255,255,255,0.4);
    transform: scale(1.1) rotate(180deg);
}

.weather-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.weather-icon {
    font-size: 4rem;
}

.temperature {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
}

.temperature-block {
    display: flex;
    flex-direction: column;
}

.temperature .unit-toggle {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.8;
    display: block;
    margin-top: 0.25rem;
}

.feels-like {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-top: 0.25rem;
}

.high-low {
    display: flex;
    gap: 0.75rem;
    font-size: 0.95rem;
    margin-top: 0.35rem;
}

.high-low .high {
    color: #ff6b6b;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.high-low .low {
    color: #74b9ff;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.weather-description {
    font-size: 1.1rem;
    text-transform: capitalize;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.sun-times {
    display: flex;
    justify-content: space-around;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.sun-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.sun-icon {
    font-size: 1.5rem;
}

.sun-label {
    font-size: 0.7rem;
    opacity: 0.7;
    text-transform: uppercase;
}

.sun-value {
    font-size: 0.9rem;
    font-weight: 600;
}

.badges-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.aqi-badge, .uv-badge {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.6rem 0.5rem;
    border-radius: 12px;
    font-weight: 500;
    flex-wrap: wrap;
}

.badge-emoji {
    font-size: 1rem;
}

.badge-value {
    font-weight: 700;
    font-size: 0.85rem;
}

.badge-label {
    font-size: 0.75rem;
    opacity: 0.9;
}

.weather-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.detail-item {
    background: rgba(255,255,255,0.1);
    padding: 0.75rem;
    border-radius: 10px;
    text-align: center;
}

.detail-item .label {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-bottom: 0.25rem;
}

.detail-item .value {
    font-size: 1rem;
    font-weight: 600;
}

.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.error-message {
    background: rgba(255,0,0,0.2);
    color: #fff;
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .app {
        padding: 1rem;
    }

    h1 {
        font-size: 1.8rem;
    }

    .search-group {
        width: 100%;
    }

    #city-search {
        width: 100%;
        min-width: 0;
    }

    .toolbar-actions {
        flex-wrap: wrap;
        justify-content: center;
    }

    .search-results {
        width: 90%;
    }

    main {
        grid-template-columns: 1fr;
    }
}

/* Temperature Unit Toggle - uses .toolbar-toggle */

/* Collapsible Card Styles */
.card-details {
    display: none;
    margin-top: 1rem;
}

.weather-card.expanded .card-details {
    display: block;
}

.expand-btn {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.expand-btn:hover {
    background: rgba(255,255,255,0.4);
    transform: scale(1.1);
}

.weather-card.expanded .expand-btn {
    transform: rotate(180deg);
}

.weather-card.expanded .expand-btn:hover {
    transform: rotate(180deg) scale(1.1);
}

/* Make collapsed cards more compact */
.weather-card:not(.expanded) {
    padding: 1rem;
}

.weather-card:not(.expanded) .weather-main {
    margin-bottom: 0.5rem;
}

.weather-card:not(.expanded) .weather-description {
    margin-bottom: 0;
}

/* Location Button - uses toolbar styles above */

/* Hourly Forecast */
.hourly-forecast {
    margin-bottom: 1rem;
    overflow: hidden;
}

.hourly-scroll {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.3) transparent;
}

.hourly-scroll::-webkit-scrollbar {
    height: 6px;
}

.hourly-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.hourly-scroll::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
}

.hourly-item {
    flex: 0 0 auto;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    text-align: center;
    min-width: 60px;
}

.hourly-time {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-bottom: 0.25rem;
}

.hourly-icon {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.hourly-temp {
    font-size: 0.9rem;
    font-weight: 600;
}

.hourly-precip {
    font-size: 0.7rem;
    opacity: 0.8;
    margin-top: 0.25rem;
}

/* Theme Toggle Button - uses .toolbar-toggle */

/* 7-Day Forecast */
.daily-forecast {
    margin: 1rem 0;
}

.daily-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    opacity: 0.9;
}

.daily-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.daily-item {
    display: grid;
    grid-template-columns: 60px 30px 50px 1fr;
    align-items: center;
    padding: 0.4rem 0.6rem;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    font-size: 0.85rem;
}

.daily-day {
    font-weight: 500;
}

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

.daily-precip {
    font-size: 0.75rem;
    opacity: 0.8;
    text-align: center;
}

.daily-temps {
    text-align: right;
}

.daily-high {
    font-weight: 600;
    margin-right: 0.5rem;
}

.daily-low {
    opacity: 0.7;
}

/* Light Theme */
body.light-theme {
    background: linear-gradient(135deg, #e8f4f8 0%, #d4e8ed 50%, #b8d4e3 100%);
    color: #1a1a2e;
}

body.light-theme .weather-card {
    background: rgba(255,255,255,0.7);
    color: #1a1a2e;
}

body.light-theme .weather-card::before {
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 100%);
}

body.light-theme .weather-card.sunny {
    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
}

body.light-theme .weather-card.cloudy {
    background: linear-gradient(135deg, #c9d6df 0%, #a8c0c8 100%);
}

body.light-theme .weather-card.rainy {
    background: linear-gradient(135deg, #a8c0d8 0%, #8fa8c8 100%);
}

body.light-theme .weather-card.snowy {
    background: linear-gradient(135deg, #e8eef1 0%, #cdd5db 100%);
}

body.light-theme .weather-card.stormy {
    background: linear-gradient(135deg, #9ca5b0 0%, #7a8a9a 100%);
}

body.light-theme .weather-card.night {
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    color: #fff;
}

body.light-theme .weather-card.foggy {
    background: linear-gradient(135deg, #d4dde6 0%, #b8c5d0 100%);
}

body.light-theme .search-group {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
}

body.light-theme .search-group:focus-within {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.2);
}

body.light-theme #city-search {
    background: transparent;
    color: #1a1a2e;
}

body.light-theme #city-search::placeholder {
    color: rgba(0,0,0,0.35);
}

body.light-theme #search-btn {
    background: rgba(0,0,0,0.03);
    border-left-color: rgba(0,0,0,0.08);
    color: rgba(0,0,0,0.7);
}

body.light-theme #search-btn:hover {
    background: rgba(0,0,0,0.08);
    color: #1a1a2e;
}

body.light-theme .toolbar-divider {
    background: rgba(0,0,0,0.1);
}

body.light-theme #location-btn,
body.light-theme #refresh-all-btn {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.1);
    color: rgba(0,0,0,0.65);
}

body.light-theme #location-btn:hover:not(:disabled),
body.light-theme #refresh-all-btn:hover {
    background: rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.18);
    color: #1a1a2e;
}

body.light-theme .toolbar-toggle {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.08);
    color: rgba(0,0,0,0.45);
}

body.light-theme .toolbar-toggle:hover {
    background: rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.15);
    color: rgba(0,0,0,0.75);
}

body.light-theme .toolbar-toggle.active,
body.light-theme .toolbar-toggle.celsius {
    background: rgba(0,0,0,0.08);
    border-color: rgba(0,0,0,0.18);
    color: #1a1a2e;
}

body.light-theme .search-results {
    background: rgba(255,255,255,0.95);
    color: #1a1a2e;
}

body.light-theme .search-result-item:hover {
    background: rgba(0,0,0,0.05);
}

body.light-theme .empty-state {
    background: rgba(255,255,255,0.5);
}

body.light-theme .remove-btn,
body.light-theme .refresh-btn,
body.light-theme .expand-btn {
    background: rgba(0,0,0,0.1);
    color: #1a1a2e;
}

body.light-theme .hourly-item,
body.light-theme .daily-item {
    background: rgba(0,0,0,0.05);
}

body.light-theme .weather-details .detail-item {
    background: rgba(0,0,0,0.05);
}

body.light-theme .sun-times .sun-item {
    background: rgba(0,0,0,0.05);
}

/* Light theme weather animations adjustments */
body.light-theme .weather-card.rainy::after {
    background-image:
        linear-gradient(180deg, transparent 0%, transparent 50%, rgba(100,130,180,0.5) 50%, rgba(100,130,180,0.5) 60%, transparent 60%),
        linear-gradient(180deg, transparent 0%, transparent 45%, rgba(80,110,160,0.4) 45%, rgba(80,110,160,0.4) 52%, transparent 52%),
        linear-gradient(180deg, transparent 0%, transparent 40%, rgba(60,90,140,0.3) 40%, rgba(60,90,140,0.3) 45%, transparent 45%);
}

body.light-theme .weather-card.snowy::after {
    background-image:
        radial-gradient(circle at center, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.9) 50%, transparent 50%),
        radial-gradient(circle at center, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 50%, transparent 50%),
        radial-gradient(circle at center, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 50%, transparent 50%);
}

body.light-theme .weather-card.sunny::after {
    background:
        repeating-conic-gradient(
            from 0deg at 90% -20%,
            rgba(255,200,100,0.2) 0deg 10deg,
            transparent 10deg 20deg
        ),
        linear-gradient(45deg,
            transparent 0%,
            rgba(255,230,180,0.15) 25%,
            transparent 50%,
            rgba(255,200,100,0.15) 75%,
            transparent 100%
        );
    background-size: 100% 100%, 200% 200%;
}

body.light-theme .weather-card.cloudy::after {
    background-image:
        radial-gradient(ellipse 80px 40px at 20% 30%, rgba(150,170,190,0.2) 0%, transparent 70%),
        radial-gradient(ellipse 100px 50px at 70% 60%, rgba(140,160,180,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 60px 30px at 40% 80%, rgba(130,150,170,0.15) 0%, transparent 70%),
        radial-gradient(ellipse 90px 45px at 85% 20%, rgba(120,140,160,0.12) 0%, transparent 70%);
}

body.light-theme .weather-card.stormy::after {
    background-image:
        linear-gradient(170deg, transparent 0%, transparent 45%, rgba(80,100,140,0.6) 45%, rgba(80,100,140,0.6) 48%, transparent 48%),
        linear-gradient(170deg, transparent 0%, transparent 40%, rgba(60,80,120,0.5) 40%, rgba(60,80,120,0.5) 43%, transparent 43%),
        linear-gradient(170deg, transparent 0%, transparent 50%, rgba(40,60,100,0.4) 50%, rgba(40,60,100,0.4) 52%, transparent 52%);
}

body.light-theme .weather-card.night::after {
    background-image:
        radial-gradient(circle at center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(255,255,200,0.9) 0%, rgba(255,255,200,0.9) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(255,250,220,0.8) 0%, rgba(255,250,220,0.8) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 0.5px, transparent 0.5px);
}

body.light-theme .weather-card.foggy::after {
    background:
        linear-gradient(90deg,
            transparent 0%,
            rgba(200,210,220,0.35) 15%,
            rgba(180,195,210,0.5) 30%,
            rgba(190,205,215,0.4) 50%,
            rgba(180,195,210,0.5) 70%,
            rgba(200,210,220,0.35) 85%,
            transparent 100%
        ),
        linear-gradient(90deg,
            transparent 0%,
            rgba(190,200,215,0.25) 20%,
            rgba(175,190,205,0.35) 40%,
            rgba(185,198,210,0.3) 60%,
            rgba(190,200,215,0.25) 80%,
            transparent 100%
        );
    background-size: 250% 100%, 300% 100%;
}

/* ================================================
   NEW FEATURES STYLES
   ================================================ */

/* Weather Alerts */
.weather-alerts {
    margin-bottom: 0.75rem;
}

.alert-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    animation: alert-pulse 2s ease-in-out infinite;
}

.alert-item:last-child {
    margin-bottom: 0;
}

.alert-extreme, .alert-severe {
    background: linear-gradient(135deg, #ff4757 0%, #c0392b 100%);
    color: #fff;
}

.alert-moderate {
    background: linear-gradient(135deg, #ffa502 0%, #e67e22 100%);
    color: #fff;
}

.alert-minor {
    background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
    color: #2d3436;
}

.alert-icon {
    font-size: 1rem;
}

.alert-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alert-expand {
    font-size: 0.7rem;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.alert-item {
    cursor: pointer;
}

.alert-item:hover {
    filter: brightness(1.1);
}

.alert-details {
    display: none;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    line-height: 1.4;
}

.alert-details.expanded {
    display: block;
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-headline {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.alert-description {
    opacity: 0.9;
    margin-bottom: 0.5rem;
}

.alert-expires {
    font-size: 0.75rem;
    opacity: 0.7;
    font-style: italic;
}

body.light-theme .alert-details {
    background: rgba(0, 0, 0, 0.1);
}

@keyframes alert-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* Temperature Comparison */
.temp-comparison {
    display: inline-block;
    font-size: 0.8rem;
    margin-top: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-weight: 600;
    text-shadow: none;
}

.temp-comparison.warmer {
    background: rgba(0, 0, 0, 0.4);
    color: #ff8a8a;
}

.temp-comparison.cooler {
    background: rgba(0, 0, 0, 0.4);
    color: #8ad4ff;
}

.temp-comparison.same {
    background: rgba(0, 0, 0, 0.3);
    color: rgba(255, 255, 255, 0.9);
}

body.light-theme .temp-comparison.warmer {
    background: rgba(255, 255, 255, 0.8);
    color: #c0392b;
}

body.light-theme .temp-comparison.cooler {
    background: rgba(255, 255, 255, 0.8);
    color: #2471a3;
}

body.light-theme .temp-comparison.same {
    background: rgba(255, 255, 255, 0.7);
    color: #555;
}

/* Wind Arrow */
.wind-arrow {
    display: inline-block;
    font-size: 1rem;
    transition: transform 0.3s ease;
}

/* Moon Badge */
.moon-badge {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.6rem 0.5rem;
    border-radius: 12px;
    font-weight: 500;
    background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
    color: #fff;
    flex-wrap: wrap;
}

body.light-theme .moon-badge {
    background: linear-gradient(135deg, #636e72 0%, #2d3436 100%);
}

/* Pressure Trend */
.pressure-trend {
    font-weight: 700;
    margin-left: 0.25rem;
}

.pressure-trend.rising {
    color: #ff6b6b;
}

.pressure-trend.falling {
    color: #74b9ff;
}

/* Extended Weather Details Grid */
.weather-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

@media (max-width: 400px) {
    .weather-details {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Smaller detail items for more data */
.detail-item {
    background: rgba(255,255,255,0.1);
    padding: 0.5rem;
    border-radius: 8px;
    text-align: center;
}

.detail-item .label {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-bottom: 0.15rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-item .value {
    font-size: 0.85rem;
    font-weight: 600;
}

/* ================================================
   FEATURES 9-13 STYLES
   ================================================ */

/* Icon Buttons - uses .toolbar-toggle */

/* Daylight Progress Bar */
.daylight-progress {
    flex: 1;
    padding: 0 0.5rem;
    display: flex;
    align-items: center;
}

.daylight-bar {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(0,0,0,0.3);
    border-radius: 3px;
    overflow: visible;
}

.daylight-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffeaa7 0%, #fdcb6e 50%, #f39c12 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.daylight-fill:not(.is-day) {
    background: linear-gradient(90deg, #636e72 0%, #2d3436 100%);
}

.sun-position {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
    transition: left 0.5s ease;
}

.sun-times {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

.sun-times .sun-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 60px;
}

/* Clothing Suggestions */
.clothing-suggestions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.clothing-item {
    font-size: 1.2rem;
    cursor: help;
}

.clothing-label {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-left: auto;
}

/* Temperature Trend Graph */
.temp-trend {
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 1rem;
}

.temp-trend-label {
    font-size: 0.75rem;
    opacity: 0.7;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.temp-trend-svg {
    width: 100%;
    height: 60px;
    display: block;
}

.temp-trend-svg .temp-label {
    font-size: 4px;
    font-weight: 600;
    fill: #fff;
}

.temp-trend-svg .temp-label-max {
    fill: #ff7675;
}

.temp-trend-svg .temp-label-min {
    fill: #74b9ff;
}

body.light-theme .temp-trend-svg .temp-label {
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

body.light-theme .temp-trend-svg .temp-label-max {
    fill: #d63031;
}

body.light-theme .temp-trend-svg .temp-label-min {
    fill: #0984e3;
}

/* ================================================
   COMPACT MODE
   ================================================ */

body.compact-mode main {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
}

body.compact-mode .weather-card {
    padding: 0.75rem;
}

body.compact-mode .weather-card .card-header {
    margin-bottom: 0.5rem;
}

body.compact-mode .weather-card .city-info h2 {
    font-size: 1.1rem;
}

body.compact-mode .weather-card .city-info .country-code,
body.compact-mode .weather-card .city-info .local-time {
    font-size: 0.75rem;
}

body.compact-mode .weather-card .weather-icon {
    font-size: 2.5rem;
}

body.compact-mode .weather-card .temperature {
    font-size: 2rem;
}

body.compact-mode .weather-card .feels-like,
body.compact-mode .weather-card .high-low {
    font-size: 0.8rem;
}

body.compact-mode .weather-card .weather-description {
    font-size: 0.9rem;
}

body.compact-mode .weather-card .temp-comparison {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
}

body.compact-mode .weather-card .remove-btn,
body.compact-mode .weather-card .refresh-btn,
body.compact-mode .weather-card .expand-btn {
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
}

body.compact-mode .weather-card .weather-alerts .alert-item {
    padding: 0.35rem 0.5rem;
    font-size: 0.75rem;
}

/* Compact mode - expanded card details */
body.compact-mode .weather-card .card-details {
    font-size: 0.85rem;
}

body.compact-mode .weather-card .hourly-item {
    min-width: 50px;
    padding: 0.4rem 0.5rem;
}

body.compact-mode .weather-card .daily-item {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
}

body.compact-mode .weather-card .badges-row {
    gap: 0.35rem;
}

body.compact-mode .weather-card .aqi-badge,
body.compact-mode .weather-card .uv-badge,
body.compact-mode .weather-card .moon-badge {
    padding: 0.4rem;
    font-size: 0.75rem;
}

body.compact-mode .weather-card .weather-details {
    gap: 0.35rem;
}

body.compact-mode .weather-card .detail-item {
    padding: 0.4rem;
}

body.compact-mode .weather-card .detail-item .label {
    font-size: 0.65rem;
}

body.compact-mode .weather-card .detail-item .value {
    font-size: 0.75rem;
}

/* Light theme adjustments for new features */
body.light-theme .daylight-bar {
    background: rgba(0,0,0,0.15);
}

body.light-theme .clothing-suggestions {
    background: rgba(0,0,0,0.05);
}

body.light-theme .temp-trend {
    background: rgba(0,0,0,0.05);
}

/* Light theme toolbar toggle - defined above in light theme section */

/* Footer */
footer {
    text-align: center;
    padding: 3rem 1rem 2rem;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: #5a8f5a;
    font-family: 'Courier New', Courier, monospace;
}

.footer-logo {
    width: 48px;
    height: auto;
    margin-bottom: 1.5rem;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-logo:hover {
    opacity: 1;
    transform: scale(1.05);
}

footer p {
    margin: 0;
    opacity: 0.9;
    font-weight: 700;
}

footer a {
    color: inherit;
    text-decoration: none;
}

body.light-theme footer {
    color: #3d6b3d;
}