/**
 * Webweek CF7 Addons — Frontend UX Styles
 */

/* ── Submit button: loading state ──────────────────────────────────────────── */
.wpcf7 [type="submit"] {
    position: relative;
    transition: opacity .2s, background .2s;
    cursor: pointer;
}
.wpcf7 [type="submit"].ww-btn-loading {
    opacity: .75;
    cursor: not-allowed;
    pointer-events: none;
}
.wpcf7 [type="submit"].ww-btn-loading::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 8px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: ww-spin .7s linear infinite;
    vertical-align: middle;
    opacity: .8;
}
@keyframes ww-spin { to { transform: rotate(360deg); } }

/* ── Alert: succes & error — ONDER het formulier ───────────────────────────── */
.ww-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 16px;
    margin-bottom: 0;
    animation: ww-alert-in .3s ease;
    border: 1px solid transparent;
    transition: opacity .4s ease, transform .4s ease;
}
.ww-alert-hiding { opacity: 0; transform: translateY(6px); pointer-events: none; }
@keyframes ww-alert-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ww-alert-success { background: #f0faf3; border-color: #b7dfc5; color: #1e6b3c; }
.ww-alert-error   { background: #fff5f5; border-color: #f5c0c0; color: #b03030; }
.ww-alert-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }

/* ── Veld-validatie fouten ──────────────────────────────────────────────────── */
.wpcf7 .wpcf7-not-valid,
.wpcf7 input.ww-field-invalid,
.wpcf7 textarea.ww-field-invalid,
.wpcf7 select.ww-field-invalid {
    border-color: #e05555 !important;
    background-color: #fff8f8 !important;
    box-shadow: 0 0 0 3px rgba(220, 80, 80, .12) !important;
    outline: none !important;
}
.wpcf7 .ww-field-shake { animation: ww-shake .45s ease; }
@keyframes ww-shake {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-5px); }
    40%  { transform: translateX(5px); }
    60%  { transform: translateX(-4px); }
    80%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

