/**
 * Spencer Brook Strings — rental form.
 *
 * Scoped entirely under .sbst-form-root so nothing leaks into the surrounding theme, and so the
 * theme's own styles cannot reach in and break the wizard. Everything is defined against custom
 * properties on that root, which means the form can be retinted by overriding a handful of
 * variables rather than fighting selectors.
 *
 * WHY THE INTERACTIVE STATES ARE !important
 *
 * The big choice cards and the navigation buttons are real <button> elements, so every rule a theme
 * writes for buttons lands on them — and themes write plenty: gradient backgrounds, hover colours,
 * active transforms, focus shadows, uppercase text. A theme rule like `.entry-content button:hover`
 * scores 0,2,1 and beat this file's `.sbst-choice:hover` at 0,2,0, which is why selecting an option
 * showed the theme's colour instead of the selected state.
 *
 * Raising specificity alone does not settle it — the next theme, or the next child-theme tweak,
 * scores higher again. So the properties a theme is likely to set on an interactive element (colour,
 * background, border, shadow, transform, text decoration) are declared !important on this form's own
 * components. Layout is left alone: only the visual state is forced.
 *
 * Everything still reads from the variables, so retinting works exactly as before.
 */

/*
 * The palette lives on both roots. .sbst-form-notice is rendered on its own when the plugin is not
 * connected — outside .sbst-form-root — so without this it would resolve every var() to nothing and
 * come out unstyled.
 */
/*
 * THE ORIGINAL FORM'S PALETTE, taken from the old plugin's own stylesheet rather than sampled off a
 * screenshot — these are the values the shop's form has always used, to the digit.
 *
 * Blue #3498db on a near-white #f8f9fa card with a #e0e6ed edge; selected fills with #ebf3fd and takes
 * the blue border. Ink is the slate #2c3e50 the old form used for labels, muted text the grey #7f8c8d.
 *
 * Every rule in this file reads these variables, so the whole form retints from this block alone. The
 * one deliberate exception is the amber test-mode banner further down: it warns that money is not real,
 * and it has to stay legible regardless of what the form is tinted.
 */
.sbst-form-root,
.sbst-form-notice {
    --sbst-ink: #2c3e50;
    --sbst-ink-soft: #7f8c8d;
    --sbst-line: #e0e6ed;
    --sbst-surface: #ffffff;
    --sbst-surface-alt: #f8f9fa;
    --sbst-accent: #3498db;
    /* Hover/pressed shade of the accent. A filter cannot be used: themes set filter themselves. */
    --sbst-accent-strong: #2980b9;
    --sbst-accent-ink: #ffffff;
    --sbst-accent-soft: #ebf3fd;
    /* The far end of the selected card's gradient — the original's #ebf3fd → #e3f2fd. */
    --sbst-accent-soft-alt: #e3f2fd;
    /*
     * A light blue edge for an input being hovered. Derived, not inherited: the original had no such
     * state — it went straight from a grey border to full #3498db on focus — and jumping the whole way
     * on hover makes a form of eight fields flicker as the pointer crosses it.
     */
    --sbst-accent-line: #a8cfeb;
    --sbst-danger: #e74c3c;
    --sbst-danger-soft: #fdebea;
    --sbst-success: #27ae60;
    /* One step deeper than a resting card, for a field that cannot be used yet. Also the original's. */
    --sbst-surface-sunk: #ecf0f1;
    /* 12px, matching the original's option cards. */
    --sbst-radius: 12px;
    --sbst-gap: 1rem;
}

.sbst-form-root {
    box-sizing: border-box;
    max-width: 60rem;
    margin: 0 auto;
    color: var(--sbst-ink) !important;
    font-size: 1rem;
    line-height: 1.5;
}

.sbst-form-root *,
.sbst-form-root *::before,
.sbst-form-root *::after {
    box-sizing: inherit;
}

/* ----------------------------------------------------------- theme armour */

/*
 * Strip the decoration themes apply to form controls before this file styles them. Without the
 * reset, a theme's uppercase-and-letterspaced button text or gradient background survives
 * underneath and the card reads as a button rather than an option.
 *
 * transition is cleared on controls only — the progress bar keeps its own.
 */
