/* Shared Salon dropdown (salon-select.js). Structure + storefront skin; the Salon admin skin only re-declares the --slx-* tokens in masa-admin-salon.css.
   Rules: Masa tokens only, logical properties only (RTL/Arabic safe), no !important. The real <select> stays in the DOM, so every rule is scoped to the
   enhanced markup and nothing here changes a page where the script did not run. */
.sl-select { position: relative; display: block; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; }
.sl-select.sl-select-compact { display: inline-block; inline-size: auto; min-inline-size: var(--slx-min-w); vertical-align: middle; }

.sl-select[hidden], .sl-select.sl-select-compact[hidden] { display: none; }

/* The native control remains the submitted, validated, focus-anchoring element: invisible but never display:none. */
.sl-select.sl-select > select.sl-select-native.sl-select-native { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; min-block-size: 0; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; appearance: none; }

/* Doubled class on purpose: page stylesheets carry bare `button` rules (for example .sl-discover-filters button paints every button brand-solid) that must not restyle the trigger. */
.sl-select .sl-select-trigger.sl-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: .5rem; inline-size: 100%; min-inline-size: 0; min-block-size: var(--slx-min-h, var(--slx-h)); margin: 0; padding-block: .5rem; padding-inline: .75rem; border: 1px solid var(--slx-line); border-radius: var(--slx-radius); background: var(--slx-bg); color: var(--slx-ink); font: inherit; font-family: var(--slx-font); font-size: var(--slx-fs, 1em); line-height: 1.35; text-align: start; cursor: pointer; appearance: none; box-shadow: none; transition: border-color var(--sl-duration, 150ms), box-shadow var(--sl-duration, 150ms); }
.sl-select .sl-select-trigger.sl-select-trigger:hover:not(:disabled) { border-color: var(--slx-accent); }
.sl-select .sl-select-trigger.sl-select-trigger:focus-visible { outline: 2px solid var(--slx-accent); outline-offset: 2px; }
.sl-select.is-open > .sl-select-trigger.sl-select-trigger { border-color: var(--slx-accent); }
.sl-select.is-invalid > .sl-select-trigger.sl-select-trigger { border-color: var(--slx-danger); }
.sl-select .sl-select-error { display: block; margin-block-start: .375rem; color: var(--slx-danger); font-family: var(--slx-font); font-size: .875em; line-height: 1.4; text-align: start; overflow-wrap: anywhere; }
.sl-select .sl-select-error[hidden] { display: none; }
.sl-select.is-placeholder .sl-select-value { color: var(--slx-muted); }
.sl-select.is-disabled > .sl-select-trigger.sl-select-trigger { background: var(--slx-disabled-bg, var(--slx-soft)); cursor: not-allowed; opacity: .65; }
.sl-select-value { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-select-chevron { flex: none; inline-size: .85em; block-size: .85em; color: var(--slx-muted); transition: transform var(--sl-duration, 150ms); }
.sl-select.is-open > .sl-select-trigger > .sl-select-chevron { transform: rotate(180deg); }

/* Listbox: a top-layer popover (escapes overflow clipping and dialogs); salon-select.js writes top/left/width/max-height. */
.sl-select-list { position: fixed; inline-size: max-content; inset: auto; box-sizing: border-box; margin: 0; padding: .25rem; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--slx-line); border-radius: var(--slx-radius); background: var(--slx-list-bg, var(--slx-bg)); color: var(--slx-ink); box-shadow: var(--slx-shadow); font-family: var(--slx-font); font-size: var(--slx-fs, 1em); line-height: 1.35; text-align: start; z-index: 600; }
.sl-select-list[hidden] { display: none; }
.sl-select-option { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-block-size: 44px; padding-block: .5rem; padding-inline: .75rem; border-radius: var(--slx-opt-radius, var(--slx-radius)); cursor: pointer; }
.sl-select-option-text { min-inline-size: 0; overflow-wrap: anywhere; }
.sl-select-check { flex: none; inline-size: .85em; block-size: .85em; visibility: hidden; }
.sl-select-option[aria-selected="true"] { background: var(--slx-selected-bg); color: var(--slx-accent); font-weight: 600; }
.sl-select-option[aria-selected="true"] .sl-select-check { visibility: visible; }
.sl-select-option.is-active { background: var(--slx-soft); }
.sl-select-option[aria-disabled="true"] { cursor: not-allowed; opacity: .45; }
.sl-select-group { padding-block: .5rem .25rem; padding-inline: .75rem; color: var(--slx-muted); font-size: .8em; font-weight: 600; }
@media (min-width: 768px) { .sl-select-option { min-block-size: 38px; } }
@media (prefers-reduced-motion: reduce) { .sl-select-trigger, .sl-select-chevron { transition: none; } }

/* Storefront skin. */
.sl-app .sl-select { --slx-bg: var(--sl-page); --slx-ink: var(--sl-ink); --slx-muted: var(--sl-muted); --slx-line: var(--sl-line); --slx-accent: var(--sl-brand); --slx-soft: var(--sl-soft); --slx-selected-bg: var(--sl-brand-soft); --slx-danger: var(--sl-danger); --slx-radius: var(--sl-sm-radius); --slx-shadow: var(--sl-shadow); --slx-font: var(--sl-font); --slx-h: var(--sl-control); --slx-disabled-bg: var(--sl-surface); }

/* PARITY-SWC-SELECT-01: the compact footprint is measured in px at load (a 640 px capped field on desktop); it must never exceed the container when the window is narrowed or a phone is rotated. */
.sl-select.sl-select-compact { min-inline-size: min(var(--slx-min-w, 0px), 100%); }