/* ==========================================================================
   Complai Formulier (HubSpot)
   Markup + controls: widgets/hubspot-form-widget.php

   Zelfde opzet als het CTA-blok: alle instelbare waarden staan hieronder als
   custom property op .cw-hsform. De Elementor-controls schrijven diezelfde
   properties op `{{WRAPPER}} .cw-hsform` en winnen op specificiteit. De
   waardes hieronder zijn dus de defaults van het ontwerp, niet zomaar een
   fallback.

   Let op de dubbele klassen bij velden en knop (.cw-hsform .cw-hsform__input).
   De reset van hello-elementor stijlt `input[type=email]`, `select`, `textarea`
   en `[type=submit]` rechtstreeks — inclusief rand, ronding en padding — en
   daar wint één losse klasse het niet van. Typografie staat juist wél op één
   klasse, anders wint deze CSS van de typografie-control in Elementor.
   ========================================================================== */

/* De maximale breedte staat op de wrapper van Elementor, niet op de kaart zelf.
   Anders beslaat het element de hele kolom terwijl de kaart in het midden zweeft:
   het kader in de editor klopt dan niet met wat je ziet, en een achtergrond of
   marge die je op het element zet, loopt door tot buiten de kaart. De variabele
   erft van de wrapper door naar .cw-hsform, zodat beide dezelfde waarde volgen. */
.elementor-widget-cew_hubspot_form {
    --cw-hsform-max-width: 640px;

    /* `width` en niet `max-width`: Elementor zet zelf
       `.elementor.elementor .e-con>.elementor-widget { max-width: 100% }` met
       specificiteit 0,4,0, en daar wint geen klasse hier van. Een expliciete
       breedte haalt het element bovendien uit de stretch van de flex-container,
       zodat de auto-marges het kunnen centreren — een auto-marge alléén laat een
       flex-item juist naar zijn eigen inhoud krimpen. */
    width: min(100%, var(--cw-hsform-max-width));
    margin-inline: auto;
}

.cw-hsform {
    /* Kaart */
    --cw-hsform-bg: #FFFFFF;
    --cw-hsform-border-width: 1px;
    --cw-hsform-border-color: rgba(60, 71, 89, .13);
    --cw-hsform-radius: 1.5rem;
    --cw-hsform-padding: 2.5rem;
    --cw-hsform-shadow: 0 4px 30px rgba(16, 30, 52, .08);
    --cw-hsform-gap: 2rem;

    /* Kop */
    --cw-hsform-header-align: center;
    --cw-hsform-title-color: #101E34;
    --cw-hsform-title-gap: .75rem;
    --cw-hsform-intro-color: #3C4759;

    /* Velden */
    --cw-hsform-row-gap: 1.25rem;
    --cw-hsform-col-gap: 1.5rem;
    --cw-hsform-label-color: #101E34;
    --cw-hsform-label-gap: .5rem;
    --cw-hsform-input-color: #101E34;
    --cw-hsform-placeholder-color: #6A7383;
    --cw-hsform-input-bg: #FFFFFF;
    --cw-hsform-input-border-width: 1px;
    --cw-hsform-input-border-color: rgba(60, 71, 89, .13);
    --cw-hsform-input-border-color-focus: #194B63;
    --cw-hsform-input-radius: .625rem;
    --cw-hsform-input-padding: .875rem 1rem;
    --cw-hsform-error-color: #B32D2E;

    /* Verzendknop */
    --cw-hsform-submit-width: 100%;
    --cw-hsform-submit-align: center;
    --cw-hsform-submit-gap: 1.5rem;
    --cw-hsform-submit-bg: #101E34;
    --cw-hsform-submit-color: #FFFFFF;
    --cw-hsform-submit-bg-hover: #194B63;
    --cw-hsform-submit-color-hover: #FFFFFF;
    --cw-hsform-submit-radius: 50px;
    --cw-hsform-submit-padding: 15px 24px;

    /* Notice */
    --cw-hsform-notice-bg: #FAFAFB;
    --cw-hsform-notice-accent-color: #8B5CF6;
    --cw-hsform-notice-accent-width: 3px;
    --cw-hsform-notice-radius: .5rem;
    --cw-hsform-notice-padding: 1rem 1.25rem;
    --cw-hsform-notice-color: #3C4759;
    --cw-hsform-notice-link-color: #101E34;
    --cw-hsform-notice-link-color-hover: #4B3265;
    --cw-hsform-notice-link-gap: .375rem;
    --cw-hsform-notice-icon-gap: .625rem;

    /* Meldingen */
    --cw-hsform-message-color: #101E34;
    --cw-hsform-message-error-color: #B32D2E;

    /* De velden van een halve regel gaan onder elkaar zodra de kaart smal
       wordt — niet zodra het venster smal wordt. Een smalle kaart in een brede
       kolom moet net zo goed kloppen. */
    container: cw-hsform / inline-size;

    display: flex;
    flex-direction: column;
    gap: var(--cw-hsform-gap);
    width: 100%;
    /* Met de fallback werkt het blok ook los van Elementor. */
    max-width: var(--cw-hsform-max-width, 640px);
    margin-inline: auto;
    padding: var(--cw-hsform-padding);
    box-sizing: border-box;
    background-color: var(--cw-hsform-bg);
    border: var(--cw-hsform-border-width) solid var(--cw-hsform-border-color);
    border-radius: var(--cw-hsform-radius);
    box-shadow: var(--cw-hsform-shadow);
}

