/* =====================================================================
 * E-invoicing: your invoice, checked and sent
 * (template-parts/stages/einvoice.php). Loaded on /e-invoicing-uae/ only.
 *
 * One Odoo tax invoice as a paper sheet with real thickness (stacked
 * layers under the face), gently tilted (--tx/--ty/--tz). A beam sweeps
 * down it; field tags pop out toward the viewer on leader lines that rise
 * in depth (rotateY on a 1.5px line). The checked data lifts off the sheet
 * as a thick card, flips (rotateY 180deg) to its PINT AE side and lands on
 * a rail, where the three status pills light in turn.
 *
 * The story is one data-seq on .ei-w; each class below is a moment in it
 * (scan t1..t4 done fix fixed ready lift flip seal glide dock send ok1..ok3
 * out). Everything is printed finished: the plain rules are the end state,
 * and the ".js .ei-w:not(.x)" rules are how it looks before moment x.
 * Forward changes carry their transition on the state they reach; a reset
 * (the loop restarting, or "Run the check") snaps back while hidden.
 *
 * Geometry, stage pixels (620 x 520 box): the sheet is 214 x 302 at
 * (6, 22), its centre (113, 173). Tags stand 240px into the sheet's own
 * space, 22.5px out from the paper. The card is 196 x 124, centred on the
 * sheet's centre; docked, its centre is (110, 406) and it stands on the
 * rail top at y 468 (the rail spans x 0 to 620). Pills at x 232, 364 and
 * 496, 120 wide.
 * ===================================================================== */
.stage-einvoice .stage-3d{width:620px;height:520px;--ei-ease:cubic-bezier(.2,.7,.2,1)}
.stage-einvoice .ei-w{position:absolute;inset:0;transform-style:preserve-3d;--tx:8deg;--ty:-8deg;--tz:-1deg}

/* Two phases: only the shown one's deadline. No script shows phase one. */
.stage-einvoice .stage-3d:not([data-on="ph2"]) [data-in="ph2"],
.stage-einvoice .stage-3d[data-on="ph2"] [data-in="ph1"]{display:none}

/* ---------- Light ---------- */
.ei-glow{position:absolute;left:0;top:0;width:620px;height:520px;border-radius:50%;pointer-events:none;transform:translateZ(-220px);
  background:radial-gradient(closest-side at 38% 46%,rgba(47,125,246,.34),rgba(47,125,246,.1) 55%,transparent 78%)}
.ei-floor{position:absolute;left:10px;top:330px;width:600px;height:280px;border-radius:50%;pointer-events:none;
  transform:translateZ(-10px) rotateX(84deg);background:radial-gradient(closest-side,rgba(90,160,255,.42),rgba(47,125,246,.12) 50%,transparent 76%)}

/* ---------- The invoice sheet ---------- */
.ei-doc{position:absolute;left:6px;top:22px;width:214px;height:302px;transform-style:preserve-3d;transform:rotateX(var(--tx)) rotateY(var(--ty)) rotateZ(var(--tz));
  animation:ei-rise 1.1s var(--ei-ease) both}
@keyframes ei-rise{from{translate:0 34px}}
.ei-shadow{position:absolute;left:-30px;top:-10px;width:290px;height:350px;border-radius:50%;pointer-events:none;transform:translate3d(16px,22px,-46px);
  background:radial-gradient(closest-side,rgba(0,0,0,.66),rgba(0,0,0,.3) 55%,transparent)}
