/* Shared base of select.css: the rules every theme has in common. ThemeAssetTagHelper links this file right before the
   theme's own select.css, so a theme rule wins on equal specificity. A fix for all themes goes here; a theme-only change
   goes into the theme's file (Themes/README.md, "Ortak CSS tabanı"). */

/* Custom select (select.js): every storefront <select> becomes a trigger button (value + chevron) and a listbox panel; on
   phones (≤720px) a bottom sheet. The native select stays in the form, invisible over the trigger (posting, required and the
   browser's validation bubble). select.js only builds the component when this file is linked (--vt-select), so a theme
   without select.css keeps the native control. Colours, radii and fonts come from the theme tokens. */
:root { --vt-select: 1; }

.vt-select {
  position: relative; display: block; width: 100%; min-width: 0;
  font: 400 15px var(--font-body); letter-spacing: normal; text-transform: none; color: var(--ink);
}
.vt-select[hidden] { display: none; }
/* The native select: still focusable for the validation bubble, never seen or hit. */
.vt-select > select.vt-select-native {
  position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; max-width: none; min-height: 0;
  margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; appearance: none;
}
.vt-select-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Trigger: looks like the theme's text fields. */
.vt-select-button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; box-sizing: border-box;
  width: 100%; min-height: var(--vt-select-h, 48px); padding: 0 14px; margin: 0; cursor: pointer; text-align: left;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--field, var(--line)); border-radius: var(--radius-sm, 8px);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vt-select-button:hover { border-color: var(--ink); }
.vt-select-button:focus-visible, .vt-select > select.vt-select-native:focus + .vt-select-button {
  outline: var(--focus-ring, 2px solid var(--action, var(--brand))); outline-offset: 1px; border-color: var(--action, var(--brand));
}
.vt-select.is-open > .vt-select-button { border-color: var(--ink); }
.vt-select.is-invalid > .vt-select-button { border-color: var(--err); }
.vt-select-button:disabled { cursor: not-allowed; color: var(--muted); background: var(--surface); border-color: var(--line); }
.vt-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-select-value.is-placeholder { color: var(--muted); }
.vt-select-chevron { flex: none; transition: transform .15s ease; }
.vt-select.is-open .vt-select-chevron { transform: rotate(180deg); }

