.highlight-container {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    text-align: center;
}


#highlight-widget {
    position: fixed;
    bottom: 50px;
    right: 20px;
    z-index: 1000;
    display: flex; /* orizzontale */
    flex-wrap: wrap; /* va a capo se non c’è spazio */
    gap: .5rem;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    padding: .5rem;
    max-width: 70vw; /* evita overflow */
}

.highlight-item {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    padding: .5rem;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    flex: 1 1 120px; /* tutte con larghezza minima */
}

.highlight-value {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    text-shadow:3px 0 3px var(--tertiary-color);
    margin-bottom: -.75rem;
}

.highlight-label {
    font-size: 0.75rem;
    color: var(--primary-color);
}

@media (max-width: 768px) {

    .highlight-container {
        opacity: 1;
    }

    #highlight-widget {
        position: fixed;
        top: 280px;
        left: 50%;
        transform: translateX(-50%);
        width: auto; /* non forzare full width */
        width: 90vw; /* massimo 90% viewport */
        max-height: 10vh;
        padding: 0.5rem;
        display: flex; /* mantiene il contenitore in dimensione contenuta */
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .highlight-item {
        display: none;
        width: 100%; /* la card prende tutta la larghezza disponibile */
    }

        .highlight-item.active {
            display: block;
        }
}