/* search-filters.css — La barra de filtros del buscador.
   Los iconos y los recuentos de cada gremio los genera
includes/search/search-filters.php como CSS en
   línea, porque dependen del id real de cada término. Aquí va todo lo demás. */

/* ---------------------------------------------------------------------------
   El contenedor
   --------------------------------------------------------------------------- */
.hp-widget--listing-filter{
  background:#fff; border:1px solid #E9EEF5; border-radius:16px; padding:16px 16px 14px;
}
/* Aire justo entre bloques: con 18px la barra obligaba a hacer scroll para ver el botón. */
.hp-form--listing-filter .hp-form__fields{ display:flex; flex-direction:column; gap:12px; }

/* Cada grupo, con su título en versalitas. */
.hp-form--listing-filter .hp-field__label,
.hp-form--listing-filter .hp-form__label{
  display:block; margin:0 0 6px;
  font:700 11.5px/1 Inter,sans-serif; letter-spacing:.05em; text-transform:uppercase; color:#64748B;
}

/* ---------------------------------------------------------------------------
   Gremios: lista con icono, nombre y recuento
   --------------------------------------------------------------------------- */
.hp-form--listing-filter .hp-field--radio ul{ list-style:none; margin:0; padding:0; }
.hp-form--listing-filter .hp-field--radio ul ul{ margin:0; padding:0; }
.hp-form--listing-filter .hp-field--radio li{ margin:0; }

