/******************** JetSmartFilters Styles ********************/

/* 1. Search Filter */
/* 2. Select Filter */
/* 3. Sorting Filter */
/* 4. Star Rating Filter */
/* 5. Checkboxes */
/* 6. Tags */
/* 7. Visual Radio */
/* 8. Alphabet */
/* 9. Date Period */
/* 10. Date Range */
/* 11. Radio */
/* 12. Range Filter */
/* 13. Range Slider */
/* 14. Apply Filter Button */
/* 15. Pagination */

/********** Global Styling **********/

.jet-filter-label,
.jet-sorting-label {
  margin-bottom: 0.5rem !important;
}

.jet-filter {
  --tabindex-color: var(--wp--preset--color--accent) !important;
  --tabindex-shadow-color: var(--wp--preset--color--accent) !important;
}

.jet-search-filter__input[tabindex]:focus-visible,
.jet-search-filter button[tabindex]:focus-visible {
  outline: 0px !important;
  -webkit-box-shadow: 0 0 0 1px var(--wp--preset--color--accent) !important;
  box-shadow: 0 0 0 1px var(--wp--preset--color--accent) !important;
}

label[tabindex]:focus-visible,
.jet-active-filter[tabindex]:focus-visible,
.jet-active-tag[tabindex]:focus-visible,
.jet-filters-pagination__item[tabindex]:focus-visible,
.jet-filters-pagination__load-more[tabindex]:focus-visible,
.jet-select__control[tabindex]:focus-visible,
.jet-sorting-select[tabindex]:focus-visible,
.jet-filter-items-dropdown__label[tabindex]:focus-visible,
.jet-filter-items-moreless[tabindex]:focus-visible,
.apply-filters__button[tabindex]:focus-visible,
.jet-remove-all-filters__button[tabindex]:focus-visible {
  outline: 0px !important;
  -webkit-box-shadow: 0 0 0 1px var(--wp--preset--color--accent) !important;
  box-shadow: 0 0 0 1px var(--wp--preset--color--accent) !important;
}

/* Adds global style to the preloader */
.jsf_provider-preloader {
  color: var(--wp--preset--color--accent) !important;
  background-color: var(--wp--preset--color--base) !important;
  border-color: var(--wp--preset--color--borderline) !important;
  border-width: 1px !important;
  border-style: solid !important;
}

/* Accessability - Tab Index */

label[tabindex]:focus-visible,
.jet-active-filter[tabindex]:focus-visible,
.jet-active-tag[tabindex]:focus-visible,
.jet-filters-pagination__item[tabindex]:focus-visible,
.jet-filters-pagination__load-more[tabindex]:focus-visible,
.jet-select__control[tabindex]:focus-visible,
.jet-sorting-select[tabindex]:focus-visible,
.jet-filter-items-dropdown__label[tabindex]:focus-visible,
.jet-filter-items-moreless[tabindex]:focus-visible,
.apply-filters__button[tabindex]:focus-visible,
.jet-remove-all-filters__button[tabindex]:focus-visible {
  outline: 1px solid var(--tabindex-color);
  -webkit-box-shadow: 0px 0px 0px 3px var(--tabindex-shadow-color);
  box-shadow: 0px 0px 0px 3px var(--tabindex-shadow-color);
}

.jet-range__slider
  .jet-range__slider__input[tabindex]:focus-visible::-webkit-slider-thumb {
  outline: 1px solid var(--tabindex-color);
  -webkit-box-shadow: 0px 0px 0px 3px var(--tabindex-shadow-color);
  box-shadow: 0px 0px 0px 3px var(--tabindex-shadow-color);
}

.jet-range__slider
  .jet-range__slider__input[tabindex]:focus-visible::-moz-range-thumb {
  outline: 1px solid var(--tabindex-color);
  box-shadow: 0px 0px 0px 3px var(--tabindex-shadow-color);
}

.jet-range__slider
  .jet-range__slider__input[tabindex]:focus-visible::-ms-thumb {
  outline: 1px solid var(--tabindex-color);
  box-shadow: 0px 0px 0px 3px var(--tabindex-shadow-color);
}

