.elementor-21119 .elementor-element.elementor-element-4729d93{box-shadow:0px 0px 30px 0px rgba(0, 0, 0, 0.1);transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin:0em 0em 2em 0em;padding:0em 2em 0em 2em;}.elementor-21119 .elementor-element.elementor-element-4729d93 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-21119 .elementor-element.elementor-element-ddfb360{width:auto;max-width:auto;}.elementor-21119 .elementor-element.elementor-element-ddfb360 > .elementor-widget-container{margin:0px 6px 0px 0px;}.elementor-21119 .elementor-element.elementor-element-ddfb360 .wd-breadcrumbs{font-size:13px;}.elementor-21119 .elementor-element.elementor-element-b855688{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-21119 .elementor-element.elementor-element-226b454 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-21119 .elementor-element.elementor-element-e416f05{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-21119 .elementor-element.elementor-element-0a58c4a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:5px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:20px;}.elementor-21119 .elementor-element.elementor-element-f6bcb28{--grid-columns:4;}.elementor-21119 .elementor-element.elementor-element-f6bcb28 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-21119 .elementor-element.elementor-element-f6bcb28 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-21119 .elementor-element.elementor-element-f6bcb28 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-21119 .elementor-element.elementor-element-f6bcb28 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-21119 .elementor-element.elementor-element-f6bcb28 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}body.elementor-page-21119:not(.elementor-motion-effects-element-type-background), body.elementor-page-21119 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#EFF1F5;}@media(max-width:1024px){.elementor-21119 .elementor-element.elementor-element-0a58c4a{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-21119 .elementor-element.elementor-element-f6bcb28{--grid-columns:2;}}@media(min-width:768px){.elementor-21119 .elementor-element.elementor-element-b9947bd{width:82.41%;}.elementor-21119 .elementor-element.elementor-element-77fe830{width:16.894%;}}@media(max-width:767px){.elementor-21119 .elementor-element.elementor-element-b9947bd{width:70%;}.elementor-21119 .elementor-element.elementor-element-77fe830{width:30%;}.elementor-21119 .elementor-element.elementor-element-f6bcb28{--grid-columns:1;}}/* Start custom CSS for loop-grid, class: .elementor-element-f6bcb28 *//* =========================================================
   MABANI – Elementor Loop Grid "Load More" (PRO / Scoped)
   Requires: class "mab-loopgrid" on the Loop Grid widget
   Includes:
   - Pro button styling
   - Remove extra floating square button
   - Remove Elementor default icons/plus
   - Show in-button spinner on loading
   ========================================================= */


/* ---------------------------------------------------------
   A) SAFETY RESET (avoid background bleed)
   --------------------------------------------------------- */
.mab-loopgrid .elementor-pagination,
.mab-loopgrid .e-load-more{
  background: transparent !important;
}

/* ---------------------------------------------------------
   B) TARGET LOAD MORE BUTTON (safe .elementor-21119 .elementor-element.elementor-element-f6bcb28s)
   --------------------------------------------------------- */
.mab-loopgrid .elementor-pagination__load-more,
.mab-loopgrid .e-load-more-button,
.mab-loopgrid a.elementor-button,
.mab-loopgrid button.elementor-button{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 14px 26px !important;
  min-height: 52px !important;
  border-radius: 18px !important;

  border: 1px solid rgba(109,40,217,.22) !important;
  background: linear-gradient(135deg, rgba(109,40,217,.95), rgba(34,197,94,.92)) !important;
  color: #ffffff !important;

  font-weight: 900 !important;
  font-size: 14px !important;
  letter-spacing: -0.2px !important;
  text-decoration: none !important;

  box-shadow:
    0 16px 34px rgba(2,6,23,.16),
    0 6px 14px rgba(2,6,23,.10) !important;

  transform: translateY(0);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;

  overflow: hidden !important;
  isolation: isolate;
}

