*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
/* ── LIGHT THEME (default) ── */
--bg: #f7f7fa;
--surface: #ffffff;
--surface2: #f0f0f5;
--surface3: #e6e6ef;
--accent: #16a34a;
--accent-dim: rgba(22, 163, 74, 0.12);
--accent-glow: rgba(22, 163, 74, 0.25);
--text: #0d0d14;
--text-muted: #52526e;
--text-dim: #9898b0;
--border: rgba(0, 0, 0, 0.08);
--border-soft: rgba(0, 0, 0, 0.04);
--radius: 14px;
--radius-lg: 20px;
--radius-xl: 28px;
--tab-h: 60px;
--card-shine: inset 0 1px 0 rgba(255,255,255,0.9);
/* semantic helpers — swap in dark mode */
--topbar-bg: rgba(247, 247, 250, 0.92);
--tab-bar-bg: rgba(247, 247, 250, 0.94);
--overlay: rgba(0, 0, 0, 0.06);
--overlay-hover: rgba(0, 0, 0, 0.10);
--overlay-border: rgba(0, 0, 0, 0.10);
--muted-dot: rgba(0, 0, 0, 0.13);
--scrollbar-thumb: #c8c8d8;
--logo-span-end: #15803d;
/* ── TYPE SCALE (Inter) ── */
--fs-xs: 0.75rem; /* 12 — meta, captions */
--fs-sm: 0.8125rem; /* 13 — secondary text */
--fs-base: 0.9375rem; /* 15 — body */
--fs-md: 1.0625rem; /* 17 — lead / card titles */
--fs-lg: 1.25rem; /* 20 — h3 */
--fs-xl: 1.625rem; /* 26 — h2 */
--fs-2xl: 2.125rem; /* 34 — h1 */
--fs-3xl: 2.75rem; /* 44 — hero */
--lh-tight: 1.15;
--lh-snug: 1.3;
--lh-normal: 1.55;
--tracking-tight: -0.02em;
--tracking-tighter: -0.035em;
/* ── SPACING SCALE (4px base) ── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-8: 48px;
/* ── ELEVATION MODEL (3 levels — use these, not ad-hoc shadows) ── */
--elev-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06);
--elev-2: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.05);
--elev-3: 0 12px 32px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.06);
--elev-overlay: 0 24px 64px -16px rgba(0,0,0,0.35), 0 8px 24px -12px rgba(0,0,0,0.18);
}
[data-theme="dark"] {
/* ── DARK THEME ── */
--bg: #0c0c0f;
--surface: #14141a;
--surface2: #1c1c24;
--surface3: #24242f;
--accent: #22c55e;
--accent-dim: rgba(34, 197, 94, 0.18);
--accent-glow: rgba(34, 197, 94, 0.35);
--text: #f0f0f5;
--text-muted: #9090a8;
--text-dim: #50506a;
--border: rgba(255,255,255,0.07);
--border-soft: rgba(255,255,255,0.04);
--card-shine: inset 0 1px 0 rgba(255,255,255,0.06);
--topbar-bg: rgba(12, 12, 15, 0.92);
--tab-bar-bg: rgba(12, 12, 15, 0.94);
--overlay: rgba(255, 255, 255, 0.09);
--overlay-hover: rgba(255, 255, 255, 0.15);
--overlay-border: rgba(255, 255, 255, 0.14);
--muted-dot: rgba(255, 255, 255, 0.14);
--scrollbar-thumb: #38384a;
--logo-span-end: #86efac;
/* Elevation reads deeper on dark surfaces */
--elev-1: 0 1px 2px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.50);
--elev-2: 0 4px 14px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.40);
--elev-3: 0 14px 40px rgba(0,0,0,0.60), 0 4px 10px rgba(0,0,0,0.50);
--elev-overlay: 0 24px 64px rgba(0,0,0,0.62), 0 8px 24px rgba(0,0,0,0.45);
}
html { scroll-behavior: smooth; overflow-x: hidden; }
#main-content:focus { outline: none; }
body {
background: var(--bg);
color: var(--text);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
font-size: var(--fs-base);
line-height: var(--lh-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
min-height: 100vh;
overflow-x: hidden;
}
/* ── HEADING RHYTHM ──────────────────────────────────────────────
Element-level defaults establish a scale. Class-styled headings
(e.g. .sl-page-title) keep their own size — class beats element. */
h1, h2, h3, h4 {
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
font-weight: 800;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
/* Opt-in type helpers */
.u-h1 { font-size: var(--fs-2xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 800; }
.u-h2 { font-size: var(--fs-xl); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: 800; }
.u-h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); font-weight: 700; }
.u-lead { font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--text-muted); }
.u-muted { color: var(--text-muted); }
.u-dim { color: var(--text-dim); }
/* ── LAYOUT UTILITIES (kill inline styles) ── */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-6); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-sm { display: flex; align-items: center; gap: var(--space-2); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.grow { flex: 1 1 auto; min-width: 0; }
.push { margin-left: auto; }
/* ── SIGNATURE PRICE TREATMENT ───────────────────────────────────
Big, tight, tabular. øre and currency render as small superscripts,
the way a real ESL price tag reads. Opt-in markup:
2990kr */
.price {
display: inline-flex; align-items: flex-start;
color: var(--accent); font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: var(--tracking-tight);
line-height: 1;
}
.price__int { font-size: var(--fs-xl); }
.price__frac { font-size: 0.5em; font-weight: 700; margin-left: 1px; margin-top: 0.15em; }
.price__cur { font-size: 0.44em; font-weight: 700; color: var(--text-muted); margin-left: 3px; margin-top: 0.35em; letter-spacing: 0; }
.price__approx { font-size: 0.5em; font-weight: 700; color: var(--text-muted); margin-right: 2px; align-self: center; }
.price--xl .price__int { font-size: var(--fs-2xl); }
.price--lg .price__int { font-size: var(--fs-xl); }
.price--sm .price__int { font-size: var(--fs-md); }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb); }
/* ── LOGO ── */
.logo {
font-size: 1.35rem;
font-weight: 900;
letter-spacing: -0.8px;
background: linear-gradient(125deg, var(--text) 0%, var(--text-muted) 40%, var(--accent) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
user-select: none;
text-decoration: none;
}
.logo span {
background: linear-gradient(125deg, var(--accent), var(--logo-span-end));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.logo-beta {
display: inline-block; margin-left: 6px;
font-size: .52rem; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase;
padding: 2px 5px; border-radius: 4px;
background: rgba(34,197,94,.18); border: 1px solid rgba(34,197,94,.35);
color: #22c55e;
-webkit-text-fill-color: #22c55e;
vertical-align: middle; line-height: 1;
position: relative; top: -2px;
}
/* ── ICON BUTTON ── */
.icon-btn {
width: 38px; height: 38px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--surface2);
color: var(--text-muted);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
flex-shrink: 0;
text-decoration: none;
}
.icon-btn:hover {
background: var(--surface3); color: var(--text);
border-color: rgba(255,255,255,0.12); transform: scale(1.05);
}
.icon-btn svg { width: 17px; height: 17px; }
/* ── BADGE ── */
.badge {
display: inline-flex; align-items: center; gap: 3px;
font-size: 0.7rem; font-weight: 800;
padding: 3px 8px; border-radius: 100px; letter-spacing: 0.2px;
}
.badge-ok { background: var(--accent); color: #fff; }
.badge-warn { background: #f59e0b; color: #fff; }
.badge-err { background: #ef4444; color: #fff; }
.badge-muted { background: var(--overlay); color: var(--text-muted); }
/* ── TOP BAR ── */
/* iOS standalone PWA: App.razor sets viewport-fit=cover together with apple-mobile-web-app-status-bar
-style=black-translucent, so the web view starts at y=0 *underneath* the status bar / notch. With no
padding for the top inset the logo and hamburger render behind the clock. --topbar-total is the
header's real occupied height (bar + inset); the drawer and its backdrop hang off it so all three
stay aligned. env() resolves to 0px on desktop, Android and in-browser iOS, so nothing else moves. */
:root {
--safe-top: env(safe-area-inset-top, 0px);
--topbar-total: calc(56px + var(--safe-top));
}
.topbar {
position: sticky; top: 0; z-index: 200;
height: var(--topbar-total);
display: flex; align-items: center; justify-content: space-between;
padding: var(--safe-top) 16px 0; /* box-sizing:border-box is global → the bar stays 56px tall */
background: var(--topbar-bg);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-bottom: 1px solid var(--border);
box-shadow: 0 1px 0 var(--border-soft), var(--elev-2);
}
/* ── HAMBURGER BUTTON ── */
.hamburger-btn {
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
background: none; border: 1px solid var(--border);
border-radius: var(--radius); color: var(--text-muted);
cursor: pointer; flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.hamburger-btn:hover { background: var(--surface2); color: var(--text); }
/* ── NAV BACKDROP ── */
.nav-backdrop {
position: fixed; inset: var(--topbar-total) 0 0 0;
z-index: 150;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
animation: fadeIn 0.18s ease;
}
/* ── NAV DRAWER ── */
.nav-drawer {
position: fixed; top: var(--topbar-total); right: 0; bottom: 0;
width: 220px;
z-index: 160;
background: var(--surface);
border-left: 1px solid var(--border);
padding: 10px 8px;
animation: slideIn 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.nav-drawer-link {
display: flex; align-items: center; gap: 10px;
padding: 11px 16px; border-radius: var(--radius);
font-size: 0.92rem; font-weight: 600;
color: var(--text-muted); text-decoration: none;
transition: background 0.15s, color 0.15s;
white-space: nowrap;
}
.nav-drawer-link svg { flex-shrink: 0; opacity: 0.65; transition: opacity 0.15s; }
.nav-drawer-link:hover { background: var(--surface2); color: var(--text); }
.nav-drawer-link:hover svg { opacity: 1; }
.nav-drawer-link.active { background: var(--surface2); color: var(--text); }
.nav-drawer-link.active svg { opacity: 1; }
.nav-drawer-divider {
height: 1px; background: var(--border);
margin: 6px 8px;
}
.nav-drawer-divider--admin { margin-top: 12px; }
.nav-drawer-section-label {
padding: 8px 16px 2px;
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
opacity: 0.6;
}
/* ── Admin free/premium preview toggle ── */
.nav-preview-row {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 16px 8px;
}
.nav-preview-label {
font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
opacity: .45; font-weight: 700;
}
.nav-preview-seg {
display: flex;
background: var(--overlay);
border: 1px solid var(--overlay-border);
border-radius: 7px; overflow: hidden;
}
.nav-preview-btn {
padding: 4px 12px; font-size: .75rem; font-weight: 600;
border: none; background: transparent; color: var(--text);
cursor: pointer; opacity: .4; transition: opacity .15s, background .15s, color .15s;
}
.nav-preview-btn--on {
background: rgba(251,191,36,.18); color: #fbbf24; opacity: 1;
}
.nav-drawer-link--admin {
font-size: 0.85rem; font-weight: 500;
opacity: 0.7;
}
.nav-drawer-link--admin:hover,
.nav-drawer-link--admin.active { opacity: 1; }
.nav-admin-toggle {
width: 100%; text-align: left; background: none; border: none; cursor: pointer;
color: inherit;
}
.nav-admin-chevron {
margin-left: auto; flex-shrink: 0; opacity: 0.5;
transition: transform 0.2s;
}
.nav-admin-chevron--open { transform: rotate(180deg); }
.nav-admin-sub {
margin: 2px 0 4px 26px;
border-left: 1px solid var(--border);
padding-left: 6px;
}
.nav-admin-sub-link {
display: block;
padding: 6px 10px; border-radius: var(--radius);
font-size: 0.8rem; font-weight: 500;
color: var(--text-muted); text-decoration: none;
opacity: 0.7;
transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.nav-admin-sub-link:hover,
.nav-admin-sub-link.active {
background: var(--surface2); color: var(--text); opacity: 1;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
/* ── SECTION HEADERS ── */
.section-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 10px; }
.section-title { font-size: 1rem; font-weight: 800; letter-spacing: -0.2px; }
.see-all { font-size: 0.78rem; color: var(--accent); text-decoration: none; font-weight: 700; opacity: 0.9; transition: opacity 0.15s; }
.see-all:hover { opacity: 1; }
/* ── PAGE WRAPPER ── */
.page-wrap { max-width: 900px; margin: 0 auto; padding: 24px 18px calc(var(--tab-h) + 40px); }
@media (min-width: 768px) { .page-wrap { padding: 32px 32px 80px; } }
/* ── SECTION ── */
.section { margin-bottom: 40px; }
.section-label {
font-size: 0.65rem; font-weight: 900; letter-spacing: 1.6px;
text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px;
display: flex; align-items: center; gap: 8px;
}
.section-label::before {
content: '';
display: inline-block; width: 3px; height: 10px;
background: var(--accent); border-radius: 2px; flex-shrink: 0;
opacity: 0.6;
}
/* ── STAT CARDS ── */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 480px) { .stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card {
background: var(--surface); border: 1px solid var(--border-soft);
border-radius: var(--radius); padding: 14px 16px;
box-shadow: var(--card-shine);
}
.stat-label {
font-size: 0.68rem; font-weight: 700; color: var(--text-dim);
letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 5px;
}
.stat-value { font-size: 0.92rem; font-weight: 800; color: var(--text); line-height: 1.3; }
.stat-value.accent { color: var(--accent); }
/* ── CARD ── */
.card {
background: var(--surface); border: 1px solid var(--border-soft);
border-radius: var(--radius); overflow: hidden;
box-shadow: var(--card-shine), var(--elev-1);
transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
.card:hover { border-color: var(--border); box-shadow: var(--card-shine), var(--elev-2); }
.card-body { padding: 16px 18px; }
.card-title { font-size: 0.88rem; font-weight: 800; margin-bottom: 4px; }
.card-sub { font-size: 0.75rem; color: var(--text-muted); line-height: 1.45; }
/* ── BUTTON ── */
.btn {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.88rem; font-weight: 700; padding: 11px 22px;
border-radius: 20px; border: none; cursor: pointer;
letter-spacing: 0.1px;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
white-space: nowrap; text-decoration: none;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn:hover { transform: translateY(-2px); }
.btn-primary {
background: var(--accent); color: #fff;
box-shadow: 0 4px 20px var(--accent-glow);
}
.btn-primary:hover { box-shadow: 0 8px 28px var(--accent-glow); }
.btn-secondary {
background: var(--overlay);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
border: 1px solid var(--overlay-border); color: var(--text);
}
.btn-secondary:hover { background: var(--overlay-hover); }
.btn-danger { background: #ef4444; color: #fff; box-shadow: 0 4px 20px rgba(239,68,68,0.35); }
.btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--text); }
.btn-outline:hover { background: var(--overlay); }
.btn-danger:hover { background: #f87171; }
.btn-sm { padding: 7px 14px; font-size: 0.78rem; border-radius: 14px; }
.btn-full { width: 100%; justify-content: center; }
/* ── CHIP / FILTER ── */
.chip {
flex-shrink: 0; padding: 7px 15px; border-radius: 100px;
border: 1px solid var(--border); background: var(--surface);
color: var(--text-muted); font-size: 0.8rem; font-weight: 700;
cursor: pointer; white-space: nowrap;
transition: all 0.18s ease; letter-spacing: 0.15px;
display: inline-flex; align-items: center;
}
.chip:hover { border-color: rgba(34,197,94,0.4); color: var(--text); background: var(--surface2); }
.chip.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 0 18px var(--accent-glow); }
.chip-disabled, .chip:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }
.backend-switcher {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 10px 0 4px; margin-top: 6px;
border-top: 1px solid var(--border);
}
.backend-switcher-label {
font-size: .72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: var(--text-muted); margin-right: 4px;
}
.chips-wrap {
display: flex; gap: 7px; flex-wrap: wrap; padding: 0 0 4px;
}
/* ── FORM ── */
.form-group { margin-bottom: 18px; }
.form-label {
display: block; font-size: 0.75rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-dim); margin-bottom: 8px;
}
.form-input {
width: 100%; padding: 10px 14px; border-radius: 10px;
border: 1.5px solid var(--border); background: var(--surface);
color: var(--text); font-size: 0.95rem; outline: none;
transition: border-color 0.15s;
}
.form-input:focus { border-color: var(--accent); }
.form-input::placeholder { color: var(--text-dim); }
/* ── TABLE ── */
.price-table {
width: 100%; border-collapse: collapse;
}
.price-table th {
font-size: 0.65rem; font-weight: 900; text-transform: uppercase;
letter-spacing: 1px; color: var(--text-dim); padding: 10px 14px;
text-align: left; border-bottom: 1px solid var(--border);
}
.price-table td {
padding: 12px 14px; border-bottom: 1px solid var(--border-soft);
font-size: 0.85rem; color: var(--text);
}
.price-table tr:last-child td { border-bottom: none; }
.price-table tr:hover td { background: var(--surface2); }
.price-table .td-price { font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.price-table .td-store { color: var(--text-muted); font-size: 0.78rem; }
.price-table .td-date { color: var(--text-dim); font-size: 0.75rem; }
/* ── SCANNER PAGE ── */
.scanner-wrap {
display: flex; flex-direction: column; gap: 20px;
max-width: 640px; margin: 0 auto; padding: 24px 18px 80px;
}
@media (min-width: 768px) { .scanner-wrap { padding: 32px 0 80px; } }
.camera-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-lg); overflow: hidden;
position: relative;
}
/* Full-screen camera mode — takes over the entire viewport */
.camera-card--fullscreen {
position: fixed; inset: 0; z-index: 95;
border: none; border-radius: 0;
display: flex; flex-direction: column;
background: #000;
}
.camera-card--fullscreen .camera-viewport {
flex: 1; aspect-ratio: unset; min-height: 0;
}
.camera-card--fullscreen .camera-controls {
border-top: none;
background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
position: absolute; bottom: 0; left: 0; right: 0;
padding: 24px 16px max(env(safe-area-inset-bottom), 24px);
pointer-events: auto; z-index: 10;
}
.camera-viewport {
position: relative; width: 100%; aspect-ratio: 4/3; background: #000;
display: flex; align-items: center; justify-content: center;
}
.camera-video {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; display: block;
}
.camera-canvas {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none;
}
.yolo-loading-overlay {
display: none;
position: absolute; inset: 0; z-index: 10;
background: rgba(0,0,0,.55); backdrop-filter: blur(3px);
align-items: center; justify-content: center;
}
.yolo-loading-overlay[data-state="loading"],
.yolo-loading-overlay[data-state="error"] { display: flex; }
.yolo-loading-overlay__content {
background: rgba(15,15,20,.85); border: 1px solid rgba(255,255,255,.12);
border-radius: 14px; padding: 20px 28px;
display: flex; flex-direction: column; align-items: center; gap: 14px;
color: #e2e8f0; font-size: .92em; text-align: center; min-width: 180px;
}
.yolo-loading-body {
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.yolo-error-body {
display: none; flex-direction: column; align-items: center; gap: 10px;
}
[data-state="loading"] .yolo-loading-body { display: flex; }
[data-state="loading"] .yolo-error-body { display: none; }
[data-state="error"] .yolo-loading-body { display: none; }
[data-state="error"] .yolo-error-body { display: flex; }
.camera-overlay-frame {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
pointer-events: none; z-index: 2;
}
.camera-frame-border {
width: 75%; max-width: 320px; aspect-ratio: 2.5/1;
border: 2px solid rgba(34,197,94,0.7);
border-radius: 10px;
box-shadow: 0 0 0 2000px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(34,197,94,0.15);
}
.camera-frame-label {
position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%);
font-size: 0.7rem; font-weight: 700; color: rgba(34,197,94,0.85);
white-space: nowrap; letter-spacing: 0.5px;
transition: color 0.2s;
}
/* Detected → amber pulse; Locked → bright green flash */
.camera-frame-border.state-detecting {
border-color: rgba(251,191,36,0.9);
box-shadow: 0 0 0 2000px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(251,191,36,0.2),
0 0 14px 2px rgba(251,191,36,0.5);
animation: frame-pulse 0.7s ease-in-out infinite alternate;
}
.camera-frame-border.state-detecting .camera-frame-label { color: rgba(251,191,36,0.9); }
.camera-frame-border.state-locked {
border-color: #fff;
box-shadow: 0 0 0 2000px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.3),
0 0 20px 4px rgba(34,197,94,0.8);
animation: none;
}
@keyframes frame-pulse {
from { box-shadow: 0 0 0 2000px rgba(0,0,0,0.35), 0 0 8px 1px rgba(251,191,36,0.3); }
to { box-shadow: 0 0 0 2000px rgba(0,0,0,0.35), 0 0 18px 4px rgba(251,191,36,0.6); }
}
.camera-info-bar {
display: flex; align-items: center; gap: 8px;
padding: 6px 12px; background: var(--surface2);
border-top: 1px solid var(--border);
}
.camera-card--fullscreen .camera-info-bar {
position: absolute; bottom: 60px; left: 0; right: 0; z-index: 20;
background: rgba(0,0,0,0.6); border-top: none;
}
.info-fps {
font: 700 0.8rem/1 monospace; color: #4ade80;
background: rgba(74,222,128,0.12); padding: 3px 8px;
border-radius: 5px; border: 1px solid rgba(74,222,128,0.3);
min-width: 52px; text-align: center;
}
.info-status {
flex: 1; font-size: 0.78rem; color: var(--text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
text-align: center;
}
.info-matches {
font: 600 0.78rem/1 monospace; color: var(--accent);
background: var(--accent-dim); padding: 3px 8px;
border-radius: 5px; min-width: 52px; text-align: center;
}
.info-interpreter {
font: 700 0.72rem/1 monospace; padding: 3px 8px;
border-radius: 5px; text-transform: uppercase; letter-spacing: .04em;
}
.badge-classic { color: #94a3b8; background: rgba(148,163,184,0.12); }
.badge-onnx { color: #38bdf8; background: rgba(56,189,248,0.15); }
.info-backend { font: 700 0.72rem/1 monospace; padding: 3px 8px; border-radius: 5px;
text-transform: uppercase; letter-spacing: .04em;
color: #a78bfa; background: rgba(167,139,250,0.15); }
.info-backend:empty { display: none; }
.scan-pulse {
width: 40px; height: 40px; border-radius: 50%;
border: 2px solid var(--accent);
background: rgba(34,197,94,0.12);
display: flex; align-items: center; justify-content: center;
animation: pulse 1.4s ease-in-out infinite;
cursor: pointer;
}
.scan-pulse:active { transform: scale(0.88); }
/* ── detection preview modal ─────────────────────────────────────────── */
.detection-modal-backdrop {
position: fixed; inset: 0; z-index: 1000;
background: #000;
}
.detection-modal {
background: var(--surface);
width: 100%; height: 100%;
display: flex; flex-direction: column;
overflow: hidden;
touch-action: pan-y;
}
.detection-modal-header {
display: flex; align-items: center; gap: 8px;
/* Full-screen modal anchored at y=0, so on a notched iPhone in standalone mode this header lands
under the status bar exactly like .topbar did. The camera's own fullscreen mode needs no such
padding: its video is deliberately edge-to-edge and its controls are bottom-anchored, already
inset via safe-area-inset-bottom. */
padding: calc(12px + var(--safe-top)) 16px 12px;
font-weight: 600; font-size: 0.95rem;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.detection-conf-badge {
font-size: 0.75rem; font-weight: 700;
background: rgba(34,197,94,0.15); color: var(--accent);
border-radius: 6px; padding: 2px 7px;
}
/* Image area fills available vertical space */
.detection-modal-images {
flex: 1; min-height: 0;
background: #111;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.detection-img-container {
position: relative;
/* size to image natural dimensions, capped by available space */
max-width: 100%; max-height: 100%;
line-height: 0;
}
.detection-img-group { display: flex; flex-direction: column; gap: 4px; }
.detection-img-label {
font-size: 0.7rem; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.06em;
}
.detection-img {
display: block;
max-width: 100%; max-height: 100%;
object-fit: contain;
image-rendering: pixelated;
}
/* Result panel — scrollable if content overflows */
.detection-ocr-section {
flex-shrink: 0;
max-height: 45vh;
overflow-y: auto;
padding: 16px;
border-top: 1px solid var(--border);
display: flex; flex-direction: column; gap: 10px;
}
.detection-ocr-pending {
display: flex; align-items: center; gap: 8px;
font-size: 0.85rem; color: var(--text-muted);
}
.detection-ocr-result { display: flex; flex-direction: column; gap: 6px; }
.detection-ocr-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.detection-ocr-price {
font-size: 2.8rem; font-weight: 800;
color: var(--accent); letter-spacing: -0.04em; line-height: 1;
font-variant-numeric: tabular-nums;
}
.detection-ocr-unit { font-size: 1.1rem; color: var(--text-muted); }
.detection-ocr-name { font-size: 0.9rem; color: var(--text); }
.detection-ocr-conf { font-size: 0.75rem; color: var(--text-dim); }
.detection-ocr-error { font-size: 0.8rem; color: var(--badge-err-text, #f87171); }
/* Per-character word chips */
.detection-words { display: flex; flex-wrap: wrap; gap: 6px; }
.detection-word-chip {
font-family: monospace; font-size: 1rem; font-weight: 700;
padding: 3px 9px; border-radius: 5px;
border: 1.5px solid currentColor;
line-height: 1.4;
}
.detection-modal-nav {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 10px; flex-shrink: 0;
border-top: 1px solid var(--border);
}
.detection-nav-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--border); cursor: pointer; transition: background 0.15s;
}
.detection-nav-dot--active { background: var(--accent); }
@keyframes pulse {
0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
}
.camera-idle-msg {
display: flex; flex-direction: column; align-items: center; gap: 10px;
color: var(--text-dim); font-size: 0.85rem; text-align: center;
padding: 32px 20px;
}
.camera-idle-msg svg { width: 48px; height: 48px; opacity: 0.3; }
.camera-controls {
display: flex; gap: 10px; justify-content: center; align-items: center;
padding: 14px 16px;
border-top: 1px solid var(--border);
}
.fixture-buttons {
display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
padding: 8px 16px 14px;
}
/* Saved camera images strip */
.saved-images-bar {
display: flex; align-items: center; gap: 8px;
padding: 8px 16px 6px;
border-bottom: 1px solid var(--border);
}
.saved-images-label {
font-size: .75rem; font-weight: 600; text-transform: uppercase;
letter-spacing: .06em; color: var(--text-muted); white-space: nowrap;
}
.saved-images-strip {
display: flex; gap: 6px; overflow-x: auto; flex: 1;
scrollbar-width: thin; scrollbar-color: var(--surface3) transparent;
padding-bottom: 2px;
}
.saved-images-strip::-webkit-scrollbar { height: 4px; }
.saved-images-strip::-webkit-scrollbar-track { background: transparent; }
.saved-images-strip::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 2px; }
.saved-img-card {
display: flex; align-items: center; gap: 5px;
padding: 5px 10px; white-space: nowrap;
background: var(--surface2); border: 1px solid var(--border);
border-radius: 8px; cursor: pointer;
font-size: .8rem; color: var(--text-muted);
transition: background .15s, border-color .15s;
flex-shrink: 0;
}
.saved-img-card:hover:not(:disabled) { background: var(--surface3); color: var(--text); }
.saved-img-card--active { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.saved-img-card:disabled { opacity: .45; cursor: not-allowed; }
/* ── Navigation progress bar ──────────────────────────────────────────────────
Sits above everything (including the tab bar and modals) and is invisible until a navigation
actually starts. transform-only animation so it cannot cause layout work on the page it is
drawn over — the point is to cost nothing while the browser is busy loading. */
.nav-progress {
position: fixed; top: 0; left: 0; right: 0;
height: 2.5px; z-index: 3000;
transform: scaleX(0); transform-origin: 0 50%;
background: linear-gradient(90deg, var(--accent), var(--logo-span-end, var(--accent)));
opacity: 0; pointer-events: none;
transition: transform .12s linear, opacity .18s ease;
}
.nav-progress--active { opacity: 1; }
/* Snap to full and fade out — reads as "arrived" rather than "gave up". */
.nav-progress--done { transition: transform .12s ease-out, opacity .22s ease .1s; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.nav-progress { transition: opacity .15s ease; }
}
/* Modal dialog */
.modal-backdrop {
position: fixed; inset: 0; z-index: 2000;
background: rgba(0,0,0,0.65);
display: flex; align-items: center; justify-content: center;
}
.modal-dialog {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-lg); padding: 24px 24px 20px;
min-width: 320px; max-width: 460px; width: 90%;
display: flex; flex-direction: column; gap: 14px;
box-shadow: var(--elev-overlay);
}
.modal-title {
font-size: .95rem; font-weight: 700; color: var(--text);
}
.modal-actions {
display: flex; gap: 8px; justify-content: flex-end; margin-top: 2px;
}
/* Card-style modal (admin review-scan product info, tilbudsavis offer/edit). Pairs with
.modal-backdrop, but unlike .modal-dialog the callers size it and own the inner padding, so this
rule only has to supply the surface — which is exactly what was missing: the class was used in
the markup but never defined anywhere, so the modal had no background at all and its text sat
directly on the dimmed page behind it, half-legible and looking transparent. */
.modal-card {
position: relative;
background: var(--surface);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--elev-overlay);
/* Defaults for callers that don't set their own; an inline style still wins where they do. */
max-width: 560px;
width: 90%;
max-height: 92vh;
overflow: auto;
}
/* Sticky rather than absolute so it stays reachable in a long, scrolling modal. Floating it keeps
it out of the content flow, so the card's own padding still governs the text beneath it. */
.modal-close {
position: sticky; top: .55rem; float: right; z-index: 2;
margin: .55rem .55rem -2.2rem 0;
width: 30px; height: 30px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--border); border-radius: 8px;
background: var(--surface); color: var(--text-muted);
font-size: .9rem; line-height: 1; cursor: pointer;
transition: background .15s ease, color .15s ease;
}
.modal-close:hover { background: var(--surface2); color: var(--text); }
/* Resize handles on SVG bboxes */
.resize-handle { cursor: pointer; }
.cur-nwse { cursor: nw-resize; }
.cur-nesw { cursor: ne-resize; }
.cur-ns { cursor: n-resize; }
.cur-ew { cursor: e-resize; }
.cur-rotate { cursor: crosshair; }
.shutter-btn {
width: 64px; height: 64px; border-radius: 50%;
border: 3px solid var(--accent);
background: rgba(34,197,94,0.15);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
flex-shrink: 0;
}
.shutter-btn:hover { background: rgba(34,197,94,0.3); transform: scale(1.06); box-shadow: 0 0 24px var(--accent-glow); }
.shutter-btn:active { transform: scale(0.94); }
.shutter-btn svg { width: 28px; height: 28px; color: var(--accent); }
/* ── RESULT PANEL ── */
.result-panel {
background: var(--surface); border: 1px solid var(--border-soft);
border-radius: var(--radius-lg); overflow: hidden;
animation: slideUp 0.22s ease both;
}
/* Floats above the full-screen camera */
.result-panel--overlay {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 98;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
border-bottom: none;
padding-bottom: max(env(safe-area-inset-bottom), 8px);
}
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.result-header { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.result-title-row { display: flex; align-items: center; gap: 10px; }
.result-name { font-size: 1rem; font-weight: 800; }
.result-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.parsed-fields { display: flex; flex-direction: column; gap: 8px; }
.parsed-field {
display: flex; align-items: center; justify-content: space-between;
background: var(--surface2); border-radius: 10px; padding: 10px 14px;
}
.field-label { font-size: 0.72rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.field-value { font-size: 0.92rem; font-weight: 800; color: var(--text); }
.field-value.accent { color: var(--accent); }
.result-actions { display: flex; flex-direction: column; gap: 8px; }
/* ── FREE USER GATE ── */
.free-gate-banner {
display: flex; align-items: center; gap: 7px;
padding: 8px 12px; border-radius: 10px;
background: rgba(250,204,21,.10); border: 1px solid rgba(250,204,21,.30);
font-size: .8rem; color: var(--text-muted);
}
.free-gate-banner--gps { background: rgba(99,102,241,.08); border-color: rgba(99,102,241,.25); }
.free-gate-upgrade {
margin-left: auto; font-size: .78rem; font-weight: 700;
color: var(--accent); text-decoration: none; white-space: nowrap;
}
/* ── STORE TREE ── */
.store-tree { display: flex; flex-direction: column; gap: 4px; margin-bottom: 1rem; }
.st-chain { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.st-chain-btn {
width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 14px;
background: var(--surface2); border: none; color: var(--text); cursor: pointer;
text-align: left; transition: background .12s;
}
.st-chain-btn:hover { background: var(--surface3); }
.st-chain-name { font-weight: 700; font-size: .9rem; text-transform: capitalize; flex: 1; }
.st-arrow { font-size: .75rem; color: var(--text-muted); width: 12px; }
.st-county { border-top: 1px solid var(--border-soft); }
.st-county-btn {
width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 28px;
background: none; border: none; color: var(--text-muted); cursor: pointer;
text-align: left; font-size: .85rem; transition: background .12s, color .12s;
}
.st-county-btn:hover { background: var(--surface2); color: var(--text); }
.st-count { margin-left: auto; font-size: .7rem; background: var(--surface3); border-radius: 100px; padding: 1px 7px; color: var(--text-muted); }
.st-stores { list-style: none; padding: 4px 14px 8px 44px; display: flex; flex-direction: column; gap: 2px; }
.st-store { display: flex; align-items: center; gap: 6px; font-size: .82rem; padding: 3px 0; }
.st-store-name { font-weight: 600; color: var(--text); }
.st-store-meta { color: var(--text-muted); font-size: .75rem; }
.st-store-gps { font-size: .75rem; opacity: .6; }
/* ── SHOPPING LIST ── */
.list-wrap { display: flex; flex-direction: column; gap: 12px; }
.list-card {
background: var(--surface); border: 1px solid var(--border-soft);
border-radius: var(--radius); padding: 14px 16px;
display: flex; align-items: center; gap: 14px;
cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease;
text-decoration: none; color: inherit;
}
.list-card:hover { border-color: rgba(255,255,255,0.1); background: var(--surface2); }
.list-icon {
width: 44px; height: 44px; border-radius: 12px;
background: var(--accent-dim); border: 1px solid rgba(34,197,94,0.25);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; color: var(--accent);
}
.list-icon svg { width: 22px; height: 22px; }
.list-info { flex: 1; min-width: 0; }
.list-name { font-size: 0.9rem; font-weight: 800; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-meta { font-size: 0.75rem; color: var(--text-muted); }
.list-chevron { color: var(--text-dim); flex-shrink: 0; }
.list-chevron svg { width: 16px; height: 16px; }
/* ── PRICE HISTORY ENTRY ── */
.history-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 0; border-bottom: 1px solid var(--border-soft);
}
.history-item:last-child { border-bottom: none; }
.history-thumb {
width: 48px; height: 48px; border-radius: 10px;
background: var(--surface2); flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: var(--text-dim);
}
.history-thumb svg { width: 20px; height: 20px; }
.history-info { flex: 1; min-width: 0; }
.history-name { font-size: 0.85rem; font-weight: 800; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-store { font-size: 0.73rem; color: var(--text-muted); }
.history-price { font-size: var(--fs-lg); font-weight: 900; color: var(--accent); flex-shrink: 0; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }
/* ── EMPTY STATE ── */
.empty-state {
text-align: center; padding: 60px 20px; color: var(--text-dim);
position: relative;
}
.empty-state::before {
content: '';
position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -60%);
width: 180px; height: 180px;
background: radial-gradient(circle, rgba(34,197,94,0.07) 0%, transparent 70%);
pointer-events: none;
}
.empty-icon { width: 60px; height: 60px; margin: 0 auto 16px; opacity: 0.28; position: relative; }
.empty-state h3 { font-size: 0.95rem; margin-bottom: 6px; color: var(--text-muted); font-weight: 700; }
.empty-state p { font-size: 0.8rem; }
/* ── DUPLICATE WARNING ── */
.duplicate-warning {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.35);
border-radius: 8px; padding: 10px 14px; margin-bottom: 8px;
color: #fbbf24; font-size: .875rem;
}
.duplicate-warning code { color: #fcd34d; background: rgba(252,211,77,0.12); padding: 1px 5px; border-radius: 4px; }
/* ── TOAST ── */
.toast {
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
background: var(--surface2); border: 1px solid var(--border);
border-radius: 100px; padding: 10px 20px;
font-size: 0.85rem; font-weight: 700;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
animation: toastIn 0.22s ease both;
white-space: nowrap; z-index: 9999;
}
.toast.ok { border-color: rgba(34,197,94,0.4); color: #4ade80; }
.toast.err { border-color: rgba(239,68,68,0.4); color: #f87171; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
/* ── SPINNER ── */
.spinner {
width: 28px; height: 28px; border-radius: 50%;
border: 3px solid rgba(255,255,255,0.1);
border-top-color: var(--accent);
animation: spin 0.8s linear infinite;
flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ── ANIMATIONS ── */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse {
0% { box-shadow: 0 0 0 0 var(--accent-glow); }
60% { box-shadow: 0 0 0 20px rgba(34,197,94,0); }
100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
/* ── BLAZOR ERROR UI ── */
#blazor-error-ui {
background: rgba(12,12,15,0.95);
border-top: 1px solid rgba(239,68,68,0.4);
bottom: 0; left: 0; right: 0; position: fixed;
padding: 14px 20px;
display: none; z-index: 9999;
color: #f87171; font-size: 0.85rem;
backdrop-filter: blur(12px);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 14px; top: 12px; color: var(--text-muted); }
#blazor-error-ui .reload { color: #fca5a5; text-decoration: underline; margin-left: 8px; }
/* ── BLAZOR ERROR BOUNDARY ── */
.blazor-error-boundary {
background: rgba(239,68,68,0.1);
border: 1px solid rgba(239,68,68,0.3);
border-radius: var(--radius); padding: 1rem 1.25rem;
color: #f87171; font-size: 0.85rem; margin: 1rem 0;
}
.blazor-error-boundary::after { content: "An error has occurred." display: block; }
/* ── FORM VALIDATION ── */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--accent); }
.invalid { outline: 1px solid #ef4444; }
.validation-message { color: #ef4444; font-size: 0.8rem; margin-top: 4px; }
/* ── SCAN-FILE: bbox overlays ── */
.scan-bbox-overlay {
position: absolute; inset: 0; width: 100%; height: 100%;
pointer-events: none;
}
.zoom-toolbar {
display: flex; gap: 6px; margin-top: 8px;
}
.zoom-btn {
padding: 4px 12px; font-size: 0.8rem; font-weight: 700;
border: 1px solid var(--border); border-radius: 8px;
background: var(--surface2); color: var(--text); cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.zoom-btn:hover { background: rgba(255,255,255,0.12); border-color: var(--accent); }
.zoom-btn-active { background: rgba(250,204,21,0.18) !important; border-color: var(--accent) !important; color: var(--accent); }
.zoom-btn-danger { border-color: #ef4444; color: #ef4444; }
.zoom-btn-danger:hover { background: rgba(239,68,68,0.15) !important; }
.zoom-sep { width: 1px; background: var(--border); align-self: stretch; margin: 0 2px; }
.word-input-row {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 8px 0; font-size: .85rem;
}
.word-input {
flex: 1; min-width: 160px; padding: 6px 10px;
background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
color: var(--text); font-size: .9rem;
}
.word-input:focus { outline: none; border-color: var(--accent); }
.analysis-container {
position: relative; display: block;
border-radius: 8px; overflow: hidden;
background: #000; margin-top: 6px;
max-height: 65vh;
}
.zoom-inner {
/* transform applied by initZoomPan(); transform-origin set inline */
will-change: transform;
/* must be a positioned block so the absolute SVG is relative to it */
position: relative; display: block;
}
.analysis-img {
/* width:100% + height:auto keeps proportional scaling so imgScale = clientWidth/imgW is exact */
display: block; width: 100%; height: auto;
user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.analysis-svg {
position: absolute; inset: 0; width: 100%; height: 100%;
}
.word-rect { cursor: pointer; }
.word-rect:hover { stroke-width: 6 !important; }
/* Show a grab cursor hint when hovering with Ctrl held */
.analysis-container:has(.zoom-inner) { cursor: default; }
@supports selector(:has(*)) {
body.ctrl-held .analysis-container { cursor: grab; }
}
.word-callout {
display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
padding: 10px 14px; margin-top: 8px;
background: var(--surface2); border-radius: 10px;
font-size: 0.82rem;
}
/* ── SCAN-FILE: JSON + table ── */
.json-details summary::marker { color: var(--text-dim); }
.json-block {
font-family: 'Cascadia Code', 'JetBrains Mono', 'Fira Code', monospace;
font-size: 0.72rem; line-height: 1.5;
background: var(--surface2); color: var(--text-muted);
border-radius: 8px; padding: 12px 14px;
overflow-x: auto; white-space: pre; margin-top: 8px;
max-height: 340px; overflow-y: auto;
}
.data-table {
width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.data-table th {
text-align: left; padding: 7px 10px;
color: var(--text-dim); font-size: 0.72rem;
text-transform: uppercase; letter-spacing: .04em;
border-bottom: 1px solid var(--border);
}
.data-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-soft); }
.data-table tbody tr:hover { background: var(--surface2); }
.data-table tbody tr.row-selected { background: var(--accent-dim); }
/* ── ADMIN PAGE ── */
.admin-wrap { max-width: 900px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.admin-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; margin-top: 2rem; }
.admin-header h2 { font-size: 1.2rem; font-weight: 600; color: var(--text); }
/* ── Admin tabs ──────────────────────────────────────────────────────────── */
.admin-tabs {
display: flex; gap: 2px; margin-bottom: 1.75rem;
border-bottom: 1px solid var(--border);
overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--border) transparent;
}
.admin-tabs::-webkit-scrollbar { height: 3px; }
.admin-tabs::-webkit-scrollbar-track { background: transparent; }
.admin-tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.admin-tab {
position: relative; padding: .55rem 1rem; font-size: .875rem; font-weight: 500;
background: none; border: none; border-bottom: 2px solid transparent;
color: var(--text-muted); cursor: pointer; transition: color .15s;
margin-bottom: -1px; white-space: nowrap; flex-shrink: 0;
}
.admin-tab:hover { color: var(--text); }
.admin-tab--active { color: var(--accent); border-bottom-color: var(--accent); }
.admin-tab-badge {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px;
font-size: .68rem; font-weight: 700; line-height: 1;
background: var(--accent); color: #fff; border-radius: 8px;
margin-left: 5px; vertical-align: middle;
}
/* ── Product graph ───────────────────────────────────────────────────────── */
#pg-container svg { display:block; }
#cg-container svg { display:block; }
.pg-nodes circle { transition:opacity .2s,r .15s; }
.pg-nodes .pg-match { stroke:#fff!important;stroke-width:2.5px!important; }
.pg-nodes .pg-focused { stroke:#fff!important;stroke-width:3px!important;filter:drop-shadow(0 0 8px #ffffff80); }
.pg-nodes .pg-dimmed { opacity:.12; }
.pg-nodes .pg-on-path { opacity:.6; }
.pg-labels text { transition:opacity .2s; }
.pg-labels .pg-dimmed { opacity:.08; }
.pg-links line { transition:opacity .2s; }
.pg-links .pg-dimmed { opacity:.05; }
/* ── Grocery catalogue admin ─────────────────────────────────────────────── */
.cat-add-form {
display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;
background:var(--surface2);border:1px solid var(--border);border-radius:10px;
padding:.75rem;margin-bottom:.75rem;
}
.cat-select { width:auto;flex-shrink:0; }
.cat-group { margin-bottom:1rem; }
.cat-group-header {
font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
color:var(--text-muted);padding:.25rem 0 .4rem;border-bottom:1px solid var(--border);
margin-bottom:.5rem;
}
.cat-type-row {
display:flex;align-items:flex-start;gap:.6rem;padding:.3rem 0;
border-bottom:1px solid rgba(255,255,255,.04);
}
.cat-type-row:last-child { border-bottom:none; }
.cat-type-name {
min-width:110px;font-size:.8rem;font-weight:500;color:var(--text-muted);
padding-top:3px;flex-shrink:0;
}
.cat-kw-chips { display:flex;flex-wrap:wrap;gap:.3rem; }
.cat-kw-chip {
display:inline-flex;align-items:center;gap:3px;
font-size:.75rem;border-radius:5px;padding:2px 6px;
}
.cat-kw-chip--w3 { background:rgba(34,197,94,.15);color:#4ade80; }
.cat-kw-chip--w2 { background:rgba(251,191,36,.12);color:#fbbf24; }
.cat-kw-chip--w1 { background:var(--surface2);color:var(--text-muted); }
.cat-kw-remove {
background:none;border:none;cursor:pointer;padding:0;line-height:1;
font-size:.9rem;opacity:.5;color:inherit;
}
.cat-kw-remove:hover { opacity:1; }
.admin-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.admin-table thead tr { background: var(--surface2); }
.admin-table th { padding: 10px 14px; text-align: left; color: var(--text-muted); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); }
.admin-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); color: var(--text); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--surface2); }
.col-id { color: var(--text-muted); width: 48px; }
.col-date { white-space: nowrap; color: var(--text-muted); }
.col-price { font-variant-numeric: tabular-nums; color: var(--accent); font-weight: 600; }
.job-log { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; font-family: 'Cascadia Code','JetBrains Mono','Fira Code',ui-monospace,monospace; font-size: .76rem; line-height: 1.55; overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin-top: .5rem; color: var(--text); max-height: 320px; overflow-y: auto; }
/* ── YOLO LABELLING PAGE ── */
.yolo-progress-bar {
display: flex; flex-direction: column; gap: 8px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 14px 18px; margin-bottom: 8px;
}
.yolo-progress-counts { font-size: .9rem; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.yolo-progress-track {
height: 6px; border-radius: 99px;
background: var(--surface3); overflow: hidden;
}
.yolo-progress-fill {
height: 100%; border-radius: 99px;
background: var(--accent); transition: width .3s ease;
}
.yolo-progress-filename { font-size: .8rem; color: var(--text-muted); font-family: monospace; }
/* ── camera config overlay ──────────────────────────────────────────── */
.cfg-anchor {
position: relative;
display: flex; flex-direction: column; align-items: center;
}
.cfg-btn {
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px;
background: var(--surface2); color: var(--text-muted);
border: 1px solid var(--border); border-radius: var(--radius);
cursor: pointer;
}
.cfg-btn:hover { color: var(--text); }
.cfg-btn:active { background: var(--surface3); }
.cfg-panel {
position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
z-index: 200;
background: rgba(15,15,20,0.92);
border: 1px solid rgba(255,255,255,0.14); border-radius: 10px;
padding: 10px 12px; display: flex; flex-direction: column; gap: 10px;
min-width: 210px; backdrop-filter: blur(10px);
}
.cfg-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; cursor: pointer; user-select: none;
}
.cfg-label { font-size: 12px; color: #d1d5db; line-height: 1.3; }
.cfg-toggle {
appearance: none; -webkit-appearance: none;
width: 36px; height: 20px; border-radius: 10px;
background: #374151; border: none; cursor: pointer;
position: relative; flex-shrink: 0; transition: background .2s;
}
.cfg-toggle::after {
content: ''; position: absolute; top: 3px; left: 3px;
width: 14px; height: 14px; border-radius: 50%;
background: #9ca3af; transition: transform .2s, background .2s;
}
.cfg-toggle:checked { background: #2563eb; }
.cfg-toggle:checked::after { transform: translateX(16px); background: #fff; }
/* ── Tilbudsavis admin section ──────────────────────────────────────────── */
.tilbud-controls {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin-bottom: 1rem;
}
.tilbud-chain-checks { display: flex; gap: 12px; align-items: center; }
.tilbud-schedule { display: flex; flex-direction: column; gap: 8px; margin-bottom: 1rem; }
.tilbud-schedule-row {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
background: var(--surface2); border-radius: var(--radius); padding: 8px 12px;
}
.tilbud-chain-label {
width: 52px; font-weight: 600; text-transform: capitalize; font-size: .85rem;
}
.tilbud-select, .tilbud-input {
background: var(--surface3); color: var(--text);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 4px 8px; font-size: .85rem;
}
.tilbud-status { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: .8rem; color: var(--text-muted); }
.badge-err { background: rgba(239,68,68,.15); color: #f87171; border-color: rgba(239,68,68,.3); }
/* ── Tilbudsavis page ────────────────────────────────────────────────────── */
/* ── SHOPPING LIST ── */
.sl-wrap { max-width: 540px; margin: 0 auto; padding-bottom: calc(var(--tab-h) + 40px); }
@media (min-width: 768px) { .sl-wrap { padding-bottom: 40px; } }
.sl-add-bar { display: flex; gap: 8px; margin-bottom: 12px; position: relative; }
.sl-input-wrap { flex: 1; position: relative; }
.sl-input {
width: 100%; padding: 12px 14px; border-radius: var(--radius);
background: var(--surface2); border: 1px solid var(--border);
color: var(--text); font-size: .95rem;
outline: none; transition: border-color .15s;
}
.sl-input:focus { border-color: rgba(34,197,94,.45); }
.sl-add-btn { flex-shrink: 0; }
/* Size picker: badge in the suggestion dropdown + the choose-size modal */
.sl-size-badge { font-size: .64rem; font-weight: 700; color: var(--accent);
background: rgba(34,197,94,.1); padding: 1px 6px; border-radius: 100px;
white-space: nowrap; flex-shrink: 0; }
.sl-drop-choose { font-size: .74rem; font-weight: 800; color: var(--accent); white-space: nowrap; }
.sl-size-modal { max-width: 400px; }
.sl-size-hint { font-size: .8rem; color: var(--text-muted); margin: 0 0 .85rem; line-height: 1.4; }
.sl-size-list { display: flex; flex-direction: column; gap: 8px; }
.sl-size-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
padding: 11px 12px; border: 1px solid var(--border); border-radius: 10px;
background: var(--surface); color: var(--text); cursor: pointer;
transition: border-color .12s, background .12s; }
.sl-size-row:hover { border-color: var(--accent); }
.sl-size-row--best { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.05); }
.sl-size-name { font-weight: 800; font-size: .95rem; flex: 1; min-width: 0; }
.sl-size-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.sl-size-price { font-size: .85rem; font-weight: 700; white-space: nowrap; }
.sl-size-perl { font-size: .72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-size-best-badge { flex-shrink: 0; font-size: .58rem; font-weight: 800; text-transform: uppercase;
letter-spacing: .04em; color: var(--accent); background: rgba(34,197,94,.12);
padding: 2px 6px; border-radius: 100px; }
/* Generic "any size" escape-hatch row — muted vs the priced rows */
.sl-size-row--generic { border-style: dashed; }
.sl-size-row--generic .sl-size-name { font-weight: 700; color: var(--text-muted); }
.sl-dropdown {
position: absolute; top: calc(100% + 4px); left: 0; right: 0;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); z-index: 300;
overflow: hidden; box-shadow: var(--elev-3);
}
/* Column header ("Produkt … Billigst") — labels the right-hand figure so it reads as the
cheapest price across chains, not an unexplained number. */
.sl-drop-head {
display: flex; align-items: center; justify-content: space-between;
padding: 7px 14px 6px; background: var(--surface2);
border-bottom: 1px solid var(--border);
font-size: .58rem; font-weight: 800; letter-spacing: .13em;
text-transform: uppercase; color: var(--text-dim);
}
.sl-drop-item {
width: 100%; display: flex; align-items: center; justify-content: space-between;
padding: 8px 8px 8px 12px; gap: 2px; background: none; border: none;
color: var(--text); cursor: pointer; text-align: left;
border-bottom: 1px solid var(--border-soft); transition: background .1s;
}
.sl-drop-item:last-child { border-bottom: none; }
.sl-drop-item:hover { background: var(--surface2); }
/* Keyboard-highlighted row: an accent rail as well as a tint, so which row Enter will pick
survives on displays where the tint alone is nearly invisible. */
.sl-drop-item--hi { background: var(--surface2); box-shadow: inset 3px 0 0 var(--accent); }
/* The row's own tap target: everything except the trailing link/chevron buttons. */
.sl-drop-main {
flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
padding: 0; background: none; border: none; color: inherit;
cursor: pointer; text-align: left;
}
.sl-drop-left { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
/* Brand eyebrow above the name (falls back to the product type). */
.sl-drop-brand {
font-size: .68rem; font-weight: 700; color: var(--text-muted);
line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-drop-name {
font-size: .97rem; font-weight: 700; line-height: 1.22;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Wraps rather than clips: a half-rendered badge ("NET") reads as a rendering bug, and the row
growing one line in the rare case both a size badge and a source badge are present does not. */
.sl-drop-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; row-gap: 2px; }
.sl-drop-label,
.sl-drop-size { font-size: .7rem; color: var(--text-muted); white-space: nowrap; }
.sl-drop-size { font-weight: 700; color: var(--text-dim); }
.sl-src-badge {
font-size: .58rem; font-weight: 800; border-radius: 3px; text-transform: uppercase;
letter-spacing: .04em; padding: 0 4px; flex-shrink: 0; white-space: nowrap; line-height: 1.7;
}
.sl-src-badge--tv { background: rgba(255,180,0,.15); color: #f59e0b; border: 1px solid rgba(255,180,0,.3); }
.sl-src-badge--ws { background: rgba(99,102,241,.15); color: #818cf8; border: 1px solid rgba(99,102,241,.3); }
/* B5: search-row thumbnail + value (cheapest price + best per-unit + the chain it is at). */
.sl-drop-thumb {
width: 42px; height: 42px; border-radius: 8px; object-fit: contain;
flex-shrink: 0; background: #fff; padding: 2px; border: 1px solid var(--border-soft);
}
.sl-drop-ph {
width: 42px; height: 42px; border-radius: 8px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-size: 1.15rem; background: var(--surface3);
}
.sl-drop-value {
display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
flex-shrink: 0; line-height: 1.1; margin-left: 6px;
}
.sl-drop-price { display: flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; }
.sl-drop-kr { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.sl-drop-ore { font-size: .62rem; font-weight: 800; align-self: flex-start; }
.sl-drop-from {
font-size: .55rem; font-weight: 800; text-transform: uppercase;
letter-spacing: .06em; color: var(--text-dim); line-height: 1;
}
.sl-drop-perunit { font-size: .64rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Chain mark for the cheapest price — the retailer's own logo, on a white tile so wordmarks with
transparent and with printed backgrounds sit in the same shape in both themes (see Lists.ChainMark). */
.sl-drop-chain {
flex-shrink: 0; width: 46px; height: 22px; margin-left: 7px; border-radius: 4px;
object-fit: contain; background: #fff; padding: 2px; border: 1px solid rgba(0,0,0,.08);
}
/* Fallback for a chain we have no logo file for: its colour plus a short wordmark. */
.sl-drop-chain--text {
display: flex; align-items: center; justify-content: center; padding: 0; border: none;
font-size: .43rem; font-weight: 900; letter-spacing: 0; color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.28);
}
/* Rows with no price still reserve the column, so names and prices stay in one grid. */
.sl-drop-chain--empty { background: none !important; box-shadow: none; border: none; }
.sl-drop-generic-tag {
font-size: .68rem; font-weight: 700; color: var(--text-dim);
border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
flex-shrink: 0; white-space: nowrap;
}
/* Saved-preference preview in the add dropdown ("💰 Billigst" / "🏷 Tine"). Sits in the meta
line, so a configured generic shows both its intent AND its price. */
.sl-drop-pref {
font-size: .62rem; font-weight: 800; color: var(--accent); white-space: nowrap; flex-shrink: 0;
background: rgba(34,197,94,.12); border-radius: 4px; padding: 1px 5px;
}
/* Trailing "open product page" arrow. */
.sl-drop-link {
flex-shrink: 0; display: inline-flex; align-items: center; line-height: 1;
padding: 4px 3px; background: none; border: none; cursor: pointer; color: var(--text-dim);
}
.sl-drop-link:hover { color: var(--accent); }
@media (max-width: 480px) {
/* Narrow screens: the name keeps its width, the decoration gives way. */
.sl-drop-item { padding-left: 10px; }
.sl-drop-main { gap: 8px; }
.sl-drop-thumb, .sl-drop-ph { width: 36px; height: 36px; border-radius: 7px; }
.sl-drop-name { font-size: .92rem; }
.sl-drop-kr { font-size: .98rem; }
.sl-drop-chain { width: 42px; height: 20px; margin-left: 5px; }
.sl-drop-chain--text { font-size: .39rem; }
}
/* Price summary row */
.sl-price-summary {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 6px;
margin-bottom: 8px; font-size: .8rem;
}
.sl-price-summary-best { font-size: .82rem; color: var(--text); }
.sl-price-summary-best strong { color: var(--accent); }
.sl-price-summary-meta { display: flex; align-items: center; color: var(--text-muted); font-size: .75rem; }
/* Inline dot (used in summary row) */
.sl-dot-inline {
display: inline-block; width: 6px; height: 6px;
border-radius: 50%; margin-right: 4px; flex-shrink: 0;
vertical-align: middle;
}
.sl-dot-inline--has { background: var(--accent); }
.sl-dot-inline--none { background: var(--muted-dot); }
/* Discrete price-availability dot on each list item */
.sl-item-name-row { display: flex; align-items: flex-start; gap: 5px; }
.sl-price-dot {
width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
}
.sl-price-dot--has { background: var(--accent); opacity: .7; }
.sl-price-dot--none { background: var(--muted-dot); }
/* "Sammenlign priser" card: the whole chain comparison sits inside one card that is COLLAPSED by
default — the header alone answers "hvor er det billigst" (cheapest chain + max diff); expanding
reveals the chain cards, the compared items and the excluded ones with reasons. */
.sl-cmp-card {
background: var(--surface); border: 1px solid var(--border-soft);
border-radius: var(--radius); margin-bottom: 10px;
/* No overflow:hidden — the chain cards' "Billigst" badge pops 7px above its card and must not
be clipped by this container. */
}
.sl-cmp-card--open { box-shadow: 0 1px 6px rgba(0,0,0,.06); }
/* Header row: [head button (flex) | chevron strip] — separate real buttons, so extra controls can
live on the card without nesting a button inside the toggle button. */
.sl-cmp-headrow { display: flex; align-items: stretch; }
.sl-cmp-head {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: stretch; gap: 10px;
background: none; border: none; cursor: pointer; color: inherit;
padding: 10px 12px; text-align: left;
}
.sl-cmp-head > .sl-cmp-ic,
.sl-cmp-head > .sl-cmp-txt { align-self: center; }
.sl-cmp-txt { margin-right: auto; }
.sl-cmp-ic { font-size: 1.05rem; flex-shrink: 0; }
.sl-cmp-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sl-cmp-title { font-size: .86rem; font-weight: 800; }
.sl-cmp-sub { font-size: .76rem; color: var(--text-muted); }
.sl-cmp-sub strong { color: var(--accent); }
/* "Sammenligner x av y varer" — the coverage the headline number rests on. */
.sl-cmp-coverage { font-size: .7rem; color: var(--text-dim); }
/* The card's expander borrows the list rows' full-height chevron strip (.sl-expand-btn), so it
reads as the same "opens here" control — just anchored to the card's right edge. */
.sl-cmp-expand {
margin: 0; align-self: stretch;
border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius);
}
.sl-cmp-card--open .sl-cmp-expand { border-bottom-right-radius: 0; }
.sl-cmp-card--open > .sl-cmp-headrow { border-bottom: 1px dashed var(--border-soft); }
/* The "why can't we compare" state: a short lesson + the per-item reasons. */
.sl-cmp-why { padding: 10px 12px 12px; }
.sl-cmp-why-lead { margin: 0 0 8px; font-size: .78rem; color: var(--text-muted); line-height: 1.5; }
.sl-cmp-why .sl-cmp-excluded-row { padding-left: 0; }
.sl-cmp-card .sl-chain-bar,
.sl-cmp-card .sl-best-total,
.sl-cmp-card .sl-chain-compare-btn,
.sl-cmp-card .sl-split,
.sl-cmp-card .sl-comparison-disclaimer { margin-left: 12px; margin-right: 12px; }
/* Headroom for the "Billigst" badge (absolutely positioned 7px above its chain card) plus a
little breathing room under the card header, so the badge never sits on the dashed border. */
.sl-cmp-card .sl-chain-bar { padding-top: 12px; }
.sl-cmp-card .sl-best-total { margin-top: 6px; }
/* Which items the totals are built on — compact chips, wrap freely. */
.sl-cmp-items { padding: 6px 12px 2px; }
.sl-cmp-items-label {
font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
color: var(--text-dim); margin-bottom: 4px;
}
.sl-cmp-chip-row { display: flex; flex-wrap: wrap; gap: 4px; }
.sl-cmp-chip {
font-size: .74rem; padding: 2px 8px; border-radius: 10px;
background: var(--surface-2, rgba(0,0,0,.05)); border: 1px solid var(--border-soft);
}
/* The in-card price table (one read-only row per compared product) scrolls inside the card on
narrow screens; the ≈ mark flags category-estimate rows. */
.sl-cmp-table-wrap { margin: 4px 12px 8px; overflow-x: auto; }
.sl-cmp-est {
margin-left: 5px; font-size: .72rem; color: var(--text-dim); cursor: help;
}
/* Coverage line under each column total: how many of the compared rows that chain prices.
Partial coverage is the honest reason a column total can undercut the winner. */
.sl-pt-cov { display: block; font-size: .6rem; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.sl-pt-cov--partial { color: #b45309; }
/* Comparability badge in the guide (as EARLY as possible): multi-chain = the money-saving pick,
single-chain = "you get the price, at one store". */
.sl-guide-cmp {
flex-shrink: 0; font-size: .64rem; border-radius: 8px; padding: 1px 7px; white-space: nowrap;
color: var(--text-dim); background: var(--surface-2, rgba(0,0,0,.05));
}
.sl-guide-cmp--multi { color: var(--accent); background: var(--accent-dim, rgba(0,128,0,.12)); font-weight: 600; }
/* Excluded items: a count that expands to name + reason rows. */
.sl-cmp-excluded { padding: 4px 12px 10px; }
.sl-cmp-excluded-head {
display: inline-flex; align-items: center; gap: 6px;
background: none; border: none; cursor: pointer; color: var(--text-muted);
font-size: .76rem; font-weight: 600; padding: 4px 0;
}
.sl-cmp-excluded-list { list-style: none; margin: 4px 0 0; padding: 0; }
.sl-cmp-excluded-row {
font-size: .78rem; padding: 2px 0 2px 18px;
}
.sl-cmp-excluded-name { min-width: 0; }
.sl-cmp-excluded-why {
margin-left: auto; flex-shrink: 0; font-size: .7rem; color: var(--text-dim);
background: var(--surface-2, rgba(0,0,0,.05)); border-radius: 8px; padding: 1px 7px;
}
/* Per-item guide on the excluded list (post-experiment revision): name + reason + "Spesifiser"
on one line; the stepwise brand→size panel expands underneath. */
.sl-guide-head { display: flex; align-items: baseline; gap: 8px; }
.sl-guide-toggle {
display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
border: 1px solid var(--accent); background: none; color: var(--accent);
border-radius: 999px; font-size: .68rem; font-weight: 600; cursor: pointer;
padding: 3px 10px; margin: 0;
/* Visually slim pill; the tap area is extended invisibly by the ::after overlay
(clicks on a pseudo-element hit its button). */
position: relative;
}
.sl-guide-toggle::after { content: ""; position: absolute; inset: -9px -4px; }
.sl-guide-toggle:hover { background: var(--accent); color: #fff; }
.sl-guide { margin: 6px 8px 8px 0; border-left: 2px solid var(--accent-dim, rgba(0,128,0,.25)); padding-left: 10px; }
.sl-guide-step { font-size: .72rem; color: var(--text-dim); margin: 4px 0 6px; display: flex; align-items: center; gap: 6px; }
.sl-guide-back {
border: none; background: var(--surface3); color: var(--text); border-radius: 6px;
cursor: pointer; font-size: .8rem; line-height: 1; padding: 8px 12px; margin: -6px 0;
}
.sl-guide-opt {
display: flex; align-items: baseline; gap: 8px; width: 100%;
border: none; background: none; text-align: left; cursor: pointer;
font-size: .78rem; color: var(--text);
padding: 11px 6px; margin: 0; min-height: 40px; border-radius: 8px;
}
.sl-guide-opt:hover { background: var(--surface3); }
.sl-guide-opt-name { min-width: 0; }
.sl-guide-opt-price { margin-left: auto; flex-shrink: 0; font-weight: 600; color: var(--accent); white-space: nowrap; }
.sl-guide-opt-unit { font-weight: 400; color: var(--text-muted); font-size: .7rem; }
.sl-guide-opt-chev { flex-shrink: 0; color: var(--text-dim); }
/* Guide option thumbnails: product image, or a food glyph — same visual slot either way. */
.sl-guide-thumb {
flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px; object-fit: contain;
background: var(--surface2);
}
.sl-guide-thumb--ph { display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }
/* ↩ on a compared row that came from a typed generic — one tap back to "ost". */
.sl-pt-revert {
border: none; background: none; color: var(--text-dim); cursor: pointer;
border-radius: 6px; padding: 12px 10px; margin: -12px -4px; vertical-align: middle;
}
.sl-pt-revert:hover { background: var(--surface3); color: var(--text); }
/* Chain cost comparison bar — horizontally scrollable so comparable chains, a few greyed-out
"not enough prices" chains, and a "…" more-hint all fit on one line (scrolls on narrow screens). */
.sl-chain-bar {
display: flex; gap: 6px; margin-bottom: 8px;
overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sl-chain-bar::-webkit-scrollbar { display: none; }
.sl-chain-card {
flex: 1 1 0; min-width: 66px;
background: var(--surface); border: 1px solid var(--border-soft);
border-radius: var(--radius); padding: 10px 10px 8px;
display: flex; flex-direction: column; gap: 2px; text-align: center;
position: relative;
transition: border-color .15s, box-shadow .15s;
}
/* Greyed-out chain that isn't in the comparison (not enough prices). Informational, not tappable. */
.sl-chain-card--muted {
flex: 0 1 auto; min-width: 60px;
background: var(--surface2, rgba(127,127,127,.05));
border-style: dashed; opacity: .7; cursor: default;
}
.sl-chain-card--muted .sl-chain-name { color: var(--text-dim); }
.sl-chain-muted-label {
font-size: .58rem; font-weight: 600; letter-spacing: .01em;
color: var(--text-dim); line-height: 1.2; text-transform: none;
}
/* "…" more-chains hint */
.sl-chain-card--more {
flex: 0 0 auto; min-width: 44px;
align-items: center; justify-content: center; gap: 4px;
background: none; border-style: dashed; opacity: .65; cursor: default;
}
.sl-chain-more-dots { display: inline-flex; gap: 3px; align-items: center; height: 1.05rem; }
.sl-chain-more-dots span {
width: 4px; height: 4px; border-radius: 50%; background: var(--text-dim);
}
.sl-chain-card--best {
border-color: rgba(34,197,94,.35);
background: rgba(34,197,94,.05);
}
.sl-chain-name {
font-size: .72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; color: var(--text-muted);
}
.sl-chain-total {
font-size: 1.05rem; font-weight: 800;
color: var(--text); line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.sl-chain-card--best .sl-chain-total { color: var(--accent); }
.sl-chain-extra { color: var(--text-muted); font-size:.9rem; }
.sl-chain-coverage { font-size: .65rem; color: var(--text-dim); }
/* Selected / filtered chain card */
.sl-chain-card--sel {
border-color: var(--accent) !important;
box-shadow: 0 0 0 2px rgba(9,105,218,.25);
}
.sl-chain-sel-badge {
position: absolute; top: -7px; right: 6px;
font-size: .62rem; font-weight: 900; color: var(--accent);
}
/* Compare button — full-width row under the chain cards. Deliberately not inside .sl-chain-bar:
that bar scrolls horizontally, which used to push the button off-screen on phones. */
.sl-chain-compare-btn {
display: flex; align-items: center; gap: 8px;
width: 100%; margin-bottom: 16px;
background: var(--surface); border: 1px solid var(--accent);
border-radius: var(--radius); padding: 10px 12px;
font-size: .85rem; font-weight: 700; letter-spacing: .01em;
cursor: pointer; color: var(--accent); text-align: left;
transition: background .12s, box-shadow .12s;
}
.sl-chain-compare-btn:hover,
.sl-chain-compare-btn:focus-visible {
background: rgba(9,105,218,.07);
box-shadow: 0 0 0 3px rgba(9,105,218,.15);
}
.sl-chain-compare-ic { flex-shrink: 0; }
.sl-chain-compare-txt { flex: 1 1 auto; }
.sl-chain-compare-chev { font-size: 1.1rem; line-height: 1; opacity: .7; flex-shrink: 0; }
.sl-chain-badge {
position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
background: var(--accent); color: #000; font-size: .6rem; font-weight: 900;
padding: 1px 6px; border-radius: 100px; white-space: nowrap; letter-spacing: .04em;
}
.sl-toprow {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}
.sl-filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sl-list-header {
display: flex; align-items: center; justify-content: space-between;
padding: 0 2px; margin-bottom: 8px;
}
.sl-count { font-size: .8rem; color: var(--text-muted); }
.sl-clear-btn {
font-size: .78rem; color: var(--text-muted); background: none; border: none;
cursor: pointer; padding: 2px 6px; border-radius: 6px; transition: color .15s;
}
.sl-clear-btn:hover { color: var(--text); }
.sl-group-label {
font-size: .7rem; font-weight: 800; text-transform: uppercase;
letter-spacing: .08em; color: var(--text-dim);
padding: 14px 2px 6px; margin-top: 4px;
}
.sl-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.sl-item-wrap { display: flex; flex-direction: column; }
.sl-item-wrap--draggable { cursor: grab; }
.sl-item-wrap--draggable:active { cursor: grabbing; }
.sl-item-wrap--dragging > .sl-item { opacity: .35; }
.sl-item-wrap--dragover { border-top: 2px solid var(--accent); margin-top: -2px; }
/* Discrete grip on the left signalling each item is drag-and-drop reorderable */
.sl-item-wrap--draggable > .sl-item::before {
content: ""; align-self: stretch; flex: 0 0 3px; margin-right: -4px;
background-image: radial-gradient(circle, var(--text-dim) 1px, transparent 1.2px);
background-size: 3px 5px; background-position: center;
opacity: .22; transition: opacity .15s;
}
.sl-item-wrap--draggable:hover > .sl-item::before { opacity: .45; }
.sl-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 11px; border-radius: var(--radius);
background: var(--surface); border: 1px solid var(--border-soft);
/* Design 3: an accent edge anchors the price column that leads the row. */
border-left: 3px solid var(--accent);
transition: opacity .2s, border-color .15s, box-shadow .15s;
}
.sl-item--done { border-left-color: var(--border); }
.sl-item:hover { border-color: var(--border); }
.sl-item-wrap:has(.sl-alt-panel) .sl-item {
border-bottom-left-radius: 0; border-bottom-right-radius: 0;
border-bottom-color: transparent;
}
.sl-item--done { opacity: .45; }
/* Completed-items section: collapsed summary bar at the bottom, expandable */
.sl-done-section { margin-top: 18px; }
.sl-done-header {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; border-radius: var(--radius);
border: 1px solid var(--border-soft); background: var(--surface);
}
.sl-done-toggle {
display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
background: none; border: none; cursor: pointer; padding: 2px 0;
color: var(--text); font: inherit;
}
.sl-done-count { font-size: .85rem; font-weight: 700; color: var(--text-muted); }
.sl-done-chevron { margin-left: auto; flex-shrink: 0; color: var(--text-dim); }
.sl-done-clear {
flex-shrink: 0; font-size: .76rem; color: var(--text-muted);
background: none; border: none; cursor: pointer;
padding: 4px 8px; border-radius: 6px; transition: color .15s, background .15s;
}
.sl-done-clear:hover { color: var(--text); background: var(--border-soft); }
.sl-done-list { margin-top: 4px; }
.sl-done-list .sl-item-name { text-decoration: line-through; }
.sl-done-qty { font-size: .75rem; color: var(--text-dim); margin-left: 6px; }
.sl-done-item-del {
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 6px;
background: none; border: none; cursor: pointer; color: var(--text-dim);
transition: color .15s, background .15s;
}
.sl-done-item-del:hover { color: var(--text); background: var(--border-soft); }
/* "Se priser" tag button */
.sl-prices-btn {
display: flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 100px; font-size: .72rem; font-weight: 700;
background: var(--accent-dim); color: var(--accent);
border: 1px solid rgba(34,197,94,.25); cursor: pointer; flex-shrink: 0;
transition: background .15s;
}
.sl-prices-btn:hover, .sl-prices-btn--open { background: rgba(34,197,94,.22); }
/* Per-row gear → opens the focused "Tilpass" modal for that vare. Green once a preference is set. */
.sl-gear-btn {
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; flex-shrink: 0;
border-radius: 8px; border: 1px solid var(--border-soft);
background: var(--surface2); color: var(--text-muted); cursor: pointer;
transition: background .12s, color .12s, border-color .12s;
}
.sl-gear-btn:hover { color: var(--text); background: var(--surface3); }
/* Small link to the product detail page, sits after the quantity stepper. */
.sl-item-link {
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; border-radius: 8px;
border: 1px solid var(--border-soft); background: var(--surface2);
color: var(--text-muted); cursor: pointer; text-decoration: none;
transition: background .12s, color .12s, border-color .12s;
}
.sl-item-link:hover { color: var(--accent); border-color: rgba(34,197,94,.4); background: var(--accent-dim); }
.sl-gear-btn--set {
color: var(--accent); border-color: rgba(34,197,94,.4); background: var(--accent-dim);
}
/* ── Optimaliser modal ── */
.sl-optimize-modal { max-width: min(94vw, 520px); display: flex; flex-direction: column; }
.sl-opt-hint { font-size: .74rem; line-height: 1.4; color: var(--text-dim); margin: 0 0 12px; }
/* Live total + savings bar */
.sl-opt-sumbar {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding: 9px 12px; margin: 0 0 14px; border-radius: 10px;
background: var(--surface2); border: 1px solid var(--border-soft);
}
.sl-opt-sumlabel { font-size: .74rem; font-weight: 600; color: var(--text-dim); flex: 1; }
.sl-opt-sumval { font-size: .95rem; font-weight: 800; color: var(--text); }
.sl-opt-sumextra {
font-size: .68rem; font-weight: 800; color: #b45309;
background: rgba(245,158,11,.16); padding: 2px 7px; border-radius: 100px;
}
.sl-opt-sumbest {
font-size: .68rem; font-weight: 800; color: var(--accent);
background: rgba(34,197,94,.15); padding: 2px 7px; border-radius: 100px;
}
.sl-opt-list { display: flex; flex-direction: column; gap: 14px; }
.sl-opt-row { display: flex; flex-direction: column; gap: 7px; }
.sl-opt-type { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 800; color: var(--text); }
.sl-opt-changed {
font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
color: #b45309; background: rgba(245,158,11,.16); padding: 1px 6px; border-radius: 5px;
}
.sl-opt-tick { color: var(--accent); font-weight: 800; font-size: .78rem; }
.sl-opt-chip--on .sl-opt-tick { color: var(--accent); }
.sl-opt-chip-delta {
font-size: .66rem; font-weight: 700; color: #b45309;
background: rgba(245,158,11,.14); padding: 1px 5px; border-radius: 5px;
}
.sl-opt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-opt-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 11px; border-radius: 100px; cursor: pointer;
background: var(--surface2); color: var(--text);
border: 1px solid var(--border-soft); font-size: .76rem; font-weight: 650;
}
.sl-opt-chip:hover { border-color: rgba(34,197,94,.4); }
.sl-opt-chip--on {
background: rgba(34,197,94,.16); color: var(--accent);
border-color: rgba(34,197,94,.5); font-weight: 800;
}
/* Recommended default on an untouched row — a hint, NOT a selection: no fill, no tick. */
.sl-opt-chip--default {
background: none; border: 1px dashed rgba(34,197,94,.55); color: var(--text);
}
.sl-opt-chip-name { font-weight: 650; }
.sl-opt-chip-price { font-size: .7rem; font-weight: 600; color: var(--text-dim); }
.sl-opt-chip--on .sl-opt-chip-price { color: var(--accent); }
/* "Billigst" marker on the cheapest chip — green tag before the product name. */
.sl-opt-billigst {
font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
color: var(--accent); background: rgba(34,197,94,.15);
padding: 1px 5px; border-radius: 5px;
}
.sl-opt-chip--on .sl-opt-billigst { background: rgba(34,197,94,.28); }
/* Per-row search: dashed "Søk" chip + inline search box */
.sl-opt-search {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 11px; border-radius: 100px; cursor: pointer;
background: none; color: var(--text-dim);
border: 1px dashed var(--border); font-size: .76rem; font-weight: 700;
}
.sl-opt-search:hover, .sl-opt-search--on { color: var(--text); border-color: var(--text-dim); }
.sl-opt-searchbox { display: flex; flex-direction: column; gap: 8px; }
.sl-opt-searchbar { display: flex; align-items: center; gap: 8px; }
.sl-opt-searchinput {
flex: 1; padding: 8px 12px; border-radius: 10px;
border: 1px solid var(--border); background: var(--surface2); color: var(--text);
font-size: .8rem;
}
.sl-opt-searchinput:focus { outline: none; border-color: rgba(34,197,94,.5); }
.sl-opt-searchclose {
flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
border: 1px solid var(--border); background: var(--surface2); color: var(--text-dim);
display: flex; align-items: center; justify-content: center;
}
.sl-opt-searchclose:hover { color: var(--text); }
.sl-opt-searchresults { display: flex; flex-wrap: wrap; gap: 6px; }
.sl-opt-noresults { font-size: .74rem; color: var(--text-dim); padding: 2px 0; }
.sl-opt-footer {
display: flex; gap: 10px; padding: 12px 16px;
border-top: 1px solid var(--border-soft);
}
.sl-opt-keepall {
flex: 1; padding: 10px; border-radius: 10px; cursor: pointer;
background: none; border: 1px solid var(--border-soft);
color: var(--text-dim); font-size: .78rem; font-weight: 700;
}
.sl-opt-done {
flex: 1; padding: 10px; border-radius: 10px; cursor: pointer; border: none;
background: var(--accent); color: #04210f; font-size: .8rem; font-weight: 800;
}
/* Chevron flips when the alternatives panel is open. */
.sl-prices-chev { transition: transform .15s; }
.sl-prices-btn--open .sl-prices-chev { transform: rotate(180deg); }
/* Pinned to a specific product → neutral (the green "Billigst" pill reads as the cheapest-mode). */
.sl-prices-btn--pinned {
background: var(--surface2); color: var(--text-dim);
border-color: var(--border-soft);
}
.sl-prices-btn--pinned:hover, .sl-prices-btn--pinned.sl-prices-btn--open { background: var(--surface3, rgba(148,163,184,.18)); }
/* Inline alternatives panel */
.sl-alt-panel {
background: var(--surface2); border: 1px solid var(--border-soft);
border-top: none; border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius);
overflow: hidden;
}
.sl-alt-header {
font-size: .7rem; font-weight: 800; text-transform: uppercase;
letter-spacing: .06em; color: var(--text-dim);
padding: 8px 14px 4px;
}
.sl-alt-row {
width: 100%; display: flex; align-items: center; justify-content: space-between;
padding: 9px 14px; background: none; border: none; border-top: 1px solid var(--border-soft);
color: var(--text); cursor: pointer; text-align: left; gap: 10px;
transition: background .12s;
}
.sl-alt-row:hover { background: var(--surface3); }
.sl-alt-left { display: flex; flex-direction: column; gap: 1px; }
.sl-alt-name { font-size: .88rem; font-weight: 600; }
.sl-alt-store { font-size: .73rem; color: var(--text-muted); }
.sl-alt-price { font-size: .95rem; font-weight: 800; color: var(--accent); flex-shrink: 0; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }
.sl-alt-keep {
width: 100%; padding: 9px 14px; background: none; border: none;
border-top: 1px solid var(--border-soft); color: var(--text-dim);
font-size: .78rem; cursor: pointer; text-align: left; transition: color .12s;
}
.sl-alt-keep:hover { color: var(--text-muted); }
.sl-alt-empty {
padding: 10px 14px; font-size: .82rem; color: var(--text-muted);
border-top: 1px solid var(--border-soft); font-style: italic;
}
.sl-alt-generic {
width: 100%; display: flex; align-items: center; gap: 7px;
padding: 9px 14px; background: none; border: none;
border-top: 1px solid var(--border-soft); color: var(--text-muted);
font-size: .83rem; font-weight: 600; cursor: pointer; text-align: left;
transition: color .12s, background .12s;
}
.sl-alt-generic:hover { color: var(--text); background: var(--surface3); }
.sl-alt-generic svg { flex-shrink: 0; opacity: .7; }
.sl-alt-generic-sub {
margin-left: auto; font-size: .7rem; font-weight: 400;
color: var(--text-dim); white-space: nowrap;
}
/* Offer table inside the alternatives panel */
.sl-alt-table { border-top: 1px solid var(--border-soft); }
.sl-alt-table-row {
display: flex; align-items: center;
border-bottom: 1px solid var(--border-soft);
}
.sl-alt-table-pick {
flex: 1; display: flex; align-items: center; gap: 8px;
padding: 9px 12px; background: none; border: none; cursor: pointer;
color: var(--text); text-align: left; min-width: 0;
transition: background .12s;
}
.sl-alt-table-pick:hover { background: var(--surface3); }
.sl-alt-table-name {
flex: 1; font-size: .88rem; font-weight: 600;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sl-alt-table-price {
font-size: .9rem; font-weight: 800; color: var(--accent); flex-shrink: 0;
}
.sl-alt-table-chain {
font-size: .68rem; font-weight: 700; border-radius: 4px;
padding: 1px 5px; flex-shrink: 0; white-space: nowrap;
background: rgba(255,255,255,.08); color: var(--text-muted);
}
/* Per-chain chain colors */
.sl-chain--kiwi { background: rgba(255,90,0,.15); color: #fb923c; }
.sl-chain--meny { background: rgba(16,185,129,.12); color: #34d399; }
.sl-chain--rema { background: rgba(239,68,68,.12); color: #f87171; }
.sl-chain--coop { background: rgba(99,102,241,.12); color: #818cf8; }
/* Image icon button on each table row */
.sl-alt-img-btn {
flex-shrink: 0; padding: 9px 10px;
background: none; border: none; border-left: 1px solid var(--border-soft);
color: #f59e0b; cursor: pointer; display: flex; align-items: center;
transition: background .12s, color .12s; align-self: stretch;
}
.sl-alt-img-btn:hover { background: rgba(245,158,11,.12); color: #fbbf24; }
.sl-alt-src-link { color: var(--accent); text-decoration: none; }
.sl-alt-src-link:hover { background: rgba(59,130,246,.12); color: #60a5fa; }
/* ── Unified chooser panel (Velg) ─────────────────────────────────────────── */
/* Static pack-size tag on a pinned row (non-interactive; choosing lives in the panel). */
.sl-size-tag {
display: inline-flex; align-items: center; flex-shrink: 0;
font-size: .68rem; font-weight: 700; color: var(--text-muted);
background: var(--surface2); border: 1px solid var(--border-soft);
border-radius: 100px; padding: 1px 7px; line-height: 1.5; white-space: nowrap;
}
/* B6: a remembered choice, tappable to change. The "endre" hint appears after a subtle divider. */
.sl-size-tag--edit { cursor: pointer; gap: 5px; }
.sl-size-tag--edit .sl-tag-edit {
font-weight: 600; color: var(--accent); opacity: .85;
padding-left: 5px; border-left: 1px solid var(--border-soft);
}
.sl-size-tag--edit:hover .sl-tag-edit { opacity: 1; text-decoration: underline; }
/* P2: the shopper typed a size we don't stock. Amber, not red — the row is still usable, we're
just being honest that the size shown isn't the one they asked for. */
.sl-size-tag--unmet {
color: var(--warn-text, #92400e);
background: var(--warn-bg, #fef3c7);
border-color: var(--warn-border, #fcd34d);
}
.sl-size-tag--unmet .sl-tag-edit { color: inherit; border-left-color: currentColor; }
@media (prefers-color-scheme: dark) {
.sl-size-tag--unmet {
color: var(--warn-text, #fcd34d);
background: var(--warn-bg, rgba(252, 211, 77, .12));
border-color: var(--warn-border, rgba(252, 211, 77, .35));
}
}
/* Swap icon signalling the pack size can be switched for the same product. */
.sl-size-swap { flex-shrink: 0; opacity: .7; margin-right: -1px; }
.sl-size-tag--edit:hover .sl-size-swap { opacity: 1; }
/* "fra X kr" cheapest hint on a still-generic row. */
.sl-item-from span:first-child { color: var(--accent); font-weight: 700; }
/* Pinned-product photo thumbnail in a list row (replaces the camera icon when a product image exists). */
.sl-item-photo {
flex-shrink: 0; width: 40px; height: 40px; padding: 0; cursor: zoom-in;
border: 1px solid var(--border-soft); border-radius: 8px; overflow: hidden; background: var(--surface2);
display: flex; align-items: center; justify-content: center;
}
.sl-item-photo img { width: 40px; height: 40px; object-fit: cover; display: block; }
.sl-item-photo:hover { filter: brightness(1.05); }
/* Category-emoji placeholder tile for rows with no product image — keeps the leading column aligned. */
.sl-item-ph {
flex-shrink: 0; width: 40px; height: 40px;
border: 1px solid var(--border-soft); border-radius: 8px;
background: var(--surface2); display: flex; align-items: center; justify-content: center;
font-size: 1.2rem; line-height: 1; opacity: .8; user-select: none;
}
.sl-item--done .sl-item-ph { opacity: .4; }
/* Lens toggle: Beste kjøp | Etter merke */
.sl-lens {
display: flex; gap: 4px; padding: 8px 10px 6px;
border-bottom: 1px solid var(--border-soft);
}
.sl-lens-tab {
flex: 1; padding: 7px 10px; border-radius: 8px; cursor: pointer;
background: none; border: 1px solid transparent; color: var(--text-dim);
font-size: .78rem; font-weight: 700; transition: background .12s, color .12s;
}
.sl-lens-tab:hover { color: var(--text); }
.sl-lens-tab--on {
background: var(--accent-dim); color: var(--accent);
border-color: rgba(34,197,94,.3);
}
.sl-lens-search { padding: 8px 10px 2px; }
.sl-lens-search input {
width: 100%; box-sizing: border-box; padding: 6px 10px; border-radius: 8px;
border: 1px solid var(--border); background: var(--surface); color: var(--text);
font-size: .8rem;
}
.sl-lens-search input:focus { outline: none; border-color: rgba(34,197,94,.5); }
.sl-lens-empty { padding: 12px 14px; font-size: .8rem; color: var(--text-muted); font-style: italic; }
.sl-choose-list { display: flex; flex-direction: column; }
/* Value-lens row: name + size + best-value badge / total + chain — per-unit price on the right. */
.sl-vrow-wrap {
display: flex; align-items: stretch;
border-top: 1px solid var(--border-soft);
}
.sl-vrow-wrap--on { background: rgba(34,197,94,.08); box-shadow: inset 3px 0 0 var(--accent); }
.sl-vrow {
flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
padding: 9px 12px; background: none; border: none; cursor: pointer;
color: var(--text); text-align: left; transition: background .12s;
}
.sl-vrow:hover { background: var(--surface3); }
.sl-vrow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sl-vrow-name {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: .88rem; font-weight: 650; line-height: 1.2;
}
.sl-vrow-size { font-size: .74rem; font-weight: 600; color: var(--text-muted); }
.sl-vrow-badge {
font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
color: var(--accent); background: rgba(34,197,94,.14);
padding: 1px 6px; border-radius: 100px; white-space: nowrap;
}
.sl-vrow-sub { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--text-muted); }
.sl-vrow-store, .sl-brow-store {
font-size: .66rem; font-weight: 700; border-radius: 4px; padding: 0 5px;
white-space: nowrap; background: rgba(255,255,255,.08); color: var(--text-muted);
}
.sl-vrow-perunit {
flex-shrink: 0; font-size: .92rem; font-weight: 800; color: var(--accent);
font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); white-space: nowrap;
}
.sl-vrow-proof {
flex-shrink: 0; padding: 0 11px; background: none; border: none;
border-left: 1px solid var(--border-soft); color: #f59e0b; cursor: pointer;
display: flex; align-items: center; transition: background .12s, color .12s;
}
.sl-vrow-proof:hover { background: rgba(245,158,11,.12); color: #fbbf24; }
/* Brand-lens row: brand name + size/store meta on the left, "fra X kr" on the right. */
.sl-brow {
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 10px 12px; background: none; border: none; border-top: 1px solid var(--border-soft);
color: var(--text); cursor: pointer; text-align: left; transition: background .12s;
}
.sl-brow:hover { background: var(--surface3); }
.sl-brow--on { background: rgba(34,197,94,.08); box-shadow: inset 3px 0 0 var(--accent); }
.sl-brow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sl-brow-name { font-size: .9rem; font-weight: 700; }
.sl-brow-sub { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--text-muted); }
.sl-brow-price {
flex-shrink: 0; font-size: .9rem; font-weight: 800; color: var(--accent);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Static (curated) brand row — no live price yet; picking saves the wish, resolves when a product lands. */
.sl-brow--static .sl-brow-name { color: var(--text-muted); }
.sl-brow-soon {
flex-shrink: 0; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
color: var(--text-dim); background: var(--surface2); border: 1px solid var(--border-soft);
padding: 2px 7px; border-radius: 100px; white-space: nowrap;
}
/* ── Pick tree: generisk → merke → størrelse, priced at every level ─────────────
One block styles both mounts — the add-bar dropdown and the inline card panel — so the drill-down
looks and behaves the same whether the shopper is adding or changing. Every row is a flex line with
the name left and the two numbers right: the comparable unit price (the accent-coloured headline,
because that is the honest ranking) then the sticker price it costs. */
/* Treeview: each expansion level indents its ROW CONTENT one step right (card →
merker → størrelser) while rows stay full-width, so hover/selection bands reach
the edges and the hierarchy reads from the stepped text alone — no guide lines. */
.sl-tree {
display: flex; flex-direction: column;
border-top: 1px solid var(--border-soft);
background: var(--surface2);
}
.sl-tree-empty { padding: 12px 14px 12px 20px; font-size: .78rem; color: var(--text-muted); }
/* Column header, matching the search dropdown's. The right padding is the chevron column's width,
so "Billigst" lands over the chain logos rather than over the chevrons. */
.sl-tree-head {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 34px 5px 20px; background: var(--surface3);
border-bottom: 1px solid var(--border-soft);
font-size: .55rem; font-weight: 800; letter-spacing: .13em;
text-transform: uppercase; color: var(--text-dim);
}
/* Way out of a focused brand branch, back to the full brand list. */
.sl-tree-back {
display: flex; align-items: center; gap: 5px; width: 100%;
padding: 8px 12px 8px 34px; background: none; border: none;
border-top: 1px solid var(--border-soft);
font-size: .74rem; font-weight: 700; color: var(--text-muted);
text-align: left; cursor: pointer; transition: background .12s, color .12s;
}
.sl-tree-back:hover { background: var(--surface3); color: var(--text); }
.sl-tree-row {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 9px 12px; background: none; border: none; border-top: 1px solid var(--border-soft);
color: var(--text); text-align: left; cursor: pointer; transition: background .12s;
}
.sl-tree-row:first-child { border-top: none; }
.sl-tree-row:hover { background: var(--surface3); }
/* The pack this row is currently pinned to — a state marker, not a selection prompt. */
.sl-tree-row--cur { background: rgba(34,197,94,.08); box-shadow: inset 3px 0 0 var(--accent); }
.sl-tree-row--brand { padding: 0; border-top: 1px solid var(--border-soft); }
.sl-tree-row--brand:hover { background: none; }
.sl-tree-main {
flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
padding: 10px 12px 10px 20px; background: none; border: none; color: inherit;
text-align: left; cursor: pointer; transition: background .12s;
}
.sl-tree-main:hover { background: var(--surface3); }
/* An already-open brand heads its own branch: its row does nothing when tapped, so it stops
offering a hover/pointer that promises otherwise. */
.sl-tree-row--open > .sl-tree-main { cursor: default; }
.sl-tree-row--open > .sl-tree-main:hover { background: none; }
.sl-tree-name {
flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: .86rem; font-weight: 700; line-height: 1.25;
}
/* Right padding matches the chevron column the brand rows above reserve, so the chain marks of a
branch and its sizes line up in one column instead of stepping right at the size level. */
.sl-tree-row--size { padding-left: 34px; padding-right: 34px; }
.sl-tree-row--size .sl-tree-name { font-weight: 600; color: var(--text-muted); }
.sl-tree-star { font-size: .78rem; line-height: 1; }
.sl-tree-val {
flex-shrink: 0; display: flex; align-items: baseline; gap: 8px;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* kr/kg | kr/l leads, because ranking on the sticker price alone recommends the smallest pack. */
.sl-tree-unit { font-size: .84rem; font-weight: 800; color: var(--accent); letter-spacing: var(--tracking-tight); }
.sl-tree-from { font-size: .74rem; font-weight: 600; color: var(--text-muted); }
.sl-tree-price { font-size: .84rem; font-weight: 800; }
.sl-tree-sizes { background: var(--surface1); }
/* Chevron = open the branch; the row body = pick it. Two targets, so a mis-tap costs a fold, not a pin. */
.sl-tree-chev, .sl-drop-chev {
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
width: 34px; align-self: stretch; min-height: 34px;
background: none; border: none; border-left: 1px solid var(--border-soft);
color: var(--text-muted); cursor: pointer; transition: transform .15s, color .12s, background .12s;
}
.sl-tree-chev:hover, .sl-drop-chev:hover { background: var(--surface3); color: var(--text); }
.sl-tree-chev--open, .sl-drop-chev--open { transform: rotate(180deg); color: var(--accent); }
.sl-drop-chev { border-left: none; min-height: 30px; }
/* The gear reads as "open" while its branch is showing, so the card explains its own expanded state. */
.sl-mini-btn--open { color: var(--accent); background: rgba(34,197,94,.12); }
@media (max-width: 480px) {
/* Deep branches inside a dropdown sit above the keyboard, so the tree gets its own scroll rather
than pushing the list off-screen. */
.sl-dropdown .sl-tree { max-height: 42vh; overflow-y: auto; }
/* Narrow screens: keep the treeview steps but tighter, so names keep their width. */
.sl-tree-main { padding-left: 16px; }
.sl-tree-row--size { padding-left: 28px; }
.sl-tree-name { font-size: .82rem; }
}
/* ── Unified chooser panel (quick actions + brand→size accordion) ─────────────── */
.sl-choice { display: flex; flex-direction: column; gap: 8px; }
/* Quick action cards (Billigst / Generisk) — one tap, current best shown for info. */
.sl-qa {
display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
padding: 12px 14px; border-radius: 12px; background: var(--surface2);
border: 1.5px solid var(--border-soft); color: var(--text); transition: border-color .12s, background .12s;
}
.sl-qa:hover { border-color: rgba(34,197,94,.5); background: var(--surface3); }
.sl-qa--on { border-color: var(--accent); background: var(--accent-dim); }
.sl-qa-ic { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.sl-qa-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sl-qa-title { font-size: .92rem; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.sl-qa-check { color: var(--accent); }
.sl-qa-rec {
font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
color: var(--accent); background: rgba(34,197,94,.14); padding: 1px 6px; border-radius: 100px;
}
.sl-qa-sub { font-size: .76rem; color: var(--text-dim); line-height: 1.3; }
.sl-choice-div {
font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
color: var(--text-dim); margin: 6px 0 2px; padding: 0 2px;
}
/* Brand/size rows can carry a clickable product/proof thumbnail (tilbudsavis / webshop / price tag). */
.sl-brow-wrap, .sl-srow-wrap { display: flex; align-items: stretch; }
.sl-brow-wrap--on { box-shadow: inset 3px 0 0 var(--accent); background: rgba(34,197,94,.08); }
.sl-brow-wrap .sl-brow, .sl-srow-wrap .sl-srow { flex: 1; min-width: 0; }
.sl-row-thumb {
flex-shrink: 0; width: 44px; padding: 0; margin: 0; cursor: zoom-in;
background: var(--surface2); border: none; border-right: 1px solid var(--border-soft);
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.sl-row-thumb img { width: 44px; height: 44px; object-fit: cover; display: block; }
.sl-row-thumb--sm { width: 38px; }
.sl-row-thumb--sm img { width: 38px; height: 38px; }
.sl-row-thumb:hover { filter: brightness(1.05); }
/* Brand row already styled via .sl-brow; add accordion chevron + open state + size sub-rows. */
.sl-brow-chev { flex-shrink: 0; color: var(--text-muted); transition: transform .15s; margin-left: 2px; }
.sl-brow-chev--open { transform: rotate(180deg); }
.sl-brow--open { background: var(--surface3); }
.sl-size-sub {
display: flex; flex-direction: column;
background: var(--surface2); border-left: 2px solid var(--accent); margin: 0 0 2px 0;
}
/* Size-class header (Enkelt / Standard / Multipakk) in the size accordion (§2.3). */
.sl-size-class {
font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--text-muted); padding: 6px 10px 2px;
}
.sl-size-class:not(:first-child) { border-top: 1px solid var(--border); margin-top: 2px; }
.sl-srow {
display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
padding: 9px 14px 9px 22px; background: none; border: none; border-top: 1px solid var(--border-soft);
cursor: pointer; color: var(--text); text-align: left; transition: background .12s;
}
.sl-srow:first-child { border-top: none; }
.sl-srow:hover { background: var(--surface3); }
.sl-srow-name { font-size: .86rem; font-weight: 650; display: flex; align-items: center; gap: 6px; }
.sl-srow-meta { font-size: .78rem; color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-srow-unit { color: var(--accent); font-weight: 800; } /* headline kr/kg|kr/l */
/* Configure launcher row — name + current choice + chevron; opens the unified popup. */
/* "Gå til produkt" link inside the scan/proof image modal. */
.sl-scan-goproduct {
display: inline-flex; align-items: center; gap: 6px; margin-top: .7rem;
padding: 8px 14px; border-radius: 100px; text-decoration: none;
background: var(--accent-dim); color: var(--accent);
border: 1px solid rgba(34,197,94,.3); font-size: .82rem; font-weight: 800;
}
.sl-scan-goproduct:hover { background: rgba(34,197,94,.2); }
/* "Vis flere" pager inside the chooser. */
.sl-alt-more {
width: 100%; margin: 6px 0 0; padding: 8px; border: none;
border-top: 1px solid var(--border-soft); background: none; color: var(--accent);
cursor: pointer; font-size: .8rem; font-weight: 700;
}
.sl-alt-more:hover { background: var(--surface3); }
/* "fra X kr" cheapest hint under a still-generic row (also styled earlier — kept together here). */
/* ── Multi-chain heads-up banner ──────────────────────────────────────────── */
.sl-multichain {
display: flex; align-items: flex-start; gap: 10px;
padding: 10px 13px; margin: 4px 0 12px;
background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.30);
border-radius: var(--radius);
}
.sl-multichain-icon { flex-shrink: 0; color: #d97706; display: flex; margin-top: 1px; }
.sl-multichain-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-multichain-title { font-size: .82rem; font-weight: 800; color: var(--text); }
.sl-multichain-desc { font-size: .74rem; line-height: 1.35; color: var(--text-dim); }
.sl-multichain-dismiss {
flex-shrink: 0; margin-left: auto; width: 24px; height: 24px; margin-top: -2px; margin-right: -4px;
padding: 0; border: none; background: none; cursor: pointer; color: var(--text-dim);
display: flex; align-items: center; justify-content: center; border-radius: 6px;
}
.sl-multichain-dismiss:hover { color: var(--text); background: rgba(0,0,0,.06); }
/* ── "Kun {chain}" lock badge on a single-chain brand ── */
.sl-lock-badge {
font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
color: #b45309; background: rgba(245,158,11,.16);
padding: 1px 6px; border-radius: 100px; white-space: nowrap;
}
/* ── Add-time preference popup ─────────────────────────────────────────────── */
.sl-pref-modal { max-width: min(94vw, 440px); max-height: 88dvh; display: flex; flex-direction: column; }
.sl-pref-modal .sl-modal-header { flex-shrink: 0; }
.sl-pref-modal .sl-modal-body { overflow-y: auto; flex: 1; min-height: 0; }
.sl-pref-q { font-size: .9rem; font-weight: 700; color: var(--text); margin: 0 0 12px; }
.sl-pref-choices { display: flex; flex-direction: column; gap: 10px; }
.sl-pref-choice {
display: flex; align-items: center; gap: 13px; width: 100%;
padding: 14px; border-radius: 14px; cursor: pointer; text-align: left;
background: var(--surface2); border: 1.5px solid var(--border-soft);
color: var(--text); transition: border-color .12s, background .12s;
}
.sl-pref-choice:hover { border-color: rgba(34,197,94,.5); background: var(--surface3); }
.sl-pref-emoji { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.sl-pref-choice-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sl-pref-choice-title { font-size: .92rem; font-weight: 800; }
.sl-pref-choice-sub { font-size: .76rem; color: var(--text-dim); line-height: 1.3; }
.sl-pref-chev { flex-shrink: 0; color: var(--text-muted); }
.sl-pref-dontask {
display: block; width: 100%; margin-top: 14px; padding: 8px;
background: none; border: none; cursor: pointer;
color: var(--text-muted); font-size: .78rem; font-weight: 600;
}
.sl-pref-dontask:hover { color: var(--text); text-decoration: underline; }
/* P4: shown only to a shopper whose every saved answer was "brand doesn't matter" — the opt-out they
never noticed at the bottom, offered up front. Deliberately calm (neutral surface, not accent) so it
informs rather than competes with the actual choices below it. */
.sl-nonag {
display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
margin: 0 0 10px; padding: 9px 11px; border-radius: 9px;
background: var(--surface2); border: 1px dashed var(--border);
}
.sl-nonag-txt { font-size: .8rem; font-weight: 600; color: var(--text); }
.sl-nonag-btn {
padding: 6px 11px; border-radius: 7px; cursor: pointer;
background: var(--accent); border: none; color: #fff;
font-size: .8rem; font-weight: 700;
}
.sl-nonag-btn:hover { filter: brightness(1.07); }
.sl-nonag-hint { font-size: .72rem; line-height: 1.35; color: var(--text-muted); }
.sl-pref-back {
display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px;
padding: 5px 4px; background: none; border: none; cursor: pointer;
color: var(--text-muted); font-size: .82rem; font-weight: 700;
}
.sl-pref-back:hover { color: var(--text); }
/* The shared chooser reuses .sl-lens / .sl-vrow / .sl-brow; give it a light frame in the modal. */
.sl-pref-chooser { border: 1px solid var(--border-soft); border-radius: 12px; overflow: hidden; }
.sl-pref-chooser .sl-lens { border-bottom: 1px solid var(--border-soft); }
.sl-pref-chooser .sl-vrow, .sl-pref-chooser .sl-brow { border-top: 1px solid var(--border-soft); }
.sl-pref-chooser .sl-choose-list > :first-child { border-top: none; }
/* ── Configure ("Tilpass varer") modal ─────────────────────────────────────── */
/* Toggle switch — used by the "Spør om merke på nye varer" control on /konto. */
.sl-cfg-switch {
flex-shrink: 0; width: 42px; height: 24px; border-radius: 100px; cursor: pointer;
background: var(--border); border: none; padding: 2px; transition: background .15s;
}
.sl-cfg-switch--on { background: var(--accent); }
.sl-cfg-switch-knob {
display: block; width: 20px; height: 20px; border-radius: 50%;
background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.sl-cfg-switch--on .sl-cfg-switch-knob { transform: translateX(18px); }
/* Offer image thumbnail (inline in item row) */
.sl-offer-thumb {
flex-shrink: 0; width: 38px; height: 38px;
border: 1px solid var(--border); border-radius: 6px;
overflow: hidden; padding: 0; background: var(--surface2);
cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sl-offer-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Scan-image button: shows when a list item's price came from a real price-tag scan */
.sl-scan-thumb {
flex-shrink: 0; width: 40px; height: 40px;
border: 1px solid var(--border-soft); border-radius: 8px;
padding: 0; background: var(--surface2); color: var(--accent);
cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.sl-scan-thumb:hover { background: var(--surface3, var(--surface2)); }
.sl-scan-modal-caption {
margin: .5rem 0 0; text-align: center; font-size: .85rem; color: var(--text-muted);
}
.sl-scan-modal-date {
margin: .15rem 0 0; text-align: center; font-size: .78rem; color: var(--text-dim);
}
/* Offer image modal */
.sl-offer-modal-backdrop {
position: fixed; inset: 0; z-index: 9000;
background: rgba(0,0,0,.9); display: flex;
align-items: center; justify-content: center; padding: 20px;
}
.sl-offer-modal {
position: relative; max-width: min(600px, 100%);
max-height: 90dvh; border-radius: 12px; overflow: hidden;
box-shadow: var(--elev-overlay);
/* Solid card surface (theme-aware) so the chain title + captions read clearly instead of
floating over the backdrop. NB: --card-bg is not a defined token — use --surface, and set
an explicit text colour so the title never renders dark-on-dark in light mode. */
background: var(--surface, #14141a);
color: var(--text, #f0f0f5);
border: 1px solid var(--border, rgba(255,255,255,.08));
padding: 12px;
}
.sl-offer-modal img {
display: block; width: 100%; height: auto;
max-height: 78dvh; object-fit: contain; border-radius: 8px;
}
.sl-offer-modal-close {
position: absolute; top: 10px; right: 10px;
background: rgba(0,0,0,.55); border: none; border-radius: 50%;
width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
color: #fff; cursor: pointer; transition: background .15s;
}
.sl-offer-modal-close:hover { background: rgba(0,0,0,.8); }
/* Price-proof carousel — every chain's scan tag / tilbudsavis image, cheapest first, swipeable.
Native touch swipe via CSS scroll-snap; the arrows scroll one slide via inline JS (no interop). */
.sl-scan-modal-title {
text-align: center; font-weight: 800; font-size: 1.1rem; margin: 0 0 .2rem; color: var(--text);
}
.sl-carousel { position: relative; width: min(84vw, 540px); }
.sl-carousel-track {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sl-carousel-track::-webkit-scrollbar { display: none; }
.sl-carousel-slide {
flex: 0 0 100%; scroll-snap-align: center; box-sizing: border-box;
display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 2px;
}
.sl-carousel-chain { font-weight: 800; font-size: .98rem; color: var(--text); text-align: center; }
.sl-carousel-slide img {
width: auto; max-width: 100%; max-height: 60dvh; object-fit: contain;
border-radius: 8px; border: 1px solid var(--border);
}
.sl-carousel-tag {
font-size: .68rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
padding: 2px 9px; border-radius: 999px;
background: rgba(59,130,246,.15); color: var(--accent); border: 1px solid rgba(59,130,246,.28);
}
.sl-carousel-tag--offer {
background: rgba(245,158,11,.15); color: #f59e0b; border-color: rgba(245,158,11,.3);
}
.sl-carousel-arrow {
position: absolute; top: 42%; transform: translateY(-50%); z-index: 2;
width: 36px; height: 36px; border-radius: 50%; border: none;
background: rgba(0,0,0,.55); color: #fff; font-size: 1.6rem; line-height: 1; padding: 0;
display: flex; align-items: center; justify-content: center; cursor: pointer;
transition: background .15s;
}
.sl-carousel-arrow:hover { background: rgba(0,0,0,.82); }
.sl-carousel-prev { left: -8px; }
.sl-carousel-next { right: -8px; }
/* Chain-specific indicator badge — sits on its own line below the item name */
.sl-chain-specific-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: .62rem; font-weight: 700; border-radius: 4px;
padding: 1px 6px; background: rgba(99,102,241,.15);
color: #818cf8; border: 1px solid rgba(99,102,241,.25);
line-height: 1.7; margin-top: 3px;
}
/* Price shown inside the chain-specific badge when single chain */
.sl-cspec-price {
font-weight: 700; color: #6366f1; opacity: .85; font-size: .6rem;
}
/* Item name dimmed when chain filter active and item not in chain */
.sl-item-name--dimmed { opacity: .38; }
/* Chain filter row inside the alternatives panel */
.sl-chain-filter-row {
display: flex; gap: 6px; padding: 10px 12px 6px; flex-wrap: wrap;
}
.sl-chain-pill {
display: flex; flex-direction: column; align-items: center; gap: 1px;
padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border);
background: var(--surface3); cursor: pointer;
transition: border-color .15s, background .15s; min-width: 52px;
}
.sl-chain-pill:hover { border-color: var(--accent); }
.sl-chain-pill--active {
border-color: var(--accent); background: rgba(99,102,241,.15);
}
.sl-chain-pill--missing { opacity: .65; }
.sl-chain-pill--missing:hover { border-color: #f59e0b; opacity: 1; }
.sl-chain-pill-name { font-size: .68rem; font-weight: 700; color: var(--text-muted); }
.sl-chain-pill-price { font-size: .82rem; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.sl-chain-pill-price--none { color: var(--text-dim); font-weight: 400; }
.sl-check {
background: none; border: none; cursor: pointer;
flex-shrink: 0; display: flex; align-items: center; justify-content: center;
padding: 2px; color: var(--text-dim);
}
.sl-item-body { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.sl-item-textcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
/* Price block, hard right: "fra" / kroner+øre / chain, stacked and right-aligned. */
.sl-price-col {
flex: 0 0 auto; margin-left: auto; text-align: right; line-height: 1.05;
display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sl-price-val { line-height: 1; }
.sl-price-kr { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.sl-price-ore { font-size: .72rem; font-weight: 700; vertical-align: super; }
.sl-price-kr--none { color: var(--text-muted); opacity: .5; font-weight: 600; font-size: 1.1rem; }
.sl-price-from { font-size: .58rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; color: var(--text-muted); line-height: 1; }
/* The chain logo under a list row's price: same mark as the search rows, no left margin because
here it is stacked in a column rather than sitting beside the figure. */
.sl-drop-chain--stacked { margin-left: 0; margin-top: 2px; }
.sl-price-col--offer .sl-price-kr, .sl-price-col--offer .sl-price-ore { color: #dc2626; }
.sl-item--done .sl-price-col { color: var(--text-muted); }
/* Height trim: the card keeps its shape, just less air around and inside it. */
.sl-item { padding: 5px 9px !important; }
.sl-item-meta { gap: 4px !important; row-gap: 2px !important; }
.sl-item-actions { flex: 0 0 auto; display: flex; gap: 1px; }
/* The two small row actions (change product, open product page) stay deliberately quiet
until the row is hovered or focused — present, but never competing with the price. */
.sl-item-actions .sl-mini-btn { opacity: .45; transition: opacity .15s; }
.sl-item:hover .sl-item-actions .sl-mini-btn,
.sl-item-actions .sl-mini-btn:focus-visible,
.sl-item-actions .sl-mini-btn--set { opacity: 1; }
@media (max-width: 380px) {
.sl-price-col { min-width: 50px; }
.sl-price-kr { font-size: 1.3rem; }
}
.sl-item-name {
font-size: .9rem; font-weight: 600; line-height: 1.25;
flex: 1; min-width: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
/* Producer / brand shown as a coloured inline prefix on the name line. */
.sl-item-brand { font-weight: 800; color: var(--text-muted); }
.sl-item--done .sl-item-name { text-decoration: line-through; }
.sl-item-sublabel { font-size: .72rem; color: var(--text-dim); display: block; margin-top: 1px; }
/* Recently-bought reminder. Deliberately the quietest thing in the card: muted rather than
accent-green (green competed with the price for attention), one notch smaller than the meta
chips, and inline-flex so it hugs its text instead of claiming the full row width. */
.sl-item-hint {
display: inline-flex; align-items: center; gap: 4px; margin-top: 2px;
font-size: .66rem; font-weight: 500; line-height: 1.3;
color: var(--text-muted); opacity: .7;
}
.sl-item-hint svg { opacity: .65; }
/* One line, always — a wrapped hint costs the card as much height as a whole chip row. */
.sl-item-hint-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-item-hint:hover { opacity: .95; }
/* Interactive chips row (pinned size, back-to-generic, brand wish). */
.sl-item-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* ── Meta line under the name: price + cheapest store + unit price + chips + mini actions.
One wrapping row, so the product name keeps the full row width above it and the card
stays ~2 lines tall even for long names. ── */
.sl-item-meta span { font-size: .74rem; color: var(--text-muted); }
/* Sticker price — the anchor of the meta line. */
.sl-item-price {
font-size: .85rem !important; font-weight: 800; color: var(--text) !important;
font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap;
}
.sl-item-price--offer { color: var(--accent) !important; }
/* "fra X" starting-from price reads as a hint, not a firm sticker → smaller/lighter. */
.sl-item-price--from { font-size: .76rem !important; font-weight: 700; color: var(--text-muted) !important; }
/* Chain-coloured store pill (re-applied at higher specificity than the neutral base rule below). */
.sl-item-meta .sl-item-store {
font-size: .64rem; font-weight: 800; letter-spacing: .02em;
padding: 1px 6px; border-radius: 100px; white-space: nowrap;
}
.sl-item-meta .sl-item-store.sl-chain--kiwi { background: rgba(255,90,0,.15); color: #fb923c; }
.sl-item-meta .sl-item-store.sl-chain--meny { background: rgba(16,185,129,.12); color: #34d399; }
.sl-item-meta .sl-item-store.sl-chain--rema { background: rgba(239,68,68,.12); color: #f87171; }
.sl-item-meta .sl-item-store.sl-chain--coop { background: rgba(99,102,241,.12); color: #818cf8; }
/* Mini actions (customise gear + open-product link), pushed to the end of the meta line. */
.sl-item-actions { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.sl-mini-btn {
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 7px; border: none; background: none;
color: var(--text-dim); cursor: pointer; text-decoration: none;
transition: background .12s, color .12s;
}
.sl-mini-btn:hover { color: var(--text); background: var(--surface2); }
.sl-mini-btn--set { color: var(--accent); }
/* Choose-product expander (replaces the old gear): a full-height chevron strip on
the card's right edge, bleeding into the card padding so it reads as part of the
card frame. Flips while the chooser tree is open; green once a choice is set. */
.sl-expand-btn {
flex: 0 0 auto; align-self: stretch;
display: flex; align-items: center; justify-content: center;
/* Tap width widened toward the card's outer edge (ux_shoppinglist.md it.12) — deliberately
NOT to a full 40px: the strip is full row height (~100px, ample area) and widening further
left would overlap the stepper's + button and trade mis-taps for a metric. */
width: 34px; margin: -5px -13px -5px -4px;
border: none; border-left: 1px solid var(--border-soft);
border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
background: none; color: var(--text-dim); cursor: pointer;
transition: background .12s, color .12s;
}
.sl-expand-btn:hover { color: var(--text); background: var(--surface2); }
/* "Åpne produktside": the expand strip's twin, sitting immediately to its left. Same full-height
button language, so the row's right edge reads as one control group. */
.sl-open-btn {
flex: 0 0 auto; align-self: stretch;
display: flex; align-items: center; justify-content: center;
width: 30px; margin: -5px 0; text-decoration: none;
border-left: 1px solid var(--border-soft);
background: none; color: var(--text-dim); cursor: pointer;
transition: background .12s, color .12s;
}
.sl-open-btn:hover { color: var(--accent); background: var(--surface2); }
/* Product page opened in-place, in a frame over the list. The list keeps its scroll position and
the shopper keeps their place — which is what the old new-tab link was protecting. */
.sl-modal--product {
max-width: 620px; height: 84vh; display: flex; flex-direction: column;
}
.sl-modal--product .sl-modal-header { gap: 8px; }
.sl-product-frame { flex: 1; width: 100%; border: none; background: var(--surface); }
.sl-modal-open-tab {
font-size: .72rem; font-weight: 700; color: var(--text-muted); text-decoration: none;
display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.sl-modal-open-tab:hover { color: var(--accent); }
.sl-modal-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Chrome hidden when a page renders inside that frame (?embed=1, set in App.razor). */
html.embed .topbar,
html.embed .nav-drawer,
html.embed .app-footer,
html.embed .bottom-tab-bar { display: none !important; }
html.embed body { background: var(--surface); }
.sl-expand-btn--set { color: var(--accent); }
.sl-expand-btn--open { color: var(--accent); background: var(--accent-dim); }
.sl-expand-btn svg { transition: transform .18s ease; }
.sl-expand-btn--open svg { transform: rotate(180deg); }
/* Docked chooser tree squares the card's bottom corners — follow suit. */
.sl-item-wrap:has(.sl-alt-panel) .sl-expand-btn { border-bottom-right-radius: 0; }
/* Rows with nothing to choose reserve the strip's width so steppers stay aligned. */
.sl-expand-spacer {
flex: 0 0 auto; align-self: stretch; width: 28px;
margin: -5px -9px -5px -2px; border-left: 1px solid transparent;
}
.sl-item-offer-price {
font-size: .92rem !important; font-weight: 700;
color: var(--accent) !important; letter-spacing: -.01em;
}
.sl-item-store {
background: var(--surface3); border-radius: 4px;
padding: 1px 5px; font-size: .7rem; color: var(--text-muted);
}
/* Comparable unit price (kr/l, kr/kg, kr/rull) — the always-visible honesty backbone. */
.sl-item-perunit {
font-size: .7rem !important; color: var(--text-muted);
opacity: .8; white-space: nowrap;
}
.sl-item-perunit::before { content: "· "; opacity: .6; }
.sl-item-perunit--unknown { font-style: italic; opacity: .6; }
/* Stale-price flag (§3/G7) — honest heads-up that a price may be outdated. */
.sl-item-stale {
font-size: .68rem !important; color: #b45309;
background: rgba(245,158,11,.14); border-radius: 4px; padding: 0 5px; white-space: nowrap;
}
/* The cheapest-per-unit "best value" banner that used to sit here is gone: it is now the "Beste verdi"
sl-qa button, a peer of "Billigst" and "Spiller ingen rolle", instead of a passive strip above them. */
/* Chooser search fallback (find a brand/size not in the shortlist). */
.sl-brand-search {
display: flex; align-items: center; gap: 7px; margin: 2px 0 6px;
padding: 6px 10px; border-radius: 8px;
background: var(--surface2); border: 1px solid var(--border-soft); color: var(--text-muted);
}
.sl-brand-search-input {
flex: 1; border: none; background: none; outline: none; color: var(--text);
font-size: .85rem; min-width: 0;
}
.sl-brow-empty { padding: 10px; font-size: .82rem; color: var(--text-muted); text-align: center; }
/* Store-brand lever in the chooser (include private-label brands / national only). */
.sl-sb-toggle {
display: flex; align-items: flex-start; gap: 8px;
margin: 2px 0 6px; padding: 6px 10px;
border-radius: 8px; cursor: pointer;
background: var(--surface2, rgba(127,127,127,.06));
}
.sl-sb-toggle input { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; }
.sl-sb-txt { display: flex; flex-direction: column; font-size: .8rem; line-height: 1.25; }
.sl-sb-hint { font-size: .7rem; color: var(--text-muted); }
/* Quantity stepper */
.sl-stepper {
display: flex; align-items: center; gap: 0; flex-shrink: 0;
border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.sl-step-btn {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: none; border: none; cursor: pointer;
color: var(--text-muted); transition: background .12s, color .12s;
flex-shrink: 0;
}
.sl-step-btn:hover { background: var(--surface2); color: var(--text); }
.sl-step-btn--del:hover { color: #f87171; background: rgba(248,113,113,.08); }
.sl-step-qty {
min-width: 26px; text-align: center;
font-size: .88rem; font-weight: 700; color: var(--text);
border-left: 1px solid var(--border); border-right: 1px solid var(--border);
line-height: 32px;
}
/* ── TILBUDSAVIS ── */
.tilbud-page-header {
display: flex; align-items: baseline; gap: 12px; margin-bottom: 1rem;
}
.tilbud-page-title { font-size: 1.3rem; font-weight: 800; margin: 0; }
.tilbud-validity-label { font-size: .82rem; color: var(--text-muted); }
.tilbud-filters {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 1.5rem;
}
/* Category sections */
.tilbud-category-section { margin-bottom: 2rem; }
.tilbud-category-row {
display: flex; align-items: center; gap: .75rem;
margin-bottom: .75rem; padding-bottom: .4rem;
border-bottom: 1px solid var(--border);
}
.tilbud-category-header {
font-size: .78rem; font-weight: 800; text-transform: uppercase;
letter-spacing: .07em; color: var(--text-dim);
margin: 0; flex: 1;
}
.tilbud-expand-btn {
display: flex; align-items: center; gap: 4px;
font-size: .72rem; font-weight: 600; color: var(--accent);
background: none; border: none; cursor: pointer; padding: 2px 0;
white-space: nowrap; opacity: .8;
}
.tilbud-expand-btn:hover { opacity: 1; }
/* Add-to-list button on offer card */
.tilbud-offer-card { position: relative; }
.tilbud-add-btn {
position: absolute; top: 6px; right: 6px;
width: 26px; height: 26px;
border-radius: 50%; border: none;
background: var(--accent); color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer; opacity: 0; transition: opacity .15s;
box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.tilbud-offer-card:hover .tilbud-add-btn { opacity: 1; }
.tilbud-add-btn:hover { filter: brightness(1.15); }
.tilbud-edit-btn {
position: absolute; top: 6px; left: 6px;
width: 26px; height: 26px;
border-radius: 50%; border: none;
background: rgba(0,0,0,.55); color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer; opacity: 0; transition: opacity .15s;
box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.tilbud-offer-card:hover .tilbud-edit-btn { opacity: 1; }
.tilbud-edit-btn:hover { background: var(--accent); }
/* Toast */
.tilbud-toast {
position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
background: var(--accent); color: #fff;
padding: 10px 20px; border-radius: 20px;
font-size: .85rem; font-weight: 600;
box-shadow: 0 4px 16px rgba(0,0,0,.3);
z-index: 300; white-space: nowrap;
animation: fadeIn .2s ease;
}
/* Offer grid */
.tilbud-offers-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
}
.tilbud-offer-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); overflow: hidden;
display: flex; flex-direction: column;
transition: border-color .15s, box-shadow .15s;
}
.tilbud-offer-card--clickable { cursor: pointer; }
.tilbud-offer-card--clickable:hover {
border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent);
}
/* Offer image */
.tilbud-offer-img-wrap {
width: 100%; aspect-ratio: 1; overflow: hidden;
background: var(--surface2); flex-shrink: 0;
}
.tilbud-offer-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tilbud-offer-img-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-size: 1.8rem; font-weight: 900; color: var(--accent); opacity: .35;
}
/* Offer body */
.tilbud-offer-body { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.tilbud-offer-name {
font-size: .78rem; font-weight: 600; color: var(--text); line-height: 1.3;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tilbud-offer-price { display: flex; align-items: baseline; flex-wrap: wrap; }
.tilbud-price-value { font-size: var(--fs-xl); font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); line-height: 1; }
.tilbud-price-kr { font-size: .72rem; font-weight: 700; color: var(--text-muted); margin-left: 2px; }
.tilbud-price-unit { font-size: .7rem; color: var(--text-muted); }
.tilbud-price-currency { font-size: .72rem; font-weight: 700; color: var(--text-muted); margin-left: 1px; }
.tilbud-offer-chain {
font-size: .68rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .06em; color: var(--text-dim); margin-top: 2px;
display: flex; align-items: center; gap: 6px;
}
/* Discreet "go to product" link on an offer card. Sits on the chain line so it costs no extra
vertical space, and stays dim until hovered so it never competes with the price. */
.tilbud-product-link {
display: inline-flex; align-items: center; gap: 3px;
font-size: .62rem; font-weight: 700; letter-spacing: .04em;
color: var(--text-muted); text-decoration: none;
border: 1px solid var(--border); border-radius: 5px;
padding: 1px 5px; line-height: 1.4;
transition: color .15s, border-color .15s;
}
.tilbud-product-link:hover { color: var(--accent); border-color: var(--accent); }
/* Legacy campaign view kept for admin use */
.tilbud-campaign {
margin-bottom: 2rem; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-lg); overflow: hidden;
}
.tilbud-campaign-header {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; border-bottom: 1px solid var(--border);
background: var(--surface2);
}
.tilbud-chain-badge {
font-size: .78rem; font-weight: 800; text-transform: uppercase;
letter-spacing: .06em; color: var(--accent);
}
.tilbud-validity { font-size: .8rem; color: var(--text-muted); }
/* Offer detail modal */
.tilbud-modal {
max-width: 420px; width: 100%; background: var(--surface2);
border: 1px solid var(--border); border-radius: var(--radius-lg);
display: flex; flex-direction: column; overflow: hidden;
max-height: 90vh;
}
.tilbud-modal-img-wrap {
background: var(--surface3); width: 100%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; max-height: 260px; overflow: hidden;
}
.tilbud-modal-img { width: 100%; max-height: 260px; object-fit: contain; display: block; }
.tilbud-modal-body { padding: 1.25rem 1.25rem 1.5rem; overflow-y: auto; }
.tilbud-modal-name { font-size: 1.1rem; font-weight: 700; margin: 0 0 .5rem; }
.tilbud-modal-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: .4rem; }
.tilbud-modal-validity { font-size: .82rem; color: var(--text-muted); }
.text-muted { color: var(--text-muted); }
.mp-spinner { display: flex; justify-content: center; padding: 3rem 0; }
/* ── Storhandel (big-shop planner) ───────────────────────────────────────── */
.sh-page { padding-bottom: calc(var(--tab-h) + 60px); }
.sh-header { margin-bottom: .75rem; }
.sh-title { margin: 0 0 .15rem; }
.sh-subtitle { margin: 0; font-size: .82rem; color: var(--text-muted); }
.sh-summary {
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
background: var(--surface); border: 1px solid var(--border-soft); border-radius: 12px;
padding: 10px 12px; margin-bottom: 1rem;
}
.sh-summary-counts { font-size: .85rem; color: var(--text-muted); display: flex; gap: 7px; align-items: baseline; }
.sh-count strong { color: var(--text); font-size: 1rem; }
.sh-bottom-actions { display: flex; justify-content: center; margin-top: 1.25rem; }
.sh-bottom-actions .sh-open-list-btn { width: 100%; max-width: 420px; justify-content: center; padding: 12px 16px; }
.sh-step-label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: 6px; }
.sh-dish-add { margin-bottom: 1.1rem; }
.sh-dish-input-row { display: flex; gap: 8px; }
.sh-dish-input {
flex: 1; min-width: 0; padding: 10px 12px; font-size: 16px;
border: 1.5px solid var(--border); border-radius: 10px;
background: var(--surface); color: var(--text);
}
.sh-dish-input:focus { outline: none; border-color: var(--accent); }
.sh-dish-chips, .sh-sugg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sh-dish-chip, .sh-sugg-chip {
border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
border-radius: 999px; padding: 5px 11px; font-size: .8rem; cursor: pointer;
transition: border-color .12s, color .12s;
}
.sh-dish-chip:hover, .sh-sugg-chip:hover { border-color: var(--accent); color: var(--text); }
.sh-empty { font-size: .84rem; color: var(--text-muted); margin: .5rem 0 1rem; }
.sh-dish-card {
border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface);
margin-bottom: 10px; overflow: visible;
}
.sh-dish-card--open { border-color: var(--accent); }
.sh-dish-head {
display: flex; align-items: center; gap: 8px; padding: 11px 12px; cursor: pointer;
min-height: 44px;
}
.sh-dish-emoji { flex-shrink: 0; }
.sh-dish-name { font-weight: 800; font-size: .92rem; }
.sh-dish-sub { font-size: .72rem; color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-dish-count { margin-left: auto; font-size: .74rem; color: var(--text-muted); flex-shrink: 0; }
.sh-dish-del {
border: none; background: none; color: var(--text-dim); cursor: pointer; padding: 6px;
border-radius: 7px; flex-shrink: 0; display: flex;
}
.sh-dish-del:hover { color: var(--danger, #dc2626); background: rgba(220,38,38,.08); }
.sh-chev { flex-shrink: 0; transition: transform .18s; color: var(--text-dim); }
.sh-chev--open { transform: rotate(180deg); }
.sh-dish-body { padding: 2px 12px 12px; border-top: 1px dashed var(--border-soft); }
.sh-item-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-item-row {
display: flex; align-items: center; gap: 7px; padding: 6px 2px; font-size: .88rem;
border-bottom: 1px solid var(--border-soft);
}
.sh-item-row:last-child { border-bottom: none; }
.sh-item-name { min-width: 0; }
.sh-item-qty { font-size: .76rem; color: var(--accent); font-weight: 700; }
.sh-item-shared { font-size: .7rem; color: var(--text-dim); font-style: italic; }
.sh-item-del {
margin-left: auto; border: none; background: none; color: var(--text-dim); cursor: pointer;
padding: 6px; border-radius: 7px; display: flex; flex-shrink: 0;
}
.sh-item-del:hover { color: var(--danger, #dc2626); background: rgba(220,38,38,.08); }
.sh-sugg-label { font-size: .74rem; color: var(--text-muted); margin-top: 10px; }
.sh-item-input-wrap { position: relative; margin-top: 10px; }
.sh-item-input {
width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 16px;
border: 1.5px solid var(--border); border-radius: 9px;
background: var(--bg, var(--surface)); color: var(--text);
}
.sh-item-input:focus { outline: none; border-color: var(--accent); }
.sh-drop {
position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 30;
background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 8px 22px rgba(0,0,0,.14); overflow: hidden;
}
.sh-drop-item {
display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
border: none; background: none; padding: 9px 12px; cursor: pointer; color: var(--text);
font-size: .86rem;
}
.sh-drop-item:hover { background: rgba(34,197,94,.08); }
.sh-drop-name { font-weight: 600; min-width: 0; }
.sh-drop-cat { margin-left: auto; font-size: .7rem; color: var(--text-dim); flex-shrink: 0; }
.sh-basis-card { border-style: dashed; }
/* Dish-view toggle inside /lists (storhandel lists) */
.sl-viewtoggle {
display: flex; align-items: center; gap: 8px; margin: 0 0 10px;
}
.sl-viewtoggle-check {
position: relative; display: inline-flex; align-items: center; gap: 8px;
font-size: .8rem; font-weight: 700; cursor: pointer; user-select: none;
}
/* Real checkbox stays for semantics/tests but is invisible over the switch. */
.sl-viewtoggle-check input {
position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 36px; height: 21px; margin: 0; opacity: 0; cursor: pointer;
}
.sl-viewtoggle-track {
position: relative; flex: none; width: 36px; height: 21px; border-radius: 999px;
background: var(--border); transition: background .18s ease, box-shadow .18s ease;
}
.sl-viewtoggle-knob {
position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%;
background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
transition: transform .18s ease;
}
.sl-viewtoggle-check input:checked + .sl-viewtoggle-track {
background: var(--accent); box-shadow: 0 2px 10px var(--accent-glow);
}
.sl-viewtoggle-check input:checked + .sl-viewtoggle-track .sl-viewtoggle-knob { transform: translateX(15px); }
.sl-viewtoggle-check input:focus-visible + .sl-viewtoggle-track {
outline: 2px solid var(--accent); outline-offset: 2px;
}
.sl-viewtoggle-text { color: var(--text-muted); transition: color .18s ease; }
.sl-viewtoggle-check input:checked ~ .sl-viewtoggle-text { color: var(--text); }
.sl-viewtoggle-edit {
margin-left: auto; font-size: .76rem; color: var(--accent); text-decoration: none; font-weight: 700;
}
.sl-dishview-group { margin-bottom: 14px; }
.sl-dishview-label {
font-size: .78rem; font-weight: 800; color: var(--text-muted);
text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
display: flex; align-items: center; gap: 6px;
}
.sl-dishview-list { list-style: none; margin: 0; padding: 0; }
.sl-dishview-row {
display: flex; align-items: center; gap: 9px; padding: 8px 2px; font-size: .9rem;
border-bottom: 1px solid var(--border-soft);
cursor: grab;
}
.sl-dishview-row--dragging { opacity: .45; }
.sl-dishview-group--droppable { border-radius: 10px; padding: 4px 6px; margin: 0 -6px; }
.sl-dishview-group--dragover {
background: color-mix(in srgb, var(--accent) 10%, transparent);
outline: 1.5px dashed var(--accent); outline-offset: -1.5px;
}
.sl-dishview-dropzone {
border: 1.5px dashed var(--border); border-radius: 8px;
padding: 10px; text-align: center;
font-size: .78rem; color: var(--text-dim);
}
.sl-dishview-row--done .sl-dishview-name { text-decoration: line-through; color: var(--text-dim); }
.sl-dishview-name { min-width: 0; }
.sl-dishview-qty { font-size: .76rem; color: var(--accent); font-weight: 700; }
.sl-dishview-shared { font-size: .7rem; color: var(--text-dim); font-style: italic; margin-left: auto; }
/* ── Auth pages ──────────────────────────────────────────────────────────── */
.auth-wrap {
max-width: 400px; margin: 3rem auto; padding: 0 1.5rem;
}
.auth-title {
font-size: 1.4rem; font-weight: 700; margin-bottom: 1.5rem;
}
.auth-field {
display: flex; flex-direction: column; gap: 6px; margin-bottom: 1rem;
}
.auth-field label {
font-size: .85rem; font-weight: 600; color: var(--text-muted);
}
.auth-field input {
background: var(--surface2); border: 1px solid var(--border);
border-radius: 8px; padding: 10px 14px; font-size: 1rem;
color: var(--text); outline: none; width: 100%; box-sizing: border-box;
}
.auth-field input:focus { border-color: var(--accent); }
.auth-submit { width: 100%; margin-top: .5rem; }
.auth-error {
background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.3);
border-radius: 8px; color: #f87171; padding: 10px 14px;
font-size: .88rem; margin-bottom: 1rem;
}
.auth-hint {
font-size: .88rem; color: var(--text-muted); margin-bottom: 1rem;
}
.auth-alt {
margin-top: 1.25rem; font-size: .88rem; color: var(--text-muted); text-align: center;
}
.auth-alt a { color: var(--accent); text-decoration: none; font-weight: 600; }
.auth-terms { display: flex; align-items: flex-start; gap: 10px; margin: .75rem 0 .25rem; cursor: pointer; }
.auth-terms input[type="checkbox"] { margin-top: 2px; accent-color: var(--accent); flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; }
.auth-terms span { font-size: .88rem; color: var(--text-muted); line-height: 1.45; }
.auth-terms-link { background: none; border: none; padding: 0; color: var(--accent); font-size: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.auth-terms-link:hover { opacity: .85; }
.auth-divider { display: flex; align-items: center; gap: .75rem; color: var(--text-muted); font-size: .82rem; margin: .25rem 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-passkey-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; }
/* Terms modal */
/* ── Global re-consent gate (updated legal terms) ── */
.terms-consent-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.72); z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.terms-consent-modal { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 460px; padding: 1.5rem; box-shadow: var(--elev-overlay); }
.terms-consent-modal h2 { font-size: 1.15rem; font-weight: 800; margin: 0 0 .6rem; color: var(--text); }
.terms-consent-lead { color: var(--text-muted); font-size: .9rem; line-height: 1.6; margin: 0 0 1rem; }
.terms-consent-list { list-style: none; padding: 0; margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: .6rem; }
.terms-consent-list li { display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .7rem .85rem; }
.terms-consent-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.terms-consent-name { color: var(--accent); font-weight: 600; font-size: .92rem; text-decoration: none; }
a.terms-consent-name:hover { text-decoration: underline; }
.terms-consent-toggle { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: .82rem; font-weight: 600; padding: 2px 4px; }
.terms-consent-toggle:hover { color: var(--text); }
.terms-consent-chev { transition: transform .18s ease; }
.terms-consent-chev.open { transform: rotate(180deg); }
.terms-consent-date { color: var(--text-muted); font-size: .78rem; }
.terms-consent-doc { margin-top: .6rem; max-height: 40vh; overflow-y: auto; border-top: 1px solid var(--border); padding-top: .6rem; }
/* Shared legal-document body typography (used on /vilkar & /salgsbetingelser and inside the consent modal). */
.legal-doc h4 { font-size: .92rem; font-weight: 700; color: var(--text); margin: 1rem 0 .35rem; }
.legal-doc h4:first-child { margin-top: 0; }
.legal-doc p { color: var(--text-muted); font-size: .88rem; line-height: 1.65; margin: 0 0 .5rem; }
.legal-doc ul { color: var(--text-muted); font-size: .88rem; line-height: 1.65; padding-left: 1.3rem; margin: 0 0 .5rem; }
.legal-doc li { margin-bottom: .25rem; }
.legal-doc a { color: var(--accent); text-decoration: none; }
.legal-doc a:hover { text-decoration: underline; }
.legal-doc strong { color: var(--text); }
.terms-consent-error { color: #f87171; font-size: .82rem; margin-bottom: .8rem; }
.terms-consent-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.terms-consent-logout { color: var(--text-muted); font-size: .85rem; text-decoration: none; }
.terms-consent-logout:hover { color: var(--text); text-decoration: underline; }
.terms-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.terms-modal { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-lg); width: 100%; max-width: 520px; max-height: 85vh; display: flex; flex-direction: column; }
.terms-header { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.25rem; border-bottom: 1px solid var(--border); font-weight: 700; font-size: .95rem; flex-shrink: 0; }
.terms-close { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 4px; display: flex; border-radius: 6px; }
.terms-close:hover { background: var(--surface3); color: var(--text); }
.terms-body { overflow-y: auto; padding: 1.25rem; display: flex; flex-direction: column; gap: .9rem; flex: 1; }
.terms-updated { font-size: .78rem; color: var(--text-dim); }
.terms-body h4 { font-size: .88rem; font-weight: 700; color: var(--text); margin-top: .25rem; }
.terms-body p { font-size: .84rem; color: var(--text-muted); line-height: 1.6; }
.terms-footer { padding: .9rem 1.25rem; border-top: 1px solid var(--border); flex-shrink: 0; }
.sl-page-title { font-size:1.1rem;font-weight:700;padding:1rem 1rem .25rem;margin:0;color:var(--text); }
/* ── User management (admin) ─────────────────────────────────────────────── */
.user-reset-box {
display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.3);
border-radius:8px;padding:10px 14px;margin-bottom:1rem;font-size:.88rem;
}
.user-temp-pw {
background:rgba(0,0,0,.3);border-radius:4px;padding:2px 8px;
font-family:monospace;font-size:.95rem;letter-spacing:.04em;color:var(--accent);
user-select:all;
}
.nav-drawer-email {
display: block;
padding: 10px 16px 4px;
font-size: .78rem;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: none;
}
a.nav-drawer-email:hover { color: var(--text); }
/* ── Privacy / Personvern cards ─────────────────────────────────────────── */
.privacy-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 10px;
}
.privacy-card-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.privacy-icon { opacity: .7; flex-shrink: 0; }
.privacy-summary {
font-size: .83rem;
color: var(--text-muted);
margin: 0 0 6px;
line-height: 1.45;
}
.privacy-retention {
display: flex;
align-items: center;
gap: 5px;
font-size: .78rem;
color: var(--text-muted);
opacity: .8;
}
.privacy-basis-badge {
margin-left: auto;
font-size: .7rem;
padding: 2px 7px;
border-radius: 20px;
white-space: nowrap;
font-weight: 500;
}
.privacy-basis-contract { background: rgba(39,174,96,.12); color: #27ae60; }
.privacy-basis-consent { background: rgba(52,152,219,.12); color: #2980b9; }
.privacy-basis-legitimate-interest { background: rgba(243,156,18,.12); color: #d68910; }
.privacy-third-parties {
margin-top: 1.25rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
}
.privacy-third-party-row {
display: flex;
gap: 10px;
font-size: .82rem;
padding: 4px 0;
border-bottom: 1px solid var(--border);
}
.privacy-third-party-row:last-child { border-bottom: none; }
.privacy-tp-name { font-weight: 600; min-width: 110px; }
.privacy-tp-purpose { color: var(--text-muted); }
/* ── Innsyn (data access) blocks ────────────────────────────────────────── */
.innsyn-block {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 8px;
overflow: hidden;
}
.innsyn-summary {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 14px;
cursor: pointer;
font-size: .88rem;
font-weight: 600;
list-style: none;
user-select: none;
}
.innsyn-summary::-webkit-details-marker { display: none; }
.innsyn-summary::after {
content: "›";
margin-left: auto;
opacity: .4;
font-size: 1.1em;
transition: transform .15s;
}
details[open] > .innsyn-summary::after { transform: rotate(90deg); }
.innsyn-badge {
background: var(--accent, #3498db);
color: #fff;
font-size: .68rem;
font-weight: 700;
padding: 1px 6px;
border-radius: 20px;
min-width: 20px;
text-align: center;
}
.innsyn-body {
padding: 0 14px 10px;
font-size: .82rem;
}
.innsyn-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
padding: 5px 0;
border-bottom: 1px solid var(--border);
}
.innsyn-row:last-child { border-bottom: none; }
.innsyn-row > span:first-child { color: var(--text-muted); min-width: 110px; }
.innsyn-status {
font-size: .72rem;
margin-left: 6px;
padding: 1px 5px;
border-radius: 4px;
background: var(--border);
}
.innsyn-status--ok { background: rgba(39,174,96,.15); color: #27ae60; }
.innsyn-status--err { background: rgba(192,57,43,.15); color: #c0392b; }
/* ── Delete-account notice ───────────────────────────────────────────────── */
.delete-notice {
display: flex;
gap: 10px;
background: rgba(52,152,219,.08);
border: 1px solid rgba(52,152,219,.25);
border-radius: 8px;
padding: 12px 14px;
font-size: .85rem;
line-height: 1.5;
color: var(--text);
}
.delete-notice--warn {
background: rgba(192,57,43,.08);
border-color: rgba(192,57,43,.25);
}
/* ── Lists overview ──────────────────────────────────────────────────────── */
.sl-new-bar {
display:flex;flex-wrap:wrap;gap:.6rem;padding:.75rem 1rem 1rem;
}
.sl-list-cards { display:flex;flex-direction:column;gap:.5rem;padding:0 1rem .75rem; }
.sl-show-more {
display:block;width:calc(100% - 2rem);margin:0 1rem 2rem;
padding:.65rem;border-radius:var(--radius);border:1px solid var(--border);
background:var(--surface2);color:var(--text-muted);font-size:.85rem;
cursor:pointer;text-align:center;
}
.sl-show-more:hover { background:var(--surface3); color:var(--text); }
.sl-list-card {
display:flex;align-items:center;gap:.5rem;
background:var(--surface2);border:1px solid var(--border);border-radius:10px;
padding:12px 14px;cursor:pointer;
box-shadow: var(--card-shine);
transition:border-color .15s, box-shadow .15s;
}
.sl-list-card:hover { border-color:var(--accent); box-shadow: var(--card-shine), 0 4px 16px rgba(0,0,0,.3); }
.sl-list-card--done .sl-list-card-name { text-decoration:line-through;opacity:.5; }
/* An so the card works before the Blazor circuit connects — styled as the plain card body it
replaced, not as a link. */
.sl-list-card-body { flex:1;display:flex;flex-direction:column;gap:2px;
color:inherit;text-decoration:none;min-width:0; }
.sl-list-card-name-row { display:flex;align-items:center;gap:.5rem;flex-wrap:wrap; }
.sl-list-card-name { font-size:.95rem;font-weight:600;color:var(--text); }
.sl-list-card-meta { font-size:.78rem;color:var(--text-muted); }
.sl-list-emoji { font-size:.95rem;line-height:1.2;display:block;margin-bottom:1px; }
.sl-share-badge {
display:inline-flex;align-items:center;gap:3px;
font-size:.68rem;font-weight:500;color:var(--accent);
background:var(--accent-dim);border-radius:4px;padding:1px 5px;
}
.sl-list-card-del {
flex-shrink:0;width:28px;height:28px;border:none;background:transparent;
color:var(--text-muted);cursor:pointer;border-radius:6px;
display:flex;align-items:center;justify-content:center;
transition:background .15s,color .15s;
}
.sl-list-card-del:hover { background:rgba(248,113,113,.15);color:#f87171; }
/* ── Templates ────────────────────────────────────────────────────────────── */
.sl-section-title {
font-size:.78rem;font-weight:600;color:var(--text-muted);letter-spacing:.04em;
text-transform:uppercase;padding:.75rem 1rem .25rem;margin:0;
}
.sl-list-card--template { border-color:rgba(99,102,241,.3); }
.sl-list-card--template:hover { border-color:#818cf8; }
.sl-template-badge {
font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
background:rgba(99,102,241,.15);color:#818cf8;border:1px solid rgba(99,102,241,.3);
border-radius:4px;padding:1px 5px;flex-shrink:0;
}
.sl-template-use-btn {
flex-shrink:0;display:flex;align-items:center;gap:4px;
padding:4px 10px;border:1px solid rgba(99,102,241,.4);border-radius:6px;
background:rgba(99,102,241,.1);color:#818cf8;font-size:.75rem;font-weight:600;
cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap;
}
.sl-template-use-btn:hover { background:rgba(99,102,241,.2);border-color:#818cf8; }
.sl-drop-item--template { border-top:1px solid var(--border); gap:10px; }
.sl-drop-template-tag {
font-size:.72rem;font-weight:700;color:#818cf8;
background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.25);
border-radius:4px;padding:2px 7px;flex-shrink:0;
}
/* ── List detail header ───────────────────────────────────────────────────── */
.sl-detail-header {
display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem .25rem;
}
.sl-back-btn {
flex-shrink:0;width:32px;height:32px;border:none;background:transparent;
color:var(--text-muted);cursor:pointer;border-radius:8px;
display:flex;align-items:center;justify-content:center;
transition:background .15s,color .15s;
}
.sl-back-btn:hover { background:var(--surface2);color:var(--text); }
.sl-detail-title { font-size:1.1rem;font-weight:700;margin:0;flex:1; }
.sl-share-btn {
display:inline-flex;align-items:center;gap:5px;
background:var(--surface2);border:1px solid var(--border);border-radius:8px;
padding:6px 12px;font-size:.8rem;font-weight:500;color:var(--text-muted);
cursor:pointer;transition:border-color .15s,color .15s;white-space:nowrap;
}
.sl-share-btn:hover { border-color:var(--accent);color:var(--accent); }
.sl-scan-ai-btn { border-color:rgba(139,92,246,.35);color:#8b5cf6; }
.sl-scan-ai-btn:hover { border-color:#8b5cf6;color:#8b5cf6;background:rgba(139,92,246,.08); }
.sl-scan-ai-icon {
position:relative;display:inline-flex;align-items:center;
}
.sl-sparkle {
position:absolute;top:-5px;right:-5px;
color:#f59e0b;
animation:sparkle-pulse 2.4s ease-in-out infinite;
}
@keyframes sparkle-pulse {
0%,100% { transform:scale(1) rotate(0deg); opacity:1; }
50% { transform:scale(1.4) rotate(20deg); opacity:.7; }
}
.sl-pairing-bar {
display:flex;align-items:center;gap:.4rem;
background:var(--accent-dim);border-radius:8px;
padding:.45rem .75rem;margin:.25rem 1rem .5rem;
font-size:.78rem;color:var(--text);
}
.sl-pairing-bar svg { flex-shrink:0;opacity:.7; }
.sl-pairing-bar strong { font-weight:600; }
.sl-pairing-revoke {
margin-left:auto;background:transparent;border:none;
font-size:.72rem;color:var(--text-muted);cursor:pointer;padding:0;
text-decoration:underline;
}
.sl-pairing-revoke:hover { color:#f87171; }
/* ── Share modal ─────────────────────────────────────────────────────────── */
.sl-modal-backdrop {
position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;
display:flex;align-items:center;justify-content:center;padding:1rem;
}
.sl-modal {
background:var(--surface);border:1px solid var(--border);border-radius:14px;
width:100%;max-width:340px;overflow:hidden;
}
.sl-modal-header {
display:flex;align-items:center;justify-content:space-between;
padding:.75rem 1rem;border-bottom:1px solid var(--border);
font-weight:600;font-size:.95rem;
}
.sl-modal-close {
width:28px;height:28px;border:none;background:transparent;
color:var(--text-muted);cursor:pointer;border-radius:6px;
display:flex;align-items:center;justify-content:center;
}
.sl-modal-body { padding:1.25rem 1rem; }
.sl-share-hint { font-size:.82rem;color:var(--text-muted);margin:0 0 1rem;text-align:center; }
.sl-qr-wrap { display:flex;justify-content:center;margin-bottom:.75rem; }
.sl-qr-wrap canvas { border-radius:8px; }
.sl-share-url {
font-size:.68rem;color:var(--text-muted);word-break:break-all;
text-align:center;margin:0 0 .5rem;
}
.sl-share-info {
background:var(--surface2);border-radius:8px;padding:.75rem;
margin-bottom:.75rem;display:flex;flex-direction:column;gap:.4rem;
}
.sl-share-info-row { display:flex;justify-content:space-between;gap:.5rem; }
.sl-share-label { font-size:.78rem;color:var(--text-muted); }
.sl-share-value { font-size:.78rem;font-weight:500; }
.sl-share-revoke {
width:100%;padding:.55rem;border:1px solid rgba(248,113,113,.4);
border-radius:8px;background:transparent;color:#f87171;
font-size:.82rem;cursor:pointer;transition:background .15s;
}
.sl-share-revoke:hover { background:rgba(248,113,113,.1); }
/* ── Pairing success checkmark (both initiator modal + join page) ───────── */
.pair-success-check {
width:64px;height:64px;border-radius:50%;
background:var(--color-ok,#16a34a);
display:flex;align-items:center;justify-content:center;margin:0 auto;
box-shadow:0 0 0 0 rgba(22,163,74,.45);
animation:pair-check-pop .35s cubic-bezier(.2,.7,.3,1.2), pair-check-pulse 1.4s ease-out .35s;
}
.pair-success-check svg { animation:pair-check-draw .4s ease-out .12s both; }
@keyframes pair-check-pop {
0% { transform:scale(0); opacity:0; }
100% { transform:scale(1); opacity:1; }
}
@keyframes pair-check-draw {
0% { stroke-dasharray:0 40; }
100% { stroke-dasharray:40 40; }
}
@keyframes pair-check-pulse {
0% { box-shadow:0 0 0 0 rgba(22,163,74,.45); }
100% { box-shadow:0 0 0 18px rgba(22,163,74,0); }
}
.sl-share-connected-banner {
display:flex;flex-direction:column;align-items:center;gap:.5rem;
margin-bottom:1rem;text-align:center;
}
.sl-share-connected-banner .pair-title {
font-weight:600;color:var(--color-ok,#16a34a);
}
/* ── Share fallback code (initiator modal) ──────────────────────────────── */
.sl-share-code-block {
display:flex;flex-direction:column;align-items:center;gap:.35rem;
background:var(--surface2);border-radius:8px;padding:.7rem .75rem;
margin:.25rem 0 .6rem;
}
.sl-share-code-label { font-size:.72rem;color:var(--text-muted);text-align:center; }
.sl-share-code {
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:1.5rem;font-weight:800;letter-spacing:.12em;
color:var(--text);user-select:all;
}
.sl-share-code--expired { opacity:.4;text-decoration:line-through; }
.sl-share-code-expiry { font-size:.68rem;color:var(--text-muted); }
.sl-share-code-expiry--expired { color:#f87171; }
.sl-share-code-new {
margin-top:.2rem;padding:.35rem .8rem;border:none;border-radius:7px;
background:var(--accent);color:#fff;font-size:.78rem;font-weight:600;cursor:pointer;
}
.sl-share-code-new--subtle {
background:none;color:var(--accent);text-decoration:underline;
padding:0;font-weight:500;
}
/* ── Share modal: choose share-vs-join ──────────────────────────────────── */
.sl-share-choice { display:flex;flex-direction:column;gap:.6rem;margin-top:.25rem; }
.sl-share-choice-btn {
display:flex;align-items:center;gap:.75rem;text-align:left;
padding:.85rem .9rem;border:1px solid var(--border);border-radius:10px;
background:var(--surface);color:var(--text);cursor:pointer;transition:border-color .15s,background .15s;
}
.sl-share-choice-btn:hover { border-color:var(--accent);background:var(--surface2); }
.sl-share-choice-btn > svg { flex:0 0 auto;color:var(--accent); }
.sl-share-choice-text { display:flex;flex-direction:column;gap:.15rem;min-width:0; }
.sl-share-choice-title { font-size:.92rem;font-weight:600;display:flex;align-items:center; }
.sl-share-choice-sub { font-size:.75rem;color:var(--text-muted); }
.sl-share-back {
background:none;border:none;padding:0 0 .5rem;cursor:pointer;
font-size:.82rem;color:var(--text-muted);align-self:flex-start;
}
.sl-share-back:hover { color:var(--text); }
/* ── Join by fallback code (recipient) ──────────────────────────────────── */
.sl-joincode-form { display:flex;gap:.5rem;margin-top:.5rem;flex-wrap:wrap; }
.sl-joincode-input {
flex:1;min-width:150px;padding:.5rem .6rem;border:1px solid var(--border);
border-radius:8px;background:var(--surface);color:var(--text);
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:1rem;letter-spacing:.1em;text-transform:uppercase;
}
.sl-joincode-submit {
padding:.5rem .9rem;border:none;border-radius:8px;
background:var(--accent);color:#fff;font-size:.85rem;font-weight:600;cursor:pointer;
}
.sl-joincode-submit:hover { filter:brightness(1.05); }
.sl-joincode-error { font-size:.78rem;color:#f87171;margin-top:.4rem; }
/* ── List card progress bar ──────────────────────────────────────────────── */
.sl-progress { height:3px;background:var(--border);border-radius:99px;margin-top:5px;overflow:hidden; }
.sl-progress-fill { height:100%;background:var(--accent);border-radius:99px;transition:width .3s; }
.sl-list-card--done .sl-progress-fill { background:rgba(34,197,94,.35); }
/* ── Recipe-locked list: chain banner ───────────────────────────────────── */
.sl-locked-chain-banner {
display: flex; align-items: baseline; gap: .5rem;
padding: 10px 0 6px; border-bottom: 1px solid var(--border); margin-bottom: 10px;
}
.sl-locked-chain-name {
font-size: 1.35rem; font-weight: 900; text-transform: uppercase;
letter-spacing: .07em; color: var(--accent);
}
.sl-locked-chain-sub {
font-size: .72rem; color: var(--text-muted); font-weight: 500;
}
/* ── Hero cheapest total ─────────────────────────────────────────────────── */
.sl-best-total { display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap;padding:4px 2px 10px; }
.sl-best-total-amount { font-size:2rem;font-weight:900;color:var(--accent);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums; }
.sl-best-total-chain { font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);align-self:flex-end;padding-bottom:3px; }
.sl-best-total-saving { font-size:.72rem;color:var(--accent);opacity:.7;border:1px solid rgba(34,197,94,.25);border-radius:100px;padding:1px 7px;align-self:flex-end;padding-bottom:3px; }
.sl-best-total-coverage { width:100%;font-size:.7rem;color:var(--text-dim);margin-top:-2px; }
.sl-excluded-items { display:flex;flex-wrap:wrap;gap:.3rem;padding:6px 2px 10px;align-items:center; }
.sl-excluded-label { font-size:.68rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-right:.2rem; }
.sl-excluded-item { font-size:.72rem;color:var(--text-muted);display:flex;align-items:center;gap:.25rem;background:var(--surface2);border-radius:6px;padding:2px 7px; }
.sl-excluded-reason { font-size:.65rem;color:var(--text-dim);font-style:italic; }
.sl-comparison-disclaimer { margin:4px 0 6px;font-size:.68rem;color:var(--text-dim);font-style:italic; }
/* ── P5: split-shop trade-off ────────────────────────────────────────────────
Presented as an alternative, never as the recommendation: quiet surface, collapsed by default, so
the single cheapest store remains the headline answer for anyone who wants one trip. */
.sl-split { margin: 6px 0 8px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--surface2); overflow: hidden; }
.sl-split-head {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 9px 11px; background: none; border: none; cursor: pointer; text-align: left;
}
.sl-split-head:hover { background: var(--surface); }
.sl-split-ic { flex-shrink: 0; font-size: 1rem; }
.sl-split-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sl-split-title { font-size: .84rem; font-weight: 700; color: var(--text); }
.sl-split-sub { font-size: .71rem; color: var(--text-muted); line-height: 1.35; }
.sl-split-chev { flex-shrink: 0; color: var(--text-muted); font-size: .8rem; }
.sl-split-list { list-style: none; margin: 0; padding: 0 11px 4px; }
.sl-split-row {
display: flex; align-items: center; gap: 7px; padding: 5px 0;
border-top: 1px solid var(--border-soft); font-size: .76rem;
}
.sl-split-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.sl-split-chain { flex-shrink: 0; font-weight: 700; font-size: .68rem; }
.sl-split-price { flex-shrink: 0; font-weight: 600; color: var(--text-muted); }
.sl-split-delta { flex-shrink: 0; font-weight: 700; color: var(--accent); }
.sl-split-note { margin: 2px 11px 9px; font-size: .67rem; color: var(--text-dim); font-style: italic; }
/* ── Inline rename ───────────────────────────────────────────────────────── */
.sl-detail-title--tap { cursor:pointer; }
.sl-detail-title--tap:hover { color:var(--accent); }
.sl-title-input { flex:1;font-size:1.05rem;font-weight:700;color:var(--text);background:var(--surface2);border:1px solid rgba(34,197,94,.5);border-radius:8px;padding:5px 10px;outline:none;min-width:0; }
/* ── Share link button + panel ───────────────────────────────────────────── */
.sl-link-btn { flex-shrink:0;width:32px;height:32px;border:none;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s; }
.sl-link-btn:hover, .sl-link-btn--active { background:var(--accent-dim);color:var(--accent); }
.sl-sharelink-panel { display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:.6rem .75rem;margin:.25rem 1rem .5rem; }
.sl-sharelink-url { flex:1;font-size:.72rem;color:var(--text-muted);word-break:break-all;min-width:0; }
.sl-sharelink-copy { flex-shrink:0;padding:4px 10px;background:var(--accent);color:#000;border:none;border-radius:6px;font-size:.75rem;font-weight:700;cursor:pointer;transition:opacity .15s; }
.sl-sharelink-copy:hover { opacity:.85; }
.sl-sharelink-revoke { flex-shrink:0;padding:4px 10px;background:transparent;border:1px solid rgba(248,113,113,.4);color:#f87171;border-radius:6px;font-size:.75rem;cursor:pointer;transition:background .15s; }
.sl-sharelink-revoke:hover { background:rgba(248,113,113,.1); }
.sl-sharelink-expiry { width:100%;font-size:.68rem;color:var(--text-dim);margin-bottom:2px; }
/* ── Shared list header ──────────────────────────────────────────────────── */
.sl-shared-badge { display:inline-flex;align-items:center;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--accent);background:var(--accent-dim);border-radius:4px;padding:2px 7px;margin-bottom:2px; }
/* ── OCR diagnostics (admin) ─────────────────────────────────────────────── */
.ocr-diag-grid { display:flex;flex-direction:column;gap:0;margin-bottom:.5rem; }
.ocr-diag-row {
display:grid;grid-template-columns:160px 1fr;gap:.75rem;
padding:6px 0;border-bottom:1px solid var(--border);font-size:.85rem;
}
.ocr-diag-key { color:var(--text-muted);font-weight:500;flex-shrink:0;padding-top:1px; }
.ocr-diag-val { word-break:break-all;line-height:1.5; }
.ocr-ok { color:#4ade80; }
.ocr-err { color:#f87171; }
.ocr-lib-list { display:flex;flex-direction:column;gap:2px; }
.ocr-lib-entry { font-size:.78rem;color:var(--text-muted); }
.ocr-lib-entry.ocr-ok { color:#4ade80; }
.ocr-req-row { display:flex;align-items:center;gap:.5rem;padding:2px 0; }
/* ── Fridge modal ─────────────────────────────────────────────────────────── */
.fridge-backdrop { position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:300;display:flex;align-items:center;justify-content:center;padding:1rem; }
.fridge-modal { background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:480px;display:flex;flex-direction:column;max-height:90vh; }
.fridge-header { display:flex;align-items:center;gap:.5rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--border);font-weight:700;font-size:.95rem;flex-shrink:0; }
.fridge-header span { flex:1; }
.fridge-body { flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1rem; }
.fridge-img { width:100%;border-radius:10px;object-fit:cover;max-height:60vh; }
.fridge-ts { font-size:.78rem;color:var(--text-muted);align-self:flex-start; }
.fridge-empty { display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:2rem 0;color:var(--text-dim); }
.fridge-empty p { font-size:.88rem; }
.fridge-saving { display:flex;align-items:center;gap:.75rem;padding:2rem;color:var(--text-muted);font-size:.9rem; }
.fridge-footer { padding:.9rem 1rem;border-top:1px solid var(--border);flex-shrink:0; }
.fridge-video { width:100%;border-radius:10px;object-fit:cover;max-height:60vh;background:#000; }
.fridge-gallery { display:flex;flex-direction:column;gap:1rem;width:100%; }
.fridge-item { position:relative;width:100%; }
.fridge-del { position:absolute;top:.5rem;right:.5rem;width:36px;height:36px;border-radius:8px;border:none;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer; }
.fridge-del:hover { background:rgba(220,53,69,.85); }
.fridge-count { font-size:.78rem;font-weight:600;color:var(--text-muted);white-space:nowrap;margin-right:.5rem; }
.fridge-limit { font-size:.8rem;color:var(--text-muted);text-align:center;margin:0 0 .6rem; }
.fridge-note { font-size:.75rem;color:var(--text-dim);text-align:center;margin:.6rem 0 0; }
/* ── Landing page ─────────────────────────────────────────────────────────── */
.landing-wrap { max-width: 540px; margin: 0 auto; padding: 4rem 1.5rem 3rem; display: flex; flex-direction: column; gap: 3.5rem; }
.landing-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.25rem; }
.landing-title { font-size: 2.6rem; font-weight: 900; letter-spacing: -1.5px; background: linear-gradient(125deg, var(--text) 0%, var(--text-muted) 40%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; }
.landing-accent { background: linear-gradient(125deg, var(--accent), var(--logo-span-end)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.landing-tagline { font-size: 1.05rem; color: var(--text-muted); line-height: 1.6; max-width: 400px; }
.landing-cta { display: flex; gap: .75rem; flex-wrap: wrap; justify-content: center; margin-top: .5rem; }
.landing-btn { min-width: 130px; text-align: center; text-decoration: none; }
/* ── Landing price search ─────────────────────────────────────────────────────
The page now opens on a working search rather than on a headline, so this block sits where the
hero used to and carries the same weight. */
.landing-search { display: flex; flex-direction: column; gap: .8rem; }
/* The /sok search box is SCOPED css (Sok.razor.css), so it cannot be borrowed by another page —
reusing its class names here rendered an unstyled, thumbnail-sized input. These are the landing
page's own, mirroring that box's shape. */
.landing-search-row { display: flex; gap: .5rem; width: 100%; }
.landing-search-input {
flex: 1; min-width: 0; padding: .8rem 1rem; font-size: 1rem;
border: 1.5px solid var(--border); border-radius: 12px;
background: var(--surface); color: var(--text); outline: none;
transition: border-color .15s, box-shadow .15s;
}
.landing-search-input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.landing-search-btn {
flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
padding: 0 1.1rem; border: none; border-radius: 12px;
background: var(--accent); color: #fff; cursor: pointer; transition: filter .15s;
}
.landing-search-btn:hover { filter: brightness(1.06); }
.landing-search-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.landing-search-head .landing-showcase-label { text-transform: none; font-size: .95rem; color: var(--text); letter-spacing: 0; }
.landing-search-all { font-size: .75rem; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.landing-search-all:hover { text-decoration: underline; }
.landing-search-empty { font-size: .88rem; color: var(--text-muted); margin: 0; }
.landing-search-list { display: flex; flex-direction: column; gap: .45rem; }
.landing-search-pager { margin-top: .2rem; }
/* One result row: picture, what it is, what it costs, where. */
.landing-sr {
display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem;
background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius);
text-decoration: none; color: inherit; transition: border-color .15s;
}
.landing-sr:hover { border-color: var(--accent); }
.landing-sr-img {
width: 42px; height: 42px; flex-shrink: 0; object-fit: contain;
background: #fff; border: 1px solid var(--border-soft); border-radius: 8px; padding: 2px;
}
.landing-sr-ph {
width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
background: var(--surface3); border-radius: 8px; font-size: 1.1rem;
}
.landing-sr-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.landing-sr-name { font-size: .92rem; font-weight: 700; line-height: 1.25;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing-sr-meta { display: flex; gap: .45rem; font-size: .68rem; color: var(--text-muted);
white-space: nowrap; overflow: hidden; }
.landing-sr-price { flex-shrink: 0; display: flex; align-items: baseline; font-variant-numeric: tabular-nums; }
.landing-sr-kr { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.landing-sr-ore { font-size: .62rem; font-weight: 800; align-self: flex-start; }
.landing-sr-chain {
flex-shrink: 0; min-width: 46px; text-align: center;
font-size: .6rem; font-weight: 800; color: var(--text-muted);
text-transform: uppercase; letter-spacing: .02em;
}
/* ── "Slik funker det" — collapsed by default, opens on demand ────────────────── */
.landing-how { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; }
.landing-how-head {
display: flex; align-items: center; gap: .6rem; width: 100%;
padding: .85rem 1rem; background: none; border: none; color: inherit;
cursor: pointer; text-align: left;
}
.landing-how-head:hover { background: var(--surface2); }
.landing-how-title { font-size: .92rem; font-weight: 700; }
.landing-how-sub { flex: 1; font-size: .75rem; color: var(--text-muted); }
.landing-how-chev { flex-shrink: 0; color: var(--text-muted); transition: transform .18s ease; }
.landing-how--open .landing-how-chev { transform: rotate(180deg); color: var(--accent); }
.landing-how-body { padding: 0 1rem 1rem; border-top: 1px solid var(--border-soft); }
/* ── Landing scan showcase ────────────────────────────────────────────────── */
.landing-showcase { display: flex; flex-direction: column; gap: .65rem; }
.landing-showcase-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-dim); }
.landing-showcase-empty { padding: 2rem 1.5rem; text-align: center; color: var(--text-muted); font-size: .88rem; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); }
.landing-articles { display: flex; flex-direction: column; gap: .65rem; margin-bottom: 1.5rem; }
.landing-articles-list { display: flex; flex-direction: column; gap: .55rem; }
.landing-article { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.landing-article:hover { border-color: var(--accent); transform: translateY(-1px); }
.landing-article-img { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.landing-article-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.landing-article-title { font-size: .95rem; font-weight: 700; line-height: 1.25; }
.landing-article-sub { font-size: .8rem; color: var(--text-dim); line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lsc-carousel {
border-radius: var(--radius-lg, 16px);
border: 1px solid var(--border-soft);
background: var(--surface);
box-shadow: 0 14px 36px -20px rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.06);
overflow: hidden;
}
.lsc-viewport {
position: relative;
overflow: hidden;
touch-action: pan-y; /* let vertical scroll through, capture horizontal */
cursor: grab;
-webkit-user-select: none; user-select: none;
}
.lsc-viewport--grabbing { cursor: grabbing; }
.lsc-track { display: flex; width: 100%; transition: transform .45s cubic-bezier(.4,0,.2,1); will-change: transform; }
/* flex:0 0 100% + min-width:0 pins each slide to exactly the viewport width; without
min-width:0 a wide price-tag image lets the slide grow past the phone screen, so the
carousel pans across one oversized photo instead of advancing to the next tag. */
.lsc-slide { flex: 0 0 100%; min-width: 0; max-width: 100%; }
.lsc-slide .scan-card { border: none; border-radius: 0; background: transparent; }
/* prev / next arrows (overlay, hover-capable pointers only) */
.lsc-arrow {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--surface) 82%, transparent);
backdrop-filter: blur(6px);
border: 1px solid var(--border-soft); color: var(--text);
box-shadow: 0 4px 14px -4px rgba(0,0,0,.3); cursor: pointer;
opacity: 0; transition: opacity .18s, background .18s, transform .12s;
}
.lsc-arrow--prev { left: .55rem; }
.lsc-arrow--next { right: .55rem; }
.lsc-arrow:hover { background: var(--surface); color: var(--accent); }
.lsc-arrow:active { transform: translateY(-50%) scale(.92); }
.lsc-carousel:hover .lsc-arrow { opacity: 1; }
@media (hover: none) { .lsc-arrow { display: none; } } /* touch: swipe instead */
.lsc-dots { display: flex; justify-content: center; gap: .45rem; padding: .65rem; background: var(--surface); border-top: 1px solid var(--border-soft); }
.lsc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--surface3); cursor: pointer; transition: background .2s, transform .2s, width .2s; border: none; padding: 0; }
.lsc-dot:hover { background: var(--text-dim); }
.lsc-dot.active { background: var(--accent); width: 18px; border-radius: 4px; }
/* ── Scan card (shared: landing carousel + nyeste-priser grid) ─────────────── */
.scan-card {
border-radius: var(--radius-lg, 16px); overflow: hidden;
background: var(--surface); border: 1px solid var(--border-soft);
transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s, border-color .18s;
}
.scan-card-img { position: relative; background: #111; line-height: 0; }
.scan-card-img img { width: 100%; max-width: 100%; display: block; object-fit: cover; max-height: 240px; }
.scan-card-img::after { /* legibility scrim behind the price badge */
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 38%);
}
.scan-card-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
/* Stretched link over the whole price-tag image → product page (see ScanCard Href). */
.scan-card-img-link { position: absolute; inset: 0; z-index: 3; cursor: pointer; }
.scan-card-img-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.scan-card-price-badge {
position: absolute; bottom: .6rem; right: .6rem; z-index: 2;
background: linear-gradient(135deg, rgba(20,20,20,.92), rgba(0,0,0,.82));
backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12);
border-radius: 11px; padding: .35rem .7rem;
display: flex; align-items: baseline; gap: .3rem;
box-shadow: 0 4px 14px -4px rgba(0,0,0,.6);
}
.scan-card-price-kr { font-size: 1.35rem; font-weight: 800; color: #fff; letter-spacing: -.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.scan-card-price-unit { font-size: .75rem; color: rgba(255,255,255,.62); }
.scan-card-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; padding: .7rem .9rem .8rem; background: var(--surface); }
.scan-card-info { min-width: 0; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.scan-card-store {
font-size: .72rem; font-weight: 700; letter-spacing: .02em;
color: var(--accent); text-transform: uppercase;
background: color-mix(in srgb, var(--accent) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
padding: .12rem .5rem; border-radius: 999px; line-height: 1.4;
}
.scan-card-unitrate { font-size: .72rem; color: var(--text-muted); }
.scan-card-time { flex-shrink: 0; font-size: .74rem; color: var(--text-dim); white-space: nowrap; }
/* hover lift only where it's an individual card (grid), not inside the carousel */
@media (hover: hover) {
.np-card-wrap .scan-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -14px rgba(0,0,0,.5); border-color: color-mix(in srgb, var(--accent) 35%, var(--border-soft)); }
}
/* ── Nyeste priser page ───────────────────────────────────────────────────── */
.scan-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.np-page-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1.25rem; }
.np-page-title { font-size: 1.25rem; font-weight: 800; margin: 0 0 .2rem; }
.np-page-sub { font-size: .82rem; color: var(--text-dim); margin: 0; }
.np-ocr-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--text-dim); cursor: pointer; user-select: none; white-space: nowrap; }
.np-ocr-toggle input { accent-color: var(--accent, #facc15); width: 15px; height: 15px; cursor: pointer; }
.np-chain-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
/* Filter card: one labelled row per level (kjede → kategori → type), each chip carrying its count. */
.np-filter-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
padding: .7rem .9rem; margin-bottom: 1.1rem;
display: flex; flex-direction: column; gap: .55rem;
}
.np-filter-row { display: flex; align-items: baseline; gap: .7rem; }
.np-filter-row + .np-filter-row { border-top: 1px solid var(--border-soft); padding-top: .55rem; }
.np-filter-label {
flex: 0 0 4.6rem; font-size: .58rem; font-weight: 800; letter-spacing: .12em;
text-transform: uppercase; color: var(--text-dim);
}
.np-filter-chips { display: flex; flex-wrap: wrap; gap: .35rem; flex: 1; min-width: 0; }
/* The count rides inside its chip so it can never be read against the wrong label. */
.np-chip-n {
margin-left: .38rem; font-size: .66rem; font-weight: 800; font-variant-numeric: tabular-nums;
opacity: .62;
}
.np-chip-active .np-chip-n { opacity: .78; }
@media (max-width: 560px) {
/* Stack the label above its chips rather than squeezing both onto one line. */
.np-filter-row { flex-direction: column; align-items: stretch; gap: .35rem; }
.np-filter-label { flex: none; }
}
.np-chip { font-size: .78rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface, #fff); color: var(--text-dim); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.np-chip:hover { border-color: var(--accent, #facc15); }
.np-chip-active { background: var(--accent, #facc15); border-color: var(--accent, #facc15); color: #1a1a1a; }
.np-pager { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; margin-top: 1.25rem; }
.np-card-wrap { position: relative; }
.np-edit-btn {
position: absolute; top: .45rem; right: .45rem; z-index: 2;
background: rgba(0,0,0,.58); backdrop-filter: blur(4px);
border: none; border-radius: 7px; color: #fff; cursor: pointer;
padding: 6px; display: flex; align-items: center; justify-content: center;
transition: background .15s, opacity .15s;
}
.np-edit-btn:hover { background: rgba(0,0,0,.82); }
.np-no-img {
position: relative;
background:
radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 55%),
var(--surface2);
padding: 1.6rem 1.15rem; display: flex; align-items: baseline; gap: .45rem;
min-height: 104px; border-bottom: 1px solid var(--border-soft);
}
/* Signature .price treatment; only the hero int size is bumped past --xl */
.np-no-img-price { letter-spacing: var(--tracking-tighter); }
.np-no-img-price .price__int { font-size: 2.4rem; }
.np-no-img-unit { font-size: .95rem; font-weight: 600; color: var(--text-muted); align-self: center; }
.np-no-img-empty { font-size: .95rem; color: var(--text-dim); }
.np-product-name {
font-size: .8rem; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
margin-bottom: .15rem;
}
/* ── Edit modal ──────────────────────────────────────────────────────────── */
.np-modal-backdrop {
position: fixed; inset: 0; z-index: 1000;
background: rgba(0,0,0,.55); display: flex;
align-items: center; justify-content: center; padding: 1rem;
}
.np-modal {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-lg); width: 100%; max-width: 380px;
box-shadow: var(--elev-overlay);
}
.np-modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: .9rem 1rem; border-bottom: 1px solid var(--border-soft);
font-weight: 700; font-size: .95rem;
}
.np-modal-close {
background: none; border: none; cursor: pointer; color: var(--text-muted);
font-size: 1rem; padding: 2px 6px; border-radius: 5px; line-height: 1;
transition: color .15s;
}
.np-modal-close:hover { color: var(--text); }
.np-modal-body { padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.np-field { display: flex; flex-direction: column; gap: .3rem; }
.np-field > span { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
.np-field-row { display: grid; grid-template-columns: 2fr 1fr; gap: .6rem; }
.np-field-error { font-size: .82rem; color: #f87171; margin: 0; }
.np-modal-footer {
display: flex; justify-content: flex-end; gap: .5rem;
padding: .75rem 1rem; border-top: 1px solid var(--border-soft);
}
/* Catalog (NormalizedProduct) section inside the edit modal */
.np-catalog {
display: flex; flex-direction: column; gap: .75rem;
padding-top: .85rem; margin-top: .25rem;
border-top: 1px dashed var(--border-soft);
}
.np-catalog-head {
display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
font-size: .72rem; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; color: var(--text-dim);
}
.np-cat-badge {
font-size: .64rem; font-weight: 700; padding: .12em .5em; border-radius: 999px;
text-transform: uppercase; letter-spacing: .03em;
}
.np-cat-badge-ok { background: rgba(34,197,94,.16); color: #22c55e; }
.np-cat-badge-warn { background: rgba(250,204,21,.16); color: #d4a017; }
.np-cat-type {
font-size: .68rem; font-weight: 600; text-transform: none; letter-spacing: 0;
color: var(--text-dim); opacity: .8;
}
.np-gpt-btn { margin-left: auto; }
.np-catalog-hint { font-size: .78rem; color: var(--text-dim); margin: 0; opacity: .85; }
.np-prices { display: flex; flex-direction: column; gap: .3rem; }
.np-prices-label {
font-size: .68rem; font-weight: 600; text-transform: uppercase;
letter-spacing: .05em; color: var(--text-dim);
}
.np-prices-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.np-prices-table th {
text-align: left; font-weight: 600; color: var(--text-dim);
padding: .2em .4em; border-bottom: 1px solid var(--border-soft);
}
.np-prices-table td { padding: .2em .4em; border-bottom: 1px solid var(--border-soft); }
/* ── Receipt scanner ──────────────────────────────────────────────────────── */
.sl-receipt-btn {
background: none; border: none; cursor: pointer; padding: 6px;
color: var(--text-muted); border-radius: 8px; display: flex;
transition: color .15s, background .15s;
}
.sl-receipt-btn:hover { color: var(--text); background: var(--surface2); }
.rcpt-overlay {
position: fixed; inset: 0; z-index: 8000;
background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center;
}
.rcpt-modal {
width: min(480px, 100vw); display: flex; flex-direction: column;
background: var(--surface); border-radius: 16px; overflow: hidden;
box-shadow: var(--elev-overlay);
}
.rcpt-header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 16px; border-bottom: 1px solid var(--border-soft);
}
.rcpt-title { font-size: .95rem; font-weight: 700; }
.rcpt-close {
background: none; border: none; cursor: pointer; color: var(--text-muted);
padding: 4px; border-radius: 6px; display: flex;
transition: color .15s;
}
.rcpt-close:hover { color: var(--text); }
.rcpt-camera-wrap { position: relative; background: #000; }
.rcpt-video { width: 100%; display: block; }
.rcpt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rcpt-status {
position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
background: rgba(0,0,0,.65); color: #fff; font-size: .82rem; font-weight: 600;
padding: 5px 14px; border-radius: 20px; white-space: nowrap;
}
.rcpt-status--ok { background: rgba(0,180,80,.75); }
/* Community-scan success: big green checkmark flashed over the camera per accepted tag */
.scan-confirm-overlay {
position: absolute; inset: 0; z-index: 2;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
animation: scanConfirmIn .2s ease-out;
}
.scan-confirm-overlay svg { animation: scanConfirmPop .3s cubic-bezier(.2,1.3,.5,1) both; }
.scan-confirm-text { color: #fff; font-size: .95rem; font-weight: 700; }
@keyframes scanConfirmIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scanConfirmPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Community-scan tally: one checkmark per tag sent, plus the close button, at the modal's foot */
.scan-tally {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 12px 14px; border-top: 1px solid var(--border-soft); background: var(--surface);
}
.scan-tally-marks { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; flex-wrap: wrap; }
.scan-tally-check { flex-shrink: 0; animation: scanConfirmPop .3s cubic-bezier(.2,1.3,.5,1) both; }
.scan-tally-hint { font-size: .82rem; color: var(--text-muted); }
.scan-tally-more,
.scan-tally-count { font-size: .8rem; font-weight: 700; color: var(--text-muted); }
.scan-tally-count { margin-left: 4px; }
.scan-tally-close { flex-shrink: 0; }
/* ── Community price-scan card (between first & second list item) ────────── */
/* ── Community-scan prompt — floating card pinned above the bottom tab bar, follows the scroll.
z-index 95: above the tab bar (90) — they never overlap in a correct layout, but if any
environment ever lands them on the same band the card must WIN, not vanish behind the bar
with only its top edge peeking out. Still below every modal/overlay (98+). */
.sl-scan-float {
position: fixed; z-index: 95;
left: 50%; transform: translateX(-50%);
bottom: 72px; /* plain fallback: keeps the card above the 60px tab bar if the calc line is dropped */
bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 12px);
width: min(500px, calc(100vw - 24px));
display: flex; align-items: stretch;
border-radius: 16px;
border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-soft));
background: linear-gradient(135deg,
color-mix(in srgb, var(--accent) 14%, var(--surface)) 0%, var(--surface) 70%);
box-shadow: 0 10px 30px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
/* Own keyframes, NOT the shared slideUp: its transform ends at translateY(0), which would
overwrite the translateX(-50%) doing the horizontal centering (the card then sat off-center). */
animation: scanFloatUp .25s ease both;
}
@keyframes scanFloatUp {
from { opacity: 0; transform: translate(-50%, 12px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* No tab bar on desktop (≥768px) — sit on the viewport edge instead. */
@media (min-width: 768px) { .sl-scan-float { bottom: 18px; } }
/* 3-second acknowledgement after a community-scan session that sent at least one tag */
.sl-scan-float--thanks {
border-color: color-mix(in srgb, #22c55e 45%, var(--border-soft));
background: linear-gradient(135deg,
color-mix(in srgb, #22c55e 14%, var(--surface)) 0%, var(--surface) 70%);
}
.sl-scan-float--thanks .sl-scan-float-icon { background: #22c55e; box-shadow: 0 3px 10px rgba(34,197,94,.35); }
.sl-scan-float--thanks .sl-scan-float-cta { color: #16a34a; }
.sl-scan-float-main {
flex: 1 1 auto; min-width: 0;
display: flex; align-items: center; gap: 12px;
padding: 11px 4px 11px 12px;
background: none; border: none; cursor: pointer;
text-align: left; color: inherit; border-radius: 16px 0 0 16px;
}
.sl-scan-float-icon {
flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: var(--accent); color: #fff;
box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 40%, transparent);
}
.sl-scan-float-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sl-scan-float-title { font-weight: 800; font-size: .87rem; letter-spacing: -.01em; }
.sl-scan-float-sub { font-size: .74rem; color: var(--text-muted); }
.sl-scan-float-cta { flex-shrink: 0; display: flex; align-items: center; padding-right: 4px; color: var(--accent); }
.sl-scan-float-close {
flex: 0 0 auto; width: 34px;
display: flex; align-items: center; justify-content: center;
background: none; border: none; border-left: 1px solid var(--border-soft);
color: var(--text-dim); cursor: pointer; border-radius: 0 16px 16px 0;
transition: background .12s, color .12s;
}
.sl-scan-float-close:hover { color: var(--text); background: var(--surface2); }
/* Room under the list so the floating card never covers the last rows. */
.sl-wrap--floatpad { padding-bottom: calc(var(--tab-h) + 120px); }
/* ── DATABASE ADMIN PAGE ─────────────────────────────────────────────────── */
.db-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 16px;
align-items: start;
}
@media (max-width: 700px) { .db-layout { grid-template-columns: 1fr; } }
.db-results-col { display: flex; flex-direction: column; }
.db-detail-col { min-width: 0; }
.db-detail-card {
background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--radius); padding: 16px 18px;
box-shadow: var(--card-shine);
}
/* Collapsible section header (Generiske-tab) */
.db-collapse-head {
display: inline-flex; align-items: center; gap: 7px;
background: none; border: none; cursor: pointer; padding: 2px 0;
color: var(--text);
}
.db-collapse-head:hover { opacity: .82; }
.db-node-count { font-size: .74rem; color: var(--text-dim); font-weight: 400; }
/* Keyword treeview */
.db-tree { display: flex; flex-direction: column; gap: 2px; }
.db-tree-cat { display: flex; flex-direction: column; }
.db-tree-child { display: flex; flex-direction: column; margin-left: 18px; border-left: 1px solid var(--border-soft); padding-left: 8px; }
.db-tree-node {
display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0;
background: none; border: none; cursor: pointer; padding: 4px 6px;
border-radius: 6px; color: var(--text); text-align: left; font-size: .84rem;
}
.db-tree-node:hover { background: var(--surface2); }
.db-tree-caret { width: 10px; height: 10px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; color: var(--text-muted); }
.db-tree-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-tree-type { color: var(--text-muted); }
.db-tree-node-row { display: flex; align-items: center; gap: 4px; }
.db-tree-edit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 6px; }
.db-tree-products {
margin-left: 24px; padding: 8px 10px; margin-bottom: 4px;
background: var(--surface2); border: 1px solid var(--border-soft); border-radius: 8px;
display: grid; gap: 5px;
}
.db-tree-prod-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.db-tree-prod-name { font-size: .8rem; font-weight: 600; color: var(--text); flex: 1; min-width: 140px; text-decoration: none; }
.db-tree-prod-name:hover { text-decoration: underline; }
/* Per-type sub-groups (nøkkelord / generiske / produkter) */
.db-tree-grp { margin: 6px 0 4px; }
.db-tree-grp-head {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
color: var(--text-muted); margin-bottom: 4px;
}
.db-tree-empty { font-size: .76rem; color: var(--text-dim); padding: 2px 0; }
.db-tree-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.db-kw-chip {
display: inline-flex; align-items: center; gap: 5px;
background: var(--surface); border: 1px solid var(--border-soft); border-radius: 100px;
padding: 2px 6px 2px 10px; font-size: .78rem;
}
.db-gen-chip {
display: inline-flex; align-items: center; font-size: .76rem; color: var(--text-muted);
background: var(--surface); border: 1px solid var(--border-soft); border-radius: 100px; padding: 2px 9px;
}
.db-chip-btn { background: none; border: none; cursor: pointer; padding: 0 2px; font-size: .78rem; line-height: 1; }
.db-tree-add { background: none; border: none; cursor: pointer; color: var(--accent); font-size: .74rem; padding: 0; }
.db-tree-add:hover { text-decoration: underline; }
.db-hit-row {
width: 100%; display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border-radius: var(--radius);
background: var(--surface); border: 1px solid var(--border-soft);
color: var(--text); cursor: pointer; text-align: left;
box-shadow: var(--card-shine);
transition: border-color .12s, background .12s;
}
.db-hit-row:hover { border-color: rgba(255,255,255,.1); background: var(--surface2); }
.db-hit-row--active {
border-color: var(--accent);
background: rgba(34,197,94,.05);
box-shadow: var(--card-shine), 0 0 0 1px var(--accent);
}
.db-src-badge {
font-size: .62rem; font-weight: 700; border-radius: 4px;
padding: 1px 5px; white-space: nowrap; flex-shrink: 0; line-height: 1.7;
}
.db-src-badge--normalized { background: rgba(56,189,248,.15); color: #38bdf8; border: 1px solid rgba(56,189,248,.3); }
.db-src-badge--generic { background: rgba(34,197,94,.15); color: #4ade80; border: 1px solid rgba(34,197,94,.3); }
.db-src-badge--grocery { background: rgba(251,191,36,.15); color: #fbbf24; border: 1px solid rgba(251,191,36,.3); }
/* ── APP FOOTER ─────────────────────────────────────────────────────────── */
.app-footer {
text-align: center;
font-size: .72rem;
color: var(--text-muted);
padding: 1.5rem 1rem calc(var(--tab-h, 60px) + env(safe-area-inset-bottom, 0px) + 1.5rem);
line-height: 1.8;
}
.app-footer a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.app-footer a:hover { color: var(--accent); }
@media (min-width: 768px) { .app-footer { padding-bottom: 2rem; } }
/* ── BOTTOM TAB BAR ─────────────────────────────────────────────────────── */
.bottom-tab-bar {
position: fixed; bottom: 0; left: 0; right: 0;
z-index: 90;
display: flex; align-items: stretch;
background: var(--tab-bar-bg);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border-top: 1px solid var(--border);
height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 768px) { .bottom-tab-bar { display: none; } }
.bottom-tab {
flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px;
padding: 8px 4px;
color: var(--text-muted);
text-decoration: none;
font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
transition: color 0.15s ease;
position: relative;
-webkit-tap-highlight-color: transparent;
}
.bottom-tab svg { flex-shrink: 0; transition: transform 0.15s ease; }
.bottom-tab:hover { color: var(--text); }
.bottom-tab:hover svg { transform: translateY(-1px); }
.bottom-tab.active { color: var(--accent); }
.bottom-tab.active svg { color: var(--accent); }
.bottom-tab.active::after {
content: '';
position: absolute;
top: 0; left: 20%; right: 20%;
height: 2px;
background: var(--accent);
border-radius: 0 0 3px 3px;
}
/* ── SKELETON LOADING ────────────────────────────────────────────────────── */
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(
90deg,
var(--surface2) 25%,
var(--surface3) 50%,
var(--surface2) 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s ease-in-out infinite;
border-radius: 6px;
}
.skeleton-line { height: 12px; }
.skeleton-line--sm { height: 9px; }
.skeleton-line--lg { height: 20px; }
.skeleton-card {
background: var(--surface); border: 1px solid var(--border-soft);
border-radius: var(--radius); padding: 14px 16px;
display: flex; flex-direction: column; gap: 10px;
box-shadow: var(--card-shine);
}
/* ── CHAIN CARD ACCENTS ──────────────────────────────────────────────────── */
.sl-chain-card {
box-shadow: var(--card-shine);
border-left-width: 2px; border-left-style: solid;
border-left-color: transparent;
}
/* Chain cards use a uniform colour across all chains (no per-brand accent). */
/* ── PRICE BREAKDOWN TABLE ───────────────────────────────────────────────── */
.sl-price-table {
width: 100%; border-collapse: collapse; font-size: .82rem;
}
.sl-price-table thead th {
padding: .55rem .6rem; border-bottom: 1px solid var(--border);
font-weight: 600; white-space: nowrap;
}
.sl-price-table tbody tr + tr { border-top: 1px solid rgba(255,255,255,.05); }
.sl-price-table tbody tr:hover { background: rgba(255,255,255,.03); }
.sl-price-table tfoot tr { border-top: 2px solid var(--border); }
.sl-pt-name {
text-align: left; padding: .5rem .6rem;
color: var(--text); max-width: 160px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sl-pt-chain { text-align: center; padding: .55rem .4rem; color: var(--text-muted); }
.sl-pt-chain--sel { background: rgba(255,255,255,.06); }
.sl-pt-price {
text-align: center; padding: .5rem .4rem;
color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.sl-pt-price--best { color: var(--accent); font-weight: 700; }
.sl-pt-kr { font-size: .7em; opacity: .65; margin-left: 1px; }
.sl-pt-qty { font-size: .72em; opacity: .55; margin-left: 3px; }
/* Product name in the comparison table links to that product's page. Inherits the cell's colour so
the table doesn't turn into a wall of link-blue; the underline on hover carries the affordance. */
.sl-pt-link { color: inherit; text-decoration: none; }
.sl-pt-link:hover, .sl-pt-link:focus-visible { text-decoration: underline; }
.sl-pt-na { opacity: .3; }
.sl-pt-total-row .sl-pt-name { font-weight: 700; color: var(--text); }
.sl-pt-total-row .sl-pt-price { font-weight: 700; }
/* Collapsed group of uncompareable (no-price) items under the comparison table. */
.sl-pt-uncompare { border-top: 1px solid var(--border); }
.sl-pt-uncompare-head { cursor: pointer; }
.sl-pt-uncompare-head td { padding: .5rem .6rem; }
.sl-pt-uncompare-head:hover { background: rgba(255,255,255,.03); }
.sl-pt-uncompare-toggle {
display: inline-flex; align-items: center; gap: 6px;
font-size: .78rem; font-weight: 600; color: var(--text-muted);
}
.sl-pt-uncompare-row .sl-pt-name { color: var(--text-muted); font-weight: 400; }
.sl-pt-uncompare-row .sl-pt-na { font-size: .76rem; }
.sl-pt-only-chain {
margin-left: 6px; font-size: .66rem; font-weight: 700; color: var(--text-dim);
text-transform: uppercase; letter-spacing: .03em;
}
/* ── LANDING WIDE ────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
.landing-wrap { padding: 5rem 2rem 4rem; }
.scan-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ── PREMIUM BADGE ────────────────────────────────────────────────────────── */
.pro-badge {
display: inline-flex; align-items: center;
font-size: .55rem; font-weight: 800; letter-spacing: .07em;
text-transform: uppercase;
padding: 2px 5px; border-radius: 4px;
background: rgba(251,191,36,.14);
border: 1px solid rgba(251,191,36,.35);
color: #fbbf24;
flex-shrink: 0; vertical-align: middle; line-height: 1.2;
}
/* ── PREMIUM MODAL ────────────────────────────────────────────────────────── */
.pm-backdrop {
position: fixed; inset: 0; z-index: 900;
background: rgba(0,0,0,.65);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center;
padding: 20px;
animation: fadeIn .18s ease;
}
.pm-modal {
background: var(--surface);
border: 1px solid rgba(251,191,36,.22);
border-radius: var(--radius-xl);
padding: 32px 28px 24px;
max-width: 400px; width: 100%;
text-align: center;
box-shadow: var(--elev-overlay), 0 0 0 1px rgba(251,191,36,.07);
animation: pmSlideUp .22s cubic-bezier(.34,1.36,.64,1);
}
@keyframes pmSlideUp { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.pm-crown {
width: 54px; height: 54px; border-radius: 50%;
background: rgba(251,191,36,.11);
border: 1px solid rgba(251,191,36,.25);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 18px; color: #fbbf24;
}
.pm-title { font-size: 1.2rem; font-weight: 800; margin-bottom: 16px; }
.pm-body { font-size: .88rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 18px; }
/* ── Feature comparison grid ── */
.pm-compare {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
margin-bottom: 18px; text-align: left;
}
.pm-compare-col {
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.08);
border-radius: 10px; padding: 12px;
}
.pm-compare-col--pluss {
background: rgba(251,191,36,.06);
border-color: rgba(251,191,36,.22);
}
.pm-compare-head {
font-size: .7rem; font-weight: 800; letter-spacing: .06em;
text-transform: uppercase; opacity: .5; margin-bottom: 8px;
}
.pm-compare-col--pluss .pm-compare-head { color: #fbbf24; opacity: 1; }
.pm-compare-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 5px;
}
.pm-compare-list li { font-size: .8rem; line-height: 1.3; }
.pm-trial-pill {
display: inline-flex; align-items: center; gap: 5px;
font-size: .72rem; font-weight: 700; color: #fbbf24;
background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.22);
border-radius: 100px; padding: 5px 12px; margin-bottom: 18px;
}
.pm-vipps-btn {
display: flex; align-items: center; justify-content: center;
width: 100%; padding: 14px 20px;
background: #ff5b24; color: #fff;
border: none; border-radius: var(--radius);
font-size: .97rem; font-weight: 700;
cursor: pointer; margin-bottom: 8px;
transition: opacity .15s;
}
.pm-vipps-btn:hover { opacity: .88; }
.pm-skip {
display: block; width: 100%; padding: 9px;
background: none; border: none;
color: var(--text-muted); font-size: .86rem;
cursor: pointer; border-radius: var(--radius);
transition: color .15s; text-decoration: none; text-align: center;
}
.pm-skip:hover { color: var(--text); }
/* ── PLUSS PAGE GATE (blur for non-premium users) ────────────────────────── */
.pluss-gate--blur {
filter: blur(5px);
pointer-events: none;
user-select: none;
}
/* ── MOCKED AD MODAL ─────────────────────────────────────────────────────── */
.ad-modal-backdrop {
position: fixed; inset: 0; z-index: 800;
background: rgba(0,0,0,.7);
display: flex; align-items: center; justify-content: center;
padding: 20px;
animation: fadeIn .2s ease;
}
.ad-modal {
background: #1a1a2e;
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--radius-xl);
padding: 24px 24px 20px;
max-width: 320px; width: 100%;
text-align: center;
box-shadow: 0 24px 64px rgba(0,0,0,.6);
animation: pmSlideUp .22s cubic-bezier(.34,1.36,.64,1);
}
.ad-modal-label {
display: inline-block;
font-size: .6rem; font-weight: 700; letter-spacing: .1em;
text-transform: uppercase; color: rgba(255,255,255,.3);
border: 1px solid rgba(255,255,255,.12);
border-radius: 4px; padding: 2px 7px; margin-bottom: 16px;
}
.ad-modal-logo { font-size: 2.5rem; margin-bottom: 10px; }
.ad-modal-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.ad-modal-body { font-size: .85rem; color: rgba(255,255,255,.6); line-height: 1.5; margin-bottom: 6px; }
.ad-modal-brand { font-size: .72rem; color: rgba(255,255,255,.3); margin-bottom: 18px; }
.ad-modal-skip {
display: block; width: 100%;
padding: 9px; margin-bottom: 8px;
background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
border-radius: var(--radius); color: rgba(255,255,255,.5);
font-size: .85rem; cursor: not-allowed;
transition: background .15s, color .15s, cursor .15s;
}
.ad-modal-skip--ready {
background: rgba(255,255,255,.12); color: var(--text);
cursor: pointer;
}
.ad-modal-skip--ready:hover { background: rgba(255,255,255,.18); }
.ad-modal-pluss {
display: block; width: 100%;
padding: 9px; background: none; border: none;
color: #fbbf24; font-size: .82rem; font-weight: 600;
cursor: pointer; opacity: .85; transition: opacity .15s;
}
.ad-modal-pluss:hover { opacity: 1; }
/* ── PREMIUM UPGRADE BAR ─────────────────────────────────────────────────── */
.pm-upgrade-bar {
display: flex; align-items: center; gap: .75rem;
background: rgba(245,158,11,.08);
border: 1px solid rgba(245,158,11,.25);
border-radius: 10px;
padding: .75rem 1rem;
margin-bottom: 1.25rem;
}
/* ── PREMIUM PAGE GATE (kept for backward compat, no longer used) ─────────── */
.pm-page-blur {
filter: blur(4px);
pointer-events: none;
user-select: none;
opacity: .55;
}
.pm-page-gate {
position: fixed; inset: 0; z-index: 500;
display: flex; align-items: center; justify-content: center;
padding: 20px;
background: rgba(12,12,15,.72);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* ── PREMIUM HINT BLUR (LinkedIn-style) ───────────────────────────────────── */
.sl-item-hint--locked {
cursor: pointer;
opacity: .85;
transition: opacity .15s;
}
.sl-item-hint--locked:hover { opacity: .65; }
.sl-hint-blur {
filter: blur(4px);
user-select: none;
pointer-events: none;
}
/* ── BOTTOM TAB PRO DOT ───────────────────────────────────────────────────── */
.tab-pro-dot {
position: absolute; top: 5px; right: calc(50% - 20px);
width: 6px; height: 6px; border-radius: 50%;
background: #fbbf24;
pointer-events: none;
}
/* ══════════════════════════════════════════════════════════════════════════ */
/* BUTIKKER PAGE */
/* ══════════════════════════════════════════════════════════════════════════ */
.bk-page { padding-bottom: 5rem; }
.bk-header { margin-bottom: .75rem; }
.bk-title { font-size: 1.35rem; font-weight: 800; color: var(--text); }
.bk-subtitle { font-size: .82rem; color: var(--text-muted); margin-top: 2px; }
/* ── Store search ── */
.bk-search-row {
position: relative; margin-bottom: .75rem;
}
.bk-search-input {
width: 100%; padding: .55rem .9rem .55rem 2.2rem;
border: 1.5px solid var(--border); border-radius: 10px;
background: var(--card-bg); color: var(--text);
font-size: .9rem; outline: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: .65rem center;
background-size: 15px;
}
.bk-search-input:focus { border-color: var(--accent); }
.bk-search-clear {
position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
background: none; border: none; color: var(--text-muted); cursor: pointer;
font-size: .85rem; padding: 2px 4px; line-height: 1;
}
.bk-search-clear:hover { color: var(--text); }
.bk-gps-coords { font-size: .65rem; opacity: .55; margin-left: 4px; }
/* ── Chain filter chips ── */
.bk-filters {
display: flex; gap: 7px; flex-wrap: wrap;
margin-bottom: .75rem;
}
.bk-chain-chip {
padding: 5px 13px; border-radius: 20px; border: 1.5px solid var(--border);
background: var(--surface2); color: var(--text-muted);
font-size: .78rem; font-weight: 600; cursor: pointer;
transition: border-color .15s, background .15s, color .15s;
}
.bk-chain-chip:hover { border-color: rgba(255,255,255,.2); color: var(--text); }
.bk-chain-chip--on { color: #fff; }
.bk-chain-chip--rema.bk-chain-chip--on { background: rgba(230,57,70,.25); border-color: #e63946; color: #ff8b92; }
.bk-chain-chip--kiwi.bk-chain-chip--on { background: rgba(34,197,94,.18); border-color: var(--accent); color: var(--accent); }
.bk-chain-chip--meny.bk-chain-chip--on { background: rgba(74,144,217,.2); border-color: #4a90d9; color: #8ab6e8; }
.bk-chain-chip--coop.bk-chain-chip--on { background: rgba(244,162,97,.2); border-color: #f4a261; color: #f4a261; }
.bk-chain-chip--joker.bk-chain-chip--on { background: rgba(155,93,229,.2); border-color: #9b5de5; color: #bf9bf8; }
/* ── Open-now filter ── */
.bk-open-row {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-bottom: .75rem;
}
.bk-openonly-chip {
padding: 5px 13px; border-radius: 20px; border: 1.5px solid var(--border);
background: var(--surface2); color: var(--text-muted);
font-size: .78rem; font-weight: 600; cursor: pointer;
transition: border-color .15s, background .15s, color .15s;
}
.bk-openonly-chip:hover { border-color: rgba(255,255,255,.2); color: var(--text); }
.bk-openonly-chip--on { background: rgba(34,197,94,.18); border-color: #22c55e; color: #22c55e; }
.bk-openonly-note { font-size: .72rem; color: var(--text-muted); }
.bk-openonly-now { text-transform: capitalize; }
/* ── GPS row ── */
.bk-gps-row {
display: flex; align-items: center; gap: 10px;
margin-bottom: .75rem; min-height: 26px;
}
.bk-gps-status { font-size: .8rem; color: var(--text-muted); }
.bk-gps-status--ok { color: var(--accent); }
.bk-gps-status--err { color: #f87171; }
.bk-refresh-btn { margin-left: auto; }
/* ── Map container ── */
.bk-map {
width: 100%; height: 340px;
border-radius: 14px; overflow: hidden;
border: 1px solid var(--border);
margin-bottom: 1rem;
background: var(--surface2);
}
@media (min-width: 640px) { .bk-map { height: 420px; } }
/* ── Grensehandel page (map reuses .bk-map) ── */
.gh-top { display:flex;gap:1rem;align-items:stretch;margin-bottom:.5rem; }
.gh-top .gh-map { flex:1;min-width:0;height:260px;margin-bottom:0; }
.gh-fx-card { width:250px;flex-shrink:0;display:flex;flex-direction:column;gap:.4rem;padding:1rem 1.1rem;border:1px solid var(--border);border-radius:14px;background:var(--surface2); }
.gh-fx-title { display:flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted); }
.gh-fx-title svg { color:var(--accent); }
.gh-fx-big { font-size:1.25rem;line-height:1.25; }
.gh-fx-big strong { font-size:1.55rem;font-weight:800; }
.gh-fx-big--dim { font-size:.95rem;color:var(--text-muted); }
.gh-fx-big--dim strong { font-size:1.05rem;font-weight:700; }
.gh-fx-src { color:var(--text-muted);font-size:.72rem; }
.gh-fx-empty { font-size:.82rem;color:var(--text-muted);margin:0; }
.gh-fx-toggle-row { margin-top:auto;padding-top:.6rem;display:flex;align-items:center;gap:.6rem; }
.gh-fx-toggle-label { font-size:.78rem;color:var(--text-muted); }
.gh-toggle { display:inline-flex;border:1px solid var(--border);border-radius:999px;overflow:hidden; }
.gh-toggle-btn { border:none;background:transparent;color:var(--text-muted);font-size:.8rem;font-weight:700;padding:.3rem .8rem;cursor:pointer; }
.gh-toggle-btn--on { background:var(--accent);color:#fff; }
/* Map card: renders bare on desktop (header hidden), a collapsible gh-card on mobile. */
.gh-top .gh-map-card { flex:1;min-width:0;margin:0;border:0;border-radius:0;background:transparent;overflow:visible; }
.gh-map-card-head { display:none; }
.gh-map-card-body { padding:0; }
@media (max-width: 639px) {
.gh-top { flex-direction:column; }
.gh-fx-card { width:100%; }
.gh-top .gh-map-card { border:1px solid var(--border);border-radius:14px;background:var(--surface2);overflow:hidden; }
.gh-map-card-head { display:flex; }
.gh-map-card-body { padding:0 .75rem .75rem; }
.gh-map-card-body .gh-map { margin-bottom:0; }
.gh-map-card--collapsed .gh-map-card-body { display:none; }
.gh-store-note { display:none; } /* the map card's header replaces it on mobile */
}
.gh-flag { vertical-align:baseline;margin-left:.4rem;border-radius:2px;box-shadow:0 0 0 1px var(--border); }
.sl-list-flag { vertical-align:-1px;margin-left:6px;border-radius:2px;box-shadow:0 0 0 1px var(--border);flex-shrink:0; }
/* "+ list" overlay on grensehandel scan cards — same treatment as .np-edit-btn, offset left of it
(the edit button occupies the top-right corner for admins). */
.gh-scan-add-btn {
position:absolute; top:.45rem; right:2.55rem; z-index:2;
background:rgba(0,0,0,.58); backdrop-filter:blur(4px);
border:none; border-radius:7px; color:#fff; cursor:pointer;
padding:6px; display:flex; align-items:center; justify-content:center;
}
.gh-scan-add-btn:hover { background:var(--accent); }
.gh-scan-add-btn--corner { right:.45rem; } /* takes the corner when the admin edit button is absent */
.gh-map-note { font-size:.78rem;color:var(--text-muted);margin:-.4rem 0 1.2rem; }
.gh-card { border:1px solid var(--border);border-radius:14px;background:var(--surface2);margin-bottom:1.1rem;overflow:hidden; }
.gh-card-head { display:flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;cursor:pointer;user-select:none; }
.gh-card-head:hover { background:rgba(128,128,128,.06); }
.gh-card-head .gh-section-title { margin:0;flex:1; }
.gh-card-count { font-size:.75rem;color:var(--text-muted);white-space:nowrap; }
.gh-chev { color:var(--text-muted);transition:transform .15s ease;flex-shrink:0; }
.gh-chev--open { transform:rotate(180deg); }
.gh-card-body { padding:0 1.1rem 1.1rem; }
.gh-section-title { font-size:1.05rem;font-weight:700;margin:0 0 .75rem; }
.gh-offer-count { font-size:.75rem;font-weight:500;color:var(--text-muted);margin-left:.5rem; }
/* ── Store list meta ── */
.bk-list-meta {
font-size: .75rem; color: var(--text-muted);
margin-bottom: .5rem; padding-left: 2px;
}
/* ── Store list ── */
.bk-list {
display: flex; flex-direction: column; gap: 6px;
}
.bk-store-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 12px;
background: var(--surface2); border: 1px solid var(--border);
transition: border-color .14s, background .14s;
}
.bk-store-row--link { cursor: pointer; }
.bk-store-row--link:hover {
border-color: rgba(34,197,94,.35);
background: var(--surface3);
}
.bk-store-badge {
flex-shrink: 0; padding: 3px 7px; border-radius: 6px;
font-size: .66rem; font-weight: 800; letter-spacing: .03em;
text-align: center; min-width: 44px;
}
.bk-chain-badge--rema { background: rgba(230,57,70,.2); color: #ff8b92; }
.bk-chain-badge--kiwi { background: rgba(34,197,94,.18); color: #22c55e; }
.bk-chain-badge--meny { background: rgba(74,144,217,.2); color: #8ab6e8; }
.bk-chain-badge--coop { background: rgba(244,162,97,.2); color: #f4a261; }
.bk-chain-badge--joker { background: rgba(155,93,229,.2); color: #bf9bf8; }
.bk-store-body { flex: 1; min-width: 0; }
.bk-store-name {
font-size: .88rem; font-weight: 600; color: var(--text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk-store-addr {
font-size: .73rem; color: var(--text-muted); margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk-store-right {
flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.bk-dist {
font-size: .8rem; font-weight: 700; color: var(--accent);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.bk-hours-link {
font-size: .75rem; color: var(--text-muted);
text-decoration: none; white-space: nowrap; padding: 2px 5px;
border: 1px solid var(--surface3); border-radius: 4px;
}
.bk-hours-link:hover { color: var(--text); border-color: var(--accent); }
/* ── opening hours in store row ──────────────────────────────────────────── */
.bk-hours-row {
display: flex; align-items: center; gap: 6px; margin-top: 3px;
}
.bk-today-hours {
font-size: .72rem; font-weight: 500;
}
.bk-today-hours--open { color: #22c55e; }
.bk-today-hours--closed { color: var(--text-muted); }
.bk-hours-toggle {
background: none; border: none; color: var(--text-muted); cursor: pointer;
font-size: .65rem; padding: 0 3px; line-height: 1;
}
.bk-hours-toggle:hover { color: var(--text); }
.bk-hours-week {
display: grid; grid-template-columns: 2.8rem 1fr;
gap: 1px 6px; margin-top: 4px; font-size: .7rem;
}
.bk-hours-day { color: var(--text-muted); font-weight: 500; }
.bk-hours-time { color: var(--text); }
.bk-hours-time--closed { color: var(--text-muted); font-style: italic; }
.bk-more {
text-align: center; font-size: .78rem; color: var(--text-muted);
padding: .75rem; opacity: .6;
}
/* ── Analytics / Statistikk admin page ────────────────────────────────── */
.stats-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.stats-card {
background: var(--surface, #1a1a2e);
border: 1px solid var(--border, #2d2d44);
border-radius: 10px;
padding: 1rem;
}
.stats-card-label { font-size: .75rem; color: var(--text-muted); margin-bottom: .25rem; }
.stats-card-value { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.stats-card-sub { font-size: .75rem; color: var(--text-muted); margin-top: .2rem; }
.stats-table-wrap { margin-top: .5rem; }
/* ── PWA install modal (App.razor, once per session after login) ───────── */
.pwa-modal-backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,.72);
z-index: 2900;
display: flex; align-items: center; justify-content: center;
padding: 1rem;
}
.pwa-modal {
position: relative;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 22px;
width: 100%; max-width: 380px;
max-height: 90vh; overflow-y: auto;
padding: 2rem 1.6rem 1.4rem;
box-shadow: var(--elev-overlay);
text-align: center;
animation: pwa-modal-in .28s cubic-bezier(.16,1,.3,1);
}
@keyframes pwa-modal-in {
from { opacity: 0; transform: translateY(14px) scale(.96); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .pwa-modal { animation: none; } }
.pwa-modal-x {
position: absolute; top: .7rem; right: .7rem;
display: flex; align-items: center; justify-content: center;
width: 30px; height: 30px; padding: 0;
background: none; border: none; border-radius: 50%;
color: var(--text-muted); cursor: pointer;
}
.pwa-modal-x:hover { background: var(--surface); color: var(--text); }
/* Phone silhouette holding the app icon — reads as "this becomes an app". */
.pwa-modal-phone {
width: 74px; height: 74px; margin: 0 auto 1rem;
display: flex; align-items: center; justify-content: center;
border-radius: 20px;
background: linear-gradient(145deg,
color-mix(in srgb, var(--accent) 22%, transparent),
color-mix(in srgb, var(--accent) 6%, transparent));
}
.pwa-modal-phone-screen {
width: 54px; height: 54px;
display: flex; align-items: center; justify-content: center;
border-radius: 15px;
background: var(--surface2);
box-shadow: 0 3px 10px rgba(0,0,0,.22);
}
.pwa-modal-phone-screen img { border-radius: 11px; display: block; }
.pwa-modal h2 { font-size: 1.22rem; font-weight: 800; line-height: 1.3; margin: 0 0 .5rem; color: var(--text); }
.pwa-modal-lead { color: var(--text-muted); font-size: .88rem; line-height: 1.6; margin: 0 0 1.35rem; }
.pwa-modal-cta {
width: 100%;
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .78rem 1rem;
font-size: .95rem; font-weight: 700;
border-radius: 12px;
}
.pwa-modal-steps {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: .55rem; text-align: left;
}
.pwa-modal-steps li {
display: flex; align-items: center; gap: .6rem;
color: var(--text); font-size: .86rem; line-height: 1.45;
}
.pwa-modal-step-n {
flex-shrink: 0;
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: color-mix(in srgb, var(--accent) 16%, transparent);
color: var(--accent);
font-size: .74rem; font-weight: 700;
}
.pwa-modal-fallback { color: var(--text-muted); font-size: .85rem; line-height: 1.6; margin: 0; text-align: left; }
.pwa-modal-fallback strong, .pwa-modal-steps strong { color: var(--text); }
.pwa-modal-status { color: var(--text-muted); font-size: .82rem; margin: .8rem 0 0; }
.pwa-modal-never {
margin-top: 1.1rem;
background: none; border: none; cursor: pointer;
color: var(--text-muted); font-size: .82rem; font-family: inherit;
padding: 4px;
}
.pwa-modal-never:hover { color: var(--text); text-decoration: underline; }
/* ─────────────────────────── Articles ─────────────────────────── */
.text-dim { color: var(--text-dim); }
.alert { padding: .65rem .9rem; border-radius: 8px; font-size: .85rem; margin-bottom: 1rem; }
.alert-error { background: rgba(239,68,68,.12); color: #ef4444; border: 1px solid rgba(239,68,68,.35); }
.alert-success { background: rgba(34,197,94,.12); color: #16a34a; border: 1px solid rgba(34,197,94,.35); }
/* Public article page */
.article-page { max-width: 720px; margin: 0 auto; }
.article-draft-banner { background: rgba(250,204,21,.15); border: 1px solid rgba(250,204,21,.5); color: #a16207; padding: .5rem .8rem; border-radius: 8px; font-size: .8rem; font-weight: 600; margin-bottom: 1rem; }
.article-header { margin-bottom: 1.25rem; }
.article-title { font-size: 2rem; font-weight: 900; line-height: 1.15; margin: 0 0 .6rem; letter-spacing: -.02em; }
.article-lead { font-size: 1.1rem; color: var(--text-dim); margin: 0 0 .8rem; line-height: 1.5; }
.article-byline { font-size: .8rem; color: var(--text-muted); display: flex; gap: .4rem; }
.article-cover { width: 100%; border-radius: 12px; margin: 0 0 1.5rem; aspect-ratio: 16/9; object-fit: cover; }
/* Markdown body */
.article-body { font-size: 1.05rem; line-height: 1.7; color: var(--text); }
.article-body h2 { font-size: 1.5rem; font-weight: 800; margin: 2rem 0 .7rem; letter-spacing: -.01em; }
.article-body h3 { font-size: 1.2rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.article-body p { margin: 0 0 1.1rem; }
.article-body ul, .article-body ol { margin: 0 0 1.1rem; padding-left: 1.4rem; }
.article-body li { margin-bottom: .4rem; }
.article-body a { color: var(--accent); text-decoration: underline; }
.article-body img { max-width: 100%; border-radius: 10px; margin: .5rem 0 1.2rem; }
.article-body blockquote { border-left: 3px solid var(--accent); margin: 0 0 1.1rem; padding: .3rem 0 .3rem 1rem; color: var(--text-dim); font-style: italic; }
.article-body table { width: 100%; border-collapse: collapse; margin: 0 0 1.1rem; font-size: .92rem; }
.article-body th, .article-body td { border: 1px solid var(--border); padding: .4rem .6rem; text-align: left; }
/* Reference cards (live price embeds) */
.art-ref { display: flex; gap: .9rem; align-items: stretch; border: 1px solid var(--border); border-radius: 12px; padding: .85rem; margin: 1.4rem 0; background: var(--surface, #fff); box-shadow: 0 2px 10px rgba(0,0,0,.05); position: relative; }
.art-ref-product { flex-direction: column; gap: .55rem; }
.art-ref-img { flex: 0 0 128px; width: 128px; height: 128px; border-radius: 8px; background: var(--bg-soft, #f1f5f9); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.art-ref-img img { width: 100%; height: 100%; object-fit: contain; }
.art-ref-noimg { font-size: 2rem; }
/* Clickable flyer image (opens the full-size modal) */
.art-ref-img-btn { padding: 0; border: 1px solid var(--border); cursor: zoom-in; transition: box-shadow .12s, transform .12s; }
.art-ref-img-btn:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 30%, transparent); transform: translateY(-1px); }
.art-ref-info { display: flex; flex-direction: column; gap: .15rem; justify-content: center; min-width: 0; }
.art-ref-chain { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.art-ref-name { font-size: 1.02rem; font-weight: 700; }
.art-ref-meta { font-size: .82rem; color: var(--text-dim); }
.art-ref-price { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.art-ref-valid { font-size: .76rem; color: var(--text-muted); }
/* Expired offer: dim the card and flag it, but keep it visible (see cleanup guard + graceful render). */
.art-ref-expired { opacity: .62; }
.art-ref-expired-tag { align-self: flex-start; font-size: .72rem; font-weight: 700; color: #b45309; background: #fef3c7; border: 1px solid #fde68a; padding: .1rem .45rem; border-radius: 999px; }
/* Missing ref: a referenced offer/product that no longer exists — muted placeholder, not a silent gap. */
.art-ref-missing { align-items: center; gap: .5rem; font-size: .84rem; color: var(--text-muted); font-style: italic; background: var(--bg-soft, #f8fafc); box-shadow: none; }
.art-ref-missing-ico { font-style: normal; opacity: .8; }
/* AI assistant rich replies (Markdown → HTML, Mermaid diagrams, sandboxed interactive embeds) */
.ai-md > :first-child { margin-top: 0; }
.ai-md > :last-child { margin-bottom: 0; }
.ai-md p { margin: .35rem 0; }
.ai-md ul, .ai-md ol { margin: .35rem 0; padding-left: 1.25rem; }
.ai-md h1, .ai-md h2, .ai-md h3, .ai-md h4 { margin: .6rem 0 .3rem; line-height: 1.25; }
.ai-md h1 { font-size: 1.15rem; } .ai-md h2 { font-size: 1.05rem; } .ai-md h3 { font-size: .95rem; }
.ai-md a { color: var(--accent); }
.ai-md img { max-width: 100%; height: auto; border-radius: 8px; margin: .3rem 0; }
.ai-md table { border-collapse: collapse; font-size: .82rem; margin: .45rem 0; display: block; overflow-x: auto; }
.ai-md th, .ai-md td { border: 1px solid var(--border); padding: 3px 8px; text-align: left; }
.ai-md th { background: var(--bg-soft, #f1f5f9); }
.ai-md code { background: var(--bg-soft, #f1f5f9); padding: 1px 5px; border-radius: 4px; font-size: .85em; }
.ai-md pre { background: var(--bg-soft, #f1f5f9); padding: .55rem .7rem; border-radius: 8px; overflow-x: auto; margin: .45rem 0; }
.ai-md pre code { background: none; padding: 0; }
.ai-md blockquote { border-left: 3px solid var(--border); margin: .4rem 0; padding-left: .7rem; color: var(--text-muted); }
.ai-md .mermaid { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: .5rem; margin: .5rem 0; overflow-x: auto; }
.ai-embed { width: 100%; height: 400px; border: 1px solid var(--border); border-radius: 8px; background: #fff; margin: .5rem 0; }
/* "View full size" affordance on each rendered visual + the zoom/pan viewer it opens */
.ai-viz { position: relative; margin: .5rem 0; }
.ai-viz .ai-embed { margin: 0; }
.ai-viz-expand { position: absolute; top: 6px; right: 6px; z-index: 2; width: 28px; height: 28px;
border: none; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; cursor: pointer;
font-size: 1rem; line-height: 1; opacity: .55; transition: opacity .15s; }
.ai-viz:hover .ai-viz-expand, .ai-viz-expand:focus { opacity: 1; }
.ai-fs-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.78);
display: none; flex-direction: column; }
.ai-fs-backdrop.open { display: flex; }
.ai-fs-bar { display: flex; gap: 8px; justify-content: flex-end; padding: 10px; }
.ai-fs-btn { background: #fff; color: #111; border: none; border-radius: 6px; padding: 6px 12px;
cursor: pointer; font-size: .9rem; font-weight: 600; }
.ai-fs-btn:hover { background: #eee; }
.ai-fs-viewport { flex: 1; overflow: hidden; cursor: grab; display: flex; align-items: center;
justify-content: center; touch-action: none; }
/* Zoom resizes the element itself (crisp); the stage only translates for panning — no raster scaling. */
.ai-fs-stage { background: #fff; border-radius: 8px; padding: 12px; }
.ai-fs-stage svg { max-width: none; display: block; }
.ai-fs-stage iframe { border: none; display: block; }
.art-ref-tag { position: absolute; top: .6rem; right: .7rem; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); background: var(--bg-soft, #f1f5f9); padding: .15rem .45rem; border-radius: 999px; }
.art-ref-prices { display: flex; flex-direction: column; gap: .3rem; }
.art-ref-prow { display: flex; align-items: center; gap: .6rem; padding: .35rem .6rem; border-radius: 8px; background: var(--bg-soft, #f8fafc); font-size: .92rem; }
.art-ref-prow-best { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); }
.art-ref-prow-chain { flex: 1; font-weight: 600; }
.art-ref-prow-price { font-weight: 800; }
.art-ref-prow-badge { font-size: .64rem; font-weight: 800; text-transform: uppercase; color: #16a34a; }
/* Public article index */
.article-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .article-grid { grid-template-columns: 1fr 1fr; } }
.article-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; background: var(--surface, #fff); transition: box-shadow .15s, transform .15s; }
.article-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-2px); }
.article-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.article-card-body { padding: .9rem 1rem; }
.article-card-title { font-size: 1.1rem; font-weight: 800; margin: 0 0 .35rem; }
.article-card-sub { font-size: .85rem; color: var(--text-dim); margin: 0 0 .5rem; line-height: 1.45; }
.article-card-date { font-size: .73rem; color: var(--text-muted); }
/* Admin editor */
.art-edit-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 1024px) { .art-edit-grid { grid-template-columns: 1fr 1fr; } }
.art-edit-col { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.art-edit-col .form-label { margin-top: .5rem; }
.art-toolbar { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding: .4rem; border: 1px solid var(--border); border-radius: 8px 8px 0 0; background: var(--bg-soft, #f8fafc); }
.art-tb-btn { font-size: .82rem; padding: .3rem .55rem; border-radius: 6px; border: 1px solid var(--border); background: var(--surface, #fff); cursor: pointer; line-height: 1; }
.art-tb-btn:hover { border-color: var(--accent); }
.art-tb-ref { font-weight: 700; color: var(--accent); border-color: var(--accent); }
.art-tb-sep { width: 1px; height: 20px; background: var(--border); margin: 0 .2rem; }
.art-editor-textarea { border-radius: 0 0 8px 8px; font-family: ui-monospace, monospace; font-size: .9rem; line-height: 1.55; resize: vertical; }
.art-edit-foot { margin-top: .6rem; }
.art-preview { border: 1px solid var(--border); border-radius: 8px; padding: 1.25rem; background: var(--surface, #fff); max-height: 80vh; overflow-y: auto; }
.art-preview .article-title { font-size: 1.5rem; }
/* AI assistant */
.art-ai { border: 1px solid var(--accent); border-radius: 10px; margin-bottom: 1.25rem; background: var(--surface, #fff); overflow: hidden; }
.art-ai-head { display: flex; align-items: center; justify-content: space-between; padding: .6rem .9rem; cursor: pointer; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.art-ai-title { font-weight: 800; font-size: .95rem; }
.art-ai-hint { font-size: .78rem; color: var(--text-dim); }
.art-ai-body { padding: .8rem .9rem; display: flex; flex-direction: column; gap: .55rem; max-height: 46vh; overflow-y: auto; }
.art-ai-msg { display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; line-height: 1.5; }
.art-ai-msg-who { font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.art-ai-msg-text { white-space: pre-wrap; padding: .5rem .7rem; border-radius: 9px; border: 1px solid var(--border); }
.art-ai-msg-user { align-items: flex-end; }
.art-ai-msg-user .art-ai-msg-text { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.art-ai-msg-assistant .art-ai-msg-text { background: var(--bg-soft, #f8fafc); }
.art-ai-msg-system { font-size: .85rem; color: var(--text-dim); }
.art-ai-msg-error { color: var(--danger, #dc2626); font-size: .85rem; }
.art-ai-typing { color: var(--text-dim); font-style: italic; }
.art-ai-examples { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.art-ai-chip { font-size: .78rem; padding: .3rem .6rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface, #fff); cursor: pointer; }
.art-ai-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.art-ai-chip:disabled { opacity: .5; cursor: default; }
.art-ai-input { display: flex; gap: .5rem; align-items: flex-end; margin-top: .2rem; }
.art-ai-input textarea { flex: 1; resize: vertical; font-size: .9rem; }
/* Reference picker */
.art-picker { border: 1px solid var(--accent); border-radius: 8px; padding: .7rem; margin: .4rem 0; background: var(--surface, #fff); }
.art-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.art-picker-results { max-height: 260px; overflow-y: auto; margin-top: .5rem; display: flex; flex-direction: column; gap: .35rem; }
.art-picker-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .4rem .55rem; border: 1px solid var(--border); border-radius: 7px; }
.art-picker-name { font-weight: 600; font-size: .9rem; }
.art-picker-meta { font-size: .76rem; color: var(--text-dim); }
.art-picker-empty { font-size: .85rem; color: var(--text-muted); padding: .5rem; text-align: center; }
.art-picker-kind { font-weight: 600; color: var(--text-dim); }
.art-picker-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.art-picker-filters .art-tb-kind-toggle { margin: 0; }
.art-picker-filter { width: auto; min-width: 150px; flex: 0 1 auto; padding: .35rem .5rem; font-size: .82rem; }
/* Picker rows that expand to show per-source price breakdown */
.art-picker-row-col { flex-direction: column; align-items: stretch; }
.art-picker-row-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.art-picker-sources { margin-top: .3rem; }
.art-price-sources { display: flex; flex-direction: column; gap: .25rem; margin-top: .45rem; padding-top: .45rem; border-top: 1px dashed var(--border); }
.art-price-src { display: flex; align-items: center; gap: .5rem; font-size: .78rem; }
.art-price-chain { font-weight: 600; min-width: 64px; }
.art-price-amt { color: var(--text-dim); min-width: 64px; }
/* Source-of-data badges */
.src-line { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.src-badge { display: inline-flex; align-items: center; gap: .28rem; font-size: .7rem; font-weight: 600;
padding: .14rem .5rem; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
line-height: 1.3; text-decoration: none; }
.src-badge .src-ico { font-size: .82em; line-height: 1; }
.src-date { font-size: .7rem; color: var(--text-muted); white-space: nowrap; }
/* Clickable sources (open PDF / scan modal) get a button reset + affordance */
button.src-badge { cursor: pointer; font-family: inherit; }
.src-link { cursor: pointer; transition: filter .12s ease, box-shadow .12s ease; }
.src-link:hover { filter: brightness(.96); box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.src-link::after { content: "›"; font-weight: 700; opacity: .65; margin-left: .05rem; }
.src-tilbudsavis { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.src-scan { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.src-manual { background: #e5e7eb; color: #374151; border-color: #d1d5db; }
.src-webshop { background: #dcfce7; color: #166534; border-color: #86efac; }
.src-seed, .src-other { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }
/* Scanned price-tag modal */
.scan-modal-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,.6);
display: flex; align-items: center; justify-content: center; padding: 1rem; }
.scan-modal { background: var(--surface, #fff); border-radius: 12px; max-width: min(560px, 92vw);
width: 100%; box-shadow: var(--elev-overlay); overflow: hidden; }
.scan-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
padding: .8rem 1rem; border-bottom: 1px solid var(--border); }
.scan-modal-head strong { display: block; }
.scan-modal-date { font-size: .76rem; color: var(--text-dim); }
.scan-modal-img { display: block; width: 100%; height: auto; background: #111; }
.scan-modal-missing { padding: 1.5rem; text-align: center; color: var(--text-muted); }
/* Price-table builder (editor) */
.art-tb-kind-toggle { display: flex; gap: .4rem; margin: .6rem 0 .4rem; }
.btn.btn-xs { padding: .12rem .4rem; font-size: .72rem; line-height: 1.2; }
.art-table-build { display: flex; flex-direction: column; gap: .3rem; margin: .3rem 0; }
.art-table-build-row { display: flex; align-items: center; gap: .5rem; font-size: .8rem; padding: .3rem .45rem; border: 1px solid var(--border); border-radius: 7px; }
.art-table-build-pos { color: var(--text-muted); min-width: 1.4rem; }
.art-table-build-name { font-weight: 600; flex: 1; min-width: 0; }
/* Rendered price table (article body) */
.art-pricetable-wrap { margin: 1.1rem 0; overflow-x: auto; }
.art-pricetable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.art-pricetable th, .art-pricetable td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--border); }
.art-pricetable th { font-size: .76rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); }
.art-pricetable th.num, .art-pricetable td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.art-pricetable th.art-pricetable-rank, .art-pricetable td.art-pricetable-rank { width: 1%; text-align: left; white-space: nowrap; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.art-pricetable-best { background: #f0fdf4; }
.art-pricetable-best td { font-weight: 600; }
.art-pricetable td.art-pricetable-action { width: 1%; white-space: nowrap; text-align: right; }
/* Offer rows carry the tilbudsavis flyer image as a thumbnail next to the name (click → full size) */
.art-pricetable-vare { display: flex; align-items: center; gap: .6rem; }
.art-pricetable-thumb-btn { flex: 0 0 auto; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: zoom-in; line-height: 0; overflow: hidden; transition: box-shadow .12s, transform .12s; }
.art-pricetable-thumb-btn:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #2563eb) 30%, transparent); transform: translateY(-1px); }
.art-pricetable-thumb { display: block; width: 68px; height: 68px; border-radius: 7px; object-fit: contain; background: #fff; }
.art-pricetable-name { display: inline-flex; align-items: baseline; gap: .1rem; min-width: 0; }
/* "Go to product page" ↗ icon next to a product name (cards + table rows) */
.art-ref-golink { display: inline-flex; align-items: center; justify-content: center; margin-left: .3rem;
min-width: 1.25em; height: 1.25em; padding: 0 .12em; font-size: .8em; font-weight: 700; line-height: 1;
text-decoration: none; color: var(--accent, #2563eb); border-radius: 5px; opacity: .75;
transition: opacity .12s, background .12s; }
.art-ref-golink:hover { opacity: 1; background: var(--bg-soft, #f1f5f9); }
/* Sortable column header buttons in the price table */
.art-th-sort { display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: none; background: none;
cursor: pointer; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.art-th-sort:hover { color: var(--text); }
.art-th-sort-active { color: var(--accent); }
.art-th-arrow { font-size: .78em; opacity: .8; }
.art-th-sort:not(.art-th-sort-active) .art-th-arrow { opacity: .35; }
/* Mobile: keep the article price table and reference cards readable on narrow screens */
@media (max-width: 640px) {
.art-pricetable { font-size: .84rem; }
.art-pricetable th, .art-pricetable td { padding: .4rem .4rem; }
.art-pricetable-thumb, .art-pricetable-thumb-btn { width: 46px; height: 46px; }
.art-pricetable-thumb { width: 46px; height: 46px; }
.art-pricetable .src-date { display: none; } /* drop the wordy date, keep the source badge */
.art-pricetable-vare { gap: .4rem; }
/* Product/offer reference cards */
.art-ref { padding: .7rem; gap: .6rem; margin: 1rem 0; }
.art-ref-img { flex-basis: 92px; width: 92px; height: 92px; }
.art-ref-prow { flex-wrap: wrap; gap: .3rem .5rem; }
.art-ref-prow-chain { flex: 1 0 40%; }
}
/* "Add to new shopping list" button on refs, cards and table rows (authenticated users only) */
.art-ref-actions { display: flex; justify-content: flex-end; margin-left: auto; align-self: center; }
.art-ref-offer .art-ref-actions { align-self: center; }
.art-ref-add { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; font-size: .82rem; font-weight: 700; color: var(--accent, #2563eb); background: var(--bg-soft, #f1f5f9); border: 1px solid var(--border, #e2e8f0); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.art-ref-add:hover { background: var(--accent, #2563eb); color: #fff; }
/* Toast confirming a new list was created */
.art-list-toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: .9rem; padding: .7rem 1.1rem; background: #0f172a; color: #fff; border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.28); font-size: .92rem; cursor: pointer; }
.art-list-toast-msg { font-weight: 600; }
.art-list-toast-link { color: #7dd3fc; font-weight: 700; text-decoration: none; white-space: nowrap; }
.art-list-toast-link:hover { text-decoration: underline; }
/* Admin stats */
.art-stat-cards { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 1.5rem; }
.art-stat-card { flex: 1; min-width: 140px; border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .25rem; background: var(--surface, #fff); }
.art-stat-num { font-size: 2rem; font-weight: 900; line-height: 1; }
.art-stat-lbl { font-size: .78rem; color: var(--text-dim); }
.art-stat-chart { display: flex; flex-direction: column; gap: .35rem; max-width: 640px; }
.art-stat-bar-row { display: flex; align-items: center; gap: .7rem; font-size: .8rem; }
.art-stat-bar-date { flex: 0 0 70px; color: var(--text-dim); }
.art-stat-bar-track { flex: 1; height: 16px; background: var(--bg-soft, #f1f5f9); border-radius: 4px; overflow: hidden; }
.art-stat-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; min-width: 2px; }
.art-stat-bar-val { flex: 0 0 32px; text-align: right; font-weight: 700; }
/* ── Public product page (/produkt/{producer}/{slug}) ─────────────────────── */
.produkt-page { max-width: 860px; }
.produkt-admin-card { position: relative; border: 1px solid var(--border); border-radius: 12px;
padding: .75rem 1rem; margin-bottom: 1.5rem; background: var(--bg-soft, #f8fafc); }
.produkt-admin-close { position: absolute; top: .5rem; right: .5rem; width: 26px; height: 26px;
display: flex; align-items: center; justify-content: center; border: none; border-radius: 6px;
background: transparent; color: var(--text-muted, #64748b); cursor: pointer; transition: background .12s, color .12s; }
.produkt-admin-close:hover { background: var(--border); color: var(--text); }
.produkt-admin-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
padding-right: 1.9rem; margin-bottom: .6rem; }
.produkt-admin-title { font-size: .8rem; font-weight: 700; opacity: .7; }
.produkt-admin-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem;
font-weight: 700; background: var(--border); color: var(--text); padding: 2px 8px; border-radius: 6px; }
.produkt-admin-edit { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 700;
color: var(--accent); text-decoration: none; padding: 3px 9px; border: 1px solid var(--accent);
border-radius: 6px; transition: background .12s, color .12s; }
.produkt-admin-edit:hover { background: var(--accent); color: #fff; }
.produkt-admin-stats-title { font-size: .8rem; font-weight: 700; opacity: .7; margin-bottom: .5rem; }
.produkt-admin-stats-grid { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.produkt-admin-stats-grid > div { display: flex; flex-direction: column; }
.pas-val { font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.pas-lbl { font-size: .7rem; opacity: .6; text-transform: uppercase; letter-spacing: .04em; }
/* Admin repair card: edit / delete / move price rows that were merged onto the wrong product. */
.produkt-repair .produkt-admin-head { padding-right: 0; margin-bottom: 0; }
.produkt-repair-hint { font-size: .74rem; opacity: .6; }
.produkt-repair-title { font-size: .78rem; font-weight: 700; opacity: .7; margin: 1rem 0 .4rem; }
.produkt-repair-empty { font-size: .8rem; opacity: .6; margin: 0; }
.produkt-repair-msg { font-size: .8rem; font-weight: 600; margin: .75rem 0 0; padding: .4rem .6rem;
border-radius: 8px; background: rgba(34,197,94,.12); color: #15803d; }
.produkt-repair-msg.is-error { background: rgba(239,68,68,.12); color: #b91c1c; }
.produkt-repair-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.produkt-repair-table th { text-align: left; font-size: .7rem; text-transform: uppercase;
letter-spacing: .04em; opacity: .55; font-weight: 700; padding: .25rem .4rem; }
.produkt-repair-table td { padding: .3rem .4rem; border-top: 1px solid var(--border); vertical-align: middle; }
.produkt-repair-dim { opacity: .6; }
.produkt-repair-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.produkt-repair-confirm { font-size: .76rem; font-weight: 700; color: #b91c1c; }
.produkt-repair-input { display: inline-block; width: 9.5rem; padding: 4px 8px; font-size: .8rem; margin: 0; }
.produkt-repair-move { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.produkt-repair-move .form-label { margin: 0; }
.produkt-repair-target { font-size: .78rem; font-weight: 600; opacity: .8; }
.produkt-repair-target.is-error { color: #b91c1c; opacity: 1; }
.produkt-repair-check { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; }
.produkt-repair-note { flex: 1 0 100%; font-size: .72rem; line-height: 1.35; opacity: .6; margin: 0; max-width: 60ch; }
.produkt-header { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap;
padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.produkt-hero-img { width: 140px; height: 140px; object-fit: contain; border-radius: 12px;
background: #fff; border: 1px solid var(--border); flex: 0 0 auto; }
.produkt-header-text { flex: 1; min-width: 220px; }
.produkt-title { font-size: 1.7rem; font-weight: 800; margin: 0 0 .35rem; }
.produkt-sub { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.produkt-sub span { font-size: .78rem; padding: .15rem .5rem; border-radius: 6px;
background: var(--bg-soft, #f1f5f9); opacity: .85; }
.produkt-brand { font-weight: 700; }
.produkt-allergy { margin: -.25rem 0 .85rem; }
.produkt-allergy-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.produkt-allergy-badge { font-size: .8rem; font-weight: 700; padding: .18rem .55rem; border-radius: 8px;
background: rgba(34,197,94,.14); color: #15803d; }
.produkt-allergy-tag { font-size: .74rem; font-weight: 600; padding: .12rem .5rem; border-radius: 9px;
background: rgba(34,197,94,.10); color: #15803d; }
.produkt-allergy-note { font-size: .72rem; line-height: 1.35; opacity: .65; margin: .35rem 0 0; max-width: 46ch; }
.produkt-best-price { display: flex; align-items: baseline; gap: .5rem; margin-bottom: 1rem; }
.produkt-best-amount { font-size: 1.5rem; font-weight: 800; color: var(--accent); }
.produkt-best-chain { font-size: .85rem; opacity: .7; }
.produkt-add-btn { margin-top: .25rem; }
.produkt-section { margin-bottom: 2rem; }
.produkt-section-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 .85rem; }
.produkt-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: .85rem; }
.produkt-section-head .produkt-section-title { margin: 0; }
.produkt-tilbud-link {
display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
font-size: .8rem; font-weight: 700; color: var(--accent); text-decoration: none;
padding: 5px 10px; border: 1px solid rgba(34,197,94,.35); border-radius: 100px;
transition: background .15s, border-color .15s;
}
.produkt-tilbud-link:hover { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.55); }
.produkt-empty { opacity: .55; }
.produkt-price-list { display: flex; flex-direction: column; gap: .6rem; }
.produkt-price-card { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; padding: .65rem .85rem; }
.produkt-price-card.is-best { background: rgba(34,197,94,.06); }
.ppc-main { display: flex; flex-direction: column; min-width: 130px; }
.ppc-chain { font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.ppc-badge { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
background: #16a34a; color: #fff; padding: .1rem .35rem; border-radius: 5px; }
.ppc-price { font-size: 1.15rem; font-weight: 800; }
.ppc-unit { font-size: .8rem; font-weight: 500; opacity: .6; }
.ppc-meta { display: flex; flex-wrap: wrap; gap: .3rem .7rem; font-size: .78rem; opacity: .85;
margin-left: auto; align-items: center; }
.ppc-member { color: #d97706; font-weight: 600; }
.ppc-rate { opacity: .7; }
.ppc-source { padding: .1rem .4rem; border-radius: 5px; background: var(--bg-soft, #f1f5f9); }
.ppc-valid { opacity: .6; }
.ppc-shop-link { padding: .1rem .45rem; border-radius: 5px; font-weight: 600; white-space: nowrap;
color: var(--accent); background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.4);
text-decoration: none; transition: background .15s, border-color .15s; }
.ppc-shop-link:hover { background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.65); }
.ppc-img-btn { flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border: 1px solid var(--border);
border-radius: 8px; overflow: hidden; cursor: pointer; background: #fff; }
.ppc-img-btn img { width: 100%; height: 100%; object-fit: cover; }
.ppc-tilbud-btn { display: inline-flex; align-items: center; justify-content: center; background: none;
color: var(--accent); border-color: rgba(34,197,94,.4); transition: background .15s, border-color .15s; }
.ppc-tilbud-btn:hover { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.6); }
.produkt-offer-list { display: flex; flex-wrap: wrap; gap: .75rem; }
.produkt-offer-card { display: flex; gap: .6rem; align-items: center; border: 1px solid var(--border);
border-left-width: 4px; border-radius: 10px; padding: .6rem .75rem; min-width: 200px; }
.produkt-offer-thumb { width: 60px; height: 60px; padding: 0; border: none; border-radius: 8px;
overflow: hidden; cursor: pointer; background: #fff; flex: 0 0 auto; }
.produkt-offer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.produkt-offer-body { display: flex; flex-direction: column; gap: .1rem; }
.produkt-graph { border: 1px solid var(--border); border-radius: 12px; padding: .75rem; }
.produkt-graph-legend { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .6rem; }
/* Price points we hold the actual shelf tag for. The SVG scales with the box (preserveAspectRatio
="none"), so the badges are placed in % of the same box and stay glued to their dot at any width. */
.produkt-graph--overlay { position: relative; }
.pg-photo-dot {
position: absolute; transform: translate(-50%, -50%);
display: inline-flex; align-items: center; justify-content: center;
width: 19px; height: 19px; padding: 0; cursor: pointer;
border: 2px solid var(--surface, #fff); border-radius: 50%;
background: var(--accent, #16a34a); color: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,.35);
transition: transform .12s ease;
}
.pg-photo-dot:hover, .pg-photo-dot:focus-visible {
transform: translate(-50%, -50%) scale(1.25); z-index: 2; outline: none;
}
.produkt-graph-hint { margin: .45rem 0 0; font-size: .78rem; color: var(--text-muted); }
.produkt-modal-caption {
margin: .5rem 0 0; text-align: center; color: #fff; font-size: .9rem; font-weight: 600;
}
/* Legend entries are toggles: clicking one removes that chain from the chart. */
.pgl-item { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; opacity: .85;
padding: .15rem .45rem; border: 1px solid transparent; border-radius: 999px;
background: none; color: inherit; font-family: inherit; cursor: pointer;
transition: opacity .12s ease, border-color .12s ease; }
.pgl-item:hover, .pgl-item:focus-visible { opacity: 1; border-color: var(--border); outline: none; }
.pgl-item--off { opacity: .4; text-decoration: line-through; }
.pgl-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; box-sizing: border-box; }
.produkt-graph-empty { margin: 0; padding: 1.5rem .25rem; text-align: center;
font-size: .82rem; color: var(--text-muted); }
.produkt-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.75); z-index: 1000;
display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.produkt-modal { position: relative; max-width: 92vw; max-height: 88vh; }
.produkt-modal img { max-width: 92vw; max-height: 88vh; border-radius: 10px; }
.produkt-modal-close { position: absolute; top: -14px; right: -14px; width: 34px; height: 34px;
border-radius: 50%; border: none; background: #fff; color: #111; font-size: 1rem; cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,.3); }
/* ── Shopping-list row: height trim ────────────────────────────────────────────
The card keeps its shape; the saving comes from the meta chips fitting on one
line instead of wrapping onto two or three. */
/* The unit price now leads the meta line (price + chain moved to the right block),
so its "· " separator would dangle at the start of the row. */
.sl-item-perunit:first-child::before { content: none; }
.sl-item-meta .sl-size-tag { font-size: .64rem; padding: 0 6px; line-height: 1.45; }
.sl-item-meta .sl-size-tag--edit { gap: 4px; }
.sl-item-name { line-height: 1.25; }
/* ── Shopping-list row: mobile layout ──────────────────────────────────────────
On narrow phones the one-line flex row (grip + check + photo + name + actions
+ price + stepper) has more fixed-width chrome than the row is wide, which
squeezed the name column to nothing. Below 540px the priced rows switch to a
grid: the price stacks ON TOP of the stepper in one right-hand column, the two
mini actions turn into a vertical strip, and the name gets the remaining width
with room to wrap to three lines. Rows without a price column (done list,
shared list) keep the flex layout — they only carry a name and stay fine. */
@media (max-width: 540px) {
.sl-item:has(> .sl-price-col) {
display: grid;
grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
grid-template-areas:
"check photo body price link arrow"
"check photo body stepper link arrow";
column-gap: 6px; row-gap: 6px;
align-items: center;
}
/* Slightly smaller photo tile buys the name column another ~8px. */
.sl-item:has(> .sl-price-col) > .sl-item-photo,
.sl-item:has(> .sl-price-col) > .sl-scan-thumb,
.sl-item:has(> .sl-price-col) > .sl-item-ph { width: 34px; height: 34px; }
.sl-item:has(> .sl-price-col) > .sl-item-photo img { width: 34px; height: 34px; }
.sl-item:has(> .sl-price-col) > .sl-item-ph { font-size: 1.05rem; }
/* The 3px drag-grip dots would become a stray grid cell; HTML5 drag doesn't
work on touch anyway, so drop the hint on phones. */
.sl-item-wrap--draggable > .sl-item:has(> .sl-price-col)::before { display: none; }
.sl-item:has(> .sl-price-col) > .sl-check { grid-area: check; }
.sl-item:has(> .sl-price-col) > .sl-item-photo,
.sl-item:has(> .sl-price-col) > .sl-scan-thumb,
.sl-item:has(> .sl-price-col) > .sl-item-ph { grid-area: photo; }
.sl-item:has(> .sl-price-col) > .sl-item-body { grid-area: body; align-self: center; }
/* Price bottom-of-top-row, stepper top-of-bottom-row → the pair reads as one
right-aligned block vertically centred against the text column. */
.sl-item:has(> .sl-price-col) > .sl-price-col { grid-area: price; justify-self: end; align-self: end; min-width: 0; }
.sl-item:has(> .sl-price-col) > .sl-stepper { grid-area: stepper; justify-self: end; align-self: start; }
/* Chevron strip spans both rows on the card's right edge; slimmer than desktop.
Widened toward the card's outer edge only (ux_shoppinglist.md it.12) — the strip is full
card height so its area is ample; growing it inward would collide with the stepper. */
.sl-item:has(> .sl-price-col) > .sl-expand-btn,
.sl-item:has(> .sl-price-col) > .sl-expand-spacer {
grid-area: arrow; align-self: stretch; width: 32px; margin: -5px -13px -5px 0;
}
/* "Åpne produktside" gets its own full-height strip immediately left of the chevron — the same
order as on desktop. Without an area of its own the grid auto-placed it into an implicit row
under the checkbox, where it read as a stray box hanging off the bottom-left of the card. */
.sl-item:has(> .sl-price-col) > .sl-open-btn {
grid-area: link; align-self: stretch; width: 24px; margin: -5px 0;
}
/* The product-link column stays slim so the name keeps its width. */
.sl-item:has(> .sl-price-col) .sl-item-actions { flex-direction: column; gap: 0; margin-left: 2px; }
.sl-item:has(> .sl-price-col) .sl-item-actions .sl-mini-btn { width: 22px; }
/* Long names: slightly smaller, up to three lines before ellipsis. */
.sl-item-name { font-size: .85rem; -webkit-line-clamp: 3; }
/* Compact price block + stepper so the right column stays narrow. */
.sl-price-kr { font-size: 1.15rem; }
.sl-step-btn { width: 30px; height: 30px; }
.sl-step-qty { min-width: 20px; font-size: .84rem; line-height: 30px; }
}
/* ── PRODUCT REPORTS: "dette er feil" → /innboks → /admin/inbox ───────────── */
/* Topbar inbox button — always present for a signed-in user, sitting immediately left of the
theme toggle. The count badge rides the top-right corner and only appears when an admin has
replied; the ring around it keeps it legible against either theme's header. */
.topbar-inbox-btn { position: relative; text-decoration: none; }
.topbar-inbox-btn.active { color: var(--text); }
.topbar-inbox-badge {
position: absolute; top: -3px; right: -3px;
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px;
border-radius: 8px;
background: #ef4444; color: #fff;
font-size: .6rem; font-weight: 800; line-height: 1;
box-shadow: 0 0 0 2px var(--bg);
pointer-events: none;
}
/* ── Product page: the report affordance ─────────────────────────────────── */
.produkt-report-foot {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin: 2.2rem 0 1rem;
padding-top: 1.2rem;
border-top: 1px solid var(--border);
}
.produkt-report-btn {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 14px; border-radius: var(--radius);
background: none; border: 1px solid var(--border);
color: var(--text-muted); font-size: .84rem; font-weight: 600;
font-family: inherit; cursor: pointer;
transition: color .15s, border-color .15s, background .15s;
}
.produkt-report-btn:hover {
color: #f87171; border-color: rgba(248,113,113,.45);
background: rgba(248,113,113,.07);
}
.produkt-report-hint { font-size: .8rem; color: var(--text-muted); opacity: .8; }
.produkt-report-sent {
font-size: .86rem; color: #4ade80;
background: rgba(74,222,128,.09);
border: 1px solid rgba(74,222,128,.28);
border-radius: var(--radius); padding: 10px 14px;
}
.produkt-report-sent a { color: inherit; text-decoration: underline; }
.produkt-report-modal {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 26px 24px 20px;
max-width: 440px; width: 100%;
box-shadow: var(--elev-overlay);
}
.produkt-report-title { font-size: 1.08rem; font-weight: 700; margin: 0 0 2px; }
.produkt-report-sub { font-size: .84rem; color: var(--text-muted); margin: 0 0 16px; }
.produkt-report-login { font-size: .88rem; color: var(--text-muted); margin: 0 0 14px; }
.produkt-report-kinds { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.produkt-report-kind {
padding: 6px 11px; border-radius: 999px;
background: none; border: 1px solid var(--border);
color: var(--text-muted); font-size: .78rem; font-weight: 600;
font-family: inherit; cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
}
.produkt-report-kind:hover { color: var(--text); }
.produkt-report-kind--on {
background: var(--surface2); color: var(--text);
border-color: #60a5fa;
}
.produkt-report-text {
width: 100%; box-sizing: border-box;
background: var(--bg); color: var(--text);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 10px 12px; font-family: inherit; font-size: .88rem;
resize: vertical;
}
.produkt-report-error { margin-top: 10px; font-size: .82rem; color: #f87171; }
.produkt-report-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* ── /innboks — the reporter thread list ─────────────────────────────────── */
.innboks-page { max-width: 700px; }
.innboks-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 2px; }
.innboks-sub { font-size: .86rem; color: var(--text-muted); margin: 0 0 1.6rem; }
.innboks-compose { margin-bottom: 1.5rem; }
.innboks-compose-open { width: 100%; }
.innboks-compose-text {
width: 100%; box-sizing: border-box;
background: var(--bg); color: var(--text);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 10px 12px; font-family: inherit; font-size: .88rem; resize: vertical;
}
.innboks-compose-error { margin-top: 8px; font-size: .82rem; color: #f87171; }
.innboks-compose-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.innboks-compose-sent {
margin-top: 10px; font-size: .84rem; color: #4ade80;
background: rgba(74,222,128,.09); border: 1px solid rgba(74,222,128,.28);
border-radius: var(--radius); padding: 8px 12px;
}
.innboks-list { display: flex; flex-direction: column; gap: 14px; }
.innboks-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 14px 16px;
}
.innboks-card--new { border-color: rgba(96,165,250,.5); }
.innboks-card-head {
display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
margin-bottom: 10px;
}
.innboks-card-product { font-weight: 700; font-size: .95rem; }
.innboks-card-product a { color: inherit; text-decoration: none; }
.innboks-card-product a:hover { text-decoration: underline; }
.innboks-kind {
font-size: .72rem; font-weight: 600; color: var(--text-muted);
border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
}
.innboks-new-dot {
font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
background: rgba(96,165,250,.16); border: 1px solid rgba(96,165,250,.4);
color: #60a5fa; border-radius: 4px; padding: 2px 6px;
}
.innboks-msg { border-radius: var(--radius); padding: 9px 12px; margin-bottom: 8px; }
.innboks-msg--mine { background: var(--surface2); }
.innboks-msg--reply { background: rgba(96,165,250,.08); border: 1px solid rgba(96,165,250,.22); }
.innboks-msg-who { font-size: .72rem; color: var(--text-muted); margin-bottom: 4px; }
.innboks-msg-body { font-size: .88rem; line-height: 1.5; white-space: pre-wrap; }
.innboks-pending { font-size: .78rem; color: var(--text-muted); font-style: italic; }
/* ── /admin/inbox — the queue ────────────────────────────────────────────── */
.ainbox-head h2 { margin: 0 0 2px; font-size: 1.2rem; }
.ainbox-sub { font-size: .84rem; color: var(--text-muted); margin: 0 0 1.1rem; }
.ainbox-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 1.2rem; }
.ainbox-filter {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 13px; border-radius: 999px;
background: none; border: 1px solid var(--border);
color: var(--text-muted); font-size: .8rem; font-weight: 600;
font-family: inherit; cursor: pointer;
}
.ainbox-filter--on { background: var(--surface2); color: var(--text); border-color: #60a5fa; }
.ainbox-filter-count {
min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
background: #ef4444; color: #fff; font-size: .64rem; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center;
}
.ainbox-empty { color: var(--text-muted); font-size: .88rem; }
.ainbox-list { display: flex; flex-direction: column; gap: 12px; }
.ainbox-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; padding: 13px 15px;
}
.ainbox-card--open { border-left: 3px solid #fbbf24; }
.ainbox-card-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 7px; }
.ainbox-status {
font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
border-radius: 4px; padding: 2px 6px;
}
.ainbox-status--open { background: rgba(251,191,36,.15); border: 1px solid rgba(251,191,36,.38); color: #fbbf24; }
.ainbox-status--answered { background: rgba(74,222,128,.13); border: 1px solid rgba(74,222,128,.34); color: #4ade80; }
.ainbox-status--closed { background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted); }
.ainbox-kind { font-size: .74rem; color: var(--text-muted); }
.ainbox-when { font-size: .74rem; color: var(--text-muted); margin-left: auto; }
.ainbox-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ainbox-product { font-weight: 700; font-size: .93rem; color: inherit; text-decoration: none; }
.ainbox-product:hover { text-decoration: underline; }
.ainbox-editlink { font-size: .74rem; color: var(--text-muted); }
.ainbox-user { font-size: .76rem; color: var(--text-muted); margin-left: auto; }
.ainbox-msg {
background: var(--surface2); border-radius: var(--radius);
padding: 9px 12px; font-size: .88rem; line-height: 1.5; white-space: pre-wrap;
}
.ainbox-reply {
margin-top: 8px; background: rgba(96,165,250,.08);
border: 1px solid rgba(96,165,250,.22); border-radius: var(--radius); padding: 9px 12px;
}
.ainbox-reply-head { font-size: .72rem; color: var(--text-muted); margin-bottom: 4px; }
.ainbox-reply-body { font-size: .86rem; line-height: 1.5; white-space: pre-wrap; }
.ainbox-read { color: #4ade80; }
.ainbox-unread { color: #fbbf24; }
.ainbox-replybox { margin-top: 9px; }
.ainbox-replybox textarea {
width: 100%; box-sizing: border-box;
background: var(--bg); color: var(--text);
border: 1px solid var(--border); border-radius: var(--radius);
padding: 9px 11px; font-family: inherit; font-size: .87rem; resize: vertical;
}
.ainbox-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 9px; }