/*























 * FoundFootage plugin styles























 *























 * Minimal styling to support the movie search interface when embedded via























 * shortcode. The colours are matched to the dark theme used by the























 * standalone version of the application. Bootstrap provides most of the























 * base styling; these rules adjust chips, cards and the overlay.























 */





/* YouTube Playlists (Seasons) */

















/* ============================





   FF Trailer Popup Overlay





   ============================ */











/* Dark overlay instead of Bootstrap backdrop look */





/* =========================





   SEASON + EPISODES LAYOUT (FINAL)





   ========================= */

















/* Poster Lightbox */





.ff-lightbox {





    position: fixed;





    inset: 0;





    background: rgba(0, 0, 0, 0.9);





    display: none;





    align-items: center;





    justify-content: center;





    z-index: 99999;





}











.ff-lightbox.active {





    display: flex;





    padding-top: 40px;





}











.ff-lightbox-inner {





    position: relative;











    max-width: 90vw;





    max-height: 90vh;





}











.ff-lightbox-inner img {





    max-width: 100%;





    max-height: 50vh;





    border-radius: 10px;





}





/* ============================





   FIX: Trailer Lightbox Sizing





   ============================ */











.ff-trailer-lightbox .ff-lightbox-inner {





    width: 90vw;





    max-width: 1400px;





    aspect-ratio: 16 / 9;





    height: auto;





    max-height: 85vh;





    background: #000;





    border-radius: 14px;





    overflow: hidden;





}











/* Force iframe to fill container */





.ff-trailer-lightbox iframe {





    width: 100% !important;





    height: 100% !important;





    display: block;





}





iframe {





    width: 800px;





    height: 600px;





}





@media (max-width: 768px) {





    .ff-trailer-lightbox .ff-lightbox-inner {





        width: 100vw;





        height: 56.25vw;

        /* 16:9 */





        max-height: 100vh;





        border-radius: 0;





    }











    .ff-lightbox-close {





        top: 12px;





        right: 12px;





    }





}











.ff-lightbox-close {





    position: absolute;





    top: -12px;





    right: -12px;











    width: 30px;





    height: 30px;





    border-radius: 50%;











    background: #ffffff;





    color: #111;





    border: none;





    cursor: pointer;











    display: flex;

    /* ✅ */





    align-items: center;

    /* ✅ vertical center */





    justify-content: center;

    /* ✅ horizontal center */











    font-size: 14px;





    font-weight: 700;





    line-height: 1;

    /* ✅ important */





}























.season-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    margin-bottom: 35px;
    overflow: visible;
}











/* LEFT: season card */





.season-info {





    flex: 0 0 160px;





    background: #111;





    border-radius: 10px;





    padding: 10px;





    text-align: center;





}











/* RIGHT: episodes container */





.season-row .episode-scroll-wrap {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Improve horizontal scrolling on mobile */
.episode-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

.episode-card {
    scroll-snap-align: start;
}









/* Horizontal scrolling episodes */





.season-row .episode-scroll {





    display: flex;





    gap: 20px;











    overflow-x: auto;





    overflow-y: hidden;





    white-space: nowrap;











    padding-bottom: 10px;





    scroll-behavior: smooth;





}











/* Fixed-width episode cards */





.season-row .episode-card {





    flex: 0 0 220px;





}





@media (max-width: 768px) {





    .season-row {





        flex-direction: column;





    }











    .season-info {





        display: flex;





        gap: 12px;





        align-items: center;





        text-align: left;





    }











    .season-info img {





        width: 80px;





    }





}











.ff-trailer-modal {





    background: rgba(0, 0, 0, 0.85);





    backdrop-filter: blur(10px);





}











/* Kill Bootstrap panel styling */





.ff-trailer-modal .modal-content {





    background: transparent;





    border: none;





}











/* Center popup container */





.ff-trailer-wrapper {





    width: 80vw;





    max-width: 1100px;





    aspect-ratio: 16 / 9;





    background: #000;





    border-radius: 14px;





    overflow: hidden;





    box-shadow: 0 25px 90px rgba(0, 0, 0, 0.9);





    animation: ffTrailerPop 0.25s ease-out;





}











/* Iframe fills popup */





.ff-trailer-wrapper iframe {





    width: 100%;





    height: 100%;





    border: 0;





}











/* Close button – floating popup style */





.ff-trailer-close {





    position: fixed;





    top: 24px;





    right: 26px;





    z-index: 1100;





    transform: scale(1.3);





    opacity: 0.9;





}











.ff-trailer-close:hover {





    opacity: 1;





}











/* Popup animation */





@keyframes ffTrailerPop {





    from {





        transform: scale(0.92);





        opacity: 0;





    }





    to {





        transform: scale(1);





        opacity: 1;





    }





}











.yt-playlist-card {





    cursor: pointer;





    transition: all 0.3s ease;





}











.yt-playlist-card:hover {





    transform: translateY(-3px);





    box-shadow: 0 5px 15px rgba(183, 14, 0, 0.2);





}











/* YouTube episode cards */





#playlist-episodes .episode-card img {





    width: 100%;





    height: 130px;





    object-fit: cover;





    border-bottom: 1px solid #333;





}











