/* 1. Make the service cards much darker and less transparent */
.group-items > div, .service-card {
    background-color: rgba(15, 15, 15, 0.85) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px) !important;
}

/* 2. Force the icons to be brighter and add a white outer glow */
.service-icon, img[alt*="icon"] {
    filter: brightness(1.3) contrast(1.1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) !important;
}

/* 3. Make the text bold and pure white for better legibility */
.service-name, .group-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 1) !important;
}
/* Transform siteMonitor ping into a bright Badge */
.ping {
    background-color: rgba(0, 255, 170, 0.2) !important; /* Soft green/teal background */
    color: #00ffaa !important;                          /* Bright neon text */
    border: 1px solid rgba(0, 255, 170, 0.5) !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    font-size: 0.7rem !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 0 10px rgba(0, 255, 170, 0.3);        /* Subtle glow */
    backdrop-filter: blur(4px);
}

/* If the site is down, the badge should turn red (optional but helpful) */
.ping.text-red-500 {
    background-color: rgba(255, 0, 0, 0.2) !important;
    color: #ff4d4d !important;
    border: 1px solid #ff4d4d !important;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
}