/**
 * Inschrijfformulier in stappen.
 *
 * Twee uitgangspunten: zo min mogelijk hoogte, en de opmaak van het thema
 * laten winnen waar dat kan. Gravity Forms en het thema zetten op een paar
 * plekken stijlen die hier overschreven moeten worden; die staan met
 * !important en zijn steeds toegelicht.
 */

:root {
    --evolon-oranje: #fa4616;
    --evolon-blauw: #0d2043;
    --evolon-lijn: #e2e6ee;
    --evolon-grijs: #5c6675;
    --evolon-vlak: #f1f4f8;
}

/* ---------------------------------------------------------------------------
   Laadmelding: met ajax staat het formulier eerst op display:none
   --------------------------------------------------------------------------- */

.evolon-formulier__laden {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1.5rem 0;
    color: var(--evolon-grijs);
}

.evolon-formulier.is-geladen .evolon-formulier__laden {
    display: none;
}

.evolon-formulier__spinner {
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid var(--evolon-lijn);
    border-top-color: var(--evolon-oranje);
    border-radius: 50%;
    animation: evolon-draai .8s linear infinite;
}

@keyframes evolon-draai {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .evolon-formulier__spinner { animation-duration: 3s; }
}

/* ---------------------------------------------------------------------------
   Algemeen: minder lucht
   --------------------------------------------------------------------------- */

#gform_wrapper_1 .gform_required_legend {
    display: none;
}

#gform_wrapper_1 .gform_fields {
    row-gap: .9rem;
}

#gform_wrapper_1 .gfield_label {
    margin-bottom: .2rem;
}

#gform_wrapper_1 .gsection,
#gform_wrapper_1 .gfield--type-html h2 {
    margin: .5rem 0 0;
    font-size: 1.15rem;
}

/* Het thema zet om elke keuzegroep een kader met 20px lucht. Dat is hier
   dubbelop: de keuzes hebben zelf al een rand. */
#gform_wrapper_1 fieldset.gfield--type-choice,
#gform_wrapper_1 fieldset.gfield--type-repeater {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0;
}

#gform_wrapper_1 .gform_page_footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0 0;
    padding: 0;
    border: 0;
}

/* Verder in het formulier is de hoofdknop gevuld, terug is bijzaak. */
#gform_wrapper_1 .gform_next_button,
#gform_wrapper_1 .gform_button[type="submit"],
#gform_wrapper_1 #gform_submit_button_1 {
    background: var(--evolon-oranje) !important;
    border-color: var(--evolon-oranje) !important;
    color: #fff !important;
}

#gform_wrapper_1 .gform_previous_button {
    background: none !important;
    border-color: var(--evolon-lijn) !important;
    color: var(--evolon-blauw) !important;
    order: -1;
}

/* ---------------------------------------------------------------------------
   Stappenbalk: bolletje met het nummer, titel eronder, lijn als voortgang
   --------------------------------------------------------------------------- */

#gform_wrapper_1 .gf_page_steps {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin: 0 0 1.5rem;
    padding: 0 0 1.25rem;
    border: 0;
    border-bottom: 1px solid var(--evolon-lijn);
}

#gform_wrapper_1 .gf_step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: center;
    opacity: 1;
}

/* De lijn loopt van het vorige bolletje naar dit bolletje. Is deze stap
   bereikt, dan kleurt de lijn ernaartoe oranje: dat is de voortgang. */
#gform_wrapper_1 .gf_step::before {
    content: "";
    position: absolute;
    top: .95rem;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--evolon-lijn);
}

#gform_wrapper_1 .gf_step_first::before {
    display: none;
}

#gform_wrapper_1 .gf_step_active::before,
#gform_wrapper_1 .gf_step_completed::before {
    background: var(--evolon-oranje);
}

#gform_wrapper_1 .gf_step_number {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff !important;
    border: 2px solid var(--evolon-lijn) !important;
    color: var(--evolon-grijs) !important;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1;
}

