/* 108 — الإصدار 2 */

/* شاشة الشعار المتحركة */
#spl{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  background:radial-gradient(circle at 50% 42%,#1B3E70 0%,#0C2443 52%,#061428 100%);color:#fff;transition:opacity .55s ease,transform .65s cubic-bezier(.6,0,.4,1)}
#spl.out{opacity:0;transform:scale(1.3);pointer-events:none}
html.spl-on,html.spl-on body{overflow:hidden}
.spl-in{position:relative;width:210px;height:210px;display:grid;place-items:center}
.spl-ring,.spl-ring2{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.spl-ring circle{fill:none;stroke:#E98A2B;stroke-width:5;stroke-linecap:round;stroke-dasharray:578;stroke-dashoffset:578;animation:splRing 1.1s .2s cubic-bezier(.65,0,.35,1) forwards}
.spl-ring2{animation:splSpin 6s linear infinite}
.spl-ring2 circle{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1.5;stroke-dasharray:4 9;opacity:0;animation:splFade .6s .9s forwards}
.spl-glow{position:absolute;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(246,169,76,.55),transparent 65%);opacity:0;animation:splGlow 1.8s .6s ease-out forwards}
.spl-logo,.spl-shine{position:absolute;width:136px;height:82px;-webkit-mask:url(/brand/logo.png) center/contain no-repeat;mask:url(/brand/logo.png) center/contain no-repeat}
.spl-logo{background:#fff;opacity:0;transform:scale(.35);filter:blur(10px);animation:splLogo .85s .5s cubic-bezier(.2,1.5,.4,1) forwards}
.spl-shine{background:linear-gradient(105deg,transparent 35%,rgba(255,206,140,1) 50%,transparent 65%);background-size:300% 100%;background-position:100% 0;opacity:0;animation:splShine 1.1s 1.3s ease-in-out forwards}
.spl-tag{text-align:center;opacity:0;transform:translateY(14px);animation:splUp .6s 1.15s ease-out forwards}
.spl-tag b{display:block;font:700 23px 'Readex Pro','IBM Plex Sans Arabic',sans-serif;letter-spacing:.3px}
.spl-tag small{color:rgba(255,255,255,.7);font-size:13.5px}
.spl-dots{display:flex;gap:7px;opacity:0;animation:splUp .4s 1.5s forwards}
.spl-dots i{width:7px;height:7px;border-radius:50%;background:#E98A2B;animation:splDot .9s infinite}
.spl-dots i:nth-child(2){animation-delay:.15s}.spl-dots i:nth-child(3){animation-delay:.3s}
@keyframes splRing{to{stroke-dashoffset:0}}
@keyframes splSpin{to{transform:rotate(270deg)}}
@keyframes splFade{to{opacity:1}}
@keyframes splGlow{0%{opacity:0;transform:scale(.4)}45%{opacity:1}100%{opacity:.6;transform:scale(1.15)}}
@keyframes splLogo{to{opacity:1;transform:none;filter:none}}
@keyframes splShine{0%{opacity:1;background-position:100% 0}100%{opacity:1;background-position:0 0}}
@keyframes splUp{to{opacity:1;transform:none}}
@keyframes splDot{50%{transform:translateY(-6px);opacity:.45}}

/* الشاشات الكبيرة: التطبيق بشكل طولي في المنتصف (تابلت، آيباد، كمبيوتر، تقسيم الشاشة) */
@media (min-width:600px){
  body{background:radial-gradient(circle at 15% 10%,rgba(233,138,43,.14),transparent 38%),radial-gradient(circle at 85% 90%,rgba(12,36,67,.12),transparent 42%),var(--bg-2)}
  .app{max-width:430px;margin:24px auto;min-height:calc(100vh - 48px);min-height:calc(100dvh - 48px);border-radius:40px;background:var(--bg);
    box-shadow:0 0 0 9px var(--sf),0 0 0 10px var(--dv),0 30px 80px rgba(12,36,67,.22);overflow:clip}
  .app::before{display:none}
  .tabbar{bottom:calc(36px + var(--safe-b));max-width:398px}
  .e108pn,.vf{max-width:430px}
  #spl .spl-in{transform:scale(1.15)}
}
@media (min-width:600px) and (max-height:700px){.app{margin:12px auto;min-height:calc(100dvh - 24px)}}

/* الرأس الجديد */
.hdr.h2{gap:8px;padding:8px 0 6px;min-height:54px}
.hdr.h2 .logo-mk{width:56px;height:33px}
.hdr.h2 .hi{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.hdr.h2 .hi small{font-size:11.5px;color:var(--mu)}
.hdr.h2 .hi b{font:700 17px var(--fh);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib.sm{width:38px;height:38px;border-radius:12px}
.hsr{display:flex;align-items:center;gap:6px}
.hsr input{width:0;opacity:0;padding:0;height:38px;border:1px solid transparent;border-radius:12px;background:var(--sf);color:var(--tx);font:inherit;font-size:14.5px;outline:0;
  transition:width .3s cubic-bezier(.2,.8,.2,1),opacity .2s,padding .3s}
.hdr.so .hi{display:none}
.hdr.so .hsr{flex:1}
.hdr.so .hsr input{width:100%;opacity:1;padding:0 12px;border-color:var(--or);box-shadow:0 0 0 3px var(--or-soft)}

/* أيقونات الخدمات أصغر */
.grid{gap:8px}
.svc{padding:9px 4px;gap:2px;border-radius:16px}
.svc::before{width:58px;height:58px;top:-16px;margin-left:-29px}
.svc b{font-size:13px}
.svc small{font-size:10px}
.sec{margin:22px 0 12px}

/* تبويب حسابي */
.tabbar{grid-template-columns:repeat(4,1fr)}
.tabbar button{font-size:11px}

/* شاشة الترحيب */
.wel{flex:1;display:flex;flex-direction:column;justify-content:center;padding:28px 20px calc(28px + var(--safe-b));text-align:center}
.wlogo{width:100px;height:100px;margin:0 auto 14px;border-radius:30px;background:linear-gradient(135deg,var(--navy-2),var(--navy));display:grid;place-items:center;box-shadow:0 16px 34px rgba(12,36,67,.3)}
.wlogo .logo-mk{width:66px;height:40px;background:#fff}
.wel h1{font:700 25px var(--fh);margin:6px 0 4px}
.wel>p{color:var(--mu);margin:0 0 18px;font-size:14.5px;line-height:1.75}
.wcard{text-align:right;background:var(--sf);border:1px solid var(--dv);border-radius:22px;padding:16px;box-shadow:var(--sh)}
.wcard .cta{margin-top:14px}
.wcard .cta.plain{margin-top:8px}
.wsw{display:block;width:100%;margin-top:10px;padding:8px;border:0;background:none;color:var(--mu);font:inherit;font-size:14px;cursor:pointer}
.wsw b{color:var(--or-ink)}
.wn{display:block;margin-top:8px;font-size:12px;color:var(--mu);text-align:center}
.e2toast{position:fixed;top:calc(14px + var(--safe-t));left:50%;transform:translate(-50%,-30px);opacity:0;z-index:9000;background:var(--navy);color:#fff;padding:11px 18px;border-radius:16px;font-weight:600;
  box-shadow:0 12px 30px rgba(12,36,67,.3);transition:.35s cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.e2toast.on{transform:translate(-50%,0);opacity:1}

/* حسابي */
.accd{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px;border-radius:20px;background:var(--sf);border:1px solid var(--dv);box-shadow:var(--sh)}
.accd .av{flex:none;width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--or-2),var(--or));color:#fff;display:grid;place-items:center;font:700 22px var(--fh)}
.accd b{display:block;font-size:16px}
.accd small{display:block;color:var(--mu)}
button.rowlink{width:100%;border:0;background:none;font:inherit;color:inherit;text-align:right;cursor:pointer}
.promo.ctp{width:100%;border:0;font:inherit;text-align:right;cursor:pointer;margin-bottom:10px;background:linear-gradient(135deg,var(--navy-2),var(--navy));color:#fff}
.promo.ctp small{color:rgba(255,255,255,.75)}

/* العنوان الوطني */
.nathint{display:block;margin-top:6px;font-size:12px;color:var(--mu);line-height:1.7}

/* الدفع */
.pbs{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0}
.pb{height:28px;padding:0 9px;border-radius:8px;display:inline-flex;align-items:center;gap:4px;font:800 12px/1 system-ui,-apple-system,sans-serif;background:#fff;border:1px solid #e3e3e3;color:#111;direction:ltr}
.pb.mada{color:#259BD6}.pb.mada i{font-style:normal;color:#84B740;font-weight:700}
.pb.visa{color:#1A1F71;font-style:italic;letter-spacing:.5px}
.pb.mc{gap:0}.pb.mc i{width:15px;height:15px;border-radius:50%;background:#EB001B}.pb.mc i+i{background:#F79E1B;margin-left:-6px;opacity:.9}
.pb.ap{background:#000;color:#fff;border-color:#000}
.pb.stc{background:#4F008C;color:#fff;border-color:#4F008C}
.pnote{font-size:12px;color:var(--mu);line-height:1.8;margin:10px 0 4px}
.pcancel{display:block;width:100%;margin-top:8px;padding:13px;border-radius:16px;border:1px solid var(--dv);background:transparent;color:inherit;font:600 15px var(--fb);cursor:pointer;box-sizing:border-box}
.pskel{padding:26px;text-align:center;color:var(--mu)}
.wa-mini.pay{background:linear-gradient(135deg,#F2A54A,#E58A2E);border:0;cursor:pointer;box-shadow:0 6px 14px rgba(229,138,46,.3);font-family:inherit}
.spin.dk{border-color:rgba(233,138,43,.3);border-top-color:var(--or)}
.mysr-form{margin-top:6px}

/* ورقة سفلية (احتياط إذا ما تحمّلت إضافات المواعيد) */
.e108sh{color:var(--tx);position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center}
.e108bk{position:absolute;inset:0;background:rgba(10,15,25,.45);opacity:0;transition:opacity .25s}
.e108pn{position:relative;width:100%;max-width:520px;background:var(--bg);color:var(--tx);border-radius:26px 26px 0 0;padding:10px 18px calc(18px + var(--safe-b));transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.9,.3,1);max-height:90vh;overflow:auto;box-sizing:border-box}
.e108sh.on .e108bk{opacity:1}.e108sh.on .e108pn{transform:none}
.e108gr{width:42px;height:5px;border-radius:3px;background:rgba(0,0,0,.15);margin:0 auto 12px}
.e108pn h3{font-size:18px;margin:4px 0 4px;text-align:center}
.e108sub{font-size:12.5px;color:var(--mu);text-align:center;margin-bottom:10px}
.e108ok{display:block;width:100%;padding:15px;border:0;border-radius:16px;background:linear-gradient(135deg,#F2A54A,#E58A2E);color:#fff;font-weight:700;font-size:16px;font-family:inherit;text-align:center;cursor:pointer;text-decoration:none;margin-top:6px;box-sizing:border-box}

/* عقود الصيانة */
.terms{margin:8px 0 10px;padding:0 20px 0 0;line-height:1.85;font-size:14px}
.terms li{margin-bottom:8px}
.ckrow{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;border:1.5px dashed var(--or);background:var(--or-soft);font-size:14px;line-height:1.7;cursor:pointer;margin-top:6px}
.ckrow.on{border-style:solid}
.ckrow input{width:20px;height:20px;accent-color:#E98A2B;flex:none;margin-top:3px}
.ckrow a{color:var(--or-ink);font-weight:600}
select.inp{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mu) 50%),linear-gradient(135deg,var(--mu) 50%,transparent 50%);background-position:18px 50%,13px 50%;background-size:5px 5px;background-repeat:no-repeat}

/* توقيع العميل على عقد الصيانة */
.sigpad{position:relative;height:150px;border:1.5px solid var(--dv);border-radius:14px;background:#fff;overflow:hidden}
.sigpad::after{content:'';position:absolute;left:20px;right:20px;bottom:36px;border-bottom:1.5px dashed #C9CFD8;pointer-events:none}
.sigpad canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;touch-action:none;cursor:crosshair}
.sigclr{position:absolute;top:8px;left:8px;z-index:2;height:30px;padding:0 12px;border:1px solid #D9DEE6;border-radius:10px;background:#fff;color:#5B6B85;font:inherit;font-size:13px;cursor:pointer}
.sigpad:not(.has) .sigclr{display:none}
.penbar{display:flex;align-items:center;gap:6px;margin:0 0 8px}
.penbar .pgap{flex:1}
.penbar .pw{display:grid;place-items:center;width:40px;height:32px;padding:0;border:1.5px solid #D9DEE6;border-radius:10px;background:#fff;cursor:pointer}
.penbar .pw i{display:block;width:20px;border-radius:3px}
.penbar .pw.on{border-color:var(--or);box-shadow:0 0 0 2px var(--or-soft)}
.penbar .pc{width:26px;height:26px;padding:0;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1.5px #D9DEE6;cursor:pointer}
.penbar .pc.on{box-shadow:0 0 0 2.5px var(--or)}
/* «طلب عقد صيانة» بخطوات (2026-11-05) */
.ctst{display:flex;margin:6px 0 4px;padding:14px 4px 12px;border-radius:18px;background:var(--sf);border:1px solid var(--dv)}
.ctst-i{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;opacity:.45}
.ctst-i::before{content:'';position:absolute;top:14px;inset-inline-start:calc(50% + 16px);inset-inline-end:calc(-50% + 16px);height:2px;border-radius:2px;background:var(--dv)}
.ctst-i:last-child::before{display:none}
.ctst-i.ok::before{background:#16A34A}
.ctst-d{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--bg-2);color:var(--mu);border:1.5px solid var(--dv)}
.ctst-i small{font-size:11px;line-height:1.3;color:var(--tx);font-weight:600}
.ctst-i.ok,.ctst-i.now{opacity:1}
.ctst-i.ok .ctst-d{background:#16A34A;border-color:#16A34A;color:#fff}
.ctst-i.now .ctst-d{background:var(--or);border-color:var(--or);color:#fff;box-shadow:0 0 0 4px var(--or-soft)}
.ctno{text-align:center;font-size:12.5px;color:var(--mu);margin:2px 0 10px}
.ctmsg{margin:0 0 10px;padding:10px 12px;border-radius:12px;background:#FEF2F2;color:#B91C1C;font-size:13px}
.ctdoc{position:relative;height:max(260px,calc(100vh - 480px));border:1px solid var(--dv);border-radius:16px;overflow:hidden;background:#fff}
.ctdoc iframe{position:absolute;top:0;right:0;border:0;width:100%;height:100%;transform-origin:top right;background:#fff}
.ctfull{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0;color:var(--or-ink);font-size:13.5px;font-weight:600;text-decoration:none}
.ctacts{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.ctagr{display:flex;align-items:center;gap:10px;width:100%;padding:13px 14px;border-radius:14px;border:1.5px solid var(--dv);background:var(--sf);color:var(--tx);font:inherit;font-size:15px;font-weight:600;cursor:pointer;text-align:start}
.ctagr .ctbx{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid #C9CFD8;display:grid;place-items:center;color:transparent;background:#fff}
.ctagr.on{border-color:#16A34A;background:#F0FDF4}
.ctagr.on .ctbx{background:#16A34A;border-color:#16A34A;color:#fff}
.ctacts .cta[disabled]{opacity:.45;pointer-events:none}
.ctcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px;border-radius:18px;border:1px solid var(--dv);background:var(--sf);text-align:center}
.ctcard b{font-size:16px}.ctcard small{color:var(--mu);font-size:13px}
.ctwait{border-color:#FCD9A8;background:#FFF8EE}
.ctok{border-color:#BBF7D0;background:#F0FDF4}
.ctstamp{width:120px;height:120px;object-fit:contain;transform:rotate(-8deg);margin-bottom:4px}
.ctinv{padding:16px;border-radius:18px;border:1px solid var(--dv);background:var(--sf)}
.ctinv-h{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;margin-bottom:10px;border-bottom:1px dashed var(--dv)}
.ctinv-h b{font-size:16px}.ctinv-h span{font-size:12.5px;color:var(--mu)}
.ctinv-r{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin-bottom:12px}
.ctplans{display:flex;flex-direction:column;gap:8px;margin:6px 0 12px}
.ctplan{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:12px 14px;border-radius:14px;border:1.5px solid var(--dv);background:#fff;color:var(--tx);font:inherit;cursor:pointer;text-align:start}
.ctplan b{font-size:14px}.ctplan span{font-size:14px;font-weight:700}
.ctplan.on{border-color:var(--or);background:var(--or-soft)}
.ctinv-t{display:flex;justify-content:space-between;align-items:center;padding:12px 0;margin-bottom:8px;border-top:1px dashed var(--dv);font-size:15px}
.ctinv-t b{font-size:18px}
.ctinv .cta{width:100%;margin-top:8px}
.ctlnk{border:0;background:none;color:var(--or-ink);font:inherit;font-weight:600;cursor:pointer}
.e108pn .ctsave{width:100%;margin-top:10px}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .ctplan,html:not([data-theme=light]) .ctagr .ctbx{background:var(--sf)}html:not([data-theme=light]) .ctwait{background:rgba(246,169,76,.1);border-color:rgba(246,169,76,.35)}html:not([data-theme=light]) .ctok,html:not([data-theme=light]) .ctagr.on{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.4)}html:not([data-theme=light]) .ctmsg{background:rgba(185,28,28,.15);color:#FCA5A5}}
/* «عقودي» (2026-11-07) */
.ctnew{margin:4px 0 14px}
.ctmy{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.ctmyc{background:var(--sf);border:1px solid var(--dv);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px}
.ctmy-h{display:flex;align-items:center;justify-content:space-between;gap:8px}.ctmy-h b{font-size:17px}
.ctmy-p{font-size:14px;color:var(--mu);margin-top:-6px}
.ctmyc .ctst{border:0;padding:4px 0;margin:0;background:none}
.ctmy-v{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:var(--mu);border-top:1px dashed var(--dv);padding-top:12px}.ctmy-v b{color:var(--tx);font-size:16px}
.ctmyc .cta{margin-top:0;height:48px;font-size:16px}
.ctmy0{align-items:center;text-align:center;color:var(--mu);padding:28px 16px}.ctmy0 b{color:var(--tx);font-size:15px}
.ctk{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 11px;white-space:nowrap}.ctk::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.ctk.k-review{background:#FCEFD9;color:#8A4B00}.ctk.k-pay{background:#E4ECFB;color:#1E40AF}.ctk.k-approve{background:#E2F1EE;color:#0F5E54}.ctk.k-active{background:#E3F2E7;color:#166534}.ctk.k-ended{background:#EDEAE4;color:#57514A}.ctk.k-cancel{background:#FBE9E7;color:#9F2A20}
.ctbtn2{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;border-radius:14px;border:1.5px solid var(--dv);background:var(--sf);color:var(--tx);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.ctlinks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}.ctlinks .ctbtn2{font-size:14px}
/* الخطوات الست (2026-11-08): حالات «بانتظار توقيعك» و«بانتظار موافقة 108»، وصفحة الترحيب بعد إرسال البيانات، و«تحديد الكل» */
.ctk.k-sign{background:#FFE7CC;color:#9A3412}.ctk.k-wait{background:#E2F1EE;color:#0F5E54}
.ctsent{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#16A34A;color:#fff;margin-bottom:4px}
.cthello h1{font-size:22px}.cthello p{margin:2px 0 6px;font-weight:600}
.chip.ctall{border-style:dashed}
#ct-other{margin-top:10px}
/* رسائل الترحيب والشكر (2026-11-09): صيغ عادل مع معلومات الطلب */
.cthello{justify-content:flex-start}.cthello .stage{width:150px;height:150px}.cthello .stage img{inset:10px;width:130px}
.cthello h1{font-size:22px;line-height:1.5}
.cthello .ctwel-a,.cthello .ctwel-b{font-size:14.5px;line-height:1.9;color:var(--tx);max-width:560px;margin:6px auto 0}
.ctwel-d{width:100%;max-width:560px;margin:14px auto 0;border:1px solid var(--dv);border-radius:16px;background:var(--sf);text-align:start;overflow:hidden}
.ctwel-r{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 14px;border-top:1px solid var(--dv);font-size:14px}
.ctwel-r:first-child{border-top:0}.ctwel-r span{color:var(--mu);flex:none}.ctwel-r b{font-weight:600;text-align:end;overflow-wrap:anywhere}
.ctwel-s{display:flex;flex-direction:column;gap:2px;margin-top:12px;font-size:14px;color:var(--mu)}.ctwel-s b{color:var(--tx);font-size:15px}
.ctwel{gap:8px}.ctwel p{margin:0;font-size:14px;line-height:1.8;color:var(--tx)}.ctwel .ctwel-d{margin:4px 0}.ctwel .ctbtn2{margin:4px 0}
.ctwel+.ctwait{margin-top:10px}
@media (min-width:1024px) and (max-height:860px){.cthello .stage{display:none}.cthello h1{margin-top:0}}