/******************** 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;
}

/* Remove all filters — match Apply filters button (accent primary) */
.jet-remove-all-filters__button {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 0.75rem;
  margin-bottom: 0;
  padding: 10px 20px;
  font-size: 1rem !important;
  font-weight: 400;
  line-height: 1.5;
  color: var(--wp--preset--color--base) !important;
  background: var(--wp--preset--color--accent) !important;
  border: none !important;
  border-radius: var(--button-border-radius, 4px);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.jet-remove-all-filters__button:hover {
  background-color: color-mix(
    in srgb,
    var(--wp--preset--color--accent) 90%,
    white
  ) !important;
}

/* Active filter / tag chips — DOM is label → value → remove; reorder like Select2 (remove first) */
.jet-active-filter,
.jet-active-tag {
  cursor: pointer;
  position: relative;
  display: inline-flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.15rem;
  max-width: 100%;
  margin: 0.25rem 0.35rem 0 0 !important;
  padding: 0 0.3rem !important;
  min-height: 1.5rem;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--wp--preset--color--contrast) !important;
  background-color: var(--wp--preset--color--base-2) !important;
  border: 1px solid var(--wp--preset--color--borderline) !important;
  border-radius: 0.25rem !important;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}

.jet-active-filter__label,
.jet-active-tag__label {
  order: 1;
}

.jet-active-filter__val,
.jet-active-tag__val {
  order: 2;
}

.jet-active-filter__label,
.jet-active-filter__val,
.jet-active-tag__label,
.jet-active-tag__val {
  color: inherit !important;
  font-weight: 400 !important;
}

.jet-active-filter__label,
.jet-active-tag__label {
  padding-right: 0 !important;
}

.jet-active-filter__label-separator,
.jet-active-tag__label-separator {
  opacity: 0.65;
  font-weight: 400;
}

/* Remove control — in-flow layout matching Select2 choice__remove (divider on right of control) */
.jet-active-filter__remove,
.jet-active-tag__remove {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  transform: none !important;
  flex: 0 0 auto;
  order: 0;
  margin: 0 0.15rem 0 0 !important;
  padding: 0 !important;
  width: 1.05rem !important;
  min-width: 1.05rem !important;
  height: 1rem !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  text-indent: -9999px !important;
  color: var(--wp--preset--color--contrast) !important;
  cursor: pointer !important;
  transition: color 0.15s ease-in-out !important;
}

.jet-active-filter__remove::before,
.jet-active-tag__remove::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: calc(50% - 0.08rem) !important;
  width: 0.9rem !important;
  height: 0.9rem !important;
  background-color: currentColor !important;
  transform: translate(-50%, -50%) !important;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M4.146 4.146a.5.5 0 0 1 .708 0L8 7.293l3.146-3.147a.5.5 0 0 1 .708.708L8.707 8l3.147 3.146a.5.5 0 0 1-.708.708L8 8.707l-3.146 3.147a.5.5 0 0 1-.708-.708L7.293 8 4.146 4.854a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M4.146 4.146a.5.5 0 0 1 .708 0L8 7.293l3.146-3.147a.5.5 0 0 1 .708.708L8.707 8l3.147 3.146a.5.5 0 0 1-.708.708L8 8.707l-3.146 3.147a.5.5 0 0 1-.708-.708L7.293 8 4.146 4.854a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

.jet-active-filter__remove::after,
.jet-active-tag__remove::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  left: auto !important;
  width: 1px !important;
  height: 0.85rem !important;
  background-color: color-mix(
    in srgb,
    var(--wp--preset--color--contrast) 22%,
    transparent
  ) !important;
  transform: translateY(-50%) !important;
}

.jet-active-filter__remove:hover,
.jet-active-tag__remove:hover {
  color: #e74c3c !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 {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 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;
  }
}