/*
 * BrandForms: the public form page and the embed frame. Self-contained (does not depend on field
 * styles elsewhere) and driven by the brand's theme tokens, so an embedded form reads as the brand's.
 *
 * Choices: labels above inputs in one column (max ~36rem); optional fields are marked instead of
 * required ones; prefilled sender folds into one "Sending as" line; an errored field gets a left
 * rule so it can be found by scanning; the only motion is the confirmation check.
 */
.bf-form, .bf-done {
    --bf-ink: var(--brand-ink, #1c2420);
    --bf-muted: #5b6660;
    --bf-line: #c9d1cc;
    --bf-line-strong: #98a49d;
    --bf-fill: #fbfcfb;
    --bf-accent: var(--brand-primary, #1d5fa8);
    --bf-tint: var(--brand-tint, #eef4f0);
    --bf-error: #b42318;
    --bf-radius: 8px;
    max-width: 36rem;
    color: var(--bf-ink);
    font-family: var(--bp-font, system-ui, sans-serif);
    font-size: 16px;
    line-height: 1.5;
}

/* The hidden attribute must win over the display rules below. */
.bf-form [hidden], .bf-done[hidden] { display: none !important; }

.bf-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Fields */
.bf-field { margin: 0 0 22px; }
.bf-label { display: block; margin: 0 0 6px; padding: 0; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--bf-ink); }
.bf-optional { margin-left: 4px; font-weight: 400; color: var(--bf-muted); }
.bf-help { margin: 6px 0 0; font-size: 14px; color: var(--bf-muted); }
.bf-help--lead { margin: -2px 0 8px; }
.bf-help--indent { margin-left: 44px; }
.bf-error { margin: 6px 0 0; font-size: 14px; font-weight: 600; color: var(--bf-error); }

.bf-input {
    display: block; width: 100%; box-sizing: border-box; min-height: 46px; margin: 0;
    padding: 10px 12px; border: 1px solid var(--bf-line); border-radius: var(--bf-radius);
    background: var(--bf-fill); color: var(--bf-ink); font: inherit; font-size: 16px;
    transition: border-color .12s, box-shadow .12s, background-color .12s;
}
.bf-input::placeholder { color: #8b958f; }
.bf-input:hover { border-color: var(--bf-line-strong); }
.bf-input:focus { outline: none; border-color: var(--bf-accent); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-accent) 22%, transparent); }
.bf-input--short { max-width: 12rem; }
.bf-input--area { min-height: 9.5rem; resize: vertical; line-height: 1.55; }
.bf-input[aria-invalid="true"] { border-color: var(--bf-error); }

.bf-select { position: relative; display: block; }
.bf-select select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; }
.bf-select::after {
    content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
    border-right: 2px solid var(--bf-muted); border-bottom: 2px solid var(--bf-muted); transform: rotate(45deg); pointer-events: none;
}

/* An errored field carries a left rule so it is easy to find when scanning back up. */
.bf-field--invalid { padding-left: 14px; border-left: 3px solid var(--bf-error); }

/* Choices: radio groups and the single tick box are full-width rows you can hit anywhere. */
.bf-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.bf-choices { display: grid; gap: 8px; }
.bf-choice {
    display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start;
    padding: 11px 14px; border: 1px solid var(--bf-line); border-radius: var(--bf-radius);
    background: var(--bf-fill); font-size: 15px; font-weight: 400; cursor: pointer;
    transition: border-color .12s, background-color .12s;
}
.bf-choice:hover { border-color: var(--bf-line-strong); }
.bf-choice:has(input:checked) { border-color: var(--bf-accent); background: var(--bf-tint); }
.bf-choice:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bf-accent) 22%, transparent); }
.bf-choice input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--bf-accent); }
.bf-choice--single span { font-weight: 600; }
.bf-choice--single .bf-optional { font-weight: 400; }

