/**
 * Ad Performance CSS
 * Optimizes ad loading and reduces layout shifts
 */

/* Prevent layout shifts during ad loading */
.ad-container,
[class*="ad-"],
[class*="gpt-"],
[class*="div-gpt-"],
[id*="gpt-ad"],
[id*="div-gpt-ad"] {
    position: relative;
    min-height: 90px; /* Default banner height */
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Loading state for ads */
.ad-container.loading::before {
    content: "Loading...";
    color: #6c757d;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Specific ad slot sizing to prevent layout shifts */
#div-gpt-ad-1485538453696-0,
#div-gpt-ad-1485538555341-0 {
    min-height: 90px; /* 990x90 banner */
}

#div-gpt-ad-1485538593117-0 {
    min-height: 50px; /* 675x50 banner */
}

#div-gpt-ad-300x250_mobi_3-0,
#div-gpt-ad-300x250_mobi_4-0,
#div-gpt-ad-300x250_mobi_5-0,
#div-gpt-ad-1485533899423-0,
#div-gpt-ad-1485533968943-0,
#div-gpt-ad-1485534066838-0,
#div-gpt-ad-1485534179535-0,
#div-gpt-ad-1485533899426-0 {
    min-height: 250px; /* 300x250 rectangle */
}

/* Mobile responsive ad sizing */
@media (max-width: 768px) {
    .ad-container {
        min-height: 50px; /* Smaller height on mobile */
    }
    
    #div-gpt-ad-1485538453696-0,
    #div-gpt-ad-1485538555341-0 {
        min-height: 50px; /* Mobile banner height */
    }
}

/* Hide ads during loading to prevent flash */
.ad-container:not(.loaded) iframe,
.ad-container:not(.loaded) img {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ad-container.loaded iframe,
.ad-container.loaded img {
    opacity: 1;
}

/* Prevent text selection on ad containers */
.ad-container {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

/* Optimize touch interactions for better performance */
.ad-container * {
    touch-action: manipulation;
}
