/* Point 1: Master Boxing & Safety Reset */
.rtx-mg-container {
    max-width: 1200px !important; 
    margin: 0 auto !important; 
    width: 100% !important;
    padding: 0 25px !important; 
    box-sizing: border-box !important;
    display: block !important;
    clear: both !important;
}

@media (max-width: 600px) {
    .rtx-mg-container { padding: 0 8px !important; }
}

/* Point 2: Typography Control (H3) */
.rtx-mg-container h3 {
    margin: 0; padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px; font-weight: 700; color: inherit; line-height: 1.3;
}

/* Point 3: Grid Base */
.rtx-mg-grid { display: grid; width: 100% !important; }

/* Point 4: Item Container */
.rtx-mg-item-container { display: flex; flex-direction: column; width: 100%; }

/* Point 5: Inner Box & Border Radius */
.rtx-mg-item-inner { position: relative !important; overflow: hidden; width: 100%; height: 100%; cursor: pointer; background-color: #f0f0f0; }

/* Point 6: Image Handling (Object Fit) */
.rtx-mg-item-inner img { width: 100% !important; height: 100% !important; object-fit: cover; transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); display: block; }

/* Point 7: General Overlay */
.rtx-mg-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 2; background: rgba(0, 0, 0, 0.5); }
.rtx-mg-item-inner:hover .rtx-mg-overlay { opacity: 1; visibility: visible; }

/* Point 8: Filter Buttons Alignment & Horizontal Scroll (FIXED) */
.rtx-mg-filter-wrapper {
    margin-bottom: 40px;
    display: flex;
    gap: 15px;
    /* মোবাইল ও ট্যাবলেটে হরিজন্টাল স্ক্রল লজিক */
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* আইফোনে স্মুথ স্ক্রলিং */
    padding: 10px 5px;
    scrollbar-width: none; /* ফায়ারফক্সের জন্য স্ক্রলবার হাইড */
    -ms-overflow-style: none; /* IE এর জন্য স্ক্রলবার হাইড */
}

/* ক্রোম এবং সাফারিতে স্ক্রলবার হাইড করার জন্য */
.rtx-mg-filter-wrapper::-webkit-scrollbar {
    display: none;
}

.filter-pos-left { justify-content: flex-start; }
.filter-pos-center { justify-content: center; }
.filter-pos-right { justify-content: flex-end; }

