/* ------------------------------- */
/* === CUSTOM SORT BUTTON - (** MOBILE + DESKTOP **) - ACTUAL BUTTON ITSELF - LOCATED IN ELEMENTOR PRODUCT ARCHIVE TEMPLATE === */
/* ------------------------------- */

/* === BASE === */
.custom-sort-btn {
  display: none;                    /* hidden by default */
  width: 100%;
  background-color: #fff;
  color: #000;
  font-size: 15px;
  font-weight: bold;
  border: 2px solid #5d5c5b;        /* ✅ default: grey (for desktop) */
  border-radius: 1px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  align-items: center;
  justify-content: center;
  gap: 8px; /* optional for mobile */
}

.custom-sort-btn:focus,
.custom-sort-btn:active {
  outline: none;
}

.custom-sort-btn:active {
  background-color: #000;
  color: #fff;
}

.custom-sort-btn .sort-icon {
  width: 20px;
  height: 20px;
}

/* ✅ Group "Sort:" + icon inside button */
.sort-prefix {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* === MOBILE: show & override === */
@media (max-width: 1384px) {
  .custom-sort-btn {
    display: inline-flex;            /* ✅ show on mobile */
    justify-content: center;         /* ✅ center icon + text on mobile */
    border-color: #000;              /* ✅ force black border on mobile */
  }
}

/* === DESKTOP: show & override === */
@media (min-width: 1385px) {
  .custom-sort-btn {
    display: inline-flex;            /* ✅ show on desktop */
    width: 100%;
    font-size: 16px;
    padding: 12px 20px;
    justify-content: space-between;  /* ✅ icon left, label right */
    align-items: center;
    border-color: #5d5c5b;           /* ✅ force dark grey on desktop */
  }
}

/* === DROPDOWN === */
#desktop-sort-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  z-index: 9999;
  list-style: none;
  margin: 0;
  padding: 0;
}

#desktop-sort-options li {
  padding: 12px 15px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

#desktop-sort-options li:last-child {
  border-bottom: none;
}

#desktop-sort-options li:hover {
  background-color: #f5f5f5;
}





/* ------------------------------- */
/* === CUSTOM SORT MENU ITEMS LIST === */ 
/* ------------------------------- */

#mobile-sort-options-popup {
  display: none;
  position: fixed;
  left: 0;
  width: 100vw;
  background: #fff;
  padding: 20px;   /* General padding for items inside sort menu popup*/
  padding-bottom: 40px;  /* ✅ bottom of sort menu added - white space */
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  z-index: 9999;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

#mobile-sort-options-popup.show {
  display: block;
}

#mobile-sort-options-popup ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#mobile-sort-options-popup li {
  padding: 15px;
  text-align: center;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}

#mobile-sort-options-popup li:last-child {
  border-bottom: none;
}

#mobile-sort-options-popup li:hover {
  background: #f0f0f0;
}

#close-sort-popup {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10000;
  color: #000;
}

@media (min-width: 1385px) {
  #mobile-sort-options-popup {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
    height: 0;
    overflow: hidden;
  }
}



/* --------------------------------------- */
/* CUSTOM SORT MENU - POPUP MENU OVERLAY BOX  */
/* --------------------------------------- */

#mobile-sort-popup-overlay {
  display: none;  /* hidden by default */
  position: fixed;
  top: 0; 
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);  /* same shading */
  z-index: 9998;  /* below popup content, above everything else */
}

#mobile-sort-popup-overlay.show {
  display: block;
}

/* Make the sort popup close button match the filter popup one */
#close-sort-popup {
  display: block !important;
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10000;
  color: #000; /* Ensure visible on white background */
}

#mobile-sort-options-popup {
  position: fixed;
  bottom: 0px;
  left: 0;
  width: 100vw;
  background: #fff;
  font-weight: bold; /* ✅ add this line */
  font-size: 16px
  padding: 20px;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  z-index: 9999;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  max-height: 80vh; /* or whatever fits your design */
}


.close-button-sort-wrapper {
  padding-bottom: 80px; /* same as filter, adjust if needed */
}