/* ============ Admin (مثل قبل) ============ */
:root{ --brand:#7f00ff; --brand-2:#e100ff; }
.btn-primary{ background:linear-gradient(135deg,var(--brand),var(--brand-2)); border:none; }
.btn-primary:hover{ opacity:.95 }
.card{ border-radius:1rem; }

/* ============ Frontend containers ============ */
.container{
  width:100%;
  max-width:1140px;
  margin-inline:auto;
  padding-inline:16px;
}
.container-fluid{
  width:100%;
  padding-inline:16px;
}
.my-3{ margin-block:1rem; }

/* ============ Layout: Header/Main/Footer + Sidebar ============ */
.pb-header,.pb-footer{ padding-block:8px; }
.pb-content{ width:100%; }
.pb-sidebar{ width:100%; }

/* بدنه اصلی: در دسکتاپ/تبلت کنارهم؛ در موبایل زیرهم */
.pb-main-body{ display:block; }

/* گاتر استاندارد بین content و sidebar با تکنیک منفی/مثبت (بدون gap) */
@media (min-width:768px){
  .has-sidebar .pb-main-body{
    display:flex;
    align-items:flex-start;
    /* گاتر افقی بین دو ستون */
    margin-inline:-12px;
  }
  .has-sidebar .pb-content,
  .has-sidebar .pb-sidebar{
    padding-inline:12px;
    box-sizing:border-box;
  }
}

/* نسبت‌ها: دسکتاپ سایدبار کمی باریک‌تر (۲۲٪) */
@media (min-width:992px){
  .has-sidebar .pb-sidebar{ flex:0 0 25%; max-width:25%;padding-left: 35px; }
  .has-sidebar .pb-content{ flex:1 1 0; min-width:0; padding-right: 35px;}
}
/* تبلت: سایدبار ~28٪ */
@media (min-width:768px) and (max-width:991.98px){
  .has-sidebar .pb-sidebar{ flex:0 0 28%; max-width:28%; }
  .has-sidebar .pb-content{ flex:0 0 72%; max-width:72%; min-width:0; }
}

/* موبایل: همه‌چیز تمام‌عرض و حاشیه‌های برابر از دو طرف (به‌کمک container/container-fluid) */
@media (max-width:767.98px){
  .pb-sidebar, .pb-content{
    width:100%;
    max-width:100%;
    padding-inline:0; /* اتکا به padding کانتینر برای تقارن */
  }
  .has-sidebar .pb-main-body{
    margin-inline:0; /* حذف منفی‌ها در موبایل */
  }
}

/* ============ PageBuilder grid داخل محتوا ============ */
/* بجای gap، از گاتر با margin منفی روی row و padding روی col استفاده می‌کنیم
   تا مجموع عرض ستون‌ها دقیقاً ۱۰۰٪ بماند و wrap نشود. */
.pb-row{
  display:flex;
  flex-wrap:wrap;
  /* گاتر افقی 16px (8px هر طرف هر ستون) */
  margin-inline:-8px;
  /* فاصله عمودی بین ردیف‌ها */
  margin-bottom:12px;
}
.pb-col{
  box-sizing:border-box;
  padding-inline:8px;   /* گاتر افقی هر ستون */
  padding-block:8px;    /* فاصله عمودی داخلی هر ستون */
  min-width:0;          /* جلوگیری از کشیده‌شدن محتوا و شکستن ردیف */
}

/* دسکتاپ: ستون‌ها دقیقاً طبق span (درصد) کنار هم */
@media (min-width:992px){
  .pb-col{
    flex:0 0 var(--pb-perc);
    max-width:var(--pb-perc);
  }
}

/* تبلت: حداقل دو ستون کنار هم؛ اگر ستونی بزرگ‌تر تعریف شده بود، همان درصدش حفظ می‌شود */
@media (min-width:768px) and (max-width:991.98px){
  .pb-col{
    /* حداقل 50%، حداکثر 100%، یا درصد تعریف‌شده */
    flex:0 0 clamp(50%, var(--pb-perc), 100%);
    max-width:clamp(50%, var(--pb-perc), 100%);
  }
}

/* موبایل: تک‌ستونه تمام‌عرض */
@media (max-width:767.98px){
  .pb-row{ margin-inline:0; }      /* حذف گاتر منفی */
  .pb-col{
    padding-inline:0;              /* اتکا به padding کانتینر برای تقارن */
    flex:0 0 100% !important;
    max-width:100% !important;
  }
}

/* پیشنهادهای ماژول‌ها */
.mod-slider{ width:100%; position:relative; }
.mod-slider img{ display:block; max-width:100%; height:auto; }
/* ===== Fix: Mobile RTL spacing & full-width columns ===== */
html, body { margin: 0; }

.container,
.container-fluid{
  box-sizing: border-box;
  padding-right: 16px;
  padding-left: 16px;
}

/* دسکتاپ/تبلت رفتار قبلی پابرجاست؛ این بخش فقط موبایل را قفل می‌کند */
@media (max-width: 767.98px){
  /* تضمین padding مساوی در کانتینر */
  .container,
  .container-fluid{
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  /* حذف هر margin منفی و چیدمان ستونی */
  .has-sidebar .pb-main-body{
    margin-right: 0 !important;
    margin-left:  0 !important;
    display: block !important;
  }

  /* محتوا و سایدبار تمام‌عرض و بدون padding داخلی اضافی */
  .pb-content,
  .pb-sidebar{
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left:  0 !important;
    box-sizing: border-box;
  }

  /* ردیف/ستون‌های محتوا: حذف گاتر جانبی و تک‌ستونه */
  .pb-row{
    margin-right: 0 !important;
    margin-left:  0 !important;
  }
  .pb-col{
    padding-right: 0 !important;
    padding-left:  0 !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}