/* ── Wizard Container ─────────────────────────────────────────── */
.vpp-wizard {
    max-width: 100%;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--vpp-space-4);
    padding: 0;
    flex: 1;
    min-height: 0;
    height: 100%;
}

.vpp-wizard .vpp-data-card {
    cursor: default;
}

.vpp-wizard .wizard-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    animation: vpp-step-enter var(--vpp-transition-base) ease-out;
}

@keyframes vpp-step-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Hero/Header ─────────────────────────────────────────────── */
.vpp-wizard-hero {
    display: flex;
    flex-direction: column;
    gap: var(--vpp-space-4);
    padding: var(--vpp-space-5);
}

.vpp-wizard-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--vpp-space-3);
    flex-wrap: wrap;
}

.vpp-wizard-badge-bar {
    display: flex;
    align-items: center;
    gap: var(--vpp-space-2);
    flex-wrap: wrap;
}

.vpp-wizard-badge-bar .rz-badge {
    font-size: var(--vpp-text-xs);
}

.vpp-wizard-hero-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--vpp-space-4);
}

.vpp-wizard-hero-copy {
    max-width: 780px;
}

.vpp-wizard-kicker {
    display: inline-flex;
    margin-bottom: var(--vpp-space-2);
    color: var(--vpp-primary-700);
    font-size: var(--vpp-text-xs);
    font-weight: var(--vpp-font-weight-semibold);
    letter-spacing: 0;
    text-transform: uppercase;
}

.vpp-wizard-title {
    margin: 0;
    font-family: var(--vpp-font-display);
    font-size: clamp(1.75rem, 2vw, 2.3rem);
    line-height: 1.15;
    color: var(--vpp-text-primary);
}

.vpp-wizard-subtitle {
    margin: var(--vpp-space-2) 0 0;
    max-width: 720px;
    font-size: var(--vpp-text-base);
    line-height: 1.65;
    color: var(--vpp-text-secondary);
}

.vpp-wizard-hero-step {
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: var(--vpp-space-3);
    border: 1px solid var(--vpp-border-default);
    border-radius: var(--vpp-radius-md);
    background: var(--vpp-bg-surface);
}

.vpp-wizard-step-count {
    color: var(--vpp-primary-700);
    font-size: var(--vpp-text-xs);
    font-weight: var(--vpp-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0;
}

.vpp-wizard-hero-step strong {
    font-family: var(--vpp-font-display);
    font-size: var(--vpp-text-lg);
    color: var(--vpp-text-primary);
}

.vpp-wizard-hero-step span:last-child {
    color: var(--vpp-text-secondary);
    font-size: var(--vpp-text-sm);
    line-height: 1.55;
}

.vpp-wizard-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--vpp-space-3);
}

.vpp-wizard-summary-card {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 110px;
    padding: var(--vpp-space-4);
    border: 1px solid var(--vpp-border-default);
    border-radius: var(--vpp-radius-md);
    background: linear-gradient(180deg, var(--vpp-bg-surface) 0%, var(--vpp-bg-elevated) 100%);
}

.vpp-wizard-summary-label {
    color: var(--vpp-text-tertiary);
    font-size: var(--vpp-text-xs);
    font-weight: var(--vpp-font-weight-semibold);
    letter-spacing: 0;
    text-transform: uppercase;
}

.vpp-wizard-summary-card strong {
    font-family: var(--vpp-font-display);
    font-size: var(--vpp-text-xl);
    color: var(--vpp-text-primary);
    line-height: 1.2;
}

.vpp-wizard-summary-meta {
    color: var(--vpp-text-secondary);
    font-size: var(--vpp-text-sm);
    line-height: 1.5;
}

/* ── Stage / Steps ───────────────────────────────────────────── */
.vpp-wizard-stage {
    display: flex;
    flex-direction: column;
    gap: var(--vpp-space-4);
    padding: 0;
    flex: 1;
    min-height: 0;
}

.vpp-wizard .rz-steps {
    display: flex;
    flex-direction: column;
    gap: var(--vpp-space-4);
}

