ul.wpf_color_icons {
    display: flex !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    list-style: none !important;
}

ul.wpf_color_icons > li {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 10px 15px !important;
}
/* Oculta checkboxes nativos */
        ul.wpf_color_icons input[type="checkbox"] {
            display: none !important;
        }
        
        /* Estilo del label (contiene la imagen) */
        ul.wpf_color_icons > li > label {
            display: block !important;
            width: 50px !important;
            height: 50px !important;
            border-radius: 50% !important;
            background-size: cover !important;
            background-position: center !important;
            border: 2px solid #ddd !important;
            box-shadow: 0 3px 6px rgba(0,0,0,0.16) !important;
            transition: all 0.3s ease !important;
            position: relative !important;
            cursor: pointer !important;
            overflow: hidden !important;
        }
        
        
        
     ul.wpf_color_icons> li > label:hover {
  border: 3px solid #FF5722 !important;
   box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.3) !important;
         
     }
     
      ul.wpf_color_icons input[type="checkbox"]:checked + label {
            border: 3px solid #FF5722 !important;
            box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.3) !important;
        }
        
        /* Checkmark (✓) */
        ul.wpf_color_icons input[type="checkbox"]:checked + label::after {
            content: "✓";
            position: absolute;
            top: 2px;
            right: 2px;
            background: #FF5722;
            color: white;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            z-index: 2;
        }
        
        /* Contador */
        ul.wpf_color_icons .wpf_item_count {
            position: absolute !important;
            top: -5px !important;
            right: -5px !important;
            background: #FF5722 !important;
            color: white !important;
            border-radius: 50% !important;
            width: 20px !important;
            height: 20px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 10px !important;
            z-index: 3 !important;
        }
        
        /* Texto del tooltip - lo mostramos debajo 
        ul.wpf_color_icons > li > label .wpf_tooltip {*/
        .wpf_form ul.wpf_color_icons > li > label .wpf_tooltip {

            display: none !important; /* Oculta el texto duplicado */
        }
        
        /* Texto visible debajo del círculo 
        ul.wpf_color_icons > li > .wpf_option_text {*/
        .wpf_form ul.wpf_color_icons > li > .wpf_option_text {
            display: block !important;
            margin-top: 2px !important;
            font-weight: bold !important;
            color: #333 !important;
            font-size: 12px !important;
            text-align: center !important;
            width: 100%;
        }








body .wpf_reset_btn {
   
    background-color: #d4c1a5!important;
    color: #333 !important;
    padding: 6px 25px !important;
    border: none !important;
    border-radius: 5px !important;
}

body .wpf_reset_btn:hover {
   
    background-color: #333 !important;
    color: #fff !important;

}






.wpf_items_wrapper {
  position: relative;
  padding-bottom: 0px; /* Espacio para el botón de reset */
}

.wpf_reset_btn {
  position: absolute;
  bottom: 50px;
  left: 120px; /* Ajustar según la posición del botón "Aplicar" */
}

/*espacio de X*/

.wpf_reset_btn:after,.wpf_reset_btn:before {
   
    content: "";
    display: block;
    left: 3px !important;
    position: absolute;
    top: 50%;
    width: 1em;
	
}