/* radio button */
.option-accent:has(input[type="radio"]:checked) {
  background-color: #fbf8f3;
}

.option-blue:has(input[type="radio"]:checked) {
  background-color: #e8f2f8;
}
.option-blue:has(input[type="radio"]:checked) svg path {
  stroke: #26b7ff;
}
.option-blue:hover svg path {
  stroke: #26b7ff;
}
.custom-checkbox {
  border: 1px solid #e1e3e6;
  background: #fff;
  padding: 16px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: block;
  user-select: none;
  position: relative;
  width: fit-content;
}
.select2-selection__arrow {
  display: none;
}
/* Hide the actual checkbox input */
.custom-checkbox input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.custom-checkbox:hover {
  background: #dcecf5;
  border-color: #b9d9eb;
}
/* Change parent label style when checkbox inside is checked */
.custom-checkbox:has(input[type="checkbox"]:checked) {
  background: #dcecf5;
  border-color: #b9d9eb;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

/* Container (the visible select box) */
.select2-container .select2-selection--single {
  height: auto;
}
.select2-container--default .select2-selection--single {
  border: 1px solid #ced0d5;
  border-radius: 8px !important;
}

/* Error state for Select2 fields */
.select2-container--default .select2-selection--single.border-orange-700 {
  border: 1px solid #97523d !important;
}

.select2-container--default .select2-selection--single.border-neutral-200 {
  border: 1px solid #e5e5e5 !important;
}
.select2-container {
  display: block;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #000;
  font-size: 14px;
  line-height: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 12px;
}
.select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  top: 12px;
  right: 12px;
}
.select2-dropdown {
  top: 28px;
  border-color: #ced0d5 !important;
}
.select2-container--default .select2-results > .select2-results__options {
  padding: 12px;
  @apply divide-y;
}
.select2-results__option {
  padding: 16px;
  border-radius: 8px;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  margin-bottom: 16px;
}
.select2-results__option:last-child {
  margin-bottom: 0;
}
.select2-container--default .select2-results__option--selected {
  background-color: #e4e6de;
}
.select2-container--default
  .select2-results__option--highlighted.select2-results__option--selectable {
  color: #000;
  background-color: #e4e6de;
}

.select2-container--default .select2-selection--multiple {
  border: 1px solid #ced0d5;
  padding-top: 9px;
  padding-left: 7px;
  padding-right: 7px;
  padding-bottom: 12px;
  border-radius: 8px;
}

/* Error state for Select2 multiple fields */
.select2-container--default .select2-selection--multiple.border-orange-700 {
  border: 1px solid #97523d !important;
}

.select2-container--default .select2-selection--multiple.border-neutral-200 {
  border: 1px solid #e5e5e5 !important;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__display {
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #000000;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background-color: #e4e6de;
  border: 1px solid #e1e3e6;
  padding: 11px 16px;
  border-radius: 8px;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove {
  border-right: 1px solid #e1e3e6;
  display: none;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__display {
  padding: 0;
}

.select2-container .select2-search--inline .select2-search__field {
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
}
.select2-container--default.select2-container--focus
  .select2-selection--multiple {
  border-color: #ced0d5;
}
/* date picker css */
.ui-widget-header {
  background: transparent;
  border: 0px;
}
.ui-widget.ui-widget-content {
  background: #fff;
  box-shadow: 0px 5.33px 15.98px 0px #00000014;
  border: 0px;
  padding: 20px 20px;
  border-radius: 24px;
  width: max-content;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border-radius: 50px;
}
.ui-datepicker td span,
.ui-datepicker td a {
  text-align: center;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 0;
  background: transparent;
}
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 0;
  background: #97523d;
  color: #fff;
}
.ui-datepicker td span,
.ui-datepicker td a {
  padding: 0;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  background: #97523D !important; /* Changed to orange color for selected date */
  color: #ffffff !important; /* White text for better contrast */
}
.ui-state-hover {
  background: #97523D !important; /* Changed to orange color for hover state */
  color: #fff !important;
}
.ui-datepicker .ui-datepicker-next {
  background: transparent !important;
  border: 0px !important;
}
.ui-datepicker .ui-datepicker-prev {
  background: transparent !important;
  border: 0px !important;
}
.ui-datepicker .ui-datepicker-next-hover {
  right: 2px !important;
}
.ui-datepicker th {
  color: #808080;
  font-weight: 400;
}

.ui-datepicker .unavailable-date {
  /* background-color: #f3f4f6 !important; */
  color: #9ca3af !important;
  border-radius: 50%;
}


@media only screen and (max-width: 600px) {
  .ui-widget.ui-widget-content {
    padding: 20px 0px;
    width: max-content;
    margin: 0 auto;
  }
  .ui-datepicker td span,
  .ui-datepicker td a {
    width: 40px;
    height: 40px;
  }
}

/* Custom styling for enabled dates in datepicker */
.ui-datepicker td.available-date a {
  background-color: transparent !important; /* Grey background */
  color: #000000 !important; /* Black text */
  border-radius: 50px;
  transition: all 0.2s ease;
}

.ui-datepicker td.available-date a:hover {
  background-color: #97523D !important; /* Darker grey on hover */
  color: #000000 !important; /* Keep black text on hover */
}

.ui-datepicker td.available-date a:focus {
  background-color: transparent !important; /* Darker grey on focus */
  color: #000000 !important; /* Keep black text on focus */
}

/* Styling for unavailable dates (keep existing disabled appearance) */
.ui-datepicker td.unavailable-date a {
  background-color: transparent !important; /* Grey background for unavailable dates */
  color: #000000 !important; /* Black text for unavailable dates */
  /* cursor: not-allowed;
  opacity: 0.6; */
}

.ui-datepicker td.unavailable-date a:hover {
  background-color: #97523D !important; /* Darker grey on hover */
  color: #fff !important; /* Keep black text on hover */
   /* Slightly less faded on hover */
}

/* Styling for selected/active date */
.ui-datepicker td.available-date a.ui-state-active,
.ui-datepicker td.available-date a.ui-state-hover,
.ui-datepicker td.available-date a:active,
.ui-datepicker td.available-date a:focus {
  background-color: #97523D !important; /* Orange color for selected/active date */
  color: #ffffff !important; /* White text for better contrast */
  border-radius: 50px;
}

/* Override any existing active state styling */
.ui-datepicker td a.ui-state-active,
.ui-datepicker td a.ui-state-hover {
  background-color: #97523D !important;
  color: #ffffff !important;
}