.mzn-slider{position:relative;overflow:hidden;width:100%;height:560px;direction:ltr}
.mzn-track{width:100%;height:100%;position:relative}
.mzn-slide{position:absolute;inset:0;background-size:cover;background-position:center center;opacity:0;transform:translateX(0);transition:opacity .6s ease, transform .6s ease, scale .6s ease}
.mzn-slide.mzn-active{opacity:1;z-index:2}

/* video */
.mzn-slide .mzn-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.mzn-slide.mzn-video-mode .mzn-video{display:block}

/* center play on slide */
.mzn-play{
  position:absolute;left:var(--play-left,50%);top:var(--play-top,50%);transform:translate(-50%,-50%);
  width:var(--play-size,88px);height:var(--play-size,88px);padding:var(--play-inset,0px);
  background-image:var(--mzn-play);background-repeat:no-repeat;background-position:center;background-size:100% 100%;
  background-color:transparent!important;border:0!important;outline:none!important;box-shadow:none!important;cursor:pointer;z-index:9999
}
.mzn-play.has-hover:hover{background-image:var(--mzn-play-hover)!important}
.mzn-slide.mzn-video-mode .mzn-play{display:none}

/* controls + timeline */
.mzn-controls{
  --timeline-w:430px; --timeline-h:4px; --pp-size:40px;
  position:absolute;left:0;right:0;bottom:24px;display:flex;align-items:center;justify-content:center;gap:12px;z-index:5
}
.mzn-pos-bottom-left .mzn-controls{justify-content:flex-start;padding-left:24px}
.mzn-pos-bottom-right .mzn-controls{justify-content:flex-end;padding-right:24px}

