/* TubeDigest Ads Styling */

/* Loading Screen Ad Styles */
#ad-container {
    position: relative;
}

#loading-ad {
    transition: opacity 0.3s ease-in-out;
}

#lottie-container {
    transition: opacity 0.3s ease-in-out;
}

/* Responsive 300x250 Ad Containers */
#ad-container img,
#loading-ad img {
    width: 100%;
    height: auto;
    max-width: 300px;
    max-height: 250px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Ensure ad content is visible */
#loading-ad > * {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Navigation Sidebar Ad Styles */
.navigation-ad-container {
    max-width: 100%;
    overflow: hidden;
}

/* Mobile Optimization */
@media (max-width: 640px) {
    #ad-container {
        max-width: calc(100vw - 48px); /* Full width minus padding */
    }
    
    #ad-container img,
    #loading-ad img {
        max-width: 280px; /* Slightly smaller on mobile */
        max-height: 233px; /* Maintain aspect ratio */
    }
}

/* Small Mobile Screens */
@media (max-width: 375px) {
    #ad-container {
        max-width: calc(100vw - 32px);
    }
    
    #ad-container img,
    #loading-ad img {
        max-width: 260px;
        max-height: 217px;
    }
}

/* Tablet Optimization */
@media (min-width: 641px) and (max-width: 1024px) {
    #ad-container img,
    #loading-ad img {
        max-width: 300px;
        max-height: 250px;
    }
}

/* Touch-friendly ad containers */
#ad-container a,
#ad-container button,
#loading-ad a,
#loading-ad button {
    min-height: 44px; /* iOS touch target minimum */
    min-width: 44px;
    touch-action: manipulation;
}

/* Performance optimization */
#ad-container img,
#loading-ad img {
    loading: lazy;
    decoding: async;
}

/* Remove animations on mobile for performance */
@media (max-width: 640px) {
    #ad-container,
    #loading-ad {
        transition: none;
    }
}

/* Ad Loading States */
.ad-loading {
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* Fallback Styles */
.ad-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f9fafb;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    color: #6b7280;
    font-size: 14px;
    min-height: 200px;
}

/* Ensure ads don't break layout */
.ad-container img,
.ad-container iframe,
.ad-container div {
    max-width: 100%;
    height: auto;
}

/* Mobile-specific hiding for navigation ads */
@media (max-width: 1024px) {
    .desktop-only-ad {
        display: none !important;
    }
}

/* Featured label styling */
.text-xs.text-gray-400 {
    font-weight: 400;
    letter-spacing: 0.025em;
}