/* ══════════════════════════════════════════════════════════════
   بار المتابعة — a7.ae
   FOLLOW BAR — standalone stylesheet
   ══════════════════════════════════════════════════════════════
   المتغيّرات التي يحقنها الجافاسكربت على عنصر البار:
     --brand  لون العلامة الأساسي   (نص/ظل)
     --grad   تدرّج العلامة          (الأيقونة + التوهّج)
     --on     لون المحتوى فوق التدرّج (أبيض عادةً، غامق لسناب)
     --c1..c4 ألوان الحلقة الدوّارة الأربعة
   ══════════════════════════════════════════════════════════════ */

/* ── توكنات الصفحة — إن كان موقعك يعرّفها فلا تكرّرها ───────── */
:root{
  --fb-ink:#0a0e14;          /* لون النص */
  --fb-ink-2:#5b6673;        /* نص ثانوي */
  --fb-surf:#ffffff;         /* سطح البار الداخلي */
  --fb-blue:#1f6feb;         /* أزرق الموقع — زر المتابعة */
  --fb-blue-2:#1a5fd0;       /* أزرق أغمق — تحويم الزر */
  --fb-scrim:10,14,20;       /* RGB الظل والتعتيم */
  --fb-ease:cubic-bezier(.22,1,.36,1);
}
[data-theme="dark"]{
  --fb-ink:#eef2f7;
  --fb-ink-2:#9aa6b4;
  --fb-surf:#141a22;
  --fb-blue:#4b8dff;
  --fb-blue-2:#3d7ae8;
  --fb-scrim:0,0,0;
}

/* ══ ١) الغلاف — يحمل التوهّج خارج منطقة القصّ ════════════════ */
.fbar{
  position:relative;display:block;text-decoration:none;color:var(--fb-ink);
  transition:transform .2s var(--fb-ease);
}
/* التوهّج: هالة بلون العلامة أسفل البار، تنبض ببطء */
.fbar::before{
  content:"";position:absolute;left:6%;right:22%;bottom:-6px;height:18px;
  border-radius:50%;z-index:-1;
  background:var(--grad);filter:blur(12px);opacity:.4;
  animation:fbGlow 3.2s ease-in-out infinite alternate;
  transition:opacity .25s var(--fb-ease);
}
@keyframes fbGlow{to{opacity:.56}}
.fbar:hover{transform:translateY(-3px)}
.fbar:hover::before{opacity:.7}
.fbar:active{transform:translateY(-1px) scale(.995)}

/* ══ ٢) الحلقة — الإطار المتدرّج المتحرّك ════════════════════════
   الحيلة: طبقة مربّعة أكبر من البار تدور داخل حاوية مقصوصة،
   فيبدو الناتج كخطّ ملوّن يلتفّ حول الحافة.
   • display:block إلزامي — overflow لا يقصّ العناصر السطرية.
   • width:190% + aspect-ratio:1 يضمن تغطية الزوايا أثناء الدوران،
     وبدونه ينقطع الخط عند الأركان.
   • القناع القطري يجعل الإطار خفيفاً أعلى ويميناً وواضحاً أسفل ويساراً.
   ══════════════════════════════════════════════════════════════ */
.fbar .fring{
  display:block;position:relative;isolation:isolate;
  padding:1.4px;                 /* ← سمك الإطار */
  border-radius:30px;overflow:hidden;
  box-shadow:0 6px 16px -10px rgba(var(--fb-scrim),.35);
}
.fbar .fring::before{
  content:"";position:absolute;top:50%;left:50%;width:190%;aspect-ratio:1;
  background:conic-gradient(from 0deg,var(--c1),var(--c2),var(--c3),var(--c4),var(--c1));
  transform:translate(-50%,-50%);
  animation:fbSpin 4s linear infinite;
  -webkit-mask-image:linear-gradient(200deg,transparent 18%,rgba(0,0,0,.3) 42%,rgba(0,0,0,.85) 68%,#000 100%);
          mask-image:linear-gradient(200deg,transparent 18%,rgba(0,0,0,.3) 42%,rgba(0,0,0,.85) 68%,#000 100%);
}
@keyframes fbSpin{to{transform:translate(-50%,-50%) rotate(1turn)}}

/* ══ ٣) المحتوى — يجلس فوق الحلقة ويخفي وسطها ═════════════════
   border-radius هنا = استدارة الحلقة − السمك (30 − 1.4 = 28.6)
   ══════════════════════════════════════════════════════════════ */
.fbar .fbar-in{
  position:relative;z-index:2;display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;gap:14px;padding:12px 13px;
  border-radius:28.6px;background:var(--fb-surf);
}

/* أيقونة المنصّة */
.fbar .ic{
  width:54px;height:54px;border-radius:17px;display:grid;place-items:center;
  background:var(--grad);color:var(--on);
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--brand) 65%,transparent),
             inset 0 1px 0 rgba(255,255,255,.3);
}
.fbar .ic svg{width:29px;height:29px;fill:currentColor}
/* شعار مرفوع كصورة — بلا خلفية ولا حشو */
.fbar .ic.img{background:none;box-shadow:none;padding:0}
.fbar .ic.img img{
  display:block;width:100%;height:100%;object-fit:contain;border-radius:16px;
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--brand) 65%,transparent);
}

