/* ==========================================================================
   Salesforce Web-to-Lead Form Styles
   All selectors prefixed with sbi-sf- to avoid Divi conflicts
   ========================================================================== */

/* Custom Properties */
.sbi-sf-form-wrap {
    --sbi-sf-primary: var(--sp-color-action-primary-bg);
    --sbi-sf-primary-hover: var(--sp-color-action-primary-hover-bg);
    --sbi-sf-primary-active: var(--sp-color-action-primary-active-bg);
    --sbi-sf-primary-text: var(--sp-color-action-primary-text);
    --sbi-sf-link: var(--sp-color-link-default);
    --sbi-sf-link-hover: var(--sp-color-link-hover);
    --sbi-sf-error-color: var(--sp-color-text-danger);
    --sbi-sf-error-ring: var(--sp-color-status-danger-soft);
    --sbi-sf-border: var(--sp-color-border-subtle);
    --sbi-sf-border-strong: light-dark(var(--sp-color-border-strong), var(--sp-color-text-muted));
    --sbi-sf-border-focus: var(--sp-color-border-selected);
    /* Dark control outlines use the Programs control role, which keeps 3:1
       against the night surfaces. */
    --sbi-sf-border-control: light-dark(var(--sp-color-border-subtle), var(--program-input-border));
    --sbi-sf-focus-ring: var(--sp-state-focus-ring-color);
    --sbi-sf-bg: var(--sp-color-layer-input);
    --sbi-sf-bg-page: var(--sp-color-layer-canvas);
    --sbi-sf-bg-surface: var(--sp-color-layer-2);
    --sbi-sf-bg-section: var(--sp-color-layer-1);
    --sbi-sf-bg-muted: var(--sp-color-layer-3);
    --sbi-sf-bg-hover: var(--sp-color-layer-hover);
    --sbi-sf-bg-active: var(--sp-color-layer-active);
    --sbi-sf-bg-disabled: var(--sp-color-layer-disabled);
    --sbi-sf-bg-selected: var(--sp-color-layer-selected);
    --sbi-sf-text: var(--sp-color-text-primary);
    --sbi-sf-text-strong: var(--sp-color-text-strong);
    --sbi-sf-text-muted: var(--sp-color-text-muted);
    --sbi-sf-text-disabled: var(--sp-color-text-disabled);
    --sbi-sf-success: var(--sp-ref-color-success-700);
    --sbi-sf-success-soft: var(--sp-ref-color-success-50);
    --sbi-sf-select-arrow: var(--sp-color-text-muted);
    --sbi-sf-debug-accent: var(--sp-ref-color-utility-yellow-500);
    --sbi-sf-debug-border: color-mix(in srgb, var(--sbi-sf-debug-accent) 52%, var(--sbi-sf-border));
    --sbi-sf-debug-bg: color-mix(in srgb, var(--sbi-sf-debug-accent) 12%, var(--sbi-sf-bg-section));
    --sbi-sf-debug-field-bg: var(--sp-color-layer-canvas);
    --sbi-sf-code-bg: var(--sp-color-layer-3);
    --sbi-sf-code-text: var(--sp-color-text-strong);
    --sbi-sf-radius: var(--sp-layout-radius-sm);
    --sbi-sf-radius-md: var(--sp-layout-radius-md);
    --sbi-sf-spacing: var(--sp-ref-space-5);
    --sbi-sf-font: var(--sp-type-family-sans);
    --sbi-sf-heading-font: var(--sp-type-family-heading);
    --sbi-sf-motion-duration: var(--sp-motion-duration-standard);
    --sbi-sf-motion-ease: var(--sp-motion-ease-standard);
    --sbi-sf-gap-sm: var(--sp-ref-space-2);
    --sbi-sf-gap-md: var(--sp-ref-space-4);
    --sbi-sf-gap-lg: var(--sp-ref-space-5);
    --sbi-sf-gap-xl: var(--sp-ref-space-6);
    --sbi-sf-control-height: 3rem;
    --sbi-sf-control-pad-x: var(--sp-ref-space-4);
}

.sbi-sf-submit-error {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid light-dark(#b32d2e, var(--sp-color-border-danger));
    border-radius: 0.375rem;
    color: light-dark(#8a1f20, var(--sp-color-text-danger));
    background: light-dark(#fcf0f1, var(--sp-color-status-danger-soft));
}

/* Divi CSS Resets */
.sbi-sf-form-wrap,
.sbi-sf-form-wrap *,
.sbi-sf-form-wrap *::before,
.sbi-sf-form-wrap *::after {
    box-sizing: border-box;
}

.sbi-sf-form-wrap {
    max-width: 64rem;
    margin: 0 auto;
    padding: clamp(var(--sp-ref-space-5), 3vw, var(--sp-ref-space-7));
    border: 1px solid var(--sbi-sf-border);
    border-radius: var(--sbi-sf-radius-md);
    background: var(--sbi-sf-bg-surface);
    box-shadow: var(--sp-layout-shadow-card);
    font-family: var(--sbi-sf-font);
    color: var(--sbi-sf-text);
    line-height: var(--sp-type-line-height-body);
}

/*
 * Programs core supplies the shortcode's outer lifecycle container. Keep it
 * structural for this adapter so the Salesforce component remains the single
 * visible card it was designed to be.
 */
#program-salesforce_business.program-container {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Reset Divi's aggressive input styles */
.sbi-sf-form .sbi-sf-input,
.sbi-sf-form .sbi-sf-select,
.sbi-sf-form .sbi-sf-textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none !important;
    border: 1px solid var(--sbi-sf-border-control) !important;
    border-radius: var(--sbi-sf-radius) !important;
    padding: var(--sp-ref-space-3) var(--sbi-sf-control-pad-x) !important;
    font-size: var(--sp-type-size-body) !important;
    font-family: var(--sbi-sf-font) !important;
    color: var(--sbi-sf-text) !important;
    background-color: var(--sbi-sf-bg) !important;
    width: 100% !important;
    min-height: var(--sbi-sf-control-height) !important;
    height: auto !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease), box-shadow var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease);
    line-height: var(--sp-type-line-height-copy) !important;
}

