/**
 * Search page sort dropdown + List/Map view toggle
 * Hand-maintained plain CSS — there is no build pipeline. A mirror copy lives
 * at resources/assets/styles/search-ui.css; edit both.
 * Palette from the theme: ink #211225, purple #360940, coral #f05f57.
 */

/* ---- controls row ---------------------------------------------------- */
.search-controls {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ---- sort dropdown ---------------------------------------------------- */
.sort-dd {
  position: relative;
  display: inline-block;
  text-align: left;
}

.sort-dd__trigger {
  list-style: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.sort-dd__trigger::-webkit-details-marker {
  display: none;
}

.sort-dd__caret {
  display: inline-block;
  font-size: 10px;
  margin-left: 2px;
  transition: transform 0.15s ease;
}

.sort-dd[open] .sort-dd__caret {
  transform: rotate(180deg);
}

.sort-dd__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 210px;
  padding: 6px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 8px;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.08);
}

.sort-dd__item {
  display: block;
  padding: 9px 14px;
  border-radius: 6px;
  color: #211225;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.sort-dd__item:hover {
  background: #f4f4f4;
  color: #211225;
}

/* active sort: .button--disabled (from main.css) already applies
   opacity + pointer-events; add a tick for clarity */
.sort-dd__item.button--disabled::after {
  content: " \2713";
  color: #28c76f;
}

/* ---- List / Map view toggle ------------------------------------------- */
.view-toggle {
  display: inline-flex;
  border: 1px solid #360940;
  border-radius: 500px;
  overflow: hidden;
  vertical-align: middle;
}

.view-toggle__btn {
  /* metrics chosen so the toggle's outer height matches the .button--mini
     pills exactly: 11.2 line + 22 padding + 2 container border = 35.2px */
  padding: 11px 18px;
  font-size: 11.2px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  color: #360940;
  background: #fff;
}

.view-toggle__btn:hover {
  color: #360940;
  background: #f4f4f4;
}

.view-toggle__btn.is-active {
  background: #360940;
  color: #fff;
  pointer-events: none;
}