#gform_wrapper_1 .gf_step_active .gf_step_number {
    background: var(--evolon-blauw) !important;
    border-color: var(--evolon-blauw) !important;
    color: #fff !important;
}

#gform_wrapper_1 .gf_step_completed .gf_step_number {
    background: var(--evolon-oranje) !important;
    border-color: var(--evolon-oranje) !important;
    color: #fff !important;
}

#gform_wrapper_1 .gf_step_label {
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: normal;
    color: var(--evolon-grijs);
}

#gform_wrapper_1 .gf_step_active .gf_step_label {
    color: var(--evolon-blauw);
    font-weight: 600;
}

@media (max-width: 520px) {
    #gform_wrapper_1 .gf_step_label { font-size: .75rem; }
    #gform_wrapper_1 .gf_step_number { width: 1.7rem; height: 1.7rem; }
    #gform_wrapper_1 .gf_step::before { top: .85rem; }
}

/* ---------------------------------------------------------------------------
   Stap 1: datumkeuze
   --------------------------------------------------------------------------- */

.gfield.evolon-datumkeuze > .gfield_label {
    font-size: 1.05rem;
}

.gfield.evolon-datumkeuze .gfield_description {
    padding: 0 0 .75rem;
    color: var(--evolon-grijs);
}

/* Locatiefilter */
.evolon-datumfilter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: 0 0 .75rem;
}

.evolon-datumfilter__label {
    color: var(--evolon-grijs);
    font-size: .88rem;
    margin-right: .25rem;
}

/* Het thema maakt van elke knop een grote knop met 46px hoogte. */
.evolon-datumfilter .evolon-datumfilter__knop {
    background: #fff !important;
    border: 1px solid var(--evolon-lijn) !important;
    border-radius: 2rem !important;
    padding: .25rem .85rem !important;
    min-height: 0 !important;
    height: auto !important;
    font: inherit;
    font-size: .85rem !important;
    font-weight: 500;
    line-height: 1.6 !important;
    color: var(--evolon-blauw) !important;
    cursor: pointer;
    box-shadow: none !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.evolon-datumfilter .evolon-datumfilter__knop:hover {
    border-color: var(--evolon-blauw) !important;
}

.evolon-datumfilter .evolon-datumfilter__knop.is-actief {
    background: var(--evolon-blauw) !important;
    border-color: var(--evolon-blauw) !important;
    color: #fff !important;
}

/* De regels */
.gfield.evolon-datumkeuze .gfield_radio {
    display: grid;
    gap: .4rem;
}

.gfield.evolon-datumkeuze .gchoice {
    border: 1px solid var(--evolon-lijn);
    border-radius: .6rem;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background: #fff;
    transition: border-color .15s ease, background-color .15s ease;
}

.gfield.evolon-datumkeuze .gchoice:hover {
    border-color: var(--evolon-oranje);
}

.gfield.evolon-datumkeuze .gchoice:has(input:checked) {
    border-color: var(--evolon-oranje);
    background: #fff6f3;
    box-shadow: inset 0 0 0 1px var(--evolon-oranje);
}

/* Eigen keuzerondje: het thema laat het standaardrondje op sommige
   schermen als een vierkantje zien. */
.gfield.evolon-datumkeuze .gchoice input[type="radio"] {
    flex: 0 0 auto;
    align-self: center;
    margin: 0 0 0 .9rem;
    width: 1.1rem !important;
    height: 1.1rem !important;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #c7cfdd !important;
    border-radius: 50% !important;
    background: #fff !important;
    cursor: pointer;
}

.gfield.evolon-datumkeuze .gchoice input[type="radio"]:checked {
    border-color: var(--evolon-oranje) !important;
    background: var(--evolon-oranje) !important;
    box-shadow: inset 0 0 0 3px #fff;
}

.gfield.evolon-datumkeuze .gchoice input[type="radio"]:focus-visible {
    outline: 2px solid var(--evolon-oranje);
    outline-offset: 2px;
}

/* Het thema zet labels op display:block; vandaar het omhulsel eromheen. */
.gfield.evolon-datumkeuze .gchoice label {
    margin: 0;
    padding: .7rem .9rem;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    min-height: 3rem;
    cursor: pointer;
    font-weight: 400;
}

.evolon-datum__rij {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .85rem;
    line-height: 1.35;
}

.evolon-datum__datum {
    flex: 0 0 auto;
    min-width: 9.5rem;
    font-weight: 700;
    color: var(--evolon-blauw);
}

.evolon-datum__tijd {
    color: var(--evolon-grijs);
    font-size: .92em;
}

.evolon-datum__locatie {
    background: var(--evolon-vlak);
    border-radius: 1rem;
    padding: .1rem .6rem;
    font-size: .82em;
    color: var(--evolon-blauw);
}

.evolon-datum__prijs {
    margin-left: auto;
    font-weight: 700;
    color: var(--evolon-blauw);
}

.evolon-datum__plaatsen {
    flex: 0 0 auto;
    min-width: 7.5rem;
    text-align: right;
    color: var(--evolon-grijs);
    font-size: .82em;
}

.gfield.evolon-datumkeuze .gchoice.is-verborgen {
    display: none;
}

.evolon-datumkeuze__meer {
    margin-top: .6rem;
    background: none !important;
    border: 0 !important;
    padding: .25rem 0 !important;
    min-height: 0 !important;
    font: inherit;
    font-size: .9rem !important;
    font-weight: 600;
    color: var(--evolon-oranje) !important;
    cursor: pointer;
    text-decoration: underline;
    box-shadow: none !important;
}

.evolon-datumkeuze__leeg {
    margin: .5rem 0 0;
    color: var(--evolon-grijs);
}

@media (max-width: 640px) {
    .evolon-datum__datum { min-width: 100%; }
    .evolon-datum__prijs { margin-left: 0; }
    .evolon-datum__plaatsen { min-width: 0; margin-left: auto; }
}

/* ---------------------------------------------------------------------------
   De gekozen datum, boven stap 2 t/m 4
   --------------------------------------------------------------------------- */

.evolon-selectie {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .6rem;
    background: #fff6f3;
    border: 1px solid var(--evolon-oranje);
    border-radius: .6rem;
    padding: .55rem .85rem;
    margin-bottom: 1.1rem;
    font-size: .95rem;
    line-height: 1.35;
}

.evolon-selectie__label {
    flex: 0 0 auto;
    color: var(--evolon-grijs);
    font-size: .85rem;
}

.evolon-selectie__waarde {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--evolon-blauw);
}

