/* select.css */

/* 1. Style the <select> elements to match the input fields */
#registration-form select {
    background-color: rgba(255, 255, 255, 0.2); /* Tailwind's bg-white bg-opacity-20 */
    color: white; /* Tailwind's text-white */
    border: none;
    padding-right: 2.5rem; /* Space for the custom arrow */
    appearance: none; /* Remove default styling */
    -webkit-appearance: none; /* Remove default styling in Safari */
    -moz-appearance: none; /* Remove default styling in Firefox */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 20 20'%3E%3Cpath d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.25 8.27a.75.75 0 01-.02-1.06z' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1em 1em;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 2. Style the <select> element on focus */
#registration-form select:focus {
    background-color: rgba(255, 255, 255, 0.3); /* Slightly darker background on focus */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.5); /* Tailwind's focus:ring-blue-500 with opacity */
}

/* 3. Style the <option> elements */
/* Note: Limited support across browsers */
/* These styles may not work consistently */
#registration-form select option {
    background-color: #374151; /* Tailwind's gray-700 */
    color: white;
}

/* 4. Attempt to style <option> on hover */
/* Note: This may not work in many browsers */
#registration-form select option:hover {
    background-color: #4b5563; /* Tailwind's gray-600 */
    color: white;
}

/* 5. Additional styles to ensure consistency */
#registration-form select::-ms-expand {
    display: none; /* Remove the default arrow in IE and Edge */
}

/* 6. Responsive adjustments if necessary */
/* Adjust padding or other properties for smaller screens */
@media (max-width: 640px) {
    #registration-form select {
        padding-right: 2rem; /* Adjust padding for smaller screens */
    }
}