/* =========================================
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;

}

}

/* ==================================================
   CONTACT WIDGET — DARK/FOOTER REVERSE STYLE
================================================== */

/*
 * Apply the reverse appearance:
 * 1. Everywhere in dark mode
 * 2. While overlapping the footer in light mode
 */

/* Main chat button */
html[data-theme="dark"] #contact-btn,
#contact-widget.is-over-footer #contact-btn {
    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            #111820,
            #03070c
        ) !important;

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

    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Main chat icon becomes white */
html[data-theme="dark"] #contact-btn img,
#contact-widget.is-over-footer #contact-btn img {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

/* Main button hover */
html[data-theme="dark"] #contact-btn:hover,
html[data-theme="dark"] #contact-btn:focus-visible,
#contact-widget.is-over-footer #contact-btn:hover,
#contact-widget.is-over-footer #contact-btn:focus-visible {
    color: #ffffff !important;
    background: #03070c !important;

    border: 3px solid #ffffff !important;

    box-shadow:
        0 0 18px rgba(115, 195, 255, 0.95),
        0 0 38px rgba(87, 174, 255, 0.68),
        0 12px 35px rgba(0, 0, 0, 0.42) !important;
}

/* "Click to talk!" text */
html[data-theme="dark"] .contact-hover-text,
#contact-widget.is-over-footer .contact-hover-text {
    color: #ffffff !important;
    font-weight: 900 !important;

    text-shadow:
        0 0 8px rgba(133, 208, 255, 0.98),
        0 0 18px rgba(91, 184, 255, 0.82),
        0 0 32px rgba(80, 170, 255, 0.62) !important;
}

/* Open contact option buttons */
html[data-theme="dark"] .contact-item,
#contact-widget.is-over-footer .contact-item {
    color: #ffffff !important;

    background:
        linear-gradient(
            180deg,
            rgba(17, 24, 32, 0.96),
            rgba(3, 7, 12, 0.96)
        ) !important;

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

    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);

    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.28) !important;
}

/* Contact option icons become white */
html[data-theme="dark"] .contact-item img,
#contact-widget.is-over-footer .contact-item img {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

/* Text inside each option */
html[data-theme="dark"] .contact-item span,
#contact-widget.is-over-footer .contact-item span {
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* Contact option hover */
html[data-theme="dark"] .contact-item:hover,
html[data-theme="dark"] .contact-item:focus-visible,
#contact-widget.is-over-footer .contact-item:hover,
#contact-widget.is-over-footer .contact-item:focus-visible {
    color: #ffffff !important;
    background: #03070c !important;

    border: 2px solid #ffffff !important;

    box-shadow:
        0 0 16px rgba(123, 202, 255, 0.95),
        0 0 34px rgba(78, 170, 255, 0.68),
        0 10px 25px rgba(0, 0, 0, 0.36) !important;
}

/* Labels appearing to the left of option buttons */
html[data-theme="dark"] .contact-item::after,
#contact-widget.is-over-footer .contact-item::after {
    color: #ffffff !important;
    font-weight: 900 !important;

    text-shadow:
        0 0 8px rgba(130, 207, 255, 0.98),
        0 0 18px rgba(89, 183, 255, 0.82),
        0 0 30px rgba(65, 159, 255, 0.64) !important;
}

/* Keep labels white during hover */
html[data-theme="dark"] .contact-item:hover::after,
html[data-theme="dark"] .contact-item:focus-visible::after,
#contact-widget.is-over-footer .contact-item:hover::after,
#contact-widget.is-over-footer .contact-item:focus-visible::after {
    color: #ffffff !important;
    font-weight: 900 !important;
}

/* ==================================================
   CONTACT WIDGET — BLACK HOVER GLOW
   Dark mode and footer-overlap state
================================================== */

/* Main contact button hover glow */
html[data-theme="dark"] #contact-btn:hover,
html[data-theme="dark"] #contact-btn:focus-visible,
#contact-widget.is-over-footer #contact-btn:hover,
#contact-widget.is-over-footer #contact-btn:focus-visible {
    box-shadow:
        0 0 18px rgba(0, 0, 0, 0.95),
        0 0 38px rgba(0, 0, 0, 0.78),
        0 12px 35px rgba(0, 0, 0, 0.52) !important;
}

/* "Click to talk!" black glow */
html[data-theme="dark"] .contact-hover-text,
#contact-widget.is-over-footer .contact-hover-text {
    text-shadow:
        0 0 8px rgba(0, 0, 0, 1),
        0 0 18px rgba(0, 0, 0, 0.92),
        0 0 32px rgba(0, 0, 0, 0.78) !important;
}

/* Expanded contact-button hover glow */
html[data-theme="dark"] .contact-item:hover,
html[data-theme="dark"] .contact-item:focus-visible,
#contact-widget.is-over-footer .contact-item:hover,
#contact-widget.is-over-footer .contact-item:focus-visible {
    box-shadow:
        0 0 16px rgba(0, 0, 0, 0.96),
        0 0 34px rgba(0, 0, 0, 0.76),
        0 10px 25px rgba(0, 0, 0, 0.52) !important;
}

/* Left-side contact-button names black glow */
html[data-theme="dark"] .contact-item::after,
#contact-widget.is-over-footer .contact-item::after,
html[data-theme="dark"] .contact-item:hover::after,
html[data-theme="dark"] .contact-item:focus-visible::after,
#contact-widget.is-over-footer .contact-item:hover::after,
#contact-widget.is-over-footer .contact-item:focus-visible::after {
    color: #ffffff !important;
    font-weight: 900 !important;

    text-shadow:
        0 0 8px rgba(0, 0, 0, 1),
        0 0 18px rgba(0, 0, 0, 0.92),
        0 0 30px rgba(0, 0, 0, 0.78) !important;
}