/* =================================================================== FORMS (global) =================================================================== */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp15);

    & .form-grid__full { grid-column: 1 / -1; }

    @media (max-width: 575.98px) {
        grid-template-columns: 1fr;
    }
}

.form-field {
    width: 100%;
    min-height: 50px;
    padding: var(--sp12) var(--sp15);
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-btn);
    font-family: var(--font-google);
    font-size: var(--f14);
    color: var(--ink);
    transition: var(--transition);

    &::placeholder { color: var(--body-text); }
    &:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px var(--surface-light); }
}

textarea.form-field { min-height: 130px; resize: vertical; }

select.form-field {
    appearance: none;
    padding-right: var(--sp40);
    background: var(--white) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="black" stroke-width="1.5" stroke-linecap="round"/></svg>') no-repeat right var(--sp15) center / 10px 7px;
}

/* Input with the submit button sitting inside it (newsletter). */
.inline-form {
    position: relative;
    display: flex;

    & .form-field { padding-right: 130px; }

    & .btn-solid {
        position: absolute; inset-block: var(--sp5); right: var(--sp5);
        padding-block: 0;
    }
}

/* File input (attachments) */
input[type="file"].form-field {
    padding-block: var(--sp12);
    cursor: pointer;

    &::file-selector-button {
        margin-right: var(--sp12);
        padding: var(--sp5) var(--sp12);
        background: var(--surface-light);
        border: 0;
        border-radius: var(--r-sm);
        font-family: var(--font-mona);
        color: var(--ink);
        cursor: pointer;
    }
}

/* Enquiry submit — status line injected by vendor.js after the submit button */
:root { --error: #D93F3F; }

.form-trap {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.form-status {
    grid-column: 1 / -1;
    padding: var(--sp12) var(--sp15);
    background: var(--surface-light);
    border-left: 3px solid var(--primary);
    border-radius: var(--r-sm);
    font-size: var(--f14);
    color: var(--ink);

    &:empty { display: none; }
    &.is-error { border-left-color: var(--error); color: var(--error); }
}

form[aria-busy="true"] [type="submit"] { opacity: .6; pointer-events: none; }