/* quick_veg PWA + animated basket loader */
:root{
  --qv-theme:#0c9b3d;
  --qv-theme-dark:#08712c;
  --qv-soft:#f0fdf4;
}
.loader{
  position:fixed;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(240,253,244,.97));
  backdrop-filter:saturate(1.1) blur(2px);
  display:grid;
  place-items:center;
  z-index:99999;
  transition:opacity .35s ease, visibility .35s ease;
}
.loader.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.loader-box{
  width:min(92vw,380px);
  padding:22px 20px 18px;
  border-radius:28px;
  background:#fff;
  border:1px solid rgba(12,155,61,.1);
  box-shadow:0 22px 70px rgba(12,155,61,.12);
  text-align:center;
}
.loader-scene{
  position:relative;
  height:150px;
  margin-bottom:10px;
  overflow:hidden;
}
.loader-basket{
  position:absolute;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  width:118px;
  height:72px;
}
.basket-handle{
  position:absolute;
  left:50%;
  top:-22px;
  transform:translateX(-50%);
  width:74px;
  height:38px;
  border:5px solid #c2410c;
  border-bottom:none;
  border-radius:42px 42px 0 0;
  opacity:.92;
}
.basket-body{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#fed7aa,#fb923c 55%,#ea580c);
  border-radius:16px 16px 20px 20px;
  border:4px solid #c2410c;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);
  animation:basketBounce 1.55s ease-in-out infinite;
}
.basket-body::before,
.basket-body::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent 12%,rgba(255,255,255,.32) 12% 16%,transparent 16% 32%,rgba(255,255,255,.32) 32% 36%,transparent 36% 52%,rgba(255,255,255,.32) 52% 56%,transparent 56% 72%,rgba(255,255,255,.32) 72% 76%,transparent 76%);
  border-radius:12px 12px 16px 16px;
  opacity:.7;
}
.basket-shadow{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:120px;
  height:14px;
  background:radial-gradient(ellipse at center, rgba(15,23,42,.18), rgba(15,23,42,0));
  filter:blur(2px);
}
.loader-veg{
  position:absolute;
  top:-28px;
  font-size:29px;
  animation:vegDrop 1.65s cubic-bezier(.35,.05,.2,1) infinite;
  will-change:transform,opacity;
}
.loader-veg.v1{ left:18%; animation-delay:0s; }
.loader-veg.v2{ left:33%; animation-delay:.22s; }
.loader-veg.v3{ left:48%; animation-delay:.44s; }
.loader-veg.v4{ left:63%; animation-delay:.66s; }
.loader-veg.v5{ left:78%; animation-delay:.88s; }
@keyframes vegDrop{
  0%{ transform:translate(-50%,0) rotate(-8deg) scale(.9); opacity:0; }
  12%{ opacity:1; }
  68%{ transform:translate(-50%,94px) rotate(10deg) scale(1); opacity:1; }
  78%{ transform:translate(-50%,104px) rotate(-5deg) scale(.92); opacity:1; }
  100%{ transform:translate(-50%,114px) rotate(0deg) scale(.82); opacity:0; }
}
@keyframes basketBounce{
  0%,100%{ transform:translateY(0); }
  20%{ transform:translateY(3px); }
  52%{ transform:translateY(-4px); }
  72%{ transform:translateY(2px); }
}
.loader-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#f0fdf4;
  color:var(--qv-theme);
  font-weight:700;
  font-size:.8rem;
  margin-bottom:12px;
  border:1px solid #bbf7d0;
}
.loader h2{
  margin:8px 0 6px;
  font-size:1.35rem;
  color:#16351f;
}
.loader p{
  color:#64748b;
  font-size:.9rem;
  line-height:1.45;
}
.prog{
  height:8px;
  background:#e2e8f0;
  border-radius:999px;
  margin-top:16px;
  overflow:hidden;
}
.prog-bar{
  height:100%;
  width:42%;
  background:linear-gradient(90deg,#16a34a,#22c55e,#86efac);
  border-radius:999px;
  animation:progMove 1.6s ease-in-out infinite;
}
@keyframes progMove{
  0%{ transform:translateX(-110%) scaleX(.75); }
  60%{ transform:translateX(125%) scaleX(1.08); }
  100%{ transform:translateX(185%) scaleX(.9); }
}
.install-fab{
  position:fixed;
  right:16px;
  bottom:18px;
  z-index:9998;
  display:none;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-radius:999px;
  border:none;
  background:linear-gradient(135deg,#0c9b3d,#22c55e);
  color:#fff;
  font-weight:800;
  font-size:.92rem;
  box-shadow:0 14px 28px rgba(12,155,61,.28);
}
.install-fab.show{ display:inline-flex; }
.install-fab:active{ transform:translateY(1px); }
.pwa-hint{
  position:fixed;
  left:50%;
  bottom:82px;
  transform:translateX(-50%);
  z-index:9998;
  background:#1e293b;
  color:#fff;
  padding:10px 14px;
  border-radius:14px;
  font-size:.82rem;
  box-shadow:0 10px 25px rgba(15,23,42,.25);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
}
.pwa-hint.show{ opacity:1; }
.install-inline{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
@media (min-width:768px){
  .install-fab{ bottom:24px; right:24px; }
}

/* Basket loader alignment: every item lands inside the basket mouth. */
.loader .loader-scene{
  height:172px;
  margin:16px 0 10px;
  overflow:hidden;
}
.loader .loader-basket{
  display:block;
  position:absolute;
  left:50%;
  bottom:12px;
  width:154px;
  height:86px;
  transform:translateX(-50%);
  z-index:4;
}
.loader .basket-handle{
  display:block;
  position:absolute;
  left:50%;
  top:-22px;
  width:96px;
  height:42px;
  transform:translateX(-50%);
  border:5px solid #c2410c;
  border-bottom:none;
  border-radius:64px 64px 0 0;
  opacity:.96;
}
.loader .basket-body{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  width:154px;
  height:68px;
  border:4px solid #c2410c;
  border-radius:18px 18px 22px 22px;
  background:linear-gradient(180deg,#fed7aa,#fb923c 58%,#ea580c);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);
  animation:basketCatch 1.8s ease-in-out infinite;
  z-index:2;
}
.loader .basket-body::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px 14px 18px 18px;
  background:
    linear-gradient(90deg,transparent 13%,rgba(255,255,255,.34) 13% 17%,transparent 17% 33%,rgba(255,255,255,.34) 33% 37%,transparent 37% 53%,rgba(255,255,255,.34) 53% 57%,transparent 57% 73%,rgba(255,255,255,.34) 73% 77%,transparent 77%),
    linear-gradient(0deg,transparent 27%,rgba(255,255,255,.24) 27% 33%,transparent 33% 61%,rgba(255,255,255,.22) 61% 67%,transparent 67%);
  opacity:.82;
}
.loader .basket-body::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  top:-3px;
  height:10px;
  border-radius:999px;
  background:#9a3412;
}
.loader .basket-shadow{
  display:block;
  position:absolute;
  left:50%;
  bottom:2px;
  width:168px;
  height:18px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(15,23,42,.18),rgba(15,23,42,0));
  filter:blur(2px);
  z-index:1;
}
.loader .loader-veg{
  --from-x:0px;
  --to-x:0px;
  display:block;
  position:absolute;
  left:50%;
  top:-34px;
  z-index:2;
  font-size:30px;
  line-height:1;
  animation:vegDropInBasket 1.8s cubic-bezier(.34,.02,.22,1) infinite;
  will-change:transform,opacity;
}
.loader .loader-veg.v1{ --from-x:-124px; --to-x:-54px; animation-delay:0s; }
.loader .loader-veg.v2{ --from-x:-62px; --to-x:-25px; animation-delay:.2s; }
.loader .loader-veg.v3{ --from-x:0px; --to-x:0px; animation-delay:.4s; }
.loader .loader-veg.v4{ --from-x:62px; --to-x:25px; animation-delay:.6s; }
.loader .loader-veg.v5{ --from-x:124px; --to-x:54px; animation-delay:.8s; }
@keyframes vegDropInBasket{
  0%{ transform:translate(calc(-50% + var(--from-x)),-14px) rotate(-14deg) scale(.82); opacity:0; }
  12%{ opacity:1; }
  60%{ transform:translate(calc(-50% + var(--to-x)),88px) rotate(10deg) scale(1); opacity:1; }
  74%{ transform:translate(calc(-50% + var(--to-x)),102px) rotate(-5deg) scale(.9); opacity:1; }
  86%{ transform:translate(calc(-50% + var(--to-x)),111px) rotate(3deg) scale(.75); opacity:0; }
  100%{ transform:translate(calc(-50% + var(--to-x)),111px) rotate(3deg) scale(.75); opacity:0; }
}
@keyframes basketCatch{
  0%,100%{ transform:translateY(0); }
  58%{ transform:translateY(0); }
  70%{ transform:translateY(5px) scaleY(.98); }
  82%{ transform:translateY(-3px) scaleY(1.02); }
}
@media(max-width:480px){
  .loader .loader-scene{ height:162px; }
  .loader .loader-basket{ width:140px; height:82px; }
  .loader .basket-body{ width:140px; height:64px; }
  .loader .basket-handle{ width:86px; height:38px; }
  .loader .loader-veg{ font-size:28px; }
  .loader .loader-veg.v1{ --from-x:-92px; --to-x:-46px; }
  .loader .loader-veg.v2{ --from-x:-46px; --to-x:-22px; }
  .loader .loader-veg.v4{ --from-x:46px; --to-x:22px; }
  .loader .loader-veg.v5{ --from-x:92px; --to-x:46px; }
}