/* ── Kop ──────────────────────────────────────────────────────────────────
   De gap valt vanzelf weg als er maar één van de twee staat. */
.cw-hsform__header {
    display: flex;
    flex-direction: column;
    gap: var(--cw-hsform-title-gap);
    text-align: var(--cw-hsform-header-align);
}

/* Twee klassen: de Elementor-kit zet `.elementor-kit-6 p` op een
   margin-block-end van 1.5rem, en dat is 0,1,1. Elke <p> in dit blok heeft
   daarom een tweede klasse nodig om zijn eigen marge te houden. */
.cw-hsform .cw-hsform__title,
.cw-hsform .cw-hsform__intro {
    margin: 0;
}

.cw-hsform__title {
    color: var(--cw-hsform-title-color);
    font-family: Inter, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}

.cw-hsform__intro {
    color: var(--cw-hsform-intro-color);
    font-family: Inter, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

/* ── Formulier ────────────────────────────────────────────────────────── */
.cw-hsform__form {
    display: flex;
    flex-direction: column;
}

.cw-hsform__fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cw-hsform-row-gap) var(--cw-hsform-col-gap);
}

.cw-hsform__field {
    display: flex;
    flex: 0 1 100%;
    /* Zonder min-width duwt een lange placeholder het veld breder dan zijn deel. */
    min-width: 0;
    flex-direction: column;
    gap: var(--cw-hsform-label-gap);
}

.cw-hsform__field--half {
    flex-basis: calc(50% - var(--cw-hsform-col-gap) / 2);
}

.cw-hsform__label,
.cw-hsform__checkbox-label {
    font-family: Inter, sans-serif;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.5;
}

/* De reset van hello-elementor zet labels op inline-block met line-height 1. */
.cw-hsform .cw-hsform__label {
    display: block;
    color: var(--cw-hsform-label-color);
    line-height: 1.5;
    vertical-align: baseline;
}

.cw-hsform__required {
    color: var(--cw-hsform-error-color);
}

/* ── Invoervelden ─────────────────────────────────────────────────────────
   Twee klassen: de reset stijlt input[type=…], select en textarea met een
   eigen rand, ronding en padding. */
.cw-hsform .cw-hsform__input,
.cw-hsform .cw-hsform__select,
.cw-hsform .cw-hsform__textarea {
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--cw-hsform-input-padding);
    box-sizing: border-box;
    color: var(--cw-hsform-input-color);
    background-color: var(--cw-hsform-input-bg);
    border: var(--cw-hsform-input-border-width) solid var(--cw-hsform-input-border-color);
    border-radius: var(--cw-hsform-input-radius);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.cw-hsform__input,
