/* --- Point A: Main Wrapper & Container --- */
.rtx-vdo-main-wrapper {
    width: 100%;
    margin: 20px 0;
    box-sizing: border-box;
}

.rtx-vdo-container {
    display: grid;
    /* ডাইনামিক গ্যাপ এবং কলাম */
    gap: var(--vdo-gap, 20px);
    grid-template-columns: repeat(var(--vdo-col-desk, 4), 1fr);
}

/* --- Point B: Responsive with Media Queries --- */
@media (max-width: 1024px) {
    .rtx-vdo-container {
        grid-template-columns: repeat(var(--vdo-col-tab, 2), 1fr);
    }
}

@media (max-width: 767px) {
    .rtx-vdo-container {
        grid-template-columns: repeat(var(--vdo-col-mob, 1), 1fr);
    }
}

/* --- Point C: Video Item Styling --- */
.rtx-vdo-inner {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.rtx-vdo-inner:hover {
    transform: translateY(-5px);
}


/* --- Point D: Thumbnail & Overlay (Play Icon Always Visible) --- */
.rtx-vdo-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9; 
    background-size: cover;
    background-position: center;
    position: relative;
    cursor: pointer;
}

.rtx-vdo-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* শুরুতে হালকা কালো ওভারলে থাকবে */
    background: rgba(0,0,0,0.2); 
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1; /* সব সময় দেখা যাবে */
    transition: all 0.3s ease;
}

/* হোভার করলে ওভারলে একটু ডার্ক হবে */
.rtx-vdo-inner:hover .rtx-vdo-overlay {
    background: rgba(0,0,0,0.4);
}

/* --- Point E: Fluid Typography (CLAMP ব্যবহার) --- */
.rtx-vdo-content {
    padding: 15px;
}

.rtx-vdo-title {
    margin: 0;
    font-weight: 600;
    line-height: 1.4;
    /* Clamp: ছোট স্ক্রিনে 16px, বড় স্ক্রিনে সর্বোচ্চ 24px হবে স্মুথলি */
    font-size: clamp(16px, 2vw + 1rem, 24px); 
}

/* --- Point F: Filter Bar Global Style --- */
.rtx-vdo-filter-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