.vpp-wizard .rz-steps > ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vpp-space-3);
    margin: 0;
    padding: 0 0 var(--vpp-space-4);
    border-bottom: 1px solid var(--vpp-border-default);
}

.vpp-wizard .rz-steps-item {
    flex: 1 1 220px;
}

.vpp-wizard .rz-menuitem-link {
    display: inline-flex;
    align-items: center;
    gap: var(--vpp-space-2);
}

.vpp-wizard .rz-steps-title {
    font-weight: var(--vpp-font-weight-semibold);
    color: var(--vpp-text-secondary);
}

.vpp-wizard .rz-steps-number {
    width: 2.25rem;
    height: 2.25rem;
    line-height: 2.25rem;
    background: var(--vpp-bg-surface);
    color: var(--vpp-text-secondary);
    box-shadow: inset 0 0 0 1px var(--vpp-border-default);
}

.vpp-wizard .rz-state-highlight .rz-steps-number {
    background: var(--vpp-primary-500);
    color: #fff;
    box-shadow: none;
}

.vpp-wizard .rz-state-highlight .rz-steps-title {
    color: var(--vpp-text-primary);
}

.vpp-wizard .rz-steps .rz-widget-content {
    overflow: visible;
}

/* ── Panels / Shared primitives ─────────────────────────────── */
.wizard-step-products,
.wizard-step-setup,
.wizard-step-review {
    display: flex;
    flex-direction: column;
    gap: var(--vpp-space-3);
}

.wizard-step-review {
    padding-top: var(--vpp-space-2);
}

.vpp-wizard-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--vpp-space-3);
    margin-bottom: var(--vpp-space-3);
}

.vpp-wizard-panel-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.vpp-wizard-panel-title {
    font-family: var(--vpp-font-display);
    font-size: var(--vpp-text-lg);
    font-weight: var(--vpp-font-weight-semibold);
    color: var(--vpp-text-primary);
}

.vpp-wizard-panel-copy {
    margin: 0;
    color: var(--vpp-text-secondary);
    font-size: var(--vpp-text-sm);
    line-height: 1.55;
}

.vpp-wizard-panel-card {
    padding: 0;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.vpp-wizard-panel-card-head {
    padding: var(--vpp-space-3) var(--vpp-space-4);
    border-bottom: 1px solid var(--vpp-border-default);
}

.vpp-wizard-panel-card-foot {
    padding: var(--vpp-space-3) var(--vpp-space-4);
    border-top: 1px solid var(--vpp-border-default);
    background: var(--vpp-bg-surface);
    color: var(--vpp-text-secondary);
    font-size: var(--vpp-text-sm);
}

.vpp-wizard-setup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
    gap: var(--vpp-space-3);
}

.vpp-wizard-type-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--vpp-space-3);
    margin-bottom: var(--vpp-space-3);
}

.vpp-wizard-type-pill {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--vpp-space-3);
    align-items: start;
    padding: var(--vpp-space-3);
    border: 1px solid var(--vpp-border-default);
    border-radius: var(--vpp-radius-md);
    background: var(--vpp-bg-surface);
}

.vpp-wizard-type-pill .rz-icon {
    color: var(--vpp-primary-600);
}

.vpp-wizard-type-pill strong {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--vpp-text-primary);
    font-size: var(--vpp-text-sm);
}

.vpp-wizard-type-pill span:last-child {
    color: var(--vpp-text-secondary);
    font-size: var(--vpp-text-sm);
    line-height: 1.5;
}

.vpp-wizard-type-pill.is-active {
    border-color: rgba(14, 165, 233, 0.35);
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.08) 0%, var(--vpp-bg-surface) 100%);
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.08);
}

.vpp-wizard-field-hint {
    color: var(--vpp-text-secondary);
    font-size: var(--vpp-text-xs);
}

.vpp-wizard-period-window {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: var(--vpp-space-4);
    margin-bottom: var(--vpp-space-3);
    border: 1px solid var(--vpp-border-default);
    border-radius: var(--vpp-radius-md);
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.06) 0%, var(--vpp-bg-surface) 100%);
}

/* ── Context / Checklist ─────────────────────────────────────── */
.vpp-wizard-context-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
    gap: var(--vpp-space-3);
}

