/* «طلب فاتورتي» (0.23): hero with an animated scene, step phones, tracker, security card, counters and the WhatsApp sign-in box.
   Builds on infopages.css (.ip, .ip-hero, .ip-step, .ip-faq, .ip-help). Mobile first, RTL, palette-aware. Animations are CSS only and
   switch off with prefers-reduced-motion; content is never hidden unless the script runs (see invoice-page.js). */
.sz-inv-page .ip{--iv-wa:#25d366;--iv-wa2:#128c7e;--iv-wa3:#dcf8c6;--iv-ease:cubic-bezier(.22,1,.36,1)}
.iv-ic{width:1.2em;height:1.2em;flex:none;display:inline-block;vertical-align:-.2em}

/* ---------- entrance + reveal ---------- */
@keyframes ivUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.iv-up{animation:ivUp .8s var(--iv-ease) var(--d,0s) both}
.iv-rv{transition:opacity .8s var(--iv-ease) var(--d,0s),transform .8s var(--iv-ease) var(--d,0s)}
.iv-rv.iv-hide{opacity:0;transform:translateY(26px)}

/* ---------- hero ---------- */
.iv-hero{padding-bottom:clamp(64px,12vw,110px)}
.iv-hero .ip-eyebrow{display:inline-flex;align-items:center;gap:8px}
.iv-hero .ip-eyebrow .iv-ic{width:1.1em;height:1.1em}
.iv-hero-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px;width:100%}
.iv-hero-cta .ip-btn{flex:1 1 170px;max-width:240px}
.iv-ghost-w{background:transparent!important;border:1.5px solid #ffffff8c!important;color:#fff!important;box-shadow:none!important}
.iv-ghost-w:hover{background:#ffffff1f!important}
.iv-shine{position:relative;overflow:hidden}
.iv-shine::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffffb0 50%,transparent 70%);transform:translateX(-120%);animation:ivShine 3.2s ease-in-out 1.2s infinite}
@keyframes ivShine{60%,100%{transform:translateX(120%)}}
.iv-art{width:min(94%,460px);margin-top:14px}
.iv-art img,.iv-hero-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 30px 30px #0005)}
.sz-inv-page .ip-st-cream .iv-ghost-w{border-color:var(--ip-line)!important;color:var(--ip-ink)!important}

/* svg text is Latin digits and words: keep it left-to-right inside the RTL page */
.iv-hero-svg,.iv-step-svg{direction:ltr}

