/**
 * Centralized Ad Styling
 * Main stylesheet that imports all ad provider styles and defines common ad behaviors
 */

/* Import Provider-Specific Stylesheets */
@import url('./exoclick.css');
@import url('./juicyads.css');
@import url('./adsterra.css');
@import url('./crakrevenue.css');

/* ===== COMMON AD ANIMATIONS ===== */
@keyframes adFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes adShimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* ===== GENERAL AD CONTAINER STYLES ===== */

/* Blog Banner Ad Container */
#blog-banner-ad {
    width: 100%;
    max-width: 728px;
    min-height: 90px;
    margin: 20px auto;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: adFadeIn 0.5s ease-out;
}

/* Loading state for blog banner ad */
#blog-banner-ad:empty::after {
    content: 'Banner Advertisement Loading...';
    color: #6c757d;
    font-size: 14px;
    font-style: italic;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
}

/* Post Ad Containers */
[id^="post-ad-"]:empty::after {
    content: 'Advertisement Loading...';
    color: #6c757d;
    font-size: 14px;
    font-style: italic;
}

/* ===== EXCLUSIVE AD CONTAINERS ===== */
[id^="exclusive-ad-"] {
    /* max-width: 360px; this style causes the ad width to not be 100% */
    /* min-height: 90px; collapse when no ad is present */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: adFadeIn 0.5s ease-out;
}

/* Loading state - show loading message */
[id^="exclusive-ad-"]:empty::after {
    content: 'Exclusive Content Ad Loading...';
    color: #856404;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Collapsed state - when ad definitively fails */
[id^="exclusive-ad-"].ad-failed {
    min-height: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
}

/* Loaded state - when ad successfully loads */
[id^="exclusive-ad-"].ad-loaded {
    min-height: 0;
    height: auto;
}

/* ===== LOADING STATE ===== */
.ad-loading {
    position: relative;
    overflow: hidden;
}

.ad-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: adShimmer 1.5s infinite;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {

    .ad-container,
    .post-ad-container,
    .exclusive-ad-container,
    [id^="post-ad-"],
    [id^="exclusive-ad-"] {
        max-width: 100%;
    }

    [id^="post-ad-"],
    [id^="exclusive-ad-"] {
        margin: 0px auto;
        min-height: fit-content;
    }
}

@media (max-width: 480px) {

    .ad-container,
    .post-ad-container,
    .exclusive-ad-container,
    [id^="post-ad-"],
    [id^="exclusive-ad-"] {
        margin: 10px 5px;
        padding: 6px;
        border-radius: 4px;
    }

    [id^="post-ad-"]:empty::after,
    [id^="exclusive-ad-"]:empty::after {
        font-size: 12px;
        margin: 0px auto;
    }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {

    .ad-container,
    .post-ad-container,
    .exclusive-ad-container {
        background-color: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
    }

    [id^="post-ad-"] {
        background-color: #1a202c;
        border-color: #2d3748;
    }

    [id^="post-ad-"]:empty::after {
        color: #a0aec0;
    }

    [id^="exclusive-ad-"] {
        background: linear-gradient(145deg, #744210 0%, #975a16 100%);
        border-color: #d69e2e;
    }

    [id^="exclusive-ad-"]:empty::after {
        color: #fbd38d;
    }
}

/* ===== PRINT STYLES ===== */
@media print {

    .ad-container,
    .post-ad-container,
    .exclusive-ad-container,
    [id^="post-ad-"],
    [id^="exclusive-ad-"] {
        display: none !important;
    }
}