/* ========================================
   WIND PARTICLES TOGGLE - LOADING / ERROR
   (UI extra, doesnt modify original toggle)
   ======================================== */

.wind-particles-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--wc-brand-blue, #0088BB);
}

/* Right side of footer: keeps toggle at far right */
.layer-footer-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.wind-particles-status[aria-hidden="true"] {
    display: none;
}

.wind-particles-status__loader {
    display: none;
    width: 26px;
    height: 20px;
    position: relative;
    overflow: hidden;
}

.wind-particles-status__error {
    display: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid currentColor;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: var(--wc-wind-error, #ff4d4f);
}

.wind-particles-status__error.is-visible {
    display: inline-flex;
}

.wind-particles-status__loader.is-visible {
    display: inline-flex;
}



.wind-particles-status__loader .weather-bars-loader {
    display: block;
}

/* SVG sizing */
.weather-bars-loader {
    width: 26px;
    height: auto;
    display: block;
}

.weather-bars-loader .animated-bar,
.weather-bars-loader .cloud-path {
    fill: currentColor;
}

.weather-bars-loader .animated-bar {
    opacity: 0.2;
    animation: windBarsFade 1s ease-in-out infinite;
}

.weather-bars-loader .bar-1 { animation-delay: 0s; }
.weather-bars-loader .bar-2 { animation-delay: 0.1s; }
.weather-bars-loader .bar-3 { animation-delay: 0.2s; }

@keyframes windBarsFade {
    0%   { opacity: 1; }
    25%  { opacity: 1; }
    70%  { opacity: 1; }
    75%  { opacity: 0; }
    100% { opacity: 0; }
}