#playlist-episodes .episode-card h6 a:hover {





    color: #B70E00 !important;





}











/* Responsive adjustments for YouTube */





@media (max-width: 768px) {





    .season-scroll {





        overflow-x: auto;





        flex-wrap: nowrap;





    }











    .yt-playlist-card {





        min-width: 180px;





    }





}





img.emoji {





    display: none !important;





}





.tooltip-inner {





    background-color: #ffffff;





    color: #111;





    font-size: 12px;





    padding: 6px 10px;





    border-radius: 6px;





}











.bs-tooltip-top .tooltip-arrow::before {





    border-top-color: #111;





}





/* Episodes horizontal scroll (styled like crew) */





.episode-scroll-wrap {





    margin-top: 15px;





}











.season-title {





    color: #fff;





    font-size: 24px;





    font-weight: 600;





    margin-bottom: 15px;





    padding-left: 15px;





}







.episode-scroll {
    scrollbar-width: none;
}

.episode-scroll::-webkit-scrollbar {
    display: none;
}


.episode-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 20px;
    padding: 0 15px 20px 15px;
    width: max-content;   /* 🔥 THIS FIXES THE SCROLL */
}

.episode-scroll-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
}

.episode-card {
    flex: 0 0 220px;
}











.episode-scroll::-webkit-scrollbar {





    height: 8px;





}











.episode-scroll::-webkit-scrollbar-track {





    background: #222;





    border-radius: 10px;





}











.episode-scroll::-webkit-scrollbar-thumb {





    background: #444;





    border-radius: 10px;





}











.episode-card {





    flex: 0 0 auto;





    width: 220px;





    background: #1a1a1a;





    border-radius: 10px;





    overflow: hidden;





    transition: transform 0.3s ease, box-shadow 0.3s ease;





    cursor: pointer;





}











.episode-card:hover {





    transform: translateY(-5px);





    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);





}











.episode-card img {





    width: 100%;





    height: 130px;





    object-fit: cover;





    border-bottom: 1px solid #333;





}











.episode-meta {





    padding: 12px 15px;





}











.ep-num {





    font-size: 12px;





    color: #B70E00;





    font-weight: 600;





    margin-bottom: 5px;





    display: block;





}











.episode-card h6 {





    color: #fff;





    font-size: 14px;





    font-weight: 500;





    margin: 0 0 8px 0;





    line-height: 1.3;





    display: -webkit-box;





    -webkit-line-clamp: 2;





    -webkit-box-orient: vertical;





    overflow: hidden;





    text-overflow: ellipsis;





    min-height: 36px;





}





.episode-card {





    position: relative;





}











.episode-play-overlay {





    position: absolute;





    inset: 0;





    display: flex;





    align-items: center;





    justify-content: center;





    font-size: 48px;





    color: #fff;





    background: rgba(0, 0, 0, 0.45);





    opacity: 0;





    transition: opacity .2s ease;





    pointer-events: none;





}











.episode-card:hover .episode-play-overlay {





    opacity: 1;





}











