/* ==========================================================================
   WCMG Modern Badges — CSS-only ribbons and pills with optional animations
   ========================================================================== */

/* Ensure product cards are positioning contexts.
   No overflow:hidden — it clips pill badges and long ribbon text. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    position: relative;
}

/* --------------------------------------------------------------------------
   Base badge
   -------------------------------------------------------------------------- */
.wcmg-badge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    pointer-events: none;
    line-height: 1;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Corner-ribbon type
   Uses a clipping wrapper on the image container so it doesn't need
   overflow:hidden on the whole card (which clips pills and long text).
   -------------------------------------------------------------------------- */
.wcmg-badge--corner-ribbon {
    top: 18px;
    left: -28px;
    width: 120px;        /* wider to fit longer labels like "HOT SALE!" */
    text-align: center;
    padding: 6px 0;
    transform: rotate(-45deg);
    transform-origin: center;
    overflow: hidden;    /* clips only the ribbon itself */
}

/* --------------------------------------------------------------------------
   Pill type
   Offset down when WooCommerce's native .onsale badge is also present,
   so the two don't stack on top of each other.
   -------------------------------------------------------------------------- */
.wcmg-badge--pill {
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 50px;
}

/* Push our pill below WC's native sale badge when both appear.
   Broad selector catches any .onsale structure the theme uses. */
li.product:has(.onsale) .wcmg-badge--pill {
    top: 50px;
}

/* --------------------------------------------------------------------------
   Single-product wrapper (badge is inline, not absolute)
   -------------------------------------------------------------------------- */
.wcmg-badge-single {
    margin-bottom: 8px;
}
.wcmg-badge-single .wcmg-badge {
    position: static;
    display: inline-block;
}

/* --------------------------------------------------------------------------
   Color schemes
   -------------------------------------------------------------------------- */
.wcmg-badge--primary { background: #6c3fc5; color: #fff; }
.wcmg-badge--success { background: #27ae60; color: #fff; }
.wcmg-badge--danger  { background: #e74c3c; color: #fff; }
.wcmg-badge--warning { background: #f39c12; color: #fff; }
.wcmg-badge--dark    { background: #1a1a1a; color: #fff; }

/* --------------------------------------------------------------------------
   Keyframe definitions
   -------------------------------------------------------------------------- */
@keyframes wcmg-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.12); }
}

@keyframes wcmg-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
}

@keyframes wcmg-shake {
    0%, 100% { transform: rotate(0deg); }
    25%       { transform: rotate(-8deg); }
    75%       { transform: rotate(8deg); }
}

@keyframes wcmg-glow {
    0%, 100% { box-shadow: 0 0 4px  rgba(255, 255, 255, .4); }
    50%       { box-shadow: 0 0 14px rgba(255, 255, 255, .9); }
}

/* Corner-ribbon animations (override the static rotate) */
.wcmg-badge--corner-ribbon.wcmg-badge--anim-pulse  { animation: wcmg-pulse  1.4s ease-in-out infinite; }
.wcmg-badge--corner-ribbon.wcmg-badge--anim-bounce { animation: wcmg-bounce 1.2s ease-in-out infinite; }
.wcmg-badge--corner-ribbon.wcmg-badge--anim-shake  { animation: wcmg-shake  1s   ease-in-out infinite; transform-origin: center; }
.wcmg-badge--corner-ribbon.wcmg-badge--anim-glow   { animation: wcmg-glow   2s   ease-in-out infinite; }

/* Pill animations */
.wcmg-badge--pill.wcmg-badge--anim-pulse  { animation: wcmg-pulse  1.4s ease-in-out infinite; }
.wcmg-badge--pill.wcmg-badge--anim-bounce { animation: wcmg-bounce 1.2s ease-in-out infinite; }
.wcmg-badge--pill.wcmg-badge--anim-shake  { animation: wcmg-shake  1s   ease-in-out infinite; }
.wcmg-badge--pill.wcmg-badge--anim-glow   { animation: wcmg-glow   2s   ease-in-out infinite; }