/* ============================================================
   Floating Action Bar — Random + Search + Font Size
   - Desktop: شريط عموديّ مرئيّ دائمًا
   - Mobile: زرّ FAB دائريّ واحد، عند الضغط تنبثق الأزرار بشكل أنيق
   ============================================================ */
.mdt-fbar {
  position: fixed;
  inset-inline-end: 18px;
  bottom: 18px;
  z-index: 9990;
  direction: rtl;
}

.mdt-fbar-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mdt-fbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #FFFFFF;
  color: #2C3138;
  border: 1px solid rgba(44,49,56,.10);
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 200ms ease, transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
  box-shadow: 0 4px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
}
.mdt-fbar-btn:hover,
.mdt-fbar-btn:focus {
  background: #2C3138;
  color: #FFFFFF !important;
  border-color: #2C3138;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  outline: none;
  text-decoration: none !important;
}
.mdt-fbar-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  flex-shrink: 0;
}

/* الزرّ المركزيّ (FAB) — مخفيّ على الـ desktop */
.mdt-fbar-trigger {
  display: none;
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: #2C3138;
  color: #FFFFFF;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(44,49,56,.30), 0 3px 8px rgba(0,0,0,.18);
  transition: transform 300ms cubic-bezier(.16,1,.3,1), background 200ms ease;
  z-index: 2;
}
.mdt-fbar-trigger:hover,
.mdt-fbar-trigger:focus {
  background: #3D434C;
  outline: none;
}
.mdt-fbar-trigger svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  transition: transform 320ms cubic-bezier(.16,1,.3,1), opacity 220ms ease;
}
.mdt-fbar-ic-close { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(.6) !important; }
.mdt-fbar.mdt-fbar-open .mdt-fbar-trigger {
  transform: rotate(45deg);
  background: #1F2328;
}
.mdt-fbar.mdt-fbar-open .mdt-fbar-ic-open  { opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scale(.6) !important; }
.mdt-fbar.mdt-fbar-open .mdt-fbar-ic-close { opacity: 1; transform: translate(-50%, -50%) rotate(-45deg) scale(1) !important; }

/* ============================================================
   Mobile (≤ 768px): FAB صغيرة مع expanding items
   ============================================================ */
@media (max-width: 768px) {
  .mdt-fbar {
    bottom: 16px;
    inset-inline-end: 16px;
  }

  .mdt-fbar-trigger { display: inline-block; }

  .mdt-fbar-items {
    position: absolute;
    bottom: 68px;
    inset-inline-end: 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    pointer-events: none;
  }

  .mdt-fbar-btn {
    width: 44px;
    height: 44px;
    opacity: 0;
    transform: translateY(8px) scale(.7);
    transition:
      opacity 220ms cubic-bezier(.16,1,.3,1),
      transform 320ms cubic-bezier(.16,1,.3,1);
    pointer-events: none;
    box-shadow: 0 6px 16px rgba(0,0,0,.14);
  }

  /* عند الفتح: نُظهر الأزرار بـ stagger */
  .mdt-fbar.mdt-fbar-open .mdt-fbar-items { pointer-events: auto; }
  .mdt-fbar.mdt-fbar-open .mdt-fbar-btn {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  /* stagger: الزرّ الأقرب للـ trigger يظهر أولًا */
  .mdt-fbar.mdt-fbar-open .mdt-fbar-btn:nth-last-child(1) { transition-delay: 0ms; }
  .mdt-fbar.mdt-fbar-open .mdt-fbar-btn:nth-last-child(2) { transition-delay: 40ms; }
  .mdt-fbar.mdt-fbar-open .mdt-fbar-btn:nth-last-child(3) { transition-delay: 80ms; }
  .mdt-fbar.mdt-fbar-open .mdt-fbar-btn:nth-last-child(4) { transition-delay: 120ms; }
}

/* ============================================================
   Font Size Variable (يُضبَط من JS)
   ============================================================ */
.single-post .entry-content {
  font-size: calc(1em * var(--mdt-fs, 1));
}

/* ============================================================
   TOC Sticky (للشاشات الكبيرة فقط)
   ============================================================ */
.mdt-toc-sticky {
  display: none;
}
@media (min-width: 1400px) {
  .mdt-toc-sticky {
    display: block;
    position: fixed;
    inset-inline-start: 24px;
    top: 100px;
    width: 260px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    background: #FAFAFA;
    border: 1px solid rgba(44,49,56,.10);
    border-radius: 10px;
    padding: 14px 16px;
    font-family: inherit;
    z-index: 50;
    box-shadow: 0 4px 12px rgba(0,0,0,.04);
  }
  .mdt-toc-sticky::-webkit-scrollbar { width: 6px; }
  .mdt-toc-sticky::-webkit-scrollbar-thumb { background: rgba(44,49,56,.20); border-radius: 999px; }

  .mdt-toc-sticky-title {
    font-size: 12px;
    font-weight: 700;
    color: #8A8F97;
    letter-spacing: 0.02em;
    margin: 0 0 10px;
    text-transform: uppercase;
  }
  .mdt-toc-sticky ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .mdt-toc-sticky ul ul {
    padding-inline-start: 12px;
    margin-top: 2px;
  }
  .mdt-toc-sticky li { margin: 1px 0; }
  .mdt-toc-sticky a {
    display: block;
    padding: 5px 8px;
    border-radius: 5px;
    color: #5C636C;
    text-decoration: none;
    font-size: 12.5px;
    line-height: 1.55;
    border-inline-start: 2px solid transparent;
    transition: background 150ms, color 150ms;
  }
  .mdt-toc-sticky a:hover {
    background: rgba(44,49,56,.04);
    color: #1F2328;
  }
  .mdt-toc-sticky a.mdt-active {
    background: rgba(140,106,47,.10);
    color: #6F511E;
    border-inline-start-color: #8C6A2F;
    font-weight: 600;
  }

  /* أخفِ الـ inline TOC على الشاشات الكبيرة */
  .single-post .mdt-toc { display: none; }
}