.vpp-wizard-context-card,
.vpp-wizard-brief-card,
.vpp-wizard-review-card {
    padding: var(--vpp-space-4);
}

.vpp-wizard-brief-list {
    display: flex;
    flex-direction: column;
    gap: var(--vpp-space-3);
}

.vpp-wizard-brief-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--vpp-space-3);
    align-items: flex-start;
}

.vpp-wizard-brief-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--vpp-radius-md);
    background: rgba(14, 165, 233, 0.12);
    color: var(--vpp-primary-700);
    font-weight: var(--vpp-font-weight-semibold);
}

.vpp-wizard-brief-item strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--vpp-text-primary);
    margin-top: var(--vpp-space-3);
}

.vpp-card-ai-empty {
    margin-top: var(--vpp-space-3);
    color: var(--vpp-text-secondary);
    font-size: var(--vpp-text-sm);
}

/* ── Inline Notes (Order Description) ────────────────────────── */
.vpp-wizard-notes-inline {
    padding: var(--vpp-space-3) var(--vpp-space-4) 0;
}

/* ── Split Layout: Catalog | Selected ────────────────────────── */
.vpp-wizard-split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.95fr);
    gap: var(--vpp-space-3);
    flex: 1;
    min-height: 0;
}

.vpp-wizard-split-left,
.vpp-wizard-split-right {
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.vpp-wizard-selection-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.vpp-wizard-selection-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--vpp-space-3);
}

.vpp-wizard-selection-foot strong {
    font-family: var(--vpp-font-display);
    color: var(--vpp-text-primary);
    font-size: var(--vpp-text-base);
}

.vpp-wizard-selection-empty {
    flex: 1;
    padding: var(--vpp-space-8) var(--vpp-space-5);
}

.vpp-wizard-selection-empty .vpp-empty-state-icon {
    font-size: 2.75rem;
    margin-bottom: var(--vpp-space-3);
}

.vpp-wizard-selection-empty .vpp-empty-state-title {
    font-size: var(--vpp-text-lg);
}

.vpp-wizard-selection-empty .vpp-empty-state-desc {
    font-size: var(--vpp-text-sm);
    margin-bottom: 0;
}

/* ── Review ──────────────────────────────────────────────────── */
.vpp-wizard-review-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--vpp-space-3);
}

.vpp-wizard-review-metric {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: var(--vpp-space-3);
    border: 1px solid var(--vpp-border-default);
    border-radius: var(--vpp-radius-md);
    background: var(--vpp-bg-surface);
}

.vpp-wizard-review-metric span {
    color: var(--vpp-text-secondary);
    font-size: var(--vpp-text-xs);
    font-weight: var(--vpp-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0;
}

.vpp-wizard-review-metric strong {
    font-family: var(--vpp-font-display);
    color: var(--vpp-text-primary);
    font-size: var(--vpp-text-lg);
}

.wizard-review-notes {
    background: var(--vpp-bg-surface);
    border: 1px solid var(--vpp-border-default);
    border-radius: var(--vpp-radius-md);
    padding: var(--vpp-space-3);
    margin-top: var(--vpp-space-3);
}

/* ── Footer Navigation ───────────────────────────────────────── */
.vpp-wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--vpp-space-4);
    padding-top: var(--vpp-space-4);
    border-top: 1px solid var(--vpp-border-default);
}

.vpp-wizard-nav-left {
    display: flex;
    align-items: center;
    gap: var(--vpp-space-3);
    min-width: 0;
}

