/* =========================================================
   UNIVERSE VYPAAR — CUSTOM RIGHT SCROLLBAR
========================================================= */


/* ---------------------------------------------------------
   Chrome / Edge / Safari
--------------------------------------------------------- */

html {

    scrollbar-width: thin;

    scrollbar-color:
        #4b24a7 #eeedf3;

}


/* Scrollbar width */

::-webkit-scrollbar {

    width: 8px;

}


/* Track */

::-webkit-scrollbar-track {

    background:
        #eeedf3;

}


/* Scrollbar thumb */

::-webkit-scrollbar-thumb {

    background:
        linear-gradient(180deg,
            #24105f,
            #4b24a7,
            #ff174f);

    border-radius: 20px;

    border:
        2px solid #eeedf3;

}


/* Hover */

::-webkit-scrollbar-thumb:hover {

    background:
        linear-gradient(180deg,
            #4b24a7,
            #ff174f);

}


/* ---------------------------------------------------------
   Firefox
--------------------------------------------------------- */

html {

    scrollbar-width: thin;

    scrollbar-color:
        #4b24a7 #eeedf3;

}


/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 700px) {

    html {

        scrollbar-width: none;

    }


    html::-webkit-scrollbar {

        display: none;

    }

}

/* =========================================================
   GLOBAL FLOATING WIDGETS
========================================================= */

.uv-floating-tools {

    position: fixed;

    z-index: 9990;

    right: 24px;

    bottom: 24px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 10px;

}


/* =========================================================
   COMMON ACTION BUTTON
========================================================= */

.uv-float-action,
.uv-back-top,
.uv-social-toggle {

    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    border: 0;

    border-radius: 50%;

    cursor: pointer;

}


/* =========================================================
   WHATSAPP
========================================================= */

.uv-whatsapp-action {

    position: relative;

    color: #ffffff;

    background:
        #25D366;

    box-shadow:
        0 10px 30px rgba(37, 211, 102, .30);

    text-decoration: none;

    animation:
        uvWhatsappPulse 3s ease-in-out infinite;

}


.uv-whatsapp-action::before {

    content: "";

    position: absolute;

    inset: -5px;

    border:
        1px solid rgba(37, 211, 102, .35);

    border-radius: 50%;

    animation:
        uvWhatsappRing 3s ease-out infinite;

}


.uv-whatsapp-action svg {

    width: 24px;
    height: 24px;

    fill: currentColor;

}


.uv-whatsapp-inner {

    fill:
        #25D366;

}


@keyframes uvWhatsappPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.045);
    }

}


@keyframes uvWhatsappRing {

    0% {
        transform: scale(.9);
        opacity: .7;
    }

    70%,
    100% {
        transform: scale(1.35);
        opacity: 0;
    }

}


/* =========================================================
   EMAIL
========================================================= */

.uv-email-action {

    position: relative;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #24105f,
            #4b24a7);

    box-shadow:
        0 10px 30px rgba(75, 36, 167, .25);

    text-decoration: none;

}


.uv-email-action svg {

    width: 20px;
    height: 20px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.7;

    stroke-linejoin: round;

}


/* =========================================================
   TOOLTIP
========================================================= */

.uv-action-tooltip {

    position: absolute;

    right: 60px;

    top: 50%;

    transform:
        translateY(-50%) translateX(5px);

    padding:
        7px 10px;

    color:
        #ffffff;

    background:
        #17151d;

    border-radius: 7px;

    font-size: 9px;

    font-weight: 700;

    white-space: nowrap;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease,
        transform .25s ease;

}


.uv-action-tooltip::after {

    content: "";

    position: absolute;

    right: -4px;

    top: 50%;

    width: 8px;
    height: 8px;

    background:
        #17151d;

    transform:
        translateY(-50%) rotate(45deg);

}


.uv-float-action:hover .uv-action-tooltip {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(-50%) translateX(0);

}


/* =========================================================
   SOCIAL WRAPPER
========================================================= */

.uv-social-wrapper {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 15px;

}


/* =========================================================
   SOCIAL TOGGLE
========================================================= */

.uv-social-toggle {

    position: relative;

    color: #ffffff;

    background:
        #17151d;

    border:
        1px solid rgba(255, 255, 255, .12);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .18);

    transition:
        transform .3s ease,
        background .3s ease;

}


.uv-social-toggle:hover {

    transform:
        translateY(-3px);

    background:
        #24105f;

}


