/* ============================= */
/* Contact Form Mobile           */
/* ============================= */

@media (max-width: 1024px) {
    .contact-form {
        gap: 6px;
    }

    .contact-form-row {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .contact-form-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
    }

    .contact-submit-btn {
        align-self: flex-end;
        font-size: 14px;
    }

    .form-group {
        gap: 0;
    }

    .form-group input,
    .form-group textarea {
        font-size: 16px;
    }

    .form-group input {
        height: 56px;
        padding: 0 24px;
    }

    .form-group textarea {
        min-height: 144px;
        padding: 20px 24px;
    }

    .form-group label {
        position: absolute;
        top: 28px;
        left: 0;
        z-index: 1;

        padding-left: 24px;

        color: var(--color-secondary);
        font-size: 16px;
        opacity: 0.4;

        transform: translateY(-50%);
        pointer-events: none;
    }

    .form-group:has(textarea) label {
        top: 20px;
        transform: none;
    }

    .form-error {
        position: static;
        display: block;
        visibility: hidden;

        margin: 4px 0 0;
        padding-left: 24px;

        color: var(--color-error);
        font-size: 14px;
        line-height: 120%;

        transform: none;
        opacity: 1;
    }

    .form-group.form-group--error .form-error {
        visibility: visible;
    }

    .form-group.form-group--error:has(input:valid) .form-error,
    .form-group.form-group--error:has(textarea:valid) .form-error {
        visibility: hidden;
    }

    .form-group::after {
        display: none;
    }

    .privacy-field {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .privacy-error {
        margin: 0;
        padding-left: 34px;

        color: var(--color-error);
        font-family: var(--font-body);
        font-weight: var(--fw-regular);
        font-size: 16px;
        line-height: 120%;
    }

    .privacy-check.privacy-check--error+.privacy-error {
        display: block;
    }
}


/* ============================= */
/* Contact Form Tablet           */
/* ============================= */

@media (min-width: 768px) and (max-width: 1024px) {
    .contact-submit-btn {
        min-width: 140px;
        font-size: 18px;
    }

    .form-group input,
    .form-group textarea,
    .form-group label {
        font-size: 20px;
    }

    .privacy-check,
    .privacy-error {
        font-size: 18px;
    }

    .form-error {
        font-size: 16px;
    }
}