/* ============================================
   FacetWP Sort Dropdown - Figma Design
   ============================================ */

/* FacetWP Sort Container */
.facetwp-sort {
  display: inline-block;
  position: relative;
}

/* FacetWP Sort Select - Styled to match Figma design */
.facetwp-sort-select {
  display: inline-block;
  width: 100%;
  /*min-width: 140px;*/
  background-color: var(--white, #ffffff);
  border: 1px solid var(--grey-body-text, #444444);
  border-radius: var(--radius-sm, 4px);
  padding: var(--spacing-sm, 8px) var(--spacing-xl, 32px) var(--spacing-sm, 8px) var(--spacing-md, 16px);
  font-family: var(--font-body, arial, helvetica, sans-serif);
  font-size: var(--font-size-body, 17px);
  font-weight: 700;
  /*line-height: var(--line-height-body, 24px);*/
  color: var(--grey-body-text, #444444);
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='11' viewBox='0 0 16 11' fill='none'%3E%3Cpath d='M0 1.74745C2.15114 3.73387 3.79045 5.45146 4.91794 6.9002C6.0306 8.34895 6.86138 9.71555 7.41029 11H8.41168C9.12378 9.52139 10.0362 8.08757 11.1488 6.69857C12.2466 5.30957 13.8637 3.65173 16 1.72505V0C13.0181 1.40394 10.726 2.87508 9.12378 4.41344L8 5.5C8 5.5 7.5 5 6.87622 4.41344C6.25243 3.82688 4.36903 2.48676 3.67177 2.0387C2.9745 1.59063 1.75058 0.926001 0 0.0448063L0 1.74745Z' fill='%2343424A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-md, 16px) center;
  background-size: 16px 11px;
  padding-right: var(--spacing-xl, 32px);
}

.facetwp-sort-select:hover {
  border-color: var(--grey-headings, #494a52);
  background-color: #fafafa;
}

.facetwp-sort-select:focus {
  outline: 2px solid var(--blue, #4982b9);
  outline-offset: 2px;
  border-color: var(--blue, #4982b9);
  background-color: var(--white, #ffffff);
}

.facetwp-sort-select:active {
  background-color: #f5f5f5;
}

/* FacetWP Sort Select Options */
.facetwp-sort-select option {
  padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
  font-family: var(--font-body, arial, helvetica, sans-serif);
  font-size: var(--font-size-body, 17px);
  line-height: var(--line-height-body, 24px);
  color: var(--grey-body-text, #444444);
  background-color: var(--white, #ffffff);
}

.facetwp-sort-select option:hover {
  background-color: #f5f5f5;
}

.facetwp-sort-select option:checked {
  background-color: #e8f4fd;
  color: var(--blue, #4982b9);
  font-weight: 600;
}

/* Remove default select styling for better browser compatibility */
.facetwp-sort-select::-ms-expand {
  display: none;
}

.facetwp-sort-select::-webkit-scrollbar {
  width: 8px;
}

.facetwp-sort-select::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: var(--radius-sm, 4px);
}

.facetwp-sort-select::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: var(--radius-sm, 4px);
}

.facetwp-sort-select::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/*!* Responsive adjustments for FacetWP Sort *!*/
/*@media (max-width: 768px) {*/
/*  .facetwp-sort-select {*/
/*    font-size: var(--font-size-job-info, 16px);*/
/*    padding: 6px var(--spacing-lg, 24px) 6px var(--spacing-sm, 8px);*/
/*    min-width: 120px;*/
/*  }*/
/*}*/