/**
 * Contact Form 7 styling — Websiteplan Theme
 *
 * Conditioneel geladen wanneer CF7 actief is.
 * Gebruikt de CSS custom properties uit de pagina-CSS.
 *
 * @since 1.7.4
 */

.wpcf7 {
    max-width: 100%;
}

.wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wpcf7-form p {
    margin: 0;
}

.wpcf7-form label {
    font-family: var(--font-heading, 'Ubuntu', sans-serif);
    font-weight: 500;
    font-size: 15px;
    color: var(--color-text-primary, #000);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wpcf7-form-control {
    font-family: var(--font-body, 'Assistant', sans-serif);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text-primary, #000);
    background: var(--color-bg-light, #fff);
    border: 1px solid #d0d0d0;
    border-radius: 8px;
    padding: 12px 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.wpcf7-form-control:focus {
    border-color: var(--color-primary, #066940);
    box-shadow: 0 0 0 3px rgba(6, 105, 64, 0.12);
}

.wpcf7-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%23333'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.wpcf7-textarea {
    min-height: 140px;
    resize: vertical;
}

.wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-ui, 'Poppins', sans-serif);
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text-on-primary, #fff);
    background: var(--color-primary, #066940);
    padding: 16px 36px;
    border-radius: var(--border-radius-btn, 10px);
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    align-self: flex-start;
    width: auto;
}

.wpcf7-submit:hover {
    background: var(--color-primary-hover, #055533);
}

.wpcf7-response-output {
    border: none !important;
    padding: 16px 20px !important;
    border-radius: 8px;
    font-family: var(--font-body, 'Assistant', sans-serif);
    font-size: 15px;
    margin: 10px 0 0 !important;
}

.wpcf7 form.sent .wpcf7-response-output {
    background: var(--color-secondary, #D8F3EA);
    color: var(--color-primary, #066940);
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
    background: #fef2f2;
    color: #991b1b;
}

/* Acceptance checkbox (AVG) */
.wpcf7-form p:has(.wpcf7-acceptance) {
    margin-top: 4px;
}

.wpcf7-form p:has(.wpcf7-acceptance),
.wpcf7-form p:has(.wpcf7-acceptance) .wpcf7-form-control-wrap {
    border: none;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

.wpcf7-form-control.wpcf7-acceptance {
    border: none;
    padding: 0;
    width: auto;
    background: none;
    border-radius: 0;
}

.wpcf7-form p:has(.wpcf7-submit) {
    margin-top: 12px;
}

.wpcf7-acceptance .wpcf7-list-item {
    margin-left: 0;
}

.wpcf7-acceptance .wpcf7-list-item label {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    font-family: var(--font-body, 'Assistant', sans-serif);
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    cursor: pointer;
}

.wpcf7-acceptance input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 1px;
    accent-color: var(--color-primary, #066940);
    cursor: pointer;
    border: 1px solid #d0d0d0;
    padding: 0;
    border-radius: 4px;
}

.wpcf7-not-valid-tip {
    font-family: var(--font-body, 'Assistant', sans-serif);
    font-size: 13px;
    color: #dc2626;
    margin-top: 4px;
}

.wpcf7-spinner {
    display: none;
}

/* Responsive */
@media (max-width: 767px) {
    .wpcf7-submit {
        width: 100%;
        justify-content: center;
    }
}