@import url(https://www.carparts.com/blog/wp-content/themes/genesis_child/custom/css/global/theme-color-v2-global.css);

/* Base styles for the Global */
.cpb-blue{
    fill:#28465F;
}

.social-items-prime {
    margin: -1px 0 0;
    position: relative;
    z-index: 50;
    border: none;
    background: none !important;
    padding: 0;
    z-index: 50;
    padding: 0;
    pointer-events: none;
}

.social-items {
    position: relative;
    z-index: 50;
    border-radius: 4px;
    display: inline-flex;
    background-color: #28465F;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px; 
    border: none;
    padding: 0;
}

.social-items:hover, .social-items:focus {
    background-color: #28465F !important;
} 

.social-items-prime:hover, .social-items-prime:focus {
    background-color: none !important;
}

/***************************/
/* Top Social Share Widget */
/***************************/
.tp-social-widget {
    margin: 25px 0 20px 0;
}

.tp-social-icon {
    display: flex;
    gap: 8px;
}

/*******************************/
/* Top Copy Link Icon Notification */
/*******************************/
.social-top-widget {
    margin: 25px 0 20px 0;
}

.social-top-icon {
    display: flex;
}

.message {
    position: absolute;
    z-index: 2000;
    top: 5%;
    left: 50%; 
    transform: translate(-50%, -50%);
    opacity: 0;
    color: var(--cp-white);
    font-size: 12px;
    transition: opacity 0.5s ease-in-out;
    margin: 0;
    background: var(--cp-grey-tint-700);
    width: 85px;
    text-align: center;
    display: flex;
    justify-content: center;
    pointer-events: none;
    padding: 3px 0px;
    border-radius: 4px;
}

.message.visible {
    opacity: 1;
    animation: fade-in-out 2s forwards;
}



/***************************/
/* Floating Social Widget */
/***************************/

.ft-social-widget {
    font-family: "Inter Tight",sans-serif !important;
    font-size: 1rem !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: pointer;
    position: sticky;
    top: calc(50% - 25px);
    z-index: 1000;
    filter: drop-shadow(rgba(0, 0, 0, 0.3) 1px 1px 3px);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
    margin: 0 0 25px 20px;
    display: none;
    /* left: 20px; bottom: 30%; */
}

.ft-social-widget.visible {
    /* When the .visible class is added, the button appears */
    visibility: visible;
    opacity: 1;
    display: block;
    width: 50px;
}

.ft-social-widget.active .social-items-prime {
    pointer-events: none;
}

/* Styles for the main share button */
.ft-share-button-wrap {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: start;
}

/* Styles for the social media icons */
.ft-social-icons {
    position: absolute;
    bottom: -10px; /* Position above the main button */
    left: 70px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    transform: translateX(-20px);
    transition: transform 0.3s ease; /*opacity 0.3s ease, transform 0.3s ease */
    padding: 16px;
    opacity: 0;
    visibility: hidden;
}

.ft-social-widget.active .ft-social-icons {
    transform: translateX(0);
    background: var(--cp-white);
    opacity: 1;
    visibility: visible;
}


/*******************************/
/* Float Copy Link Icon Notification */
/*******************************/
.copy-notification {
    position: absolute;
    z-index: 2000;
    bottom: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    color: var(--cp-white);
    font-size: 12px;
    transition: opacity 0.5s ease-in-out;
    margin: 0;
    background: var(--cp-grey-tint-700);
    width: 85px;
    text-align: center;
    display: flex;
    justify-content: center;
    pointer-events: none;
    padding: 3px 0px;
    border-radius: 4px;
}

.copy-notification.show {
    opacity: 1;
    animation: fade-in-out 2s forwards;
    visibility: visible;
}

@keyframes pulse-border {
    0% { box-shadow: 0 0 0 0 #48bb78; }
    50% { box-shadow: 0 0 0 1rem rgba(72, 187, 120, 0); }
    100% { box-shadow: 0 0 0 0 rgba(72, 187, 120, 0); }
}

@keyframes fade-in-out {
    0% { opacity: 0; transform: translate(-50%, -50%); }
    20% { opacity: 1; transform: translate(-50%, calc(-50% - 1rem)); }
    80% { opacity: 1; transform: translate(-50%, calc(-50% - 1rem)); }
    100% { opacity: 0; transform: translate(-50%, -50%); }
}

@keyframes bounce-in {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); }
}


@media(max-width: 992px){

    /**Floating Social Widget**/
    .ft-social-widget {
        z-index: 50;
        margin: 0 16px 25px 0;
        top: calc(50% + 93px);
        display: none;
    }

    .ft-social-widget.visible {
        display: block;
        width: auto;
    }

    .ft-share-button-wrap {
        margin: 0 3px 0 0;
        justify-content: flex-end;
    }

    .ft-social-widget .ft-social-icons {
        bottom: 60px; 
        left: inherit;
        flex-direction: column;
        transform: translateY(20px);
        right: 0;
        gap: 8px;
        justify-content: center;
        align-items: center;
    }

    .ft-social-widget.active .ft-social-icons {
        transform: translateY(0);
        background: var(--cp-blue-tint-300);
    }

    .ft-social-widget .social-items-prime {
        margin: 0 -6px 0 0;
    }
}