.jet-range__inputs__group input[tabindex]:focus-visible {
  outline: 1px solid var(--tabindex-color);
  -webkit-box-shadow: 0px 0px 0px 3px var(--tabindex-shadow-color);
  box-shadow: 0px 0px 0px 3px var(--tabindex-shadow-color);
}

.jet-date-range input[tabindex]:focus-visible,
.jet-date-range button[tabindex]:focus-visible {
  outline: 1px solid var(--tabindex-color);
  -webkit-box-shadow: 0px 0px 0px 3px var(--tabindex-shadow-color);
  box-shadow: 0px 0px 0px 3px var(--tabindex-shadow-color);
}

.jet-date-period__datepicker-button[tabindex]:focus-visible,
.jet-date-period__prev[tabindex]:focus-visible,
.jet-date-period__next[tabindex]:focus-visible {
  outline: 1px solid var(--tabindex-color);
  -webkit-box-shadow: 0px 0px 0px 3px var(--tabindex-shadow-color);
  box-shadow: 0px 0px 0px 3px var(--tabindex-shadow-color);
}

.jet-search-filter__input[tabindex]:focus-visible,
.jet-search-filter button[tabindex]:focus-visible {
  outline: 1px solid var(--tabindex-color);
  -webkit-box-shadow: 0px 0px 0px 3px var(--tabindex-shadow-color);
  box-shadow: 0px 0px 0px 3px var(--tabindex-shadow-color);
}

.jet-filter-items-scroll .jet-filter-row [tabindex] {
  margin-left: 3px;
}

.jet-filter-items-scroll .jet-filter-row:first-child [tabindex] {
  margin-top: 3px;
}

.jet-filter-items-scroll .jet-filter-row:last-child [tabindex] {
  margin-bottom: 3px;
}

/********** 1. Search Filter **********/
.jet-search-filter__input {
  font-size: var(--wp--preset--font-size--medium) !important;
  font-family: inherit;
}

/********** 2. Select Filter **********/