.evolon-selectie .evolon-selectie__wijzig {
    flex: 0 0 auto;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    box-shadow: none !important;
    font: inherit;
    font-size: .88rem !important;
    color: var(--evolon-oranje) !important;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Stap 2: zakelijk of particulier als twee knoppen
   --------------------------------------------------------------------------- */

.gfield.evolon-boek-als > .gfield_label {
    margin-bottom: .35rem;
}

.gfield.evolon-boek-als .gfield_radio {
    display: flex;
    gap: .35rem;
    max-width: 22rem;
}

.gfield.evolon-boek-als .gchoice {
    flex: 0 1 10rem;
    margin: 0;
    position: relative;
}

.gfield.evolon-boek-als input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.gfield.evolon-boek-als label {
    display: block;
    margin: 0;
    padding: .55rem 1rem;
    text-align: center;
    border: 1px solid var(--evolon-lijn);
    border-radius: .5rem;
    font-weight: 600;
    color: var(--evolon-blauw);
    background: #fff;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.gfield.evolon-boek-als label:hover {
    border-color: var(--evolon-oranje);
}

.gfield.evolon-boek-als .gchoice:has(input:checked) label {
    background: var(--evolon-blauw);
    border-color: var(--evolon-blauw);
    color: #fff;
}

.gfield.evolon-boek-als input:focus-visible + label {
    outline: 2px solid var(--evolon-oranje);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Twee kolommen voor de korte velden
   --------------------------------------------------------------------------- */

@media (min-width: 720px) {
    #gform_wrapper_1 #field_1_5,
    #gform_wrapper_1 #field_1_8,
    #gform_wrapper_1 #field_1_6,
    #gform_wrapper_1 #field_1_7,
    #gform_wrapper_1 #field_1_12,
    #gform_wrapper_1 #field_1_13,
    #gform_wrapper_1 #field_1_9,
    #gform_wrapper_1 #field_1_10 {
        grid-column: span 6;
    }

    #gform_wrapper_1 .gfield_repeater_item {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .7rem 1rem;
    }

    #gform_wrapper_1 .gfield_repeater_item > .gfield {
        margin: 0;
    }

    #gform_wrapper_1 .gfield_repeater_item > legend {
        grid-column: 1 / -1;
    }
}

