/* =========================================================
   P.T. LEE CHENGALVARAYA NAICKER TRUST
   SOCIAL MEDIA FLOATING WIDGET

   COMPLETELY ISOLATED FROM AI ASSISTANT
========================================================= */

#ptl-social-widget.ptl-social-widget {
    position: fixed !important;

    right: 0 !important;
    bottom: 158px !important;

    width: 78px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    outline: none !important;

    box-sizing: border-box !important;

    /*
       IMPORTANT:
       AI = 2147483647
       SOCIAL = 2147483640
    */
    z-index: 2147483640 !important;

    pointer-events: none !important;
}


/* ---------------------------------------------------------
   RESET ONLY INSIDE SOCIAL WIDGET
--------------------------------------------------------- */

#ptl-social-widget.ptl-social-widget *,
#ptl-social-widget.ptl-social-widget *::before,
#ptl-social-widget.ptl-social-widget *::after {
    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   SOCIAL ITEMS
--------------------------------------------------------- */

#ptl-social-widget .ptl-social-items {
    display: flex !important;

    flex-direction: column !important;
    align-items: flex-end !important;

    gap: 9px !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 8px 0 0 !important;
}


/* ---------------------------------------------------------
   SOCIAL BUTTON
--------------------------------------------------------- */

#ptl-social-widget .ptl-social-item {

    position: relative !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    flex: 0 0 60px !important;

    width: 60px !important;
    height: 60px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 2px solid rgba(255,255,255,.95) !important;

    border-radius: 50% !important;

    outline: none !important;

    color: #ffffff !important;

    text-decoration: none !important;

    cursor: pointer !important;

    pointer-events: auto !important;

    overflow: visible !important;

    opacity: 0 !important;

    visibility: hidden !important;

    transform:
        translateX(75px)
        scale(.86) !important;

    transition:
        opacity .30s ease,
        visibility .30s ease,
        transform .42s cubic-bezier(.22,1,.36,1),
        box-shadow .25s ease !important;
}


/* ---------------------------------------------------------
   INSTAGRAM
--------------------------------------------------------- */

#ptl-social-widget .ptl-social-instagram {

    background:
        radial-gradient(
            circle at 30% 107%,
            #fdf497 0%,
            #fdf497 5%,
            #fd5949 45%,
            #d6249f 60%,
            #285AEB 90%
        ) !important;
}


/* ---------------------------------------------------------
   FACEBOOK
--------------------------------------------------------- */

#ptl-social-widget .ptl-social-facebook {

    background:
        linear-gradient(
            135deg,
            #1877f2,
            #0d47a1
        ) !important;
}


/* ---------------------------------------------------------
   YOUTUBE
--------------------------------------------------------- */

#ptl-social-widget .ptl-social-youtube {

    background:
        linear-gradient(
            135deg,
            #ff0000,
            #b00000
        ) !important;
}


/* ---------------------------------------------------------
   SHOW SOCIAL ICONS
--------------------------------------------------------- */

#ptl-social-widget.ptl-social-visible
.ptl-social-item {

    opacity: 1 !important;

    visibility: visible !important;

    transform:
        translateX(0)
        scale(1) !important;
}


/* ---------------------------------------------------------
   STAGGER
--------------------------------------------------------- */

#ptl-social-widget.ptl-social-visible
.ptl-social-item:nth-child(1) {

    transition-delay: 0ms !important;
}

#ptl-social-widget.ptl-social-visible
.ptl-social-item:nth-child(2) {

    transition-delay: 70ms !important;
}

#ptl-social-widget.ptl-social-visible
.ptl-social-item:nth-child(3) {

    transition-delay: 140ms !important;
}


/* ---------------------------------------------------------
   ICON
--------------------------------------------------------- */

#ptl-social-widget .ptl-social-icon {

    width: 100% !important;
    height: 100% !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #ffffff !important;

    font-size: 26px !important;

    line-height: 1 !important;
}


#ptl-social-widget .ptl-social-icon i {

    color: #ffffff !important;

    line-height: 1 !important;
}


