/* ============================================
   Nomagri E-Ticaret - Badge Components
   Premium badge stilleri
   ============================================ */

/* ===== BASE BADGE ===== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    border-radius: var(--radius-base);
    white-space: nowrap;
}

/* ===== BADGE VARIANTS ===== */
.badge--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.badge--primary-soft {
    background-color: rgba(45, 95, 45, 0.1);
    color: var(--color-primary);
}

.badge--secondary {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.badge--accent {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.badge--accent-soft {
    background-color: rgba(201, 169, 98, 0.15);
    color: var(--color-accent-dark);
}

.badge--success {
    background-color: var(--color-success);
    color: var(--color-white);
}

.badge--success-soft {
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.badge--warning {
    background-color: var(--color-warning);
    color: var(--color-white);
}

.badge--warning-soft {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
}

.badge--error {
    background-color: var(--color-error);
    color: var(--color-white);
}

.badge--error-soft {
    background-color: var(--color-error-light);
    color: var(--color-error);
}

.badge--info {
    background-color: var(--color-info);
    color: var(--color-white);
}

.badge--info-soft {
    background-color: var(--color-info-light);
    color: var(--color-info);
}

.badge--gray {
    background-color: var(--color-gray-200);
    color: var(--color-gray-700);
}

.badge--dark {
    background-color: var(--color-gray-900);
    color: var(--color-white);
}

.badge--white {
    background-color: var(--color-white);
    color: var(--color-gray-800);
}

/* ===== OUTLINE BADGES ===== */
.badge--outline {
    background-color: transparent;
    border: 1px solid currentColor;
}

.badge--outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.badge--outline-accent {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* ===== BADGE SIZES ===== */
.badge--sm {
    padding: 2px var(--space-2);
    font-size: 10px;
}

.badge--lg {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-sm);
}

/* ===== BADGE SHAPES ===== */
.badge--rounded {
    border-radius: var(--radius-full);
}

.badge--square {
    border-radius: 0;
}

/* ===== DOT BADGE ===== */
.badge--dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: var(--radius-full);
}

.badge--dot-lg {
    width: 12px;
    height: 12px;
}

/* ===== COUNT BADGE ===== */
.badge--count {
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
}

/* ===== PRODUCT BADGES ===== */
.badge--sale {
    background-color: var(--color-error);
    color: var(--color-white);
}

.badge--new {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.badge--organic {
    background-color: var(--color-success);
    color: var(--color-white);
}

.badge--bestseller {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-secondary) 100%);
    color: var(--color-white);
}

.badge--limited {
    background-color: var(--color-secondary);
    color: var(--color-white);
}

.badge--natural {
    background-color: var(--color-olive);
    color: var(--color-white);
}

.badge--premium {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-accent) 100%);
    color: var(--color-white);
    border: 1px solid var(--color-accent);
}

.badge--hot {
    background: linear-gradient(135deg, #ff4d4d 0%, #ff8c00 100%);
    color: var(--color-white);
}

/* ===== STATUS BADGES ===== */
.badge--status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.badge--status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background-color: currentColor;
}

.badge--in-stock {
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.badge--low-stock {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
}

.badge--out-of-stock {
    background-color: var(--color-gray-200);
    color: var(--color-gray-600);
}

/* ===== ORDER STATUS BADGES ===== */
.badge--pending {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
}

.badge--processing {
    background-color: var(--color-info-light);
    color: var(--color-info);
}

.badge--shipped {
    background-color: rgba(45, 95, 45, 0.1);
    color: var(--color-primary);
}

.badge--delivered {
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.badge--cancelled {
    background-color: var(--color-error-light);
    color: var(--color-error);
}

/* ===== DISCOUNT BADGE ===== */
.badge--discount {
    background-color: var(--color-error);
    color: var(--color-white);
    font-weight: var(--font-weight-bold);
}

.badge--discount-lg {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-base);
}

/* ===== CATEGORY BADGE ===== */
.badge--category {
    background-color: var(--color-cream);
    color: var(--color-gray-700);
    border: 1px solid var(--color-stone);
    text-transform: none;
    letter-spacing: normal;
    font-weight: var(--font-weight-medium);
}

.badge--category:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* ===== TAG BADGES ===== */
.badge--tag {
    background-color: var(--color-stone);
    color: var(--color-gray-700);
    text-transform: none;
    letter-spacing: normal;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.badge--tag:hover {
    background-color: var(--color-gray-300);
}

.badge--tag-selected {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* ===== ICON BADGE ===== */
.badge svg {
    width: 12px;
    height: 12px;
}

.badge--lg svg {
    width: 14px;
    height: 14px;
}

/* ===== BADGE WITH CLOSE ===== */
.badge__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: var(--space-1);
    border-radius: var(--radius-full);
    opacity: 0.7;
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.badge__close:hover {
    opacity: 1;
}