/* ============================================================
   DamriNet — هيدر موحّد لكل الصفحات (v2)
   - نفس الارتفاع/الخط/المسافات في الرئيسية والصفحات الداخلية ومعرض البرامج
   - إطار متوهّج يدور حول الشريط ويتغيّر لونه باستمرار
   يُحمَّل آخر شيء؛ تخصيص (html body #dn) يغلب damrinet.css و dn-enhance.
   ============================================================ */

@property --dn-ang { syntax:"<angle>"; inherits:false; initial-value:0deg; }

/* ---------- الحاوية: نفس الموضع في كل الصفحات ---------- */
html body #dn header#hdr,
html body #dn > header{
  position:sticky !important; top:0 !important; z-index:1000 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 16px !important; margin:0 !important; width:auto !important;
}

/* ---------- الشريط ---------- */
html body #dn .bar{
  position:relative !important;
  isolation:isolate;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) auto !important;
  align-items:center !important;
  column-gap:14px !important;
  width:100% !important;
  max-width:1480px !important;
  height:64px !important; min-height:64px !important;
  margin:12px auto !important;
  padding:0 14px !important;
  box-sizing:border-box !important;
  border-radius:18px !important;
  border:1px solid transparent !important;
  overflow:visible !important;
  font-family:Cairo,"Segoe UI",Tahoma,sans-serif !important;
  animation:dnBarGlow 8s linear infinite;
}
html body #dn .bar *{ font-family:Cairo,"Segoe UI",Tahoma,sans-serif !important; }

/* الإطار الملوّن الدوّار */
html body #dn .bar::before{
  content:""; position:absolute; inset:-1.5px; border-radius:inherit; padding:1.5px;
  background:conic-gradient(from var(--dn-ang),
      #22e07a, #35e6d8, #4fa8ff, #7c86ff, #b07cff, #ff6ec7, #ffb347, #22e07a);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:dnSpin 6s linear infinite;
  pointer-events:none; z-index:-1;
}
@keyframes dnSpin{ to{ --dn-ang:360deg; } }
@keyframes dnBarGlow{
  0%  { box-shadow:0 10px 34px -18px rgba(0,0,0,.55), 0 0 22px -8px rgba(34,224,122,.55); }
  25% { box-shadow:0 10px 34px -18px rgba(0,0,0,.55), 0 0 22px -8px rgba(53,230,216,.55); }
  50% { box-shadow:0 10px 34px -18px rgba(0,0,0,.55), 0 0 22px -8px rgba(124,134,255,.6); }
  75% { box-shadow:0 10px 34px -18px rgba(0,0,0,.55), 0 0 22px -8px rgba(255,110,199,.5); }
  100%{ box-shadow:0 10px 34px -18px rgba(0,0,0,.55), 0 0 22px -8px rgba(34,224,122,.55); }
}
html body #dn header.scrolled .bar{ border-color:transparent !important; }

/* ---------- الشعار: بدون فراغ زائد ---------- */
html body #dn .bar > .brand{
  display:flex !important; align-items:center !important; justify-content:center !important;
  width:48px !important; height:48px !important; min-width:48px !important;
  margin:0 !important; padding:0 !important; gap:0 !important; line-height:0 !important;
}
html body #dn .bar > .brand .dn-logo-img{ height:46px !important; width:46px !important; max-width:46px !important; object-fit:contain !important; }

/* ---------- القائمة: في المنتصف بمسافات ثابتة ---------- */
html body #dn .bar > nav.main{
  display:flex !important; align-items:center !important;
  justify-content:center !important;
  gap:2px !important; margin:0 !important; padding:0 !important;
  min-width:0 !important; height:100%;
}
html body #dn .bar > nav.main .navitem{ flex:0 0 auto !important; position:relative; }
html body #dn .bar > nav.main .navitem > a{
  display:inline-flex !important; align-items:center !important; gap:4px !important;
  height:38px !important; padding:0 10px !important;
  font-size:14px !important; font-weight:600 !important; line-height:1 !important;
  letter-spacing:0 !important; white-space:nowrap !important;
  border-radius:10px !important;
}
html body #dn .bar > nav.main .navitem > a svg.caret{ width:10px !important; height:10px !important; margin:0 !important; }