#gform_wrapper_1 .gfield_repeater_item {
    margin-bottom: .9rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--evolon-lijn);
}

#gform_wrapper_1 .gfield_repeater_item:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Stap 4: overzicht
   --------------------------------------------------------------------------- */

.evolon-overzicht__blok {
    border-top: 1px solid var(--evolon-lijn);
    padding: .7rem 0;
}

.evolon-overzicht__blok:first-child {
    border-top: 0;
    padding-top: 0;
}

.evolon-overzicht__blok h3 {
    margin: 0 0 .25rem;
    font-size: .95rem;
    color: var(--evolon-grijs);
    font-weight: 600;
}

.evolon-overzicht__blok p {
    margin: 0;
    line-height: 1.5;
}

.evolon-overzicht__regel {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem 1rem;
    padding: .1rem 0;
}

.evolon-overzicht__label {
    min-width: 7rem;
    color: var(--evolon-grijs);
}

.evolon-overzicht__waarde {
    font-weight: 600;
    color: var(--evolon-blauw);
}

.evolon-overzicht__cursisten {
    margin: 0;
    padding-left: 1.2rem;
}

.evolon-overzicht__cursisten li {
    margin-bottom: .25rem;
    line-height: 1.4;
}

.evolon-overzicht__cursisten span {
    display: block;
    color: var(--evolon-grijs);
    font-size: .88em;
}

.evolon-overzicht__totaal {
    border-top: 1px solid var(--evolon-lijn);
    padding-top: .7rem;
    display: grid;
    gap: .1rem;
}

.evolon-overzicht__totaal strong {
    font-size: 1.3rem;
    line-height: 1.2;
    color: var(--evolon-blauw);
}

.evolon-overzicht__totaal small {
    color: var(--evolon-grijs);
}

.evolon-overzicht__noot {
    margin: .7rem 0 0;
    color: var(--evolon-grijs);
    font-size: .92em;
}

/* ---------------------------------------------------------------------------
   Stap 3: knoppen van het deelnemersblok
   Het thema maakt hier grote oranje knoppen van, terwijl dit bijzaak is
   naast "Volgende stap".
   --------------------------------------------------------------------------- */

#gform_wrapper_1 .add_repeater_item,
#gform_wrapper_1 .remove_repeater_item {
    min-height: 0 !important;
    height: auto !important;
    padding: .35rem .85rem !important;
    font-size: .88rem !important;
    font-weight: 600;
    line-height: 1.6 !important;
    border-radius: 2rem !important;
    border: 1px solid var(--evolon-lijn) !important;
    background: #fff !important;
    color: var(--evolon-blauw) !important;
    box-shadow: none !important;
}

#gform_wrapper_1 .add_repeater_item:hover,
#gform_wrapper_1 .remove_repeater_item:hover {
    border-color: var(--evolon-oranje) !important;
    color: var(--evolon-oranje) !important;
}

#gform_wrapper_1 .gfield_repeater_buttons {
    margin-top: .5rem;
}

/* Het akkoordvinkje hoeft geen kader met 20px lucht. */
#gform_wrapper_1 .gfield--type-consent {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
}

/* ---------------------------------------------------------------------------
   Correcties op opmaak van Gravity Forms en het thema
   --------------------------------------------------------------------------- */

