html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}


/* Add padding to elements with background color */
.has-background:not(.wp-block-button__link),
[class*="is-style-section-"] {
    padding: var(--wp--custom--global--spacing--padding--background);
    border-radius: var(--wp--custom--global--border--radius--base);
    &.alignwide {
        padding: var(--wp--preset--spacing--60);
    }
}

@media screen and (min-width: 601px) {
    .has-background:not(.wp-block-button__link),
    [class*="is-style-section-"] {
        &.alignwide {
            padding: var(--wp--preset--spacing--70);
        }
    }
}

.wp-site-blocks {
    & > * {
        margin-top: 0;
    }
}

/* Keen slider dots */
.slider-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: var(--wp--preset--spacing--60) !important;
}

.slider-dots .slider-dot {
    border: 0;
    cursor: pointer;
    box-shadow: none;
    outline: none;
    padding: 0;
    margin: 0;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--secondary);
}

.slider-dots .slider-dot.active {
    background-color: var(--wp--preset--color--primary);
}

/* Keen slider dot themes */
.is-style-section-primary .slider-dots .slider-dot,
.is-style-section-secondary .slider-dots .slider-dot,
.is-style-section-quaternary .slider-dots .slider-dot {
    background-color: var(--wp--preset--color--base);
    opacity: .35;
}

.is-style-section-primary .slider-dots .slider-dot.active,
.is-style-section-secondary .slider-dots .slider-dot.active,
.is-style-section-quaternary .slider-dots .slider-dot.active {
    background-color: var(--wp--preset--color--base);
    opacity: 1;
}

.is-style-section-base-variant .slider-dots .slider-dot {
    background-color: var(--wp--preset--color--quinary);
    opacity: .35;
}

.is-style-section-base-variant .slider-dots .slider-dot.active {
    background-color: var(--wp--preset--color--quinary);
    opacity: 1;
}

/* Keen slider layered style - Global classes */
.is-style-layered {
    position: relative;
    width: 100%;
    z-index: 0;
}

.is-style-layered .keen-slider {
    position: relative;
    width: 100%;
    transition: height 0.5s ease-in-out;
}

.is-style-layered .keen-slider__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    min-width: 100% !important;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    user-select: none;
    margin: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, height 0.5s ease-in-out;
}

.is-style-layered .keen-slider__slide > * {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

/* Actieve slide */
.is-style-layered .keen-slider__slide.slide-active {
    opacity: 1;
    position: relative;
    transform: scale(1) translateY(0);
    z-index: 3;
    height: auto;
}

.is-style-layered .keen-slider__slide.slide-active > * {
    opacity: 1;
}

/* Volgende slides (layered effect) */
.is-style-layered .keen-slider__slide.slide-next-1 {
    opacity: 1 !important;
    transform: scale(0.95) translateY(40px);
    z-index: 2;
}

.is-style-layered .keen-slider__slide.slide-next-2 {
    opacity: 1 !important;
    transform: scale(0.90) translateY(80px);
    z-index: 1;
}

.is-style-layered .keen-slider__slide.slide-next-3 {
    opacity: 0 !important;
    transform: scale(0.85) translateY(120px);
    z-index: 0;
}

.is-style-section-primary:has(.is-style-layered) { --layered-slider-bg: var(--wp--preset--color--primary); }
.is-style-section-secondary:has(.is-style-layered) { --layered-slider-bg: var(--wp--preset--color--secondary); }
.is-style-section-tertiary:has(.is-style-layered) { --layered-slider-bg: var(--wp--preset--color--tertiary); }
.is-style-section-quaternary:has(.is-style-layered) { --layered-slider-bg: var(--wp--preset--color--quaternary); }
.is-style-section-quinary:has(.is-style-layered) { --layered-slider-bg: var(--wp--preset--color--quinary); }
.is-style-section-base:has(.is-style-layered) { --layered-slider-bg: var(--wp--preset--color--base); }
.is-style-section-base-variant:has(.is-style-layered) { --layered-slider-bg: var(--wp--preset--color--base-variant); }
.is-style-section-base-variant-alt:has(.is-style-layered) { --layered-slider-bg: var(--wp--preset--color--base-variant-alt); }
.is-style-section-contrast:has(.is-style-layered) { --layered-slider-bg: var(--wp--preset--color--contrast); }

[class*="is-style-section-"] .keen-slider__slide.slide-next-1 {
    background: color-mix(in srgb, var(--layered-slider-bg), white 75%);
}
[class*="is-style-section-"] .keen-slider__slide.slide-next-2 {
    background: color-mix(in srgb, var(--layered-slider-bg), white 50%);
}
[class*="is-style-section-"] .keen-slider__slide.slide-next-3 {
    background: color-mix(in srgb, var(--layered-slider-bg), white 25%);
}

/* Verborgen slides */
.is-style-layered .keen-slider__slide.slide-hidden {
    opacity: 0 !important;
}

/* Vorige slides */
.is-style-layered .keen-slider__slide.slide-prev {
    opacity: 0 !important;
    transform: scale(0.9) translateY(-80px) translateX(-80px) rotate(-10deg);
}

/* Two-step animatie: Uitgaande slide (naar voren) */
.is-style-layered .keen-slider__slide.slide-leaving-forward {
    opacity: 0 !important;
    transform: scale(0.9) translateY(-80px) translateX(-80px) rotate(-10deg);
    z-index: 10 !important;
    position: relative;
}

/* Two-step animatie: Uitgaande slide (naar achteren) */
.is-style-layered .keen-slider__slide.slide-leaving-backward {
    opacity: 0 !important;
    transform: scale(0.9) translateY(80px);
    z-index: 10 !important;
    position: relative;
}

/* Two-step animatie: Inkomende slide */
.is-style-layered .keen-slider__slide.slide-entering {
    opacity: 1 !important;
    position: relative;
    transform: scale(1) translateY(0);
    z-index: 3 !important;
}

.is-style-layered .keen-slider__slide.slide-animating {
    transition-timing-function: ease-in-out;
}

/* Distant to dot navigation */
.is-style-layered .slider-dots,
.is-style-layered .slider-dots {
    margin-top: var(--wp--preset--spacing--80) !important;
    transition: margin-top 0.3s ease-in-out;
}

.is-style-layered:has(.keen-slider > :last-child.slide-visible.slide-next-1) > .slider-dots {
    margin-top: 56px !important;
}

.is-style-layered:has(.keen-slider > :last-child.slide-visible.slide-active) > .slider-dots {
    margin-top: 24px !important;
}

/* gdpr-consent */
#gdprc_bar {
    background-color: var(--wp--preset--color--primary);
    padding: var(--wp--preset--spacing--80) 0;
    border: 0;
}

