/* ------------------------------------------------------------------------
   hf-select — an elegant replacement for the native <select> panel.

   A browser paints the open list of a <select> itself and ignores CSS, which is
   why the city list looked like an OS menu bolted onto the page. So the native
   control stays in the DOM as the source of truth (the form still submits
   name="city", the ?city= URL parameter is untouched) and this draws the visible
   part on top of it.

   Uses the elegant theme's own tokens, so it inherits the site palette rather
   than inventing one.
   ------------------------------------------------------------------------ */

.hf-sel { position: relative; }

/* The real control is kept for forms and assistive tech, just not shown.
   Not display:none — that would drop it from the form on some older browsers. */
.hf-sel > select.hf-sel-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.hf-sel-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer;
  font-family: var(--el-body); font-size: 14px; font-weight: 600;
  color: var(--el-ink); text-align: left; line-height: 1.35;
}
.hf-sel-trigger .hf-sel-val { flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.hf-sel-trigger .hf-sel-val.is-placeholder { color: var(--el-mut); font-weight: 500; }
.hf-sel-trigger .hf-sel-caret { flex: 0 0 auto; color: var(--el-mut);
  transition: transform .18s var(--el-ease); font-size: 13px; }
.hf-sel.is-open .hf-sel-caret { transform: rotate(180deg); }

/* ---- the panel ---- */
.hf-sel-panel {
  position: absolute; z-index: 1200; top: calc(100% + 10px); left: -13px;
  min-width: calc(100% + 26px); width: 352px; max-width: 92vw;
  background: var(--el-card, #fff);
  border: 1.5px solid var(--el-line);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(34, 51, 47, .13), 0 3px 10px rgba(34, 51, 47, .06);
  overflow: hidden; display: none;
}
.hf-sel.is-open .hf-sel-panel { display: block; }
.hf-sel-panel.hf-sel-right { left: auto; right: -13px; }

.hf-sel-search {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; border-bottom: 1.5px solid var(--el-line-soft, var(--el-line));
}
.hf-sel-search svg { flex: 0 0 auto; color: var(--el-mut); }
.hf-sel-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--el-body); font-size: 14px; font-weight: 500; color: var(--el-ink);
}
.hf-sel-search input::placeholder { color: var(--el-mut); font-weight: 400; }

.hf-sel-list { max-height: 306px; overflow-y: auto; padding: 6px; }
.hf-sel-list::-webkit-scrollbar { width: 10px; }
.hf-sel-list::-webkit-scrollbar-thumb {
  background: var(--el-line); border-radius: 99px; border: 3px solid var(--el-card, #fff);
}

.hf-sel-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 11px; cursor: pointer;
  transition: background .12s var(--el-ease);
}
.hf-sel-opt:hover, .hf-sel-opt.is-active { background: var(--el-mint, #E8EEE6); }
.hf-sel-opt.is-selected { background: rgba(242, 120, 70, .10); }

.hf-sel-pin { flex: 0 0 auto; color: var(--el-mut); display: flex; }
.hf-sel-opt.is-selected .hf-sel-pin { color: var(--el-coral); }

.hf-sel-txt { flex: 1; min-width: 0; }
.hf-sel-name {
  display: block;
  font-family: var(--el-body); font-size: 14px; font-weight: 600; color: var(--el-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hf-sel-opt.is-selected .hf-sel-name { color: var(--el-coral-deep); }
.hf-sel-sub { display: block; font-size: 11.5px; color: var(--el-mut); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hf-sel-count {
  flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--el-mut);
  font-variant-numeric: tabular-nums;
}
.hf-sel-opt.is-selected .hf-sel-count { color: var(--el-coral-deep); }

.hf-sel-empty { padding: 20px 14px; text-align: center; font-size: 13px; color: var(--el-mut); }

/* group heading, used when options carry data-group */
.hf-sel-group {
  padding: 9px 12px 5px; font-size: 9.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--el-mut);
}

@media (max-width: 575px) {
  .hf-sel-panel { width: calc(100vw - 34px); left: 0; right: auto; }
  .hf-sel-list { max-height: 54vh; }
}