.sbst-form-root button,
.sbst-form-root input,
.sbst-form-root select,
.sbst-form-root textarea,
.sbst-form-root label {
    font-family: inherit !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    background-image: none !important;
    transition: none !important;
    float: none !important;
}

/*
 * Themes commonly do `input[type="checkbox"] { appearance: none }` and then draw their own control
 * with a pseudo-element that this form's markup never provides — leaving an invisible checkbox.
 * Forcing the native control back is the only reliable fix, and it keeps the tick visible.
 */
.sbst-form-root input[type="checkbox"],
.sbst-form-root select {
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
}

/* ---------------------------------------------------------------- loading */

.sbst-form-root .sbst-form-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: var(--sbst-ink-soft) !important;
}

.sbst-form-root .sbst-spinner {
    width: 1.75rem;
    height: 1.75rem;
    border: 3px solid var(--sbst-line);
    border-top-color: var(--sbst-accent);
    border-radius: 50%;
    animation: sbst-spin 0.8s linear infinite;
}

@keyframes sbst-spin {
    to { transform: rotate(360deg); }
}

/* Respect a stated preference rather than spinning regardless. */
@media (prefers-reduced-motion: reduce) {
    .sbst-form-root .sbst-spinner { animation-duration: 2.4s; }
    .sbst-form-root .sbst-progress-fill { transition: none; }
}

/* -------------------------------------------------------------- test mode */

/*
 * Deliberately the loudest thing on the page, and deliberately not in the accent colour — it must not
 * look like part of the form's own design, or it stops registering as a warning. Amber on a hazard
 * stripe is the convention for "this is not the real thing".
 */
.sbst-form-root .sbst-testmode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    margin-bottom: 1rem;
    color: #4a3200 !important;
    background-color: #fff4d6 !important;
    border: 2px solid #b8860b !important;
    border-radius: var(--sbst-radius);
    font-size: 0.9375rem;
    font-weight: 600;
}

.sbst-form-root .sbst-testmode-tag {
    padding: 0.15rem 0.5rem;
    color: #ffffff !important;
    background-color: #b8860b !important;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap;
}

/* It stays on a printed application too — a printout is exactly where this gets mistaken for real. */
@media print {
    .sbst-form-root .sbst-testmode {
        display: flex !important;
        border-color: #000000 !important;
    }
}

/* --------------------------------------------------------------- progress */

.sbst-form-root .sbst-progress { margin-bottom: 1.5rem; }

.sbst-form-root .sbst-progress-bar {
    height: 6px;
    background: var(--sbst-line) !important;
    border-radius: 999px;
    overflow: hidden;
}

.sbst-form-root .sbst-progress-fill {
    height: 100%;
    background: var(--sbst-accent) !important;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.sbst-form-root .sbst-progress-label {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: var(--sbst-ink-soft) !important;
}

/* ----------------------------------------------------------------- layout */

.sbst-form-root .sbst-layout {
    display: grid;
    /* Single column until there is genuinely room for the price panel beside the form. */
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 56rem) {
    .sbst-form-root .sbst-layout { grid-template-columns: minmax(0, 1fr) 18rem; }
}

.sbst-form-root .sbst-body { min-width: 0; }

.sbst-form-root .sbst-step-title {
    margin: 0 0 1rem;
    color: var(--sbst-ink) !important;
    font-size: 1.375rem;
    line-height: 1.3;
}

/* Focused programmatically on step change; the ring would otherwise read as an error. */
.sbst-form-root .sbst-step-title:focus { outline: none !important; }

.sbst-form-root .sbst-body h3 {
    margin: 1.5rem 0 0.5rem;
    color: var(--sbst-ink) !important;
    font-size: 1rem;
    font-weight: 600;
}

.sbst-form-root .sbst-lede {
    margin: -0.5rem 0 1rem;
    color: var(--sbst-ink-soft) !important;
}

/* ----------------------------------------------------------------- fields */

.sbst-form-root .sbst-field {
    display: block;
    margin-bottom: var(--sbst-gap);
}

.sbst-form-root .sbst-field-label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--sbst-ink) !important;
    font-weight: 600;
    font-size: 0.9375rem;
}

