/* frontend/web/css/language-dropdown.css */

.language-dropdown-custom {
    position: relative; /* Needed for absolute positioning of the list */
    display: inline-block; /* Allows it to sit nicely in the menu */
    cursor: pointer;
    vertical-align: middle; /* Align with other top-menu items */
    padding: 5px 8px; /* Adjust padding to match other menu items if needed */
    /* Add border/background if needed to match design, e.g.: */
    /* border: 1px solid #ccc; */
    /* border-radius: 4px; */
    /* background-color: #fff; */
    line-height: 1; /* Prevent extra space */
    margin-top: -2px; /* Fine-tune vertical alignment if needed */
}

.selected-lang {
    display: flex;
    align-items: center;
    height: 20px; /* Match flag height or adjust */
}

.lang-flag {
    width: 18px; /* Adjust size as needed */
    height: auto; /* Maintain aspect ratio */
    margin-right: 5px;
    vertical-align: middle;
    display: inline-block;
}

.lang-code { /* Optional: if you want to show the code */
    font-size: 0.9em;
    margin-right: 3px;
    vertical-align: middle;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    vertical-align: middle;
    border-top: 4px dashed; /* Creates the dropdown arrow */
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.lang-list {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%; /* Position below the selected item */
    right: 0; /* Align to the right edge */
    /* left: 0; */ /* Use this if you want left alignment */
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    z-index: 1000; /* Ensure it's above other content */
    min-width: 150px; /* Adjust width as needed */
    padding: 5px 0;
    margin-top: 2px; /* Small gap */
    border-radius: 4px;
}

.lang-item {
    display: block; /* Make the whole area clickable */
    padding: 6px 12px;
    color: #333;
    text-decoration: none;
    white-space: nowrap; /* Prevent wrapping */
    display: flex; /* Use flexbox for alignment */
    align-items: center; /* Vertically center flag and text */
    font-size: 13px; /* Match menu font size */
}

.lang-item:hover {
    background-color: #f5f5f5;
    text-decoration: none;
    color: #222;
}

.lang-item .lang-flag {
    margin-right: 8px; /* Space between flag and text */
}

.lang-item span {
   line-height: 1; /* Ensure text aligns well */
}