/* WOW Ad Manager Public Styles */

.wow-ad {
    display: block;
    margin: 10px auto;
    text-align: center;
    clear: both;
}

.wow-ad-container {
    position: relative;
    display: block;
    overflow: hidden;
}

.wow-ad-content {
    display: inline-block;
    line-height: 0;
}

.wow-ad-link {
    display: inline-block;
    text-decoration: none;
    border: none;
    outline: none;
    transition: opacity 0.2s ease;
}

.wow-ad-link:hover {
    opacity: 0.9;
}

.wow-ad-image {
    max-width: 100%;
    height: auto;
    display: block;
    border: none;
    outline: none;
}

.wow-ad-loading {
    color: #999;
    font-size: 12px;
    padding: 20px;
    text-align: center;
    background: #f9f9f9;
    border: 1px dashed #ddd;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Loading box should match ad dimensions to prevent layout shift */
/* Prefer dynamic sizing via CSS variables when available */
.wow-ad-container[style] .wow-ad-loading {
    min-width: var(--wow-width, auto);
    min-height: var(--wow-height, auto);
}
/* Fallback hard-coded sizes for known formats (kept for BC) */
.wow-ad-size-728x90 .wow-ad-loading { min-width: 728px; min-height: 90px; }
.wow-ad-size-468x60 .wow-ad-loading { min-width: 468px; min-height: 60px; }
.wow-ad-size-300x250 .wow-ad-loading { min-width: 300px; min-height: 250px; }
.wow-ad-size-320x50 .wow-ad-loading { min-width: 320px; min-height: 50px; }
.wow-ad-size-160x600 .wow-ad-loading { min-width: 160px; min-height: 600px; }
.wow-ad-size-336x280 .wow-ad-loading { min-width: 336px; min-height: 280px; }
.wow-ad-size-970x250 .wow-ad-loading { min-width: 970px; min-height: 250px; }
.wow-ad-size-270x70 .wow-ad-loading { min-width: 270px; min-height: 70px; }

.wow-ad-728-90 .wow-ad-loading { min-width: 728px; min-height: 90px; }
.wow-ad-468-60 .wow-ad-loading { min-width: 468px; min-height: 60px; }
.wow-ad-300-250 .wow-ad-loading { min-width: 300px; min-height: 250px; }
.wow-ad-320-50 .wow-ad-loading { min-width: 320px; min-height: 50px; }
.wow-ad-160-600 .wow-ad-loading { min-width: 160px; min-height: 600px; }
.wow-ad-336-280 .wow-ad-loading { min-width: 336px; min-height: 280px; }
.wow-ad-970-250 .wow-ad-loading { min-width: 970px; min-height: 250px; }
.wow-ad-270-70 .wow-ad-loading { min-width: 270px; min-height: 70px; }

/* Responsive Design */
@media (max-width: 768px) {
    .wow-ad {
        margin: 5px auto;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    
    /* Force wide banner containers to be responsive */
    .wow-ad-container,
    .wow-ad-size-728x90,
    .wow-ad-728-90,
    .wow-ad-size-468x60,
    .wow-ad-468-60,
    .wow-ad-size-970x250,
    .wow-ad-970-250,
    .wow-ad-size-336x280,
    .wow-ad-336-280,
    .wow-ad-size-320x50,
    .wow-ad-320-50,
    .wow-ad-size-160x600,
    .wow-ad-160-600,
    .wow-ad-size-270x70,
    .wow-ad-270-70 {
        max-width: 100% !important;
        width: 100% !important;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    /* Special handling for 300x250 ads - keep reasonable size on mobile */
    .wow-ad-size-300x250,
    .wow-ad-300-250 {
        max-width: 300px !important;
        width: 100% !important;
        overflow: hidden;
        box-sizing: border-box;
    }
    
    /* Widget-specific 300x250 handling - even more constrained */
    .widget .wow-ad-size-300x250,
    .widget .wow-ad-300-250 {
        max-width: 280px !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    .wow-ad-content {
        max-width: 100% !important;
        display: block;
        box-sizing: border-box;
    }
    
    /* Responsive images for wide banners */
    .wow-ad-size-728x90 .wow-ad-image,
    .wow-ad-728-90 .wow-ad-image,
    .wow-ad-size-468x60 .wow-ad-image,
    .wow-ad-468-60 .wow-ad-image,
    .wow-ad-size-970x250 .wow-ad-image,
    .wow-ad-970-250 .wow-ad-image,
    .wow-ad-size-336x280 .wow-ad-image,
    .wow-ad-336-280 .wow-ad-image {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain;
        display: block;
    }
    
    /* Constrained sizing for 300x250 images */
    .wow-ad-size-300x250 .wow-ad-image,
    .wow-ad-300-250 .wow-ad-image {
        max-width: 300px !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain;
        display: block;
    }
    
    /* Widget 300x250 images even more constrained */
    .widget .wow-ad-size-300x250 .wow-ad-image,
    .widget .wow-ad-300-250 .wow-ad-image {
        max-width: 280px !important;
        width: 100% !important;
        height: auto !important;
    }
    
    /* Override any inline styles on links */
    .wow-ad-link {
        display: block !important;
        max-width: 100% !important;
    }
    
    /* Responsive loading boxes */
    .wow-ad-loading {
        min-width: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 60px;
        box-sizing: border-box;
    }
    
    /* Specific adjustments for common banner sizes */
    .wow-ad-size-728x90 .wow-ad-loading,
    .wow-ad-728-90 .wow-ad-loading {
        min-height: 60px;
    }
    
    .wow-ad-size-970x250 .wow-ad-loading,
    .wow-ad-970-250 .wow-ad-loading {
        min-height: 80px;
    }
    
    .wow-ad-size-468x60 .wow-ad-loading,
    .wow-ad-468-60 .wow-ad-loading {
        min-height: 50px;
    }
    
    .wow-ad-size-300x250 .wow-ad-loading,
    .wow-ad-300-250 .wow-ad-loading {
        max-width: 300px !important;
        min-height: 200px;
    }
    
    .widget .wow-ad-size-300x250 .wow-ad-loading,
    .widget .wow-ad-300-250 .wow-ad-loading {
        max-width: 280px !important;
        min-height: 180px;
    }
}

/* Specific ad size constraints */
/* Prefer dynamic container max-width when variables exist */
.wow-ad-container[style] { max-width: var(--wow-width, 100%); }
/* Fallback known sizes */
.wow-ad-size-728x90 { max-width: 728px; }
.wow-ad-size-468x60 { max-width: 468px; }
.wow-ad-size-300x250 { max-width: 300px; }
.wow-ad-size-320x50 { max-width: 320px; }
.wow-ad-size-160x600 { max-width: 160px; }
.wow-ad-size-336x280 { max-width: 336px; }
.wow-ad-size-970x250 { max-width: 970px; }
.wow-ad-size-270x70 { max-width: 270px; }

.wow-ad-728-90 { max-width: 728px; }
.wow-ad-468-60 { max-width: 468px; }
.wow-ad-300-250 { max-width: 300px; }
.wow-ad-320-50 { max-width: 320px; }
.wow-ad-160-600 { max-width: 160px; }
.wow-ad-336-280 { max-width: 336px; }
.wow-ad-970-250 { max-width: 970px; }
.wow-ad-270-70 { max-width: 270px; }

/* Additional utility classes for targeting */
.wow-ad.center,
.wow-ad-container.wow-ad-align-center {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.wow-ad.left,
.wow-ad-container.wow-ad-align-left {
    text-align: left !important;
    margin-right: auto !important;
    margin-left: 0 !important;
}

.wow-ad.right,
.wow-ad-container.wow-ad-align-right {
    text-align: right !important;
    margin-left: auto !important;
    margin-right: 0 !important;
}

.wow-ad.no-margin {
    margin: 0;
}

/* Widget specific styles */
.widget .wow-ad {
    margin: 10px 0;
}

.widget .wow-ad-container {
    max-width: 100%;
}

.widget .wow-ad-content {
    max-width: 100%;
}

/* Ensure widget ads are responsive */
.widget .wow-ad-size-728x90,
.widget .wow-ad-728-90,
.widget .wow-ad-size-468x60,
.widget .wow-ad-468-60,
.widget .wow-ad-size-970x250,
.widget .wow-ad-970-250 {
    max-width: 100%;
    width: 100%;
}

.widget .wow-ad-size-728x90 .wow-ad-image,
.widget .wow-ad-728-90 .wow-ad-image,
.widget .wow-ad-size-468x60 .wow-ad-image,
.widget .wow-ad-468-60 .wow-ad-image,
.widget .wow-ad-size-970x250 .wow-ad-image,
.widget .wow-ad-970-250 .wow-ad-image {
    max-width: 100%;
    width: auto;
    height: auto;
}