:root { --gap: 14px; }
body { font-family: Calibri, Verdana, Tahoma, Arial, sans-serif; font-size: 16px; line-height: 1.45; margin: 0; padding: 0; }
.container { max-width: 920px; margin: 0 auto; padding: 24px; }
header h1 { margin-top: 0; }
form .row { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap); margin-bottom: var(--gap); }
label { font-weight: 600; color: #333; align-self: center; }
input[type="text"], input[type="email"], textarea { width: 95%; padding: 8px; border: 1px solid #ccc; border-radius: 6px; }
textarea { min-height: 140px; }
.validation-summary-errors { color: #b30000; margin-bottom: 10px; }
.success { color: #0a6a0a; font-weight: 700; }
.btn { padding: 10px 18px; border: none; border-radius: 8px; background: #1547D4; color: white; cursor: pointer; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
footer { margin-top: 24px; color: #666; }

/* Add red asterisk for required fields */
label.required::after {
    content: " *";
    color: red;
    font-weight: bold;
}

/* Make error messages appear below inputs */
.field-validation-error {
    color: red;
    font-weight: bold;
    display: block;
    margin-left: calc(var(--gap) + 2px); /* indent to align under input */
    grid-column: 2; /* force it under the input column */
    margin-top: -10px;
}

.validation-row {
    display: grid;
    grid-template-columns: 1fr 2fr; /* match parent row layout */
}

.note {
    font-size: 0.95em;
    color: #444;
    margin-bottom: 12px;
    margin-top: 0px;
    font-style: italic;
}

.form-center {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

/* center the validation summary (single or multi-line) */
.recaptcha-error {
    text-align: center; /* center inline-block child */
    margin-bottom: 10px;
}

    /* make the rendered <ul> shrink to its content and center it */
    .recaptcha-error ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: inline-block; /* so the parent text-align:center centers it */
    }

    /* style the <li> text */
    .recaptcha-error li {
        display: block;
        color: red;
        font-weight: 700;
        text-align: center;
        margin: 0; /* remove any default spacing */
        margin-top: 20px;
    }