.cw-hsform__select,
.cw-hsform__textarea {
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}

.cw-hsform .cw-hsform__input::placeholder,
.cw-hsform .cw-hsform__textarea::placeholder {
    color: var(--cw-hsform-placeholder-color);
    opacity: 1;
}

.cw-hsform .cw-hsform__input:focus,
.cw-hsform .cw-hsform__select:focus,
.cw-hsform .cw-hsform__textarea:focus {
    outline: none;
    border-color: var(--cw-hsform-input-border-color-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cw-hsform-input-border-color-focus) 18%, transparent);
}

.cw-hsform .cw-hsform__textarea {
    resize: vertical;
}

/* ── Keuzelijst ───────────────────────────────────────────────────────────
   Het eigen pijltje van de browser staat uit; het chevron hieronder ligt er
   los overheen en vangt geen klikken op. */
.cw-hsform__select-wrap {
    position: relative;
    display: block;
}

.cw-hsform .cw-hsform__select {
    -webkit-appearance: none;
    appearance: none;
    padding-inline-end: 2.75rem;
}

/* Zolang de lege beginoptie geselecteerd is, leest de keuzelijst als een
   placeholder in plaats van als een ingevulde waarde. */
.cw-hsform .cw-hsform__select:has(option[value=""]:checked) {
    color: var(--cw-hsform-placeholder-color);
}

.cw-hsform__select-icon {
    position: absolute;
    inset-inline-end: 1rem;
    top: 50%;
    width: .75rem;
    height: .5rem;
    transform: translateY(-50%);
    color: var(--cw-hsform-input-color);
    pointer-events: none;
}

/* ── Aanvinkvakje ─────────────────────────────────────────────────────── */
.cw-hsform__checkbox {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
}

.cw-hsform .cw-hsform__checkbox-input {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    /* Zodat het vakje uitlijnt met de eerste regel tekst ernaast. */
    margin: .1875rem 0 0;
    accent-color: var(--cw-hsform-submit-bg);
}

.cw-hsform .cw-hsform__checkbox-label {
    display: block;
    color: var(--cw-hsform-label-color);
    line-height: 1.5;
    vertical-align: baseline;
}

.cw-hsform .cw-hsform__consent-text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* ── Foutmelding onder een veld ───────────────────────────────────────── */
.cw-hsform .cw-hsform__error {
    margin: 0;
}

.cw-hsform__error {
    color: var(--cw-hsform-error-color);
    font-family: Inter, sans-serif;
    font-size: .8125rem;
    line-height: 1.5;
}

.cw-hsform .cw-hsform__field--invalid .cw-hsform__input,
.cw-hsform .cw-hsform__field--invalid .cw-hsform__select,
.cw-hsform .cw-hsform__field--invalid .cw-hsform__textarea {
    border-color: var(--cw-hsform-error-color);
}

/* ── Verzendknop ──────────────────────────────────────────────────────────
   Twee klassen: de reset geeft [type=submit] een eigen rand, kleur en padding. */
.cw-hsform .cw-hsform__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    align-self: var(--cw-hsform-submit-align);
    width: var(--cw-hsform-submit-width);
    margin: var(--cw-hsform-submit-gap) 0 0;
    padding: var(--cw-hsform-submit-padding);
    box-sizing: border-box;
    color: var(--cw-hsform-submit-color);
    background-color: var(--cw-hsform-submit-bg);
    border: none;
    border-radius: var(--cw-hsform-submit-radius);
    cursor: pointer;
    white-space: normal;
    transition: background-color .15s ease, color .15s ease;
}

