/* Nawab 7 production UX fixes — 2026-07-20
   Single authoritative layer for intro, hero visibility, mobile cards and menu fallback. */

:root{
  --n7-ease:cubic-bezier(.22,.72,.18,1);
  --n7-soft:cubic-bezier(.16,1,.3,1);
}

/* ---------- Opening reveal: lightweight and stable ---------- */
.intro{
  background:#050302!important;
  contain:layout paint;
  transform:none!important;
  transition:opacity .58s var(--n7-ease),visibility .58s!important;
}
.intro-bg{
  inset:-2%!important;
  opacity:.72!important;
  filter:saturate(1.04) contrast(1.02) brightness(.78)!important;
  transform:scale(1.035)!important;
  animation:none!important;
  transition:transform 3s linear,opacity .7s ease!important;
  will-change:transform,opacity;
}
.intro.nawab-ready .intro-bg{transform:scale(1)!important}
.intro:before{
  z-index:1!important;
  background:
    radial-gradient(circle at 50% 43%,rgba(241,210,122,.18),transparent 27%),
    linear-gradient(180deg,rgba(5,3,2,.34),rgba(5,3,2,.14) 48%,rgba(5,3,2,.86))!important;
  transform:none!important;
  animation:none!important;
}
.intro:after{
  z-index:2!important;
  background:linear-gradient(90deg,rgba(5,3,2,.54),rgba(5,3,2,.05) 50%,rgba(5,3,2,.50))!important;
}
.intro-noise{opacity:.035!important;animation:none!important}
.intro-frame{display:block!important;clip-path:none!important;opacity:.62!important;animation:none!important}
.intro-stage{
  opacity:1!important;
  transform:none!important;
  animation:none!important;
  will-change:auto!important;
}
.intro-mark,
.intro-kicker,
.intro h1,
.intro-ar,
.intro-loader,
.intro-cuisine{
  animation:none!important;
}
.intro-mark{
  opacity:0!important;
  transform:scale(.82)!important;
  clip-path:circle(0 at 50% 50%)!important;
  transition:
    opacity .55s var(--n7-soft) .08s,
    transform .82s var(--n7-soft) .08s,
    clip-path .82s var(--n7-soft) .08s!important;
  box-shadow:0 0 0 1px rgba(241,210,122,.48),0 22px 70px rgba(0,0,0,.58),0 0 64px rgba(212,169,65,.16)!important;
}
.intro.nawab-ready .intro-mark{
  opacity:1!important;
  transform:scale(1)!important;
  clip-path:circle(75% at 50% 50%)!important;
}
.intro-mark:before{
  animation:none!important;
  background:transparent!important;
  border:1px solid rgba(241,210,122,.46)!important;
}
.intro-mark:after{
  animation:none!important;
  transform:translateX(-145%) rotate(8deg)!important;
  transition:transform .9s var(--n7-soft) .68s!important;
}
.intro.nawab-ready .intro-mark:after{transform:translateX(145%) rotate(8deg)!important}
.intro-kicker,
.intro h1,
.intro-ar,
.intro-cuisine{
  opacity:0!important;
  transform:translateY(9px)!important;
  transition:opacity .5s ease,transform .65s var(--n7-soft)!important;
}
.intro.nawab-ready .intro-kicker{opacity:1!important;transform:none!important;transition-delay:.32s!important}
.intro.nawab-ready h1{opacity:1!important;transform:none!important;clip-path:none!important;transition-delay:.46s!important}
.intro.nawab-ready .intro-ar{opacity:1!important;transform:none!important;transition-delay:.60s!important}
.intro.nawab-ready .intro-cuisine{opacity:1!important;transform:none!important;transition-delay:.84s!important}
.intro-loader{
  opacity:0!important;
  transform:scaleX(.72)!important;
  transition:opacity .35s ease .72s,transform .5s var(--n7-soft) .72s!important;
}
.intro.nawab-ready .intro-loader{opacity:1!important;transform:scaleX(1)!important}
.intro-loader span{
  width:0!important;
  animation:none!important;
  transition:width 1.08s var(--n7-ease) .78s!important;
}
.intro.nawab-ready .intro-loader span{width:100%!important}
.intro.done{
  opacity:0!important;
  visibility:hidden!important;
  transform:none!important;
  pointer-events:none!important;
}
.intro.done .intro-bg,
.intro.done .intro-stage{transform:none!important;opacity:1!important}