.mzn-prev,.mzn-next{width:38px;height:38px;border-radius:999px;border:0;background:rgba(0,0,0,.35);color:#fff;font-size:22px;line-height:38px;cursor:pointer}

/* single PP button near timeline */
.mzn-pp{display:none;width:var(--pp-size,40px);height:var(--pp-size,40px);border:0;border-radius:999px;background:rgba(0,0,0,.35);align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;position:relative;overflow:hidden;z-index:6}
.mzn-pp.is-visible{display:inline-flex}

/* متن fallback */
.mzn-pp .mzn-pp-ico{color:#fff;font-size:calc(var(--pp-size,40px)*.5);line-height:1;pointer-events:none}

/* اگر تصویر سفارشی آپلود شده باشد، همیشه متن را مخفی کن تا هم‌پوشانی نشود */
.mzn-pp[data-has-img="1"] .mzn-pp-ico{display:none}

/* لایه آیکن سفارشی */
.mzn-pp::before{
  content:"";position:absolute;inset:0;margin:auto;width:100%;height:100%;
  background-repeat:no-repeat;background-position:center;background-size:contain;opacity:1;pointer-events:none
}
/* تصویر بر اساس state */
.mzn-pp-single[data-state="pause"]::before{background-image:var(--pp-pause-img)}
.mzn-pp-single[data-state="play"]::before{background-image:var(--pp-play-img)}

/* timeline */
.mzn-progress{position:relative;width:var(--timeline-w);height:var(--timeline-h);background:rgba(255,255,255,.25);border-radius:999px;overflow:hidden;flex:0 0 auto;cursor:pointer}
.mzn-controls .mzn-progress__fill{position:absolute;right:0;left:auto;top:0;height:100%;width:0%;background:#fff;pointer-events:none}

/* optional toggle */
.mzn-toggle{border:0;width:40px;height:40px;border-radius:999px;background:rgba(0,0,0,.35);color:#fff;cursor:pointer;flex:0 0 auto;line-height:40px;text-align:center}
.mzn-toggle[data-state="pause"]::before{content:"❚❚"}
.mzn-toggle[data-state="play"]::before{content:"►"}

/* transitions */
.mzn-slide[data-transition="slide-left"].mzn-enter{transform:translateX(100%)}
.mzn-slide[data-transition="slide-left"].mzn-active{transform:translateX(0)}
.mzn-slide[data-transition="slide-right"].mzn-enter{transform:translateX(-100%)}
.mzn-slide[data-transition="slide-right"].mzn-active{transform:translateX(0)}
.mzn-slide[data-transition="slide-up"].mzn-enter{transform:translateY(100%)}
.mzn-slide[data-transition="slide-up"].mzn-active{transform:translateY(0)}
.mzn-slide[data-transition="slide-down"].mzn-enter{transform:translateY(-100%)}
.mzn-slide[data-transition="slide-down"].mzn-active{transform:translateY(0)}
.mzn-slide[data-transition="zoom-in"].mzn-enter{transform:scale(1.2)}
.mzn-slide[data-transition="zoom-in"].mzn-active{transform:scale(1)}
.mzn-slide[data-transition="zoom-out"].mzn-enter{transform:scale(.85)}
.mzn-slide[data-transition="zoom-out"].mzn-active{transform:scale(1)}
.mzn-slide[data-transition="ken-left"].mzn-active{animation:mzn-ken-left 7s ease both}
.mzn-slide[data-transition="ken-right"].mzn-active{animation:mzn-ken-right 7s ease both}
@keyframes mzn-ken-left{from{transform:scale(1.12) translateX(2%)} to{transform:scale(1) translateX(0)}}
@keyframes mzn-ken-right{from{transform:scale(1.12) translateX(-2%)} to{transform:scale(1) translateX(0)}}
.mzn-slide[data-transition="flip"].mzn-enter{transform:rotateY(-90deg)}
.mzn-slide[data-transition="flip"].mzn-active{transform:rotateY(0)}
.mzn-slide[data-transition="rotate"].mzn-enter{transform:rotate(-8deg);opacity:.3}
.mzn-slide[data-transition="rotate"].mzn-active{transform:rotate(0);opacity:1}

/* rotating ring */
.mzn-ring{--ring-diameter:160px;--ring-speed:10s;position:absolute;left:var(--ring-left,var(--play-left,50%));top:var(--ring-top,var(--play-top,50%));transform:translate(-50%,-50%);width:var(--ring-diameter);height:var(--ring-diameter);background-image:var(--mzn-ring);background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none;z-index:9998;animation:mzn-rotate var(--ring-speed) linear infinite}
.mzn-slide.mzn-video-mode .mzn-ring{display:none}
@keyframes mzn-rotate{from{transform:translate(-50%,-50%) rotate(0)} to{transform:translate(-50%,-50%) rotate(360deg)}}

/* tablet demo defaults */
@media (min-width:768px) and (max-width:1024px){
  .mzn-slider{--play-size:80px;--play-left:50%;--play-top:75%}
}

/* ==== Fix: no pink on click/active/focus for PP/Play/Toggle buttons ==== */
.mzn-slider .mzn-pp,
.mzn-slider .mzn-pp:hover,
.mzn-slider .mzn-pp:active,
.mzn-slider .mzn-pp:focus,
.mzn-slider .mzn-pp:focus-visible,
.mzn-slider .mzn-toggle,
.mzn-slider .mzn-toggle:hover,
.mzn-slider .mzn-toggle:active,
.mzn-slider .mzn-toggle:focus,
.mzn-slider .mzn-toggle:focus-visible,
.mzn-slider .mzn-play,
.mzn-slider .mzn-play:hover,
.mzn-slider .mzn-play:active,
.mzn-slider .mzn-play:focus,
.mzn-slider .mzn-play:focus-visible{
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  color: inherit !important;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

/* حالت دکمه با تصویر سفارشی: همیشه شفاف بماند */
.mzn-slider .mzn-pp[data-has-img="1"],
.mzn-slider .mzn-pp[data-has-img="1"]:hover,
.mzn-slider .mzn-pp[data-has-img="1"]:active,
.mzn-slider .mzn-pp[data-has-img="1"]:focus{
  background-color: transparent !important;
}

/* حالت بدون تصویر سفارشی: همواره همان پس‌زمینه تیره خود دکمه بماند */
.mzn-slider .mzn-pp:not([data-has-img="1"]),
.mzn-slider .mzn-pp:not([data-has-img="1"]):hover,
.mzn-slider .mzn-pp:not([data-has-img="1"]):active,
.mzn-slider .mzn-pp:not([data-has-img="1"]):focus{
  background-color: rgba(0,0,0,.35) !important;
}