/* This CSS file contains ultra-specific selectors that will override any other styles */

/* Base badge styles with maximum specificity */
html body .restriction-badge,
html body [class*="restriction-badge"],
html body span[class*="badge"],
#chain-control .restriction-badge {
    display: inline-block !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    color: white !important;
    margin: 0 4px !important;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) !important;
    position: relative !important;
    z-index: 1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    border: none !important;
}

/* R1 badge (Chains/snow tires) - yellow/amber */
html body .r1-badge,
html body [class*="r1-badge"],
html body span.r1-badge,
#chain-control [class*="r1-badge"] {
    background-color: #F59E0B !important; /* Amber */
    color: white !important;
    border: none !important;
}

/* R2 badge (Chains except 4WD) - orange */
html body .r2-badge,
html body [class*="r2-badge"],
html body span.r2-badge,
#chain-control [class*="r2-badge"] {
    background-color: #F97316 !important; /* Orange */
    color: white !important;
    border: none !important;
}

/* R3 badge (Chains required all) - red */
html body .r3-badge,
html body [class*="r3-badge"],
html body span.r3-badge,
#chain-control [class*="r3-badge"] {
    background-color: #EF4444 !important; /* Red */
    color: white !important;
    border: none !important;
}

/* RC badge (Road closed) - dark red */
html body .rc-badge,
html body [class*="rc-badge"],
html body span.rc-badge,
#chain-control [class*="rc-badge"] {
    background-color: #B91C1C !important; /* Dark Red */
    color: white !important;
    border: none !important;
}

/* Larger badges in chain items with enhanced specificity */
html body .chain-type .restriction-badge,
#chain-control .chain-type .restriction-badge {
    padding: 5px 12px !important;
    font-size: 0.9rem !important;
    border-radius: 20px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
    margin: 0 !important;
    min-width: 60px !important;
    text-align: center !important;
}

/* Pseudo-element trick to enforce background color */
html body .r1-badge::before,
html body .r2-badge::before,
html body .r3-badge::before,
html body .rc-badge::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    z-index: -1;
}

html body .r1-badge::before {
    background-color: #F59E0B !important;
}

html body .r2-badge::before {
    background-color: #F97316 !important;
}

html body .r3-badge::before {
    background-color: #EF4444 !important;
}

html body .rc-badge::before {
    background-color: #B91C1C !important;
}