.episode-card p {





    color: #aaa;





    font-size: 11px;





    margin: 0;





    line-height: 1.4;





}





.season-info h6 {





    color: #ffffff;





}





.season-info p {





    color: #ffffff;





}











.episode-overview {





    color: #ccc;





    font-size: 11px;





    margin-top: 5px;





    display: -webkit-box;





    -webkit-line-clamp: 3;





    -webkit-box-orient: vertical;





    overflow: hidden;





    text-overflow: ellipsis;





    line-height: 1.4;





}











/* Season episodes container */





#season-episodes {





    padding: 0 15px;





    margin-top: 20px;





}











.ff-pagination-wrapper {





    display: flex;





    justify-content: center;





    align-items: center;





    gap: 8px;





    margin: 20px 0;





    flex-wrap: wrap;





}











.ff-pagination-btn {





    padding: 8px 12px;





    border: 1px solid #4a5568;





    background-color: #2d3748;





    color: white;





    border-radius: 4px;





    cursor: pointer;





    font-size: 14px;





    transition: all 0.2s ease;





    min-width: 40px;





    text-align: center;





}











.ff-pagination-btn:hover:not(:disabled) {





    background-color: #4a5568;





    border-color: #718096;





}











.ff-pagination-btn.active {





    background-color: #4299e1;





    border-color: #4299e1;





    font-weight: bold;





}











.ff-pagination-btn:disabled {





    opacity: 0.5;





    cursor: not-allowed;





}











.ff-pagination-ellipsis {





    color: #a0aec0;





    padding: 0 8px;





}





.movie-card.youtube {





    aspect-ratio: 16 / 9;





}











.foundfootage-container {























    color: #CCCCCC;























    background-color: #666666;























    font-size: 16px;























    line-height: 25px;























    font-family: "Poppins", Sans-serif;























}











.movie-backdrop::before,











.movie-backdrop::after {











    pointer-events: none;











}























#ff-emptyMessage {























    flex: 0 0 100% !important;























    max-width: 100% !important;























}















































.ff-toast {























    position: fixed;























    bottom: 30px;























    right: 30px;























    background: #222;























    color: #fff;























    padding: 10px 18px;























    border-radius: 6px;























    opacity: 0;























    transition: opacity 0.3s ease;























    z-index: 99999;























}















































.ff-toast.show {























    opacity: 1;























}































































































.foundfootage-container .card {























    border-radius: 16px;























    overflow: hidden;























    transition: transform .2s ease, box-shadow .2s ease;























    cursor: pointer;























}















































.foundfootage-container .card:hover {























    transform: translateY(-2px);























    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);























}















































.foundfootage-container .chip {























    border: 1px solid rgba(255, 255, 255, .12);























    border-radius: 999px;























    padding: .1rem .6rem;























    font-size: .8rem;























    display: inline-flex;























    align-items: center;























    margin-right: .25rem;























    margin-bottom: .25rem;























}















































.foundfootage-container .poster-holder {























    aspect-ratio: 2/3;























    background: #1a1f2a;























}















































#ff-searchBtn {























    font-size: 24px;























    line-height: 36px;























    font-weight: 500;























    color: #B70E00;























    border: 2px solid #FFFFFF;























    border-radius: 6px;























    background-color: #272727;























    padding: 19px 50px;























}















































.form-label {























    font-size: 16px;























    line-height: 25px;























    font-weight: 400;























    color: #CCCCCC;























}























.popupform-label {























    color: #000 !important;























}















































.form-select {























    background-color: #272727;























    border-radius: 6px;























    border: none;























    padding: 14px 15px;























    font-size: 16px;























    line-height: 25px;























    font-weight: 400;























    color: #CCCCCC;















































}































































































.new-releases h2 {























    font-size: 24px;























    font-weight: 600;























    margin-bottom: 20px;























    color: #ccc;















































}















































.ff-card {























    border-radius: 18px;























    overflow: hidden;























    background-color: #1c1c1c;























    /* same as bg-dark-subtle feel */























    transition: transform 0.25s ease, box-shadow 0.25s ease;























    cursor: pointer;























    font-family: "Poppins", Sans-serif;























}















































