/**
 * ============================================================================
 * VENDOR BADGES - Premium Pill Design
 * ============================================================================
 *
 * Premium badge styling for vendor store pages.
 * Features pill-shaped badges with icon glow effects.
 *
 * Related files:
 * - includes/vendor-badges.php (badge logic)
 * - store-vendor.php (template)
 * - assets/css/vendor-store.css (hero section styles)
 *
 * Updated: January 2026
 * ============================================================================
 */

/* ==========================================================================
   CSS Custom Properties (matches vendor-store.css)
   ========================================================================== */

:root {
    --vb-accent-gold: #c9a376;
    --vb-accent-purple: #9370db;
    --vb-accent-blue: #6495ed;
    --vb-accent-silver: #b8b8b8;
}

/* ==========================================================================
   Badge Container - Centered with Animation
   ========================================================================== */

.vendor-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;

    animation: badgesFadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.65s backwards;
}

@keyframes badgesFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   Individual Badge - Premium Pill
   ========================================================================== */

.vendor-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    cursor: default;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

/* Subtle shine overlay */
.vendor-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 50%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 100px;
}

.vendor-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.vendor-badge:hover::before {
    opacity: 1;
}

/* ==========================================================================
   Badge Icon
   ========================================================================== */

.vendor-badge__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: filter 0.3s ease;
}

/* ==========================================================================
   Badge Label
   ========================================================================== */

.vendor-badge__label {
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

/* ==========================================================================
   Badge-Specific Colors with Icon Glow
   ========================================================================== */

/* Pro Studio - Gold */
.vendor-badge--pro_studio {
    border-color: rgba(201, 163, 118, 0.25);
}

.vendor-badge--pro_studio:hover {
    border-color: rgba(201, 163, 118, 0.45);
    box-shadow: 0 4px 16px rgba(201, 163, 118, 0.15);
}

.vendor-badge--pro_studio .vendor-badge__icon {
    color: var(--vb-accent-gold);
    filter: drop-shadow(0 0 4px rgba(201, 163, 118, 0.5));
}

/* Top Seller - Gold */
.vendor-badge--top_seller {
    border-color: rgba(201, 163, 118, 0.25);
}

.vendor-badge--top_seller:hover {
    border-color: rgba(201, 163, 118, 0.45);
    box-shadow: 0 4px 16px rgba(201, 163, 118, 0.15);
}

.vendor-badge--top_seller .vendor-badge__icon {
    color: var(--vb-accent-gold);
    fill: var(--vb-accent-gold);
    filter: drop-shadow(0 0 4px rgba(201, 163, 118, 0.5));
}

/* Exclusive - Purple */
.vendor-badge--exclusive {
    border-color: rgba(147, 112, 219, 0.25);
}

.vendor-badge--exclusive:hover {
    border-color: rgba(147, 112, 219, 0.45);
    box-shadow: 0 4px 16px rgba(147, 112, 219, 0.15);
}

.vendor-badge--exclusive .vendor-badge__icon {
    color: var(--vb-accent-purple);
    filter: drop-shadow(0 0 4px rgba(147, 112, 219, 0.5));
}

/* GDC Alum - Blue */
.vendor-badge--gdc_alum {
    border-color: rgba(100, 149, 237, 0.25);
}

.vendor-badge--gdc_alum:hover {
    border-color: rgba(100, 149, 237, 0.45);
    box-shadow: 0 4px 16px rgba(100, 149, 237, 0.15);
}

.vendor-badge--gdc_alum .vendor-badge__icon {
    color: var(--vb-accent-blue);
    filter: drop-shadow(0 0 4px rgba(100, 149, 237, 0.5));
}

/* Founding Member - Silver */
.vendor-badge--founding_member {
    border-color: rgba(184, 184, 184, 0.2);
}

.vendor-badge--founding_member:hover {
    border-color: rgba(184, 184, 184, 0.4);
    box-shadow: 0 4px 16px rgba(184, 184, 184, 0.1);
}

.vendor-badge--founding_member .vendor-badge__icon {
    color: var(--vb-accent-silver);
    filter: drop-shadow(0 0 4px rgba(184, 184, 184, 0.4));
}

/* ==========================================================================
   Responsive - Tablet
   ========================================================================== */

@media (max-width: 768px) {
    .vendor-badges {
        gap: 8px;
    }

    .vendor-badge {
        padding: 7px 14px;
        font-size: 11px;
        gap: 6px;
    }

    .vendor-badge__icon {
        width: 14px;
        height: 14px;
    }
}

/* ==========================================================================
   Responsive - Mobile
   ========================================================================== */

@media (max-width: 480px) {
    .vendor-badges {
        gap: 6px;
    }

    .vendor-badge {
        padding: 6px 12px;
        font-size: 10px;
        letter-spacing: 0.03em;
    }

    .vendor-badge__icon {
        width: 13px;
        height: 13px;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .vendor-badges {
        animation: none;
    }

    .vendor-badge {
        transition: none;
    }

    .vendor-badge__icon {
        transition: none;
    }
}