.pk-component.form .gform_wrapper{
    --input-padding-inline: max(1rem, calc(1.5 * var(--su)));
    --input-padding-block: max(.75rem, calc(.75 * var(--su)));

    --form-font-family: var(--pk-text-font-family);
    --border-color: var(--noix-black-60);
    --highlight-color: var(--noix-black-60);
    --label-color: var(--noix-black-60);
    --active-label-color: var(--noix-blue);
    --transition-duration: 180ms;
    --label-font-size: var(--scaling-body-s);
    --form-font-size: var(--scaling-body-s);
    --label-padding: max(.375rem, calc(.375 * var(--su)));
}

.pk-component.form .gform-body .gform_fields{
    grid-column-gap: max(1rem, calc(1.5 * var(--su)));
    grid-row-gap: max(1rem, calc(1 * var(--su)));
}

.pk-component.form .gform_wrapper .gfield_checkbox,
.pk-component.form .gform_wrapper .gfield--type-consent,
.pk-component.form .gform_wrapper .gfield_radio{
    font-size: var(--form-font-size);
    font-family: var(--form-font-family);
}

.pk-component.form .gform_wrapper .gfield_checkbox label,
.pk-component.form .gform_wrapper .gfield--type-consent label,
.pk-component.form .gform_wrapper .gfield_radio label{
    font-size: inherit;
}

.pk-component.form .gform_wrapper .gfield_checkbox input,
.pk-component.form .gform_wrapper .gfield--type-consent input,
.pk-component.form .gform_wrapper .gfield_radio input{
    font-size: inherit;
    width: 1em; height: 1em;
    margin-right: .5em;
    accent-color: var(--highlight-color);
    color: #fff;
}

.pk-component.form .gform_wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
.pk-component.form .gform_wrapper select,
.pk-component.form .gform_wrapper textarea {
    font-family: var(--form-font-family);
    background-color: var(--form-bg-color, var(--noix-almond));
    font-size: var(--form-font-size);
    border-radius: max(.25rem, calc(0.25 * var(--su)));
    border: 1px solid var(--border-color);
    padding-inline: var(--input-padding-inline);
    padding-block: var(--input-padding-block);
    line-height: 1.5;
    outline: none !important;
}

.pk-component.form .gform_wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
.pk-component.form .gform_wrapper select {
    height: max(3rem, calc(3 * var(--su)));
}

