/* ═══════════════════════════════════════════════════════
   Diyaa Tech — Guide chrome + theme normalisation
   يُحمَّل بعد ستايل الدليل نفسه، فبيغلب عند التساوي.

   جزءان:
   1) توحيد الثيم — يفرض نفس التوكنز على كل الأدلة
   2) الهيدر والفوتر — نسخة طبق الأصل من الموقع، بادئة dtsite-
      حتى ما تتعارض مع كلاسات الدليل الداخلية.
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1) توحيد الثيم عبر كل الأدلة
   ───────────────────────────────────────────── */
:root{
  /* الأساسيات — نفس قيم الهوية */
  --bg:#0D1117; --surface:#161B22; --surface-2:#1C2128; --surface2:#1C2128;
  --primary:#2DD4BF; --teal:#2DD4BF; --amber:#F59E0B;
  --text:#E6EDF3; --muted:#8B949E;
  --border:rgba(139,148,158,.13); --divider:rgba(139,148,158,.12);

  /* الألوان الدلالية — كانت بتختلف من دليل لدليل، هلق موحّدة */
  --success:#34D399; --green:#34D399;
  --success-dim:rgba(52,211,153,.08); --green-dim:rgba(52,211,153,.08); --green-bg:rgba(52,211,153,.08);
  --success-border:rgba(52,211,153,.22); --green-bd:rgba(52,211,153,.22); --green-border:rgba(52,211,153,.22);
  --danger:#F87171; --red:#F87171;
  --danger-bg:rgba(248,113,113,.08); --red-dim:rgba(248,113,113,.08); --red-bg:rgba(248,113,113,.08);
  --danger-border:rgba(248,113,113,.22); --red-bd:rgba(248,113,113,.22); --red-border:rgba(248,113,113,.22);
  --primary-dim:rgba(45,212,191,.10); --primary-bd:rgba(45,212,191,.22);
  --amber-dim:rgba(245,158,11,.08); --amber-bd:rgba(245,158,11,.20);

  /* الخطوط */
  --font-ar:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --font-head:'Cairo',sans-serif;
  --font-en:'Space Grotesk',sans-serif;
  --font-mono:'IBM Plex Mono','Courier New',monospace;
}

/* overflow-x:hidden في بعض الأدلة بيكسر position:sticky — clip ما بيكسره
   (بعض الأدلة تحطها على html، وبعضها على body — لازم نغطي الاتنين) */
html,body{overflow-x:clip}
/* المراسي ما تنطم تحت الهيدر الثابت */
[id]{scroll-margin-top:88px}

/* ─────────────────────────────────────────────
   1b) درع ضد محددات العناصر العارية
   بعض الأدلة فيها قواعد مثل  nav{position:fixed}  أو  footer{text-align:center}
   وهاي بتمسك الهيدر والفوتر المحقونين لأن المحدد على اسم العنصر مش الكلاس.
   البادئة dtsite- بتحمي من تعارض الكلاسات بس — مش من هيك قواعد.
   الحل: نصرّح صراحةً بكل خاصية ممكن يلمسوها (الكلاس أقوى من اسم العنصر).
   ───────────────────────────────────────────── */