.sbi-sf-form .sbi-sf-input::placeholder,
.sbi-sf-form .sbi-sf-textarea::placeholder {
    color: var(--sbi-sf-text-muted) !important;
    opacity: 1;
}

.sbi-sf-form .sbi-sf-input[type="date"] {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    color-scheme: light;
}

.sbi-sf-form .sbi-sf-input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 1;
}

/* Focus states */
.sbi-sf-form .sbi-sf-input:focus,
.sbi-sf-form .sbi-sf-select:focus,
.sbi-sf-form .sbi-sf-textarea:focus {
    border-color: var(--sbi-sf-border-focus) !important;
    box-shadow: 0 0 0 var(--sp-state-focus-ring-width) var(--sbi-sf-bg-selected) !important;
}

/* Select arrow */
.sbi-sf-form .sbi-sf-select {
    padding-right: calc(var(--sp-ref-space-7) + var(--sp-ref-space-2)) !important;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23525252' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right var(--sp-ref-space-4) center !important;
    background-size: calc(var(--sp-ref-space-4) + var(--sp-ref-space-1)) calc(var(--sp-ref-space-4) + var(--sp-ref-space-1)) !important;
    cursor: pointer;
}

/* Textarea */
.sbi-sf-form .sbi-sf-textarea {
    resize: vertical;
    min-height: calc(var(--sp-ref-space-8) + var(--sp-ref-space-4));
}

/* Multi-step progress */
.sbi-sf-form:not(.sbi-sf-is-stepped) .sbi-sf-stepper {
    display: none;
}

.sbi-sf-stepper {
    margin: 0 0 var(--sbi-sf-gap-xl);
}

.sbi-sf-stepper-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-ref-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sbi-sf-stepper-item {
    margin: 0;
    padding: 0;
}

.sbi-sf-stepper-button {
    display: grid;
    grid-template-columns: var(--sp-ref-space-6) minmax(0, 1fr);
    gap: var(--sp-ref-space-3);
    align-items: center;
    width: 100%;
    min-height: var(--sp-ref-space-8);
    padding: var(--sp-ref-space-3);
    border: 1px solid var(--sbi-sf-border);
    border-radius: var(--sbi-sf-radius);
    background: var(--sbi-sf-bg-surface);
    color: var(--sbi-sf-text-muted);
    font-family: var(--sbi-sf-font);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease), border-color var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease), color var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease), box-shadow var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease);
}

.sbi-sf-stepper-button.is-available:hover,
.sbi-sf-stepper-button.is-available:focus-visible {
    background: var(--sbi-sf-bg-hover);
    border-color: var(--sbi-sf-border-strong);
}

.sbi-sf-stepper-button:focus-visible {
    outline: var(--sp-state-focus-ring-width) solid var(--sbi-sf-focus-ring);
    outline-offset: var(--sp-state-focus-ring-offset);
}

.sbi-sf-stepper-button.is-active {
    background: var(--sbi-sf-bg-selected);
    border-color: var(--sbi-sf-border-focus);
    color: var(--sbi-sf-text-strong);
}

.sbi-sf-stepper-button.is-complete {
    background: var(--sbi-sf-bg-surface);
    border-color: var(--sbi-sf-success);
    color: var(--sbi-sf-text-strong);
}

.sbi-sf-stepper-button:disabled {
    cursor: not-allowed;
    opacity: 0.68;
}

.sbi-sf-stepper-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sp-ref-space-6);
    height: var(--sp-ref-space-6);
    border: 1px solid var(--sbi-sf-border);
    border-radius: 999px;
    background: var(--sbi-sf-bg-section);
    color: var(--sbi-sf-text-muted);
    font-size: var(--sp-type-size-meta);
    font-weight: var(--sp-type-weight-bold);
    line-height: 1;
}

.sbi-sf-stepper-button.is-active .sbi-sf-stepper-number {
    border-color: var(--sbi-sf-primary);
    background: var(--sbi-sf-primary);
    color: var(--sbi-sf-primary-text);
}

.sbi-sf-stepper-button.is-complete .sbi-sf-stepper-number {
    border-color: var(--sbi-sf-success);
    background: var(--sbi-sf-success);
    color: var(--sp-ref-color-white);
}

.sbi-sf-stepper-text {
    display: grid;
    gap: var(--sp-ref-space-1);
    min-width: 0;
}

.sbi-sf-stepper-kicker {
    color: inherit;
    font-size: var(--sp-type-size-label);
    font-weight: var(--sp-type-weight-bold);
    letter-spacing: 0;
    line-height: var(--sp-type-line-height-copy);
    text-transform: uppercase;
}

.sbi-sf-stepper-title {
    color: var(--sbi-sf-text-strong);
    font-size: var(--sp-type-size-body);
    font-weight: var(--sp-type-weight-semibold);
    line-height: var(--sp-type-line-height-copy);
}

