/**
 * ========================================
 * FILTROS HORIZONTALES ESTILO MODERNO
 * ========================================
 * Diseño con iconos y botones redondeados
 * Similar a subcategorías
 */

/* Contenedor de filtros horizontales */
.dgwt-wcas-filters-horizontal,
.woocommerce-filters-horizontal,
.fibo-filters-horizontal {
    display: flex;
    gap: 12px;
    padding: 15px 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

/* Ocultar scrollbar pero mantener funcionalidad */
.dgwt-wcas-filters-horizontal::-webkit-scrollbar {
    height: 4px;
}

.dgwt-wcas-filters-horizontal::-webkit-scrollbar-track {
    background: transparent;
}

.dgwt-wcas-filters-horizontal::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 4px;
}

/* Cada filtro como botón redondeado */
.dgwt-wcas-filter-item,
.fibo-filter-item,
.woocommerce-filter-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 30px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-decoration: none;
}

/* Hover effect */
.dgwt-wcas-filter-item:hover,
.fibo-filter-item:hover {
    background: #fff;
    border-color: rgb(251, 107, 5);
    color: rgb(251, 107, 5);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Estado activo/seleccionado */
.dgwt-wcas-filter-item.active,
.fibo-filter-item.active,
.dgwt-wcas-filter-item.selected {
    background: rgb(251, 107, 5);
    border-color: rgb(251, 107, 5);
    color: #fff;
    font-weight: 600;
}

/* Icono del filtro */
.dgwt-wcas-filter-item::before,
.fibo-filter-item::before {
    content: '';
    width: 24px;
    height: 24px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.dgwt-wcas-filter-item:hover::before,
.dgwt-wcas-filter-item.active::before {
    opacity: 1;
}

/* Iconos específicos por tipo de filtro */

/* Precio */
.dgwt-wcas-filter-item[data-filter="price"]::before,
.fibo-filter-item[data-type="price"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z'/%3E%3C/svg%3E");
}

/* Marca */
.dgwt-wcas-filter-item[data-filter="brand"]::before,
.fibo-filter-item[data-type="brand"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

/* Categoría */
.dgwt-wcas-filter-item[data-filter="category"]::before,
.fibo-filter-item[data-type="category"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z'/%3E%3C/svg%3E");
}

/* Stock */
.dgwt-wcas-filter-item[data-filter="stock"]::before,
.fibo-filter-item[data-type="stock"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
}

/* Atributos (sabor, etc) */
.dgwt-wcas-filter-item[data-filter*="pa_"]::before,
.fibo-filter-item[data-type="attribute"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M12 2l-5.5 9h11z'/%3E%3Ccircle cx='17.5' cy='17.5' r='4.5'/%3E%3Cpath d='M3 13.5h8v8H3z'/%3E%3C/svg%3E");
}

/* Icono activo en blanco */
.dgwt-wcas-filter-item.active::before {
    filter: brightness(0) invert(1);
}

/* Badge de contador (opcional) */
.dgwt-wcas-filter-count,
.fibo-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 11px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 6px;
}

.dgwt-wcas-filter-item.active .dgwt-wcas-filter-count {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* Botón "Borrar filtros" */
.dgwt-wcas-clear-filters,
.fibo-clear-filters {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: 1px solid #e8e8e8;
    border-radius: 30px;
    color: #999;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dgwt-wcas-clear-filters:hover {
    background: #ffebee;
    border-color: #ef5350;
    color: #ef5350;
}

.dgwt-wcas-clear-filters::before {
    content: '✕';
    font-size: 16px;
    font-weight: 700;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .dgwt-wcas-filters-horizontal {
        gap: 8px;
        padding: 10px 0;
    }
    
    .dgwt-wcas-filter-item,
    .fibo-filter-item {
        padding: 10px 16px;
        font-size: 13px;
        gap: 8px;
    }
    
    .dgwt-wcas-filter-item::before,
    .fibo-filter-item::before {
        width: 20px;
        height: 20px;
    }
    
    .dgwt-wcas-filter-count {
        min-width: 20px;
        height: 20px;
        font-size: 11px;
    }
}

/* Animación de entrada */
@keyframes filterSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dgwt-wcas-filter-item,
.fibo-filter-item {
    animation: filterSlideIn 0.3s ease-out;
}

/* Estilos para filtros tipo checkbox/radio */
.dgwt-wcas-filter-item input[type="checkbox"],
.dgwt-wcas-filter-item input[type="radio"] {
    display: none;
}

.dgwt-wcas-filter-item input:checked + label {
    background: rgb(251, 107, 5);
    color: #fff;
}

/* Gradiente sutil en hover */
.dgwt-wcas-filter-item:hover {
    background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
}

.dgwt-wcas-filter-item.active {
    background: linear-gradient(135deg, rgb(251, 107, 5) 0%, rgb(231, 97, 5) 100%);
}

/* Shadow más pronunciado en activo */
.dgwt-wcas-filter-item.active {
    box-shadow: 0 4px 12px rgba(251, 107, 5, 0.3);
}

/* Texto truncado en filtros largos */
.dgwt-wcas-filter-item span,
.fibo-filter-item span {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Indicador de más filtros (flecha) */
.dgwt-wcas-filters-horizontal::after {
    content: '→';
    position: sticky;
    right: 0;
    display: flex;
    align-items: center;
    padding: 0 15px;
    background: linear-gradient(90deg, transparent 0%, white 30%);
    font-size: 20px;
    color: #999;
    pointer-events: none;
}

.dgwt-wcas-filters-horizontal::-webkit-scrollbar-thumb {
    background: rgb(251, 107, 5);
}