/* ====== تنظیمات قابل تغییر ====== */
.vslider{
  --w: 351.61px;
  --h: 452.15px;
  --side-scale: .82;    /* اندازه تصویر بالا و پایین */
  --side-opacity: .4;   /* کم‌رنگی تصویر بالا و پایین */
  --side-shift: 100px;  /* هرچی بیشتر، تصاویر کناری بیشتر بیرون می‌زنن */
}

/* ====== WRAPPER ====== */
.vslider-wrap{
  display:flex;
  align-items:center;
  gap:30px;
}

/* ====== SLIDER BOX ====== */
.vslider{
  position:relative;
  width:var(--w) !important;
  height:var(--h) !important;
  max-width:100%;
  flex:0 0 auto;
  margin:110px 0;          /* جا برای تصاویر بالا و پایین */
  overflow:visible !important;
}

/* ====== ITEMS ====== */
.vslider .vslider-item{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  border-radius:22px;
  overflow:hidden;
  transform-origin:center center;
  will-change:transform, opacity;
  transition:
    transform .65s cubic-bezier(.4,0,.2,1),
    opacity .65s cubic-bezier(.4,0,.2,1),
    filter .65s cubic-bezier(.4,0,.2,1);
}

.vslider .vslider-item .elementor-widget-container{
  width:100%;
  height:100%;
}

.vslider .vslider-item img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover;
  display:block;
  pointer-events:none;
  border-radius:22px;
}

/* قبل از اجرای JS فقط اولی دیده بشه */
.vslider .vslider-item:not([data-state]){ opacity:0; }
.vslider .vslider-item:first-child:not([data-state]){ opacity:1; z-index:5; }

/* ====== STATES ====== */
.vslider .vslider-item[data-state="active"]{
  transform:translateY(0) scale(1);
  opacity:1;
  filter:blur(0);
  z-index:5;
}

.vslider .vslider-item[data-state="prev"]{
  transform:translateY(calc(var(--side-shift) * -1)) scale(var(--side-scale));
  opacity:var(--side-opacity);
  z-index:3;
  cursor:pointer;
}

.vslider .vslider-item[data-state="next"]{
  transform:translateY(var(--side-shift)) scale(var(--side-scale));
  opacity:var(--side-opacity);
  z-index:3;
  cursor:pointer;
}

.vslider .vslider-item[data-state="hidden"]{
  transform:translateY(0) scale(.6);
  opacity:0;
  z-index:1;
  pointer-events:none;
}

/* ====== NAV ====== */
.vslider-nav{
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* ====== BUTTONS ====== */
.vslider-btn .elementor-button{
  width:52px;
  height:52px;
  padding:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent !important;
  border:2px solid #0C4787 !important;
  border-radius:50%;
  color:#0C4787;
  fill:#0C4787;
  box-shadow:none !important;
  outline:none !important;
  cursor:pointer;
  transition:background .3s ease, color .3s ease, fill .3s ease, transform .3s ease;
}

.vslider-btn .elementor-button-content-wrapper,
.vslider-btn .elementor-button-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 !important;
}

.vslider-btn i,
.vslider-btn svg{
  font-size:20px;
  width:20px;
  height:20px;
  line-height:1;
  color:#0C4787;
  fill:#0C4787;
  transition:color .3s ease, fill .3s ease;
}

.vslider-btn .elementor-button:hover{
  background:#0C4787 !important;
  transform:scale(1.08);
}
.vslider-btn .elementor-button:hover i,
.vslider-btn .elementor-button:hover svg{
  color:#fff;
  fill:#fff;
}

.vslider-btn .elementor-button-text{ display:none; }

/* ====== موبایل ====== */
@media (max-width:767px){
  .vslider-wrap{ gap:14px; }
  .vslider{
    --w: 240px;
    --h: 320px;
    --side-shift: 80px;
    margin:60px 0;
  }
  .vslider-btn .elementor-button{ width:44px; height:44px; }
}