/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

:root{
	--infinity-configurator-modal-progress-bg: #ccc;
	--infinity-configurator-modal-progress-bg-progress: #999;
}

.configurator-steps-navigator-main{
	margin-bottom: 0.8rem !important;
	padding-bottom: 0.8rem !important;
	border-bottom: solid 0.1rem #E3E3E3;
}

/*
[data-infinity_configurator_slug="geen"] .modal-optie-img:after,
[data-infinity_configurator_slug="niet-kantelbaar"] .modal-optie-img:after,
[data-infinity_configurator_slug="no"] .modal-optie-img:after,
[data-infinity_configurator_slug="non-tiltable"] .modal-optie-img:after,
[data-infinity_configurator_slug="nein"] .modal-optie-img:after,
[data-infinity_configurator_slug="nicht-kippbar"] .modal-optie-img:after,
[data-infinity_configurator_slug="nej"] .modal-optie-img:after,
[data-infinity_configurator_slug="ikke-vippende"] .modal-optie-img:after{
    content: "";
    background: #F7CB16;
    width: 90%;
    height: 3px;
    display: block;
    position: absolute;
    transform: rotate(-45deg);
}

[data-infinity_configurator_slug="geen"] .modal-optie-img img,
[data-infinity_configurator_slug="niet-kantelbaar"] .modal-optie-img img,
[data-infinity_configurator_slug="no"] .modal-optie-img img,
[data-infinity_configurator_slug="non-tiltable"] .modal-optie-img img,
[data-infinity_configurator_slug="nein"] .modal-optie-img img,
[data-infinity_configurator_slug="nicht-kippbar"] .modal-optie-img img,
[data-infinity_configurator_slug="nej"] .modal-optie-img img,
[data-infinity_configurator_slug="ikke-vippende"] .modal-optie-img img{
    opacity: 0.2;
}*/

.configurator-badge-group{
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    padding-inline: 3rem;
}

.configurator-badge{
    padding: 1rem;
    color: var(--oranje);
    background: var(--beige);
    border-radius: 0.5rem;
    white-space: nowrap;
    font-weight: 700;
}

#infinity-configuratorModal .modal-optie .modal{
	cursor: auto;
}

#infinity-configuratorModal .modal-optie-inner:not(:has(p)) {
    align-self: center;
}

#infinity-configuratorModal .modal-optie-inner:not(:has(p)) strong{
	padding-right: 0;
}

#infinity-configuratorModal .modal-optie:not(:has(.modal-optie-img)),
#infinity-configuratorModal .modal-optie:has(.modal-optie-img.d-none){
    justify-content: center;
}

#infinity-configuratorModal .modal-optie-geen-voorkeur {
    order: 9999 !important;
}

h4.kic-modal-title{
    font-family: var(--heading-font);
	font-size: 6rem;
	line-height: 6rem;
	font-weight: 800;
}

.kic-more-info{
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;  
	overflow: hidden;
    margin-bottom: 1rem;
}

.modal-optie-inner .kic-more-info > p{
    font-size: 1.4rem;
    line-height: 2rem;
    font-weight: 300;    
}

.kic-more-info + p a{
	color: #000 !important;
}

.configurator-steps-navigator{
	font-size: 1.7rem;
	line-height: 2.4rem;
	list-style: none;
	padding: 0;
	color: #57575650;
	margin: 0;
    display: flex;
    gap: 1.5rem;
}

.configurator-steps-navigator a{
	text-decoration: none;
	color: #57575650;
}

.configurator-steps-navigator a.active-step{
	color: #000;
}

.configurator-steps-navigator-sub{
	font-size: 1.4rem;
	line-height: 2rem;
    margin-bottom: 4.5rem;
}

.infinity-configurator-wrapper{
    position: relative;
}

.infinity-configurator-wrapper > div{
    position: absolute;
    top: 0;
    width: 100%;
}

.modal-step-uitleg{
    margin-bottom: 4rem;
}

.modal-step-uitleg:empty{
	display: none;
}

.infinity-configurator-starter{
    height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    z-index: 5;
}

.infinity-configurator-starter-top{
    display: flex;
    justify-content: space-between;
    padding: 3rem;
    flex-wrap: wrap;
}

.infinity-configurator-starter-midden{
    margin-top: auto;
    margin-bottom: auto;
}

.infinity-configurator-starter-terug{
    color: #000;
    text-decoration: none;
    font-size: 1.4rem;
}

.infinity-configurator-starter-terug i{
    font-size: 1.1rem;
}

.go-start-configurator{
    font-size: 3rem;
    width: 100%;
    text-align: center;
    border-radius: 10rem !important;
    justify-content: center;
    align-items: center;
}