.sbi-sf-form.sbi-sf-is-stepped .sbi-sf-step {
    display: none;
}

.sbi-sf-form.sbi-sf-is-stepped .sbi-sf-step.is-active {
    display: block;
}

/* Fieldset / Sections */
.sbi-sf-form .sbi-sf-fieldset {
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    margin: 0;
}

.sbi-sf-form.sbi-sf-is-stepped .sbi-sf-fieldset {
    border-top: 0;
}

.sbi-sf-form .sbi-sf-legend {
    float: none;
    width: 100%;
    margin: 0 0 var(--sp-ref-space-5);
    padding: 0;
    font-family: var(--sbi-sf-heading-font);
    font-size: var(--sp-type-size-heading-2);
    font-weight: var(--sp-type-weight-extrabold);
    line-height: var(--sp-type-line-height-tight);
    color: var(--sbi-sf-text-strong);
}

.sbi-sf-form .sbi-sf-legend--sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sbi-sf-step-header {
    max-width: 44rem;
    margin-bottom: var(--sbi-sf-gap-xl);
}

.sbi-sf-step-title {
    margin: 0 0 var(--sp-ref-space-3);
    padding: 0;
    color: var(--sbi-sf-text-strong);
    font-family: var(--sbi-sf-heading-font);
    font-size: var(--sp-type-size-heading-3);
    font-weight: var(--sp-type-weight-extrabold);
    letter-spacing: 0;
    line-height: var(--sp-type-line-height-tight);
}

.sbi-sf-step-desc {
    max-width: 42rem;
    margin: 0;
    color: var(--sbi-sf-text-muted);
    font-size: var(--sp-type-size-body-lg);
    line-height: var(--sp-type-line-height-body);
}

.sbi-sf-form .sbi-sf-legend + .sbi-sf-grid {
    clear: none;
}

/* Grid Layout */
.sbi-sf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sbi-sf-gap-lg);
    row-gap: calc(var(--sbi-sf-gap-lg) / 2);
}

.sbi-sf-field--full {
    grid-column: 1 / -1;
}

.sbi-sf-field--address-start {
    margin-top: var(--sbi-sf-gap-md);
}

/* Field wrapper */
.sbi-sf-field {
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 0;
}

/* Labels */
.sbi-sf-label {
    font-size: var(--sp-type-size-body);
    font-weight: var(--sp-type-weight-semibold);
    color: var(--sbi-sf-text-strong);
    line-height: var(--sp-type-line-height-copy);
    margin-bottom: var(--sp-ref-space-2);
}

.sbi-sf-required {
    color: var(--sbi-sf-error-color);
}

/* Purpose radio cards */
.sbi-sf-field--purpose {
    grid-column: 1 / -1;
}

.sbi-sf-field--amount > .sbi-sf-label,
.sbi-sf-field--purpose > .sbi-sf-label {
    display: block;
    width: 100%;
    margin-bottom: var(--sp-ref-space-3);
    color: var(--sbi-sf-text-muted);
    font-size: var(--sp-type-size-label);
    font-weight: var(--sp-type-weight-bold);
    line-height: var(--sp-type-line-height-tight);
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
}

.sbi-sf-purpose-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sbi-sf-gap-md);
}

.program-salesforce_business .sbi-sf-form label.sbi-sf-purpose-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-ref-space-3);
    align-items: center;
    min-height: calc(var(--sbi-sf-control-height) + var(--sp-ref-space-2));
    margin: 0;
    padding: var(--sp-ref-space-2) var(--sp-ref-space-3);
    border: 1px solid var(--sbi-sf-border-control);
    border-radius: var(--sbi-sf-radius);
    background: var(--sbi-sf-bg-surface);
    color: var(--sbi-sf-text-strong);
    cursor: pointer;
    line-height: var(--sp-type-line-height-copy);
    transition: background-color var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease), border-color var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease), box-shadow var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease), color var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease);
}

.sbi-sf-form .sbi-sf-purpose-card:hover {
    background: var(--sbi-sf-bg-hover);
    border-color: var(--sbi-sf-border-strong);
}

.sbi-sf-form .sbi-sf-purpose-card:has(.sbi-sf-purpose-radio:checked) {
    background: var(--sbi-sf-bg-selected);
    border-color: var(--sbi-sf-border-focus);
    box-shadow: inset 0 0 0 1px var(--sbi-sf-border-focus);
}

.sbi-sf-form .sbi-sf-purpose-card:has(.sbi-sf-purpose-radio:focus-visible) {
    outline: var(--sp-state-focus-ring-width) solid var(--sbi-sf-focus-ring);
    outline-offset: var(--sp-state-focus-ring-offset);
}

.sbi-sf-form .sbi-sf-purpose-card:has(.sbi-sf-purpose-radio.sbi-sf-has-error) {
    border-color: var(--sbi-sf-error-color);
}

.sbi-sf-purpose-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    opacity: 0;
    pointer-events: none;
}

.sbi-sf-purpose-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--sp-ref-space-4) + var(--sp-ref-space-1));
    height: calc(var(--sp-ref-space-4) + var(--sp-ref-space-1));
    color: inherit;
    transition: color var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease);
}

.sbi-sf-purpose-card:has(.sbi-sf-purpose-radio:checked) .sbi-sf-purpose-card__icon {
    color: inherit;
}

