/* Contacts page. Loaded after checkout.css (page head, form sections, error summary, summary cards). Tokens only; mobile-first. */

.contact { padding-bottom: var(--section-y); }
.contact__grid { display: grid; gap: var(--space-8); }
.contact__side { display: grid; gap: var(--space-4); align-content: start; }
@media (min-width: 64rem) {
  .contact__grid { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-12); align-items: start; }
}

.contact-form { display: grid; gap: var(--space-5); max-width: 44rem; }
@media (min-width: 40rem) { .contact-form .form-row--even { grid-template-columns: 1fr 1fr; } }
.contact-form__about { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); }
.contact-form__privacy { margin: 0; font-size: var(--text-sm); }
.contact-form .btn { justify-self: start; }

.contact-sent { display: grid; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); }
@media (min-width: 30rem) { .contact-sent { grid-template-columns: auto minmax(0, 1fr); } }
.contact-sent:focus { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.contact-sent__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-success); color: var(--btn-primary-text); }
.contact-sent__title { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.contact-sent p { margin: 0 0 var(--space-3); }

.contact-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.contact-list li { display: grid; gap: var(--space-1); }
.contact-list span { font-size: var(--text-sm); }
.contact-list a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-link); overflow-wrap: anywhere; }