/*
 * Form Builder: forms on the public site. Self-contained so any theme can
 * show them: everything is scoped to .fb, inherits the theme's font and text
 * colour, and takes its accent from --fb-accent (a theme can set it).
 */
.fb {
    --fb-accent: #2563eb;
    --fb-accent-ink: #fff;
    --fb-line: color-mix(in srgb, currentColor 22%, transparent);
    --fb-soft: color-mix(in srgb, currentColor 5%, transparent);
    --fb-muted: color-mix(in srgb, currentColor 62%, transparent);
    --fb-error: #b91c1c;
    --fb-radius: 12px;
    max-width: 40rem;
    margin: 1.5rem 0;
    font: inherit;
    color: inherit;
}
.fb *, .fb *::before, .fb *::after { box-sizing: border-box; }
.fb-form { margin: 0; }
.fb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1rem; }
.fb-field { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; border: 0; }
.fb-field--half { grid-column: span 1; }
@media (max-width: 560px) { .fb-field--half { grid-column: 1 / -1; } }

.fb-label { display: block; margin: 0 0 .4rem; padding: 0; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.fb-req { color: var(--fb-error); font-weight: 600; }
.fb-opt { font-weight: 400; color: var(--fb-muted); font-size: .85em; }
.fb-help { margin: -.15rem 0 .45rem; font-size: .85rem; line-height: 1.45; color: var(--fb-muted); }
.fb-heading { margin: .75rem 0 0; font-size: 1.1rem; line-height: 1.3; }
.fb-field--heading:first-child .fb-heading { margin-top: 0; }

.fb-input {
    display: block; width: 100%; min-height: 2.85rem; margin: 0;
    padding: .65rem .85rem; font: inherit; font-size: 1rem; line-height: 1.4; color: inherit;
    background: transparent; border: 1px solid var(--fb-line); border-radius: var(--fb-radius);
    transition: border-color .15s ease, box-shadow .15s ease;
    -webkit-appearance: none; appearance: none;
}
textarea.fb-input { min-height: 8rem; resize: vertical; }
.fb-select {
    padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .8rem center; background-size: 1rem;
}
.fb-input::placeholder { color: var(--fb-muted); opacity: .8; }
.fb-input:focus { outline: none; border-color: var(--fb-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fb-accent) 22%, transparent); }

.fb-options { display: grid; gap: .5rem; }
.fb-option {
    display: flex; align-items: flex-start; gap: .65rem; margin: 0; cursor: pointer;
    padding: .7rem .85rem; border: 1px solid var(--fb-line); border-radius: var(--fb-radius); line-height: 1.4;
    transition: border-color .15s ease, background-color .15s ease;
}
.fb-option:hover { background: var(--fb-soft); }
.fb-option:has(input:checked) { border-color: var(--fb-accent); background: color-mix(in srgb, var(--fb-accent) 7%, transparent); }
.fb-option:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fb-accent) 22%, transparent); }
.fb-option input { flex: none; width: 1.1rem; height: 1.1rem; margin: .1rem 0 0; accent-color: var(--fb-accent); cursor: pointer; }
.fb-consent { border-style: dashed; }

.fb-error { margin: .4rem 0 0; font-size: .875rem; line-height: 1.4; color: var(--fb-error); font-weight: 500; }
.fb-field.is-invalid .fb-input,
.fb-field.is-invalid .fb-option { border-color: var(--fb-error); }
.fb-alert {
    margin: 0 0 1.1rem; padding: .75rem 1rem; border-radius: var(--fb-radius); font-size: .925rem; line-height: 1.45;
    color: var(--fb-error); background: color-mix(in srgb, var(--fb-error) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--fb-error) 30%, transparent);
}
.fb [hidden] { display: none !important; }

.fb-actions { margin-top: 1.4rem; }
.fb-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.85rem;
    padding: .7rem 1.4rem; font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2;
    color: var(--fb-accent-ink); background: var(--fb-accent); border: 0; border-radius: var(--fb-radius); cursor: pointer;
    transition: filter .15s ease, opacity .15s ease;
}
.fb-submit:hover { filter: brightness(.93); }
.fb-submit:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--fb-accent) 35%, transparent); }
.fb-submit[aria-busy="true"] { cursor: progress; opacity: .85; }
.fb-submit__spin { width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: fb-spin .7s linear infinite; }
@keyframes fb-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .fb-submit { width: 100%; } }

.fb-success {
    display: flex; align-items: flex-start; gap: .75rem; padding: 1.1rem 1.2rem; border-radius: var(--fb-radius);
    background: color-mix(in srgb, var(--fb-accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--fb-accent) 30%, transparent);
}
.fb-success p { margin: 0; line-height: 1.5; }
.fb-success__icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--fb-accent); }
.fb-closed { padding: 1rem 1.2rem; border-radius: var(--fb-radius); background: var(--fb-soft); margin: 0; }

/* The trap field: off-screen, never shown to people. */
.fb-hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) { .fb-submit__spin { animation-duration: 2s; } .fb-input, .fb-option { transition: none; } }