/* Gravity Forms legt over het bolletje van een afgeronde stap een eigen
   schijf van 40px met een vinkje erin. Die is groter dan ons bolletje en
   grijs, waardoor de balk er na elke stap anders uitzag. */
#gform_wrapper_1 .gf_step_completed .gf_step_number::before {
    top: -2px !important;
    left: -2px !important;
    width: calc(100% + 4px) !important;
    height: calc(100% + 4px) !important;
    border-radius: 50% !important;
    background: var(--evolon-oranje) !important;
}

#gform_wrapper_1 .gf_step_completed .gf_step_number::after {
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
}

/* Foutmeldingen: de kop stond in de koptekststijl van het thema, met een
   regelafstand die over zichzelf heen liep. */
#gform_wrapper_1 .gform_validation_errors {
    padding: .7rem 1rem .7rem 2.6rem !important;
    border-radius: .6rem;
    margin-bottom: 1rem;
}

#gform_wrapper_1 .gform_submission_error,
#gform_wrapper_1 h2.gform_submission_error {
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

#gform_wrapper_1 .gform_validation_errors > h2::before {
    top: .9rem !important;
    left: .85rem !important;
}

/* Een fout onder een veld hoeft geen eigen kader. */
#gform_wrapper_1 .gfield_validation_message,
#gform_wrapper_1 .validation_message {
    background: none !important;
    border: 0 !important;
    padding: .25rem 0 0 !important;
    font-size: .85rem !important;
    line-height: 1.4 !important;
}

/* Datumveld: de knop met het kalendertje netjes naast het invoerveld. */
#gform_wrapper_1 .ginput_container_date {
    display: flex;
    align-items: stretch;
    gap: .4rem;
}

#gform_wrapper_1 .ginput_container_date input {
    flex: 1 1 auto;
    min-width: 0;
}

#gform_wrapper_1 .ginput_container_date .gform-datepicker-toggle,
#gform_wrapper_1 .ginput_container_date .ui-datepicker-trigger {
    position: static !important;
    flex: 0 0 auto;
    align-self: stretch;
    width: 2.9rem !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border: 1px solid var(--evolon-lijn) !important;
    border-radius: .5rem !important;
    background: #fff !important;
    color: var(--evolon-blauw) !important;
}

/* Meldingen voor schermlezers horen niet zichtbaar te zijn. Zonder dit
   verschijnt er "Row removed" in beeld als je een deelnemer weghaalt. */
.a11y-speak-region,
.gform-repeater__announcement {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Het deelnemersblok had een eigen kader en achtergrond; nu gelijk aan de
   andere stappen. */
#gform_wrapper_1 .gfield_repeater,
#gform_wrapper_1 .gfield_repeater_container,
#gform_wrapper_1 .gfield_repeater_wrapper,
#gform_wrapper_1 .gfield_repeater_item {
    background: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#gform_wrapper_1 .gfield_repeater_item {
    border-bottom: 1px solid var(--evolon-lijn) !important;
}

#gform_wrapper_1 .gfield_repeater_item:last-of-type {
    border-bottom: 0 !important;
}

#gform_wrapper_1 .gfield_repeater_buttons {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

#gform_wrapper_1 .add_repeater_item,
#gform_wrapper_1 .remove_repeater_item {
    white-space: nowrap;
    width: auto !important;
    flex: 0 0 auto;
}

/* Eerste cursist overnemen van de contactpersoon. */
.evolon-zelfde-persoon {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0 0 1rem;
    padding: .7rem .9rem;
    border: 1px solid var(--evolon-lijn);
    border-radius: .6rem;
    background: var(--evolon-vlak);
}

.evolon-zelfde-persoon input[type="checkbox"] {
    flex: 0 0 auto;
    margin: .15rem 0 0;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--evolon-oranje);
}

.evolon-zelfde-persoon label {
    margin: 0;
    font-size: .95rem;
    line-height: 1.4;
    cursor: pointer;
}