.cw-hsform__submit {
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

.cw-hsform .cw-hsform__submit:hover,
.cw-hsform .cw-hsform__submit:focus-visible {
    color: var(--cw-hsform-submit-color-hover);
    background-color: var(--cw-hsform-submit-bg-hover);
}

.cw-hsform .cw-hsform__submit:disabled {
    cursor: progress;
    opacity: .7;
}

.cw-hsform__submit-icon {
    flex: 0 0 auto;
    width: .75rem;
    height: .75rem;
}

/* ── Melding onder het formulier ──────────────────────────────────────── */
.cw-hsform .cw-hsform__message {
    margin: var(--cw-hsform-submit-gap) 0 0;
}

.cw-hsform__message {
    color: var(--cw-hsform-message-color);
    font-family: Inter, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}

.cw-hsform__message[hidden] {
    display: none;
}

.cw-hsform__message--error {
    color: var(--cw-hsform-message-error-color);
}

/* De melding krijgt focus zodra hij verschijnt, zodat een schermlezer hem
   voorleest. Dat mag geen zwarte rand opleveren voor wie met de muis werkt. */
.cw-hsform__message:focus {
    outline: none;
}

.cw-hsform__message:focus-visible {
    outline: 2px solid var(--cw-hsform-input-border-color-focus);
    outline-offset: 4px;
}

/* ── Na een geslaagde inzending ───────────────────────────────────────────
   De velden en de knop maken plaats voor de bevestiging: er valt niets meer
   in te vullen, en de melding komt op de plek waar de bezoeker net bezig was. */
.cw-hsform--done .cw-hsform__fields,
.cw-hsform--done .cw-hsform__submit {
    display: none;
}

.cw-hsform.cw-hsform--done .cw-hsform__message {
    margin-top: 0;
}

.cw-hsform--done .cw-hsform__notice:not(.cw-hsform__notice--keep) {
    display: none;
}

/* ── Notice ───────────────────────────────────────────────────────────── */
.cw-hsform__notice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cw-hsform-notice-link-gap);
    padding: var(--cw-hsform-notice-padding);
    box-sizing: border-box;
    color: var(--cw-hsform-notice-color);
    background-color: var(--cw-hsform-notice-bg);
    border-inline-start: var(--cw-hsform-notice-accent-width) solid var(--cw-hsform-notice-accent-color);
    border-radius: var(--cw-hsform-notice-radius);
}

.cw-hsform .cw-hsform__notice-text {
    margin: 0;
}

.cw-hsform__notice,
.cw-hsform__notice-link {
    font-family: Inter, sans-serif;
    font-size: .9375rem;
    line-height: 1.5;
}

.cw-hsform__notice-link {
    display: inline-flex;
    align-items: center;
    gap: var(--cw-hsform-notice-icon-gap);
}

/* Drie klassen: de reset van hello-elementor pakt `a:not([href]):not([tabindex])`
   met 0,2,1 en wint anders van de kleur hieronder. Alleen een echte link krijgt
   deze opmaak: zonder URL blijft er een <span> over, en die hoort niet als link
   te lezen. */
.cw-hsform .cw-hsform__notice a.cw-hsform__notice-link {
    color: var(--cw-hsform-notice-link-color);
    text-decoration: underline;
    text-underline-offset: .25em;
    transition: color .15s ease;
}

.cw-hsform .cw-hsform__notice a.cw-hsform__notice-link:hover,
.cw-hsform .cw-hsform__notice a.cw-hsform__notice-link:focus-visible {
    color: var(--cw-hsform-notice-link-color-hover);
}

.cw-hsform__notice-icon {
    flex: 0 0 auto;
    width: .875rem;
    height: .75rem;
}

/* ── Redactionele melding (alleen zichtbaar in de Elementor-editor) ────── */
p.cw-hsform__editor-notice {
    width: 100%;
    margin: 0;
    padding: 1rem 1.25rem;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, .75);
    border: 1px dashed rgba(16, 30, 52, .3);
    border-radius: .5rem;
    color: #3C4759;
    font-family: Inter, sans-serif;
    font-size: .875rem;
    text-align: center;
}

/* ── Smalle kaart ─────────────────────────────────────────────────────────
   Op de container, niet op het venster: het gaat om de ruimte die de kaart
   zelf heeft. */
@container cw-hsform (max-width: 30rem) {
    .cw-hsform__field--half {
        flex-basis: 100%;
    }
}