/* Container for flag-based select */
/* Styling the container for the language selector dropdown */
.flag-select {
    position: relative; /* Allows positioning of dropdown relative to this container */
    width: 220px; /* Fixed width for consistent layout */
}

/* Button for selected language */
/* Styling the button displaying the currently selected language */
#selected-language {
    display: flex; /* Flexbox for horizontal alignment */
    align-items: center; /* Center content vertically */
    justify-content: space-between; /* Space between flag and text */
    padding: 10px 15px; /* Internal spacing for comfortable click area */
    font-size: 16px; /* Font size for readability */
    font-family: 'Rubik', sans-serif; /* Font style for a clean look */
    color: #333; /* Dark text color */
    background-color: #f1ede6; /* Light background color */
    border: 1px solid #d1bc8a; /* Goldish border for a premium feel */
    border-radius: 8px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor to indicate interactivity */
    width: 100%; /* Full width of the container */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
}

/* Flag icons in button */
/* Styling the flag icons inside the language button */
#selected-language .flag-icon {
    width: 24px; /* Fixed width for consistent icon size */
    height: 16px; /* Fixed height for consistent icon size */
    margin-right: 10px; /* Space between flag and text */
    border-radius: 2px; /* Slight rounding for a polished look */
}

/* Dropdown menu */
/* Styling the dropdown containing all language options */
.flag-dropdown {
    display: none; /* Initially hidden */
    position: absolute; /* Positioned relative to the container */
    top: 100%; /* Place below the button */
    left: 0; /* Align to the left edge of the container */
    width: 100%; /* Match width of the container */
    background-color: #f9f9f9; /* Light background color */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Shadow for depth */
    list-style: none; /* Remove default list styles */
    margin: 0; /* No margin for compact appearance */
    padding: 0; /* Remove padding for clean edges */
    z-index: 1000; /* High z-index to ensure visibility */
    overflow: hidden; /* Prevent content overflow */
}

/* Dropdown items */
/* Styling individual items in the dropdown */
.flag-dropdown li {
    display: flex; /* Flexbox for horizontal alignment */
    align-items: center; /* Center content vertically */
    justify-content: space-between; /* Space between flag and text */
    padding: 12px 15px; /* Internal spacing */
    font-size: 16px; /* Font size for readability */
    font-family: 'Rubik', sans-serif; /* Font style for consistency */
    cursor: pointer; /* Pointer cursor for interactivity */
    width: 100%; /* Full width for easy clicking */
    box-sizing: border-box; /* Include padding and border in width */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Hover effect */
/* Styling for dropdown items on hover */
.flag-dropdown li:hover {
    background-color: #ebe3db; /* Light beige hover color */
    color: #000; /* Darker text color for contrast */
}

/* Remove gaps between elements */
/* Optional divider between dropdown items */
.flag-dropdown li + li {
    border-top: 1px solid #ddd; /* Subtle border as a separator */
}

/* Flag icons in dropdown */
/* Styling the flag icons in the dropdown menu */
.flag-dropdown li .flag-icon {
    width: 24px; /* Fixed width for consistency */
    height: 16px; /* Fixed height for consistency */
    margin-right: 10px; /* Space between flag and text */
    border-radius: 2px; /* Slight rounding for a polished look */
}

/* Show dropdown on button click */
/* Make the dropdown visible when the container is active */
.flag-select.active .flag-dropdown {
    display: block; /* Display the dropdown */
}

/* First and last item rounding for better appearance */
/* Add rounded corners to the first and last items */
.flag-dropdown li:first-child {
    border-top-left-radius: 8px; /* Rounded top-left corner */
    border-top-right-radius: 8px; /* Rounded top-right corner */
}

.flag-dropdown li:last-child {
    border-bottom-left-radius: 8px; /* Rounded bottom-left corner */
    border-bottom-right-radius: 8px; /* Rounded bottom-right corner */
}

/* Responsive adjustments */
/* Adjustments for screens up to 768px */
@media screen and (max-width: 1024px) {
    .flag-dropdown {
        background-color: #ebe3db; /* Slightly darker background for smaller screens */
        border-radius: 8px; /* Rounded corners for consistency */
        padding: 0; /* Remove extra padding */
        margin: 0; /* Remove unnecessary margins */
    }

    .flag-dropdown li {
        background-color: #ebe3db; /* Consistent background color */
        padding: 12px 15px; /* Adjust padding */
        display: flex; /* Ensure alignment */
        align-items: center; /* Center vertically */
        color: #333; /* Default text color */
        transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transitions */
    }

    .flag-dropdown li:hover {
        background-color: #ebe3db; /* Hover color */
        color: #000; /* Text color on hover */
    }
}