/* =========================================================
ZekerSlagen Proefles Wizard
Definitieve versie - strak, gecentreerd, desktop/mobile fix
========================================================= */

/* -----------------------------
Scoped reset
----------------------------- */
#zs-proefles-wizard,
#zs-proefles-wizard *,
#zs-proefles-wizard *::before,
#zs-proefles-wizard *::after {
box-sizing: border-box;
}

#zs-proefles-wizard * {
margin: 0;
padding: 0;
}

/* -----------------------------
Basis variabelen
----------------------------- */
#zs-proefles-wizard {
--zs-primary: #635bff;
--zs-primary-dark: #5147ea;
--zs-primary-soft: #f4f3ff;


--zs-button: #4f6ff2;
--zs-button-hover: #455fe4;

--zs-text: #111327;
--zs-muted: #7d8394;
--zs-muted-light: #a8aebb;

--zs-border: #e6eaf2;
--zs-border-strong: #d7deeb;

--zs-card: #ffffff;
--zs-field: #fafbff;

--zs-success: #10b981;
--zs-error: #ef4444;

width: 100%;
max-width: 1120px;

margin: 0 auto !important;
padding: 0 !important;

position: relative;
z-index: 20;

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

color: var(--zs-text);
line-height: 1.5;


}

/* =========================================================
Card
========================================================= */
#zs-proefles-wizard .zs-wizard-card {
position: relative;
overflow: hidden;


width: 100%;

background:
    radial-gradient(circle at top left, rgba(99, 91, 255, 0.04), transparent 34%),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.035), transparent 34%),
    var(--zs-card);

border: 1px solid rgba(230, 234, 242, 0.95);
border-radius: 34px;

padding: 72px 78px 66px !important;

box-shadow:
    0 34px 90px rgba(15, 23, 42, 0.14),
    0 14px 34px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);


}

/* Geen paarse balk bovenaan */
#zs-proefles-wizard .zs-wizard-card::before,
#zs-proefles-wizard .zs-wizard-card::after {
display: none !important;
content: none !important;
}

/* =========================================================
Step indicator
Desktop: alleen bolletjes
Mobiel: alleen "Stap x van 7"
========================================================= */
#zs-proefles-wizard .zs-step-indicator {
width: 100%;
max-width: 680px;


margin: 0 auto 52px !important;

display: flex;
flex-direction: column;
align-items: center;

text-align: center;


}

/* Desktop: staptekst verbergen */
#zs-proefles-wizard .zs-step-counter {
display: none !important;
}

/* Desktop: bolletjes tonen */
#zs-proefles-wizard .zs-steps-row {
display: flex !important;
align-items: center;
justify-content: center;


width: 100%;


}

#zs-proefles-wizard .zs-dot {
width: 38px;
height: 38px;
flex: 0 0 38px;


border-radius: 999px;
border: 1px solid #e1e5ef;
background: #f7f8fb;

color: #9aa1b1;
font-size: 14px;
font-weight: 800;
line-height: 1;

display: flex;
align-items: center;
justify-content: center;

transition:
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;


}

#zs-proefles-wizard .zs-dot.active {
transform: scale(1.08);
color: #ffffff;
border-color: transparent;
background: var(--zs-primary);


box-shadow:
    0 10px 24px rgba(99, 91, 255, 0.28),
    0 0 0 6px rgba(99, 91, 255, 0.08);


}

#zs-proefles-wizard .zs-dot.completed {
color: #ffffff;
border-color: transparent;
background: var(--zs-primary);
}

#zs-proefles-wizard .zs-dot .zs-dot-check {
display: none;
font-size: 14px;
line-height: 1;
}

#zs-proefles-wizard .zs-dot.completed .zs-dot-num {
display: none;
}

#zs-proefles-wizard .zs-dot.completed .zs-dot-check {
display: block;
}

#zs-proefles-wizard .zs-line {
width: 72px;
height: 2px;


background: #e5e8f1;

transition: background 0.18s ease;


}

#zs-proefles-wizard .zs-line.active {
background: var(--zs-primary);
}

/* =========================================================
Steps
========================================================= */
#zs-proefles-wizard .zs-step {
display: none;
}

#zs-proefles-wizard .zs-step.active {
display: block;
animation: zsStepIn 0.28s ease both;
}

@keyframes zsStepIn {
from {
opacity: 0;
transform: translateY(10px);
}


to {
    opacity: 1;
    transform: translateY(0);
}


}

/* =========================================================
Header per stap
========================================================= */
#zs-proefles-wizard .zs-step-header {
max-width: 700px;


margin: 0 auto 52px !important;

text-align: center;


}

