/* Professional Styles for Language Selector Dropdown */
#language-select {
    /* Positioning removed (handled by header flexbox) */
    /* position: absolute; 
    top: 15px;          
    right: 15px;         
    z-index: 1001; */      

    /* Appearance */
    padding: 6px 10px; /* Slightly more padding */
    border: 1px solid #aaa; /* Slightly darker border */
    border-radius: 5px; /* Slightly more rounded corners */
    background-color: #fff; /* White background */
    color: #333; /* Dark grey text */
    font-size: 0.95em; /* Slightly larger font */
    font-family: sans-serif; /* Common sans-serif font */
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    outline: none; /* Remove default focus outline */
    
    /* Add transition for smooth hover/focus effects */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    
    /* Dropdown arrow styling remains commented out for now */
    /* background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px auto;
    padding-right: 30px; /* Make space for the arrow */ 
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none; */

    /* Remove margin-left as positioning is handled by flex gap */
    /* margin-left: 15px; */ 
}

/* Style for options (limited cross-browser support) */
#language-select option {
    background-color: white;
    color: #333;
    padding: 5px 10px; /* Add padding to options */
}

/* Class for absolute top-right positioning (use only on pages where needed) */
.language-select-top-right {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 1001;
}

/* Hover effect */
#language-select:hover {
    border-color: #777; /* Darker border on hover */
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.15); /* Slightly stronger shadow */
}

/* Focus effect (when dropdown is clicked) */
#language-select:focus {
    border-color: #007bff; /* Blue border on focus (example) */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3); /* Blue glow effect */
}