.sbst-form-root .sbst-field-hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.8125rem;
    color: var(--sbst-ink-soft) !important;
}

.sbst-form-root .sbst-input {
    display: block;
    width: 100%;
    padding: 0.6rem 0.7rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--sbst-ink) !important;
    /* Grey at rest, white when focused — the original's behaviour, and it makes the field being typed
     * into the brightest thing on the step. */
    background-color: var(--sbst-surface-alt) !important;
    background-image: none !important;
    /* 2px, matching the option cards and the original's fields. */
    border: 2px solid var(--sbst-line) !important;
    border-radius: var(--sbst-radius) !important;
    box-shadow: none !important;
}

.sbst-form-root .sbst-input:hover {
    border-color: var(--sbst-accent-line) !important;
}

/* Focus is the one place a visible ring is wanted, so it is set rather than cleared. */
.sbst-form-root .sbst-input:focus,
.sbst-form-root .sbst-input:focus-visible {
    color: var(--sbst-ink) !important;
    background-color: var(--sbst-surface) !important;
    border-color: var(--sbst-accent) !important;
    outline: 2px solid var(--sbst-accent) !important;
    outline-offset: 1px !important;
    box-shadow: none !important;
}

.sbst-form-root .sbst-input.is-invalid {
    border-color: var(--sbst-danger) !important;
    background-color: var(--sbst-danger-soft) !important;
}

/*
 * A menu with nothing in it yet — the school list before a town is chosen, and while it loads.
 *
 * The field is on screen from the start of the step now, so this state is seen on every visit rather
 * than being a rare edge. It has to read as "not your turn" and not as "broken": muted, and the cursor
 * says the click will do nothing before the click is made.
 */
.sbst-form-root .sbst-input:disabled {
    color: var(--sbst-ink-soft) !important;
    /* A step below a resting field, which is itself grey now — otherwise the two are indistinguishable. */
    background-color: var(--sbst-surface-sunk) !important;
    border-color: var(--sbst-line) !important;
    cursor: not-allowed;
    opacity: 1 !important;
}

.sbst-form-root .sbst-input:disabled:hover {
    border-color: var(--sbst-line) !important;
}

.sbst-form-root .sbst-grid-2,
.sbst-form-root .sbst-grid-3 {
    display: grid;
    gap: var(--sbst-gap);
    grid-template-columns: 1fr;
}

@media (min-width: 36rem) {
    .sbst-form-root .sbst-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sbst-form-root .sbst-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Checkbox rows: generous hit area, since these get used on tablets at events. */
.sbst-form-root .sbst-check-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.5rem;
    color: var(--sbst-ink) !important;
    background-color: var(--sbst-surface-alt) !important;
    border: 1px solid var(--sbst-line) !important;
    border-radius: var(--sbst-radius);
    font-weight: 400 !important;
    cursor: pointer;
}

.sbst-form-root .sbst-check-row:hover {
    background-color: var(--sbst-accent-soft) !important;
    border-color: var(--sbst-accent) !important;
}

/* The label wraps the input, so :has gives the whole row a checked state. */
.sbst-form-root .sbst-check-row:has(input:checked) {
    background-color: var(--sbst-accent-soft) !important;
    border-color: var(--sbst-accent) !important;
}

.sbst-form-root .sbst-check-row:focus-within {
    outline: 2px solid var(--sbst-accent) !important;
    outline-offset: 2px !important;
}

/* Stacks a row's label above its note — the row itself is a flex line. */
.sbst-form-root .sbst-check-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.sbst-form-root .sbst-checkbox {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0 !important;
    accent-color: var(--sbst-accent);
    flex: 0 0 auto;
}

.sbst-form-root .sbst-price-tag {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    color: var(--sbst-ink-soft) !important;
}

/* ---------------------------------------------------------------- choices */

.sbst-form-root .sbst-choices {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: 1fr;
    margin-bottom: var(--sbst-gap);
}

