/* * 1. Style the main menu item container.
 * This replaces `.et_pb_menu__cart-button`.
 * The position:relative is crucial for positioning the count bubble.
*/

/* * 5. Change the icon color when items are in the cart.
 * This replaces `.et_pb_menu__cart-button.has-items .et-pb-icon`.
*/
#profile-cart .dsm-mega-menu-item.has-items .dsm_cart_icon {
    color: green !important; 
}

.et_pb_menu__cart-button {
    position: relative;
    top:0px;
    margin-left:30px!important;
}

.et_pb_menu__cart-count {
    position: absolute;
    margin-top: -24px; /* Adjust as needed */
    right: -4px; /* Adjust as needed */
    background-color: red;
    color: white;
    border-radius: 50%; /* Ensures round shape */
    padding: 5px; /* Equal padding on all sides for circular shape */
    min-width: 20px; /* Ensures the background is round for single digits */
    min-height:20px;
    font-size: 9px;
    line-height: 1;
    display: flex;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    text-align: center; /* Ensures text is centered, helpful for fallback */
    opacity: 0; /* Start invisible */
    visibility: hidden; /* Start hidden */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition for opacity and visibility */
}


.et_pb_menu__cart-button.has-items .et_pb_menu__cart-count {
    opacity: 1; /* Fully visible when items are present */
    visibility: visible; /* Make visible when items are present */
    transition-delay: 0.3s; /* Optional: delay the transition to make it more noticeable */
}

.et_pb_menu__cart-button, .et_pb_menu__cart-button .et-pb-icon {
    transition: color 0.3s ease; /* This applies the transition effect to color changes */
}

.et_pb_menu__cart-button.has-items {
    color: green !important; /* This will have a smooth transition */
}

.et_pb_menu__cart-button.has-items .et-pb-icon {
    color: green !important; /* This will also have a smooth transition */
}


#profile-cart .dsm-mega-menu-item {
    position: relative;
}

/* * 2. Style the cart count bubble itself.
 * This replaces `.et_pb_menu__cart-count`.
 * The styling is almost identical, just with the new class name.
*/
#profile-cart .dsm-mega-menu-woo-cart-count {
    position: absolute;
    top: -5px;      /* Adjust as needed */
    right: -10px;    /* Adjust as needed */
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 5px;
    min-width: 20px;
    min-height: 20px;
    font-size: 9px;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    /* Initially hidden. We'll show it using the .has-items class */
    opacity: 0;
    visibility: hidden;
    transform: scale(0.5); /* Optional: add a little pop effect */
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* * 3. Show the count when the parent has the .has-items class.
 * This replaces `.et_pb_menu__cart-button.has-items .et_pb_menu__cart-count`.
*/
#profile-cart .dsm-mega-menu-item.has-items .dsm-mega-menu-woo-cart-count {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* * 4. Add a smooth color transition to the cart icon.
 * This replaces `.et_pb_menu__cart-button .et-pb-icon`.
*/
#profile-cart .dsm-mega-menu-item .dsm_cart_icon {
    transition: color 0.3s ease;
}