/* chips.css */

.chip {
    display: flex;
    padding: 0.5rem 1rem;
    gap: 1rem; /* Spazio tra l'icona/bandiera e il testo */
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.05); 
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); 
    
    /* Font di default per mobile/tablet */
    font: var(--body-m-font);
    color: #212121;
    transition: all 0.3s ease;
}

/* --- EFFETTO HOVER PER LE CHIPS --- */
.chip:hover {
    transform: translateY(-3px); /* Solleva la chip verso l'alto di 3 pixel */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08); /* Aumenta l'ombra per dare un senso di tridimensionalità */
    border-color: rgba(0, 0, 0, 0.1); /* Rende il bordo un filo più scuro per staccare dallo sfondo */
}

/* Scaliamo la font del chip su desktop per coerenza con il resto del sito */
@media (min-width: 1080px) {
    .chip {
        font: var(--body-l-font);
    }
}

/* GESTIONE RESPONSIVA BANDIERE (LINGUE)     */

.language-group .chip img {
    /* Al di sotto dei 1080px impostiamo 20px */
    height: 20px;
    width: auto;
    transition: height 0.3s ease;
}

/* Superati i 1080px, tornano alla dimensione dell'HTML (24px) */
@media (min-width: 1080px) {
    .language-group .chip img {
        height: 24px;
    }
}