/* The contact form card, shared by contact.php and the homepage's contact section via
   includes/contact_form.php. Everything is scoped under .contact-card so it can't clash with either
   page's own styles. */
.contact-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 28px;
    text-align: left;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #1a1d29;
}
.contact-card * { box-sizing: border-box; }
@media (max-width: 640px) { .contact-card { padding: 20px 18px; font-size: 16px; } }

.contact-card .field { margin: 0 0 18px; }
.contact-card .field label { display: block; font-size: 0.85em; font-weight: 600; color: #374151; margin: 0 0 6px; }
.contact-card .field input,
.contact-card .field select,
.contact-card .field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #1a1d29;
    font: inherit;
    font-size: 0.92em;
}
.contact-card .field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.contact-card .field input:focus,
.contact-card .field select:focus,
.contact-card .field textarea:focus { outline: none; border-color: #1568c4; box-shadow: 0 0 0 3px #e7f0fc; }
.contact-card .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .contact-card .field-row { grid-template-columns: 1fr; gap: 0; } }
/* Web3Forms' own spam trap — real visitors never see or fill it. */
.contact-card .botcheck { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-card .contact-submit {
    display: inline-block;
    padding: 12px 26px;
    border: none;
    border-radius: 8px;
    background: #1568c4;
    color: #fff;
    font: inherit;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
}
.contact-card .contact-submit:hover { background: #0d4d90; }
.contact-card .contact-submit:disabled { opacity: 0.6; cursor: default; }
.contact-card .form-note { color: #9ca3af; font-size: 0.78em; margin: 14px 0 0; }
.contact-card .form-note a { color: #6b7280; }

.contact-card .status { display: none; margin: 0 0 18px; padding: 12px 14px; border-radius: 8px; font-size: 0.88em; line-height: 1.5; }
.contact-card .status.is-visible { display: block; }
.contact-card .status--ok { background: #ecfdf3; border: 1px solid #a7f3d0; color: #065f46; }
.contact-card .status--error { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.contact-card .h-captcha { margin: 0 0 18px; }

.contact-card .field-error { display: none; color: #b91c1c; font-size: 0.8em; margin-top: 5px; }
.contact-card .field input.is-invalid,
.contact-card .field textarea.is-invalid { border-color: #dc2626; }
.contact-card .field input.is-invalid:focus,
.contact-card .field textarea.is-invalid:focus { box-shadow: 0 0 0 3px #fee2e2; }
.contact-card .field-hint { color: #9ca3af; font-size: 0.78em; margin-top: 5px; }
.contact-card .field-hint.is-met { color: #15803d; }