body.category {
overflow: hidden !important;
}
.fpb-reels-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
height: 100dvh;
background: #000;
z-index: 99999;
}
.fpb-reels-swiper {
width: 100%;
height: 100%;
}
.fpb-reels-swiper .swiper-wrapper {
will-change: transform;
}
.fpb-reel-slide {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
color: #fff;
background: #000;
overflow: hidden;
}
.fpb-reel-bg-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
z-index: 1;
}
.fpb-reel-video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.fpb-youtube-player,
.fpb-other-player {
width: 100%;
height: 100%;
} .fpb-youtube-player iframe {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
transform: translate(-50%, -50%);
pointer-events: none;
}
@media (min-aspect-ratio: 16/9) {
.fpb-youtube-player iframe {
height: 56.25vw;
}
}
@media (max-aspect-ratio: 16/9) {
.fpb-youtube-player iframe {
width: 177.78vh;
}
}
.fpb-reel-video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.fpb-play-icon {
font-size: 60px;
color: rgba(255,255,255,0.8);
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.fpb-sound-icon {
position: absolute;
top: 20px;
right: 20px;
font-size: 24px;
background: rgba(0,0,0,0.5);
padding: 8px;
border-radius: 50%;
z-index: 100;
}
.fpb-reel-gradient-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60%;
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
z-index: 3;
pointer-events: none;
}
.fpb-reel-content {
position: relative;
z-index: 4;
padding: 20px;
padding-bottom: 40px;
}
.fpb-reel-title {
font-size: 1.5rem;
font-weight: bold;
margin: 10px 0;
line-height: 1.3;
}
.fpb-reel-title a {
color: #fff;
text-decoration: none;
}
.fpb-reel-excerpt {
font-size: 0.95rem;
margin-bottom: 15px;
color: rgba(255,255,255,0.9);
}
.fpb-reel-read-more {
display: inline-block;
padding: 8px 16px;
background: #e53e3e;
color: #fff;
border-radius: 20px;
text-decoration: none;
font-weight: bold;
}
.fpb-reels-back-btn {
position: absolute;
top: 20px;
left: 20px;
z-index: 999;
color: #fff;
background: rgba(0,0,0,0.5);
padding: 10px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.fpb-reels-loader {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
display: none;
}
.fpb-spinner {
width: 30px;
height: 30px;
border: 3px solid rgba(255,255,255,0.3);
border-radius: 50%;
border-top-color: #fff;
animation: fpb-spin 1s ease-in-out infinite;
}
@keyframes fpb-spin {
to { transform: rotate(360deg); }
}
.fpb-swipe-hint {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
pointer-events: none;
transition: opacity 0.5s ease;
}
.fpb-arrow-down {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-bottom: 10px;
}
.fpb-arrow-down span {
display: block;
width: 16px;
height: 16px;
border-bottom: 3px solid rgba(255,255,255,0.8);
border-right: 3px solid rgba(255,255,255,0.8);
transform: rotate(45deg);
margin: -4px;
animation: fpb-arrow-animate 1.5s infinite;
}
.fpb-arrow-down span:nth-child(2) {
animation-delay: -0.2s;
}
.fpb-arrow-down span:nth-child(3) {
animation-delay: -0.4s;
}
@keyframes fpb-arrow-animate {
0% {
opacity: 0;
transform: rotate(45deg) translate(-10px, -10px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: rotate(45deg) translate(10px, 10px);
}
}