/* Sjekkmat 2026 — Product */
:root {
  --display: 'Bricolage Grotesque', Georgia, serif;
  --body: 'Outfit', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --bg: #fafbfc;
  --surface: #ffffff;
  --surface-2: #f3f5f7;
  --surface-3: #e9ecef;
  --border: #e2e6ea;
  --border-subtle: #edf0f3;
  --ink: #0f1419;
  --ink-2: #3d4852;
  --ink-3: #6b7785;
  --ink-4: #9aa5b1;
  --accent: #2563eb;
  --accent-soft: rgba(37,99,235,0.08);
  --red: #dc2626;
  --red-soft: rgba(220,38,38,0.08);
  --red-medium: rgba(220,38,38,0.12);
  --green: #16a34a;
  --green-soft: rgba(22,163,74,0.08);
  --orange: #ea580c;
  --orange-soft: rgba(234,88,12,0.08);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--body); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.5; }

/* ─── Nav ─────────────────────────────── */
.nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; height:56px; border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:100;
  backdrop-filter:blur(12px); background:rgba(255,255,255,0.92);
}
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.nav-logo-icon {
  width:32px; height:32px; background:var(--accent); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:white; font-weight:800; font-size:16px; font-family:var(--display);
}
.nav-logo-text { font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-0.03em; }
.nav-back { font-size:13px; color:var(--ink-4); text-decoration:none; font-weight:500; transition:color 0.15s; }
.nav-back:hover { color:var(--ink); }

/* ─── Hero ────────────────────────────── */
.hero { padding:24px; border-bottom:1px solid var(--border); background:var(--surface); }
.hero-loading { color:var(--ink-4); font-size:13px; padding:12px 0; }
.hero-inner { display:flex; align-items:flex-start; gap:18px; }
.hero-img {
  width:56px; height:56px; border-radius:var(--radius);
  object-fit:contain; background:var(--surface-2);
  border:1px solid var(--border-subtle); flex-shrink:0;
}
.hero-info { flex:1; min-width:0; }
.hero-title-row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.hero-name {
  font-family:var(--display); font-size:24px; font-weight:800;
  letter-spacing:-0.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.hero-brand {
  font-size:12px; color:var(--ink-4); font-weight:600;
  text-transform:uppercase; letter-spacing:0.05em;
}
.hero-meta { font-size:11px; color:var(--ink-4); margin-top:2px; font-family:var(--mono); }
.hero-price-row { display:flex; align-items:baseline; gap:16px; margin-top:14px; flex-wrap:wrap; }
.hero-price { font-family:var(--mono); font-size:34px; font-weight:700; letter-spacing:-0.03em; }
.hero-price-label { font-size:11px; color:var(--ink-4); margin-top:2px; }
.hero-price-unit { font-size:14px; color:var(--ink-3); }

.perf-badges { display:flex; gap:6px; margin-top:12px; flex-wrap:wrap; }
.perf-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:var(--radius-xs);
  font-family:var(--mono); font-size:11px; font-weight:500;
  border:1px solid var(--border); background:var(--surface-2);
}
.perf-badge .perf-label { color:var(--ink-4); margin-right:2px; }
.perf-badge.up { border-color:rgba(22,163,74,0.25); background:var(--green-soft); }
.perf-badge.up .perf-value { color:var(--green); }
.perf-badge.down { border-color:rgba(220,38,38,0.25); background:var(--red-soft); }
.perf-badge.down .perf-value { color:var(--red); }

/* ─── Content Grid ────────────────────── */
.content-grid { display:grid; grid-template-columns:1fr 320px; min-height:calc(100vh - 56px - 140px); }

/* ─── Chart ───────────────────────────── */
.chart-section { border-right:1px solid var(--border); display:flex; flex-direction:column; }

.chart-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; border-bottom:1px solid var(--border-subtle);
}

.time-filters {
  display:flex; gap:2px; background:var(--surface-2);
  padding:3px; border-radius:var(--radius-xs);
}

.tf-btn {
  padding:5px 14px; border:none; background:transparent;
  color:var(--ink-3); font-family:var(--body); font-size:12px;
  font-weight:500; border-radius:5px; cursor:pointer; transition:all 0.15s;
}
.tf-btn:hover { color:var(--ink); }
.tf-btn.active { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }

.chart-date-range { font-size:11px; color:var(--ink-4); font-family:var(--mono); }
.chart-container { flex:1; padding:16px 18px; min-height:380px; position:relative; }

.chart-legend { display:flex; flex-wrap:wrap; gap:12px; padding:10px 18px 14px; border-top:1px solid var(--border-subtle); }
.legend-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--ink-3); cursor:pointer; transition:opacity 0.15s; }
.legend-item:hover { opacity:0.7; }
.legend-item.disabled { opacity:0.3; text-decoration:line-through; }
.legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ─── Sidebar ─────────────────────────── */
.sidebar { background:var(--surface); overflow-y:auto; }

.stat-block { border-bottom:1px solid var(--border); padding:16px 18px; }
.stat-block-title {
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.06em; color:var(--ink-4); margin-bottom:12px;
}
.stat-loading { font-size:13px; color:var(--ink-4); }

.stat-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; }
.stat-row + .stat-row { border-top:1px solid var(--border-subtle); }
.stat-label { font-size:12px; color:var(--ink-3); }
.stat-value { font-family:var(--mono); font-size:12px; font-weight:500; }

