/**
 * Soft animated gradient background — used on every screen.
 * Two very slow moving colour blooms; no layout cost, GPU friendly, and it
 * switches itself off when the device asks for reduced motion.
 */
:root {
  --bg-1: #FFF6EC;
  --bg-2: #FFE9D2;
  --bg-3: #FFF2E0;
  --bg-4: #FFE3E3;
}
body {
  position: relative;
  background: linear-gradient(135deg, var(--bg-1), var(--bg-2) 35%, var(--bg-3) 65%, var(--bg-4));
  background-size: 300% 300%;
  background-attachment: fixed;
  animation: appBgShift 28s ease-in-out infinite;
}
body::before {
  content: '';
  position: fixed;
  inset: -20vmax;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 12% 18%, rgba(200, 16, 46, .12), transparent 60%),
    radial-gradient(34vmax 34vmax at 85% 12%, rgba(245, 158, 11, .14), transparent 62%),
    radial-gradient(40vmax 40vmax at 78% 88%, rgba(22, 163, 74, .10), transparent 60%);
  animation: appBlobDrift 34s ease-in-out infinite alternate;
}
@keyframes appBgShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes appBlobDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2vmax, -2vmax, 0) scale(1.06); }
  100% { transform: translate3d(-2vmax, 2vmax, 0) scale(1.02); }
}

/* The dark screens (kitchen + rider) get their own, deeper version */
body.rider-body, body.kds-dark {
  background: linear-gradient(140deg, #17120E, #241A13 40%, #140F0C 70%, #1E1410);
  background-size: 300% 300%;
}
body.rider-body::before, body.kds-dark::before {
  background:
    radial-gradient(40vmax 40vmax at 15% 20%, rgba(245, 158, 11, .16), transparent 62%),
    radial-gradient(36vmax 36vmax at 85% 25%, rgba(200, 16, 46, .16), transparent 60%),
    radial-gradient(42vmax 42vmax at 70% 85%, rgba(34, 197, 94, .12), transparent 62%);
}

@media (prefers-reduced-motion: reduce) {
  body, body::before { animation: none !important; }
}

/* =====================================================================
   "APP BANA LEN" WALI PATTI  (assets/js/install.js se banti hai)

   Neeche se aati hai, ek dafa. Band kar dein to dobara nahi aati.
   App ki tarah chal rahi ho to banti hi nahi.
   ===================================================================== */
#ipzInstallTip {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 2000;
  width: min(560px, calc(100vw - 24px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #1f2937;
  color: #fff;
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .75);
  font-size: .88rem;
  line-height: 1.35;
  animation: ipzTipUp .28s cubic-bezier(.22, .9, .3, 1) both;
}
@keyframes ipzTipUp { from { opacity: 0; transform: translate(-50%, 16px); } }
@media (prefers-reduced-motion: reduce) { #ipzInstallTip { animation: none; } }

#ipzInstallTip .ipz-tip-text { flex: 1 1 240px; min-width: 0; }
#ipzInstallTip b { color: #FDE68A; }
#ipzInstallTip .ipz-tip-acts { display: flex; gap: 8px; flex: 0 0 auto; margin-left: auto; }
#ipzInstallTip button {
  border: 0; border-radius: 10px; font: inherit; font-weight: 700;
  min-height: 40px; padding: 0 14px; cursor: pointer; white-space: nowrap;
}
#ipzInstallTip .ipz-tip-go { background: #C8102E; color: #fff; }
#ipzInstallTip .ipz-tip-go:hover { background: #a60d26; }
#ipzInstallTip .ipz-tip-no { background: rgba(255, 255, 255, .14); color: #fff; }
#ipzInstallTip .ipz-tip-no:hover { background: rgba(255, 255, 255, .24); }

@media (max-width: 420px) {
  #ipzInstallTip { font-size: .83rem; padding: 11px 12px; }
  #ipzInstallTip .ipz-tip-acts { margin-left: 0; width: 100%; }
  #ipzInstallTip button { flex: 1 1 auto; }
}