/* =========================================================================
   px-form-embed — Gedeelde opmaak voor ingesloten formulieren (Gravity Forms
   + HubSpot) in een witte theme-card. Gebruikt door px-form (sectie) en
   px-contact-modal (popup); auto-enqueued via assets/css/px-*.css glob.

   Eigen/native formulieren zijn per 2026-07-03 verwijderd: elk formulier komt
   uit Gravity Forms (jobs/sollicitatie) of HubSpot (contact, demo, modal).

   Design-bron: Figma form-card 442:12744 / 439:10104 (zelfde waardes als de
   HubSpot iframe-injectie in includes/reusable-field-groups/px-hubspot.php —
   labels 14px/700 zwart, velden 40px --Groen-Grijs radius --R5, waarde 16px/600
   groen, knop "Btn 2" 58px dark gradient). GF framework-CSS staat front-end
   uit (px_gf_disable_default_css), dus dit bestand bepaalt de volledige look.

   De host-module kan de maten sturen via --px-form-* (px-form doet dat, incl.
   mobiele 32px knop); zonder host-tokens gelden de Figma-fallbacks hieronder.
   ========================================================================= */

.px-form__gf,
.px-form__hs {
    --pxf-label-size: var(--px-form-label-size, var(--Font-Size-Body));
    --pxf-hint-size: var(--px-form-hint-size, var(--Font-Size-Body-Sm));
    --pxf-field-h: var(--px-form-field-h, 40px);
    --pxf-textarea-h: var(--px-form-textarea-h, 120px);
    --pxf-submit-h: var(--px-form-submit-h, 58px);
    --pxf-loading-min-h: var(--px-form-loading-min-h, 260px);

    /* Validatie-icoon in het veld + de zwevende melding. Vaste maten: het icoon is
       een 18px vierkantje, geen fluid ruimte, dus de --D* schaal past hier niet. */
    --pxf-err-icon: 18px;
    --pxf-err-pad: 42px;
    --pxf-tip-max: 260px;

    /* Binnenruimte in het HubSpot-iframe voor de focus-ring; moet gelijk zijn aan
       de body-padding die px-hubspot.php injecteert. */
    --pxf-frame-bleed: 5px;
}

/* --- HubSpot (form_source = hubspot) --------------------------------------
   De HubSpot-form rendert in een same-origin iframe; de theme-styling wordt ná
   het laden ín het iframe geïnjecteerd (px-hubspot.php). Op tragere verbindingen
   toont HubSpot heel even zijn eigen ongestylede formulier vóórdat onze CSS
   binnen is (designer-feedback #80): reserveer kaart-hoogte en toon het iframe
   pas zodra het gestyled is. Een timeout-fallback in de injector maakt het
   iframe hoe dan ook zichtbaar. */

.px-form__hs {
    min-height: var(--pxf-loading-min-h);

    /* Het iframe krijgt 5px binnenruimte zodat de focus-ring (2px outline op 2px
       offset) niet tegen de iframe-rand wordt afgeknipt. Die 5px halen we hier
       terug met een negatieve marge; de velden houden dus exact dezelfde breedte
       als in de Gravity Forms kaart. De kaart heeft 30px padding, dus dit past. */
    margin: calc(var(--pxf-frame-bleed) * -1);
}

.px-form__hs iframe {
    opacity: 0;
    transition: opacity var(--px-duration-fast) var(--px-ease-out);
}

.px-form__hs.is-ready {
    min-height: 0;
}

.px-form__hs.is-ready iframe {
    opacity: 1;
}

/* --- Gravity Forms (form_source = gravityforms) --------------------------- */

.px-form__gf .gform_wrapper,
.px-form__gf .gform_wrapper form {
    margin: 0;
}

.px-form__gf .gform_required_legend {
    display: none;
}

/* GF's eigen framework-CSS staat front-end uit (px_gf_disable_default_css). Die CSS
   verbergt normaal de honeypot/validatie-container met display:none; zonder die regel
   verschijnt het anti-spam honeypot-veld ("... is for validation purposes ...") gewoon
   in de card. De theme verbergt het daarom zelf, zodat de honeypot wél spam-bescherming
   blijft geven maar onzichtbaar is (feedback /jobs/<slug> #20260622-085626). */
.px-form__gf .gform_validation_container,
.px-form__gf .gfield--type-honeypot {
    display: none !important;
}