.rtx-vdo-filter-btn {
    padding: 10px 25px;
    background: #290202;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.rtx-vdo-filter-btn.active, 
.rtx-vdo-filter-btn:hover {
    background: #2271b1;
    color: #fff;
    border-color: #2271b1;
}

/* --- Point G: Glassmorphism Filter Bar (Transparent Base) --- */
.rtx-vdo-filter-wrapper {
    width: 100%;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
}

.rtx-vdo-filter-bar {
    display: flex;
    gap: 18px;
    padding: 10px;
}

/* বেস বাটন - এখন স্বচ্ছ এবং মডার্ন */
.rtx-vdo-filter-btn {
    padding: 14px 35px;
    /* ব্যাকগ্রাউন্ড অপাসিটি কমানো হয়েছে (০.৬) */
    background: rgba(255, 255, 255, 0.3); 
    backdrop-filter: blur(10px); /* পেছনের অংশ ঝাপসা দেখাবে */
    color: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.rtx-vdo-filter-btn span {
    position: relative;
    z-index: 5; /* টেক্সট যেন সবকিছুর উপরে থাকে */
}

/* ক্লাসিক বাটন একটিভ স্টেট */
.rtx-filter-classic .rtx-vdo-filter-btn.active {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
}

/* --- Point H: PRO - Glowing Button (No Color Change, Just Shine) --- */
.rtx-filter-glowing .rtx-vdo-filter-btn:hover {
    transform: translateY(-3px);
}

/* বাটনের ভেতর দিয়ে একটি সিলভার সাইন/ঝলক চলে যাবে */
.rtx-filter-glowing .rtx-vdo-filter-btn::after {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    transition: 0.6s;
    z-index: 4;
}

.rtx-filter-glowing .rtx-vdo-filter-btn:hover::after {
    left: 150%;
}

/* --- Point I: PRO - Multi-Color Neon Mouse Follower --- */
.rtx-filter-neon .rtx-vdo-filter-btn {
    background: rgba(255, 255, 255, 0.4);
}

.rtx-vdo-neon-light {
    position: absolute;
    top: 0; left: 0;
    width: 160px; height: 160px;
    /* মাল্টি-কালার নিয়ন ইফেক্ট (Blue, Purple, Pink) */
    background: radial-gradient(circle, 
        rgba(87, 108, 141, 0.205) 5%, 
        rgba(88, 47, 184, 0.295) 40%, 
        rgba(105, 42, 74, 0.349) 55%, 
        transparent 80%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: opacity 0.4s ease;
}

.rtx-vdo-filter-btn:hover .rtx-vdo-neon-light {
    opacity: 1;
}

.rtx-filter-neon .rtx-vdo-filter-btn.active {
    background: rgba(15, 23, 42, 0.9);
    color: #fff;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

/* --- Point J: PRO - Magic Meteor Border (Falling Star Effect) --- */
.rtx-filter-border_anim .rtx-vdo-filter-btn {
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

/* হোভার করলে আসল বর্ডার উধাও হবে */
.rtx-filter-border_anim .rtx-vdo-filter-btn:hover {
    border-color: transparent;
    transform: translateY(-3px);
    background: #fff;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* উল্কা পিণ্ডের সেই উজ্জ্বল রেখা (The Shooting Star) */
.rtx-filter-border_anim .rtx-vdo-filter-btn:hover::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 200%; height: 200%;
    /* এখানে কনিক গ্রেডিয়েন্টকে এমনভাবে সেট করা হয়েছে যাতে শুধু এক কোণায় উজ্জ্বল আলো থাকে */
    background-image: conic-gradient(
        transparent 70%, 
        rgba(37, 99, 235, 0.2) 80%, 
        #2563eb 95%, 
        #fff 100%
    );
    animation: rtx_meteor_rotate 1.5s linear infinite; /* স্পিড একটু বাড়িয়েছি */
    z-index: 1;
}

/* ভেতরের মাস্কিং - যাতে আলো শুধু চিকন বর্ডার দিয়ে দেখা যায় */
.rtx-filter-border_anim .rtx-vdo-filter-btn::after {
    content: '';
    position: absolute;
    inset: 2px; /* এটিই বর্ডারের পুরুত্ব নিয়ন্ত্রণ করবে */
    background: #fff;
    border-radius: 13px;
    z-index: 2;
}

/* টেক্সট যেন আলোর উপরে থাকে */
.rtx-filter-border_anim .rtx-vdo-filter-btn span {
    position: relative;
    z-index: 5;
    color: #1e293b;
}

@keyframes rtx_meteor_rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* একটিভ স্টেটের জন্য সলিড লুক */
.rtx-filter-border_anim .rtx-vdo-filter-btn.active {
    background: #1e293b !important;
    color: #fff !important;
    border: 1px solid #1e293b;
}
.rtx-filter-border_anim .rtx-vdo-filter-btn.active::after {
    background: #1e293b;
}
.rtx-filter-border_anim .rtx-vdo-filter-btn.active span {
    color: #fff;
}

/* --- Point K: Professional Glassmorphism Load More Button --- */
.rtx-vdo-item-hidden {
    display: none;
}

.rtx-vdo-loadmore-container {
    text-align: center;
    margin-top: 50px;
    padding-bottom: 20px;
}

.rtx-vdo-loadmore-btn {
    padding: 14px 45px;
    /* হালকা সাদা স্বচ্ছ ব্যাকগ্রাউন্ড */
    background: rgba(255, 255, 255, 0.15); 
    color: #1e293b;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50px; /* পিল শেপ বাটন */
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    backdrop-filter: blur(10px); /* পেছনের অংশ ঝাপসা দেখানোর ম্যাজিক */
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* হোভার করলে বাটনটি উজ্জ্বল এবং সলিড হবে */
.rtx-vdo-loadmore-btn:hover {
    background: #2271b1;
    color: #ffffff;
    border-color: #2271b1;
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 30px rgba(34, 113, 177, 0.3);
}

.rtx-vdo-loadmore-btn:active {
    transform: translateY(0) scale(0.95);
}

/* --- Point L: Play Icon Styles --- */
.rtx-vdo-play-btn {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
}

/* Style 1: Circle Flat (Classic Red) */
.rtx-icon-s1 { background: #ff0000; border-radius: 50%; }
.rtx-icon-s1::after { content: ''; border-style: solid; border-width: 10px 0 10px 15px; border-color: transparent transparent transparent #fff; margin-left: 5px; }

/* Style 2: Modern Outline */
.rtx-icon-s2 { background: rgba(255,255,255,0.2); border: 2px solid #fff; border-radius: 50%; backdrop-filter: blur(5px); }
.rtx-icon-s2::after { content: ''; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; margin-left: 5px; }

/* Style 3: Pulse Glow */
.rtx-icon-s3 { background: #2271b1; border-radius: 50%; box-shadow: 0 0 0 rgba(34, 113, 177, 0.4); animation: rtx_pulse 2s infinite; }
.rtx-icon-s3::after { content: ''; border-style: solid; border-width: 10px 0 10px 15px; border-color: transparent transparent transparent #fff; margin-left: 5px; }

@keyframes rtx_pulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 113, 177, 0.7); }
  70% { box-shadow: 0 0 0 15px rgba(34, 113, 177, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 113, 177, 0); }
}

/* --- Point M: Hover Animations --- */

/* 1. Zoom In */
.rtx-hover-zoom .rtx-vdo-thumbnail { transition: transform 0.5s ease; }
.rtx-hover-zoom:hover .rtx-vdo-thumbnail { transform: scale(1.1); }

/* 2. Slide Up (Title rises) */
.rtx-hover-slide .rtx-vdo-content { transform: translateY(20px); opacity: 0; transition: 0.4s; }
.rtx-hover-slide:hover .rtx-vdo-content { transform: translateY(0); opacity: 1; }

/* 3. Grayscale to Color */
.rtx-hover-grayscale .rtx-vdo-thumbnail { filter: grayscale(100%); transition: 0.5s; }
.rtx-hover-grayscale:hover .rtx-vdo-thumbnail { filter: grayscale(0); }

/* 4. Overlay Shine */
.rtx-hover-shine .rtx-vdo-thumbnail::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-25deg); transition: 0.6s;
}
.rtx-hover-shine:hover .rtx-vdo-thumbnail::after { left: 150%; }

/* 5. 3D Tilt (Simple CSS Version) */
.rtx-hover-tilt:hover .rtx-vdo-inner {
    transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* --- Point L: Play Icon Styles (Centered Fix) --- */
.rtx-vdo-play-btn::after {
    content: '';
    border-style: solid;
    border-width: 12px 0 12px 20px; /* ত্রিভুজের সাইজ */
    border-color: transparent transparent transparent #fff;
    margin-left: 6px; /* এই মার্জিনটি ত্রিভুজকে একদম মাঝখানে বসাবে */
}

/* --- Point N: Inline Player (Hover Preview) --- */
.rtx-vdo-inline-player {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10;
    background: #000;
    pointer-events: none; /* যাতে হোভার অবস্থাতেও ক্লিক করা যায় */
}

.rtx-vdo-inline-player iframe, 
.rtx-vdo-inline-player video {
    width: 100%; height: 100%;
    border: none;
    object-fit: cover; /* ভিডিও যেন ঘর জুড়ে থাকে */
}

/* --- Point O: Netflix Slider Layout Styling (Full & Final Fix) --- */
.rtx-vdo-slider-layout .rtx-vdo-inner {
    background: transparent; /* স্লাইডারে কার্ডের পেছনে আলাদা কালার থাকবে না */
    box-shadow: none;
    overflow: visible;
}

.rtx-vdo-slider-layout .rtx-vdo-thumbnail {
    aspect-ratio: 2 / 3 !important; /* প্রফেশনাল পোর্ট্রেট রেশিও */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #1a1a1a; /* ছবি লোড না হলেও কার্ড কালো থাকবে, সাদা না */
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.rtx-vdo-slider-content {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 15px 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 5;
    text-align: center;
}

.rtx-vdo-slider-layout .rtx-vdo-title {
    margin: 0;
    font-weight: 600;
    line-height: 1.2;
    -webkit-text-stroke: 0.2px rgba(0,0,0,0.5);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* --- Point P: Slider Navigation Arrows (Standard UI) --- */
.rtx-vdo-slider-layout .swiper-button-next, 
.rtx-vdo-slider-layout .swiper-button-prev {
    width: 40px !important;
    height: 40px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
    border-radius: 50%;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.rtx-vdo-slider-layout .swiper-button-next::after, 
.rtx-vdo-slider-layout .swiper-button-prev::after {
    font-size: 16px !important;
    font-weight: bold;
}

.rtx-vdo-slider-layout .swiper-button-next:hover, 
.rtx-vdo-slider-layout .swiper-button-prev:hover {
    background: #2271b1 !important;
    border-color: #2271b1;
}

/* --- Point Q: Masonry Wall Layout (Full & Final Version) --- */

/* ১. ম্যাসোনারি মেইন কন্টেইনার - নেগেটিভ মার্জিন দিয়ে গ্যাপ ব্যালেন্স করা */
.rtx-vdo-masonry-grid {
    width: auto !important;
    margin: 0 calc(var(--vdo-gap) / -2) !important; 
    position: relative;
    display: block;
    clear: both;
}

/* ২. ম্যাসোনারি আইটেম ও সাইজার (কলাম ক্যালকুলেশন) */
.rtx-vdo-masonry-layout .rtx-vdo-item,
.rtx-vdo-masonry-layout .rtx-vdo-grid-sizer {
    width: calc(100% / var(--vdo-col-desk));
}

/* ৩. রেসপন্সিভ ব্রেকপয়েন্ট (ট্যাবলেট ও মোবাইল) */
@media (max-width: 1024px) {
    .rtx-vdo-masonry-layout .rtx-vdo-item,
    .rtx-vdo-masonry-layout .rtx-vdo-grid-sizer {
        width: calc(100% / var(--vdo-col-tab));
    }
}
@media (max-width: 767px) {
    .rtx-vdo-masonry-layout .rtx-vdo-item,
    .rtx-vdo-masonry-layout .rtx-vdo-grid-sizer {
        width: calc(100% / var(--vdo-col-mob));
    }
}

/* ৪. আইটেম স্টাইল - গ্যাপটিকে প্যাডিং হিসেবে ব্যবহার করা */
.rtx-vdo-masonry-layout .rtx-vdo-item {
    padding: 0 calc(var(--vdo-gap) / 2);
    margin-bottom: var(--vdo-gap);
    box-sizing: border-box;
    float: left;
}

/* ৫. কার্ডের মেইন ঘর (Inner Box) */
.rtx-vdo-masonry-layout .rtx-vdo-inner {
    position: relative;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.rtx-vdo-masonry-layout .rtx-vdo-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
}

/* ৬. টাইটেল ওভারলে - হালকা ব্লার এবং বটম পজিশন */
.rtx-vdo-masonry-content {
    position: absolute;
    bottom: 0; 
    left: 0; 
    width: 100%;
    padding: 15px 12px;
    
    /* জাদুকরী হালকা ব্লার ইফেক্ট */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    
    /* নিচ থেকে হালকা কালো শেড (যাতে টেক্সট পড়া যায়) */
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 100%);
    
    z-index: 5;
    border-radius: 0 0 12px 12px;
    box-sizing: border-box;
}

/* টাইটেল টাইপোগ্রাফি */
.rtx-vdo-masonry-layout .rtx-vdo-title {
    margin: 0;
    font-weight: 600;
    line-height: 1.3;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    /* টেক্সট কালার এবং সাইজ ডাইনামিকালি ইনলাইন সিএসএস থেকে আসবে */
}