/*
 * Contact Form 7 — pill-shaped fields, response banners and a submit
 * fallback, styled to match the site's button system (assets/css/buttons.css).
 *
 * Selectors target only the classes CF7 core always renders
 * (wpcf7-text/-email/-textarea/-select, wpcf7-response-output, and the
 * form status classes it toggles — .sent/.invalid/.failed/...), so this
 * works with any CF7 form pasted into the block editor with no extra
 * markup required.
 *
 * The submit button gets full parity with .btn/.btn-label/.btn-arrow (pill
 * + arrow circle + hover rotation) via assets/js/cf7-submit.js, which wraps
 * every .wpcf7-submit with that markup at runtime — no special markup
 * needed inside the CF7 form body. The .wpcf7-submit:not(.btn-label) rule
 * below is only the pre-JS/no-JS fallback, so the button is never left
 * fully unstyled while cf7-submit.js hasn't run yet.
 */

.wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.wpcf7-form p {
    margin: 0;
}

.wpcf7-form-control-wrap {
    display: block;
    margin-top: var(--spacing-xs);
    width: 100%;
}

/* ─────────────────────────────────────────────────────────
 * Fields — pill inputs/select, large-radius textarea.
 * ───────────────────────────────────────────────────────── */

.wpcf7-date,
.wpcf7-email,
.wpcf7-number,
.wpcf7-select,
.wpcf7-tel,
.wpcf7-text,
.wpcf7-textarea,
.wpcf7-url {
    background-color: var(--color-quartz-20);
    border: 1px solid var(--color-quartz-60);
    border-radius: 9999px;
    color: var(--color-navy-80);
    font-family: var(--font-primary);
    font-size: 14px;
    height: 44px;
    line-height: 18px;
    padding: 0 28px;
    transition: border-color 200ms ease;
    width: 100%;
}

.wpcf7-select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("../icons/chevron-down.svg");
    background-position: right 28px center;
    background-repeat: no-repeat;
    background-size: 12px;
    padding-right: 56px;
}

.wpcf7-textarea {
    border-radius: 2rem;
    height: auto;
    min-height: 160px;
    padding: 16px 28px;
    resize: none;
}

.wpcf7-date::placeholder,
.wpcf7-email::placeholder,
.wpcf7-number::placeholder,
.wpcf7-tel::placeholder,
.wpcf7-text::placeholder,
.wpcf7-textarea::placeholder,
.wpcf7-url::placeholder {
    color: var(--color-quartz-80);
}

.wpcf7-date:focus-visible,
.wpcf7-email:focus-visible,
.wpcf7-number:focus-visible,
.wpcf7-select:focus-visible,
.wpcf7-tel:focus-visible,
.wpcf7-text:focus-visible,
.wpcf7-textarea:focus-visible,
.wpcf7-url:focus-visible {
    border-color: var(--color-blue-50);
    outline: 2px solid var(--color-blue-50);
    outline-offset: 0;
}

/* ─────────────────────────────────────────────────────────
 * Validation — invalid field border + inline tip text.
 * ───────────────────────────────────────────────────────── */

.wpcf7-not-valid {
    border-color: var(--color-error);
}

.wpcf7-not-valid-tip {
    color: var(--color-error);
    display: block;
    font-size: 12px;
    margin-top: 4px;
    padding: 0 28px;
}

/* ─────────────────────────────────────────────────────────
 * Submit fallback — cf7-submit.js adds .btn-label to every
 * .wpcf7-submit at runtime, so this only paints briefly before that
 * script runs (or if JS is unavailable).
 * ───────────────────────────────────────────────────────── */

.wpcf7-submit:not(.btn-label) {
    background-color: var(--color-blue-50);
    border: 0;
    border-radius: 9999px;
    color: var(--color-quartz-20);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    height: 44px;
    letter-spacing: 0;
    padding: 0 1.25rem;
    text-transform: uppercase;
    transition: opacity 200ms ease;
}

.wpcf7-submit:not(.btn-label):disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.wpcf7-submit:not(.btn-label):hover {
    opacity: 0.85;
}

/* ─────────────────────────────────────────────────────────
 * Response banner — solid pill, icon via mask-image (same technique
 * as .btn-arrow::before in buttons.css). Hidden by default; CF7 toggles
 * a single status class on .wpcf7-form (init/sent/invalid/failed/...),
 * so hiding/showing here doesn't depend on CF7 core's own CSS load order.
 * ───────────────────────────────────────────────────────── */

.wpcf7-response-output {
    align-items: center;
    border-radius: 9999px;
    display: none;
    font-size: 14px;
    font-weight: 500;
    gap: var(--spacing-xs);
    line-height: 18px;
    margin: 0;
    padding: 13px 28px;
}

.wpcf7-response-output::before {
    background-color: currentColor;
    content: "";
    flex-shrink: 0;
    height: 16px;
    width: 16px;
}

.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output,
.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
    display: flex;
}

.wpcf7-form.sent .wpcf7-response-output {
    background-color: var(--color-success);
    color: var(--color-quartz-20);
}

.wpcf7-form.sent .wpcf7-response-output::before {
    -webkit-mask-image: url("../icons/check.svg");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: url("../icons/check.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}

.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
    background-color: var(--color-error);
    color: var(--color-quartz-20);
}

.wpcf7-form.aborted .wpcf7-response-output::before,
.wpcf7-form.failed .wpcf7-response-output::before,
.wpcf7-form.invalid .wpcf7-response-output::before,
.wpcf7-form.payment-required .wpcf7-response-output::before,
.wpcf7-form.spam .wpcf7-response-output::before,
.wpcf7-form.unaccepted .wpcf7-response-output::before {
    -webkit-mask-image: url("../icons/alert.svg");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: url("../icons/alert.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
}