/* okitoki-v4 — forms: Contact Form 7 output in the facelift style.
 * Hybrid agreed on 2026-10-01: our compact form (one-line fields, short textarea, real
 * consent checkboxes) with the mock-up's bordered inputs and focus ring. Styled by CF7's
 * own output markup inside `.v-form-host`, never by classes baked into form bodies — the
 * 24 CF7 forms in the DB stay untouched. Scope stays under .v-form-host so the landing
 * (own kit) and the contacts page (own CSS) are not affected. */

.v-form-host .wpcf7-form { margin: 0; }
.v-form-host .wpcf7-form p { margin: 0 0 var(--v-space-sm); }
.v-form-host label { display: block; font-size: var(--v-font-size-sm); font-weight: var(--v-font-weight-semibold); }
.v-form-host .wpcf7-form-control-wrap { display: block; margin-top: var(--v-space-xs); }

/* Text-like inputs, select, textarea: the mock-up's bordered 48px field. */
.v-form-host .wpcf7-form-control:is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea) {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0 var(--v-space-md);
    border: 1px solid rgb(var(--v-color-border-element));
    border-radius: var(--v-radius);
    background: rgb(var(--v-color-white));
    color: rgb(var(--v-color-text));
    font-size: var(--v-font-size-md);
    outline: none;
    transition: border-color var(--v-duration) var(--v-timing), box-shadow var(--v-duration) var(--v-timing);
}
.v-form-host textarea.wpcf7-form-control {
    min-height: 72px;
    height: 72px; /* CF7 [textarea] without rows defaults to 10 rows */
    padding-block: var(--v-space-sm);
    resize: vertical;
}
.v-form-host select.wpcf7-form-control {
    appearance: none;
    padding-right: var(--v-space-2xl);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7887' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-position: right var(--v-space-md) center;
    background-repeat: no-repeat;
    background-size: 16px;
}
.v-form-host .wpcf7-form-control::placeholder { color: rgb(var(--v-color-text-secondary)); }
.v-form-host .wpcf7-form-control:is(input, select, textarea):focus {
    border-color: rgb(var(--v-color-primary));
    box-shadow: var(--v-focus-ring);
}
.v-form-host .wpcf7-form-control.wpcf7-not-valid { border-color: rgb(var(--v-color-danger)); }
.v-form-host .wpcf7-not-valid-tip {
    margin: var(--v-space-xs) 0 0 var(--v-space-md);
    color: rgb(var(--v-color-danger));
    font-size: var(--v-font-size-xs);
}

/* Checkbox and radio (acceptance, consent, quick-case chips) — v4: missing in the mock-up. */
.v-form-host .wpcf7-list-item { display: block; margin: 0; }
.v-form-host .wpcf7-list-item > label {
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: start;
    gap: var(--v-space-sm);
    font-weight: var(--v-font-weight);
    cursor: pointer;
}
.v-form-host input[type="checkbox"],
.v-form-host input[type="radio"] {
    appearance: none;
    display: grid;
    place-content: center;
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    border: 1.5px solid rgb(var(--v-color-border-element));
    border-radius: var(--v-radius-sm);
    background: rgb(var(--v-color-white));
    cursor: pointer;
    transition: background-color var(--v-duration) var(--v-timing), border-color var(--v-duration) var(--v-timing);
}
.v-form-host input[type="radio"] { border-radius: 50%; }
.v-form-host input[type="checkbox"]::after {
    content: "";
    width: 5px;
    height: 9px;
    margin-top: -2px;
    border: 2px solid rgb(var(--v-color-white));
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: rotate(45deg) scale(.6);
    transition: opacity var(--v-duration) var(--v-timing), transform var(--v-duration) var(--v-timing);
}
.v-form-host input[type="radio"]::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(var(--v-color-white));
    opacity: 0;
}
.v-form-host input[type="checkbox"]:checked,
.v-form-host input[type="radio"]:checked {
    border-color: rgb(var(--v-color-primary));
    background: rgb(var(--v-color-primary));
}
.v-form-host input:is([type="checkbox"], [type="radio"]):checked::after { opacity: 1; transform: rotate(45deg) scale(1); }
.v-form-host input[type="radio"]:checked::after { transform: none; }
.v-form-host input:is([type="checkbox"], [type="radio"]):focus-visible {
    outline: none;
    box-shadow: var(--v-focus-ring);
}
.v-form-host input:is([type="checkbox"], [type="radio"]):disabled { opacity: .5; cursor: not-allowed; }
.v-form-host .wpcf7-list-item-label {
    color: rgb(var(--v-color-text-secondary));
    font-size: var(--v-font-size-sm);
    line-height: 1.5;
}
.v-form-host .wpcf7-list-item-label a { color: rgb(var(--v-color-primary)); text-decoration: underline; }

/* Submit: the facelift button (CF7 renders it as <button> via ot-site-core). */
.v-form-host .wpcf7-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin-top: var(--v-space-md);
    padding: 0 var(--v-space-lg);
    border: 0;
    border-radius: var(--v-radius-pill);
    background: rgb(var(--v-color-primary));
    color: rgb(var(--v-color-white));
    font-size: var(--v-font-size-sm);
    font-weight: var(--v-font-weight-semibold);
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background-color var(--v-duration) var(--v-timing);
}
.v-form-host .wpcf7-submit:hover { background: rgb(var(--v-color-accent)); }
.v-form-host .wpcf7-submit:focus-visible { outline: none; box-shadow: var(--v-focus-ring); }
.v-form-host .wpcf7-submit:disabled { opacity: .5; cursor: not-allowed; }
.v-form-host .wpcf7-spinner { display: block; margin: var(--v-space-sm) auto 0; }

/* Turnstile: the mock-up's 65px captcha slot, centred. */
.v-form-host .cf-turnstile {
    display: flex;
    justify-content: center;
    min-height: 65px;
    margin-top: var(--v-space-md);
}

.v-form-host .wpcf7-response-output {
    margin: var(--v-space-md) 0 0;
    padding: var(--v-space-sm) var(--v-space-md);
    border-radius: var(--v-radius);
    font-size: var(--v-font-size-sm);
}

/* intl-tel-input (ot-site-core) inside the bordered field. */
.v-form-host .iti { display: block; width: 100%; }
.v-form-host .iti input.wpcf7-form-control { padding-left: 90px; }