/* Panel under (or, without room below, over) the trigger. */
.vt-select-panel {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; box-sizing: border-box;
  display: flex; flex-direction: column; min-width: 100%; width: max-content; max-width: min(360px, calc(100vw - 32px));
  max-height: 320px; padding: 6px; outline: none;
  font: 400 15px var(--font-body); letter-spacing: normal; text-transform: none; color: var(--ink);
  background: var(--panel-bg, #fff); border: 1px solid var(--line); border-radius: var(--radius, 10px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
}
.vt-select-panel[hidden] { display: none; }
.vt-select-panel.is-up { top: auto; bottom: calc(100% + 6px); }
.vt-select-panel.is-right { left: auto; right: 0; }
.vt-select-panel:not(.is-sheet) { animation: vt-select-in .14s ease-out; }
.vt-select-panel.is-up:not(.is-sheet) { animation-name: vt-select-in-up; }
@keyframes vt-select-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes vt-select-in-up { from { opacity: 0; transform: translateY(4px); } }

/* Sheet parts (grab handle, title + close): phones only. */
.vt-select-grab, .vt-select-head { display: none; }

.vt-select-search {
  flex: none; display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 2px 2px 6px; padding: 0 10px;
  color: var(--muted); background: var(--surface); border-radius: var(--radius-sm, 8px);
}
.vt-select-search[hidden] { display: none; }
.vt-select-search:focus-within { box-shadow: inset 0 0 0 2px var(--action, var(--brand)); }
/* Beats the themes' ".field input:not(…):not(…)" (the panel sits inside the field's label). */
.vt-select-panel .vt-select-search > input.vt-select-input[type] {
  flex: 1; min-width: 0; width: auto; min-height: 0; height: 38px; margin: 0; padding: 0;
  font: inherit; letter-spacing: inherit; text-transform: none; color: var(--ink);
  background: transparent; border: 0; border-radius: 0; outline: none; box-shadow: none; appearance: none;
}
.vt-select-panel .vt-select-search > input.vt-select-input[type]:focus { outline: none; border: 0; }
.vt-select-panel .vt-select-search > input.vt-select-input[type]::-webkit-search-cancel-button { display: none; }

/* Sized to its options (shrinks, never grows): in a panel whose height is kept while filtering (a sheet) the few results
   and the count line stay right under the search box, the rest of the panel is left empty below them. */
.vt-select-list {
  position: relative; flex: 0 1 auto; min-height: 0; margin: 0; padding: 0; list-style: none;
  overflow-y: auto; overscroll-behavior: contain; outline: none;
}
.vt-select-option {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; box-sizing: border-box; cursor: pointer;
  border-radius: max(0px, calc(var(--radius-sm, 8px) - 2px)); user-select: none;
}
.vt-select-option[hidden] { display: none; }
.vt-select-option.is-active { background: var(--surface); }
.vt-select-option[aria-selected="true"] { font-weight: var(--fw-bold, 700); }
.vt-select-option[aria-disabled="true"] { cursor: default; color: var(--muted); opacity: .6; }
.vt-select-option[aria-disabled="true"].is-active { background: transparent; }
.vt-select-name { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 8px 0; }
.vt-select-check { flex: none; width: 16px; height: 16px; visibility: hidden; }
.vt-select-option[aria-selected="true"] .vt-select-check { visibility: visible; }
/* Keyboard focus on the list: the active option also gets a ring (the panel's own focus is not drawn). */
.vt-select-list:focus-visible .vt-select-option.is-active { box-shadow: inset 0 0 0 2px var(--action, var(--brand)); }

.vt-select-count { flex: none; margin: 0; padding: 6px 10px 2px; font-size: 12px; color: var(--muted); }
.vt-select-count:empty { padding: 0; } /* kept rendered: a live region that appears with its text is often not read */

/* Touch screens: 44px rows. */
@media (pointer: coarse), (max-width: 720px) {
  .vt-select-option { min-height: 44px; }
  .vt-select-search { min-height: 44px; }
}

/* Phones: a bottom sheet over a dimmed page (select.js moves panel and backdrop to <body> while open). */
.vt-select-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, .45); animation: vt-select-fade .2s ease-out; }
.vt-select-backdrop[hidden] { display: none; }
.vt-select-panel.is-sheet {
  position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 91; width: auto; min-width: 0; max-width: none;
  max-height: 85vh; max-height: 85dvh; padding: 0 10px calc(12px + env(safe-area-inset-bottom));
  border: 0; border-radius: calc(var(--radius, 10px) + 6px) calc(var(--radius, 10px) + 6px) 0 0;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, .14); animation: vt-select-up .22s ease-out;
}
.vt-select-panel.is-sheet .vt-select-grab {
  display: block; flex: none; width: 40px; height: 4px; margin: 8px auto 4px; border-radius: 99px; background: var(--field, var(--line));
}
.vt-select-panel.is-sheet .vt-select-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 6px 6px; }
.vt-select-title { min-width: 0; font: var(--fw-bold, 700) 17px var(--font-display, var(--font-body)); overflow-wrap: anywhere; }
.vt-select-close {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px;
  padding: 0; color: var(--ink); background: none; border: 0; border-radius: var(--radius-sm, 8px); cursor: pointer;
}
.vt-select-close:focus-visible { outline: var(--focus-ring, 2px solid var(--action, var(--brand))); outline-offset: -2px; }
.vt-select-panel.is-sheet .vt-select-search { margin: 0 0 8px; }
@keyframes vt-select-up { from { transform: translateY(100%); } }
@keyframes vt-select-fade { from { opacity: 0; } }

/* Narrow placements: the sort menu sizes to its value, the quantity of a return request stays short. */
.sort-field .vt-select, .request-qty .vt-select { width: auto; }
.sort-field .vt-select-button { min-width: 160px; }
.request-qty .vt-select-button { width: auto; min-width: 96px; }
@media (max-width: 720px) {
  .sort-field .vt-select-button { min-width: 0; max-width: 170px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .vt-select-button, .vt-select-chevron { transition: none; }
  .vt-select-panel:not(.is-sheet), .vt-select-panel.is-up:not(.is-sheet), .vt-select-panel.is-sheet, .vt-select-backdrop { animation: none; }
}