/* Sender: name + email side by side when there is room; folded into one line when prefilled. */
.bf-sender__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); column-gap: 16px; }
.bf-sender__summary {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
    margin: 0 0 24px; padding: 12px 14px; border-radius: var(--bf-radius);
    background: var(--bf-tint); font-size: 15px;
}
.bf-sender__label { color: var(--bf-muted); }
.bf-sender__who { min-width: 0; overflow-wrap: anywhere; }
.bf-sender__who span { color: var(--bf-muted); }
.bf-sender__summary .bf-link { margin-left: auto; }
.bf-link {
    padding: 0; border: 0; background: none; color: var(--bf-accent); font: inherit; font-weight: 600;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.bf-link:focus-visible { outline: 2px solid var(--bf-accent); outline-offset: 2px; border-radius: 2px; }

/* Alert, captcha, submit */
.bf-alert {
    margin: 0 0 22px; padding: 12px 14px; border-left: 3px solid var(--bf-error); border-radius: 4px;
    background: #fdf1ef; color: #7a1a12; font-weight: 600;
}
.bf-alert:focus { outline: none; }
.bf-captcha { min-height: 65px; margin: 4px 0 18px; }
.bf-actions { margin-top: 8px; }
.bf-submit {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px;
    border: 0; border-radius: var(--bf-radius); background: var(--bf-accent); color: #fff;
    font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: filter .12s;
}
.bf-submit:hover { filter: brightness(.9); }
.bf-submit:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--bf-accent); }
.bf-submit[disabled] { opacity: .6; cursor: not-allowed; filter: none; }

/* Confirmation (embed): the check draws once, then the reference. */
.bf-done { padding: 8px 0 4px; }
.bf-done:focus { outline: none; }
.bf-done__mark { display: block; width: 52px; height: 52px; margin: 0 0 14px; fill: none; stroke: var(--bf-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bf-done__mark circle { stroke-dasharray: 139; stroke-dashoffset: 139; animation: bf-draw .5s ease-out forwards; }
.bf-done__mark path { stroke-width: 3.5; stroke-dasharray: 32; stroke-dashoffset: 32; animation: bf-draw .3s .4s ease-out forwards; }
.bf-done__title { margin: 0 0 6px; font-size: 22px; font-weight: 600; line-height: 1.25; }
.bf-done__ref { margin: 0 0 14px; color: var(--bf-muted); font-size: 15px; }
.bf-done__ref strong { display: block; color: var(--bf-ink); font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
@keyframes bf-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .bf-done__mark circle, .bf-done__mark path { animation: none; stroke-dashoffset: 0; }
}

.bf-rich { color: var(--bf-muted); }
.bf-rich p { margin: 0 0 10px; }
.bf-rich > :last-child { margin-bottom: 0; }

/* Public page */
.bf-page .bp-title { margin-bottom: 10px; }
.bf-intro { max-width: 36rem; margin: 0 0 24px; color: var(--bp-text2, #3f4652); }
.bf-card { padding: 32px; }
.bf-preview { margin: 0 0 20px; padding: 10px 14px; border-radius: var(--bf-radius, 8px); background: #fff6e0; color: #6b4600; font-weight: 600; }
@media (max-width: 520px) { .bf-card { padding: 20px; } }

/* Embed frame: no page chrome or card; the host page frames it. Room left for focus rings. */
.bf-frame { min-height: 0; background: transparent; }
.bf-frame__main { padding: 4px 4px 12px; }
.bf-frame .bf-intro { margin-bottom: 20px; }

/* Availability notice and KB suggestions (frame mode). */
.bf-notice { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--bf-muted, #5b6660); font-size: 14px; line-height: 1.4; }
.bf-notice::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2f9e5b; }
.bf-notice--offline::before { background: #c7871c; }
.bf-suggest { margin: -6px 0 22px; padding: 12px 14px; border-radius: 8px; background: var(--brand-tint, #eef4f0); }
.bf-suggest__title { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.bf-suggest__list { margin: 0; padding-left: 18px; }
.bf-suggest__list li + li { margin-top: 4px; }

/* Inside the BrandWidget panel: the same 56px bar as the panel's KB pages, 20px gutters,
   a full-width send button. White controls beat BrandPublic's ".bp-body a" link colour. */
.bf-frame--widget { background: #fff; scrollbar-width: thin; scrollbar-color: #cdd2d9 transparent; }
.bf-wbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 8px 8px 8px 12px; background: var(--brand-primary, #1d5fa8); color: #fff; }
.bf-wbar__title { flex: 1; min-width: 0; padding-left: 8px; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.bf-frame .bf-wbar .bf-wbar__btn {
    display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: #fff; text-decoration: none; cursor: pointer;
}
.bf-frame .bf-wbar .bf-wbar__btn:hover { background: rgba(255, 255, 255, .16); text-decoration: none; }
.bf-frame .bf-wbar .bf-wbar__btn:focus-visible { outline: 2px solid #fff; outline-offset: -3px; box-shadow: none; }
.bf-wbar__btn svg { width: 22px; height: 22px; }
.bf-frame--widget .bf-frame__main { padding: 20px 20px 28px; }
.bf-frame--widget .bf-intro { margin-bottom: 18px; font-size: 15px; }
.bf-frame--widget .bf-submit { width: 100%; min-height: 48px; }