/* ─────────────────────────────────────────────────────────────────────────
   Shared filter-sheet skin — ONE source of truth for the visual styling of the
   filter controls in the espacios, items and servicios search sheets.

   Each page keeps its own LAYOUT (sheet position, slide, widths); the BOX /
   HEADER / ARROW / CLEAR visuals all come from the .mf-* classes here, so the
   three sheets can't drift. Enqueued on all three, AFTER each page's own CSS.

   Selectors are prefixed with BOTH page wrappers (#mcs = servicios, #msp =
   espacios/items) so they match the per-page rules' specificity and win by
   load order — no need to strip the per-page rules.
   ───────────────────────────────────────────────────────────────────────── */

/* Control box — search inputs AND dropdown triggers share one look.
   (Layout like display:flex stays on the per-page trigger rule; here we only
   set the box visuals so it applies equally to inputs and buttons.) */
#mcs .mf-box, #msp .mf-box {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 48px !important; min-height: 48px !important;
  padding: 0 14px !important;
  text-align: left !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 14px !important; font-weight: 500 !important;
  color: #0a0a0a !important;
  background: #f5f2eb !important;
  border: 2px solid #0a0a0a !important;
  border-radius: 0 !important;
  outline: none !important;
  cursor: pointer !important;
}
#mcs .mf-box::placeholder, #msp .mf-box::placeholder { color: #777 !important; font-weight: 400 !important; }

/* Dropdown trigger's value / placeholder text. */
#mcs .mf-val, #msp .mf-val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left !important; color: #0a0a0a; }
#mcs .mf-val.ph, #msp .mf-val.ph { color: #777 !important; font-weight: 400 !important; }

/* Dropdown chevron. */
#mcs .mf-arrow, #msp .mf-arrow { flex-shrink: 0; display: flex !important; align-items: center !important; margin-left: 8px; color: #777 !important; transition: transform .18s; }
#mcs .mf-arrow svg, #msp .mf-arrow svg { display: block; }

/* Clear-filters link. */
#mcs .mf-clear, #msp .mf-clear {
  display: inline-block !important;
  background: none !important; border: none !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px !important; font-weight: 500 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: #777 !important;
  text-decoration: underline !important; text-underline-offset: 3px !important;
  cursor: pointer !important;
  padding: 6px 0 !important; margin: 0 !important;
  text-align: left !important; width: auto !important;
}
#mcs .mf-clear:hover, #msp .mf-clear:hover { color: #0a0a0a !important; }

/* Sheet header title ("FILTROS") + close ✕. */
#mcs .mf-hd-title, #msp .mf-hd-title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 900 !important; font-size: 15px !important;
  letter-spacing: .12em !important; text-transform: uppercase !important;
  color: #0a0a0a !important; margin: 0 !important; display: block;
}
#mcs .mf-x, #msp .mf-x {
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: none !important; border: none !important;
  width: auto !important; height: auto !important;
  color: #0a0a0a !important;
  font-size: 22px !important; font-weight: 400 !important; line-height: 1 !important;
  cursor: pointer !important; padding: 4px !important; margin: 0 !important; flex-shrink: 0;
}
#mcs .mf-x:hover, #msp .mf-x:hover { color: #7c3aff !important; }