/* ================================ */
/* Contact form                     */
/* ================================ */

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 500px;
}

.contact-form__field {
    position: relative;
}

.contact-form input {
    width: 100%;
    padding: var(--space-3) 0;
    border: 0;
    border-block-end: 1px solid var(--color-border);
    background: transparent;
    font-size: var(--fs-base);
    color: var(--color-text);
    transition: border-color var(--transition-fast);
    border-radius: 0;
}
.contact-form input::placeholder {
    color: var(--color-text-muted);
}
.contact-form input:focus {
    border-block-end-color: var(--color-primary);
    outline: none;
}
.contact-form input:invalid:not(:placeholder-shown) {
    border-block-end-color: #c0392b;
}

.contact-form__honey {
    position: absolute;
    inset-inline-start: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form__submit {
    align-self: stretch;
    margin-block-start: var(--space-4);
    padding-block: var(--space-4);
    width: 100%;
    font-size: var(--fs-md);
}
.contact-form__submit[disabled] {
    opacity: 0.6;
    cursor: wait;
}

.contact-form__status {
    margin: 0;
    min-height: 1.5em;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}
.contact-form__status.is-success { color: #27ae60; font-weight: var(--fw-medium); }
.contact-form__status.is-error   { color: #c0392b; font-weight: var(--fw-medium); }

/* Tablet+ */
@media (min-width: 768px) {
    .contact-form__submit { width: auto; align-self: flex-start; }
}