.vpp-wizard-nav-status {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vpp-wizard-nav-status-title {
    color: var(--vpp-text-primary);
    font-size: var(--vpp-text-sm);
    font-weight: var(--vpp-font-weight-semibold);
}

.vpp-wizard-nav-status-text {
    color: var(--vpp-text-secondary);
    font-size: var(--vpp-text-sm);
    line-height: 1.5;
}

.vpp-wizard-nav-right {
    display: flex;
    align-items: center;
    gap: var(--vpp-space-3);
}

.vpp-wizard-btn-next {
    min-width: 164px;
    background: var(--vpp-primary-500);
    border: 1px solid var(--vpp-primary-500);
    color: #fff;
    box-shadow: none;
}

.vpp-wizard-btn-next:hover:not(:disabled) {
    background: var(--vpp-primary-600);
    border-color: var(--vpp-primary-600);
    transform: translateY(-1px);
    box-shadow: var(--vpp-shadow-sm);
}

/* ── Selected Row Highlight ──────────────────────────────────── */
.vpp-wizard-row-selected {
    background-color: rgba(14, 165, 233, 0.07) !important;
}

.vpp-wizard-row-selected td {
    color: var(--vpp-text-secondary) !important;
}

.vpp-inline-progress {
    height: 3px;
    margin-top: var(--vpp-space-3);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .vpp-wizard-setup-grid,
    .vpp-wizard-summary-grid,
    .vpp-wizard-review-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vpp-wizard-context-grid,
    .vpp-wizard-split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .vpp-wizard-hero-main {
        flex-direction: column;
    }

    .vpp-wizard-hero-step {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .vpp-wizard {
        padding: var(--vpp-space-3);
    }

    .vpp-wizard-hero,
    .vpp-wizard-stage,
    .vpp-wizard-context-card,
    .vpp-wizard-brief-card,
    .vpp-wizard-review-card,
    .vpp-card-ai {
        padding: var(--vpp-space-3);
    }

    .vpp-wizard-summary-grid,
    .vpp-wizard-type-grid,
    .vpp-wizard-review-metrics {
        grid-template-columns: 1fr;
    }

    .vpp-card-ai-shell,
    .vpp-wizard-nav,
    .vpp-wizard-nav-left,
    .vpp-wizard-nav-right,
    .vpp-wizard-selection-foot {
        grid-template-columns: 1fr;
        flex-direction: column;
        align-items: stretch;
    }

    .vpp-wizard-nav-right .rz-button,
    .vpp-wizard-nav-left .rz-button,
    .vpp-card-ai-shell .rz-button {
        width: 100%;
    }

    .vpp-wizard-panel-head,
    .vpp-wizard-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ── Custom Step Indicator ───────────────────────────────────── */
.vpp-custom-steps {
    display: flex;
    align-items: center;
    gap: var(--vpp-space-3);
    margin-left: var(--vpp-space-4);
}

.vpp-custom-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem var(--vpp-space-2);
    border-radius: var(--vpp-radius-md);
    font-size: var(--vpp-text-sm);
    font-weight: var(--vpp-font-weight-semibold);
    user-select: none;
}

.vpp-custom-step .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    font-size: var(--vpp-text-xs);
    font-weight: var(--vpp-font-weight-bold);
    transition: all var(--vpp-transition-base);
}

.vpp-custom-step.active .step-num {
    background: var(--vpp-primary-500);
    color: #fff;
}

.vpp-custom-step.active .step-text {
    color: var(--vpp-text-primary);
}

.vpp-custom-step.inactive .step-num {
    background: var(--vpp-bg-elevated);
    color: var(--vpp-text-tertiary);
    border: 1px solid var(--vpp-border-default);
}

.vpp-custom-step.inactive .step-text {
    color: var(--vpp-text-tertiary);
}

.vpp-custom-step-divider {
    color: var(--vpp-text-tertiary);
    font-size: var(--vpp-text-xs);
}

@media (max-width: 767px) {
    .vpp-custom-steps {
        margin-left: 0;
        margin-top: var(--vpp-space-2);
        justify-content: center;
    }
}

/* ── Inline Toolbar Status & Warning Styling ── */
.vpp-wizard-toolbar-status {
    font-size: var(--vpp-text-sm);
    color: var(--vpp-text-secondary);
    font-weight: 500;
    margin-left: var(--vpp-space-2);
}

.vpp-wizard-toolbar-status .status-warning {
    color: var(--vpp-warning);
    font-weight: 600;
}

/* ── RadzenDataGrid inside Wizard Panel Cards to stretch to fill height ── */
.vpp-wizard-panel-card .rz-data-grid {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.vpp-wizard-panel-card .rz-datatable-scrollable-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.vpp-wizard-panel-card .rz-datatable-scrollable-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto !important;
}