/* Melding als de gekozen datum buiten het locatiefilter valt. */
.evolon-datumfilter__melding {
    width: 100%;
    margin: .35rem 0 0;
    font-size: .88rem;
    color: var(--evolon-grijs);
}

/* ---------------------------------------------------------------------------
   Stap 4: overzicht, rustiger en compacter
   --------------------------------------------------------------------------- */

#gform_wrapper_1 .evolon-overzicht {
    border: 1px solid var(--evolon-lijn);
    border-radius: .6rem;
    padding: 1rem 1.1rem;
}

#gform_wrapper_1 .evolon-overzicht h3,
.evolon-overzicht h3 {
    margin: 0 0 .3rem !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: var(--evolon-grijs) !important;
    font-family: inherit !important;
}

.evolon-overzicht__totaal {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .25rem .75rem;
    margin-top: .25rem;
    padding: .8rem .95rem;
    border-top: 0;
    border-radius: .5rem;
    background: var(--evolon-vlak);
}

.evolon-overzicht__totaal strong {
    font-size: 1.35rem;
    line-height: 1.1;
    color: var(--evolon-blauw);
}

.evolon-overzicht__totaal small {
    flex-basis: 100%;
    color: var(--evolon-grijs);
    font-size: .85rem;
}

@media (max-width: 640px) {
    #gform_wrapper_1 .add_repeater_item,
    #gform_wrapper_1 .remove_repeater_item {
        font-size: .82rem !important;
        padding: .35rem .7rem !important;
    }

    #gform_wrapper_1 .evolon-overzicht {
        padding: .85rem;
    }
}

/* ===========================================================================
   Opmaakcorrecties 1.7.1
   =========================================================================== */

/* 1. Het grijze randje om het bolletje van een afgeronde stap. Dat was de
      rand van het bolletje zelf, die onder de oranje schijf uitkwam. */
#gform_wrapper_1 .gf_step_completed .gf_step_number {
    border-color: var(--evolon-oranje) !important;
}

#gform_wrapper_1 .gf_step_completed .gf_step_number::before {
    border: 0 !important;
    box-shadow: none !important;
}

/* 2. Zakelijk en particulier: knoppen zo breed als hun tekst, dicht bij
      elkaar, in plaats van twee vakken van 160px. */
.gfield.evolon-boek-als .gfield_radio {
    display: inline-flex;
    gap: .3rem;
    max-width: none;
    width: auto;
}

.gfield.evolon-boek-als .gchoice {
    flex: 0 0 auto;
    margin: 0 !important;
}

.gfield.evolon-boek-als label {
    min-width: 8.5rem;
    padding: .5rem 1.1rem;
}

/* 3. Het vinkje dat de gegevens overneemt over de volle breedte. */
#gform_wrapper_1 .evolon-zelfde-persoon {
    grid-column: 1 / -1;
    align-items: center;
}

#gform_wrapper_1 .evolon-zelfde-persoon label {
    flex: 1 1 auto;
}

/* 4. Een fout onder een veld weer duidelijk, maar zonder log kader. */
#gform_wrapper_1 .gfield_validation_message,
#gform_wrapper_1 .validation_message {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    background: #fff5f3 !important;
    border: 0 !important;
    border-left: 3px solid #c02b0a !important;
    border-radius: .3rem !important;
    padding: .4rem .6rem !important;
    margin-top: .35rem !important;
    font-size: .85rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #c02b0a !important;
}

/* 5. Deelnemersblok: het kader zat op .gfield_repeater_items. */
#gform_wrapper_1 .gfield_repeater_items {
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    background: none !important;
}

/* Kopje "Deelnemers" even groot als "Organisatie" op stap 2. */
#gform_wrapper_1 .gfield--type-repeater > .gfield_label {
    display: block;
    margin: 0 0 .5rem;
    font-family: "alwyn-new-web", "Montserrat", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--evolon-blauw);
}