/* ---------------------------------------------------------
   HOVER
--------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {

    #ptl-social-widget .ptl-social-item:hover {

        transform:
            translateX(-5px)
            scale(1.08) !important;

        border-color: #ffffff !important;

        box-shadow:
            0 10px 25px rgba(0,0,0,.35),
            0 0 18px rgba(255,255,255,.30) !important;
    }


    #ptl-social-widget .ptl-social-instagram:hover {

        box-shadow:
            0 10px 25px rgba(0,0,0,.35),
            0 0 22px rgba(225,48,108,.70) !important;
    }


    #ptl-social-widget .ptl-social-facebook:hover {

        box-shadow:
            0 10px 25px rgba(0,0,0,.35),
            0 0 22px rgba(24,119,242,.70) !important;
    }


    #ptl-social-widget .ptl-social-youtube:hover {

        box-shadow:
            0 10px 25px rgba(0,0,0,.35),
            0 0 22px rgba(255,0,0,.70) !important;
    }
}


/* ---------------------------------------------------------
   TOOLTIP
--------------------------------------------------------- */

#ptl-social-widget .ptl-social-tooltip {

    position: absolute !important;

    top: 50% !important;
    right: 70px !important;

    transform:
        translateY(-50%)
        translateX(8px) !important;

    display: block !important;

    min-width: max-content !important;

    margin: 0 !important;

    padding: 7px 11px !important;

    border-radius: 8px !important;

    border: 1px solid rgba(255,255,255,.18) !important;

    background:
        linear-gradient(
            135deg,
            #08002d,
            #172554
        ) !important;

    color: #ffffff !important;

    font-family:
        "Poppins",
        Arial,
        sans-serif !important;

    font-size: 11px !important;

    font-weight: 600 !important;

    line-height: 1.2 !important;

    white-space: nowrap !important;

    box-shadow:
        0 8px 20px rgba(0,0,0,.30) !important;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility .2s ease !important;
}


#ptl-social-widget .ptl-social-tooltip::after {

    content: "" !important;

    position: absolute !important;

    top: 50% !important;
    right: -6px !important;

    width: 10px !important;
    height: 10px !important;

    margin-top: -5px !important;

    background: #101a46 !important;

    transform: rotate(45deg) !important;
}


@media (hover: hover) and (pointer: fine) {

    #ptl-social-widget
    .ptl-social-item:hover
    .ptl-social-tooltip {

        opacity: 1 !important;

        visibility: visible !important;

        transform:
            translateY(-50%)
            translateX(0) !important;
    }
}


/* ---------------------------------------------------------
   FOCUS
--------------------------------------------------------- */

#ptl-social-widget
.ptl-social-item:focus-visible {

    outline:
        3px solid rgba(255,255,255,.95) !important;

    outline-offset: 3px !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {

    #ptl-social-widget.ptl-social-widget {

        bottom: 133px !important;

        width: 68px !important;
    }


    #ptl-social-widget .ptl-social-items {

        gap: 8px !important;

        padding-right: 7px !important;
    }


    #ptl-social-widget .ptl-social-item {

        width: 52px !important;

        height: 52px !important;

        flex-basis: 52px !important;
    }


    #ptl-social-widget .ptl-social-icon {

        font-size: 23px !important;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    #ptl-social-widget.ptl-social-widget {

        bottom: 126px !important;

        width: 64px !important;
    }


    #ptl-social-widget .ptl-social-items {

        gap: 7px !important;

        padding-right: 6px !important;
    }


    #ptl-social-widget .ptl-social-item {

        width: 50px !important;

        height: 50px !important;

        flex-basis: 50px !important;
    }


    #ptl-social-widget .ptl-social-icon {

        font-size: 22px !important;
    }


    #ptl-social-widget .ptl-social-tooltip {

        display: none !important;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    #ptl-social-widget.ptl-social-widget {

        bottom: 116px !important;

        width: 61px !important;
    }


    #ptl-social-widget .ptl-social-items {

        gap: 6px !important;

        padding-right: 6px !important;
    }


    #ptl-social-widget .ptl-social-item {

        width: 48px !important;

        height: 48px !important;

        flex-basis: 48px !important;
    }


    #ptl-social-widget .ptl-social-icon {

        font-size: 21px !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    #ptl-social-widget.ptl-social-widget {

        bottom: 108px !important;

        width: 59px !important;
    }


    #ptl-social-widget .ptl-social-items {

        gap: 6px !important;

        padding-right: 5px !important;
    }


    #ptl-social-widget .ptl-social-item {

        width: 46px !important;

        height: 46px !important;

        flex-basis: 46px !important;
    }


    #ptl-social-widget .ptl-social-icon {

        font-size: 20px !important;
    }
}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

    #ptl-social-widget .ptl-social-item {

        -webkit-tap-highlight-color: transparent !important;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    #ptl-social-widget .ptl-social-item {

        transition: none !important;
    }

    #ptl-social-widget .ptl-social-tooltip {

        transition: none !important;
    }
}