/* Adds the bootstrap based select function to Jet Smart Filters Select Facet */
select {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 400;
  line-height: 1.5;
  color: var(--wp--preset--color--contrast);
  background-color: var(--wp--preset--color--base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid var(--wp--preset--color--borderline);
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select:focus {
  border-color: var(--wp--preset--color--accent);
}

/********** 3. Sorting Filter **********/

/* Styled via select above */

/********** 4. Star Rating Filter **********/

.jet-rating-stars__fields {
  display: flex;
  gap: 5px;
  flex-direction: row-reverse;
  cursor: pointer !important;
}

.jet-rating-star__icon,
.jet-rating-star__label {
  height: 28px !important;
}

/* Default unselected star color */
.jet-rating .jet-rating-star__label {
  color: var(
    --wp--preset--color--base-2
  ) !important; /* Use a global color variable for unselected stars */
}

/* Hover state for stars (highlight the hovered star and all previous stars) */
.jet-rating input:not(.is-checked) ~ .jet-rating-star__label:hover,
.jet-rating
  input:not(.is-checked)
  ~ .jet-rating-star__label:hover
  ~ .jet-rating-star__label {
  color: var(
    --wp--preset--color--accent
  ) !important; /* Accent color on hover */
}

/* Selected stars (when a star is selected, highlight it and all previous stars) */
.jet-rating input.is-checked ~ .jet-rating-star__label,
.jet-rating
  input.is-checked
  ~ .jet-rating-star__label
  ~ .jet-rating-star__label {
  color: var(
    --wp--preset--color--accent
  ) !important; /* Use another global color variable for selected stars */
}

/* Optional: Smooth transition for color changes */
.jet-rating-star__label {
  transition: color 0.3s ease !important; /* Smooth transition effect for color changes */
}

/********** 5. Checkboxes ************/

/* When the checkbox is checked, change the background of the decorator */
.jet-checkboxes-list
  .jet-checkboxes-list__item
  .jet-checkboxes-list__input:checked
  + .jet-checkboxes-list__button
  .jet-checkboxes-list__decorator {
  background: var(
    --wp--preset--color--accent
  ) !important; /* Accent color when checked */
  border-color: var(
    --wp--preset--color--accent
  ) !important; /* Optional: change the border color too */
}

.jet-checkboxes-list
  .jet-checkboxes-list__item
  .jet-checkboxes-list__input:checked
  + .jet-checkboxes-list__button
  .jet-checkboxes-list__decorator,
.jet-radio-list
  .jet-radio-list__item
  .jet-radio-list__input:checked
  + .jet-radio-list__button
  .jet-radio-list__decorator {
  background: var(--wp--preset--color--accent) !important;
}

/* Default decorator styling */
.jet-checkboxes-list .jet-checkboxes-list__item .jet-checkboxes-list__decorator,
.jet-radio-list__decorator {
  margin-top: 1px !important;
  position: relative;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  border: 1px solid var(--wp--preset--color--borderline) !important;
  border-radius: 4px !important;
  margin-right: 10px !important;
  background-color: var(
    --wp--preset--color--base
  ) !important; /* Default background */
}

.jet-checkboxes-list-wrapper {
  gap: 5px;
  display: flex;
  flex-direction: column;
}

/* Fixes the checkbox padding issue so they are all the same */

.jet-checkboxes-list__row {
  margin: 3px;
  margin-top: 2px !important;
  margin-bottom: 0px !important;
  padding-top: 0px !important;
  line-height: 16px !important;
}

/********** 6. Tags **********/

.jet-filter + .jet-filter {
  margin-top: 0px !important;
}

/* Styling for remove filters button */
.jet-remove-all-filters__button {
  color: #e74c3c;
  font-size: 12px !important;
  font-weight: 600;
  background-color: rgba(231, 76, 60, 0.07);
  border-radius: 4px;
  padding-top: 1px;
  padding-bottom: 1px;
  border-color: #e74c3c;
  border-style: solid;
  border-width: 1px;
  margin-top: 10px;
  margin-bottom: 0px;
  cursor: pointer;
}

/* Styles Jet active filter */
.jet-active-filter,
.jet-active-tag {
  font-size: 12px;
  font-weight: 600;
  color: #2b6e40;
  background-color: rgba(78, 138, 93, 0.2);
  border-color: rgba(43, 110, 64, 0.22);
  border-style: solid;
  border-width: 1px;
  border-radius: 4px;
  padding-left: 6px;
  padding-right: 20px !important;
  padding-top: 1px;
  padding-bottom: 1px;
  margin-right: 5px;
  margin-top: 5px !important;
  margin-bottom: 0px !important;
}

/*  Styles Jet active filter  remove */
.jet-active-filter__remove,
.jet-active-tag__remove {
  font-size: 14px;
  color: #e74c3c;
  padding-top: 2px;
  right: 5px !important;
}

/* Styles the remove button on ajax search */

.jet-smart-filters-search .jet-search-filter__input-clear {
  margin-top: -18px !important;
}

/* Styles Jet smart filters active */
.jet-smart-filters-active {
  padding-top: 0px;
}

/* Adds the bootstrap based search function to Jet Smart Filters Search Facet*/
.jet-search-filter__input {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid var(--wp--preset--color--borderline);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/********** 8. Alphabet **********/

.jet-alphabet-list__button {
  display: block;
  padding: 5px 8px;
  border: 1px solid var(--wp--preset--color--borderline) !important;
  background-color: var(--wp--preset--color--base-2) !important;
  border-radius: 4px !important;
  text-align: center;
  transition: all 0.3s ease;
  min-width: 22px;
}

.jet-alphabet-list__button:hover {
  background-color: var(--wp--preset--color--base-3) !important;
}

/********** 9. Date Period **********/

.jet-date-period__datepicker-button {
  background-color: var(--wp--preset--color--base) !important;
  border-radius: 4px;
  border-color: var(--wp--preset--color--borderline) !important;
  color: var(--wp--preset--color--contrast) !important;
  gap: 10px !important;
  padding: 0.375rem 0.75rem !important;
}

.jet-date-period__prev,
.jet-date-period__next {
  color: var(--wp--preset--color--contrast) !important;
  border: 1px solid var(--wp--preset--color--borderline) !important;
  background-color: var(--wp--preset--color--base--2) !important;
}

.jet-date-period__prev:hover,
.jet-date-period__next:hover {
  background-color: var(--wp--preset--color--base--2) !important;
}

.jet-date-period__prev svg,
.jet-date-period__next svg {
  width: 0.7em !important;
  height: 0.7em !important;
}

/* Date Picker */

.datepicker {
  margin-top: 10px;
  background: var(--wp--preset--color--base) !important;
  padding: 5px;
  border: 1px solid var(--wp--preset--color--borderline) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  font-family: inherit !important;
  color: var(--wp--preset--color--contrast) !important;
  width: 250px;
  position: absolute;
  left: -100000px;
  opacity: 0;
  z-index: 100;
}

.datepicker--day-name {
  color: var(--wp--preset--color--accent) !important;
  font-weight: 600;
}

.datepicker--nav-action:hover {
  background: var(--wp--preset--color--base-3) !important;
}

.datepicker--cell-day.-other-month-,
.datepicker--cell-year.-other-decade- {
  color: var(--wp--preset--color--base-2) !important;
}

.datepicker--cell-day.-other-month-:hover,
.datepicker--cell-year.-other-decade-:hover {
  color: var(--wp--preset--color--base--3) !important;
}

.-disabled-.-focus-.datepicker--cell-day.-other-month-,
.-disabled-.-focus-.datepicker--cell-year.-other-decade- {
  color: var(--wp--preset--color--base-3) !important;
}

.-selected-.datepicker--cell-day.-other-month-,
.-selected-.datepicker--cell-year.-other-decade- {
  color: white !important;
  background: var(--wp--preset--color--accent) !important;
}

.-selected-.-focus-.datepicker--cell-day.-other-month-,
.-selected-.-focus-.datepicker--cell-year.-other-decade- {
  background: var(--wp--preset--color--accent) !important;
}

.-in-range-.datepicker--cell-day.-other-month-,
.-in-range-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.1);
  color: var(--wp--preset--color--base-2) !important;
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-,
.-in-range-.-focus-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.2);
}

