/* Sticky Sidebar Ads - Left & Right */
/* Desktop Sticky Sidebars - Always visible on desktop */
.desktop-sticky-sidebars {
    display: none; /* Hidden by default */
}

/* Mobile Sticky Sidebars Container */
.mobile-sticky-sidebars-container {
    display: none; /* Hidden by default */
}

/* Maksimalkan banner header mobile */
@media (max-width: 991px) {
    /* Classic theme */
    .bn-header-mobile {
        padding: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .bn-header-mobile .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .bn-header-mobile .bn-content {
        padding: 0 8px !important;
        margin-bottom: 5px !important;
        text-align: center !important;
    }
    
    .bn-header-mobile .bn-inner {
        margin: 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .bn-header-mobile .bn-inner a {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .bn-header-mobile .bn-inner img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* Magazine theme */
    .container-bn-header {
        padding-left: 8px !important;
        padding-right: 8px !important;
        margin-bottom: 0 !important;
    }
    
    .container-bn-header .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .container-bn-header .bn-content {
        margin-bottom: 5px !important;
        text-align: center !important;
    }
    
    .container-bn-header .bn-inner {
        margin: 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }
    
    .container-bn-header .bn-inner a {
        display: block !important;
        width: 100% !important;
    }
    
    .container-bn-header .bn-inner img,
    .container-bn-header .bn-inner iframe {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* All banner containers on mobile */
    .container-bn {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .bn-content {
        padding: 0 !important;
        text-align: center !important;
    }
    
    .bn-inner {
        width: 100% !important;
    }
    
    .bn-inner img,
    .bn-inner iframe {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* Desktop Sticky Sidebar Styling */
@media (min-width: 1400px) {
    .desktop-sticky-sidebars {
        display: block !important;
        position: relative;
        width: 0;
        height: 0;
        overflow: visible;
        pointer-events: none; /* Allow clicks to pass through container */
    }
    
    .desktop-sticky-sidebars .sticky-sidebar-left,
    .desktop-sticky-sidebars .sticky-sidebar-right {
        position: fixed;
        top: 80px;
        width: 160px;
        z-index: 999;
        display: block !important;
        max-height: calc(100vh - 100px); /* Prevent sidebar from being too tall */
        overflow-y: auto; /* Add scroll if content is too long */
        pointer-events: auto; /* Re-enable clicks on sidebar */
    }
    
    /* Custom scrollbar for sidebars */
    .desktop-sticky-sidebars .sticky-sidebar-left::-webkit-scrollbar,
    .desktop-sticky-sidebars .sticky-sidebar-right::-webkit-scrollbar {
        width: 4px;
    }
    
    .desktop-sticky-sidebars .sticky-sidebar-left::-webkit-scrollbar-track,
    .desktop-sticky-sidebars .sticky-sidebar-right::-webkit-scrollbar-track {
        background: #f1f1f1;
    }
    
    .desktop-sticky-sidebars .sticky-sidebar-left::-webkit-scrollbar-thumb,
    .desktop-sticky-sidebars .sticky-sidebar-right::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 2px;
    }
    
    .desktop-sticky-sidebars .sticky-sidebar-left {
        left: calc((100% - 1140px) / 2 - 195px); /* 160px (banner) + 15px (margin) + 20px (spacing) */
    }
    
    .desktop-sticky-sidebars .sticky-sidebar-right {
        right: calc((100% - 1140px) / 2 - 195px); /* 160px (banner) + 15px (margin) + 20px (spacing) */
    }
    
    /* Hide mobile version */
    .mobile-sticky-sidebars {
        display: none !important;
    }
    
    .mobile-sticky-sidebars-container {
        display: none !important;
    }
    
}

/* For extra large screens */
@media (min-width: 1600px) {
    .desktop-sticky-sidebars .sticky-sidebar-left {
        left: calc((100% - 1140px) / 2 - 195px);
    }
    .desktop-sticky-sidebars .sticky-sidebar-right {
        right: calc((100% - 1140px) / 2 - 195px);
    }
}

/* Mobile & Tablet Layout - Side by side */
@media (max-width: 1399px) {
    /* Hide desktop version */
    .desktop-sticky-sidebars {
        display: none !important;
    }
    
    /* Show mobile version */
    .mobile-sticky-sidebars {
        display: block !important;
        width: 100%;
        margin-bottom: 10px;
    }
    
    .mobile-sticky-sidebars-container {
        display: flex !important;
        flex-direction: row;
        justify-content: space-between;
        gap: 8px;
        padding: 0 8px;
        width: 100%;
        max-width: 100%;
    }
    
    .mobile-sticky-sidebars-container .sticky-sidebar-left,
    .mobile-sticky-sidebars-container .sticky-sidebar-right {
        position: relative !important;
        display: block !important;
        width: calc(50% - 4px) !important;
        max-width: none !important;
        margin: 0 !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        flex: 1;
    }
}

/* Ad container styling */
.sticky-sidebar-ad {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    width: 100%;
    height: auto;
}

.sticky-sidebar-ad img,
.sticky-sidebar-ad iframe,
.sticky-sidebar-ad > div {
    max-width: 100%;
    height: auto !important;
}

/* Dark mode support */
body.dark-mode .sticky-sidebar-ad {
    background: #2d2d2d;
    border-color: #3d3d3d;
}

/* Prevent horizontal overflow only when needed */
@media (min-width: 1400px) {
    body {
        overflow-x: hidden;
    }
    
    /* Batasi lebar container-xl agar tidak berantakan dan center */
    .container-xl {
        max-width: 1140px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Kurangi jarak berlebih pada section */
    .section {
        margin-bottom: 30px !important;
    }
    
    /* Kurangi jarak dari mobile sticky sidebars yang tersembunyi */
    .mobile-sticky-sidebars {
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
    }
    
    /* Make content sidebar sticky */
    #sidebar {
        position: sticky;
        top: 100px;
        align-self: flex-start;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    /* Custom scrollbar for content sidebar */
    #sidebar::-webkit-scrollbar {
        width: 6px;
    }
    
    #sidebar::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    #sidebar::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 3px;
    }
    
    #sidebar::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}

/* Sembunyikan container iklan yang kosong */
.bn-content:empty,
.bn-inner:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}
    
    /* Sembunyikan container yang hanya berisi body kosong */
    .container-bn:has(body[style*="transparent"]:empty) {
        display: none !important;
    }
    
    /* Sembunyikan section/container ad spaces yang kosong */
    .section:empty,
    .bn-p-b:empty,
    .container-bn:empty {
        display: none !important;
        margin: 0 !important;
        height: 0 !important;
    }
}

/* Sembunyikan AdSense container yang kosong (desktop & mobile) */
div[id*="aswift"][style*="background-color: transparent"] {
    min-height: 0 !important;
}

/* Jika iframe AdSense tidak memuat iklan, kurangi tingginya */
.bn-inner iframe[src*="doubleclick.net"] {
    min-height: auto !important;
}

/* Sembunyikan container AdSense host yang kosong */
div[id*="aswift_"][id*="_host"]:empty {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
}