/* WABABA Diwali special offer — pricing card + entry popup. Loaded after styles.css. */

/* ---------- Pricing: 3 cards (Diwali first) ---------- */
@media (min-width:768px){
  .do-pricing-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .do-pricing-grid>.do-card{grid-column:1/-1;}
}
@media (min-width:1024px){
  .do-pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:64rem;}
  .do-pricing-grid>.do-card{grid-column:auto;}
}

/* Same card as the others — only a warm, slightly stronger glow */
.do-card{border-color:rgba(245,158,11,.55) !important;animation:doGlow 2.6s ease-in-out infinite alternate;}
@keyframes doGlow{
  from{box-shadow:0 0 0 1px rgba(245,158,11,.25),0 8px 30px rgba(245,158,11,.18);}
  to{box-shadow:0 0 0 1px rgba(245,158,11,.45),0 10px 50px rgba(245,158,11,.38);}
}
.do-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;}
.do-foot{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent);text-align:center;}
.do-foot b{display:block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#d97706;margin-bottom:.3rem;}
.do-foot span{display:block;font-size:11px;line-height:1.55;color:var(--muted-foreground);}

/* Diya illustration (shared by card and popup) */
.do-diya{display:block;width:72px;height:auto;flex:none;overflow:visible;}
.do-diya__flame{transform-box:fill-box;transform-origin:50% 100%;animation:doFlick 1.3s ease-in-out infinite alternate;}
.do-diya__glow{transform-box:fill-box;transform-origin:center;animation:doGlowPulse 2s ease-in-out infinite alternate;}
@keyframes doFlick{from{transform:scale(1,1) skewX(0);}to{transform:scale(.92,1.09) skewX(-3deg);}}
@keyframes doGlowPulse{from{opacity:.6;transform:scale(.92);}to{opacity:1;transform:scale(1.08);}}

/* ---------- Entry popup (after the logo intro) — the card is the reference image + real, clickable hotspots ---------- */
#do-popup{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(70,92,82,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:doFade .35s ease both;}
#do-popup.is-closing{animation:doFadeOut .22s ease forwards;}
#do-popup.is-closing .do-pop__card{animation:doCardOut .22s ease forwards;}

/* SIZE: max 460px wide (≈557px tall). Shrinks on small screens and never taller than the window. */
.do-pop__scene{perspective:1400px;width:min(92vw,460px,calc((100vh - 2rem) * .826));width:min(92vw,460px,calc((100dvh - 2rem) * .826));}
.do-pop__card{position:relative;overflow:hidden;aspect-ratio:570/690;border-radius:1.4rem;background:#fffef6;
  box-shadow:0 0 0 1px rgba(245,180,60,.4),0 0 50px rgba(245,158,11,.35),0 24px 50px rgba(0,0,0,.28);
  animation:doSpin 1.4s cubic-bezier(.2,.9,.25,1) both;}
.do-pop__img{display:block;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none;}
/* from far behind the screen, spinning twice, to the front */
@keyframes doSpin{
  0%{transform:translateZ(-1300px) rotateY(-720deg) scale(.2);opacity:0;}
  15%{opacity:1;}
  100%{transform:translateZ(0) rotateY(0) scale(1);opacity:1;}
}
@keyframes doFade{from{opacity:0;}to{opacity:1;}}
@keyframes doFadeOut{to{opacity:0;}}
@keyframes doCardOut{to{opacity:0;transform:scale(.9) translateY(10px);}}

/* Clickable areas laid exactly over the "Book a Demo" button and the "See all plans" link in the image */
.do-pop__btn,.do-pop__link{position:absolute;display:block;text-decoration:none;transition:box-shadow .2s,background .2s;}
.do-pop__btn{left:14.9%;top:77%;width:66.8%;height:8.1%;border-radius:9em;}
.do-pop__btn:hover{background:rgba(255,255,255,.1);box-shadow:0 0 0 2px rgba(255,255,255,.6),0 6px 18px rgba(15,122,59,.45);}
.do-pop__link{left:35%;top:86.5%;width:25.5%;height:4.6%;border-radius:.5rem;}
.do-pop__link:hover{background:rgba(15,122,59,.1);}
.do-pop__btn:focus-visible,.do-pop__link:focus-visible{outline:3px solid #f5b021;outline-offset:2px;}

.do-pop__close{position:absolute;top:.7rem;right:.7rem;z-index:5;width:2.1rem;height:2.1rem;border-radius:50%;border:1px solid #e3ebe6;background:#fff;color:#2b3a33;box-shadow:0 2px 8px rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:scale(.4);pointer-events:none;transition:opacity .25s,transform .25s cubic-bezier(.34,1.56,.64,1),background .2s;}
.do-pop__card.is-ready .do-pop__close{opacity:1;transform:none;pointer-events:auto;}
.do-pop__close:hover{background:#f1f6f3;}
.do-pop__close svg{width:1rem;height:1rem;}

@media (prefers-reduced-motion:reduce){
  .do-card{animation:none;box-shadow:0 8px 40px rgba(245,158,11,.3);}
  .do-pop__card{animation:doFade .3s ease both;}
  .do-diya__flame,.do-diya__glow{animation:none;}
}