/* ParsKala Banner Ads widget - scoped only, no global reset */
.elementor-widget-banner-ads .prk-banner-ads {
  --prk-banner-gap: 10px;
  --prk-banner-cols: 2;
  --prk-banner-shadow-color: rgba(239, 57, 78, .28);
  --prk-banner-shadow-blur: 24px;
  --prk-banner-shadow-y: 18px;
  display: grid;
  grid-template-columns: repeat(var(--prk-banner-cols), minmax(0, 1fr));
  width: 100%;
  max-width: 100%;
  align-items: stretch;
  gap: var(--prk-banner-row-gap, var(--prk-banner-gap)) var(--prk-banner-column-gap, var(--prk-banner-gap));
  box-sizing: border-box;
}

.elementor-widget-banner-ads .prk-banner-ads--banner_1 {
  --prk-banner-cols: 1;
}

.elementor-widget-banner-ads .prk-banner-ads--banner_2 {
  --prk-banner-cols: 2;
}

.elementor-widget-banner-ads .prk-banner-ads--banner_3 {
  --prk-banner-cols: 3;
}

.elementor-widget-banner-ads .prk-banner-ads--banner_4 {
  --prk-banner-cols: 4;
}

.elementor-widget-banner-ads .prk-banner-ads__item {
  position: relative;
  display: block;
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  transform-style: preserve-3d;
  isolation: isolate;
  margin: 0 !important;
  box-sizing: border-box;
}

.elementor-widget-banner-ads .prk-banner-ads__link,
.elementor-widget-banner-ads .prk-banner-ads__media {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
}

.elementor-widget-banner-ads .prk-banner-ads__media {
  min-height: 1px;
}

.elementor-widget-banner-ads .prk-banner-ads__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle;
  transition: opacity .28s ease, transform .28s ease, filter .28s ease;
}

.elementor-widget-banner-ads .prk-banner-ads__image.is-lazy-pending {
  opacity: 0;
}

.elementor-widget-banner-ads .prk-banner-ads__image.is-lazy-loaded {
  opacity: 1;
}

.elementor-widget-banner-ads .prk-banner-ads__skeleton {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  background: linear-gradient(90deg, #f1f3f5 0%, #f8f9fa 50%, #eef0f3 100%);
  background-size: 220% 100%;
  animation: prk-banner-skeleton-shimmer 1.35s ease-in-out infinite;
}

.elementor-widget-banner-ads .prk-banner-ads__item--placeholder .prk-banner-ads__media {
  min-height: 90px;
  aspect-ratio: 16 / 5;
}

.elementor-widget-banner-ads .prk-banner-ads__image.is-lazy-loaded + .prk-banner-ads__skeleton,
.elementor-widget-banner-ads .prk-banner-ads__skeleton.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.elementor-widget-banner-ads .prk-banner-ads--shine .prk-banner-ads__link::before,
.elementor-widget-banner-ads .shine .prk-banner-ads__link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .12) 38%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, .12) 62%, transparent 100%);
  transform: translateX(120%) skewX(-18deg);
  transition: transform .72s ease;
}

.elementor-widget-banner-ads .prk-banner-ads--shine .prk-banner-ads__item:hover .prk-banner-ads__link::before,
.elementor-widget-banner-ads .shine .prk-banner-ads__item:hover .prk-banner-ads__link::before {
  transform: translateX(-120%) skewX(-18deg);
}

.elementor-widget-banner-ads .prk-banner-ads--colored-shadow .prk-banner-ads__item::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 10%;
  bottom: 0;
  height: 36%;
  background: var(--prk-banner-shadow-color);
  filter: blur(var(--prk-banner-shadow-blur));
  transform: translateY(var(--prk-banner-shadow-y));
  opacity: 1;
  pointer-events: none;
  border-radius: inherit;
}

.elementor-widget-banner-ads .prk-banner-ads--tilt .prk-banner-ads__item {
  will-change: transform;
}