/* ---------- الأزرار: نفس الارتفاع والخط ---------- */
html body #dn .bar > .actions{
  display:flex !important; align-items:center !important;
  gap:6px !important; margin:0 !important; flex-wrap:nowrap !important;
  justify-self:end !important;
}
html body #dn .bar > .actions > *{ flex:0 0 auto !important; white-space:nowrap !important; margin:0 !important; }
html body #dn .bar > .actions .btn,
html body #dn .bar > .actions .langbtn{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:7px !important;
  height:38px !important; padding:0 13px !important;
  font-size:13.5px !important; font-weight:700 !important; line-height:1 !important;
  border-radius:11px !important; box-sizing:border-box !important;
}
html body #dn .bar > .actions .seg{
  height:38px !important; padding:3px !important; box-sizing:border-box !important;
  display:flex !important; align-items:center !important; gap:2px !important; border-radius:11px !important;
}
html body #dn .bar > .actions .seg button{ width:30px !important; height:30px !important; border-radius:8px !important; }
html body #dn .bar > .actions .dn-out{ width:38px !important; padding:0 !important; }
html body #dn .bar > .actions .dn-uname{
  display:inline-block; max-width:110px; overflow:hidden; text-overflow:ellipsis; vertical-align:middle;
}
html body #dn .bar > .actions svg{ flex:0 0 auto; }

/* ---------- لابتوب ---------- */
@media (max-width:1440px){
  html body #dn .bar > nav.main .navitem > a{ padding:0 7px !important; font-size:13.5px !important; }
  html body #dn .bar > .actions .langbtn #langLabel{ display:none !important; }
  html body #dn .bar > .actions .langbtn{ width:38px !important; padding:0 !important; }
  html body #dn .bar > .actions .dn-acct > span[data-en]{ display:none !important; }
}
@media (max-width:1300px){
  html body #dn .bar > nav.main .navitem > a{ padding:0 5px !important; font-size:13px !important; }
  html body #dn .bar{ column-gap:10px !important; }
}
/* أقل من 1200: القائمة تختفي ويظهر البرغر (من damrinet.css) */
@media (max-width:1200px){
  html body #dn .bar{ grid-template-columns:auto 1fr auto !important; }
  html body #dn .bar > nav.main{ display:none !important; }
  html body #dn.navopen .bar > nav.main{ display:flex !important; height:auto; justify-content:flex-start !important; }
}
@media (max-width:560px){
  html body #dn header#hdr{ padding:0 10px !important; }
  html body #dn .bar{ height:58px !important; min-height:58px !important; padding:0 10px !important; }
  html body #dn .bar > .actions .seg{ display:none !important; }
}

@media (prefers-reduced-motion:reduce){
  html body #dn .bar, html body #dn .bar::before{ animation:none !important; }
}

/* ============================================================
   v3 — حاوية الشعار الدائرية + إزالة الفراغات + زخارف مضيئة
   ============================================================ */

/* إزالة الشريط/الحزام الداكن حول الهيدر في الصفحات الداخلية */
html body #dn.dn-chrome{ background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; min-height:0 !important; }
html body #dn.dn-chrome > .bg-fx, html body #dn.dn-chrome > .grid-lines{ display:none !important; }

/* طرف الشعار نصف دائرة */
html body #dn .bar{
  border-start-start-radius:40px !important;
  border-end-start-radius:40px !important;
  padding-inline-start:6px !important;
}

/* الدائرة الحاوية للشعار — أكبر من الشريط قليلاً وتبرز منه */
html body #dn .bar > .brand{
  position:relative !important;
  width:74px !important; height:74px !important; min-width:74px !important;
  border-radius:50% !important;
  margin-block:-5px !important;
  background:radial-gradient(circle at 50% 40%, rgba(34,224,122,.18), rgba(8,14,26,.96) 70%) !important;
  box-shadow:0 0 0 1px rgba(53,230,216,.25), 0 8px 26px -8px rgba(34,224,122,.55), inset 0 0 18px rgba(53,230,216,.12) !important;
  isolation:isolate;
}
html body #dn .bar > .brand::before{
  content:""; position:absolute; inset:-3px; border-radius:50%; padding:2px; z-index:-1;
  background:conic-gradient(from var(--dn-ang), #22e07a, #35e6d8, #7c86ff, #ff6ec7, #ffb347, #22e07a);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:dnSpin 4s linear infinite reverse;
}
html body #dn .bar > .brand .dn-logo-img{
  width:62px !important; height:62px !important; max-width:62px !important;
  border-radius:50% !important; object-fit:contain !important;
  filter:drop-shadow(0 0 6px rgba(34,224,122,.35)) !important;
  transition:transform .4s ease;
}
html body #dn .bar > .brand:hover .dn-logo-img{ transform:scale(1.06) rotate(-4deg); }
html body #dn.theme-light .bar > .brand,
html[data-dn-theme="light"] body #dn .bar > .brand{
  background:radial-gradient(circle at 50% 40%, #ffffff, #e9f7f1 75%) !important;
  box-shadow:0 0 0 1px rgba(34,224,122,.3), 0 8px 22px -10px rgba(34,224,122,.5) !important;
}

