/* ===========================================
   AD PLACEMENT SYSTEM - READY FOR GOOGLE ADSENSE
   =========================================== */

/* Ad Container Base Styling */
.ad-container {
    background: rgba(45, 53, 97, 0.3);
    border: 1px dashed rgba(99, 102, 241, 0.4);
    border-radius: 0.75rem;
    padding: 1rem;
    margin: 2rem 0;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.ad-container::before {
    content: 'Advertisement';
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    font-size: 0.65rem;
    color: var(--color-text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Ad Placeholder (shown when ad code not loaded) */
.ad-placeholder {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    padding: 2rem;
}

.ad-placeholder::after {
    content: '📢 Ad Space';
    display: block;
    margin-top: 0.5rem;
    opacity: 0.5;
}

/* Responsive Ad Sizes */
.ad-horizontal {
    /* Google AdSense: Horizontal Banner (728x90 or responsive) */
    min-height: 90px;
    max-width: 728px;
    margin-left: auto;
    margin-right: auto;
}

.ad-large-rectangle {
    /* Google AdSense: Large Rectangle (336x280 or responsive) */
    min-height: 280px;
    max-width: 336px;
}

.ad-sidebar {
    /* Google AdSense: Sidebar (160x600 or 300x600) */
    min-height: 600px;
    max-width: 300px;
    margin: 1rem 0;
}

.ad-mobile-banner {
    /* Google AdSense: Mobile Banner (320x50 or 320x100) */
    min-height: 50px;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.ad-in-article {
    /* Google AdSense: In-Article (responsive) */
    min-height: 150px;
    margin: 1.5rem 0;
    background: rgba(45, 53, 97, 0.2);
}

/* Ad Positions */
.ad-top-page {
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.ad-bottom-page {
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.ad-between-sections {
    margin: 2.5rem 0;
}

/* Sticky Sidebar Ad (Desktop Only) */
.ad-sticky-sidebar {
    position: sticky;
    top: 1rem;
    margin-bottom: 2rem;
}

/* Mobile Optimizations */
@media (max-width: 768px) {

    .ad-horizontal,
    .ad-large-rectangle,
    .ad-sidebar {
        max-width: 100%;
    }

    .ad-sticky-sidebar {
        position: relative;
        top: auto;
    }

    /* Hide desktop-only ads on mobile */
    .ad-desktop-only {
        display: none;
    }
}

/* Desktop: Hide mobile-only ads */
@media (min-width: 769px) {
    .ad-mobile-only {
        display: none;
    }
}

/* Ad Loading State */
.ad-loading {
    background: linear-gradient(90deg,
            rgba(45, 53, 97, 0.3) 0%,
            rgba(99, 102, 241, 0.2) 50%,
            rgba(45, 53, 97, 0.3) 100%);
    background-size: 200% 100%;
    animation: adShimmer 1.5s infinite;
}

@keyframes adShimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Ad Close Button (for custom ads, not AdSense) */
.ad-close-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(239, 68, 68, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 14px;
    cursor: pointer;
    display: none;
    /* Show only for custom, dismissible ads */
    z-index: 10;
}

.ad-close-btn:hover {
    background: rgba(239, 68, 68, 1);
}

/* Ensure ads don't break layout */
.ad-container ins {
    display: block;
    margin: 0 auto;
}

/* AdSense Auto Ads Compatibility */
.adsbygoogle {
    display: block;
}