/**
 * 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 ────────────────────────────────── */
.wpcf7-response-output { display: none !important; }