/* CSS BADGE STYLES - SMART RESPONSIVE */
.product-badge {
    pointer-events: none;
    position: absolute;
    top: 10px;
    z-index: 1000;
    max-width: 45%;
}

/* Badge kiri */
.product-badge-left {
    left: 10px;
}

/* Badge kanan */
.product-badge-right {
    right: 10px;
}

.badge-hot,
.badge-best-seller,
.badge-new {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.2);
    font-family: 'Lato', sans-serif;
    white-space: nowrap;
    border-radius: 2px;
}

.badge-icon {
    font-size: 12px;
    flex-shrink: 0;
}

.badge-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.badge-hot {
    background: linear-gradient(135deg, #ff1c33, #c82333);
    color: white;
}

.badge-best-seller {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    color: #ffffff;
}

.badge-new {
    background: linear-gradient(135deg, #4882ff, #3662c0);
    color: white;
}

/*//////////////////////////////////////////////////////////////////
[ LG ] - 991px (iPad Landscape) */
@media (max-width: 991px) {
    .product-badge {
        top: 8px;
        max-width: 40%;
    }
    
    .product-badge-left {
        left: 8px;
    }
    
    .product-badge-right {
        right: 8px;
    }
    
    .badge-hot,
    .badge-best-seller,
    .badge-new {
        padding: 5px 8px;
        font-size: 10px;
        gap: 3px;
    }
    
    .badge-icon {
        font-size: 11px;
    }
}

/*//////////////////////////////////////////////////////////////////
[ MD ] - 767px (iPad Mini Portrait) */
@media (max-width: 767px) {
    .product-badge {
        top: 6px;
        max-width: 35%;
    }
    
    .product-badge-left {
        left: 6px;
    }
    
    .product-badge-right {
        right: 6px;
    }
    
    .badge-hot,
    .badge-best-seller,
    .badge-new {
        padding: 4px 6px;
        font-size: 9px;
        gap: 2px;
    }
    
    .badge-icon {
        font-size: 10px;
    }
}

/*//////////////////////////////////////////////////////////////////
[ SM ] - 575px (Large Phones) */
@media (max-width: 575px) {
    .product-badge {
        top: 5px;
        max-width: 30%;
    }
    
    .product-badge-left {
        left: 5px;
    }
    
    .product-badge-right {
        right: 5px;
    }
    
    .badge-hot,
    .badge-best-seller,
    .badge-new {
        padding: 3px 5px;
        font-size: 8px;
    }
    
    .badge-icon {
        font-size: 9px;
    }
}

/*//////////////////////////////////////////////////////////////////
[ SSM ] - 480px (iPhone 14 Pro) */
@media (max-width: 480px) {
    .product-badge {
        top: 6px;
        max-width: 35%;
    }
    
    .product-badge-left {
        left: 6px;
    }
    
    .product-badge-right {
        right: 6px;
    }
    
    .badge-hot,
    .badge-best-seller,
    .badge-new {
        padding: 4px 6px;
        font-size: 9px;
        gap: 2px;
    }
    
    .badge-icon {
        font-size: 10px;
    }
}

/*//////////////////////////////////////////////////////////////////
[ MD ] - 1024px (iPad Pro Portrait) */
@media (max-width: 1024px) {
    .product-badge {
        top: 6px;
        max-width: 35%;
    }
    
    .product-badge-left {
        left: 6px;
    }
    
    .product-badge-right {
        right: 6px;
    }
    
    .badge-hot,
    .badge-best-seller,
    .badge-new {
        padding: 4px 6px;
        font-size: 9px;
        gap: 2px;
    }
    
    .badge-icon {
        font-size: 10px;
    }
}

/*//////////////////////////////////////////////////////////////////
CUSTOM COLOR BADGE PRODUCT DETAIL */
.custom-badge {
    font-size: 12px;
    font-weight: bold;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.custom-badge-hot {
    background: linear-gradient(135deg, #ff1c33, #c82333);
}

.custom-badge-best_seller {
    background: linear-gradient(135deg, #ffc107, #e0a800);
    color: #ffffff !important;
}

.custom-badge-new {
    background: linear-gradient(135deg, #4882ff, #3662c0);
}

/* Responsive untuk product detail */
@media (max-width: 768px) {
    .custom-badge {
        font-size: 10px;
        padding: 4px 8px;
    }
}