#zs-proefles-wizard .zs-step-header h2 {
margin: 0 0 16px !important;


color: var(--zs-text);

font-size: 34px;
font-weight: 900;
line-height: 1.14;
letter-spacing: -0.045em;


}

#zs-proefles-wizard .zs-step-header p {
max-width: 580px;


margin: 0 auto;

color: var(--zs-muted);

font-size: 17px;
font-weight: 500;
line-height: 1.65;


}

/* =========================================================
Gecentreerde content breedtes
========================================================= */
#zs-proefles-wizard .zs-fields-row,
#zs-proefles-wizard .zs-days-grid,
#zs-proefles-wizard .zs-dagdeel-grid,
#zs-proefles-wizard .zs-review,
#zs-proefles-wizard .zs-step-nav {
width: 100%;
margin-left: auto !important;
margin-right: auto !important;
}

#zs-proefles-wizard .zs-fields-row {
max-width: 820px;
}

#zs-proefles-wizard .zs-days-grid {
max-width: 900px;
}

#zs-proefles-wizard .zs-dagdeel-grid {
max-width: 820px;
}

#zs-proefles-wizard .zs-review {
max-width: 820px;
}

#zs-proefles-wizard .zs-step-nav {
max-width: 820px;
}

/* =========================================================
Velden
========================================================= */
#zs-proefles-wizard .zs-fields-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 34px;
}

#zs-proefles-wizard .zs-field {
position: relative;
}

#zs-proefles-wizard .zs-field label {
display: block;


margin-bottom: 12px;

color: var(--zs-text);

font-size: 15px;
font-weight: 850;
line-height: 1.25;
letter-spacing: -0.01em;


}

#zs-proefles-wizard .zs-field input,
#zs-proefles-wizard .zs-field textarea {
width: 100%;
min-height: 64px;


border: 1.5px solid var(--zs-border);
border-radius: 18px;
background: var(--zs-field);

color: var(--zs-text);

font-family: inherit;
font-size: 17px;
font-weight: 520;
line-height: 1.45;

padding: 18px 22px;

outline: none !important;

box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(15, 23, 42, 0.025);

transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;


}

#zs-proefles-wizard .zs-field textarea {
min-height: 165px;
resize: vertical;
}

#zs-proefles-wizard .zs-field input::placeholder,
#zs-proefles-wizard .zs-field textarea::placeholder {
color: #aab0bf;
font-weight: 450;
}

#zs-proefles-wizard .zs-field input:hover,
#zs-proefles-wizard .zs-field textarea:hover {
border-color: #d8deeb;
background: #ffffff;
}

#zs-proefles-wizard .zs-field input:focus,
#zs-proefles-wizard .zs-field textarea:focus {
border-color: var(--zs-primary) !important;
background: #ffffff;


box-shadow:
    0 0 0 5px rgba(99, 91, 255, 0.10),
    0 10px 24px rgba(15, 23, 42, 0.045) !important;


}

#zs-proefles-wizard .zs-field input.has-error,
#zs-proefles-wizard .zs-field textarea.has-error {
border-color: var(--zs-error) !important;
background: #fff8f8;


box-shadow: 0 0 0 5px rgba(239, 68, 68, 0.08) !important;


}

/* Input met icoon */
#zs-proefles-wizard .zs-input-wrap {
position: relative;
}

#zs-proefles-wizard .zs-input-wrap .zs-input-icon {
position: absolute;
top: 50%;
left: 22px;
z-index: 2;


width: 22px;
height: 22px;

transform: translateY(-50%);

color: #9da5b5;

display: flex;
align-items: center;
justify-content: center;

pointer-events: none;


}

/* Belangrijk: voorkomt dat icoon over tekst valt */
#zs-proefles-wizard .zs-input-wrap input {
padding-left: 64px !important;
}

/* Error text */
#zs-proefles-wizard .zs-field-error {
display: block;


min-height: 18px;
margin-top: 8px;

color: var(--zs-error);

font-size: 12.5px;
font-weight: 700;
line-height: 1.35;

opacity: 0;

transition: opacity 0.18s ease;


}

#zs-proefles-wizard .zs-field-error.show {
opacity: 1;
}

/* =========================================================
Dag kaarten
========================================================= */
#zs-proefles-wizard .zs-days-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}

#zs-proefles-wizard .zs-day-card {
position: relative;


min-height: 104px;
padding: 22px 14px;

border: 1.5px solid var(--zs-border);
border-radius: 20px;
background: #ffffff;

text-align: center;
cursor: pointer;
user-select: none;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;


}

#zs-proefles-wizard .zs-day-card:hover {
transform: translateY(-1px);


