/* 1. Force the Facebook, YouTube, and default Enfold icons to be white */
#socket .social_bookmarks li a,
#socket .social_bookmarks li a svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* 2. Scale ALL icons up by exactly 50% without affecting the layout boundaries */
#socket .social_bookmarks li {
    transform: scale(1.5) !important;
    transform-origin: center center !important;
    margin: 0 8px !important; /* Adds a tiny bit of horizontal spacing so the larger icons don't hit each other */
}

/* 3. Target the SoundCloud item and hide its native font icon character */
#socket .social_bookmarks_soundcloud a {
    position: relative !important;
    color: transparent !important; 
}

/* 4. Inject the icon-only asset and force it white using a CSS filter */
#socket .social_bookmarks_soundcloud a::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 16px !important;  
    height: 16px !important; 
    
    /* Using the working icon-only asset */
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/19/Spotify_logo_without_text.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;

    /* Turns the green image asset into solid pure white */
    filter: brightness(0) invert(1) !important;
}

/* 5. Turn the link background Spotify Green on hover, but keep the icon white */
#socket .social_bookmarks_soundcloud:hover a {
    background-color: #1DB954 !important;
}

#socket .social_bookmarks_soundcloud:hover a::before {
    /* Ensures the white filter stays locked on during hover */
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}