.sbi-sf-purpose-card__svg {
    display: block;
    width: calc(var(--sp-ref-space-4) + var(--sp-ref-space-1));
    height: calc(var(--sp-ref-space-4) + var(--sp-ref-space-1));
    flex: 0 0 auto;
}

.sbi-sf-purpose-card__label {
    min-width: 0;
    color: inherit;
    font-size: var(--sp-type-size-body);
    font-weight: var(--sp-type-weight-medium);
    line-height: var(--sp-type-line-height-copy);
    overflow-wrap: anywhere;
}

/* Amount field */
.sbi-sf-amount-control {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-ref-space-3);
    align-items: stretch;
    --sbi-sf-range-thumb-size: calc(var(--sp-ref-space-6) - var(--sp-ref-space-1));
    --sbi-sf-range-track-size: var(--sp-ref-space-2);
    --sbi-sf-amount-control-height: calc(var(--sp-ref-space-8) * 2);
    --sbi-sf-amount-value-size: calc(var(--sp-type-size-heading-3) * 3);
}

.sbi-sf-amount-wrap {
    position: relative;
    display: grid;
    min-height: var(--sbi-sf-amount-control-height);
    border: 0;
    border-radius: var(--sbi-sf-radius-md);
    background: transparent;
    transition: box-shadow var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease);
}

.sbi-sf-amount-wrap:focus-within {
    box-shadow: 0 0 0 var(--sp-state-focus-ring-width) var(--sbi-sf-focus-ring);
}

.sbi-sf-form .sbi-sf-input--amount {
    grid-area: 1 / 1;
    position: relative;
    z-index: 2;
    min-height: var(--sbi-sf-amount-control-height) !important;
    padding: var(--sp-ref-space-4) var(--sp-ref-space-5) !important;
    border-color: transparent !important;
    border-radius: var(--sbi-sf-radius-md) !important;
    background-color: transparent !important;
    color: var(--sbi-sf-text-strong) !important;
    font-family: var(--sbi-sf-font) !important;
    font-size: var(--sbi-sf-amount-value-size) !important;
    font-weight: var(--sp-type-weight-semibold) !important;
    line-height: var(--sp-type-line-height-tight) !important;
    text-align: center !important;
    opacity: 0;
    caret-color: var(--sbi-sf-primary);
    pointer-events: none;
}

.sbi-sf-form .sbi-sf-input--amount:focus {
    border-color: transparent !important;
    box-shadow: none !important;
}

.sbi-sf-form .sbi-sf-input--amount::selection {
    background: transparent;
    color: transparent;
}

.sbi-sf-amount-wrap.is-editing .sbi-sf-input--amount {
    color: transparent !important;
    opacity: 1;
    pointer-events: auto;
}

.sbi-sf-amount-display {
    grid-area: 1 / 1;
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 100%;
    min-height: var(--sbi-sf-amount-control-height);
    padding: var(--sp-ref-space-4) var(--sp-ref-space-5);
    border: 0;
    border-radius: var(--sbi-sf-radius-md);
    background: transparent;
    color: var(--sbi-sf-text-strong);
    font-family: var(--sbi-sf-font);
    font-size: var(--sbi-sf-amount-value-size);
    font-weight: var(--sp-type-weight-semibold);
    line-height: var(--sp-type-line-height-tight);
    cursor: text;
    opacity: 1;
    transition: opacity var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease);
}

.sbi-sf-amount-display:focus-visible {
    outline: var(--sp-state-focus-ring-width) solid var(--sbi-sf-focus-ring);
    outline-offset: var(--sp-state-focus-ring-offset);
}

.sbi-sf-amount-wrap.is-editing .sbi-sf-amount-display {
    opacity: 1;
    pointer-events: none;
}

.sbi-sf-amount-display__currency,
.sbi-sf-amount-display__value {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.sbi-sf-amount-display__value *,
.sbi-sf-amount-display__value .number,
.sbi-sf-amount-display__value .number__inner {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.sbi-sf-form number-flow {
    font-variant-numeric: tabular-nums;
}

.sbi-sf-amount-slider {
    display: grid;
    gap: var(--sp-ref-space-1);
    min-width: 0;
    padding: 0;
    --sbi-sf-range-progress: 8.16%;
}

.sbi-sf-range-shell {
    position: relative;
    min-height: var(--sbi-sf-range-thumb-size);
    --sbi-sf-range-progress: 8.16%;
}

.sbi-sf-range-track {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: calc(var(--sbi-sf-range-thumb-size) / 2);
    left: calc(var(--sbi-sf-range-thumb-size) / 2);
    height: var(--sbi-sf-range-track-size);
    overflow: hidden;
    border-radius: 999px;
    background: var(--sbi-sf-bg-section);
    transform: translateY(-50%);
    pointer-events: none;
}

.sbi-sf-range-progress {
    display: block;
    width: var(--sbi-sf-range-progress, 8.16%);
    height: 100%;
    border-radius: inherit;
    background: var(--sbi-sf-primary);
    transition: width var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease);
}

.sbi-sf-form .sbi-sf-range {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    inset: 0;
    width: 100%;
    height: var(--sbi-sf-range-thumb-size);
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    outline: none;
    z-index: 2;
}

.sbi-sf-form .sbi-sf-range:focus-visible {
    outline: var(--sp-state-focus-ring-width) solid var(--sbi-sf-focus-ring);
    outline-offset: var(--sp-state-focus-ring-offset);
}

.sbi-sf-form .sbi-sf-range::-webkit-slider-runnable-track {
    height: var(--sbi-sf-range-track-size);
    border-radius: 999px;
    background: linear-gradient(to right, var(--sbi-sf-primary) 0 var(--sbi-sf-range-progress, 8.16%), var(--sbi-sf-bg-section) var(--sbi-sf-range-progress, 8.16%) 100%);
}

.sbi-sf-form .sbi-sf-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--sbi-sf-range-thumb-size);
    height: var(--sbi-sf-range-thumb-size);
    margin-top: calc((var(--sbi-sf-range-track-size) - var(--sbi-sf-range-thumb-size)) / 2);
    border: var(--sp-ref-space-1) solid var(--sbi-sf-primary-text);
    border-radius: 999px;
    background: var(--sbi-sf-primary);
    box-shadow: 0 0 0 1px var(--sbi-sf-primary);
}

