body .fluentform {
--gs-form-orange: #df7138;
--gs-form-orange-dark: #bd5325;
--gs-form-charcoal: #2d3031;
--gs-form-ink: #17191a;
--gs-form-muted: #686d70;
--gs-form-line: #d9dcde;
--gs-form-warm: #f7f3ef;
box-sizing: border-box;
position: relative;
width: min(100%, 980px);
margin: clamp(28px, 5vw, 64px) auto;
padding: clamp(26px, 4vw, 56px);
overflow: hidden;
color: var(--gs-form-ink);
background:
radial-gradient(circle at 100% 0, rgba(223, 113, 56, .11), transparent 32%),
#ffffff;
border: 1px solid rgba(45, 48, 49, .11);
border-radius: 28px;
box-shadow: 0 26px 70px rgba(23, 25, 26, .12), 0 4px 16px rgba(23, 25, 26, .05);
}
body .fluentform::after {
content: "";
position: absolute;
inset: 0 0 auto;
height: 5px;
background: linear-gradient(90deg, var(--gs-form-orange), #f5a161 55%, var(--gs-form-charcoal));
}
body .fluentform_wrapper_8 form::before {
content: "Vrijblijvend, zonder boekverplichting";
display: table;
margin: 0 auto clamp(24px, 4vw, 38px);
padding: 10px 16px;
color: #773816;
background: #fff4ec;
border: 1px solid rgba(223, 113, 56, .25);
border-radius: 999px;
font-size: 13px;
font-weight: 750;
letter-spacing: .02em;
text-align: center;
}
body .fluentform .ff-el-group { margin-bottom: 22px; }
body .fluentform .ff-el-input--label { margin-bottom: 9px; }
body .fluentform .ff-el-input--label label,
body .fluentform .ff-el-input--label.ff-el-is-required label {
color: var(--gs-form-ink);
font-size: 13px;
font-weight: 800;
letter-spacing: .045em;
line-height: 1.35;
}
body .fluentform .ff-el-input--label label::after { color: var(--gs-form-orange-dark); }
body .fluentform input.ff-el-form-control:not([type="checkbox"]):not([type="radio"]),
body .fluentform select.ff-el-form-control,
body .fluentform textarea.ff-el-form-control,
body .fluentform .iti input.ff-el-form-control {
box-sizing: border-box;
width: 100%;
min-height: 56px;
padding: 0 17px;
color: var(--gs-form-ink);
background: #fbfaf9;
border: 1.5px solid var(--gs-form-line);
border-radius: 14px;
box-shadow: inset 0 1px 2px rgba(23, 25, 26, .025);
font-size: 16px;
line-height: 1.4;
transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body .fluentform textarea.ff-el-form-control {
min-height: 140px;
padding-block: 15px;
resize: vertical;
}
body .fluentform input.ff-el-form-control::placeholder,
body .fluentform textarea.ff-el-form-control::placeholder { color: #92979a; opacity: 1; }
body .fluentform input.ff-el-form-control:focus,
body .fluentform select.ff-el-form-control:focus,
body .fluentform textarea.ff-el-form-control:focus {
background: #ffffff;
border-color: var(--gs-form-orange) !important;
box-shadow: 0 0 0 4px rgba(223, 113, 56, .14) !important;
outline: 0 !important;
}
body .fluentform .ff-t-container { gap: 16px; }
body .fluentform .ff-t-cell { padding: 0 !important; }
body .fluentform .ff-el-input--content:has(> .ff-el-form-check) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 10px;
}
body .fluentform .ff-el-form-check { margin: 0 !important; }
body .fluentform .ff-el-form-check-label {
box-sizing: border-box;
display: flex !important;
align-items: center;
gap: 11px;
min-height: 56px;
height: 100%;
margin: 0;
padding: 13px 15px;
color: var(--gs-form-ink);
background: #ffffff;
border: 1.5px solid var(--gs-form-line);
border-radius: 14px;
cursor: pointer;
font-size: 14px;
font-weight: 700;
line-height: 1.35;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body .fluentform .ff-el-form-check-label:hover {
transform: translateY(-1px);
border-color: rgba(223, 113, 56, .65);
box-shadow: 0 8px 20px rgba(23, 25, 26, .07);
}
body .fluentform .ff-el-form-check-label:has(input:checked) {
color: #6c2f11;
background: #fff4ec;
border-color: var(--gs-form-orange);
box-shadow: 0 0 0 3px rgba(223, 113, 56, .12);
}
body .fluentform input[type="radio"],
body .fluentform input[type="checkbox"] {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 0;
accent-color: var(--gs-form-orange-dark);
}
body .fluentform_wrapper_3 .grooveshow-offer-extras {
margin: 34px 0 30px;
padding: clamp(20px, 3vw, 30px);
background:
radial-gradient(circle at 100% 0, rgba(223, 113, 56, .13), transparent 34%),
#f7f3ef;
border: 1px solid rgba(45, 48, 49, .1);
border-radius: 22px;
}
body .fluentform_wrapper_3 .grooveshow-offer-extras .ff-el-input--label {
margin-bottom: 20px;
}
body .fluentform_wrapper_3 .grooveshow-offer-extras .ff-el-input--label label {
color: var(--gs-form-charcoal) !important;
font-size: clamp(20px, 2.4vw, 27px) !important;
font-weight: 850 !important;
letter-spacing: -.015em !important;
line-height: 1.2 !important;
text-transform: none !important;
}
body .fluentform_wrapper_3 .grooveshow-offer-extras .ff-el-input--content {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
body .fluentform_wrapper_3 .grooveshow-offer-extras .ff-el-form-check {
min-width: 0;
}
body .fluentform_wrapper_3 .grooveshow-offer-extras .ff-el-form-check:last-child:nth-child(odd) {
grid-column: 1 / -1;
width: calc(50% - 6px);
justify-self: center;
}
body .fluentform_wrapper_3 .grooveshow-offer-extras .ff-el-form-check-label {
position: relative;
display: block !important;
height: 100%;
min-height: 166px;
padding: 18px 18px 17px !important;
overflow: hidden;
background: rgba(255, 255, 255, .96);
border: 1.5px solid rgba(45, 48, 49, .13);
border-radius: 18px;
box-shadow: 0 8px 22px rgba(23, 25, 26, .055);
}
body .fluentform_wrapper_3 .grooveshow-offer-extras .ff-el-form-check-label::before {
content: attr(data-extra-icon);
display: grid;
width: 44px;
height: 44px;
place-items: center;
margin-bottom: 14px;
background: #fff3e9;
border: 1px solid rgba(223, 113, 56, .22);
border-radius: 13px;
font-size: 23px;
line-height: 1;
}
body .fluentform_wrapper_3 .grooveshow-offer-extras .ff-el-form-check-label::after {
content: "";
position: absolute;
z-index: 2;
top: 18px;
right: 18px;
display: grid;
width: 24px;
height: 24px;
place-items: center;
color: #fff;
background: #fff;
border: 2px solid rgba(45, 48, 49, .28);
border-radius: 7px;
box-sizing: border-box;
font-size: 15px;
font-weight: 900;
line-height: 1;
transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
body .fluentform_wrapper_3 .grooveshow-offer-extras .ff-el-form-check-label:hover {
transform: translateY(-2px);
border-color: rgba(223, 113, 56, .55);
box-shadow: 0 13px 30px rgba(23, 25, 26, .09);
}
body .fluentform_wrapper_3 .grooveshow-offer-extras .ff-el-form-check-label:has(input:checked) {
color: var(--gs-form-ink);
background: linear-gradient(145deg, #fff8f2, #fff1e5);
border-color: var(--gs-form-orange);
box-shadow: 0 0 0 3px rgba(223, 113, 56, .12), 0 13px 30px rgba(23, 25, 26, .08);
}
body .fluentform_wrapper_3 .grooveshow-offer-extras .ff-el-form-check-label:has(input:checked)::after {
content: "✓";
background: var(--gs-form-orange-dark);
border-color: var(--gs-form-orange-dark);
transform: scale(1.04);
}
body .fluentform_wrapper_3 .grooveshow-offer-extras .ff-el-form-check-label:has(input:focus-visible) {
outline: 3px solid rgba(0, 132, 214, .28);
outline-offset: 3px;
}
body .fluentform_wrapper_3 .grooveshow-offer-extras .ff-el-form-check-label > input[type="checkbox"] {
position: absolute !important;
z-index: 3;
top: 18px !important;
right: 18px !important;
bottom: auto !important;
left: auto !important;
display: block !important;
float: none !important;
width: 24px !important;
height: 24px !important;
margin: 0 !important;
opacity: 0;
cursor: pointer;
}
body .fluentform_wrapper_3 .grooveshow-offer-extras .grooveshow-extra-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 5px;
padding-right: 28px;
text-transform: none !important;
}
body .fluentform_wrapper_3 .grooveshow-offer-extras .grooveshow-extra-title {
color: var(--gs-form-ink);
font-size: 16px;
font-weight: 850;
letter-spacing: -.01em;
line-height: 1.35;
text-transform: none !important;
}
body .fluentform_wrapper_3 .grooveshow-offer-extras .grooveshow-extra-detail {
color: var(--gs-form-muted);
font-size: 13px;
font-weight: 600;
line-height: 1.35;
}
body .fluentform_wrapper_3 .grooveshow-offer-extras .grooveshow-extra-price {
display: inline-flex;
margin-top: 4px;
padding: 5px 9px;
color: #773816;
background: #fff0e4;
border: 1px solid rgba(223, 113, 56, .2);
border-radius: 999px;
font-size: 12px;
font-weight: 850;
line-height: 1.2;
white-space: nowrap;
}
body .fluentform .ff-el-section-break,
body .fluentform .ff-section_break_desk {
margin: 8px 0 24px;
padding-bottom: 13px;
border-bottom: 1px solid rgba(45, 48, 49, .12);
}
body .fluentform .ff-el-section-break h2,
body .fluentform .ff-el-section-break h3,
body .fluentform .ff-section_break_desk h2,
body .fluentform .ff-section_break_desk h3 {
margin: 0;
color: var(--gs-form-charcoal);
font-size: clamp(24px, 3vw, 34px);
line-height: 1.15;
}
body .fluentform .ff-step-header { margin-bottom: clamp(28px, 4vw, 44px); }
body .fluentform .ff-step-titles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
body .fluentform .ff-step-titles li {
position: relative;
padding: 13px 15px !important;
color: var(--gs-form-muted);
background: var(--gs-form-warm);
border: 1px solid rgba(45, 48, 49, .1);
border-radius: 13px;
font-weight: 750;
text-align: center;
}
body .fluentform .ff-step-titles li.ff_active,
body .fluentform .ff-step-titles li.active {
color: #ffffff;
background: var(--gs-form-charcoal);
border-color: var(--gs-form-charcoal);
box-shadow: 0 10px 24px rgba(45, 48, 49, .16);
}
body .fluentform .ff-step-titles li::before,
body .fluentform .ff-step-titles li::after { display: none !important; }
body .fluentform .ff-btn,
body .fluentform button.ff-btn,
body .fluentform .ff-btn-submit,
body .fluentform .ff-btn-next {
min-height: 56px;
padding: 0 28px !important;
color: #ffffff !important;
background: linear-gradient(135deg, var(--gs-form-orange), var(--gs-form-orange-dark)) !important;
border: 0 !important;
border-radius: 999px !important;
box-shadow: 0 12px 28px rgba(189, 83, 37, .24) !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: .025em;
text-transform: none !important;
transition: transform .18s ease, box-shadow .18s ease !important;
}
body .fluentform .ff-btn:hover,
body .fluentform button.ff-btn:hover {
transform: translateY(-2px);
box-shadow: 0 16px 34px rgba(189, 83, 37, .3) !important;
}
body .fluentform .ff-btn-prev {
color: var(--gs-form-charcoal) !important;
background: #ffffff !important;
border: 1.5px solid rgba(45, 48, 49, .28) !important;
box-shadow: none !important;
}
body .fluentform .ff_submit_btn_wrapper { margin-top: 10px; }
body .fluentform .ff_submit_btn_wrapper .ff-btn-submit { min-width: min(100%, 260px); }
body .fluentform .ff-message-success {
padding: 20px;
color: #235534;
background: #edf8f0;
border: 1px solid #b8dfc2;
border-radius: 15px;
box-shadow: none;
}
body .fluentform .error,
body .fluentform .text-danger,
body .fluentform .ff-el-is-error .error { color: #a92c2c; }
body .fluentform .ff-el-is-error .ff-el-form-control {
border-color: #c84545 !important;
box-shadow: 0 0 0 3px rgba(200, 69, 69, .1) !important;
}
@media (max-width: 690px){body .fluentform {
margin-block: 24px;
padding: 26px 18px 30px;
border-radius: 20px;
box-shadow: 0 18px 44px rgba(23, 25, 26, .11);
}body .fluentform .ff-t-container { display: block; }body .fluentform .ff-t-cell { width: 100% !important; }body .fluentform .ff-el-input--content:has(> .ff-el-form-check) { grid-template-columns: 1fr; }body .fluentform_wrapper_3 .grooveshow-offer-extras {
margin-block: 26px;
padding: 20px 14px;
border-radius: 18px;
}body .grooveshow-offer-form-column > .vc_column-inner {
padding-right: 16px !important;
padding-left: 16px !important;
}body .grooveshow-offer-form-row > .row_col_wrap_12_inner {
padding-right: 0 !important;
}body .fluentform_wrapper_3 .grooveshow-offer-extras .ff-el-input--content {
grid-template-columns: 1fr !important;
}body .fluentform_wrapper_3 .grooveshow-offer-extras .ff-el-form-check:last-child:nth-child(odd) {
grid-column: auto;
width: 100%;
}body .fluentform_wrapper_3 .grooveshow-offer-extras .ff-el-form-check-label {
min-height: 0;
padding: 17px !important;
}body .fluentform_wrapper_3 .grooveshow-offer-extras .ff-el-form-check-label:hover {
transform: none;
}body .fluentform .ff-step-titles { grid-template-columns: 1fr 1fr; }body .fluentform .ff-btn,
body .fluentform button.ff-btn,
body .fluentform .ff-btn-submit,
body .fluentform .ff-btn-next,
body .fluentform .ff-btn-prev {
width: 100%;
margin: 6px 0 !important;
float: none !important;
}}
@media (max-width: 360px){body .fluentform .ff-el-recaptcha > div {
transform: scale(.86);
transform-origin: left top;
}}