```css
/* ============================================================
   RAEES IMPORT & EXPORT
   ULTRA PREMIUM BADGE SYSTEM
   ------------------------------------------------------------
   File: /assets/css/components/badges.css
   Full Path:
   /public_html/assets/css/components/badges.css

   Version: 1.0

   Purpose:
   - Global Badges
   - Category Badges
   - Status Badges
   - Gold / Green / Dark Badges
   - Glass Badges
   - Icon Badges
   - Verification Badges
   - Product / Export Labels
   - GST / Business Labels

   Depends On:
   - variables.css
   - reset.css
   - typography.css
   - global.css
   ============================================================ */


/* ============================================================
   01. BASE BADGE
   ============================================================ */

.badge {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--space-2);

    min-height: 30px;

    padding:
        0
        var(--space-3);

    border:
        1px solid transparent;

    border-radius:
        var(--radius-pill);

    font-family:
        var(--font-ui);

    font-size:
        0.56rem;

    font-weight:
        var(--font-bold);

    line-height:
        1;

    letter-spacing:
        0.035em;

    text-align:
        center;

    white-space:
        nowrap;

    vertical-align:
        middle;

    transition:
        color var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);

    isolation:
        isolate;
}


/* ============================================================
   02. BADGE ICON
   ============================================================ */

.badge > i,
.badge-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    font-size:
        0.62rem;

    line-height:
        1;
}


/* ============================================================
   03. BADGE TEXT
   ============================================================ */

.badge-text {
    display: inline-flex;

    align-items: center;

    line-height:
        1;
}


/* ============================================================
   04. PRIMARY BADGE
   ============================================================ */

.badge-primary {
    color:
        var(--text-white);

    border-color:
        var(--color-primary);

    background:
        var(--color-primary);

    box-shadow:
        0 8px 22px rgba(11, 43, 32, 0.12);
}


/* ============================================================
   05. PRIMARY SOFT BADGE
   ============================================================ */

.badge-primary-soft {
    color:
        var(--color-primary);

    border-color:
        rgba(11, 43, 32, 0.10);

    background:
        rgba(11, 43, 32, 0.06);
}


/* ============================================================
   06. DARK BADGE
   ============================================================ */

.badge-dark {
    color:
        var(--text-white);

    border-color:
        var(--color-primary-deep);

    background:
        var(--color-primary-deep);

    box-shadow:
        0 8px 22px rgba(4, 19, 14, 0.14);
}


/* ============================================================
   07. GOLD BADGE
   ============================================================ */

.badge-gold {
    color:
        var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.30);

    background:
        var(--gradient-gold);

    box-shadow:
        0 8px 22px rgba(183, 138, 61, 0.14);
}


/* ============================================================
   08. GOLD SOFT BADGE
   ============================================================ */

.badge-gold-soft {
    color:
        var(--color-secondary-dark);

    border-color:
        var(--border-gold);

    background:
        var(--bg-gold-soft);
}


/* ============================================================
   09. GOLD OUTLINE BADGE
   ============================================================ */

.badge-outline-gold {
    color:
        var(--color-secondary-dark);

    border-color:
        var(--border-gold);

    background:
        transparent;
}


/* ============================================================
   10. PRIMARY OUTLINE BADGE
   ============================================================ */

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

    border-color:
        rgba(11, 43, 32, 0.20);

    background:
        transparent;
}


/* ============================================================
   11. WHITE BADGE
   ============================================================ */

.badge-white {
    color:
        var(--color-primary-deep);

    border-color:
        rgba(255, 255, 255, 0.80);

    background:
        #ffffff;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.08);
}


/* ============================================================
   12. WHITE OUTLINE BADGE
   ============================================================ */

.badge-outline-white {
    color:
        #ffffff;

    border-color:
        rgba(255, 255, 255, 0.20);

    background:
        rgba(255, 255, 255, 0.035);
}


/* ============================================================
   13. GLASS LIGHT BADGE
   ============================================================ */

.badge-glass {
    color:
        var(--color-primary-deep);

    border-color:
        rgba(255, 255, 255, 0.50);

    background:
        rgba(255, 255, 255, 0.58);

    box-shadow:
        0 8px 24px rgba(11, 43, 32, 0.07);

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);
}


/* ============================================================
   14. GLASS DARK BADGE
   ============================================================ */

.badge-glass-dark {
    color:
        #ffffff;

    border-color:
        rgba(255, 255, 255, 0.12);

    background:
        rgba(4, 19, 14, 0.55);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.12);

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);
}


/* ============================================================
   15. SUCCESS BADGE
   ============================================================ */

.badge-success {
    color:
        #17633b;

    border-color:
        rgba(30, 130, 76, 0.15);

    background:
        rgba(30, 130, 76, 0.08);
}


/* ============================================================
   16. SUCCESS SOLID BADGE
   ============================================================ */

.badge-success-solid {
    color:
        #ffffff;

    border-color:
        #1e824c;

    background:
        #1e824c;

    box-shadow:
        0 8px 22px rgba(30, 130, 76, 0.15);
}


/* ============================================================
   17. WARNING BADGE
   ============================================================ */

.badge-warning {
    color:
        #8b6516;

    border-color:
        rgba(183, 138, 61, 0.20);

    background:
        rgba(212, 175, 104, 0.12);
}


/* ============================================================
   18. DANGER BADGE
   ============================================================ */

.badge-danger {
    color:
        #9d2e2e;

    border-color:
        rgba(180, 45, 45, 0.15);

    background:
        rgba(180, 45, 45, 0.07);
}


/* ============================================================
   19. INFO BADGE
   ============================================================ */

.badge-info {
    color:
        #285c74;

    border-color:
        rgba(45, 117, 151, 0.15);

    background:
        rgba(45, 117, 151, 0.07);
}


/* ============================================================
   20. MUTED BADGE
   ============================================================ */

.badge-muted {
    color:
        var(--text-muted);

    border-color:
        var(--border-light);

    background:
        var(--bg-soft);
}


/* ============================================================
   21. CATEGORY BADGE
   ============================================================ */

.badge-category {
    min-height:
        32px;

    padding:
        0
        var(--space-4);

    color:
        var(--color-secondary-dark);

    border-color:
        var(--border-gold);

    background:
        rgba(183, 138, 61, 0.07);

    font-size:
        0.54rem;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* ============================================================
   22. CATEGORY BADGE HOVER
   ============================================================ */

a.badge-category:hover,
button.badge-category:hover {
    color:
        var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.45);

    background:
        var(--gradient-gold);

    box-shadow:
        var(--shadow-gold);

    transform:
        translateY(-2px);
}


/* ============================================================
   23. DRY FRUITS CATEGORY
   ============================================================ */

.badge-dry-fruits {
    color:
        #805a21;

    border-color:
        rgba(183, 138, 61, 0.20);

    background:
        rgba(212, 175, 104, 0.10);
}


/* ============================================================
   24. SPICES CATEGORY
   ============================================================ */

.badge-spices {
    color:
        #8a4e24;

    border-color:
        rgba(165, 95, 45, 0.18);

    background:
        rgba(165, 95, 45, 0.08);
}


/* ============================================================
   25. EXPORT BADGE
   ============================================================ */

.badge-export {
    color:
        var(--color-primary);

    border-color:
        rgba(11, 43, 32, 0.12);

    background:
        rgba(11, 43, 32, 0.055);
}


/* ============================================================
   26. EXPORT PREMIUM BADGE
   ============================================================ */

.badge-export-premium {
    min-height:
        34px;

    padding:
        0
        var(--space-4);

    color:
        var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.28);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.90),
            rgba(212, 175, 104, 0.14)
        );

    box-shadow:
        0 10px 28px rgba(11, 43, 32, 0.07);
}


/* ============================================================
   27. VERIFIED BADGE
   ============================================================ */

.badge-verified {
    color:
        #17633b;

    border-color:
        rgba(30, 130, 76, 0.16);

    background:
        rgba(30, 130, 76, 0.07);
}

.badge-verified > i,
.badge-verified .badge-icon {
    color:
        #1e824c;
}


/* ============================================================
   28. GST BADGE
   ============================================================ */

.badge-gst {
    min-height:
        34px;

    padding:
        0
        var(--space-4);

    color:
        var(--color-primary-deep);

    border-color:
        var(--border-gold);

    background:
        var(--bg-gold-soft);

    letter-spacing:
        0.04em;
}


/* ============================================================
   29. EXPERIENCE BADGE
   ============================================================ */

.badge-experience {
    min-height:
        36px;

    padding:
        0
        var(--space-4);

    color:
        var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.28);

    background:
        var(--gradient-gold);

    box-shadow:
        var(--shadow-gold);
}


/* ============================================================
   30. PREMIUM BADGE
   ============================================================ */

.badge-premium {
    min-height:
        34px;

    padding:
        0
        var(--space-4);

    color:
        var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.30);

    background:
        var(--gradient-gold);

    box-shadow:
        var(--shadow-gold);

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


/* ============================================================
   31. FEATURED BADGE
   ============================================================ */

.badge-featured {
    color:
        #ffffff;

    border-color:
        var(--color-primary);

    background:
        var(--color-primary);

    box-shadow:
        0 10px 26px rgba(11, 43, 32, 0.15);

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


/* ============================================================
   32. NEW BADGE
   ============================================================ */

.badge-new {
    color:
        var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.28);

    background:
        var(--gradient-gold);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* ============================================================
   33. AVAILABLE BADGE
   ============================================================ */

.badge-available {
    color:
        #17633b;

    border-color:
        rgba(30, 130, 76, 0.16);

    background:
        rgba(30, 130, 76, 0.07);
}


/* ============================================================
   34. STATUS DOT
   ============================================================ */

.badge-dot::before {
    content: "";

    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        var(--radius-circle);

    background:
        currentColor;
}


/* ============================================================
   35. PULSING STATUS DOT
   ============================================================ */

.badge-dot-pulse::before {
    content: "";

    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        var(--radius-circle);

    background:
        currentColor;

    box-shadow:
        0 0 0 0 currentColor;

    animation:
        badgePulse 2s infinite;
}


/* ============================================================
   36. PULSE ANIMATION
   ============================================================ */

@keyframes badgePulse {

    0% {
        box-shadow:
            0 0 0 0 rgba(30, 130, 76, 0.28);
    }

    70% {
        box-shadow:
            0 0 0 7px rgba(30, 130, 76, 0);
    }

    100% {
        box-shadow:
            0 0 0 0 rgba(30, 130, 76, 0);
    }

}


/* ============================================================
   37. ICON CIRCLE BADGE
   ============================================================ */

.badge-icon-circle {
    width:
        34px;

    height:
        34px;

    min-width:
        34px;

    min-height:
        34px;

    padding:
        0;

    border-radius:
        var(--radius-circle);
}


/* ============================================================
   38. ICON SQUARE BADGE
   ============================================================ */

.badge-icon-square {
    width:
        36px;

    height:
        36px;

    min-width:
        36px;

    min-height:
        36px;

    padding:
        0;

    border-radius:
        11px;
}


/* ============================================================
   39. NUMBER BADGE
   ============================================================ */

.badge-number {
    min-width:
        24px;

    height:
        24px;

    min-height:
        24px;

    padding:
        0
        6px;

    color:
        #ffffff;

    border:
        2px solid #ffffff;

    background:
        var(--color-secondary-dark);

    font-size:
        0.48rem;

    box-shadow:
        0 6px 16px rgba(11, 43, 32, 0.12);
}


/* ============================================================
   40. BADGE SMALL
   ============================================================ */

.badge-sm {
    min-height:
        24px;

    padding:
        0
        var(--space-2);

    gap:
        5px;

    font-size:
        0.48rem;
}


/* ============================================================
   41. BADGE MEDIUM
   ============================================================ */

.badge-md {
    min-height:
        32px;

    padding:
        0
        var(--space-3);
}


/* ============================================================
   42. BADGE LARGE
   ============================================================ */

.badge-lg {
    min-height:
        38px;

    padding:
        0
        var(--space-4);

    font-size:
        0.6rem;
}


/* ============================================================
   43. BADGE EXTRA LARGE
   ============================================================ */

.badge-xl {
    min-height:
        44px;

    padding:
        0
        var(--space-5);

    font-size:
        0.64rem;
}


/* ============================================================
   44. SQUARE BADGE
   ============================================================ */

.badge-square {
    border-radius:
        var(--radius-sm);
}


/* ============================================================
   45. ROUNDED BADGE
   ============================================================ */

.badge-rounded {
    border-radius:
        var(--radius-md);
}


/* ============================================================
   46. PILL BADGE
   ============================================================ */

.badge-pill {
    border-radius:
        var(--radius-pill);
}


/* ============================================================
   47. UPPERCASE BADGE
   ============================================================ */

.badge-uppercase {
    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


/* ============================================================
   48. BADGE GROUP
   ============================================================ */

.badge-group {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap:
        var(--space-2);
}


/* ============================================================
   49. BADGE GROUP LARGE GAP
   ============================================================ */

.badge-group-lg {
    gap:
        var(--space-3);
}


/* ============================================================
   50. FLOATING BADGE
   ============================================================ */

.badge-floating {
    position:
        absolute;

    z-index:
        5;

    box-shadow:
        0 12px 30px rgba(11, 43, 32, 0.12);
}


/* ============================================================
   51. FLOAT TOP LEFT
   ============================================================ */

.badge-top-left {
    top:
        var(--space-4);

    left:
        var(--space-4);
}


/* ============================================================
   52. FLOAT TOP RIGHT
   ============================================================ */

.badge-top-right {
    top:
        var(--space-4);

    right:
        var(--space-4);
}


/* ============================================================
   53. FLOAT BOTTOM LEFT
   ============================================================ */

.badge-bottom-left {
    bottom:
        var(--space-4);

    left:
        var(--space-4);
}


/* ============================================================
   54. FLOAT BOTTOM RIGHT
   ============================================================ */

.badge-bottom-right {
    right:
        var(--space-4);

    bottom:
        var(--space-4);
}


/* ============================================================
   55. BADGE WITH COUNTER
   ============================================================ */

.badge-counter-wrap {
    position:
        relative;

    display:
        inline-flex;
}


/* ============================================================
   56. COUNTER POSITION
   ============================================================ */

.badge-counter-wrap
.badge-number {
    position:
        absolute;

    top:
        -8px;

    right:
        -8px;

    z-index:
        5;
}


/* ============================================================
   57. SECTION LABEL
   ============================================================ */

.section-badge {
    display: inline-flex;

    align-items: center;

    gap:
        var(--space-3);

    color:
        var(--color-secondary-dark);

    font-family:
        var(--font-ui);

    font-size:
        var(--font-size-xs);

    font-weight:
        var(--font-bold);

    line-height:
        1;

    letter-spacing:
        var(--tracking-widest);

    text-transform:
        uppercase;
}


/* ============================================================
   58. SECTION LABEL LINE
   ============================================================ */

.section-badge::before {
    content: "";

    width:
        34px;

    height:
        1px;

    flex:
        0 0 34px;

    background:
        var(--gradient-gold);
}


/* ============================================================
   59. SECTION LABEL WITH DOT
   ============================================================ */

.section-badge-dot::before {
    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        var(--radius-circle);

    background:
        var(--color-secondary);

    box-shadow:
        0 0 0 6px rgba(183, 138, 61, 0.08);
}


/* ============================================================
   60. DARK SECTION LABEL
   ============================================================ */

.section-badge-light {
    color:
        var(--color-secondary-light);
}


/* ============================================================
   61. DARK SECTION LABEL LINE
   ============================================================ */

.section-badge-light::before {
    background:
        var(--gradient-gold);
}


/* ============================================================
   62. BADGE HOVER LIFT
   ============================================================ */

a.badge-hover,
button.badge-hover {
    cursor:
        pointer;
}

a.badge-hover:hover,
button.badge-hover:hover {
    transform:
        translateY(-2px);
}


/* ============================================================
   63. GOLD HOVER
   ============================================================ */

.badge-hover-gold:hover {
    color:
        var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.45);

    background:
        var(--gradient-gold);

    box-shadow:
        var(--shadow-gold);
}


/* ============================================================
   64. PRIMARY HOVER
   ============================================================ */

.badge-hover-primary:hover {
    color:
        #ffffff;

    border-color:
        var(--color-primary);

    background:
        var(--color-primary);

    box-shadow:
        0 10px 26px rgba(11, 43, 32, 0.15);
}


/* ============================================================
   65. BADGE SHINE
   ============================================================ */

.badge-shine {
    overflow:
        hidden;
}

.badge-shine::after {
    content: "";

    position:
        absolute;

    top:
        -50%;

    left:
        -80%;

    z-index:
        1;

    width:
        40%;

    height:
        200%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.32),
            transparent
        );

    transform:
        rotate(18deg);

    transition:
        left 0.65s ease;

    pointer-events:
        none;
}

.badge-shine:hover::after {
    left:
        140%;
}


/* ============================================================
   66. BADGE CONTENT ABOVE SHINE
   ============================================================ */

.badge-shine > * {
    position:
        relative;

    z-index:
        2;
}


/* ============================================================
   67. PRODUCT CARD BADGE
   ============================================================ */

.product-badge {
    min-height:
        30px;

    padding:
        0
        var(--space-3);

    color:
        var(--color-primary-deep);

    border-color:
        rgba(255, 255, 255, 0.60);

    background:
        rgba(255, 255, 255, 0.84);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.09);

    -webkit-backdrop-filter:
        blur(10px);

    backdrop-filter:
        blur(10px);

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


/* ============================================================
   68. PRODUCT CARD GOLD BADGE
   ============================================================ */

.product-badge-gold {
    color:
        var(--color-primary-deep);

    border-color:
        rgba(183, 138, 61, 0.30);

    background:
        rgba(212, 175, 104, 0.90);

    box-shadow:
        0 8px 24px rgba(183, 138, 61, 0.20);
}


/* ============================================================
   69. PRODUCT AVAILABILITY DOT
   ============================================================ */

.product-availability {
    display: inline-flex;

    align-items: center;

    gap:
        7px;

    color:
        #17633b;

    font-family:
        var(--font-ui);

    font-size:
        0.55rem;

    font-weight:
        var(--font-bold);

    line-height:
        1;
}


/* ============================================================
   70. PRODUCT AVAILABILITY DOT
   ============================================================ */

.product-availability::before {
    content: "";

    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        var(--radius-circle);

    background:
        #1e824c;

    box-shadow:
        0 0 0 5px rgba(30, 130, 76, 0.08);
}


/* ============================================================
   71. BADGE TOOLTIP WRAPPER
   ============================================================ */

.badge-tooltip {
    position:
        relative;
}


/* ============================================================
   72. SIMPLE TOOLTIP
   ============================================================ */

.badge-tooltip::after {
    content:
        attr(data-tooltip);

    position:
        absolute;

    left:
        50%;

    bottom:
        calc(100% + 9px);

    z-index:
        20;

    width:
        max-content;

    max-width:
        220px;

    padding:
        7px
        10px;

    border-radius:
        7px;

    color:
        #ffffff;

    background:
        var(--color-primary-deep);

    box-shadow:
        0 8px 20px rgba(4, 19, 14, 0.15);

    font-family:
        var(--font-ui);

    font-size:
        0.5rem;

    font-weight:
        var(--font-medium);

    line-height:
        1.35;

    white-space:
        normal;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translate(-50%, 4px);

    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);

    pointer-events:
        none;
}


/* ============================================================
   73. TOOLTIP HOVER
   ============================================================ */

.badge-tooltip:hover::after {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translate(-50%, 0);
}


/* ============================================================
   74. MOBILE
   ============================================================ */

@media (max-width: 767.98px) {

    .badge {
        min-height:
            28px;

        padding:
            0
            var(--space-3);
    }

    .badge-lg {
        min-height:
            36px;
    }

    .badge-xl {
        min-height:
            40px;

        padding:
            0
            var(--space-4);
    }

    .section-badge {
        gap:
            var(--space-2);
    }

    .section-badge::before {
        width:
            28px;

        flex-basis:
            28px;
    }

}


/* ============================================================
   75. SMALL MOBILE
   ============================================================ */

@media (max-width: 479.98px) {

    .badge-group {
        gap:
            6px;
    }

    .badge-category {
        min-height:
            30px;

        padding:
            0
            var(--space-3);
    }

    .badge-floating.badge-top-left {
        top:
            var(--space-3);

        left:
            var(--space-3);
    }

    .badge-floating.badge-top-right {
        top:
            var(--space-3);

        right:
            var(--space-3);
    }

    .badge-floating.badge-bottom-left {
        bottom:
            var(--space-3);

        left:
            var(--space-3);
    }

    .badge-floating.badge-bottom-right {
        right:
            var(--space-3);

        bottom:
            var(--space-3);
    }

}


/* ============================================================
   76. ACCESSIBILITY
   ============================================================ */

a.badge:focus-visible,
button.badge:focus-visible {
    outline:
        2px solid var(--color-secondary);

    outline-offset:
        3px;
}


/* ============================================================
   77. REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .badge,
    .badge-shine::after,
    .badge-tooltip::after {
        transition:
            none;
    }

    .badge-dot-pulse::before {
        animation:
            none;
    }

    a.badge-hover:hover,
    button.badge-hover:hover {
        transform:
            none;
    }

}


/* ============================================================
   END OF BADGE SYSTEM
   ============================================================ */
```