/*==========================================================
    Sean B Shop Marketplace
    File: assets/css/components/badges.css
    Part 5.3 - Marketplace Badge System
==========================================================*/


/*==========================================================
    BASE BADGE
==========================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:5px;

    padding:5px 10px;

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

    font-size:.72rem;

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

    line-height:1;

    white-space:nowrap;

}


.badge i{

    font-size:.75rem;

}


/*==========================================================
    SALE BADGE
==========================================================*/

.badge-sale{

    background:var(--color-danger);

    color:var(--white);

}


.badge-sale:hover{

    filter:brightness(.9);

}


/*==========================================================
    DISCOUNT PERCENTAGE
==========================================================*/

.discount-badge{

    background:#ff5722;

    color:var(--white);

    padding:6px 12px;

}


.discount-badge span{

    font-weight:800;

}


/*==========================================================
    NEW PRODUCT BADGE
==========================================================*/

.badge-new{

    background:var(--color-success);

    color:var(--white);

}


/*==========================================================
    FLASH DEAL BADGE
==========================================================*/

.badge-flash{

    background:#ffb300;

    color:#111;

    animation:pulseBadge 1.8s infinite;

}


.badge-flash i{

    animation:flashIcon .8s infinite alternate;

}


@keyframes flashIcon{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.2);

    }

}


/*==========================================================
    BEST SELLER BADGE
==========================================================*/

.badge-best{

    background:#7b1fa2;

    color:var(--white);

}


/*==========================================================
    VERIFIED SELLER BADGE
==========================================================*/

.badge-verified{

    background:#0288d1;

    color:var(--white);

}


.badge-verified i{

    color:#fff;

}


/*==========================================================
    FREE DELIVERY BADGE
==========================================================*/

.badge-delivery{

    background:#e8f5e9;

    color:#2e7d32;

}


/*==========================================================
    PREMIUM / FEATURED BADGE
==========================================================*/

.badge-featured{

    background:var(--color-secondary);

    color:var(--white);

}


/*==========================================================
    STOCK BADGES
==========================================================*/

.stock-badge{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:5px 12px;

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

    font-size:.78rem;

    font-weight:var(--fw-semibold);

}


.stock-available{

    background:#e8f5e9;

    color:#2e7d32;

}


.stock-low{

    background:#fff3e0;

    color:#ef6c00;

}


.stock-out{

    background:#ffebee;

    color:#c62828;

}


/*==========================================================
    MARKETPLACE STATUS LABELS
==========================================================*/

.status-label{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:6px 14px;

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

    font-size:.78rem;

    font-weight:var(--fw-semibold);

}


.status-active{

    background:#e8f5e9;

    color:#2e7d32;

}


.status-pending{

    background:#fff8e1;

    color:#f57f17;

}


.status-processing{

    background:#e3f2fd;

    color:#1565c0;

}


.status-completed{

    background:#e0f2f1;

    color:#00695c;

}


.status-cancelled{

    background:#ffebee;

    color:#c62828;

}


/*==========================================================
    CORNER RIBBON
==========================================================*/

.ribbon{

    position:absolute;

    top:15px;

    left:-35px;

    width:140px;

    padding:7px 0;

    text-align:center;

    transform:rotate(-45deg);

    font-size:.75rem;

    font-weight:800;

    color:var(--white);

    z-index:3;

}


/*==========================================================
    RIBBON COLORS
==========================================================*/

.ribbon-sale{

    background:var(--color-danger);

}


.ribbon-new{

    background:var(--color-success);

}


.ribbon-hot{

    background:#ff9800;

}


/*==========================================================
    PRODUCT CORNER BADGES
==========================================================*/

.product-corner-badge{

    position:absolute;

    top:12px;

    left:12px;

    z-index:4;

}


/*==========================================================
    BADGE GROUP
==========================================================*/

.badge-group{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:8px;

}


/*==========================================================
    ANIMATED BADGES
==========================================================*/

.badge-pulse{

    animation:pulseBadge 2s infinite;

}


@keyframes pulseBadge{

    0%{

        box-shadow:0 0 0 0 rgba(230,0,0,.5);

    }


    70%{

        box-shadow:0 0 0 10px rgba(230,0,0,0);

    }


    100%{

        box-shadow:0 0 0 0 rgba(230,0,0,0);

    }

}


/*==========================================================
    GLOW BADGE
==========================================================*/

.badge-glow{

    animation:badgeGlow 2s infinite;

}


@keyframes badgeGlow{


    0%{

        box-shadow:0 0 0 rgba(255,255,255,0);

    }


    50%{

        box-shadow:0 0 15px rgba(255,255,255,.5);

    }


    100%{

        box-shadow:0 0 0 rgba(255,255,255,0);

    }

}


/*==========================================================
    SMALL BADGE
==========================================================*/

.badge-sm{

    padding:4px 8px;

    font-size:.65rem;

}


/*==========================================================
    LARGE BADGE
==========================================================*/

.badge-lg{

    padding:8px 16px;

    font-size:.85rem;

}


/*==========================================================
    MOBILE REFINEMENTS
==========================================================*/

@media(max-width:768px){


    .badge{

        font-size:.65rem;

        padding:4px 8px;

    }


    .ribbon{

        width:120px;

        left:-32px;

        font-size:.65rem;

    }


}


@media(max-width:480px){


    .badge-group{

        gap:5px;

    }


    .discount-badge{

        padding:5px 8px;

    }

}