/* Container for dropdown */
.dropdown-container {
    margin-top: 10px;
    margin-bottom: 5px;
    position: relative;
    display: inline-block;
    width: 100%; /* Adjust to align properly with the layout */
}

/* Style for the select dropdown itself */
.elegant-dropdown {
    width: 100%;
    padding: 6px; /* Reduced padding for a more comfortable height */
    font-size: 0.7rem; /* Slightly increased font size for better readability */
    line-height: 1.2; /* Adjusted line height to reduce the overall height */
    height: auto; /* Let height be determined by text size */
    border-radius: 6px; /* Slightly reduced border radius */
    border: 1px solid #ccc; /* Adjust this color to match the website's color scheme */
	background: #f8f8f8;  /* Light grey or matching background color */
    appearance: none; /* Hide the default arrow for a custom style */
    -webkit-appearance: none; /* Hide default arrow for WebKit browsers */
    -moz-appearance: none; /* Hide default arrow for Firefox browsers */
    outline: none;
    color: #333; /* Adjust to the preferred text color */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Light shadow to give a lifted effect */
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Styling the dropdown on focus (to match an elegant website's design) */
.elegant-dropdown:focus {
    border-color: #007bff; /* Change border color when focused */
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.3); /* Blue shadow when focused */
}

/* Adding a down-arrow indicator for dropdowns */
.dropdown-container::after {
    content: "▼"; /* Unicode character for a down arrow */
    position: absolute;
    top: 50%;
    right: 5px;
    pointer-events: none;
    color: #333; /* Adjust to your color scheme */
    font-size: 0.6rem; /* Adjust the size of the arrow if needed */
    transform: translateY(-50%);
}

/* Ensuring a smooth transition for the dropdown */
.elegant-dropdown:hover {
    background-color: #ffffff; /* White background on hover */
    border-color: #007bff; /* Light blue border color */
}

/* Styling options */
.elegant-dropdown option {
    padding: 3px; /* Adjusted padding for a smaller height */
    font-size: 0.7rem; /* Set to 0.8rem for the options */
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
    .elegant-dropdown {
        font-size: 0.8rem; /* Increase font size slightly for mobile readability */
        padding: 8px; /* Add some padding for comfortable touch targets on mobile */
    }
    .dropdown-container::after {
        right: 10px; /* Adjust arrow position to fit mobile screens better */
    }
}