/* Banner styles with !important for highest priority */
.banner-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    max-width: 100% !important;
    overflow: hidden !important; /* Disable scrolling */
    text-align: center !important;
    padding: 0 0 !important;
    height: auto !important; /* Changed to auto to accommodate vertical stacking */
    min-height: auto !important;
    border-radius: 12px !important;
    margin: 6px auto 6px auto !important; /* Reduced top margin slightly */
    flex-wrap: nowrap !important; /* Prevent wrapping by default */
    scrollbar-width: thin !important; /* For Firefox */
    -ms-overflow-style: none !important; /* For Internet Explorer and Edge */
    gap: 0 !important; /* Add space between banners */
    line-height: 0 !important;
}

/* Bottom Banner styles */
.bottom-banner-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    max-width: 100% !important;
    overflow-x: auto !important; /* Horizontal scroll on desktop */
    overflow-y: hidden !important;
    text-align: center !important;
    padding: 10px 0 !important;
    height: auto !important; /* Changed to auto to accommodate vertical stacking */
    min-height: auto !important; /* Changed from fixed height to auto */
    border-radius: 12px !important;
    margin: 2px auto 2px auto !important;
    flex-wrap: nowrap !important; /* Prevent wrapping on desktop */
    scrollbar-width: thin !important; /* For Firefox */
    -ms-overflow-style: none !important; /* For Internet Explorer and Edge */
    gap: 10px !important; /* Add space between banners */
}

/* Left Sidebar Banner */
.left-banner-container {
    display: flex !important;
    flex-direction: column !important; /* Vertical arrangement for sidebar banners */
    justify-content: flex-start !important;
    align-items: center !important;
    position: fixed !important; /* Fixed position for sidebar */
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* Center vertically */
    max-width: 160px !important;
    max-height: 80vh !important; /* Limit height to 80% of viewport */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    text-align: center !important;
    padding: 5px !important;
    border-radius: 12px !important;
    z-index: 999 !important; /* High z-index to appear above content */
    scrollbar-width: thin !important; /* For Firefox */
    -ms-overflow-style: none !important; /* For Internet Explorer and Edge */
}