border-color: rgba(99, 91, 255, 0.48);
background: #fbfaff;

box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);


}

#zs-proefles-wizard .zs-day-card.selected {
border-color: var(--zs-primary);
background: #f7f6ff;


box-shadow:
    0 12px 28px rgba(99, 91, 255, 0.12),
    0 0 0 4px rgba(99, 91, 255, 0.06);


}

#zs-proefles-wizard .zs-day-card .zs-day-label {
display: block;


color: var(--zs-text);

font-size: 15px;
font-weight: 850;
line-height: 1.25;


}

#zs-proefles-wizard .zs-day-card .zs-day-check {
width: 26px;
height: 26px;


margin-top: 14px;

border-radius: 999px;
background: var(--zs-primary);
color: #ffffff;

display: flex;
align-items: center;
justify-content: center;

opacity: 0;
transform: scale(0.7);

transition:
    opacity 0.18s ease,
    transform 0.18s ease;


}

#zs-proefles-wizard .zs-day-card.selected .zs-day-check {
opacity: 1;
transform: scale(1);
}

/* =========================================================
Dagdeel kaarten
========================================================= */
#zs-proefles-wizard .zs-dagdeel-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}

#zs-proefles-wizard .zs-dagdeel-card {
position: relative;


min-height: 128px;
padding: 28px 22px;

border: 1.5px solid var(--zs-border);
border-radius: 22px;
background: #ffffff;

text-align: center;
cursor: pointer;
user-select: none;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);

transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;


}

#zs-proefles-wizard .zs-dagdeel-card:hover {
transform: translateY(-1px);


border-color: rgba(99, 91, 255, 0.48);
background: #fbfaff;

box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);


}

#zs-proefles-wizard .zs-dagdeel-card.selected {
border-color: var(--zs-primary);
background: #f7f6ff;


box-shadow:
    0 12px 28px rgba(99, 91, 255, 0.12),
    0 0 0 4px rgba(99, 91, 255, 0.06);


}

#zs-proefles-wizard .zs-dagdeel-card .zs-dagdeel-emoji {
display: block;


margin-bottom: 12px;

font-size: 31px;
line-height: 1;


}

#zs-proefles-wizard .zs-dagdeel-card .zs-dagdeel-name {
display: block;


color: var(--zs-text);

font-size: 17px;
font-weight: 850;
line-height: 1.25;


}

#zs-proefles-wizard .zs-dagdeel-card .zs-dagdeel-time {
display: block;


margin-top: 7px;

color: var(--zs-muted);

font-size: 14.5px;
font-weight: 520;
line-height: 1.3;


}

#zs-proefles-wizard .zs-dagdeel-card .zs-dagdeel-check {
position: absolute;
top: 16px;
right: 16px;


width: 28px;
height: 28px;

border-radius: 999px;
background: var(--zs-primary);
color: #ffffff;

display: flex;
align-items: center;
justify-content: center;

opacity: 0;
transform: scale(0.7);

transition:
    opacity 0.18s ease,
    transform 0.18s ease;


}

#zs-proefles-wizard .zs-dagdeel-card.selected .zs-dagdeel-check {
opacity: 1;
transform: scale(1);
}

/* =========================================================
Review / stap 6
========================================================= */
#zs-proefles-wizard .zs-review {
border: 1px solid var(--zs-border);
border-radius: 24px;
background: #ffffff;
overflow: hidden;


box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.025),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);


}

#zs-proefles-wizard .zs-review-row {
display: grid;
grid-template-columns: 54px minmax(160px, 240px) 1fr;
align-items: center;
gap: 20px;


padding: 21px 24px;

border-bottom: 1px solid #eef1f7;


}

#zs-proefles-wizard .zs-review-row:last-child {
border-bottom: none;
}

#zs-proefles-wizard .zs-review-icon {
width: 44px;
height: 44px;


border-radius: 16px;
background: var(--zs-primary-soft);
color: var(--zs-primary);

display: flex;
align-items: center;
justify-content: center;

}

#zs-proefles-wizard .zs-review-info {
display: contents;
}

#zs-proefles-wizard .zs-review-label {
color: var(--zs-muted);


font-size: 14px;
font-weight: 800;
line-height: 1.25;


}

#zs-proefles-wizard .zs-review-value {
color: var(--zs-text);

font-size: 16px;
font-weight: 800;
line-height: 1.35;

overflow-wrap: anywhere;
white-space: normal;


}

/* =========================================================
Navigatie knoppen
========================================================= */
#zs-proefles-wizard .zs-step-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;

margin-top: 56px !important;
padding-top: 38px !important;

border-top: 1px solid #eef1f7;


}

