.weblabs-hero-slider{
  /* motion */
  --weblabs-fade: 700ms;
  --weblabs-ease: ease;

  /* sizes */
  --weblabs-panel-w: 42%;
  --weblabs-bottom-h: 74px;           /* ✅ ارتفاع نوار پایین (سفید/تیره) */
  --weblabs-bottom-bg: #ffffff;       /* ✅ رنگ نوار سفید پایین */
  --weblabs-panel-bottom-bg: rgba(0,0,0,.18); /* ✅ نوار تیره پایین پنل */

  /* image tuning */
  --weblabs-img-pos-x: 50%;
  --weblabs-img-pos-y: 50%;
  --weblabs-img-scale: 100; /* (100 => 1x) */
  --weblabs-img-brightness: 100%;
  --weblabs-img-contrast: 100%;
  --weblabs-img-saturate: 100%;
  --weblabs-img-blur: 0px;

  /* dots */
  --weblabs-dots-bottom: 0px;         /* ✅ دات‌ها می‌چسبن به نوار پایین */
  --weblabs-dots-x: 0px;
  --weblabs-dot: 7px;
  --weblabs-dot-active: 9px;
  --weblabs-dot-gap: 10px;

  --weblabs-dots-bar-w: 280px;        /* ✅ طول بکگراند دات‌ها (کنار پنل) */
  --weblabs-dots-bar-bg: rgba(13,56,67,.85); /* ✅ بکگراند دات‌بار مثل طرح */
  --weblabs-dot-bg: rgba(255,255,255,.35);
  --weblabs-dot-active-bg: rgba(255,255,255,.95);

  /* button */
  --weblabs-btn-gap: 10px;
  --weblabs-btn-icon-box: 40px;
  --weblabs-btn-icon-size: 22px;

  position: relative;
  width: 100%;
  overflow: hidden;
  contain: layout paint;
}

/* ✅ نوار سفید پایین (مثل طرح) */
.weblabs-hero-slider::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--weblabs-bottom-h);
  background: var(--weblabs-bottom-bg);
  z-index: 3; /* بالای اسلایدها، زیر پنل و دات‌ها */
}

/* media */
.weblabs-hero-slider__media{ position: absolute; inset: 0; }
.weblabs-hero-slider__slides{ position: absolute; inset: 0; }

.weblabs-hero-slider__slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--weblabs-fade) var(--weblabs-ease);
  will-change: opacity;
  display: block;
}
.weblabs-hero-slider__slide.is-active{ opacity: 1; z-index: 2; }

.weblabs-hero-slider__picture,
.weblabs-hero-slider__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.weblabs-hero-slider__img{
  object-fit: cover!important;
      height: 100%!important;
      object-position: bottom;
  /*object-position: var(--weblabs-img-pos-x) var(--weblabs-img-pos-y);*/
  transform-origin: center;
  transform: scale(calc(var(--weblabs-img-scale) / 100)); /* ✅ درست */
  filter:
    brightness(var(--weblabs-img-brightness))
    contrast(var(--weblabs-img-contrast))
    saturate(var(--weblabs-img-saturate))
    blur(var(--weblabs-img-blur));
}

.weblabs-hero-slider__overlay{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* panel */
.weblabs-hero-slider__panel{
  position: absolute;
  top: 0;
  bottom: 0; /* ✅ پنل تا پایین میاد */
  width: var(--weblabs-panel-w);
  display: flex;
  z-index: 5;
}

.weblabs-hero-slider.is-panel-right .weblabs-hero-slider__panel{ right: 0; }
.weblabs-hero-slider.is-panel-left  .weblabs-hero-slider__panel{ left: 0; }

.weblabs-hero-slider.is-v-top .weblabs-hero-slider__panel{ align-items: flex-start; }
.weblabs-hero-slider.is-v-center .weblabs-hero-slider__panel{ align-items: center; }
.weblabs-hero-slider.is-v-bottom .weblabs-hero-slider__panel{ align-items: flex-end; }

/* ✅ نوار تیره پایین پنل (مثل طرح) */
.weblabs-hero-slider__panel::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--weblabs-bottom-h);
  background: var(--weblabs-panel-bottom-bg);
  z-index: 1;
  pointer-events: none;
}

.weblabs-hero-slider__panel-inner{
  width: 100%;
  position: relative;
  z-index: 2; /* بالای نوار تیره */
  padding-bottom: calc(var(--weblabs-bottom-h) + 10px); /* ✅ محتوا روی نوار تیره نیفته */
}

.weblabs-hero-slider[data-panel-align="right"] .weblabs-hero-slider__panel-inner{ text-align: right; }
.weblabs-hero-slider[data-panel-align="center"] .weblabs-hero-slider__panel-inner{ text-align: center; }
.weblabs-hero-slider[data-panel-align="left"] .weblabs-hero-slider__panel-inner{ text-align: left; }

/* text basics */
.weblabs-hero-slider__title{ line-height: 1.2; }
.weblabs-hero-slider__subtitle{ opacity: .75; }
.weblabs-hero-slider__desc{ opacity: .92; }

/* button */
.weblabs-hero-slider__btn{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  user-select: none;
  border: 1px solid currentColor;
}

.weblabs-hero-slider__btn.is-disabled{
  opacity: .6;
  cursor: not-allowed;
}

