/* ========================================
   AD PLACEMENTS STYLES
   ======================================== */

/* General Ad Container Styles */
.ad-container {
    margin: 30px auto;
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(26, 34, 54, 0.3);
    border-radius: 8px;
}

.ad-label {
    font-size: 0.65rem;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 1.5px;
    font-weight: 600;
    opacity: 0.7;
}

.ad-content {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* UBICACIÓN A: Banner Antes del Footer (anteriormente sticky top) */
.ad-sticky-top {
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ad-sticky-top .ad-container {
    margin: 0;
    padding: 20px 0;
    border: none;
    background: rgba(26, 34, 54, 0.3);
}

.ad-sticky-top .ad-label {
    margin-bottom: 8px;
}

/* Leaderboard Ad (970x90 / 320x50) */
.ad-leaderboard .ad-content {
    min-height: 90px;
}

@media (max-width: 768px) {
    .ad-leaderboard .ad-content {
        min-height: 50px;
    }
}

/* Banner Ad (728x90 / 300x250) */
.ad-banner .ad-content {
    min-height: 90px;
}

@media (max-width: 768px) {
    .ad-banner .ad-content {
        min-height: 250px;
    }
}

/* Square Ad (300x250) */
.ad-square .ad-content {
    min-height: 250px;
}

/* Responsive Ad */
.ad-responsive .ad-content {
    min-height: 100px;
}

/* Tablet Adjustments */
@media (max-width: 768px) {
    .ad-container {
        margin: 20px auto;
        padding: 15px 0;
    }
}

/* Prevent Layout Shift (CLS Optimization) */
.ad-content ins {
    display: block;
    min-height: inherit;
}

/* Loading State */
.ad-content:empty::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.02) 25%,
            rgba(255, 255, 255, 0.05) 50%,
            rgba(255, 255, 255, 0.02) 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
    border-radius: 4px;
}

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

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

/* Dark Mode Optimization */
@media (prefers-color-scheme: dark) {
    .ad-container {
        background: rgba(26, 34, 54, 0.4);
    }
}

/* Print - Hide Ads */
@media print {

    .ad-container,
    .ad-sticky-top {
        display: none !important;
    }
}