/* =========================================
   PEARL DIVER — DIETARY ICONS
========================================= */


/* =========================================
   1. REMOVE ORIGINAL 5 STAR MENU ICONS
========================================= */

.fdm-menu-item-flags .fdm-icon::before,
.fdm-menu-item-flags .fdm-icon::after {
    content: none !important;
    display: none !important;
}


/* =========================================
   2. MENU ITEM — ICON LIST
========================================= */

.fdm-menu-item-flags {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 6px !important;

    padding: 0 !important;
    margin: 6px 0 0 0 !important;

    list-style: none !important;
}


/* =========================================
   3. MENU ITEM — SHARED ICON STYLE
========================================= */

.fdm-menu-item-flags .fdm-flag {
    display: block !important;

    width: 24px !important;
    height: 24px !important;

    min-width: 24px !important;
    min-height: 24px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    outline: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    background-color: transparent !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    font-size: 0 !important;
    line-height: 0 !important;

    overflow: visible !important;
}


/* =========================================
   4. MENU ITEM — DAIRY FREE
========================================= */

.fdm-menu-item-flags .fdm-icon-has-dairy {
    background-image:
        url('/main/icons/dietary_df.svg') !important;

    opacity: 0.9 !important;
}


/* =========================================
   5. MENU ITEM — GLUTEN FREE
========================================= */

.fdm-menu-item-flags .fdm-icon-gluten-free,
.fdm-menu-item-flags .fdm-icon-no-gluten,
.fdm-menu-item-flags .fdm-icon-no-gluten-2 {
    background-image:
        url('/main/icons/dietary_gf.svg') !important;

    opacity: 0.9 !important;
}


/* =========================================
   6. MENU ITEM — VEGAN
========================================= */

.fdm-menu-item-flags .fdm-icon-vegan,
.fdm-menu-item-flags .fdm-icon-is-vegan {
    background-image:
        url('/main/icons/dietary_vg.svg') !important;

    opacity: 0.9 !important;
}


/* =========================================
   7. SCREEN READER TEXT
========================================= */

.fdm-menu-item-flags .screen-reader-text {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* =========================================
   8. DIETARY ICON LEGEND — DESKTOP
========================================= */

.menu-icons-legend {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;

    gap: 14px !important;

    margin-top: 20px !important;
}


/* =========================================
   9. LEGEND — EACH ROW
========================================= */

.legend-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    gap: 8px !important;
}


/* =========================================
   10. LEGEND — SHARED ICON STYLE
========================================= */

.legend-item-icon {
    display: block !important;

    width: 22px !important;
    height: 22px !important;

    min-width: 22px !important;
    min-height: 22px !important;

    flex: 0 0 22px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    background-color: transparent !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    opacity: 0.7 !important;
}


/* =========================================
   11. LEGEND — DAIRY FREE
========================================= */

.legend-item:nth-child(1) .legend-item-icon {
    background-image:
        url('/main/icons/dietary_df.svg') !important;
}


/* =========================================
   12. LEGEND — GLUTEN FREE
========================================= */

.legend-item:nth-child(2) .legend-item-icon {
    background-image:
        url('/main/icons/dietary_gf.svg') !important;
}


/* =========================================
   13. LEGEND — VEGAN
========================================= */

.legend-item:nth-child(3) .legend-item-icon {
    background-image:
        url('/main/icons/dietary_vg.svg') !important;
}


/* =========================================
   14. LEGEND — TEXT
========================================= */

.legend-item-text {
    font-family: 'Nunito', sans-serif !important;

    font-size: 0.9em !important;
    font-weight: 400 !important;

    letter-spacing: 0.01em !important;
    line-height: 1.4em !important;

    color: #4A4A4A !important;
}


/* =========================================
   15. MOBILE — LEGEND IN ONE ROW
========================================= */

@media screen and (max-width: 1024px) {

    .menu-icons-legend {
        flex-direction: row !important;

        align-items: center !important;
        justify-content: center !important;

        flex-wrap: nowrap !important;

        gap: 18px !important;

        width: 100% !important;

        margin-top: 16px !important;
    }


    .legend-item {
        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 6px !important;

        margin: 0 !important;

        white-space: nowrap !important;
    }


    .legend-item-icon {
        width: 20px !important;
        height: 20px !important;

        min-width: 20px !important;
        min-height: 20px !important;

        flex: 0 0 20px !important;
    }


    .legend-item-text {
        font-size: 0.82em !important;
        line-height: 1.2 !important;
    }

}