/* Container Fix */
            .myslider_container {
                position: relative;
                max-width: 1000px;
                margin: auto;
                overflow: hidden;
                background: #000; /* Black background hides gaps around contained images */
                min-height: 300px; /* Prevents container from collapsing too small on mobile */
            }

            /* Slide Fix */
            .myslider_slide {
                display: none;
                width: 100%;
                height: 100%;
            }

            .myslider_slide.myslider_active {
                display: flex; /* Using flex to help align content if needed */
                flex-direction: column;
            }

            /* Image Fix */
            .slider_size {
                width: 100%;
                height: 100%;
                object-fit: contain;
                background-color: var(--iips-light-bg);
            }

            /* Caption Fix - The "Always Visible" Version */
            .myslider_caption {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                background: rgba(0, 0, 0, 0.8); /* Darker for better contrast */
                color: #ffffff;
                padding: 12px 15px;
                text-align: center;
                font-family: Arial, sans-serif;
                font-size: 16px;
                line-height: 1.4;
                z-index: 10;
                box-sizing: border-box;
                min-height: 50px; /* Ensures it never has 0 height */
            }

            /* Ensure links inside captions are visible */
            .myslider_caption a {
                color: #ffda44;
                text-decoration: underline;
                font-weight: bold;
            }

           
            /* If a caption div is empty, it won't show a black bar */
            .myslider_caption:empty {
                display: none;
            }

            .myslider_caption a { color: #ffcc00; text-decoration: underline; }

            /* Buttons and Dots */
            .myslider_prev, .myslider_next {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                z-index: 10;
                background: rgba(0,0,0,0.5);
                color: white;
                border: none;
                padding: 15px;
                cursor: pointer;
            }
            .myslider_next { right: 0; }
            .myslider_prev { left: 0; }

            .myslider_dots {
                position: absolute;
                bottom: 50px; /* Above the caption */
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                gap: 8px;
                z-index: 10;
            }

            .myslider_dot {
                width: 10px;
                height: 10px;
                background: rgba(255,255,255,0.4);
                border-radius: 50%;
                cursor: pointer;
            }

            .myslider_dot.myslider_active_dot {
                background: white;
                box-shadow: 0 0 5px rgba(255,255,255,0.8);
            }
            /* MOBILE RESPONSIVENESS */
            @media (max-width: 600px) {
                .myslider_caption {
                    font-size: 13px; /* Smaller text for small screens */
                    padding: 8px 10px;
                    background: rgba(0, 0, 0, 0.9); /* More solid on mobile */
                }
                
                .myslider_container {
                    aspect-ratio: auto; /* Let it grow if text is long */
                    height: 350px; 
                }

                .myslider_dots {
                    bottom: 70px; /* Move dots up so they don't overlap long text */
                }
            }