/* Popular Extras Badge - Modern Pill Style */
/* High specificity selectors for product page, modal (#food_modal), and AJAX contexts */

/* Base badge styles - covers all contexts */
span.popular-extra-badge,
.exwo-op-name .popular-extra-badge,
.exwo-op-name > .popular-extra-badge,
.woocommerce .exwo-product-gr-options .popular-extra-badge,
#food_modal .popular-extra-badge,
.ex_modal .popular-extra-badge,
#food_modal .exwo-op-name .popular-extra-badge,
.ex_modal .exwo-op-name .popular-extra-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    margin-left: 6px;
    border-radius: 10px;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
    background: rgba(234, 31, 46, 0.08) !important;
    color: #ea1f2e !important;
    transition: all 0.2s ease;
    width: auto !important;
    float: none !important;
    position: static;
    box-sizing: border-box;
}

span.popular-extra-badge .pe-icon,
.exwo-op-name .popular-extra-badge .pe-icon,
#food_modal .popular-extra-badge .pe-icon,
.ex_modal .popular-extra-badge .pe-icon {
    font-size: 10px !important;
    line-height: 1;
    flex-shrink: 0;
}

/* Hover states */
label:hover .popular-extra-badge,
.exwo-op-name:hover .popular-extra-badge {
    background: rgba(234, 31, 46, 0.14) !important;
    color: #d41828 !important;
}

/* Checked state */
input:checked + label .popular-extra-badge {
    background: rgba(234, 31, 46, 0.15) !important;
    color: #c8101e !important;
}

/* Image option layout */
.exwo-img-option .popular-extra-badge {
    margin-left: 4px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    span.popular-extra-badge,
    .exwo-op-name .popular-extra-badge,
    .woocommerce .exwo-product-gr-options .popular-extra-badge,
    #food_modal .popular-extra-badge,
    .ex_modal .popular-extra-badge {
        font-size: 10px !important;
        padding: 1px 6px;
        margin-left: 4px;
        gap: 2px;
    }

    span.popular-extra-badge .pe-icon,
    #food_modal .popular-extra-badge .pe-icon,
    .ex_modal .popular-extra-badge .pe-icon {
        font-size: 9px !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .popular-extra-badge {
        transition: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .popular-extra-badge {
        background: rgba(234, 31, 46, 0.2) !important;
        outline: 1px solid currentColor;
    }
}