/* Point 9: Animated Glowing Filter Buttons (Responsive Update) */
.rtx-filter-btn {
    position: relative;
    background: rgba(25, 25, 25, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 10px 28px;
    border-radius: 50px;
    color: #444;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    flex-shrink: 0; /* বাটন যাতে চ্যাপ্টা না হয় */
}

/* ট্যাবলেট ও মোবাইল স্কেলিং */
@media (max-width: 992px) {
    .rtx-filter-btn {
        padding: 8px 20px;
        font-size: 12px;
    }
}

@media (max-width: 600px) {
    .rtx-filter-btn {
        padding: 6px 15px;
        font-size: 11px;
        letter-spacing: 1px;
    }
    /* মোবাইলে বাটন পজিশন সবসময় বাম থেকে শুরু হবে স্ক্রলিং সুবিধার জন্য */
    .rtx-mg-filter-wrapper {
        justify-content: flex-start !important;
    }
}

/* হোভার করলে পেছনের আভা (The Glow Behind - Preserved) */
.rtx-filter-btn:hover, 
.rtx-filter-btn.active {
    background: #191919;
    color: #fff;
    border-color: #2271b1;
    box-shadow: 0 0 15px rgba(34, 113, 177, 0.4), 0 0 30px rgba(34, 113, 177, 0.2);
    transform: translateY(-3px);
}

/* Point 10: Masonry Layout Fixes */
.masonry-layout .rtx-mg-item-inner img { object-fit: contain; }
.masonry-layout .pos-below-card { text-align: left; font-size: 13px; }

/* Point 11: Neon Load More Button Base (Fixed Spacing - Problem 6) */
.rtx-mg-load-more-wrapper { 
    text-align: center; 
    margin-top: 30px !important; /* ইমেজ থেকে ঠিক ৩০পিএক্স নিচে */
    padding-bottom: 20px;
    width: 100%;
    clear: both;
    display: block;
}

.rtx-mg-load-more-btn {
    position: relative; display: inline-block; padding: 16px 45px; color: #fff;
    background: rgba(41, 40, 40, 0.6); backdrop-filter: blur(10px);
    text-transform: uppercase; letter-spacing: 3px; font-size: 14px; font-weight: 700;
    overflow: hidden; transition: 0.5s; border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer; border-radius: 4px; outline: none;
}

/* Point 12: Neon Glow & Animation Keyframes (Preserved) */
.rtx-mg-load-more-btn:hover { background: #2271b1; box-shadow: 0 0 10px #2271b1, 0 0 60px #2271b1; transform: translateY(-3px); }
.rtx-mg-load-more-btn span { position: absolute; display: block; }
.rtx-mg-load-more-btn span:nth-child(1) { top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #078cf8); animation: btn-anim1 1s linear infinite; }
/* (Baki animations should be here...) */
@keyframes btn-anim1 { 0% { left: -100%; } 50%,100% { left: 100%; } }

/* Point 13-14: Title Positions (Preserved) */
.rtx-mg-title-inside { position: absolute; inset: 0; display: flex; padding: 20px; color: #fff; pointer-events: none; z-index: 10; opacity: 1; }
.pos-inside-bottom { align-items: flex-end; justify-content: flex-start; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%); }
.pos-inside-center { align-items: center; justify-content: center; text-align: center; background: rgba(0,0,0,0.3); }
.pos-below-card { padding: 12px 2px; text-align: left; }

/* Point 15: Accordion Mobile 3D Grow Fix (Horizontal 40px) */
@media (max-width: 768px) {
    .rtx-mg-accordion-container {
        height: 320px !important; /* মোবাইলে হাইট আরও অপ্টিমাইজড */
        gap: 6px !important;
        align-items: center !important;
        padding: 0 !important;
    }
    
    .rtx-mg-accordion-container .rtx-acc-item {
        flex: 0 0 40px !important; /* তোমার চাওয়া ৪০পিএক্স */
        height: 80% !important;
        border-radius: 10px !important;
    }
    
    .rtx-mg-accordion-container .rtx-acc-item:hover {
        flex: 0 0 240px !important;
        height: 100% !important;
        transform: scale(1.02); /* সামান্য জুম ইফেক্ট */
    }
    
    .rtx-acc-caption h3 { font-size: 14px !important; }
}

/* Point 16: Album Layout Fix (Fluid Square & No Overlap) */
.rtx-album-grid {
    display: grid !important;
    width: 100% !important;
    justify-content: center !important;
}

.rtx-album-card-wrapper {
    width: 100% !important;
    max-width: 280px !important; /* এটি নিশ্চিত করবে কার্ড ২৮০পিএক্স এর বেশি বড় হবে না */
    display: flex !important;
    flex-direction: column !important;
    margin: 0 auto !important;
}

.rtx-album-inner {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important; /* এটি কার্ডকে সবসময় নিখুঁত স্কয়ার রাখবে */
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    z-index: 5;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.rtx-album-inner img, 
.rtx-album-inner a, 
.rtx-no-lightbox {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important; /* ইমেজ পুরো কার্ড ভরাট করবে */
}

/* Point 17: Album Badge Position (Top Right) */
.rtx-album-badge {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    color: #fff !important;
    padding: 5px 12px !important;
    border-radius: 30px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    z-index: 99 !important; /* ব্যাজ যাতে সবসময় ওপরে থাকে */
}

/* Point 18: Professional Circular Navigation Arrows (Final Fix) */

/* Prev & Next Button Design */
.sl-prev, .sl-next {
    background: rgba(206, 148, 148, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important; /* গোল সার্কেল */
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important;
    color: #fff !important;
    font-size: 28px !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
}

/* Hover Effect: Blue Glow */
.sl-prev:hover, .sl-next:hover {
    background: #2271b1 !important; /* তোমার ব্র্যান্ড ব্লু */
    border-color: #2271b1 !important;
    box-shadow: 0 0 25px rgba(34, 113, 177, 0.6);
    transform: scale(1.1);
}

/* স্লাইডার ওভারলে ফিক্স */
.sl-overlay { background: #000000 !important; opacity: 1 !important; }
.sl-wrapper .sl-close { color: #fff !important; font-size: 40px !important; }

/* Point 19: Premium 8-Style Hover System (Final Restored) */

/* ১. Zoom In */
.effect-zoom:hover img { transform: scale(1.15) !important; }

/* ২. Fade In */
.effect-fade:hover img { opacity: 0.6 !important; }

/* ৩. Grayscale */
.effect-grayscale img { filter: grayscale(100%); }
.effect-grayscale:hover img { filter: grayscale(0%); }

/* ৪. Blur & Brighten (PRO) */
.effect-blur-bright:hover img { 
    filter: blur(4px) brightness(1.2) !important; 
    transform: scale(1.05);
}

/* ৫. Inner Frame Reveal (PRO) */
.effect-frame-reveal::before {
    content: ''; position: absolute;
    top: 15px; left: 15px; right: 15px; bottom: 15px;
    border: 2px solid rgba(255,255,255,0.8);
    opacity: 0; transition: 0.4s ease; z-index: 5;
    pointer-events: none; transform: scale(1.1);
}
.effect-frame-reveal:hover::before { opacity: 1; transform: scale(1); }

/* ৬. Metallic Shine Swipe (PRO) */
.effect-shine-swipe::after {
    content: ''; position: absolute;
    top: 0; left: -150%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-25deg); transition: 0.7s ease; z-index: 5;
}
.effect-shine-swipe:hover::after { left: 150%; }

/* ৭. 3D Lift & Shadow (PRO) */
.effect-lift-shadow { transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important; }
.effect-lift-shadow:hover { 
    transform: translateY(-12px) !important; 
    box-shadow: 0 25px 50px rgba(0,0,0,0.3) !important; 
}

/* ৮. Color Tint (The Overlay Effect) */
.effect-color-tint::after {
    content: ''; position: absolute; inset: 0;
    background: var(--hover-bg, rgba(34, 113, 177, 0.4));
    opacity: 0; transition: 0.4s; z-index: 4;
}
.effect-color-tint:hover::after { opacity: 1; }

/* গ্লোবাল ট্রানজিশন নিশ্চিত করা */
.rtx-mg-item-inner img { transition: all 0.5s ease !important; }

.rtx-mg-filter-hide {
    display: none !important; /* এটি গ্রিড লজিককে ওভাররাইড করে ছবি লুকিয়ে ফেলবে */
}