/* ---------- Hero: brighter image, stable crossfade, clear copy ---------- */
.hero{background:#090604!important;isolation:isolate}
.hero-bg,
.hero-bg.active,
.hero-bg.leaving{
  animation:none!important;
  will-change:opacity,transform;
  filter:saturate(1.06) contrast(1.02) brightness(1.02)!important;
  background-position:center 52%!important;
}
.hero-bg{
  opacity:0!important;
  transform:scale(1.055)!important;
  transition:opacity .9s ease,transform 7.5s linear!important;
}
.hero-bg.active{opacity:1!important;transform:scale(1.012)!important;z-index:1!important}
.hero-bg.leaving{opacity:0!important;z-index:0!important}
.hero-bg:before{display:none!important}
.hero:after{
  z-index:1!important;
  background:
    linear-gradient(90deg,rgba(7,5,4,.62) 0%,rgba(7,5,4,.32) 39%,rgba(7,5,4,.08) 72%,rgba(7,5,4,.16) 100%),
    linear-gradient(0deg,rgba(7,5,4,.88) 0%,rgba(7,5,4,.18) 37%,transparent 66%),
    linear-gradient(180deg,rgba(7,5,4,.28),transparent 28%)!important;
}
.hero-content{
  opacity:1!important;
  transform:none!important;
  max-width:min(650px,100%)!important;
  text-shadow:0 10px 36px rgba(0,0,0,.82)!important;
}
.hero-content:before{display:none!important}
.hero.ready .hero-content,
.hero.ready .hero-content .eyebrow,
.hero.ready .hero-content .parent-line,
.hero.ready .hero-content h1,
.hero.ready .hero-content .arabic,
.hero.ready .hero-content .sub,
.hero.ready .hero-content .hero-cta{
  opacity:1!important;
  transform:none!important;
  animation:none!important;
}
.hero h1{max-width:9ch!important;text-wrap:balance}
.hero .sub{max-width:49ch!important;color:rgba(255,249,239,.94)!important}

/* Menu-page hero should not be blacked out either. */
.menu-page-hero:before{
  filter:saturate(1.04) contrast(1.02) brightness(.96)!important;
}
.menu-page-hero:after{
  background:linear-gradient(90deg,rgba(7,5,4,.70),rgba(7,5,4,.28) 55%,rgba(7,5,4,.12)),linear-gradient(0deg,var(--bg),transparent 42%)!important;
}

/* ---------- Hard visibility fallback for the complete menu ---------- */
.menu-page-main .motion-reveal,
.menu-page-main .motion-reveal.in,
.menu-page-main .reveal,
.menu-page-main .reveal.in{
  opacity:1!important;
  transform:none!important;
  filter:none!important;
  transition:transform .35s var(--n7-soft),border-color .35s ease,box-shadow .35s ease!important;
}
#fullMenuWrap:empty:before{
  content:"Loading the menu…";
  display:block;
  padding:28px;
  border:1px solid var(--line);
  border-radius:22px;
  color:var(--muted);
  text-align:center;
}

/* ---------- Card integrity ---------- */
.quick-card,.dish,.cat-card,.deal-card,.hall-card,.cert-card,.review,.menu-dish-card{
  min-width:0!important;
}
.quick-card *, .dish *, .cat-card *, .deal-card *, .hall-card *, .cert-card *, .review *, .menu-dish-card *{
  min-width:0;
}
.dish h3,.cat-card h3,.deal-card h3,.hall-card h3,.cert-card h3,.menu-dish-card h3,
.dish p,.cat-card p,.deal-card p,.hall-card p,.cert-card p,.menu-dish-card p,.quick-card .v{
  overflow-wrap:anywhere;
}

