/**
 * Cart count bubble styles.
 * File: your-child-theme/assets/css/cart-count.css
 *
 * The bubble colour defaults to (#1A2744).
 * Change the --cart-bubble-bg custom property — or just edit the hex directly —
 * to match your theme's accent colour.
 */

:root {
    --cart-bubble-bg:   #1A2744;   /* background colour  */
    --cart-bubble-text: #C4AB84;   /* number colour      */
}

/* Wrapper injected by JS around the Divi cart icon link */
.cart-count-wrap {
    position: relative;
    display: inline-block;
    line-height: 1;
}

/* The bubble itself */
.cart-count-bubble {
    position: absolute;
    top: 2px;
    right: -5px;
    z-index: 10;

    background: var(--cart-bubble-bg);
    color:      var(--cart-bubble-text);

    font-size:   10px;
    font-weight: 700;
    line-height: 1;
    min-width:   18px;
    height:      18px;
    padding:     0 4px;
    border-radius: 9px;

    display:         flex;
    align-items:     center;
    justify-content: center;
    pointer-events:  none;

    /* Smooth show/hide and position transitions */
    transition: transform 0.15s ease, opacity 0.15s ease;
}

/* Hide the bubble when the cart is empty */
.cart-count-bubble[data-count="0"] {
    opacity:   0;
    transform: scale(0);
}

/* Brief "pop" animation when the count increases */
.cart-count-bump {
    transform: scale(1.4) !important;
}