/* =====================================================
   ULTRA PREMIUM FLOATING CTA BUTTONS
   MODERN GLASSMORPHISM VERSION
===================================================== */

.astro-floating-cta{

    position:fixed;

    right:8px;

    top:50%;

    transform:translateY(-50%);

    z-index:99999;

    display:flex;

    flex-direction:column;

    gap:20px;
}

/* =====================================================
   BUTTON
===================================================== */

.astro-cta-btn{

    position:relative;

    width:72px;
    height:72px;

    border-radius:100px;

    display:flex;

    align-items:center;

    overflow:hidden;

    text-decoration:none;

    backdrop-filter:blur(18px);

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

    transition:
    width .45s ease,
    transform .45s ease,
    box-shadow .45s ease;

    box-shadow:
    0 20px 45px rgba(0,0,0,.28);

    isolation:isolate;
}

/* =====================================================
   INNER GLOW
===================================================== */

.astro-cta-btn::before{

    content:'';

    position:absolute;

    inset:0;

    border-radius:100px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.30),
        transparent 60%
    );

    opacity:.7;

    z-index:1;
}

/* =====================================================
   SHINE EFFECT
===================================================== */

.astro-cta-btn::after{

    content:'';

    position:absolute;

    top:-120%;
    left:-40%;

    width:80%;
    height:300%;

    background:
    linear-gradient(
        rgba(255,255,255,0),
        rgba(255,255,255,.35),
        rgba(255,255,255,0)
    );

    transform:rotate(25deg);

    transition:.8s ease;
}

.astro-cta-btn:hover::after{

    left:140%;
}

/* =====================================================
   ICON
===================================================== */

.astro-cta-icon{

    min-width:72px;
    height:72px;

    display:flex;

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

    position:relative;
    z-index:2;
}

/* =====================================================
   ICON IMAGES
===================================================== */

.astro-cta-icon img{

    width:34px;
    height:34px;

    object-fit:contain;

    filter:
    drop-shadow(0 3px 8px rgba(0,0,0,.25));
}

/* =====================================================
   TEXT
===================================================== */

.astro-cta-text{

    white-space:nowrap;

    color:#fff;

    font-size:15px;
    font-weight:700;

    letter-spacing:.3px;

    opacity:0;

    transform:translateX(14px);

    transition:.35s ease;

    padding-right:28px;

    position:relative;
    z-index:2;
}

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

.astro-cta-btn:hover{

    width:225px;

    transform:
    translateX(-10px)
    scale(1.03);
}

.astro-cta-btn:hover .astro-cta-text{

    opacity:1;

    transform:translateX(0);
}

/* =====================================================
   CALL BUTTON
===================================================== */

.astro-call-btn{

    background:
    linear-gradient(
        135deg,
        #6a11cb,
        #ff0099
    );
}

.astro-call-btn:hover{

    box-shadow:
    0 20px 55px rgba(255,0,153,.45);
}

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

.astro-whatsapp-btn{

    background:
    linear-gradient(
        135deg,
        #00b35f,
        #00e676
    );
}

.astro-whatsapp-btn:hover{

    box-shadow:
    0 20px 55px rgba(0,230,118,.45);
}

/* =====================================================
   MAIL BUTTON
===================================================== */

.astro-mail-btn{

    background:
    linear-gradient(
        135deg,
        #ff6a00,
        #ffb300
    );
}

.astro-mail-btn:hover{

    box-shadow:
    0 20px 55px rgba(255,179,0,.45);
}

/* =====================================================
   FLOATING ANIMATION
===================================================== */

.astro-cta-btn{

    animation:astroFloat 4s ease-in-out infinite;
}

.astro-whatsapp-btn{

    animation-delay:.5s;
}

.astro-mail-btn{

    animation-delay:1s;
}

@keyframes astroFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-8px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* =====================================================
   PULSE RING
===================================================== */

.astro-cta-btn .pulse-ring{

    position:absolute;

    inset:-5px;

    border-radius:100px;

    border:2px solid rgba(255,255,255,.25);

    animation:pulseRing 2.5s infinite;
}

@keyframes pulseRing{

    0%{

        transform:scale(.95);

        opacity:1;
    }

    70%{

        transform:scale(1.12);

        opacity:0;
    }

    100%{

        transform:scale(.95);

        opacity:0;
    }

}

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

@media(max-width:768px){

    .astro-floating-cta{

        right:10px;

        gap:16px;
    }

    .astro-cta-btn{

        width:62px;
        height:62px;
    }

    .astro-cta-icon{

        min-width:62px;
        height:62px;
    }

    .astro-cta-icon img{

        width:30px;
        height:30px;
    }

    .astro-cta-btn:hover{

        width:185px;
    }

}

@media(max-width:480px){

    .astro-floating-cta{

        top:auto;

        bottom:85px;

        transform:none;
    }

    .astro-cta-btn{

        width:58px;
        height:58px;
    }

    .astro-cta-icon{

        min-width:58px;
        height:58px;
    }

    .astro-cta-icon img{

        width:26px;
        height:26px;
    }

    /* MOBILE NO EXPAND */

    .astro-cta-btn:hover{

        width:58px;

        transform:none;
    }

    .astro-cta-btn:hover .astro-cta-text{

        opacity:0;
    }

}