.sbi-sf-form .sbi-sf-range::-moz-range-track {
    height: var(--sbi-sf-range-track-size);
    border-radius: 999px;
    background: var(--sbi-sf-bg-section);
}

.sbi-sf-form .sbi-sf-range::-moz-range-progress {
    height: var(--sbi-sf-range-track-size);
    border-radius: 999px;
    background: var(--sbi-sf-primary);
}

.sbi-sf-form .sbi-sf-range::-moz-range-thumb {
    width: var(--sbi-sf-range-thumb-size);
    height: var(--sbi-sf-range-thumb-size);
    border: var(--sp-ref-space-1) solid var(--sbi-sf-primary-text);
    border-radius: 999px;
    background: var(--sbi-sf-primary);
    box-shadow: 0 0 0 1px var(--sbi-sf-primary);
}

.sbi-sf-range-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-ref-space-3);
    color: var(--sbi-sf-text-muted);
    font-size: var(--sp-type-size-body);
    font-weight: var(--sp-type-weight-medium);
    line-height: var(--sp-type-line-height-copy);
}

/* Error States */
.sbi-sf-error {
    display: block;
    min-height: 1lh;
    margin-top: var(--sp-ref-space-2);
    font-size: var(--sp-type-size-meta);
    color: var(--sbi-sf-error-color);
    line-height: var(--sp-type-line-height-copy);
}

.sbi-sf-form .sbi-sf-input.sbi-sf-has-error,
.sbi-sf-form .sbi-sf-select.sbi-sf-has-error,
.sbi-sf-form .sbi-sf-textarea.sbi-sf-has-error {
    border-color: var(--sbi-sf-error-color) !important;
}

.sbi-sf-form .sbi-sf-input--amount.sbi-sf-has-error + .sbi-sf-amount-display,
.sbi-sf-input--google-address-value.sbi-sf-has-error + .sbi-sf-place-autocomplete-wrap .sbi-sf-place-autocomplete {
    border-color: var(--sbi-sf-error-color);
}

.sbi-sf-form .sbi-sf-input.sbi-sf-has-error:focus,
.sbi-sf-form .sbi-sf-select.sbi-sf-has-error:focus,
.sbi-sf-form .sbi-sf-textarea.sbi-sf-has-error:focus {
    box-shadow: 0 0 0 var(--sp-state-focus-ring-width) var(--sbi-sf-error-ring) !important;
}

.sbi-sf-input--google-address-value.sbi-sf-has-error + .sbi-sf-place-autocomplete-wrap .sbi-sf-place-autocomplete:focus-within {
    box-shadow: 0 0 0 var(--sp-state-focus-ring-width) var(--sbi-sf-error-ring);
}

/* Step actions */
.sbi-sf-step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sbi-sf-gap-md);
    align-items: center;
    justify-content: flex-start;
    margin-top: var(--sbi-sf-gap-xl);
}

.sbi-sf-step-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 11rem;
    min-height: auto;
    padding: var(--sp-ref-space-3) var(--sp-ref-space-4);
    border: 1px solid transparent;
    border-radius: var(--sbi-sf-radius);
    background: var(--sbi-sf-primary);
    color: var(--sbi-sf-primary-text);
    font-family: var(--sbi-sf-font);
    font-size: var(--sp-type-size-body);
    font-weight: var(--sp-type-weight-medium);
    line-height: var(--sp-type-line-height-copy);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease), border-color var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease), color var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease);
}

.sbi-sf-step-action:hover {
    background: var(--sbi-sf-primary-hover);
    color: var(--sbi-sf-primary-text);
}

.sbi-sf-step-action:focus-visible {
    outline: var(--sp-state-focus-ring-width) solid var(--sbi-sf-focus-ring);
    outline-offset: var(--sp-state-focus-ring-offset);
}

.sbi-sf-step-action--secondary {
    background: transparent;
    border-color: var(--sbi-sf-border-strong);
    color: var(--sbi-sf-link);
}

.sbi-sf-step-action--secondary:hover {
    background: var(--sbi-sf-bg-hover);
    border-color: var(--sbi-sf-border-focus);
    color: var(--sbi-sf-link-hover);
}

/* Submit Button */
.sbi-sf-submit-wrap {
    text-align: left;
    margin-top: var(--sp-ref-space-2);
}

.sbi-sf-step-actions.sbi-sf-submit-wrap {
    justify-content: flex-start;
    margin-top: var(--sbi-sf-gap-xl);
    text-align: left;
}

.sbi-sf-step-actions.sbi-sf-submit-wrap .sbi-sf-inline-debug {
    flex: 1 0 100%;
    justify-content: flex-end;
    margin-top: 0;
}