/* Text above effects */
.mab-loopgrid .elementor-pagination__load-more span,
.mab-loopgrid .elementor-button-text,
.mab-loopgrid .e-load-more-button span{
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------
   C) SHINE EFFECT (subtle)
   --------------------------------------------------------- */
.mab-loopgrid .elementor-pagination__load-more::before,
.mab-loopgrid .e-load-more-button::before,
.mab-loopgrid a.elementor-button::before,
.mab-loopgrid button.elementor-button::before{
  content:"";
  position:absolute;
  inset:-6px;
  z-index: 1;
  pointer-events:none;

  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 42%,
    rgba(255,255,255,.28) 50%,
    rgba(255,255,255,0) 58%
  );

  opacity: 0;
  transform: translateX(-140%);
  transition:
    opacity .25s ease,
    transform .7s cubic-bezier(.22,1,.36,1);

  mix-blend-mode: screen;
}

/* Hover / Focus */
.mab-loopgrid .elementor-pagination__load-more:hover,
.mab-loopgrid .e-load-more-button:hover,
.mab-loopgrid a.elementor-button:hover,
.mab-loopgrid button.elementor-button:hover{
  transform: translateY(-2px);
  box-shadow:
    0 22px 44px rgba(2,6,23,.18),
    0 10px 22px rgba(2,6,23,.12) !important;
  filter: saturate(1.05);
  outline: none !important;
}

.mab-loopgrid .elementor-pagination__load-more:hover::before,
.mab-loopgrid .e-load-more-button:hover::before,
.mab-loopgrid a.elementor-button:hover::before,
.mab-loopgrid button.elementor-button:hover::before{
  opacity: .85;
  transform: translateX(140%);
}

/* Focus ring */
.mab-loopgrid .elementor-pagination__load-more:focus-visible,
.mab-loopgrid .e-load-more-button:focus-visible,
.mab-loopgrid a.elementor-button:focus-visible,
.mab-loopgrid button.elementor-button:focus-visible{
  box-shadow:
    0 0 0 4px rgba(109,40,217,.22),
    0 0 0 8px rgba(34,197,94,.16),
    0 22px 44px rgba(2,6,23,.18) !important;
}

/* ---------------------------------------------------------
D) REMOVE ANY DEFAULT ICON / PLUS (keep clean)
   --------------------------------------------------------- */
.mab-loopgrid .elementor-button-icon,
.mab-loopgrid .e-load-more-button i,
.mab-loopgrid .e-load-more-button svg,
.mab-loopgrid .elementor-pagination__load-more i,
.mab-loopgrid .elementor-pagination__load-more svg{
  display: none !important;
}

/* مهم: اگر قبلاً ::after را برای + استفاده کرده بودید، اینجا خاموش می‌کنیم */
.mab-loopgrid .elementor-pagination__load-more::after,
.mab-loopgrid .e-load-more-button::after,
.mab-loopgrid a.elementor-button::after,
.mab-loopgrid button.elementor-button::after{
  content: "" !important; /* بعداً برای اسپینر دوباره تعریف می‌کنیم */
}

/* ---------------------------------------------------------
   E) REMOVE THE EXTRA FLOATING SQUARE (the one you circled)
   - Elementor sometimes outputs an extra anchor/button
   --------------------------------------------------------- */
.mab-loopgrid .e-load-more-anchor,
.mab-loopgrid .e-load-more-icon{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------
   F) LOADING INDICATOR INSIDE BUTTON (spinner)
   - Show only while loading
   --------------------------------------------------------- */

/* space for spinner */
.mab-loopgrid .elementor-pagination__load-more,
.mab-loopgrid .e-load-more-button{
  padding-left: 56px !important;
}

/* spinner base (hidden by default) */
.mab-loopgrid .elementor-pagination__load-more::after,
.mab-loopgrid .e-load-more-button::after{
  content: "";
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
  border-radius: 999px;

  border: 2px solid rgba(255,255,255,.45);
  border-top-color: rgba(255,255,255,1);

  opacity: 0;
  transform: scale(.92);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 3;
  pointer-events: none;
}

