/**
 * Ad Styles - Strict 250x250 Fixed Size
 * Correctly centered on all devices (Mobile, Tablet, Desktop)
 */

/* ============================================
   Base Ad Container - Fixed 250x250
   ============================================ */
.ad-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 250px;
    margin: 1.5rem auto;
    padding: 0;
    background: #f8fafc;
    border-radius: 0.5rem;
    overflow: hidden;
    text-align: center;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Force AdSense to respect 250x250 */
.ad-container ins.adsbygoogle {
    display: inline-block !important;
    width: 250px !important;
    height: 250px !important;
}

/* ============================================
   Position Specific Spacing (Consistency)
   ============================================ */
.quiz-ad-container,
.top-ad,
.grid-ad-break {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 1rem auto;
}

.quiz-ad-container .ad-container,
.top-ad .ad-container,
.grid-ad-break .ad-container {
    margin: 0 auto;
}

/* Sidebar Ad - Also 250x250 for consistency per user request */
.ad-sidebar {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 1rem 0;
}

/* ============================================
   Loading State / Shimmer Effect
   ============================================ */
.ad-container.loading {
    background: linear-gradient(90deg,
            #f1f5f9 0%,
            #e2e8f0 50%,
            #f1f5f9 100%);
    background-size: 200% 100%;
    animation: adLoading 1.5s ease-in-out infinite;
}

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

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

/* ============================================
   AdSense Specific - Prevent Layout Shift
   ============================================ */
.adsbygoogle {
    display: inline-block;
    width: 250px;
    height: 250px;
}

/* Hide unfilled ad slots gracefully but keep 250px space */
ins.adsbygoogle[data-ad-status="unfilled"] {
    opacity: 0;
}