.pk-component.form .gform_wrapper select{
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding-block: 0;
    color: var(--label-color);
    padding-right: calc(var(--input-padding-inline) + max(1.25rem, calc(1.25 * var(--su))));
    background-repeat: no-repeat;
    background-position: calc(100% - var(--input-padding-inline)) center;
    background-size: max(.75rem, calc(.75 * var(--su)));
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='7' viewBox='0 0 13 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.57' d='M0.5 0.5L6.5 6.5L12.5 0.5' stroke='%23123435' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.pk-component.form .gform_wrapper select::placeholder {
    color: var(--label-color);
}

.pk-component.form .gform_wrapper textarea{
    resize: none;
}

.pk-component.form .gform_wrapper .gfield--type-consent > .ginput_container{
    display: flex;
    align-items: start;
}

.pk-component.form .gform_wrapper .gfield:focus-within input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.pk-component.form .gform_wrapper .gfield:focus-within textarea,
.pk-component.form .gform_wrapper .gfield:focus-within select,
.pk-component.form .gform_wrapper .gfield:has(input:not([type='hidden']):not(:placeholder-shown)) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.pk-component.form .gform_wrapper .gfield:has(textarea:not(:placeholder-shown)) textarea,
.pk-component.form .gform_wrapper .gfield:has(option:not(.gf_placeholder):checked) select{
    border-color: var(--highlight-color);
}

/* Verbergt overbodige GF-chrome: verplichte-tekst, labels boven complexe velden,
   veldomschrijvingen (incl. de char-counter, die dezelfde class deelt), het
   select-label (dubbelop met de zwevende waarde), sectie-scheidingen en de
   kale file-input (vervang die door een eigen upload-UI). */
.pk-component.form .gform_wrapper .gfield_required,
.pk-component.form .gform_wrapper .gfield_label_before_complex,
.pk-component.form .gform_wrapper .gfield_description,
.pk-component.form .gform_wrapper .gfield--type-select .gfield_label,
.pk-component.form .gform_wrapper .gfield--type-section,
.pk-component.form .gform_wrapper .gfield.gfield--type-fileupload input[type="file"],
.pk-component.form .gform_wrapper .gfield.gfield--type-fileupload .gform_fileupload_rules,
.pk-component.form .gform_wrapper .gfield.gfield--type-fileupload .gfield_label{
    display: none !important;
}

/* Verbergt GF's eigen titel/omschrijving: layouts die dit component gebruiken
   hebben vaak hun eigen title/text-velden erboven staan. */
.pk-component.form .gform_wrapper .gform_heading{
    display: none !important;
}

/* Submit-knop in dezelfde stijl als .pk-button.primary (pijl-icoon dat op
   hover een almond cirkel krijgt, icoon wordt de eigen achtergrondkleur). */
.pk-component.form .gform_wrapper .form-button{
    --btn-bg: var(--noix-blue);
    position: relative;
    background-color: var(--btn-bg) !important;
    color: var(--noix-almond);
    border: unset !important;
    box-shadow: unset !important;
    padding: unset !important;
    border-radius: var(--button-border-radius);
    width: fit-content;
}

.pk-component.form .gform_wrapper .form-button .button-base{
    position: relative;
    display: flex;
    align-items: center;
    gap: max(0.5rem, calc(0.5 * var(--su)));
    font-size: var(--scaling-navigation);
    font-weight: var(--pk-button-font-weight);
    line-height: normal;
    padding: max(0.625rem, calc(0.625 * var(--su))) max(1.25rem, calc(1.25 * var(--su))) max(0.625rem, calc(0.625 * var(--su))) max(.625rem, calc(0.625 * var(--su)));
}

.pk-component.form .gform_wrapper .form-button .button-base::before{
    content: '';
    position: relative;
    z-index: 2;
    transform-origin: center;
    width: max(1.25rem, calc(1.25 * var(--su)));
    height: auto;
    aspect-ratio: 1;
    background-color: currentColor;
    transition: background-color 0.2s ease-in-out;
    --mask-url: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.588379 4.70578H8.82367M4.70603 8.82343L8.82367 4.70578L4.70603 0.588135' stroke='%23EDEAE5' stroke-width='1.17647' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    mask: var(--mask-url) no-repeat center / 60%;
    -webkit-mask: var(--mask-url) no-repeat center / 60%;
    flex-shrink: 0;
}

.pk-component.form .gform_wrapper .form-button .button-base::after{
    content: '';
    position: absolute;
    z-index: 1;
    left: max(.625rem, calc(.625 * var(--su)));
    top: 50%;
    transform: translateY(-50%);
    width: max(1.25rem, calc(1.25 * var(--su)));
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--noix-almond);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.pk-component.form .gform_wrapper .form-button:hover .button-base::after,
.pk-component.form .gform_wrapper .form-button:active .button-base::after{
    opacity: 1;
}

.pk-component.form .gform_wrapper .form-button:hover .button-base::before,
.pk-component.form .gform_wrapper .form-button:active .button-base::before{
    background-color: var(--btn-bg);
}


/**
 * Animated Labels
 */

.pk-component.form.animated_labels .gform_wrapper .gfield{
    position: relative;
    /* height: fit-content; */
}

.pk-component.form.animated_labels .gform_wrapper .ginput_container_date input{
    width: 100%;
}

.pk-component.form.animated_labels .gform_wrapper .gfield > label{
    position: absolute;
    left: calc(var(--input-padding-inline) - var(--label-padding));
    color: var(--label-color);
    margin-bottom: 0;
    padding: 0 var(--label-padding);
    transition: top var(--transition-duration) ease-in-out, font-size var(--transition-duration) ease-in-out;
    background-color: var(--form-bg-color, var(--noix-almond));
}

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

.pk-component.form.animated_labels .gform_wrapper .gfield--type-textarea > label{
    top: var(--input-padding-block);
    transition: top var(--transition-duration) ease-in-out,
        font-size var(--transition-duration) ease-in-out,
        transform var(--transition-duration) ease-in-out;

}

.pk-component.form.animated_labels .gform_wrapper .gfield--type-textarea .gfield_description{
    font-size: var(--label-font-size);
    font-style: italic;
    color: var(--label-color);
    margin-top: 0;
    padding-top: 0;
}

.pk-component.form.animated_labels .gform_wrapper .gfield option{
    padding-inline: var(--input-padding-inline);
}

.pk-component.form.animated_labels .gform_wrapper .gfield > label,
.pk-component.form.animated_labels .gform_wrapper .gfield > input {
    cursor: text;
    font-size: var(--label-font-size);
    font-weight: 400;
}

.pk-component.form.animated_labels .gform_wrapper input::placeholder,
.pk-component.form.animated_labels .gform_wrapper textarea::placeholder{
    font-size: 0;
}

.pk-component.form.animated_labels .gform_wrapper .gfield:focus-within > label,
.pk-component.form.animated_labels .gform_wrapper .gfield:has(input:not([type='hidden']):not(:placeholder-shown)) > label,
.pk-component.form.animated_labels .gform_wrapper .gfield:has(option:not(.gf_placeholder):checked) > label{
    top: 0;
    font-size: .75em;
    color: var(--active-label-color);
    font-weight: 500;
}

.pk-component.form.animated_labels .gform_wrapper .gfield:has(textarea):focus-within > label,
.pk-component.form.animated_labels .gform_wrapper .gfield:has(textarea:not(:placeholder-shown)) > label{
    font-size: .75em;
    top: 0;
    transform: translate(0, -50%);
    color: var(--active-label-color);
    font-weight: 500;
}


/* Voor complexe velden */
.pk-component.form.animated_labels .gform_wrapper fieldset .gform-grid-col{
    position: relative;
}

.pk-component.form.animated_labels .gform_wrapper fieldset .gform-grid-col:focus-within label,
.pk-component.form.animated_labels .gform_wrapper fieldset .gform-grid-col:has(input:not(:placeholder-shown)) label {
    top: 0;
    font-size: .75em;
    color: var(--active-label-color);
    font-weight: 500;
}

@media screen and (max-width: 767px) {

    .pk-component.form .gform_wrapper .ginput_complex .gform-grid-col{
        flex: 0 0 100%;
        margin-bottom: max(.75rem, calc(.75 * var(--su)));
        padding: 0;
    }

    .pk-component.form .gform_wrapper .ginput_complex .gform-grid-col:last-child{
        margin-bottom: 0;
    }

    .pk-component.form .gform_wrapper .gfield--width-half{
        grid-column: span 12;
    }

}