/* Video Listing */
.vertical-video-listing {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 10px;
}
.vertical-video-listing .video-thumbnail {
 aspect-ratio: 4/5;
 object-position: top;
}
@media (max-width: 1024px) {
 .vertical-video-listing {
  grid-template-columns: repeat(4, 1fr);
 }
}
@media (max-width: 768px) {
 .vertical-video-listing {
  grid-template-columns: repeat(3, 1fr);
 }
}
.vertical-video-listing .video-thumbnail .bitmovinplayer-poster {
 background-size: cover !important; /* Zooms instead of stretching */
 background-position: center !important;
}

.vertical-video-listing .video-container {
 cursor: pointer !important;
 position: relative;
 border-radius: 8px !important;
 overflow: hidden;
 aspect-ratio: 0.5625;
 display: flex;
 justify-content: center;
 align-items: center;
}

.vertical-video-listing .video-thumbnail {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: opacity 0.5s;
}

.vertical-video-listing .video-info {
 position: absolute;
 bottom: 0;
 left: 0;
 width: 100%;
 padding-top: 35px !important;
 padding-bottom: 20px;
 background: linear-gradient(0deg, rgba(0, 0, 0, 1) 65%, rgba(0, 0, 0, 0) 100%);
}
.vertical-video-listing .video-info p {
 color: #fff;
 margin-bottom: 0;
 padding-left: 25px;
 padding-right: 20px;
 padding-bottom: 0 !important;
 font-weight: 500;
}
.vertical-video-listing .video-info .video-info-title {
 white-space: wrap !important;
 line-height: 1.2;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 margin-bottom: 8px;
 font-size: 18px !important;
 overflow-y: clip;
}
.vertical-video-listing .video-info .video-info-desc {
 font-size: 16px !important;
}


