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

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

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

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

.isobars-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);
}

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

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

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

/* ========================================
   ISOBAR LABELS ON MAP
   ======================================== */

.isobar-label {
    background: transparent;
    border: none;
    box-shadow: none;
    /* IMPORTANTE: Permitir que el div crezca según el contenido */
    width: auto; 
    height: auto;
    /* Mantiene el centro geométrico en la coordenada */
    transform: translate(-50%, -50%); 
}

.isobar-label span {
    /* Usamos inline-block o inline-flex para que el padding funcione bien */
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    font-size: 10px;   
    line-height: 1;       
    padding: 2px 4px;        
    border-radius: 4px;
    white-space: nowrap;
    color: #000; 
    
}

/* Dark mode support */
.map-dark .isobar-label span {
    background: transparent;
    color: #fff;
}