{{-- Icone Principali dei 14 Allergeni (Standard UE)
Ecco una lista delle rappresentazioni grafiche più comuni:
Cereali contenenti glutine (grano, segale, orzo, avena): Spiga di grano.
Crostacei: Gambero o granchio.
Uova: Uovo nel guscio o al tegamino.
Pesce: Pesce intero.
Arachidi: Arachide con guscio.
Soia: Pianta o chicco di soia.
Latte: Bottiglia o bicchiere di latte.
Frutta a guscio (mandorle, noci, ecc.): Noci o mandorle.
Sedano: Gambo di sedano.
Senape: Pianta di senape o semi.
Semi di sesamo: Semi o sesamo.
Anidride solforosa e solfiti: Bottiglia di vino o simbolo chimico (SO₂).
Lupini: Fiore di lupino o seme.
Molluschi: Conchiglia (es. vongola). --}}

<style>
  /**
   * Legenda allergeni: regola tutto da qui (icona + testo + spaziatura).
   * Esempio più grande:
   *   --allergen-icon-size: 3rem;
   *   --allergen-label-size: 0.95rem;
   *   --allergen-item-width: 5.5rem;
   */
  .allergen-legend {
    --allergen-icon-size: 2.25rem;   /* ~36px */
    --allergen-label-size: 0.8125rem; /* ~13px */
    --allergen-label-gap: 0.35rem;
    --allergen-item-width: 5rem;      /* ~80px */
  }
  .allergen-legend__item {
    width: var(--allergen-item-width);
    flex: 0 0 auto;
  }
  .allergen-legend__icon-wrap {
    width: var(--allergen-icon-size);
    height: var(--allergen-icon-size);
    margin: 0 auto;
  }
  .allergen-legend__icon {
    width: 100%;
    height: 100%;
    display: block;
  }
  .allergen-legend__label {
    font-size: var(--allergen-label-size);
    margin-top: var(--allergen-label-gap);
    line-height: 1.2;
  }
</style>

