/**
 * Custom Form Elements CSS
 * Styled to match the Baby Sleep Hire website design
 */

/* Custom Radio Buttons */
input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #D1D5DB !important;  /* Light gray border for unselected */
  border-radius: 50% !important;
  outline: none !important;
  margin-right: 8px !important;
  position: relative !important;
  cursor: pointer !important;
  vertical-align: middle !important;
  transition: all 0.2s ease !important;
  background-color: #fff !important;
}

input[type="radio"]:checked {
  background-color: #8DA57A !important;  /* Olive green background when selected */
  border-color: #8DA57A !important;      /* Olive green border when selected */
}

input[type="radio"]:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background-color: #fff !important;  /* White dot in center */
}

input[type="radio"]:hover {
  border-color: #8DA57A !important;  /* Olive green on hover */
}

input[type="radio"]:focus {
  box-shadow: 0 0 0 3px rgba(141, 165, 122, 0.2) !important;  /* Olive green focus ring */
  outline: none !important;
  border-color: #8DA57A !important;
}

/* Override any focus styles that might be causing the blue outline */
input[type="radio"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.focus\:ring-olive:focus {
  --tw-ring-opacity: 0 !important;
  --tw-ring-color: transparent !important;
  box-shadow: none !important;
}

/* Radio button labels */
.radio-label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 1rem;
  color: #5F4339;
  cursor: pointer;
}

/* Radio button group */
.radio-group {
  margin-bottom: 20px;
}

/* Custom Checkboxes */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #8D6E63;
  border-radius: 4px;
  outline: none;
  margin-right: 8px;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  transition: all 0.2s ease;
}

input[type="checkbox"]:checked {
  background-color: #8D6E63;
  border-color: #8D6E63;
}

input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

input[type="checkbox"]:hover {
  border-color: #6B9080;
}

input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px rgba(107, 144, 128, 0.3);
}

/* Checkbox labels */
.checkbox-label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 1rem;
  color: #5F4339;
  cursor: pointer;
}

/* Form group styling */
.form-group {
  margin-bottom: 20px;
}

/* Form label styling */
.form-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: #5F4339;
}

/* Required field indicator */
.required-field::after {
  content: "*";
  color: #8D6E63;
  margin-left: 4px;
}

/* Custom Select/Dropdown Styling */
select {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238DA57A' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 12px !important;
  padding-right: 2.5rem !important;
  cursor: pointer !important;
}

/* Mobile dropdown arrow positioning */
@media (max-width: 768px) {
  select {
    background-position: right 0.75rem center !important;
    padding-right: 2.25rem !important;
  }
}

select:hover {
  border-color: #8DA57A !important;
}

select:focus {
  border-color: #8DA57A !important;
  box-shadow: 0 0 0 3px rgba(141, 165, 122, 0.2) !important;
  outline: none !important;
}

/* Disabled select */
select:disabled {
  background-color: #F5F5F5 !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

/* Dropdown option hover styling - More specific selectors */
select option:hover,
select option:checked,
select option:focus,
select option[selected] {
  background-color: #8DA57A !important;
  background: #8DA57A !important;
  color: white !important;
}

/* Force override for all browsers */
select option {
  background-color: white;
  color: #5F4339;
}

select option:hover {
  background-color: #8DA57A !important;
  background: #8DA57A !important;
  color: white !important;
}

/* Webkit specific (Chrome, Safari) */
select:focus option:checked {
  background: #8DA57A !important;
  background-color: #8DA57A !important;
  color: white !important;
}

/* Firefox specific */
@-moz-document url-prefix() {
  select option:hover {
    background-color: #8DA57A !important;
    color: white !important;
  }
  
  select option:checked {
    background-color: #8DA57A !important;
    color: white !important;
  }
}

/* Additional override for dropdown list background */
select[multiple] option:hover,
select[size] option:hover {
  background-color: #8DA57A !important;
  background: #8DA57A !important;
  color: white !important;
}