@media (min-width: 36rem) {
    .sbst-form-root .sbst-choices { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}

/*
 * Four to a row: the instruments, and the sizes.
 *
 * Both are short labels — 'Violin' through 'Bass', and '1/16' through '4/4' plus 'Not Sure'. On the
 * twelve-rem track the wider choices use, four instruments come out three-and-one and eight sizes
 * become three enormous buttons per row with most of each one empty.
 *
 * A FIXED COLUMN COUNT, not auto-fit. These are sets to be read at a glance, and even rows are what
 * make them read as one; auto-fit packs in however many happen to fit and leaves a ragged last row.
 * Four across puts the instruments on one row and eight sizes on two, stepping down to three and then
 * two so a button is never narrower than 'Not Sure', the longest of the labels.
 *
 * minmax(0, 1fr) rather than 1fr: a track's default minimum is auto, which refuses to shrink below its
 * content and would push the row wider than the form on a narrow phone.
 */
.sbst-form-root .sbst-choices.is-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 26rem) {
    .sbst-form-root .sbst-choices.is-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 34rem) {
    .sbst-form-root .sbst-choices.is-compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A group whose hint sits below it keeps them together — see choiceGroup(). */
.sbst-form-root .sbst-choices.has-hint { margin-bottom: 0.35rem; }

/*
 * The resting card. Every property a theme sets on a button is restated here, because a theme rule
 * for `button` is what these cards would otherwise inherit.
 */
.sbst-form-root .sbst-choice {
    display: flex;
    flex-direction: column;
    /*
     * Centred on both axes, every card, so a row of them reads as a row of equal options.
     *
     * Grid stretches every card in a row to the tallest, so without justify-content a two-line card
     * beside a one-line card left the shorter one's label floating at the top of its own box.
     *
     * text-align carries !important because a theme rule for `button` is what these would otherwise
     * inherit — the same armour as the colours below. That is also why centring cannot be done in a
     * more specific rule for one group: an !important here beats a plain declaration anywhere, however
     * specific, which is exactly how the compact size buttons stayed left-aligned in 1.4.8.
     */
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    /* 44px minimum target — this form is used on tablets at school events. */
    min-height: 44px;
    width: 100%;
    padding: 0.8rem 0.9rem;
    text-align: center !important;
    font-size: 1rem;
    font-weight: 400 !important;
    line-height: 1.5;
    color: var(--sbst-ink) !important;
    /* The near-white card the original used, not plain white — it separates the option from the page. */
    background-color: var(--sbst-surface-alt) !important;
    /* Cleared so a theme's gradient on `button` cannot show through, and so the selected state below is
     * the only thing that paints one. */
    background-image: none !important;
    border: 2px solid var(--sbst-line) !important;
    border-radius: var(--sbst-radius) !important;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    cursor: pointer;
}

/*
 * Hover is deliberately quieter than selected: a tint on the surface and an accent edge. If hover
 * and selected looked the same, the pointer would appear to select everything it passed over.
 */
.sbst-form-root .sbst-choice:hover,
.sbst-form-root .sbst-choice:focus,
.sbst-form-root .sbst-choice:active {
    color: var(--sbst-ink) !important;
    background-color: var(--sbst-accent-soft) !important;
    background-image: none !important;
    border-color: var(--sbst-accent) !important;
    box-shadow: none !important;
    transform: none !important;
}

.sbst-form-root .sbst-choice:focus-visible {
    outline: 2px solid var(--sbst-accent) !important;
    outline-offset: 2px !important;
}

/*
 * Selected. aria-pressed is matched as well as the class so the state cannot go out of sync with
 * what assistive technology is told.
 */
.sbst-form-root .sbst-choice.is-active,
.sbst-form-root .sbst-choice[aria-pressed="true"],
.sbst-form-root .sbst-choice.is-active:hover,
.sbst-form-root .sbst-choice[aria-pressed="true"]:hover,
.sbst-form-root .sbst-choice.is-active:focus,
.sbst-form-root .sbst-choice[aria-pressed="true"]:focus {
    color: var(--sbst-ink) !important;
    /* The original's selected fill: a 135° wash from #ebf3fd to #e3f2fd. background-color stays as the
     * fallback under it, so the state still reads if a theme somehow wins the background-image. */
    background-color: var(--sbst-accent-soft) !important;
    background-image: linear-gradient(135deg, var(--sbst-accent-soft) 0%, var(--sbst-accent-soft-alt) 100%) !important;
    border-color: var(--sbst-accent) !important;
    /*
     * An inner edge on top of the 2px border, so selection is legible without relying on colour.
     *
     * This is also what keeps selected distinct from hover, which the original could not manage: its
     * hover fill was #ebf3fd and its selected fill started at the same #ebf3fd, so passing the pointer
     * over an option looked very much like choosing it. Here hover gets the fill and selected gets the
     * fill, the inner edge and a blue title.
     */
    box-shadow: inset 0 0 0 1px var(--sbst-accent) !important;
}

.sbst-form-root .sbst-choice-title {
    color: inherit !important;
    font-weight: 600;
}

.sbst-form-root .sbst-choice.is-active .sbst-choice-title,
.sbst-form-root .sbst-choice[aria-pressed="true"] .sbst-choice-title {
    color: var(--sbst-accent) !important;
}

.sbst-form-root .sbst-choice-sub {
    font-size: 0.8125rem;
    color: var(--sbst-ink-soft) !important;
}

/* ------------------------------------------------------------ price panel */

.sbst-form-root .sbst-aside {
    align-self: start;
    padding: 1rem;
    color: var(--sbst-ink) !important;
    background-color: var(--sbst-surface-alt) !important;
    border: 1px solid var(--sbst-line) !important;
    border-radius: var(--sbst-radius);
}

@media (min-width: 56rem) {
    /* Stays in view while the form is scrolled — the cost should never be out of sight. */
    .sbst-form-root .sbst-aside { position: sticky; top: 1.5rem; }
}

.sbst-form-root .sbst-aside h3 {
    margin: 0 0 0.75rem;
    color: var(--sbst-ink) !important;
    font-size: 1rem;
}

.sbst-form-root .sbst-price-line {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.3rem 0;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
}

.sbst-form-root .sbst-price-line.is-muted { color: var(--sbst-ink-soft) !important; }

.sbst-form-root .sbst-price-line.is-total {
    margin-top: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--sbst-line) !important;
    font-weight: 700;
}