#zs-proefles-wizard .zs-btn-back,
#zs-proefles-wizard .zs-btn-next,
#zs-proefles-wizard .zs-btn-submit,
#zs-proefles-wizard .zs-btn-home {
min-height: 54px;

border-radius: 15px;

font-family: inherit;
font-size: 14px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.015em;
text-transform: none;

cursor: pointer;
text-decoration: none;

display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;

outline: none !important;

transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;


}

#zs-proefles-wizard .zs-btn-back,
#zs-proefles-wizard .zs-btn-home {
min-width: 150px;
padding: 0 30px;


border: 1.5px solid var(--zs-border-strong) !important;
background: #ffffff !important;
color: #4b5063 !important;

box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035) !important;


}

#zs-proefles-wizard .zs-btn-back:hover,
#zs-proefles-wizard .zs-btn-home:hover {
transform: translateY(-1px);


border-color: #cbd3e2 !important;
background: #f8f9fc !important;
color: var(--zs-text) !important;

box-shadow: 0 10px 22px rgba(15, 23, 42, 0.055) !important;

}

#zs-proefles-wizard .zs-btn-next,
#zs-proefles-wizard .zs-btn-submit {
min-width: 170px;
padding: 0 32px;

border: 1.5px solid var(--zs-button) !important;
background: var(--zs-button) !important;
color: #ffffff !important;

box-shadow:
    0 14px 28px rgba(79, 111, 242, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;


}

#zs-proefles-wizard .zs-btn-next:hover,
#zs-proefles-wizard .zs-btn-submit:hover {
transform: translateY(-1px);

border-color: var(--zs-button-hover) !important;
background: var(--zs-button-hover) !important;
color: #ffffff !important;

box-shadow:
    0 16px 32px rgba(79, 111, 242, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;


}

#zs-proefles-wizard .zs-btn-next:active,
#zs-proefles-wizard .zs-btn-submit:active,
#zs-proefles-wizard .zs-btn-back:active,
#zs-proefles-wizard .zs-btn-home:active {
transform: translateY(0);
}

#zs-proefles-wizard .zs-arrow {
font-style: normal;
line-height: 1;

display: inline-flex;
align-items: center;
justify-content: center;

min-width: 18px;

}

/* Loading */
#zs-proefles-wizard .zs-btn-submit .zs-submit-loading {
display: none;
align-items: center;
gap: 10px;
}

#zs-proefles-wizard .zs-btn-submit.loading {
opacity: 0.78;
pointer-events: none;
}

#zs-proefles-wizard .zs-btn-submit.loading .zs-submit-text {
display: none;
}

#zs-proefles-wizard .zs-btn-submit.loading .zs-submit-loading {
display: inline-flex;
}

#zs-proefles-wizard .zs-spinner {
width: 17px;
height: 17px;


border: 2px solid rgba(255, 255, 255, 0.38);
border-top-color: #ffffff;
border-radius: 999px;

animation: zsSpin 0.65s linear infinite;


}

@keyframes zsSpin {
to {
transform: rotate(360deg);
}
}

/* =========================================================
Success screen
========================================================= */
#zs-proefles-wizard .zs-success-step .zs-success-content {
position: relative;
text-align: center;
padding: 44px 0 18px;
}

#zs-proefles-wizard .zs-success-icon {
width: 92px;
height: 92px;

margin: 0 auto 32px;

border-radius: 999px;
background: var(--zs-success);
color: #ffffff;

display: flex;
align-items: center;
justify-content: center;

box-shadow:
    0 18px 40px rgba(16, 185, 129, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);

animation: zsPopIn 0.34s ease both;

}

@keyframes zsPopIn {
from {
opacity: 0;
transform: scale(0.65);
}

to {
    opacity: 1;
    transform: scale(1);
}


}

#zs-proefles-wizard .zs-success-step h2 {
margin: 0 0 14px;

color: var(--zs-text);

font-size: 30px;
font-weight: 900;
line-height: 1.15;
letter-spacing: -0.035em;

}

#zs-proefles-wizard .zs-success-step p {
max-width: 430px;


margin: 0 auto 36px;

color: var(--zs-muted);

font-size: 16.5px;
font-weight: 500;
line-height: 1.65;


}

/* Confetti */
#zs-proefles-wizard .zs-success-confetti {
position: relative;
height: 0;
overflow: visible;
}

#zs-proefles-wizard .zs-confetti-dot {
position: absolute;
top: 0;
left: 50%;

width: 8px;
height: 8px;

border-radius: 2px;
opacity: 0;

animation: zsConfetti 1.8s ease-out forwards;


}

