/**
 * Cross-browser select dropdown fixes 
 */

/* Ensure select elements appear correctly across all browsers */
select.form-select {
  -webkit-appearance: menulist !important; /* For Safari */
  -moz-appearance: menulist !important; /* For Firefox */
  appearance: menulist !important; /* Standard syntax */
  background-image: none !important; /* Remove any custom background images */
  padding-right: 20px !important; /* Provide space for dropdown arrow */
  height: auto !important; /* Let the browser determine the appropriate height */
  min-height: 38px; /* Minimum height for easier clicking */
}

/* Fix for Safari/Chrome where select elements might not expand properly */
select.form-select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
}

/* Ensure select dropdown menus appear in front of other elements */
select.form-select option {
  background-color: #ffffff;
  color: #111827;
  padding: 8px;
}

/* Fix for iOS devices where dropdowns might have different styling */
@supports (-webkit-touch-callout: none) {
  select.form-select {
    font-size: 16px !important; /* Prevents zoom on focus in iOS */
  }
}