.flex-layout.contact_formulier {
    padding-block: var(--row-padding-top) var(--row-padding-bottom-full);
}

.flex-layout.contact_formulier .pk-grid-container {
    align-items: flex-start;
}

.contact_formulier .contact-form-card {
    border-radius: 34px;
    border: 1px solid rgba(13, 64, 55, 0.30);
    background: var(--Neutral-colours-Ivory-White, #FFFCFA);
    box-shadow: 4px 4px 24px 0 rgba(0, 0, 0, 0.08);
    padding: max(2rem, calc(3.5 * var(--su)));
    display: flex;
    flex-direction: column;
}

.contact-form-wrap .gform-body * {
    font-family:  var(--pk-text-font-family);
}

.contact_formulier .contact-form-card h2,
.contact_formulier .contact-form-card h3,
.contact_formulier .contact-form-card h4,
.contact_formulier .contact-form-card h5,
.contact_formulier .contact-form-card h6,
.contact_formulier .contact-form-card p{
    color: var(--Primary-colours-Forest-Green, #0D4037);
}

.contact_formulier span.gfield_required {
    display: none !important;
}

.contact_formulier p.gform_required_legend {
    display: none;
}

.contact_formulier .contact-form-card p{
    font-size: max(0.775rem, calc(0.875 * var(--su)));
    opacity: 0.75;
    }


    .contact_formulier .pk-module.pk-text.info-card-tekst{
        color: var(--Primary-colours-Sage-green, #E6EFDA);

    }

/* Info column */
.contact_formulier .contact-info-col {
    display: flex;
    flex-direction: column;
    gap: max(1.5rem, calc(2 * var(--su)));
}

.contact_formulier .contact-info-card {
    border-radius: 34px;
    padding: max(2rem, calc(3 * var(--su)));
    display: flex;
    flex-direction: column;
    gap: max(1rem, calc(1.25 * var(--su)));
}

.contact-info-card.contact-card * {
    color: var(--Primary-colours-Sage-green, #E6EFDA) !important;
}

/* Contact card (forest green) */
.contact_formulier .contact-card {
    background: var(--Primary-colours-Forest-Green, #0D4037);
}

.contact_formulier .contact-card .info-card-titel,
.contact_formulier .contact-card .info-card-tekst p,
.contact_formulier .contact-card .contact-gegevens-list a {
    color: var(--Neutral-colours-Ivory-White, #FFFCFA);
}

.contact_formulier .contact-gegevens-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.contact_formulier .contact-gegevens-list li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.contact_formulier .contact-gegevens-list a {
    text-decoration: none;
    font-size: max(0.9375rem, calc(1 * var(--su)));
}

.contact_formulier .contact-gegevens-list a:hover {
    text-decoration: underline;
}

.contact_formulier .contact-icon {
    color: var(--Neutral-colours-Ivory-White, #FFFCFA);
}

.contact_formulier .contact-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Gegevens card (sage green) */
.contact_formulier .gegevens-card {
    background: var(--Primary-colours-Sage-green, #E6EFDA);
}

.contact_formulier .gegevens-card .info-card-titel {
    color: var(--Primary-colours-Forest-Green, #0D4037);
}

.contact_formulier .gegevens-body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.contact_formulier .gegevens-bedrijf {
    margin: 0;
    font-weight: 600;
    color: var(--Primary-colours-Forest-Green, #0D4037);
}

.contact_formulier .gegevens-adres {
    margin: 0;
    color: var(--Primary-colours-Forest-Green, #0D4037);
    font-size: max(0.9375rem, calc(1 * var(--su)));
}

.contact_formulier .gegevens-route {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--Primary-colours-Forest-Green, #0D4037);
    text-decoration: underline;
    font-size: max(0.9375rem, calc(1 * var(--su)));
}

.contact_formulier .gegevens-nummers {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-top: max(0.5rem, calc(0.75 * var(--su)));
}

.contact_formulier .gegevens-nummers p {
    margin: 0;
    color: var(--Primary-colours-Forest-Green, #0D4037);
}

.contact_formulier .gegevens-socials {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.contact_formulier .gegevens-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--Primary-colours-Forest-Green, #0D4037);
    color: var(--Secondary-colours-Electric-Lime, #E8FF3F);
    transition: opacity 0.2s ease;
}

.contact_formulier .gegevens-socials a svg,
.contact_formulier .gegevens-socials a path{
    fill:var(--Secondary-colours-Electric-Lime, #E8FF3F);
}

.contact_formulier .gegevens-socials a:hover {
    opacity: 0.8;
}

.contact_formulier .gegevens-socials svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Heading in form card */
.contact_formulier .contact-form-card .pk-heading {
    color: var(--Neutral-colours-Cool-gray, #1F3239);
}

.contact_formulier .info-card-titel {
    margin: 0;
    font-size: max(1.375rem, calc(1.5 * var(--su)));
}

/* Form inputs */
.contact_formulier .gform_wrapper input[type="text"],
.contact_formulier .gform_wrapper input[type="email"],
.contact_formulier .gform_wrapper input[type="tel"],
.contact_formulier .gform_wrapper input[type="url"],
.contact_formulier .gform_wrapper input[type="number"],
.contact_formulier .gform_wrapper input[type="password"],
.contact_formulier .gform_wrapper input[type="search"],
.contact_formulier .gform_wrapper input[type="date"],
.contact_formulier .gform_wrapper select,
.contact_formulier .gform_wrapper textarea {
    border-radius: 4px !important;
    border: 1px solid var(--Primary-colours-Forest-Green, #0D4037) !important;
        padding: 12px 10px !important;
        background: var(--Neutral-colours-Ivory-White, #FFFCFA);
}

.contact_formulier .gform_button,
.contact_formulier .gform_next_button,
.contact_formulier .gform_previous_button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5em !important;
    font-size: var(--pk-button-font-size) !important;
    font-family: var(--pk-button-font-family) !important;
    font-weight: var(--pk-button-font-weight) !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    border: 1px solid var(--color-forest-green) !important;
    background-color: var(--color-forest-green) !important;
    color: var(--color-electric-lime) !important;
    transition:
        background-color var(--btn-transition),
        color var(--btn-transition),
        border-color var(--btn-transition) !important;
}

.contact_formulier .gform_button:hover,
.contact_formulier .gform_next_button:hover,
.contact_formulier .gform_previous_button:hover {
    background-color: var(--color-cool-gray) !important;
    border-color: var(--color-cool-gray) !important;
}

/* Floating labels */
.contact_formulier .gform_wrapper .gfield {
    position: relative;
    height: fit-content;
}

.contact_formulier .gform_wrapper .gfield > label {
    position: absolute;
    left: max(1rem, calc(1 * var(--su)));
    margin-bottom: 0;
    padding-top: 0;
    padding-inline: 0.25em;
    pointer-events: none;
    transition: top 180ms ease-in-out;
    z-index: 2;
    font-weight:300;
    background: var(--Neutral-colours-Ivory-White, #FFFCFA);
    color: var(--Primary-colours-Forest-Green, #0D4037) !important;
}

.contact_formulier .gform_wrapper .gfield:not(.gfield--type-textarea) > label {
    top: 50%;
    transform: translate(0, -50%);
}

.contact_formulier .gform_wrapper .gfield--type-textarea > label {
    top: max(.75rem, calc(.75 * var(--su)));
    transition: top 180ms ease-in-out, transform 180ms ease-in-out;
}

.contact_formulier .gform_wrapper input::placeholder,
.contact_formulier .gform_wrapper textarea::placeholder {
    font-size: 0;
}

.contact_formulier .gform_wrapper .gfield:focus-within > label,
.contact_formulier .gform_wrapper .gfield:has(input:not([type='hidden']):not(:placeholder-shown)) > label,
.contact_formulier .gform_wrapper .gfield:has(option:not(.gf_placeholder):checked) > label {
    top: 0;
    transform: translate(0, -50%);
}

.contact_formulier .gform_wrapper .gfield:has(textarea):focus-within > label,
.contact_formulier .gform_wrapper .gfield:has(textarea:not(:placeholder-shown)) > label {
    top: 0;
    transform: translate(0, -50%);
}


.contact_formulier .gform_wrapper fieldset .gform-grid-col {
    position: relative;
}

.contact_formulier .gform_wrapper fieldset .gform-grid-col:focus-within label,
.contact_formulier .gform_wrapper fieldset .gform-grid-col:has(input:not(:placeholder-shown)) label {
    top: 0;
    transform: translate(0, -50%);
}

/* Consent/checkbox/radio — nooit floating */
.contact_formulier .gform_wrapper .gfield--type-consent label,
.contact_formulier .gform_wrapper .gfield_checkbox label,
.contact_formulier .gform_wrapper .gfield_radio label {
    position: static;
    transform: none;
    pointer-events: all;
    padding: 0;
}

.contact_formulier .ginput_container.ginput_container_consent {
    display: flex;
    align-items: flex-start;
}

.contact_formulier .ginput_container.ginput_container_consent label {
    font-size: max(0.75rem, calc(0.75 * var(--su)));
}

/* Responsive */
@media screen and (max-width: 992px) {
    .contact_formulier .contact-form-col,
    .contact_formulier .contact-info-col {
        grid-column: span 8;
    }

    .contact_formulier .contact-col-gap {
        display: none;
    }

    .contact_formulier .pk-grid-container {
        row-gap: max(2rem, calc(3 * var(--su)));
    }
}

@media screen and (max-width: 767px) {
    .contact_formulier .contact-form-col,
    .contact_formulier .contact-info-col {
        grid-column: span 5;
    }

    .contact_formulier .pk-grid-container {
        row-gap: max(2rem, calc(2.5 * var(--su)));
    }
}
