/* רשימת קניות לבית — © אופיר ברנס (Ofir Baranes) 2026 */

:root{
  --bg:#f6f4ee;
  --bg-2:#efece3;
  --card:#ffffff;
  --ink:#23261f;
  --ink-soft:#6b7065;
  --line:#e3dfd3;
  --accent:#5d7f5a;
  --accent-soft:#e8f0e6;
  --accent-ink:#3d5a3a;
  --copper:#b3743f;
  --warn:#c2751f;
  --warn-soft:#fbf0e0;
  --danger:#b4483f;
  --radius:16px;
  --shadow:0 1px 2px rgba(35,38,31,.05), 0 8px 24px -12px rgba(35,38,31,.18);
}

[data-theme="dark"]{
  --bg:#14160f;
  --bg-2:#1b1e16;
  --card:#1f2319;
  --ink:#eceade;
  --ink-soft:#9aa08f;
  --line:#2e332a;
  --accent:#8fb489;
  --accent-soft:#26301f;
  --accent-ink:#a9cba3;
  --copper:#d59558;
  --warn:#e0a758;
  --warn-soft:#2e2416;
  --danger:#e0776b;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Heebo',-apple-system,'Segoe UI',Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding-bottom:104px;
}

/* ---------- כותרת ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:14px 16px 10px;
}
.topbar-inner{display:flex;align-items:center;gap:12px;max-width:820px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.brand-icon{
  font-size:24px;line-height:1;
  background:var(--accent-soft);
  border-radius:14px;
  width:46px;height:46px;
  display:grid;place-items:center;
  flex:0 0 auto;
}
.brand-txt{min-width:0}
h1{font-size:19px;font-weight:800;margin:0;letter-spacing:-.2px}
.sub{margin:1px 0 0;font-size:12.5px;color:var(--ink-soft)}
.sub strong{color:var(--copper);font-weight:700}

.icon-btn{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);
  font-size:18px;cursor:pointer;color:var(--ink);
}
.icon-btn:active{transform:scale(.94)}

.progress-wrap{max-width:820px;margin:12px auto 0}
.progress-bar{height:8px;background:var(--bg-2);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.progress-bar span{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-ink));
  border-radius:99px;
  transition:width .35s cubic-bezier(.34,1.56,.64,1);
}
.progress-meta{
  display:flex;justify-content:space-between;align-items:center;
  font-size:12.5px;color:var(--ink-soft);margin-top:6px;font-weight:500;
}
.left-label{color:var(--accent-ink);font-weight:700}

/* ---------- סרגל כלים ---------- */
.toolbar{
  display:flex;gap:8px;overflow-x:auto;
  padding:12px 16px;max-width:820px;margin:0 auto;
  scrollbar-width:none;
}
.toolbar::-webkit-scrollbar{display:none}
.tool{
  flex:0 0 auto;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--ink);
  font-family:inherit;font-size:13.5px;font-weight:600;
  padding:9px 14px;border-radius:99px;cursor:pointer;
  white-space:nowrap;
  transition:transform .12s, background .15s, border-color .15s;
}
.tool:active{transform:scale(.95)}
.tool.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.tool.danger{color:var(--danger)}

/* ---------- רשימה ---------- */
.list{max-width:820px;margin:0 auto;padding:0 16px}