.datepicker--cell.-focus- {
  background: var(--wp--preset--color--base-3) !important;
}

.datepicker--cell.-current- {
  color: var(--wp--preset--color--accent) !important;
}

.datepicker--cell.-current-.-focus- {
  color: #4a4a4a;
}

.datepicker--cell.-current-.-in-range- {
  color: var(--wp--preset--color--accent) !important;
}

.datepicker--cell.-in-range- {
  background: rgba(92, 196, 239, 0.1);
  color: #4a4a4a;
}

.datepicker--cell.-in-range-.-focus- {
  background-color: rgba(92, 196, 239, 0.2);
}

.datepicker--cell.-disabled- {
  color: #aeaeae;
}

.datepicker--cell.-disabled-.-focus- {
  color: #aeaeae;
}

.datepicker--cell.-disabled-.-in-range- {
  color: #a1a1a1;
}

.datepicker--cell.-disabled-.-current-.-focus- {
  color: #aeaeae;
}

.datepicker--cell.-range-from- {
  background-color: rgba(92, 196, 239, 0.1);
}

.datepicker--cell.-range-to- {
  background-color: rgba(92, 196, 239, 0.1);
}

.datepicker--cell.-selected- {
  color: white !important;
  background: var(--wp--preset--color--accent) !important;
}

.datepicker--cell.-range-from-,
.datepicker--cell.-range-from-.-focus-,
.datepicker--cell.-range-to-,
.datepicker--cell.-range-to-.-focus-,
.datepicker--cell.-selected-.-current- {
  color: white !important;
  background: var(--wp--preset--color--accent) !important;
}

.datepicker--cell.-selected-.-focus- {
  background: var(--wp--preset--color--accent) !important;
}

.datepicker--cell-day.-other-month-,
.datepicker--cell-year.-other-decade- {
  color: var(--wp--preset--color--base-2) !important;
}

.datepicker--cell-day.-other-month-:hover,
.datepicker--cell-year.-other-decade-:hover {
  color: var(--wp--preset--color--base--3) !important;
}

.-disabled-.-focus-.datepicker--cell-day.-other-month-,
.-disabled-.-focus-.datepicker--cell-year.-other-decade- {
  color: var(--wp--preset--color--base-2) !important;
}