.chain-row { display:flex; align-items:center; justify-content:space-between; padding:7px 0; }
.chain-row + .chain-row { border-top:1px solid var(--border-subtle); }
.chain-info { display:flex; align-items:center; gap:8px; }
.chain-rank {
  width:22px; height:22px; border-radius:var(--radius-xs);
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; font-family:var(--mono);
  background:var(--surface-3); color:var(--ink-3);
}
.chain-rank.best { background:var(--green-soft); color:var(--green); }
.chain-rank.worst { background:var(--red-soft); color:var(--red); }
.chain-name { font-size:13px; font-weight:500; }
.chain-price { font-family:var(--mono); font-size:13px; font-weight:500; }
.chain-price.best { color:var(--green); }
.chain-price.worst { color:var(--red); }
.chain-diff { font-family:var(--mono); font-size:10px; margin-left:6px; padding:2px 6px; border-radius:4px; }
.chain-diff.up-diff { color:var(--red); background:var(--red-soft); }

/* ─── Alerts ──────────────────────────── */
.alert-item { padding:8px 0; }
.alert-item + .alert-item { border-top:1px solid var(--border-subtle); }
.alert-badges { display:flex; gap:4px; margin-bottom:4px; }
.badge {
  display:inline-block; padding:1px 7px; border-radius:4px;
  font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
}
.badge-critical { background:var(--red-medium); color:var(--red); }
.badge-high { background:var(--orange-soft); color:var(--orange); }
.badge-medium { background:rgba(234,179,8,0.12); color:#a16207; }
.badge-low { background:var(--surface-3); color:var(--ink-3); }
.badge-type { background:var(--surface-3); color:var(--ink-3); }
.alert-title { font-size:12px; color:var(--ink-3); line-height:1.4; }

/* ─── Responsive ──────────────────────── */
@media (max-width:900px) {
  .content-grid { grid-template-columns:1fr; }
  .chart-section { border-right:none; border-bottom:1px solid var(--border); }
  .chart-container { min-height:280px; }
}

@media (max-width:600px) {
  .nav { padding:0 14px; }
  .hero { padding:18px 14px; }
  .hero-price { font-size:28px; }
  .hero-name { font-size:20px; }
  .chart-toolbar { padding:10px 14px; }
  .chart-container { padding:12px 14px; }
  .chart-legend { padding:8px 14px 12px; }
  .stat-block { padding:14px 14px; }
}



/* Owner alert */
.owner-alert {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: var(--radius-xs);
  padding: 8px 10px;
  font-size: 11px;
  color: #92400e;
  line-height: 1.5;
  margin-bottom: 10px;
}
.owner-alert-icon { margin-right: 2px; }
.chain-owner {
  font-size: 9px;
  color: var(--ink-4);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  font-weight: 500;
}

/* Owner alert */
.owner-alert {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: var(--radius-xs);
  padding: 8px 10px;
  font-size: 11px;
  color: #92400e;
  line-height: 1.5;
  margin-bottom: 10px;
}
.owner-alert-icon { margin-right: 2px; }
.chain-owner {
  font-size: 9px;
  color: var(--ink-4);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  font-weight: 500;
}

/* ─── Add to cart button ─────────────── */
.product-add-cart {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 10px; margin-top: 12px;
  border: 1.5px solid var(--accent); background: var(--accent-soft);
  color: var(--accent); font-size: 14px; font-weight: 600;
  font-family: var(--body); cursor: pointer; transition: all 0.2s;
}
.product-add-cart:hover { background: var(--accent); color: white; }
.product-add-cart.in-cart {
  background: #059669; border-color: #059669; color: white;
}
.product-add-cart.in-cart:hover { background: #dc2626; border-color: #dc2626; }

/* ─── Price Alert ─────────────────── */
.price-alert-box {
  margin-top: 16px; padding: 16px 20px;
  background: #fef9e7; border: 1.5px solid #f0d060;
  border-radius: 12px; max-width: 420px;
}
.price-alert-box h4 {
  font-size: 14px; font-weight: 600; margin: 0 0 8px;
  color: #92600a; display: flex; align-items: center; gap: 6px;
}
.price-alert-row {
  display: flex; gap: 8px;
}
.price-alert-row input[type="email"] {
  flex: 1; padding: 8px 12px; border: 1.5px solid #ddd;
  border-radius: 8px; font-size: 14px; font-family: var(--body);
}
.price-alert-row input[type="email"]:focus {
  outline: none; border-color: var(--accent);
}
.price-alert-row button {
  padding: 8px 16px; border: none; border-radius: 8px;
  background: #e8a308; color: white; font-weight: 600;
  font-size: 13px; cursor: pointer; white-space: nowrap;
  font-family: var(--body);
}
.price-alert-row button:hover { background: #c98a00; }
.price-alert-msg {
  font-size: 13px; margin-top: 6px; color: #059669;
}
.price-alert-box.subscribed {
  background: #ecfdf5; border-color: #059669;
}
.price-alert-box.subscribed h4 { color: #059669; }

/* Price alert responsive */
@media (max-width: 480px) {
  .price-alert-box { max-width: 100%; padding: 14px 16px; }
  .price-alert-row { flex-direction: column; }
  .price-alert-row input[type="email"] { width: 100%; }
  .price-alert-row button { width: 100%; padding: 12px; font-size: 14px; }
}