/* ═══════════════════════════════════════════════════════════════════════════
   VinylID Wizard Styles
   Mapped to WinyleJacka design tokens (style.css :root)
   Supports dark (default) and light mode (body.mode-light)

   Token mapping from prototype → theme:
     #e85d26 (orange accent)  → --vid-accent  (kept as-is — brand identity)
     #111 / #0d0d0d           → --surface-container-lowest
     #1a1a1a                  → --surface-container-low
     #2a2a2a                  → --surface-container-high
     #333                     → --outline-variant
     #888                     → --outline
     #ddd / #fff              → --on-surface / --on-surface-variant
     DM Mono                  → --font-body (Manrope)
     Libre Caslon Text        → --font-headline (Noto Serif)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --vid-accent: #e85d26;
    --vid-accent-dark: #d4421a;
    --vid-success: #22c55e;
    --vid-warning: #eab308;
    --vid-danger: #ef4444;
    --vid-info: #3b82f6;
}

/* ── Container ── */
.vid-wizard {
    max-width: 520px;
    margin: 2rem auto;
    padding: 0 1rem;
    font-family: var(--font-body);
    color: var(--on-surface);
}

.vid-wizard * { box-sizing: border-box; }

/* ── Noise overlay (optional decorative) ── */
.vid-noise {
    position: fixed;
    inset: 0;
    opacity: 0.03;
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Step indicator ── */
.vid-steps {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin: 24px 0 32px;
}

.vid-step-item {
    display: flex;
    align-items: center;
}

.vid-step-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: var(--font-body);
    font-weight: 600;
    border: 1.5px solid var(--outline-variant);
    background: transparent;
    color: var(--outline);
    transition: all 0.3s ease;
}

.vid-step-dot--active {
    background: linear-gradient(135deg, var(--vid-accent), var(--vid-accent-dark));
    color: #fff;
    border: none;
    font-size: 18px;
    box-shadow: 0 0 16px rgba(232, 93, 38, 0.4);
}

.vid-step-dot--done {
    background: var(--surface-container-high);
    color: var(--vid-accent);
    border: 1.5px solid var(--vid-accent);
}

.vid-step-line {
    width: 28px;
    height: 1.5px;
    background: var(--outline-variant);
    transition: background 0.3s ease;
}

.vid-step-line--done {
    background: var(--vid-accent);
}

/* ── Mode toggle (photo / manual) ── */
.vid-mode-toggle {
    display: flex;
    background: var(--surface-container-lowest);
    border-radius: var(--radius-lg);
    padding: 3px;
    margin-bottom: 20px;
    border: 1px solid var(--surface-container-high);
}

.vid-mode-btn {
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    color: var(--outline);
    transition: all 0.2s ease;
    text-align: center;
}

.vid-mode-btn--active {
    background: var(--surface-container-high);
    color: var(--vid-accent);
}

.vid-mode-sub {
    font-size: 10px;
    margin-top: 2px;
    opacity: 0.6;
}

/* ── Photo upload drop zone ── */
.vid-dropzone {
    border: 2px dashed var(--outline-variant);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    background: var(--surface-container-lowest);
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
}

.vid-dropzone--dragover {
    border-color: var(--vid-accent);
    background: rgba(232, 93, 38, 0.05);
}

.vid-dropzone--has-preview {
    padding: 8px;
}

.vid-dropzone__icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.vid-dropzone__label {
    color: var(--outline);
    font-size: 13px;
    font-family: var(--font-body);
}

.vid-dropzone__sublabel {
    color: var(--outline-variant);
    font-size: 10px;
    margin-top: 4px;
}

.vid-dropzone__hint {
    color: var(--outline-variant);
    font-size: 10px;
    margin-top: 6px;
    opacity: 0.7;
}

.vid-dropzone__preview {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    border-radius: 8px;
}

.vid-dropzone__check {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0,0,0,0.7);
    color: var(--vid-accent);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.vid-dropzone__save-note {
    position: absolute;
    bottom: 6px;
    left: 6px;
    right: 6px;
    background: rgba(0,0,0,0.75);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 10px;
    color: var(--vid-success);
    font-family: var(--font-body);
    text-align: left;
}

