/* 
   Enhanced Badge Styling - Final Version
   This file styles the discount badge and featured badge
   placing featured badge at top left and discount badge at lower right
*/

/* Reset any existing badge styles */
.badge.bg-danger.discount-percent,
.discount-badge {
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Specific positioning for the badges */
.featured-badge {
    left: 8px !important;
    top: 8px !important;
}

.badge.bg-danger.discount-percent {
    right: 8px !important;
    top: 15px !important; /* Same as featured badge */
}

/* Style the discount badge to match featured badge style but with smaller overall size */
.badge.bg-danger.discount-percent:not(.d-none),
.badge.discount-percent:not(.d-none) {
    /* Badge container */
    display: inline-block !important;
    background-color: #e41e25 !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important; /* Keep text size */
    padding: 0.15rem 0.4rem !important; /* Reduce padding to make badge smaller */
    border-radius: 4px !important; /* Match featured badge */
    
    /* Text positioning */
    line-height: 1.1 !important;
    letter-spacing: 0.3px !important;
    text-align: center !important;
    white-space: nowrap !important;
    
    /* Add back the breathing animation */
    animation: badge-pulse 2s infinite !important;
}

/* Ensure badges with d-none class are properly hidden - this MUST override everything */
.badge.bg-danger.discount-percent.d-none,
.badge.discount-percent.d-none,
.discount-percent.d-none {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Extra hover style to make it more interactive */
.product-card:hover .badge.bg-danger.discount-percent {
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

/* Ensure both badge types have consistent styling */
.product-card .featured-badge,
.badge.bg-danger.discount-percent {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Breathing animation for the badge */
@keyframes badge-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}