/* ==========================================================================
   Imports — Add Listing (vp-imp-namespace, extends imports-browse.css)
   Uses only shared theme tokens declared in :root (app.css). No new colours.
   Base wizard chrome (.vp-wizard-*, .vp-field, .vp-chip, .vp-dropzone,
   .vp-doc-tile, .vp-payment-ticket, .vp-package-list, .vp-coupon-row) is
   already defined globally in app.css and intentionally reused as-is here.
   ========================================================================== */

.vp-imp-wizard-page { padding-top: 24px; padding-bottom: 60px; }

.vp-imp-wizard-eyebrow {
    font-family: var(--vp-font-mono); font-size: 10px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--vp-text-faint); margin: 0 0 2px;
}

.vp-imp-bulk-pill {
    margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 1px solid var(--vp-line-strong); color: var(--vp-text-dim);
    font-family: var(--vp-font-mono); font-size: 10px; letter-spacing: 0.5px;
    text-transform: uppercase; padding: 8px 12px; border-radius: 2px; cursor: pointer;
    transition: color 0.2s var(--vp-ease), border-color 0.2s var(--vp-ease);
}
.vp-imp-bulk-pill:hover { color: var(--vp-white); border-color: var(--vp-white); }

/* ── Voyage line: the signature progress rail ─────────────────────────── */
.vp-imp-voyage {
    position: relative; display: flex; justify-content: space-between;
    margin: 28px 0 36px; padding: 0 2px;
}
.vp-imp-voyage__track {
    position: absolute; top: 5px; left: 0; right: 0; height: 1px;
    background: var(--vp-line);
}
.vp-imp-voyage__fill {
    position: absolute; top: 0; left: 0; height: 1px; width: 0%;
    background: var(--vp-white);
    transition: width 0.5s var(--vp-ease);
}
.vp-imp-voyage__stop {
    position: relative; z-index: 1; display: flex; flex-direction: column;
    align-items: center; gap: 8px; flex: 1;
}
.vp-imp-voyage__dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: var(--vp-bg); border: 1px solid var(--vp-line-strong);
    transition: background 0.3s var(--vp-ease), border-color 0.3s var(--vp-ease),
                box-shadow 0.3s var(--vp-ease);
}
.vp-imp-voyage__stop.is-done .vp-imp-voyage__dot {
    background: var(--vp-white); border-color: var(--vp-white);
}
.vp-imp-voyage__stop.is-current .vp-imp-voyage__dot {
    background: var(--vp-white); border-color: var(--vp-white);
    box-shadow: 0 0 0 4px rgba(255,255,255,0.12);
    animation: vp-imp-pulse 1.8s var(--vp-ease) infinite;
}
@keyframes vp-imp-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,0.12); }
    50% { box-shadow: 0 0 0 7px rgba(255,255,255,0.06); }
}
.vp-imp-voyage__label {
    font-family: var(--vp-font-mono); font-size: 9px; letter-spacing: 0.5px;
    text-transform: uppercase; color: var(--vp-text-faint); text-align: center;
    transition: color 0.2s var(--vp-ease);
}
.vp-imp-voyage__stop.is-current .vp-imp-voyage__label,
.vp-imp-voyage__stop.is-done .vp-imp-voyage__label { color: var(--vp-text-dim); }
.vp-imp-voyage__stop.is-current .vp-imp-voyage__label { color: var(--vp-white); }

@media (max-width: 640px) {
    .vp-imp-voyage__label { display: none; }
    .vp-imp-voyage__stop.is-current .vp-imp-voyage__label { display: block; }
}

/* ── Layout: reuse the 260px/1fr grid from imports-browse.css ─────────── */
.vp-imp-wizard-shell .vp-imp-layout { grid-template-columns: minmax(0, 1fr) 280px; padding-bottom: 0; }
.vp-imp-wizard-shell .vp-imp-layout > *:first-child { min-width: 0; }
.vp-imp-sidebar--preview { position: sticky; top: 90px; }

