/* Sjekkmat 2026 — Handleliste */
: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);
  --green: #16a34a;
  --green-soft: rgba(22,163,74,0.08);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.03);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --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 ────────────────────────────── */

/* ─── Layout ─────────────────────────── */
.basket-layout { display:grid; grid-template-columns:1fr 320px; height:calc(100vh - 56px); }

/* ─── Left ────────────────────────────── */
.basket-left { display:flex; flex-direction:column; }

.add-product { padding:16px 20px; }

.search-wrapper { position:relative; }
.search-icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--ink-4); pointer-events:none; }
.search-wrapper input {
  width:100%; padding:12px 16px 12px 40px;
  border:2px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--ink);
  font-family:var(--body); font-size:14px; outline:none;
  transition:all 0.2s; box-shadow:var(--shadow-sm);
}
.search-wrapper input::placeholder { color:var(--ink-4); }
.search-wrapper input:focus { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft), var(--shadow-sm); }

.add-dropdown {
  position:absolute; top:100%; left:0; right:0;
  background:var(--surface); border:1px solid var(--border);
  border-radius:0 0 var(--radius) var(--radius);
  max-height:320px; overflow-y:auto; z-index:100;
  display:none; box-shadow:0 8px 24px rgba(0,0,0,0.12);
}
.add-dropdown.open { display:block; }

.add-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 16px; cursor:pointer;
  border-bottom:1px solid var(--border-subtle);
  transition:background 0.1s;
}
.add-item:hover { background:var(--surface-2); }
.add-item img {
  width:36px; height:36px; border-radius:var(--radius-xs);
  object-fit:contain; background:var(--surface-2); border:1px solid var(--border-subtle);
}
.add-item-name { font-size:13px; font-weight:500; flex:1; }
.add-item-brand { font-size:11px; color:var(--ink-4); }
.add-item-btn {
  padding:4px 12px; border:1px solid var(--green);
  background:var(--green-soft); color:var(--green);
  font-size:12px; font-weight:600; border-radius:var(--radius-xs);
  cursor:pointer; transition:all 0.15s;
}
.add-item-btn:hover { background:var(--green); color:white; }

/* ─── Basket Items (cards) ────────────── */
.basket-items { flex:1; overflow-y:auto; padding:12px 16px; }

.basket-empty { padding:56px 20px; text-align:center; color:var(--ink-4); }
.basket-empty-icon { margin-bottom:12px; }
.basket-empty p { font-size:14px; }
.basket-empty-hint { font-size:12px; margin-top:4px; }

.bitem {
  margin-bottom:10px;
  padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:all 0.15s;
}
.bitem:hover {
  border-color:var(--accent);
  box-shadow:var(--shadow-sm);
}

.bitem-top {
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
.bitem-top img {
  width:44px; height:44px; border-radius:var(--radius-xs);
  object-fit:contain; background:var(--surface-2);
  border:1px solid var(--border-subtle); flex-shrink:0;
}
.bitem-noimg {
  width:44px; height:44px; border-radius:var(--radius-xs);
  background:var(--surface-3); flex-shrink:0;
}
.bitem-info { flex:1; min-width:0; }
.bitem-name {
  font-size:14px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bitem-brand { font-size:11px; color:var(--ink-4); }
.bitem-remove {
  width:28px; height:28px; border:none; background:none;
  color:var(--ink-4); font-size:16px; cursor:pointer;
  border-radius:var(--radius-xs); display:flex; align-items:center; justify-content:center;
  transition:all 0.15s;
}
.bitem-remove:hover { background:var(--red-soft); color:var(--red); }

.bitem-chips {
  display:flex; flex-wrap:wrap; gap:5px; padding-left:56px;
}
.bitem-chip {
  font-family:var(--mono); font-size:11px;
  padding:3px 8px; border-radius:5px;
  border:1px solid var(--border-subtle);
  background:var(--surface-2); color:var(--ink-3);
  white-space:nowrap;
}
.bitem-chip.best {
  border-color:rgba(22,163,74,0.25);
  background:var(--green-soft); color:var(--green); font-weight:600;
}
.bitem-chip.excluded {
  opacity:0.3; text-decoration:line-through;
}
.bitem-loading { font-size:11px; color:var(--ink-4); }
.bitem-noprice { font-size:11px; color:var(--ink-4); font-style:italic; }

/* ─── Basket Total ────────────────────── */
.basket-total {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:4px;
  padding:16px; margin-top:4px;
  background:var(--green-soft);
  border:1px solid rgba(22,163,74,0.2);
  border-radius:var(--radius);
}
.basket-total-label { font-size:14px; color:var(--ink-2); }
.basket-total-label strong { color:var(--green); }
.basket-total-price {
  font-family:var(--mono); font-size:24px; font-weight:700;
  color:var(--green); letter-spacing:-0.02em;
}
.basket-total-meta { width:100%; font-size:11px; color:var(--ink-4); }

/* ─── Right ───────────────────────────── */
.basket-right { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); margin:16px 16px 16px 0; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-sm); }

