/* SarTrade — searchable Location picker (Public + Vendor + Admin).
   This build's own file, loaded by every layout that renders an equipment
   Location control, so the component exists once rather than being copied
   into public.css / vendor.css / admin.css (CLAUDE.md "fix the shared rule,
   not the page"). css/{style,app,fallback}.css stay the prototype's untouched
   files. Behaviour and markup contract: js/location-field.js.

   Same look as css/phone-field.css's country menu, minus the dialling code.
   The trigger is itself an .input-st, so it inherits every existing field
   rule — border, focus ring, the red .field.is-invalid border and the
   floating-label layout in components.css — and looks exactly like the
   native <select> it replaces. Without JS none of this applies. */

/* Positioning context for the visually-hidden <select> and the menu. */
.field:has(> .location-field__trigger) { position: relative; }

/* The real <select> stays in the form and posts. Visually hidden rather than
   display:none so jQuery-validation (which skips :hidden) still validates it.
   The .field-prefixed selector outranks components.css's
   `.form-float .field > .input-st:not(…)` min-height/padding rule. */
select.input-st[data-location-field].is-enhanced,
.field > select.input-st[data-location-field].is-enhanced {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

/* Same caret as app.css's select.input-st, so the trigger is visually the
   same control as every other dropdown on the page. */
.location-field__trigger.input-st {
  display: flex;
  align-items: center;
  text-align: left;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--navy) 50%), linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 13px) calc(50% + 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.location-field__value {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.location-field__trigger.is-placeholder .location-field__value { color: var(--ink-soft); }

/* Inside a floating-label form the trigger lines up with a floated <select>
   (components.css: `.form-float .field > select.input-st`). `button` in the
   selector outranks components.css's `.form-float .field > .input-st:not(…)`
   padding shorthand, which would otherwise also drop the caret's 38px. */
.form-float .field > button.location-field__trigger.input-st { padding: 22px 38px 6px 14px; }

/* Sits in the flow position right under the trigger (top: auto), so it opens
   below the box whatever label, hint or error surrounds it. */
.location-field__menu {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  max-height: 320px;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 18px 40px rgba(1, 51, 99, .14), 0 4px 10px rgba(1, 51, 99, .08);
}

.location-field__menu[hidden] { display: none; }

.location-field__search.input-st {
  flex: none;
  min-height: 38px;
  padding: 7px 10px;
  border-color: var(--line);
  border-radius: 8px;
  font-size: 14px;
}

.location-field__search.input-st:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 97, 160, .14);
}

.location-field__list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 6px 0 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.location-field__option {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy-deep);
  cursor: pointer;
}

.location-field__option.is-active { background: rgba(0, 97, 160, .09); }
.location-field__option[aria-selected="true"] { font-weight: 700; }
.location-field__option.is-clear { color: var(--ink-soft); }

.location-field__empty {
  margin: 0;
  padding: 10px;
  font-size: 13px;
  color: var(--ink-soft);
}