.px-form__gf .gform_fields {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--D15);
    row-gap: var(--D1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.px-form__gf .gfield {
    display: flex;
    flex-direction: column;
    gap: var(--D025);
    min-width: 0;
    margin: 0;
}

.px-form__gf .gfield--width-half { grid-column: span 6; }
.px-form__gf .gfield--width-full { grid-column: span 12; }

.px-form__gf .gfield_label {
    margin: 0;
    font-size: var(--pxf-label-size);
    font-weight: var(--px-weight-bold);
    line-height: 1.6;
    color: var(--Zwart);
}

.px-form__gf .gfield_required {
    margin-inline-start: 0.15em;
    color: var(--Accent-Company-100);
}

.px-form__gf .ginput_container {
    margin: 0;
}

.px-form__gf input:not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.px-form__gf textarea,
.px-form__gf select {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--Groen-Grijs);
    border: none;
    border-radius: var(--R5);
    padding-inline: var(--D075);
    font-family: var(--Font-Family-Primary);
    font-size: 1rem; /* 16px — Figma ingevulde waarde */
    font-weight: var(--px-weight-semibold);
    line-height: 1.25;
    color: var(--Accent-Company-100);
    transition: box-shadow var(--px-duration-fast) var(--px-ease-out);
}

.px-form__gf input:not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.px-form__gf select {
    height: var(--pxf-field-h);
    min-height: var(--pxf-field-h);
}

/* GF rendert <textarea rows="10">; met alleen min-height groeit 'ie veel hoger dan
   Figma (596x120). Vaste height kapt dat op de design-hoogte; resize blijft mogelijk. */
.px-form__gf textarea {
    height: var(--pxf-textarea-h);
    padding-block: var(--D075);
    resize: vertical;
}

/* Select: eigen chevron i.p.v. de browser-pijl (zelfde SVG als de HubSpot-injectie). */
.px-form__gf select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23000' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--D075) center;
    padding-right: var(--D2);
}

.px-form__gf ::placeholder {
    color: var(--Grijs-Mid);
    font-weight: var(--px-weight-medium);
    opacity: 1;
}

/* Zolang de placeholder-optie ("Please select") gekozen is, oogt de dropdown
   als placeholder (grijs), niet als ingevulde waarde (groen). */
.px-form__gf select:has(option[value=""]:checked) {
    color: var(--Grijs-Mid);
    font-weight: var(--px-weight-medium);
}

.px-form__gf input:focus-visible,
.px-form__gf textarea:focus-visible,
.px-form__gf select:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--Teal-CTA-Alt);
}

/* --- Meerdere pagina's (tweestaps sollicitatieformulier) -------------------
   Voortgangsbalk: dun groen-op-groengrijs balkje met de stap-tekst erboven,
   zoals het percentage-balkje op businessradar.com/workingstudent. GF plaatst
   de balk boven het formulier; de percentage-tekst in de balk is dubbelop met
   de stap-titel en blijft verborgen. */

.px-form__gf .gf_progressbar_wrapper {
    margin: 0 0 var(--D1);
    padding: 0;
}

.px-form__gf .gf_progressbar_title {
    margin: 0 0 var(--D025);
    font-size: var(--pxf-hint-size);
    font-weight: var(--px-weight-bold);
    line-height: 1.6;
    color: var(--Zwart);
    opacity: 0.55;
}

.px-form__gf .gf_progressbar {
    height: 8px;
    background-color: var(--Groen-Grijs);
    border-radius: var(--R5);
    overflow: hidden;
}

.px-form__gf .gf_progressbar_percentage {
    height: 100%;
    background: var(--Accent-Company-100);
    border-radius: inherit;
    transition: width var(--px-duration-normal) var(--px-ease-out);
}

.px-form__gf .gf_progressbar_percentage span {
    display: none;
}

/* Knoppenrij per stap (Next / Previous + Submit). De knoppen zelf worden in
   px-gravityforms.php omgebouwd naar theme-knoppen (px-btn). */
.px-form__gf .gform_page_footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--D075);
    margin: var(--D05) 0 0;
    padding: 0;
    border: none;
}

.px-form__gf .gform_footer {
    display: flex;
    margin: var(--D05) 0 0;
    padding: 0;
}

/* --- Bestanden uploaden (meerdere bestanden, stap 2) -----------------------
   GF multifile = dropzone + "Select files"-knop. Dropzone in de veld-stijl
   (Groen-Grijs, radius 5); de knop volgt de Figma "Select file"-outline-knop
   (439:10104), zelfde look als de oude ::file-selector-button. */

.px-form__gf .gform_drop_area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--D05);
    padding: var(--D15) var(--D1);
    background-color: var(--Groen-Grijs);
    border: 1.5px dashed var(--Grijs-Mid);
    border-radius: var(--R5);
    text-align: center;
}

.px-form__gf .gform_drop_instructions {
    font-size: var(--pxf-hint-size);
    font-weight: var(--px-weight-medium);
    color: var(--Grijs-Mid);
}

