/*
 * Peddle Offer Wizard styles. Everything is scoped under .pow-wizard so the
 * wizard can be dropped into any host page.
 *
 * COLOR SYSTEM: every color in this file comes from the token block below —
 * the single source of truth. Hosts theme the widget by overriding the
 * tokens from their own stylesheet (see README "Theming"). No raw color
 * values may appear outside the token block.
 *
 * The wizard must look acceptable in three modes: Bootstrap 4, Bootstrap 5
 * and standalone (.pow-standalone, no Bootstrap at all). Bootstrap classes
 * are used for structure only; interactive colors are always token-driven,
 * with explicit overrides where a Bootstrap class would leak its own brand
 * color (see "Bootstrap color-leak overrides").
 */

.pow-wizard {
    /* Brand — what a white-label host overrides */
    --pow-accent: #16803c;           /* interactive: active tab, active sidebar item, links, focus rings, checked radios */
    --pow-accent-contrast: #ffffff;  /* text/icon color on accent backgrounds */
    --pow-cta: var(--pow-accent);    /* primary action button (Next); host may diverge from accent */
    --pow-cta-contrast: #ffffff;

    /* Semantic — carry meaning, normally NOT overridden per client */
    --pow-success: #1e8e3e;          /* valid-input check, success feedback */
    /* Sidebar completion ticks. Kept as its own role so a host can retheme
       just the ticks, but pointed at the muted grey rather than a lighter
       bespoke one: the tick carries meaning, so it owes the 3:1 contrast a
       graphical indicator needs, and anything near --pow-border reads as
       another hairline of the rail instead of a mark. */
    --pow-tick: var(--pow-text-muted);
    --pow-danger: #b02a37;           /* validation errors, blocking notices */
    --pow-warning: #b06000;          /* reserved for future use (e.g. offer-amount caveats) */

    /* Neutrals */
    --pow-text: #212529;
    --pow-text-muted: #6c757d;       /* future/disabled steps, helper text */
    --pow-border: #ced4da;
    --pow-surface: #ffffff;
    --pow-surface-alt: #f8f9fa;      /* addons, debug panels, secondary hover */

    /* Derived — precomputed because color-mix() is too new for the
       browser matrix; override alongside their base token when theming. */
    --pow-cta-hover: #126a32;                    /* darker --pow-cta */
    --pow-focus-ring: rgba(22, 128, 60, 0.25);   /* translucent --pow-accent */
    --pow-accent-soft: rgba(22, 128, 60, 0.12);  /* faint --pow-accent tint (selected/hover fills) */
    --pow-danger-bg: #f8d7da;                    /* light --pow-danger tint */
    --pow-warning-bg: #fdf3e4;                   /* light --pow-warning tint */
    --pow-backdrop: rgba(0, 0, 0, 0.45);         /* dialog backdrop */
    --pow-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);
    --pow-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.25);

    /* Paint swatches (Title specifics). These name real car colors, not
       theme roles — a host that rebrands the wizard does not repaint the
       seller's car — but they live here so the "all colors come from the
       token block" rule still holds. */
    --pow-swatch-beige: #e8dcc0;
    --pow-swatch-black: #1c1c1c;
    --pow-swatch-blue: #1f5fbf;
    --pow-swatch-brown: #6b4423;
    --pow-swatch-burgundy: #6d2231;
    --pow-swatch-charcoal: #3c4043;
    --pow-swatch-cream: #f2e8d5;
    --pow-swatch-gold: #c9a227;
    --pow-swatch-gray: #808080;
    --pow-swatch-green: #1f7a3d;
    --pow-swatch-maroon: #7b1f2b;
    --pow-swatch-orange: #e07b19;
    --pow-swatch-pink: #e08aa8;
    --pow-swatch-purple: #6b3fa0;
    --pow-swatch-red: #c1272d;
    --pow-swatch-silver: #c8ccce;
    --pow-swatch-tan: #c9a877;
    --pow-swatch-teal: #1f7a80;
    --pow-swatch-turquoise: #3ec1c1;
    --pow-swatch-white: #f7f7f7;
    --pow-swatch-yellow: #e8c92b;

    /* Non-color design tokens */
    --pow-radius: 0.5rem;
    --pow-radius-sm: 0.375rem;
    --pow-space: 1rem;
    --pow-font-size: 1rem;

    color: var(--pow-text);
    font-size: var(--pow-font-size);
    line-height: 1.5;
}

/* -------------------------------------------------------------- layout
 * Sidebar (progress + back navigation) beside the current step; stacks
 * on narrow viewports.
 */

.pow-wizard .pow-layout {
    align-items: flex-start;
    display: flex;
    gap: calc(var(--pow-space) * 1.5);
}

.pow-wizard .pow-sidebar {
    background: var(--pow-surface);
    border: 1px solid var(--pow-border);
    border-radius: var(--pow-radius);
    flex: 0 0 15rem;
    /* Long sections (Condition has 12 sub-items) scroll inside the
       sidebar instead of stretching the layout. */
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
    padding: var(--pow-space);
    scrollbar-color: var(--pow-border) transparent;
    scrollbar-width: thin;
}

.pow-wizard .pow-sidebar::-webkit-scrollbar {
    width: 6px;
}

.pow-wizard .pow-sidebar::-webkit-scrollbar-thumb {
    background: var(--pow-border);
    border-radius: 3px;
}

.pow-wizard .pow-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.pow-wizard .pow-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* -------------------------------------------------------- compact rail
 * xs/sm viewports (below 48em — Bootstrap's md, and the breakpoint this
 * file already uses elsewhere) get the rail instead of the full sidebar:
 * one line naming where you are, an angle at each end. Both are always in
 * the markup because the server cannot know the viewport; exactly one is
 * displayed, and display:none keeps the other out of the accessibility
 * tree so there is never a duplicate progress navigation.
 */

.pow-wizard .pow-rail {
    display: none;
}

@media (max-width: 47.999em) {
    .pow-wizard .pow-layout {
        /* Stacked, the cross axis is the width: the base rule's
           flex-start would shrink .pow-main to its content, leaving the
           card narrower than the rail above it (seen on tablets). */
        align-items: stretch;
        flex-direction: column;
    }

    .pow-wizard .pow-sidebar {
        display: none;
    }

    .pow-wizard .pow-rail {
        align-items: center;
        background: var(--pow-surface);
        border: 1px solid var(--pow-border);
        border-radius: var(--pow-radius);
        display: flex;
        gap: 0.5rem;
        padding: 0.375rem;
        width: 100%;
    }
}

/* The label column: section over step, centred between the angles.
   min-width:0 lets the step name shrink instead of pushing the angles
   off the edge on the narrowest screens. */
.pow-wizard .pow-rail__label {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    text-align: center;
}