/* ── No cover checkbox ── */
.vid-no-cover {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--surface-container, rgba(255,255,255,0.05));
    border: 1px solid var(--outline-variant, rgba(255,255,255,0.12));
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.vid-no-cover:hover {
    border-color: var(--vid-accent, #b388ff);
    background: var(--surface-container-high, rgba(255,255,255,0.08));
}
.vid-no-cover__input {
    width: 18px;
    height: 18px;
    accent-color: var(--vid-accent, #b388ff);
    cursor: pointer;
    flex-shrink: 0;
}
.vid-no-cover__label {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--on-surface, #e0e0e0);
    user-select: none;
}

/* ── Manual input ── */
.vid-input-group {
    margin-bottom: 14px;
}

.vid-input-label {
    display: block;
    font-size: 11px;
    color: var(--outline);
    margin-bottom: 4px;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.vid-input {
    width: 100%;
    padding: 10px 14px;
    background: var(--surface-container-lowest);
    border: 1.5px solid var(--surface-container-high);
    border-radius: 8px;
    color: var(--on-surface);
    font-size: 14px;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.2s;
}

.vid-input:focus {
    border-color: var(--vid-accent);
}

.vid-input--mono {
    font-family: 'DM Mono', 'Fira Code', 'Source Code Pro', monospace;
    font-size: 15px;
    letter-spacing: 0.5px;
}

/* ── Question card (chip select) ── */
.vid-question {
    margin-bottom: 20px;
}

.vid-question__text {
    font-size: 14px;
    color: var(--on-surface-variant);
    margin-bottom: 10px;
    font-family: var(--font-headline);
}

.vid-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.vid-chip {
    padding: 8px 16px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--outline-variant);
    background: var(--surface-container-lowest);
    color: var(--outline);
    font-size: 12px;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s ease;
}

.vid-chip:hover {
    border-color: var(--vid-accent);
    color: var(--vid-accent);
}

.vid-chip--selected {
    border-color: var(--vid-accent);
    background: rgba(232, 93, 38, 0.15);
    color: var(--vid-accent);
}

/* ── Cache indicator ── */
.vid-cache-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 11px;
    color: var(--vid-success);
    line-height: 1.4;
    font-family: var(--font-body);
}

/* "Bootleg / unofficial release" badge. Orthogonal to verified/cache/AI
 * — can stack on top of any of those. Amber/warning palette so customers
 * notice it before paying for the full report. */
.vid-bootleg-badge {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(251, 191, 36, 0.15);
    border: 1.5px solid rgba(217, 119, 6, 0.45);
    border-left-width: 4px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 12px;
    color: #92400e;
    line-height: 1.45;
    font-family: var(--font-body);
}
.vid-bootleg-badge strong { color: #78350f; font-size: 13px; }

/* "Verified pressing — 100% match" badge. Stronger green than the cache
 * badge to signal "this is authoritative" vs. "we found something in our
 * cache that might be a near-miss". Shown when all three ID fields match
 * an admin-verified record via either /lookup or /ai-lookup. */
.vid-verified-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(34, 197, 94, 0.18);
    border: 1.5px solid rgba(34, 197, 94, 0.5);
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--vid-success);
    line-height: 1.4;
    font-family: var(--font-body);
}