<div class="row">
    <div class="col-12">
        <h5 class="mb-3">Legenda Allergeni</h5>
        <div class="allergen-legend d-flex flex-wrap gap-3">

            <!-- 1. Cereali contenenti glutine — spiga su cerchio -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#b8860b"/>
                    <!-- Stelo -->
                    <path d="M24 38 V13" stroke="#ffffff" stroke-width="2.2" stroke-linecap="round"/>
                    <!-- Chicchi alternati lungo la spiga (lettura tipica “spiga di grano”) -->
                    <g fill="#ffffff" stroke="none">
                        <ellipse cx="17.5" cy="31" rx="3.6" ry="2.3" transform="rotate(-38 17.5 31)"/>
                        <ellipse cx="30.5" cy="31" rx="3.6" ry="2.3" transform="rotate(38 30.5 31)"/>
                        <ellipse cx="16.8" cy="25" rx="3.5" ry="2.2" transform="rotate(-42 16.8 25)"/>
                        <ellipse cx="31.2" cy="25" rx="3.5" ry="2.2" transform="rotate(42 31.2 25)"/>
                        <ellipse cx="17.2" cy="19" rx="3.4" ry="2.1" transform="rotate(-40 17.2 19)"/>
                        <ellipse cx="30.8" cy="19" rx="3.4" ry="2.1" transform="rotate(40 30.8 19)"/>
                        <ellipse cx="24" cy="13.5" rx="3.2" ry="3.6"/>
                    </g>
                </svg>
                </div>
                <div class="allergen-legend__label">Glutine</div>
            </div>
            <!-- 2. Crostacei -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#d14a39"/>
                    <ellipse cx="24" cy="25" rx="10" ry="6" fill="#ffffff"/>
                    <circle cx="16" cy="17" r="4" fill="#ffffff"/>
                    <circle cx="32" cy="17" r="4" fill="#ffffff"/>
                    <path d="M12 14 C8,8 14,4 18,10" stroke="#ffffff" stroke-width="2" fill="none"/>
                    <path d="M36 14 C40,8 34,4 30,10" stroke="#ffffff" stroke-width="2" fill="none"/>
                </svg>
                </div>
                <div class="allergen-legend__label">Crostacei</div>
            </div>
            <!-- 3. Uova -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#e8a317"/>
                    <ellipse cx="24" cy="24" rx="10" ry="14" fill="#ffffff"/>
                </svg>
                </div>
                <div class="allergen-legend__label">Uova</div>
            </div>
            <!-- 4. Pesce (contenuto spostato a sinistra: prima era troppo a destra) -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#2b7ab8"/>
                    <g transform="translate(-4,0)">
                    <ellipse cx="28" cy="22" rx="10" ry="6" fill="#ffffff"/>
                    <polygon points="38,22 46,16 46,28" fill="#ffffff"/>
                    <circle cx="22" cy="22" r="1.5" fill="#2b7ab8"/>
                    </g>
                </svg>
                </div>
                <div class="allergen-legend__label">Pesce</div>
            </div>
            <!-- 5. Arachidi -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#c96d1a"/>
                    <ellipse cx="20" cy="24" rx="5" ry="9" fill="#ffffff"/>
                    <ellipse cx="28" cy="24" rx="5" ry="9" fill="#ffffff"/>
                    <ellipse cx="20" cy="24" rx="2" ry="4" fill="#c96d1a" opacity=".25"/>
                    <ellipse cx="28" cy="24" rx="2" ry="4" fill="#c96d1a" opacity=".25"/>
                </svg>
                </div>
                <div class="allergen-legend__label">Arachidi</div>
            </div>
            <!-- 6. Soia -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#3d7a34"/>
                    <ellipse cx="24" cy="20" rx="9" ry="5" fill="#ffffff"/>
                    <circle cx="17" cy="17" r="2" fill="#3d7a34"/>
                    <circle cx="24" cy="14" r="2.1" fill="#3d7a34"/>
                    <circle cx="31" cy="17" r="2" fill="#3d7a34"/>
                </svg>
                </div>
                <div class="allergen-legend__label">Soia</div>
            </div>
            <!-- 7. Latte -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#5a9fd4"/>
                    <rect x="18" y="12" width="12" height="20" rx="6" fill="#ffffff"/>
                    <rect x="19" y="10" width="10" height="4" rx="2" fill="#5a9fd4" opacity=".5"/>
                    <rect x="18" y="32" width="12" height="5" rx="3" fill="#5a9fd4" opacity=".35"/>
                </svg>
                </div>
                <div class="allergen-legend__label">Latte</div>
            </div>
            <!-- 8. Frutta a guscio -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#8b6914"/>
                    <ellipse cx="24" cy="24" rx="10" ry="6" fill="#ffffff"/>
                    <ellipse cx="24" cy="24" rx="4" ry="2" fill="#8b6914" opacity=".3"/>
                    <path d="M20 24 Q22 18 24 24 Q26 30 28 24" stroke="#8b6914" stroke-width="1" fill="none" opacity=".4"/>
                </svg>
                </div>
                <div class="allergen-legend__label">Frutta a guscio</div>
            </div>
            <!-- 9. Sedano -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#5a9c2e"/>
                    <rect x="20" y="10" width="8" height="24" rx="4" fill="#ffffff"/>
                    <rect x="23" y="5" width="2" height="10" rx="1" fill="#ffffff"/>
                </svg>
                </div>
                <div class="allergen-legend__label">Sedano</div>
            </div>
            <!-- 10. Senape (contenuto centrato verticalmente nel cerchio) -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#c9a227"/>
                    <ellipse cx="24" cy="25" rx="9" ry="5" fill="#ffffff"/>
                    <circle cx="20" cy="23" r="1.3" fill="#c9a227"/>
                    <circle cx="24" cy="27" r="1.3" fill="#c9a227"/>
                    <circle cx="28" cy="23" r="1.3" fill="#c9a227"/>
                </svg>
                </div>
                <div class="allergen-legend__label">Senape</div>
            </div>
            <!-- 11. Semi di sesamo -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#7d6b4a"/>
                    <ellipse cx="24" cy="25" rx="10" ry="5" fill="#ffffff"/>
                    <ellipse cx="21" cy="25" rx="0.9" ry="2" fill="#7d6b4a"/>
                    <ellipse cx="24" cy="27" rx="0.9" ry="2" fill="#7d6b4a"/>
                    <ellipse cx="27" cy="25" rx="0.9" ry="2" fill="#7d6b4a"/>
                </svg>
                </div>
                <div class="allergen-legend__label">Sesamo</div>
            </div>
            <!-- 12. Anidride solforosa e solfiti -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#6b5b7a"/>
                    <rect x="21" y="9" width="6" height="10" rx="3" fill="#ffffff"/>
                    <rect x="19" y="19" width="10" height="18" rx="5" fill="#ffffff"/>
                    <ellipse cx="24" cy="36" rx="5" ry="2" fill="#6b5b7a" opacity=".4"/>
                </svg>
                </div>
                <div class="allergen-legend__label">Solfiti</div>
            </div>
            <!-- 13. Lupini -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#9db22c"/>
                    <ellipse cx="24" cy="24" rx="8" ry="10" fill="#ffffff"/>
                    <circle cx="24" cy="32" r="2" fill="#9db22c"/>
                    <ellipse cx="20" cy="18" rx="3" ry="1.6" fill="#9db22c" opacity=".35"/>
                </svg>
                </div>
                <div class="allergen-legend__label">Lupini</div>
            </div>
            <!-- 14. Molluschi -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#3d7a8c"/>
                    <path d="M10 32 Q24 4 38 32 Q24 44 10 32Z" fill="#ffffff"/>
                    <ellipse cx="24" cy="36" rx="6" ry="2" fill="#3d7a8c" opacity=".45"/>
                </svg>
                </div>
                <div class="allergen-legend__label">Molluschi</div>
            </div>
            <!-- 15. Carne -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#b84d5c"/>
                    <ellipse cx="24" cy="24" rx="13" ry="9" fill="#ffffff"/>
                    <ellipse cx="24" cy="24" rx="5" ry="3.5" fill="#b84d5c" opacity=".25"/>
                </svg>
                </div>
                <div class="allergen-legend__label">Carne</div>
            </div>
            <!-- 16. Funghi -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#6e6e6e"/>
                    <ellipse cx="24" cy="19" rx="10" ry="6" fill="#ffffff"/>
                    <rect x="20" y="19" width="8" height="12" rx="4" fill="#ffffff"/>
                </svg>
                </div>
                <div class="allergen-legend__label">Funghi</div>
            </div>
            <!-- 17. Mais -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#d4a012"/>
                    <ellipse cx="24" cy="22" rx="7" ry="11" fill="#ffffff"/>
                    <rect x="19" y="28" width="10" height="9" rx="5" fill="#ffffff"/>
                    <circle cx="24" cy="25" r="2" fill="#d4a012" opacity=".35"/>
                    <circle cx="21" cy="20" r="1.3" fill="#d4a012" opacity=".35"/>
                    <circle cx="27" cy="20" r="1.3" fill="#d4a012" opacity=".35"/>
                </svg>
                </div>
                <div class="allergen-legend__label">Mais</div>
            </div>
            <!-- 18. Altro -->
            <div class="text-center allergen-legend__item">
                <div class="allergen-legend__icon-wrap">
                <svg class="allergen-legend__icon" viewBox="0 0 48 48" fill="none" aria-hidden="true" preserveAspectRatio="xMidYMid meet">
                    <circle cx="24" cy="24" r="22" fill="#6c757d"/>
                    <text x="24" y="30" text-anchor="middle" font-size="16" fill="#ffffff"
                        font-family="system-ui, sans-serif" font-weight="600">?</text>
                </svg>
                </div>
                <div class="allergen-legend__label">Altro</div>
            </div>
        </div>
    </div>
</div>