.cat{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:14px;
  overflow:hidden;
}
.cat-head{
  display:flex;align-items:center;gap:10px;
  padding:13px 15px;
  cursor:pointer;
  user-select:none;
  background:linear-gradient(180deg,var(--card),var(--bg-2));
  border-bottom:1px solid var(--line);
}
.cat-icon{font-size:19px}
.cat-title{font-weight:800;font-size:15.5px;flex:1}
.cat-count{
  font-size:12px;font-weight:700;color:var(--accent-ink);
  background:var(--accent-soft);border-radius:99px;padding:3px 9px;
}
.cat-chevron{color:var(--ink-soft);font-size:12px;transition:transform .2s}
.cat.collapsed .cat-chevron{transform:rotate(-90deg)}
.cat.collapsed .cat-body{display:none}
.cat.all-done .cat-count{background:var(--accent);color:#fff}

.item{
  display:flex;align-items:center;gap:11px;
  padding:11px 15px;
  border-bottom:1px solid var(--line);
  transition:background .15s;
}
.item:last-child{border-bottom:none}
.item.done{background:var(--bg-2)}
.item.done .item-name{text-decoration:line-through;color:var(--ink-soft)}

.check{
  flex:0 0 auto;
  width:26px;height:26px;border-radius:9px;
  border:2px solid var(--line);
  background:transparent;cursor:pointer;
  display:grid;place-items:center;
  color:transparent;font-size:15px;font-weight:800;
  transition:all .16s cubic-bezier(.34,1.56,.64,1);
  padding:0;
}
.item.done .check{background:var(--accent);border-color:var(--accent);color:#fff}
.check:active{transform:scale(.86)}

.item-main{flex:1;min-width:0}
.item-name{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.item-note{font-size:12px;color:var(--ink-soft);margin-top:1px}

.chip{font-size:10.5px;font-weight:700;border-radius:99px;padding:1.5px 7px;line-height:1.6}
.chip-sugg{background:var(--accent-soft);color:var(--accent-ink)}
.chip-verify{background:var(--warn-soft);color:var(--warn);cursor:help}
.chip-brand{background:var(--bg-2);color:var(--copper);border:1px solid var(--line)}

.qty{
  flex:0 0 auto;width:78px;
  font-family:inherit;font-size:12.5px;font-weight:600;text-align:center;
  color:var(--ink-soft);
  background:var(--bg-2);
  border:1px solid var(--line);border-radius:9px;
  padding:6px 4px;
}
.qty:focus{outline:2px solid var(--accent);outline-offset:1px;color:var(--ink)}

.del{
  flex:0 0 auto;
  border:none;background:transparent;color:var(--ink-soft);
  font-size:17px;line-height:1;cursor:pointer;padding:4px 2px;opacity:.45;
}
.del:hover{opacity:1;color:var(--danger)}

.restore{max-width:820px;margin:0 auto 16px;padding:0 16px;text-align:center}

/* ---------- הוספה ---------- */
.addbar{
  position:fixed;bottom:0;right:0;left:0;z-index:40;
  display:flex;gap:7px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
}
.addbar>*{
  font-family:inherit;font-size:13.5px;
  border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--ink);
  padding:10px 9px;min-width:0;
}
#addCat{flex:0 0 108px;font-weight:600}
#addName{flex:1}
#addQty{flex:0 0 62px;text-align:center}
.add-go{
  flex:0 0 46px;
  background:var(--accent);color:#fff;border-color:var(--accent);
  font-size:20px;font-weight:800;cursor:pointer;line-height:1;
}
.add-go:active{transform:scale(.93)}

/* ---------- כללי ---------- */
.page-foot{max-width:820px;margin:0 auto;padding:6px 16px 20px;text-align:center}
.note{font-size:12px;color:var(--ink-soft);margin:0 0 6px}
.copy{font-size:11px;color:var(--ink-soft);opacity:.7;margin:0}

.toast{
  position:fixed;bottom:88px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--bg);
  padding:11px 20px;border-radius:99px;
  font-size:13.5px;font-weight:600;
  opacity:0;pointer-events:none;transition:all .28s cubic-bezier(.34,1.56,.64,1);
  z-index:60;box-shadow:var(--shadow);
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

.empty{padding:20px 15px;text-align:center;color:var(--ink-soft);font-size:13.5px}

@media (min-width:560px){
  h1{font-size:22px}
  .item{padding:12px 17px}
}

/* ---------- הדפסה ---------- */
@media print{
  body{background:#fff;color:#000;padding:0}
  .toolbar,.addbar,.icon-btn,.del,.toast,.restore,.cat-chevron,.progress-wrap{display:none !important}
  .topbar{position:static;border:none;padding:0 0 8px}
  .cat{box-shadow:none;border:1px solid #ccc;break-inside:avoid;margin-bottom:10px}
  .cat.collapsed .cat-body{display:block}
  .check{border-color:#666}
  .item.done{background:#f2f2f2}
  .qty{background:transparent;border:none}
  .cat-head{background:#f5f5f5}
}