/* LANGUAGE SWITCHER FOR TRANSPOSH - CUSTOM CSS
   Version: 1.8.1
   Author: Codingfix
*/

.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; /* Force vertical center alignment */
    height: 100% !important;        /* Try to occupy the height of the parent menu */
    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;
}

/* if the current Theme uses floats instead of flexbox, this helps */
.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;
}

/* --- RESET AND BASE --- */
.stylable-list, 
.cfxlsft-list {
    display: inline-flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal !important; /* Evita che il line-height enorme dei menu rompa il layout */
}

/* --- THE TOGGLE ELEMENT OF THE LIST --- */
#stylable-list-first-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    cursor: pointer;
    text-decoration: none !important;
    color: inherit !important;
    white-space: nowrap;
}

/* The link of toggle or the link of the list */
#stylable-list-first-item,
.cfxlsft-list li a {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

#stylable-list-first-item::after {
    content: "▾";
    font-size: 0.8em;
    opacity: 0.7;
}

/* --- THE SUBMENU (Positioning) --- */
.stylable-list {
    position: relative !important;
	/* Ensure the container has a defined height
       to give top: 100% a solid reference point */
    align-self: center;
}

#lsft-sub-menu {
    /* --- STRUCTURAL RULES --- */
    display: block !important;
    position: absolute !important;
    z-index: 99999 !important;
    top: 100% !important;   /* attaches it to the bottom edge of the menu */
    left: 0 !important;     /* aligns it perfectly to the left */
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
    width: fit-content !important;
    white-space: nowrap !important;

    /* --- AESTHETIC RULES --- */
    list-style-type: none !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    background-color: transparent; /* Or the color you prefer */
    border: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Shows the submenu when hovering */
.stylable-list:hover > #lsft-sub-menu {
    visibility: visible;
    opacity: 1;
}

/* --- THE SUBMENU ITEMS --- */
#lsft-sub-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important; /* Reset padding */
    background: none !important;
}

#lsft-sub-menu li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    padding: 6px 12px !important; /* clickable internal spacing */
    color: inherit !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.2s;
}

/* Universal Hover: If we can't take the theme color, 
   we use a light dark or light background that works everywhere */
#lsft-sub-menu li a:hover {
    background-color: rgba(125, 125, 125, 0.1) !important;
    opacity: 0.8;
}

/* --- FLAGS (Fixed dimensions --- */
.stylable-list img,
.cfxlsft-list img,
#lsft-sub-menu img {
    width: 32px !important;   /* Forces the size everywhere */
    max-width: 32px !important;
    height: auto !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* specific fix for flag-only in the submenu */
.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;
}