.sbi-sf-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-ref-space-2);
    width: auto;
    min-width: 11rem;
    min-height: auto;
    padding: var(--sp-ref-space-3) var(--sp-ref-space-4);
    font-size: var(--sp-type-size-body);
    font-weight: var(--sp-type-weight-medium);
    font-family: var(--sbi-sf-font);
    color: var(--sbi-sf-primary-text);
    background: var(--sbi-sf-primary);
    border: none;
    border-radius: var(--sbi-sf-radius);
    cursor: pointer;
    transition: background-color var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease), opacity var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease);
}

.sbi-sf-submit:hover {
    background: var(--sbi-sf-primary-hover);
}

.sbi-sf-submit:focus-visible {
    outline: var(--sp-state-focus-ring-width) solid var(--sbi-sf-focus-ring);
    outline-offset: var(--sp-state-focus-ring-offset);
}

.sbi-sf-form .sbi-sf-submit .sbi-sf-submit-loading {
    display: none;
    align-items: center;
    gap: var(--sp-ref-space-2);
}

.sbi-sf-submit.sbi-sf-is-loading .sbi-sf-submit-text {
    display: none;
}

.sbi-sf-submit.sbi-sf-is-loading .sbi-sf-submit-loading {
    display: inline-flex;
}

.sbi-sf-submit.sbi-sf-is-loading {
    opacity: 0.72;
    cursor: not-allowed;
    pointer-events: none;
}

.sbi-sf-form[hidden],
.sbi-sf-confirmation[hidden],
.sbi-sf-confirmation-recap[hidden] {
    display: none;
}

.sbi-sf-confirmation {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--sp-ref-space-4);
    align-items: center;
    max-width: 72rem;
    margin: 0 auto;
    border: 1px solid var(--sbi-sf-border);
    border-radius: var(--sbi-sf-radius-md);
    background: var(--sbi-sf-bg-surface);
    color: var(--sbi-sf-text-strong);
    font-size: var(--sp-type-size-heading-3);
    font-weight: var(--sp-type-weight-extrabold);
    line-height: var(--sp-type-line-height-body);
    padding: var(--sp-ref-space-6);
    text-align: left;
}

.sbi-sf-confirmation::before {
    content: "";
    display: block;
    width: calc(var(--sp-ref-space-8) - var(--sp-ref-space-2));
    height: calc(var(--sp-ref-space-8) - var(--sp-ref-space-2));
    border-radius: 999px;
    background-color: var(--sbi-sf-success-soft);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23238b00' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: calc(var(--sp-ref-space-5) + var(--sp-ref-space-1));
}

.sbi-sf-confirmation:focus {
    outline: var(--sp-state-focus-ring-width) solid var(--sbi-sf-focus-ring);
    outline-offset: var(--sp-state-focus-ring-offset);
}

.sbi-sf-confirmation p {
    margin: 0;
    color: var(--sbi-sf-text);
    font-weight: var(--sp-type-weight-semibold);
}

.sbi-sf-confirmation-recap {
    grid-column: 1 / -1;
    margin-top: var(--sp-ref-space-6);
    border-top: 1px solid var(--sbi-sf-border);
    padding-top: var(--sp-ref-space-5);
    color: var(--sbi-sf-text);
    font-size: var(--sp-type-size-body);
    font-weight: var(--sp-type-weight-regular);
}

.sbi-sf-confirmation-recap__groups {
    display: grid;
    gap: var(--sp-ref-space-6);
}

.sbi-sf-confirmation-recap__group {
    border-top: 1px solid var(--sbi-sf-border);
    padding-top: var(--sp-ref-space-5);
}

.sbi-sf-confirmation-recap__group:first-child {
    border-top: 0;
    padding-top: 0;
}

.sbi-sf-confirmation-recap__group-header {
    margin-bottom: var(--sp-ref-space-4);
}

.sbi-sf-confirmation-recap__group-number {
    display: none;
}

.sbi-sf-confirmation-recap__group-title {
    margin: 0;
    color: var(--sbi-sf-text-strong);
    font-family: var(--sbi-sf-font);
    font-size: var(--sp-type-size-heading-5);
    font-weight: var(--sp-type-weight-bold);
    line-height: var(--sp-type-line-height-tight);
}

.sbi-sf-confirmation-recap__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--sp-ref-space-4) var(--sp-ref-space-6);
    margin: 0;
}

.sbi-sf-confirmation-recap__item {
    min-width: 0;
}

.sbi-sf-confirmation-recap__label {
    margin: 0 0 var(--sp-ref-space-1);
    color: var(--sbi-sf-text-muted);
    font-size: var(--sp-type-size-meta);
    font-weight: var(--sp-type-weight-regular);
    line-height: var(--sp-type-line-height-copy);
}

.sbi-sf-confirmation-recap__value {
    margin: 0;
    color: var(--sbi-sf-text-strong);
    font-size: var(--sp-type-size-body);
    font-weight: var(--sp-type-weight-medium);
    line-height: var(--sp-type-line-height-body);
    overflow-wrap: anywhere;
}

.sbi-sf-submit-frame {
    display: none;
}

.sbi-sf-submit-debug {
    max-width: 100%;
    margin-top: var(--sp-space-2);
    border: 1px solid var(--sbi-sf-debug-border);
    border-radius: var(--sbi-sf-radius);
    background: var(--sbi-sf-debug-bg);
    color: var(--sbi-sf-text);
    font-size: var(--sp-type-size-meta);
    line-height: var(--sp-type-line-height-copy);
    overflow-wrap: anywhere;
    padding: var(--sp-space-1) var(--sp-space-2);
    text-align: left;
}