.dtsite-bar,.dtsite-foot,.dtsite-bar-in,.dtsite-foot-in,.dtsite-nav{
  position:static;inset:auto;float:none;clear:none;
  transform:none;box-shadow:none;
  text-align:start;letter-spacing:normal;text-transform:none;
  width:auto;height:auto;min-height:0;max-height:none;
  opacity:1;visibility:visible;
  padding:0;margin:0;gap:0;
}
.dtsite-bar,.dtsite-foot{display:block;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.dtsite-bar,.dtsite-foot{font-family:var(--font-ar);direction:rtl;line-height:1.7;-webkit-font-smoothing:antialiased;font-size:15px;font-weight:400;color:var(--text)}
.dtsite-bar *,.dtsite-foot *{box-sizing:border-box}
.dtsite-bar a,.dtsite-foot a{text-decoration:none}
.dtsite-nav{
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border:0;border-radius:0;padding:0;margin:0;
  justify-content:flex-start;flex-wrap:nowrap;
}
.dtsite-foot{border-inline:0;border-bottom:0;border-radius:0}
.dtsite-bar{border-inline:0;border-top:0;border-radius:0}
/* الفوتر المحقون لازم يكون آخر شي بالصفحة */
.dtsite-foot{order:initial}

/* ─────────────────────────────────────────────
   2) الشريط العلوي — مطابق لـ .site-header
   ───────────────────────────────────────────── */
.dtsite-accent{height:2px;background:linear-gradient(90deg,transparent 0%,#2DD4BF 30%,#F59E0B 60%,transparent 100%)}

.dtsite-bar{position:sticky;top:0;z-index:200;background:rgba(13,17,23,.78);border-bottom:1px solid var(--border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.dtsite-bar-in{width:100%;max-width:1120px;margin:0 auto;padding:0 24px;height:72px;display:flex;align-items:center;gap:28px}

.dtsite-brand{display:flex;align-items:center;gap:12px;direction:ltr;flex-shrink:0}
.dtsite-brand svg{width:44px;height:44px;display:block;flex-shrink:0}
.dtsite-brand-ar{font-family:var(--font-head);font-weight:900;font-size:17px;color:var(--text);letter-spacing:-.01em;line-height:1}
.dtsite-brand-sep{width:1.5px;height:1em;background:linear-gradient(to bottom,transparent,#2DD4BF 30%,#2DD4BF 70%,transparent);flex-shrink:0}
.dtsite-brand-en{font-family:var(--font-en);font-weight:700;font-size:15px;color:#2DD4BF;letter-spacing:.02em}

.dtsite-nav{display:flex;gap:26px;margin-inline-start:auto;align-items:center}
.dtsite-nav a{font-size:14px;color:var(--muted);font-weight:500;transition:color .18s ease}
.dtsite-nav a:hover{color:var(--text)}
.dtsite-nav a.dtsite-active{color:#2DD4BF;font-weight:700}
.dtsite-nav a.dtsite-btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 24px;line-height:1.5;border-radius:100px;background:#2DD4BF;color:#06201C;font-family:var(--font-head);font-weight:700;font-size:15px;border:1px solid transparent;white-space:nowrap;flex-shrink:0;transition:transform .18s ease,box-shadow .18s ease}
.dtsite-nav a.dtsite-btn:hover{color:#06201C;transform:translateY(-2px);box-shadow:0 0 20px rgba(45,212,191,.30)}

.dtsite-toggle{display:none;margin-inline-start:auto;background:none;border:1px solid var(--border);border-radius:10px;width:42px;height:42px;cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.dtsite-toggle span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:transform .22s ease,opacity .22s ease}
.dtsite-toggle.dtsite-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.dtsite-toggle.dtsite-open span:nth-child(2){opacity:0}
.dtsite-toggle.dtsite-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ─────────────────────────────────────────────
   3) الفوتر — مطابق لـ .site-footer
   ───────────────────────────────────────────── */
.dtsite-foot{border-top:1px solid var(--border);padding:56px 0 32px;margin-top:64px;background:rgba(13,17,23,.5)}
.dtsite-foot-in{width:100%;max-width:1120px;margin:0 auto;padding:0 24px}

.dtsite-back{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 30px;margin-bottom:44px}
.dtsite-back p{margin:0;font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--text)}
.dtsite-back span{display:block;font-family:var(--font-ar);font-weight:400;font-size:13.5px;color:var(--muted);margin-top:5px}
.dtsite-cta-btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 28px;line-height:1.5;border-radius:100px;background:#2DD4BF;color:#06201C;font-family:var(--font-head);font-weight:700;font-size:15px;white-space:nowrap;flex-shrink:0;transition:transform .18s ease,box-shadow .18s ease}
.dtsite-cta-btn:hover{color:#06201C;transform:translateY(-2px);box-shadow:0 0 20px rgba(45,212,191,.30)}

.dtsite-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
.dtsite-grid h4{margin:0 0 16px;font-family:var(--font-head);font-size:13.5px;font-weight:700;color:var(--text)}
.dtsite-grid ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.dtsite-grid li a{font-size:13px;color:var(--muted)}
.dtsite-grid li a:hover{color:#2DD4BF}
.dtsite-fbrand p{font-size:13px;color:var(--muted);margin:14px 0 18px;max-width:32ch}
.dtsite-fbrand .dtsite-brand svg{width:36px;height:36px}
.dtsite-fbrand .dtsite-brand-ar{font-size:15px}
.dtsite-fbrand .dtsite-brand-en{font-size:13px}

.dtsite-social{display:flex;gap:12px;flex-wrap:wrap}
.dtsite-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:var(--surface);border:1px solid var(--border);color:var(--muted);transition:all .18s ease}
.dtsite-social a:hover{color:#2DD4BF;border-color:rgba(45,212,191,.25);transform:translateY(-3px);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.dtsite-social svg{width:19px;height:19px;display:block}

.dtsite-copy{border-top:1px solid var(--divider);padding-top:24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.dtsite-copy p{margin:0;font-size:12.5px;color:var(--muted)}
.dtsite-copy .dtsite-handle{font-family:var(--font-en);direction:ltr;margin-inline-start:auto}

/* ─────────────────────────────────────────────
   4) Responsive
   ───────────────────────────────────────────── */
@media (max-width:960px){
  .dtsite-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .dtsite-nav{position:fixed;top:72px;inset-inline:0;background:rgba(13,17,23,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);flex-direction:column;align-items:stretch;padding:24px;gap:4px;border-bottom:1px solid var(--border);display:none;z-index:199;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto}
  .dtsite-nav.dtsite-open{display:flex}
  .dtsite-nav a{padding:13px 8px;font-size:15px;border-radius:10px}
  .dtsite-nav a:hover{background:var(--surface)}
  .dtsite-nav a.dtsite-btn{margin-top:12px}
  .dtsite-toggle{display:flex}
}
@media (max-width:560px){
  .dtsite-bar-in{padding:0 20px;gap:16px}
  .dtsite-foot-in{padding:0 20px}
  .dtsite-grid{grid-template-columns:1fr;gap:28px}
  .dtsite-back{padding:22px}
}
@media print{
  .dtsite-bar,.dtsite-foot,.dtsite-accent{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  .dtsite-nav a.dtsite-btn:hover,.dtsite-cta-btn:hover,.dtsite-social a:hover{transform:none}
}