.-selected-.datepicker--cell-day.-other-month-,
.-selected-.datepicker--cell-year.-other-decade-,
.datepicker--cell-day.-other-month-.-range-from-,
.datepicker--cell-day.-other-month-.-range-from-.-focus-,
.datepicker--cell-day.-other-month-.-range-to-,
.datepicker--cell-day.-other-month-.-range-to-.-focus-,
.datepicker--cell-year.-other-decade-.-range-from-,
.datepicker--cell-year.-other-decade-.-range-from-.-focus-,
.datepicker--cell-year.-other-decade-.-range-to-,
.datepicker--cell-year.-other-decade-.-range-to-.-focus- {
  color: white !important;
  background: var(--wp--preset--color--accent) !important;
}

.-selected-.-focus-.datepicker--cell-day.-other-month-,
.-selected-.-focus-.datepicker--cell-year.-other-decade- {
  background: var(--wp--preset--color--accent) !important;
}

.-in-range-.datepicker--cell-day.-other-month-,
.-in-range-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.1);
  color: var(--wp--preset--color--base-2) !important;
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-,
.-in-range-.-focus-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.2);
}

.datepicker-inline .datepicker {
  border-color: var(--wp--preset--color--borderline) !important;
}

.datepicker--cell-day.-other-month-,
.datepicker--cell-year.-other-decade- {
  color: var(--wp--preset--color--base-2) !important;
}

.datepicker--cell-day.-other-month-:hover,
.datepicker--cell-year.-other-decade-:hover {
  color: var(--wp--preset--color--base--3) !important;
}

.-disabled-.-focus-.datepicker--cell-day.-other-month-,
.-disabled-.-focus-.datepicker--cell-year.-other-decade- {
  color: var(--wp--preset--color--base-3) !important;
}

.-selected-.datepicker--cell-day.-other-month-,
.-selected-.datepicker--cell-year.-other-decade- {
  color: var(--wp--preset--color--base--contrast) !important;
  background: var(--wp--preset--color--accent) !important;
}

.-selected-.-focus-.datepicker--cell-day.-other-month-,
.-selected-.-focus-.datepicker--cell-year.-other-decade- {
  background: var(--wp--preset--color--accent) !important;
}

.-in-range-.datepicker--cell-day.-other-month-,
.-in-range-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.1);
  color: #ccc;
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-,
.-in-range-.-focus-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.2);
}

.datepicker--cell-day.-other-month-:empty,
.datepicker--cell-year.-other-decade-:empty {
  background: 0 0;
  border: none;
}

.datepicker--time {
  border-top: 1px solid var(--wp--preset--color--borderline) !important;
}

.datepicker--time-current-hours,
.datepicker--time-current-minutes {
  font-size: 16px !important;
  font-family: inherit !important;
}

.datepicker--time-current-hours:after,
.datepicker--time-current-minutes:after {
  background: var(--wp--preset--color--base-2) !important;
}

.datepicker--time-current-ampm {
  color: #9c9c9c;
}

