#weather-map-container {
    max-width: 100%;
    margin: auto;
    padding: 1em;
    font-family: sans-serif;
}

#unit-select {
    margin-bottom: 10px;
    padding: 5px;
    font-size: 1em;
}

#weather-map {
    height: 400px;
    width: 100%;
    border: 2px solid #ccc;
    margin-bottom: 1em;
}

/* Spinner base */
#weather-loading {
    text-align: center;
    font-size: 1.2em;
    color: #444;
    margin: 10px 0;
    position: relative;
}

/* Animated spinner circle */
.spinner::after {
    content: '';
    display: inline-block;
    width: 22px;
    height: 22px;
    border: 3px solid #ccc;
    border-top: 3px solid #444;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-left: 10px;
    vertical-align: middle;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#radar-timestamp {
    text-align: center;
    font-style: italic;
    font-size: 0.9em;
    color: #666;
    margin-bottom: 1em;
}

#source-flash {
    background: #ffc107;
    padding: 8px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1em;
    animation: flashFade 3s forwards;
}

@keyframes flashFade {
    0% { opacity: 1; }
    100% { opacity: 0; display: none; }
}

#weather-alerts {
    background-color: #ffe6e6;
    border: 1px solid #ff0000;
    color: #a30000;
    padding: 10px;
    margin-bottom: 10px;
    display: none;
}

#weather-info table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

#weather-info th,
#weather-info td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: left;
}

#weather-info h3 {
    margin-top: 20px;
}

/* Responsive styles */
@media screen and (max-width: 600px) {
    #weather-map {
        height: 300px;
    }

    #weather-info table,
    #weather-info th,
    #weather-info td {
        font-size: 0.9em;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    #weather-map-container {
        color: #eee;
    }

    #weather-map {
        border-color: #555;
    }

    #weather-info th,
    #weather-info td {
        background-color: #222;
        border-color: #444;
    }

    #weather-loading {
        color: #ccc;
    }

    .spinner::after {
        border-color: #666;
        border-top-color: #eee;
    }

    #radar-timestamp {
        color: #ccc;
    }

    #weather-alerts {
        background-color: #331111;
        color: #ffaaaa;
        border-color: #ff4444;
    }

    #source-flash {
        background: #665500;
        color: #fff2a8;
    }
}