/* 
Vertical video page
*/
.vertical-video-page {
	 background: #1e1e1e;
	 margin: 0;
	 padding: 0;
	 position: relative;
	 height: 100dvh;
}
.vertical-video-page .swiper .swiper-wrapper .swiper-slide {
  transition: none !important;
  transform: none !important;
}
 .vertical-video-page p {
	 font-size: 16px;
	 margin-bottom: 10px;
	 line-height: 1.4;
}
 @media (min-width: 768px) {
	 .vertical-video-page p {
		 font-size: 18px;
	}
}
 .vertical-video-page .logo-back {
	 display: flex;
	 gap: 10px;
	 position: absolute;
	 top: 20px;
	 left: 20px;
}
 .vertical-video-page .logo-back .back-btn {
	 border-radius: 100%;
	 outline: none;
	 border: none;
	 width: 35px;
	 height: 35px;
	 font-size: 18px;
	 background-color: rgba(255, 255, 255, 0.3);
	 transition: 0.2s;
	 color: #fff;
	 z-index: 100;
}
 .vertical-video-page .logo-back .back-btn:hover {
	 background-color: rgba(255, 255, 255, 0.5);
}
 .vertical-video-page .logo-back .logo {
	 width: 120px;
	 display: none;
}
 @media (min-height: 750px), (min-width: 576px) {
	 .vertical-video-page .logo-back .logo {
		 display: block;
	}
}
 .vertical-video-page .swiper {
	 width: 100%;
	 height: 100%;
	 position: relative;
}
 .vertical-video-page .swiper .swiper-wrapper {
	 height: 100%;
	 position: relative;
}
.vertical-video-page .swiper .swiper-wrapper .swiper-slide {
  transition: none !important;
  transform: none !important;
}
 .vertical-video-page .swiper .swiper-navigation {
	 position: absolute;
	 top: 50%;
	 right: 20px;
	 transform: translateY(-50%);
	 display: flex;
	 justify-content: center;
	 flex-direction: column;
	 gap: 20px;
	 z-index: 10;
}
 .vertical-video-page .swiper .swiper-navigation .swiper-button-next, .vertical-video-page .swiper .swiper-navigation .swiper-button-prev {
	 position: unset;
	 left: unset;
	 right: unset;
	 background-color: rgba(255, 255, 255, 0.1);
	 /* color: #fff; */
	 border-radius: 50%;
	 padding: 25px;
	 margin-top: 0 !important;
	 transition: 0.1s;
}
 .vertical-video-page .swiper .swiper-navigation .swiper-button-next:after, .vertical-video-page .swiper .swiper-navigation .swiper-button-prev:after {
	 font-family: 'Font Awesome 6 Free';
	 font-weight: 900;
	 font-size: 20px;
	 color: #fff;
}
 .vertical-video-page .swiper .swiper-navigation .swiper-button-next:after {
	 content: '\f078'; /* FontAwesome chevron-down */
}
.vertical-video-page .swiper .swiper-navigation .swiper-button-prev:after {
	 content: '\f077'; /* FontAwesome chevron-up */
}
 .vertical-video-page .swiper .swiper-navigation .swiper-button-next:hover, .vertical-video-page .swiper .swiper-navigation .swiper-button-prev:hover {
	 background-color: rgba(255, 255, 255, 0.3);
}
 .vertical-video-page .video-title {
	 display: none !important;
	 width: 100%;
	 max-width: 350px;
	 white-space: wrap !important;
	 line-height: 1.2;
	 display: -webkit-box;
	 -webkit-line-clamp: 2;
	 -webkit-box-orient: vertical;
	 margin-bottom: 10px;
	 font-weight: 500;
	 overflow-y: hidden;
	 background-color: #1e1e1e;
}
 .vertical-video-page .video-wrapper {
	 width: 100%;
	 height: 100%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
}
 .vertical-video-page .video-wrapper .video-container {
	 max-width: 100vw;
	 height: 95vh;
	 aspect-ratio: 0.5625;
	 position: relative;
}
 .vertical-video-page .video-wrapper .bitmovinplayer-container {
	 border-radius: 12px;
}
 .vertical-video-page .video-wrapper .bitmovinplayer-container .bmpui-ui-watermark {
	 display: none;
}
 .vertical-video-page .video-wrapper .bitmovinplayer-container .bmpui-ui-hugeplaybacktogglebutton .bmpui-image {
	 display: none !important;
}
 .vertical-video-page .video-wrapper .bitmovinplayer-container .bmpui-ui-settingstogglebutton {
	 display: none;
}
 .vertical-video-page .video-wrapper .bitmovinplayer-container .bmpui-ui-titlebar > .bmpui-container-wrapper .bmpui-label-metadata-title {
	 line-height: 1.4;
}
 .vertical-video-page .video-wrapper .bitmovinplayer-container .bmpui-seekbar .bmpui-seekbar-playbackposition {
	 background-color: crimson !important;
}
 .vertical-video-page .video-wrapper .bitmovinplayer-container .bmpui-seekbar .bmpui-seekbar-playbackposition-marker {
	 background-color: rgba(220, 20, 60, 0.5) !important;
	 border: 0.1875em solid #dc143c;
}
 .vertical-video-page .video-wrapper .bitmovinplayer-container .bmpui-ui-recommendation-overlay, .vertical-video-page .video-wrapper .bitmovinplayer-container .bmpui-ui-buffering-overlay {
	 background-color: rgba(0, 0, 0, 0.5) !important;
}
 .vertical-video-page .video-wrapper .bitmovinplayer-container .bmpui-ui-piptogglebutton {
	 display: none;
}
 .vertical-video-page .video-wrapper .bitmovinplayer-container .videoAdUiSkipContainer {
	 bottom: 50px;
}
 .vertical-video-page .video-wrapper .ad-container {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 flex-direction: column;
}
 .vertical-video-page .video-wrapper .ad-container p {
	 font-size: 0.75rem !important;
}
 .vertical-video-page .video-wrapper .actions {
	position: absolute;
	bottom: 0;
	right: -60px;
	width: 50px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-family: 'Roboto', sans-serif;
	font-size: 14.4px;
  	font-weight: 400;
}
 .vertical-video-page .video-wrapper .actions label input {
	 display: none;
}
 .vertical-video-page .video-wrapper .actions .a-btn {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 flex-direction: column;
	 gap: 5px;
	 padding: 0;
	 border: 0;
	 outline: none;
	 margin-bottom: 0;
}
 .vertical-video-page .video-wrapper .actions .a-btn span {
	 display: block;
	 color: #fff;
}
 .vertical-video-page .video-wrapper .actions .a-btn .icon, 
 .vertical-video-page .video-wrapper .actions .a-btn.share-btn {
	 background-color: rgba(255, 255, 255, 0.1);
	 border-radius: 50%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 width: 50px;
	 height: 50px;
	 font-size: 20px;
	 transition: 0.1s;
}
 .vertical-video-page .video-wrapper .actions .a-btn:hover .icon {
	 background-color: rgba(255, 255, 255, 0.3);
}
 .vertical-video-page .video-wrapper .actions .a-btn.active .icon {
	 background-color: rgba(220, 20, 60, 0.5);
}
 .vertical-video-page .video-wrapper .actions .a-btn.checked {
	 cursor: default;
}
 .vertical-video-page .video-wrapper .actions .a-btn.checked .icon, .vertical-video-page .video-wrapper .actions .a-btn.checked:hover .icon {
	 background-color: rgba(255, 255, 255, 0.5);
}
 .vertical-video-page .modal .modal-content {
	 border-radius: 15px !important;
	 border: none;
	 padding: 10px 20px;
	 color: #111;
}
 .vertical-video-page .modal .modal-header {
	 border-bottom: 1px solid #ebedf9;
}
 .vertical-video-page .modal .modal-header .modal-title {
	 color: #000;
	 font-weight: 600;
}
 .vertical-video-page .modal .modal-header .modal-close {
	 background: #f2f3fb;
	 color: #878787;
	 border-radius: 50%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 height: 33px;
	 width: 33px;
	 cursor: pointer;
	 border: none;
	 outline: none;
	 transition: 0.2s;
}
 .vertical-video-page .modal .modal-header .modal-close:hover {
	 background: #e1e3f4;
}
 .vertical-video-page .share-modal {
	 --bs-modal-width: 450px;
	 background-color: rgba(0, 0, 0, 0.5);
}
 .vertical-video-page .share-modal .share-icons {
	 display: flex;
	 justify-content: center;
	 gap: 10px;
}
 .vertical-video-page .share-modal .share-icons .share-icon {
	 height: 50px;
	 width: 50px;
	 font-size: 23px;
	 border: 1px solid transparent;
	 background-color: transparent;
	 border-radius: 50%;
	 transition: 0.2s;
}
 .vertical-video-page .share-modal .share-icons .share-icon:hover {
	 color: #fff;
}
 .vertical-video-page .share-modal .share-icons .share-fb {
	 color: #1877f2;
	 border-color: #b7d4fb;
}
 .vertical-video-page .share-modal .share-icons .share-fb:hover {
	 background: #1877f2;
}
 .vertical-video-page .share-modal .share-icons .share-tw {
	 color: #000;
	 border-color: #d3d3d3;
}
 .vertical-video-page .share-modal .share-icons .share-tw:hover {
	 background: #000;
}
 .vertical-video-page .share-modal .share-icons .share-wa {
	 color: #25d366;
	 border-color: #bef4d2;
}
 .vertical-video-page .share-modal .share-icons .share-wa:hover {
	 background: #25d366;
}
 .vertical-video-page .share-modal .share-icons .share-te {
	 color: #08c;
	 border-color: #b3e6ff;
}
 .vertical-video-page .share-modal .share-icons .share-te:hover {
	 background: #08c;
}
 .vertical-video-page .share-modal .share-copy {
	 height: 45px;
	 border-radius: 4px;
	 padding: 0 5px;
	 border: 1px solid #e1e1e1;
	 display: flex;
	 align-items: center;
}
 .vertical-video-page .share-modal .share-copy ::selection {
	 background: transparent;
}
 .vertical-video-page .share-modal .share-copy i {
	 width: 50px;
	 font-size: 15px;
	 text-align: center;
}
 .vertical-video-page .share-modal .share-copy input {
	 width: 100%;
	 height: 100%;
	 border: none;
	 outline: none;
	 font-size: 15px;
	 padding-right: 10px;
}
 .vertical-video-page .share-modal .share-copy button {
	 color: #fff;
	 padding: 5px 18px;
	 background: #7d2ae8;
	 border-radius: 5px;
	 border: none;
	 outline: none;
}
 .vertical-video-page .share-modal .share-copy button:hover {
	 background: #8d39fa;
}
 .vertical-video-page .share-modal .share-copy.active {
	 border-color: #7d2ae8;
}
 .vertical-video-page .share-modal .share-copy.active i {
	 color: #7d2ae8;
}
 .vertical-video-page .loader-wrapper {
	 width: 100%;
	 height: 100%;
	 display: flex;
	 justify-content: center;
	 align-items: center;
}
 .vertical-video-page .loader-wrapper .loader {
	 width: 48px;
	 height: 48px;
	 display: block;
	 margin: 15px auto;
	 position: relative;
	 color: #fff;
	 box-sizing: border-box;
	 animation: rotation 1s linear infinite;
}
 .vertical-video-page .loader-wrapper .loader::after, .vertical-video-page .loader-wrapper .loader::before {
	 content: '';
	 box-sizing: border-box;
	 position: absolute;
	 width: 24px;
	 height: 24px;
	 top: 50%;
	 left: 50%;
	 transform: scale(0.5) translate(0, 0);
	 background-color: #fff;
	 border-radius: 50%;
	 animation: animloader 1s infinite ease-in-out;
}
 .vertical-video-page .loader-wrapper .loader::before {
	 background-color: #1c69d4;
	 transform: scale(0.5) translate(-48px, -48px);
}
 @keyframes rotation {
	 0% {
		 transform: rotate(0deg);
	}
	 100% {
		 transform: rotate(360deg);
	}
}
 @keyframes animloader {
	 50% {
		 transform: scale(1) translate(-50%, -50%);
	}
}
 

