/* FORMS */

.ac-form.ac-info-card {
    padding: 30px 24px;
}

.ac-form p {
    margin-bottom: 15px;
}

.ac-form p:last-of-type {
    margin-top: 30px;
}


/* --- default state (global) --- */
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="url"],
select,
textarea {
    width: 100%;
    background-color: var(--ac-form-field-bg);
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 14px;
    color: var(--ac-font-primary);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

textarea {
    min-height: 190px;
    resize: vertical;
}

input[type="email"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
input[type="tel"]::placeholder,
input[type="text"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
    color: var(--ac-form-placeholder);
}


/* --- "with input" state (global) --- */
input[type="email"][placeholder]:not(:placeholder-shown):not(:focus),
input[type="number"][placeholder]:not(:placeholder-shown):not(:focus),
input[type="password"][placeholder]:not(:placeholder-shown):not(:focus),
input[type="search"][placeholder]:not(:placeholder-shown):not(:focus),
input[type="tel"][placeholder]:not(:placeholder-shown):not(:focus),
input[type="text"][placeholder]:not(:placeholder-shown):not(:focus),
input[type="url"][placeholder]:not(:placeholder-shown):not(:focus),
textarea[placeholder]:not(:placeholder-shown):not(:focus) {
    background-color: var(--ac-form-field-bg-filled);
}


/* --- focus / active state (global) --- */
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    background-color: var(--ac-form-field-bg-focus);
    border-color: var(--ac-color-accent);
    outline: 1px solid transparent; /* hides the browser outline but stays visible in forced-colors mode */
}


/* --- error state --- */
input.wpcf7-not-valid,
select.wpcf7-not-valid,
textarea.wpcf7-not-valid {
    border-color: var(--ac-form-error);
}

/* focus should always win over the error border */
select.wpcf7-not-valid:focus,
textarea.wpcf7-not-valid:focus {
    border-color: var(--ac-color-accent);
}


/* --- error messages --- */
.wpcf7-form-control-wrap {
    position: relative;
    display: block;
    margin-bottom: 28px;
}

.wpcf7-not-valid-tip {
    position: absolute;
    margin-top: 2px;
    color: var(--ac-form-error);
    padding-inline: 15px;
    font-size: 13px;
    line-height: 1.4;
    animation: ac-fade-in 0.25s ease; /* nothing to transition on the way out */
}

@keyframes ac-fade-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- spinner --- */
.wpcf7-spinner {
    background-color: var(--ac-color-accent);
    opacity: 1;
}

.wpcf7-spinner::before {
    background-color: var(--ac-color-primary);
}

/* align spinner */
.wpcf7-form p:has(.wpcf7-submit) {
    display: flex;
    align-items: center;
}


/* --- form response --- */
.wpcf7 form .wpcf7-response-output {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 10px 0 0 0;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
    /* transition */
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* override CF7 core CSS display:none for these statuses */
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
    display: block;
}

/* show all other statuses */
.wpcf7 form:not(.init):not(.resetting):not(.submitting) .wpcf7-response-output {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: unset;
}

.ac-form .wpcf7 form.invalid .wpcf7-response-output,
.ac-form .wpcf7 form.unaccepted .wpcf7-response-output,
.ac-form .wpcf7 form.failed .wpcf7-response-output,
.ac-form .wpcf7 form.aborted .wpcf7-response-output {
    border-color: var(--ac-form-error);
}

.ac-form .wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--ac-color-accent);
}


/* --- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    :is(
        input[type="email"],
        input[type="number"],
        input[type="password"],
        input[type="search"],
        input[type="tel"],
        input[type="text"],
        input[type="url"],
        select,
        textarea
    ),
    .wpcf7 form .wpcf7-response-output {
        transition: none;
    }

    .wpcf7-not-valid-tip {
        animation: none;
    }
}