.sbst-form-root .sbst-price-recurring {
    margin: 0.4rem 0 0;
    font-size: 0.875rem;
    color: var(--sbst-ink-soft) !important;
}

.sbst-form-root .sbst-price-note,
.sbst-form-root .sbst-price-empty {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    color: var(--sbst-ink-soft) !important;
}

/* ----------------------------------------------------------------- terms */

.sbst-form-root .sbst-terms {
    margin-bottom: var(--sbst-gap);
    background-color: var(--sbst-surface-alt) !important;
    border: 1px solid var(--sbst-line) !important;
    border-radius: var(--sbst-radius);
}

.sbst-form-root .sbst-terms-summary {
    padding: 0.7rem 0.9rem;
    color: var(--sbst-accent) !important;
    font-weight: 600;
    text-decoration: underline !important;
    cursor: pointer;
    /* The marker is kept: it is what signals this opens, and a link that does nothing visible reads
       as broken. list-style is reset only so themes cannot swap it for an image. */
    list-style: disclosure-closed inside !important;
}

.sbst-form-root .sbst-terms[open] > .sbst-terms-summary {
    list-style: disclosure-open inside !important;
    border-bottom: 1px solid var(--sbst-line) !important;
}

.sbst-form-root .sbst-terms-summary:hover,
.sbst-form-root .sbst-terms-summary:focus-visible {
    color: var(--sbst-accent-strong) !important;
    background-color: var(--sbst-accent-soft) !important;
}

.sbst-form-root .sbst-terms-body {
    /* Long terms scroll inside the box rather than pushing the signature off the screen. */
    max-height: 22rem;
    overflow-y: auto;
    padding: 0.2rem 0.9rem 0.9rem;
    font-size: 0.9375rem;
}