/* Labels van de cursistvelden gelijk aan die op stap 2. */
#gform_wrapper_1 .gfield_repeater_item .gfield_label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--evolon-blauw) !important;
}

/* 6. Datumveld: knop met het kalendertje in het invoerveld in plaats van
      als los vak ernaast. */
#gform_wrapper_1 .ginput_container_date {
    display: block;
    position: relative;
}

#gform_wrapper_1 .ginput_container_date input {
    width: 100%;
    padding-right: 3rem !important;
}

#gform_wrapper_1 .ginput_container_date .gform-datepicker-toggle,
#gform_wrapper_1 .ginput_container_date .ui-datepicker-trigger {
    position: absolute !important;
    top: 50% !important;
    right: .5rem !important;
    transform: translateY(-50%) !important;
    width: 2.1rem !important;
    height: 2.1rem !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
    border: 0 !important;
    border-radius: .35rem !important;
    background: none !important;
    color: var(--evolon-grijs) !important;
    box-shadow: none !important;
}

#gform_wrapper_1 .ginput_container_date .gform-datepicker-toggle:hover {
    background: var(--evolon-vlak) !important;
    color: var(--evolon-blauw) !important;
}

/* 7. Balk met de gekozen datum: label en waarde netjes naast elkaar. */
.evolon-selectie {
    gap: .2rem .6rem;
}

/* 8. Overzicht: zelfde koppen als de labels, niet in kapitalen, blauw. */
#gform_wrapper_1 .evolon-overzicht h3,
.evolon-overzicht h3 {
    margin: 0 0 .3rem !important;
    font-family: inherit !important;
    font-size: .95rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--evolon-blauw) !important;
}

.evolon-overzicht__regel {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: .15rem .75rem;
    padding: .1rem 0;
}

.evolon-overzicht__label {
    min-width: 0;
    font-weight: 600;
    color: var(--evolon-blauw);
}

.evolon-overzicht__waarde {
    font-weight: 400;
    color: inherit;
}

.evolon-overzicht__blok p,
.evolon-overzicht__cursisten li {
    font-weight: 400;
}

/* 9. Ruimte tussen het overzicht en het akkoordvinkje. */
#gform_wrapper_1 #field_1_23 {
    margin-bottom: .75rem;
}

#gform_wrapper_1 .gfield--type-consent {
    margin-top: .25rem;
}

@media (max-width: 560px) {
    .evolon-overzicht__regel {
        grid-template-columns: 1fr;
    }

    .gfield.evolon-boek-als .gfield_radio {
        display: flex;
        width: 100%;
    }

    .gfield.evolon-boek-als .gchoice {
        flex: 1 1 0;
    }

    .gfield.evolon-boek-als label {
        min-width: 0;
    }
}

/* ===========================================================================
   Opmaakcorrecties 1.7.2
   =========================================================================== */

/* 1. Bedrijfsnaam en KvK-nummer naast elkaar. */
@media (min-width: 720px) {
    #gform_wrapper_1 #field_1_3 {
        grid-column: span 6;
    }
}

/* 2 + 3. De cursistvelden in een raster van twaalf kolommen, zodat
   voorletters smal kan en voornaam en achternaam ernaast passen. */
@media (min-width: 720px) {
    #gform_wrapper_1 .gfield_repeater_item {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: .7rem .9rem;
    }

    #gform_wrapper_1 .gfield_repeater_item > .gfield {
        grid-column: span 12;
    }

    #gform_wrapper_1 [id^="field_1_1001-"] { grid-column: span 2 !important; }  /* voorletters */
    #gform_wrapper_1 [id^="field_1_1002-"] { grid-column: span 5 !important; }  /* voornaam */
    #gform_wrapper_1 [id^="field_1_1003-"] { grid-column: span 5 !important; }  /* achternaam */
    #gform_wrapper_1 [id^="field_1_1004-"] { grid-column: span 6 !important; }  /* e-mail */
    #gform_wrapper_1 [id^="field_1_1005-"] { grid-column: span 6 !important; }  /* geboortedatum */
    #gform_wrapper_1 [id^="field_1_1006-"] { grid-column: span 12 !important; } /* straat */
    #gform_wrapper_1 [id^="field_1_1007-"] { grid-column: span 6 !important; }  /* postcode */
    #gform_wrapper_1 [id^="field_1_1008-"] { grid-column: span 6 !important; }  /* plaats */
    #gform_wrapper_1 [id^="field_1_1009-"] { grid-column: span 6 !important; }
    #gform_wrapper_1 [id^="field_1_1010-"] { grid-column: span 6 !important; }
    #gform_wrapper_1 [id^="field_1_1011-"] { grid-column: span 6 !important; }
    #gform_wrapper_1 [id^="field_1_1012-"] { grid-column: span 6 !important; }
    #gform_wrapper_1 [id^="field_1_1013-"] { grid-column: span 12 !important; } /* dieet */
}

