/* ICONE SVG – HexQube (mask system) */

.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Dimensioni */
.icon.xs { width: 10px !important; height: 10px !important; }
.icon.sm { width: 14px !important; height: 14px !important; }
.icon.md { width: 18px !important; height: 18px !important; }
.icon.lg { width: 24px !important; height: 24px !important; }
.icon.xl { width: 32px !important; height: 32px !important; }
.icon.xxl { width: 40px !important; height: 40px !important; }
.icon.xxxl { width: 48px !important; height: 48px !important; }

/* =========================================
   ICONE NAVBAR
   ========================================= */
.icon-extension {
    -webkit-mask: url('/assets/icons/extension.svg') no-repeat center;
    mask: url('/assets/icons/extension.svg') no-repeat center;
}
.icon-electric_bolt {
    -webkit-mask: url('/assets/icons/electric_bolt.svg') no-repeat center;
    mask: url('/assets/icons/electric_bolt.svg') no-repeat center;
}
.icon-live_help {
    -webkit-mask: url('/assets/icons/live_help.svg') no-repeat center;
    mask: url('/assets/icons/live_help.svg') no-repeat center;
}

/* =========================================
   ICONE SEZIONI (Soluzioni, Contatti)
   ========================================= */
.icon-security {
    -webkit-mask: url('/assets/icons/security.svg') no-repeat center;
    mask: url('/assets/icons/security.svg') no-repeat center;
}
.icon-bolt {
    -webkit-mask: url('/assets/icons/bolt.svg') no-repeat center;
    mask: url('/assets/icons/bolt.svg') no-repeat center;
}
.icon-analytics {
    -webkit-mask: url('/assets/icons/analytics.svg') no-repeat center;
    mask: url('/assets/icons/analytics.svg') no-repeat center;
}
.icon-energy_savings_leaf {
    -webkit-mask: url('/assets/icons/energy_savings_leaf.svg') no-repeat center;
    mask: url('/assets/icons/energy_savings_leaf.svg') no-repeat center;
}
.icon-phone_callback {
    -webkit-mask: url('/assets/icons/phone_callback.svg') no-repeat center;
    mask: url('/assets/icons/phone_callback.svg') no-repeat center;
}
.icon-phone_forwarded {
    -webkit-mask: url('/assets/icons/phone_forwarded.svg') no-repeat center;
    mask: url('/assets/icons/phone_forwarded.svg') no-repeat center;
}
.icon-headset_mic {
    -webkit-mask: url('/assets/icons/headset_mic.svg') no-repeat center;
    mask: url('/assets/icons/headset_mic.svg') no-repeat center;
}
.icon-admin_panel_settings {
    -webkit-mask: url('/assets/icons/admin_panel_settings.svg') no-repeat center;
    mask: url('/assets/icons/admin_panel_settings.svg') no-repeat center;
}
.icon-login {
    -webkit-mask: url('/assets/icons/login.svg') no-repeat center;
    mask: url('/assets/icons/login.svg') no-repeat center;
}
.icon-send {
    -webkit-mask: url('/assets/icons/send.svg') no-repeat center;
    mask: url('/assets/icons/send.svg') no-repeat center;
}
.icon-arrow_forward {
    -webkit-mask: url('/assets/icons/arrow_forward.svg') no-repeat center;
    mask: url('/assets/icons/arrow_forward.svg') no-repeat center;
}
.icon-arrow_upward {
    -webkit-mask: url('/assets/icons/arrow_upward.svg') no-repeat center;
    mask: url('/assets/icons/arrow_upward.svg') no-repeat center;
}

/* =========================================
   ICONE DI STATO / FEEDBACK
   ========================================= */
.icon-check_circle {
    -webkit-mask: url('/assets/icons/check_circle.svg') no-repeat center;
    mask: url('/assets/icons/check_circle.svg') no-repeat center;
}
.icon-warning {
    -webkit-mask: url('/assets/icons/warning.svg') no-repeat center;
    mask: url('/assets/icons/warning.svg') no-repeat center;
}
.icon-check_box {
    -webkit-mask: url('/assets/icons/check_box.svg') no-repeat center;
    mask: url('/assets/icons/check_box.svg') no-repeat center;
}
.icon-check_box_outline_blank {
    -webkit-mask: url('/assets/icons/check_box_outline_blank.svg') no-repeat center;
    mask: url('/assets/icons/check_box_outline_blank.svg') no-repeat center;
}

/* =========================================
   ICONE UI (menu, chiudi, cookie, verificato)
   ========================================= */
.icon-menu {
    -webkit-mask: url('/assets/icons/menu.svg') no-repeat center;
    mask: url('/assets/icons/menu.svg') no-repeat center;
}
.icon-close {
    -webkit-mask: url('/assets/icons/close.svg') no-repeat center;
    mask: url('/assets/icons/close.svg') no-repeat center;
}
.icon-verified {
    -webkit-mask: url('/assets/icons/verified.svg') no-repeat center;
    mask: url('/assets/icons/verified.svg') no-repeat center;
}
.icon-cookie {
    -webkit-mask: url('/assets/icons/cookie.svg') no-repeat center;
    mask: url('/assets/icons/cookie.svg') no-repeat center;
}

.icon-light_mode {
    -webkit-mask: url('/assets/icons/light_mode.svg') no-repeat center;
    mask: url('/assets/icons/light_mode.svg') no-repeat center;
}
.icon-dark_mode {
    -webkit-mask: url('/assets/icons/dark_mode.svg') no-repeat center;
    mask: url('/assets/icons/dark_mode.svg') no-repeat center;
}


/* =========================================
   MASCHERE CON MASK-SIZE: COVER
   (obbligatorio per visualizzare correttamente le icone)
   ========================================= */
.icon-extension,
.icon-electric_bolt,
.icon-live_help,
.icon-security,
.icon-bolt,
.icon-analytics,
.icon-energy_savings_leaf,
.icon-phone_callback,
.icon-phone_forwarded,
.icon-headset_mic,
.icon-admin_panel_settings,
.icon-login,
.icon-send,
.icon-arrow_forward,
.icon-arrow_upward,
.icon-check_circle,
.icon-warning,
.icon-check_box,
.icon-check_box_outline_blank,
.icon-menu,
.icon-close,
.icon-verified,
.icon-cookie,
.icon-light_mode,
.icon-dark_mode
{
    -webkit-mask-size: cover !important;
    mask-size: cover !important;
}