@keyframes zsConfetti {
0% {
opacity: 1;
transform: translate(-50%, 0) rotate(0deg);
}

100% {
    opacity: 0;
    transform: translate(var(--x), var(--y)) rotate(720deg);
}


}

/* =========================================================
Shake
========================================================= */
#zs-proefles-wizard .zs-shake {
animation: zsShake 0.34s ease;
}

@keyframes zsShake {
0%, 100% {
transform: translateX(0);
}

20% {
    transform: translateX(-5px);
}

40% {
    transform: translateX(5px);
}

60% {
    transform: translateX(-3px);
}

80% {
    transform: translateX(3px);
}

}

/* =========================================================
Focus fix / geen groene rand
========================================================= */
#zs-proefles-wizard .zs-day-card:focus,
#zs-proefles-wizard .zs-dagdeel-card:focus,
#zs-proefles-wizard .zs-btn-next:focus,
#zs-proefles-wizard .zs-btn-back:focus,
#zs-proefles-wizard .zs-btn-submit:focus,
#zs-proefles-wizard .zs-btn-home:focus,
#zs-proefles-wizard input:focus,
#zs-proefles-wizard textarea:focus,
#zs-proefles-wizard button:focus,
#zs-proefles-wizard a:focus {
outline: none !important;
}

#zs-proefles-wizard .zs-day-card:focus-visible,
#zs-proefles-wizard .zs-dagdeel-card:focus-visible,
#zs-proefles-wizard .zs-btn-next:focus-visible,
#zs-proefles-wizard .zs-btn-back:focus-visible,
#zs-proefles-wizard .zs-btn-submit:focus-visible,
#zs-proefles-wizard .zs-btn-home:focus-visible {
outline: 3px solid rgba(99, 91, 255, 0.25) !important;
outline-offset: 4px !important;
}

/* =========================================================
Theme conflict overrides
========================================================= */
#zs-proefles-wizard h1,
#zs-proefles-wizard h2,
#zs-proefles-wizard h3,
#zs-proefles-wizard p,
#zs-proefles-wizard label {
padding: 0;
border: none;
background: none;
text-transform: none;
}

#zs-proefles-wizard input,
#zs-proefles-wizard textarea,
#zs-proefles-wizard button {
-webkit-appearance: none;
appearance: none;
}

#zs-proefles-wizard button {
border-style: solid;
}

#zs-proefles-wizard a {
box-shadow: none;
text-decoration: none;
}

#zs-proefles-wizard svg,
#zs-proefles-wizard .material-icons {
display: inline-flex;
align-items: center;
justify-content: center;
}

.elementor-widget-container #zs-proefles-wizard {
width: 100%;
}

/* =========================================================
Tablet
========================================================= */
@media (max-width: 1024px) {
#zs-proefles-wizard {
max-width: 980px;
}

#zs-proefles-wizard .zs-wizard-card {
    padding: 62px 54px 56px !important;
    border-radius: 30px;
}

#zs-proefles-wizard .zs-step-indicator {
    max-width: 640px;
    margin-bottom: 46px !important;
}

#zs-proefles-wizard .zs-step-header {
    margin-bottom: 46px !important;
}

#zs-proefles-wizard .zs-step-header h2 {
    font-size: 31px;
}

#zs-proefles-wizard .zs-step-header p {
    font-size: 16px;
}

#zs-proefles-wizard .zs-line {
    width: 52px;
}

#zs-proefles-wizard .zs-fields-row {
    gap: 28px;
}

#zs-proefles-wizard .zs-review-row {
    grid-template-columns: 52px minmax(130px, 210px) 1fr;
    gap: 16px;
    padding: 19px 20px;
}

}

/* =========================================================
Mobiel
========================================================= */
@media (max-width: 768px) {
#zs-proefles-wizard {
max-width: 100%;
}


#zs-proefles-wizard .zs-wizard-card {
    padding: 48px 30px 40px !important;
    border-radius: 28px;
}

/* Mobiel: bolletjes verbergen */
#zs-proefles-wizard .zs-steps-row {
    display: none !important;
}

/* Mobiel: staptekst tonen */
#zs-proefles-wizard .zs-step-counter {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    margin: 0 auto !important;
    padding: 9px 17px;

    border-radius: 999px;
    background: rgba(99, 91, 255, 0.09);

    color: var(--zs-primary);

    font-size: 15px;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
}

#zs-proefles-wizard .zs-step-indicator {
    margin-bottom: 38px !important;
}

#zs-proefles-wizard .zs-step-header {
    margin-bottom: 38px !important;
}

#zs-proefles-wizard .zs-step-header h2 {
    font-size: 29px;
    line-height: 1.18;
}