/* ── Foutmelding BOVEN input via flexbox column-reverse ─────────────────────── */
.wpcf7 .wpcf7-form-control-wrap {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Inputs en textareas: volle breedte binnen de wrap */
.wpcf7 .wpcf7-form-control-wrap input:not([type="radio"]):not([type="checkbox"]),
.wpcf7 .wpcf7-form-control-wrap textarea,
.wpcf7 .wpcf7-form-control-wrap select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* ── agree_terms wrap: inline zodat checkbox naast label staat ── */
.agree_terms .wpcf7-form-control-wrap {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
}

.wpcf7 .wpcf7-not-valid-tip,
.wpcf7 .ww-field-error-tip {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px !important;
    margin-top: 0 !important;
    padding: 4px 10px 4px 8px !important;
    background: #fff2f2 !important;
    border: 1px solid #f5c0c0 !important;
    border-radius: 5px !important;
    color: #b03030 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    width: fit-content;
    max-width: 100%;
    align-self: flex-start;
}
.wpcf7 .wpcf7-not-valid-tip::before,
.wpcf7 .ww-field-error-tip::before {
    content: '';
    flex-shrink: 0;
    display: inline-block;
    width: 13px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23b03030' stroke-width='1.5'/%3E%3Cpath d='M10 6v5M10 13.5v.5' stroke='%23b03030' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ── Captcha: geen border/achtergrond op radio-wrapper bij validatiefout ─────── */
.wpcf7-form-control-wrap.kc_captcha.cf7ic-toggle .wpcf7-form-control.wpcf7-radio.wpcf7-not-valid,
.wpcf7-form-control-wrap.kc_captcha.cf7ic-toggle .wpcf7-form-control.wpcf7-radio.ww-field-invalid {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Captcha stijl ─────────────────────────────────────────────────────────── */
.captcha-image { text-align: left; border: 0; padding: 0; }
.captcha-image .cf7ic_instructions { margin-bottom: 15px; }
.captcha-image .cf7ic_instructions span { text-decoration: underline; }

/* ── CF7 standaard response output verbergen ────────────────────────────────── */
/* CF7 response output ─────────────────────────────────────────────────────── */
/* Standaard: geen styling, neemt geen ruimte in, maar WEL zichtbaar voor CF7 */
.wpcf7-response-output {
    display: block !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* JS voegt .ww-response-active toe als CF7 een status zet — zie cf7-ux.js */
.wpcf7-response-output.ww-response-active {
    font-size: 14px !important;
    line-height: 1.6 !important;
    height: auto !important;
    overflow: visible !important;
    margin: 12px 0 0 !important;
    padding: 14px 18px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
}

.wpcf7-response-output.ww-response-active.ww-response-success {
    background: #f0faf3 !important;
    border-color: #b7dfc5 !important;
    color: #1e6b3c !important;
}

.wpcf7-response-output.ww-response-active.ww-response-error {
    background: #fff5f5 !important;
    border-color: #f5c0c0 !important;
    color: #b03030 !important;
}


/* Standaard verborgen — maar display:block zodat CF7 AJAX actief blijft */
.wpcf7-response-output {
    display: block !important;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* Toon zodra de form een status heeft */
.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
    clip: auto !important;
    clip-path: none !important;
    height: auto !important;
    overflow: visible !important;
    position: static !important;
    white-space: normal !important;
    width: auto !important;
    margin: 12px 0 0 !important;
    padding: 14px 18px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    border: 1px solid transparent !important;
}

/* Succes */
.wpcf7-form.sent .wpcf7-response-output {
    background: #f0faf3 !important;
    border-color: #b7dfc5 !important;
    color: #1e6b3c !important;
}

/* Fout */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
    background: #fff5f5 !important;
    border-color: #f5c0c0 !important;
    color: #b03030 !important;
}


/* Standaard: onzichtbaar maar altijd in de DOM (CF7 heeft dit nodig) */
.wpcf7-response-output {
    display: block !important;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Toon zodra form een status-klasse heeft (CF7 zet deze op <form> na AJAX) */
.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
    visibility: visible;
    height: auto;
    margin: 12px 0 0 !important;
    padding: 14px 18px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    border: 1px solid transparent !important;
}

/* Succes */
.wpcf7-form.sent .wpcf7-response-output {
    background: #f0faf3 !important;
    border-color: #b7dfc5 !important;
    color: #1e6b3c !important;
}

/* Fout */
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
    background: #fff5f5 !important;
    border-color: #f5c0c0 !important;
    color: #b03030 !important;
}


/* Altijd display:block — CF7 heeft dit nodig voor AJAX detectie */
.wpcf7-response-output {
    display: block !important;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    font-size: 0 !important;
    transition: max-height .25s ease, opacity .25s ease, margin .25s ease, padding .25s ease, font-size .25s ease;
}

/* Toon zodra de form een status-klasse heeft (CF7 zet die op <form>) */
.wpcf7-form.sent        .wpcf7-response-output,
.wpcf7-form.invalid     .wpcf7-response-output,
.wpcf7-form.failed      .wpcf7-response-output,
.wpcf7-form.spam        .wpcf7-response-output,
.wpcf7-form.unaccepted  .wpcf7-response-output {
    max-height: 200px;
    opacity: 1;
    font-size: 14px !important;
    margin: 16px 0 0 !important;
    padding: 14px 18px !important;
    border-radius: 8px !important;
    line-height: 1.6 !important;
    border: 1px solid transparent !important;
}

/* Succes */
.wpcf7-form.sent .wpcf7-response-output {
    background: #f0faf3 !important;
    border-color: #b7dfc5 !important;
    color: #1e6b3c !important;
}

/* Fout / invalid / spam */
.wpcf7-form.invalid    .wpcf7-response-output,
.wpcf7-form.failed     .wpcf7-response-output,
.wpcf7-form.spam       .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
    background: #fff5f5 !important;
    border-color: #f5c0c0 !important;
    color: #b03030 !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FONT FIX: inputs en selects erven de body font
   ══════════════════════════════════════════════════════════════════════════════ */
.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wpcf7 select,
.wpcf7 textarea {
    font-family: var(--bodyFont, inherit) !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   FLOATING LABELS
   Activeer via: [contact-form-7 ... html_class="floating-labels"]
   Of om een individuele wrapper: <div class="floating-labels">...</div>
   ══════════════════════════════════════════════════════════════════════════════

   HTML-structuur die CF7 genereert met onze wrapper:
   .wpcf7.floating-labels
     .label           ← jouw <div class="label">Naam*</div>
       (tekst wordt gebruikt als floating label)
     .wpcf7-form-control-wrap
       input / textarea / select

   De .label div wordt omgezet naar een <label> die over het input zweeft.
*/

/* ── Container ── */
.wpcf7.floating-labels .wpcf7-form-control-wrap,
.floating-labels .wpcf7-form-control-wrap {
    position: relative;
    display: block;
    width: 100%;
    margin-top: 0;
}

/* ── Input/Textarea/Select basisstijl in floating mode ── */
.wpcf7.floating-labels input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.wpcf7.floating-labels textarea,
.wpcf7.floating-labels select,
.floating-labels input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.floating-labels textarea,
.floating-labels select {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 14px 8px !important; /* extra top padding voor label ruimte */
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.4;
    background: #fff;
    transition: border-color .2s;
    outline: none;
}

.wpcf7.floating-labels input:focus:not([type="submit"]),
.wpcf7.floating-labels textarea:focus,
.wpcf7.floating-labels select:focus,
.floating-labels input:focus:not([type="submit"]),
.floating-labels textarea:focus,
.floating-labels select:focus {
    border-color: #6b7280;
}

/* ── Het zwevende label ── */
.wpcf7.floating-labels .ww-float-label,
.floating-labels .ww-float-label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: #9ca3af;
    pointer-events: none;
    transition: top .18s ease, font-size .18s ease, color .18s ease, transform .18s ease;
    white-space: nowrap;
    line-height: 1;
    z-index: 1;
}

/* Textarea: label begint bovenaan */
.wpcf7.floating-labels .wpcf7-form-control-wrap:has(textarea) .ww-float-label,
.floating-labels .wpcf7-form-control-wrap:has(textarea) .ww-float-label {
    top: 18px;
    transform: none;
}

/* ── Label omhoog als input focus of gevuld ── */
.wpcf7.floating-labels .wpcf7-form-control-wrap.ww-fl-active .ww-float-label,
.wpcf7.floating-labels .wpcf7-form-control-wrap.ww-fl-filled .ww-float-label,
.floating-labels .wpcf7-form-control-wrap.ww-fl-active .ww-float-label,
.floating-labels .wpcf7-form-control-wrap.ww-fl-filled .ww-float-label {
    top: 7px;
    transform: none;
    font-size: 11px;
    color: #6b7280;
}

/* ── Verberg de originele placeholder als label zweeft ── */
.wpcf7.floating-labels input::placeholder,
.wpcf7.floating-labels textarea::placeholder,
.floating-labels input::placeholder,
.floating-labels textarea::placeholder {
    color: transparent;
    transition: color .18s;
}

/* Toon placeholder als input actief is */
.wpcf7.floating-labels .wpcf7-form-control-wrap.ww-fl-active input::placeholder,
.wpcf7.floating-labels .wpcf7-form-control-wrap.ww-fl-active textarea::placeholder,
.floating-labels .wpcf7-form-control-wrap.ww-fl-active input::placeholder,
.floating-labels .wpcf7-form-control-wrap.ww-fl-active textarea::placeholder {
    color: #c4c9d4;
}

/* ── Select: toon altijd de geselecteerde waarde als label ── */
.wpcf7.floating-labels .wpcf7-form-control-wrap:has(select) .ww-float-label,
.floating-labels .wpcf7-form-control-wrap:has(select) .ww-float-label {
    top: 7px;
    transform: none;
    font-size: 11px;
    color: #6b7280;
}

/* ── Label boven uitgevinkt .label div verbergen (we gebruiken eigen label) ── */
.wpcf7.floating-labels .label,
.floating-labels .label {
    display: none !important;
}

/* ── Validatie-fout stijl in floating mode ── */
.wpcf7.floating-labels .wpcf7-form-control-wrap.ww-fl-error input,
.wpcf7.floating-labels .wpcf7-form-control-wrap.ww-fl-error textarea,
.floating-labels .wpcf7-form-control-wrap.ww-fl-error input,
.floating-labels .wpcf7-form-control-wrap.ww-fl-error textarea {
    border-color: #e05555 !important;
}

.wpcf7.floating-labels .wpcf7-form-control-wrap.ww-fl-error .ww-float-label,
.floating-labels .wpcf7-form-control-wrap.ww-fl-error .ww-float-label {
    color: #b03030;
}