/* ============================================================
   القائمة الجانبية (Drawer) - IFCORE
   كل الكلاسات بادئة بـ sm- عشان ما تتعارضش مع باقي ستايل الموقع
   ============================================================ */
:root{--sm-c:#00e5ff;--sm-b:#2979ff;--sm-gold:#ffb300;--sm-t:#eaf0ff;--sm-m:#8fa0c8;--sm-line:rgba(130,170,255,.16);--sm-ease:cubic-bezier(.22,.9,.24,1)}
body.sm-lock{overflow:hidden}
.sm-hx{clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.sm-i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- زرار القائمة (يظهر على التابلت والموبايل) ---------- */
.sm-burger{display:none;position:relative;width:46px;height:46px;padding:0;border:0;cursor:pointer;flex-shrink:0;color:var(--sm-t);
  background:linear-gradient(135deg,rgba(0,229,255,.25),rgba(41,121,255,.25));transition:.4s var(--sm-ease);-webkit-tap-highlight-color:transparent}
.sm-burger:active{transform:scale(.9)}
.sm-burger span{position:absolute;left:13px;right:13px;height:2.5px;border-radius:2px;background:currentColor;transition:.45s var(--sm-ease)}
.sm-burger span:nth-child(1){top:15px}.sm-burger span:nth-child(2){top:22px;right:19px}.sm-burger span:nth-child(3){top:29px}
.sm-burger[aria-expanded=true]{background:linear-gradient(135deg,var(--sm-gold),#ff7a00)}
.sm-burger[aria-expanded=true] span:nth-child(1){top:22px;transform:rotate(45deg)}
.sm-burger[aria-expanded=true] span:nth-child(2){opacity:0;transform:scaleX(0)}
.sm-burger[aria-expanded=true] span:nth-child(3){top:22px;transform:rotate(-45deg)}
@media (max-width:992px){.sm-burger{display:block}}

/* ---------- الخلفية المعتمة ---------- */
#smBack{position:fixed;inset:0;z-index:2400;background:rgba(2,4,14,.80);
  opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
#smBack.open{opacity:1;visibility:visible}

/* ---------- القائمة ---------- */
#smDrawer{position:fixed;transform:translate3d(104%,0,0);top:0;bottom:0;right:0;z-index:2500;width:min(88vw,370px);display:flex;flex-direction:column;overflow:hidden;
  font-family:'Cairo',Tahoma,sans-serif;color:var(--sm-t);direction:rtl;text-align:right;
  visibility:hidden;transition:transform .6s var(--sm-ease),visibility 0s .6s;
  border-radius:30px 0 0 30px;border-left:1px solid rgba(0,229,255,.35);
  background:linear-gradient(165deg,rgba(14,22,52,.97),rgba(6,9,26,.98));
  box-shadow:-20px 0 50px rgba(0,0,0,.55);contain:layout paint}
#smDrawer.open{transform:translate3d(0,0,0);visibility:visible;transition:transform .6s var(--sm-ease),visibility 0s}
#smDrawer *{box-sizing:border-box}
#smDrawer::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97'%3E%3Cpath d='M28 2l26 15v30L28 62 2 47V17zM28 62v30M2 47L0 48M54 47l2 1' fill='none' stroke='%23478bff' stroke-opacity='.22' stroke-width='1'/%3E%3C/svg%3E");}
.sm-glow{position:absolute;width:300px;height:300px;border-radius:50%;pointer-events:none}
.sm-g1{background:radial-gradient(circle,rgba(41,121,255,.38),transparent 68%);top:-110px;left:-100px}
.sm-g2{background:radial-gradient(circle,rgba(255,179,0,.22),transparent 68%);bottom:-130px;right:-110px}
.sm-in{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;padding:calc(18px + env(safe-area-inset-top,0px)) 18px calc(18px + env(safe-area-inset-bottom,0px))}

.sm-dh{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:10px}
.sm-logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;color:#fff;text-decoration:none;min-width:0}
.sm-logo img{max-height:36px;max-width:150px;width:auto;height:auto;display:block;object-fit:contain}
.sm-xb{width:42px;height:42px;padding:0;border:0;color:var(--sm-t);cursor:pointer;font-size:18px;display:grid;place-items:center;background:rgba(255,255,255,.08);transition:.4s var(--sm-ease);flex:none}
.sm-xb:hover,.sm-xb:active{background:var(--sm-gold);color:#221700;transform:rotate(90deg)}

.sm-user{display:flex;align-items:center;gap:14px;padding:14px;border-radius:20px;text-decoration:none;color:inherit;
  background:linear-gradient(135deg,rgba(0,229,255,.12),rgba(41,121,255,.08));border:1px solid var(--sm-line);margin-bottom:14px}
.sm-av{position:relative;width:62px;height:62px;flex:none;display:grid;place-items:center}
.sm-av::before{content:"";position:absolute;inset:0;background:conic-gradient(var(--sm-c),var(--sm-b),var(--sm-gold),var(--sm-c));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.sm-av b{position:relative;width:54px;height:54px;display:grid;place-items:center;background:#0a1230;font-weight:900;font-size:20px;direction:ltr}
.sm-user h3{font-size:16px;font-weight:800;margin:0;color:#fff}
.sm-user small{color:var(--sm-m);font-size:12.5px;display:flex;align-items:center;gap:6px;margin-top:2px}
.sm-user div{min-width:0}
.sm-user small.sm-tel{color:var(--sm-c);direction:ltr;justify-content:flex-end}

.sm-sr{position:relative;display:block;margin-bottom:12px}
.sm-sr input{width:100%;padding:12px 44px 12px 14px;border-radius:14px;border:1px solid var(--sm-line);background:rgba(0,0,0,.3);color:var(--sm-t);font:inherit;font-size:14px;outline:0;transition:.3s}
.sm-sr input:focus{border-color:var(--sm-c);box-shadow:0 0 0 4px rgba(0,229,255,.12)}
.sm-sr .sm-i{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--sm-m);font-size:18px;pointer-events:none}

.sm-nav{flex:1;overflow-y:auto;overscroll-behavior:contain;margin:0 -6px;padding:0 6px;scrollbar-width:none;display:block;position:static;background:none}
.sm-nav::-webkit-scrollbar{display:none}
.sm-it{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:11px 12px;margin-bottom:6px;border:0;border-radius:18px;background:transparent;color:var(--sm-t);font:inherit;text-align:right;cursor:pointer;text-decoration:none;overflow:hidden;transition:background .3s,transform .2s;min-height:0}
.sm-it::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;transition:.35s;background:radial-gradient(180px circle at var(--x,50%) var(--y,50%),rgba(0,229,255,.2),transparent 70%)}
.sm-it:hover::before,.sm-it:active::before{opacity:1}
.sm-it:active{transform:scale(.97)}
.sm-hi{position:relative;width:46px;height:46px;flex:none;display:grid;place-items:center;font-size:21px;background:linear-gradient(135deg,rgba(0,229,255,.28),rgba(41,121,255,.28));color:var(--sm-c);transition:.45s var(--sm-ease)}
.sm-it:hover .sm-hi{transform:rotate(60deg) scale(1.08);background:linear-gradient(135deg,var(--sm-c),var(--sm-b));color:#031018}
.sm-it:hover .sm-hi svg{transform:rotate(-60deg);transition:.45s var(--sm-ease)}
.sm-tx{flex:1;min-width:0}
.sm-tx b{display:block;font-size:15.5px;font-weight:700;color:#fff}
.sm-tx small{display:block;color:var(--sm-m);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-ch{color:var(--sm-m);font-size:16px;transition:.4s var(--sm-ease)}
.sm-bd{min-width:24px;height:22px;padding:0 7px;border-radius:11px;background:linear-gradient(135deg,var(--sm-gold),#ff7a00);color:#221700;font-size:12px;font-weight:900;display:grid;place-items:center}
.sm-it.sm-act{background:linear-gradient(270deg,rgba(0,229,255,.16),transparent)}
.sm-it.sm-act::after{content:"";position:absolute;right:0;top:20%;bottom:20%;width:4px;border-radius:4px 0 0 4px;background:linear-gradient(var(--sm-c),var(--sm-gold));box-shadow:0 0 14px var(--sm-c)}
.sm-it.sm-act .sm-hi{background:linear-gradient(135deg,var(--sm-c),var(--sm-b));color:#031018}

.sm-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--sm-ease)}
.sm-sub>div{overflow:hidden}
.sm-sub a{display:flex;align-items:center;gap:10px;padding:9px 20px 9px 10px;margin-right:36px;color:var(--sm-m);text-decoration:none;font-size:14px;border-right:2px solid var(--sm-line);transition:.3s}
.sm-sub a:hover,.sm-sub a.sm-act{color:var(--sm-c);border-color:var(--sm-c)}
.sm-sub a:hover{padding-right:16px}
.sm-sub a::before{content:"";width:6px;height:6px;flex:none;background:currentColor;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.sm-grp.open+.sm-sub{grid-template-rows:1fr}
.sm-grp.open .sm-ch{transform:rotate(-90deg);color:var(--sm-c)}
.sm-it.sm-hide,.sm-sub a.sm-hide{display:none}

.sm-ft{padding-top:12px;border-top:1px solid var(--sm-line)}
.sm-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border:0;border-radius:16px;font:inherit;font-weight:800;font-size:16px;color:#021018;cursor:pointer;text-decoration:none;
  background:linear-gradient(135deg,var(--sm-c),var(--sm-b));box-shadow:0 10px 30px rgba(0,229,255,.3)}
.sm-cta::after{content:"";position:absolute;top:0;left:0;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-120%) skewX(-20deg)}
#smDrawer.open .sm-cta::after{animation:smSw 3.2s 1s infinite}
@keyframes smSw{60%,100%{transform:translateX(320%) skewX(-20deg)}}
.sm-soc{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:14px}
.sm-soc a{width:42px;height:42px;display:grid;place-items:center;color:var(--sm-m);text-decoration:none;font-size:16px;background:rgba(255,255,255,.07);transition:.35s var(--sm-ease)}
.sm-soc a:hover{background:linear-gradient(135deg,var(--sm-c),var(--sm-gold));color:#021018;transform:translateY(-4px) rotate(10deg)}
.sm-ver{text-align:center;color:#5d6b92;font-size:11.5px;margin-top:10px}

/* ---------- ظهور العناصر تباعًا ---------- */
#smDrawer.open .sm-st{animation:smUp .7s var(--sm-ease) both;animation-delay:calc(.15s + var(--i,0) * .06s)}
@keyframes smUp{from{opacity:0;transform:translateX(34px)}}
@media (prefers-reduced-motion:reduce){
  #smDrawer,#smDrawer *,#smBack,.sm-burger,.sm-burger span{animation-duration:.01s!important;transition-duration:.01s!important}
}
@media (max-height:640px){.sm-user{display:none}}
@media (hover:none) and (pointer:coarse){.sm-burger{min-height:46px}}