/* زخارف مضيئة تملأ الفراغ على جانبي القائمة */
html body #dn .bar > nav.main::before,
html body #dn .bar > nav.main::after{
  content:""; flex:0 0 auto; width:54px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, #22e07a, #35e6d8, transparent);
  box-shadow:0 0 10px rgba(53,230,216,.6);
  opacity:.75; animation:dnOrn 3.2s ease-in-out infinite;
}
html body #dn .bar > nav.main::before{ margin-inline-end:12px; }
html body #dn .bar > nav.main::after{ margin-inline-start:12px; animation-delay:1.6s; }
@keyframes dnOrn{
  0%,100%{ opacity:.35; transform:scaleX(.6); filter:hue-rotate(0deg); }
  50%    { opacity:1;   transform:scaleX(1);  filter:hue-rotate(90deg); }
}
@media (max-width:1440px){
  html body #dn .bar > nav.main::before, html body #dn .bar > nav.main::after{ width:26px; }
}
@media (max-width:1300px){
  html body #dn .bar > nav.main::before, html body #dn .bar > nav.main::after{ display:none; }
}
@media (max-width:560px){
  html body #dn .bar > .brand{ width:58px !important; height:58px !important; min-width:58px !important; margin-block:-2px !important; }
  html body #dn .bar > .brand .dn-logo-img{ width:48px !important; height:48px !important; max-width:48px !important; }
}

/* ============================================================
   ألوان صفحات الطلب: بديل البرتقالي (تُضاف الكلاسات من dn-polish.js)
   ============================================================ */