.weblabs-hero-slider__btn-inner{
  display: inline-flex;
  align-items: center;
  gap: var(--weblabs-btn-gap);
}

.weblabs-hero-slider__btn-inner.is-icon-right{ flex-direction: row-reverse; }
.weblabs-hero-slider__btn-inner.is-icon-left{ flex-direction: row; }

/* ✅ آیکن دکمه لوزی (diamond) مثل طرح */
.weblabs-hero-slider__btn-icon{
  width: var(--weblabs-btn-icon-box);
  height: var(--weblabs-btn-icon-box);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  border-radius: 2px;
}

.weblabs-hero-slider__btn-icon.is-upload{ overflow: hidden; }

/* بچه‌ها رو برمی‌گردونیم که خود آیکن کج نشه */
.weblabs-hero-slider__btn-icon svg,
.weblabs-hero-slider__btn-icon img,
.weblabs-hero-slider__btn-icon i{
  transform: rotate(-45deg);
}

.weblabs-hero-slider__btn-media-icon{
  width: var(--weblabs-btn-icon-size);
  height: var(--weblabs-btn-icon-size);
  object-fit: contain;
  display: block;
}

/* dots */
.weblabs-hero-slider__dots{
  position: absolute;
  bottom: var(--weblabs-dots-bottom);
  z-index: 6;

  /* ✅ بکگراند دات‌ها + اتصال به پنل + ادامه‌ی سفید از سمت چپ/راست با ::after (سفید خودش وجود داره) */
  height: var(--weblabs-bottom-h);
  width: var(--weblabs-dots-bar-w);
  background: var(--weblabs-dots-bar-bg);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--weblabs-dot-gap);

  transform: translateX(var(--weblabs-dots-x));
}

/* ✅ جای دات‌ها: کنار پنل */
.weblabs-hero-slider.is-panel-right .weblabs-hero-slider__dots{
  right: var(--weblabs-panel-w); /* دقیقا چسبیده به مرز پنل */
  left: auto;
}
.weblabs-hero-slider.is-panel-left .weblabs-hero-slider__dots{
  left: var(--weblabs-panel-w);
  right: auto;
}

/* اگر هنوز کلاس‌های قدیمی رو استفاده می‌کنی، این‌ها رو هم نگه می‌داریم */
.weblabs-hero-slider.is-dots-center .weblabs-hero-slider__dots{ /* همان کنار پنل، فقط داخل خودش center است */ }
.weblabs-hero-slider.is-dots-left .weblabs-hero-slider__dots{ left: 16px; right: auto; }
.weblabs-hero-slider.is-dots-right .weblabs-hero-slider__dots{ right: 16px; left: auto; }

.weblabs-hero-slider__dot{
  width: var(--weblabs-dot);
  height: var(--weblabs-dot);
  border: 0;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--weblabs-dot-bg);
  opacity: 1;
}

.weblabs-hero-slider__dot.is-active{
  width: var(--weblabs-dot-active);
  height: var(--weblabs-dot-active);
  background: var(--weblabs-dot-active-bg);
}


/* 1) حتما عرض پنل فقط از همین var بیاد (تا همیشه همسان باشن) */
.weblabs-hero-slider{
  --weblabs-panel-w: 30%; /* یا clamp(...) پایین‌تر */
}

/* پنل */
.weblabs-hero-slider.is-panel-right .weblabs-hero-slider__panel{
  width: var(--weblabs-panel-w) !important;
  right: 0 !important;
  left: auto !important;
}

/* 2) دات‌ها: دقیقاً بچسبن به مرز پنل (هر قانون قدیمی مثل left:50% رو خنثی کن) */
.weblabs-hero-slider.is-panel-right .weblabs-hero-slider__dots{
  right: var(--weblabs-panel-w) !important;  /* لبه راست دات‌بار = لبه چپ پنل */
  left: auto !important;
  bottom: 0 !important;
  transform: translateX(var(--weblabs-dots-x, 0px)) !important; /* هر translate قدیمی رو بی‌اثر کن */
}





/* mobile */
@media (max-width: 767px){
  .weblabs-hero-slider__panel{
    left: 50% !important;
    right: auto !important;
    top: 300px;
    width: calc(100% - 32px);
    height: auto;
  }
  .weblabs-hero-slider__img {
    height: 300px!important;}
  
  .weblabs-hero-slider.is-panel-right .weblabs-hero-slider__panel {
     width: 100% !important;
    right: unset !important; 
    left: unset !important; 
}

  /* ✅ در موبایل دات‌ها مثل طرح میره سمت چپ */
  .weblabs-hero-slider__dots{
    width: 160px; /* جمع و جور تر برای موبایل */
    transform: translateX(var(--weblabs-dots-x));
    height: 46px;
    bottom: 18px; /* روی تصویر */
  }
  
  .weblabs-hero-slider.is-panel-right .weblabs-hero-slider__dots {
    right: unset!important;
    left: 0 !important;
}

  /* تو موبایل نوار سفید پایین رو لازم نداریم (چون پنل اومده پایین) */
  .weblabs-hero-slider::after{ display: none; }
  .weblabs-hero-slider__panel::after{ display: none; }
  .weblabs-hero-slider__panel-inner{ padding-bottom: 0; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .weblabs-hero-slider__slide{ transition: none !important; }
}