/* Right Sidebar Banner */
.right-banner {
    display: flex !important;
    flex-direction: column !important; /* Vertical arrangement for sidebar banners */
    justify-content: flex-start !important;
    align-items: center !important;
    position: fixed !important; /* Fixed position for sidebar */
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* Center vertically */
    max-width: 160px !important;
    max-height: 80vh !important; /* Limit height to 80% of viewport */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    text-align: center !important;
    padding: 5px !important;
    border-radius: 12px !important;
    z-index: 999 !important; /* High z-index to appear above content */
    scrollbar-width: thin !important; /* For Firefox */
    -ms-overflow-style: none !important; /* For Internet Explorer and Edge */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.banner-container::-webkit-scrollbar,
.bottom-banner-container::-webkit-scrollbar,
.left-banner-container::-webkit-scrollbar,
.right-banner::-webkit-scrollbar {
    display: none !important;
}

/* Super specific selector for high priority */
.banner-container img, 
.banner-container a img,
.banner-container .desktop-banner,
.banner-container .mobile-banner,
.bottom-banner-container img, 
.bottom-banner-container a img,
.bottom-banner-container .desktop-banner,
.bottom-banner-container .mobile-banner {
    max-height: 120px !important;
    height: auto !important; /* Changed from fixed height to auto for responsiveness */
    max-width: 100% !important;
    width: auto !important;
    border-radius: 12px !important;
    display: inline-block !important;
    margin: 0 5px !important;
    object-fit: contain !important; /* Ensure image maintains aspect ratio */
}

/* Sidebar banners image styles */
.left-banner-container img, 
.left-banner-container a img,
.right-banner img, 
.right-banner a img {
    max-width: 160px !important;
    height: auto !important;
    width: 100% !important;
    border-radius: 12px !important;
    display: block !important;
    margin: 5px 0 !important;
    object-fit: contain !important; /* Ensure image maintains aspect ratio */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .banner-container,
    .bottom-banner-container {
        overflow: visible !important; /* Allow overflow on mobile for scrolling */
        flex-direction: column !important; /* Stack vertically on mobile */
        flex-wrap: nowrap !important; /* Prevent wrapping to ensure full height */
        height: auto !important;
        min-height: unset !important;
        width: 100% !important; /* Take full width */
        line-height: 0 !important;
    }
    
    .banner-container {
        padding: 0 0 !important; /* Add some padding */
        gap: 0 !important; /* Increase gap on mobile */
    }
    
    .bottom-banner-container {
        padding: 10px 0 !important; /* Add some padding */
        gap: 15px !important; /* Increase gap on mobile */
    }
    
    .banner-container img, 
    .banner-container a img,
    .banner-container .desktop-banner,
    .banner-container .mobile-banner {
        max-height: 100px !important;
        margin: 3px auto !important; /* Center horizontally and add vertical spacing */
        width: auto !important;
        height: auto !important;
    }
    
    .bottom-banner-container img, 
    .bottom-banner-container a img,
    .bottom-banner-container .desktop-banner,
    .bottom-banner-container .mobile-banner {
        max-height: 100px !important;
        margin: 5px auto !important; /* Center horizontally and add vertical spacing */
        width: auto !important;
        height: auto !important;
    }
    
    /* Make each banner's container (typically an <a> tag) take full width */
    .banner-container > a,
    .banner-container > div {
        width: 100% !important;
        display: block !important;
        margin-bottom: 0px !important; /* Increase spacing between banners */
        height: auto !important;
    }
    
    .bottom-banner-container > a,
    .bottom-banner-container > div {
        width: 100% !important;
        display: block !important;
        margin-bottom: 15px !important; /* Increase spacing between banners */
        height: auto !important;
    }
}

@media (max-width: 992px) {
    body {
        padding-left: 0 !important; /* Remove padding on smaller screens */
        padding-right: 0 !important; /* Remove padding on smaller screens */
    }
    
    .left-banner-container,
    .right-banner {
        position: static !important; /* Not fixed on small screens */
        flex-direction: row !important; /* Horizontal on smaller screens */
        transform: none !important;
        max-width: 100% !important;
        max-height: 120px !important;
        margin: 10px auto !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
    
    .left-banner-container img, 
    .left-banner-container a img,
    .right-banner img, 
    .right-banner a img {
        max-height: 100px !important;
        max-width: 100% !important;
        width: auto !important;
        margin: 0 5px !important;
    }
}

@media (max-width: 576px) {
    .banner-container,
    .bottom-banner-container {
        min-height: unset !important;
        display: flex !important; /* Force display on smallest screens */
        width: 100% !important;
        margin: 5px auto !important;
    }
    
    .banner-container {
        padding: 0 0 !important; /* Increase padding */
        gap: 0 !important; /* Further increase gap on smallest screens */
    }
    
    .bottom-banner-container {
        padding: 10px 0 !important; /* Increase padding */
        gap: 20px !important; /* Further increase gap on smallest screens */
    }
    
    .banner-container img, 
    .banner-container a img,
    .banner-container .desktop-banner,
    .banner-container .mobile-banner,
    .bottom-banner-container img, 
    .bottom-banner-container a img,
    .bottom-banner-container .desktop-banner,
    .bottom-banner-container .mobile-banner {
        max-height: none !important; /* Remove height restriction */
        height: auto !important;
        margin: 3px auto !important;
        max-width: 95% !important; /* Allow images to scale properly */
    }
    
    .banner-container > a,
    .banner-container > div {
        margin-bottom: 0px !important; /* Increase spacing between banners */
        height: auto !important;
    }
    
    .bottom-banner-container > a,
    .bottom-banner-container > div {
        margin-bottom: 20px !important; /* Increase spacing between banners */
        height: auto !important;
    }
    
    .left-banner-container,
    .right-banner {
        max-height: 80px !important;
    }
    
    .left-banner-container img, 
    .left-banner-container a img,
    .right-banner img, 
    .right-banner a img {
        max-height: 70px !important;
    }
}