.hp-form--listing-filter .hp-field--radio label{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:9px 12px; border-radius:10px;
  font:600 14px/1.3 Inter,sans-serif; color:#334155;
  transition:background .15s, color .15s;
}
.hp-form--listing-filter .hp-field--radio label:hover{ background:#F1F5F9; color:#0F172A; }

/* El control se VE: sin él no había forma de saber que la lista es marcable — solo cambiaba el
   color del elegido. Es el radio nativo, teñido con accent-color, que además ya trae gratis el
   comportamiento de teclado y lo que anuncian los lectores de pantalla. */
.hp-form--listing-filter .hp-field--radio input[type="radio"]{
  position:static; opacity:1; width:17px; height:17px; margin:0;
  flex:0 0 auto; cursor:pointer; accent-color:#2563EB;
}
/* En los servicios, algo más pequeño: son el segundo nivel. */
.hp-form--listing-filter .hp-field--radio ul ul input[type="radio"]{ width:15px; height:15px; }
.hp-form--listing-filter .hp-field--radio label:focus-within{
  box-shadow:0 0 0 3px rgba(37,99,235,.25);
}

/* El texto de cada gremio: el icono va delante (::before) y el recuento detrás (::after). */
.hp-form--listing-filter .hp-field--radio label > span{
  display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0;
}
.hp-form--listing-filter input[name="_category"] + span::before{
  font-family:"Font Awesome 5 Free"; font-weight:900; font-size:14px;
  width:20px; text-align:center; color:#94A3B8; flex:0 0 auto;
}
.hp-form--listing-filter input[name="_category"] + span::after{
  margin-left:auto; flex:0 0 auto;
  padding:2px 8px; border-radius:999px; background:#F1F5F9;
  font:700 11.5px Inter,sans-serif; color:#64748B;
}

/* El gremio elegido. */
.hp-form--listing-filter input[name="_category"]:checked + span{ color:#2563EB; font-weight:800; }
.hp-form--listing-filter input[name="_category"]:checked + span::before{ color:#2563EB; }
.hp-form--listing-filter input[name="_category"]:checked + span::after{ background:#EFF6FF; color:#2563EB; }
.hp-form--listing-filter .hp-field--radio label:has(input:checked){ background:#EFF6FF; }

/* «Todos los gremios» es la opción de arriba: sin icono y algo más discreta. */
.hp-form--listing-filter input[name="_category"][value="0"] + span::before{ content:"\f00b"; }

/* ---------------------------------------------------------------------------
   Desplegables (Servicio y Localidad)
   --------------------------------------------------------------------------- */
.hp-form--listing-filter select,
.hp-form--listing-filter .ts-control{
  width:100%; padding:10px 12px; border:1px solid #D8E0EC; border-radius:10px;
  font:500 14px Inter,sans-serif; color:#0F172A; background:#fff;
}
.hp-form--listing-filter select:focus,
.hp-form--listing-filter .ts-wrapper.focus .ts-control{
  outline:none; border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.12);
}

/* ---------------------------------------------------------------------------
   Interruptores: «Abierto ahora» y «Solo verificados»
   --------------------------------------------------------------------------- */
.hp-form--listing-filter .hp-field--checkbox{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  padding:9px 12px; border:1px solid #E9EEF5; border-radius:12px; background:#fff;
  font:600 13.5px/1.4 Inter,sans-serif; color:#334155;
  transition:border-color .15s, background .15s;
}
.hp-form--listing-filter .hp-field--checkbox:hover{ border-color:#CBD5E1; background:#F8FAFC; }
.hp-form--listing-filter .hp-field--checkbox input[type="checkbox"]{
  margin:1px 0 0; accent-color:#2563EB; width:17px; height:17px; flex:0 0 auto;
}
.hp-form--listing-filter .hp-field--checkbox:has(input:checked){
  border-color:#2563EB; background:#EFF6FF; color:#1E3A8A;
}

/* ---------------------------------------------------------------------------
   Botón
   --------------------------------------------------------------------------- */
.hp-form--listing-filter .hp-form__footer{ margin-top:2px; }
.hp-form--listing-filter button[type="submit"]{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:12px 20px; border-radius:999px; border:1px solid #2563EB;
  background:#2563EB; color:#fff !important; cursor:pointer;
  font:700 14.5px Inter,sans-serif;
}
.hp-form--listing-filter button[type="submit"]:hover{ background:#1D4ED8; border-color:#1D4ED8; }
.hp-form--listing-filter button[type="submit"]::before{
  font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f002";   /* lupa */
}

/* ---------------------------------------------------------------------------
   Filtros activos, sobre los resultados
   --------------------------------------------------------------------------- */
.ctop-filtros-activos{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 18px;
}
.ctop-filtros-activos__titulo{
  font:700 11.5px/1 Inter,sans-serif; letter-spacing:.05em; text-transform:uppercase; color:#64748B;
  margin-right:2px;
}
.ctop-chip{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  padding:6px 12px; border-radius:999px;
  background:#EFF6FF; border:1px solid #BFDBFE; color:#1E3A8A !important;
  font:600 13px Inter,sans-serif; transition:background .15s, border-color .15s;
}
.ctop-chip:hover{ background:#DBEAFE; border-color:#93C5FD; }
.ctop-chip i{ font-size:11px; opacity:.7; }
.ctop-chip:hover i{ opacity:1; }
.ctop-chip--limpiar{
  background:#fff; border-color:#E2E8F0; color:#64748B !important; font-weight:700;
}
.ctop-chip--limpiar:hover{ background:#F8FAFC; border-color:#CBD5E1; color:#0F172A !important; }

/* ---------------------------------------------------------------------------
   Móvil: la barra vive dentro del modal de HivePress
   --------------------------------------------------------------------------- */
@media (max-width:767px){
  .hp-widget--listing-filter{ border:0; padding:0; }
  .ctop-filtros-activos{ margin-bottom:14px; }
}

/* Navegadores sin :has() (Firefox antiguo) pierden solo el fondo del elegido, no la función. */
@supports not (selector(:has(*))){
  .hp-form--listing-filter .hp-field--checkbox:has(input:checked){ border-color:#E9EEF5; background:#fff; }
}

/* ---------------------------------------------------------------------------
   Servicios desplegados bajo el gremio elegido
   ---------------------------------------------------------------------------
   Son el segundo nivel del mismo árbol de radios. Se marcan como una rama: sangrados, colgando de
   una línea vertical y con la tipografía más ligera, para que se lean como «dentro de» el gremio y
   no como diez gremios más. */
.hp-form--listing-filter .hp-field--radio ul ul{
  margin:2px 0 6px; padding-left:16px; position:relative;
}
.hp-form--listing-filter .hp-field--radio ul ul::before{
  content:""; position:absolute; left:6px; top:4px; bottom:8px;
  width:2px; border-radius:2px; background:#E2E8F0;
}

.hp-form--listing-filter .hp-field--radio ul ul label{
  padding:7px 10px; font:500 13.5px/1.3 Inter,sans-serif; color:#475569;
}
.hp-form--listing-filter .hp-field--radio ul ul label:hover{ background:#F8FAFC; }

/* Los servicios no llevan icono de gremio ni recuento propio: sería ruido en cada línea. */
.hp-form--listing-filter .hp-field--radio ul ul input[name="_category"] + span::before,
.hp-form--listing-filter .hp-field--radio ul ul input[name="_category"] + span::after{ content:none; }

/* El servicio elegido: punto azul a la izquierda en vez del fondo entero. */
.hp-form--listing-filter .hp-field--radio ul ul input:checked + span{ color:#2563EB; font-weight:700; }
.hp-form--listing-filter .hp-field--radio ul ul label:has(input:checked){ background:#EFF6FF; }


/* Sin JavaScript el panel no existe, así que la lista de radios se queda a la vista tal cual, con
   todos los servicios desplegados. Es más larga de lo ideal, pero se puede filtrar igualmente: el
   formulario es el mismo. Con JS, `filter-pickers.js` la oculta y pone el botón del panel. */

/* ---------------------------------------------------------------------------
   Filtros en ventana emergente (assets/js/search/filter-pickers.js)
   ---------------------------------------------------------------------------
   Gremio y localidad se eligen en un panel, no en la barra. Los controles de verdad siguen en el
   formulario pero ocultos: el panel solo los marca, así que sin JavaScript la barra sigue siendo
   una lista de radios y un desplegable que funcionan igual. */
/* Los controles nativos se ocultan DESDE EL CSS, no desde el JS: si esperaran al script, la barra
   se pintaba un instante con los 70 radios y el desplegable de zona, y luego pegaba el salto. El
   <noscript> de
includes/search/search-filters.php los devuelve cuando no hay JavaScript. */
/* Se oculta el ENVOLTORIO del campo, no el control de dentro: `div.hp-form__field--radio` lleva
   además la etiqueta y sigue contando en el `gap` del formulario, así que escondiendo solo el
   `.hp-field--radio` quedaba un hueco vacío entre «Gremio» y «Localidad». */
.hp-form--listing-filter .hp-form__field--radio,
.hp-form--listing-filter .hp-form__field:has(select[name="zona"]){ display:none; }

/* Respaldo para navegadores sin :has(): el campo de zona lleva la clase del tipo select. */
.hp-form--listing-filter .hp-form__field--select{ display:none; }

/* Navegadores sin :has(): el desplegable de zona se queda a la vista. Molesta menos que perderlo. */
.ctop-pick-oculto{ display:none !important; }

/* El botón que abre cada panel */
.ctop-pick-btn{
  display:flex; align-items:center; gap:10px; width:100%; cursor:pointer;
  padding:11px 13px; border:1px solid #D8E0EC; border-radius:12px; background:#fff;
  font:600 14px/1.3 Inter,sans-serif; color:#0F172A; text-align:left;
  transition:border-color .15s, box-shadow .15s;
}
.ctop-pick-btn:hover{ border-color:#94A3B8; }
/* Todos los estados declarados: el reset de hello-elementor pinta button:focus/:hover de granate
   (#c36) y base.css solo lo neutraliza en los botones SIN clase. */
.ctop-pick-btn:focus,
.ctop-pick-btn:active{ background:#fff; color:#0F172A; border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.ctop-pick-btn:focus-visible{ outline:2px solid #2563EB; outline-offset:1px; }
.ctop-pick-btn > span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* El icono y la flecha van por CSS: el campo `button` de HivePress escapa su texto, así que no
   admite etiquetas dentro. FA5 — los nombres de FA6 no tienen glifo aquí. */
.ctop-pick-btn::before{
  font-family:"Font Awesome 5 Free"; font-weight:900; font-size:15px;
  color:#2563EB; flex:0 0 auto;
}
.ctop-pick-btn[data-ctop-pick="gremio"]::before{ content:"\f009"; }   /* cuadrícula */
.ctop-pick-btn[data-ctop-pick="zona"]::before{   content:"\f3c5"; }   /* marcador de mapa */
.ctop-pick-btn::after{
  font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f078";  /* chevron */
  color:#94A3B8; font-size:11px; flex:0 0 auto;
}

/* El panel */
/* El z-index tiene que estar por ENCIMA de todo lo flotante de terceros, no solo alto.
   La pestaña de CookieYes para reabrir el aviso se pone en 999999 y la barra de administración de
   WordPress en 99999: con 100000 el panel quedaba por debajo de la primera y la tapaba justo en la
   esquina donde está el botón de cerrar. Se sube por encima de ambas. */
.ctop-pick-modal{
  position:fixed; inset:0; z-index:1000001;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(15,23,42,.55);
}
body.ctop-pick-abierto{ overflow:hidden; }

.ctop-pick-box{
  width:100%; max-width:560px; max-height:82vh; display:flex; flex-direction:column;
  background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 24px 60px rgba(15,23,42,.28);
}
.ctop-pick-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid #E9EEF5;
  font:800 16px Montserrat,sans-serif; color:#0F172A;
}
.ctop-pick-close{
  width:32px; height:32px; padding:0; cursor:pointer; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:8px; background:transparent; color:#64748B;
}
.ctop-pick-close:hover{ background:#F1F5F9; color:#0F172A; }
.ctop-pick-close:focus,
.ctop-pick-close:active{ background:transparent; color:#64748B; }
.ctop-pick-body{ padding:16px 20px 20px; overflow-y:auto; }

/* Gremios y sus servicios */
.ctop-pick-todos{
  display:flex; align-items:center; gap:9px; width:100%; cursor:pointer; margin-bottom:14px;
  padding:11px 14px; border:1px dashed #CBD5E1; border-radius:12px; background:#fff;
  font:700 14px Inter,sans-serif; color:#2563EB; text-align:left;
}
.ctop-pick-todos:hover{ background:#EFF6FF; border-color:#93C5FD; }
.ctop-pick-todos:focus,
.ctop-pick-todos:active{ background:#fff; color:#2563EB; border-color:#CBD5E1; }

.ctop-pick-grupo{ margin-bottom:16px; }
.ctop-pick-grupo__titulo{
  display:block; width:100%; cursor:pointer; margin:0 0 8px;
  padding:9px 12px; border:0; border-radius:10px; background:#F8FAFC;
  font:800 14.5px Montserrat,sans-serif; color:#0F172A; text-align:left;
}
.ctop-pick-grupo__titulo:hover{ background:#EFF6FF; color:#2563EB; }
.ctop-pick-grupo__titulo:focus,
.ctop-pick-grupo__titulo:active{ background:#F8FAFC; color:#0F172A; }
.ctop-pick-grupo__titulo.is-actual{ background:#2563EB; color:#fff; }

.ctop-pick-servicios{ display:flex; flex-wrap:wrap; gap:7px; padding-left:2px; }
.ctop-pick-servicio{
  cursor:pointer; padding:7px 13px; border-radius:999px;
  border:1px solid #E2E8F0; background:#fff;
  font:600 13px Inter,sans-serif; color:#475569;
}
.ctop-pick-servicio:hover{ background:#F1F5F9; border-color:#CBD5E1; color:#0F172A; }
.ctop-pick-servicio:focus,
.ctop-pick-servicio:active{ background:#fff; color:#475569; border-color:#E2E8F0; }
.ctop-pick-servicio.is-actual{ background:#EFF6FF; border-color:#2563EB; color:#2563EB; }

/* Localidades */
.ctop-pick-buscar{
  width:100%; margin-bottom:14px; padding:11px 14px;
  border:1px solid #D8E0EC; border-radius:10px;
  font:500 14px Inter,sans-serif; color:#0F172A;
}
.ctop-pick-buscar:focus{ outline:none; border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,.12); }

.ctop-pick-fila{ position:relative; padding-right:36px; }
.ctop-pick-zona{
  display:block; width:100%; cursor:pointer;
  padding:9px 12px; border:0; border-radius:9px; background:transparent;
  font:600 14px Inter,sans-serif; color:#334155; text-align:left;
}
.ctop-pick-zona:hover{ background:#F1F5F9; color:#0F172A; }
.ctop-pick-zona:focus,
.ctop-pick-zona:active{ background:transparent; color:#334155; }
.ctop-pick-zona em{ font-style:normal; font-size:11.5px; color:#94A3B8; margin-left:6px; }

.ctop-pick-exp{
  position:absolute; top:4px; right:0; width:30px; height:30px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:8px; background:transparent; color:#94A3B8; font-size:11px;
}
.ctop-pick-exp:hover{ background:#E2E8F0; color:#0F172A; }
.ctop-pick-exp:focus,
.ctop-pick-exp:active{ background:transparent; color:#94A3B8; }
.ctop-pick-fila.is-open > .ctop-pick-exp{ transform:rotate(90deg); color:#2563EB; }

.ctop-pick-hijos{ display:none; padding-left:16px; border-left:2px solid #E2E8F0; margin-left:6px; }
.ctop-pick-fila.is-open > .ctop-pick-hijos{ display:block; }

.ctop-pick-cargando{ padding:14px 12px; font:500 13.5px Inter,sans-serif; color:#94A3B8; }

@media (max-width:600px){
  .ctop-pick-modal{ padding:0; align-items:flex-end; }
  .ctop-pick-box{ max-width:none; max-height:92vh; border-radius:18px 18px 0 0; }
}

/* ---------------------------------------------------------------------------
   Blindaje del botón de los paneles
   ---------------------------------------------------------------------------
   El campo `button` de HivePress añade sus propias clases: el botón acaba siendo
   `class="ctop-pick-btn button hp-field hp-field--button"`. Esa clase `button` la estilan HivePress,
   WooCommerce y Elementor, y sus reglas de hover empatan en especificidad con las de aquí (0,2,0):
   con empate manda el orden de carga, que no controlamos del todo. Se sube la especificidad
   anteponiendo el formulario y se declaran TODOS los estados —incluido `:focus`, que es por donde
   se colaba el granate `#c36` del reset de hello-elementor— para que el color no dependa de quién
   cargue el último. */
.hp-form--listing-filter .ctop-pick-btn,
.hp-form--listing-filter .ctop-pick-btn:link,
.hp-form--listing-filter .ctop-pick-btn:visited{
  background:#fff; color:#0F172A; border:1px solid #D8E0EC; box-shadow:none;
}
.hp-form--listing-filter .ctop-pick-btn:hover{
  background:#F8FAFC; color:#0F172A; border-color:#94A3B8; box-shadow:none;
}
.hp-form--listing-filter .ctop-pick-btn:focus,
.hp-form--listing-filter .ctop-pick-btn:active{
  background:#fff; color:#0F172A; border-color:#2563EB;
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.hp-form--listing-filter .ctop-pick-btn:focus:hover{ background:#F8FAFC; }
.hp-form--listing-filter .ctop-pick-btn::before{ color:#2563EB; }
.hp-form--listing-filter .ctop-pick-btn::after{ color:#94A3B8; }

/* ---------------------------------------------------------------------------
   La barra fija: sticky nativo
   ---------------------------------------------------------------------------
   `position: sticky` se pega mientras queda columna al lado y se suelta sola al terminar. Con la
   librería de HivePress la barra se quedaba clavada durante toda la página, incluido el pie.

   `align-self: flex-start` es imprescindible: la fila es flex y por defecto estira la columna a
   toda su altura. Estirada, la barra no tiene por dónde deslizarse dentro de sí misma y el sticky
   no hace nada. Encogiéndola a su contenido, el recorrido pasa a ser la fila entera.

   La separación superior sale de `--ctop-sticky-top`, que mide filter-pickers.js con la altura real
   de la cabecera flotante; el 112px es solo el respaldo hasta que el script la calcula. */
/* `overflow-x: hidden` en <html>/<body> CONVIERTE la raíz en contenedor de scroll y, en Chrome,
   eso deja sin efecto el `position: sticky` de cualquier descendiente. Medido en el navegador: el
   panel bajaba los 900px enteros del scroll. `clip` recorta igual pero NO crea contenedor de
   scroll, así que el sticky vuelve a funcionar y se sigue evitando el desplazamiento horizontal.
   Va en el archivo del buscador y no en base.css para no cambiar el comportamiento del resto. */
body.post-type-archive-hp_listing,
body.post-type-archive-hp_listing > html,
html:has(body.post-type-archive-hp_listing),
body.tax-hp_listing_category,
html:has(body.tax-hp_listing_category){
  overflow-x: clip;
}

@media (min-width: 768px){
  .hp-page__sidebar{
    position: sticky;
    top: var(--ctop-sticky-top, 112px);
    align-self: flex-start;
    /* Sin `max-height` ni `overflow` propios: dárselos convierte el panel en su propio contenedor
       de scroll y añade otra capa de problemas. Cabe de sobra (unos 500px). */
  }

  /* Restos que deja StickySidebar si llegó a montarse antes de desmontarla. */
  .hp-page__sidebar > .inner-wrapper-sticky{
    position: static !important;
    width: auto !important;
    transform: none !important;
  }
}