/* ══ وش ناكل؟ — custom styles ══ */

/* Tailwind font-weight utilities used in markup (Tailwind CDN maps these) */
.font-500 { font-weight: 500; }
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ── Ambient blobs ── */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
}
.blob-a { top: -120px; right: -80px;  width: 380px; height: 380px; background: #F2A007; opacity: .32; }
.blob-b { top: 40%;   left: -140px;   width: 420px; height: 420px; background: #E8452B; opacity: .18; }
.blob-c { bottom: -160px; right: 10%; width: 460px; height: 460px; background: #2FA84F; opacity: .16; }

/* ── Nav links ── */
.nav-link {
  position: relative;
  padding: .5rem .9rem;
  border-radius: 9999px;
  color: #6B615A;
  transition: color .2s, background .2s;
}
.nav-link:hover { color: #20140F; background: rgba(0,0,0,.04); }
.nav-link.is-active { color: #E8452B; background: rgba(232,69,43,.08); }

/* ── Filter chips ── */
.chip-group {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .4rem .3rem .7rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 9999px;
  box-shadow: 0 6px 16px -12px rgba(32,20,15,.4);
}
.chip-label { font-size: .72rem; font-weight: 700; color: #6B615A; padding-inline-start: .15rem; }
.chip {
  font-size: .8rem;
  font-weight: 700;
  color: #6B615A;
  padding: .35rem .7rem;
  border-radius: 9999px;
  transition: all .18s ease;
  min-height: 32px;
}
.chip:hover { background: rgba(0,0,0,.05); color: #20140F; }
.chip.is-on { background: #20140F; color: #FFF8F0; }

/* ── The magic button ── */
.magic-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Baloo Bhaijaan 2", cursive;
  font-weight: 800;
  font-size: 1.6rem;
  color: #fff;
  padding: 1.15rem 3rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #F2A007 0%, #E8452B 55%, #D63A22 100%);
  box-shadow: 0 24px 60px -18px rgba(232,69,43,.55), inset 0 -3px 0 rgba(0,0,0,.15);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  cursor: pointer;
}
.magic-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 30px 70px -18px rgba(232,69,43,.65), inset 0 -3px 0 rgba(0,0,0,.15); }
.magic-btn:active { transform: translateY(0) scale(.98); }
.magic-btn.is-loading { pointer-events: none; }
.magic-btn.is-loading > span:last-child { opacity: .55; }

/* rotating glow ring */
.magic-btn__glow {
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: 9999px;
  background: conic-gradient(from 0deg, #F2A007, #E8452B, #2FA84F, #F2A007);
  filter: blur(9px);
  opacity: .55;
  animation: spin 4s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Dish cards ── */
.dish-card {
  opacity: 0;
  transform: translateY(24px) scale(.96);
  animation: cardIn .5s cubic-bezier(.34,1.4,.64,1) forwards;
}
@keyframes cardIn { to { opacity: 1; transform: translateY(0) scale(1); } }

.dish-thumb {
  position: relative;
  height: 150px;
  display: grid;
  place-items: center;
  font-size: 4.5rem;
  overflow: hidden;
}
.dish-thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), transparent 60%);
}

/* like button pop */
.like-btn.is-liked { color: #E8452B; }
.like-btn.is-liked svg { fill: #E8452B; animation: pop .35s ease; }
@keyframes pop { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }

/* ── Poll bars ── */
.poll-row { }
.poll-bar {
  height: 40px;
  border-radius: 12px;
  background: rgba(47,168,79,.12);
  overflow: hidden;
  position: relative;
}
.poll-fill {
  height: 100%;
  width: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, #2FA84F, #248B40);
  transition: width 1s cubic-bezier(.34,1.2,.64,1);
}
.poll-fill.is-lead { background: linear-gradient(90deg, #F2A007, #E8452B); }

/* toast visible */
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .magic-btn__glow, .blob { animation: none !important; }
  .dish-card { animation: none; opacity: 1; transform: none; }
  * { transition-duration: .01ms !important; }
}