@keyframes prk-banner-skeleton-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* responsive render visibility: same public classes used by Loop Builder */
@media (min-width: 1025px) {
  .elementor-widget-banner-ads .prk-loop-render-desktop-off {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-widget-banner-ads .prk-loop-render-tablet-off {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .elementor-widget-banner-ads .prk-loop-render-mobile-off {
    display: none !important;
  }

  /* Only the 4-banner preset changes on mobile: 2 columns × 2 rows.
     banner_1 stays 1, banner_2 stays 2, banner_3 stays 3. */
  .elementor-widget-banner-ads .prk-banner-ads--banner_4 {
    --prk-banner-cols: 2;
  }
}

/* Ajax JSON-url mode keeps the shell height stable before the image src is injected. */
.elementor-widget-banner-ads .prk-banner-ads__item[style*="--prk-banner-image-ratio"] .prk-banner-ads__media {
  aspect-ratio: var(--prk-banner-image-ratio);
}

.elementor-widget-banner-ads .prk-banner-ads.is-prk-banner-loading .prk-banner-ads__item--placeholder .prk-banner-ads__media,
.elementor-widget-banner-ads .prk-banner-ads[data-prk-banner-content-ajax]:not(.is-prk-banner-ajax-loaded) .prk-banner-ads__item--placeholder .prk-banner-ads__media {
  min-height: inherit;
}

/* =========================================================
   Phase 8 - protect Banner Ads grid from legacy mobile banner CSS
   مشکل موبایل از CSSهای قدیمی .banners/.list4 با !important بود.
========================================================= */
body .elementor-widget-banner-ads .prk-banner-ads > .banners.prk-banner-ads__item,
body .elementor-widget-banner-ads .prk-banner-ads > .banners.list1.prk-banner-ads__item,
body .elementor-widget-banner-ads .prk-banner-ads > .banners.list2.prk-banner-ads__item,
body .elementor-widget-banner-ads .prk-banner-ads > .banners.list3.prk-banner-ads__item,
body .elementor-widget-banner-ads .prk-banner-ads > .banners.list4.prk-banner-ads__item {
  float: none !important;
  flex: initial !important;
  display: block !important;
  width: 100% !important;
  inline-size: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

body .elementor-widget-banner-ads .prk-banner-ads > .banners.list4:nth-child(2),
body .elementor-widget-banner-ads .prk-banner-ads > .banners.list4:last-child,
body .elementor-widget-banner-ads .prk-banner-ads > .banners.list2:last-child {
  margin: 0 !important;
}

body .elementor-widget-banner-ads .prk-banner-ads > .banners.prk-banner-ads__item .prk-banner-ads__link,
body .elementor-widget-banner-ads .prk-banner-ads > .banners.prk-banner-ads__item .prk-banner-ads__media,
body .elementor-widget-banner-ads .prk-banner-ads > .banners.prk-banner-ads__item .prk-banner-ads__image,
body .elementor-widget-banner-ads .prk-banner-ads > .banners.prk-banner-ads__item .prk-banner-ads__skeleton {
  width: 100% !important;
  inline-size: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 767px) {
  body .elementor-widget-banner-ads .prk-banner-ads.prk-banner-ads--banner_1 {
    --prk-banner-cols: 1;
  }

  body .elementor-widget-banner-ads .prk-banner-ads.prk-banner-ads--banner_2 {
    --prk-banner-cols: 2;
  }

  body .elementor-widget-banner-ads .prk-banner-ads.prk-banner-ads--banner_3 {
    --prk-banner-cols: 3;
  }

  body .elementor-widget-banner-ads .prk-banner-ads.prk-banner-ads--banner_4 {
    --prk-banner-cols: 2;
  }
}

/* =========================================================
   Phase 9 - reserve grid row height on the item itself
   دلیل هم‌پوشانی موبایل: height/ratio روی media بود، اما grid ارتفاع ردیف را از item می‌گرفت.
========================================================= */
.elementor-widget-banner-ads .prk-banner-ads > .prk-banner-ads__item[style*="--prk-banner-image-ratio"],
body .elementor-widget-banner-ads .prk-banner-ads > .banners.prk-banner-ads__item[style*="--prk-banner-image-ratio"] {
  aspect-ratio: var(--prk-banner-image-ratio) !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible;
}

.elementor-widget-banner-ads .prk-banner-ads > .prk-banner-ads__item[style*="--prk-banner-image-ratio"] > .prk-banner-ads__link,
.elementor-widget-banner-ads .prk-banner-ads > .prk-banner-ads__item[style*="--prk-banner-image-ratio"] .prk-banner-ads__media,
body .elementor-widget-banner-ads .prk-banner-ads > .banners.prk-banner-ads__item[style*="--prk-banner-image-ratio"] > .prk-banner-ads__link,
body .elementor-widget-banner-ads .prk-banner-ads > .banners.prk-banner-ads__item[style*="--prk-banner-image-ratio"] .prk-banner-ads__media {
  height: 100% !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
}

.elementor-widget-banner-ads .prk-banner-ads > .prk-banner-ads__item[style*="--prk-banner-image-ratio"] .prk-banner-ads__skeleton,
.elementor-widget-banner-ads .prk-banner-ads > .prk-banner-ads__item[style*="--prk-banner-image-ratio"] .prk-banner-ads__image {
  height: 100% !important;
}