.fbar .sep{width:1.5px;height:38px;border-radius:9px;
  background:color-mix(in srgb,var(--fb-ink) 16%,transparent)}

.fbar .tx{min-width:0;text-align:start}
.fbar .t{display:block;font-size:15px;font-weight:700;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbar .h{display:block;font-size:14px;color:var(--fb-ink-2);
  direction:ltr;text-align:start;margin-top:1px}

/* زر المتابعة */
.fbar .go{
  display:flex;align-items:center;gap:7px;padding:11px 17px;border-radius:99px;
  font-size:14.5px;font-weight:700;background:var(--fb-blue);color:#fff;white-space:nowrap;
  box-shadow:0 8px 18px -8px color-mix(in srgb,var(--fb-blue) 75%,transparent),
             inset 0 1px 0 rgba(255,255,255,.22);
  transition:background .18s var(--fb-ease),transform .18s var(--fb-ease);
}
.fbar .go svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:.92;
  transition:transform .18s var(--fb-ease)}
.fbar:hover .go{background:var(--fb-blue-2)}
.fbar:hover .go svg{transform:translateX(-3px)}

/* ══ ٤) التجاوب ═══════════════════════════════════════════════ */
@media (min-width:760px){
  .fbar{max-width:560px;margin-inline:auto}
  .fbar .fbar-in{gap:16px;padding:14px 16px}
  .fbar .ic{width:60px;height:60px}
  .fbar .t{font-size:16px}
}
/* شاشة ضيّقة — الزر ينزل سطراً كاملاً */
@media (max-width:380px){
  .fbar .fbar-in{grid-template-columns:auto auto 1fr;gap:11px;padding:12px}
  .fbar .go{grid-column:1/-1;justify-content:center;margin-top:4px}
  .fbar .ic{width:48px;height:48px;border-radius:14px}
}

/* ══ ٥) الإنجليزية — انقلاب السهم واتجاه النص ═════════════════ */
[dir="ltr"] .fbar .t{text-align:left}

/* ══ ٦) نافذة الظهور عند دخول الموقع ═════════════════════════
   البار يظهر وسط الشاشة مموّهاً ثم يستوي حادّاً، والموقع يضبب خلفه.
   ══════════════════════════════════════════════════════════════ */
.fb-scrim{
  position:fixed;inset:0;z-index:80;background:rgba(var(--fb-scrim),.5);
  opacity:0;pointer-events:none;transition:opacity .55s var(--fb-ease);
}
.fb-scrim.on{opacity:1;pointer-events:auto}

.fb-pop{
  position:fixed;z-index:90;top:50%;left:50%;
  width:min(430px,calc(100vw - 32px));pointer-events:none;
  opacity:0;filter:blur(13px);
  transform:translate(-50%,calc(-50% - 30px)) scale(.95);
  transition:opacity .6s var(--fb-ease),transform .6s var(--fb-ease),filter .6s var(--fb-ease);
}
.fb-pop.on{opacity:1;filter:blur(0);pointer-events:auto;transform:translate(-50%,-50%)}
.fb-pop.off{opacity:0;filter:blur(15px);
  transform:translate(-50%,calc(-50% - 40px)) scale(.96);transition-duration:.45s}

/* تضبيب محتوى الموقع خلف النافذة — ضع الصنف على حاوية موقعك */
.fb-dimmable{transition:filter .55s var(--fb-ease)}
.fb-dimmable.fb-dim{filter:blur(5px) saturate(.92)}
[data-theme="dark"] .fb-dimmable.fb-dim{filter:blur(5px) brightness(.6)}

/* ══ ٧) احترام تقليل الحركة ═══════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .fbar::before,.fbar .fring::before{animation:none}
  .fbar,.fbar .go,.fb-pop,.fb-scrim,.fb-dimmable{transition-duration:.01s!important}
  .fb-dimmable.fb-dim{filter:none}
}