.px-form__gf .gform_button_select_files {
    margin: 0;
    padding: 9px 12px;
    border: 1.5px solid var(--Zwart);
    border-radius: var(--R5);
    background: transparent;
    font-family: var(--Font-Family-Primary);
    font-weight: var(--px-weight-bold);
    font-size: var(--Font-Size-Btn-Xs);
    line-height: var(--Line-Height-Btn);
    color: var(--Zwart);
    cursor: pointer;
    transition:
        background var(--px-duration-fast) var(--px-ease-out),
        color var(--px-duration-fast) var(--px-ease-out),
        border-color var(--px-duration-fast) var(--px-ease-out);
}

.px-form__gf .gform_button_select_files:hover {
    background: var(--Gradient-Primary);
    border-color: transparent;
    color: var(--Wit);
}

/* Toegestane types/limieten onder de dropzone. */
.px-form__gf .gform_fileupload_rules {
    display: block;
    margin-top: var(--D025);
    font-size: var(--pxf-hint-size);
    font-weight: var(--px-weight-medium);
    color: var(--Grijs-Mid);
}

/* Gekozen bestanden (naam + verwijderknop + uploadstatus). */
.px-form__gf .ginput_preview_list {
    display: grid;
    gap: var(--D025);
}

.px-form__gf .ginput_preview_list:not(:empty) {
    margin-top: var(--D05);
}

.px-form__gf .ginput_preview {
    display: flex;
    align-items: center;
    gap: var(--D05);
    font-size: var(--pxf-hint-size);
    font-weight: var(--px-weight-semibold);
    color: var(--Zwart);
}

.px-form__gf .gform_delete_file {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--Rood-Error);
    cursor: pointer;
    font-size: var(--pxf-hint-size);
}

/* Los enkel-bestand veld (fallback als een form géén multifile gebruikt). */
.px-form__gf input[type="file"] {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    border: none;
    background: transparent;
    font-family: var(--Font-Family-Primary);
    font-size: var(--pxf-hint-size);
    font-weight: var(--px-weight-medium);
    color: var(--Grijs-Mid);
}

.px-form__gf input[type="file"]::file-selector-button {
    margin-inline-end: var(--D075);
    padding: 9px 12px;
    border: 1.5px solid var(--Zwart);
    border-radius: var(--R5);
    background: transparent;
    font-family: var(--Font-Family-Primary);
    font-weight: var(--px-weight-bold);
    font-size: var(--Font-Size-Btn-Xs);
    line-height: var(--Line-Height-Btn);
    color: var(--Zwart);
    cursor: pointer;
    transition:
        background var(--px-duration-fast) var(--px-ease-out),
        color var(--px-duration-fast) var(--px-ease-out),
        border-color var(--px-duration-fast) var(--px-ease-out);
}

.px-form__gf input[type="file"]::file-selector-button:hover {
    background: var(--Gradient-Primary);
    border-color: transparent;
    color: var(--Wit);
}

/* --- Validatie -------------------------------------------------------------
   De melding staat NIET in de flow. Ze hangt als tooltip onder het veld en komt
   pas tevoorschijn als je het rode icoon in het veld aanwijst, aanklikt of met
   het toetsenbord bereikt. Reden: HubSpot valideert bij elke toetsaanslag, dus
   een melding in de flow laat het formulier bij elk teken verspringen. Gravity
   Forms krijgt exact dezelfde opmaak, zodat beide formulieren zich hetzelfde
   gedragen. De knop wordt geplaatst door assets/js/px-form-errors.js; dezelfde
   opmaak staat voor HubSpot in includes/reusable-field-groups/px-hubspot.php. */

/* Beschrijving onder een veld is géén foutmelding en blijft gewoon in de flow. */
.px-form__gf .gfield_description:not(.gfield_validation_message) {
    margin-top: var(--D025);
    font-size: var(--pxf-hint-size);
    font-weight: var(--px-weight-medium);
    line-height: 1.4;
}

/* Positioneringscontext: de tooltip hangt onder het veld, de knop ín het veld. */
.px-form__gf .gfield {
    position: relative;
}

.px-form__gf .ginput_container {
    position: relative;
}

/* Ongeldig veld: rustige rode rand, plus ruimte rechts voor het icoon. */
.px-form__gf .gfield_error input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.px-form__gf .gfield_error textarea {
    padding-inline-end: var(--pxf-err-pad);
    box-shadow: inset 0 0 0 1.5px var(--Rood-Error-Ring);
}

/* Select heeft al een chevron rechts; die schuift opzij zodat de twee iconen
   elkaar niet raken. */