.ff-card:hover {























    transform: translateY(-6px);























    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.65);























}















































/* Card image */























.ff-card img {























    width: 100%;























    height: 450px !important;















































    border-top-left-radius: 18px;























    border-top-right-radius: 18px;























}







































































/* Card title */























.ff-card-title {























    font-size: 20px;























    font-weight: 600;























    line-height: 24px;























    color: #FFFFFF;























    /* order: 2; */























    margin-bottom: 10px !important;























}















































/* Text (overview) */























.ff-card-text {















































    font-size: 16px;























    line-height: 25px;























    font-weight: 400;























    color: #CCCCCC !important;























    margin: 10px 0px;























}























.ff-card .card-body {























    padding: 0px 20px 20px 20px;























}















































/* Genre tags */























.ff-card .badge.bg-dark {























    font-size: 14px !important;























    font-weight: 400 !important;























    line-height: 21px !important;























    padding: 2px 10px 2px 10px !important;























    border: 1px solid #999999 !important;























    border-radius: 4px !important;























    color: #CCCCCC !important;























    height: 27px;























    background-color: #000000 !important;























}















































/* Star badge */























.ff-card .badge.bg-warning {























    font-weight: 600;























    border-radius: 6px;























    font-size: 0.8rem;























}















































/* Year badge */























.ff-card .badge.bg-secondary {























    font-size: 0.75rem;























    border-radius: 6px;























}















































/* Force-hide the Results header on load — highest possible priority */























/* Hide Results header on load — enforced */























/* #ff-resultsHeaderWrapper {























    display: none !important;























    visibility: hidden !important;























    opacity: 0 !important;























    height: 0 !important;























    overflow: hidden !important;























} */















































/* Show it only when JS adds .fade-in */























#ff-resultsHeaderWrapper.fade-in {























    display: block !important;























    visibility: visible !important;























    opacity: 1 !important;























    height: auto !important;























    overflow: visible !important;























    transition: opacity 0.25s ease-in-out;























}























/* #ff-resultsHeaderWrapper {























    display: none !important;























    visibility: hidden !important;























    opacity: 0 !important;























} */







































































/* #ff-resultsHeaderWrapper,























#ff-resultsGrid { 























    display: none;























    visibility: hidden;























    opacity: 0;























    transition: opacity 0.4s ease-in-out; 























} */























input:-internal-autofill-selected {























    background-color: transparent !important;























}























.r-sec {























    display: flex;























    align-items: center;























    justify-content: space-between;























    margin-top: 10px;























}























.yr span {























    border: 1px solid #999999;























    border-radius: 4px;























    font-size: 14px;























    line-height: 21px;























    font-weight: 400 !important;























    color: #FFFFFF !important;























    padding: 2px 5px;























}























.yr {























    margin-top: 10px;























    padding: 0px 20px;























    display: block;























}























.rt {























    font-size: 16px;























    line-height: 25px;























    font-weight: 400;























    color: #CCCCCC !important;























}























.rt i {























    color: #ffc107;























}























#ff-resultsGrid {























    display: flex !important;























    flex-wrap: wrap !important;























    gap: 20px;























}























#ff-resultsGrid .col-12,























#ff-resultsGrid .col-sm-6,























#ff-resultsGrid .col-lg-4,























#ff-resultsGrid .col-xl-3 {























    flex: 1 1 calc(25% - 20px);























    max-width: calc(25% - 20px);























}























@media (max-width: 992px) {























    #ff-resultsGrid .col-lg-4,























    #ff-resultsGrid .col-xl-3 {























        flex: 1 1 calc(50% - 20px);























        max-width: calc(50% - 20px);























    }























}























@media (max-width: 576px) {























    #ff-resultsGrid .col-sm-6,























    #ff-resultsGrid .col-12 {























        flex: 1 1 100%;























        max-width: 100%;























    }























}























.text-danger {

    color: red !important;

}























.text-warning {

    color: yellow !important;

}























































































































/* ------------------------------------------------------------------























   DETAIL PAGE SEARCH BAR — DOES NOT AFFECT HOMEPAGE























------------------------------------------------------------------ */























