/* ОСНОВНЫЕ СТИЛИ КНОПКИ - КРУГЛАЯ! */
.max-button {
    background: #8746ff;
    border: 2px solid #fff;
    border-radius: 50% !important;
    box-shadow: 0 8px 10px rgba(135, 70, 255, 0.6);
    cursor: pointer;
    height: 62px;
    text-align: center;
    width: 62px !important;
    position: fixed;
    right: 5%;
    bottom: 8%;
    padding: 0;
    z-index: 9999;
    transition: .3s;
    
    /* АНИМАЦИЯ КНОПКИ */
    -webkit-animation: hoverWave linear 1s infinite;
    animation: hoverWave linear 1s infinite;
    
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    overflow: hidden !important;
}

/* Внутренний контейнер - круглый */
.max-button .text-button {
    height: 100% !important;
    width: 100% !important;
    border-radius: 50% !important;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Логотипы - УВЕЛИЧИВАЕМ под размер кнопки */
.max-logo,
.max-logo-reverse {
    width: 60px !important; /* Почти на всю кнопку */
    height: 60px !important; /* Почти на всю кнопку */
    transition: opacity 0.3s ease;
    position: absolute;
}

/* Обычный логотип (синий фон, белый лого) */
.max-logo {
    /* АНИМАЦИЯ ИКОНКИ */
    animation: shake 1.2s infinite ease;
    -webkit-animation: shake 1.2s infinite ease;
    opacity: 1;
}

/* Реверсивный логотип (белый фон, синий лого) - скрыт по умолчанию */
.max-logo-reverse {
    opacity: 0;
}

/* Текст "max" - мелкий, скрыт по умолчанию */
.max-button .text-button span {
    text-align: center;
    color: #2c32b8;
    opacity: 0;
    font-size: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 12px;
    font-weight: 500;
    transition: opacity .3s ease, font-size .3s ease;
    font-family: 'montserrat', Arial, Helvetica, sans-serif;
    width: 100%;
    padding: 0 4px;
    white-space: nowrap;
    z-index: 1;
}

/* Ховер эффекты - ТОЛЬКО НА ДЕСКТОПАХ */
@media (hover: hover) and (pointer: fine) {
    .max-button:hover {
        background: #fff;
    }
    
    .max-button:hover .max-logo {
        opacity: 0;
        animation: none;
        -webkit-animation: none;
    }
    
    .max-button:hover .max-logo-reverse {
        opacity: 1;
    }
    
    .max-button:hover .text-button span {
        opacity: 1;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.5px;
    }
}

/* Для мобильных устройств - всегда показываем обычный логотип */
@media (hover: none) and (pointer: coarse) {
    .max-button:active .max-logo {
        opacity: 0;
    }
    
    .max-button:active .max-logo-reverse {
        opacity: 1;
    }
    
    /* При тапе показываем текст */
    .max-button:active .text-button span {
        opacity: 1;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.5px;
    }
    
    /* Анимация при нажатии на мобильном */
    .max-button:active {
        background: #fff;
        transform: scale(0.95);
        transition: transform 0.1s;
    }
}

/* АНИМАЦИИ */

/* Анимация волны */
@-webkit-keyframes hoverWave {
    0% {
        box-shadow: 0 8px 10px rgba(135, 70, 255, 0.3),
                    0 0 0 0 rgba(135, 70, 255, 0.2),
                    0 0 0 0 rgba(135, 70, 255, 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(135, 70, 255, 0.3),
                    0 0 0 15px rgba(135, 70, 255, 0.2),
                    0 0 0 0 rgba(135, 70, 255, 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(135, 70, 255, 0.3),
                    0 0 0 30px rgba(135, 70, 255, 0),
                    0 0 0 26.7px rgba(135, 70, 255, 0.067);
    }
    100% {
        box-shadow: 0 8px 10px rgba(135, 70, 255, 0.3),
                    0 0 0 30px rgba(135, 70, 255, 0),
                    0 0 0 40px rgba(135, 70, 255, 0.0);
    }
}

@keyframes hoverWave {
    0% {
        box-shadow: 0 8px 10px rgba(135, 70, 255, 0.3),
                    0 0 0 0 rgba(135, 70, 255, 0.2),
                    0 0 0 0 rgba(135, 70, 255, 0.2);
    }
    40% {
        box-shadow: 0 8px 10px rgba(135, 70, 255, 0.3),
                    0 0 0 15px rgba(135, 70, 255, 0.2),
                    0 0 0 0 rgba(135, 70, 255, 0.2);
    }
    80% {
        box-shadow: 0 8px 10px rgba(135, 70, 255, 0.3),
                    0 0 0 30px rgba(135, 70, 255, 0),
                    0 0 0 26.7px rgba(135, 70, 255, 0.067);
    }
    100% {
        box-shadow: 0 8px 10px rgba(135, 70, 255, 0.3),
                    0 0 0 30px rgba(135, 70, 255, 0),
                    0 0 0 40px rgba(135, 70, 255, 0.0);
    }
}

/* Анимация встряхивания */
@keyframes shake {
    0% {
        transform: rotateZ(0deg);
    }
    10% {
        transform: rotateZ(-10deg);
    }
    20% {
        transform: rotateZ(8deg);
    }
    30% {
        transform: rotateZ(-6deg);
    }
    40% {
        transform: rotateZ(4deg);
    }
    50% {
        transform: rotateZ(-3deg);
    }
    60% {
        transform: rotateZ(2deg);
    }
    70% {
        transform: rotateZ(-1deg);
    }
    80% {
        transform: rotateZ(1deg);
    }
    90% {
        transform: rotateZ(-0.5deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}

@-webkit-keyframes shake {
    0% {
        transform: rotateZ(0deg);
    }
    10% {
        transform: rotateZ(-10deg);
    }
    20% {
        transform: rotateZ(8deg);
    }
    30% {
        transform: rotateZ(-6deg);
    }
    40% {
        transform: rotateZ(4deg);
    }
    50% {
        transform: rotateZ(-3deg);
    }
    60% {
        transform: rotateZ(2deg);
    }
    70% {
        transform: rotateZ(-1deg);
    }
    80% {
        transform: rotateZ(1deg);
    }
    90% {
        transform: rotateZ(-0.5deg);
    }
    100% {
        transform: rotateZ(0deg);
    }
}

/* ДОПОЛНИТЕЛЬНОЕ ПРАВИЛО ДЛЯ КРУГЛОЙ ФОРМЫ */
a.max-button,
a.max-button .text-button,
a.max-button .text-button * {
    border-radius: 50% !important;
}

/* Уменьшаем шрифт всплывающих подсказок браузера */
.max-button .text-button .max-small-text {
    font-size: 10px !important;
    line-height: 10px !important;
    white-space: normal !important;
    text-align: center;
    text-shadow: 
     5px  5px 10px #fff,
     5px -5px 10px #fff,
    -5px  5px 10px #fff,
    -5px -5px 10px #fff,
     2px  2px 5px #fff,
     2px -2px 5px #fff,
    -2px  2px 5px #fff,
    -2px -2px 5px #fff;
}