.pow-wizard .pow-rail__section {
    color: var(--pow-text-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.pow-wizard .pow-rail__step {
    font-size: 1rem;
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Both angles are secondary: neither may compete with the step's own
   Next button, which is the only control that advances the flow. */
.pow-wizard .pow-rail__angle {
    align-items: center;
    background: var(--pow-surface);
    border: 1px solid var(--pow-border);
    border-radius: var(--pow-radius-sm);
    color: var(--pow-text);
    display: flex;
    flex: 0 0 auto;
    height: 2.75rem;
    justify-content: center;
    text-decoration: none;
    width: 2.75rem;
}

.pow-wizard a.pow-rail__angle:hover {
    background: var(--pow-surface-alt);
    color: var(--pow-text);
    text-decoration: none;
}

.pow-wizard .pow-rail__angle:focus-visible {
    box-shadow: 0 0 0 3px var(--pow-focus-ring);
    outline: none;
}

/* Nowhere to go: kept in place rather than removed, so the label stays
   centred and the rail never changes shape between steps. */
.pow-wizard .pow-rail__angle--off {
    color: var(--pow-text-muted);
    opacity: 0.4;
}

.pow-wizard .pow-rail__angle .pow-icon {
    height: 1.125rem;
    width: 1.125rem;
}

/* -------------------------------------------------------------- sidebar */

/* Sits the heading's baseline on the step heading's, one column over.
   The offset belongs to the heading rather than to the sidebar's padding
   so that a host who empties the copy (content.sidebar_title) gets the
   sections at the top of the rail, not 1rem of dead space where a
   heading used to be.

   1rem is what closes the gap: the card pads 1.5rem to a 1.5rem/700
   heading, the sidebar pads 1rem to a 1.0625rem/700 one, and both
   inherit line-height 1.5 — leaving the two baselines about 16px apart
   whatever the system font resolves to, since the half-leading and
   ascent of both scale with the same family. */
.pow-wizard .pow-sidebar__title {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: var(--pow-space) 0 0.375rem;
}

.pow-wizard .pow-sidebar__subtitle {
    color: var(--pow-text-muted);
    font-size: 0.8125rem;
    margin: 0 0 var(--pow-space);
}

.pow-wizard .pow-sidebar__items {
    list-style: none;
    margin: 0.25rem 0 0 0.375rem;
    border-left: 2px solid var(--pow-border);
    padding: 0 0 0 0.75rem;
}

.pow-wizard .pow-sidebar__section {
    border-bottom: 1px solid var(--pow-border);
    margin: 0;
    padding: 0.375rem 0;
}

/* :last-child, not :last-of-type — sections render as <details> when they
   are open/expandable and as <div> when flat or locked, so :last-of-type
   matched the last of *each* tag. Mid-wizard (Vehicle + Ownership as
   <details>, Condition still a locked <div>) that stripped the divider
   between Ownership and Condition instead of the final one. */
.pow-wizard .pow-sidebar__section:last-child {
    border-bottom: 0;
}

/* Accordion header — native <summary> for openable sections, a span/link
   with the same class for flat and locked sections. */
.pow-wizard .pow-sidebar__summary {
    align-items: center;
    display: flex;
    font-size: 0.9375rem;
    font-weight: 700;
    justify-content: space-between;
    list-style: none; /* hide the default disclosure triangle */
    padding: 0.125rem 0;
}

.pow-wizard .pow-sidebar__summary::-webkit-details-marker {
    display: none;
}

/* Completion tick on a finished section. Deliberately quiet: it is a
   background fact, not something to draw the eye away from the question
   on screen, so it sits in a light grey rather than the accent.
   margin-left:auto rather than a change of justify-content — auto margins
   eat the free space before justify-content sees it, so the tick parks
   next to the chevron on the right instead of drifting to the middle. */
.pow-wizard .pow-sidebar__done {
    align-items: center;
    color: var(--pow-tick);
    display: inline-flex;
    flex: 0 0 auto;
    /* Beside the label, not parked on the far edge: the tick belongs to the
       word it confirms. margin-right:auto then hands the leftover space to
       whatever follows, so the chevron still sits at the right. */
    margin-left: 0.375rem;
    margin-right: auto;
}

.pow-wizard .pow-sidebar__done .pow-icon {
    height: 0.875rem;
    width: 0.875rem;
}

.pow-wizard details.pow-sidebar__section > .pow-sidebar__summary {
    cursor: pointer;
    user-select: none;
}

/* CSS-only chevron, rotating when the section is open. Only real
   <details> sections get the affordance — locked sections show none. */
.pow-wizard details.pow-sidebar__section > .pow-sidebar__summary::after {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    content: "";
    flex: 0 0 auto;
    height: 0.4em;
    margin: -0.2em 0.125rem 0;
    transform: rotate(45deg);
    transition: transform 0.15s ease;
    width: 0.4em;
}

.pow-wizard details.pow-sidebar__section[open] > .pow-sidebar__summary::after {
    margin-top: 0.2em;
    transform: rotate(225deg);
}

.pow-wizard .pow-sidebar__item {
    display: block;
    font-size: 0.875rem;
    padding: 0.2rem 0;
    position: relative;
}

/* Which question you are on: the stretch of the rail beside the current
   item is painted in the accent, overlaying the grey border the <ol>
   draws. Offset by the list's own padding (0.75rem) plus that border's
   2px, so the segment lands exactly on the line instead of beside it. */
.pow-wizard .pow-sidebar__item.pow-status--current::before {
    background: var(--pow-accent);
    bottom: 0;
    content: "";
    left: calc(-0.75rem - 2px);
    position: absolute;
    top: 0;
    width: 2px;
}

.pow-wizard .pow-sidebar__item-label {
    align-items: center;
    display: flex;
    gap: 0.375rem;
}

.pow-wizard .pow-sidebar__edit {
    flex: 0 0 auto;
    height: 0.875em;
    opacity: 0.6;
    width: 0.875em;
}

.pow-wizard .pow-sidebar a:hover .pow-sidebar__edit {
    opacity: 1;
}

/* One-line recap of the recorded answer under a completed sub-item. */
.pow-wizard .pow-sidebar__answer {
    color: var(--pow-text-muted);
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pow-wizard .pow-sidebar a.pow-sidebar__summary,
.pow-wizard .pow-sidebar a.pow-sidebar__item {
    color: var(--pow-text);
    text-decoration: none;
}

.pow-wizard .pow-sidebar a.pow-sidebar__summary:hover,
.pow-wizard .pow-sidebar a.pow-sidebar__item:hover {
    color: var(--pow-accent);
    text-decoration: underline;
}

/* Expandable sections are <summary>, not links, so they missed the hover
   the flat sections get. They are just as clickable, and a rail where only
   some rows answer the pointer reads as half of them being dead. Only the
   label is underlined — the tick and the chevron are not words. */
.pow-wizard details.pow-sidebar__section > .pow-sidebar__summary:hover {
    color: var(--pow-accent);
    text-decoration: underline;
    text-decoration-skip-ink: all;
}

.pow-wizard details.pow-sidebar__section > .pow-sidebar__summary:hover .pow-sidebar__done {
    text-decoration: none;
}

.pow-wizard .pow-sidebar .pow-sidebar__section--locked .pow-sidebar__summary {
    color: var(--pow-text-muted);
    cursor: default;
    opacity: 0.65;
}

.pow-wizard .pow-sidebar span.pow-status--current,
.pow-wizard .pow-sidebar details.pow-status--current > .pow-sidebar__summary {
    color: var(--pow-accent);
}

.pow-wizard .pow-sidebar span.pow-status--future {
    color: var(--pow-text-muted);
    opacity: 0.65;
}

/* No margin-top on purpose: the last section drops its own border-bottom
   (above) and this border-top stands in for it, so the rule has to sit at
   the same distance every other section divider does — the last section's
   0.375rem padding-bottom. A margin here would push only the final divider
   away from its heading and break the rhythm. */
.pow-wizard .pow-sidebar__footer {
    border-top: 1px solid var(--pow-border);
    padding-top: 0.75rem;
}

.pow-wizard .pow-sidebar__reset {
    color: var(--pow-text-muted);
    font-size: 0.8125rem;
    text-decoration: underline;
}

.pow-wizard .pow-sidebar__reset:hover {
    color: var(--pow-danger);
}

/* ---------------------------------------------------------------- card */

.pow-wizard .pow-card {
    background: var(--pow-surface);
    border: 1px solid var(--pow-border);
    border-radius: var(--pow-radius);
    padding: calc(var(--pow-space) * 1.5);
}

.pow-wizard .pow-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.pow-wizard .pow-help {
    color: var(--pow-text-muted);
    margin: 0 0 var(--pow-space);
}

.pow-wizard .pow-seo-intro {
    margin-bottom: var(--pow-space);
}

/* --------------------------------------------------- footer promises
 * Three service promises under the whole widget, on every screen.
 * Deliberately unboxed — no border, no background, no card: they are a
 * footnote to the wizard, not another panel competing with the question.
 * They wrap onto separate lines on narrow screens rather than shrinking.
 */

.pow-wizard .pow-footer-points {
    color: var(--pow-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    gap: 0.375rem 1.25rem;
    justify-content: center;
    list-style: none;
    margin: calc(var(--pow-space) * 1.25) 0 0;
    padding: 0;
}

/* A thin separator between items, drawn only between them — never
   leading the first one or trailing the last, and never on an item that
   has wrapped to the start of its own line. */
.pow-wizard .pow-footer-points__item {
    position: relative;
}

.pow-wizard .pow-footer-points__item + .pow-footer-points__item::before {
    content: "·";
    left: -0.6875rem;
    position: absolute;
}

.pow-wizard .pow-seo-intro__text {
    color: var(--pow-text-muted);
    font-size: 0.9375rem;
    margin: 0;
}

.pow-wizard .pow-hint {
    color: var(--pow-text-muted);
    display: block;
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

/* "(optional)" after a label: quieter than the label, never bold. */
.pow-wizard .pow-label__optional {
    color: var(--pow-text-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    margin-left: 0.25rem;
}

/* Links inside a hint. The VIN/Plate ones are <label>s for the mode
   radios rather than anchors — a label switches the tab without JS — so
   they need the link look given to them. Same colour as the hint, just
   underlined: an accent-coloured link would compete with the CTA. */
.pow-wizard .pow-hint__link {
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.pow-wizard .pow-hint__link:hover {
    color: var(--pow-text);
}

.pow-wizard .pow-debug {
    background: var(--pow-surface-alt);
    border: 1px solid var(--pow-border);
    border-radius: var(--pow-radius-sm);
    font-size: 0.8125rem;
    overflow-x: auto;
    padding: 0.75rem;
}

/* ---------------------------------------------------------------- tabs
 * CSS-only tab mechanism (step 1's plate/VIN): visually-hidden radios
 * (which also carry the submitted pow_fast value) toggle panel visibility
 * via :checked and sibling combinators. Works with no JS at all; wizard.js only adds ARIA
 * polish on top.
 */

.pow-wizard .pow-mode-radio {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* The tab row never wraps a label: on narrow phones with a large host font,
 * "Make & Model" used to break into two lines and sit taller than its
 * siblings. Labels are nowrap and unshrinkable; if the row truly runs out
 * of room it scrolls sideways inside itself instead of deforming. */
.pow-wizard .pow-tablist {
    border-bottom: 2px solid var(--pow-border);
    display: flex;
    gap: 0.25rem;
    margin-bottom: var(--pow-space);
    overflow-x: auto;
    /* Scroll without a scrollbar. It is a three-item row that only ever
       overflows by a few pixels, so a bar would sit under the tabs
       competing with the 2px rule that marks the active one -- and on
       desktop it would show permanently for something nobody needs to
       drag. The row still scrolls by touch, wheel and keyboard. */
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.pow-wizard .pow-tablist::-webkit-scrollbar {
    display: none;
}

.pow-wizard .pow-tab {
    align-items: center;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--pow-text-muted);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-weight: 600;
    gap: 0.375rem;
    margin: 0 0 -2px;
    padding: 0.5rem 0.75rem;
    user-select: none;
    white-space: nowrap;
}

/* Tighter tabs where every pixel counts, so the three usually fit a
 * 375px viewport with no scrolling at all. */
@media (max-width: 34em) {
    .pow-wizard .pow-tab {
        gap: 0.25rem;
        padding: 0.5rem 0.5rem;
    }
}

.pow-wizard .pow-tab:hover {
    color: var(--pow-text);
}

.pow-wizard #pow-mode-vin:checked ~ .pow-tablist .pow-tab[for="pow-mode-vin"],
.pow-wizard #pow-mode-plate:checked ~ .pow-tablist .pow-tab[for="pow-mode-plate"] {
    border-bottom-color: var(--pow-accent);
    color: var(--pow-accent);
}

.pow-wizard #pow-mode-vin:focus-visible ~ .pow-tablist .pow-tab[for="pow-mode-vin"],
.pow-wizard #pow-mode-plate:focus-visible ~ .pow-tablist .pow-tab[for="pow-mode-plate"] {
    outline: 2px solid var(--pow-accent);
    outline-offset: 2px;
}

/* Both panels are always rendered server-side (SEO); only visibility
   is toggled here. */
.pow-wizard .pow-panel {
    display: none;
}

.pow-wizard #pow-mode-vin:checked ~ .pow-panels .pow-panel--vin,
.pow-wizard #pow-mode-plate:checked ~ .pow-panels .pow-panel--plate {
    display: block;
}

/* -------------------------------------------------- step 1: two ways
 * One form, one Next, one way open at a time. The other waits on top,
 * folded into a tinted card that switches to it (CSS-only radios,
 * pow_way): year/make/model/trim by default, with "Faster: use your
 * plate or VIN" folded above; once switched, the reverse. The plate/VIN
 * way has a [Plate | VIN] toggle, a "fastest way" badge and Decode.
 */

.pow-wizard .pow-way-radio {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* The folded way: a whole-card button. */
.pow-wizard .pow-way-switch {
    align-items: center;
    background: var(--pow-surface-alt);
    border: 1px solid var(--pow-border);
    border-radius: var(--pow-radius);
    cursor: pointer;
    display: none;
    gap: 0.875rem;
    margin: 0 0 1.25rem;
    padding: 0.875rem 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pow-wizard .pow-way-switch:hover {
    border-color: var(--pow-accent);
    box-shadow: 0 0 0 3px var(--pow-accent-soft);
}

.pow-wizard #pow-way-make-model:checked ~ .pow-way-switch--fast,
.pow-wizard #pow-way-fast:checked ~ .pow-way-switch--make-model {
    display: flex;
}

.pow-wizard #pow-way-fast:focus-visible ~ .pow-way-switch--fast,
.pow-wizard #pow-way-make-model:focus-visible ~ .pow-way-switch--make-model {
    outline: 2px solid var(--pow-accent);
    outline-offset: 2px;
}

.pow-wizard .pow-way-switch__icon {
    align-items: center;
    background: var(--pow-accent-soft);
    border-radius: 999px;
    color: var(--pow-accent);
    display: inline-flex;
    flex: 0 0 2.25rem;
    height: 2.25rem;
    justify-content: center;
}

.pow-wizard .pow-way-switch__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.pow-wizard .pow-way-switch__text strong {
    color: var(--pow-text);
    font-size: 0.9375rem;
    font-weight: 600;
}

.pow-wizard .pow-way-switch__text small {
    color: var(--pow-text-muted);
    font-size: 0.8125rem;
}

.pow-wizard .pow-way-switch__chevron {
    color: var(--pow-text-muted);
    flex: 0 0 auto;
}

/* Only the open way shows. No rule between it and Next (2026-10-09): the
   button follows the fields directly, separated by the gap alone. */
.pow-wizard .pow-way {
    display: none;
    margin-bottom: var(--pow-space);
}

.pow-wizard #pow-way-make-model:checked ~ .pow-way--make-model,
.pow-wizard #pow-way-fast:checked ~ .pow-way--fast {
    display: block;
}

/* The toggle: CSS-only radios (they carry pow_id), the labels are the
   segments. Works with no JS at all. */
.pow-wizard .pow-id-radio {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.pow-wizard .pow-id-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}

.pow-wizard .pow-seg {
    background: var(--pow-surface);
    border: 1px solid var(--pow-border);
    border-radius: 999px;
    display: inline-flex;
    padding: 0.1875rem;
}

.pow-wizard .pow-seg__option {
    align-items: center;
    border-radius: 999px;
    color: var(--pow-text-muted);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.9375rem;
    font-weight: 600;
    gap: 0.375rem;
    margin: 0;
    padding: 0.375rem 0.875rem;
    transition: background-color 0.15s ease, color 0.15s ease;
    user-select: none;
    white-space: nowrap;
}

.pow-wizard .pow-seg__option:hover {
    color: var(--pow-text);
}

.pow-wizard #pow-id-plate:checked ~ .pow-id-head .pow-seg__option[for="pow-id-plate"],
.pow-wizard #pow-id-vin:checked ~ .pow-id-head .pow-seg__option[for="pow-id-vin"] {
    background: var(--pow-accent);
    color: var(--pow-accent-contrast);
}

.pow-wizard #pow-id-plate:focus-visible ~ .pow-id-head .pow-seg__option[for="pow-id-plate"],
.pow-wizard #pow-id-vin:focus-visible ~ .pow-id-head .pow-seg__option[for="pow-id-vin"] {
    outline: 2px solid var(--pow-accent);
    outline-offset: 2px;
}

.pow-wizard .pow-id-badge {
    align-items: center;
    background: var(--pow-accent-soft);
    border-radius: 999px;
    color: var(--pow-accent);
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 700;
    gap: 0.25rem;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.625rem;
    text-transform: uppercase;
}

.pow-wizard .pow-id-badge__icon {
    height: 0.875rem;
    width: 0.875rem;
}

/* Both panels are rendered (no JS needed); the toggle shows one. */
.pow-wizard .pow-id-panel {
    display: none;
}

.pow-wizard #pow-id-plate:checked ~ .pow-id-panel--plate,
.pow-wizard #pow-id-vin:checked ~ .pow-id-panel--vin {
    display: block;
}

/* Plate and its state on one line. */
.pow-wizard .pow-decode-row {
    align-items: flex-start;
    display: flex;
    gap: 0.5rem;
}

.pow-wizard .pow-decode-row__main {
    flex: 1 1 auto;
    min-width: 0;
}

.pow-wizard .pow-decode-row__state {
    flex: 0 0 11rem;
}

/* Full width in their cell, never a height of their own: the fields
   keep the size every other input in the wizard has. */
.pow-wizard .pow-decode-row .pow-input,
.pow-wizard .pow-decode-row .pow-select {
    width: 100%;
}

/* On a phone both get the whole width: plate, then state. */
@media (max-width: 34em) {
    .pow-wizard .pow-decode-row {
        flex-wrap: wrap;
    }

    .pow-wizard .pow-decode-row__main,
    .pow-wizard .pow-decode-row__state {
        flex: 1 1 100%;
    }
}

.pow-wizard .pow-id-panel .pow-hint {
    margin-top: 0.5rem;
}

/* No-JS "Load models / trims" buttons sit right under their select. */
.pow-wizard .pow-way noscript .pow-btn {
    margin-top: 0.5rem;
}

/* Year/make/model/trim: 2x2 from desktop up, one column below.
   Bootstrap does it with row/col-lg-6; standalone here. */
.pow-standalone .pow-id-grid {
    column-gap: 0.75rem;
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 62em) {
    .pow-standalone .pow-id-grid {
        grid-template-columns: 1fr 1fr;
    }

    .pow-standalone .pow-id-grid__cell--full {
        grid-column: 1 / -1;
    }
}

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

.pow-wizard .pow-field {
    margin-bottom: var(--pow-space);
}

/* Two fields that belong together (first/last name) share a row from
   tablet up. Only the column gap is set: the fields keep their own
   margin-bottom, which is what spaces them once they stack on a phone. */
.pow-wizard .pow-field-row {
    display: grid;
    gap: 0 0.75rem;
    grid-template-columns: 1fr;
}

@media (min-width: 48em) {
    .pow-wizard .pow-field-row {
        grid-template-columns: 1fr 1fr;
    }
}

.pow-wizard .pow-field-error {
    color: var(--pow-danger);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Token-driven danger border in every mode (wins over Bootstrap's own
   .is-invalid red by specificity). */
.pow-wizard .pow-input.pow-invalid,
.pow-wizard .pow-select.pow-invalid {
    border-color: var(--pow-danger);
}

.pow-wizard .pow-alert {
    background: var(--pow-danger-bg);
    border: 1px solid var(--pow-danger);
    border-radius: var(--pow-radius-sm);
    color: var(--pow-danger);
    margin-bottom: var(--pow-space);
    padding: 0.75rem 1rem;
}

.pow-wizard .pow-icon {
    fill: currentColor;
    height: 1em;
    vertical-align: -0.125em;
    width: 1em;
}

.pow-wizard .pow-tab__icon {
    height: 1.125em;
    width: 1.125em;
}

/* ---------------------------------------------------- choice cards
 * Large single-select radio cards (step 3). The radio stays visible for
 * accessibility; :has(:checked) adds the accent border where supported.
 */

.pow-wizard .pow-choice-cards {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: var(--pow-space);
}

/* Pickup windows only. They are short, uniform and there are many of them
   per day, so they tile where the prose-length answer chips elsewhere do
   not. One per row on mobile, two on tablet, three on desktop; breakpoints
   are Bootstrap's md/lg (768px/992px) so the widget changes shape in step
   with the host page's own grid rather than at some third set of widths.

   A FIXED column count, not repeat(auto-fit, minmax(...)): auto-fit
   collapses empty tracks, so a day with two windows laid them out half the
   card wide while the day below it with three got thirds. Every row read as
   a different size and the screen looked chaotic for no reason. The margin
   reset is here because the enclosing .pow-day owns the vertical rhythm. */
.pow-wizard .pow-choice-cards--slots {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 0;
}

@media (min-width: 48em) {
    .pow-wizard .pow-choice-cards--slots {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 62em) {
    .pow-wizard .pow-choice-cards--slots {
        grid-template-columns: repeat(3, 1fr);
    }
}

.pow-wizard .pow-choice-card {
    align-items: center;
    background: var(--pow-surface);
    border: 1px solid var(--pow-border);
    border-radius: var(--pow-radius-sm);
    cursor: pointer;
    display: flex;
    font-weight: 600;
    gap: 0.75rem;
    margin: 0;
    padding: 0.875rem 1rem;
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.pow-wizard .pow-choice-card:hover {
    border-color: var(--pow-accent);
}

.pow-wizard .pow-choice-card:focus-within {
    outline: 2px solid var(--pow-accent);
    outline-offset: 2px;
}

.pow-wizard .pow-choice-card:has(input:checked) {
    border-color: var(--pow-accent);
    box-shadow: inset 0 0 0 1px var(--pow-accent);
}

.pow-wizard .pow-choice-card__input {
    accent-color: var(--pow-accent);
    flex: 0 0 auto;
    height: 1.125rem;
    margin: 0;
    width: 1.125rem;
}

/* Options ruled out by earlier answers: dimmed, non-interactive look
   (the real disabled attribute on the radio does the actual blocking). */
.pow-wizard .pow-choice-card--disabled {
    background: var(--pow-surface-alt);
    color: var(--pow-text-muted);
    cursor: not-allowed;
}

.pow-wizard .pow-choice-card--disabled:hover {
    border-color: var(--pow-border);
}

/* ---------------------------------------------- inline info disclosure
 * Native <details> "What is a clean title?" affordance — link-styled
 * summary, no JS involved.
 */

/* The summary is a link-looking line, so with no margin of its own it
   sat flush against whatever came before -- the "Use <name>" chip, or
   the input when there is no chip. It reads as part of the field above
   rather than as its own thing to open. */
.pow-wizard .pow-disclosure {
    margin-bottom: var(--pow-space);
    margin-top: 0.75rem;
}

.pow-wizard .pow-disclosure__link {
    align-items: center;
    color: var(--pow-accent);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 600;
    gap: 0.375rem;
    list-style: none; /* hide the default disclosure triangle */
    user-select: none;
}

.pow-wizard .pow-disclosure__link::-webkit-details-marker {
    display: none;
}

.pow-wizard .pow-disclosure__link:hover {
    text-decoration: underline;
}

.pow-wizard .pow-disclosure__icon {
    flex: 0 0 auto;
}

.pow-wizard .pow-disclosure__panel {
    background: var(--pow-surface-alt);
    border: 1px solid var(--pow-border);
    border-radius: var(--pow-radius-sm);
    font-size: 0.875rem;
    margin: 0.5rem 0 0;
    padding: 0.75rem 1rem;
}

.pow-wizard .pow-disclosure__lead {
    margin: 0 0 0.375rem;
}

.pow-wizard .pow-disclosure__list {
    margin: 0;
    padding-left: 1.25rem;
}

.pow-wizard .pow-disclosure__list li {
    margin-bottom: 0.25rem;
}

.pow-wizard .pow-disclosure__list a {
    color: var(--pow-accent);
}

/* --------------------------------------------------- quadrant selector
 * Reusable 4-quadrant car selector (views/partials/quadrant-selector.php).
 * Pure CSS interaction: hidden real checkboxes drive the overlay styling
 * via :checked / :focus-visible; no JS involved.
 */

.pow-wizard .pow-quadrants {
    margin-bottom: var(--pow-space);
}

.pow-wizard .pow-quadrants__side {
    color: var(--pow-text-muted);
    flex: 0 0 auto;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
}

.pow-wizard .pow-quadrants__row {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin: 0.375rem 0;
}

.pow-wizard .pow-quadrants__panel {
    background: var(--pow-surface-alt);
    border: 1px solid var(--pow-border);
    border-radius: var(--pow-radius);
    flex: 1 1 auto;
    overflow: hidden;
    position: relative;
}

/* Subtle crosshair dividing the four hit areas */
.pow-wizard .pow-quadrants__panel::before {
    border-left: 1px dashed var(--pow-border);
    bottom: 0;
    content: "";
    left: 50%;
    position: absolute;
    top: 0;
}

.pow-wizard .pow-quadrants__panel::after {
    border-top: 1px dashed var(--pow-border);
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
}

.pow-wizard .pow-quadrants__car {
    display: block;
    height: auto;
    width: 100%;
}

.pow-wizard .pow-quadrants__quad {
    cursor: pointer;
    height: 50%;
    margin: 0;
    position: absolute;
    width: 50%;
    z-index: 1;
}

/* Front = LEFT half, driver side = BOTTOM row (SVG front faces left). */
.pow-wizard .pow-quadrants__quad--passenger_front { left: 0; top: 0; }
.pow-wizard .pow-quadrants__quad--passenger_rear { left: 50%; top: 0; }
.pow-wizard .pow-quadrants__quad--driver_front { left: 0; top: 50%; }
.pow-wizard .pow-quadrants__quad--driver_rear { left: 50%; top: 50%; }

.pow-wizard .pow-quadrants__input {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* No per-quadrant border — the only frame is the panel's own light
   border; selection reads through the tint and the dot marker. */
.pow-wizard .pow-quadrants__overlay {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.pow-wizard .pow-quadrants__quad:hover .pow-quadrants__overlay {
    background: var(--pow-accent-soft);
}

.pow-wizard .pow-quadrants__input:checked ~ .pow-quadrants__overlay {
    background: var(--pow-accent-soft);
}

/* Selected marker (Peddle style): filled dot inside an outlined ring,
   with a visible gap between the two. */
.pow-wizard .pow-quadrants__overlay::before {
    border: 2px solid var(--pow-accent);
    border-radius: 50%;
    content: "";
    height: 1.5rem;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.5rem;
}

.pow-wizard .pow-quadrants__overlay::after {
    background: var(--pow-accent);
    border-radius: 50%;
    content: "";
    height: 0.625rem;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0.625rem;
}

.pow-wizard .pow-quadrants__input:checked ~ .pow-quadrants__overlay::before,
.pow-wizard .pow-quadrants__input:checked ~ .pow-quadrants__overlay::after {
    opacity: 1;
}

.pow-wizard .pow-quadrants__input:focus-visible ~ .pow-quadrants__overlay {
    outline: 2px solid var(--pow-accent);
    outline-offset: -3px;
}

/* Framework-independent visually-hidden helper (labels for AT) */
.pow-wizard .pow-sr {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* ------------------------------------------- acceptance: pickup form
 * Address-type radios drive the business fields with a CSS sibling
 * rule, so the conditional needs no JS.
 */

.pow-wizard .pow-choice-cards--inline {
    flex-direction: row;
}

.pow-wizard .pow-choice-cards--inline .pow-choice-card {
    flex: 1 1 0;
    justify-content: center;
}

/* Side by side from desktop up only, radios kept (Title specifics'
   usage); stacked below it like any other choice. */
@media (min-width: 62em) {
    .pow-wizard .pow-choice-cards--row-lg {
        flex-direction: row;
    }

    .pow-wizard .pow-choice-cards--row-lg .pow-choice-card {
        flex: 1 1 0;
    }
}

.pow-wizard .pow-address-type__radio {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.pow-wizard #pow-type-residence:checked ~ .pow-choice-cards .pow-choice-card[for="pow-type-residence"],
.pow-wizard #pow-type-business:checked ~ .pow-choice-cards .pow-choice-card[for="pow-type-business"] {
    border-color: var(--pow-accent);
    box-shadow: inset 0 0 0 1px var(--pow-accent);
}

.pow-wizard #pow-type-residence:focus-visible ~ .pow-choice-cards .pow-choice-card[for="pow-type-residence"],
.pow-wizard #pow-type-business:focus-visible ~ .pow-choice-cards .pow-choice-card[for="pow-type-business"] {
    outline: 2px solid var(--pow-accent);
    outline-offset: 2px;
}

.pow-wizard .pow-business-fields {
    display: none;
}

.pow-wizard #pow-type-business:checked ~ .pow-business-fields {
    display: block;
}

.pow-wizard .pow-readonly-row {
    align-items: baseline;
    background: var(--pow-surface-alt);
    border: 1px solid var(--pow-border);
    border-radius: var(--pow-radius-sm);
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
}

.pow-wizard .pow-readonly-row__note {
    color: var(--pow-text-muted);
    font-size: 0.8125rem;
    margin-left: auto;
}

.pow-wizard .pow-subtitle {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.pow-wizard .pow-seller-fields {
    border-top: 1px solid var(--pow-border);
    margin-top: var(--pow-space);
    padding-top: var(--pow-space);
}

/* The email ask, inside the offer screen: set apart from the amount and
   its checks by a line, the field and its Next on one row (stacked on a
   phone). */
.pow-wizard .pow-offer-ask {
    border-top: 1px solid var(--pow-border);
    margin-top: calc(var(--pow-space) * 1.5);
    padding-top: calc(var(--pow-space) * 1.5);
    text-align: left;
}

/* The icon to the left of the ask, as on step 1's way cards. */
.pow-wizard .pow-offer-ask__body {
    display: flex;
    gap: 0.875rem;
}

.pow-wizard .pow-offer-ask__content {
    flex: 1 1 auto;
    min-width: 0;
}

/* Only from desktop up: on a narrow screen the icon's column pushed the
   whole ask off the card's left edge. */
.pow-wizard .pow-offer-ask__icon {
    display: none;
}

@media (min-width: 62em) {
    .pow-wizard .pow-offer-ask__icon {
        display: inline-flex;
    }
}

.pow-wizard .pow-offer-ask__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.375rem;
}

.pow-wizard .pow-offer-ask .pow-help {
    margin-bottom: 0.75rem;
}

/* Stretched: the button and the input share the row's height. */
.pow-wizard .pow-offer-ask__row {
    align-items: stretch;
    display: flex;
    gap: 0.5rem;
}

.pow-wizard .pow-offer-ask__row .pow-field {
    flex: 1 1 auto;
    margin-bottom: 0;
    min-width: 0;
    text-align: left;
}

/* The Next of every other step (.pow-actions .pow-btn): its width, its
   padding, its arrow a gap away from the label. */
.pow-wizard .pow-offer-ask__row .pow-btn {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 0.5rem;
    justify-content: center;
    white-space: nowrap;
}

.pow-wizard .pow-offer-ask__row .pow-btn .pow-icon {
    flex: 0 0 auto;
    height: 1em;
    width: 1em;
}

.pow-wizard .pow-offer-ask__error {
    display: block;
    margin-top: 0.25rem;
    text-align: left;
}

@media (max-width: 34em) {
    .pow-wizard .pow-offer-ask__row {
        flex-direction: column;
    }
}

/* -------------------------------------- acceptance: pickup scheduling
 * The date strip is a row of in-page anchors, so jumping between days
 * costs no JS. Slots stay one radio group across every day.
 */

.pow-wizard .pow-datestrip {
    border-bottom: 1px solid var(--pow-border);
    display: flex;
    gap: 0.375rem;
    margin-bottom: var(--pow-space);
    overflow-x: auto;
    padding-bottom: 0.625rem;
}

.pow-wizard .pow-datestrip__day {
    background: var(--pow-surface-alt);
    border: 1px solid var(--pow-border);
    border-radius: var(--pow-radius-sm);
    color: var(--pow-text);
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    white-space: nowrap;
}

.pow-wizard .pow-datestrip__day:hover {
    border-color: var(--pow-accent);
}

/* A day with no windows still appears, so the strip shows the whole
 * range rather than implying those dates don't exist. */
.pow-wizard .pow-datestrip__day--empty {
    color: var(--pow-text-muted);
    opacity: 0.6;
}

.pow-wizard .pow-day {
    margin-bottom: var(--pow-space);
    /* Keeps the heading clear of the top edge after an anchor jump. */
    scroll-margin-top: 0.75rem;
}

.pow-wizard .pow-day__label {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 0.625rem;
}

.pow-wizard .pow-day__empty {
    color: var(--pow-text-muted);
    font-size: 0.875rem;
    margin: 0;
}

.pow-wizard .pow-slot__tz {
    color: var(--pow-text-muted);
    font-size: 0.75rem;
    font-weight: 400;
    margin-left: 0.375rem;
}

/* Framed by the same hairline the date strip uses, so the end of the
   options and the start of the actions are both stated. Equal padding
   top and bottom, and the same --pow-space above it as below it (the
   rule on .pow-refresh + .pow-actions), so the band reads as one thing
   rather than as something stuck to the buttons. */
.pow-wizard .pow-refresh {
    border-bottom: 1px solid var(--pow-border);
    border-top: 1px solid var(--pow-border);
    margin: var(--pow-space) 0 0;
    padding: 0.75rem 0;
    text-align: center;
}

.pow-wizard .pow-refresh + .pow-actions {
    margin-top: var(--pow-space);
}

/* A submit button that reads as a link: refreshing is a POST (it clears
 * the cached windows) but shouldn't compete with Next. */
.pow-wizard .pow-linkbtn {
    background: none;
    border: 0;
    color: var(--pow-text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.8125rem;
    padding: 0;
    text-decoration: underline;
}

.pow-wizard .pow-linkbtn:hover {
    color: var(--pow-accent);
}

/* ---------------------------------------- acceptance: payment details
 * A chip that fills the field with the seller's own name.
 *
 * The accent-tinted callout panel that used to frame the question here
 * and on Title specifics is gone: it read as a success alert, and it made
 * those two the only steps in the wizard whose helper line was boxed.
 * Both now use the plain .pow-help subtitle every other step uses.
 */

/* A submit button without JS, a fill-the-field shortcut with it — it
 * has to read as an offer either way, never as the primary action. */
/* Built to match the Offer ID badge (.pow-offer-chip): same tinted fill,
   same hairline, same pill radius and type. What keeps it from reading as
   another button next to Next is its SCALE, not the absence of an outline
   — a badge-sized pill at 0.75rem simply is not button-shaped.
   The one departure is vertical padding: the badge is not clickable and
   this is, so it gets enough height to stay a comfortable tap target
   rather than the badge's 0.125rem. */
.pow-wizard .pow-chip {
    background: var(--pow-surface-alt);
    border: 1px solid var(--pow-border);
    border-radius: 999px;
    color: var(--pow-text);
    cursor: pointer;
    display: inline-block;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.5rem;
    padding: 0.25rem 0.625rem;
}

.pow-wizard .pow-chip:hover {
    background: var(--pow-border);
}

.pow-wizard .pow-chip:focus-visible {
    outline: 2px solid var(--pow-accent);
    outline-offset: 2px;
}

/* ----------------------------------------- acceptance: title specifics
 * The color field is a native <select> and nothing else without JS.
 * wizard.js replaces it with the swatch-picker further down this file —
 * a button-and-listbox control that shows the color next to its name
 * both closed and open, which a native <option> cannot do.
 *
 * There used to be a JS-inserted "type to filter" text box in this flex
 * row, sized flex:0 1 12rem, which sat between the swatch and the select
 * and left a field where the seller expected the dropdown. That is why
 * the picker's trigger is a button, not an input: nothing to type into,
 * nothing to confuse.
 */

.pow-wizard .pow-color {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

/* Both the no-JS select and the picker that replaces it take the row:
   the picker is the flex item once JS has run, and without this it
   shrinks to its content while the row keeps the leftover space.
   min-width:0 lets a long colour name ellipsis instead of pushing the
   field wider than its container. */
.pow-wizard .pow-color .pow-select,
.pow-wizard .pow-color .pow-swatch-picker {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.pow-wizard .pow-swatch {
    background: var(--pow-surface-alt);
    border: 1px solid var(--pow-border);
    border-radius: var(--pow-radius-sm);
    flex: 0 0 auto;
    height: 1.5rem;
    width: 1.5rem;
}

/* One rule per value of the Accept schema's color enum. PeddleEnums::COLORS
   is the source of truth for both the list and the hexes; PeddleEnumsTest
   fails if a color gains, loses or changes its token here. */
.pow-wizard .pow-swatch--beige { background: var(--pow-swatch-beige); }
.pow-wizard .pow-swatch--black { background: var(--pow-swatch-black); }
.pow-wizard .pow-swatch--blue { background: var(--pow-swatch-blue); }
.pow-wizard .pow-swatch--brown { background: var(--pow-swatch-brown); }
.pow-wizard .pow-swatch--burgundy { background: var(--pow-swatch-burgundy); }
.pow-wizard .pow-swatch--charcoal { background: var(--pow-swatch-charcoal); }
.pow-wizard .pow-swatch--cream { background: var(--pow-swatch-cream); }
.pow-wizard .pow-swatch--gold { background: var(--pow-swatch-gold); }
.pow-wizard .pow-swatch--gray { background: var(--pow-swatch-gray); }
.pow-wizard .pow-swatch--green { background: var(--pow-swatch-green); }
.pow-wizard .pow-swatch--maroon { background: var(--pow-swatch-maroon); }
.pow-wizard .pow-swatch--orange { background: var(--pow-swatch-orange); }
.pow-wizard .pow-swatch--pink { background: var(--pow-swatch-pink); }
.pow-wizard .pow-swatch--purple { background: var(--pow-swatch-purple); }
.pow-wizard .pow-swatch--red { background: var(--pow-swatch-red); }
.pow-wizard .pow-swatch--silver { background: var(--pow-swatch-silver); }
.pow-wizard .pow-swatch--tan { background: var(--pow-swatch-tan); }
.pow-wizard .pow-swatch--teal { background: var(--pow-swatch-teal); }
.pow-wizard .pow-swatch--turquoise { background: var(--pow-swatch-turquoise); }
.pow-wizard .pow-swatch--white { background: var(--pow-swatch-white); }
.pow-wizard .pow-swatch--yellow { background: var(--pow-swatch-yellow); }

/* ------------------------------------------------------- swatch picker
 * The color field's JS enhancement: a button trigger and a listbox, both
 * showing a swatch beside the name. Built on the same shell the make/
 * model combobox uses (.pow-combo__list, .pow-combo__option, the hidden
 * .pow-combo__native select) so it reads as one family of pickers; only
 * the parts unique to swatches — the trigger button and the inline dot —
 * are styled here.
 */

.pow-wizard .pow-swatch-picker {
    position: relative;
}

/* A <button>, unlike the combobox's <input>, carries its own UA chrome
   (appearance, centred text) that the inherited select/input classes
   were never written to reset -- so it is reset explicitly here.
   .pow-swatch-picker is in the selector to outrank `.pow-standalone
   .pow-select { display: block }`, which the trigger inherits by wearing
   the select's classes and which, at equal specificity, would win on
   source order: block layout drops the swatch back to an inline span,
   whose width is then ignored and which renders as a 2px sliver. */
.pow-wizard .pow-swatch-picker .pow-swatch-picker__trigger {
    align-items: center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
    text-align: left;
    width: 100%;
}

.pow-wizard .pow-swatch-picker__trigger .pow-swatch {
    flex: 0 0 auto;
    height: 1.25rem;
    width: 1.25rem;
}

.pow-wizard .pow-swatch-picker__label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Select color", shown until something is chosen — muted like a
   placeholder, matching the tone the option itself is copied in. */
.pow-wizard .pow-swatch-picker__trigger--placeholder .pow-swatch-picker__label {
    color: var(--pow-text-muted);
}

/* Bootstrap's .custom-select / .form-select paints its own caret via
   background-image, and the trigger inherits that class straight from
   the select behind it, in BS4 and BS5 alike — so it already has one.
   Standalone mode has no such rule and a <button> draws no caret of its
   own, same gap the combobox's <input> has; same fix, same SVG. */
.pow-standalone .pow-swatch-picker__trigger {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

.pow-wizard .pow-swatch-picker__option {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.pow-wizard .pow-swatch-picker__option .pow-swatch {
    flex: 0 0 auto;
    height: 1.125rem;
    width: 1.125rem;
}

/* --------------------------------------------- review & confirmation
 * The last two screens. Both are phase views: no step nav, and on the
 * confirmation nothing to submit at all.
 */

.pow-wizard .pow-review {
    text-align: center;
}

.pow-wizard .pow-review__lead {
    color: var(--pow-text-muted);
    font-size: 1.0625rem;
    margin: 0 0 0.25rem;
}

.pow-wizard .pow-review__cards {
    display: grid;
    gap: 0.625rem;
    margin: var(--pow-space) 0;
    text-align: left;
}

.pow-wizard .pow-review-card {
    background: var(--pow-surface);
    border: 1px solid var(--pow-border);
    border-radius: var(--pow-radius-sm);
    padding: 0.75rem 1rem;
}

.pow-wizard .pow-review-card__head {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.pow-wizard .pow-review-card__label {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin: 0 0 0.25rem;
    text-transform: uppercase;
}

.pow-wizard .pow-review-card__edit {
    color: var(--pow-accent);
    display: inline-flex;
    line-height: 1;
}

.pow-wizard .pow-review-card__line {
    margin: 0 0 0.125rem;
}

.pow-wizard .pow-review-card__line--missing {
    color: var(--pow-text-muted);
    font-style: italic;
}

.pow-wizard .pow-review__cta {
    width: 100%;
}

@media (min-width: 40rem) {
    .pow-wizard .pow-review__cta {
        width: auto;
        min-width: 18rem;
    }
}

.pow-wizard .pow-review__legal {
    color: var(--pow-text-muted);
    font-size: 0.8125rem;
    margin: 0.75rem 0 0;
}

.pow-wizard .pow-confirmation {
    text-align: center;
}

.pow-wizard .pow-confirmation__icon {
    color: var(--pow-success);
    height: 2.5rem;
    width: 2.5rem;
}

.pow-wizard .pow-confirmation__lead {
    font-size: 1.125rem;
    margin: 0 0 var(--pow-space);
}

.pow-wizard .pow-confirmation__id {
    background: var(--pow-surface-alt);
    border: 1px solid var(--pow-border);
    border-radius: var(--pow-radius-sm);
    margin: 0 auto var(--pow-space);
    padding: 0.75rem 1rem;
}

/* The offer-id row is a flex row borrowed from the sidebar, so the card's
   text-align does not reach it — it needs centring of its own. The top
   margin goes too: that spacing is for sitting under the sidebar's vehicle
   block, and here the bordered box already provides its own padding. */
.pow-wizard .pow-confirmation .pow-sidebar__offer-id {
    justify-content: center;
    margin-top: 0;
}

/* Fine print, and rightly so: it sits inside the offer-id box and only
   explains the number above it. */
.pow-wizard .pow-confirmation__note {
    color: var(--pow-text-muted);
    font-size: 0.8125rem;
    margin: 0.25rem 0 0;
}

/* The support line is not fine print. It is the last thing on the screen
   and the one a seller with a doubt goes looking for, so it gets body
   size, full text colour and a rule to stand on instead of trailing off
   the bottom in grey. */
.pow-wizard .pow-confirmation__support {
    border-top: 1px solid var(--pow-border);
    color: var(--pow-text);
    font-size: 0.9375rem;
    margin: var(--pow-space) 0 0;
    padding-top: var(--pow-space);
}

/* The number reads as the actionable part, and never breaks in two. */
.pow-wizard .pow-confirmation__support a {
    color: var(--pow-accent);
    font-weight: 600;
    white-space: nowrap;
}

.pow-wizard .pow-confirmation__schedule {
    margin: 0 0 var(--pow-space);
}

/* "What happens next" follows the same pattern the offer screen uses for
   its explanatory columns (.pow-offer__columns): a rule to separate it
   from the centred celebration above, and left alignment — reading
   material, not headline. The half-space top margin adds up with the
   schedule line's bottom margin to the pattern's 1.5x rhythm. */
.pow-wizard .pow-confirmation__next {
    border-top: 1px solid var(--pow-border);
    margin-top: calc(var(--pow-space) * 0.5);
    padding-top: var(--pow-space);
    text-align: left;
}

.pow-wizard .pow-nextsteps {
    list-style: none;
    margin: 0 0 var(--pow-space);
    padding: 0;
    text-align: left;
}

.pow-wizard .pow-nextstep {
    align-items: flex-start;
    display: flex;
    gap: 0.625rem;
    padding: 0.5rem 0;
}

.pow-wizard .pow-nextstep__num {
    background: var(--pow-accent-soft);
    border-radius: 999px;
    color: var(--pow-accent);
    flex: 0 0 auto;
    font-size: 0.8125rem;
    font-weight: 700;
    height: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    width: 1.5rem;
}

/* ------------------------------------------- sidebar offer footer */

.pow-wizard .pow-sidebar__amount {
    color: var(--pow-accent);
    font-size: 1.375rem;
    font-weight: 800;
    margin: 0;
}

.pow-wizard .pow-sidebar__expiry {
    color: var(--pow-text-muted);
    font-size: 0.75rem;
    margin: 0 0 0.5rem;
}

/* ------------------------------------------------------ offer screen
 * The phase view shown once an instant offer exists. Amount-driven
 * variants share this block; the amount itself is the one place the
 * accent token appears at display size.
 */

.pow-wizard .pow-offer {
    text-align: center;
}

.pow-wizard .pow-offer__lead {
    color: var(--pow-text);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
}

.pow-wizard .pow-offer__lead--none {
    margin-bottom: 0.75rem;
}

.pow-wizard .pow-offer__amount {
    color: var(--pow-accent);
    font-size: 3.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 0.75rem;
}

/* The tick rides the FIRST line, not the middle of the block: centring
   it looked right while the sentence fitted one line and left it
   floating between them as soon as a narrow phone wrapped it. */
.pow-wizard .pow-offer__pickup {
    align-items: flex-start;
    color: var(--pow-text-muted);
    display: flex;
    font-size: 0.9375rem;
    gap: 0.375rem;
    justify-content: center;
    margin: 0 0 var(--pow-space);
}

/* One line on a phone too (measured: 360px wraps it at 15px). */
@media (max-width: 34em) {
    .pow-wizard .pow-offer__pickup {
        font-size: 0.875rem;
    }
}

/* Giving the icon a full line box is what lines it up: the glyph keeps
   its aspect ratio and centres inside that box, so it sits on the first
   line's centre whatever the text does below it. */
.pow-wizard .pow-offer__pickup-icon {
    color: var(--pow-success);
    flex: 0 0 auto;
    height: 1.5em;
    width: 1em;
}

.pow-wizard .pow-offer__note,
.pow-wizard .pow-offer__subtext {
    color: var(--pow-text-muted);
    margin: 0 0 var(--pow-space);
}

.pow-wizard .pow-offer__confirmation {
    color: var(--pow-success);
    font-weight: 600;
    margin: 0 0 var(--pow-space);
}

.pow-wizard .pow-offer .pow-actions {
    display: flex;
    justify-content: center;
}

.pow-wizard .pow-offer__notify {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: var(--pow-space);
}

.pow-wizard .pow-offer__notify .pow-field {
    flex: 1 1 14rem;
    margin-bottom: 0;
    max-width: 20rem;
    text-align: left;
}

.pow-wizard .pow-offer__columns {
    border-top: 1px solid var(--pow-border);
    display: flex;
    gap: var(--pow-space);
    margin-top: calc(var(--pow-space) * 1.5);
    padding-top: var(--pow-space);
    text-align: left;
}

.pow-wizard .pow-offer__column {
    flex: 1 1 0;
}

.pow-wizard .pow-offer__column-title {
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 0.375rem;
}

.pow-wizard .pow-offer__column-body {
    color: var(--pow-text-muted);
    font-size: 0.875rem;
    margin: 0;
}

/* Price and its action on one line; they stack on a phone, where a button
   beside the amount would leave neither room to breathe. */
.pow-wizard .pow-review__headline {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem var(--pow-space);
    justify-content: space-between;
    text-align: left;
}

.pow-wizard .pow-review__headline .pow-offer__amount {
    margin: 0;
}

.pow-wizard .pow-offer .pow-disclosure {
    margin-top: var(--pow-space);
    text-align: left;
}

@media (max-width: 34em) {
    .pow-wizard .pow-offer__columns {
        flex-direction: column;
    }
}

/* ----------------------------------------- sidebar offer header card */

.pow-wizard .pow-sidebar__vehicle {
    border-bottom: 1px solid var(--pow-border);
    margin-bottom: var(--pow-space);
    padding-bottom: 0.75rem;
}

.pow-wizard .pow-sidebar__vehicle-year {
    color: var(--pow-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    margin: 0;
}

.pow-wizard .pow-sidebar__vehicle-name {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0;
}

.pow-wizard .pow-sidebar__vehicle-trim,
.pow-wizard .pow-sidebar__vehicle-place {
    color: var(--pow-text-muted);
    font-size: 0.8125rem;
    margin: 0.125rem 0 0;
}

.pow-wizard .pow-sidebar__offer-id {
    align-items: center;
    display: flex;
    gap: 0.25rem;
    margin: 0.5rem 0 0;
}

.pow-wizard .pow-offer-chip {
    background: var(--pow-surface-alt);
    border: 1px solid var(--pow-border);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
}

.pow-wizard .pow-offer-chip__copy {
    background: none;
    border: 0;
    color: var(--pow-text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
}

.pow-wizard .pow-offer-chip__copy:hover,
.pow-wizard .pow-offer-chip__copy.pow-copied {
    color: var(--pow-accent);
}

/* -------------------------------------------------- dialog shell
 * Single source of dialog styling (views/partials/dialog-shell.php).
 * Every modal and every inline no-JS fallback panel renders through the
 * shell; no dialog-specific CSS may exist outside this block. Tones:
 * warning (caveats), danger (dead ends, muted), neutral.
 */

.pow-wizard .pow-dialog {
    background: var(--pow-surface);
    border: 0;
    border-radius: var(--pow-radius);
    box-shadow: var(--pow-shadow-lg);
    color: var(--pow-text);
    max-width: 26rem;
    padding: 1.5rem;
    text-align: center;
}

.pow-wizard .pow-dialog::backdrop {
    background: var(--pow-backdrop);
}

.pow-wizard .pow-dialog__close {
    background: none;
    border: 0;
    color: var(--pow-text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem;
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
}

.pow-wizard .pow-dialog__close:hover {
    color: var(--pow-text);
}

.pow-wizard .pow-dialog__close .pow-icon {
    height: 1.25em;
    width: 1.25em;
}

/* Fallback alert-triangle at standard icon scale */
/* Illustration-scale line art (96px, matching the symbols' own viewBox
   1:1) renders in text color; the artwork's single accent element picks
   up the tone via --pow-illustration-accent. Every dialog uses this —
   the old 2.5rem --icon variant is gone, along with the split weight it
   caused between dialogs that named an illustration and those that fell
   back to a small triangle. */
.pow-wizard .pow-dialog__media--illustration {
    color: var(--pow-text);
    height: 6rem;
    width: 6rem;
}

.pow-wizard .pow-dialog__media--warning {
    --pow-illustration-accent: var(--pow-warning);
}

.pow-wizard .pow-dialog__media--danger {
    --pow-illustration-accent: var(--pow-danger);
}

.pow-wizard .pow-dialog__kicker {
    color: var(--pow-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 0.5rem 0 0.25rem;
    text-transform: uppercase;
}

.pow-wizard .pow-dialog__title {
    color: var(--pow-text);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.pow-wizard .pow-dialog__body {
    color: var(--pow-text-muted);
    margin: 0 0 1rem;
}

.pow-wizard .pow-dialog__primary {
    width: 100%;
}

/* Quiet text-link style actions under the primary. Block + auto margins
   rather than inline-block: a dialog can carry more than one of these
   (the soft lock offers "Start over" then "Call support"), and inline
   ones would run together on a single line — the shell emits them with
   no whitespace between. width:fit-content keeps each hit area on the
   text itself, so one action still looks exactly as it did. */
.pow-wizard .pow-dialog__secondary {
    background: none;
    border: 0;
    color: var(--pow-text-muted);
    cursor: pointer;
    display: block;
    font-size: 0.875rem;
    margin: 0.5rem auto 0;
    text-decoration: underline;
    width: fit-content;
}

.pow-wizard .pow-dialog__secondary:hover {
    color: var(--pow-text);
}

/* Inline no-JS fallback panels — same content hierarchy as the modal */
.pow-wizard .pow-dialog-inline {
    border-radius: var(--pow-radius-sm);
    margin-bottom: var(--pow-space);
    padding: 1rem;
    text-align: center;
}

.pow-wizard .pow-dialog-inline--warning {
    background: var(--pow-warning-bg);
    border: 1px solid var(--pow-warning);
}

.pow-wizard .pow-dialog-inline--danger {
    background: var(--pow-danger-bg);
    border: 1px solid var(--pow-danger);
}

.pow-wizard .pow-dialog-inline--neutral {
    background: var(--pow-surface-alt);
    border: 1px solid var(--pow-border);
}

.pow-wizard .pow-dialog-inline .pow-dialog__primary {
    width: auto;
}

.pow-wizard .pow-dialog-inline > :last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------ ZIP field */

.pow-wizard .pow-zip-wrap {
    max-width: 14rem;
    position: relative;
}

.pow-wizard .pow-zip-check {
    color: var(--pow-success);
    display: none;
    position: absolute;
    right: 0.625rem;
    top: 50%;
    transform: translateY(-50%);
}

.pow-wizard .pow-zip-valid .pow-zip-check {
    display: inline-flex;
}

.pow-wizard .pow-zip-city {
    color: var(--pow-success);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: 0.25rem;
    min-height: 1.25rem;
}

/* ------------------------------------------------ in-field suffix
 * Numeric inputs with a unit label inside the field (mileage "Miles").
 */

.pow-wizard .pow-suffix-wrap {
    max-width: 14rem;
    position: relative;
}

.pow-wizard .pow-suffix-wrap .pow-input {
    padding-right: 3.75rem;
}

.pow-wizard .pow-input-suffix {
    color: var(--pow-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    pointer-events: none;
    position: absolute;
    right: 0.75rem;
    text-transform: uppercase;
    top: 50%;
    transform: translateY(-50%);
}

/* ------------------------------------------------------------ checkbox */

.pow-standalone .pow-check {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.pow-standalone .pow-check__label {
    margin: 0;
}

/* -------------------------------------------------------------- actions */

.pow-wizard .pow-actions {
    margin-top: calc(var(--pow-space) * 1.25);
}

/* Back/Next pair a label with an arrow. inline-flex overrides the
   inline-block the buttons get from Bootstrap's .btn and from
   .pow-standalone alike, and is what puts the glyph on the label's centre
   line — vertical-align nudges would need re-tuning per font size. */
.pow-wizard .pow-actions .pow-btn {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
    justify-content: center;
}

/* Sized in em so the arrow tracks the label rather than sitting at a
   fixed 16px next to whatever the host's font scale turns out to be. */
.pow-wizard .pow-actions .pow-btn .pow-icon {
    flex: 0 0 auto;
    height: 1em;
    width: 1em;
}

.pow-wizard .pow-step-nav {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.pow-wizard .pow-step-nav .pow-btn-cta {
    margin-left: auto;
}

.pow-wizard .pow-step-nav a.pow-btn {
    text-align: center;
    text-decoration: none;
}

/* Two ways forward side by side (Skip + Next on pickup scheduling). The
   auto margin belongs to the group so Back keeps the left edge, and the
   CTA's own auto margin is cancelled inside it — otherwise the free space
   would be split between the two and prise the pair apart. */
.pow-wizard .pow-step-nav__forward {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    margin-left: auto;
}

.pow-wizard .pow-step-nav .pow-step-nav__forward .pow-btn-cta {
    margin-left: 0;
}

/* -------------------------------------------------------------- buttons
 * Color comes exclusively from tokens, in every Bootstrap mode — the
 * markup only ever combines pow-btn-cta / pow-btn--secondary with the
 * structural Bootstrap "btn" class (never btn-primary etc.).
 */

.pow-wizard .pow-btn-cta {
    background: var(--pow-cta);
    border: 1px solid var(--pow-cta);
    color: var(--pow-cta-contrast);
    min-width: 12rem;
}

.pow-wizard .pow-btn-cta:hover:not(:disabled),
.pow-wizard .pow-btn-cta:active:not(:disabled) {
    background: var(--pow-cta-hover);
    border-color: var(--pow-cta-hover);
    color: var(--pow-cta-contrast);
}

.pow-wizard .pow-btn--secondary {
    background: var(--pow-surface);
    border: 1px solid var(--pow-border);
    color: var(--pow-text);
}

/* Safe/undo action in dialogs — deliberately NOT the funnel CTA */
.pow-wizard .pow-btn--neutral {
    background: var(--pow-text);
    border: 1px solid var(--pow-text);
    color: var(--pow-surface);
}

.pow-wizard .pow-btn--neutral:hover:not(:disabled) {
    opacity: 0.85;
}

.pow-wizard .pow-btn--secondary:hover {
    background: var(--pow-surface-alt);
    border-color: var(--pow-text-muted);
    color: var(--pow-text);
}

.pow-wizard .pow-btn:disabled {
    cursor: default;
    opacity: 0.65;
}

.pow-wizard .pow-btn:focus {
    box-shadow: 0 0 0 3px var(--pow-focus-ring);
    outline: none;
}

/* --------------------------------------------- select autocomplete
 * The combobox wizard.js layers over the long selects (make, model, the
 * state pickers). The native select stays in the DOM, hidden, so the
 * form still submits it; everything here dresses the input and the
 * listbox that stand in front of it.
 *
 * The input wears the same classes as the select it replaces, so its
 * box, borders and focus ring already come from the rules above in all
 * three Bootstrap modes. Only the parts a select has no equivalent for
 * are styled here.
 */

.pow-wizard .pow-combo {
    position: relative;
}

/* Hidden from sight and from screen readers -- the combobox speaks for
   it -- but still submitted. Not display:none: some browsers skip
   validation and value restoration on fully undisplayed controls. */
.pow-wizard .pow-combo__native {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.pow-wizard .pow-combo__list {
    background: var(--pow-surface);
    border: 1px solid var(--pow-border);
    border-radius: var(--pow-radius-sm);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    left: 0;
    list-style: none;
    margin: 0.25rem 0 0;
    max-height: 16rem;
    overflow-y: auto;
    padding: 0.25rem;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 20;
}

.pow-wizard .pow-combo__option {
    border-radius: var(--pow-radius-sm);
    color: var(--pow-text);
    cursor: pointer;
    padding: 0.5rem 0.75rem;
}

/* Keyboard and pointer share one highlight: the active option is the one
   Enter will take, whether you arrowed to it or hovered it. */
.pow-wizard .pow-combo__option.is-active,
.pow-wizard .pow-combo__option:hover {
    background: var(--pow-accent-soft);
}

/* The chosen answer wears the same fill in every picker (the colour
   picker's showed it, the others only bolded it). */
.pow-wizard .pow-combo__option[aria-selected="true"] {
    background: var(--pow-accent-soft);
    font-weight: 600;
}

/* The blank answer a select may offer ("Not sure / Not listed") is
   listed last, set apart from the real options by a divider; it looks like any other
   option. */
.pow-wizard .pow-combo__divider {
    border-top: 1px solid var(--pow-border);
    list-style: none;
    margin: 0.25rem 0;
}

.pow-wizard .pow-combo__empty {
    color: var(--pow-text-muted);
    padding: 0.5rem 0.75rem;
}

/* background-color, never the shorthand: it would reset background-
   repeat, and Bootstrap 5 paints .is-invalid with two background images
   (caret + alert) that then tile across the field. */
.pow-wizard .pow-combo__input:disabled {
    background-color: var(--pow-surface-alt);
    cursor: not-allowed;
}

/* Bootstrap's .form-select paints its own caret, so the input inherits
   one already. Standalone mode has no such rule and an <input> draws no
   caret of its own: without this the field would not read as a picker. */
.pow-standalone .pow-combo__input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: 2.25rem;
}

/* ------------------------------------- Bootstrap color-leak overrides
 * Bootstrap structural classes must not paint their own brand blue on
 * elements the wizard owns: token-driven focus rings and check colors
 * in every mode.
 */

.pow-wizard .pow-input:focus,
.pow-wizard .pow-select:focus {
    border-color: var(--pow-accent);
    box-shadow: 0 0 0 3px var(--pow-focus-ring);
    outline: none;
}

.pow-wizard input[type="radio"],
.pow-wizard input[type="checkbox"] {
    accent-color: var(--pow-accent);
}

.pow-wizard .form-check-input:checked {
    background-color: var(--pow-accent);
    border-color: var(--pow-accent);
}

.pow-wizard .form-check-input:focus,
.pow-wizard .custom-control-input:focus ~ .custom-control-label::before {
    border-color: var(--pow-accent);
    box-shadow: 0 0 0 3px var(--pow-focus-ring);
}

.pow-wizard .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--pow-accent);
    border-color: var(--pow-accent);
}

/* Checkboxes a size up (1.25em) from the framework's 1em: an easier
   tap target. The gutter grows with the box, and the top margin keeps
   it centred on the label's first line (line-height 1.5 = 0.75em). */
.pow-wizard .pow-check.form-check {
    padding-left: 1.875em;
}

.pow-wizard .pow-check .form-check-input {
    height: 1.25em;
    margin-left: -1.875em;
    margin-top: 0.125em;
    width: 1.25em;
}

.pow-wizard .pow-check.custom-checkbox {
    padding-left: 2rem;
}

.pow-wizard .pow-check .custom-control-label::before,
.pow-wizard .pow-check .custom-control-label::after {
    height: 1.25rem;
    left: -2rem;
    top: 0.125rem;
    width: 1.25rem;
}

.pow-standalone .pow-check__input {
    flex-shrink: 0;
    height: 1.25em;
    margin: 0;
    width: 1.25em;
}

/* ---------------------------------------------------- standalone mode
 * Only active when ui.bootstrap_version = null: basic form and button
 * structure so the wizard is usable without any framework. Never applied
 * alongside Bootstrap, so there is nothing to fight.
 */

.pow-standalone .pow-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* A read-only value is labelled by a <span>, not a <label>: there is no
   control for a `for` to point at. Bootstrap's Reboot makes <label>
   inline-block, which is what lets its margin-bottom apply; a <span>
   stays inline, where vertical margins do nothing, so those fields sat
   2px under their label against the 8px everywhere else. Standalone was
   already fine -- it declares display:block above -- and keeps its own
   tighter spacing. */
.pow-wizard span.pow-label {
    display: block;
    margin-bottom: 0.5rem;
}

.pow-standalone span.pow-label {
    margin-bottom: 0.25rem;
}

.pow-standalone .pow-input,
.pow-standalone .pow-select {
    background: var(--pow-surface);
    border: 1px solid var(--pow-border);
    border-radius: var(--pow-radius-sm);
    box-sizing: border-box;
    color: var(--pow-text);
    display: block;
    font-size: var(--pow-font-size);
    line-height: 1.5;
    padding: 0.5rem 0.75rem;
    width: 100%;
}

.pow-standalone .pow-btn {
    border-radius: var(--pow-radius-sm);
    cursor: pointer;
    display: inline-block;
    font-size: var(--pow-font-size);
    font-weight: 600;
    padding: 0.5rem 1.25rem;
}

.pow-standalone .pow-input-group {
    display: flex;
}

.pow-standalone .pow-input-addon {
    align-items: center;
    background: var(--pow-surface-alt);
    border: 1px solid var(--pow-border);
    border-radius: var(--pow-radius-sm) 0 0 var(--pow-radius-sm);
    border-right: 0;
    display: flex;
    padding: 0.5rem 0.75rem;
}

.pow-standalone .pow-input-group .pow-input {
    border-radius: 0 var(--pow-radius-sm) var(--pow-radius-sm) 0;
}

/* Loading state applied by wizard.js while a fragment swap is in flight */
.pow-wizard.pow-loading {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* The hidden attribute only carries UA weight, and both Bootstrap's
   .btn and the standalone .pow-btn set display, which beats it. Without
   this the confirmation's print button (shipped hidden, revealed by
   JS) would show for no-JS sellers who cannot use it. */
.pow-wizard [hidden] {
    display: none !important;
}

.pow-wizard .pow-confirmation__print {
    margin-top: 1rem;
}


.pow-wizard .pow-offer__version,
.pow-wizard .pow-offer__vehicle-check {
    color: var(--pow-text-muted);
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
}

/* The no-title documents: a dozen of them, needed at pickup rather than
   for the decision on this screen, so a folded card the width of the
   offer block. Closed, it is one line; open, a one-column checklist
   (two columns broke the long items into ragged rows). */
.pow-wizard .pow-offer-docs {
    background: var(--pow-surface-alt);
    border: 1px solid var(--pow-border);
    border-radius: var(--pow-radius);
    margin: var(--pow-space) auto 0;
    max-width: 34rem;
    text-align: left;
}

.pow-wizard .pow-offer-docs__summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 0.9rem;
    font-weight: 600;
    gap: 0.5rem;
    list-style: none; /* hide the default disclosure triangle */
    padding: 0.75rem 1rem;
    user-select: none;
}

.pow-wizard .pow-offer-docs__summary::-webkit-details-marker {
    display: none;
}

.pow-wizard .pow-offer-docs__summary:focus-visible {
    border-radius: var(--pow-radius);
    box-shadow: 0 0 0 0.2rem var(--pow-focus-ring);
    outline: none;
}

.pow-wizard .pow-offer-docs__icon {
    color: var(--pow-text-muted);
    flex: 0 0 auto;
}

.pow-wizard .pow-offer-docs__title {
    flex: 1 1 auto;
}

.pow-wizard .pow-offer-docs__count {
    background: var(--pow-surface);
    border: 1px solid var(--pow-border);
    border-radius: 999px;
    color: var(--pow-text-muted);
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    margin-left: 0.25rem;
    padding: 0 0.45rem;
    vertical-align: 0.1em;
}

.pow-wizard .pow-offer-docs__chevron {
    color: var(--pow-text-muted);
    flex: 0 0 auto;
    transition: transform 0.15s ease;
}

.pow-wizard .pow-offer-docs[open] .pow-offer-docs__chevron {
    transform: rotate(180deg);
}

.pow-wizard .pow-offer-docs__panel {
    border-top: 1px solid var(--pow-border);
    font-size: 0.875rem;
    padding: 0.75rem 1rem 1rem;
}

.pow-wizard .pow-offer-docs__lead {
    color: var(--pow-text-muted);
    margin: 0 0 0.625rem;
}

.pow-wizard .pow-offer-docs__list {
    display: grid;
    gap: 0.375rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pow-wizard .pow-offer-docs__list li {
    align-items: flex-start;
    display: flex;
    gap: 0.5rem;
}

.pow-wizard .pow-offer-docs__tick {
    color: var(--pow-success);
    flex: 0 0 auto;
    height: 1.25em;
    width: 1em;
}

@media (prefers-reduced-motion: reduce) {
    .pow-wizard .pow-offer-docs__chevron {
        transition: none;
    }
}

/* The step title receives focus programmatically after a fragment
   swap (tabindex="-1") so screen readers announce the new question.
   It is not a Tab stop and not interactive, so the focus ring is
   pure noise here -- keyboard users can never land on it themselves. */
.pow-wizard .pow-title:focus {
    outline: none;
}

/* -------------------------------------------------------------- print
 * The confirmation is the one screen whose content is a document, so
 * printing it prints only the confirmation card. The header, footer
 * and sidebar belong to the host page, whose markup the module cannot
 * know; hiding by visibility works against any host DOM. Scoped with
 * :has() so every other screen -- and every other page the host loads
 * this stylesheet on -- prints exactly as it always did; a browser
 * without :has() simply prints the full page.
 */
@media print {
    body:has(.pow-confirmation) * {
        visibility: hidden;
    }

    body:has(.pow-confirmation) .pow-confirmation,
    body:has(.pow-confirmation) .pow-confirmation * {
        visibility: visible;
    }

    body:has(.pow-confirmation) .pow-confirmation {
        border: 0;
        box-shadow: none;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }

    /* On paper a copy button, a print button and a first-arrival
       dialog are noise. */
    .pow-confirmation .pow-offer-chip__copy,
    .pow-confirmation .pow-confirmation__print,
    .pow-confirmation dialog {
        display: none !important;
    }
}