/* Ad Container Styling */
.ad-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem auto;
    text-align: center;
    width: 100%;
    /* Mobile-first: minimal styling */
    padding: 0.5rem;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow-x: auto; /* Allow horizontal scroll for wide ads on mobile */
}

/* Desktop styling for ad containers */
@media (min-width: 800px) {
    .ad-container {
        padding: 1rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 12px;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        overflow-x: visible;
    }

    .ad-container:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(4, 150, 255, 0.3);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
}

/* Responsive Ad System - Mobile First Approach */
/* Ultra-specific selectors to override any conflicts */
body .ad-container .responsive-ad-horizontal,
html body .ad-container .responsive-ad-horizontal,
.ad-container > .responsive-ad-horizontal {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    max-height: 0 !important;
    opacity: 0 !important;
}

body .ad-container .responsive-ad-square,
html body .ad-container .responsive-ad-square,
.ad-container > .responsive-ad-square {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    max-height: none !important;
    opacity: 1 !important;
}

/* Show horizontal ads on desktop (800px+) and hide square ads */
@media (min-width: 800px) {
    body .ad-container .responsive-ad-horizontal,
    html body .ad-container .responsive-ad-horizontal,
    .ad-container > .responsive-ad-horizontal {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        overflow: visible !important;
        max-height: none !important;
        opacity: 1 !important;
    }

    body .ad-container .responsive-ad-square,
    html body .ad-container .responsive-ad-square,
    .ad-container > .responsive-ad-square {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        max-height: 0 !important;
        opacity: 0 !important;
    }
}

/* Mobile-specific ad optimizations */
@media (max-width: 799px) {
    /* Ensure horizontal ads are completely hidden on mobile */
    .ad-container .responsive-ad-horizontal {
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Mobile ad container styling - remove all decorative elements */
    .ad-container {
        margin: 0.5rem auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .ad-container:hover {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Mobile-specific ad type styling */
    .header-ad,
    .footer-ad,
    .game-page-ad,
    .category-page-ad,
    .blog-page-ad,
    .blog-post-ad,
    .blog-post-ad-bottom,
    .search-page-ad,
    .between-content-ad {
        max-width: 100% !important;
        margin: 0.5rem auto !important;
    }

    .sidebar-ad {
        max-width: 100% !important;
        margin: 0.5rem auto !important;
    }
} /* Desktop-specific ad optimizations */
@media (min-width: 800px) {
    /* Ensure square ads are completely hidden on desktop */
    .ad-container .responsive-ad-square {
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* Header Ad - Below Navigation */
.header-ad {
    margin: 1rem auto;
    width: 100%;
}

/* Mobile header ad styling */
@media (max-width: 799px) {
    .header-ad {
        margin: 0.5rem auto;
        padding: 0;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* Desktop header ad styling */
@media (min-width: 800px) {
    .header-ad {
        max-width: 728px;
    }
}

/* Footer Ad */
.footer-ad {
    margin: 2rem auto;
    width: 100%;
}

/* Mobile footer ad styling */
@media (max-width: 799px) {
    .footer-ad {
        margin: 1rem auto;
        padding: 0;
        max-width: 100%;
        overflow-x: auto;
    }
}

/* Desktop footer ad styling */
@media (min-width: 800px) {
    .footer-ad {
        max-width: 728px;
    }
}

/* Sidebar Ad */
.sidebar-ad {
    margin: 1.5rem 0;
    max-width: 300px;
    padding: 0.75rem;
}

.sidebar-ad .ad-container {
    margin: 0;
    padding: 0.75rem;
}

/* Between Content Ad */
.ad-container.between-content-ad {
    margin: 2rem auto;
    max-width: 728px;
    width: 100%;
}

/* Game Page Ads */
.game-page-ad {
    margin: 1.5rem auto;
    max-width: 728px;
    width: 100%;
    text-align: center;
}

/* Category Page Ad */
.category-page-ad {
    margin: 1.5rem auto;
    max-width: 728px;
    width: 100%;
    text-align: center;
}

/* Blog Page Ad */
.blog-page-ad {
    margin: 1.5rem auto;
    max-width: 728px;
    width: 100%;
    text-align: center;
}

/* Blog Post Ads */
.blog-post-ad {
    margin: 1.5rem auto;
    max-width: 728px;
    width: 100%;
    text-align: center;
}

.blog-post-ad-bottom {
    margin: 2rem auto;
    max-width: 728px;
    width: 100%;
    text-align: center;
}

/* Search Page Ad */
.search-page-ad {
    margin: 1.5rem auto;
    max-width: 728px;
    width: 100%;
    text-align: center;
}

/* Ad content styling */
.ad-container iframe,
.ad-container img,
.ad-container video {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* Ad placeholder styling (for testing) */
.ad-placeholder {
    background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    border: 2px dashed #ccc;
    color: #666;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    border-radius: 8px;
}

/* Hide ads when disabled */
.ads-disabled .ad-container {
    display: none !important;
}

/* Modern glassmorphism effect for ads */
.ad-container.modern {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.ad-container.modern:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(4, 150, 255, 0.4);
    box-shadow: 0 12px 40px rgba(4, 150, 255, 0.15);
}

/* Mobile Layout Optimization */
@media (max-width: 799px) {
    /* Remove all decorative styling on mobile to prevent layout issues */
    .ad-container {
        margin: 0.5rem 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .ad-container:hover {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Ensure ads don't break mobile layout */
    .ad-container,
    .ad-container * {
        max-width: 100vw !important;
        overflow-x: auto !important;
        box-sizing: border-box !important;
    }

    /* Mobile-friendly ad wrapper */
    .ad-container.mobile-clean {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0.5rem auto !important;
        padding: 0 !important;
    }
}