/**
 * Menu Badge Styles
 *
 * Styles for count badges in navigation menus.
 *
 * @package Hopmans_Sync
 * @since 1.0.0
 */

/* High specificity selectors to override theme styles */
.hopmans-menu-badge,
.menu .hopmans-menu-badge,
nav .hopmans-menu-badge,
.navigation .hopmans-menu-badge,
#site-navigation .hopmans-menu-badge,
.navbar .hopmans-menu-badge,
ul.menu .hopmans-menu-badge,
.menu-item .hopmans-menu-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 20px !important;
    height: 20px !important;
    margin-left: 6px !important;
    padding: 0 6px !important;
    background: var(--e-global-color-primary, #f39200) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: 10px !important;
    vertical-align: middle !important;
    position: relative !important;
    top: -1px !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 999 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hopmans-menu-badge,
    .menu .hopmans-menu-badge,
    nav .hopmans-menu-badge,
    .navigation .hopmans-menu-badge,
    #site-navigation .hopmans-menu-badge,
    .navbar .hopmans-menu-badge,
    ul.menu .hopmans-menu-badge,
    .menu-item .hopmans-menu-badge {
        min-width: 18px !important;
        height: 18px !important;
        font-size: 11px !important;
        margin-left: 4px !important;
    }
}