.results-header { padding:16px 20px; border-bottom:1px solid var(--border); }
.results-title { font-family:var(--display); font-size:16px; font-weight:700; letter-spacing:-0.01em; }
.results-count { font-size:11px; color:var(--ink-4); margin-top:2px; font-family:var(--mono); }

/* ─── Chain Toggles ───────────────────── */
.chain-toggles {
  display:flex; flex-wrap:wrap; gap:5px; align-items:center;
  padding:12px 20px; border-bottom:1px solid var(--border-subtle);
}
.chain-toggle {
  padding:4px 10px; border:1px solid var(--border); border-radius:20px;
  font-family:var(--body); font-size:11px; font-weight:500;
  color:var(--ink-2); background:var(--surface);
  cursor:pointer; transition:all 0.15s; user-select:none;
}
.chain-toggle:hover { border-color:var(--ink-4); }
.chain-toggle.disabled { opacity:0.4; text-decoration:line-through; background:var(--surface-2); }

/* ─── Chain Results ───────────────────── */
.chain-results { flex:1; overflow-y:auto; }
.results-empty { padding:40px 20px; text-align:center; font-size:13px; color:var(--ink-4); }

.cresult { padding:16px 20px; border-bottom:1px solid var(--border-subtle); }
.cresult:first-child { background:var(--green-soft); }
.cresult-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; }
.cresult-rank { display:flex; align-items:center; gap:10px; }
.cresult-num {
  width:26px; height:26px; border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:700;
  background:var(--surface-3); color:var(--ink-3);
}
.cresult:first-child .cresult-num { background:var(--green); color:#fff; }
.cresult-name { font-size:15px; font-weight:600; }
.cresult-total { font-family:var(--mono); font-size:20px; font-weight:600; letter-spacing:-0.02em; }
.cresult:first-child .cresult-total { color:var(--green); }
.cresult-meta { display:flex; align-items:center; justify-content:space-between; }
.cresult-found { font-size:11px; color:var(--ink-4); }
.cresult-savings { font-family:var(--mono); font-size:11px; font-weight:500; }
.cresult-savings.has-savings { color:var(--red); }
.cresult-winner { font-size:11px; color:var(--green); font-weight:600; margin-left:8px; }
.cresult-missing { font-size:11px; color:var(--ink-4); margin-top:4px; font-style:italic; }

/* ─── Responsive ──────────────────────── */
@media (max-width:800px) {
  .basket-layout { grid-template-columns:1fr; }
  .basket-right { border-left:none; border-top:1px solid var(--border); }
}
@media (max-width:600px) {
  .nav { padding:0 14px; }
  .add-product { padding:12px 14px; }
  .basket-items { padding:8px 10px; }
  .bitem { padding:12px; }
  .bitem-chips { padding-left:0; }
  .cresult { padding:14px 14px; }

/* ─── Mobile fix ─────────────────────── */
@media (max-width: 768px) {
  .add-product input[type="text"] { font-size: 16px !important; }
}

/* ─── Search dropdown stacking ───────── */
.add-product {
  position: relative;
  z-index: 50;
}
.search-dropdown { z-index: 9999 !important;
  z-index: 999;
}
.basket-items {
  position: relative;
  z-index: 1;
}
.search-dropdown { z-index: 9999 !important; }

/* ─── Dropdown stacking fix (correct classes) ─── */
.add-product { position: relative; z-index: 50; }
.add-dropdown { z-index: 9999 !important; }
.basket-items { position: relative; z-index: 1; }