/* ── Status cards (step 1) ─────────────────────────────────────────────── */
.vp-imp-step-sub { color: var(--vp-text-dim); font-size: 13px; margin: -4px 0 16px; }
.vp-imp-status-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.vp-imp-status-card {
    text-align: left; background: var(--vp-surface); border: 1px solid var(--vp-line);
    border-radius: 3px; padding: 16px 18px; cursor: pointer;
    display: flex; flex-direction: column; gap: 5px;
    transition: border-color 0.2s var(--vp-ease), background 0.2s var(--vp-ease);
}
.vp-imp-status-card:hover { border-color: var(--vp-line-strong); }
.vp-imp-status-card.is-active {
    background: var(--vp-surface-raised); border-color: var(--vp-white);
}
.vp-imp-status-card__title {
    font-family: var(--vp-font-body); font-weight: 600; font-size: 14px; color: var(--vp-text);
}
.vp-imp-status-card__desc { font-size: 12px; color: var(--vp-text-dim); line-height: 1.5; }
.vp-imp-status-card__tag {
    align-self: flex-start; margin-top: 4px;
    font-family: var(--vp-font-mono); font-size: 9px; letter-spacing: 0.5px;
    text-transform: uppercase; color: var(--vp-text-faint);
    border: 1px solid var(--vp-line); border-radius: 2px; padding: 3px 8px;
    transition: color 0.2s var(--vp-ease), border-color 0.2s var(--vp-ease);
}
.vp-imp-status-card.is-active .vp-imp-status-card__tag {
    color: var(--vp-white); border-color: var(--vp-line-strong);
}
.vp-imp-conditional { margin-bottom: 18px; }

/* ── Origin country grid ───────────────────────────────────────────────── */
.vp-imp-origin-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.vp-imp-origin {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--vp-surface); border: 1px solid var(--vp-line); color: var(--vp-text-dim);
    font-family: var(--vp-font-body); font-size: 12.5px; padding: 9px 13px; border-radius: 2px;
    cursor: pointer; transition: color 0.2s var(--vp-ease), border-color 0.2s var(--vp-ease),
                background 0.2s var(--vp-ease);
}
.vp-imp-origin:hover { border-color: var(--vp-line-strong); color: var(--vp-white); }
.vp-imp-origin.is-active {
    background: var(--vp-surface-raised); border-color: var(--vp-white); color: var(--vp-white);
}
.vp-imp-origin__code,
.vp-imp-origin__flag {
    font-family: var(--vp-font-mono); font-size: 10px; letter-spacing: 0.5px;
    color: var(--vp-text-faint);
}
.vp-imp-origin.is-active .vp-imp-origin__code { color: var(--vp-white); }

/* ── Chassis check field ───────────────────────────────────────────────── */
.vp-imp-chassis-field { position: relative; }
.vp-imp-chassis-spinner {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px; border-radius: 50%;
    border: 1.5px solid var(--vp-line-strong); border-top-color: var(--vp-white);
    animation: vp-imp-spin 0.7s linear infinite;
}
@keyframes vp-imp-spin { to { transform: translateY(-50%) rotate(360deg); } }
.vp-imp-chassis-warning {
    font-family: var(--vp-font-mono); font-size: 11px; color: var(--vp-text);
    background: var(--vp-surface); border: 1px solid var(--vp-line-strong);
    border-radius: 2px; padding: 10px 12px; margin: -8px 0 18px;
}

/* ── Inline notes ──────────────────────────────────────────────────────── */
.vp-imp-note {
    background: var(--vp-surface); border: 1px solid var(--vp-line); border-radius: 3px;
    padding: 12px 14px; margin-top: 16px; font-size: 12.5px; color: var(--vp-text-dim); line-height: 1.6;
}
.vp-imp-note strong {
    display: block; font-family: var(--vp-font-mono); font-size: 10px; letter-spacing: 1px;
    text-transform: uppercase; color: var(--vp-text); margin-bottom: 6px;
}
.vp-imp-note p { margin: 0; }
.vp-imp-note--warn { display: flex; gap: 9px; align-items: flex-start; color: var(--vp-text-dim); }
.vp-imp-note--warn svg { flex-shrink: 0; margin-top: 1px; color: var(--vp-text-faint); }

