/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 19 2025 | 16:49:06 */
/* On hover, set border to gradient */
.woocommerce .component_option_radio_button_container .component_option_radio_button:hover {
    
}
/* Ensure all text inside is white */
.cp_clearfix.component_option_radio_button.selected .radio_button_description,
.cp_clearfix.component_option_radio_button.selected .radio_button_title,
.cp_clearfix.component_option_radio_button.selected .radio_button_price.price,
.cp_clearfix.component_option_radio_button.selected .radio_button_price,
.cp_clearfix.component_option_radio_button.selected .radio_button_price.price .relative-price-prefix,
.cp_clearfix.component_option_radio_button.selected .radio_button_price.price .woocommerce-Price-amount,
.cp_clearfix.component_option_radio_button.selected .radio_button_price.price .woocommerce-Price-currencySymbol {
  color: white ;
}

.component_option_radio_buttons {
	.radio_button_input {
		width: 12% !important;
	}
	
	.visually-hidden {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}

	.custom-radio-icon {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 20px; 
    	height: 20px;
	}

	.icon-unselected,
	.icon-selected {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transition: opacity 0.8s ease, transform 0.8s ease;
	}

	.icon-unselected {
		fill: #5e5e5e;
	}
	.icon-selected {
		opacity: 0;
		transform: scale(0.9);
	}

	input[type="radio"]:checked + .custom-radio-icon .icon-unselected {
		opacity: 0;
		transform: scale(0.9);
	}
	input[type="radio"]:checked + .custom-radio-icon .icon-selected {
		opacity: 1;
		transform: scale(1);
	}
	
	.title, .relative-price-prefix, .woocommerce-Price-currencySymbol, .amount {
		color: #a7a4ad !important;
	}
}


/* Component Options border */
.component_option_radio_button, .cp_clearfix.component_option_radio_button {
	border: 2px solid #43414f !important;
	border-radius: 8px !important; 
	background: transparent;
}
.component_option_radio_button:hover {
	border: 2px solid #d8d8d8 !important;
	border-image: none !important;
	
	.radio_button_description {
		color: #d9d9d9 !important;
	}
	
	.icon-unselected {
		fill: #c3c3c3;
	}
	
	.title, .relative-price-prefix, .woocommerce-Price-currencySymbol, .amount {
		color: #dad8df !important;
	}
}

/* .component_option_radio_button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    border-radius: 12px; 
    padding: 1.5px; 
    background: linear-gradient(to right, #5E5E5E, #5E5E5E);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; /* Ensure the inner part is transparent */
/*     mask-composite: exclude; /* Same as above for Firefox */ 
/* } */

/* .component_option_radio_button:hover::before {
    background: linear-gradient(to right, red, blue);
} */

.component_option_radio_button.selected {
	background: transparent !important;
	border: 3px solid #ffffff !important;
	
	.title, .relative-price-prefix, .woocommerce-Price-currencySymbol, .amount {
		color: #ffffff !important;
	}
}

.radio_button_description {
	color: #a7a4ad !important;
}