#map {
    width: 100%;
    height: 600px;
    border: 1px solid #0000002A;
    border-bottom: none;
    border-radius: 15px 15px 0 0;
    position: relative;
}
.marker {
    display: block;
    border: none;
    border-radius: 10px;
    padding: 3px;
    background-color: #00000099;
    backdrop-filter: blur(6px) saturate(0.3);
    width: 50px;
    height: 80px;
    color: #fff;
    text-align: center;
    box-shadow: 0 4px 8px #00000055;
}
.marker-weather-text {
    font-size: 1.3rem;
    font-family: "Outfit", arial, Helvetica, sans-serif;
    font-weight: 700;
}
.marker-weather-icon img {
    width: 100%;
    height: auto;
}

.wnm-loading-overlay {
    position: absolute;
    inset: 0;
    display: none; /* toggled via JS */
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: all;
}

.wnm-loading-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(3px);
}

.wnm-loading-overlay__content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.35rem;
    border-radius: 0.75rem;
    background: #ffffff;
    color: #111827;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    font-family: "Outfit", arial, Helvetica, sans-serif;
    flex-wrap: wrap;
}

.wnm-loading-overlay__spinner {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 3px solid rgba(59, 130, 246, 0.25);
    border-top-color: #0A84FF;
    animation: wnm-spin 0.9s linear infinite;
}

.wnm-loading-overlay__text {
    font-size: 0.95rem;
    font-weight: 500;
}

.wnm-loading-overlay__retry {
    margin-left: 0.25rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: none;
    background: #0A84FF;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(10, 132, 255, 0.45);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.wnm-loading-overlay__retry:hover {
    background: #0056AC;
    box-shadow: 0 10px 26px rgba(0, 86, 172, 0.55);
    transform: translateY(-1px);
}

.wnm-loading-overlay__retry:active {
    transform: translateY(0);
    box-shadow: 0 4px 14px rgba(0, 86, 172, 0.45);
}

.wnm-loading-overlay__retry:focus-visible {
    outline: 2px solid #111827;
    outline-offset: 1px;
}

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