#blok-configurator-wrapper {
    display: flex;
    flex-direction: row;
    gap: 2em;
    width: 100%;
	overflow: visible;
	flex-wrap: wrap;
}

#blok-configurator {
    width: 70%;
    max-width: 100%;
}

#preview-container {
    outline: 2px solid #ccdbcb;
    padding: 0;
    background: #fff;
}

#blok-preview {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	min-height: 75vh;
	width: 1920px;
	transform-origin: top left;
}

button {
    background: #082517;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

button:hover {
    background: #85D027;
    color: #082517;;
}

.ui-sortable-helper {
	outline: solid 2px #85D027;
	background-color: #fff;
	opacity: .7;
}

.added-block .delete-block {
	position: absolute;
	opacity: 0;
	transition: all ease .3s;
	z-index: 20; 
	border: solid 1px red;
	background: #fff;
}

.added-block:hover .delete-block {
	opacity: 1;
}

.delete-block svg {
	display: block;
    height: 20px;
    width: 16px;
}

#preview-container .elementor-widget-button a > span {
	position: relative;
	display: inline-flex;
}

/***************************** SideBar *****************************/
#sidebar {
    width: calc(30% - 2em);
	position: sticky; 
	top: 40px;
	max-height: calc(100vh - 80px);
	overflow-y: scroll;
	scrollbar-color: #082517 white;
    scrollbar-width: thin;
}

#sidebar * {
	font-family: "Cabin";
}

.control-buttons {
	display: flex;
	gap: 10px;
}

.control-buttons button {
    width: 50%;
    margin-bottom: 10px;
}

.accordion-toggle {
    font-weight: bold;
    padding: 15px;
    margin-bottom: 1em;
    background: #ccdbcb;
    border-radius: 15px;
    overflow: hidden;
}

.accordion-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: bold;
    margin: 0;
}

.sidebar .step {
    display: none;
}

.step {
    transition: opacity 0.3s ease;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
	transition: all ease .3s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.active .step {
    opacity: 1;
    pointer-events: auto;
    max-height: 100%;
	transition: all ease .3s;
    margin-top: 10px;
    padding-top: 10px;
    border-top: solid 1px #000;
}

.step:not(.active) .step-content {
    display: none;
}

.step .knoppen button:first-child {
    margin-right: 10px;
}

.step .knoppen {
	display: flex;
    flex-direction: row;
    align-items: center;

}
button#versturen:disabled {
    opacity: .8;
    pointer-events: none;
}

.contact-details {
	gap: 10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

}

.contact-details .step-wrapper {
	display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: center;
}

.contact-details .step-wrapper label {
    flex-basis: 35%;
}

.contact-details .step-wrapper input,
.contact-details .step-wrapper textarea {
	flex-basis: calc(65% - 10px);
}

#sidebar select, 
#sidebar input,
#sidebar textarea {
    padding: 5px;
    border: solid 1px #000;
    border-radius: 3px;
    box-shadow: none;
}

#sidebar input[type='color'] {
	padding: 0;
}

#sidebar .block-preview:has(input:disabled) {
    text-decoration: line-through;
    filter: grayscale(1);
    opacity: .7;
}

#sidebar input.error {
    border-color: red;
}

#sidebar .step-wrapper .step-wrapper:has(input.error)::after {
	width: 100%;
    content: "Dit veld is verplicht";
    display: block;
    position: relative;
    color: red;
    text-align: right;
}

input#logo-upload::file-selector-button {
    border: 2px solid #85D027;
    padding: .2em .4em;
    border-radius: .2em;
    background-color: #85D027;
    color: #082517;
    transition: all ease .3s;
}

input#logo-upload:hover::file-selector-button {
	color: #fff;
    background-color: #082517;
	border-color: #082517;
}

input#logo-upload {
	padding-right: 0;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#form-spinner span:first-of-type {
	display: inline-block; 
	width: 16px; 
	height: 16px; 
	border: 2px solid #ccc; 
	border-top: 2px solid #000; 
	border-radius: 50%; 
	animation: spin 1s linear infinite;
}

.load-spinner {
	display: block; 
	width: 50px; 
	height: 50px; 
	border: 2px solid #fff; 
	border-top: 3px solid #000; 
	border-radius: 50%; 
	animation: spin 1s linear infinite;
}

#ontwerp-overzicht {
	display: none;
}

#ontwerp-overzicht:has(ul li) {
	display: block;
}

/*** Content ***/
.footer-content *,
.header-content *,
.blok-content * {
    pointer-events: none !important;
}

/*** Toggle header / footer ***/
.footer-content:not(.active),
.header-content:not(.active),
.blok-content:not(.active) {
    display: none;
}

.accordion-toggle h3 {    
    display: flex;
    align-items: center;
    margin: 0;
}

.accordion-toggle h4 {
    margin: 0;
}

.accordion-toggle h3::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath fill='%23000000' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
    position: relative;
    display: inline-block;
    margin-left: auto;
    height: 1em;
    width: 1em;
    transition: all ease .3s;
}

.accordion-toggle.active h3::after {
    transition: all ease .3s;
    transform: rotate(180deg);
    transform-origin: center;
}

#Header-options .preview,
#Footer-options .preview,
#Content-options .block-preview {
    border: solid 1px #082517;
    overflow: hidden;
    margin-bottom: 10px;
    padding: 5px;
    border-radius: 5px;
    position: relative;
}

#Header-options .preview.shop,
#Footer-options .preview.shop,
#Content-options .block-preview.shop {
	display: none;
}

.shop-selected #Header-options .preview.shop,
.shop-selected #Footer-options .preview.shop,
.shop-selected #Content-options .block-preview.shop {
	display: block;
}

#Header-options .preview img,
#Footer-options .preview img,
#Content-options .block-preview img {
    width: 100%;
}

#Header-options .preview:has(input:checked),
#Footer-options .preview:has(input:checked),
#Content-options .block-preview:has(input:checked) {
    border: solid 1px #85D027;
}

#Header-options .preview input,
#Footer-options .preview input,
#Content-options .block-preview input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    left: 0;
    top: 0;
    margin: 0;
}

/*** Block preview ***/
.blok-lijst h5 {
    font-size: 1.2em;
    border-bottom: solid 1px #000;
    padding-bottom: 5px;
    margin: 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.term-wrapper h5::after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath fill='%23000000' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
	width: 20px;
	transition: all ease .3s;
}

.term-wrapper.active h5::after {
	transform: rotate(180deg);
	transform-origin: center;
}

.term-wrapper {
    padding: 10px 0;
    margin: 10px 0;
}

.term-wrapper .term-row {
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    max-height: 0;
    overflow: hidden;
    padding: 0;
	transition: all ease .3s;
}

.term-wrapper.active .term-row {
	max-height: 100%;
	padding: 20px 0;
}

.term-row .block-preview {
    max-width: calc(50% - 5px);
    flex-basis: calc(50% - 5px);
}

/*** Loader ***/
#pageloader {
	position: fixed;
	width: 100vw;
    height: 100vh;
    background: var(--e-global-color-primary);
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    background-image: linear-gradient(-45deg, var(--e-global-color-primary) 0%, var(--e-global-color-secondary) 100%);
	overflow: hidden;
}

#pageloader * {
    color: #fff;
}

.loader {
  font-size: 20px;
  font-weight: bold;
}