html body .dn-accent{ color:#35e6d8 !important; text-shadow:0 0 14px rgba(53,230,216,.22); }
html[data-dn-theme="light"] body .dn-accent{ color:#0f9384 !important; text-shadow:none; }
html body .dn-accent-bg{ background:linear-gradient(135deg,#22e07a,#35e6d8) !important; color:#03291a !important; border-color:transparent !important; }

/* ============================================================
   v4 — الشريط نفسه ينتهي بنصف دائرة والشعار يملأها بالكامل
   (logo.png عرضه 1700×600 والكرة في المنتصف → object-fit:cover يقصّها مربعاً)
   ============================================================ */
html body #dn .bar{
  height:72px !important; min-height:72px !important;
  padding-inline-start:0 !important;
  border-start-start-radius:36px !important;
  border-end-start-radius:36px !important;
}
html body #dn .bar > .brand{
  width:72px !important; height:72px !important; min-width:72px !important;
  margin:0 !important; padding:0 !important;
  border-radius:50% !important; overflow:hidden !important;
  background:radial-gradient(circle, rgba(34,224,122,.10), transparent 70%) !important;
  box-shadow:none !important;
}
html body #dn .bar > .brand::before{ display:none !important; }
html body #dn .bar > .brand .dn-logo-img{
  width:100% !important; height:100% !important; max-width:none !important; max-height:none !important;
  object-fit:cover !important; object-position:center !important;
  border-radius:50% !important;
  transform:scale(var(--dn-logo-zoom, 1)) !important;
  filter:drop-shadow(0 0 8px rgba(34,224,122,.35)) !important;
}
html body #dn .bar > .brand:hover .dn-logo-img{ transform:scale(calc(var(--dn-logo-zoom, 1) * 1.05)) rotate(-4deg) !important; }
html body #dn.theme-light .bar > .brand,
html[data-dn-theme="light"] body #dn .bar > .brand{ background:radial-gradient(circle, #ffffff, #eef8f3 75%) !important; box-shadow:none !important; }
@media (max-width:560px){
  html body #dn .bar{ height:60px !important; min-height:60px !important; border-start-start-radius:30px !important; border-end-start-radius:30px !important; }
  html body #dn .bar > .brand{ width:60px !important; height:60px !important; min-width:60px !important; margin:0 !important; }
  html body #dn .bar > .brand .dn-logo-img{ width:100% !important; height:100% !important; max-width:none !important; }
}

/* ============================================================
   v5 — شعار واضح جداً: نسخة «بادج» محسّنة (مقصوصة على الكرة،
   خلفية فاتحة متدرجة، تباين وحدّة أعلى) بدقة 2x/3x للشاشات الحديثة
   الملفات: img/logo-badge-144|216|432 (.webp + .png)
   ============================================================ */
html body #dn .bar > .brand{
  background-color:#f3fbf7 !important;
  background-image:url("../img/logo-badge-216.png") !important;
  background-image:image-set(
      url("../img/logo-badge-144.webp") type("image/webp") 1x,
      url("../img/logo-badge-216.webp") type("image/webp") 2x,
      url("../img/logo-badge-432.webp") type("image/webp") 3x,
      url("../img/logo-badge-216.png") 2x) !important;
  background-size:100% 100% !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  /* حلقة داخلية رفيعة تفصل البادج عن الشريط بشكل أنيق */
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.9), inset 0 0 0 3px rgba(34,224,122,.45), 0 0 18px -4px rgba(34,224,122,.55) !important;
  transition:transform .35s cubic-bezier(.2,1.3,.4,1), box-shadow .35s ease !important;
  transform-origin:center;
  z-index:5;
}
/* الصورة الأصلية تبقى للـ SEO والقارئ الآلي لكن مخفية بصرياً */
html body #dn .bar > .brand .dn-logo-img{ opacity:0 !important; filter:none !important; }
html body #dn .bar > .brand .dn-logo-fb{ display:none !important; }
/* تكبير احترافي عند المرور لرؤية التفاصيل */
html body #dn .bar > .brand:hover{
  transform:scale(1.45) !important;
  box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 3px rgba(34,224,122,.6), 0 12px 34px -6px rgba(34,224,122,.65), 0 0 0 4px rgba(34,224,122,.18) !important;
}
@media (max-width:560px){ html body #dn .bar > .brand:hover{ transform:scale(1.25) !important; } }
@media (prefers-reduced-motion:reduce){ html body #dn .bar > .brand:hover{ transform:none !important; } }

/* ============================================================
   v6 — إصلاح الوضع النهاري + الشعار يدور حول نفسه
   السبب: قاعدة الوضع الفاتح (v4) كانت تستخدم background مختصرة
   بتخصيص أعلى (#dn.theme-light) فتمسح صورة البادج.
   الحل: البادج صار طبقة مستقلة ::after تدور، والحاوية للحلقة فقط.
   ============================================================ */
html body #dn .bar > .brand,
html body #dn.theme-light .bar > .brand,
html body #dn.theme-glow .bar > .brand,
html[data-dn-theme] body #dn .bar > .brand{
  background:#f3fbf7 !important;           /* أرضية ثابتة خلف البادج */
  overflow:hidden !important;
}
html body #dn .bar > .brand::after,
html body #dn.theme-light .bar > .brand::after,
html[data-dn-theme] body #dn .bar > .brand::after{
  content:"" !important; position:absolute !important; inset:0 !important;
  display:block !important; border-radius:50% !important; z-index:1 !important;
  background-image:url("../img/logo-badge-216.png") !important;
  background-image:image-set(
      url("../img/logo-badge-144.webp") type("image/webp") 1x,
      url("../img/logo-badge-216.webp") type("image/webp") 2x,
      url("../img/logo-badge-432.webp") type("image/webp") 3x,
      url("../img/logo-badge-216.png") 2x) !important;
  background-size:100% 100% !important; background-repeat:no-repeat !important; background-position:center !important;
  animation:dnLogoSpin 28s linear infinite !important;
  will-change:transform;
}
@keyframes dnLogoSpin{ to{ transform:rotate(360deg); } }
/* يتوقف عن الدوران عند المرور ويكبر لرؤية التفاصيل */
html body #dn .bar > .brand:hover::after{ animation-play-state:paused !important; }

/* حلقة الإطار فوق البادج (لا تدور) */
html body #dn .bar > .brand{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.95), inset 0 0 0 3px rgba(34,224,122,.5), 0 0 18px -4px rgba(34,224,122,.55) !important;
}
html body #dn .bar > .brand .dn-logo-img{ position:relative; z-index:0; }

/* الوضع النهاري: ظل أوضح حتى تبرز الدائرة البيضاء على الشريط الأبيض */
html body #dn.theme-light .bar > .brand,
html[data-dn-theme="light"] body #dn .bar > .brand{
  box-shadow:inset 0 0 0 2px #ffffff, inset 0 0 0 3px rgba(22,163,74,.55), 0 4px 16px -4px rgba(22,120,60,.45), 0 0 0 1px rgba(22,163,74,.25) !important;
}
@media (prefers-reduced-motion:reduce){ html body #dn .bar > .brand::after{ animation:none !important; } }