/* =====================================================
   JSF UI – Global helpers (MU-plugin)
   Wrapper class: .jsf-ui

   Optional toggles:
   - .jsf-ui--label-only  => hide Select2 value and show only label + chevron
   - .jsf-ui--no-search   => hide Select2 dropdown search
   Sorting toggle:
   - Add class "jsf-sort-arrows" to the Sorting widget wrapper
===================================================== */

/* Prevent horizontal overflow caused by Select2 inline widths */
.jsf-ui{
  max-width:100%;
  width:100%;
  overflow-x:clip; /* use hidden if needed */
}

.jsf-ui .jet-filter{
  position:relative;
  min-width:0;
}

/* =========================
   SEARCH FILTER
========================= */
.jsf-ui input.jet-search-filter__input{
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
}

/* =========================
   LABEL-ONLY (Select2 filters)
========================= */
.jsf-ui--label-only .jet-filter-label{
  display:inline-flex;
  align-items:center;
  gap:4rem;
  pointer-events:none;
  white-space:nowrap;
}

.jsf-ui--label-only .jet-filter-label::after{
  content:"";
  width:12px;
  height:7px;
  transition:transform .25s ease;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%233B3932' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.jsf-ui--label-only .jet-filter:has(.select2-container--open) .jet-filter-label::after{
  transform:rotate(180deg);
}

/* Select2 overlay covers the whole filter widget cell */
.jsf-ui--label-only .select2-container{
  position:absolute !important;
  inset:0;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  max-width:100% !important;
  min-width:0 !important;
}

/* Clamp inline widths injected by Select2 */
.jsf-ui--label-only .select2-container[style]{
  max-width:100% !important;
}

/* Hide Select2 visible text + arrow (label-only UI) */
.jsf-ui--label-only .select2-selection__rendered,
.jsf-ui--label-only .select2-selection__arrow{
  display:none !important;
}

.jsf-ui--label-only .select2-container--default .select2-selection--single{
  height:100% !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
}

/* =========================
   SELECT2 DROPDOWN
========================= */
.select2-container--open{ z-index:999999 !important; }

.select2-container--open .select2-dropdown{
  border:0 !important;
  border-radius:14px !important;
  box-shadow:0 18px 40px rgba(0,0,0,0.10) !important;
  overflow:hidden;
}

.jsf-ui--no-search .select2-search--dropdown{
  display:none !important;
}

.select2-results{ background:#ffffff; }

.select2-results__option{
  padding:12px 16px !important;
  font-size:16px;
  color:#1f2a66;
}

.select2-results__option--highlighted{
  background:#e9f6ff !important;
  color:#1f2a66 !important;
}

.select2-results__option--selected{
  background:#1fb6ff !important;
  color:#ffffff !important;
}

/* =========================
   SORT TOGGLE (single button)
   JS creates: .jsf-sort-single > .jsf-sort-single-btn + inline SVG (.jsf-sort-icon)
========================= */

/* Hide native sorting select */
.jsf-ui .jsf-sort-arrows select.jet-sorting-select.jsf-sort-hidden{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
  width:1px !important;
  height:1px !important;
}

/* Wrapper */
.jsf-ui .jsf-sort-single{
  display:inline-flex;
  align-items:center;
}

/* Button styling (inherits your Elementor colors) */
.jsf-ui .jsf-sort-single-btn{
  display:inline-flex;
  align-items:center;
  gap:4rem;
  border:0;
  background:transparent;
  cursor:pointer;
  font-size: clamp(1.1rem, 1rem + 0.35vw, 1.25rem);
  color: var(--e-global-color-92bfd82);
  padding:0;
}

/* Icon rotation:
   - Default: Latest first (DESC) -> arrow DOWN
   - Oldest: Oldest first (ASC) -> arrow UP
*/
.jsf-ui .jsf-sort-single-btn .jsf-sort-icon{
  transition:transform .25s ease;
  transform:rotate(180deg); /* default DOWN */
}

.jsf-ui .jsf-sort-single-btn.is-oldest .jsf-sort-icon{
  transform:rotate(0deg);   /* UP */
}