/**
 * forms-cf7.css
 *
 * Estilo global para TODOS os formulários Contact Form 7 do site.
 * Carregado em todas as páginas (inc/assets.php) — qualquer formulário
 * criado no plugin CF7 herda este estilo automaticamente.
 *
 * Réplica visual do antigo .ctt-form (ver assets/css/contato.css),
 * usando os mesmos tokens de assets/css/tokens.css.
 *
 * @package femipa-tema
 */

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

.wpcf7-form p {
    margin: 0;
}

.wpcf7-form label {
    display: block;
    font-family: var(--font-family-base);
    font-size: var(--font-size-body-small);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* Asterisco automático em campos obrigatórios — inserido no rótulo por
   forms-cf7.js, sem precisar editar o Form tab de cada formulário */
.wpcf7-required-mark {
    color: var(--color-red-600);
    font-weight: var(--font-weight-semibold);
}

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

.wpcf7-form .wpcf7-form-control {
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    font-weight: 400;
    color: var(--color-text-primary);
    background-color: var(--full-white);
    border: 1px solid var(--color-border-default);
    border-radius: var(--corner-s);
    padding: var(--spacing-s) var(--spacing-l);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
}

.wpcf7-form .wpcf7-form-control::placeholder {
    color: var(--color-text-secondary);
    opacity: 1;
}

.wpcf7-form .wpcf7-form-control:focus {
    outline: none;
    border-color: var(--color-primary-500);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 20%, transparent);
}

.wpcf7-form .wpcf7-form-control[aria-invalid="true"] {
    border-color: var(--color-red-600);
}

.wpcf7-form .wpcf7-form-control[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-red-600) 20%, transparent);
}

.wpcf7-form textarea.wpcf7-form-control {
    resize: vertical;
    min-height: 160px;
    line-height: 1.6;
}

.wpcf7-form .wpcf7-not-valid-tip {
    display: block;
    font-family: var(--font-family-base);
    font-size: var(--font-size-body-small);
    color: var(--color-red-600);
    margin-top: var(--spacing-xs);
}

.wpcf7-form input[type="submit"],
.wpcf7-form .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--full-white);
    background-color: var(--color-primary-500);
    border: none;
    border-radius: var(--corner-md);
    padding: var(--spacing-s) var(--spacing-xxl);
    margin-top: var(--spacing-xs);
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    width: auto;
}

.wpcf7-form input[type="submit"]:hover:not(:disabled),
.wpcf7-form .wpcf7-submit:hover:not(:disabled) {
    background-color: var(--color-primary-hover);
}

.wpcf7-form input[type="submit"]:disabled,
.wpcf7-form .wpcf7-submit:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.wpcf7-spinner {
    margin-inline-start: var(--spacing-s);
}

/* Feedback global (sucesso / erro) que o CF7 exibe após o envio */
.wpcf7-response-output {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-body) !important;
    padding: var(--spacing-s) var(--spacing-l) !important;
    border-radius: var(--corner-s) !important;
    margin: var(--spacing-l) 0 0 !important;
}

.wpcf7 form.sent .wpcf7-response-output {
    color: var(--color-green-700);
    background-color: var(--color-green-50);
    border-color: var(--color-green-600) !important;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
    color: var(--color-red-700);
    background-color: var(--color-red-50);
    border-color: var(--color-red-600) !important;
}