/* Estilos Base para Cruzeiro Gomas Filter */
#cgf-filter-sidebar {
    font-family: Roboto;
    padding: 15px;
    border: 1px solid #e0e0e0;
    background-color: #fff;
}

#cgf-filter-sidebar h3,
#cgf-filter-sidebar h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1em;
    font-weight: bold;
}

#cgf-filter-sidebar h3{
    color: #0A8146;
    font-size: 1.2rem;
    text-align: center;
    font-weight: 600;
}

.cgf-filter-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.cgf-filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Active Filters */
#cgf-active-filters-display .cgf-active-filter-tag {
    display: inline-block;
    background-color: #e9e9e9;
    color: #333;
    padding: 5px 8px;
    margin-right: 5px;
    margin-bottom: 5px;
    font-size: 0.9em;
}
#cgf-active-filters-display .cgf-remove-filter {
    margin-left: 5px;
    color: #0A8146;
    cursor: pointer;
    font-weight: bold;
}
#cgf-reset-all-filters {
    background-color: #0A8146;
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.9em;
    margin-top:10px;
}
#cgf-reset-all-filters:hover {
    background-color: #0A8146;
}


/* Switches de Stock (similares a la imagen) */
.cgf-switch {
    position: relative;
    display: inline-block;
    width: 44px; /* Ancho ajustado */
    height: 24px; /* Alto ajustado */
    vertical-align: middle;
    margin-right: 5px;
}

.cgf-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cgf-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc; /* Gris por defecto */
    -webkit-transition: .4s;
    transition: .4s;
}

.cgf-slider:before {
    position: absolute;
    content: "";
    height: 18px; /* Tamaño del círculo */
    width: 18px;
    left: 3px; /* Posición inicial del círculo */
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.cgf-switch input:checked + .cgf-slider {
    background-color: #0A8146; /* Verde cuando está activo */
}
/* Para el radio button no seleccionado, si quieres que el toggle sea gris */
.cgf-switch.cgf-switch-off input:not(:checked) + .cgf-slider {
    background-color: #ccc;
}


.cgf-switch input:focus + .cgf-slider {
    box-shadow: 0 0 1px #0A8146;
}

.cgf-switch input:checked + .cgf-slider:before {
    -webkit-transform: translateX(20px); /* Desplazamiento del círculo */
    -ms-transform: translateX(20px);
    transform: translateX(20px);
}

.cgf-slider.cgf-round {
    border-radius: 24px; /* Hacerlo redondo */
}

.cgf-slider.cgf-round:before {
    border-radius: 50%;
}

/* Price Slider */
#cgf-price-slider-range {
    margin: 10px 0;
}
#cgf-amount {
    font-weight: bold;
    color: #333;
}
.ui-slider-handle {
    border-radius: 50% !important; /* Círculos */
    background: #0A8146 !important; /* Verde */
    border: 2px solid white !important;
    box-shadow: 0 0 3px rgba(0,0,0,0.2);
}
.ui-slider-range {
    background: #0A8146 !important; /* Verde */
}


/* Categorías y Acordeón */
.cgf-category-list {
    list-style: none;
    padding-left: 0;
}
.cgf-category-list ul { /* Sub-niveles */
    padding-left: 20px;
    margin-top: 5px;
}
.cgf-category-list li {
    margin-bottom: 5px;
}
.cgf-category-list label {
    cursor: pointer;
}
.cgf-accordion-toggle {
    display: inline-block;
    margin-left: 5px;
    cursor: pointer;
    font-size: 0.8em;
    padding: 2px 5px;
    /* Estilo de flecha (puedes usar un icono SVG o FontAwesome) */
}
.cgf-accordion-toggle::before {
    font-family: FontAwesome;
    content: '\f078'; /* Flecha hacia abajo por defecto */
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}
.cgf-accordion-toggle.cgf-open::before {
    transform: rotate(-180deg); /* Flecha hacia arriba cuando está abierto */
}