/* 
Ad Slide Specific Styles */
.swiper-slide.ad-slide {
    display: flex;
    align-items: center;
    justify-content: center;
	overflow: hidden;
}

.swiper-slide.ad-slide .video-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-slide.ad-slide .ad-container {
    text-align: center;
    width: 100%;
    max-width: 320px;
    padding: 20px;
}

.swiper-slide.ad-slide .ad-container p {
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 15px;
    opacity: 0.7;
    letter-spacing: 2px;
}

.swiper-slide.ad-slide .ad-container > div[id] {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Loading state for ads */
.swiper-slide.ad-slide .ad-container > div[id]:not([data-loaded])::before {
    content: "Loading ad...";
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Mobile responsive for ad slides */
@media (max-width: 768px) {
    .swiper-slide.ad-slide .ad-container {
        max-width: 300px;
        padding: 15px;
    }
    
    .swiper-slide.ad-slide .ad-container > div[id] {
        min-height: 200px;
    }
}

/* Desktop responsive for ad slides */
@media (min-width: 1024px) {
    .swiper-slide.ad-slide .ad-container {
        max-width: 300px;
    }
    
    .swiper-slide.ad-slide .ad-container > div[id] {
        min-height: 600px;
    }
} 

.vertical-video-page .video-wrapper span.bmpui-ui-label-text {
  white-space: normal !important;
}