#gdprc_bar .container {
    gap: calc(var(--wp--preset--spacing--80) * 2);
    padding: 0 var(--wp--custom--global--spacing--padding--background);
}

#gdprc_bar .container .gdprc_content {
    margin: 0;
}

#gdprc_bar .gdprc_content__title {
    font-family: var(--wp--custom--global--typography--font-family--body);
    font-weight: var(--wp--custom--global--typography--font-weight--heading);
    font-size: 11px;
    line-height: 110.00000000000001%;
    margin-bottom: var(--wp--preset--spacing--80);
    text-transform: uppercase;
    color: var(--wp--preset--color--quinary);
}

#gdprc_bar .gdprc_content__desc {
    font-family: var(--wp--custom--global--typography--font-family--heading);
    font-weight: var(--wp--custom--global--typography--font-weight--heading);
    font-size: var(--wp--preset--font-size--extra-extra-large);
    line-height: 110.00000000000001%;
    color: var(--wp--preset--color--base);
}

#gdprc_bar .gdprc_content__link.gdprc_link,
#gdprc_bar .gdprc_action__close.gdprc_link.gdprc_action,
#gdprc_bar .gdprc_content a.gdprc_action__close.gdprc_link,
#gdprc_bar a.gdprc_action__settings.gdprc_link.gdprc_action {
    font-family: var(--wp--custom--global--typography--font-family--body);
    font-size: var(--wp--preset--font-size--normal);
    line-height: 150%;
    text-decoration: underline;
    color: var(--wp--preset--color--base);
    margin-bottom: 0;
    &:hover {
        color: var(--wp--preset--color--quinary);
    }
}

#gdprc_bar .gdprc_content a.gdprc_action__close.gdprc_link {
    margin-left: 24px;
}

#gdprc_bar .gdprc_content__link_separator {
    display: none;
}

#gdprc_bar button.gdprc_action__settings.gdprc_button.gdprc_action.button,
#gdprc_bar .gdprc_action__bar_save_all.gdprc_button.gdprc_action.button {
    background-color: var(--wp--preset--color--quinary);
    border-radius: var(--wp--custom--global--border--radius--button);
    border-width: 0;
    color: var(--wp--preset--color--primary);
    font-family: var(--wp--custom--global--typography--font-family--button);
    font-size: calc(var(--wp--preset--font-size--normal) - 2px);
    line-height: 1;
    display: inline-flex;
    gap: 10px;
    padding-top: 18px;
    padding-right: 32px;
    padding-bottom: 14px;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--wp--preset--spacing--50);
    padding-left: 32px;
    text-decoration: none;
}

#gdprc_bar button.gdprc_action__settings.gdprc_button.gdprc_action.button:after,
#gdprc_bar .gdprc_action__bar_save_all.gdprc_button.gdprc_action.button:after {
    content: "\e912";
    font-family: 'icomoon';
    font-size: var(--wp--preset--font-size--large);
    position: relative;
    transition: transform 0.3s ease;
    top: -2px;
}

#gdprc_bar button.gdprc_action__settings.gdprc_button.gdprc_action.button:hover:after,
#gdprc_bar .gdprc_action__bar_save_all.gdprc_button.gdprc_action.button:hover:after {
    transform: translateX(10px);
}

@media screen and (max-width: 640px) {
    #gdprc_bar .container {
        gap: var(--wp--preset--spacing--50);
    }
    #gdprc_bar {
        padding: var(--wp--preset--spacing--70) 0;
    }
    #gdprc_settings .gdprc_actions button.gdprc_action__save.gdprc_button.gdprc_action.button {
        white-space: nowrap;
    }
}