.cgf-collapsible-header { /* Para encabezados de sección colapsables */
    float: right;
}
.cgf-collapsible-header::before {
    content: '︿'; /* Flecha hacia arriba por defecto (sección visible) */
}
.cgf-collapsible-header.cgf-collapsed::before {
    content: '﹀'; /* Flecha hacia abajo (sección oculta) */
    transform: none; /* Resetear rotación si se usa la misma clase que el acordeón de categorías */
}


/* Discount Filters */
.cgf-filter-section ul {
    list-style: none;
    padding-left: 0;
}
.cgf-filter-section li {
    margin-bottom: 5px;
}

/* Product Count */
#cgf-product-count-display {
    color: #555;
    font-size:.8rem;
}

/* Loader */
#cgf-filter-sidebar.cgf-loading::after,
.cgf-products-container.cgf-loading::after { /* Aplica loader al contenedor de productos */
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0A8146; /* Verde */
    border-radius: 50%;
    animation: cgf-spin 1s linear infinite;
    z-index: 1000;
}
#cgf-filter-sidebar.cgf-loading,
.cgf-products-container.cgf-loading {
    position:relative; /* Necesario para el posicionamiento absoluto del loader */
    opacity:0.7;
}


@keyframes cgf-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* --- Estilos para Checkboxes y Radio Buttons Personalizados --- */

/* Contenedor del Label */
.cgf-styled-checkbox-label,
.cgf-styled-radio-label {
    display: flex; /* Alinear el custom-input y el texto */
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none; /* Evitar que el texto se seleccione al hacer clic */
    margin-bottom: 8px; /* Espacio entre elementos de la lista */
    padding-left: 5px; /* Un pequeño padding para que no esté pegado al borde */
}

