/* Select2 Custom Styling - Exact match to your form fields */
.select2-container {
  width: 100% !important;
  min-width: 200px !important;
}

.select2-container .select2-selection--single {
  height: 42px !important;
  border-radius: 1rem !important;
  border: 1px solid #7B5B6A !important;
  background-color: white !important;
  transition: all 0.2s !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  padding: 0 !important;
}

.select2-container .select2-selection--single:focus,
.select2-container.select2-container--open .select2-selection--single {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
  outline: none !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  line-height: 42px !important;
  padding-left: 16px !important;
  padding-right: 40px !important;
  color: #000000 !important;
  font-family: 'Poppins', 'Inter', 'Nunito', Arial, sans-serif !important;
  font-size: 18px !important;
}

.select2-container .select2-selection--single .select2-selection__placeholder {
  color: #9CA3AF !important;
}

.select2-container .select2-selection--single .select2-selection__arrow {
  height: 42px !important;
  width: 40px !important;
  border-left: none !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
}

.select2-container .select2-selection--single .select2-selection__arrow b {
  border-color: #7B5B6A transparent transparent transparent !important;
  border-style: solid !important;
  border-width: 5px 4px 0 4px !important;
  height: 0 !important;
  left: 50% !important;
  margin-left: -4px !important;
  margin-top: -2px !important;
  position: absolute !important;
  top: 50% !important;
  width: 0 !important;
}

.select2-container.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #7B5B6A transparent !important;
  border-width: 0 4px 5px 4px !important;
}

.select2-dropdown {
  border: 1px solid #7B5B6A !important;
  border-radius: 1rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  background-color: white !important;
  margin-top: 4px !important;
  max-height: 300px !important;
  overflow-y: auto !important;
}

.select2-results__options {
  border-radius: 1rem !important;
  max-height: 300px !important;
  overflow-y: auto !important;
}

.select2-results__option {
  padding: 8px 16px !important;
  font-family: 'Poppins', 'Inter', 'Nunito', Arial, sans-serif !important;
  font-size: 18px !important;
  color: #374151 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.select2-results__option--highlighted[aria-selected] {
  background-color: #9E406C !important;
  color: white !important;
  border-radius: 0 !important;
}

.select2-results__option[aria-selected="true"] {
  background-color: #F5E8EC !important;
  color: #9E406C !important;
  border-radius: 0 !important;
}

/* Fix for the first and last options to have proper border radius */
.select2-results__options .select2-results__option:first-child {
  border-top-left-radius: 0.75rem !important;
  border-top-right-radius: 0.75rem !important;
}

.select2-results__options .select2-results__option:last-child {
  border-bottom-left-radius: 0.75rem !important;
  border-bottom-right-radius: 0.75rem !important;
}

/* Ensure no gaps between options */
.select2-results__option + .select2-results__option {
  border-top: none !important;
}

.select2-search--dropdown {
  padding: 8px !important;
}

.select2-search--dropdown .select2-search__field {
  border: 1px solid #d1d5db !important;
  border-radius: 0.5rem !important;
  padding: 8px 12px !important;
  font-family: 'Poppins', 'Inter', 'Nunito', Arial, sans-serif !important;
  font-size: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.select2-search--dropdown .select2-search__field:focus {
  outline: none !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}

/* Error state styling - matches your form error styling */
.select2-container.error .select2-selection--single {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

/* Hide clear button (X) */
/* Hide clear button by default for required fields */
.select2-container .select2-selection--single .select2-selection__clear {
  display: none !important;
}

/* Multiselect styling - matches single select styling */
.select2-container .select2-selection--multiple {
  height: auto !important;
  min-height: 42px !important;
  border-radius: 1rem !important;
  border: 1px solid #7B5B6A !important;
  background-color: white !important;
  transition: all 0.2s !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
  padding: 8px 16px !important;
  min-width: 200px !important;
}

.select2-container .select2-selection--multiple:focus,
.select2-container.select2-container--open .select2-selection--multiple {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
  outline: none !important;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.select2-container .select2-selection--multiple .select2-selection__choice {
  background-color: #9E406C !important;
  color: white !important;
  border: none !important;
  border-radius: 0.5rem !important;
  padding: 6px 10px !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-family: 'Poppins', 'Inter', 'Nunito', Arial, sans-serif !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  position: relative !important;
  min-height: 24px !important;
}

.select2-container .select2-selection--multiple .select2-selection__choice__remove {
  color: white !important;
  font-weight: bold !important;
  border: none !important;
  background: none !important;
  font-size: 12px !important;
  line-height: 1 !important;
  margin-left: 0px !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  transition: background-color 0.2s !important;
}

.select2-container .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #F5E8EC !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.select2-container .select2-selection--multiple .select2-search--inline {
  margin: 0 !important;
  padding: 0 !important;
}

.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: 'Poppins', 'Inter', 'Nunito', Arial, sans-serif !important;
  font-size: 18px !important;
  color: #000000 !important;
  background: transparent !important;
  width: 100% !important;
  min-width: 200px !important;
  height: 26px !important;
  line-height: 26px !important;
}

.select2-container .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
  color: #9CA3AF !important;
}