.sbi-sf-submit-debug strong {
    color: var(--sbi-sf-text-strong);
}

.sbi-sf-submit-debug code {
    display: inline;
    border-radius: var(--sp-ref-space-1);
    background: var(--sbi-sf-code-bg);
    color: var(--sbi-sf-code-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.95em;
    padding: calc(var(--sp-ref-space-1) / 2) var(--sp-ref-space-1);
}

/* Spinner animation */
.sbi-sf-spinner {
    animation: sbi-sf-spin 0.8s linear infinite;
}

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

/* Readonly field */
.sbi-sf-form .sbi-sf-input[readonly] {
    background-color: var(--sbi-sf-bg-muted) !important;
    color: var(--sbi-sf-text-muted) !important;
    cursor: default;
}

/* Debug output */
.sbi-sf-debug-panel {
    border: 1px solid var(--sbi-sf-debug-border);
    border-left: var(--sp-ref-space-1) solid var(--sbi-sf-debug-accent);
    border-radius: var(--sbi-sf-radius);
    background: var(--sbi-sf-debug-bg);
    padding: var(--sp-ref-space-4);
    margin: 0 0 var(--sbi-sf-spacing);
}

.sbi-sf-debug-title {
    margin: 0 0 var(--sp-ref-space-3);
    font-size: var(--sp-type-size-body-lg);
    font-weight: var(--sp-type-weight-bold);
    color: var(--sbi-sf-text-strong);
}

.sbi-sf-debug-section {
    margin-top: var(--sp-ref-space-3);
}

.sbi-sf-debug-section h4 {
    margin: 0 0 var(--sp-ref-space-2);
    font-size: var(--sp-type-size-meta);
    font-weight: var(--sp-type-weight-bold);
    color: var(--sbi-sf-text-strong);
    text-transform: uppercase;
}

.sbi-sf-debug-list {
    display: grid;
    gap: var(--sp-ref-space-2);
    margin: 0;
}

.sbi-sf-debug-row,
.sbi-sf-debug-field {
    display: grid;
    gap: var(--sp-ref-space-1);
    min-width: 0;
}

.sbi-sf-debug-row {
    grid-template-columns: minmax(calc(var(--sp-ref-space-8) * 1.875), calc(var(--sp-ref-space-8) * 2.5)) minmax(0, 1fr);
    align-items: start;
}

.sbi-sf-debug-row dt {
    font-weight: var(--sp-type-weight-bold);
    color: var(--sbi-sf-text-strong);
}

.sbi-sf-debug-row dd {
    min-width: 0;
    margin: 0;
}

.sbi-sf-debug-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(calc(var(--sp-ref-space-8) * 3.4375), 1fr));
    gap: var(--sp-ref-space-2);
}

.sbi-sf-debug-field {
    border: 1px solid var(--sbi-sf-debug-border);
    border-radius: var(--sbi-sf-radius);
    background: var(--sbi-sf-debug-field-bg);
    padding: var(--sp-ref-space-2);
}

.sbi-sf-debug-field strong,
.sbi-sf-debug-field span {
    font-size: var(--sp-type-size-label);
    line-height: var(--sp-type-line-height-copy);
}

.sbi-sf-debug-field strong {
    color: var(--sbi-sf-text-strong);
}

.sbi-sf-debug-field span {
    color: var(--sbi-sf-text-muted);
}

.sbi-sf-debug-panel code,
.sbi-sf-debug-chip code {
    display: inline-block;
    max-width: 100%;
    border-radius: var(--sp-ref-space-1);
    background: var(--sbi-sf-code-bg);
    color: var(--sbi-sf-code-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: var(--sp-type-size-label);
    line-height: var(--sp-type-line-height-copy);
    overflow-wrap: anywhere;
    padding: calc(var(--sp-ref-space-1) / 2) var(--sp-ref-space-1);
}

.sbi-sf-debug-chip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-ref-space-1);
    margin-top: var(--sp-ref-space-2);
}

.sbi-sf-form-debug {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-ref-space-2);
    margin: 0 0 var(--sbi-sf-spacing);
    padding: var(--sp-ref-space-2) var(--sp-ref-space-3);
    border: 1px dashed var(--sbi-sf-debug-border);
    border-radius: var(--sbi-sf-radius);
    background: color-mix(in srgb, var(--sbi-sf-debug-bg) 52%, transparent);
    color: var(--sbi-sf-text-muted);
    font-size: var(--sp-type-size-label);
    line-height: var(--sp-type-line-height-copy);
}

.sbi-sf-form-debug strong {
    color: var(--sbi-sf-text);
    font-size: var(--sp-type-size-label);
}

.sbi-sf-form-debug code,
.sbi-sf-inline-debug code {
    border-radius: 999px;
    background: color-mix(in srgb, var(--sbi-sf-code-bg) 64%, transparent);
    color: var(--sbi-sf-code-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: var(--sp-type-size-label);
    line-height: var(--sp-type-line-height-copy);
    overflow-wrap: anywhere;
    padding: calc(var(--sp-ref-space-1) / 2) var(--sp-ref-space-2);
}

.sbi-sf-inline-debug {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-ref-space-1);
    margin-top: var(--sp-ref-space-1);
    opacity: 0.78;
}

