/* يعمل فقط داخل صفحتي المدونة لأن الإضافة لا تُحمّل إلا هناك
   + زيادة أمان بالـ scope: .dsbe-blog-page */
.dsbe-blog-page{
  --dsbe-bg:#fff;
  --dsbe-text:#0f172a;
  --dsbe-muted:#475569;
  --dsbe-border:rgba(15,23,42,.10);
  --dsbe-shadow-hover:0 18px 55px rgba(2,6,23,.16);
  --dsbe-radius:18px;
  --dsbe-gap:22px;
  --dsbe-primary:#0b57d0;
}

/* ===== تكبير المحتوى وتقليل الـ sidebar (داخل صفحتي المدونة فقط) ===== */
@media (min-width: 1025px){
  .dsbe-blog-page .wd-content-layout{
    display:flex !important;
    gap:28px !important;
    align-items:flex-start;
  }
  .dsbe-blog-page .wd-content-layout .wd-content-area{
    flex: 0 0 78% !important;
    max-width: 78% !important;
    min-width: 0;
  }
  .dsbe-blog-page .wd-content-layout .wd-sidebar{
    flex: 0 0 22% !important;
    max-width: 22% !important;
    min-width: 270px;
  }
}

/* ===== عكس الاتجاه الحالي (زي ما طلبت):
   - الإنجليزي: خلي الـ sidebar على الشمال
   - العربي: خلي الـ sidebar على اليمين
*/
@media (min-width: 1025px){
  .dsbe-blog-page.dsbe-lang-en .wd-content-layout{ flex-direction: row-reverse !important; }
  .dsbe-blog-page.dsbe-lang-ar .wd-content-layout{ flex-direction: row !important; }
}

/* ===== Blog Cards (محسّن) ===== */
.dsbe-blog-page .wd-blog-holder.wd-grid-g{ gap:var(--dsbe-gap)!important; }

.dsbe-blog-page .wd-blog-holder .wd-post.blog-post-loop{
  background:var(--dsbe-bg)!important;
  border:1px solid var(--dsbe-border)!important;
  border-radius:var(--dsbe-radius)!important;
  overflow:hidden!important;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  box-shadow:0 8px 22px rgba(2,6,23,.06)!important;
  will-change:transform;
}
.dsbe-blog-page .wd-blog-holder .wd-post.blog-post-loop:hover{
  transform:translateY(-6px);
  box-shadow:var(--dsbe-shadow-hover)!important;
  border-color:rgba(15,23,42,.18)!important;
}
.dsbe-blog-page .wd-blog-holder .wd-post-img img{
  width:100%!important;
  display:block!important;
  aspect-ratio:16/9;
  object-fit:cover;
  transition:transform .35s ease;
}
.dsbe-blog-page .wd-blog-holder .wd-post.blog-post-loop:hover .wd-post-img img{ transform:scale(1.05); }
.dsbe-blog-page .wd-blog-holder .wd-post-content.article-body-container{ padding:16px 16px 18px!important; }

.dsbe-blog-page .wd-blog-holder .wd-post-title a{
  color:var(--dsbe-text)!important;
  font-weight:800!important;
  line-height:1.35!important;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.dsbe-blog-page .wd-blog-holder .wd-post-excerpt{
  margin-top:10px!important;
  color:var(--dsbe-muted)!important;
  line-height:1.75!important;
  font-size:14.5px!important;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ===== Sidebar Widget ===== */
.dsbe-blog-page .dsbe-sb{ display:flex; flex-direction:column; gap:14px; }
.dsbe-blog-page .dsbe-sticky{ position:sticky; top:90px; }

.dsbe-blog-page .dsbe-box{
  background:var(--dsbe-bg);
  border:1px solid var(--dsbe-border);
  border-radius:16px;
  box-shadow:0 10px 26px rgba(2,6,23,.06);
  padding:14px;
}

.dsbe-blog-page .dsbe-title{
  margin:0 0 10px;
  font-weight:900;
  color:var(--dsbe-text);
  font-size:15px;
}

.dsbe-blog-page .dsbe-empty{ margin:0; color:var(--dsbe-muted); font-size:13.5px; }

/* Search */
.dsbe-blog-page .dsbe-search{ display:flex; gap:10px; }
.dsbe-blog-page .dsbe-search__input{
  flex:1;
  border:1px solid rgba(15,23,42,.14);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
}
.dsbe-blog-page .dsbe-search__btn{
  border:0;
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  background:var(--dsbe-primary);
  color:#fff;
}

/* ===== عكس اتجاه عناصر الـ Sidebar (Recent + Categories + Search) حسب اللغة ===== */
/* الإنجليزي: طبيعي */
.dsbe-blog-page.dsbe-lang-en .dsbe-box{ direction:ltr; text-align:left; }

/* العربي: نعكس الشكل الحالي زي ما طلبت (خلي العناصر تتصرف “عكس” اللي كان شغال) */
.dsbe-blog-page.dsbe-lang-ar .dsbe-box{ direction:rtl; text-align:right; }
/* اعكس ترتيب صف البحث (لو كان الزر على يمين خلّيه على شمال) */
.dsbe-blog-page.dsbe-lang-ar .dsbe-search{ flex-direction:row-reverse; }
/* اعكس ترتيب recent و categories */
.dsbe-blog-page.dsbe-lang-ar .dsbe-recent__item{ flex-direction:row-reverse; }
.dsbe-blog-page.dsbe-lang-ar .dsbe-list__link{ flex-direction:row-reverse; }

/* Recent posts (شكل احترافي لـ 3 مقالات) */
.dsbe-blog-page .dsbe-recent{ display:flex; flex-direction:column; gap:10px; }

.dsbe-blog-page .dsbe-recent__item{
  display:flex;
  gap:10px;
  text-decoration:none;
  align-items:center;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.dsbe-blog-page .dsbe-recent__item:hover{
  transform:translateY(-1px);
  border-color:rgba(11,87,208,.25);
  background:rgba(15,23,42,.02);
}

.dsbe-blog-page .dsbe-recent__thumb{
  width:60px;
  height:60px;
  border-radius:14px;
  background-size:cover;
  background-position:center;
  flex:0 0 auto;
  border:1px solid rgba(15,23,42,.10);
}
.dsbe-blog-page .dsbe-recent__thumb--ph{
  background:linear-gradient(135deg, rgba(11,87,208,.15), rgba(15,23,42,.05));
}
.dsbe-blog-page .dsbe-recent__meta{ display:flex; flex-direction:column; min-width:0; }
.dsbe-blog-page .dsbe-recent__title{
  color:var(--dsbe-text);
  font-weight:900;
  font-size:13.5px;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.dsbe-blog-page .dsbe-recent__date{ color:var(--dsbe-muted); font-size:12.5px; margin-top:4px; }

/* Categories list */
.dsbe-blog-page .dsbe-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.dsbe-blog-page .dsbe-list__link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-decoration:none;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  transition:transform .15s ease, border-color .15s ease;
}
.dsbe-blog-page .dsbe-list__link:hover{
  transform:translateY(-1px);
  border-color:rgba(11,87,208,.25);
}
.dsbe-blog-page .dsbe-list__name{ color:var(--dsbe-text); font-weight:900; font-size:13.5px; }
.dsbe-blog-page .dsbe-list__count{
  color:var(--dsbe-muted);
  font-weight:900;
  font-size:12.5px;
  background:rgba(15,23,42,.05);
  padding:4px 8px;
  border-radius:999px;
}

/* Mobile: no sticky */
@media (max-width: 1024px){
  .dsbe-blog-page .dsbe-sticky{ position:static; top:auto; }
}