/* States for the "Send us a message" form (js/contact-form.js). */
.contact-form .cf-field input,
.contact-form .cf-field select,
.contact-form .cf-field textarea { font-size: 16px; min-height: 48px; }

.contact-form .cf-optional { font-weight: 400; color: var(--gray-600, #4f6b80); }
.contact-form .cf-req { color: #b3261e; }

.contact-form .cf-error { display: block; min-height: 0; margin-top: 6px; font-size: 13px; font-weight: 600; color: #b3261e; }
.contact-form .cf-error:empty { display: none; }
.contact-form .cf-error:not(:empty)::before { content: "⚠ "; }
.contact-form .cf-has-error input,
.contact-form .cf-has-error select,
.contact-form .cf-has-error textarea { border-color: #b3261e; background: #fff6f5; }

.contact-form .cf-status { margin-top: 14px; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
.contact-form .cf-status:focus { outline: 3px solid var(--teal, #00e0c2); outline-offset: 2px; }
.contact-form .cf-status--info { background: #eef4f8; color: #1d3446; }
.contact-form .cf-status--success { background: #e7f7ef; color: #0f5132; border: 1px solid #9fd8b9; }
.contact-form .cf-status--error { background: #fdecea; color: #7a1c14; border: 1px solid #f1b0a8; }
.contact-form .cf-status a { color: inherit; font-weight: 700; text-decoration: underline; }

.contact-form .cf-submit:disabled { opacity: 0.7; cursor: progress; transform: none; }
.contact-form .cf-submit:focus-visible { outline: 3px solid var(--navy, #0a1f33); outline-offset: 3px; }

.contact-form .cf-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 560px) {
  .contact-form .cf-row { grid-template-columns: 1fr; gap: 0; }
}

.contact-form .cf-status:empty { display: none; }