@import 'Price.Client.1zbd046215.bundle.scp.css';

/* /Components/Pages/Admin/Jobber.razor.rz.scp.css */
.jobber-page[b-4wlabr5ght] {
    padding: 24px;
    max-width: 960px;
}

.jobber-header[b-4wlabr5ght] { margin-bottom: 20px; }
.jobber-header h2[b-4wlabr5ght] { font-size: 1.4rem; font-weight: 700; }
.jobber-subtitle[b-4wlabr5ght] { color: var(--text-muted); font-size: 0.9rem; margin-top: 4px; }

.job-card[b-4wlabr5ght] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow 0.15s;
}

.job-card--running[b-4wlabr5ght] {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

.job-card-header[b-4wlabr5ght] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    flex-wrap: wrap;
}

.job-card-info[b-4wlabr5ght] { flex: 1; min-width: 0; }

.job-name[b-4wlabr5ght] {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
}

.job-desc[b-4wlabr5ght] {
    display: block;
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-card-status[b-4wlabr5ght] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.badge[b-4wlabr5ght] { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.badge-ok[b-4wlabr5ght]      { background: #d1fae5; color: #065f46; }
.badge-fail[b-4wlabr5ght]    { background: #fee2e2; color: #991b1b; }
.badge-running[b-4wlabr5ght] { background: #dbeafe; color: #1e40af; animation: badge-pulse-b-4wlabr5ght 1.2s ease-in-out infinite; }
.badge-stopped[b-4wlabr5ght] { background: #fef3c7; color: #92400e; }

@keyframes badge-pulse-b-4wlabr5ght { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.job-lastrun[b-4wlabr5ght], .job-nextrun[b-4wlabr5ght] { font-size: 0.78rem; color: var(--text-muted); }
.job-nextrun[b-4wlabr5ght] { color: var(--text-dim); }

.job-card-actions[b-4wlabr5ght] { display: flex; gap: 8px; flex-shrink: 0; }

.btn-run[b-4wlabr5ght] {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-run:disabled[b-4wlabr5ght] { opacity: 0.5; cursor: not-allowed; }

.btn-stop[b-4wlabr5ght] {
    background: #b91c1c;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
.btn-stop:hover[b-4wlabr5ght] { background: #991b1b; }

.btn-secondary[b-4wlabr5ght] {
    background: var(--surface2);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.82rem;
    cursor: pointer;
}

.btn-sm[b-4wlabr5ght] { padding: 4px 10px; font-size: 0.8rem; }

.btn-ghost[b-4wlabr5ght] {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.82rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.btn-ghost:hover[b-4wlabr5ght] { color: var(--text); background: var(--overlay); }

.btn-icon[b-4wlabr5ght] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 3px 6px;
    border-radius: 6px;
    color: var(--text-muted);
    line-height: 1;
}
.btn-icon:hover[b-4wlabr5ght] { color: #dc2626; background: #fee2e2; }

/* Schedules panel */
.job-schedules[b-4wlabr5ght] {
    border-top: 1px solid var(--border);
    padding: 14px 18px;
    background: var(--surface2);
}

/* Schedule list rows */
.sched-list[b-4wlabr5ght] { margin-bottom: 12px; }

.sched-row[b-4wlabr5ght] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-soft);
}

.sched-human[b-4wlabr5ght] {
    font-size: 0.88rem;
    font-weight: 500;
    min-width: 180px;
}

.sched-cron[b-4wlabr5ght] {
    font-family: monospace;
    font-size: 0.78rem;
    color: var(--text-muted);
    background: var(--overlay);
    padding: 1px 6px;
    border-radius: 4px;
}

.sched-label[b-4wlabr5ght] {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Toggle switch */
.sched-toggle[b-4wlabr5ght] { display: flex; align-items: center; margin-left: auto; cursor: pointer; }
.sched-toggle input[b-4wlabr5ght] { display: none; }
.toggle-track[b-4wlabr5ght] {
    width: 34px;
    height: 18px;
    background: var(--border);
    border-radius: 9px;
    position: relative;
    transition: background 0.2s;
}
.toggle-track[b-4wlabr5ght]::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 12px; height: 12px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}
.sched-toggle input:checked + .toggle-track[b-4wlabr5ght] { background: var(--accent); }
.sched-toggle input:checked + .toggle-track[b-4wlabr5ght]::after { transform: translateX(16px); }

/* Empty state */
.sched-empty[b-4wlabr5ght] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 4px 0 12px;
}

/* Add bar */
.sched-add-bar[b-4wlabr5ght] { padding-top: 10px; }

/* Builder */
.sched-builder[b-4wlabr5ght] {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    background: var(--surface);
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.builder-row[b-4wlabr5ght] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.builder-row--label[b-4wlabr5ght] { gap: 6px; }

.builder-label[b-4wlabr5ght] {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.builder-select[b-4wlabr5ght] {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.85rem;
    cursor: pointer;
}

.builder-select-sm[b-4wlabr5ght] {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 0.85rem;
    cursor: pointer;
    width: 68px;
    text-align: center;
}

.builder-colon[b-4wlabr5ght] { font-weight: 600; color: var(--text-muted); }

/* Day picker chips */
.day-picker[b-4wlabr5ght] { display: flex; gap: 4px; flex-wrap: wrap; }

.day-chip[b-4wlabr5ght] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 32px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    background: var(--surface2);
    border: 1px solid var(--border);
    user-select: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.day-chip--on[b-4wlabr5ght] {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.sr-only[b-4wlabr5ght] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

.input-label[b-4wlabr5ght] {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 0.85rem;
    width: 200px;
}

.builder-preview[b-4wlabr5ght] {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.builder-preview code[b-4wlabr5ght] {
    background: var(--overlay);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: monospace;
}

/* Log panel */
.job-log[b-4wlabr5ght] {
    border-top: 1px solid var(--border);
    background: #0f1117;
    color: #c8c8d8;
    padding: 12px 18px;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    max-height: 220px;
    overflow-y: auto;
}

.log-line[b-4wlabr5ght] { padding: 1px 0; line-height: 1.5; }
/* /Components/Pages/Prices.razor.rz.scp.css */
.prices-page[b-2n3bmbtg34] {
    padding: 20px 16px;
    max-width: 900px;
    margin: 0 auto;
}

.prices-latest[b-2n3bmbtg34],
.prices-browse[b-2n3bmbtg34] {
    margin-bottom: 40px;
}

.prices-section-header[b-2n3bmbtg34] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.prices-section-header h2[b-2n3bmbtg34] {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}

.prices-total[b-2n3bmbtg34] {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.prices-empty[b-2n3bmbtg34] {
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 24px 0;
}

/* ── table ── */
.prices-table-wrap[b-2n3bmbtg34] {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius, 8px);
}

.prices-table[b-2n3bmbtg34] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.prices-table th[b-2n3bmbtg34] {
    text-align: left;
    padding: 8px 12px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.prices-table td[b-2n3bmbtg34] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-soft, #f0f0f0);
    vertical-align: middle;
}

.prices-table tbody tr:last-child td[b-2n3bmbtg34] {
    border-bottom: none;
}

.prices-table tbody tr:hover td[b-2n3bmbtg34] {
    background: var(--surface2, #f6f8fa);
}

.col-name[b-2n3bmbtg34]    { min-width: 180px; }
.col-price[b-2n3bmbtg34]   { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-date[b-2n3bmbtg34]    { color: var(--text-muted); white-space: nowrap; font-size: 0.8rem; }

.prices-brand[b-2n3bmbtg34] {
    display: inline-block;
    margin-left: 6px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.prices-member[b-2n3bmbtg34] {
    display: inline-block;
    margin-left: 4px;
    color: var(--accent, #0969da);
    font-size: 0.78rem;
}

.prices-loading[b-2n3bmbtg34],
.prices-empty-cell[b-2n3bmbtg34] {
    text-align: center;
    color: var(--text-muted);
    padding: 20px !important;
    font-size: 0.88rem;
}

/* ── source badge ── */
.prices-source[b-2n3bmbtg34] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.73rem;
    font-weight: 600;
    white-space: nowrap;
}

.prices-source--tilbudsavis[b-2n3bmbtg34] { background: #dbeafe; color: #1d4ed8; }
.prices-source--webshop[b-2n3bmbtg34]     { background: #dcfce7; color: #166534; }
.prices-source--scan[b-2n3bmbtg34]        { background: #fef3c7; color: #92400e; }
.prices-source--other[b-2n3bmbtg34]       { background: var(--surface2); color: var(--text-muted); }

/* ── pager ── */
.prices-pager[b-2n3bmbtg34] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    justify-content: center;
}

.btn-page[b-2n3bmbtg34] {
    background: var(--surface2, #f6f8fa);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.85rem;
    cursor: pointer;
}

.btn-page:disabled[b-2n3bmbtg34] {
    opacity: 0.4;
    cursor: not-allowed;
}

.prices-page-info[b-2n3bmbtg34] {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ── source tabs ── */
.prices-source-tabs[b-2n3bmbtg34] {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0;
}

.prices-tab[b-2n3bmbtg34] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 16px;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-muted);
    margin-bottom: -1px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s;
}

.prices-tab:hover[b-2n3bmbtg34] { color: var(--text); }

.prices-tab--active[b-2n3bmbtg34] {
    color: var(--accent, #0969da);
    border-bottom-color: var(--accent, #0969da);
    font-weight: 600;
}

.prices-tab-count[b-2n3bmbtg34] {
    background: var(--surface2);
    border-radius: 20px;
    padding: 1px 7px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* ── search ── */
.prices-search-row[b-2n3bmbtg34] {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    max-width: 360px;
}

.prices-search-input[b-2n3bmbtg34] {
    width: 100%;
    padding: 8px 36px 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.875rem;
    background: var(--surface);
}

.prices-search-clear[b-2n3bmbtg34] {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 2px 4px;
}

.prices-search-clear:hover[b-2n3bmbtg34] { color: var(--text); }
/* /Components/Pages/ProductGraph.razor.rz.scp.css */
/* ── mode toggle ── */
.pg-mode-toggle[b-n9xpgsxy7i] {
    display: flex;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.pg-mode-btn[b-n9xpgsxy7i] {
    background: none;
    border: none;
    padding: 5px 14px;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--text-muted);
    border-right: 1px solid var(--border);
    transition: background .12s, color .12s;
}

.pg-mode-btn:last-child[b-n9xpgsxy7i] { border-right: none; }
.pg-mode-btn:hover[b-n9xpgsxy7i] { background: var(--surface2); color: var(--text); }
.pg-mode-btn--active[b-n9xpgsxy7i] { background: var(--accent, #0969da); color: #fff; }
.pg-mode-btn--active:hover[b-n9xpgsxy7i] { background: var(--accent, #0969da); }

/* ── chain view summary strip ── */
.pg-chain-summary[b-n9xpgsxy7i] {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.pg-chain-summary-item[b-n9xpgsxy7i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.pg-chain-summary-val[b-n9xpgsxy7i] {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.1;
}

.pg-chain-summary-lbl[b-n9xpgsxy7i] {
    font-size: .72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.pg-chain-summary-item--tilbud .pg-chain-summary-val[b-n9xpgsxy7i] { color: #1d4ed8; }
.pg-chain-summary-item--web    .pg-chain-summary-val[b-n9xpgsxy7i] { color: #166534; }
.pg-chain-summary-item--scan   .pg-chain-summary-val[b-n9xpgsxy7i] { color: #92400e; }

/* ── legend ── */
.pg-chain-legend[b-n9xpgsxy7i] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .78rem;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.pg-leg-dot[b-n9xpgsxy7i] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.pg-leg-dot--tilbud[b-n9xpgsxy7i] { background: #3b82f6; }
.pg-leg-dot--web[b-n9xpgsxy7i]    { background: #22c55e; }
.pg-leg-dot--scan[b-n9xpgsxy7i]   { background: #f59e0b; }
.pg-leg-dot--other[b-n9xpgsxy7i]  { background: #94a3b8; }

/* ── chain rows ── */
.pg-chain-list[b-n9xpgsxy7i] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pg-chain-row[b-n9xpgsxy7i] {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    align-items: center;
    gap: 12px;
}

.pg-chain-name[b-n9xpgsxy7i] {
    font-weight: 600;
    font-size: .88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-chain-bar-wrap[b-n9xpgsxy7i] {
    flex: 1;
    background: var(--surface2);
    border-radius: 6px;
    height: 22px;
    overflow: hidden;
    border: 1px solid var(--border-soft, #eee);
}

.pg-chain-bar[b-n9xpgsxy7i] {
    height: 100%;
    display: flex;
    min-width: 2px;
    transition: width .3s ease;
}

.pg-bar-seg[b-n9xpgsxy7i] {
    height: 100%;
}

.pg-bar-seg--tilbud[b-n9xpgsxy7i] { background: #3b82f6; }
.pg-bar-seg--web[b-n9xpgsxy7i]    { background: #22c55e; }
.pg-bar-seg--scan[b-n9xpgsxy7i]   { background: #f59e0b; }
.pg-bar-seg--other[b-n9xpgsxy7i]  { background: #94a3b8; }

.pg-chain-counts[b-n9xpgsxy7i] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    min-width: 180px;
}

.pg-chain-total[b-n9xpgsxy7i] {
    font-size: .9rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pg-chain-prods[b-n9xpgsxy7i] {
    font-size: .72rem;
    color: var(--text-muted);
}

.pg-chain-detail[b-n9xpgsxy7i] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}

.pg-ct[b-n9xpgsxy7i] {
    font-size: .7rem;
    padding: 1px 6px;
    border-radius: 20px;
    font-weight: 600;
    white-space: nowrap;
}

.pg-ct--tilbud[b-n9xpgsxy7i] { background: #dbeafe; color: #1d4ed8; }
.pg-ct--web[b-n9xpgsxy7i]    { background: #dcfce7; color: #166534; }
.pg-ct--scan[b-n9xpgsxy7i]   { background: #fef3c7; color: #92400e; }
.pg-ct--other[b-n9xpgsxy7i]  { background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); }

/* ── clickable chain rows ── */
.pg-chain-row--clickable[b-n9xpgsxy7i] {
    cursor: pointer;
    border-radius: 8px;
    padding: 4px 8px;
    margin: 0 -8px;
    transition: background .12s;
}
.pg-chain-row--clickable:hover[b-n9xpgsxy7i] { background: var(--surface2); }

/* ── per-chain detail ── */
.pg-detail-header[b-n9xpgsxy7i] {
    margin-bottom: 16px;
}

.pg-detail-source-blocks[b-n9xpgsxy7i] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.pg-detail-block[b-n9xpgsxy7i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface2);
    min-width: 80px;
}

.pg-detail-block--tilbud[b-n9xpgsxy7i] { border-color: #93c5fd; background: #dbeafe; }
.pg-detail-block--web[b-n9xpgsxy7i]    { border-color: #86efac; background: #dcfce7; }
.pg-detail-block--scan[b-n9xpgsxy7i]   { border-color: #fcd34d; background: #fef3c7; }
.pg-detail-block--other[b-n9xpgsxy7i]  { border-color: var(--border); }

.pg-detail-val[b-n9xpgsxy7i] {
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.pg-detail-lbl[b-n9xpgsxy7i] {
    font-size: .72rem;
    color: var(--text-muted);
    margin-top: 3px;
}

.pg-detail-block--tilbud .pg-detail-val[b-n9xpgsxy7i] { color: #1d4ed8; }
.pg-detail-block--web    .pg-detail-val[b-n9xpgsxy7i] { color: #166534; }
.pg-detail-block--scan   .pg-detail-val[b-n9xpgsxy7i] { color: #92400e; }

.pg-detail-bar-wrap[b-n9xpgsxy7i] {
    display: flex;
    height: 28px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-soft, #eee);
    background: var(--surface2);
}

/* ── detail table ── */
.pg-detail-table[b-n9xpgsxy7i] {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
}

.pg-detail-table th[b-n9xpgsxy7i] {
    text-align: left;
    padding: 8px 12px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: .78rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.pg-detail-table td[b-n9xpgsxy7i] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-soft, #f0f0f0);
}

.pg-detail-table tbody tr:last-child td[b-n9xpgsxy7i] { border-bottom: none; }
.pg-detail-table tbody tr:hover td[b-n9xpgsxy7i] { background: var(--surface2); }

.col-r[b-n9xpgsxy7i] { text-align: right; }

.pg-detail-brand[b-n9xpgsxy7i] {
    margin-left: 6px;
    color: var(--text-muted);
    font-size: .78rem;
}
/* /Components/Shared/OnboardingReel.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────
   Onboarding reel — stage, progress bar, tap zones, and all per-scene
   animation drivers. Scene widgets reuse app classes (sl-*, btn); this file
   only styles the reel frame and drives motion. Used by OnboardingTour (modal)
   and the home page (embedded ad).
   ───────────────────────────────────────────────────────────────────────── */

.ob-reel[b-xtjuu3wmwc] { display: flex; flex-direction: column; }

/* Embedded (home page) gets card framing; in the modal the card is the host. */
.ob-reel--embed[b-xtjuu3wmwc] {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 20px);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.18);
    padding: 12px 14px 16px;
}

/* ── Scrubber (movie-player timeline) ── */
.ob-progress-row[b-xtjuu3wmwc] { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

/* Generous vertical hit area around the thin track for easy grabbing. */
.ob-scrub[b-xtjuu3wmwc] {
    flex: 1; padding: 9px 3px; cursor: pointer;
    touch-action: none; -webkit-user-select: none; user-select: none;
}
.ob-scrub:focus-visible[b-xtjuu3wmwc] { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.ob-scrub-track[b-xtjuu3wmwc] {
    position: relative; height: 4px; border-radius: 99px;
    background: var(--surface3);
}
/* Solid "watched" portion up to the playhead. */
.ob-scrub-done[b-xtjuu3wmwc] {
    position: absolute; left: 0; top: 0; bottom: 0;
    background: var(--accent); border-radius: 99px;
}
/* The currently-playing scene fills forward from its start; the handle rides its edge. */
.ob-scrub-play[b-xtjuu3wmwc] {
    position: absolute; top: 0; bottom: 0; width: 0;
    background: var(--accent); border-radius: 99px;
    animation-name: ob-scrub-fill-b-xtjuu3wmwc; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes ob-scrub-fill-b-xtjuu3wmwc { from { width: 0 } to { width: var(--seg) } }

/* Scene separators: a sliver of the card colour punched over the fill at each
   boundary. Non-interactive, so the drag still seeks across the whole timeline. */
.ob-scrub-gap[b-xtjuu3wmwc] {
    position: absolute; top: 0; bottom: 0;
    width: 3px; transform: translateX(-50%);
    background: var(--surface); z-index: 1; pointer-events: none;
}

.ob-scrub-handle[b-xtjuu3wmwc] {
    position: absolute; right: 0; top: 50%; z-index: 2;
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--accent); border: 2px solid var(--surface);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    transform: translate(50%, -50%);
    transition: transform 0.12s ease;
}
/* Free-floating handle shown while dragging (positioned by `left`, centred on it). */
.ob-scrub-handle--static[b-xtjuu3wmwc] { right: auto; transform: translate(-50%, -50%); }
.ob-scrub:hover .ob-scrub-handle[b-xtjuu3wmwc],
.ob-scrub:active .ob-scrub-handle[b-xtjuu3wmwc] { transform: translate(50%, -50%) scale(1.18); }
.ob-scrub:hover .ob-scrub-handle--static[b-xtjuu3wmwc],
.ob-scrub:active .ob-scrub-handle--static[b-xtjuu3wmwc] { transform: translate(-50%, -50%) scale(1.18); }

/* ── Stage ── */
.ob-stage[b-xtjuu3wmwc] {
    position: relative;
    height: 220px;
    border-radius: var(--radius, 14px);
    background: var(--bg);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.ob-scene[b-xtjuu3wmwc] { width: 100%; display: flex; align-items: center; justify-content: center; }

/* Invisible tap zones (story navigation). Below the pause button, above scene. */
.ob-zone[b-xtjuu3wmwc] {
    position: absolute; top: 0; bottom: 0;
    border: none; background: transparent; cursor: pointer; padding: 0;
    z-index: 2;
}
.ob-zone--prev[b-xtjuu3wmwc] { left: 0; width: 35%; }
.ob-zone--next[b-xtjuu3wmwc] { right: 0; width: 65%; }

/* Play/pause lives to the right of the scrubber (not over the stage). */
.ob-playpause[b-xtjuu3wmwc] {
    flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); cursor: pointer; color: var(--text);
    background: var(--surface); opacity: 0.9;
}
.ob-playpause:hover[b-xtjuu3wmwc] { opacity: 1; border-color: var(--accent); color: var(--accent); }

.ob-demo[b-xtjuu3wmwc] { width: 100%; max-width: 300px; display: flex; flex-direction: column; gap: 10px; }
.ob-demo--center[b-xtjuu3wmwc] { align-items: center; }

/* Reused-widget composition tweaks (positioning only — not restyling) */
.ob-demo .sl-dropdown[b-xtjuu3wmwc] { position: static; box-shadow: none; margin-top: 6px; }
.ob-input[b-xtjuu3wmwc] { border-color: rgba(34, 197, 94, 0.45); display: flex; align-items: center; overflow: hidden; white-space: nowrap; }

/* ── Caption ── */
.ob-caption[b-xtjuu3wmwc] { text-align: center; padding: 10px 4px 2px; min-height: 92px; }
.ob-title[b-xtjuu3wmwc] { font-size: 1.14rem; font-weight: 800; color: var(--text); margin: 4px 0 6px; letter-spacing: -0.01em; }
.ob-text[b-xtjuu3wmwc] { font-size: 0.88rem; line-height: 1.5; color: var(--text-muted); margin: 0; }

/* ═══════════════════ Scene 0 — welcome hero ═══════════════════ */
.ob-hero[b-xtjuu3wmwc] { position: relative; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; }
.ob-hero-glow[b-xtjuu3wmwc] { position: absolute; inset: 20px; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity: 0.22; border-radius: 50%; animation: ob-glow-b-xtjuu3wmwc 3s ease-in-out infinite; }
@keyframes ob-glow-b-xtjuu3wmwc { 0%,100% { transform: scale(0.9); opacity: 0.16 } 50% { transform: scale(1.1); opacity: 0.3 } }
.ob-hero-bag[b-xtjuu3wmwc] { width: 82px; height: 82px; color: var(--accent); animation: ob-float-b-xtjuu3wmwc 3.2s ease-in-out infinite; }
.ob-hero-bag svg[b-xtjuu3wmwc] { width: 100%; height: 100%; }
@keyframes ob-float-b-xtjuu3wmwc { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.ob-tag[b-xtjuu3wmwc] { position: absolute; font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--accent); padding: 3px 8px; border-radius: 8px; box-shadow: 0 6px 16px rgba(0,0,0,0.2); animation: ob-tag-in-b-xtjuu3wmwc 0.5s ease both, ob-bob-b-xtjuu3wmwc 3s ease-in-out infinite; }
.ob-tag--a[b-xtjuu3wmwc] { top: 14px; left: 8px; animation-delay: 0.15s, 0.15s; }
.ob-tag--b[b-xtjuu3wmwc] { bottom: 24px; right: 2px; background: #ef4444; animation-delay: 0.35s, 0.5s; }
.ob-tag--c[b-xtjuu3wmwc] { bottom: 8px; left: 22px; background: var(--text); color: var(--surface); animation-delay: 0.55s, 0.9s; }
@keyframes ob-tag-in-b-xtjuu3wmwc { from { opacity: 0; transform: scale(0.6) } to { opacity: 1; transform: none } }
@keyframes ob-bob-b-xtjuu3wmwc { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }

/* ═══════════════════ Scene 1 — scan a price tag (AI, loops) ═══════════════════ */
.ob-scan[b-xtjuu3wmwc] { width: 100%; max-width: 300px; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* Camera viewfinder */
.ob-scan-frame[b-xtjuu3wmwc] {
    position: relative; width: 190px; height: 104px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--text) 6%, var(--surface));
    border-radius: 12px; overflow: hidden;
}
/* Corner brackets */
.ob-corner[b-xtjuu3wmwc] { position: absolute; width: 18px; height: 18px; border: 2.5px solid var(--accent); }
.ob-corner--tl[b-xtjuu3wmwc] { top: 8px; left: 8px; border-right: none; border-bottom: none; border-radius: 5px 0 0 0; }
.ob-corner--tr[b-xtjuu3wmwc] { top: 8px; right: 8px; border-left: none; border-bottom: none; border-radius: 0 5px 0 0; }
.ob-corner--bl[b-xtjuu3wmwc] { bottom: 8px; left: 8px; border-right: none; border-top: none; border-radius: 0 0 0 5px; }
.ob-corner--br[b-xtjuu3wmwc] { bottom: 8px; right: 8px; border-left: none; border-top: none; border-radius: 0 0 5px 0; }

/* The price tag being pointed at */
.ob-scan-tag[b-xtjuu3wmwc] {
    background: #fff; color: #111; border-radius: 8px; padding: 8px 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18); text-align: center; min-width: 118px;
    animation: ob-bob-b-xtjuu3wmwc 3.4s ease-in-out infinite;
}
.ob-scan-tag-name[b-xtjuu3wmwc] { display: block; font-size: 0.58rem; font-weight: 600; color: #666; margin-bottom: 2px; }
.ob-scan-tag-price[b-xtjuu3wmwc] { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.ob-scan-tag-dec[b-xtjuu3wmwc] { font-size: 0.9rem; }
.ob-scan-tag-unit[b-xtjuu3wmwc] { font-size: 0.7rem; font-weight: 600; color: #888; }

/* Sweeping scan line */
.ob-scan-line[b-xtjuu3wmwc] {
    position: absolute; left: 6px; right: 6px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    box-shadow: 0 0 10px 2px color-mix(in srgb, var(--accent) 60%, transparent);
    animation: ob-scan-sweep-b-xtjuu3wmwc 5s ease-in-out infinite;
}
@keyframes ob-scan-sweep-b-xtjuu3wmwc {
    0% { top: 10px; opacity: 0; }
    8% { opacity: 1; }
    45% { top: 92px; opacity: 1; }
    55% { top: 92px; opacity: 0; }
    100% { top: 92px; opacity: 0; }
}

/* AI badge */
.ob-scan-ai[b-xtjuu3wmwc] {
    position: absolute; top: 8px; right: 8px;
    display: flex; align-items: center; gap: 3px;
    font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em;
    color: #fff; background: var(--accent); padding: 2px 6px 2px 4px; border-radius: 99px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
    animation: ob-ai-glow-b-xtjuu3wmwc 2.2s ease-in-out infinite;
}
@keyframes ob-ai-glow-b-xtjuu3wmwc { 0%,100% { box-shadow: 0 3px 8px rgba(0,0,0,0.2); } 50% { box-shadow: 0 3px 14px color-mix(in srgb, var(--accent) 70%, transparent); } }

/* Recognised-result card: appears after the sweep completes.
   Row 1 = product + price, row 2 = the store inferred from your location. */
.ob-scan-result[b-xtjuu3wmwc] {
    display: flex; flex-direction: column; gap: 3px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 7px 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    opacity: 0; animation: ob-scan-result-in-b-xtjuu3wmwc 5s ease infinite;
}
.ob-scan-result-row[b-xtjuu3wmwc] { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text); }
.ob-scan-result-store[b-xtjuu3wmwc],
.ob-scan-result-share[b-xtjuu3wmwc] { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--text-muted); padding-left: 20px; }
.ob-scan-result-store svg[b-xtjuu3wmwc],
.ob-scan-result-share svg[b-xtjuu3wmwc] { color: var(--accent); flex-shrink: 0; }
.ob-scan-result-store strong[b-xtjuu3wmwc] { color: var(--text); }
.ob-scan-result svg[b-xtjuu3wmwc] { flex-shrink: 0; }
@keyframes ob-scan-result-in-b-xtjuu3wmwc {
    0%, 52% { opacity: 0; transform: translateY(8px) scale(0.94); }
    60%, 92% { opacity: 1; transform: none; }
    98%, 100% { opacity: 0; transform: translateY(4px); }
}

/* ═══════════════════ Scene 2 — create a list ═══════════════════ */
.ob-press[b-xtjuu3wmwc] { position: relative; animation: ob-press-kf-b-xtjuu3wmwc 2.4s ease-in-out infinite; }
@keyframes ob-press-kf-b-xtjuu3wmwc { 0%,72%,100% { transform: none } 80% { transform: scale(0.92) } 88% { transform: scale(1) } }
.ob-ripple[b-xtjuu3wmwc] { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--accent); opacity: 0; animation: ob-ripple-kf-b-xtjuu3wmwc 2.4s ease-out infinite; }
@keyframes ob-ripple-kf-b-xtjuu3wmwc { 0%,74% { opacity: 0; transform: scale(1) } 80% { opacity: 0.6; transform: scale(1) } 100% { opacity: 0; transform: scale(1.5) } }
.ob-appear[b-xtjuu3wmwc] { animation: ob-appear-kf-b-xtjuu3wmwc 0.6s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.9s; }
@keyframes ob-appear-kf-b-xtjuu3wmwc { from { opacity: 0; transform: translateY(14px) scale(0.96) } to { opacity: 1; transform: none } }

/* ═══════════════════ Scene 3 — add items → cheapest store ═══════════════════
   Norvegia drops in, then Agurk; a tap on «+» bumps Agurk's qty 1→2; then the
   store-comparison bar reveals the cheapest basket. Plays once per scene visit
   (the scene re-mounts on each loop, restarting the staggered timeline). */
.ob-shop[b-xtjuu3wmwc] { gap: 7px; max-width: 300px; }
.ob-shop .sl-item[b-xtjuu3wmwc] { padding: 7px 10px; }
.ob-shop-item[b-xtjuu3wmwc] { opacity: 0; animation: ob-appear-kf-b-xtjuu3wmwc 0.5s cubic-bezier(0.16,1,0.3,1) both; }
.ob-shop-item--1[b-xtjuu3wmwc] { animation-delay: 0.25s; }
.ob-shop-item--2[b-xtjuu3wmwc] { animation-delay: 1.05s; }

/* Quantity bump: two digits stacked in one grid cell; «1» fades out as «2» pops in. */
.ob-qty[b-xtjuu3wmwc] { display: inline-grid; place-items: center; }
.ob-qty > span[b-xtjuu3wmwc] { grid-area: 1 / 1; }
.ob-qty-1[b-xtjuu3wmwc] { animation: ob-qty-out-b-xtjuu3wmwc 0.3s ease 1.95s both; }
@keyframes ob-qty-out-b-xtjuu3wmwc { from { opacity: 1; transform: none } to { opacity: 0; transform: translateY(-7px) } }
.ob-qty-2[b-xtjuu3wmwc] { opacity: 0; animation: ob-qty-in-b-xtjuu3wmwc 0.35s cubic-bezier(0.16,1,0.3,1) 2s both; }
@keyframes ob-qty-in-b-xtjuu3wmwc { 0% { opacity: 0; transform: translateY(8px) scale(0.6) } 100% { opacity: 1; transform: none } }
/* The «+» button presses in with a ripple ring at the moment of the tap. */
.ob-qty-plus[b-xtjuu3wmwc] { animation: ob-qty-tap-b-xtjuu3wmwc 0.5s ease 1.85s both; }
@keyframes ob-qty-tap-b-xtjuu3wmwc {
    0% { transform: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent) }
    45% { transform: scale(0.8) }
    70% { transform: scale(1) }
    100% { transform: none; box-shadow: 0 0 0 9px transparent }
}

.ob-chain-in[b-xtjuu3wmwc] { opacity: 0; animation: ob-appear-kf-b-xtjuu3wmwc 0.55s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 2.7s; }
/* Cheapest card gets a gentle emphasis pulse and its badge pops in, after reveal. */
.ob-chain-in .sl-chain-card--best[b-xtjuu3wmwc] { animation: ob-best-pop-b-xtjuu3wmwc 0.7s ease 3.2s both; }
@keyframes ob-best-pop-b-xtjuu3wmwc { 0% { transform: none } 45% { transform: scale(1.06) } 100% { transform: none } }
.ob-chain-in .sl-chain-badge[b-xtjuu3wmwc] { animation: ob-tag-in-b-xtjuu3wmwc 0.4s ease 3.35s both; }

/* ═══════════════════ Scene 4 — drag & drop (loops) ═══════════════════ */
.ob-dd .sl-item[b-xtjuu3wmwc] { height: 52px; box-sizing: border-box; }
.ob-lift[b-xtjuu3wmwc] { position: relative; z-index: 2; animation: ob-lift-kf-b-xtjuu3wmwc 3.6s ease-in-out infinite; }
@keyframes ob-lift-kf-b-xtjuu3wmwc { 0%,12% { transform: none; box-shadow: none } 22% { transform: scale(1.04); box-shadow: 0 14px 30px rgba(0,0,0,0.22) } 38%,58% { transform: translateY(-62px) scale(1.04); box-shadow: 0 14px 30px rgba(0,0,0,0.22) } 70%,100% { transform: translateY(-62px) scale(1); box-shadow: none } }
.ob-slot-a[b-xtjuu3wmwc] { animation: ob-slot-a-kf-b-xtjuu3wmwc 3.6s ease-in-out infinite; }
@keyframes ob-slot-a-kf-b-xtjuu3wmwc { 0%,30% { transform: none } 50% { transform: translateY(62px) } 70%,100% { transform: translateY(62px) } }
.ob-grip[b-xtjuu3wmwc] { color: var(--text-muted); display: flex; flex-shrink: 0; }

/* ═══════════════════ Scene 5 — share ═══════════════════ */
.ob-share-wrap[b-xtjuu3wmwc] { display: flex; align-items: center; gap: 6px; }
.ob-avatar[b-xtjuu3wmwc] { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
.ob-avatar--me[b-xtjuu3wmwc] { background: var(--accent); }
.ob-avatar--them[b-xtjuu3wmwc] { background: #ef4444; font-size: 1.2rem; animation: ob-bob-b-xtjuu3wmwc 2.6s ease-in-out infinite; }
.ob-share-link[b-xtjuu3wmwc] { position: relative; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.ob-share-link svg[b-xtjuu3wmwc] { width: 26px; height: 26px; }
.ob-share-pulse[b-xtjuu3wmwc] { position: absolute; inset: 4px; border-radius: 50%; border: 2px solid var(--accent); animation: ob-pulse-kf-b-xtjuu3wmwc 2s ease-out infinite; }
@keyframes ob-pulse-kf-b-xtjuu3wmwc { 0% { opacity: 0.7; transform: scale(0.6) } 100% { opacity: 0; transform: scale(1.5) } }

/* ── Paused: freeze the progress fill and every decorative animation ── */
.ob-reel--paused .ob-stage *[b-xtjuu3wmwc],
.ob-reel--paused .ob-scrub-play[b-xtjuu3wmwc] { animation-play-state: paused !important; }

/* ── Reduced motion: no autoplay motion; static, tap-through experience ── */
@media (prefers-reduced-motion: reduce) {
    .ob-stage *[b-xtjuu3wmwc], .ob-scrub-play[b-xtjuu3wmwc] { animation: none !important; }
    .ob-appear[b-xtjuu3wmwc], .ob-item-in[b-xtjuu3wmwc], .ob-drop-anim[b-xtjuu3wmwc], .ob-scan-result[b-xtjuu3wmwc],
    .ob-shop-item[b-xtjuu3wmwc], .ob-chain-in[b-xtjuu3wmwc] { opacity: 1 !important; }
    /* Static end-state for the qty bump: show the incremented «2». */
    .ob-qty-1[b-xtjuu3wmwc] { opacity: 0 !important; }
    .ob-qty-2[b-xtjuu3wmwc] { opacity: 1 !important; }
    .ob-scan-line[b-xtjuu3wmwc] { display: none; }
}

@media (max-width: 420px) {
    .ob-stage[b-xtjuu3wmwc] { height: 200px; }
    .ob-title[b-xtjuu3wmwc] { font-size: 1.05rem; }
}
/* /Components/Shared/OnboardingTour.razor.rz.scp.css */
/* ─────────────────────────────────────────────────────────────────────────
   Onboarding modal chrome only. The animated scenes live in OnboardingReel
   (+ OnboardingReel.razor.css), which this modal hosts.
   ───────────────────────────────────────────────────────────────────────── */

.ob-backdrop[b-vip6206t5n] {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: ob-fade-b-vip6206t5n 0.25s ease both;
}

.ob-card[b-vip6206t5n] {
    width: 100%;
    max-width: 430px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 20px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    padding: 16px 20px 18px;
    animation: ob-pop-b-vip6206t5n 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ob-fade-b-vip6206t5n { from { opacity: 0 } to { opacity: 1 } }
@keyframes ob-pop-b-vip6206t5n {
    from { opacity: 0; transform: translateY(14px) scale(0.97) }
    to   { opacity: 1; transform: none }
}

/* Footer nav (passed into the reel) */
.ob-nav[b-vip6206t5n] { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ob-skip[b-vip6206t5n] { border: none; background: none; color: var(--text-muted); font-size: 0.85rem; font-weight: 500; cursor: pointer; padding: 6px 2px; }
.ob-skip:hover[b-vip6206t5n] { color: var(--text); }
.ob-skip:disabled[b-vip6206t5n] { opacity: 0.6; cursor: default; }
.ob-next[b-vip6206t5n] { min-width: 130px; }