/* ═══ Sasha's Sushi PWA shell ═══ */
:root{
  --pwa-nav-h: 62px;
  --pwa-safe-b: env(safe-area-inset-bottom, 0px);
  --pwa-red: #E31E24;
}

/* Безопасные зоны (челка / жестовая полоса) */
.pwa-mode .header{ padding-top: env(safe-area-inset-top, 0px); height: auto; }
.pwa-mode .header-wrapper{ height: var(--header-height); }
.pwa-mode .category-nav-wrapper{ top: calc(var(--header-height) + env(safe-area-inset-top, 0px)); }

/* Место под таб-бар */
.pwa-mode body, body.pwa-mode{ padding-bottom: calc(var(--pwa-nav-h) + var(--pwa-safe-b)); }
.pwa-mode .footer{ padding-bottom: calc(24px + var(--pwa-nav-h) + var(--pwa-safe-b)); }
.pwa-mode .floating-chat-btn{ bottom: calc(var(--pwa-nav-h) + var(--pwa-safe-b) + 14px) !important; }
.pwa-mode .chat-popup{ bottom: calc(var(--pwa-nav-h) + var(--pwa-safe-b) + 76px) !important; }
.pwa-mode .cart-panel{ padding-bottom: var(--pwa-safe-b); }
.pwa-mode .product-modal{ padding-bottom: 0; }
.pwa-mode .modal-footer{ padding-bottom: calc(12px + var(--pwa-safe-b)); }

/* ── Нижний таб-бар ── */
.pwa-tabbar{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 998;
  display: none; align-items: stretch;
  height: calc(var(--pwa-nav-h) + var(--pwa-safe-b));
  padding-bottom: var(--pwa-safe-b);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 -2px 14px rgba(0,0,0,.05);
}
.pwa-mode .pwa-tabbar{ display: flex; }
.pwa-tab{
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; border: 0; background: none; color: #9CA3AF; text-decoration: none;
  font: 600 10.5px/1 'Inter', -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  position: relative; transition: color .18s, transform .12s;
}
.pwa-tab i{ font-size: 20px; }
.pwa-tab:active{ transform: scale(.9); }
.pwa-tab.active{ color: var(--pwa-red); }
.pwa-tab.active::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:0 0 3px 3px; background:var(--pwa-red);
}
.pwa-tab-badge{
  position: absolute; top: 6px; right: calc(50% - 22px);
  min-width: 17px; height: 17px; padding: 0 5px;
  background: var(--pwa-red); color: #fff; border-radius: 9px;
  font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
  border: 2px solid #fff; display: none;
}
.pwa-tab-badge.show{ display: block; animation: pwaPop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes pwaPop{ 0%{transform:scale(.4)} 100%{transform:scale(1)} }

/* ── Прогресс-бар навигации ── */
.pwa-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg,#FF4046,#E31E24); z-index: 100000;
  opacity: 0; transition: width .25s ease, opacity .3s;
  box-shadow: 0 0 8px rgba(227,30,36,.7);
}
.pwa-progress.on{ opacity: 1; }

/* ── Тост ── */
.pwa-toast{
  position: fixed; left: 50%; transform: translate(-50%, 120%);
  bottom: calc(var(--pwa-nav-h) + var(--pwa-safe-b) + 18px);
  max-width: 88vw; padding: 12px 20px; z-index: 100001;
  background: #1A1A1A; color: #fff; border-radius: 26px;
  font: 600 13.5px/1.35 'Inter', sans-serif; text-align: center;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  transition: transform .34s cubic-bezier(.34,1.56,.64,1), opacity .3s; opacity: 0;
}
.pwa-toast.show{ transform: translate(-50%, 0); opacity: 1; }

/* ── Pull-to-refresh ── */
.pwa-ptr{
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top,0px) + 6px);
  transform: translateX(-50%) scale(.4); z-index: 99999;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.18);
  display: grid; place-items: center; opacity: 0; pointer-events: none;
  transition: opacity .15s;
}
.pwa-ptr i{ color: var(--pwa-red); font-size: 15px; }
.pwa-ptr.spin i{ animation: pwaSpin .8s linear infinite; }
@keyframes pwaSpin{ to{ transform: rotate(360deg) } }

/* ── Баннер установки ── */
.pwa-install{
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + var(--pwa-safe-b));
  z-index: 99998; display: none; gap: 12px; align-items: center;
  padding: 12px 14px; background: #fff; border-radius: 18px;
  box-shadow: 0 10px 34px rgba(0,0,0,.18); border: 1px solid #E5E7EB;
  animation: pwaUp .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pwaUp{ from{ transform: translateY(140%) } to{ transform: translateY(0) } }
.pwa-install.show{ display: flex; }
.pwa-install img{ width: 44px; height: 44px; border-radius: 11px; flex-shrink: 0; }
.pwa-install .txt{ flex: 1; min-width: 0; }
.pwa-install b{ display: block; font-size: 14px; color: #111827; }
.pwa-install span{ font-size: 11.5px; color: #6B7280; }
.pwa-install .go{
  padding: 9px 16px; border: 0; border-radius: 11px; background: var(--pwa-red);
  color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.pwa-install .x{ border:0; background:none; color:#9CA3AF; font-size:17px; padding:4px 2px; }

/* ── Мелочи нативности ── */
.pwa-mode *{ -webkit-tap-highlight-color: transparent; }
.pwa-mode input, .pwa-mode textarea, .pwa-mode select{ font-size: 16px !important; } /* iOS без зума */
.pwa-mode .header-social, .pwa-mode .footer-dev-credit{ opacity:.75 }
.pwa-mode{ overscroll-behavior-y: contain; }