#zs-proefles-wizard .zs-step-header p {
    font-size: 16px;
    line-height: 1.62;
}

#zs-proefles-wizard .zs-fields-row {
    max-width: 100%;
    grid-template-columns: 1fr;
    gap: 26px;
}

#zs-proefles-wizard .zs-field label {
    margin-bottom: 11px;
    font-size: 15.5px;
}

#zs-proefles-wizard .zs-field input,
#zs-proefles-wizard .zs-field textarea {
    min-height: 64px;
    border-radius: 20px;
    font-size: 17px;
    padding: 18px 20px;
}

#zs-proefles-wizard .zs-input-wrap .zs-input-icon {
    left: 22px;
    width: 22px;
    height: 22px;
}

#zs-proefles-wizard .zs-input-wrap input {
    padding-left: 64px !important;
}

#zs-proefles-wizard .zs-days-grid {
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

#zs-proefles-wizard .zs-day-card {
    min-height: 96px;
    border-radius: 20px;
    padding: 20px 14px;
}

#zs-proefles-wizard .zs-dagdeel-grid {
    max-width: 100%;
    grid-template-columns: 1fr;
    gap: 14px;
}

#zs-proefles-wizard .zs-dagdeel-card {
    min-height: 114px;
    border-radius: 22px;
    padding: 24px 18px;
}

#zs-proefles-wizard .zs-review {
    max-width: 100%;
    border-radius: 22px;
}

#zs-proefles-wizard .zs-review-row {
    grid-template-columns: 48px 1fr;
    grid-template-areas:
        "icon label"
        "icon value";
    gap: 4px 16px;

    padding: 19px 18px;
}

#zs-proefles-wizard .zs-review-icon {
    grid-area: icon;
    width: 44px;
    height: 44px;
}

#zs-proefles-wizard .zs-review-label {
    grid-area: label;
    font-size: 14px;
}

#zs-proefles-wizard .zs-review-value {
    grid-area: value;
    font-size: 17px;
    line-height: 1.35;
}

#zs-proefles-wizard .zs-step-nav {
    max-width: 100%;
    margin-top: 46px !important;
    padding-top: 32px !important;
    gap: 16px;
}

#zs-proefles-wizard .zs-btn-back,
#zs-proefles-wizard .zs-btn-next,
#zs-proefles-wizard .zs-btn-submit {
    min-height: 56px;
    border-radius: 16px;
}

#zs-proefles-wizard .zs-btn-back {
    min-width: 132px;
    padding: 0 24px;
}

#zs-proefles-wizard .zs-btn-next,
#zs-proefles-wizard .zs-btn-submit {
    flex: 1;
    min-width: 0;
    padding: 0 28px;
}

}

/* =========================================================
Kleine mobiel
========================================================= */
@media (max-width: 520px) {
#zs-proefles-wizard .zs-wizard-card {
padding: 44px 24px 34px !important;
border-radius: 26px;
}


#zs-proefles-wizard .zs-step-indicator {
    margin-bottom: 34px !important;
}

#zs-proefles-wizard .zs-step-header {
    margin-bottom: 36px !important;
}

#zs-proefles-wizard .zs-step-header h2 {
    font-size: 27px;
    line-height: 1.2;
    letter-spacing: -0.035em;
}

#zs-proefles-wizard .zs-step-header p {
    font-size: 15.5px;
    line-height: 1.62;
}

#zs-proefles-wizard .zs-fields-row {
    gap: 26px;
}

#zs-proefles-wizard .zs-field input,
#zs-proefles-wizard .zs-field textarea {
    min-height: 62px;
    font-size: 16.5px;
    border-radius: 19px;
    padding: 17px 18px;
}

#zs-proefles-wizard .zs-input-wrap .zs-input-icon {
    left: 20px;
}

#zs-proefles-wizard .zs-input-wrap input {
    padding-left: 60px !important;
}

#zs-proefles-wizard .zs-field textarea {
    min-height: 150px;
}

#zs-proefles-wizard .zs-days-grid {
    grid-template-columns: 1fr;
    gap: 12px;
}

#zs-proefles-wizard .zs-day-card {
    min-height: 78px;
    flex-direction: row;
    justify-content: space-between;
    padding: 18px 20px;
    text-align: left;
}

#zs-proefles-wizard .zs-day-card .zs-day-check {
    margin-top: 0;
}

#zs-proefles-wizard .zs-dagdeel-card {
    min-height: 106px;
    padding: 23px 18px;
}

#zs-proefles-wizard .zs-dagdeel-card .zs-dagdeel-emoji {
    font-size: 30px;
}

#zs-proefles-wizard .zs-review {
    margin-top: 4px;
}

