/* CONTACT — extension layer. Form states, FAQ rhythm, success panel. */

.field__err { display: none; font-size: 0.82rem; color: var(--accent-strong); }
.field--error .field__err { display: block; }
.field--error input, .field--error textarea, .field--error select { border-color: var(--accent-strong); box-shadow: 0 0 0 3px rgba(201,111,74,0.16); }
.field__hint { font-size: 0.8rem; color: var(--text-muted); }

.form-alert { border-radius: var(--radius-sm); padding: 12px 16px; font-size: 0.9rem; margin-bottom: 1.25rem; display: none; }
.form-alert[data-show="true"] { display: block; }
.form-alert--error { border: 1px solid var(--accent-strong); background: rgba(201,111,74,0.08); color: var(--text-primary); }
.form-alert--info { border: var(--border-thin); background: var(--color-paper-warm); color: var(--text-secondary); }

.btn[disabled] { opacity: 0.65; cursor: wait; transform: none; }
.btn__spin { width: 14px; height: 14px; border: 2px solid rgba(252,251,248,0.4); border-top-color: var(--color-paper); border-radius: 50%; display: none; animation: spin 0.8s linear infinite; }
.btn[disabled] .btn__spin { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn__spin { animation: none; }
}

.success { display: none; border: var(--border-thin); border-radius: var(--radius-md); background: var(--color-paper); padding: clamp(2rem, 4vw, 3rem); text-align: left; }
.success[data-show="true"] { display: block; }
.success__mark { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-paper); background: var(--color-navy); display: inline-block; padding: 6px 12px; border-radius: 3px; }

.faq-wrap { max-width: var(--container-md); }
.faq-note { margin-top: 1.5rem; }

@media (max-width: 640px) {
  .form-grid-2 { grid-template-columns: 1fr; }
}
@media (min-width: 641px) {
  .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.25rem; }
}