/* Search page – modern filter styles */

.filters-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  padding: 16px;
  margin: 12px 0 20px 0;
}

.filters-grid {
  display: grid;
  grid-template-columns: repeat(36, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
.filters-grid.filters-grid--tight { gap: 12px; }

/* Star slider section spans wide on desktop */
.filters-grid .slider-container { grid-column: span 15; }
.filters-grid .filter-status { grid-column: span 9; }
.filters-grid .filter-mode { grid-column: span 4; }

@media (max-width: 900px) {
  .filters-grid .slider-container,
  .filters-grid .filter-status,
  .filters-grid .filter-mode { grid-column: 1 / -1; }
  .filters-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.filters-card label { font-weight: 600; color: #374151; display: inline-block; margin-bottom: 6px; }

/* Slider area */
.slider-container #star-rating-slider { margin-top: 8px; }

/* jQuery UI Slider Custom Styling */
.ui-slider {
  position: relative;
  text-align: left;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  height: 8px;
}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: .7em;
  display: block;
  border: 0;
  background: #649bd6; /* Selected range color - matches your theme */
  border-radius: 4px;
}

.ui-widget.ui-widget-content {
  background: #c6c7c7;
}


.slider-labels { display: flex; justify-content: space-between; margin-top: 6px; font-weight: 600; color: #64748b; }

/* Status toggle pills */
.status-toggles { display: flex; flex-wrap: wrap; gap: 8px; }
.status-toggles label { display: inline-flex; align-items: center; }
.status-toggles input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.status-toggles label span {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 9999px;
  background: #eef2f7;
  color: #1f2937;
  border: 1px solid #dbe3ef;
  transition: all .15s ease-in-out;
  font-weight: 600;
}
/* Removed pill-style slider pseudo-elements to revert to simple pill toggle */
.status-toggles input[type="checkbox"]:checked + span {
  background: #649bd6;
  color: #ffffff;
  border-color: #649bd6;
}

/* Mode select */
.filter-mode select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #f8fafc;
  color: #111827;
  font-weight: 600;
}

/* Sorting select on results page */
.sorting-form select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 10px 12px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  background: #f8fafc;
  color: #111827;
  font-weight: 600;
}
[data-theme="dark"] .sorting-form select {
  background: #0f1a30;
  color: #e5e7eb;
  border-color: #1f2937;
}

/* Search row */
.search-row { display: flex; gap: 10px; margin-top: 14px; }
.search-row .search-input { flex: 1; padding: 12px 14px; border: 1px solid #dbe3ef; border-radius: 12px; background: #f8fafc; font-size: 16px; }
.search-row .search-btn { padding: 12px 16px; border: none; border-radius: 12px; background: #2b87d1; color: #fff; font-weight: 700; cursor: pointer; }
.search-row .search-btn:hover { background: #1f6fb2; }

/* Tablet: wrap preset buttons below the search row */
@media (max-width: 900px) {
  .search-row { flex-wrap: wrap; align-items: center; }
  .search-row .preset-slider {
    flex: 0 0 100%;
    width: 100%;
    order: 2;
    margin-top: 6px;
  }
}

/* Layered preset buttons container */
.preset-slider {
  position: relative;
  width: 200px;
  height: 44px;
  border-radius: 14px;
  border: 2px solid var(--divider-color);
  overflow: hidden;
  display: block; /* ensure absolute children stack */
  background: transparent;
  /* controls for the diagonal cut and accent divider */
  --slant: 18px;            /* horizontal offset of the inner diagonal */
  --divider-width: 18px;     /* thickness of the orange accent */
  --divider-color: #fcb95c; /* orange accent color */
  --seam-overlap: 10px;      /* tiny overlap to avoid visible gap */
}

/* Single accent divider that follows the moving boundary */
.preset-slider::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: var(--divider-width);
  left: calc(50% - var(--divider-width) / 2);
  background: var(--divider-color);
  transform: skewX(-22deg);
  transition: left .18s ease-in-out;
  pointer-events: none;
  z-index: 5;
}

.preset-slider .preset-button {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  transition: all .18s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  margin: 0; /* no gap between halves */
}

.search-row .preset-slider .preset-button--farm {
  left: 0;
  z-index: 2;
  /* lighter blue, matches applied status toggle */
  background: #649bd6;
  /* round only the outer edges */
  border-radius: 12px 0 0 12px;
  /* inner edge aligned to LEFT side of orange divider */
  clip-path: polygon(
    0 0,
    calc(100% - (var(--divider-width) / 2) + var(--seam-overlap)) 0,
    calc(100% - (var(--divider-width) / 2) - var(--slant) + var(--seam-overlap)) 100%,
    0 100%
  );
}

/* Extend the left button slightly beneath the divider to eliminate cap gaps */
.search-row .preset-slider .preset-button--farm::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(-1 * var(--seam-overlap));
  width: calc(var(--seam-overlap) + (var(--divider-width) / 2));
  background: inherit;
  transform: skewX(-22deg);
  z-index: 4; /* below divider (z=5), above opposite half */
  pointer-events: none;
}

.search-row .preset-slider .preset-button--favorites {
  right: 0;
  z-index: 1;
  /* match the main Search button color */
  background: #2b87d1;
  /* round only the outer edges */
  border-radius: 0 12px 12px 0;
  /* inner edge aligned to RIGHT side of orange divider */
  clip-path: polygon(
    calc(var(--slant) + (var(--divider-width) / 2) - var(--seam-overlap)) 0,
    100% 0,
    100% 100%,
    calc((var(--divider-width) / 2) - var(--seam-overlap)) 100%
  );
}

/* Extend the right button slightly beneath the divider to eliminate cap gaps */
.search-row .preset-slider .preset-button--favorites::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--seam-overlap));
  width: calc(var(--seam-overlap) + (var(--divider-width) / 2));
  background: inherit;
  transform: skewX(-22deg);
  z-index: 4; /* below divider (z=5), above opposite half */
  pointer-events: none;
}

