/* * {scroll-behavior: smooth !important;} */
body {background-color: #E6DCCF !important; scroll-behavior: smooth !important; scroll-behavior: smooth; position: relative;   display: block; min-height: 100vh;}
#wrapper{overflow: hidden; }

/* Intro */
#intro-text {height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:0 24px; position:relative;}
#intro-text:after {content:""; background:url('../media/bg-shape.svg'); position:absolute; z-index:1; pointer-events:none; right:-48px; bottom:48px; width:473px; height:880px;}
#intro-text .intro-text-container {max-width:640px; display:inline-flex; align-items:center; gap:16px; flex-direction:column; position:relative; z-index:9;}
#intro-text .intro-text-container .title {font-size:3.2rem; font-weight:600; margin:0;}
#intro-text .intro-text-container .description {font-size:1.4rem; font-weight:400; margin:0;}

/* Configurator */
.configurator-header {position:fixed; padding:16px 32px; width:100%; height:128px; display:flex; align-items:center; justify-content:space-between; z-index:99;}
.configurator-header img {width:196px;}

.configurator-wrapper {display:flex; align-items:center; justify-content:center; min-height:100vh; padding:160px 24px;}
.configurator-wrapper:after {content:""; background:url('../media/bg-shape.svg'); position:absolute; z-index:1; pointer-events:none; left:-48px; bottom:-48px; width:473px; height:880px; transform:scale(-1); }
.configurator-wrapper .configurator-container {width:100%; max-width:var(--site_width); z-index:9; position:relative;}
.configurator-wrapper .configurator-container .configurator-row {margin-bottom:64px;}
.configurator-wrapper .configurator-container .configurator-row:last-child {margin-bottom:0;}

.configurator-wrapper .configurator-row .subtitle {color:#cd2a2e; text-transform:uppercase; font-size:18px; font-weight:600; text-align:center; margin-top:0; margin-bottom:16px;}
.configurator-wrapper .configurator-row .title {color:#4d4a45; font-size:40px; font-weight:600; text-align:center;}

.configurator-wrapper #configurator {overflow:visible; display:flex; align-items:center; justify-content:center;}
.configurator-wrapper #configurator .swiper-wrapper {overflow:visible; width:auto; max-width:100%;}
.configurator-wrapper #configurator .swiper-wrapper .single {background:#fff; border-radius:16px; padding:48px 24px; height:auto; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:32px; border:2px solid #FAF6F0; transition:transform .3s, border .3s, box-shadow .3s;}
.configurator-wrapper #configurator .swiper-wrapper .single:hover {transform:translateY(-8px); box-shadow: 5px 7px 16px rgba(178, 165, 142, 0.5); cursor:pointer;}
.configurator-wrapper #configurator .swiper-wrapper .single.active {border-color:#4f9a38; user-select:none; cursor:pointer; box-shadow: 5px 7px 16px rgba(178, 165, 142, 0.5); }
.configurator-wrapper #configurator .swiper-wrapper .single img {max-width:128px; max-height:128px; object-fit:contain;}
.configurator-wrapper #configurator .swiper-wrapper .single .title {font-size:22px; font-weight:bold; text-align:center; text-transform:uppercase; line-height:1.2;}
.configurator-wrapper #configurator .swiper-wrapper .single .content * {color:#4D4A45!important; font-size:13px!important;}
.configurator-wrapper #configurator .swiper-wrapper .single .content ul {margin:0; padding-left:0;}
.configurator-wrapper #configurator .swiper-wrapper .single .content ul li {list-style-type:none; display:flex; align-items:flex-start; line-height:1.4; margin-bottom:12px;}
.configurator-wrapper #configurator .swiper-wrapper .single .content li:before {content:''; height:20px; width:24px; margin-top:-2px; background:url('../images/Hesselink-header-check.svg') no-repeat; background-size:cover; display:inline-flex; flex-shrink:0;}
.configurator-wrapper #configurator .swiper-wrapper .single .button {margin-top:auto;}
.configurator-wrapper #configurator .swiper-wrapper .single.no-cursor{cursor: default;}

#prev-button-step-1{display:none;}

.configurator-wrapper #configurator .swiper-wrapper .single.cta {justify-content:space-between; position:relative; align-items:center; text-align:center; justify-content: center; background:url(https://hesselinkkoffie.nl/wp-content/uploads/2024/06/keuzehulp-bg.webp) no-repeat center center; background-size:cover; overflow:hidden;}
.configurator-wrapper #configurator .swiper-wrapper .single.cta:after {content:''; position:absolute; top:0; left:0; height:100%; width:100%; background:#fff; opacity:.8; z-index:8;}
.configurator-wrapper #configurator .swiper-wrapper .single.cta * {position:relative; z-index:9;}
.configurator-wrapper #configurator .swiper-wrapper .single.cta .description {color:#4d4a45;}
.configurator-wrapper #configurator .swiper-wrapper .single.cta .button {margin-top:0;}

.configurator-wrapper .configurator-row .configurator-steps {display:flex; align-items:center; gap:16px; justify-content: center;}
.configurator-wrapper .configurator-row .configurator-steps .configurator-line {width:calc(100% - 200px);  height:5px; border-radius:999px; background:#fff; position:relative;}
.configurator-wrapper .configurator-row .configurator-steps .configurator-line .inner {position:absolute; height:100%; left:0; background:#4f9a38; transition:width 0.5s;}
.configurator-wrapper .configurator-row .configurator-steps .step-counter {font-weight:600;}
.configurator-wrapper .configurator-row .configurator-steps .next-btn,
.configurator-wrapper .configurator-row .configurator-steps .prev-btn {width:64px; height:64px; border-radius:999px; background:#fff; display:flex; justify-content:center; align-items:center; cursor:pointer; transition:.3s;}
.configurator-wrapper .configurator-row .configurator-steps .next-btn.disabled,
.configurator-wrapper .configurator-row .configurator-steps .prev-btn.disabled{user-select: none; opacity: 0.4; pointer-events: none;}
.configurator-wrapper .configurator-row .configurator-steps .next-btn:hover,
.configurator-wrapper .configurator-row .configurator-steps .prev-btn:hover{background:#4f9a38; color:#fff;}
.configurator-wrapper .configurator-row .configurator-steps .next-btn i,
.configurator-wrapper .configurator-row .configurator-steps .prev-btn i {font-size:24px; pointer-events:none;}
.configurator-wrapper{overflow: hidden;}

/* .configurator-wrapper .configurator-row ul.usps {display:flex; align-items:center; justify-content:center; flex-direction:column; padding-left:0; gap:4px;}
.configurator-wrapper .configurator-row ul.usps li {list-style-type:none; display:flex; align-items:center;}
.configurator-wrapper .configurator-row ul.usps li:before {content:''; height:28px; width:32px; background:url('../images/Hesselink-header-check.svg') no-repeat; background-size:cover; display:inline-flex; flex-shrink:0;} */

.configurator-wrapper .configurator-row .configurator-steps .configurator-line.completed:after {content:"\f00c"; font-family:'Font Awesome 6 Pro'; left:100%; width:64px; height:64px; border-radius:50%; background:#fff; color:#4f9a38; display:flex; align-items: center; justify-content: center; font-size:24px; position:absolute; transform:translateY(calc(-50% + 2px))}

.configurator-wrapper .safe-message {opacity:0.7; color:#4D4A45; display:inline-flex; margin-bottom:32px; align-items: center; gap:4px;}

#wrapper .configurator-wrapper .button.green:hover {background:#4f9a38!important}
#wrapper [data-configurator="form"] .wpforms-submit-container button:hover {background:#4f9a38!important}

[data-error] {    width: 100%; display: block; text-align: center; color: red; margin-top: 32px; }

body em.wpforms-error {color:#F18701!important; margin-top: 8px !important; font-size: 12px !important; padding: 0 !important;}
body em.wpforms-error::before {display: none !important; }
.snackbar-container {
    background: #FAF6F0 !important;
    border-radius: 16px !important;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
    border: 2px solid #FAF6F0;
    transition: transform 0.3s, border 0.3s, box-shadow 0.3s;
    max-width: 250px;
    padding: 12px !important;
    margin: 0 auto;
    position: fixed !important;
    bottom: -80px;
    left: 0;
    right: 0;
    transition: 0.3s all;
    color: #cd2a2e;
    z-index: 9999;
}

/* body em.wpforms-error {
    bottom: -100px;
    animation: slideInFromTop 4.5s ease-in 1;
    line-height: 2 !important;
}*/

.snackbar-container.visible {
    bottom: 128px;
} 

.hidden {display: none !important; opacity: 0; visibility: hidden !important }
[data-configurator="navigationEnd"] {justify-content: center; display: flex; gap: 32px}

[data-configurator="form"]  {max-width: 900px; margin: 0 auto; }
[data-configurator="form"] .wpforms-submit-container {display: flex; justify-content: start; } 
[data-configurator="form"] .wpforms-submit-container button {background: #4f9a38!important; transition: .3s !important; padding: 10px 20px !important; border-radius: 10px !important; font-weight: 500 !important; font-size: 16px !important; font-family: Poppins, Arial, Helvetica, sans-serif !important; line-height: 1.5 !important; height: auto !important; }
[data-configurator="form"] .wpforms-submit-container button:after {display:none !important; }
[data-configurator="form"] .wpforms-submit-container button:hover {background: #B2A58E !important;}

[data-configurator="form"] form input:not([type="checkbox"]) {padding: 0px !important; background: transparent !important; font-size: 16px !important; height: 45px; border: none !important; border-radius: 0 !important; box-shadow: none !important; border-bottom: solid #4D4A45 2px !important;}
[data-configurator="form"] form input:not([type="checkbox"]):not(.wpforms-error).completed {border-bottom:solid #4f9a38 2px !important; background-image:url(../media/check-green.svg) !important; background-position:center right !important; background-repeat:no-repeat !important;}


@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(79, 154, 56, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(79, 154, 56, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(79, 154, 56, 0);
  }
}

[data-configurator="form"] .wpforms-submit-container button.ready-to-submit  {  animation: pulse 1.5s infinite;color: #fff; transition: all 0.3s ease;}

@keyframes slideInFromTop {
    0% { bottom: -100px; }
    11.11% { bottom: 128px; } /* 0.5s of 4.5s total */
    88.89% { bottom: 128px; } /* 3.5s of 4.5s total */
    100% { bottom: -100px; } /* Last 0.5s of 4.5s total */
}

@media screen and (max-width: 800px) {
    #intro-text:after,
    .configurator-wrapper:after {display:none;}

    #wrapper {--headerHeight:96px;}
    .configurator-header {height:var(--headerHeight); position:relative;}
    .configurator-header img {width:125px;}

    #intro-text {min-height:calc(100vh - var(--headerHeight)); height:auto;}
    #configurator-wrapper {min-height:calc(100vh - var(--headerHeight)); height:auto; padding:32px 16px;}

    .configurator-wrapper #configurator .swiper-wrapper .single {padding:24px 16px;}
    .configurator-wrapper .configurator-row .title {font-size:24px;}
    .configurator-wrapper #configurator .swiper-wrapper .single {gap:12px;}
    .configurator-wrapper #configurator .swiper-wrapper .single .title {font-size:18px; text-align:left;}
}