.uv-social-toggle span {

    position: absolute;

    width: 4px;
    height: 4px;

    background:
        currentColor;

    border-radius: 50%;

    transition:
        transform .3s ease;

}


.uv-social-toggle span:nth-child(1) {

    transform:
        translate(-7px, -5px);

}


.uv-social-toggle span:nth-child(2) {

    transform:
        translate(5px, -5px);

}


.uv-social-toggle span:nth-child(3) {

    transform:
        translate(-1px, 6px);

}


/* =========================================================
   SOCIAL LIST
========================================================= */

.uv-social-list {

    display: flex;

    flex-direction: column;

    gap: 7px;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(10px) scale(.9);

    transform-origin:
        bottom right;

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease;

}


.uv-social-wrapper.is-open .uv-social-list {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0) scale(1);

}


.uv-social-link {

    width: 40px;
    height: 40px;

    display: grid;

    place-items: center;

    color:
        #ffffff;

    background:
        #24105f;

    border:
        1px solid rgba(255, 255, 255, .12);

    border-radius: 50%;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .14);

    transition:
        transform .25s ease,
        background .25s ease;

}


.uv-social-link:hover {

    transform:
        translateY(-3px) scale(1.05);

    background:
        linear-gradient(135deg,
            #4b24a7,
            #ff174f);

}


.uv-social-link svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.uv-social-link path {

    fill:
        currentColor;

    stroke: none;

}


.uv-social-link .uv-youtube-play {

    fill:
        #24105f;

}


/* =========================================================
   BACK TO TOP
========================================================= */

.uv-back-top {

    position: relative;

    color:
        #ffffff;

    background:
        rgba(255, 255, 255, .92);

    border:
        1px solid rgba(36, 16, 95, .10);

    box-shadow:
        0 10px 30px rgba(36, 16, 95, .12);

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(10px);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background .3s ease;

}


.uv-back-top.is-visible {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

}


.uv-back-top:hover {

    background:
        #24105f;

    transform:
        translateY(-3px);

}


.uv-back-top svg {

    width: 18px;
    height: 18px;

    fill: none;

    stroke:
        #24105f;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        stroke .25s ease;

}


.uv-back-top:hover svg {

    stroke:
        #ffffff;

}


/* =========================================================
   HOVER LIFT
========================================================= */

.uv-float-action {

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.uv-email-action:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 15px 35px rgba(75, 36, 167, .35);

}


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

@media (max-width: 700px) {

    .uv-floating-tools {

        right: 13px;

        bottom:
            calc(13px + env(safe-area-inset-bottom));

        gap: 7px;

    }


    .uv-float-action,
    .uv-back-top,
    .uv-social-toggle {

        width: 43px;
        height: 43px;

    }


    .uv-whatsapp-action svg {

        width: 21px;
        height: 21px;

    }


    .uv-email-action svg {

        width: 18px;
        height: 18px;

    }


    .uv-social-link {

        width: 36px;
        height: 36px;

    }


    .uv-social-link svg {

        width: 15px;
        height: 15px;

    }


    .uv-action-tooltip {

        display: none;

    }


    .uv-scroll-progress {

        width: 2px;

    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 380px) {

    .uv-floating-tools {

        right: 9px;

        bottom:
            calc(9px + env(safe-area-inset-bottom));

    }


    .uv-float-action,
    .uv-back-top,
    .uv-social-toggle {

        width: 40px;
        height: 40px;

    }


    .uv-social-link {

        width: 34px;
        height: 34px;

    }

}


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

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

    .uv-whatsapp-action,
    .uv-whatsapp-action::before {

        animation: none;

    }

    .uv-float-action,
    .uv-social-link,
    .uv-social-toggle,
    .uv-back-top {

        transition: none;

    }

}

/* =========================================
   FLOATING WIDGETS
   HIDDEN WHILE HERO SLIDER IS VISIBLE
========================================= */

.uv-whatsapp-action,
.uv-email-action,
.uv-social-wrapper,
.uv-back-top {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform: translateY(20px);

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .35s ease;
}


/* SHOW AFTER HERO */

body.uv-show-floating-widgets
.uv-whatsapp-action,
body.uv-show-floating-widgets
.uv-email-action,
body.uv-show-floating-widgets
.uv-social-wrapper,
body.uv-show-floating-widgets
.uv-back-top {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: translateY(0);
}