/* ==========================================================================
   Lease — Add Vehicle wizard
   Extends the shared .vp-wizard-* chrome already defined in app.css.
   No new colours are introduced — everything below reuses the theme's
   existing --vp-* tokens and the same on/off visual language as
   .vp-chip.is-active / .vp-package-card.is-selected / .vp-step-plate.is-current.
   ========================================================================== */

/* ── Premium fleet-pool eligibility note (Step 0) ───────────────────────── */
.vp-fleet-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid var(--vp-line);
    border-radius: 3px;
    background: var(--vp-surface);
    color: var(--vp-text-dim);
    font-size: 11px;
    font-family: var(--vp-font-mono);
    line-height: 1.4;
}
.vp-fleet-note.is-eligible {
    border-color: var(--vp-line-strong);
    background: var(--vp-surface-raised);
    color: var(--vp-text);
}
.vp-fleet-note svg { flex-shrink: 0; }

/* ── Use-case toggle rows (Step 1: Pricing) ──────────────────────────────── */
.vp-usecase-list { display: flex; flex-direction: column; gap: 10px; }
.vp-usecase-row {
    border: 1px solid var(--vp-line);
    border-radius: 3px;
    padding: 12px 14px;
    background: var(--vp-surface);
    transition: border-color 0.2s var(--vp-ease), background 0.2s var(--vp-ease);
}
.vp-usecase-row.is-enabled {
    border-color: var(--vp-line-strong);
    background: var(--vp-surface-raised);
}
.vp-usecase-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vp-usecase-row__label {
    font-size: 13px;
    color: var(--vp-text-dim);
    font-weight: 500;
}
.vp-usecase-row.is-enabled .vp-usecase-row__label { color: var(--vp-white); }
.vp-usecase-row .lf-uc-price { margin-top: 10px; }

/* ── Geographic-limit selection cards (Step 3) ───────────────────────────── */
.vp-geo-list { display: flex; flex-direction: column; gap: 10px; }
.vp-geo-card {
    border: 1px solid var(--vp-line);
    border-radius: 3px;
    padding: 14px 16px;
    background: var(--vp-surface);
    cursor: pointer;
    transition: border-color 0.2s var(--vp-ease), background 0.2s var(--vp-ease);
}
.vp-geo-card:hover { border-color: var(--vp-line-strong); }
.vp-geo-card.is-selected {
    border-color: var(--vp-white);
    background: var(--vp-surface-raised);
}
.vp-geo-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.vp-geo-card__head strong { color: var(--vp-white); font-size: 14px; font-weight: 600; }
.vp-geo-card__radio {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--vp-line-strong);
    flex-shrink: 0;
    position: relative;
}
.vp-geo-card.is-selected .vp-geo-card__radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--vp-white);
}
.vp-geo-card p {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--vp-text-faint);
    line-height: 1.5;
}

/* ── Document expiry date field (Step 5) ─────────────────────────────────── */
.vp-doc-expiry {
    margin: -6px 0 14px;
    padding-left: 2px;
}
.vp-doc-expiry .vp-filter-label { margin-top: 0; font-size: 11px; }
.vp-doc-expiry input[type="date"] {
    color-scheme: dark;
}

/* ── Confirmation panel (shown after successful submit) ──────────────────── */
.vp-wizard-confirm {
    max-width: 440px;
    margin: 60px auto;
    text-align: center;
    padding: 0 20px;
}
.vp-wizard-confirm__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--vp-line-strong);
    border-radius: 50%;
    color: var(--vp-white);
    background: var(--vp-surface-raised);
}
.vp-wizard-confirm h1 {
    color: var(--vp-white);
    font-size: 26px;
    margin: 0 0 10px;
}
.vp-wizard-confirm p {
    color: var(--vp-text-dim);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 26px;
}
.vp-wizard-confirm__actions .vp-btn { display: inline-flex; }