/* ==========================================================================
   The multi-select - «Тип имот» and «Локация» on both search panels
   (docs/architecture.md).

   `components/c-select.tpl` with `multiple=true`, turned into a slim-select by
   js1/c-multiselect.js. The vendor's stylesheet (css/vendor/slimselect.css)
   loads first and is never edited; this file is the site's look over it, and
   every value in it is a system token - the component is DERIVED, not
   measured: no frame draws a multi-select.

   Two surfaces, and each is a thing the system already has:

     the field   is `.c-select` - Paper Cream, a 1px Hairline Gold stroke, the
                 inset field shadow, the control radius, 50 tall on a search
                 panel, and the caret on the LEFT at x16 with the value at x40.
                 A visitor sees the same field as «За» beside it; only what
                 opens is different.
     the list    is a card of options. A chosen option takes the gold fill,
                 which is the system's one sanctioned meaning for a gold fill
                 ("fills only = chosen", tokens.css) - the same call the
                 paginator's current page makes. Hover is a tint, never gold:
                 a gold row under the pointer would read as chosen.

   Both surfaces carry `c-ms`: slim-select copies the native select's
   className onto them, and js1/c-multiselect.js gives the select that one
   class first. The list is appended to <body>, so nothing here is scoped by
   the panel.
   ========================================================================== */

.c-ms{
  --ss-primary-color: var(--c-gold);
  --ss-bg-color: var(--c-cream);
  --ss-font-color: var(--c-ink);
  --ss-placeholder-color: var(--c-ink);
  --ss-border-color: var(--c-gold);
  --ss-focus-color: var(--c-green);
  --ss-main-height: var(--c-field-h-tall);
  --ss-border-radius: var(--c-r-control);
  --ss-option-height: 40px;
  --ss-search-height: 40px;
}

/* --- the field ----------------------------------------------------------- */

/* The wrapper is a grid item in the panel's rows, and a grid item will not
   shrink below its content by default. A multi-select's content is its chosen
   values on ONE unwrapped line, so without this it took the 393 row's
   ratio of 96 / 98 / 129 for itself and squeezed «За» until «Наем» was gone.
   The line ends in an ellipsis instead. */
.c-field--multi{ min-width:0; }

.ss-main.c-ms{
  height:var(--c-field-h-tall);
  min-height:var(--c-field-h-tall);
  /* 39 + the 1px border = the 40 `.c-select` opens its value at, and the caret
     is the same data-URI glyph at the same x16, from the border box */
  /* 4 on the right, not `.c-select`'s 20: the ✕ that clears the field brings
     its own sides, and a narrow field needs the room - «Всички» in the 393
     row's 98px and «Всички квартали» at 1120 both fit with it and not with 20 */
  padding:0 4px 0 39px;
  background-color:var(--c-cream);
  background-origin:border-box;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%231c1c1c'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:16px center;
  border:1px solid var(--c-gold);
  border-radius:var(--c-r-control);
  box-shadow:var(--c-sh-field);
  font:400 var(--c-fs-body)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-ink);
}

/* the vendor's own caret is on the right; the design's is the one above */
.ss-main.c-ms .ss-arrow{ display:none; }

/* The value starts at the padding, like «За»'s does - the vendor indents it
   a second time. The placeholder is ink, not muted: «Всички» is a real
   state (every kind), the same word «За» shows as a value. */
.ss-main.c-ms .ss-values .ss-placeholder,
.ss-main.c-ms .ss-values .ss-multi-string{
  padding:0;
  color:var(--c-ink);
  font:inherit;
  line-height:var(--c-lh-sans);
}

/* «3 избрани» - text, not the vendor's gold pill: it is a count of the
   field's value, and a gold fill would say "chosen" about the field itself */
.ss-main.c-ms .ss-values .ss-max{
  padding:0;
  background:none;
  color:var(--c-ink);
  font:inherit;
}

/* the ✕ that clears the field */
.ss-main.c-ms .ss-deselect{ padding:0 4px; }
.ss-main.c-ms .ss-deselect svg path{ stroke:var(--c-ink); }

/* one focus treatment, the system's (base.css) - not the vendor's glow */
.ss-main.c-ms:focus{ box-shadow:var(--c-sh-field); }
.ss-main.c-ms:focus-visible{
  outline:2px solid var(--c-green);
  outline-offset:3px;
}
.ss-main.c-ms.ss-open-above,
.ss-main.c-ms.ss-open-below{ border-color:var(--c-gold); }

/* --- the list ------------------------------------------------------------ */

.ss-content.c-ms{
  background:var(--c-cream);
  border:1px solid var(--c-gold);
  border-radius:var(--c-r-control);
  box-shadow:var(--c-sh-card);
  font:400 var(--c-fs-body)/var(--c-lh-sans) var(--c-sans);
  color:var(--c-ink);
  overflow:hidden;
}

/* The search box is bare text on the card - no fill, no stroke, no focus
   ring (client decisions, 2026-09-23): it is focused the moment the list
   opens, so a ring would be on it every time, and the list is its only
   neighbour. The placeholder and the text caret say what it is. */
.ss-content.c-ms .ss-search{ padding:8px; }
.ss-content.c-ms .ss-search input,
.ss-content.c-ms .ss-search input:focus,
.ss-content.c-ms .ss-search input:focus-visible{
  height:40px;
  padding:0 12px;
  background:transparent;
  border:0;
  border-radius:0;
  outline:0;
  box-shadow:none;
  font:inherit;
  color:var(--c-ink);
}
.ss-content.c-ms .ss-search input::placeholder{ color:var(--c-muted); }

.ss-content.c-ms .ss-list .ss-option{
  padding:0 16px;
  color:var(--c-ink);
  border-left:0;
}

/* hover and the keyboard's highlight: a tint, so it never reads as chosen */
.ss-content.c-ms .ss-list .ss-option:hover:not(.ss-disabled),
.ss-content.c-ms .ss-list .ss-option.ss-highlighted{
  background:var(--c-cream-warm);
  color:var(--c-ink);
  border-left:0;
}

/* chosen: the gold fill - and it holds under the pointer, because hovering is
   how the second click that removes it is reached (the map's own rule) */
.ss-content.c-ms .ss-list .ss-option:not(.ss-disabled).ss-selected,
.ss-content.c-ms .ss-list .ss-option:not(.ss-disabled).ss-selected:hover{
  background:var(--c-gold);
  color:var(--c-ink);
}

.ss-content.c-ms .ss-list .ss-search-highlight{ background:var(--c-gold-tint); }

/* «Няма съвпадения» */
.ss-content.c-ms .ss-list .ss-error,
.ss-content.c-ms .ss-list .ss-searching{
  padding:12px 16px;
  color:var(--c-muted);
}

/* --- the phone's sheet (below 768px, slim-select's modal) ---------------- */
/* Nothing of its own: the sheet IS the list above (`.ss-content.c-ms`), set on
   the vendor's dark overlay, with the field's label as its title in white. */

/* --- without script ------------------------------------------------------ */
/* The native <select multiple> the panel falls back to is a listbox, and a
   listbox cannot be 50 tall - it shows four rows and scrolls. The caret goes:
   a listbox has nothing to drop down. */
select[multiple].c-select{
  height:auto;
  padding:6px 12px;
  background-image:none;
}