/* 
 * ADS LAYOUT OPTIMIZATION v2.0
 * Strategy: "COMPLETELY INVISIBLE UNTIL LOADED"
 * NO BLACK BOXES - NO EMPTY SPACES - SEAMLESS UX
 */

/* CRITICAL: Hide ALL ad containers by default */
.ad-container,
.ad-home-top,
.ad-home-mobile,
.ad-desktop-incontent,
.ad-mobile-incontent,
.ad-mobile-rectangle,
.ad-middle-content,
.ad-native-banner,
.ad-footer-desktop,
.ad-footer-mobile,
.footer-ad-zone {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Show ONLY when ad content is actually loaded */
.ad-container.ad-loaded,
.ad-container:has(iframe[src*="exoclick.com"]),
.ad-container:has(iframe[src*="magsrv.com"]),
.ad-container:has(iframe[src*="pemsrv.com"]),
.ad-container:has(iframe[src*="hilltopads.com"]),
.ad-container:has(iframe[src*="nauticaloffice.com"]),
.ad-container:has(iframe[src*="imaginarybad.com"]),
.ad-container:has(ins[data-zoneid]),
.ad-container:has(ins.eas6a97888e2),
.ad-container:has(ins.eas6a97888e10),
.ad-container:has(ins.eas6a97888e20) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 90px !important;
    max-height: none !important;
    padding: 15px 0 !important;
    margin: 15px auto !important;
    background: transparent !important;
    transition: opacity 0.3s ease-in;
}

/* Banner containers - transparent background */
.ad-banner-728x90,
.ad-mobile-banner,
.ad-mobile-300x250,
.ad-native-widget {
    background: transparent !important;
    border: none !important;
    text-align: center;
    margin: 0 auto;
}

/* Remove all iframe borders */
.ad-container iframe {
    display: block;
    border: 0 !important;
    max-width: 100%;
    margin: 0 auto;
}

/* Hide empty iframes */
.ad-container iframe:empty,
.ad-container iframe[src=""],
.ad-container iframe[src="about:blank"] {
    display: none !important;
}

/* Ad slots - hide if empty */
.slot {
    min-height: 0 !important;
}

.slot:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
 * MOBILE-FIRST RESPONSIVE ADS OPTIMIZATION
 * ═══════════════════════════════════════════════════════════ */

/* MOBILE DEVICES (≤768px) - AGGRESSIVE AD PLACEMENT 💰 */
@media (max-width: 768px) {
    /* Hide desktop-only ads completely */
    .desktop-only,
    .ad-banner-728x90 {
        display: none !important;
    }
    
    /* Show mobile ads when loaded */
    .mobile-only.ad-loaded,
    .mobile-only:has(iframe[src]),
    .mobile-only:has(ins[data-zoneid]) {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Mobile 300x250 In-Content Ads - Full width on small screens */
    .ad-mobile-300x250,
    .ad-mobile-incontent,
    .hilltop-mobile-inject {
        max-width: min(300px, 100vw) !important;
        margin: 15px auto !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }
    
    /* Mobile banner ads - fit screen */
    .ad-mobile-banner {
        max-width: 100% !important;
        overflow: hidden !important;
        padding: 0 5px !important;
    }
    
    /* Ad containers on mobile - tight spacing */
    .ad-container.ad-loaded {
        padding: 10px 0 !important;
        margin: 10px auto !important;
    }
    
    /* Mobile iframes - responsive sizing */
    .ad-container iframe {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Prevent horizontal scroll from ads */
    body {
        overflow-x: hidden !important;
    }
    
    .ad-container,
    .ad-container * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
}

/* SMALL MOBILE (≤375px) - iPhone SE, small Androids */
@media (max-width: 375px) {
    .ad-mobile-300x250,
    .hilltop-mobile-inject {
        max-width: 280px !important;
        padding: 0 5px !important;
    }
    
    .ad-container.ad-loaded {
        padding: 8px 0 !important;
        margin: 8px auto !important;
    }
}

/* LANDSCAPE MOBILE (height < 500px) - Less vertical space */
@media (max-height: 500px) and (orientation: landscape) {
    .ad-container.ad-loaded {
        padding: 5px 0 !important;
        margin: 5px auto !important;
        min-height: auto !important;
    }
    
    .ad-mobile-300x250 {
        /* Hide 300x250 in landscape to save space - too tall */
        display: none !important;
    }
}

/* TABLET (769px - 1024px) - Show both types strategically */
@media (min-width: 769px) and (max-width: 1024px) {
    .mobile-only {
        display: none !important;
    }
    
    .desktop-only.ad-loaded,
    .desktop-only:has(iframe[src]),
    .desktop-only:has(ins[data-zoneid]) {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* 728x90 banners fit well on tablets */
    .ad-banner-728x90 {
        max-width: 728px !important;
        margin: 0 auto !important;
    }
}

/* DESKTOP (>1024px) - Full ad experience */
@media (min-width: 1025px) {
    .mobile-only {
        display: none !important;
    }
    
    .desktop-only.ad-loaded,
    .desktop-only:has(iframe[src]),
    .desktop-only:has(ins[data-zoneid]) {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Desktop banners - standard sizes */
    .ad-banner-728x90 {
        width: 728px !important;
        height: 90px !important;
        margin: 0 auto !important;
    }
}

/* Ad failed state - completely remove */
.ad-container.ad-failed,
.ad-container.hidden {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
}

/* Prevent layout shift */
.video-section {
    display: flex;
    flex-direction: column;
}

/* Remove spacing for failed ads */
.video-player-container + .slot:empty,
.video-info-section + .slot:empty {
    margin: 0 !important;
    display: none !important;
}

/* Ad refreshing state */
.ad-container.refreshing {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

/* NO skeleton loaders - just hide until loaded */
.ad-container.loading {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════
 * HOTFIX SCRIPT INJECTED ADS - MOBILE OPTIMIZED
 * ═══════════════════════════════════════════════════════════ */

/* Banner inject from hotfix */
.hilltop-banner-inject {
    margin: 10px auto !important;
    text-align: center;
    width: 100%;
    max-width: 100%;
}

/* Mobile injected ads */
.hilltop-mobile-inject {
    margin: 15px auto !important;
    text-align: center;
    max-width: min(300px, calc(100vw - 20px)) !important;
    padding: 0 10px !important;
}

.mobile-ad-1,
.mobile-ad-2,
.mobile-ad-3 {
    clear: both;
    display: block;
}

/* Ensure injected ads don't cause layout shift */
.hilltop-banner-inject:empty,
.hilltop-mobile-inject:empty {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
}

/* Mobile-specific: Prevent ads from overflowing */
@media (max-width: 768px) {
    .hilltop-banner-inject {
        max-width: 100% !important;
        overflow: hidden !important;
        padding: 0 5px !important;
    }
    
    .hilltop-mobile-inject {
        max-width: calc(100vw - 20px) !important;
    }
    
    /* Stack mobile ads vertically with proper spacing */
    .mobile-ad-1 {
        margin-top: 15px !important;
    }
    
    .mobile-ad-2 {
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }
    
    .mobile-ad-3 {
        margin-bottom: 25px !important;
    }
}

/* Safe area for notched devices (iPhone X+) */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .mobile-ad-3,
        .ad-footer-mobile {
            padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
        }
    }
}