/* ── Rules list (photos step) ─────────────────────────────────────────── */
.vp-imp-rules { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vp-imp-rules li {
    position: relative; padding-left: 14px; font-size: 12px; color: var(--vp-text-faint);
}
.vp-imp-rules li::before {
    content: ''; position: absolute; left: 0; top: 7px; width: 3px; height: 3px;
    border-radius: 50%; background: var(--vp-text-faint);
}

/* ── Photo cells (wizard grid) ─────────────────────────────────────────── */
.vp-photo-cell {
    position: relative; aspect-ratio: 1; border-radius: 2px; overflow: hidden;
    border: 1px solid var(--vp-line);
}
.vp-photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vp-photo-cell__cover {
    position: absolute; bottom: 6px; left: 6px; background: var(--vp-white); color: var(--vp-bg);
    font-family: var(--vp-font-mono); font-size: 8px; letter-spacing: 0.5px;
    padding: 2px 6px; border-radius: 2px;
}
.vp-photo-cell__remove {
    position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%;
    border: none; background: rgba(0,0,0,0.6); color: #fff; cursor: pointer; line-height: 1;
}

/* ── Package rows ──────────────────────────────────────────────────────── */
.vp-package-row {
    display: flex; justify-content: space-between; align-items: center; width: 100%;
    text-align: left; background: var(--vp-surface); border: 1px solid var(--vp-line);
    border-radius: 3px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
    font-family: var(--vp-font-body); color: var(--vp-text);
    transition: border-color 0.2s var(--vp-ease), background 0.2s var(--vp-ease);
}
.vp-package-row.is-active {
    border-color: var(--vp-white); background: var(--vp-surface-raised);
}
.vp-package-row span {
    font-family: var(--vp-font-mono); font-size: 11px; color: var(--vp-text-dim);
}

/* ── Live preview card ────────────────────────────────────────────────── */
.vp-imp-preview-card {
    background: var(--vp-surface); border: 1px solid var(--vp-line); border-radius: 3px;
    overflow: hidden;
}
.vp-imp-preview-card__media {
    aspect-ratio: 16/10; background: var(--vp-surface-raised);
    background-image: repeating-linear-gradient(135deg, var(--vp-line) 0 1px, transparent 1px 12px);
}
.vp-imp-preview-card__body { padding: 16px; }
.vp-imp-preview-card__status {
    display: inline-block; font-family: var(--vp-font-mono); font-size: 9px;
    letter-spacing: 1px; text-transform: uppercase; color: var(--vp-text-faint);
    border: 1px solid var(--vp-line); border-radius: 2px; padding: 3px 8px; margin-bottom: 10px;
}
.vp-imp-preview-card__body h3 {
    font-family: var(--vp-font-display); font-size: 19px; font-weight: 600;
    color: var(--vp-white); margin: 0 0 4px;
}
.vp-imp-preview-card__body .vp-meta { font-size: 12px; color: var(--vp-text-dim); margin: 0 0 8px; }
.vp-imp-preview-card__body .vp-price {
    font-family: var(--vp-font-mono); font-size: 15px; color: var(--vp-text); margin: 0;
}

@media (max-width: 900px) {
    .vp-imp-wizard-shell .vp-imp-layout { grid-template-columns: 1fr; }
    .vp-imp-sidebar--preview { position: static; order: -1; }
}

@media (prefers-reduced-motion: reduce) {
    .vp-imp-voyage__stop.is-current .vp-imp-voyage__dot { animation: none; }
    .vp-imp-voyage__fill { transition: none; }
}