/**
 * Badge Styles - Circular Design
 * Modern circular badges for product cards and pages
 */

/* Base Badge Styles */
.product-badge {
    position: absolute;
    z-index: 10;
    width: 65px;
    height: 65px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Left Side Badges (Discount, Out of Stock, New) */
.product-badge.left {
    top: 15px;
    left: 15px;
}

/* Right Side Badges (Best Seller) */
.product-badge.right {
    top: 15px;
    right: 15px;
}

/* Discount Badge */
.product-badge.discount {
    background-color: #e74c3c;
}

/* Out of Stock Badge */
.product-badge.out-of-stock {
    background-color: #7f8c8d;
}

/* Out of Stock Button */
.add-to-cart-btn.out-of-stock {
    background-color: #7f8c8d !important;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Best Seller Badge */
.product-badge.best-seller {
    background-color: #f1c40f;
    color: #2c3e50;
}

/* New Badge */
.product-badge.new {
    background-color: #c0392b;
}

/* RTL Styles */
html.rtl .product-badge.left,
body.rtl .product-badge.left {
    left: auto;
    right: 15px;
}

html.rtl .product-badge.right,
body.rtl .product-badge.right {
    right: auto;
    left: 15px;
}

/* Out of Stock Styles for Product Image */
.out-of-stock-img {
    opacity: 0.6;
    filter: grayscale(50%);
}

.product-badge.out-of-stock {
    font-size: 12px; 
    line-height: 1.2;
}

/* Responsive adjustments for small screens */
@media (max-width: 576px) {
    .product-badge {
        width: 45px;
        height: 45px;
        font-size: 12px;
    }
    .product-badge.left {
        top: 10px;
        left: 10px;
    }
    .product-badge.right {
        top: 10px;
        right: 10px;
    }
}

/* Ensure badges don't overflow on very narrow cards */
@media (max-width: 320px) {
    .product-badge {
        width: 50px;
        height: 50px;
        font-size: 10px;
    }
    .product-badge.left {
        top: 5px;
        left: 5px;
    }
    .product-badge.right {
        top: 5px;
        right: 5px;
    }
}
.product-badge::after {
    content: attr(data-badge);
    color: #fff;
    font-size: 14px;
    font-weight: inherit;
    text-align: center;
}