/*
 * The terms are author-written HTML, so every tag the sanitiser allows is styled here — an <h3> or a
 * <ul> that inherits nothing from the theme would come out unrecognisable.
 */
.sbst-form-root .sbst-terms-body h1,
.sbst-form-root .sbst-terms-body h2,
.sbst-form-root .sbst-terms-body h3,
.sbst-form-root .sbst-terms-body h4,
.sbst-form-root .sbst-terms-body h5,
.sbst-form-root .sbst-terms-body h6,
.sbst-form-root .sbst-terms-heading {
    margin: 1rem 0 0.25rem;
    color: var(--sbst-ink) !important;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.4;
}

/* The first heading sits against the summary border; the others need room above. */
.sbst-form-root .sbst-terms-body > :first-child { margin-top: 0.6rem; }

.sbst-form-root .sbst-terms-body p,
.sbst-form-root .sbst-terms-body li {
    margin: 0 0 0.6rem;
    color: var(--sbst-ink) !important;
}

.sbst-form-root .sbst-terms-body ul,
.sbst-form-root .sbst-terms-body ol {
    margin: 0 0 0.6rem;
    padding-left: 1.4rem;
}

.sbst-form-root .sbst-terms-body li { margin-bottom: 0.25rem; }

.sbst-form-root .sbst-terms-body ul { list-style: disc outside !important; }
.sbst-form-root .sbst-terms-body ol { list-style: decimal outside !important; }

.sbst-form-root .sbst-terms-body a {
    color: var(--sbst-accent) !important;
    text-decoration: underline !important;
}

.sbst-form-root .sbst-terms-body strong,
.sbst-form-root .sbst-terms-body b { font-weight: 700; }

.sbst-form-root .sbst-terms-body blockquote {
    margin: 0 0 0.6rem;
    padding-left: 0.8rem;
    border-left: 3px solid var(--sbst-line) !important;
    color: var(--sbst-ink-soft) !important;
}

.sbst-form-root .sbst-terms-body hr {
    height: 1px;
    margin: 0.9rem 0;
    background-color: var(--sbst-line) !important;
    border: 0 !important;
}

/* A table in the terms must not widen the page — it scrolls inside its own box. */
.sbst-form-root .sbst-terms-body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    margin: 0 0 0.6rem;
    border-collapse: collapse;
}

.sbst-form-root .sbst-terms-body th,
.sbst-form-root .sbst-terms-body td {
    padding: 0.35rem 0.5rem;
    color: var(--sbst-ink) !important;
    border: 1px solid var(--sbst-line) !important;
    text-align: left;
}

.sbst-form-root .sbst-terms-body img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------- signature */

.sbst-form-root .sbst-signature-wrap { margin-bottom: var(--sbst-gap); }

.sbst-form-root .sbst-signature {
    display: block;
    width: 100%;
    /* Fixed aspect so the drawn signature is not distorted when the canvas is scaled. */
    aspect-ratio: 600 / 160;
    background-color: var(--sbst-surface) !important;
    border: 1px dashed var(--sbst-line) !important;
    border-radius: var(--sbst-radius);
    /* Stop a drag from scrolling the page while signing on a touch device. */
    touch-action: none;
    cursor: crosshair;
}

/* ------------------------------------------------------------------ stripe */

.sbst-form-root .sbst-stripe-mount {
    padding: 0.8rem;
    background-color: var(--sbst-surface) !important;
    border: 1px solid var(--sbst-line) !important;
    border-radius: var(--sbst-radius);
    /* Stripe's iframe needs room before it reports its height, or the field jumps. */
    min-height: 3.5rem;
}

/* ---------------------------------------------------- notices and messages */

.sbst-form-root .sbst-notice,
.sbst-form-notice {
    padding: 0.8rem 1rem;
    margin-bottom: var(--sbst-gap);
    color: var(--sbst-ink) !important;
    background-color: var(--sbst-accent-soft) !important;
    border-left: 4px solid var(--sbst-accent) !important;
    border-radius: 0 var(--sbst-radius) var(--sbst-radius) 0;
}

.sbst-form-root .sbst-notice p,
.sbst-form-notice p { margin: 0; }

