/* Professional Ad Styles - All Standard AdSense Sizes */

/* Base styles - Mobile First (320px - 767px) */
.ad-banner-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 300px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 1rem auto !important;
    padding: 0 0.5rem !important;
    overflow: visible !important;
}

.ad-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 300px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    overflow: visible !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-radius: 0.75rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

.adsbygoogle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 300px !important;
    margin: 0 auto !important;
    text-align: center !important;
    overflow: visible !important;
}

/* ========== MOBILE SIZES (< 768px) ========== */

/* Rectangle - 300x250 (Medium Rectangle) */
.ad-banner-wrapper[data-ad-format="rectangle"] .ad-container {
    min-height: 250px !important;
}

/* Square - 250x250 */
.ad-banner-wrapper[data-ad-format="square"] {
    max-width: 250px !important;
}
.ad-banner-wrapper[data-ad-format="square"] .ad-container {
    min-height: 250px !important;
}

/* Mobile Banner - 320x100 (Large Mobile Banner) */
.ad-banner-wrapper[data-ad-format="mobile"] {
    max-width: 320px !important;
}
.ad-banner-wrapper[data-ad-format="mobile"] .ad-container {
    min-height: 100px !important;
}

/* Mobile Leaderboard - 320x50 */
.ad-banner-wrapper[data-ad-format="banner"] {
    max-width: 320px !important;
}
.ad-banner-wrapper[data-ad-format="banner"] .ad-container {
    min-height: 50px !important;
}

/* Horizontal - 320x100 on mobile */
.ad-banner-wrapper[data-ad-format="horizontal"] {
    max-width: 320px !important;
}
.ad-banner-wrapper[data-ad-format="horizontal"] .ad-container {
    min-height: 100px !important;
}

/* Vertical/Half-page - 300x600 */
.ad-banner-wrapper[data-ad-format="vertical"] {
    max-width: 300px !important;
}
.ad-banner-wrapper[data-ad-format="vertical"] .ad-container {
    min-height: 600px !important;
}

/* Portrait - 300x1050 */
.ad-banner-wrapper[data-ad-format="portrait"] {
    max-width: 300px !important;
}
.ad-banner-wrapper[data-ad-format="portrait"] .ad-container {
    min-height: 1050px !important;
}

/* Skyscraper - 160x600 (Wide Skyscraper) */
.ad-banner-wrapper[data-ad-format="skyscraper"] {
    max-width: 160px !important;
    min-width: 160px !important;
}
.ad-banner-wrapper[data-ad-format="skyscraper"] .ad-container {
    min-width: 160px !important;
    min-height: 600px !important;
}

/* ========== TABLET SIZES (768px - 1023px) ========== */
@media (min-width: 768px) and (max-width: 1023px) {
    .ad-banner-wrapper {
        padding: 0 1rem !important;
    }
    
    /* Rectangle - 336x280 (Large Rectangle) */
    .ad-banner-wrapper[data-ad-format="rectangle"] {
        max-width: 336px !important;
    }
    .ad-banner-wrapper[data-ad-format="rectangle"] .ad-container {
        min-height: 280px !important;
    }
    
    /* Horizontal/Leaderboard - 728x90 */
    .ad-banner-wrapper[data-ad-format="horizontal"] {
        max-width: 728px !important;
    }
    .ad-banner-wrapper[data-ad-format="horizontal"] .ad-container {
        min-height: 90px !important;
    }
    
    /* Banner - 468x60 */
    .ad-banner-wrapper[data-ad-format="banner"] {
        max-width: 468px !important;
    }
    .ad-banner-wrapper[data-ad-format="banner"] .ad-container {
        min-height: 60px !important;
    }
    
    /* Skyscraper - 160x600 */
    .ad-banner-wrapper[data-ad-format="skyscraper"] {
        max-width: 160px !important;
    }
}

/* ========== DESKTOP SIZES (1024px+) ========== */
@media (min-width: 1024px) {
    .ad-banner-wrapper {
        padding: 0 !important;
        margin: 1.5rem auto !important;
    }
    
    /* Rectangle - 336x280 (Large Rectangle) */
    .ad-banner-wrapper[data-ad-format="rectangle"] {
        max-width: 336px !important;
    }
    .ad-banner-wrapper[data-ad-format="rectangle"] .ad-container {
        min-height: 280px !important;
    }
    
    /* Horizontal/Large Leaderboard - 970x90 */
    .ad-banner-wrapper[data-ad-format="horizontal"] {
        max-width: 970px !important;
    }
    .ad-banner-wrapper[data-ad-format="horizontal"] .ad-container {
        min-height: 90px !important;
    }
    
    /* Banner/Leaderboard - 728x90 */
    .ad-banner-wrapper[data-ad-format="banner"] {
        max-width: 728px !important;
    }
    .ad-banner-wrapper[data-ad-format="banner"] .ad-container {
        min-height: 90px !important;
    }
    
    /* Billboard - 970x250 */
    .ad-banner-wrapper[data-ad-format="billboard"] {
        max-width: 970px !important;
    }
    .ad-banner-wrapper[data-ad-format="billboard"] .ad-container {
        min-height: 250px !important;
    }
    
    /* Vertical/Half-page - 300x600 */
    .ad-banner-wrapper[data-ad-format="vertical"] {
        max-width: 300px !important;
    }
    
    /* Skyscraper - 160x600 */
    .ad-banner-wrapper[data-ad-format="skyscraper"] {
        max-width: 160px !important;
    }
    
    /* Portrait - 300x1050 */
    .ad-banner-wrapper[data-ad-format="portrait"] {
        max-width: 300px !important;
    }
}

/* ========== LARGE DESKTOP (1200px+) ========== */
@media (min-width: 1200px) {
    /* Billboard can show full width */
    .ad-banner-wrapper[data-ad-format="billboard"] {
        max-width: 970px !important;
    }
}

/* Ad placeholder styling */
.ad-placeholder {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    opacity: 0.3 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* Hide placeholder when ad loads */
.adsbygoogle[data-adsbygoogle-status="done"] ~ .ad-placeholder,
.adsbygoogle[data-ad-status="filled"] ~ .ad-placeholder {
    opacity: 0 !important;
    display: none !important;
}

/* Ensure ads are perfectly centered */
.ad-banner-wrapper ins {
    margin: 0 auto !important;
    display: block !important;
}

/* Professional ad label styling */
.ad-banner-wrapper > span {
    width: 100% !important;
    text-align: center !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
    padding: 0 !important;
}

/* Prevent layout shift during ad load */
.ad-banner-wrapper,
.ad-container {
    contain: layout !important;
}

/* Special handling for skyscraper ads */
.ad-banner-wrapper[data-ad-format="skyscraper"] .adsbygoogle {
    min-width: 160px !important;
}