/* Vivly Living — shared Tom Select DROPDOWN PANEL skin (filter-dropdowns
   spec 2026-07-31; values are Liam's live-review-approved enquiry panel,
   MOVED verbatim from css/enquiry-multiselect.css v0.2.5). Scope: give the
   native select the class `vl-ts` before Tom Select init — TS copies the
   select's classes onto its .ts-wrapper, and the dropdown renders as the
   wrapper's child. Consumers: the enquiry form's two dropdowns, both filter
   bars (js/ts-filters.js) — and, by standing convention (spec §6), every
   FUTURE site dropdown. CONTROL skins stay per-context (each consumer
   styles .ts-control to its own field look); only the panel is shared.
   !important per enquiry-multiselect.css's documented vendor-CSS fights. */

.ts-wrapper.vl-ts .ts-dropdown {
    margin: 5px 0 !important; /* 5px stand-off from the control WHICHEVER side
       the panel opens (Liam live review 2026-07-31) — symmetric top/bottom
       margins cover both placements without knowing which Tom Select picks */
    border: 1px solid var(--vl-brick) !important;
    border-radius: 0 !important; /* square panel (Liam live review 2026-07-31) */
    background: var(--vl-white) !important;
    box-shadow: 0 8px 24px rgba(50, 56, 59, 0.15) !important;
    font-family: inherit !important;
}

.ts-wrapper.vl-ts .ts-dropdown .option {
    padding: 12px 16px !important;
    font-size: var(--vl-text-body) !important;
    color: var(--vl-black) !important;
}

.ts-wrapper.vl-ts .ts-dropdown .option:hover,
.ts-wrapper.vl-ts .ts-dropdown .option.active {
    background: var(--vl-brick) !important; /* ink -> brick (Liam live review 2026-07-31) */
    color: var(--vl-white) !important;
}

.ts-wrapper.vl-ts .ts-dropdown .no-results {
    padding: 12px 16px !important;
    color: rgba(50, 56, 59, 0.6) !important;
}