/* =========================================
CONTACT WIDGET
========================================= */

#contact-widget{
position:fixed;
right:26px;
bottom:76px;
z-index:99999;
}

/* =========================================
CONTACT OPTIONS
========================================= */

#contact-options{

position:absolute;

right:0;

bottom:110px;

display:flex;

flex-direction:column;

align-items:flex-end;

gap:10px;

pointer-events:none;

}

/* =========================================
CONTACT BUTTONS
========================================= */

.contact-item{

position:relative;

display:flex;

align-items:center;

justify-content:flex-start;

gap:12px;

min-height:52px;

width:max-content;

max-width:260px;

padding:12px 18px;

box-sizing:border-box;

text-decoration:none;

white-space:nowrap;

color:#000;

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

backdrop-filter:blur(26px);

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

border-radius:999px;

opacity:0;

visibility:hidden;

transform:translateY(12px);

transition:all .30s ease;

overflow:visible;

}

/* Show buttons */

#contact-widget.active .contact-item{

opacity:1;

visibility:visible;

transform:translateY(0);

pointer-events:auto;

}

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

.contact-item img{

width:24px;

height:24px;

object-fit:contain;

flex-shrink:0;

filter:brightness(0);

}

.contact-item span{

font-size:14px;

font-weight:700;

}

/* =========================================
CONTACT BUTTON HOVER
========================================= */

.contact-item:hover{

transform:scale(1.12);

border:2px solid #000;

box-shadow:

0 0 18px rgba(255,255,255,.95),

0 0 35px rgba(255,255,255,.65),

0 10px 25px rgba(0,0,0,.18);

}

/* =========================================
HOVER LABEL FOR CONTACT ITEMS
========================================= */

.contact-item::after{

content:attr(data-hover);

position:absolute;

right:110%;

top:50%;

transform:translateY(-50%);

white-space:nowrap;

font-size:18px;

font-weight:900;

color:#000;

opacity:0;

pointer-events:none;

transition:.30s;

text-shadow:

0 0 8px rgba(255,255,255,.95),

0 0 18px rgba(255,255,255,.80),

0 0 30px rgba(255,255,255,.70);

}

.contact-item:hover::after{

opacity:1;

right:115%;

}

/* =========================================
MAIN CHAT BUTTON
========================================= */

#contact-btn{

position:relative;

width:88px;

height:88px;

display:flex;

align-items:center;

justify-content:center;

overflow:visible;

padding:0;

cursor:pointer;

border:none;

border-radius:50%;

background:

linear-gradient(

180deg,

rgba(255,255,255,.45),

rgba(255,255,255,.16)

);

backdrop-filter:blur(30px);

transition:all .35s ease;

box-shadow:

0 10px 30px rgba(0,0,0,.12),

inset 0 2px rgba(255,255,255,.9);

}

#contact-btn img{

width:54px;

height:54px;

display:block;

object-fit:contain;

filter:brightness(0);

transition:.35s;

}

#contact-btn:hover{

transform:scale(1.15);

border:3px solid #000;

box-shadow:

0 0 20px rgba(255,255,255,.9),

0 0 40px rgba(255,255,255,.6),

0 12px 35px rgba(0,0,0,.25);

}

/* =========================================
CLICK TO TALK TEXT
========================================= */

.contact-hover-text{

position:absolute;

right:115px;

top:50%;

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

white-space:nowrap;

font-size:22px;

font-weight:900;

color:#000;

opacity:0;

pointer-events:none;

transition:all .35s ease;

text-shadow:

0 0 8px rgba(255,255,255,.95),

0 0 16px rgba(255,255,255,.90),

0 0 28px rgba(255,255,255,.80);

}

#contact-btn:hover .contact-hover-text{

opacity:1;

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

}

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

@media(max-width:768px){

#contact-widget{

right:18px;

bottom:70px;

}

#contact-btn{

width:70px;

height:70px;

}

#contact-btn img{

width:42px;

height:42px;

}

.contact-hover-text{

display:none;

}

.contact-item::after{

display:none;

}

}