.ei-ly{position:absolute;inset:0;border-radius:4px;background:#AEB9C9;transform:translateZ(calc(var(--k) * 1px))}
.ei-ly:nth-of-type(n+5){background:#C4CDD9}
.ei-ly:last-of-type{background:#D3DAE4}
.ei-shadow,.ei-ly,.ei-face,.ei-chk{animation:ei-fade .8s ease-out backwards}
.ei-chk{animation-delay:.25s}
@keyframes ei-fade{from{opacity:0}}

.ei-face{position:absolute;inset:0;border-radius:4px;overflow:hidden;transform:translateZ(7px);color:#1B2433;font:6.4px/1.3 var(--f-body);
  background:linear-gradient(162deg,#FBFCFE,#EEF2F7 58%,#E2E8F0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 -24px 30px -26px rgba(30,50,90,.35)}
.ei-face>*{position:absolute;left:12px;right:12px;margin:0}
.ei-face code{font:500 6.4px/1 var(--f-mono);letter-spacing:.01em;color:#1B2433}
.ei-ph{top:13px;display:flex;align-items:center;gap:6px}
.ei-logo{flex:none;width:17px;height:17px;border-radius:5px;background:linear-gradient(135deg,#3B86F7,#1B4FB8);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.ei-ph b{display:block;font:700 8px/1.1 var(--f-disp);letter-spacing:-.01em;color:#0F172A}
.ei-ph small{display:block;margin-top:1px;font-size:5.6px;color:#6B7689}
.ei-cu{top:63px}
.ei-cu small{display:block;font:600 5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#8A94A6}
.ei-cu b{display:block;margin-top:3px;font:700 7.4px/1.1 var(--f-disp);color:#0F172A}
.ei-cu span{display:block;margin-top:1px;font-size:5.6px;color:#6B7689}
.ei-ti{top:113px;display:flex;align-items:baseline;gap:6px}
.ei-ti b{font:700 10.5px/1 var(--f-disp);letter-spacing:-.01em;color:#0F172A}
.ei-ti code{font-size:7.4px;font-weight:600}
.ei-th,.ei-f3 p{display:grid;grid-template-columns:minmax(0,1fr) 12px 16px 38px;column-gap:3px;align-items:center}
.ei-th{top:134px;padding:0 3px 3px;border-bottom:.6px solid #C9D1DC;font:600 4.8px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#8A94A6}
.ei-th span:nth-child(n+2),.ei-f3 p span:nth-child(n+2){text-align:right}
.ei-f3 p{height:12px;margin:0;font-size:6px;color:#2A3446;white-space:nowrap}
.ei-f3 p span:first-child{overflow:hidden;text-overflow:ellipsis}
.ei-f3 p span:last-child{font:500 6px/1 var(--f-mono)}
.ei-f3 em{font:600 6px/1 var(--f-mono);font-style:normal;color:#1B4FB8}
.ei-tt{top:184px;left:104px}
.ei-tt p{display:flex;justify-content:space-between;align-items:center;height:12px;margin:0;padding:0 3px;font-size:6px;color:#4A5568}
.ei-tt p span:last-child{font:500 6.2px/1 var(--f-mono);color:#1B2433}
.ei-tt p.g{height:15px;margin-top:2px;border-top:.6px solid #C9D1DC;font:700 7px/1 var(--f-disp);color:#0F172A}
.ei-tt p.g span:last-child{font:700 7.4px/1 var(--f-disp)}
.ei-pr{top:240px;font-size:5.6px;color:#6B7689}
.ei-ft{top:281px;display:flex;justify-content:space-between;padding-top:5px;border-top:.6px solid #D5DCE6;font-size:5px;color:#8A94A6}

/* The four checked fields, and their state on the sheet */
.ei-f{display:flex;align-items:center;gap:5px;height:13px;border-radius:3px;pointer-events:auto;transition:background .35s,box-shadow .35s}
.ei-f1,.ei-f2{left:9px;right:auto;width:115px;padding:0 3px;top:40px}
.ei-f2{top:90px}
.ei-f1>span,.ei-f2>span{font:600 5.2px/1 var(--f-mono);letter-spacing:.08em;color:#8A94A6}
.ei-f3{top:146px;left:9px;right:12px;height:24px;padding:0 3px;flex-direction:column;align-items:stretch;justify-content:center;gap:0}
.ei-f4{margin:0 -3px!important;padding:0 6px!important}
.ei-f,.ei-tt p.ei-f{background:rgba(62,213,152,.13);box-shadow:inset 0 0 0 .8px rgba(31,157,99,.62)}
.ei-f1 code,.ei-f2 code{white-space:nowrap}
.ei-f2 em{position:absolute;left:22px;top:0;height:13px;display:flex;align-items:center;font:700 5.4px/1 var(--f-body);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#D92D33;opacity:0;transition:opacity .25s}
.ei-f2 code{transition:opacity .3s}

/* Scanning beam and its light on the paper */
/* Its glow is drawn with gradients inside its own box (no box-shadow), so
   the light never spills past the measured edges toward the text. */
.ei-beam{position:absolute;left:-26px;right:-26px;top:0;height:2px;border-radius:2px;pointer-events:none;opacity:0;transform:translateZ(8px) translateY(-6px);
  background:linear-gradient(90deg,transparent,#BFDBFF 12%,#fff 50%,#BFDBFF 88%,transparent)}
.ei-beam::before{content:"";position:absolute;left:6%;right:6%;top:-5px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(170,210,255,.95),rgba(90,160,255,.4) 55%,transparent)}
.ei-beam::after{content:"";position:absolute;left:10%;right:10%;top:-14px;height:30px;border-radius:50%;background:radial-gradient(closest-side,rgba(120,180,255,.35),transparent)}
.ei-trail{position:absolute;left:0!important;right:0!important;top:0;height:64px;pointer-events:none;opacity:0;transform:translateY(-70px);
  background:linear-gradient(180deg,transparent,rgba(47,125,246,.1) 60%,rgba(47,125,246,.28))}
.ei-sheen{position:absolute;left:-6px!important;right:auto!important;top:-22px;width:620px;height:520px;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(260px circle at var(--mx,26%) var(--my,30%),rgba(255,255,255,.75),transparent 70%)}

/* ---------- Leader lines and tags ---------- */
.ei-ld{position:absolute;width:var(--l);height:1.5px;margin-top:-.75px;border-radius:1px;pointer-events:none;transform-origin:0 50%;
  transform:translateZ(7.5px) rotateY(calc(-1 * var(--a))) scaleX(1);
  background:linear-gradient(90deg,#3ED598,rgba(110,231,183,.55));box-shadow:0 0 6px rgba(62,213,152,.55)}
.ei-ld::before{content:"";position:absolute;left:-2.5px;top:-1.75px;width:5px;height:5px;border-radius:50%;background:inherit;box-shadow:inherit}
.ei-tag{position:absolute;left:240px;width:186px;height:36px;display:flex;align-items:center;gap:8px;padding:0 9px 0 8px;border-radius:10px;pointer-events:auto;
  transform:translateZ(30px);color:#EAF1FF;white-space:nowrap;
  background:linear-gradient(160deg,rgba(30,46,76,.96),rgba(12,18,31,.97));border:1px solid rgba(62,213,152,.4);
  box-shadow:0 20px 34px -20px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08);transition:border-color .35s,background .35s,opacity .25s}
.ei-tag>span{display:grid;min-width:0}
.ei-tag b{font:600 11.5px/1.15 var(--f-disp);letter-spacing:-.005em;color:#fff}
.ei-tag small{grid-row:2;grid-column:1;margin-top:2px;font:500 9px/1.2 var(--f-body);color:rgba(234,241,255,.62);overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.ei-tg1 small{font:500 9px/1.2 var(--f-mono);letter-spacing:.01em}
.ei-tag small.x{color:#FF8A8D}
.ei-tag small.y{color:#7EE8B5}
.ei-tag small.x{opacity:0}
.ei-ic{position:relative;flex:none;width:17px;height:17px;border-radius:50%;transition:background .3s,box-shadow .3s;
  background:#1F9D63 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center/10px;
  box-shadow:0 0 12px rgba(62,213,152,.5)}
.ei-ic::after{content:"!";position:absolute;inset:0;font:800 11px/17px var(--f-body);text-align:center;color:#fff;opacity:0;transition:opacity .25s}

/* ---------- The check, and its button ---------- */
.ei-chk{position:absolute;left:240px;top:236px;width:186px;padding:10px 11px 11px;border-radius:12px;pointer-events:auto;transform:translateZ(18px);
  background:linear-gradient(160deg,rgba(26,38,62,.95),rgba(11,16,28,.97));border:1px solid rgba(140,180,255,.22);
  box-shadow:0 26px 40px -24px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08);color:#EAF1FF}
.ei-chk-h{display:block;font:600 11px/1.2 var(--f-disp);letter-spacing:-.005em;color:#fff}
.ei-st{display:grid;align-items:center;min-height:28px;margin:5px 0 8px;font-size:10.5px;line-height:1.35}
.ei-st>span{grid-area:1/1;display:flex;align-items:center;gap:7px;opacity:0;transition:opacity .3s}
.ei-st .s2{opacity:1;color:#7EE8B5;font-weight:600}
.ei-st .s1{color:#FF9497;font-weight:600}
.ei-st .s0{color:rgba(234,241,255,.75)}
.ei-st .ei-why{display:block;font-size:10px;color:#D6E6FF}
.ei-spin{flex:none;width:11px;height:11px;border-radius:50%;border:2px solid rgba(110,175,255,.8);border-top-color:transparent;animation:spin .8s linear infinite}
.ei-dot{flex:none;width:8px;height:8px;border-radius:50%}
.ei-dot.r{background:#FF4A4F;box-shadow:0 0 8px #FF4A4F}
.ei-dot.g{background:#3ED598;box-shadow:0 0 8px #3ED598}
.ei-go{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:8px 0;border:0;border-radius:8px;cursor:pointer;pointer-events:auto;
  font:600 11px/1 var(--f-body);color:#fff;background:#2F7DF6;box-shadow:0 8px 18px -8px rgba(47,125,246,.9),inset 0 1px 0 rgba(255,255,255,.25);transition:background .25s,translate .12s}
.ei-go::before{content:"";width:11px;height:11px;background:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7M20 4v7h-7'/%3E%3C/svg%3E") center/contain no-repeat}
.ei-go:hover{background:#3D89FF}
.ei-go:active{translate:0 1px}

/* ---------- The e-invoice card ---------- */
.ei-card{position:absolute;left:15px;top:111px;width:196px;height:124px;transform-style:preserve-3d;pointer-events:none;
  transform:translate3d(-3px,233px,0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) rotateY(180deg);
  transition:transform .45s cubic-bezier(.3,1.25,.5,1)}
.ei-card>*{transition:opacity .3s}
.ei-cl{position:absolute;inset:0;border-radius:12px;background:#1B2C4C;transform:translateZ(calc(var(--k) * 1.2px - 3px))}
.ei-cl:nth-of-type(odd){background:#24395F}
.ei-cf,.ei-cb{position:absolute;inset:0;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ei-cf{transform:translateZ(3.6px);padding:16px 14px;display:flex;flex-direction:column;justify-content:center;gap:9px;
  background:repeating-linear-gradient(0deg,rgba(190,220,255,.07) 0 1px,transparent 1px 4px),linear-gradient(160deg,rgba(70,140,255,.34),rgba(30,90,220,.16));
  border:1px solid rgba(190,220,255,.8);box-shadow:0 0 30px rgba(90,160,255,.6),inset 0 0 20px rgba(150,200,255,.3)}
.ei-cf p{display:flex;gap:10px;margin:0}
.ei-cf i{display:block;height:3px;border-radius:2px;background:rgba(150,200,255,.95);box-shadow:0 0 6px rgba(150,200,255,.8)}
.ei-cf i+i{background:rgba(255,255,255,.85);box-shadow:0 0 6px rgba(255,255,255,.6)}
.ei-cf p i:first-child{width:22%}.ei-cf p i+i{width:44%;margin-left:auto}
.ei-cf p:nth-child(2) i+i{width:52%}.ei-cf p:nth-child(3) i:first-child{width:30%}.ei-cf p:nth-child(4) i+i{width:30%}.ei-cf p:nth-child(5) i:first-child{width:36%}
.ei-cb{transform:rotateY(180deg) translateZ(3.6px);padding:0 12px;color:#EAF1FF;
  background:linear-gradient(165deg,#1C2D4E,#0D1628 70%);border:1px solid rgba(140,190,255,.5);
  box-shadow:0 0 0 1px rgba(0,0,0,.3),0 0 40px -6px rgba(47,125,246,.6),inset 0 1px 0 rgba(255,255,255,.1)}
.ei-ch{display:flex;align-items:center;gap:7px;height:32px;margin-bottom:5px;border-bottom:1px solid rgba(255,255,255,.08)}
.ei-pint{font:600 9px/1 var(--f-mono);letter-spacing:.06em;padding:4px 6px;border-radius:5px;color:#CFE1FF;background:rgba(47,125,246,.24);box-shadow:inset 0 0 0 1px rgba(90,160,255,.5)}
.ei-ch b{font:600 12px/1 var(--f-disp);color:#fff}
.ei-cb p{display:flex;justify-content:space-between;gap:8px;margin:0;height:19px;align-items:center;font:500 9.5px/1 var(--f-mono)}
.ei-cb p span{color:#7FB2FF}
.ei-cb p code{font:500 9.5px/1 var(--f-mono);color:#fff;font-variant-numeric:tabular-nums}
.ei-seal{position:absolute;right:-12px;top:-14px;display:flex;align-items:center;gap:5px;padding:6px 10px 6px 7px;border-radius:99px;
  font:700 11px/1 var(--f-disp);letter-spacing:.02em;color:#fff;background:#1F9D63;box-shadow:0 0 0 3px rgba(62,213,152,.22),0 0 22px rgba(62,213,152,.65);
  transform:rotate(-6deg);transition:opacity .3s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.ei-seal i{width:13px;height:13px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F9D63' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center/9px}

html:not(.js) .ei-cb,.ei-w.ok1 .ei-cb{border-color:rgba(62,213,152,.65);box-shadow:0 0 0 1px rgba(0,0,0,.3),0 0 40px -6px rgba(62,213,152,.55),inset 0 1px 0 rgba(255,255,255,.1)}
.ei-card>.ei-cb{transition:opacity .3s,border-color .4s,box-shadow .4s}

/* ---------- The rail ---------- */
/* Tilted toward the camera about its centre line (where the card and pills
   stand), so its top reads as a track rather than a line. */
.ei-rail{position:absolute;left:0;top:468px;width:620px;height:0;transform-style:preserve-3d;transform:rotateX(-16deg);animation:ei-rise 1.1s .15s var(--ei-ease) both}
.ei-rail-t,.ei-rail-f{position:absolute;left:0;width:620px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 95%,transparent)}
.ei-rail-t{top:-30px;height:60px;transform:rotateX(90deg);
  background:linear-gradient(180deg,rgba(10,18,34,.92),rgba(28,46,78,.96) 50%,rgba(56,84,128,.96));box-shadow:inset 0 -1.5px 0 rgba(190,220,255,.9)}
.ei-rail-f{top:0;height:14px;transform:translateZ(30px);background:linear-gradient(180deg,#2C4068,#121C31 55%,#080C16)}
.ei-rail-f::after{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:#7DB7FF;box-shadow:0 0 10px 1px rgba(90,160,255,.75)}
.ei-groove{position:absolute;left:0;right:0;top:29px;height:2px;background:linear-gradient(90deg,rgba(90,160,255,.2),rgba(150,200,255,.75) 30%,rgba(150,200,255,.75) 70%,rgba(90,160,255,.2));box-shadow:0 0 8px rgba(90,160,255,.7)}
.ei-pulse{position:absolute;left:0;top:24px;width:46px;height:12px;margin-left:-23px;border-radius:50%;opacity:0;translate:210px 0;
  background:radial-gradient(closest-side,#fff,rgba(160,210,255,.9) 40%,rgba(90,160,255,0))}
.ei-rail-t,.ei-rail-f{animation:ei-fade .8s .2s ease-out backwards}

/* ---------- Status pills ---------- */
.ei-pill{position:absolute;top:424px;width:120px;height:44px;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:12px;
  color:#fff;background:linear-gradient(165deg,rgba(24,64,52,.95),rgba(10,26,24,.97));border:1px solid rgba(62,213,152,.55);
  box-shadow:0 0 26px -6px rgba(62,213,152,.55),0 18px 28px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);
  transition:background .4s,border-color .4s,box-shadow .4s,color .4s;animation:ei-up .9s .3s var(--ei-ease) backwards}
.ei-pl1{left:232px}.ei-pl2{left:364px;animation-delay:.38s}.ei-pl3{left:496px;animation-delay:.46s}
@keyframes ei-up{from{opacity:0;translate:0 14px}}
.ei-pill>span{display:grid;min-width:0}
.ei-pill b{font:600 11.5px/1.15 var(--f-disp);white-space:nowrap}
.ei-pill small{margin-top:1px;font-size:9.5px;line-height:1.2;color:rgba(214,250,232,.75);white-space:nowrap;transition:color .4s}
.ei-pi{position:relative;flex:none;width:22px;height:22px;border-radius:7px;background:#1F9D63;box-shadow:0 0 12px rgba(62,213,152,.55);transition:background .4s,box-shadow .4s}
.ei-pi::before{content:"";position:absolute;inset:4px;background:#fff;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;transition:background .4s}
.ei-pi.v{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.6-3 8.4-7 10-4-1.6-7-5.4-7-10V6z'/%3E%3Cpath d='m8.6 12 2.4 2.4 4.6-4.8'/%3E%3C/svg%3E")}
.ei-pi.d{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5'/%3E%3Cpath d='M12 3v11M7.5 9.5 12 14l4.5-4.5'/%3E%3C/svg%3E")}
.ei-pi.r{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V10M12 20V4M19 20v-7'/%3E%3C/svg%3E")}

/* ---------- Tijara Tech's part: the link from Odoo to your ASP ---------- */
.ei-link{position:absolute;left:110px;top:490px;width:182px;transform:translateZ(30px);text-align:center;animation:ei-up .9s .5s var(--ei-ease) backwards}
.ei-link i{display:block;height:6px;border:1.5px solid rgba(120,175,255,.75);border-top:0;border-radius:0 0 4px 4px}
.ei-link span{display:block;margin-top:4px;font:500 9.5px/1 var(--f-body);letter-spacing:.01em;color:rgba(214,230,255,.86);white-space:nowrap}

/* ---------- The deadline ---------- */
.ei-dlc{width:176px;padding:10px;border-radius:16px;color:#EAF1FF;
  background:linear-gradient(180deg,rgba(26,34,54,.96),rgba(11,15,25,.97));border:1px solid rgba(140,180,255,.22);
  box-shadow:0 40px 70px -36px rgba(0,0,0,.95),0 0 48px -30px rgba(254,188,46,.5),inset 0 1px 0 rgba(255,255,255,.09)}
.ei-dlh{display:flex;justify-content:space-between;align-items:center;margin:1px 1px 9px}
.ei-dlh b{font:600 11.5px/1 var(--f-disp);color:#fff}
.ei-dlh small{font:500 8.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(234,241,255,.5);padding:3px 6px;border-radius:99px;background:rgba(255,255,255,.06)}
.ei-picks{display:grid;gap:4px}
.ei-picks button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border-radius:8px;cursor:pointer;pointer-events:auto;text-align:left;
  font:600 10.5px/1 var(--f-body);color:rgba(234,241,255,.62);background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.1);transition:color .25s,background .25s,border-color .25s}
.ei-picks button::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;box-sizing:border-box;border:1.5px solid rgba(234,241,255,.35);transition:border .25s,background .25s}
.ei-picks button:hover{color:#fff;border-color:rgba(254,200,90,.5)}
.ei-picks button.cur,.ei-picks:not(:has(.cur)) button:first-child{color:#fff;background:rgba(254,188,46,.12);border-color:rgba(254,188,46,.55)}
.ei-picks button.cur::before,.ei-picks:not(:has(.cur)) button:first-child::before{border:3px solid #FEBC2E;background:#1A1405}
.ei-dl{padding:12px 3px 1px;animation:ei-dl .5s var(--ei-ease) both}
@keyframes ei-dl{from{opacity:0;translate:0 6px}}
.ei-dl-k{display:block;font:600 10px/1.3 var(--f-body);color:#FEC85A}
.ei-dl-n{display:block;height:46px;margin-top:3px;font:700 46px/46px var(--f-disp);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.ei-dl-n.is-date,.ei-dl-n.is-word{font-size:25px;letter-spacing:-.02em}
.ei-dl-ms{list-style:none;display:grid;gap:7px;margin:9px 0 0;padding:9px 0 0;border-top:1px solid rgba(255,255,255,.08)}
.ei-dl-ms li{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:7px;font-size:10px;line-height:1.2;color:rgba(234,241,255,.62)}
.ei-dl-ms i{width:8px;height:8px;border-radius:50%;box-sizing:border-box;border:1.5px solid rgba(234,241,255,.35)}
.ei-dl-ms time{font:500 9.5px/1 var(--f-mono);color:rgba(234,241,255,.75);white-space:nowrap}
.ei-dl-ms li.next{color:#fff}
.ei-dl-ms li.next i{border:0;background:#FEBC2E;box-shadow:0 0 8px #FEBC2E}
.ei-dl-ms li.next time{color:#FEC85A}
.ei-dl-ms li.past{opacity:.5}
.ei-dl-ms li.past i{border:0;background:rgba(234,241,255,.45)}

/* =====================================================================
 * Script running: start before the check and play the story.
 * ===================================================================== */
/* Tags and leaders: hidden until the beam reaches their field. */
.js .ei-w:not(.t1) .ei-tg1,.js .ei-w:not(.t2) .ei-tg2,.js .ei-w:not(.t3) .ei-tg3,.js .ei-w:not(.t4) .ei-tg4{opacity:0;transform:translateZ(6px) translateX(-16px);transition:none}
.ei-w.t1 .ei-tg1,.ei-w.t2 .ei-tg2,.ei-w.t3 .ei-tg3,.ei-w.t4 .ei-tg4{transition:opacity .3s .1s,transform .5s .1s cubic-bezier(.3,1.4,.5,1),border-color .35s,background .35s}
.js .ei-w:not(.t1) .ei-ld1,.js .ei-w:not(.t2) .ei-ld2,.js .ei-w:not(.t3) .ei-ld3,.js .ei-w:not(.t4) .ei-ld4{transform:translateZ(7.5px) rotateY(calc(-1 * var(--a))) scaleX(0);transition:none}
.ei-w.t1 .ei-ld1,.ei-w.t2 .ei-ld2,.ei-w.t3 .ei-ld3,.ei-w.t4 .ei-ld4{transition:transform .32s cubic-bezier(.4,0,.2,1),background .35s,box-shadow .35s}

/* The customer TRN: red until it is taken from the customer record. */
.js .ei-w:not(.fixed) .ei-tg2{border-color:rgba(255,74,79,.6);background:linear-gradient(160deg,rgba(72,30,40,.96),rgba(26,12,18,.97))}
.js .ei-w:not(.fixed) .ei-tg2 .ei-ic{background:#E5383D;box-shadow:0 0 12px rgba(255,74,79,.6)}
.js .ei-w:not(.fixed) .ei-tg2 .ei-ic::after{opacity:1}
.js .ei-w:not(.fixed) .ei-tg2 small.x{opacity:1}
.js .ei-w:not(.fixed) .ei-tg2 small.y{opacity:0}
.js .ei-w:not(.fixed) .ei-ld2{background:linear-gradient(90deg,#FF4A4F,rgba(255,138,141,.55));box-shadow:0 0 6px rgba(255,74,79,.6)}

/* Fields on the sheet: plain until checked; the customer TRN red, then filled. */
.js .ei-w:not(.fixed) .ei-f2{background:rgba(255,74,79,.12);box-shadow:inset 0 0 0 .8px rgba(217,45,51,.7)}
.js .ei-w:not(.t1) .ei-f1,.js .ei-w:not(.t2) .ei-f2,.js .ei-w:not(.t3) .ei-f3,.js .ei-w:not(.t4) .ei-f4{background:transparent;box-shadow:inset 0 0 0 .8px transparent}
.js .ei-w.t2:not(.fix) .ei-f2 em{opacity:1}
.js .ei-w:not(.fix) .ei-f2 code{clip-path:inset(0 100% 0 0)}
.ei-w.fix .ei-f2 code{transition:clip-path .55s steps(18)}

/* The check's own line */
.js .ei-w:not(.ready) .ei-st .s2{opacity:0}
.js .ei-w.t2:not(.ready) .ei-st .s1{opacity:1}
.js .ei-w:not(.t2) .ei-st .s0{opacity:1}

/* The card: on the sheet, lifted, turned over, on its way, then docked.
   Latest state first: with several :not() rules matching, the last wins. */
.js .ei-w:not(.dock) .ei-card{transform:translate3d(-3px,198px,46px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) rotateY(180deg);transition:transform .55s cubic-bezier(.45,0,.3,1)}
.js .ei-w:not(.glide) .ei-card{transform:translate3d(14px,-4px,0px) rotateX(var(--tx)) rotateY(var(--ty)) rotateZ(var(--tz)) translateZ(40px) rotateY(180deg);transition:transform .85s cubic-bezier(.5,0,.25,1)}
.js .ei-w:not(.flip) .ei-card{transform:translate3d(14px,-4px,0px) rotateX(var(--tx)) rotateY(var(--ty)) rotateZ(var(--tz)) translateZ(40px) rotateY(0deg);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.js .ei-w:not(.lift) .ei-card{transform:translate3d(0px,0px,0px) rotateX(var(--tx)) rotateY(var(--ty)) rotateZ(var(--tz)) translateZ(6px) rotateY(0deg);transition:none}
.js .ei-w:not(.lift) .ei-card>*{opacity:0;transition:none}
.js .ei-w:not(.seal) .ei-seal{opacity:0;transform:translateY(6px) rotate(-16deg);transition:none}

/* Pills: unlit until the pulse reaches them. */
.js .ei-w:not(.ok1) .ei-pl1,.js .ei-w:not(.ok2) .ei-pl2,.js .ei-w:not(.ok3) .ei-pl3{color:rgba(234,241,255,.6);background:linear-gradient(165deg,rgba(22,30,48,.92),rgba(10,14,24,.95));border-color:rgba(140,180,255,.16);box-shadow:0 18px 28px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);transition:none}
.js .ei-w:not(.ok1) .ei-pl1 small,.js .ei-w:not(.ok2) .ei-pl2 small,.js .ei-w:not(.ok3) .ei-pl3 small{color:rgba(234,241,255,.42)}
.js .ei-w:not(.ok1) .ei-pl1 .ei-pi,.js .ei-w:not(.ok2) .ei-pl2 .ei-pi,.js .ei-w:not(.ok3) .ei-pl3 .ei-pi{background:rgba(255,255,255,.07);box-shadow:none}
.js .ei-w:not(.ok1) .ei-pl1 .ei-pi::before,.js .ei-w:not(.ok2) .ei-pl2 .ei-pi::before,.js .ei-w:not(.ok3) .ei-pl3 .ei-pi::before{background:rgba(234,241,255,.45)}

/* Motion: the beam, the pulse and the fade at the end of the loop. */
@media (prefers-reduced-motion:no-preference){
  .js .ei-w.scan:not(.done) .ei-beam{animation:ei-scan 2.6s linear forwards}
  .js .ei-w.scan:not(.done) .ei-trail{animation:ei-trail 2.6s linear forwards}
  @keyframes ei-scan{0%{opacity:0;transform:translateZ(8px) translateY(-6px)}5%,95%{opacity:1}100%{opacity:0;transform:translateZ(8px) translateY(308px)}}
  @keyframes ei-trail{0%{opacity:0;transform:translateY(-70px)}6%,92%{opacity:1}100%{opacity:0;transform:translateY(244px)}}
  .js .ei-w.send .ei-pulse{animation:ei-pulse 1.6s linear forwards}
  @keyframes ei-pulse{
    0%{opacity:0;translate:210px 0}5%{opacity:1}
    25%,37.5%{translate:292px 0}
    62.5%,75%{translate:424px 0}
    96%{opacity:1}100%{opacity:0;translate:556px 0}
  }
  .js .ei-w.out .ei-tag,.js .ei-w.out .ei-ld,.js .ei-w.out .ei-card>*,.js .ei-w.out .ei-f2 code{opacity:0;transition:opacity .45s}
  .js .ei-w.out .ei-f{background:transparent;box-shadow:inset 0 0 0 .8px transparent;transition:background .45s,box-shadow .45s}
  .js .ei-w.out .ei-st .s2{opacity:0}
  .js .ei-w.out .ei-st .s0{opacity:1}
  .js .ei-w.out .ei-pill{color:rgba(234,241,255,.6);background:linear-gradient(165deg,rgba(22,30,48,.92),rgba(10,14,24,.95));border-color:rgba(140,180,255,.16);box-shadow:0 18px 28px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06);transition:background .45s,border-color .45s,box-shadow .45s,color .45s}
  .js .ei-w.out .ei-pill small{color:rgba(234,241,255,.42)}
  .js .ei-w.out .ei-pi{background:rgba(255,255,255,.07);box-shadow:none}
  .js .ei-w.out .ei-pi::before{background:rgba(234,241,255,.45)}
}

/* ---------- Hover: a field says why it matters ---------- */
.stage-3d.hovering .ei-st>span:not(.ei-why){opacity:0!important}
.ei-st .ei-why.hot{opacity:1}
.stage-3d.hovering .ei-tag:not(.hot)>*{opacity:.38}
.ei-tag>*{transition:opacity .25s}
.ei-tag.hot{border-color:rgba(190,220,255,.8)!important}
.ei-f.hot{background:rgba(90,160,255,.2)!important;box-shadow:inset 0 0 0 .8px rgba(47,125,246,.9)!important}
.ei-ld.hot{background:linear-gradient(90deg,#9CC8FF,rgba(190,220,255,.6))!important;box-shadow:0 0 8px rgba(120,180,255,.8)!important}

/* ---------- Narrower desktops: the deadline card is on the far right, so
   move the scene into the spare room on the text side, where it would
   otherwise pass the window edge. Measured clear of the text column. ---------- */
@media (min-width:900px) and (max-width:1280px){.stage-einvoice .stage-3d{translate:-32px 0}}
@media (min-width:1281px) and (max-width:1400px){.stage-einvoice .stage-3d{translate:-8px 0}}

/* ---------- Tablets: the same scene, a little smaller ---------- */
@media (min-width:600px) and (max-width:899px){
  .stage.stage-einvoice{height:462px}
  .stage-einvoice .stage-3d{scale:.86}
}

/* ---------- Phones: a simpler, taller scene that stays readable ----------
   466 x 550: the deadline as a strip on top, the sheet and its tags, then
   the e-invoice on the rail with the three pills stacked beside it. The
   check panel, the timeline rows and the pulse are left out. The sheet sits
   56px lower than on desktop, so the docked card's offsets change too. */
@media (max-width:599px){
  .stage.stage-einvoice{height:428px;margin-top:22px}
  .stage-einvoice .stage-3d{width:466px;height:550px;scale:.72}
  .ei-glow{width:466px;height:550px}
  .ei-floor{left:-40px;top:400px;width:520px;height:240px}
  .ei-doc{top:78px}
  .ei-chk,.ei-pulse,.ei-link i,.ei-dlh,.ei-dl-ms{display:none}
  .ei-tag{width:226px;height:42px;margin-top:-3px;gap:9px}
  .ei-tag b{font-size:13.5px}
  .ei-tag small,.ei-tg1 small{font-size:11px}
  .ei-ic{width:19px;height:19px}

  .ei-card{top:167px;transform:translate3d(-9px,229px,0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) rotateY(180deg)}
  /* The same chain as above, in the same order, so the last match wins. */
  .js .ei-w:not(.dock) .ei-card{transform:translate3d(-9px,194px,46px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateZ(0px) rotateY(180deg)}
  .js .ei-w:not(.glide) .ei-card{transform:translate3d(14px,-4px,0px) rotateX(var(--tx)) rotateY(var(--ty)) rotateZ(var(--tz)) translateZ(40px) rotateY(180deg)}
  .js .ei-w:not(.flip) .ei-card{transform:translate3d(14px,-4px,0px) rotateX(var(--tx)) rotateY(var(--ty)) rotateZ(var(--tz)) translateZ(40px) rotateY(0deg)}
  .js .ei-w:not(.lift) .ei-card{transform:translate3d(0px,0px,0px) rotateX(var(--tx)) rotateY(var(--ty)) rotateZ(var(--tz)) translateZ(6px) rotateY(0deg)}
  .ei-ch b{font-size:13px}
  .ei-seal{font-size:13px;padding:7px 11px 7px 8px}

  .ei-rail{top:520px;width:466px}
  .ei-rail-t,.ei-rail-f{width:466px}
  .ei-pill{left:216px;width:250px;height:38px;gap:10px;border-radius:11px}
  .ei-pl1{top:396px}.ei-pl2{top:439px}.ei-pl3{top:482px}
  .ei-pill>span{display:flex;align-items:baseline;gap:6px}
  .ei-pill b{font-size:13.5px}
  .ei-pill small{font-size:11.5px}
  .ei-link{left:4px;top:536px;width:196px}
  .ei-link span{margin:0;font-size:11px}

  .stage-einvoice .ei-dlp{left:0;top:0}
  .ei-dlc{width:466px;display:grid;grid-template-columns:minmax(0,1fr) 168px;align-items:center;column-gap:12px;padding:10px 10px 10px 16px}
  .ei-picks{grid-column:2;grid-row:1}
  .ei-picks button{font-size:12px;padding:8px 9px}
  .ei-dl{grid-column:1;grid-row:1;display:flex;align-items:center;gap:12px;padding:0}
  .ei-dl-n{order:-1;flex:none;height:auto;margin:0;font-size:44px;line-height:1}
  .ei-dl-n.is-date,.ei-dl-n.is-word{font-size:22px}
  .ei-dl-k{font-size:12.5px;line-height:1.3}
}
@media (max-width:360px){
  .stage.stage-einvoice{height:396px}
  .stage-einvoice .stage-3d{scale:.66}
}

@media (prefers-reduced-motion:reduce){
  .ei-doc,.ei-rail,.ei-pill,.ei-link,.ei-dl,.ei-shadow,.ei-ly,.ei-face,.ei-chk,.ei-rail-t,.ei-rail-f{animation:none}
  .stage-einvoice .ei-w *{transition:none!important}
  .ei-spin{animation:none}
}