/**
 * TAÑÁ BADGE SYSTEM - CSS GLOBAL
 * v1.0.0
 */

/* Posicionamiento */
.product-card {
    position: relative;
}

.product-card .tana-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
}

/* Contenedor badges */
.tana-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tana-badges--listing {
    top: 8px;
    left: 8px;
}

.tana-badges .tana-badge {
    position: relative;
    top: auto;
    left: auto;
}

/* Badge base */
.tana-badge {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    color: #fff;
    white-space: nowrap;
    line-height: 1.2;
}

/* NEWPRODUCTS */
.tana-badge--lanzamiento {
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
}

.tana-badge--novedad {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
}

.tana-badge--nuevo {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
}

.tana-badge--destacado {
    background: linear-gradient(135deg, #9C27B0 0%, #7B1FA2 100%);
}

/* BESTSELLERS */
.tana-badge--bestseller {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #333;
}

.tana-badge--favorito {
    background: linear-gradient(135deg, #E91E63 0%, #C2185B 100%);
}

.tana-badge--promocion {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
}

/* FEATURED */
.tana-badge--destacado-featured {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #333;
    font-weight: 700;
}

.tana-badge--recomendado {
    background: linear-gradient(135deg, #00C853 0%, #00897B 100%);
}

.tana-badge--exclusivo {
    background: linear-gradient(135deg, #7B1FA2 0%, #4A148C 100%);
}

/* Responsive */
@media (max-width: 767px) {
    .tana-badges {
        top: 6px;
        left: 6px;
        gap: 4px;
    }
    
    .product-card .tana-badge,
    .tana-badges .tana-badge {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    .product-card .tana-badge {
        top: 8px;
        left: 8px;
    }
}

/* Animación */
@keyframes tana-badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.tana-badge--lanzamiento {
    animation: tana-badge-pulse 2s ease-in-out infinite;
}