/* أنماط على تكّة المشتركة لكل الصفحات */
/* هوية على تكّة: نفس ألوان لوحة الإدارة */
:root {
  --bg:#0a0d14; --bg2:#0f1520; --card:#131a26; --line:#222e42;
  --text:#e8eef8; --sub:#9fb0c8; --accent:#00e5ff; --ok:#00d26a; --warn:#ffb020; --bad:#ff3b5c;
  --ar:0,229,255;           /* لون القسم بصيغة RGB لاستخدامه مع الشفافية */
  --on-accent:#001318;      /* لون النص فوق لون القسم */
  --r:18px;
}
/* كل قسم موقع مصغّر بلونه: الأجهزة سماوي، الطباعة برتقالي، السمارت هوم أخضر، الإكسسوارات بنفسجي */
.t-print { --accent:#ff8a3d; --ar:255,138,61; --on-accent:#1f0d00; }
.t-smart { --accent:#2ee59d; --ar:46,229,157; --on-accent:#00170c; }
.t-acc   { --accent:#b18cff; --ar:177,140,255; --on-accent:#14082b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
[id] { scroll-margin-top:84px; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif; font-size:16px; line-height:1.6; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
.wrap { max-width:1180px; margin:0 auto; padding:0 20px; }
.num { font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate; }

/* الشريط العلوي التفاعلي — يُبنى من js/site.js */
.hdr { position:sticky; top:0; z-index:40; background:rgba(10,13,20,.72); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom:1px solid transparent; transition:background .3s, border-color .3s; }
.hdr.compact { background:rgba(10,13,20,.92); border-bottom-color:var(--line); }
.hdr .wrap { display:flex; align-items:center; gap:16px; height:72px; transition:height .3s; }
.hdr.compact .wrap { height:60px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand img, .brand .mk { width:42px; height:42px; display:block; transition:width .3s, height .3s; }
.hdr.compact .brand .mk { width:36px; height:36px; }
.brand b { display:block; font-size:19px; line-height:1.1; }
.brand small { display:block; font-size:10.5px; letter-spacing:3.5px; color:var(--accent); direction:ltr; text-align:end; }

/* اسم القسم بجانب الشعار (هوية الموقع المصغّر) */
.hdr .sub { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:13px; font-weight:700; color:var(--accent); background:rgba(var(--ar),.1); border:1px solid rgba(var(--ar),.35); white-space:nowrap; animation:subIn .6s cubic-bezier(.3,1.5,.5,1) both .3s; }
.hdr .sub::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 8px var(--accent); }
.hdr .sub .short { display:none; }
@keyframes subIn { from { opacity:0; transform:translateX(12px) scale(.9); } }
@media (max-width:900px) { .hdr .sub .full { display:none; } .hdr .sub .short { display:inline; } .brand small { display:none; } .hdr .wrap { gap:10px; } }
/* على الشاشات الصغيرة جداً: الشعار + اسم القسم يكفيان */
@media (max-width:520px) { .hdr .wrap:has(.sub) .brand > span:last-child { display:none; } .hdr .sub { padding:4px 10px; font-size:12.5px; } .hdr .wa { padding:10px 12px; } }

/* القائمة: كبسولة فيها مؤشر ينزلق كإبرة العداد */
.nav { position:relative; display:flex; gap:2px; margin-inline-start:auto; padding:5px; border-radius:999px; background:rgba(19,26,38,.7); border:1px solid var(--line); overflow:hidden; isolation:isolate; }
.nav::before { content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(140px circle at var(--gx,-200px) 50%, rgba(var(--ar),.16), transparent 70%); transition:opacity .3s; }
.nav .ind { position:absolute; z-index:-1; top:5px; bottom:5px; left:0; width:0; border-radius:999px; background:linear-gradient(180deg, rgba(var(--ar),.22), rgba(var(--ar),.08)); border:1px solid rgba(var(--ar),.45); box-shadow:0 0 18px rgba(var(--ar),.25), inset 0 0 12px rgba(var(--ar),.12); opacity:0; transition:transform .45s cubic-bezier(.3,1.5,.5,1), width .45s cubic-bezier(.3,1.5,.5,1), opacity .25s; }
.nav .ind::after { content:""; position:absolute; left:50%; bottom:-1px; width:18px; height:3px; margin-left:-9px; border-radius:3px 3px 0 0; background:var(--accent); box-shadow:0 0 10px var(--accent); }
.nav.has .ind { opacity:1; }
.nav a { position:relative; display:flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; color:var(--sub); font-size:14.5px; white-space:nowrap; transition:color .25s; }
.nav a:hover, .nav a.on, .nav a:focus-visible { color:var(--text); outline:none; }
.nav a.on { font-weight:700; }
.nav a i { display:grid; place-items:center; width:20px; height:20px; }
.nav a svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.nav a.on svg, .nav a:hover svg { stroke:var(--accent); filter:drop-shadow(0 0 4px rgba(var(--ar),.6)); }
/* حركات الأيقونات */
.nav .nd { transform-origin:12px 16px; transform:rotate(-20deg); transition:transform .5s cubic-bezier(.3,1.6,.5,1); }
.nav a:hover .nd, .nav a.on .nd { transform:rotate(38deg); }
.nav a:hover .cube { animation:navSpin .9s cubic-bezier(.4,0,.2,1); }
@keyframes navSpin { 50% { transform:scaleX(-1) translateY(-2px); } }
.nav .cube { transform-origin:12px 12px; }
.nav .win { fill:transparent; transition:fill .3s; }
.nav a:hover .win, .nav a.on .win { fill:#ffd166; stroke:#ffd166; }
.nav a:hover .carb { animation:navDrive .7s ease-in-out; }
@keyframes navDrive { 30% { transform:translateX(-3px); } 70% { transform:translateX(3px); } }
.nav a:hover .wh { animation:navWheel .7s linear; transform-box:fill-box; transform-origin:center; }
@keyframes navWheel { to { transform:rotate(360deg); } }

/* الشاشات المتوسطة: أيقونات فقط، والاسم يتمدد للقسم النشط أو عند المرور */
.nav a > .short { display:none; }
.nav a > .full { display:inline-block; max-width:220px; overflow:hidden; transition:max-width .4s cubic-bezier(.3,1.2,.5,1), opacity .3s; }
@media (min-width:901px) and (max-width:1180px) {
  .nav a { padding:8px 11px; gap:0; }
  .nav a > .full { max-width:0; opacity:0; }
  .nav a.on, .nav a:hover, .nav a:focus-visible { gap:7px; }
  .nav a.on > .full, .nav a:hover > .full, .nav a:focus-visible > .full { max-width:170px; opacity:1; }
}

/* مفتاح اللغة: مقبض ينزلق */
.lsw { direction:rtl; position:relative; display:flex; background:rgba(19,26,38,.7); border:1px solid var(--line); border-radius:999px; padding:3px; font-size:12.5px; font-weight:700; color:var(--sub); }
.lsw span { position:relative; z-index:1; width:34px; height:26px; display:grid; place-items:center; transition:color .3s; }
.lsw i { position:absolute; top:3px; bottom:3px; right:3px; width:34px; border-radius:999px; background:var(--accent); box-shadow:0 0 12px rgba(var(--ar),.45); transition:right .35s cubic-bezier(.3,1.5,.5,1); }
.lsw span:first-child { color:var(--on-accent); }
.lsw.en i { right:37px; }
.lsw.en span:first-child { color:var(--sub); } .lsw.en span:last-child { color:var(--on-accent); }
.lsw:hover { border-color:rgba(var(--ar),.5); }

.btn { display:inline-flex; align-items:center; gap:8px; border:0; border-radius:12px; padding:11px 20px; font-weight:700; font-size:15px; transition:transform .15s, box-shadow .2s; }
.btn:hover { transform:translateY(-2px); }
.btn.pri { background:var(--accent); color:var(--on-accent); box-shadow:0 8px 28px rgba(var(--ar),.25); }
.btn.ghost { background:var(--card); border:1px solid var(--line); }
.btn.wa { background:#25d366; color:#04210f; }
.btn svg { width:18px; height:18px; }
/* زر واتساب في الشريط: ينجذب للمؤشر + حلقة نبض */
.hdr .wa { position:relative; transition:transform .25s cubic-bezier(.3,1.5,.5,1), box-shadow .2s; }
.hdr .wa::after { content:""; position:absolute; inset:0; border-radius:inherit; border:2px solid #25d366; animation:waPulse 2.6s ease-out infinite; pointer-events:none; }
@keyframes waPulse { 0% { opacity:.7; transform:scale(1); } 70%,100% { opacity:0; transform:scale(1.25,1.5); } }
.hdr .wa:hover { box-shadow:0 8px 26px rgba(37,211,102,.4); }
.hdr .wa .live { width:7px; height:7px; border-radius:50%; background:#04210f; box-shadow:0 0 0 2px rgba(4,33,15,.25); }

/* شريط التقدّم: تدريج عداد يمتلئ مع التمرير */
.prog { position:absolute; inset-inline:0; bottom:-1px; height:3px; pointer-events:none;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 10px); mask:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 10px); }
.prog i { position:absolute; inset-block:0; inset-inline-start:0; width:0; background:linear-gradient(var(--pd,90deg), var(--ok), var(--accent) 70%, var(--bad)); box-shadow:0 0 8px var(--accent); }
[dir=rtl] .prog i { --pd:270deg; }

footer nav { display:flex; gap:4px; }
footer nav a { padding:7px 13px; border-radius:20px; color:var(--sub); font-size:14.5px; transition:.2s; }
footer nav a:hover { color:var(--text); background:var(--card); }

/* الجوال: القائمة تصبح شريطاً سفلياً عائماً */
@media (max-width:900px) {
  /* backdrop-filter يجعل الشريط حاوية للعناصر الثابتة؛ نلغيه هنا ليثبت الشريط السفلي في أسفل الشاشة */
  .hdr, .hdr.compact { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(10,13,20,.96); }
  .hdr .wa span { display:none; }
  .nav a > .full { display:none; }
  .nav a { min-width:0; }
  .nav a > .short { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .lsw { margin-inline-start:auto; }
  .nav { position:fixed; z-index:45; inset-inline:12px; bottom:12px; margin:0; justify-content:space-around; padding:6px; background:rgba(15,21,32,.88); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 14px 40px rgba(0,0,0,.55); }
  .nav a { flex-direction:column; gap:2px; padding:6px 4px; font-size:10.5px; flex:1; justify-content:center; text-align:center; border-radius:18px; }
  .nav a i, .nav a svg { width:22px; height:22px; }
  .nav .ind { border-radius:18px; }
  body { padding-bottom:84px; }
  .fab { bottom:96px !important; }
}
@media (prefers-reduced-motion:reduce) { .hdr .wa::after { animation:none; } }

/* الأقسام */
section { padding:70px 0; }
.sec-h { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
.sec-h h2 { font-size:clamp(26px,3.4vw,38px); margin:0; line-height:1.2; }
.sec-h p { color:var(--sub); margin:6px 0 0; }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
@media (max-width:820px) { .grid { grid-template-columns:1fr; } }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px; position:relative; overflow:hidden; transition:border-color .25s, transform .25s; }
.card:hover { border-color:#33507a; }
.card::before { content:""; position:absolute; inset:0; background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%), rgba(var(--ar),.08), transparent 60%); pointer-events:none; }
.card .tag { font-size:12px; color:var(--accent); font-weight:700; letter-spacing:.5px; }
.card h3 { font-size:22px; margin:6px 0 6px; }
.card p { color:var(--sub); margin:0 0 18px; font-size:15px; }
.card .more { color:var(--accent); font-weight:700; font-size:14px; display:inline-flex; gap:6px; align-items:center; margin-top:16px; }
.card .more:hover { gap:10px; }
.play { background:var(--bg2); border:1px solid var(--line); border-radius:14px; padding:16px; min-height:190px; }

/* عناصر نماذج مشتركة */
.chip { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:6px 14px; font-size:13.5px; color:var(--sub); transition:.2s; }
.chip:hover { border-color:var(--accent); color:var(--text); }
.chip.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:700; }
label.f { display:block; font-size:13px; color:var(--sub); margin:0 0 4px; }
input[type=range] { width:100%; accent-color:var(--accent); }
select { width:100%; background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:8px 10px; font:inherit; font-size:14px; }
.price { display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); }
.price b { font-size:26px; color:var(--accent); }
/* الثقة */
.trust { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:820px) { .trust { grid-template-columns:1fr; } }
.trust .card { display:flex; gap:14px; align-items:flex-start; padding:20px; }
.trust .ic { width:44px; height:44px; border-radius:12px; background:rgba(var(--ar),.1); color:var(--accent); display:grid; place-items:center; flex:none; }
.trust .ic svg { width:22px; }
.trust h4 { margin:0 0 2px; font-size:16px; }
.trust p { margin:0; font-size:14px; }

footer { border-top:1px solid var(--line); padding:34px 0 90px; color:var(--sub); font-size:14px; }
footer .wrap { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
.fab { position:fixed; bottom:20px; inset-inline-end:20px; width:58px; height:58px; border-radius:50%; background:#25d366; display:grid; place-items:center; box-shadow:0 10px 30px rgba(37,211,102,.4); z-index:30; transition:transform .2s; }
.fab:hover { transform:scale(1.08); }
.fab svg { width:30px; fill:#fff; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s, transform .7s; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { *, .reveal { animation:none !important; transition:none !important; } .reveal { opacity:1; transform:none; } }

/* صفحات النصوص (الضمان، الخصوصية) */
.doc { max-width:820px; margin:0 auto; padding:48px 20px 30px; }
.doc h1 { font-size:clamp(30px,4vw,42px); margin:10px 0 4px; }
.doc .date { color:var(--sub); font-size:14px; margin:0 0 26px; }
.doc .card { margin-bottom:14px; }
.doc h2 { font-size:19px; margin:0 0 8px; display:flex; align-items:center; gap:10px; }
.doc h2 i { width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
.doc p, .doc li { color:var(--sub); font-size:15.5px; }
.doc p { margin:0 0 8px; }
.doc ul { margin:0; padding-inline-start:20px; }
.doc li { margin-bottom:4px; }
.doc b { color:var(--text); }
.doc a.l { color:var(--accent); }
.doc .no li::marker { color:var(--bad); }
.doc .yes li::marker { color:var(--ok); }

/* شارة صغيرة أعلى العناوين */
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--accent); border:1px solid rgba(var(--ar),.3); background:rgba(var(--ar),.06); padding:4px 12px; border-radius:20px; }
.eyebrow i { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 0 var(--ok); animation:ping 1.8s infinite; }
@keyframes ping { 70% { box-shadow:0 0 0 8px transparent; } }

/* شريط إعلان من لوحة الموقع */
.announce { background:linear-gradient(90deg, rgba(var(--ar),.18), rgba(var(--ar),.08)); border-bottom:1px solid rgba(var(--ar),.35); font-size:14px; }
.announce .wrap { display:flex; align-items:center; gap:10px; min-height:38px; }
.announce a { color:var(--accent); font-weight:700; }
.announce button { margin-inline-start:auto; background:none; border:0; color:var(--sub); font-size:20px; line-height:1; padding:4px 6px; }