/* ==========================================================
   Bharat Serve Tech
   Floating Contact Component
   Version : V1.0
   Architecture : Enterprise Global Component
   ========================================================== */

:root{

    /* ==========================
       Layout
    ========================== */

    --fc-touch-size:84px;
    --fc-ring-size:56px;
    --fc-icon-size:34px;
    --fc-gap:22px;

    /* ==========================
    Position
    ========================== */

    --fc-right-desktop:32px;
    --fc-right-tablet:24px;
    --fc-right-mobile:18px;

    --fc-bottom-desktop:36px;
    --fc-bottom-tablet:28px;
    --fc-bottom-mobile:20px;

    /* Active Position */

    --fc-right:var(--fc-right-desktop);
    --fc-bottom:var(--fc-bottom-desktop);

    /* ==========================
       Border
    ========================== */

    --fc-border-width:3px;
    --fc-radius:50%;

    /* ==========================
       Shadow
    ========================== */

    --fc-shadow-size:14px;

    /* ==========================
       Motion
    ========================== */

    --fc-transition:.28s ease;

    /* ==========================
       Brand Colors
    ========================== */

    --fc-green:#25D366;
    --fc-blue:#0A84FF;
    --fc-orange:#FF7A00;

}

/* ==========================================================
   Wrapper
   ========================================================== */

.floating-contact{

    position:fixed;

    right:var(--fc-right);

    bottom:var(--fc-bottom);

    display:flex;

    flex-direction:column;

    gap:var(--fc-gap);

    z-index:9999;

    pointer-events:none;

}

/* ==========================================================
   Links
   ========================================================== */

.floating-contact a{

    width:var(--fc-ring-size);
    height:var(--fc-ring-size);

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    border-radius:var(--fc-radius);

    pointer-events:auto;

    overflow:visible;

    flex-shrink:0;

}

.floating-contact svg{

    width:var(--fc-icon-size) !important;
    height:var(--fc-icon-size) !important;

    display:block;

    stroke-width:2.3;

    flex-shrink:0;

    overflow:visible;

}

.fc-whatsapp{

    border:var(--fc-border-width) solid var(--fc-green);

    color:#25D366;

    box-shadow:0 0 var(--fc-shadow-size) rgba(37,211,102,.35);

    background:transparent;

}

.fc-call{

    border:var(--fc-border-width) solid var(--fc-blue);

    color:#0A84FF;

    box-shadow:0 0 var(--fc-shadow-size) rgba(10,132,255,.35);

    background:transparent;

}

.fc-quote{

    border:var(--fc-border-width) solid var(--fc-orange);

    color:#FF7A00;

    box-shadow:0 0 var(--fc-shadow-size) rgba(255,122,0,.35);

    background:transparent;

}

/* ==========================================================
   Hover
   ========================================================== */

.floating-contact a:hover{

    transform:translateY(-4px);

}

.fc-whatsapp:hover i svg{

    filter:drop-shadow(0 0 18px rgba(37,211,102,.90));

}

.fc-call:hover i svg{

    filter:drop-shadow(0 0 18px rgba(10,132,255,.90));

}

.fc-quote:hover i svg{

    filter:drop-shadow(0 0 18px rgba(255,122,0,.90));

}

/* ==========================================================
   Active
   ========================================================== */

.floating-contact a:active{

    transform:scale(.95);

}

/* ==========================================================
   Accessibility
   ========================================================== */

.floating-contact a:focus-visible{

    outline:none;

}

.floating-contact a:focus-visible{

    transform:scale(1.08);

}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width:768px){

    :root{

        --fc-ring-size:52px;

        --fc-gap:22px;

        --fc-right:var(--fc-right-mobile);

        --fc-bottom:var(--fc-bottom-mobile);

    }

}

/* ==========================================================
   Reduced Motion
   ========================================================== */

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

    .floating-contact svg,
    .floating-contact i svg{

        transition:none;

    }

}