/* Ensure placeholder text is fully visible */
.select2-container .select2-selection--multiple .select2-selection__placeholder {
  color: #9CA3AF !important;
  font-family: 'Poppins', 'Inter', 'Nunito', Arial, sans-serif !important;
  font-size: 18px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 26px !important;
}

/* Error state for multiselect */
.select2-container.error .select2-selection--multiple {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}



/* Native HTML Select Dropdown Styling - Match Select2 */
/* Target all select elements in the profile form */
select,
.profile-form-container select {
  /* Base styling to match Select2 */
  font-family: 'Poppins', 'Inter', 'Nunito', Arial, sans-serif !important;
  font-size: 18px !important;
  color: #000000 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B5B6A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px !important;
  padding-right: 40px !important;
}

/* Advanced styling for dropdown options - using CSS custom properties */
select,
.profile-form-container select {
  /* Set custom properties for option styling */
  --option-bg: white !important;
  --option-color: #374151 !important;
  --option-hover-bg: #9E406C !important;
  --option-hover-color: white !important;
  --option-selected-bg: #F5E8EC !important;
  --option-selected-color: #9E406C !important;
}

/* Style the dropdown options to match Select2 */
select option,
.profile-form-container select option {
  padding: 8px 16px !important;
  font-family: 'Poppins', 'Inter', 'Nunito', Arial, sans-serif !important;
  font-size: 18px !important;
  color: var(--option-color) !important;
  background-color: var(--option-bg) !important;
}

/* Hover state for options - using pseudo-elements */
select option:hover,
select option:focus,
.profile-form-container select option:hover,
.profile-form-container select option:focus {
  background-color: var(--option-hover-bg) !important;
  color: var(--option-hover-color) !important;
}

/* Selected option styling */
select option:checked,
select option:selected,
.profile-form-container select option:checked,
.profile-form-container select option:selected {
  background-color: var(--option-selected-bg) !important;
  color: var(--option-selected-color) !important;
}

/* Focus state for native selects */
select:focus,
.profile-form-container select:focus {
  outline: none !important;
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
}

/* Error state for native selects */
select.error,
.profile-form-container select.error {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2) !important;
}

/* Special handling for country code dropdown (phone field) */
#country_code {
  border-radius: 1rem 0 0 1rem !important;
  border-right: none !important;
}

/* Ensure the styling works for all form selects */
form select,
.profile-form-container form select {
  font-family: 'Poppins', 'Inter', 'Nunito', Arial, sans-serif !important;
  font-size: 18px !important;
  color: #000000 !important;
}

/* Additional styling for better dropdown appearance */
select::-ms-expand,
.profile-form-container select::-ms-expand {
  display: none !important;
}

/* Webkit specific styling for dropdown options */
select::-webkit-listbox,
.profile-form-container select::-webkit-listbox {
  background-color: white !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Firefox specific styling */
select:-moz-focusring,
.profile-form-container select:-moz-focusring {
  color: transparent !important;
  text-shadow: 0 0 0 #000000 !important;
}