@media (max-width:720px){
  .wrap{width:min(100% - 24px,var(--max))!important;padding-inline:0!important}
  .section{padding-block:56px!important}

  /* Information cards remain compact instead of becoming oversized rows. */
  .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .quick-card{padding:14px!important;border-radius:18px!important;min-height:96px;align-content:start}
  .quick-card .k{font-size:.62rem!important}
  .quick-card .v{font-size:.82rem!important;line-height:1.42!important}

  /* Signature dishes become compact horizontal cards. */
  .dish-grid{grid-template-columns:1fr!important;gap:12px!important}
  .dish{
    display:grid!important;
    grid-template-columns:118px minmax(0,1fr)!important;
    min-height:148px!important;
    border-radius:20px!important;
  }
  .dish-media{height:100%!important;min-height:148px!important}
  .dish-media img{height:100%!important;object-fit:cover!important}
  .dish-body{padding:14px!important;display:flex;flex-direction:column;justify-content:center}
  .dish h3{font-size:1.38rem!important;line-height:1.02!important}
  .dish p{font-size:.78rem!important;line-height:1.45!important;margin:7px 0 9px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .dish .price{font-size:.76rem!important}

  /* Cuisine cards use the phone width efficiently. */
  .cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .cat-card{min-height:230px!important;border-radius:20px!important}
  .cat-content{left:13px!important;right:13px!important;bottom:13px!important}
  .cat-content h3{font-size:1.35rem!important;line-height:.98!important}
  .cat-card small{font-size:.58rem!important}
  .cat-card p{font-size:.72rem!important;line-height:1.35!important;-webkit-line-clamp:2!important}
  .cat-card .count{top:10px!important;left:10px!important;font-size:.58rem!important;padding:.32rem .48rem!important}
  .cat-card .sub-count{display:none!important}

  /* Deal cards also stop stretching excessively. */
  .deals-grid{grid-template-columns:1fr!important;gap:12px!important}
  .deal-card{grid-template-columns:112px minmax(0,1fr)!important;grid-template-rows:1fr!important;border-radius:20px!important}
  .deal-media{height:100%!important;min-height:164px!important}
  .deal-body{padding:13px!important}
  .deal-body h3{font-size:1.3rem!important;margin:8px 0 5px!important}
  .deal-body p{font-size:.75rem!important;line-height:1.4!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .deal-foot{gap:8px!important;margin-top:10px!important}
  .deal-price{font-size:.72rem!important}
  .mini-order{padding:.52rem .62rem!important;font-size:.58rem!important}

  /* Hero mobile composition: preserve image detail and keep text readable. */
  .hero{min-height:92svh!important}
  .hero .wrap{min-height:92svh!important}
  .hero-bg{background-position:center 48%!important}
  .hero:after{
    background:
      linear-gradient(180deg,rgba(7,5,4,.18) 0%,rgba(7,5,4,.12) 38%,rgba(7,5,4,.72) 74%,rgba(7,5,4,.96) 100%),
      linear-gradient(90deg,rgba(7,5,4,.34),rgba(7,5,4,.04) 72%)!important;
  }
  .hero-content{max-width:100%!important;margin-bottom:78px!important;padding-bottom:0!important}
  .hero h1{font-size:clamp(3.1rem,17vw,5.15rem)!important;max-width:7ch!important}
  .hero .sub{font-size:.91rem!important;line-height:1.55!important;max-width:34ch!important}
  .hero-cta{gap:9px!important}
  .hero-cta .btn{width:100%!important;min-width:100%!important;padding:.82rem 1rem!important}

  /* Complete-menu cards remain visible and become compact horizontal rows. */
  .menu-page-hero{min-height:510px!important;padding-top:94px!important}
  .menu-page-hero h1{font-size:clamp(2.65rem,13vw,4.35rem)!important;line-height:.9!important}
  .menu-page-toolbar{top:68px!important}
  .menu-category-block{padding:12px!important;border-radius:22px!important}
  .menu-category-head{gap:14px!important}
  .menu-category-cover{height:190px!important;border-radius:18px!important}
  .menu-dishes-grid{grid-template-columns:1fr!important;gap:11px!important}
  .menu-subcategory-title{margin-top:12px!important;font-size:1.42rem!important}
  .menu-dish-card{
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr)!important;
    min-height:150px!important;
    border-radius:18px!important;
    overflow:hidden!important;
  }
  .menu-dish-media{height:100%!important;min-height:150px!important}
  .menu-dish-media img{height:100%!important;object-fit:cover!important}
  .menu-dish-card-body{padding:13px!important;display:flex;flex-direction:column;justify-content:center}
  .menu-dish-card h3{font-size:1.24rem!important;line-height:1.02!important}
  .menu-dish-card p{font-size:.74rem!important;line-height:1.4!important;margin-top:6px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .menu-dish-tag{font-size:.52rem!important;padding:.18rem .38rem!important;margin-bottom:6px!important}
  .menu-price-row{flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-top:9px!important}
  .menu-price{font-size:.71rem!important}
  .menu-order{width:auto!important;padding:.48rem .58rem!important;font-size:.56rem!important}
}

@media (max-width:390px){
  .quick-grid{gap:8px!important}
  .quick-card{padding:12px!important}
  .dish{grid-template-columns:104px minmax(0,1fr)!important}
  .dish-media{min-height:142px!important}
  .cat-card{min-height:215px!important}
  .cat-content h3{font-size:1.2rem!important}
  .cat-card p{display:none!important}
  .deal-card{grid-template-columns:102px minmax(0,1fr)!important}
  .menu-dish-card{grid-template-columns:100px minmax(0,1fr)!important}
  .menu-dish-media{min-height:146px!important}
}

@media (prefers-reduced-motion:reduce){
  .intro,.intro *,.hero-bg,.hero-content,.hero-content *{animation:none!important;transition:none!important}
  .intro-mark,.intro-kicker,.intro h1,.intro-ar,.intro-loader,.intro-cuisine{opacity:1!important;transform:none!important;clip-path:none!important}
  .intro-loader span{width:100%!important}
}

/* The legacy build paints hero images on a pseudo-element. Neutralize its
   expensive keyframe/filter animation so the stable crossfade above is the
   only active motion path. */
.hero-bg:after,
.hero-bg.active:after,
.hero-bg.leaving:after{
  content:""!important;
  position:absolute!important;
  inset:-2%!important;
  display:block!important;
  background-image:var(--hero-img)!important;
  background-size:cover!important;
  background-position:center 52%!important;
  background-repeat:no-repeat!important;
  animation:none!important;
  filter:saturate(1.06) contrast(1.02) brightness(1.03)!important;
  transform:scale(1.045)!important;
  transition:transform 7.5s linear!important;
  will-change:transform!important;
}
.hero-bg.active:after{transform:scale(1.008)!important}
.hero-bg.leaving:after{transform:scale(1.018)!important}

@media(max-width:720px){
  .hero-bg:after,.hero-bg.active:after,.hero-bg.leaving:after{
    inset:-3%!important;
    background-position:center 48%!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-bg:after,.hero-bg.active:after,.hero-bg.leaving:after{
    animation:none!important;
    transition:none!important;
    transform:scale(1.01)!important;
  }
}