/**
 * FEF Badge — stylesheet
 * All colors driven by CSS custom properties written per-instance on the
 * .fef-badges wrapper. Sensible defaults for each badge type so the widget
 * looks good out of the box.
 */

.fef-badges {
    /* Defaults — each badge type gets its own colour pair, individually
       overridable from the Style tab. */
    --fef-badge-sale-bg:           #dc2626;
    --fef-badge-sale-color:        #ffffff;
    --fef-badge-sale-bg-hover:     var(--fef-badge-sale-bg);
    --fef-badge-sale-color-hover:  var(--fef-badge-sale-color);

    --fef-badge-new-bg:            #16a34a;
    --fef-badge-new-color:         #ffffff;
    --fef-badge-new-bg-hover:      var(--fef-badge-new-bg);
    --fef-badge-new-color-hover:   var(--fef-badge-new-color);

    --fef-badge-featured-bg:       #f59e0b;
    --fef-badge-featured-color:    #0f172a;
    --fef-badge-featured-bg-hover: var(--fef-badge-featured-bg);
    --fef-badge-featured-color-hover: var(--fef-badge-featured-color);

    --fef-badge-oos-bg:            #64748b;
    --fef-badge-oos-color:         #ffffff;
    --fef-badge-oos-bg-hover:      var(--fef-badge-oos-bg);
    --fef-badge-oos-color-hover:   var(--fef-badge-oos-color);

    --fef-badge-low-bg:            #f97316;
    --fef-badge-low-color:         #ffffff;
    --fef-badge-low-bg-hover:      var(--fef-badge-low-bg);
    --fef-badge-low-color-hover:   var(--fef-badge-low-color);

    --fef-badge-custom-bg:         #3b82f6;
    --fef-badge-custom-color:      #ffffff;
    --fef-badge-custom-bg-hover:   var(--fef-badge-custom-bg);
    --fef-badge-custom-color-hover:var(--fef-badge-custom-color);
}

.fef-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.fef-badge:hover { transform: translateY(-1px); }

.fef-badge-sale     { background: var(--fef-badge-sale-bg);     color: var(--fef-badge-sale-color); }
.fef-badge-sale:hover     { background: var(--fef-badge-sale-bg-hover);     color: var(--fef-badge-sale-color-hover); }

.fef-badge-new      { background: var(--fef-badge-new-bg);      color: var(--fef-badge-new-color); }
.fef-badge-new:hover      { background: var(--fef-badge-new-bg-hover);      color: var(--fef-badge-new-color-hover); }

.fef-badge-featured { background: var(--fef-badge-featured-bg); color: var(--fef-badge-featured-color); }
.fef-badge-featured:hover { background: var(--fef-badge-featured-bg-hover); color: var(--fef-badge-featured-color-hover); }

.fef-badge-oos      { background: var(--fef-badge-oos-bg);      color: var(--fef-badge-oos-color); }
.fef-badge-oos:hover      { background: var(--fef-badge-oos-bg-hover);      color: var(--fef-badge-oos-color-hover); }

.fef-badge-low      { background: var(--fef-badge-low-bg);      color: var(--fef-badge-low-color); }
.fef-badge-low:hover      { background: var(--fef-badge-low-bg-hover);      color: var(--fef-badge-low-color-hover); }

.fef-badge-custom   { background: var(--fef-badge-custom-bg);   color: var(--fef-badge-custom-color); }
.fef-badge-custom:hover   { background: var(--fef-badge-custom-bg-hover);   color: var(--fef-badge-custom-color-hover); }

/* Elementor entrance-animation guard */
.elementor-widget-fef_badge.elementor-invisible,
.elementor-widget-fef_badge.elementor-invisible > .elementor-widget-container,
.elementor-widget-fef_badge .fef-badges,
.elementor-widget-fef_badge .fef-badge {
    visibility: visible !important;
    opacity: 1 !important;
}