/**
 * Front-office styles for Elegant Badges
 *
 * @author Shop Coders
 */

.elegant-badge-container {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    pointer-events: none;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Hide badges initially (will be moved by JS) */
.elegant-badge-product-page,
.elegant-badge-product-list {
    display: none;
}

.elegant-badge-image {
    max-width: 80px;
    max-height: 80px;
    display: block;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Force transparent background on all child elements */
.elegant-badge-container *,
.elegant-badge-container *::before,
.elegant-badge-container *::after {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .elegant-badge-image {
        max-width: 60px;
        max-height: 60px;
    }

    .elegant-badge-container {
        top: 5px;
        left: 5px;
    }
}

/* Ensure parent container has position relative */
.product-thumbnail,
.product-cover,
.product-miniature .thumbnail-container,
.js-product-miniature .thumbnail-container,
article.product-miniature .product-thumbnail {
    position: relative;
}