.px-form__gf .gfield_error select {
    padding-right: calc(var(--pxf-err-pad) + var(--D15));
    background-position: right calc(var(--pxf-err-pad) - 2px) center;
    box-shadow: inset 0 0 0 1.5px var(--Rood-Error-Ring);
}

.px-form__gf .gfield_error input:focus-visible,
.px-form__gf .gfield_error textarea:focus-visible,
.px-form__gf .gfield_error select:focus-visible {
    box-shadow: inset 0 0 0 1.5px var(--Rood-Error-Ring), 0 0 0 2px var(--Teal-CTA-Alt);
}

/* De knop in het veld. Bovenaan uitgelijnd, zodat 'ie ook in een textarea klopt. */
.px-form__gf .px-err-trigger {
    position: absolute;
    top: calc((var(--pxf-field-h) - var(--pxf-err-icon)) / 2);
    right: var(--D05);
    width: var(--pxf-err-icon);
    height: var(--pxf-err-icon);
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' fill='%23FBF1F1' stroke='%23D32F2F' stroke-width='1.5'/%3E%3Cpath d='M9 4.7v5' stroke='%23D32F2F' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='12.9' r='1.05' fill='%23D32F2F'/%3E%3C/svg%3E") no-repeat center / var(--pxf-err-icon) var(--pxf-err-icon);
    transition: transform var(--px-duration-fast) var(--px-ease-out);
}

.px-form__gf .px-err-trigger:hover {
    transform: scale(1.08);
}

.px-form__gf .px-err-trigger:focus-visible {
    outline: 2px solid var(--Teal-CTA-Alt);
    outline-offset: 2px;
}

/* De tooltip zelf. top:100% is exact de onderkant van het veld, want de melding
   staat buiten de flow en telt dus niet mee in de hoogte van .gfield. */
.px-form__gf .gfield_validation_message,
.px-form__gf .gfield_error .validation_message {
    position: absolute;
    z-index: 20;
    top: calc(100% + var(--D05));
    right: 0;
    left: auto;
    width: max-content;
    max-width: min(var(--pxf-tip-max), 100%);
    margin: 0;
    padding: var(--D05) 11px;
    border-radius: var(--R5);
    background: var(--Teal-100);
    box-shadow: 0 6px 18px rgba(2, 14, 14, 0.28);
    color: var(--Wit);
    font-size: var(--pxf-hint-size);
    font-weight: var(--px-weight-medium);
    line-height: 1.45;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-3px);
    transition:
        opacity var(--px-duration-fast) var(--px-ease-out),
        transform var(--px-duration-fast) var(--px-ease-out);
}

/* Pijltje naar het icoon. */
.px-form__gf .gfield_validation_message::before {
    content: "";
    position: absolute;
    right: 16px;
    bottom: 100%;
    border: 5px solid transparent;
    border-bottom-color: var(--Teal-100);
}

/* Tonen bij aanwijzen, bij toetsenbord-focus en na een klik. De knop en de
   melding zijn geen siblings, vandaar :has() op het veld. */
.px-form__gf .gfield:has(.px-err-trigger:hover) .gfield_validation_message,
.px-form__gf .gfield:has(.px-err-trigger:focus-visible) .gfield_validation_message,
.px-form__gf .gfield.px-err-open .gfield_validation_message {
    opacity: 1;
    transform: translateY(0);
}

.px-form__gf .gform_validation_errors {
    color: var(--Rood-Error);
}

.px-form__gf .gform_validation_errors {
    margin: 0 0 var(--D075);
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.px-form__gf .gform_validation_errors .gform_submission_error {
    margin: 0;
    font-size: var(--pxf-label-size);
    font-weight: var(--px-weight-bold);
    line-height: 1.4;
}

.px-form__gf .gform_confirmation_message {
    color: var(--Zwart);
    font-size: var(--Font-Size-Body);
    line-height: 1.5;
}

/* --- Verzend/stap-knoppen (gedeeld met de HubSpot-kaart-look) --------------
   px_gf_submit_button / next / previous zetten deze class op de knoppen.
   Figma "Btn 2": 58px FIXED; px-btn--md basis is ~43px, dus hoogte hier. */
.px-form__submit {
    margin-top: var(--D05);
    min-height: var(--px-form-submit-h, 58px);
}

.px-form__gf .gform_page_footer .px-form__submit {
    margin-top: 0; /* de footer-rij heeft al marge; knoppen op één lijn */
}

/* --- Mobiel ---------------------------------------------------------------- */

@media (max-width: 768px) {
    /* Enkele kolom, zoals native + Figma 442:19227. */
    .px-form__gf .gform_fields {
        row-gap: var(--D15);
    }

    .px-form__gf .gfield--width-half,
    .px-form__gf .gfield--width-full {
        grid-column: 1 / -1;
    }
}