/* Custom select (select.js; shared rules in base/select.css): an underlined uppercase value without corners, a hairline
   square panel on paper and underlined active / chosen options. */
:root { --vt-select-h: 50px; }
.vt-select-button {
  padding: 0 2px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
}
/* Keyboard focus: a heavier underline (3px), not the base's box outline drawn under the line (two stacked lines). */
.vt-select-button:focus-visible, .vt-select > select.vt-select-native:focus + .vt-select-button {
  outline: none; border-color: var(--ink); box-shadow: 0 2px 0 0 var(--ink);
}
@media (forced-colors: active) {
  .vt-select-button:focus-visible, .vt-select > select.vt-select-native:focus + .vt-select-button { outline: 2px solid CanvasText; outline-offset: 2px; }
}
.vt-select.is-invalid > .vt-select-button { border-bottom-color: var(--err); }
/* Disabled (the district before a city): a dashed hairline and faded text, so it does not read as an open "İl seçin". */
.vt-select-button:disabled { background: transparent; border-bottom: 1px dashed var(--field); }
.vt-select-button:disabled .vt-select-value, .vt-select-button:disabled .vt-select-chevron { opacity: .5; }
.vt-select-button:disabled:hover { border-bottom-color: var(--field); }
.vt-select-panel { padding: 10px; background: var(--paper); border-color: var(--ink); box-shadow: none; }
.vt-select-search { padding: 0 2px; background: none; border-bottom: 1px solid var(--field); }
.vt-select-search:focus-within { box-shadow: none; border-bottom-color: var(--ink); }
.vt-select-option { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.vt-select-option.is-active { background: none; }
.vt-select-option.is-active .vt-select-name, .vt-select-option[aria-selected="true"] .vt-select-name {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.vt-select-option[aria-disabled="true"] .vt-select-name { text-decoration: none; }
.vt-select-count { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.vt-select-backdrop { background: rgba(28, 28, 28, .4); }
.vt-select-panel.is-sheet { border-top: 1px solid var(--ink); border-radius: 0; }
.vt-select-panel.is-sheet .vt-select-grab { height: 2px; border-radius: 0; background: var(--muted); }
.vt-select-title { font: 500 12px var(--font-body); letter-spacing: .2em; text-transform: uppercase; }

/* Free-text district (Checkout / AddressEdit [data-district-input], a city without a district list): it takes the district
   select's place next to the city trigger, so it is drawn like the trigger (underline, uppercase), not as a boxed field.
   [list][name] beats site.css ".field input:not(…):not(…)". */
.field input[data-district-input][list][name] {
  min-height: var(--vt-select-h); padding: 0 2px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  background: transparent; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0;
}
.field input[data-district-input][list][name]::placeholder { color: var(--muted); opacity: 1; }
.field input[data-district-input][list][name]:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 2px 0 0 var(--ink); }
.field input[data-district-input][list][name]:disabled { border-bottom-color: var(--line); }
@media (forced-colors: active) {
  .field input[data-district-input][list][name]:focus { outline: 2px solid CanvasText; outline-offset: 2px; }
}

/* Listing toolbar (browse.css .z-sort): a quiet text value, underlined on hover / while open. */
.z-sort .vt-select { width: auto; }
.z-sort .vt-select-button { min-height: 44px; padding: 0 4px; font-size: 12px; border-bottom-color: transparent; }
.z-sort .vt-select-button:hover, .z-sort .vt-select-button:focus-visible, .z-sort .vt-select.is-open > .vt-select-button { border-bottom-color: var(--ink); }
.z-sort .vt-select-panel { left: auto; right: 0; }
/* Phones: the value shares the line with "Filtrele" and the "Sırala" caption (browse.css), a long one ends in an ellipsis. */
@media (max-width: 900px) { .z-sort .vt-select-button { max-width: 170px; } }