/* Stripe-inspired native inputs — review draft, 2026-09-14.
* Load after theme styles; opt in with class="stripe-inputs" on an existing
* form/container. data-input-variant="classic|crisp|soft". No layout rules.
* Appearance-only: no payload, validation logic, required, disabled or names change.
* Border/shadow/background !important is deliberately limited to opted-in controls
* to override existing theme validation and plainform !important declarations.
* Native check/radio/file/range controls require .si-choice/.si-file/.si-range
* so hidden stars, card-radio controls and upload widgets are not unintentionally reset.
* Existing .invalid/.empty-invalid/.is-invalid and aria-invalid stay authoritative.
* The CRM form-builder's "areameasurement" and "location" field types render fused,
* inline-styled composite widgets (unit-select + value-input; address-input + "Add
* Manually" button with shared borders) inside an otherwise plain form. Their own
* known classes (.location-component-input, .location-detailed-address, .location-city,
* .location-state, .location-zipcode, .area-value-input, .area-unit-select) are excluded
* from the base rule below so opting a whole #layoutDemo form in doesn't put a second
* box around fields that already have their own fused border/background from the widget.
*/
.stripe-inputs {
 --si-accent: #0570de;
 --si-ring: rgb(5 112 222 / 18%);
 --si-text: #30313d;
 --si-placeholder: #667085;
 --si-label: #30313d;
 --si-border: #c3cbd5;
 --si-surface: #fff;
 --si-radius: 6px;
 --si-height: 42px;
 --si-font-size: 14px;
 --si-shadow: 0 1px 2px rgb(0 0 0 / 5%);
 --si-error: #ef4444;
 --si-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* The classic mock uses a brand accent; the other variants use shared Stripe blue.
* This maps the proposed accents, not a claim about exact current brand tokens. */
.stripe-inputs[data-input-variant="classic"][data-input-theme="proofpros"],
.stripe-inputs[data-input-variant="classic"][data-input-theme="proofseal"] {
 --si-accent: #2563eb;
 --si-ring: rgb(37 99 235 / 18%);
}
.stripe-inputs[data-input-variant="classic"][data-input-theme="drivewayjuice"] {
 --si-accent: #b45309;
 --si-ring: rgb(180 83 9 / 18%);
}
.stripe-inputs[data-input-variant="crisp"] {
 --si-border: #8995a4;
 --si-radius: 4px;
 --si-shadow: none;
}
.stripe-inputs[data-input-variant="soft"] {
 --si-surface: #f6f8fa;
 --si-radius: 8px;
 --si-height: 48px;
 --si-shadow: none;
}
/* The ProofSeal quote wizard (theme-proofseal_customer/js/proofseal_quote_wizard.js)
* unconditionally moves this exact #quote card into #dj-slide-1 on init — it never
* stays in its original spot on a real page load. #dj-slide-1 is a step inside a
* fixed-height wizard card (.dj-slides) sized for its shorter dynamic steps; the
* comfortable 44px control height + full label spacing used everywhere else made
* this one embedded copy of the form taller than that fixed budget, which surfaced
* as an internal scrollbar clipping the submit button.
* Originally scoped to #dj-slide-1 so it only applied post-move — but the move is
* a synchronous DOM append on load, so for an instant before it runs the form sits
* in its original position at full (44px/112px) sizing, then visibly shrinks the
* moment the JS relocates it. Keying off .dj-wizard-managed (only ever used on
* this one form) instead of #dj-slide-1 applies the tightened sizing from first
* paint, before the move happens, so there's no visible jump either way. */
.stripe-inputs.dj-wizard-managed {
 --si-height: 38px;
}
.stripe-inputs.dj-wizard-managed[data-input-variant] textarea:not([hidden]) {
 min-block-size: 64px;
}
.stripe-inputs.dj-wizard-managed label:not(:has(> input.si-choice)) {
 /* The generic label rule below sets margin-block-end and font with
 * !important, so a plain declaration here is a silent no-op regardless of
 * specificity — !important is required here too to actually shrink the
 * gap/font. */
 margin-block-end: 2px !important;
 font-size: 13px !important;
}
.stripe-inputs.dj-wizard-managed .field-stack,
.stripe-inputs.dj-wizard-managed .field {
 gap: 8px;
}
.stripe-inputs.dj-wizard-managed[data-input-variant] :is(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select, textarea) {
 font-size: 14px;
}
.stripe-inputs[data-input-variant] :is(input:not([type]):where(:not(.location-component-input):not(.area-value-input)), input[type="text"]:where(:not(.location-component-input):not(.location-detailed-address):not(.location-city):not(.location-state):not(.location-zipcode)), input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"]:where(:not(.area-value-input)), input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select:where(:not(.area-unit-select)), textarea) {
 box-sizing: border-box;
 min-inline-size: 0;
 max-inline-size: 100%;
 min-block-size: var(--si-height);
 padding: 9px 12px;
 border-width: 1px !important;
 border-style: solid !important;
 border-color: var(--si-border) !important;
 border-image: none !important;
 border-radius: var(--si-radius);
 background-color: var(--si-surface) !important;
 color: var(--si-text);
 box-shadow: var(--si-shadow) !important;
 font: 400 var(--si-font-size)/1.4 var(--si-font);
 letter-spacing: normal;
 text-transform: none;
 transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.stripe-inputs[data-input-variant] :is(input:not([type]):where(:not(.location-component-input):not(.area-value-input)), input[type="text"]:where(:not(.location-component-input):not(.location-detailed-address):not(.location-city):not(.location-state):not(.location-zipcode)), input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"]:where(:not(.area-value-input)), input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select:where(:not(.area-unit-select)), textarea)::placeholder {
 color: var(--si-placeholder);
 opacity: 1;
}
.stripe-inputs[data-input-variant] :is(input:not([type]):where(:not(.location-component-input):not(.area-value-input)), input[type="text"]:where(:not(.location-component-input):not(.location-detailed-address):not(.location-city):not(.location-state):not(.location-zipcode)), input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"]:where(:not(.area-value-input)), input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select:where(:not(.area-unit-select)), textarea):where(:enabled):hover {
 border-color: #8995a4 !important;
}
.stripe-inputs[data-input-variant] :is(input:not([type]):where(:not(.location-component-input):not(.area-value-input)), input[type="text"]:where(:not(.location-component-input):not(.location-detailed-address):not(.location-city):not(.location-state):not(.location-zipcode)), input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"]:where(:not(.area-value-input)), input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select:where(:not(.area-unit-select)), textarea):focus {
 border-color: var(--si-accent) !important;
 outline: 2px solid transparent;
 outline-offset: 2px;
 box-shadow: 0 0 0 3px var(--si-ring) !important;
 background-color: #fff !important;
}
.stripe-inputs[data-input-variant="crisp"] :is(input:not([type]):where(:not(.location-component-input):not(.area-value-input)), input[type="text"]:where(:not(.location-component-input):not(.location-detailed-address):not(.location-city):not(.location-state):not(.location-zipcode)), input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"]:where(:not(.area-value-input)), input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select:where(:not(.area-unit-select)), textarea):focus {
 outline-color: var(--si-accent);
 box-shadow: none !important;
}
.stripe-inputs[data-input-variant] select:where(:not(.area-unit-select)) {
 /* appearance: auto left the OS paint its own border/background chrome on top
 * of ours, so the select's border never matched input/textarea pixel-for-pixel
 * across browsers. Draw a custom chevron instead so the border, radius and
 * background rules above are the only thing controlling how the box looks;
 * keyboard behavior and the native OS dropdown panel are unaffected. */
 appearance: none;
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 12px center;
 padding-right: 34px;
}
.stripe-inputs[data-input-variant] select:where(:not(.area-unit-select))[multiple] {
 appearance: auto;
 background-image: none;
 padding-right: 12px;
}
/* Chrome/Edge draw date/time inputs from internal shadow parts that default to
* their own background and hover fill, which can make the picker button read as
* a seam inside the field instead of part of one continuous bordered box. Force
* those parts transparent so only our single border/background shows. */
.stripe-inputs[data-input-variant] input[type="date"]::-webkit-datetime-edit,
.stripe-inputs[data-input-variant] input[type="datetime-local"]::-webkit-datetime-edit,
.stripe-inputs[data-input-variant] input[type="time"]::-webkit-datetime-edit,
.stripe-inputs[data-input-variant] input[type="month"]::-webkit-datetime-edit,
.stripe-inputs[data-input-variant] input[type="week"]::-webkit-datetime-edit {
 color: var(--si-text);
}
.stripe-inputs[data-input-variant] :is(input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"])::-webkit-calendar-picker-indicator {
 background: transparent;
 border-radius: 4px;
}
.stripe-inputs[data-input-variant] select.si-placeholder,
.stripe-inputs[data-input-variant] select:has(option:checked[value=""]) { color: var(--si-placeholder); }
.stripe-inputs select option { color: var(--si-text); background: #fff; }
/* A closed native <select> renders using the selected <option>'s own color in
* Chromium/WebKit, not the <select> element's color — so the rule above alone
* never reaches the box. Give the empty-value placeholder option itself the
* grey, and every other option the normal text color, so the swap tracks
* whichever option is actually selected with no JS involved. */
.stripe-inputs select option[value=""] { color: var(--si-placeholder); }
.stripe-inputs select option:not([value=""]) { color: var(--si-text); }
.stripe-inputs[data-input-variant] select[multiple] { min-block-size: 112px; }
/* .select-control select[multiple] (the provider Service Category field) is
* always progressively enhanced into a role="button" trigger + listbox panel
* by initProviderMultiSelect() (js/proofseal_provider_scripts.js), which sets
* select.style.display = 'none' as an inline style once it runs. That script
* loads in post_script.html — after the page body — so there's a real gap
* between first paint (this stylesheet already applied, sizing the native
* multi-select to a 112px-tall box with native OS chrome/scrollbar via the
* rule above) and the moment the script executes and hides it. On a slow
* connection, or if the script errors, that tall native box is what actually
* paints and stays visible — the "big scrollable select" users were seeing.
*
* An earlier version of this rule hid select[multiple] unconditionally in
* CSS, which closed that gap but broke the case the JS itself is guarding
* against: while the script hasn't run yet, this select is the field's only
* in-flow content inside .control-wrap (position: relative) — hiding it left
* the wrap with zero height, collapsing the whole field down to nothing but
* the absolutely-positioned .field-icon chevron floating in empty space.
*
* Style it in place instead: collapse it to the same one-line, single-select
* footprint as every other .control (no native listbox box, no scrollbar) so
* it never paints tall, but leave it visible and laid out so .control-wrap
* still has real height before JS runs. The inline display:none the script
* sets afterwards overrides this automatically — inline styles always beat
* a stylesheet rule regardless of specificity — so there's no conflict once
* the real trigger takes over.
*
* CSS height/overflow alone can't force a native select[multiple] to show
* only one row — Chromium sizes its internal listbox from its own row
* metrics and lets a partial next row peek through regardless of
* block-size/overflow:hidden. The actual fix is the size="1" attribute on
* the <select> in home.html, which is what the browser uses to decide
* visible row count; the sizing below just matches it visually to the rest
* of the .stripe-inputs controls. */
.stripe-inputs[data-input-variant] .select-control select[multiple] {
 /* min-block-size must be overridden alongside block-size — the generic
 * select[multiple] rule above sets min-block-size: 112px, and per spec a
 * larger min-block-size always wins over a smaller block-size, so without
 * this override the size="1" box still grows back to 112px tall. */
 appearance: none;
 block-size: var(--si-height);
 min-block-size: var(--si-height);
 font: 400 var(--si-font-size)/1.4 var(--si-font);
 color: var(--si-text);
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23667085' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: right 12px center;
 padding-right: 34px;
}
.stripe-inputs[data-input-variant] textarea:not([hidden]) { min-block-size: 112px; resize: vertical; }
.stripe-inputs[data-input-variant] :is(input:not([type]):where(:not(.location-component-input):not(.area-value-input)), input[type="text"]:where(:not(.location-component-input):not(.location-detailed-address):not(.location-city):not(.location-state):not(.location-zipcode)), input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"]:where(:not(.area-value-input)), input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select:where(:not(.area-unit-select)), textarea):is([aria-invalid="true"], .invalid, .empty-invalid, .is-invalid, :user-invalid),
.stripe-inputs[data-validated="true"] :is(input:not([type]):where(:not(.location-component-input):not(.area-value-input)), input[type="text"]:where(:not(.location-component-input):not(.location-detailed-address):not(.location-city):not(.location-state):not(.location-zipcode)), input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"]:where(:not(.area-value-input)), input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select:where(:not(.area-unit-select)), textarea):invalid,
.stripe-inputs[data-validated="true"] :is(input:not([type]):where(:not(.location-component-input):not(.area-value-input)), input[type="text"]:where(:not(.location-component-input):not(.location-detailed-address):not(.location-city):not(.location-state):not(.location-zipcode)), input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"]:where(:not(.area-value-input)), input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select:where(:not(.area-unit-select)), textarea).empty-invalid {
 border-color: var(--si-error) !important;
 background-color: #fff !important;
 box-shadow: none !important;
}
.stripe-inputs[data-input-variant] :is(input:not([type]):where(:not(.location-component-input):not(.area-value-input)), input[type="text"]:where(:not(.location-component-input):not(.location-detailed-address):not(.location-city):not(.location-state):not(.location-zipcode)), input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"]:where(:not(.area-value-input)), input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select:where(:not(.area-unit-select)), textarea):is([aria-invalid="true"], .invalid, .empty-invalid, .is-invalid, :user-invalid):focus {
 /* Border color only on a focused error field — no outline ring or box-shadow
 * halo. Matches the plain (non-focus) error state below rather than layering
 * an extra glow on top, per explicit request to drop the focus ring here. */
 outline: none;
 box-shadow: none !important;
}
.stripe-inputs[data-input-variant] :is(input:not([type]):where(:not(.location-component-input):not(.area-value-input)), input[type="text"]:where(:not(.location-component-input):not(.location-detailed-address):not(.location-city):not(.location-state):not(.location-zipcode)), input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"]:where(:not(.area-value-input)), input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select:where(:not(.area-unit-select)), textarea):disabled {
 background-color: #f1f3f5 !important;
 color: #697586;
 -webkit-text-fill-color: #697586;
 border-color: #d7dce1 !important;
 box-shadow: none !important;
 opacity: 1;
 cursor: not-allowed;
}
.stripe-inputs[data-input-variant] :is(input:not([type]):where(:not(.location-component-input):not(.area-value-input)), input[type="text"]:where(:not(.location-component-input):not(.location-detailed-address):not(.location-city):not(.location-state):not(.location-zipcode)), input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"]:where(:not(.area-value-input)), input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select:where(:not(.area-unit-select)), textarea)[readonly]:not(:disabled) { background-color: #f8fafc !important; }
/* Opt-in label hooks preserve existing layout, grouping and checkbox-label behavior. */
/* !important throughout this block: CRM preview pages style these same
* elements under #layoutPreview .rendered-form .formbuilder-*-label-style
* ID-scoped rules, which outrank a plain class selector regardless of load
* order — without it, color/font here can silently lose to that ID rule
* the same way display did on the label rule below. */
.stripe-inputs .si-label { color: var(--si-label) !important; font: 600 14px/1.4 var(--si-font) !important; }
.stripe-inputs .si-help { color: #667085 !important; font: 400 13px/1.45 var(--si-font) !important; }
.stripe-inputs .si-error { color: var(--si-error) !important; font: 400 13px/1.45 var(--si-font) !important; }
/* CRM form-builder HTML ships plain <label> elements with no si-label hook, so the
* opt-in classes above never reach real forms. Style bare labels directly, scoped to
* .stripe-inputs, so the bold weight/spacing in the reference mock shows up without
* requiring markup changes on stored form documents. Excludes labels already wrapping
* a checkbox/radio (.si-choice) so those inline labels keep their existing baseline
* alignment instead of picking up block display and bottom margin. */
/* Some stored CRM field HTML wraps only the input/select in its own
* .stripe-inputs div per field, with the <label> sitting as a preceding
* sibling of that div (same parent) rather than a descendant of it — a
* plain ".stripe-inputs label" descendant selector never reaches that
* label. The second selector below catches that immediate-sibling shape,
* scoped tightly to a label directly followed by the opted-in div so
* unrelated labels elsewhere on the page are never matched. */
.stripe-inputs label:not(:has(> input.si-choice)),
label:has(+ .stripe-inputs):not(:has(> input.si-choice)) {
 /* #layoutPreview .rendered-form .formbuilder-*-label (an ID-scoped CRM preview
 * rule) outweighs this class-only selector and was winning on display, keeping
 * label + required-asterisk span laid out as display:flex instead of stacking
 * above the field — color/font/margin came through but the layout didn't.
 * !important forces the block layout the reference mock expects. */
 display: block !important;
 margin-block-end: 4px !important;
 padding-block-end: 0 !important;
 color: var(--si-label) !important;
 font: 600 14px/1.4 var(--si-font) !important;
}
.stripe-inputs label:has(> input.si-choice) {
 color: var(--si-label);
 font: 400 15px/1.4 var(--si-font);
}
.stripe-inputs input.si-choice:is([type="checkbox"], [type="radio"]) {
 appearance: auto;
 accent-color: var(--si-accent);
 inline-size: 18px;
 block-size: 18px;
 vertical-align: middle;
 flex: 0 0 auto;
}
.stripe-inputs :is(input.si-choice, input.si-file, input.si-range):focus-visible {
 outline: 2px solid var(--si-accent);
 outline-offset: 3px;
}
.stripe-inputs input.si-range[type="range"] { accent-color: var(--si-accent); }
.stripe-inputs input.si-file[type="file"] {
 max-inline-size: 100%;
 color: var(--si-text);
 font: 400 16px/1.4 var(--si-font);
}
.stripe-inputs input.si-file[type="file"]::file-selector-button {
 min-block-size: 40px;
 margin-inline-end: 12px;
 padding: 8px 12px;
 border: 1px solid var(--si-border);
 border-radius: var(--si-radius);
 background: #fff;
 color: var(--si-text);
 font: inherit;
 cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
 .stripe-inputs[data-input-variant] :is(input:not([type]):where(:not(.location-component-input):not(.area-value-input)), input[type="text"]:where(:not(.location-component-input):not(.location-detailed-address):not(.location-city):not(.location-state):not(.location-zipcode)), input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"]:where(:not(.area-value-input)), input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select:where(:not(.area-unit-select)), textarea) { transition: none; }
}
@media (forced-colors: active) {
 .stripe-inputs[data-input-variant] :is(input:not([type]):where(:not(.location-component-input):not(.area-value-input)), input[type="text"]:where(:not(.location-component-input):not(.location-detailed-address):not(.location-city):not(.location-state):not(.location-zipcode)), input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"]:where(:not(.area-value-input)), input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"], input[type="week"], select:where(:not(.area-unit-select)), textarea):disabled { color: GrayText; -webkit-text-fill-color: GrayText; }
}

/* Adapter: ProofSeal .control-wrap forms — shared by theme-proofseal_customer/home.html
* (#quote) and theme-proofseal_provider/home.html (#apply); both themes reuse the same
* .icon-control / .select-control / .control class names from their respective
* custom_styles.css. .icon-control positions a leading SVG at left:10px over the control;
* .select-control reserves right-side room for its chevron. The flat 9px/12px padding
* above would push text under the icon / chevron, so restore the wrapper's own spacing
* on top of the new field box. Scoped to these known wrapper classes only — not a general
* fix for other icon-wrapped inputs elsewhere, which need their own adapter once found. */
.stripe-inputs[data-input-variant] .icon-control .control {
 padding-left: 34px !important;
}
.stripe-inputs[data-input-variant] .select-control .control {
 padding-right: 30px !important;
}
/* The provider multi-select (js/proofseal_provider_scripts.js initProviderMultiSelect)
* replaces the native <select> with a div[role="button"].control trigger + span.truncate
* label to support multiple selections with a custom dropdown panel. Neither element is
* an input/select/textarea, so none of the :is(...) rules above ever reach it and it was
* still rendering at the theme's own 11.5px/34px .control sizing instead of matching the
* font size and min-height real inputs get from this file. */
.stripe-inputs[data-input-variant] .select-control [role="button"].control {
 font: 400 var(--si-font-size)/1.4 var(--si-font) !important;
 min-height: var(--si-height) !important;
 box-sizing: border-box;
}
/* The multi-select's open option panel (js/proofseal_provider_scripts.js
* initProviderMultiSelect -> buildRow) ships a hardcoded Tailwind arbitrary
* class (text-[11.5px]) on each row, inherited from the theme's pre-enhancement
* .control sizing. That's independent of the trigger box above, so matching the
* trigger's font alone left the open panel's row text mismatched (smaller than
* the trigger, not matched to the other .stripe-inputs form text). Bring row
* text and spacing in line with the rest of this file's scale instead of the
* theme's original compact tokens. */
/* theme-proofpros hero AI Quote Card (home.html .proof-ai-card): the
* description input's submit affordance is a square icon button
* (span.grid[h-[25px]][w-[25px]]) sized via compiled Tailwind arbitrary-value
* classes. The theme's served style.css build is missing those .h-\[25px\]/
* .w-\[25px\] rules, so the span falls back to its flex-row intrinsic size
* instead of the square it was designed as. Restore a fixed square here,
* matching the --si-height 42px control size, until the theme's compiled
* CSS is rebuilt with those utilities. */
.proof-ai-card [data-desc-input] + span {
 height: 42px !important;
 width: 42px !important;
 flex: 0 0 42px !important;
}
.stripe-inputs[data-input-variant] .select-control [role="listbox"] [role="option"] {
 font-size: var(--si-font-size) !important;
 line-height: 1.4 !important;
 padding-top: 9px !important;
 padding-bottom: 9px !important;
}