body.single-movie .ff-detail-search-wrapper {























    background: #1a1a1a;























    padding: 20px 0;























    border-bottom: 1px solid #333;























    margin-bottom: 25px;























}















































body.single-movie .ff-detail-input input {























    background: #333 !important;























    border: 1px solid #555;























    border-radius: 8px;























    color: #fff;























}















































body.single-movie .ff-detail-search-btn {























    background: #b70e00 !important;























    border: none;























    padding: 10px 25px;























    font-size: 18px;























}















































body.single-movie .ff-detail-adv-btn {























    border: 1px solid #ccc !important;























    padding: 10px 25px;























}















































body.single-movie .ff-detail-adv-panel {























    background: #2b2b2b;























    padding: 25px;























    border-radius: 10px;























    margin-bottom: 30px;























    border: 1px solid #444;























}















































/* HIDE FULL SEARCH UI ON DETAIL PAGE (PREVENT DUPLICATION) */























body.single-movie .foundfootage-container {























    display: none !important;























}































































































/* EMPTY SEARCH STATE */























.ff-empty-message {























    text-align: center;























    padding: 40px 20px;























    max-width: 600px;























    margin: 0 auto;























    animation: fadeIn 0.6s ease-out;























}















































.ff-empty-title {























    font-size: 1.9rem;























    font-weight: 600;























    color: #ffffff;























    margin-bottom: 10px;























    text-shadow: 0 0 10px rgba(255, 0, 0, 0.25);























}















































.ff-empty-text {























    color: #d0d0d0;























    font-size: 1.1rem;























    line-height: 1.6;























    opacity: 0.85;























}















































/* Smooth fade-in */























@keyframes fadeIn {























    from {

        opacity: 0;

        transform: translateY(10px);

    }























    to {

        opacity: 1;

        transform: translateY(0);

    }























}























#ff-advanced-toggle {























    text-decoration: none !important;























    border: none !important;























    padding: 0px !important;























    font-size: 24px;























    line-height: 36px;























    font-weight: 400;























}























#ff-advanced-toggle:hover,

#ff-advanced-toggle:focus {























    background-color: transparent !important;























}























#ff-advanced-toggle svg {























    margin-left: 15px;























}























#ff-advanced-panel {























    margin-top: 40px;























}























.ff-status-badge {























    font-weight: 600;























    text-transform: uppercase;























    font-size: 0.65rem;























    letter-spacing: .5px;























    padding: 4px 6px;























    border-radius: 4px;























}















































.bg-purple {























    background-color: #9b59b6 !important;























    color: #fff !important;























}































































































.actor-bio {























    background-color: #050505;























    padding: 20px;























}























.actor-bio .container {























    max-width: 1320px;























    min-height: 90vh;























    margin: 0 auto;























    font-family: "Poppins", Sans-serif;























}























.actor-bio {























    padding-bottom: 100px !important;























}























.ac-name {























    font-size: 40px;























    font-weight: 400;























    line-height: 55px;























    color: #FFFFFF;























    margin: 0px 0px 20px 0px;























}























.subtitle {























    font-size: 25px;























    line-height: 28px;























    font-weight: 500;























    color: #fff !important;























    margin-bottom: 10px;























}























.bio-detail-sec p {























    font-size: 18px;























    line-height: 27px;























    font-weight: 400;























    color: #CCCCCC !important;























}























.p-info-sec {























    margin-top: 30px;























}























.social-ic {























    margin-top: 20px;























}























.social-ic a {























    color: #fff;























    font-size: 24px;























}























.p-info-main {























    display: grid;























    grid-template-columns: repeat(4, 1fr);























    gap: 20px;























}























.p-info-main h4 {























    font-size: 16px;























    font-weight: 500;























    line-height: 25px;























    color: #FFFFFF;























    margin-bottom: 5px;























}























.p-info-main p {























    font-size: 14px;























    font-weight: 400;























    line-height: 21px;























    color: #CCCCCC;























    margin-bottom: 0px;























}























.actor-bio {























    font-family: 'Poppins', sans-serif;























}























.known-for-row h3 {























    font-size: 36px;























    font-weight: 500;























    line-height: 55px;























    color: #FCFCFC;























    margin-bottom: 30px;























}























