/* web-app — שכבת ה-PWA המשותפת
   ניטרלי לפלטה: כל צבע נלקח ממשתנה של האתר, עם נפילה רכה לערך סביר.
   האתר יכול לדרוס: --pwa-ink, --pwa-bg, --pwa-accent, --pwa-line, --pwa-muted. */

:root {
  --pwa-ink:    var(--ink, #16181d);
  --pwa-bg:     var(--bg, #ffffff);
  --pwa-accent: var(--sky, var(--accent, #0a84ff));
  --pwa-line:   var(--card-brd, var(--line, rgba(22,24,29,.10)));
  --pwa-muted:  var(--muted, #6b7280);
  --pwa-bottom: 0px;   /* גובה הסרגל התחתון — נמדד ב-JS */
  --pwa-hint:   0px;   /* גובה הוראת האייפון */
  --pwa-sat: env(safe-area-inset-top, 0px);
  --pwa-sab: env(safe-area-inset-bottom, 0px);
  --pwa-sal: env(safe-area-inset-left, 0px);
  --pwa-sar: env(safe-area-inset-right, 0px);
}

/* ---------- safe-area ----------
   החוק: שום אלמנט קבוע לא מסתיר תוכן. הסרגל התחתון מוסיף ריווח לגוף,
   וכל אלמנט קבוע-עליון מקבל ריווח למגרעת המסך. */
html.pwa body {
  padding-bottom: calc(var(--pwa-bottom) + var(--pwa-hint));
  padding-left: max(var(--pwa-sal), 0px);
  padding-right: max(var(--pwa-sar), 0px);
}
[data-pwa-safe-top]   { padding-top: calc(var(--pwa-orig-top, 0px) + var(--pwa-sat)); }
html.pwa [data-pwa-safe-top] { padding-top: calc(var(--pwa-sat) + var(--pwa-pad-top, 14px)); }
[data-pwa-safe-bottom] { bottom: calc(var(--pwa-bottom) + var(--pwa-sab) + 12px) !important; }

/* ---------- באנר "יש גרסה חדשה" ---------- */
.pwa-upd {
  position: fixed; z-index: 9000;
  top: calc(12px + var(--pwa-sat));
  left: 50%; transform: translateX(-50%) translateY(-12px);
  display: flex; align-items: center; gap: 8px;
  background: var(--pwa-ink); color: #fff; border: 0;
  border-radius: 99px; padding: 11px 20px;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  box-shadow: 0 10px 30px rgba(0,0,0,.28);
  cursor: pointer; opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.pwa-upd.in { opacity: 1; transform: translateX(-50%) translateY(0); }
.pwa-upd:disabled { opacity: .7; cursor: default; }
.pwa-upd svg { width: 17px; height: 17px; }

/* ---------- כפתור התקנה ---------- */
.pwa-install {
  position: fixed; z-index: 8900;
  inset-inline-end: 16px;
  bottom: calc(16px + var(--pwa-sab) + var(--pwa-bottom) + var(--pwa-hint));
  display: flex; align-items: center; gap: 8px;
  background: var(--pwa-accent); color: #fff; border: 0;
  border-radius: 99px; padding: 12px 20px;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  box-shadow: 0 10px 28px rgba(10,132,255,.32);
  cursor: pointer;
}
.pwa-install:hover { filter: brightness(1.05); }
.pwa-install svg { width: 17px; height: 17px; }
.pwa-install[hidden] { display: none; }

/* ---------- הוראת אייפון ---------- */
.pwa-ios-hint {
  position: fixed; z-index: 8800;
  inset-inline: 12px;
  bottom: calc(12px + var(--pwa-sab) + var(--pwa-bottom));
  display: flex; align-items: center; gap: 10px;
  max-width: 520px; margin: 0 auto;
  background: color-mix(in srgb, var(--pwa-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--pwa-line); border-radius: 16px;
  padding: 13px 15px; font-size: 13.5px; font-weight: 500; color: var(--pwa-ink);
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
  opacity: 0; transform: translateY(8px); transition: opacity .25s ease, transform .25s ease;
}
.pwa-ios-hint.in { opacity: 1; transform: none; }
.pwa-ios-hint svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--pwa-accent); }
.pwa-ios-hint .x {
  margin-inline-start: auto; border: 0; background: transparent;
  color: var(--pwa-muted); padding: 2px; line-height: 0; cursor: pointer;
}
.pwa-ios-hint .x svg { width: 16px; height: 16px; color: inherit; }

/* ---------- סרגל טאבים תחתון (נייד בלבד) ---------- */
.pwa-bottombar { display: none; }
.pwa-sheet { display: none; }

@media (max-width: 879px) {
  .pwa-bottombar {
    position: fixed; z-index: 8700; inset-inline: 0; bottom: 0;
    display: flex;
    background: color-mix(in srgb, var(--pwa-bg) 86%, transparent);
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    border-top: 1px solid var(--pwa-line);
    padding: 6px 6px calc(6px + var(--pwa-sab));
  }
  .pwa-bb {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    border: 0; background: transparent; text-decoration: none; cursor: pointer;
    color: var(--pwa-muted); font: inherit; font-size: 11px; font-weight: 500;
    padding: 7px 2px; border-radius: 14px; min-height: 44px;
  }
  .pwa-bb .ic { display: flex; align-items: center; justify-content: center; }
  .pwa-bb svg { width: 21px; height: 21px; }
  .pwa-bb.on { color: var(--pwa-accent); font-weight: 600; }

  .pwa-sheet {
    display: block; position: fixed; inset: 0; z-index: 8750;
    background: rgba(0,0,0,.35);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  .pwa-sheet.open { opacity: 1; pointer-events: auto; }
  .pwa-sheet .inner {
    position: absolute; inset-inline: 0; bottom: 0;
    background: color-mix(in srgb, var(--pwa-bg) 97%, transparent);
    -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
    border-radius: 22px 22px 0 0;
    padding: 16px 16px calc(96px + var(--pwa-sab));
    transform: translateY(100%); transition: transform .26s cubic-bezier(.22,.8,.3,1);
  }
  .pwa-sheet.open .inner { transform: none; }
  .pwa-sheet .grab { width: 38px; height: 4px; border-radius: 99px; background: var(--pwa-line); margin: 0 auto 14px; }
  .pwa-sheet .sgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .pwa-sh {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    background: color-mix(in srgb, var(--pwa-bg) 78%, transparent);
    border: 1px solid var(--pwa-line); border-radius: 16px;
    padding: 13px 4px; font: inherit; font-size: 11.5px; font-weight: 500;
    color: var(--pwa-ink); text-decoration: none; cursor: pointer;
  }
  .pwa-sh svg { width: 20px; height: 20px; }
}

/* ---------- תפריט עליון (דסקטופ) ---------- */
.pwa-topitem {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; cursor: pointer; text-decoration: none;
  color: var(--pwa-muted); font: inherit; font-size: 14px; font-weight: 500;
  padding: 8px 14px; border-radius: 12px;
}
.pwa-topitem:hover { color: var(--pwa-ink); background: color-mix(in srgb, var(--pwa-ink) 5%, transparent); }
.pwa-topitem.on { color: var(--pwa-accent); font-weight: 600; }
@media (max-width: 879px) { [data-pwa-topnav] { display: none; } }

/* ---------- מצב אפליקציה מותקנת ---------- */
html.pwa-standalone { overscroll-behavior-y: none; }
html.pwa-standalone body { -webkit-user-select: none; user-select: none; }
html.pwa-standalone input, html.pwa-standalone textarea,
html.pwa-standalone [contenteditable] { -webkit-user-select: text; user-select: text; }

@media (prefers-reduced-motion: reduce) {
  .pwa-upd, .pwa-ios-hint, .pwa-sheet, .pwa-sheet .inner { transition: none; }
}