/* Modulo contatti ([me_contact_form], vedi assets/js/contact.js). */

.me-contact {
    max-width: 640px;
    margin: 24px 0 32px;
    padding: 24px;
    border: 1px solid var(--me-border, rgba(11, 14, 20, .09));
    border-radius: var(--me-radius, 16px);
    background: var(--me-surface, #fff);
    box-sizing: border-box;
}
.me-contact *, .me-contact *::before, .me-contact *::after { box-sizing: border-box; }
.me-contact__form { display: flex; flex-direction: column; gap: 16px; }
.me-contact__field input, .me-contact__field textarea { width: 100%; font: inherit; font-size: 15px; }
.me-contact__field textarea { resize: vertical; min-height: 140px; line-height: 1.45; }
.me-contact__field [aria-invalid="true"] { border-color: #c92a2a; }
.me-contact__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; }
.me-contact__consent input { margin: 3px 0 0; width: 18px; height: 18px; flex: 0 0 auto; }
.me-contact__row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.me-contact__note { margin: 0; font-size: 13px; color: var(--me-muted, #59637a); }
.me-contact__status { margin: 12px 0 0; font-size: 15px; line-height: 1.5; }
.me-contact__status:empty { display: none; }
.me-contact__status:focus { outline: none; }
.me-contact__status.is-ok { padding: 12px 14px; border-radius: 8px; background: #ebfbee; color: var(--me-ok, #2f9e44); font-weight: 600; }
.me-contact__status.is-error { padding: 12px 14px; border-radius: 8px; background: #fff5f5; color: #c92a2a; }

/* Il campo trappola: fuori dallo schermo, non display:none (alcuni programmi
   saltano i campi nascosti così e non cadrebbero nella trappola). */
.me-contact__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 480px) {
    .me-contact { padding: 16px; }
    .me-contact__submit { width: 100%; }
}