.sbst-form-root .sbst-error {
    padding: 0.8rem 1rem;
    margin-bottom: var(--sbst-gap);
    color: var(--sbst-danger) !important;
    background-color: var(--sbst-danger-soft) !important;
    border-left: 4px solid var(--sbst-danger) !important;
    border-radius: 0 var(--sbst-radius) var(--sbst-radius) 0;
}

.sbst-form-root .sbst-error p { margin: 0 0 0.4rem; font-weight: 600; }
.sbst-form-root .sbst-error ul { margin: 0; padding-left: 1.2rem; }
.sbst-form-root .sbst-error li { color: var(--sbst-danger) !important; }

/* -------------------------------------------------------------- navigation */

.sbst-form-root .sbst-nav {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sbst-line) !important;
}

.sbst-form-root .sbst-btn {
    min-height: 44px;
    padding: 0.65rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    border: 1px solid transparent !important;
    border-radius: var(--sbst-radius) !important;
    box-shadow: none !important;
    transform: none !important;
    text-shadow: none !important;
    filter: none !important;
    cursor: pointer;
}

.sbst-form-root .sbst-btn:focus-visible {
    outline: 2px solid var(--sbst-accent) !important;
    outline-offset: 2px !important;
}

.sbst-form-root .sbst-btn.is-primary {
    /* Pushed right so Continue is always in the same place regardless of Back's presence. */
    margin-left: auto;
    color: var(--sbst-accent-ink) !important;
    /* The original's blue wash, #3498db into #2980b9. background-color underneath is the fallback. */
    background-color: var(--sbst-accent) !important;
    background-image: linear-gradient(135deg, var(--sbst-accent) 0%, var(--sbst-accent-strong) 100%) !important;
}

/* Flat and darker on hover — a change of kind, not just of shade, so it reads on a gradient. */
.sbst-form-root .sbst-btn.is-primary:hover:not(:disabled),
.sbst-form-root .sbst-btn.is-primary:focus:not(:disabled),
.sbst-form-root .sbst-btn.is-primary:active:not(:disabled) {
    color: var(--sbst-accent-ink) !important;
    background-color: var(--sbst-accent-strong) !important;
    background-image: none !important;
    border-color: transparent !important;
}

.sbst-form-root .sbst-btn.is-secondary {
    color: var(--sbst-ink) !important;
    background-color: var(--sbst-surface) !important;
    border-color: var(--sbst-line) !important;
}

.sbst-form-root .sbst-btn.is-secondary:hover:not(:disabled),
.sbst-form-root .sbst-btn.is-secondary:focus:not(:disabled),
.sbst-form-root .sbst-btn.is-secondary:active:not(:disabled) {
    color: var(--sbst-ink) !important;
    background-color: var(--sbst-surface-alt) !important;
    border-color: var(--sbst-accent) !important;
}

.sbst-form-root .sbst-btn.is-link {
    padding: 0.35rem 0;
    color: var(--sbst-accent) !important;
    background-color: transparent !important;
    border-color: transparent !important;
    text-decoration: underline !important;
}

.sbst-form-root .sbst-btn.is-link:hover:not(:disabled),
.sbst-form-root .sbst-btn.is-link:focus:not(:disabled) {
    color: var(--sbst-accent-strong) !important;
    background-color: transparent !important;
}

.sbst-form-root .sbst-btn:disabled {
    opacity: 0.6 !important;
    cursor: progress;
}

/* ------------------------------------------------------------ confirmation */

.sbst-form-root .sbst-confirmation {
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--sbst-ink) !important;
    background-color: var(--sbst-surface-alt) !important;
    border: 1px solid var(--sbst-line) !important;
    border-radius: var(--sbst-radius);
}

.sbst-form-root .sbst-confirmation h2 {
    margin: 0 0 0.75rem;
    color: var(--sbst-success) !important;
}

.sbst-form-root .sbst-reference {
    color: var(--sbst-ink) !important;
    font-size: 1.125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------- print */

@media print {
    .sbst-form-root .sbst-nav,
    .sbst-form-root .sbst-progress,
    .sbst-form-root .sbst-stripe-mount { display: none !important; }
}