/* ── Variant gallery ── */
.vid-variants-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.vid-variants-label {
    font-size: 12px;
    color: var(--vid-accent);
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.vid-variants-hint {
    padding: 12px;
    background: var(--surface-container-lowest);
    border-radius: 10px;
    border: 1px solid var(--surface-container-high);
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    color: var(--outline);
    line-height: 1.5;
}

.vid-variant-card {
    display: flex;
    align-items: stretch;
    background: var(--surface-container-lowest);
    border: 1.5px solid var(--surface-container-high);
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease;
    text-align: left;
    margin-bottom: 8px;
}

.vid-variant-card:hover,
.vid-variant-card--selected {
    background: var(--surface-container-low);
    border-color: var(--vid-accent);
    box-shadow: 0 0 12px rgba(232, 93, 38, 0.15);
}

.vid-variant-swatch {
    width: 56px;
    min-height: 70px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 20px;
    color: rgba(255,255,255,0.9);
}

.vid-variant-swatch__count {
    position: absolute;
    bottom: 3px;
    font-size: 8px;
    color: rgba(255,255,255,0.7);
    font-family: var(--font-body);
    background: rgba(0,0,0,0.4);
    padding: 1px 4px;
    border-radius: 3px;
}

/* Thumbnail variants of the swatch — real cover/label image when AI or
 * user supplied one. Same footprint as `.vid-variant-swatch` to keep the
 * card grid pixel-stable regardless of which node wins the selector. */
.vid-variant-thumb {
    width: 56px;
    min-height: 70px;
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #0d0d0d;
}
.vid-variant-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vid-variant-thumb--label img {
    border-radius: 50%;
    padding: 3px;
    background: #000;
}
.vid-variant-thumb .vid-variant-swatch__count {
    z-index: 1;
}

.vid-variant-info {
    flex: 1;
    padding: 8px 12px;
    min-width: 0;
}

.vid-variant-pressing {
    font-size: 11px;
    font-weight: 600;
    color: var(--on-surface-variant);
    margin-bottom: 4px;
}

.vid-variant-card--selected .vid-variant-pressing {
    color: var(--vid-accent);
}

.vid-variant-notes {
    font-size: 10px;
    color: var(--outline);
    line-height: 1.4;
    word-break: break-word;
}

.vid-variant-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.vid-variant-value {
    font-size: 12px;
    color: var(--vid-accent);
    font-weight: 700;
    font-family: var(--font-body);
}

.vid-variant-meta {
    font-size: 9px;
    color: var(--outline);
}

.vid-variant-radio {
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vid-variant-radio__dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--outline-variant);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    transition: all 0.2s;
}

.vid-variant-card--selected .vid-variant-radio__dot {
    background: var(--vid-accent);
    border: none;
}

/* Match score badge — top-right corner of variant card */
.vid-match-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 10px;
    font-weight: 700;
    font-family: 'DM Mono', monospace;
    padding: 2px 7px;
    border-radius: 10px;
    line-height: 1.4;
    z-index: 1;
}
.vid-variant-card { position: relative; }
.vid-match--high { background: rgba(34,197,94,0.2); color: #22c55e; }
.vid-match--mid  { background: rgba(234,179,8,0.2);  color: #eab308; }
.vid-match--low  { background: rgba(136,136,136,0.2); color: #888; }

/* Matrix line inside variant info — for multi-record results */
.vid-variant-matrix {
    font-size: 11px;
    color: var(--outline);
    margin: 2px 0 4px;
}
.vid-variant-matrix code {
    font-family: 'DM Mono', monospace;
    background: var(--surface-container-high);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
}

.vid-report-variant-btn {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    border-radius: 8px;
    border: 1.5px dashed var(--outline-variant);
    background: transparent;
    color: var(--outline);
    font-size: 11px;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.vid-report-variant-btn:hover {
    border-color: var(--vid-accent);
    color: var(--vid-accent);
}

/* ── Result card ── */
.vid-result {
    background: linear-gradient(135deg, var(--surface-container-low) 0%, var(--surface-container-lowest) 100%);
    border-radius: 16px;
    border: 1px solid var(--surface-container-high);
    overflow: hidden;
}

.vid-result__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--surface-container-high);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vid-result__title {
    font-family: var(--font-headline);
    font-size: 18px;
    color: var(--on-surface);
    font-weight: 600;
}

.vid-confidence-badge {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-family: var(--font-body);
    font-weight: 500;
}

.vid-confidence-badge--high {
    background: rgba(34,197,94,0.15);
    color: var(--vid-success);
    border: 1px solid rgba(34,197,94,0.3);
}

.vid-confidence-badge--med {
    background: rgba(234,179,8,0.15);
    color: var(--vid-warning);
    border: 1px solid rgba(234,179,8,0.3);
}

.vid-confidence-badge--low {
    background: rgba(239,68,68,0.15);
    color: var(--vid-danger);
    border: 1px solid rgba(239,68,68,0.3);
}

.vid-result__body {
    padding: 16px 20px;
}

.vid-result__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--surface-container-low);
}

.vid-result__row-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--outline);
    font-size: 12px;
}

.vid-result__row-value {
    color: var(--on-surface);
    font-size: 13px;
    font-family: var(--font-body);
    text-align: right;
    max-width: 60%;
}