#zs-proefles-wizard .zs-review-row {
    padding: 18px 14px;
    gap: 4px 14px;
}

#zs-proefles-wizard .zs-review-icon {
    width: 42px;
    height: 42px;
    border-radius: 15px;
}

#zs-proefles-wizard .zs-review-label {
    font-size: 14px;
}

#zs-proefles-wizard .zs-review-value {
    font-size: 17px;
    font-weight: 850;
}

#zs-proefles-wizard .zs-step-nav {
    flex-direction: column-reverse;
    align-items: stretch;
    margin-top: 44px !important;
    padding-top: 30px !important;
    gap: 12px;
}

#zs-proefles-wizard .zs-btn-back,
#zs-proefles-wizard .zs-btn-next,
#zs-proefles-wizard .zs-btn-submit,
#zs-proefles-wizard .zs-btn-home {
    width: 100%;
    min-height: 58px;
    padding: 0 22px;
    font-size: 14px;
    gap: 12px;
}

#zs-proefles-wizard .zs-success-icon {
    width: 84px;
    height: 84px;
}

#zs-proefles-wizard .zs-success-step h2 {
    font-size: 26px;
}

#zs-proefles-wizard .zs-success-step p {
    font-size: 15.5px;
}

}

/* =========================================================
Extra klein
========================================================= */
@media (max-width: 380px) {
#zs-proefles-wizard .zs-wizard-card {
padding: 40px 18px 30px !important;
border-radius: 24px;
}

#zs-proefles-wizard .zs-step-header h2 {
    font-size: 24px;
}

#zs-proefles-wizard .zs-step-header p {
    font-size: 15px;
}

#zs-proefles-wizard .zs-field input,
#zs-proefles-wizard .zs-field textarea {
    font-size: 16px;
}

#zs-proefles-wizard .zs-input-wrap input {
    padding-left: 58px !important;
}

#zs-proefles-wizard .zs-review-row {
    grid-template-columns: 44px 1fr;
    padding: 16px 12px;
}

#zs-proefles-wizard .zs-review-icon {
    width: 40px;
    height: 40px;
}

#zs-proefles-wizard .zs-review-value {
    font-size: 16px;
}

}

/* =========================================================
Laatste harde override
Dit moet helemaal onderaan blijven staan.
Desktop: staptekst verbergen.
Mobiel: staptekst tonen.
========================================================= */

/* Prijs en betaalkeuze */
#zs-proefles-wizard .zs-price-box,
#zs-proefles-wizard .zs-payment-grid {
width: 100%;
max-width: 820px;
margin-left: auto !important;
margin-right: auto !important;
}

#zs-proefles-wizard .zs-price-box {
margin-bottom: 24px !important;
padding: 24px 26px !important;
border: 1px solid #dedcff;
border-radius: 20px;
background: var(--zs-primary-soft);
display: grid;
grid-template-columns: 1fr auto;
gap: 6px 20px;
align-items: center;
}

#zs-proefles-wizard .zs-price-box .zs-price-label {
font-size: 15px;
font-weight: 800;
color: var(--zs-text);
}

#zs-proefles-wizard .zs-price-box > strong {
grid-row: span 2;
font-size: 28px;
color: var(--zs-primary);
}

#zs-proefles-wizard .zs-price-box p {
font-size: 14px;
color: var(--zs-muted);
}

#zs-proefles-wizard .zs-payment-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}

#zs-proefles-wizard .zs-payment-card {
position: relative;
min-height: 180px;
padding: 26px !important;
border: 1.5px solid var(--zs-border);
border-radius: 22px;
background: var(--zs-field);
cursor: pointer;
display: flex;
flex-direction: column;
gap: 9px;
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#zs-proefles-wizard .zs-payment-card:hover {
transform: translateY(-2px);
border-color: #c9c5ff;
}

#zs-proefles-wizard .zs-payment-card.selected {
border-color: var(--zs-primary);
background: #fff;
box-shadow: 0 0 0 4px rgba(99, 91, 255, .09);
}

#zs-proefles-wizard .zs-payment-icon {
font-size: 28px;
line-height: 1;
}

#zs-proefles-wizard .zs-payment-name {
font-size: 18px;
font-weight: 850;
color: var(--zs-text);
}

#zs-proefles-wizard .zs-payment-description {
font-size: 14px;
line-height: 1.55;
color: var(--zs-muted);
}

#zs-proefles-wizard .zs-payment-check {
position: absolute;
top: 18px;
right: 18px;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--zs-primary);
color: #fff;
display: none;
align-items: center;
justify-content: center;
font-weight: 900;
}

#zs-proefles-wizard .zs-payment-card.selected .zs-payment-check {
display: flex;
}

