.mv-front{--mv-card-width:160px;--mv-card-height:260px;--mv-gap:16px;--mv-radius:14px;width:100%;max-width:100%;overflow:hidden;direction:rtl;font-family:inherit;margin:0;padding:0;background:transparent}.mv-front,.mv-front *{box-sizing:border-box}.mv-front-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px;padding:0 4px}.mv-front-head h2{margin:0;font-size:clamp(20px,2.2vw,28px);font-weight:900;color:#101828}.mv-front-shell{position:relative;width:100%;max-width:100%}.mv-front-strip{display:flex;flex-direction:row;gap:var(--mv-gap);overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;padding:8px 44px 16px;scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.55) transparent}.mv-front-strip::-webkit-scrollbar{height:6px}.mv-front-strip::-webkit-scrollbar-track{background:transparent}.mv-front-strip::-webkit-scrollbar-thumb{background:rgba(203,213,225,.95);border-radius:999px}.mv-front-card{position:relative;flex:0 0 var(--mv-card-width);width:var(--mv-card-width);height:var(--mv-card-height);border:0;border-radius:var(--mv-radius);overflow:hidden;background:#dbeafe;padding:0;cursor:pointer;text-align:right;box-shadow:0 8px 16px rgba(16,24,40,.22);transition:transform .18s ease,box-shadow .18s ease}.mv-front-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(16,24,40,.24)}.mv-front-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.mv-front-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 20%,rgba(0,0,0,.86) 100%);z-index:1}.mv-front-card small{position:absolute;top:10px;left:10px;z-index:2;background:rgba(239,68,68,.95);color:#fff;border-radius:8px;padding:4px 7px;font-size:10px;font-style:normal;font-weight:900;line-height:1}.mv-front-card b{position:absolute;right:12px;left:12px;bottom:34px;z-index:2;color:#fff;font-size:18px;font-weight:900;line-height:1.35;text-shadow:0 2px 10px rgba(0,0,0,.45)}.mv-front-card em{position:absolute;right:12px;left:12px;bottom:12px;z-index:2;color:rgba(255,255,255,.85);font-size:12px;line-height:1.35;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mv-front-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:42px;height:42px;border-radius:999px;border:0;background:#fff;color:#111827;box-shadow:0 8px 22px rgba(16,24,40,.20);display:grid;place-items:center;font-size:30px;line-height:1;cursor:pointer;transition:.18s ease}.mv-front-arrow:hover{transform:translateY(-50%) scale(1.06)}.mv-front-arrow.is-disabled{opacity:.35;pointer-events:none}.mv-next{right:4px}.mv-prev{left:4px}.mv-front-modal{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:20px}.mv-front-modal.is-open{display:flex}.mv-modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,.78);backdrop-filter:blur(8px)}.mv-modal-box{position:relative;width:min(420px,96vw);background:#000;border-radius:24px;overflow:hidden;z-index:1;box-shadow:0 22px 70px rgba(0,0,0,.45)}.mv-modal-box video{width:100%;max-height:86vh;display:block;background:#000}.mv-modal-close{position:absolute;top:10px;right:10px;z-index:2;width:42px;height:42px;border-radius:999px;border:0;background:rgba(255,255,255,.18);color:#fff;font-size:28px;line-height:1;display:grid;place-items:center;cursor:pointer}.mv-modal-close:hover{background:rgba(255,255,255,.28)}body.mv-modal-lock{overflow:hidden}@media(max-width:768px){.mv-front-strip{padding:6px 8px 14px;gap:calc(var(--mv-gap) - 4px)}.mv-front-card{flex-basis:calc(var(--mv-card-width) * .84);width:calc(var(--mv-card-width) * .84);height:calc(var(--mv-card-height) * .88)}.mv-front-arrow{display:none}.mv-front-card b{font-size:16px}}@media(max-width:480px){.mv-front-card{flex-basis:calc(var(--mv-card-width) * .76);width:calc(var(--mv-card-width) * .76);height:calc(var(--mv-card-height) * .82)}.mv-front-card b{font-size:15px;bottom:31px}.mv-front-card em{font-size:11px}}
.mv-modal-image{width:100%;max-height:86vh;display:none;object-fit:contain;background:#000}.mv-front-modal.is-image .mv-modal-image{display:block}.mv-front-modal.is-image video{display:none}.mv-front-card.mv-image-only small{background:rgba(19,136,255,.95)}

/* v2.0.3 modal/video fixes */
.mv-front-modal {
  padding: 16px !important;
  align-items: center !important;
  justify-content: center !important;
}

.mv-modal-box {
  width: min(380px, 92vw) !important;
  max-height: 78vh !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: #000 !important;
}

.mv-modal-box video,
.mv-modal-box .mv-modal-video {
  width: 100% !important;
  height: auto !important;
  max-height: 72vh !important;
  display: block !important;
  object-fit: contain !important;
  background: #000 !important;
  cursor: pointer !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.mv-modal-box video::-webkit-media-controls,
.mv-modal-box video::-webkit-media-controls-panel,
.mv-modal-box video::-webkit-media-controls-play-button,
.mv-modal-box video::-webkit-media-controls-start-playback-button,
.mv-modal-box video::-webkit-media-controls-timeline,
.mv-modal-box video::-webkit-media-controls-current-time-display,
.mv-modal-box video::-webkit-media-controls-time-remaining-display,
.mv-modal-box video::-webkit-media-controls-mute-button,
.mv-modal-box video::-webkit-media-controls-volume-slider,
.mv-modal-box video::-webkit-media-controls-fullscreen-button {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.mv-modal-image {
  width: 100% !important;
  max-height: 72vh !important;
  display: none;
  object-fit: fill !important;
  background: #000 !important;
}

.mv-front-modal.is-image .mv-modal-image {
  display: block !important;
}

.mv-front-modal.is-image video {
  display: none !important;
}

.mv-modal-close {
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  background: rgba(255,255,255,.20) !important;
  cursor: pointer !important;
}

.mv-modal-close::before,
.mv-modal-close::after {
  content: "" !important;
  position: absolute !important;
  width: 24px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: #fff !important;
  top: 50% !important;
  left: 50% !important;
  transform-origin: center !important;
}

.mv-modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.mv-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.mv-modal-close:hover {
  background: rgba(255,255,255,.32) !important;
}

@media (max-width: 768px) {
  .mv-front-modal {
    padding: 12px !important;
  }

  .mv-modal-box {
    width: min(360px, 94vw) !important;
    max-height: 74vh !important;
    border-radius: 20px !important;
  }

  .mv-modal-box video,
  .mv-modal-box .mv-modal-video,
  .mv-modal-image {
    max-height: 66vh !important;
  }

  .mv-modal-close {
    width: 44px !important;
    height: 44px !important;
    top: 10px !important;
    right: 10px !important;
  }
}


/* v2.0.4 Myriad fonts */
.mv-front,
.mv-front *,
.mv-front button,
.mv-front video {
  font-family: Myriad-Regular, Tahoma, Arial, sans-serif !important;
}

.mv-front-head h2,
.mv-front-card b,
.mv-front-card small,
.mv-front-arrow,
.mv-modal-close {
  font-family: Myriad_Bold, Myriad-Regular, Tahoma, Arial, sans-serif !important;
}


/* v2.0.5 optional badge */
.mv-front-card:not(:has(small)) b {
  bottom: 34px;
}


/* v2.0.6 bigger modal video and no card shadow */
.mv-front-card {
  box-shadow: none !important;
}

.mv-front-card:hover {
  box-shadow: none !important;
}

.mv-front-modal {
  padding: 12px 12px max(86px, calc(env(safe-area-inset-bottom) + 78px)) 12px !important;
  align-items: flex-end !important;
  justify-content: center !important;
}

.mv-modal-box {
  width: min(430px, 94vw) !important;
  max-height: calc(100dvh - max(112px, calc(env(safe-area-inset-bottom) + 104px))) !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  background: #000 !important;
}

.mv-modal-box video,
.mv-modal-box .mv-modal-video {
  width: 100% !important;
  height: auto !important;
  max-height: calc(100dvh - max(112px, calc(env(safe-area-inset-bottom) + 104px))) !important;
  object-fit: contain !important;
  background: #000 !important;
}

.mv-modal-image {
  max-height: calc(100dvh - max(112px, calc(env(safe-area-inset-bottom) + 104px))) !important;
  object-fit: fill !important;
}

@media (max-width: 768px) {
  .mv-front-modal {
    padding: 10px 10px max(92px, calc(env(safe-area-inset-bottom) + 84px)) 10px !important;
  }

  .mv-modal-box {
    width: min(420px, 96vw) !important;
    max-height: calc(100dvh - max(118px, calc(env(safe-area-inset-bottom) + 110px))) !important;
  }

  .mv-modal-box video,
  .mv-modal-box .mv-modal-video,
  .mv-modal-image {
    max-height: calc(100dvh - max(118px, calc(env(safe-area-inset-bottom) + 110px))) !important;
  }
}

@supports not (height: 100dvh) {
  .mv-modal-box,
  .mv-modal-box video,
  .mv-modal-box .mv-modal-video,
  .mv-modal-image {
    max-height: calc(100vh - 118px) !important;
  }
}


/* v2.0.7 pause state indicator */
.mv-modal-box {
  position: relative !important;
}

.mv-pause-state {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 10px !important;
  pointer-events: none !important;
  color: #fff !important;
  text-align: center !important;
  background: rgba(0,0,0,.18) !important;
  backdrop-filter: blur(1px) !important;
}

.mv-front-modal.is-paused .mv-pause-state {
  display: flex !important;
}

.mv-pause-state span {
  width: 74px !important;
  height: 74px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.22) !important;
  position: relative !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.26) !important;
}

.mv-pause-state span::before,
.mv-pause-state span::after {
  content: "" !important;
  position: absolute !important;
  top: 23px !important;
  width: 8px !important;
  height: 28px !important;
  border-radius: 999px !important;
  background: #fff !important;
}

.mv-pause-state span::before {
  right: 27px !important;
}

.mv-pause-state span::after {
  left: 27px !important;
}

.mv-pause-state strong {
  font-family: Myriad_Bold, Myriad-Regular, Tahoma, Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  color: #fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
}

.mv-pause-state small {
  font-family: Myriad-Regular, Tahoma, Arial, sans-serif !important;
  font-size: 12px !important;
  color: rgba(255,255,255,.86) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.35) !important;
}

.mv-front-modal.is-image .mv-pause-state {
  display: none !important;
}


/* v2.0.8 custom text sizes */
.mv-front-head h2 {
  font-size: var(--mv-section-title-size, 24px) !important;
}

.mv-front-card b {
  font-size: var(--mv-card-title-size, 18px) !important;
}

.mv-front-card em {
  font-size: var(--mv-card-desc-size, 12px) !important;
}

.mv-front-card small {
  font-size: var(--mv-badge-size, 10px) !important;
}

.mv-pause-state strong {
  font-size: var(--mv-pause-title-size, 18px) !important;
}

.mv-pause-state small {
  font-size: var(--mv-pause-hint-size, 12px) !important;
}


/* v2.0.9 hidden title/subtitle safety */
.mv-front-card:not(:has(b)):not(:has(em)) .mv-front-overlay {
  background: linear-gradient(180deg, rgba(0,0,0,.02) 20%, rgba(0,0,0,.34) 100%) !important;
}


/* v2.0.13 RTL navigation, active color, modal layering and centered SVG icons */
.mv-front-shell {
  position: relative !important;
  z-index: 0 !important;
}

.mv-front-strip {
  position: relative !important;
  z-index: 1 !important;
}

.mv-front-card,
.mv-front-card img {
  z-index: 0 !important;
}

.mv-front-overlay {
  z-index: 1 !important;
}

.mv-front-card small,
.mv-front-card b,
.mv-front-card em {
  z-index: 2 !important;
}

.mv-front-modal {
  z-index: 2147483000 !important;
}

.mv-front-modal,
.mv-front-modal * {
  font-family: Myriad-Regular, Tahoma, Arial, sans-serif !important;
}

.mv-modal-close,
.mv-pause-state strong {
  font-family: Myriad_Bold, Myriad-Regular, Tahoma, Arial, sans-serif !important;
}

.mv-modal-backdrop {
  z-index: 0 !important;
}

.mv-modal-box {
  z-index: 2 !important;
}

.mv-front-arrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
  z-index: 5 !important;
  background: #2596BE !important;
  color: #fff !important;
}

.mv-front-arrow .mv-arrow-icon {
  display: block !important;
  width: 23px !important;
  height: 23px !important;
  flex: 0 0 23px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform: none !important;
  pointer-events: none !important;
}

.mv-front-arrow .mv-arrow-icon path {
  vector-effect: non-scaling-stroke !important;
}

.mv-next {
  right: auto !important;
  left: 4px !important;
}

.mv-prev {
  left: auto !important;
  right: 4px !important;
}

.mv-front-arrow:hover {
  background: #2596BE !important;
  color: #fff !important;
}

.mv-front-arrow.is-disabled {
  background: #fff !important;
  color: #94a3b8 !important;
  opacity: .45 !important;
  pointer-events: none !important;
}


/* v2.0.14 custom pause icon */
.mv-pause-state .mv-pause-icon-img {
  width: 74px !important;
  height: 74px !important;
  max-width: 74px !important;
  max-height: 74px !important;
  display: block !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.34)) !important;
  pointer-events: none !important;
}

.mv-pause-state .mv-pause-icon-default {
  display: block !important;
}