#gdprc_bar a.gdprc_action__close.gdprc_link {
    font-family: var(--wp--custom--global--typography--font-family--heading);
    font-weight: 400;
    font-size: var(--wp--preset--font-size--normal);
    color: var(--wp--preset--color--base);
    line-height: 100%;
    text-align: center;
    text-decoration: none;
    margin-bottom: var(--wp--preset--spacing--50);
}

#gdprc_bar a.gdprc_action__close.gdprc_link:hover {
    color: var(--wp--preset--color--quinary);
}

#gdprc_settings {
    border: 0;
    border-radius: var(--wp--custom--global--border--radius--base) !important;
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--primary);
    padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--60) 0;
    box-shadow: 0px 8px 16px 0px rgba(42, 54, 105, 0.1);
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--60);
}

#gdprc_settings .gdprc_header {
    background-color: transparent;
    padding: 0;
    border: 0;
}

#gdprc_settings .gdprc_header__subtitle {
    color: var(--wp--preset--color--contrast);
}

#gdprc_settings .gdprc_items {
    padding: 0;
    border: 0;
}

#gdprc_settings .gdprc_item__icon {
    margin-top: 0;
    background: linear-gradient(115.14deg, #FFFFFF 34.03%, #E3E7FA 100%);
    border-radius: 50%;
    color: var(--wp--preset--color--primary);
    width: 48px;
    display: flex;
    align-items: center;
    font-size: 22px;
    justify-content: center;
    height: 48px;
}

#gdprc_settings .gdprc_item__label {
    display: flex;
    align-items: center;
    padding: 0;
    gap: var(--wp--preset--spacing--30);
}

#gdprc_settings .gdprc_item__desc {
    margin-top: var(--wp--preset--spacing--30);
    color: var(--wp--preset--color--contrast);
    font-size: var(--wp--preset--font-size--medium);
}

#gdprc_settings .gdprc_actions {
    padding: var(--wp--preset--spacing--60);
    background-color: var(--wp--preset--color--primary);
    margin-left: calc(var(--wp--preset--spacing--60) * -1);
    margin-right: calc(var(--wp--preset--spacing--60) * -1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--40);
}

#gdprc_settings .gdprc_actions button.gdprc_action__save.gdprc_button.gdprc_action.button {
    background-color: var(--wp--preset--color--quinary);
    border-radius: var(--wp--custom--global--border--radius--button);
    border-width: 0;
    color: var(--wp--preset--color--primary);
    font-family: var(--wp--custom--global--typography--font-family--button);
    font-size: calc(var(--wp--preset--font-size--normal) - 2px);
    line-height: 1;
    display: inline-flex;
    gap: 10px;
    padding-top: 18px;
    margin: 0;
    padding-right: 32px;
    padding-bottom: 14px;
    width: auto;
    align-items: center;
    justify-content: center;
    padding-left: 32px;
    text-decoration: none;
}
#gdprc_settings .gdprc_actions button.gdprc_action__save.gdprc_button.gdprc_action.button:after {
    content: "\e912";
    font-family: 'icomoon';
    font-size: var(--wp--preset--font-size--large);
    position: relative;
    transition: transform 0.3s ease;
    top: -2px;
}
#gdprc_settings .gdprc_actions button.gdprc_action__save.gdprc_button.gdprc_action.button:hover:after {
    transform: translateX(10px);
}

 #gdprc_settings .gdprc_actions .gdprc_action__delete.gdprc_link.gdprc_action {
    font-family: var(--wp--custom--global--typography--font-family--body);
    font-size: var(--wp--preset--font-size--normal);
    line-height: 150%;
    text-decoration: underline;
    color: var(--wp--preset--color--base);
 }

 #gdprc_settings .gdprc_item__toggle__wrapper label {
    border-radius: 100px;
 }

 #gdprc_settings.animations .gdprc_item__toggle__wrapper label:after {
    border-radius: 50%;
}

#gdprc_settings .gdprc_item__toggle__wrapper input[type=checkbox]:checked+label:after {
     background-color: var(--wp--preset--color--quinary);
 }

 #gdprc_settings .gdprc_item__toggle__wrapper input[type=checkbox]:checked+label {
    background-color: var(--wp--preset--color--primary);
 }

#gdprc_settings .gdprc_item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-flow: wrap;
    gap: var(--wp--preset--spacing--30);
}

#gdprc_settings .gdprc_item__toprow {
    display: flex;
    align-items: center;
    justify-content: space-between; /* of 'flex-start' als je de toggle naast de tekst wilt */
    width: 100%;
}

/* Zorg dat de rest eronder 100% valt */
#gdprc_settings .gdprc_item__desc,
#gdprc_settings .gdprc_item__link {
    width: 100%;
}

#gdprc_settings .gdprc_item__toggle__wrapper {
    position: relative;
    top: 7px;
    right: 0;
}

#gdprc_settings .gdprc_item .gdprc_item__link.gdprc_link {
    margin-top: var(--wp--preset--spacing--30);
}