/* 1. Global Background & Cleanup */
body, .wrapper .main {
    background-color: white;
}

.woocommerce span.onsale {
    display: none;
}

/* 2. The Blinking Animation */
.blinking {
    animation: blinkingmenu 0.9s infinite;
}

@keyframes blinkingmenu {
    0%   { color: #000000; }
    49%  { color: #ffffff; }
    60%  { color: #ffeb00; }
    99%  { color: #f95e68; }
    100% { color: #ffffff; }
}

/* 3. The Red Badge (.border) */
.border {
    order: 10 !important;
    background-color: red;
    border-radius: 6px;
    font-size: 13px;
    padding: 2px 6px;
    line-height: 1;
    display: inline-block;
    color: #ffffff !important;
    font-weight: bold;
    vertical-align: middle;
    /* Adjusted: This creates a small gap so it doesn't overlap the arrow */
    margin-left: 5px !important; 
    margin-right: 0 !important;
}

/* 4. The Menu Link Container */
.menu-item > a {
    display: inline-flex !important;
    align-items: center;
    gap: 0px !important; 
}

/* 5. The Arrow Spacing Fix */
.menu-item > a i, 
.menu-item > a svg, 
.menu-item > a .sub-menu-indicator,
.menu-item > a .dropdown-toggle {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    /* Adjusted: Pulls arrow closer to text, but less aggressive than before */
    margin-left: -2px !important; 
    display: inline-block;
}

@media (max-width: 768px) {

    /* Menu item full width */
    .menu-item {
        position: relative !important;
        width: 100% !important;
    }

    /* Full width anchor with flex */
    .menu-item > a {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding-right: 15px !important;
        justify-content: flex-start !important;
    }

    /* Badge stays inline next to text */
    span.blinking {
        display: inline-flex !important;
        align-items: center !important;
        margin-left: 8px !important;
        flex-shrink: 0 !important;
    }

    /* Expand + pushed to far right */
    .menu-item > a span.expand {
        margin-left: auto !important;
        font-size: 22px !important;
        padding: 0 5px !important;
        flex-shrink: 0 !important;
    }

}