.datepicker--time-row {
  background: linear-gradient(to right, #dedede, #dedede) left 50%/100% 1px
    no-repeat;
}

.datepicker--time-row input[type='range']:hover::-webkit-slider-thumb {
  border-color: var(--wp--preset--color--borderline) !important;
}

.datepicker--time-row input[type='range']:hover::-moz-range-thumb {
  border-color: var(--wp--preset--color--borderline) !important;
}

.datepicker--time-row input[type='range']:hover::-ms-thumb {
  border-color: var(--wp--preset--color--borderline) !important;
}

.datepicker--time-row input[type='range']:focus::-webkit-slider-thumb {
  background: var(--wp--preset--color--accent) !important;
  border-color: var(--wp--preset--color--accent) !important;
}

.datepicker--time-row input[type='range']:focus::-moz-range-thumb {
  background: var(--wp--preset--color--accent) !important;
  border-color: var(--wp--preset--color--accent) !important;
}

.datepicker--time-row input[type='range']:focus::-ms-thumb {
  background: var(--wp--preset--color--accent) !important;
  border-color: var(--wp--preset--color--accent) !important;
}

.datepicker--time-row input[type='range']::-webkit-slider-thumb {
  border: 1px solid var(--wp--preset--color--borderline) !important;
  background: var(--wp--preset--color--base--contrast) !important;
}

.datepicker--time-row input[type='range']::-moz-range-thumb {
  border: 1px solid var(--wp--preset--color--borderline) !important;
  background: var(--wp--preset--color--base--contrast) !important;
}

.datepicker--time-row input[type='range']::-ms-thumb {
  border: 1px solid var(--wp--preset--color--borderline) !important;
  background: var(--wp--preset--color--base--contrast) !important;
}

.datepicker--time-icon {
  color: var(--wp--preset--color--contrast) !important;
}

.datepicker--cell-day.-other-month-,
.datepicker--cell-year.-other-decade- {
  color: var(--wp--preset--color--base-2) !important;
}

.datepicker--cell-day.-other-month-:hover,
.datepicker--cell-year.-other-decade-:hover {
  color: var(--wp--preset--color--base--3) !important;
}

.-disabled-.-focus-.datepicker--cell-day.-other-month-,
.-disabled-.-focus-.datepicker--cell-year.-other-decade- {
  color: var(--wp--preset--color--base-3) !important;
}

.-selected-.datepicker--cell-day.-other-month-,
.-selected-.datepicker--cell-year.-other-decade- {
  color: var(--wp--preset--color--base--contrast) !important;
  background: var(--wp--preset--color--accent) !important;
}

.-selected-.-focus-.datepicker--cell-day.-other-month-,
.-selected-.-focus-.datepicker--cell-year.-other-decade- {
  background: var(--wp--preset--color--accent) !important;
}

.-in-range-.datepicker--cell-day.-other-month-,
.-in-range-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.1);
  color: var(--wp--preset--color--contrast) !important;
}

.-in-range-.-focus-.datepicker--cell-day.-other-month-,
.-in-range-.-focus-.datepicker--cell-year.-other-decade- {
  background-color: rgba(92, 196, 239, 0.2);
}

/********** 10. Date Range **********/

.jet-date-range__inputs {
  gap: 10px;
}

.jet-date-range__from,
.jet-date-range__to {
  height: 38px;
  font-size: var(--wp--preset--font-size--medium) !important;
  font-family: inherit;
}

/* UI Datepicker */

.ui-datepicker {
  margin-top: 10px;
  width: 250px !important;
  padding: 5px !important;
  display: none;
  background: var(--wp--preset--color--base) !important;
  border-radius: 4px;
  border-style: solid;
  border-color: var(--wp--preset--color--borderline) !important;
  border-width: 1px !important;
}

.ui-datepicker table {
  width: 100%;
  font-size: 14px !important;
}

.ui-datepicker .ui-datepicker-prev > span {
  border-width: 7.5px 7.5px 7.5px 0;
  border-right-color: var(--wp--preset--color--borderline) !important;
}
.ui-datepicker .ui-datepicker-prev:hover > span {
  border-right-color: var(--wp--preset--color--borderline) !important;
}

.ui-datepicker .ui-datepicker-prev:hover > span {
  border-right-color: var(--wp--preset--color--borderline) !important;
}

.ui-datepicker .ui-datepicker-next > span {
  border-width: 7.5px 0 7.5px 7.5px;
  border-left-color: var(--wp--preset--color--borderline) !important;
}

.ui-datepicker .ui-datepicker-next:hover > span {
  border-left-color: var(--wp--preset--color--borderline) !important;
}

.ui-state-default {
  color: var(--wp--preset--color--base--contrast) !important;
  padding: 5px 0px 5px 0px !important;
  border-radius: 4px;
}

.ui-state-default:hover,
.ui-state-default:focus {
  background-color: var(--wp--preset--color--base-3) !important;
}

.ui-datepicker.jet-date-period-week-type tbody tr:hover td a {
  color: #212121;
  background: var(--wp--preset--color--accent) !important;
}

.ui-state-active {
  background-color: var(--wp--preset--color--accent) !important;
  color: white !important;
}

.ui-datepicker-title {
  font-size: 14px !important;
}

/********** 13. Range Slider **********/

.jet-range__slider__track {
  color: var(--wp--preset--color--base-2) !important;
  background: var(--wp--preset--color--accent) !important;
}

.jet-range__inputs__group {
  border-radius: none !important;
  border: none !important;
}