/* Ocultar el input nativo */
.cgf-styled-checkbox-label input[type="checkbox"],
.cgf-styled-radio-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Elemento visual personalizado para Checkbox */
.cgf-styled-checkbox-custom {
    display: inline-block;
    width: 18px; /* Ancho del recuadro */
    height: 18px; /* Alto del recuadro */
    background-color: #fff; /* Fondo cuando no está seleccionado */
    border: 1px solid #adb5bd; /* Borde gris claro */
    border-radius: 3px; /* Bordes ligeramente redondeados */
    margin-right: 10px; /* Espacio entre el check y el texto */
    position: relative; /* Para posicionar el checkmark interno */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Elemento visual personalizado para Radio Button */
.cgf-styled-radio-custom {
    display: inline-block;
    width: 18px; /* Diámetro del círculo exterior */
    height: 18px;
    background-color: #fff;
    border: 1px solid #adb5bd;
    border-radius: 50%; /* Hacerlo circular */
    margin-right: 10px;
    position: relative;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Checkmark (la "V") para el Checkbox */
.cgf-styled-checkbox-label input[type="checkbox"]:checked + .cgf-styled-checkbox-custom {
    background-color: #0A8146; /* Fondo verde cuando está seleccionado (igual al switch) */
    border-color: #0A8146;
}

.cgf-styled-checkbox-label input[type="checkbox"]:checked + .cgf-styled-checkbox-custom::after {
    content: "";
    position: absolute;
    left: 6px; /* Ajustar posición X del checkmark */
    top: 2px;  /* Ajustar posición Y del checkmark */
    width: 5px;  /* Ancho del checkmark */
    height: 10px; /* Alto del checkmark */
    border: solid white; /* Color del checkmark */
    border-width: 0 2px 2px 0; /* Grosor y forma del checkmark (L invertida) */
    transform: rotate(45deg);
    opacity: 1;
}

/* Punto interior para el Radio Button */
.cgf-styled-radio-label input[type="radio"]:checked + .cgf-styled-radio-custom {
    border-color: #0A8146; /* Borde verde */
    /* background-color: #fff; Opcional: mantener fondo blanco o también verde */
}

.cgf-styled-radio-label input[type="radio"]:checked + .cgf-styled-radio-custom::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; /* Tamaño del punto interior */
    height: 10px;
    border-radius: 50%;
    background-color: #0A8146; /* Color del punto interior */
    opacity: 1;
}


/* Estilos de texto */
.cgf-styled-checkbox-text,
.cgf-styled-radio-text {
    font-size: 0.95em; /* Ajusta según necesites */
    color: #333;
    line-height: 1.2;
}

/* Opcional: Hover states */
.cgf-styled-checkbox-label:hover input[type="checkbox"]:not(:checked) + .cgf-styled-checkbox-custom,
.cgf-styled-radio-label:hover input[type="radio"]:not(:checked) + .cgf-styled-radio-custom {
    border-color: #777;
}

/* Ajustes para el acordeón de categorías, asegurando que el label no cause problemas */
.cgf-category-list li {
    /* El label ya tiene display: flex, lo que es bueno */
}
.cgf-category-list li .cgf-accordion-toggle {
    margin-left: auto; /* Empuja el toggle hacia la derecha si el label ocupa espacio */
    align-self: center; /* Centra verticalmente el toggle con el label */
}

/* ... (tus estilos existentes de checkbox y otros) ... */

/* Estilos para el contenedor del item de categoría (label + toggle) */
.cgf-category-item-header {
    display: flex; /* Activa Flexbox */
    justify-content: space-between; /* Espacio entre el label y el toggle */
    align-items: center; /* Alinea verticalmente los items */
    width: 100%; /* Ocupa todo el ancho disponible del <li> */
    margin-bottom: 5px; /* Un pequeño margen si es necesario antes del sub-nivel */
}

/* El label ya debería tener display: flex y align-items: center
   por los estilos del checkbox personalizado.
   Aseguramos que no ocupe todo el ancho para que space-between funcione.
*/
.cgf-category-item-header .cgf-styled-checkbox-label {
    /* flex-grow: 1; (Opcional, si quieres que el label ocupe el espacio sobrante) */
    /* No es necesario width: auto; explícito aquí si el contenedor es flex */
}

/* Ajustes para el toggle del acordeón de categorías */
.cgf-accordion-toggle {
    display: inline-flex; /* Para alinear el contenido del ::before si es un icono */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 5px; /* Un poco de padding para facilitar el click */
    /* Quitar cualquier margin-left si lo tenía de antes para empujarlo */
    margin-left: 0;
    /* El estilo de la flecha ::before ya debería estar definido */
}

.cgf-accordion-toggle::before {
    font-family: FontAwesome;
    content: '\f0dd'; /* Flecha hacia abajo por defecto */
    display: inline-block;
    transition: transform 0.2s ease-in-out;
    font-size: 0.8em; /* O el tamaño que prefieras */
}

.cgf-accordion-toggle.cgf-open::before {
    transform: rotate(-180deg); /* Flecha hacia arriba cuando está abierto */
}

/* Asegurar que la lista de subcategorías (el .cgf-accordion-content)
   no afecte el layout del header.
   El padding-left para la indentación debe estar en el .cgf-category-list ul
   o en el .cgf-accordion-content mismo.
*/
.cgf-category-list ul .cgf-accordion-content, /* Para subniveles */
.cgf-category-list > li > .cgf-accordion-content { /* Para el primer nivel dentro de la lista principal */
    padding-left: 20px; /* Indentación para los sub-items */
    /* Asegúrate que el display: none inicial no se quite por otros estilos,
       o que el acordeón JS lo maneje bien.
       Si usas el acordeón con max-height: 0, eso está bien.
    */
}

/* Quitar el ajuste anterior si ya no es necesario (este podría ser conflictivo ahora):
.cgf-category-list li .cgf-accordion-toggle {
    margin-left: auto;
    align-self: center;
}
*/

.cgf-collapsible-header.cgf-collapsed::before {
    font-family: FontAwesome;
    content: '\f0dd'; /* Flecha hacia abajo por defecto */
    transform: none;
}

.cgf-category-item-header .cgf-accordion-toggle::before{
    color:#0A8146;
    content: '\f078'; /* Flecha hacia abajo por defecto */

}