.vid-result__row--value .vid-result__row-value {
    color: var(--vid-accent);
    font-size: 16px;
    font-weight: 700;
}

.vid-result__actions {
    padding: 12px 20px;
    background: var(--surface-container-lowest);
    display: flex;
    gap: 8px;
}

/* ── Buttons ── */
.vid-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
    text-decoration: none;
}

.vid-btn:active { transform: scale(0.97); }

.vid-btn--primary {
    background: linear-gradient(135deg, var(--vid-accent), var(--vid-accent-dark));
    color: #fff;
}

.vid-btn--primary:hover {
    box-shadow: 0 4px 20px rgba(232, 93, 38, 0.3);
    transform: translateY(-1px);
}

.vid-btn--ghost {
    background: transparent;
    border: 1.5px solid var(--vid-accent);
    color: var(--vid-accent);
}

.vid-btn--ghost:hover {
    background: rgba(232, 93, 38, 0.1);
}

.vid-btn--block {
    width: 100%;
}

.vid-btn--sm {
    padding: 8px 16px;
    font-size: 12px;
}

/* ── Navigation ── */
.vid-nav {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.vid-nav .vid-btn { flex: 1; }

/* ── Stats bar (bottom) ── */
.vid-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 24px;
    padding: 14px;
    background: var(--surface-container-lowest);
    border-radius: 12px;
    border: 1px solid var(--surface-container-low);
    text-align: center;
}

.vid-stat-icon { font-size: 14px; }

.vid-stat-value {
    font-size: 16px;
    color: var(--vid-accent);
    font-family: var(--font-body);
    font-weight: 700;
}

.vid-stat-label {
    font-size: 9px;
    color: var(--outline);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Loading spinner ── */
.vid-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid var(--outline-variant);
    border-top-color: var(--vid-accent);
    border-radius: 50%;
    animation: vid-spin 0.6s linear infinite;
}

@keyframes vid-spin { to { transform: rotate(360deg); } }

.vid-loading {
    text-align: center;
    padding: 40px;
}

.vid-loading__text {
    margin-top: 12px;
    font-size: 13px;
    color: var(--outline);
}

/* ── Step title ── */
.vid-step-title {
    font-family: var(--font-headline);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--on-surface);
    margin-bottom: 16px;
}

.vid-step-desc {
    font-size: 13px;
    color: var(--on-surface-variant);
    margin-bottom: 20px;
    line-height: 1.5;
}

/* ── User label reference (in variant gallery) ── */
.vid-user-label-ref {
    margin-bottom: 12px;
    padding: 10px;
    background: var(--surface-container-lowest);
    border-radius: 10px;
    border: 1.5px solid rgba(232, 93, 38, 0.3);
}

.vid-user-label-ref__tag {
    font-size: 10px;
    color: var(--vid-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    font-weight: 500;
}

.vid-user-label-ref__img {
    width: 100%;
    max-height: 120px;
    object-fit: contain;
    border-radius: 6px;
}

/* ── AI badge ── */
.vid-ai-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 11px;
    color: var(--vid-info);
    line-height: 1.4;
    font-family: var(--font-body);
}

/* ── Result artist ── */
.vid-result__artist {
    font-size: 12px;
    color: var(--outline);
    font-family: var(--font-body);
    margin-top: 2px;
}

/* ── Result locked row ── */
.vid-result__locked {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    font-size: 11px;
    color: var(--outline);
    border-top: 1px dashed var(--outline-variant);
    margin-top: 4px;
}

/* ── Error box ── */
.vid-error-box {
    padding: 20px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 12px;
    text-align: center;
    color: var(--vid-danger);
    font-size: 13px;
}

.vid-error-box p {
    margin-bottom: 12px;
}

/* ── Email gate CTA ── */
.vid-email-cta {
    margin-top: 20px;
    padding: 24px 20px;
    background: linear-gradient(135deg, var(--surface-container-low), var(--surface-container-lowest));
    border: 1px solid var(--surface-container-high);
    border-radius: 16px;
    text-align: center;
}

.vid-email-cta__lock {
    font-size: 28px;
    margin-bottom: 8px;
}

.vid-email-cta__text {
    font-size: 13px;
    color: var(--on-surface-variant);
    margin-bottom: 16px;
    line-height: 1.5;
}