.jet-range__slider .jet-range__slider__input::-webkit-slider-thumb {
  background-color: var(--wp--preset--color--accent) !important;
}

.jet-range__inputs__group input[min-range],
.jet-range__inputs__group input[max-range] {
  margin: 0px !important;
}

.jet-range__inputs__min,
.jet-range__inputs__max {
  padding: 0.375rem 0.75rem !important; /* Standard padding for text fields */
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--wp--preset--color--contrast) !important;
  background-color: var(--wp--preset--color--base) !important;
  border: 1px solid var(--wp--preset--color--borderline) !important;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.jet-range__inputs__min:hover,
.jet-range__inputs__max:hover {
  color: var(--wp--preset--color--contrast) !important;
  background-color: var(--wp--preset--color--base) !important;
  border-color: var(--wp--preset--color--accent) !important;
}

/********** 14. Apply Filters Button **********/

/* Ensure buttons work well on touch devices */
.apply-filters__button {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: none !important;
  cursor: pointer !important;
}

/* Reset default iOS/Safari styles for the button */
.apply-filters__button {
  -webkit-appearance: none; /* Reset default button styles in iOS */
  appearance: none;
  background: var(--wp--preset--color--accent); /* Ensure background color */
  color: var(--wp--preset--color--base); /* Ensure text color */
  border: none; /* Remove default border */
  padding: 10px 20px; /* Set padding for button */
  border-radius: var(
    --button-border-radius,
    4px
  ); /* Set border radius with fallback */
  cursor: pointer; /* Ensure it's clickable */
  text-decoration: none; /* Remove any underline from text */
  transition: all 0.3s ease-in-out;
}

/* Remove focus outline (blue border) in iOS */
.apply-filters__button:focus,
.apply-filters__button:active {
  outline: none; /* No outline or border on focus */
  box-shadow: none; /* Remove any shadow iOS applies */
}

.apply-filters__button:hover {
  transition: all 0.3s ease-in-out;
  background-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 90%,
    white
  ) !important;
}

/********** 15. Pagination **********/

/* Main pagination wrapper */
.jet-filters-pagination {
  margin-top: var(--wp--preset--spacing--20) !important;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
  border: solid 1px var(--wp--preset--color--borderline);
  border-radius: 4px;
  background-color: var(--wp--preset--color--base);
}

/* Standard pagination items */
.jet-filters-pagination__item {
  background-color: var(--wp--preset--color--base-2);
  color: var(--wp--preset--color--contrast);
  border-radius: 4px;
  border: none;
  font-weight: 500;
  padding: 0.5rem 0.75rem !important;
  margin: 0;
  text-decoration: none;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease-in-out;
  font-size: var(--wp--preset--font-size--small) !important;
  line-height: 1;
  text-align: center;
}

/* Position next/prev buttons */
.jet-filters-pagination__item.prev {
  margin-right: auto;
}

.jet-filters-pagination__item.next {
  margin-left: auto;
}

/* Center the number items */
.jet-filters-pagination__item:not(.prev):not(.next) {
  margin: 0 2px;
}

.jet-filters-pagination__item:hover {
  background-color: var(--wp--preset--color--base-3);
  color: var(--wp--preset--color--contrast);
}

/* Current/active page */
.jet-filters-pagination__current {
  background-color: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--base) !important;
  border-radius: 4px;
  border: none;
  font-weight: 600;
  padding: 0;
  margin: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: none;
}

/* Next/Prev arrows */
.jet-filters-pagination__item.prev-next {
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Focus states */
.jet-filters-pagination__item:focus {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

/* Load More button styling */
.jet-filters-pagination__load-more .jet-filters-pagination__link {
  background-color: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--base) !important;
  border-radius: 4px;
  border: none;
  font-weight: 500;
  padding: 0;
  margin: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 36px;
  transition: background-color 0.2s ease-in-out;
  font-size: var(--wp--preset--font-size--small);
  text-align: center;
}

.jet-filters-pagination__load-more .jet-filters-pagination__link:hover {
  background-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 90%,
    white
  ) !important;
}

/* Mobile responsiveness */
@media only screen and (max-width: 767px) {
  .jet-filters-pagination__numbers {
    display: none;
  }
}
