/* ==========================================================================
   Buscador avanzado (/search)
   --------------------------------------------------------------------------
   El formulario de la captura es una columna de checkbox sueltos: legible en
   el sitio original porque tenia otra densidad, aqui queda desangelado. Esto
   lo convierte en un panel de filtros con chips, sin tocar el marcado del
   theme (solo se estilan sus clases).

   Reusa los tokens declarados en mb-suggest.css (misma direccion de arte).
   ========================================================================== */

/* ---- panel de filtros -------------------------------------------------- */
#search-form-large.filters {
    gap: 18px;
    padding: 4px 2px;
}

#search-form-large fieldset {
    border: 1px solid var(--mbs-line);
    border-radius: var(--mbs-radius);
    background: var(--mbs-surface-2);
    padding: 14px 16px 16px;
    margin: 0;
}

#search-form-large legend {
    float: none;
    width: auto;
    margin: 0 0 10px;
    padding: 0;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mbs-text-3);
}

/* ---- chips ------------------------------------------------------------- */
#search-form-large .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#search-form-large .checkbox-wrapper { margin: 0; }

#search-form-large .checkbox {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 7px 12px;
    min-height: 34px;               /* area tactil comoda */
    border: 1px solid var(--mbs-line);
    border-radius: 999px;
    background: var(--mbs-surface);
    color: var(--mbs-text-2);
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--mbs-fast) var(--mbs-ease),
                border-color var(--mbs-fast) var(--mbs-ease),
                color var(--mbs-fast) var(--mbs-ease);
}

#search-form-large .checkbox:hover {
    border-color: var(--mbs-accent-soft);
    color: var(--mbs-text);
}

/* el chip marcado: :has() lo resuelve sin una linea de JS */
#search-form-large .checkbox:has(input:checked) {
    background: var(--mbs-accent);
    border-color: var(--mbs-accent-soft);
    color: #fff;
    font-weight: 700;
}

#search-form-large .checkbox:has(input:focus-visible) {
    outline: 2px solid var(--mbs-accent-soft);
    outline-offset: 2px;
}

/* la marca de verificacion del theme, a tamaño de chip */
#search-form-large .checkbox__input { display: inline-flex; }
#search-form-large .checkbox__control {
    display: inline-grid;
    place-content: center;
    width: 13px;
    height: 13px;
    border: 1px solid currentColor;
    border-radius: 3px;
    opacity: .55;
}
#search-form-large .checkbox:has(input:checked) .checkbox__control { opacity: 1; }
#search-form-large .checkbox__control svg { width: 9px; height: 9px; }
#search-form-large .radio__label { white-space: nowrap; }

/* el input real: invisible pero enfocable */
#search-form-large .checkbox input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* ---- barra de accion --------------------------------------------------- */
#search-form-large button[type="submit"] {
    align-self: flex-start;
    min-height: 42px;
    padding: 0 26px;
    border: 0;
    border-radius: 8px;
    background: var(--mbs-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--mbs-fast) var(--mbs-ease);
}
#search-form-large button[type="submit"]:hover { background: var(--mbs-accent-soft); }
#search-form-large button[type="submit"]:focus-visible {
    outline: 2px solid var(--mbs-accent-soft);
    outline-offset: 3px;
}

/* ---- cabecera de resultados -------------------------------------------- */
.container__left .section-header h2,
.main-container .section-header h2 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .01em;
    margin: 0;
    color: var(--mbs-text);
}

/* ---- estado vacio ------------------------------------------------------ */
.search-empty {
    border: 1px dashed var(--mbs-line);
    border-radius: var(--mbs-radius);
    padding: 34px 20px !important;
    color: var(--mbs-text-2);
}
.search-empty img { max-width: 168px; height: auto; opacity: .75; margin-bottom: 10px; }
.search-empty p { margin: 0; font-size: 13.5px; }

/* ---- movil ------------------------------------------------------------- */
@media (max-width: 767px) {
    #search-form-large fieldset { padding: 12px; }
    #search-form-large .checkbox { padding: 8px 11px; font-size: 12px; }
    #search-form-large button[type="submit"] { align-self: stretch; }
}

/* ---- sin :has(): el chip sigue siendo legible --------------------------- */
@supports not selector(:has(*)) {
    #search-form-large .checkbox input {
        position: static;
        width: 14px; height: 14px;
        opacity: 1;
        pointer-events: auto;
    }
    #search-form-large .checkbox__control { display: none; }
}