.go-start-configurator i{
    font-size: 2.4rem;
    margin-right: 1rem;
    transform: translateY(2px);
}

.infinity-configurator-links{
    display: flex;
    flex-direction: column;
}

.infinity-configurator-active-selected{
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#infinity-configuratorModal{
    display: grid;
    grid-template-columns: 60% 40%;
    height: 100vh;
    overflow: hidden;
}

#infinity-configuratorModal .modal-config-results{
    display: none;
}

.configurator-steps-navigator a {
	pointer-events: auto;
}

.configurator-steps-navigator li:has(> a.active-step) ~ li a {
	pointer-events: none;
	cursor: default;
}

.kic_alleen_deze_optie:empty{
	display: none;
}

.kic_alleen_deze_optie{
    grid-column: 1 / -1;
    margin-bottom: 2rem;
}

.infinity-configurator-rechts{
    position: relative;
    background: #F4F4F4;
}

#infinity-configuratorModal .modal-content{
}

#infinity-configuratorModal .modal-step-title{
    background: none;
    position: relative;
    z-index: auto;
    margin-bottom: 1rem;
}

#infinity-configuratorModal .modal-progress{    
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	background-color: var(--infinity-configurator-modal-progress-bg);
    height: 0.6rem;
}

#infinity-configuratorModal .modal-progress span{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	background-color: var(--infinity-configurator-modal-progress-bg-progress);
	height: 0.6rem;
	transition: 0.3s width;
}

#infinity-configuratorModal .modal-step{
	display: none;
	position: relative;
	padding: 4rem 4rem 12.4rem 4rem;
	height: 100vh;
    overflow: clip;
}

#infinity-configuratorModal .modal-step.infinity_configurator_startvraag{
	display: block;
}

#infinity-configuratorModal .infinity_configurator_startvraag .modal-config-nav > div:nth-child(1){
	opacity: 0;
    pointer-events: none;
    display: block;
}

#infinity-configuratorModal .modal-step-footer{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 3rem;
	background: #575756;
	box-shadow: none;
	border-radius: 0;
}

#infinity-configuratorModal .button_terug{
	padding: 0;
    border: none;
    box-shadow: none;
    background: none;
}

#infinity-configuratorModal .modal-step-inner{
	height: 100%;
}

#infinity-configuratorModal ::-webkit-scrollbar {
    -webkit-appearance:none;
    width:1.4rem;
    height:1.4rem;
}

#infinity-configuratorModal ::-webkit-scrollbar-thumb {
    border-radius:0.8rem;
    border:0.3rem solid #fff;
    background-color:rgba(0, 0, 0, .3);
}
@-moz-document url-prefix() {
    #infinity-configuratorModal .scroller {
        scrollbar-width: thin;
        scrollbar-color: #ccc;
    }
}

.kic-content{
	max-height: calc(100% - 12.4rem);
    min-height: 100%;
    overflow: auto;
    padding-right: 1rem;
}

#infinity-configuratorModal .modal-opties {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    column-gap: 2rem;
    row-gap: 2rem;
    padding-bottom: 1rem;
    margin-bottom: 0;
    padding-right: 1rem;
}

#infinity-configuratorModal .modal-optie {
    border: 0.1rem solid #dedede;
    border-radius: 1rem;
    background: #fff;
    cursor: pointer;
    display: flex;
    padding: 1.5rem 0;
    min-height: 16rem;
}

#infinity-configuratorModal .modal-optie-img {
    transition: 0.3s padding;
    height: auto;
    padding: 0 1rem 0 1.5rem;
    max-width: 10.5rem;
    position: relative;
}

#infinity-configuratorModal .modal-optie-img img {
    aspect-ratio: auto;
    width: 100%;
    height: auto;
    max-width: 8rem;
    min-width: 8rem;
}

#infinity-configuratorModal .modal-body .modal-optie-img {
    max-width: 20rem;
    min-width: 20rem;
    padding: 0;
}

#infinity-configuratorModal .modal-body .modal-optie-img img {
    max-width: 20rem;
    min-width: 20rem;
}

#infinity-configuratorModal .modal-optie-inner {
    padding: 0 1.5rem;
}

#infinity-configuratorModal .modal-optie-titel{
    position: relative;
    padding-left: 0;
    font-size: 1.7rem;
    line-height: 2.4rem;
    margin-bottom: 0.5rem;
    font-weight: 700 !important;
    padding-right: 2.5rem;
}

#infinity-configuratorModal .modal-optie-titel:before{
	display: none;
}

