/* صفحة الدخول — صندوق المبيعات (أكتوبر 2026): شريط متموّج + جهاز دفع بشاشة حية + شريط شعارات الدفع */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.lx{font-family:'IBM Plex Sans Arabic',Tahoma,sans-serif;background:#f6f7fb;color:#1b1f2e;display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;position:relative}
.lx-rib{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.lx-rib g{transform-origin:50% 50%}
.lx-rib .r1{animation:lxFl1 16s ease-in-out infinite alternate}
.lx-rib .r2{animation:lxFl2 20s ease-in-out infinite alternate}
.lx-rib .r3{animation:lxFl1 24s ease-in-out infinite alternate-reverse}
@keyframes lxFl1{from{transform:translate(-50px,16px) rotate(-3deg)}to{transform:translate(50px,-18px) rotate(3deg)}}
@keyframes lxFl2{from{transform:translate(34px,-12px) rotate(2deg)}to{transform:translate(-40px,20px) rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.lx-rib g,.lx-mqt{animation:none!important}}

.lx-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:18px 32px}
.lx-logo{height:46px;width:auto}
.lx-clock{font-size:13px;color:#5d6276;font-variant-numeric:tabular-nums}

.lx-main{position:relative;z-index:1;flex:1;display:grid;grid-template-columns:minmax(0,420px) 260px;justify-content:center;align-items:center;gap:56px;padding:12px 24px 28px}
.lx-card{background:#fff;border:1px solid #e3e6ef;border-radius:18px;padding:30px 28px;box-shadow:0 18px 50px rgba(31,45,110,.10)}
.lx-card h1{margin:0;font-size:24px;font-weight:700}
.lx-sub{margin:6px 0 18px;color:#6b7086;font-size:13.5px}
.lx-alert{background:#fdeef0;color:#9b2d3f;border:1px solid #f6d6dc;border-radius:10px;padding:10px 12px;font-size:13.5px;margin-bottom:14px}
.lx-form{display:grid;gap:8px}
.lx-form label{font-size:13px;color:#5d6276;font-weight:600;margin-top:4px}
.lx-field{position:relative;display:flex;align-items:center}
.lx-field>svg{position:absolute;right:12px;width:18px;height:18px;fill:none;stroke:#9aa0b4;stroke-width:1.8;pointer-events:none}
.lx-field input{width:100%;height:48px;border:1.5px solid #dfe3ee;border-radius:12px;padding:0 42px;font:inherit;font-size:15.5px;background:#fbfcff;color:inherit;transition:border-color .15s,box-shadow .15s}
.lx-field input:focus{outline:0;border-color:#2f45b5;box-shadow:0 0 0 4px rgba(47,69,181,.12);background:#fff}
.lx-eye{position:absolute;left:8px;width:34px;height:34px;border:0;background:transparent;border-radius:8px;cursor:pointer;display:grid;place-items:center}
.lx-eye svg{width:18px;height:18px;fill:none;stroke:#7c8297;stroke-width:1.8}
.lx-eye:hover{background:#eef1fb}
.lx-submit{margin-top:14px;height:50px;border:0;border-radius:12px;background:#2f45b5;color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:background .15s,transform .1s}
.lx-submit:hover{background:#26369a}.lx-submit:active{transform:scale(.99)}
.lx-submit:disabled{opacity:.75;cursor:progress}
.lx-note{margin:14px 0 0;color:#8a8fa3;font-size:12px;text-align:center}

/* جهاز الدفع */
.lx-dev{position:relative;width:260px;height:430px}
.lx-dev>svg{width:100%;height:100%;filter:drop-shadow(0 22px 30px rgba(31,45,110,.18))}
.lx-scr{position:absolute;left:23.5%;top:31.5%;width:54%;height:48%;background:#fff;border-radius:5px;overflow:hidden}
.lx-scr .st{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding:8px;color:#2c2c2a;font-size:12px}
.lx-scr[data-state="idle"] .st-idle,.lx-scr[data-state="typing"] .st-typing,.lx-scr[data-state="busy"] .st-busy,.lx-scr[data-state="ok"] .st-ok,.lx-scr[data-state="rejected"] .st-rejected,.lx-scr[data-state="down"] .st-down{display:flex;animation:lxIn .25s ease-out}
@keyframes lxIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.lx-scr b{font-size:13.5px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lx-scr small{color:#888780;font-size:10.5px}
.lx-mada{width:78px;height:auto}
.lx-mini{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center}
.lx-mini img{height:15px;width:auto;max-width:34px;object-fit:contain}
#lxScrPass{letter-spacing:3px;min-height:14px}
.lx-rp{position:relative;width:46px;height:30px}
.lx-rp em{position:absolute;inset:7px 15px;border-radius:50%;border:2px solid #378add;opacity:0;animation:lxRip 1.2s infinite}
.lx-rp em:nth-child(2){animation-delay:.3s}.lx-rp em:nth-child(3){animation-delay:.6s}
@keyframes lxRip{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(2.6)}}
.lx-dots{display:flex;gap:6px}
.lx-dots s{width:9px;height:9px;border-radius:50%;background:#d3d1c7;text-decoration:none;transition:background .2s}
.lx-dots s.on{background:#639922}.lx-dots.bad s{background:#e24b4a}
.lx-ok,.lx-bad{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:700}
.lx-ok{background:#eaf3de;color:#3b6d11}.st-ok b{color:#27500a}
.lx-bad{background:#fcebeb;color:#a32d2d}.st-rejected b,.st-down b{color:#a32d2d}
.lx-paper{position:absolute;left:24%;width:52%;top:6.5%;height:0;background:#fff;border:1px solid #d3d1c7;border-bottom:0;overflow:hidden;transition:height .9s ease-out,top .9s ease-out;font-size:10.5px;color:#2c2c2a;padding:0 7px;z-index:2;display:flex;flex-direction:column;gap:2px}
.lx-paper b{text-align:center;margin-top:6px}.lx-paper i{border-top:1px dashed #b4b2a9;margin:3px 0}
.lx-paper.out{height:96px;top:-17%}
.lx-shake{animation:lxSh .4s}
@keyframes lxSh{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.mc{display:inline-flex;align-items:center}.mc i{display:block;width:13px;height:13px;border-radius:50%;background:#eb001b}.mc i+i{background:#f79e1b;margin-right:-5px;opacity:.9}

/* شريط شعارات الدفع */
.lx-mq{position:relative;z-index:1;overflow:hidden;border-top:1px solid #e3e6ef;background:rgba(255,255,255,.85);padding:12px 0}
.lx-mqt{display:flex;gap:30px;width:max-content;animation:lxMq 40s linear infinite}
@keyframes lxMq{from{transform:translateX(0)}to{transform:translateX(50%)}}
.lx-lg{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:1px solid #e3e6ef;border-radius:10px;background:#fff;font-size:13px;font-weight:600;color:#3a3f52;white-space:nowrap}
.lx-lg img{height:18px;width:auto;max-width:44px;object-fit:contain}

@media (max-width:860px){
  .lx-top{padding:14px 18px}.lx-logo{height:38px}
  .lx-main{grid-template-columns:minmax(0,440px);gap:0;padding:0 16px 20px}
  .lx-dev{order:-1;justify-self:center;width:180px;height:298px;margin-bottom:-6px}
  .lx-card{padding:24px 20px}
}
@media (max-width:420px){.lx-clock{display:none}.lx-dev{width:150px;height:248px}}

/* مراجعة 2: شاشات كبيرة، شاشة الجهاز، الشعار، التذييل */
.lx-clock{color:#4b5065}
.lx-sbar{position:absolute;top:0;left:0;right:0;height:16px;display:flex;justify-content:space-between;align-items:center;padding:0 7px;font-size:9.5px;color:#6b6a66;background:#f4f3ef;border-bottom:1px solid #ebe9e2;z-index:1;direction:ltr}
.lx-sig{display:inline-flex;align-items:flex-end;gap:1.5px}.lx-sig i{display:block;width:2.5px;background:#6b6a66;border-radius:1px}.lx-sig i:nth-child(1){height:4px}.lx-sig i:nth-child(2){height:6px}.lx-sig i:nth-child(3){height:8px}
.lx-sig b{display:block;width:13px;height:7px;border:1px solid #6b6a66;border-radius:2px;margin-left:4px;position:relative}.lx-sig b::after{content:"";position:absolute;inset:1px 3px 1px 1px;background:#639922;border-radius:1px}
.lx-scr .st{top:16px}
.lx-scr::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 38%);z-index:2}
.lx-mada{width:100px}
.lx-mini{gap:8px}.lx-mini img{height:19px;max-width:42px}
.lx-scr small{font-size:11px}
.lx-lg img.wide{height:24px;max-width:78px}
.lx-foot{position:relative;z-index:1;text-align:center;font-size:12px;color:#8a8fa3;padding:8px 16px 12px;background:rgba(255,255,255,.85)}
@media (min-width:1500px){
  .lx-top{padding:22px 44px}.lx-logo{height:58px}.lx-clock{font-size:14px}
  .lx-main{grid-template-columns:minmax(0,470px) 330px;gap:84px}
  .lx-card{padding:38px 36px}.lx-card h1{font-size:28px}.lx-sub{font-size:14.5px}
  .lx-field input{height:54px;font-size:16.5px}.lx-submit{height:56px;font-size:17px}
  .lx-dev{width:330px;height:546px}
  .lx-scr .st{font-size:13.5px}.lx-scr b{font-size:16px}.lx-scr small{font-size:12.5px}
  .lx-mada{width:124px}.lx-mini img{height:23px;max-width:50px}
  .lx-sbar{height:20px;font-size:11px}.lx-scr .st{top:20px}
  .lx-paper{font-size:12.5px}.lx-paper.out{height:118px}
}
.lx-mini{flex-wrap:nowrap}.lx-mini img{max-width:36px;height:18px}
@media (min-width:1500px){.lx-mini img{height:21px;max-width:44px}}
@media (max-width:860px){.lx-mada{width:62px}.lx-mini{gap:5px}.lx-mini img{height:12px;max-width:26px}.lx-mini .mc i{width:10px;height:10px}.lx-scr small{font-size:9.5px}}
@media (max-width:420px){.lx-mada{width:52px}.lx-mini img{height:10px;max-width:22px}}

/* مراجعة 3: العنوان والشارات فوق البطاقة، ونهاية البطاقة تقابل نهاية الجهاز */
.lx-main{align-items:end}
.lx-col{display:flex;flex-direction:column;gap:22px;min-width:0}
.lx-hero{padding:0 4px}
.lx-kicker{margin:0 0 8px;font-size:13px;color:#6b7086;font-weight:600}
.lx-head{margin:0;font-size:34px;line-height:1.4;font-weight:700;color:#1b1f2e;min-height:2.8em}
.lx-head .ac{color:#2f45b5}
.lx-caret{display:inline-block;width:3px;height:.95em;background:#f28c28;border-radius:2px;margin-right:4px;vertical-align:-.1em;animation:lxBlink 1s steps(1) infinite}
@keyframes lxBlink{50%{opacity:0}}
.lx-badges{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;min-height:38px}
.lx-badges li{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:1px solid #e3e6ef;border-radius:999px;background:rgba(255,255,255,.9);font-size:13.5px;font-weight:600;color:#3a3f52;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.lx-badges li.on{opacity:1;transform:none}
.lx-badges svg{width:18px;height:18px;fill:none;stroke:#2f45b5;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:1500px){.lx-head{font-size:42px}.lx-kicker{font-size:14px}.lx-badges li{height:40px;font-size:14.5px}}
@media (max-width:860px){.lx-main{align-items:start}.lx-col{gap:16px}.lx-head{font-size:24px}.lx-hero{text-align:center}.lx-badges{justify-content:center}.lx-kicker{font-size:12px}}
@media (prefers-reduced-motion:reduce){.lx-caret{display:none}}
/* جسم الجهاز ينتهي قبل أسفل الرسم بـ 12/380 من ارتفاعه: نعوّضها لتتطابق نهاية البطاقة مع نهاية الجهاز */
.lx-dev{margin-bottom:-14px}
@media (min-width:1500px){.lx-dev{margin-bottom:-17px}}
@media (max-width:860px){.lx-dev{margin-bottom:-6px}}