.known-movie {























    display: flex;























    flex-direction: column-reverse;

    /* Moves title above image */























    width: 200px;























    text-align: center;























}















































.known-movie span {























    color: #fff;























    margin-bottom: 10px;























    font-size: 16px;























    font-weight: 500;























    display: -webkit-box;























    -webkit-box-orient: vertical;























    -webkit-line-clamp: 2;























    overflow: hidden;























    text-overflow: ellipsis;























    height: 48px;























}















































.known-movie img {























    width: 100%;























    height: 300px;























    object-fit: cover;















































}























.cm-detail-body {























    position: relative;























    z-index: 2;























}























.m-more-info-left h5 {























    font-size: 36px;























    font-weight: 500;























    line-height: 55px;























    color: #fff;















































}























.known-for-row .gap-3 {























    row-gap: 40px !important;























}
























































































































































































































body.search-active #ff-home-sections-start ~ *:not(#ff-resultsHeaderWrapper):not(#ff-resultsGrid) {
    display: none !important;
}




/* Ensure results grid is visible above any remaining home content */



/* ── SEARCH ACTIVE: Hide homepage content ─────────────────────────────────
   When a search/filter URL is loaded directly, hide all Elementor sections
   that are NOT the plugin's container. The plugin container gets a special
   attribute so we can target everything else. */





























.search-active .cm-detail-body {























    display: none;























}















































.analog-counter-wrapper {























    display: flex;























    align-items: center;























    font-size: 32px;























    font-weight: bold;























    color: #fff;























    gap: 12px;























    font-family: "Poppins", Sans-serif;























}























@media(max-width:767px) {























    .analog-counter-wrapper {























        flex-direction: column;























    }























}















































.analog-counter {























    display: flex;























    gap: 4px;























}















































.digit-column {























    width: 48px;







    height: 48px;





    overflow: hidden;



    color: #000!important;



    background: #fff;



    border: 2px solid #333;





    border-radius: 4px;





    position: relative;



}







.digit-inner {























    position: absolute;























    top: 0;























    left: 0;























    width: 100%;























    transition: transform 1s ease-in-out;























}















































.digit {























    height: 48px;























    display: flex;























    align-items: center;























    justify-content: center;























    font-family: monospace;























    font-size: 38px;























    color: #000!important;























}







































































.type-badge {























    position: absolute;























    top: 10px;























    right: 10px;























    padding: 4px 8px;























    border-radius: 4px;























    font-size: 12px;























    font-weight: bold;























    z-index: 20;























    color: #fff;























    background: rgba(0, 0, 0, 0.75);























    pointer-events: none;

    /* prevent clicking */























}















































/* Different colors per type */























.type-movie {

    background: #b80000;

}























.type-tv {

    background: #006fe6;

}























.type-short {

    background: #0f9d1a;

}























.collection-section {























    margin-top: 40px;























}















































.collection-heading {























    color: #fff;























    margin-bottom: 10px;























    font-size: 24px;























}















































.collection-title {























    color: #fff;























    margin-bottom: 15px;























    font-size: 20px;























}















































.tb-sec-main {























    display: flex;























    gap: 15px;























    overflow-x: auto;























    padding-bottom: 10px;























}















































.tb-sec img {























    border-radius: 6px;























    width: 150px;























    height: auto;























}















































.movie-title {























    color: #fff;























    margin-top: 6px;























    font-size: 14px;























}















































.ff-not-found-label {























    background: #900;























    color: #fff;























    padding: 2px 6px;























    border-radius: 4px;























    font-size: 11px;























    display: inline-block;























    margin-top: 4px;























}















































.ff_ads_scroll {

    display: flex;

    overflow-x: auto;

    gap: 12px;

    padding: 10px;

}























.ff_ads_scroll img {

    height: 120px;

    border-radius: 6px;

    border: 1px solid #333;

}























.ff-watched-btn,

.ff-like-btn,

.ff-save-btn,

.ff-yt-fav,

.ff-yt-watch,

.ff-yt-watched,

