/* === Base positioning === */
#main-div {
    position: fixed;
    bottom: 20px;
    z-index: 3;
    margin-right: 10px;
}

#main-div.custlftr {
    right: 20px;
}

#main-div.custlorgftr {
    right: 70px;
}

/* === Floating main button === */
#main-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 50px;
    width: 50px;
    font-size: 20px;
    color: #05a4ef;
    cursor: pointer;
    background-color: rgb(2, 62, 86);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* === Hidden buttons next to main === */
#main-button ~ button {
    visibility: hidden;
    height: 50px;
    padding: 0 20px;
    color: #fff;
    background-color: #01aafb; /* fallback */
    background: linear-gradient(180deg, #01aafb 30%, #1987ba 100%);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.18);
    border: 0;
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    opacity: 0;
    white-space: nowrap;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.2s all linear;
    -webkit-transition: 0.2s all linear;
    -moz-transition: 0.2s all linear;
}

#main-button.open ~ button {
    visibility: visible;
    font-family: 'Jost-Regular', sans-serif !important;
    right: 70px;
    opacity: 1;
    transition: 0.4s all cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-transition: 0.4s all cubic-bezier(0.25, 0.1, 0.25, 1);
    -moz-transition: 0.4s all cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* === Link buttons (social icons etc.) === */
#main-button ~ a {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
    height: 50px;
    width: 50px;
    font-size: 20px;
    opacity: 0;
    text-decoration: none;
    color: #fff;
    background-color: #fff;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    transition: 0.2s all linear;
    -webkit-transition: 0.2s all linear;
    -moz-transition: 0.2s all linear;
}

/* === Colored circle gradients === */
#main-button ~ .telegram-color {
    background-color: #01ABE6; /* fallback */
    background: linear-gradient(0deg, #017AB1, #01ABE6);
}

#main-button ~ .whatsapp-color {
    background-color: #09db09; /* fallback */
    background: linear-gradient(0deg, #00B100, #09db09);
}

#main-button ~ .messenger-color {
    background-color: #00C6FF; /* fallback */
    background: linear-gradient(0deg, #0078FF, #00C6FF);
}

/* === Open state (flyout animation) === */
#main-button.open ~ a {
    opacity: 1;
    transition: 0.4s all cubic-bezier(0.25, 0.1, 0.25, 1);
    -webkit-transition: 0.4s all cubic-bezier(0.25, 0.1, 0.25, 1);
    -moz-transition: 0.4s all cubic-bezier(0.25, 0.1, 0.25, 1);
}

#main-button.open ~ a:nth-of-type(1) {
    bottom: 60px;
}

#main-button.open ~ a:nth-of-type(2) {
    bottom: 120px;
}

#main-button.open ~ a:nth-of-type(3) {
    bottom: 180px;
}

/* === Button wave animation === */
.wave {
    animation-name: wave;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-name: wave;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

@keyframes wave {
    0% {
        box-shadow: 0 0 0px 0px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0px 10px rgba(255, 255, 255, 0);
    }
}

@-webkit-keyframes wave {
    0% {
        box-shadow: 0 0 0px 0px rgba(255, 255, 255, 0.5);
    }
    100% {
        box-shadow: 0 0 0px 10px rgba(255, 255, 255, 0);
    }
}

.open {
    animation-iteration-count: 1;
}

/* === Misc === */
.drop-nav {
    border-radius: 0px !important;
}