/* --- Contenedor Principal del Widget --- */
.mfd-widget-container {
    margin-bottom: 25px;
}

/* --- Estilos base del filtro (Vista Escritorio) --- */
.mfd-contenedor-filtro {
    border: 1px solid #e0e0e0;
    padding: 20px;
}

.mfd-filtro-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.mfd-titulo {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

.mfd-filtro-busqueda input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
}

.mfd-lista-marcas {
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
    max-height: 280px; /* Altura máxima antes de mostrar scroll */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f1f1f1;
}

.mfd-lista-marcas::-webkit-scrollbar {
    width: 5px;
}
.mfd-lista-marcas::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.mfd-lista-marcas::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 5px;
}

.mfd-lista-marcas li {
    margin-bottom: 10px;
}

.mfd-lista-marcas label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    width: 100%;
}

.mfd-lista-marcas input[type="checkbox"] {
    margin-right: 12px;
    height: 18px;
    width: 18px;
    flex-shrink: 0;
}

.mfd-lista-marcas span {
    margin-left: auto;
    color: #888;
    font-size: 14px;
    padding-left: 10px;
}

/* --- Estilos para la vista móvil (Off-canvas) --- */
.mfd-movil-btn {
    display: none; /* Oculto por defecto en escritorio */
    width: 100%;
    padding: 15px;
    background-color: #1e85be; /* Color de ejemplo */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 20px;
}

.mfd-cerrar-filtro {
    display: none; /* Oculto en escritorio */
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0 5px;
}

/* Media Query para activar la vista móvil */
@media (max-width: 768px) {
    .mfd-movil-btn {
        display: block; /* Mostrar el botón de filtro */
    }
    .mfd-cerrar-filtro {
        display: block; /* Mostrar el botón de cerrar en el panel */
    }
    .mfd-contenedor-filtro {
        position: fixed;
        top: 0;
        left: -100%; /* Empieza oculto a la izquierda */
        width: 85%;
        max-width: 340px;
        height: 100%;
        background-color: white;
        z-index: 99999;
        transition: left 0.35s ease-in-out;
        overflow-y: auto;
        box-shadow: 3px 0 15px rgba(0,0,0,0.2);
    }
    .mfd-contenedor-filtro.abierto {
        left: 0; /* Clase para mostrar el menú */
    }
}