/* ==========================================================================
   LANGUAGE SWITCHER FOR TRANSPOSH - CUSTOM CSS DEFINITIVO (DARK THEME)
   Configurazione: Custom Dropdown List (Flag and Text)
   Aggiornamento: Pulsante Lingua Chiusa con Sfondo Scuro e Bordo Elegante
   ========================================================================== */

/* --- ALLINEAMENTO BASE E RESET FLEXBOX --- */
.cfxlsft-list,
.stylable-list,
#menu_horizontal_flags,
#sh_lsft_horizontal_flags,
#sh_lsft_horizontal_codes {
    display: inline-flex !important;
    vertical-align: middle !important;
    align-items: center !important;
    height: 100% !important;
    line-height: normal !important;
}

#lsft-widget-lsft-horizontal-flags li:not(:last-child),
#lsft-widget-lsft-horizontal-codes li:not(:last-child), 
#sh_lsft_horizontal_flags li:not(:last-child), 
#sh_lsft_horizontal_codes li:not(:last-child) {
    margin-right: 10px;
}

/* Fix per temi che usano float anziché flexbox */
.menu-item .cfxlsft-list,
.menu-item .stylable-list {
    float: none !important;
}

.cfxlsft-vertical, 
#sh_lsft_vertical_flags, 
#sh_lsft_vertical_codes {
    flex-direction: column !important;
}

.stylable-list, 
.cfxlsft-list {
    display: inline-flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important;
}

/* ==========================================================================
   🔘 ELEMENTO TOGGLE: LINGUA ATTIVA IN BARRA (A TENDINA CHIUSA)
   Crea un pulsante/badge scuro con testo chiaro a contrasto
   ========================================================================== */
#stylable-list-first-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    
    /* SFONDO SCURO SOLIDO A TENDINA CHIUSA */
    background: #18181b !important;
    background-color: #18181b !important;
    border: 1px solid #3d3d3d !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;                 /* Spaziatura da pulsante elegante */
    height: auto !important;                      /* Evita stiramenti verticali */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;

    /* TESTO CHIARO AD ALTO CONTRASTO */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Effetto al passaggio del mouse sul pulsante chiuso */
#stylable-list-first-item:hover,
.stylable-list:hover #stylable-list-first-item {
    background: #262629 !important;
    background-color: #262629 !important;
    border-color: #52525b !important;
}

/* Freccetta indicatore tendina */
#stylable-list-first-item::after {
    content: "▾";
    font-size: 0.85em;
    opacity: 0.8;
    margin-left: 4px;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Reset altezze dei link della lista base */
.cfxlsft-list li a {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ==========================================================================
   📂 IL CONTENITORE DEL SOTTOMENU A TENDINA (QUANDO SI APRE)
   ========================================================================== */
.stylable-list {
    position: relative !important;
    align-self: center !important;
}

html body #lsft-sub-menu,
html body #mega-menu-wrap-main_menu_home #lsft-sub-menu,
.stylable-list #lsft-sub-menu,
#lsft-sub-menu {
    display: block !important;
    position: absolute !important;
    z-index: 999999 !important;
    top: calc(100% + 4px) !important;             /* Leggero stacco elegante dal pulsante */
    left: 0 !important;
    
    /* Chiuso e invisibile di base */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    
    width: fit-content !important;
    min-width: 175px !important;
    white-space: nowrap !important;
    list-style-type: none !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    
    /* SFONDO SCURO SOLIDO */
    background: #18181b !important;
    background-color: #18181b !important;
    border: 1px solid #3d3d3d !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85) !important;
    overflow: hidden !important;
}

/* --- APERTURA AL PASSAGGIO DEL MOUSE (DESKTOP) O AL FOCUS (TOUCH) --- */
.stylable-list:hover > #lsft-sub-menu,
.stylable-list:focus-within > #lsft-sub-menu,
.stylable-list.open > #lsft-sub-menu,
.stylable-list.active > #lsft-sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* --- SFONDO SCURO SU OGNI SINGOLA RIGA INTERNA --- */
html body #lsft-sub-menu li,
html body #lsft-sub-menu li a,
#lsft-sub-menu li,
#lsft-sub-menu li a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    background: #18181b !important;
    background-color: #18181b !important;
}

/* --- TESTO BIANCO NITIDO SU TUTTE LE LINGUE DELLA TENDINA --- */
#lsft-sub-menu li a,
#lsft-sub-menu li a span,
#lsft-sub-menu li span,
#lsft-sub-menu li a * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: normal !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* --- STRUTTURA DEL LINK INTERNO (BANDIERA + NOME LINGUA) --- */
#lsft-sub-menu li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    white-space: nowrap !important;
    transition: background 0.15s ease, color 0.15s ease;
}

/* --- EFFETTO HOVER / TOUCH SUGLI ELEMENTI APERTI --- */
#lsft-sub-menu li a:hover,
#lsft-sub-menu li a:active,
#lsft-sub-menu li:hover,
#lsft-sub-menu li a:hover *,
#lsft-sub-menu li a:active * {
    background: #2d2d2d !important;
    background-color: #2d2d2d !important;
    color: #38bdf8 !important;                    /* Testo azzurro chiaro all'interazione */
    -webkit-text-fill-color: #38bdf8 !important;
}

/* --- DIMENSIONI BANDIERE --- */
.stylable-list img,
.cfxlsft-list img,
#lsft-sub-menu img {
    width: 24px !important;
    max-width: 24px !important;
    height: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

.flag-only #lsft-sub-menu li a {
    justify-content: center !important;
    padding: 8px !important;
}

.menu-item.no_translate a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ==========================================================================
   🖥️ FIX DEFINITIVO ACCODAMENTO MAX MEGA MENU (DESKTOP > 768px)
   ========================================================================== */
@media screen and (min-width: 769px) {

    /* 1. Forza la voce della lingua a flottare insieme agli altri elementi del menu */
    #mega-menu-wrap-main_menu_home #mega-menu-main_menu_home > li.switch_lang,
    #mega-menu-wrap-main_menu_home #mega-menu-main_menu_home > li.menu-item.switch_lang,
    #mega-menu-main_menu_home > li.switch_lang,
    li.switch_lang {
        display: inline-flex !important;
        align-items: center !important;
        float: left !important;                   /* Flotta a sinistra subito dopo l'ultimo link */
        clear: none !important;
        height: 80px !important;                  /* Stessa identica altezza della barra menu */
        line-height: normal !important;
        margin: 0 0 0 10px !important;
        padding: 0 !important;
    }

    /* 2. Allineamento verticale del pulsante a tendina chiusa */
    li.switch_lang .stylable-list {
        display: inline-flex !important;
        align-items: center !important;
        align-self: center !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }
}