/* Move the divider with the hovered side (modern browsers) */
.preset-slider:has(.preset-button--farm:hover)::after { left: calc(80% - var(--divider-width) / 2); }
.preset-slider:has(.preset-button--favorites:hover)::after { left: calc(20% - var(--divider-width) / 2); }

/* JS fallback classes already used to resize: move divider too */
.preset-slider.hover-farm::after { left: calc(80% - var(--divider-width) / 2); }
.preset-slider.hover-favorites::after { left: calc(20% - var(--divider-width) / 2); }

/* Expand hovered button to 90%, shrink the other to 10% */
.preset-slider:has(.preset-button--farm:hover) .preset-button--farm { width: 80%; z-index: 3; }
.preset-slider:has(.preset-button--farm:hover) .preset-button--favorites { width: 20%; z-index: 2; }
.preset-slider:has(.preset-button--favorites:hover) .preset-button--favorites { width: 80%; z-index: 3; }
.preset-slider:has(.preset-button--favorites:hover) .preset-button--farm { width: 20%; z-index: 2; }

/* JS fallback using classes for broader browser support */
.preset-slider.hover-farm .preset-button--farm { width: 80%; z-index: 3; }
.preset-slider.hover-farm .preset-button--favorites { width: 20%; z-index: 2; }
.preset-slider.hover-favorites .preset-button--favorites { width: 80%; z-index: 3; }
.preset-slider.hover-favorites .preset-button--farm { width: 20%; z-index: 2; }

.preset-slider:not(:hover) .preset-button--farm,
.preset-slider:not(:hover) .preset-button--favorites {
  width: 50%;
}

/* Dark theme adjustments */
/* Dark theme: use the same color as 'View Details' hover */
[data-theme="dark"] .preset-button--farm { background: #789dc4; }
[data-theme="dark"] .preset-button--favorites { background: #8ec0f5; }


/* Narrow phones: stack search inputs to avoid horizontal overflow */
@media (max-width: 420px) {
  .search-row { flex-direction: column; gap: 8px; }
  .search-row .search-btn { width: 100%; }
  .preset-slider { width: 100%; height: 44px; }
  /* keep absolute stacking on mobile too */
  .preset-slider .preset-button { position: absolute; width: 50%; }
}