.sbi-sf-inline-debug__prefix {
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--sbi-sf-debug-bg);
    color: var(--sbi-sf-text-muted);
    font-size: var(--sp-type-size-label);
    font-weight: var(--sp-type-weight-bold);
    letter-spacing: 0;
    line-height: var(--sp-type-line-height-copy);
    padding: calc(var(--sp-ref-space-1) / 2) var(--sp-ref-space-1);
}

.sbi-sf-submit-wrap .sbi-sf-inline-debug {
    justify-content: center;
    margin-top: var(--sp-ref-space-2);
}

/* Google Places autocomplete widget */
.sbi-sf-place-autocomplete-wrap {
    width: 100%;
}

.sbi-sf-place-autocomplete {
    display: block;
    width: 100%;
    height: var(--sbi-sf-control-height);
    min-height: var(--sbi-sf-control-height);
    border: 1px solid var(--sbi-sf-border);
    border-radius: var(--sbi-sf-radius);
    background-color: var(--sbi-sf-bg);
    color: var(--sbi-sf-text);
    color-scheme: light;
    font: inherit;
    font-family: var(--sbi-sf-font);
    font-size: var(--sp-type-size-body);
    line-height: var(--sp-type-line-height-copy);
    transition: border-color var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease), box-shadow var(--sbi-sf-motion-duration) var(--sbi-sf-motion-ease);
}

.sbi-sf-place-autocomplete:focus-within {
    border-color: var(--sbi-sf-border-focus);
    box-shadow: 0 0 0 var(--sp-state-focus-ring-width) var(--sbi-sf-bg-selected);
}

.sbi-sf-place-autocomplete::part(input) {
    height: calc(var(--sbi-sf-control-height) - 2px);
    min-height: calc(var(--sbi-sf-control-height) - 2px);
    padding: var(--sp-ref-space-3) var(--sbi-sf-control-pad-x);
    color: var(--sbi-sf-text);
    background: transparent;
    box-sizing: border-box;
    font-family: var(--sbi-sf-font);
    font-size: var(--sp-type-size-body);
    line-height: var(--sp-type-line-height-copy);
}

.sbi-sf-place-autocomplete::part(focus-ring) {
    display: none;
}

.sbi-sf-place-autocomplete::part(prediction-list) {
    margin-top: var(--sp-ref-space-1);
    border: 1px solid var(--sbi-sf-border);
    border-radius: var(--sbi-sf-radius);
    background: var(--sbi-sf-bg);
    box-shadow: var(--sp-layout-shadow-dropdown);
    overflow: hidden;
}

.sbi-sf-place-autocomplete::part(prediction-item) {
    padding: var(--sp-ref-space-2) var(--sp-ref-space-3);
    color: var(--sbi-sf-text-muted);
    font-family: var(--sbi-sf-font);
    font-size: var(--sp-type-size-meta);
    line-height: var(--sp-type-line-height-copy);
}

.sbi-sf-place-autocomplete::part(prediction-item-selected) {
    background: var(--sbi-sf-bg-hover);
}

.sbi-sf-place-autocomplete::part(prediction-item-main-text) {
    color: var(--sbi-sf-text-strong);
}

.sbi-sf-place-autocomplete::part(prediction-item-match) {
    color: var(--sbi-sf-link);
    font-weight: var(--sp-type-weight-semibold);
}

.sbi-sf-place-autocomplete::part(prediction-item-secondary-text) {
    color: var(--sbi-sf-text-muted);
}

.sbi-sf-field--google-address-ready .sbi-sf-input--google-address-value {
    display: none !important;
}

/* Responsive: collapse to 1 column on mobile */
@media (max-width: 768px) {
    .sbi-sf-grid {
        grid-template-columns: 1fr;
    }

    .sbi-sf-purpose-grid {
        grid-template-columns: 1fr;
    }

    .sbi-sf-stepper-list {
        grid-template-columns: 1fr;
    }

    .sbi-sf-stepper-button {
        grid-template-columns: var(--sp-ref-space-6) minmax(0, 1fr);
        min-height: var(--sp-ref-space-8);
        padding: var(--sp-ref-space-3);
    }

    .sbi-sf-stepper-number {
        width: var(--sp-ref-space-6);
        height: var(--sp-ref-space-6);
        font-size: var(--sp-type-size-meta);
    }

    .sbi-sf-stepper-kicker {
        font-size: var(--sp-type-size-meta);
    }

    .sbi-sf-stepper-title {
        font-size: var(--sp-type-size-body);
    }

    .sbi-sf-form-wrap {
        padding: var(--sp-ref-space-4);
    }

    .sbi-sf-form .sbi-sf-fieldset {
        padding: 0;
    }

    .sbi-sf-form .sbi-sf-legend {
        font-size: var(--sp-type-size-heading-3);
    }

    .sbi-sf-grid {
        gap: var(--sp-ref-space-5);
    }

    .sbi-sf-amount-control {
        grid-template-columns: 1fr;
        gap: var(--sp-ref-space-3);
    }

    .sbi-sf-step-actions,
    .sbi-sf-step-actions.sbi-sf-submit-wrap {
        flex-direction: column;
        align-items: stretch;
    }

    .sbi-sf-step-action {
        width: auto;
    }

    .sbi-sf-submit {
        width: auto;
    }

    .sbi-sf-step-actions.sbi-sf-submit-wrap .sbi-sf-inline-debug {
        justify-content: flex-start;
    }

    .sbi-sf-debug-row {
        grid-template-columns: 1fr;
    }
}