/* 4. Het kopje "Deelnemers" precies als de koppen Organisatie en
   Contactpersoon. De maat werd overschreven met !important. */
#gform_wrapper_1 .gfield--type-repeater > .gfield_label {
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    letter-spacing: -1px !important;
    color: var(--evolon-blauw) !important;
    margin-bottom: .6rem !important;
}

/* 5. Kalenderknop verticaal centreren zonder transform: die wordt door het
   thema overschreven. */
#gform_wrapper_1 .ginput_container_date .gform-datepicker-toggle,
#gform_wrapper_1 .ginput_container_date .ui-datepicker-trigger {
    top: 0 !important;
    bottom: 0 !important;
    height: 2.1rem !important;
    margin: auto 0 !important;
    transform: none !important;
}

/* 6. Het akkoordvinkje was een standaardvakje van 13 pixels dat op een
   telefoon vrijwel onzichtbaar is. Nu een eigen vakje. */
#gform_wrapper_1 .gfield--type-consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 1.15rem !important;
    height: 1.15rem !important;
    margin: .15rem 0 0 !important;
    border: 2px solid #c7cfdd !important;
    border-radius: .25rem !important;
    background: #fff !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: .9rem .9rem;
    cursor: pointer;
}

#gform_wrapper_1 .gfield--type-consent input[type="checkbox"]:checked {
    border-color: var(--evolon-oranje) !important;
    background-color: var(--evolon-oranje) !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M6.2 11.3 3.3 8.4l1.2-1.2 1.7 1.7 4.6-4.6 1.2 1.2z'/%3E%3C/svg%3E");
}

#gform_wrapper_1 .gfield--type-consent input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--evolon-oranje);
    outline-offset: 2px;
}

/* ===========================================================================
   Opmaakcorrecties 1.7.3
   =========================================================================== */

/* 1. De stap waar je staat: wit bolletje met een oranje rand en een blauw
      cijfer. Wit en niet doorzichtig, anders loopt de voortgangsbalk
      zichtbaar achter het bolletje door. */
#gform_wrapper_1 .gf_step_active .gf_step_number {
    background: #fff !important;
    border-color: var(--evolon-oranje) !important;
    color: var(--evolon-blauw) !important;
}

/* 2. De verticale ruimte in het deelnemersblok gelijk aan die van de andere
      stappen. Het blok had een eigen rij-ruimte van 11px bovenop de ruimte
      die de velden zelf al hebben, plus 20px padding en 20px marge. Daardoor
      stond alles verder uit elkaar en kwamen de knoppen lager te staan. */
#gform_wrapper_1 .gfield_repeater_item {
    row-gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 0 !important;
}

/* Bij meerdere deelnemers wel een scheiding tussen de blokken. */
#gform_wrapper_1 .gfield_repeater_item + .gfield_repeater_item {
    margin-top: 1.1rem !important;
    padding-top: 1.1rem !important;
    border-top: 1px solid var(--evolon-lijn) !important;
}

/* De knop sluit nu aan op het laatste veld. */
#gform_wrapper_1 .gfield_repeater_buttons {
    padding: .3rem 0 0 !important;
    margin: 0 !important;
}