#infinity-configuratorModal .modal-optie-active:after{
	content: "\f058";
	font-family: 'Font Awesome 6 Pro';
	color: #FF9029;
	position: absolute;
	right: 1.5rem;
	font-weight: 700;
	top: 1.5rem;
}

#infinity-configuratorModal .modal-optie-active{
    position: relative;
	background-color: #fff;
	border-color: var(--infinity-configurator-modal-progress-bg);
	outline: solid 3px #FF9029;
	outline-offset: -3px;
    pointer-events: none;
}

#infinity-configuratorModal .modal-optie-active [data-bs-toggle="modal"]{
    pointer-events: all;
}

.infinity-configurator-wrapper.loading-multi .infinity-configurator-rechts:before,
.infinity-configurator-wrapper.loading .infinity-configurator-rechts:before{
    content: "";
    background: rgba(255,255,255,0.5);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
	z-index: 1;
}

#infinity-configuratorModal .modal-config-results .woocommerce-Price-currencySymbol{
	display: none !important;
}

.infinity-configurator-wrapper.loading-multi .infinity-configurator-rechts:after,
.infinity-configurator-wrapper.loading .infinity-configurator-rechts:after{
    background: url(/inhoud/plugins/woocommerce/assets/images/icons/loader.svg) center center;
    height: 1em;
    width: 1em;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -.5em;
    margin-top: -.5em;
    content: '';
    -webkit-animation: spin 1s ease-in-out infinite;
    animation: spin 1s ease-in-out infinite;
    background-size: cover;
    line-height: 1;
    text-align: center;
    font-size: 2em;
    color: rgba(0,0,0,.75);
	z-index: 15;
}

#infinity-configuratorModal [data-goto=""]{
	opacity: 0.5;
	cursor: default;
	pointer-events: none;
}

#infinity-configuratorModal .infinity_configurator_volgende[data-goto=""]{
	display: none;
}

.modal-results-title{
	font-family: var(--heading-font);
	font-size: 6rem;
	line-height: 6rem;
	font-weight: 800;
    margin-top: 4rem;
}

.modal-results-samenvatting{
	font-family: var(--heading-font);
	font-size: 3rem;
	line-height: 3rem;
	font-weight: 700;	
	margin-top: 3rem;
	margin-bottom: 1.5rem;
}

.modal-step:has(.kic_alleen_deze_optie:not(:empty)) .modal-step-uitleg{
    display: none;
}

.kic-samenvatting-content{
	display: grid;
    gap: 3rem;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.kic-samenvatting-item-sku strong{
	font-size: 2rem;
	line-height: normal;
}

.kic-samenvatting-item-img{
	margin-top: 1.5rem;
	border: solid 0.1rem #D0D0D0;
    border-radius: 1rem;
    overflow: hidden;
    height: 12rem;
	background: #fff;
}

.kic-samenvatting-item-img img{
	object-fit: contain;
    width: 100%;
    height: 100%;
}

.kic-samenvatting-item:not(:has(.kic-samenvatting-item-img)){
	grid-column: span 3;
}

.kic-download-container{
	margin-top: 4.5rem;
}

.kic-download-container a{
	font-size: 3rem;
	width: 100%;
	border-radius: 4rem !important;
	justify-content: center;
}

.kic-download-container a i{
	margin-right: 1.5rem;
}

.kic-restart{
	color: #000;
	text-decoration: none;
}

.kic-restart:hover{
	text-decoration: underline;
}

@media (max-width:1023px)
{
	#gform_submit_button_20{
		justify-content: center;
		border-radius: 5rem !important;
	}
	
	.infinity-configurator-starter-midden img{
		max-height: 30rem;
		width: auto !important;
	}
	
	.infinity-configurator-wrapper .d-lg-none{
		display: block !important;
	}
	.infinity-configurator-wrapper .d-none{
		display: none !important;
	}
	
	.go-to-desktop{
		color: var(--oranje);
		font-size: 4rem;
		line-height: normal;
	}
	
	.infinity-configurator-starter-top > div:nth-child(2){
		order: 3;
		width: 100%;
		text-align: center;
		margin-top: 2rem;
	}
	
	.infinity-configurator-starter-midden{
		padding-inline: 1.5rem !important;
	}
	
	.infinity-configurator-starter-midden,
	.infinity-configurator-starter-midden .row{
		height: 100%;
	}
	
	.infinity-configurator-starter-midden .col-sm-12{
		background: var(--lichtgrijs);
    	padding-block: 4rem;
	}
}

@media (min-width:992px) and (max-width:1199px)
{
	
}

@media (min-width:1200px) and (max-width:1399px)
{
    
}

@media (min-width:1400px)
{
    
}