/* hero scene */
.iv-hero-svg .iv-breathe{transform-box:fill-box;transform-origin:center;animation:ivBreathe 5s ease-in-out infinite}
.iv-hero-svg .iv-spin{transform-box:fill-box;transform-origin:center;animation:ivSpin 40s linear infinite}
.iv-hero-svg .iv-float{animation:ivFloat 4.4s ease-in-out infinite}
.iv-hero-svg .iv-float-b{animation:ivFloat 5.2s ease-in-out -1.4s infinite}
.iv-hero-svg .iv-paper-sh{fill:#0000002b}
.iv-hero-svg .iv-wa-top{fill:var(--iv-wa2)}
.iv-hero-svg .iv-bub{fill:var(--iv-wa3)}
.iv-hero-svg .iv-bub1{transform-box:fill-box;transform-origin:left center;animation:ivBubble 6s var(--iv-ease) infinite}
.iv-hero-svg .iv-dg{fill:#0b3d2e;font:800 11.5px/1 system-ui,sans-serif;opacity:0;animation:ivDigit 6s ease infinite}
.iv-hero-svg .iv-wa-badge{fill:var(--iv-wa)}
.iv-hero-svg .iv-pulse-s{transform-box:fill-box;transform-origin:center;animation:ivPulse 2s ease-in-out infinite}
.iv-hero-svg .iv-trail{fill:none;stroke:var(--ip-gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:3 9;animation:ivDash 1.2s linear infinite}
.iv-hero-svg .iv-trail-dot{fill:var(--ip-accent);stroke:#fff;stroke-width:2}
.iv-hero-svg .iv-fa{fill:#fff;font:800 11.5px/1 system-ui,sans-serif;letter-spacing:.14em}
.iv-hero-svg .iv-fb{fill:#ffffffd6;font:700 8.5px/1 system-ui,sans-serif}
.iv-hero-svg .iv-fc{fill:var(--ip-gold);font:800 9.5px/1 system-ui,sans-serif;letter-spacing:.14em}
.iv-hero-svg .iv-fd{fill:#fff;font:800 12px/1 system-ui,sans-serif}
.iv-hero-svg .iv-fe{fill:#fff;font:900 11px/1 system-ui,sans-serif}
.iv-hero-svg .iv-pop-d{transform-box:fill-box;transform-origin:center;animation:ivPop 4.4s var(--iv-ease) .6s infinite}
.iv-hero-svg .iv-ok-d{transform-box:fill-box;transform-origin:center;animation:ivPop 4.4s var(--iv-ease) 1.1s infinite}
.iv-hero-svg .iv-spark{fill:var(--ip-gold);transform-box:fill-box;transform-origin:center;animation:ivSpark 3s ease-in-out infinite}
@keyframes ivBreathe{50%{transform:scale(1.05)}}
@keyframes ivSpin{to{transform:rotate(360deg)}}
@keyframes ivFloat{50%{transform:translateY(-8px)}}
@keyframes ivBubble{0%,4%{transform:scale(.4);opacity:0}12%,92%{transform:none;opacity:1}100%{opacity:0}}
@keyframes ivDigit{0%,8%{opacity:0}16%,90%{opacity:1}100%{opacity:0}}
@keyframes ivPulse{50%{transform:scale(1.18)}}
@keyframes ivDash{to{stroke-dashoffset:-12}}
@keyframes ivPop{0%,6%{transform:scale(0)}16%{transform:scale(1.18)}22%,86%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes ivSpark{0%,100%{transform:scale(.2);opacity:0}50%{transform:scale(1);opacity:1}}

/* ---------- path strip (floats over the hero) ---------- */
.iv-pathsec{position:relative;z-index:3;margin-top:-48px;padding-top:0}
.iv-path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;background:#fff;border:1px solid var(--ip-line);border-radius:24px;padding:12px 8px;box-shadow:0 30px 50px -30px #2a1a0e99}
.iv-path li{position:relative}
.iv-path a{display:grid;justify-items:center;gap:4px;padding:6px 2px;color:var(--ip-ink);font-weight:800;font-size:12.5px;line-height:1.4;text-align:center;border-radius:16px;transition:background .25s}
.iv-path a:hover{background:var(--ip-soft)}
.iv-path b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ip-soft);color:var(--ip-accent);font-size:15px;transition:background .3s,color .3s,transform .3s}
.iv-path li.is-on b{background:var(--ip-accent);color:#fff;transform:scale(1.1);box-shadow:0 10px 18px -8px var(--ip-accent)}
.iv-path li:not(:last-child)::after{content:"";position:absolute;top:23px;inset-inline-end:-18%;width:36%;height:2px;background:repeating-linear-gradient(90deg,var(--ip-gold) 0 5px,transparent 5px 10px);opacity:.8}

/* ---------- checklist ---------- */
.iv-check{display:grid;gap:12px}
.iv-check li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--ip-line);border-radius:22px;padding:16px;transition:transform .3s,box-shadow .3s}
.iv-check li:hover{transform:translateY(-4px);box-shadow:0 26px 40px -30px #2a1a0e88}
.iv-check-ic{flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:linear-gradient(145deg,var(--ip-accent),var(--ip-accent-lo));color:#fff;box-shadow:0 14px 22px -14px var(--ip-accent)}
.iv-check-ic .iv-ic{width:26px;height:26px}
.iv-check h3{font-size:17.5px;font-weight:800;line-height:1.5}
.iv-check p{color:#4a423b;font-size:15px}

/* ---------- steps ---------- */
.iv-steps{counter-reset:ivs}
.iv-step{position:relative;transition:border-color .4s,box-shadow .4s,transform .4s}
.iv-step.is-active{border-color:color-mix(in srgb,var(--ip-accent) 55%,var(--ip-line));box-shadow:0 34px 56px -34px color-mix(in srgb,var(--ip-accent) 60%,#2a1a0e)}
.iv-step:not(:first-child)::before{content:"";position:absolute;top:-22px;inset-inline-start:50%;width:3px;height:22px;margin-inline-start:-1.5px;border-radius:3px;background:repeating-linear-gradient(var(--ip-gold) 0 5px,transparent 5px 9px);transform-origin:top;transform:scaleY(0);transition:transform .7s var(--iv-ease) .2s}
.iv-step.is-in:not(:first-child)::before{transform:scaleY(1)}
.iv-step-art{transition:transform .5s var(--iv-ease)}
.iv-step.is-active .iv-step-art{transform:scale(1.04) rotate(-1.2deg)}
.iv-step-img{width:100%;height:auto;border-radius:22px;display:block}
.iv-step-n{transition:transform .4s var(--iv-ease)}
.iv-step.is-active .iv-step-n{transform:scale(1.14) rotate(-6deg)}
.iv-step-btn{margin-top:14px;width:100%}
.iv-step-btn .iv-ic{width:20px;height:20px;transform:scaleX(-1)}
.iv-js .iv-step:not(.is-in) .iv-step-svg *{animation-play-state:paused}
.iv-step-svg .iv-num{fill:var(--ip-ink);font:800 13.5px/1 system-ui,sans-serif;letter-spacing:.04em}
.iv-step-svg .iv-num-l{font-size:15px}
.iv-step-svg .iv-num-s{font-size:10px;fill:var(--ip-accent)}
.iv-step-svg .iv-st-p{fill:var(--ip-accent)}
.iv-step-svg .iv-clip{animation:ivType 4.2s steps(14) infinite}
.iv-step-svg .iv-caret{fill:var(--ip-accent);animation:ivBlink .9s steps(1) infinite}
.iv-step-svg .iv-wabtn{fill:var(--iv-wa)}
.iv-step-svg .iv-wa-g{fill:none;stroke:var(--iv-wa2);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.iv-step-svg .iv-press{transform-box:fill-box;transform-origin:center;animation:ivPress 3s ease-in-out infinite}
.iv-step-svg .iv-bounce{animation:ivBounce 1.2s ease-in-out infinite}
.iv-step-svg .iv-wa-top{fill:var(--iv-wa2)}
.iv-step-svg .iv-chat-bg{fill:#efe6dd}
.iv-step-svg .iv-bub-in{transform-box:fill-box;transform-origin:left top;animation:ivBubIn 5s var(--iv-ease) infinite}
.iv-step-svg .iv-code{fill:var(--iv-wa2);font:900 21px/1 system-ui,sans-serif;letter-spacing:.12em}
.iv-step-svg .iv-copy{fill:var(--iv-wa3)}
.iv-step-svg .iv-dg2{fill:var(--ip-ink);font:900 17px/1 system-ui,sans-serif}
.iv-step-svg .iv-dgb{opacity:0;animation:ivDigit2 5s ease infinite}
.iv-step-svg .iv-pill{fill:#d6f1de}
.iv-step-svg .iv-slide{animation:ivSlide 4s var(--iv-ease) infinite}
.iv-step-svg .iv-fb2{fill:#fff;font:800 8px/1 system-ui,sans-serif;letter-spacing:.12em}
.iv-step-svg .iv-fe2{fill:#fff;font:900 9px/1 system-ui,sans-serif}
.iv-step-svg .iv-pop-d{transform-box:fill-box;transform-origin:center;animation:ivPop 4s var(--iv-ease) .4s infinite}
@keyframes ivType{0%{width:0}55%,92%{width:130px}100%{width:0}}
@keyframes ivBlink{50%{opacity:0}}
@keyframes ivPress{0%,60%,100%{transform:scale(1)}70%{transform:scale(.95)}80%{transform:scale(1.04)}}
@keyframes ivBounce{50%{transform:translateY(-8px)}}
@keyframes ivBubIn{0%{transform:scale(.3);opacity:0}12%,92%{transform:none;opacity:1}100%{opacity:0}}
@keyframes ivDigit2{0%,10%{opacity:0;transform:translateY(5px)}20%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ivSlide{0%{transform:translateY(70px);opacity:0}25%,88%{transform:none;opacity:1}100%{transform:translateY(70px);opacity:0}}

/* ---------- provisional vs complete ---------- */
.iv-track{position:relative;margin:4px 6px 22px;padding-top:6px}
.iv-track-line{position:absolute;top:18px;inset-inline:8%;height:4px;border-radius:4px;background:var(--ip-line);overflow:hidden}
.iv-track-line i{position:absolute;inset-block:0;inset-inline-start:0;width:0;background:linear-gradient(90deg,var(--ip-gold),var(--ip-accent));transition:width 1.6s var(--iv-ease) .3s}
.iv-track.is-in .iv-track-line i{width:100%}
.iv-track ol{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center}
.iv-track li{display:grid;justify-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--ip-mute,#6d6259)}
.iv-track li b{width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid var(--ip-line);transition:background .4s,border-color .4s,transform .4s var(--iv-ease)}
.iv-track.is-in li b{background:var(--ip-accent);border-color:#fff;box-shadow:0 0 0 3px var(--ip-accent);transform:scale(1)}
.iv-track.is-in li:nth-child(2) b{transition-delay:.5s}.iv-track.is-in li:nth-child(3) b{transition-delay:.9s}.iv-track.is-in li:nth-child(4) b{transition-delay:1.3s;background:#1fa84f;box-shadow:0 0 0 3px #1fa84f}
.iv-cmp{display:grid;gap:14px}
.iv-cmp-card{position:relative;display:flex;flex-direction:column;gap:8px;background:#fff;border:1.5px solid var(--ip-line);border-radius:26px;padding:20px 18px 20px;overflow:hidden;transition:transform .3s,box-shadow .3s}
.iv-cmp-card:hover{transform:translateY(-4px);box-shadow:0 30px 46px -32px #2a1a0e88}
.iv-cmp-card.is-pending{border-color:#f1c46a;background:linear-gradient(180deg,#fff,#fff8ea)}
.iv-cmp-card.is-done{border-color:#7fd29a;background:linear-gradient(180deg,#fff,#effaf2)}
.iv-badge{align-self:flex-start;padding:3px 13px;border-radius:99px;font-size:13px;font-weight:800;background:#ffe9b8;color:#7a4a00}
.is-done .iv-badge{background:#c9f0d6;color:#0d5a2c}
.iv-cmp-card h3{font-size:20px;font-weight:800}
.iv-cmp-card p{color:#4a423b}
.iv-sheet{position:absolute;top:16px;inset-inline-end:16px;width:64px;height:78px;border-radius:9px;background:#fff;border:1.5px solid var(--ip-line);box-shadow:0 14px 18px -12px #2a1a0e66;padding:11px 8px;display:grid;gap:6px;align-content:start;transform:rotate(5deg);transition:transform .4s var(--iv-ease)}
.iv-cmp-card:hover .iv-sheet{transform:rotate(0) scale(1.06)}
.iv-sheet i{display:block;height:5px;border-radius:3px;background:#e7dccd}
.iv-sheet i:nth-child(2){width:70%}
.iv-sheet em{position:absolute;inset-inline:-6px;bottom:9px;text-align:center;font:900 7.5px/1 system-ui,sans-serif;letter-spacing:.06em;font-style:normal;color:#c27d00;border:1.5px solid currentColor;border-radius:4px;padding:3px 0;transform:rotate(-9deg);background:#fff9}
.is-done .iv-sheet em{color:#14884a}
.iv-cmp-card h3,.iv-cmp-card p{padding-inline-end:78px}
.iv-cmp-note{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 16px;border-radius:18px;background:var(--ip-soft);border:1px dashed color-mix(in srgb,var(--ip-gold) 80%,#000);font-weight:700;font-size:14.5px;color:#4a3426}
.iv-cmp-note .iv-ic{color:#b88524;margin-top:4px}

/* ---------- why the same number ---------- */
.iv-why{position:relative;overflow:hidden;border-radius:30px;padding:26px 20px;background:linear-gradient(150deg,#1b1613,var(--ip-night));color:#fff}
.iv-why::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 100% 0,color-mix(in srgb,var(--ip-accent) 45%,transparent),transparent 70%),radial-gradient(ellipse 50% 60% at 0 100%,color-mix(in srgb,var(--ip-gold) 25%,transparent),transparent 70%)}
.iv-why>*{position:relative}
.iv-why h2{font-size:clamp(22px,4.4vw,30px);font-weight:800;line-height:1.4}
.iv-why-sub{color:#ffffffd0;margin:8px 0 22px;max-width:60ch}
.iv-why ul{display:grid;gap:12px}
.iv-why li{display:flex;gap:13px;align-items:flex-start;background:#ffffff12;border:1px solid #ffffff22;border-radius:20px;padding:14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.iv-why li>span{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--ip-gold);color:#2a1a0e}
.iv-why li>span .iv-ic{width:24px;height:24px}
.iv-why h3{font-size:16.5px;font-weight:800;line-height:1.5}
.iv-why li p{color:#ffffffc4;font-size:14.5px;line-height:1.75}

/* ---------- sign-in box ---------- */
.iv-loginsec{padding-bottom:calc(clamp(40px,7vw,84px) + env(safe-area-inset-bottom,0px));scroll-margin-top:70px}
.iv-login{position:relative;max-width:620px;margin-inline:auto;border-radius:32px;padding:26px 18px 22px;background:#fff;border:1.5px solid color-mix(in srgb,var(--iv-wa) 45%,var(--ip-line));box-shadow:0 44px 70px -46px #0a4f2e99;overflow:hidden}
.iv-login::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--iv-wa2),var(--iv-wa),var(--ip-gold))}
.iv-login-glow{position:absolute;inset:-30% -10% auto auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--iv-wa) 30%,transparent),transparent 65%);pointer-events:none;opacity:.7}
.iv-login.is-attn{animation:ivAttn 1.6s ease-out 1}
@keyframes ivAttn{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--iv-wa) 60%,transparent)}100%{box-shadow:0 0 0 26px transparent}}
.iv-login-head{position:relative;display:flex;gap:14px;align-items:flex-start;margin-bottom:16px}
.iv-wa-ic{position:relative;flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--iv-wa);color:#fff;box-shadow:0 14px 22px -10px var(--iv-wa)}
.iv-wa-ic svg{width:30px;height:30px}
.iv-wa-ic::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--iv-wa);opacity:0;animation:ivRing 2.4s ease-out infinite}
@keyframes ivRing{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.iv-login-head h2{font-size:clamp(20px,4.6vw,26px);font-weight:800;line-height:1.45;margin-bottom:4px}
.iv-login-head p{color:#4a423b;font-size:14.5px;line-height:1.85}
.iv-wl{position:relative}
.iv-stepper{display:flex;align-items:center;gap:0;margin:2px 0 16px;padding:0}
.iv-stepper li{flex:1;display:grid;justify-items:center;gap:4px;position:relative;font-size:12.5px;font-weight:800;color:#8a7f74;text-align:center}
.iv-stepper li:not(:last-child)::after{content:"";position:absolute;top:15px;inset-inline-start:calc(50% + 20px);width:calc(100% - 40px);height:3px;border-radius:3px;background:var(--ip-line);transition:background .5s}
.iv-stepper b{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;border:2.5px solid var(--ip-line);font-size:14px;transition:all .4s var(--iv-ease)}
.iv-wl[data-step="1"] .is-s1,.iv-wl[data-step="2"] .is-s1,.iv-wl[data-step="2"] .is-s2,.iv-wl[data-step="3"] li{color:var(--ip-ink)}
.iv-wl[data-step="1"] .is-s1 b,.iv-wl[data-step="2"] .is-s1 b,.iv-wl[data-step="2"] .is-s2 b,.iv-wl[data-step="3"] li b{background:var(--iv-wa);border-color:var(--iv-wa);color:#fff}
.iv-wl[data-step="1"] .is-s1 b,.iv-wl[data-step="2"] .is-s2 b{transform:scale(1.12);box-shadow:0 0 0 5px color-mix(in srgb,var(--iv-wa) 25%,transparent)}
.iv-wl[data-step="2"] .is-s1::after,.iv-wl[data-step="3"] .is-s1::after,.iv-wl[data-step="3"] .is-s2::after{background:var(--iv-wa)}
.iv-wl form{display:grid;gap:12px}
.iv-wl form[hidden]{display:none}
.iv-wl label{display:grid;gap:6px;font-size:13.5px;font-weight:800}
.iv-wl input{width:100%;min-height:58px;padding:0 16px;border:2px solid var(--ip-line);border-radius:18px;background:var(--ip-bg);font:inherit;font-size:21px;font-weight:800;letter-spacing:.06em;color:var(--ip-ink);transition:border-color .2s,box-shadow .2s,background .2s}
.iv-wl input[inputmode=numeric]{letter-spacing:.42em;text-align:center;font-size:26px}
.iv-wl input:focus{outline:none;border-color:var(--iv-wa);background:#fff;box-shadow:0 0 0 5px color-mix(in srgb,var(--iv-wa) 22%,transparent)}
.iv-wl input::placeholder{color:#c2b8ac;font-weight:700}
.iv-go{width:100%;background:linear-gradient(135deg,var(--iv-wa),var(--iv-wa2))!important;color:#fff!important;border:0;box-shadow:0 18px 26px -16px var(--iv-wa2)!important;position:relative;overflow:hidden}
.iv-go svg{width:22px;height:22px}
.iv-go:hover{filter:brightness(1.05)}
.iv-go.is-busy{opacity:.7;pointer-events:none}
.iv-go.is-busy::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff80 50%,transparent 70%);animation:ivShine 1s linear infinite}
.sz-wl-sent{font-size:14px;line-height:1.9;color:#4a423b;background:#effaf2;border:1px solid #bfe8cc;border-radius:16px;padding:10px 14px;margin:0}
.sz-wl-links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sz-wl-links button{padding:10px 6px;border:0;background:none;color:var(--iv-wa2);font:inherit;font-size:14px;font-weight:800;text-decoration:underline;cursor:pointer}
.sz-wl-links button:disabled{color:#9a8f84;text-decoration:none;cursor:default}
.iv-wl .sz-wl-msg{margin:12px 0 0;font-size:14px;line-height:1.8;font-weight:700}
.iv-wl .sz-wl-msg:empty{display:none}
.iv-wl .sz-wl-msg.is-bad{padding:10px 14px;border-radius:14px;background:#fdecea;color:#8a1c14}
.iv-wl .sz-wl-msg.is-ok{color:#0b6b43}
.iv-done{position:absolute;inset:0;display:grid;place-items:center;background:#fffffff2;opacity:0;pointer-events:none;transition:opacity .4s;border-radius:20px}
.iv-done svg{width:88px;height:88px;fill:none;stroke:var(--iv-wa);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.iv-done circle{stroke-dasharray:145;stroke-dashoffset:145}
.iv-done path{stroke-dasharray:50;stroke-dashoffset:50;stroke-width:4.4}
.iv-wl.is-done .iv-done{opacity:1}
.iv-wl.is-done .iv-done circle{animation:ivDraw .7s ease forwards}
.iv-wl.is-done .iv-done path{animation:ivDraw .45s ease .55s forwards}
@keyframes ivDraw{to{stroke-dashoffset:0}}
.iv-lock{display:flex;gap:9px;align-items:flex-start;margin:14px 0 0;color:#5b5147;font-size:13.5px;line-height:1.75;font-weight:600}
.iv-lock .iv-ic{color:var(--iv-wa2);margin-top:3px}
.iv-alt{display:block;text-align:center;margin-top:12px;padding:10px;color:var(--ip-ink);font-weight:800;font-size:14px;text-decoration:underline!important;text-underline-offset:4px}
.iv-in{position:relative;display:grid;gap:8px;justify-items:center;text-align:center;padding:6px 0 4px}
.iv-in-ic{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#effaf2;color:var(--iv-wa2)}
.iv-in-ic .iv-ic{width:32px;height:32px}
.iv-in-t{font-size:19px;font-weight:800}
.iv-in-s{color:#4a423b;font-size:15px}
.iv-in .ip-btn{margin-top:6px}

/* ---------- wider screens ---------- */
@media(min-width:700px){
	.iv-pathsec{margin-top:-58px}
	.iv-path{padding:16px 22px}
	.iv-path a{font-size:14.5px;grid-auto-flow:column;justify-content:center;gap:10px}
	.iv-check{grid-template-columns:repeat(3,minmax(0,1fr))}
	.iv-check li{flex-direction:column}
	.iv-step-btn{width:auto;min-width:220px}
	.iv-step:not(:first-child)::before{inset-inline-start:115px}
	.iv-step:nth-child(even):not(:first-child)::before{inset-inline-start:auto;inset-inline-end:115px}
	.iv-cmp{grid-template-columns:repeat(2,minmax(0,1fr))}
	.iv-why{padding:38px 36px}
	.iv-why ul{grid-template-columns:repeat(2,minmax(0,1fr))}
	.iv-login{padding:34px 34px 28px}
}
@media(prefers-reduced-motion:reduce){
	.iv-up,.iv-shine::after,.iv-wa-ic::after,.iv-login.is-attn,.iv-hero-svg *,.iv-step-svg *{animation:none!important}
	.iv-rv,.iv-rv.iv-hide{opacity:1!important;transform:none!important;transition:none!important}
	.iv-hero-svg .iv-dg,.iv-hero-svg .iv-bub1,.iv-step-svg .iv-dgb,.iv-hero-svg .iv-spark{opacity:1}
	.iv-step-svg .iv-clip{width:130px}
	.iv-hero-svg .iv-pop-d,.iv-hero-svg .iv-ok-d{transform:none}
}

/* ---------- account walkthrough: a phone that plays «حسابي ← طلباتي ← الفاتورة ← تحميل PDF» ---------- */
.iv-demosec{padding-bottom:6px}
.iv-demo-sub{margin:-6px 0 18px;color:#4a423b;max-width:64ch}
.iv-demo{position:relative;background:linear-gradient(160deg,#fff,var(--ip-soft));border:1px solid var(--ip-line);border-radius:32px;padding:18px 12px 22px;box-shadow:0 40px 60px -44px #2a1a0e99;overflow:hidden}
.iv-dpath{display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:center;margin:0 0 18px}
.iv-dpath li{position:relative;padding:6px 14px;border-radius:99px;background:#fff;border:1.5px solid var(--ip-line);font-weight:800;font-size:13.5px;color:#7a6e63;transition:background .4s,color .4s,border-color .4s,transform .4s}
.iv-dpath li:not(:last-child)::after{content:"‹";position:absolute;inset-inline-end:-17px;top:50%;transform:translateY(-54%);color:var(--ip-gold);font-size:20px;font-weight:900}
.iv-dpath li.is-on{background:var(--ip-accent);border-color:var(--ip-accent);color:#fff;transform:scale(1.05)}
.iv-demo-grid{display:grid;gap:20px;justify-items:center}
.iv-phone{position:relative;width:296px;padding:8px;border-radius:42px;background:#14110F;box-shadow:0 40px 50px -26px #000a,inset 0 0 0 2px #3a322c}
.iv-phone::before{content:"";position:absolute;top:14px;left:50%;width:70px;height:6px;margin-left:-35px;border-radius:6px;background:#2a231e;z-index:12}
.iv-screen{position:relative;width:280px;height:520px;border-radius:34px;overflow:hidden;background:var(--ip-bg);direction:rtl;font-size:12px;font-family:inherit;color:var(--ip-ink)}
.iv-sc{position:absolute;inset:0;background:var(--ip-bg);opacity:0;visibility:hidden;transform:translateX(22px);transition:opacity .45s,transform .45s var(--iv-ease),visibility 0s .45s}
.iv-demo[data-scene="1"] .iv-sc1,.iv-demo[data-scene="2"] .iv-sc2,.iv-demo[data-scene="3"] .iv-sc3,.iv-demo[data-scene="4"] .iv-sc4,.iv-demo[data-scene="5"] .iv-sc5{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.iv-sc button{font:inherit;cursor:pointer}
.iv-sc svg{display:block}
/* top bar */
.dm-top{position:absolute;top:0;inset-inline:0;height:52px;padding:14px 14px 0;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid var(--ip-line)}
.dm-logo{font:900 15px/1 Georgia,serif;letter-spacing:.05em;color:var(--ip-accent)}
.dm-top i{width:22px;height:22px;border-radius:50%;background:var(--ip-soft)}
.dm-top2 b{margin:auto;font-size:14px}
/* 1 home */
.dm-banner{position:absolute;top:62px;inset-inline:12px;height:150px;border-radius:18px;overflow:hidden;background:linear-gradient(150deg,var(--ip-accent),var(--ip-accent-lo))}
.dm-banner b{position:absolute;top:34px;right:16px;width:112px;height:14px;border-radius:7px;background:#fff}
.dm-banner em{position:absolute;top:58px;right:16px;width:72px;height:10px;border-radius:5px;background:#ffffffa8}
.dm-banner span{position:absolute;left:18px;top:30px;width:92px;height:92px;border-radius:50%;background:var(--ip-gold)}
.dm-cards{position:absolute;top:224px;inset-inline:12px;display:flex;gap:10px}
.dm-cards2{top:332px}
.dm-cards i{flex:1;height:96px;border-radius:14px;background:#fff;border:1px solid var(--ip-line)}
.dm-bn{position:absolute;bottom:0;inset-inline:0;height:64px;padding:0 4px;display:flex;justify-content:space-around;align-items:center;background:#fff;border-top:1px solid var(--ip-line);box-shadow:0 -10px 20px -14px #0003}
.dm-bn>span,.dm-bn>button{display:grid;justify-items:center;gap:2px;width:54px;padding:6px 0;border:0;background:none;color:#6b6158;font-size:10px;font-weight:700;border-radius:14px}
.dm-bn svg{width:20px;height:20px}
.dm-bn .is-on{color:var(--ip-accent);background:var(--ip-soft)}
/* 2 account */
.dm-hero{position:absolute;top:62px;inset-inline:12px;height:84px;padding:0 14px;display:flex;align-items:center;gap:12px;border-radius:22px;color:#fff;background:linear-gradient(120deg,var(--ip-night),#2b1a14 62%,var(--ip-accent-lo))}
.dm-av{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--ip-gold);color:#2a1a0e;font-weight:900;font-size:20px}
.dm-hero small{display:block;font-size:11px;opacity:.8}.dm-hero b{font-size:15px}
.dm-pills{position:absolute;top:158px;inset-inline:12px;display:flex;gap:6px;overflow:hidden;white-space:nowrap}
.dm-p{flex:none;height:34px;padding:0 13px;display:inline-flex;align-items:center;border-radius:99px;background:#fff;border:1px solid var(--ip-line);font-weight:700;font-size:12px;color:var(--ip-ink)}
.dm-p-first{background:var(--ip-night);color:#fff;border-color:var(--ip-night)}
.dm-tiles{position:absolute;top:208px;inset-inline:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dm-tiles i{height:92px;border-radius:18px;background:#fff;border:1px solid var(--ip-line)}
.dm-tiles i:nth-child(2){background:linear-gradient(160deg,#fff8e6,#f6e6bd)}
/* 3 orders */
.dm-h{position:absolute;top:62px;inset-inline-start:16px;margin:0;font-weight:900;font-size:17px}
.dm-order{position:absolute;top:96px;inset-inline:12px;height:236px;padding:12px;border-radius:20px;background:#fff;border:1px solid var(--ip-line);box-shadow:0 20px 30px -24px #2a1a0e88}
.dm-order2{top:344px;height:70px}
.dm-oh{display:flex;justify-content:space-between;align-items:flex-start}
.dm-oh b{display:block;font-size:13px}.dm-oh small{font-size:10px;color:#7a6e63}
.dm-chip{padding:2px 10px;border-radius:99px;background:#e3f4e5;color:#1e6b25;font-weight:800;font-size:10.5px}
.dm-chip-x{background:#fde4e1;color:#9b1c12}
.dm-oi{display:flex;gap:10px;align-items:center;margin-top:12px}
.dm-th{flex:none;width:44px;height:44px;border-radius:11px;background:linear-gradient(135deg,#f1e8da,#e0d2bf)}
.dm-oi b{display:block;font-size:12px}.dm-oi small{font-size:10px;color:#7a6e63}
.dm-trk{position:relative;display:flex;justify-content:space-between;margin:20px 8px 0}
.dm-trk::before{content:"";position:absolute;top:50%;inset-inline:6px;height:3px;margin-top:-1.5px;background:linear-gradient(90deg,#1fa84f,var(--ip-gold))}
.dm-trk i{position:relative;width:16px;height:16px;border-radius:50%;background:#1fa84f;box-shadow:0 0 0 3px #fff}
.dm-act{position:absolute;bottom:12px;inset-inline:12px;display:flex;gap:8px}
.dm-inv{flex:1.15;height:42px;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:99px;background:linear-gradient(135deg,var(--ip-accent),var(--ip-accent-lo));color:#fff;font-weight:800;font-size:12.5px;box-shadow:0 12px 18px -12px var(--ip-accent)}
.dm-inv svg{width:16px;height:16px}
.dm-ghost{flex:1;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--ip-line);border-radius:99px;font-weight:800;font-size:12px}
/* 4 invoice page */
.dm-tb{position:absolute;top:0;inset-inline:0;height:66px;padding:18px 12px 8px;display:flex;gap:8px;align-items:center;background:#f4efe7}
.dm-b1,.dm-b2{flex:1;height:38px;display:inline-flex;align-items:center;justify-content:center;gap:4px;border-radius:11px;font-weight:700;font-size:11.5px}
.dm-b1{background:var(--ip-accent);color:#fff}
.dm-b2{background:#fff;border:1.5px solid var(--ip-accent);color:var(--ip-accent-lo)}
.dm-b2 svg{width:14px;height:14px}
.dm-hint{position:absolute;top:74px;inset-inline:12px;margin:0;padding:6px 10px;border-radius:10px;border:1px dashed var(--ip-accent);background:#fff;font-size:10px;line-height:1.6;text-align:center}
.dm-sheet{position:absolute;top:130px;inset-inline:12px;bottom:12px;padding:20px 12px 12px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--ip-line);overflow:hidden}
.dm-sh-bar{position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--ip-accent-lo),var(--ip-accent),var(--ip-gold))}
.dm-sh-top{display:flex;justify-content:space-between;align-items:center}
.dm-sh-top b{font:900 13px/1 Georgia,serif;color:var(--ip-accent)}.dm-sh-top em{font-style:normal;font-weight:900;font-size:16px;color:var(--ip-accent)}
.dm-sh-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}.dm-sh-meta i{height:34px;border-radius:8px;background:var(--ip-bg)}
.dm-sh-line{height:10px;margin-top:12px;border-radius:5px;background:#eee4d6}.dm-sh-short{width:60%}
.dm-sh-total{position:absolute;bottom:12px;inset-inline:12px;height:34px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border-radius:10px;background:linear-gradient(135deg,var(--ip-accent),var(--ip-accent-lo));color:#fff;font-weight:800;font-size:12px}
/* 5 saved */
.dm-tb-dim,.dm-sheet-dim{opacity:.35;filter:blur(1.2px)}
.dm-dl{position:absolute;top:150px;inset-inline:16px;padding:12px;display:flex;gap:10px;align-items:center;border-radius:18px;background:#fff;border:1px solid var(--ip-line);box-shadow:0 24px 40px -18px #0007}
.dm-pdf{flex:none;width:42px;height:52px;border-radius:8px;background:var(--ip-accent);color:#fff;font:900 11px/52px system-ui,sans-serif;text-align:center}
.dm-dl b{font-size:11.5px}.dm-bar{width:150px;height:6px;margin:6px 0;border-radius:6px;background:#eee;overflow:hidden}
.dm-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--ip-gold),#1fa84f)}
.dm-dl small{color:#1e6b25;font-weight:800;font-size:10.5px}
.dm-done{position:absolute;top:246px;inset-inline:0;text-align:center}
.dm-done svg{width:72px;height:72px;margin:0 auto;fill:none;stroke:#1fa84f;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.dm-done p{margin:8px 0 0;font-weight:900;font-size:14px}
.dm-again{margin-top:10px;padding:8px 18px;border:0;border-radius:99px;background:var(--ip-night);color:#fff;font-weight:800;font-size:12px}
.dm-sp{position:absolute;width:10px;height:10px;transform:rotate(45deg);background:var(--ip-gold)}
.dm-sp1{top:128px;left:30px}.dm-sp2{top:210px;right:26px}.dm-sp3{top:300px;left:60px}.dm-sp4{top:330px;right:50px}
/* the finger */
.iv-cur{position:absolute;z-index:11;left:0;top:0;width:44px;height:44px;transform:translate(var(--x,120px),var(--y,300px));transition:transform 1.05s cubic-bezier(.65,0,.35,1),opacity .35s;pointer-events:none}
.iv-cur svg{width:100%;height:100%;fill:#fff;stroke:#14110F;stroke-width:1.8;stroke-linejoin:round;filter:drop-shadow(0 8px 8px #0006);transform-origin:20px 6px}
.iv-cur::before{content:"";position:absolute;left:20px;top:4px;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;border:3px solid var(--ip-accent);opacity:0}
.iv-demo[data-scene="5"] .iv-cur{opacity:0}
.iv-demo.is-tick .iv-cur::before{animation:dmRip .75s ease-out 1.75s both}
.iv-demo.is-tick .iv-cur svg{animation:dmPress .5s ease 1.65s}
@keyframes dmRip{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(7)}}
@keyframes dmPress{40%{transform:scale(.84)}}
/* what the shopper must tap in the active scene */
.iv-sc [data-tgt]{position:relative}
.iv-demo[data-scene="1"] .iv-sc1 [data-tgt]::after,.iv-demo[data-scene="2"] .iv-sc2 [data-tgt]::after,.iv-demo[data-scene="3"] .iv-sc3 [data-tgt]::after,.iv-demo[data-scene="4"] .iv-sc4 [data-tgt]::after{content:"";position:absolute;inset:-4px;border-radius:99px;border:2px solid var(--ip-accent);animation:dmHl 1.3s ease-out infinite;pointer-events:none}
.iv-demo[data-scene="1"] .dm-acc::after{border-radius:16px}
.iv-demo[data-scene="4"] .dm-b2::after{border-radius:14px}
@keyframes dmHl{0%{opacity:.9;transform:scale(.96)}100%{opacity:0;transform:scale(1.18)}}
/* what changes after the tap */
.iv-demo.is-tick[data-scene="1"] .dm-bn .dm-acc{animation:dmOn .01s 1.9s forwards}
.iv-demo.is-tick[data-scene="2"] .dm-p-orders{animation:dmDark .01s 1.9s forwards}
.iv-demo.is-tick[data-scene="2"] .dm-p-first{animation:dmLight .01s 1.9s forwards}
.iv-demo.is-tick[data-scene="3"] .dm-inv,.iv-demo.is-tick[data-scene="4"] .dm-b2{animation:dmBtn .5s ease 1.7s}
.iv-demo[data-scene="5"].is-tick .dm-bar i{animation:dmFill 1.4s ease .5s both}
.iv-demo[data-scene="5"].is-tick .dm-done circle{stroke-dasharray:145;animation:dmDraw .7s ease 1.4s both}
.iv-demo[data-scene="5"].is-tick .dm-done path{stroke-dasharray:50;animation:dmDraw .45s ease 1.95s both}
.iv-demo[data-scene="5"].is-tick .dm-sp{animation:dmSpark 1.6s ease-in-out 1.6s infinite}
.iv-demo[data-scene="5"].is-tick .dm-sp2{animation-delay:1.9s}.iv-demo[data-scene="5"].is-tick .dm-sp3{animation-delay:2.2s}.iv-demo[data-scene="5"].is-tick .dm-sp4{animation-delay:2.5s}
@keyframes dmOn{to{color:var(--ip-accent);background:var(--ip-soft)}}
@keyframes dmDark{to{background:var(--ip-night);color:#fff;border-color:var(--ip-night)}}
@keyframes dmLight{to{background:#fff;color:var(--ip-ink);border-color:var(--ip-line)}}
@keyframes dmBtn{40%{transform:scale(.93)}70%{transform:scale(1.05)}}
@keyframes dmFill{from{width:0}to{width:100%}}
@keyframes dmDraw{from{stroke-dashoffset:150}to{stroke-dashoffset:0}}
@keyframes dmSpark{0%,100%{transform:rotate(45deg) scale(.2);opacity:0}50%{transform:rotate(45deg) scale(1.2);opacity:1}}
/* steps + controls */
.iv-demo-side{width:100%;max-width:560px;display:grid;gap:14px}
.iv-dcap{margin:0;display:grid;gap:3px;min-height:88px;padding:12px 16px;border-radius:20px;background:#fff;border:1.5px solid color-mix(in srgb,var(--ip-accent) 35%,var(--ip-line))}
.iv-dcap b{font-size:17px;font-weight:900;color:var(--ip-accent-lo)}
.iv-dcap span{font-size:14.5px;line-height:1.8;color:#4a423b}
.iv-dsteps{display:grid;gap:6px}
.iv-dsteps button{width:100%;display:flex;gap:12px;align-items:flex-start;text-align:start;padding:10px 12px;border-radius:18px;border:1.5px solid transparent;background:transparent;font:inherit;color:var(--ip-ink);cursor:pointer;transition:background .25s,border-color .25s}
.iv-dsteps button:hover{background:#ffffffb0}
.iv-dsteps button b{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--ip-line);font-weight:900;font-size:14px;transition:all .3s}
.iv-dsteps strong{display:block;font-size:15px;font-weight:800;line-height:1.6}
.iv-dsteps small{display:none;font-size:14px;line-height:1.8;color:#4a423b}
.iv-dsteps button[aria-current="true"]{background:#fff;border-color:color-mix(in srgb,var(--ip-accent) 45%,var(--ip-line));box-shadow:0 18px 26px -22px #2a1a0e}
.iv-dsteps button[aria-current="true"] b{background:var(--ip-accent);border-color:var(--ip-accent);color:#fff;transform:scale(1.1)}
.iv-dsteps button.is-done b{background:#1fa84f;border-color:#1fa84f;color:#fff}
.iv-dctl{display:flex;align-items:center;gap:10px}
.iv-dctl button{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--ip-line);background:#fff;color:var(--ip-ink);cursor:pointer;transition:background .2s,transform .2s}
.iv-dctl button:hover{background:var(--ip-soft);transform:translateY(-2px)}
.iv-dctl button:focus-visible,.iv-dsteps button:focus-visible,.iv-sc button:focus-visible{outline:3px solid var(--ip-night);outline-offset:2px}
.iv-dctl .iv-ic{width:20px;height:20px}
.iv-dnext .iv-ic{transform:scaleX(-1)}
.iv-dplay i{width:14px;height:16px;border-inline:4px solid var(--ip-accent);box-sizing:border-box}
.iv-dplay[aria-pressed="false"] i{width:0;height:0;border:0;border-block:8px solid transparent;border-inline-start:14px solid var(--ip-accent);border-inline-end:0;margin-inline-start:3px}
.iv-dprog{flex:1;height:7px;border-radius:7px;background:var(--ip-line);overflow:hidden}
.iv-dprog i{display:block;height:100%;width:0;border-radius:7px;background:linear-gradient(90deg,var(--ip-gold),var(--ip-accent));transition:width .6s var(--iv-ease)}
@media(min-width:900px){
	.iv-demo{padding:30px 34px}
	.iv-demo-grid{grid-template-columns:auto 1fr;gap:46px;align-items:center;justify-items:stretch}
	.iv-phone{justify-self:center}
	.iv-dsteps small{display:block}
	.iv-dcap{display:none}
	.iv-dsteps button{padding:12px 14px}
}
@media(prefers-reduced-motion:reduce){
	.iv-sc,.iv-cur,.iv-dprog i{transition:none!important}
	.iv-demo [data-tgt]::after,.iv-demo .iv-cur::before,.iv-demo .iv-cur svg{animation:none!important}
}