/* Elementor loading states (varies by version) */
.mab-loopgrid .e-load-more-loading .elementor-pagination__load-more::after,
.mab-loopgrid .e-load-more--loading .elementor-pagination__load-more::after,
.mab-loopgrid .e-load-more-loading .e-load-more-button::after,
.mab-loopgrid .e-load-more--loading .e-load-more-button::after,
.mab-loopgrid .elementor-pagination__load-more.is-loading::after,
.mab-loopgrid .elementor-pagination__load-more.loading::after,
.mab-loopgrid .e-load-more-button.is-loading::after,
.mab-loopgrid .e-load-more-button.loading::after{
  opacity: 1;
  transform: scale(1);
  animation: mabSpin .7s linear infinite;
}

/* disable button while loading */
.mab-loopgrid .e-load-more-loading .elementor-pagination__load-more,
.mab-loopgrid .e-load-more--loading .elementor-pagination__load-more,
.mab-loopgrid .e-load-more-loading .e-load-more-button,
.mab-loopgrid .e-load-more--loading .e-load-more-button,
.mab-loopgrid .elementor-pagination__load-more.is-loading,
.mab-loopgrid .elementor-pagination__load-more.loading,
.mab-loopgrid .e-load-more-button.is-loading,
.mab-loopgrid .e-load-more-button.loading{
  pointer-events: none !important;
  opacity: .92 !important;
  filter: saturate(.92);
}

/* disabled */
.mab-loopgrid .elementor-button[disabled],
.mab-loopgrid .elementor-button.is-disabled,
.mab-loopgrid .elementor-button.elementor-button-disabled{
  opacity: .55 !important;
  pointer-events: none !important;
  transform: none !important;
  filter: grayscale(.2);
}

/* spinner keyframes */
@keyframes mabSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* ---------------------------------------------------------
   G) MOBILE
   --------------------------------------------------------- */
@media (max-width: 768px){
  .mab-loopgrid .elementor-pagination__load-more,
  .mab-loopgrid .e-load-more-button,
  .mab-loopgrid a.elementor-button,
  .mab-loopgrid button.elementor-button{
    width: min(92%, 360px) !important;
    border-radius: 20px !important;
  }
}

/* =========================
   MABANI – Custom Pagination Styles
   ========================= */
.mab-loopgrid .woocommerce-pagination,
.mab-loopgrid .elementor-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  gap: 12px; /* فاصله یکدست بین شماره‌ها */
}

.mab-loopgrid .woocommerce-pagination a,
.mab-loopgrid .elementor-pagination a {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.1);
  color: #0f172a; /* رنگ متن */
  transition: background 0.3s ease;
}

/* Hover effect */
.mab-loopgrid .woocommerce-pagination a:hover,
.mab-loopgrid .elementor-pagination a:hover {
  background: rgba(109, 40, 217, 0.1); /* رنگ هاور */
  color: rgba(109, 40, 217); /* رنگ متن در هاور */
}

/* Current page style */
.mab-loopgrid .woocommerce-pagination .current,
.mab-loopgrid .elementor-pagination .current {
  font-weight: bold;
  color: #ffffff; /* رنگ متن */
  background: rgba(34, 197, 94, 1); /* رنگ پس‌زمینه */
  border: 1px solid rgba(34, 197, 94, 1); /* حاشیه */
  border-radius: 8px;
}
/* =========================
   Active Page Number Style
   ========================= */
.mab-loopgrid .woocommerce-pagination .current,
.mab-loopgrid .elementor-pagination .current {
  font-weight: bold; /* ضخیم کردن متن */
  color: #fff; /* رنگ متن فعال */
  background: rgba(34, 197, 94, 1); /* رنگ پس‌زمینه */
  border: 1px solid rgba(34, 197, 94, 1); /* حاشیه */
  border-radius: 8px; /* گرد کردن لبه‌ها */
  padding: 8px 12px; /* فاصله مناسب */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); /* سایه برای عمق */
}/* End custom CSS */