/* ── Payment CTA ── */
.vid-payment-cta {
    margin-top: 20px;
    padding: 24px 20px;
    background: linear-gradient(135deg, rgba(232,93,38,0.04), rgba(232,93,38,0.01));
    border: 1px solid rgba(232,93,38,0.2);
    border-radius: 16px;
    text-align: center;
}

.vid-payment-cta__icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.vid-payment-cta__title {
    font-family: var(--font-headline);
    font-size: 1.1rem;
    color: var(--on-surface);
    margin-bottom: 12px;
}

.vid-payment-features {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    text-align: left;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.vid-payment-features li {
    font-size: 12px;
    color: var(--on-surface-variant);
    padding: 4px 0;
    line-height: 1.4;
}

.vid-payment-cta__price {
    font-size: 28px;
    font-weight: 700;
    color: var(--vid-accent);
    font-family: var(--font-body);
    margin-bottom: 16px;
}

/* ── Payment success ── */
.vid-payment-success {
    margin-top: 20px;
    padding: 24px 20px;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 16px;
    text-align: center;
}

.vid-payment-success__icon {
    font-size: 40px;
    margin-bottom: 8px;
}

.vid-payment-success h3 {
    font-family: var(--font-headline);
    color: var(--vid-success);
    margin-bottom: 8px;
}

.vid-payment-success p {
    font-size: 13px;
    color: var(--on-surface-variant);
}

/* ═══ Modal overlay ═══ */
.vid-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: vid-fade-in 0.2s ease;
}

@keyframes vid-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.vid-modal {
    background: var(--surface-container-low, #1a1a1a);
    border: 1px solid var(--surface-container-high, #2a2a2a);
    border-radius: 20px;
    padding: 28px 24px;
    max-width: 420px;
    width: 100%;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
    animation: vid-slide-up 0.25s ease;
}

@keyframes vid-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.vid-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    cursor: pointer;
    color: var(--outline);
    font-size: 18px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.vid-modal__close:hover {
    background: var(--surface-container-high);
}

.vid-modal__title {
    font-family: var(--font-headline);
    font-size: 1.15rem;
    color: var(--on-surface);
    margin-bottom: 8px;
}

.vid-modal__desc {
    font-size: 13px;
    color: var(--on-surface-variant);
    margin-bottom: 20px;
    line-height: 1.5;
}

.vid-modal__error {
    color: var(--vid-danger);
    font-size: 12px;
    min-height: 18px;
    margin-bottom: 10px;
    font-family: var(--font-body);
}

/* ── Consent checkboxes ── */
.vid-consents {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.vid-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 11px;
    color: var(--on-surface-variant);
    line-height: 1.5;
    cursor: pointer;
}

.vid-consent-label a {
    color: var(--vid-accent);
    text-decoration: underline;
}

.vid-consent-check {
    margin-top: 2px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--vid-accent);
}

/* ── Currency / Provider selection ── */
.vid-currency-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.vid-currency-label {
    font-size: 12px;
    color: var(--outline);
    white-space: nowrap;
}

.vid-payment-price-display {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: var(--vid-accent);
    font-family: var(--font-body);
    margin-bottom: 16px;
}

.vid-providers {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.vid-provider-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--surface-container-lowest);
    border: 1.5px solid var(--surface-container-high);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vid-provider-card:hover,
.vid-provider-card--selected {
    border-color: var(--vid-accent);
    background: var(--surface-container-low);
}

.vid-provider-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.vid-provider-info {
    flex: 1;
    min-width: 0;
}

.vid-provider-info strong {
    display: block;
    font-size: 13px;
    color: var(--on-surface);
}

.vid-provider-desc {
    font-size: 10px;
    color: var(--outline);
    margin-top: 1px;
}

.vid-security-note {
    text-align: center;
    font-size: 10px;
    color: var(--outline);
    margin-top: 10px;
    opacity: 0.7;
}

/* ── Responsive ── */
@media (max-width: 540px) {
    .vid-wizard { padding: 0 0.75rem; }
    .vid-result__title { font-size: 15px; }
    .vid-stats-bar { grid-template-columns: repeat(2, 1fr); }
    .vid-modal { padding: 20px 16px; border-radius: 16px; }
    .vid-payment-price-display { font-size: 26px; }
}