.ff-yt-rate-btn {











    padding: 12px 15px 8px 15px !important;











    border: none !important;











    /* width:46px;











    height:46px; */











    display: flex;











    justify-content: center;











    align-items: center;























    background-color: #444444 !important;











    border-radius: 50px !important;























}











.right-heading {











    font-family: "Poppins", Sans-serif;











    font-size: 18px;











    font-weight: 500;











    line-height: 27px;











    color: #fff;











    margin-bottom: 10px;











}











.w-search small {











    color: #ccc !important;











    font-size: 12px !important;











}











.w-search a {











    display: inline-flex;











    align-items: center;











    padding: 6px 8px;











    border-radius: 6px;











    background: #111;











    border: 1px solid #333;











    text-decoration: none;











    margin-right: 10px;











    font-size: 13px;











    color: #fff;











}











.w-search a img {











    height: 28px;











    margin-right: 8px;











}











.w-search a:hover {











    color: #fff;











}











.ff-provider-btn {











    margin-right: 10px;











}











.ff-available-on h3 {











    color: #fff;

    ;











    font-size: 20px;











    margin-bottom: 8px;











}











.ff-platform-card {











    color: #fff;











    font-size: 13px;











}











.ff-platform-logo img {











    width: 30px;











}











.ff-platform-content a,

.ff-platform-card a {











    color: #B70E00 !important;











    font-weight: 600;











}











.ff-meta,

.ff-notes {











    font-size: 13px;











}











#ffPosterModalImg {











    max-width: 350px !important;











}











.btn-close-white:hover {











    background-color: transparent !important;











    color: #000 !important;











}



.ff-open-video, .ff-open-video {

    background-color: #444444;

    font-family: "Poppins", Sans-serif;

    font-size: 18px;

    font-weight: 500;

    line-height: 27px;

    border: 1px solid #707070;

    border-radius: 20px;

    padding: 5px 15px;

    color: #fff !important;

    display: flex;

    align-items: center;

    gap: 10px;

}

.ff-open-video:hover{

     background-color: #444444!important;

         color: #fff!important;

           border: 1px solid #707070!important;

}

/* ================================================================
   SEO SEARCH URL — SERVER-SIDE BODY CLASS OVERRIDES
   Applied when WordPress detects /search/* /category/* etc in URL.
   These rules are instantaneous (no JS timing dependency) and ensure
   the results grid is visible and homepage hero is hidden immediately.
   ================================================================ */

/* Force results grid visible when body has server-injected search-active */
body.ff-seo-search #ff-resultsGrid,
body.search-active #ff-resultsGrid {
    display: flex !important;
    flex-wrap: wrap !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* Uses both the Elementor marker approach AND direct class targeting */
body.ff-seo-search #ff-home-sections-start ~ *:not(#ff-resultsHeaderWrapper):not(#ff-resultsGrid):not(#ff-pagination):not(.ff-search-bar-wrap):not(.ff-advanced-search-wrap):not(.ff-chips-bar),
body.search-active #ff-home-sections-start ~ *:not(#ff-resultsHeaderWrapper):not(#ff-resultsGrid):not(#ff-pagination):not(.ff-search-bar-wrap):not(.ff-advanced-search-wrap):not(.ff-chips-bar) {
    display: none !important;
}

/* Also hide common Elementor page sections by type on search pages */
body.ff-seo-search .elementor-section:not(.ff-search-section):not(.ff-results-section),
body.ff-seo-search .e-con:not(.ff-search-section):not(.ff-results-section) {
    /* Don't hide via elementor sections — too broad, may hide the search bar itself */
}

/* Ensure the results header is visible */
body.ff-seo-search #ff-resultsHeaderWrapper,
body.search-active #ff-resultsHeaderWrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* #ff-resultsGrid transition moved to main rule */







    /* 50% { opacity: 0.3; }
} */











/* =================================================
   VHS LOADER — hidden by default, shown by JS only
   Positioned OUTSIDE .foundfootage-container
   ================================================= */
#ff-loadingOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    pointer-events: none;
}

.vhs-loader-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.vhs-text {
    color: #fff;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
    animation: vhs-blink 1s infinite;
}

@keyframes vhs-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}



