/* General */
.cm-button {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 44px;
    padding: 12px 24px;
    text-align: center !important;
    border-radius: 16px !important;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(132deg, #C52233 0%, #F54143 100%);
    border-style: none;
    color: #fff;
    transition: color 0.3s;
}
.cm-button:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background-image: linear-gradient(132deg, #00000096 0%, #00000085 100%);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 2;
    pointer-events: none;
}
.cm-button:after {
    position: relative;
    z-index: 2;
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 0;
    background-image: url("data:image/svg+xml;utf8,<svg width='18' height='15' viewBox='0 0 18 15' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M17.2071 8.20711C17.5976 7.81658 17.5976 7.18342 17.2071 6.79289L10.8431 0.428933C10.4526 0.0384087 9.81946 0.0384086 9.42893 0.428933C9.03841 0.819457 9.03841 1.45262 9.42893 1.84315L15.0858 7.5L9.42893 13.1569C9.03841 13.5474 9.03841 14.1805 9.42893 14.5711C9.81946 14.9616 10.4526 14.9616 10.8431 14.5711L17.2071 8.20711ZM0.5 7.5L0.5 8.5L16.5 8.5L16.5 7.5L16.5 6.5L0.5 6.5L0.5 7.5Z' fill='white'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    position: relative;
    left: 10px;
    top: 1px;
    transition: left 0.5s ease-in-out;
}
.cm-button span {
    position: relative;
    z-index: 2;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}
.cm-button:hover:before {
    opacity: 1;
}

/* Category based product template styling/colors */
.single-product .number_default_style {
    border-color: var(--main-color) !important;
}
.single-product {
	background-color: #12181F !important;
}
.single-product .product-steps svg path {
	fill: var(--main-color);
}
.single-product .product-steps div {
	border-color: var(--main-color) !important;
}
.single-product .product-delivery svg path {
	fill: var(--main-color);
}
.single-product .product-logo .elementor-icon {
	background-image: var(--game-icon);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
}
.single-product .product-warranty .elementor-icon {
	background-image: var(--warrany-icon);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
}
.single-product .product-warranty .elementor-icon:before {
	position: absolute;
	width: 60px;
	height: 60px;
	background: var(--main-color);
	left: 50%;
	top: 50%;
	margin-top: -30px;
	margin-left: -30px;
	filter: blur(30px);
	opacity: 0.6;
	z-index:-1 ;
	content: '';
}
.single-product .product-color {
	color: var(--main-color);
}
.single-product .criminalmodz-buy-now, .single-product .product-button > .elementor-button {
	background: linear-gradient(-126deg, var(--main-color) 48%, var(--secondary-color) 100%) !important;
	overflow: hidden;
	position: relative;
}
.single-product .product-button > .elementor-button .elementor-button-content-wrapper {
	position: relative;
	z-index: 4;
}
.single-product .product-button > .elementor-button:before {
	  content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background-image: linear-gradient(132deg, #00000096 0%, #00000085 100%);
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 1;
    pointer-events: none;
}
.single-product .product-button > .elementor-button:hover:before {
	opacity: 1;
}
.single-product .product-gradient {
	background: linear-gradient(126deg, var(--main-color) 48%, var(--secondary-color) 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}
.single-product {
	background-image: var(--product-wallpaper) !important;
	background-position: center top  !important;
	background-repeat: no-repeat  !important;
	background-size: contain  !important;
}
.single-product .criminalmodz-configurator .product-option-field.field-type-button .values-list li label {
    padding: 10px 18px;
}
.single-product .criminalmodz-configurator .product-option-field.field-type-button .values-list li.active label,
.single-product .criminalmodz-configurator .product-option-field.field-type-button .values-list li:hover label {
    border-width: 1px !important;
	border-color: var(--main-color);
}
.criminalmodz-configurator .product-option-field.field-type-button .values-list li.active label i,
.criminalmodz-configurator .product-option-field.field-type-button .values-list li:hover label i {
    background-color: var(--main-color) !important;
}
.single-product .product-warranty-text a {
    color: var(--main-color) !important;
}
.single-product .product-path a {
	color: inherit;
}
.single-product .product-path a:last-child {
	font-weight: 700;
	color: var(--main-color);
}
.single-product .criminalmodz-configurator .product-option-field.field-type-checkbox .values-list li.active .icon {
	background: var(--main-color);
}
.single-product .card-gradient:after {
    position: absolute;
    background-color: #191f2b;
    top: 1px;
    bottom: 1px;
    left: 1px;
    right: 1px;
    z-index: -1;
    content: '';
    border-radius: 16px;
}
.single-product .card-gradient:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, var(--main-color) 0%, rgba(197, 34, 51, 0) 100%);
    z-index: -2;
    border-radius: 16px;
    content: '';
}

/* archives */
.page-template:not(.single-product) .product-card-border {
	background: linear-gradient(to bottom, var(--main-color) 0%, rgba(245, 65, 67, 0) 70%) !important;
}
.page-template:not(.single-product) .gradient {
	background: linear-gradient(126deg, var(--main-color) 48%, var(--secondary-color) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.page-template:not(.single-product) .product-card-label {
	background: var(--main-color) !important;
}
.page-template:not(.single-product) .arrow-button > .elementor-button {
	background-color: var(--main-color) !important;
}
.page-template:not(.single-product) .icon-hero .elementor-icon {
	width: 56px;
	height: 56px;
	background-image: var(--game-icon);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: contain;
}
.page-template:not(.single-product) .icon-hero svg {
	display: none;
}