/*
 * Contactformulier (Contact Form 7 binnen de ElementsKit-widget)
 *
 * Waarom dit nodig is:
 * ElementsKit zet netjes width:100% op de invoervelden, maar Contact Form 7
 * wikkelt elk veld in <label> en <span class="wpcf7-form-control-wrap">.
 * Dat zijn inline-elementen, dus die krimpen mee met hun inhoud - waardoor
 * die 100% zich tegen een te smalle ouder afzet en het formulier smal blijft.
 * Hieronder worden die wrappers blok-elementen, zodat het formulier de volle
 * kolombreedte pakt, net als de header- en footerinhoud.
 *
 * WAAROM OP SOMMIGE PLEKKEN !important STAAT
 * De stylesheets van ElementsKit (common.css) en Element Pack (bdt-uikit.css)
 * worden door de widgets zelf ingeladen en belanden daardoor NA dit bestand
 * in de pagina. Bij gelijke specificiteit wint de laatste regel. Voor de
 * eigenschappen die daar ook worden gezet - met name de knopkleur - is
 * !important dus de enige manier om de huisstijl te laten winnen.
 */

.vdw-contactform .wpcf7-form,
.ekit-form .wpcf7-form {
    width: 100%;
}

/* CF7 wikkelt velden in <p>; die marge veroorzaakt ongelijke witruimte */
.vdw-contactform .wpcf7-form p {
    margin: 0;
}

/* de kern: label en veldwrapper blok maken zodat width:100% werkt */
.vdw-contactform .wpcf7-form label,
.vdw-contactform .wpcf7-form .wpcf7-form-control-wrap {
    display: block;
    width: 100%;
}

/* ------------------------------------------------------------------ *
 * Invoervelden
 * ------------------------------------------------------------------ */
.vdw-contactform .wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.vdw-contactform .wpcf7-form textarea,
.vdw-contactform .wpcf7-form select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid #d5d8da;
    border-radius: 3px;
    background-color: #FFFFFF;
    color: #302A2B;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.vdw-contactform .wpcf7-form input:not([type="submit"]):focus,
.vdw-contactform .wpcf7-form textarea:focus,
.vdw-contactform .wpcf7-form select:focus {
    border-color: #00AEEF;
    box-shadow: 0 0 0 3px rgba(0, 174, 239, .18);
    outline: none;
}

.vdw-contactform .wpcf7-form ::placeholder {
    color: #9aa1a6;
    opacity: 1;
}

/* regelafstand tussen de velden */
.vdw-contactform .vdw-form-row {
    margin-bottom: 16px;
}

.vdw-contactform .vdw-form-row label {
    font-weight: 600;
    margin-bottom: 6px;
}

/* ------------------------------------------------------------------ *
 * Verplicht-sterretje
 *
 * Het stond op een eigen regel omdat Contact Form 7 zijn invoer standaard
 * door een autop-filter haalt en overal <br /> tussenvoegt. Dat filter is
 * uitgezet in mu-plugins/01-vdw-form-security.php; display:inline hieronder
 * is het vangnet, mocht een plugin het filter later opnieuw aanzetten.
 * ------------------------------------------------------------------ */
.vdw-contactform .vdw-req {
    color: #00AEEF;
    display: inline;
    margin-left: 2px;
}

.vdw-contactform .wpcf7-form label > br,
.vdw-contactform .vdw-form-row > br {
    display: none;
}

/* ------------------------------------------------------------------ *
 * Links in en rond het formulier
 *
 * Hello Elementor zet in reset.css a{color:#c36} - roze. Dat sloeg door in
 * de toestemmingsregel ("privacybeleid"). De globale correctie staat in
 * header-fixes.css; hier nog een keer expliciet voor het formulier, zodat
 * het klopt ook als dit bestand los wordt gebruikt.
 * ------------------------------------------------------------------ */
.vdw-contactform a,
.vdw-contactform .wpcf7-form a {
    color: #00AEEF;
    text-decoration: underline;
}

.vdw-contactform a:hover,
.vdw-contactform a:focus-visible {
    color: #302A2B;
}

/* ------------------------------------------------------------------ *
 * Toestemmingsregel: checkbox naast de tekst, niet eronder
 * ------------------------------------------------------------------ */
.vdw-contactform .vdw-form-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0;
    font-size: .95em;
    line-height: 1.4;
}

.vdw-contactform .vdw-form-consent .wpcf7-form-control-wrap {
    display: inline-block;
    width: auto;
    flex: 0 0 auto;
}

.vdw-contactform .vdw-form-consent .wpcf7-list-item {
    margin: 0;
}

.vdw-contactform .vdw-form-consent input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: #00AEEF;
}

/* ------------------------------------------------------------------ *
 * Verstuurknop
 * ------------------------------------------------------------------ */
.vdw-contactform .wpcf7-form input[type="submit"],
.vdw-contactform .wpcf7-form .wpcf7-submit {
    background-color: #00AEEF !important;
    background-image: none !important;
    color: #FFFFFF !important;
    border: 2px solid #00AEEF !important;
    padding: 14px 32px !important;
    cursor: pointer;
    font-weight: 600;
    border-radius: 3px !important;
    width: auto;
    transition: background-color .2s ease, color .2s ease;
}

.vdw-contactform .wpcf7-form input[type="submit"]:hover,
.vdw-contactform .wpcf7-form input[type="submit"]:focus-visible,
.vdw-contactform .wpcf7-form .wpcf7-submit:hover,
.vdw-contactform .wpcf7-form .wpcf7-submit:focus-visible {
    background-color: transparent !important;
    color: #00AEEF !important;
}

/* validatie- en statusmeldingen leesbaar houden */
.vdw-contactform .wpcf7-not-valid-tip {
    color: #d63638;
    font-size: .9em;
    margin-top: 4px;
}

.vdw-contactform .wpcf7-form input.wpcf7-not-valid,
.vdw-contactform .wpcf7-form textarea.wpcf7-not-valid {
    border-color: #d63638;
}

.vdw-contactform .wpcf7-response-output {
    margin: 18px 0 0;
    padding: 12px 16px;
    border-width: 2px;
}

/* het honeypot-veld mag nooit zichtbaar of bereikbaar zijn */
.vdw-hp-wrap {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* op smalle schermen de kolom volledig benutten */
@media (max-width: 767px) {
    .vdw-contactform .wpcf7-form input:not([type="submit"]),
    .vdw-contactform .wpcf7-form textarea {
        font-size: 16px; /* voorkomt inzoomen op iOS */
    }

    .vdw-contactform .wpcf7-form input[type="submit"] {
        width: 100%;
    }
}