/* Results grid: visible when search active */
body.search-active #ff-resultsGrid {
    display: flex !important;
    flex-wrap: wrap !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 100;
}

body.search-active #ff-resultsHeaderWrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative;
    z-index: 100;
}

/* Hide Elementor sections that are NOT the plugin's parent section */
/* Old Elementor: .elementor-section, New Elementor: .e-con */
/* body.search-active .elementor-section:not(.ff-plugin-section-active):not(:has(#ff-foundfootage-wrapper)):not(:has(.foundfootage-container)),
body.search-active .e-con:not(.ff-plugin-section-active):not(:has(#ff-foundfootage-wrapper)):not(:has(.foundfootage-container)) {
    display: none !important;
} */

/* Fallback: JS-hidden elements */
.ff-hidden-by-search {
    display: none !important;
}

/* --------------------------------------------------------------------------
   Responsive video fixes

   Trailers and other embedded videos are wrapped in a Bootstrap `.ratio`
   container to maintain a 16:9 aspect ratio.  However, a generic rule
   earlier in this stylesheet sets `iframe` widths and heights to fixed
   pixel values (800px × 600px), which causes the video to be cropped or
   letterboxed on mobile devices.  To resolve this, we override the
   dimensions for any iframe inside a `.ratio` container so that it
   stretches to fill the container.

   See the May 2026 issue report for details on mobile trailer cropping.
*/
.ratio iframe {
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}

/* Advanced search panel: ensure it shows above everything */
#ff-advanced-search-panel,
.ff-advanced-search-wrap {
    position: relative;
    z-index: 200;
}

/* ══ Hide home sections when search active ══════════════════════════════

   TWO-LAYER APPROACH:
   Layer 1 (CSS :has — modern browsers): automatically finds and keeps
     the section containing the plugin, hides all others.
   Layer 2 (JS class — all browsers): JS adds .ff-plugin-section-active
     to the plugin's section AND directly hides siblings with jQuery.
   ═════════════════════════════════════════════════════════════════════ */

/* Layer 1: CSS :has() — hide any top-level section that does NOT contain the plugin */
body.search-active .elementor-section:not(:has(#ff-foundfootage-wrapper)) {
    display: none !important;
}
/* body.search-active .e-con:not(:has(#ff-foundfootage-wrapper)) {
    display: none !important;
} */

/* Layer 2: Class-based hiding (JS fallback) */
/* body.search-active .elementor-section:not(.ff-plugin-section-active),
body.search-active .e-con:not(.ff-plugin-section-active) {
    display: none !important;
} */

/* EXCEPTION: Never hide the plugin's own section */
body.search-active .ff-plugin-section-active {
    display: block !important;
}
body.search-active .ff-plugin-section-active .elementor-container,
body.search-active .ff-plugin-section-active .elementor-column,
body.search-active .ff-plugin-section-active .elementor-widget-wrap,
body.search-active .ff-plugin-section-active .elementor-widget,
body.search-active .ff-plugin-section-active .elementor-widget-container,
body.search-active .ff-plugin-section-active .e-con-inner,
body.search-active .ff-plugin-section-active .foundfootage-container {
    display: block !important;
}
body.search-active .ff-plugin-section-active #ff-resultsGrid {
    display: flex !important;
    flex-wrap: wrap !important;
    visibility: visible !important;
    opacity: 1 !important;
}
body.search-active .ff-plugin-section-active #ff-resultsHeaderWrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Fallback: directly hidden elements via JS */
.ff-hidden-by-search {
    display: none !important;
}
@media(max-width:800px){
iframe{
width:100%!important;
}

}
.ff-submenu {
    background: #1f1f1f;
    border: none;
    border-radius: 10px;
    padding: 0;
    overflow: hidden;
    margin-top: 5px;
}

.ff-submenu li {
    list-style: none;
}

.ff-submenu li a {
    display: block;
    padding: 12px 16px;
    color: #fff !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    transition: background 0.2s ease;
}

.ff-submenu li:last-child a {
    border-bottom: none;
}

.ff-submenu li a:hover,
.ff-submenu li a:focus {
    background: #2b2b2b;
    color: #fff !important;
}