/* Vivly Living — Tom Select chip styling for the enquiry Developments
   multi-select (Phase 8; REBUILT at Liam's live review 2026-07-31 as a
   construction-faithful port of Renmore's shipped enquiry-multiselect.css
   v1.0.5, fetched from their live site — Liam: "build it the same but in
   Vivly styling"). Colour/type/radius tokens are Vivly's; the structure,
   selector strategy and neutralisations are Renmore's proven ones.

   ⚠️ !important is used per Renmore's own hard-won reasons, kept verbatim:
   (1) Tom Select's vendor CSS itself forces `.plugin-remove_button .item
   { padding-right: 0 !important }` and styles `.remove` — only !important
   outranks it; (2) the theme's own field rules (enquiry-form.css inputs at
   50px/brick-border) land on Tom Select's INNER SEARCH INPUT and inflate/
   double-border the control — the neutraliser block must win outright
   regardless of load order. Do not extend !important beyond this file.

   Markup: Tom Select's generated .ts-wrapper/.ts-control/.item inside
   .vl-enquiry-form (js/enquiry.js mounts it; whole-chip click removes). */

.vl-enquiry-form .ts-wrapper {
    width: 100% !important;
    min-width: 0;
}

/* ── Control box — the site field construction (50px min, brick 1px,
   10px radius, white ground) ── */
.vl-enquiry-form .ts-control {
    min-height: 50px !important;
    align-items: center !important;
    border: 1px solid var(--vl-brick) !important;
    border-radius: 10px !important;
    background: var(--vl-white) !important;
    padding: 6px 12px !important;
    gap: 8px !important;
    font-family: inherit !important;
    font-size: var(--vl-text-body) !important; /* 18px */
    color: var(--vl-black) !important;
    box-shadow: none !important;
}

/* Neutralise the theme's own field rules on Tom Select's inner search input
   (enquiry-form.css's input[type="text"] would give it 50px height + its
   own brick border INSIDE the control — Renmore hit exactly this with their
   global input rule; their fix ported). */
.vl-enquiry-form .ts-control input {
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    line-height: normal !important;
    font-family: inherit !important;
    font-size: var(--vl-text-body) !important;
    color: var(--vl-black) !important;
}

.vl-enquiry-form .ts-control input::placeholder {
    color: rgba(50, 56, 59, 0.6) !important; /* ink @60% — no grey token exists; derived, flag live */
    opacity: 1 !important;
}

/* ── Hover / focus — Vivly conventions (brick-dark hover deepen; cornflower
   focus ring) in place of Renmore's navy ring ── */
.vl-enquiry-form .ts-wrapper:not(.focus) .ts-control:hover {
    border-color: var(--vl-brick-dark) !important;
}

.vl-enquiry-form .ts-wrapper.focus .ts-control {
    border-color: var(--vl-brick) !important;
    outline: 2px solid var(--vl-cornflower);
    outline-offset: 2px;
    box-shadow: none !important;
}

/* ── Selected chips — solid brick, white label (Renmore's navy chip; ink →
   brick at Liam's live review 2026-07-31). The WHOLE chip is clickable to
   remove (js/enquiry.js); the × is a visual cue. Selectors include
   `.ts-wrapper.plugin-remove_button` to outrank Tom Select's own plugin
   CSS (padding-right: 0 !important). ── */
.vl-enquiry-form .ts-wrapper.plugin-remove_button .item {
    display: inline-flex !important;
    align-items: center !important;
    background: var(--vl-brick) !important;
    color: var(--vl-white) !important;
    border: none !important;
    border-radius: 6px !important; /* derived — Renmore's radius-sm scale; between square and the 10px field radius; flag live */
    padding: 6px 12px !important; /* 12px left AND right — symmetric (Renmore) */
    font-size: var(--vl-text-sm) !important; /* 16px */
    line-height: 1.2 !important;
    cursor: pointer !important;
}

/* × icon — fixed 10×10 mask so the colour is ours. 12px from the chip's
   right edge, mirroring the 12px left padding (Renmore's construction). */
.vl-enquiry-form .ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
    width: 10px !important;
    height: 10px !important;
    flex: 0 0 10px !important;
    box-sizing: content-box !important;
    margin-left: 12px !important;
    padding: 0 !important;
    border: none !important;
    border-left: none !important;
    font-size: 0 !important; /* hide the default text × */
    background-color: rgba(255, 255, 255, 0.7) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat !important;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1l-8 8' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 10px 10px no-repeat !important;
    transition: background-color 0.15s ease !important;
}

/* Hovering anywhere on the chip brightens the × to full white — it stays
   white, never cornflower (Liam live review 2026-07-31; base is white @70%,
   so the brighten keeps a subtle affordance without a colour change). */
.vl-enquiry-form .ts-wrapper.plugin-remove_button .item:hover .remove,
.vl-enquiry-form .ts-wrapper.plugin-remove_button .item .remove:hover {
    background-color: var(--vl-white) !important;
}

/* ── Dropdown panel: moved to the shared css/ts-dropdown.css (filter-
   dropdowns spec 2026-07-31) — the enquiry selects carry the `vl-ts`
   scope class (js/enquiry.js) like every other site dropdown. ── */

/* ── No flash of the unstyled native <select> on load (Renmore) ──
   Hide the raw selects from first paint; Tom Select renders the styled
   .ts-wrapper in their place on DOMContentLoaded (buyer position joined the
   multi-select at Liam's live review 2026-07-31 — TS single-select mode,
   purely so its dropdown panel matches). The HBP form submits via JS/AJAX
   only, so there is no no-JS fallback to preserve. */
.vl-enquiry-form .hbp_select > select#hbp_developmentMultiSelect,
.vl-enquiry-form .hbp_select > select#hbp_buyerPosition {
    display: none !important;
}

/* Buyer position keeps the wrapper's ::after chevron (enquiry-form.css) as
   the it's-a-dropdown cue (Liam). The vendor sets .ts-control { z-index: 1 }
   — a positive z-index that lifted the white control ABOVE the wrapper's
   z-auto ::after and hid the chevron the moment TS mounted (caught at
   Liam's live review 2026-07-31). Lift it back over the control, and clear
   its corner the way the native select's own padding-right: 40px did.
   pointer-events: none (enquiry-form.css) lets clicks fall through to open
   the panel. Only the DEVELOPMENTS wrapper suppresses the chevron (chips
   need no arrow — rule below). */
.vl-enquiry-form .hbp_select:has(> select#hbp_buyerPosition)::after {
    z-index: 2;
}

.vl-enquiry-form .hbp_select:has(> select#hbp_buyerPosition) .ts-control {
    padding-right: 40px !important;
}

/* enquiry-form.css's .hbp_select chevron is for NATIVE selects — this
   wrapper's select is hidden from first paint (rule above) and replaced by
   the chip control, so the chevron never applies here, pre- or post-mount.
   (:has is 2023-baseline; without it a stray chevron floats behind the
   control — cosmetic-only degradation.) */
.vl-enquiry-form .hbp_select:has(> select#hbp_developmentMultiSelect)::after {
    display: none;
}