.directorist-listing-single__thumb {
   position: relative;
}

.mp-video-preview {
   position: absolute;
   inset: 0;
   display: grid;
   align-items: center;
   justify-items: center;
   pointer-events: none;
   z-index: 3;
}

.mp-video-preview__poster {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   z-index: 0;
   opacity: 0;
   transition: opacity 160ms ease;
}

.mp-video-preview.is-loading .mp-video-preview__poster,
.mp-video-preview.is-playing .mp-video-preview__poster,
.mp-video-preview.is-error .mp-video-preview__poster {
   opacity: 1;
}

.mp-video-preview__frame {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   border: 0;
   display: block;
   pointer-events: none;
   z-index: 2;
}

.mp-video-preview__overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35));
   opacity: 0;
   transition: opacity 160ms ease;
   z-index: 1;
}

.mp-video-preview.is-ready .mp-video-preview__overlay {
   opacity: 0;
}

.directorist-listing-single__thumb.mp-video-preview--hover .mp-video-preview__overlay,
.directorist-listing-single__thumb:hover .mp-video-preview__overlay,
.directorist-listing-single__thumb:focus-within .mp-video-preview__overlay,
.mp-video-preview.is-loading .mp-video-preview__overlay,
.mp-video-preview.is-playing .mp-video-preview__overlay,
.mp-video-preview.is-error .mp-video-preview__overlay {
   opacity: 1;
}

.mp-video-preview__btn {
   position: absolute;
   right: 22px;
   bottom: 24px;
   width: 37px;
   height: 37px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.25);
   background: rgba(0, 0, 0, 0.55);
   color: #fff;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   pointer-events: auto;
   transition: filter 140ms ease, transform 120ms ease, background 140ms ease;
   z-index: 4;
}

.mp-video-preview__btn:hover {
   filter: brightness(1.1);
}

.mp-video-preview__btn:active {
   transform: scale(0.96);
}

.mp-video-preview__btn:focus,
.mp-video-preview__btn:focus-visible,
.mp-video-preview__close:focus,
.mp-video-preview__close:focus-visible {
   outline: 2px solid rgba(59, 130, 246, 0.65);
   outline-offset: 2px;
}

.mp-video-preview__btn svg {
   width: 18px;
   height: 18px;
   display: block;
}

.mp-video-preview__spinner {
   width: 26px;
   height: 26px;
   border-radius: 999px;
   border: 3px solid rgba(255, 255, 255, 0.22);
   border-top-color: rgba(255, 255, 255, 0.85);
   animation: mpSpin 700ms linear infinite;
   pointer-events: none;
   opacity: 0;
   transition: opacity 140ms ease;
   z-index: 4;
}

.mp-video-preview.is-loading .mp-video-preview__spinner {
   opacity: 1;
}

.mp-video-preview__close {
   position: absolute;
   top: 8px;
   right: 8px;
   width: 32px;
   height: 32px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.20);
   background: rgba(0, 0, 0, 0.55);
   color: #fff;
   display: none;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   pointer-events: auto;
   transition: filter 140ms ease, transform 120ms ease, background 140ms ease;
   z-index: 5;
}

.mp-video-preview.is-playing .mp-video-preview__close {
   display: inline-flex;
}

.mp-video-preview__close:hover {
   filter: brightness(1.1);
}

.mp-video-preview__close:active {
   transform: scale(0.96);
}

.mp-video-preview__msg {
   position: absolute;
   left: 10px;
   right: 10px;
   bottom: 10px;
   padding: 8px 10px;
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.18);
   background: rgba(0, 0, 0, 0.60);
   color: #fff;
   font-size: 13px;
   line-height: 1.35;
   display: none;
   pointer-events: auto;
   z-index: 5;
}

.mp-video-preview.is-error .mp-video-preview__msg {
   display: block;
}

.mp-video-preview__msg a {
   color: #fff;
   text-decoration: underline;
}

@keyframes mpSpin {
   to {
      transform: rotate(360deg);
   }
}

.directorist-listing-single__thumb.mp-video-preview--hover .directorist-swiper__navigation,
.directorist-listing-single__thumb.mp-video-preview--hover .directorist-swiper__nav,
.directorist-listing-single__thumb:hover .directorist-swiper__navigation,
.directorist-listing-single__thumb:hover .directorist-swiper__nav,
.directorist-listing-single__thumb:focus-within .directorist-swiper__navigation,
.directorist-listing-single__thumb:focus-within .directorist-swiper__nav {
   opacity: 1 !important;
   visibility: visible !important;
   pointer-events: auto !important;
   z-index: 6;
}

@media (prefers-reduced-motion: reduce) {
   .mp-video-preview__overlay,
   .mp-video-preview__poster,
   .mp-video-preview__btn,
   .mp-video-preview__close,
   .mp-video-preview__spinner {
      transition: none;
      animation: none;
   }
}