/*
 * Base Contact: themed ONLY through CSS variables. Set any of these on :root (or a wrapper):
 *   --bk-accent --bk-accent-ink --bk-ink --bk-ink-muted --bk-paper --bk-surface --bk-line
 *   --bk-danger --bk-success --bk-radius --bk-font-body --bk-gap
 * The literals below are only fallbacks for sites that define none of them.
 */
.bkc {
    --_accent: var(--bk-accent, light-dark(#4f46e5, #818cf8));
    --_accent-ink: var(--bk-accent-ink, light-dark(#ffffff, #0b0d12));
    --_ink: var(--bk-ink, light-dark(#14151a, #eceef3));
    --_muted: var(--bk-ink-muted, light-dark(#565b6b, #a3a9b8));
    --_paper: var(--bk-paper, light-dark(#ffffff, #0e1015));
    --_surface: var(--bk-surface, light-dark(#f4f5f8, #171a21));
    --_line: var(--bk-line, light-dark(#c9ccd6, #3a3f4c));
    --_danger: var(--bk-danger, light-dark(#b91c1c, #f87171));
    --_success: var(--bk-success, light-dark(#15803d, #4ade80));
    --_radius: var(--bk-radius, 0.625rem);
    --_gap: var(--bk-gap, 1rem);
    font-family: var(--bk-font-body, inherit);
    color: var(--_ink);
    max-width: 40rem;
}
.bkc *, .bkc *::before, .bkc *::after { box-sizing: border-box; }
.bkc__form { display: grid; gap: var(--_gap); }
.bkc__field { display: grid; gap: 0.375rem; }
.bkc label { font-weight: 600; font-size: 0.9375rem; }
.bkc__req { color: var(--_danger); }
.bkc input[type="text"], .bkc input[type="email"], .bkc input[type="tel"], .bkc input[type="number"], .bkc select, .bkc textarea {
    width: 100%; padding: 0.7rem 0.9rem; font: inherit; font-size: 1rem; /* 16px+ avoids iOS zoom */
    color: var(--_ink); background: var(--_paper); border: 1px solid var(--_line); border-radius: var(--_radius);
}
.bkc textarea { resize: vertical; min-height: 8rem; }
.bkc input:focus-visible, .bkc select:focus-visible, .bkc textarea:focus-visible, .bkc button:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--_accent) 60%, transparent); outline-offset: 2px; border-color: var(--_accent);
}
.bkc [aria-invalid="true"] { border-color: var(--_danger); }
.bkc__check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; cursor: pointer; }
.bkc__check input { margin-top: 0.3rem; inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--_accent); flex: none; }
.bkc__error { color: var(--_danger); font-size: 0.875rem; margin: 0; }
.bkc__error::before { content: "\26A0\FE0E\00a0"; }
.bkc__summary { padding: 0.8rem 1rem; border-radius: var(--_radius); border: 1px solid var(--_danger); color: var(--_danger); background: color-mix(in oklab, var(--_danger) 8%, transparent); font-weight: 600; }
.bkc__success { padding: 1rem 1.2rem; border-radius: var(--_radius); border: 1px solid var(--_success); background: color-mix(in oklab, var(--_success) 10%, transparent); font-weight: 600; }
.bkc__submit {
    justify-self: start; padding: 0.8rem 1.6rem; font: inherit; font-weight: 600; cursor: pointer;
    color: var(--_accent-ink); background: var(--_accent); border: 2px solid var(--_accent); border-radius: var(--_radius);
}
.bkc__submit:hover { background: color-mix(in oklab, var(--_accent) 88%, var(--_ink)); }
.bkc__submit[disabled] { opacity: 0.6; cursor: progress; }
.bkc__live { margin: 0; min-height: 1.2em; color: var(--_muted); font-size: 0.875rem; }
/* Honeypot: off-screen, not display:none (some bots skip display:none fields) */
.bkc__hp { position: absolute !important; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { .bkc__submit { transition: background-color 0.15s ease; } }