@media (max-width: 680px) {
#zs-proefles-wizard .zs-payment-grid {
grid-template-columns: 1fr;
}

#zs-proefles-wizard .zs-price-box {
grid-template-columns: 1fr;
}

#zs-proefles-wizard .zs-price-box > strong {
grid-row: auto;
}
}

/* Desktop */
@media (min-width: 769px) {
#zs-proefles-wizard .zs-step-counter,
.zs-proefles-form-wrap #zs-proefles-wizard .zs-step-counter {
display: none !important;
visibility: hidden !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}


#zs-proefles-wizard .zs-steps-row,
.zs-proefles-form-wrap #zs-proefles-wizard .zs-steps-row {
    display: flex !important;
    visibility: visible !important;
}


}

/* Mobiel */
@media (max-width: 768px) {
#zs-proefles-wizard .zs-step-counter,
.zs-proefles-form-wrap #zs-proefles-wizard .zs-step-counter {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
visibility: visible !important;
height: auto !important;
margin: 0 auto !important;
padding: 9px 17px !important;
overflow: visible !important;
}


#zs-proefles-wizard .zs-steps-row,
.zs-proefles-form-wrap #zs-proefles-wizard .zs-steps-row {
    display: none !important;
}

}

/* =========================================================
ZekerSlagen pagina-integratie
Formulier rustiger in de content, zonder zwevende schaduw.
========================================================= */
#zs-proefles-wizard .zs-wizard-card {
background: #ffffff !important;
border: 1px solid rgba(219, 226, 238, 0.95) !important;
box-shadow: none !important;
}

#zs-proefles-wizard .zs-field input,
#zs-proefles-wizard .zs-field textarea,
#zs-proefles-wizard .zs-choice-card,
#zs-proefles-wizard .zs-payment-card,
#zs-proefles-wizard .zs-review-row {
box-shadow: none !important;
}

#zs-proefles-wizard .zs-field input:focus,
#zs-proefles-wizard .zs-field textarea:focus {
box-shadow: 0 0 0 4px rgba(49, 112, 246, 0.10) !important;
border-color: #3170f6 !important;
}

#zs-proefles-wizard .zs-btn-next,
#zs-proefles-wizard .zs-btn-submit,
#zs-proefles-wizard .zs-btn-back,
#zs-proefles-wizard .zs-btn-home {
box-shadow: none !important;
}

#zs-proefles-wizard .zs-btn-next:hover,
#zs-proefles-wizard .zs-btn-submit:hover,
#zs-proefles-wizard .zs-btn-back:hover,
#zs-proefles-wizard .zs-btn-home:hover {
box-shadow: none !important;
}

#zs-proefles-wizard .zs-btn-next,
#zs-proefles-wizard .zs-btn-submit {
min-height: 52px !important;
padding: 0 24px !important;
border: 1px solid #006ec8 !important;
border-radius: 6px !important;
background: linear-gradient(180deg, #0f92e8, #006ec8) !important;
box-shadow: 0 12px 24px rgba(0, 109, 198, .34) !important;
color: #ffffff !important;
font-size: 19px !important;
font-weight: 950 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-decoration: none !important;
}

#zs-proefles-wizard .zs-btn-next:hover,
#zs-proefles-wizard .zs-btn-submit:hover {
background: linear-gradient(180deg, #0b86d7, #005fb4) !important;
border-color: #005fb4 !important;
box-shadow: 0 14px 28px rgba(0, 109, 198, .38) !important;
color: #ffffff !important;
}

#zs-proefles-wizard .zs-dot {
border: 1.5px solid #d9e4f2 !important;
background: #f8fbff !important;
color: #7a879a !important;
box-shadow: none !important;
}

#zs-proefles-wizard .zs-dot.active,
#zs-proefles-wizard .zs-dot.completed {
border-color: #006ec8 !important;
background: linear-gradient(180deg, #0f92e8, #006ec8) !important;
color: #ffffff !important;
box-shadow: 0 8px 18px rgba(0, 109, 198, .22) !important;
}

#zs-proefles-wizard .zs-dot.active {
transform: scale(1.04) !important;
}

#zs-proefles-wizard .zs-line {
background: #dbe6f4 !important;
}

#zs-proefles-wizard .zs-line.active {
background: linear-gradient(90deg, #0f92e8, #006ec8) !important;
}

#zs-proefles-wizard .zs-step-header h2 {
letter-spacing: 0 !important;
}

@media (max-width: 768px) {
#zs-proefles-wizard .zs-wizard-card {
    border-radius: 22px !important;
    padding: 34px 22px 30px !important;
}
}