/*
 * SBM Form, front end.
 *
 * The form reads only its own variables, and every one has a neutral fallback:
 *
 *   --sbmf-accent        button and focus ring
 *   --sbmf-button-text   text on the button
 *   --sbmf-input-bg      field background
 *   --sbmf-input-text    field text
 *   --sbmf-input-border  field border
 *   --sbmf-text          labels and help text
 *   --sbmf-radius        corner radius
 *   --sbmf-danger, --sbmf-success, --sbmf-muted
 *
 * Left unset, the form takes the page's font and text color and draws its
 * fields transparent with a border mixed from that text color, so it is
 * readable on a light page and on a dark one. A theme styles it by setting the
 * variables on .sbmf — it never needs to know a single selector below.
 */
.sbmf {
    color: var(--sbmf-text, inherit);
    font: inherit;
    container: sbmf / inline-size;
}
.sbmf *,
.sbmf *::before,
.sbmf *::after { box-sizing: border-box; }

.sbmf-form { margin: 0; }
.sbmf-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
}
.sbmf-field {
    grid-column: span 12;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.sbmf-field[hidden],
.sbmf [hidden] { display: none !important; }
.sbmf-w-3 { grid-column: span 3; }
.sbmf-w-4 { grid-column: span 4; }
.sbmf-w-6 { grid-column: span 6; }
.sbmf-w-8 { grid-column: span 8; }
.sbmf-w-9 { grid-column: span 9; }

/* One column when the form itself is narrow — in a sidebar as much as on a phone. */
@container sbmf (max-width: 600px) {
    .sbmf-field { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .sbmf-field { grid-column: 1 / -1; }
}

.sbmf-label {
    display: block;
    float: none;
    width: auto;
    margin: 0 0 .375rem;
    padding: 0;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}
.sbmf-req { color: var(--sbmf-danger, #b42318); }
.sbmf-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sbmf-input {
    display: block;
    width: 100%;
    max-width: none;
    min-height: 2.75rem;
    margin: 0;
    padding: .625rem .75rem;
    font: inherit;
    line-height: 1.4;
    color: var(--sbmf-input-text, inherit);
    background: var(--sbmf-input-bg, transparent);
    border: 1px solid var(--sbmf-input-border, color-mix(in srgb, currentColor 45%, transparent));
    border-radius: var(--sbmf-radius, 6px);
    box-shadow: none;
}
textarea.sbmf-input { min-height: 5rem; resize: vertical; }
.sbmf-input::placeholder { color: currentColor; opacity: .55; }
.sbmf-input:focus,
.sbmf-choice input:focus-visible,
.sbmf-submit:focus-visible {
    outline: 2px solid var(--sbmf-accent, #2563eb);
    outline-offset: 2px;
}
.sbmf-input:focus { border-color: var(--sbmf-accent, #2563eb); }
.sbmf-input[aria-invalid="true"] { border-color: var(--sbmf-danger, #b42318); }

.sbmf-choices { display: flex; flex-direction: column; gap: .5rem; }
.sbmf-choice {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: 0;
    font-weight: 400;
    line-height: 1.4;
    cursor: pointer;
}
.sbmf-choice input {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: .15em 0 0;
    accent-color: var(--sbmf-accent, #2563eb);
}

/*
 * A group: one label over a row of boxes, each with its own caption. The parts
 * are ordinary fields, drawn by their own types, so the caption is the label
 * they already have — turned small and moved below its box by giving the field
 * a column and putting the label last.
 */
.sbmf-parts { margin: 0; gap: .625rem 1rem; }
.sbmf-parts > .sbmf-field {
    display: flex;
    flex-direction: column;
}
.sbmf-parts > .sbmf-field > .sbmf-label {
    order: 2;
    margin: .25rem 0 0;
    font-size: .8125em;
    font-weight: 400;
    color: var(--sbmf-muted, color-mix(in srgb, currentColor 72%, transparent));
}
.sbmf-parts > .sbmf-field > .sbmf-help,
.sbmf-parts > .sbmf-field > .sbmf-error { order: 3; }

.sbmf-help,
.sbmf-error { margin: .375rem 0 0; font-size: .875em; line-height: 1.4; }
.sbmf-help { color: var(--sbmf-muted, color-mix(in srgb, currentColor 72%, transparent)); }
.sbmf-error { color: var(--sbmf-danger, #b42318); }

.sbmf-summary {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    color: var(--sbmf-danger, #b42318);
    border: 1px solid currentColor;
    border-radius: var(--sbmf-radius, 6px);
}

/* The builder's preview, saying the form would have been sent. */
.sbmf-summary--ok {
    color: var(--sbmf-success, #067647);
}

/*
 * The honeypot: clipped out of sight, not display:none — some bots skip what is
 * not displayed. Not moved off screen either: in a right-to-left block on a
 * left-to-right page that would give the page a sideways scrollbar.
 */
.sbmf-hp {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.sbmf-captcha { margin-top: 1rem; }
.sbmf-actions { margin-top: 1.25rem; }
.sbmf-submit,
.sbmf-next,
.sbmf-back {
    display: inline-block;
    min-height: 2.75rem;
    margin: 0;
    padding: .7rem 1.5rem;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    color: var(--sbmf-button-text, #fff);
    background: var(--sbmf-accent, #2563eb);
    border: 1px solid transparent;
    border-radius: var(--sbmf-radius, 6px);
    cursor: pointer;
}
.sbmf-submit:hover,
.sbmf-next:hover { filter: brightness(.92); }
.sbmf-submit[disabled],
.sbmf-next[disabled] { opacity: .6; cursor: default; filter: none; }

/* ── File upload: the picker, then a row per file as it goes up. ── */
.sbmf-file {
    display: block;
    width: 100%;
    max-width: 100%;
    font: inherit;
    color: inherit;
    padding: .5rem;
    border: 1px dashed var(--sbmf-input-border, #c9ced6);
    border-radius: var(--sbmf-radius, 6px);
    background: var(--sbmf-input-bg, transparent);
}
.sbmf-file::file-selector-button {
    font: inherit;
    margin-inline-end: .75rem;
    padding: .35rem .75rem;
    cursor: pointer;
    color: inherit;
    border: 1px solid var(--sbmf-input-border, #c9ced6);
    border-radius: calc(var(--sbmf-radius, 6px) - 2px);
    background: color-mix(in srgb, currentColor 8%, transparent);
}
.sbmf-file[aria-invalid="true"] { border-color: var(--sbmf-danger, #b42318); }
.sbmf-upload-list { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.sbmf-upload-list:empty { display: none; }
.sbmf-upload-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875em;
    line-height: 1.4;
    padding: .3rem .5rem;
    border-radius: calc(var(--sbmf-radius, 6px) - 2px);
    background: color-mix(in srgb, currentColor 6%, transparent);
}
.sbmf-upload-item.is-going { opacity: .7; }
.sbmf-upload-item.is-failed { color: var(--sbmf-danger, #b42318); }
.sbmf-upload-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sbmf-upload-state { flex: 0 0 auto; font-size: .9em; opacity: .8; }
.sbmf-upload-remove {
    flex: 0 0 auto;
    font: inherit;
    line-height: 1;
    cursor: pointer;
    padding: .1rem .35rem;
    color: inherit;
    border: 0;
    border-radius: 4px;
    background: transparent;
}
.sbmf-upload-remove:hover { background: color-mix(in srgb, currentColor 14%, transparent); }
/* What happened to a file, said beside the picker: the field's error line is not this. */
.sbmf-upload-note { margin: .375rem 0 0; font-size: .875em; line-height: 1.4; color: var(--sbmf-danger, #b42318); }

/* ── Price: the symbol or the currency choice sits inside the box, before the amount. ── */
.sbmf-price { position: relative; display: flex; align-items: stretch; }
.sbmf-price .sbmf-input { flex: 1; min-width: 0; }
.sbmf-price-symbol,
.sbmf-price-code {
    position: absolute;
    inset-block: 0;
    display: flex;
    align-items: center;
    color: var(--sbmf-muted, #667085);
    pointer-events: none;
}
.sbmf-price-symbol { inset-inline-start: .75rem; }
.sbmf-price-code { inset-inline-end: .75rem; font-size: .85em; }
.sbmf-price-symbol + .sbmf-input { padding-inline-start: 2.25rem; }
.sbmf-price:has(.sbmf-price-code) .sbmf-input { padding-inline-end: 3.25rem; }
.sbmf-price-currency {
    /* Themes often make every <select> full width; this one sits beside the amount. */
    flex: 0 0 auto;
    width: auto !important;
    max-width: 8em;
    margin-inline-end: .5rem;
    padding: 0 .5rem;
    font: inherit;
    color: var(--sbmf-input-text, inherit);
    background: var(--sbmf-input-bg, #fff);
    border: 1px solid var(--sbmf-input-border, #d0d5dd);
    border-radius: var(--sbmf-radius, 6px);
}

/* ── Steps ── */
.sbmf-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.sbmf-back {
    color: inherit;
    background: transparent;
    border-color: currentColor;
}
.sbmf-back:hover { filter: none; opacity: .8; }
.sbmf-next:focus-visible,
.sbmf-back:focus-visible {
    outline: 2px solid var(--sbmf-accent, #2563eb);
    outline-offset: 2px;
}
.sbmf-progress { margin: 0 0 1.25rem; }
.sbmf-progress-text { margin: 0 0 .4rem; font-size: .9em; color: var(--sbmf-muted, #667085); }
.sbmf-progress-bar {
    height: 4px;
    overflow: hidden;
    background: color-mix(in srgb, currentColor 12%, transparent);
    border-radius: 2px;
}
.sbmf-progress-bar span {
    display: block;
    height: 100%;
    background: var(--sbmf-accent, #2563eb);
    transition: width .2s ease;
}
.sbmf-step-title { margin: 0 0 1rem; font-weight: 600; font-size: 1.1em; }
.sbmf-step:focus { outline: none; }
/* Google's checkbox belongs to the last step. */
.sbmf-form[data-sbmf-steps]:not([data-sbmf-last]) .sbmf-captcha { display: none; }
@media (prefers-reduced-motion: reduce) {
    .sbmf-progress-bar span { transition: none; }
}

.sbmf-done {
    padding: 1rem 1.25rem;
    border: 1px solid var(--sbmf-success, #067647);
    border-radius: var(--sbmf-radius, 6px);
}
.sbmf-done > :first-child { margin-top: 0; }
.sbmf-done > :last-child { margin-bottom: 0; }
.sbmf-missing,
.sbmf-noscript { padding: .75rem 1rem; border: 1px dashed currentColor; }