/* Estilos para los filtros y botones */
.filters h4, .tit-filters{
    color: #BDA46D; 
    font-size: 28px;
 }

 .btn-add-cart, .btn-submit{
     background-color: #800020;
     color: white;
     text-transform: uppercase;
     border: none;
     border-radius: 0;
 }

 .btn-add-cart:hover, .btn-submit:hover{
     background-color: #BDA46D;
 }

 .price{
     color: #BDA46D; 
     font-size: 14px;  
 }

 .cont-img{
     /*background-color: #F2F2F2;*/
 }

 .card{
     border:none;
 }

 .card-title{
     color:black;
     min-height: 74px;
 }

 input[type="checkbox"]:checked {
     background-color: #BDA46D !important; /* Color de fondo para checkboxes seleccionados */
     border-color: #BDA46D !important; /* Color del borde */
 }

 input[type="checkbox"]:not(:checked) {
     background-color: #fff !important; /* Fondo blanco para los checkboxes no seleccionados */
     border-color: #BDA46D !important; /* Borde en el color deseado */
 }

 /* Estilo básico para los checkboxes */
 input[type="checkbox"] {
     -webkit-appearance: none;  /* Elimina el estilo predeterminado de los navegadores */
     -moz-appearance: none;     /* Elimina el estilo predeterminado en Firefox */
     appearance: none;          /* Elimina el estilo predeterminado en otros navegadores */
     width: 20px;               /* Tamaño del checkbox */
     height: 20px;              /* Tamaño del checkbox */
     border: 1px solid #AEA9A9; /* Borde en color deseado */
     border-radius: 3px;        /* Bordes redondeados */
     background-color: white;   /* Fondo blanco por defecto */
     cursor: pointer;           /* Puntero para indicar interactividad */
     position: relative;
 }

 /* Estilo cuando el checkbox está seleccionado */
 input[type="checkbox"]:checked {
     background-color: #BDA46D;  /* Color de fondo cuando está seleccionado */
     border-color: #AEA9A9;      /* Color del borde cuando está seleccionado */
 }

 /* Estilo cuando el checkbox está marcado (check) */
 input[type="checkbox"]:checked::after {
     content: '✔';               /* Carácter de marca de verificación */
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: white;               /* Color de la marca de verificación */
     font-size: 14px;            /* Tamaño del símbolo */
 }

 /* Estilo para la línea del slider (gris) */
 input[type="range"] {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     width: 100%;               
     height: 8px;              
     background: #CECDCD;
     border-radius: 5px;
     outline: none;
     transition: background 0.3s ease;
 }

 /* Estilo para el círculo del control del rango */
 input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;  
     appearance: none;
     width: 20px;
     height: 20px;
     background: #BDA46D;
     border-radius: 50%;
     cursor: pointer;
     transition: background 0.3s ease;
 }

 /* Estilo para el círculo del control en Firefox */
 input[type="range"]::-moz-range-thumb {
     width: 20px;
     height: 20px;
     background: #BDA46D;
     border-radius: 50%;
     cursor: pointer;
 }

 /* Estilo para el círculo del control en Edge */
 input[type="range"]::-ms-thumb {
     width: 20px;
     height: 20px;
     background: #BDA46D;
     border-radius: 50%;
     cursor: pointer;
 }

 /* Cambio de color de la línea cuando se está interactuando con el slider */
 input[type="range"]:focus {
     background: #CECDCD;
 }

 /* Estilo básico para los checkboxes */
input[type="checkbox"] {
    -webkit-appearance: none;  /* Elimina el estilo predeterminado de los navegadores */
    -moz-appearance: none;     /* Elimina el estilo predeterminado en Firefox */
    appearance: none;          /* Elimina el estilo predeterminado en otros navegadores */
    width: 20px;               /* Tamaño del checkbox */
    height: 20px;              /* Tamaño del checkbox */
    border: 1px solid #AEA9A9; /* Borde en color deseado */
    border-radius: 3px;        /* Bordes redondeados */
    background-color: white;   /* Fondo blanco por defecto */
    cursor: pointer;           /* Puntero para indicar interactividad */
    position: relative;
}

/* Estilo cuando el checkbox está seleccionado */
input[type="checkbox"]:checked {
    background-color: #BDA46D !important;  /* Color de fondo cuando está seleccionado */
    border-color: #AEA9A9 !important;      /* Color del borde cuando está seleccionado */
}

/* Estilo cuando el checkbox está marcado (check) */
input[type="checkbox"]:checked::after {
    content: '✔';               /* Carácter de marca de verificación */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;               /* Color de la marca de verificación */
    font-size: 14px;            /* Tamaño del símbolo */
}

/* Estilo para la línea del slider (gris) */
input[type="range"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;               
    height: 8px;              
    background: #CECDCD;
    border-radius: 5px;
    outline: none;
    transition: background 0.3s ease;
}

/* Estilo para el círculo del control del rango */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;  
    appearance: none;
    width: 20px;
    height: 20px;
    background: #BDA46D;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* Estilo para el círculo del control en Firefox */
input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #BDA46D;
    border-radius: 50%;
    cursor: pointer;
}

/* Estilo para el círculo del control en Edge */
input[type="range"]::-ms-thumb {
    width: 20px;
    height: 20px;
    background: #BDA46D;
    border-radius: 50%;
    cursor: pointer;
}

/* Cambio de color de la línea cuando se está interactuando con el slider */
input[type="range"]:focus {
    background: #CECDCD;
}