.fab-actions a{
text-decoration:none !important;

}

/* Обертка всей плавающей кнопки */
.fab-wrapper {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 9999;
}

/* Прячем чекбокс-переключатель */
#fab-toggle {
display: none;
}

/* Главная круглая кнопка */
.fab {
width: 50px;
height: 50px;
border-radius: 50%;
background: #ef3000; /* основной цвет, можно поменять */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s;
}

/* Ховер по основной кнопке */
.fab:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}

/* Иконки внутри основной кнопки (телефон и крестик) */
.fab-icon {
font-size: 26px;
color: #fff;
}

/* По умолчанию показываем телефон, прячем крестик */
.fab-icon-close {
display: none;
}

/* При checked прячем телефон, показываем крестик */
#fab-toggle:checked + .fab .fab-icon-phone {
display: none;
}

#fab-toggle:checked + .fab .fab-icon-close {
display: inline-block;
}

/* Блок с тремя дополнительными иконками */
.fab-actions {
position: absolute;
bottom: 70px; /* отступ от основной кнопки */
right: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;

}

/* Отдельная круглая иконка (WA, TG, звонок) */
.fab-action {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
font-size: 22px;
box-shadow: 0 3px 10px rgba(0,0,0,0.25);
transform: translateY(20px);

transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Иконка Font Awesome внутри маленького кружка */
.fab-action i {
color: #fff;
}

/* Цвета кружков */
.fab-wa {
background: #25d366; /* WhatsApp */
}

.fab-tg {
background: #0088cc; /* Telegram */
}

.fab-call {
background: #4caf50; /* звонок */
}

/* При активном чекбоксе показываем иконки */
#fab-toggle:checked ~ .fab-actions {
pointer-events: auto;
}

#fab-toggle:checked ~ .fab-actions .fab-action {
opacity: 1;
transform: translateY(0);
}

/* Небольшая задержка появления каждой иконки */
#fab-toggle:checked ~ .fab-actions .fab-action:nth-child(1) {
transition-delay: 0.0s;
}
#fab-toggle:checked ~ .fab-actions .fab-action:nth-child(2) {
transition-delay: 0.05s;
}
#fab-toggle:checked ~ .fab-actions .fab-action:nth-child(3) {
transition-delay: 0.1s;
}

/* Адаптив для узких экранов */
@media (max-width: 480px) {
.fab-wrapper {
right: 15px;
bottom: 15px;
}
}


/* Волна вокруг основной кнопки */
.fab-wa {
position: relative; /* важно для псевдо-элемента */
overflow: visible;
}

/* Псевдо-элемент – круглая волна */
.fab-wa::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: #25d366; /* цвет волны, можно менять */
z-index: -1;
transform: scale(1);
opacity: 0;
animation: fab-pulse 2s ease-out infinite;
}

/* Анимация волны */
@keyframes fab-pulse {
0% {
transform: scale(1);
opacity: 0.6;
}
70% {
transform: scale(1.8);
opacity: 0;
}
100% {
transform: scale(1.8);
opacity: 0;
}
}


/* Волна вокруг основной кнопки */
.fab-tg {
position: relative; /* важно для псевдо-элемента */
overflow: visible;
}

/* Псевдо-элемент – круглая волна */
.fab-tg::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: #0088cc; /* цвет волны, можно менять */
z-index: -1;
transform: scale(1);
opacity: 0;
animation: fab-pulse 2s ease-out infinite;
}

/* Анимация волны */
@keyframes fab-pulse {
0% {
transform: scale(1);
opacity: 0.6;
}
70% {
transform: scale(1.8);
opacity: 0;
}
100% {
transform: scale(1.8);
opacity: 0;
}
}


/* Волна вокруг основной кнопки */
.fab-call {
position: relative; /* важно для псевдо-элемента */
overflow: visible;
}

/* Псевдо-элемент – круглая волна */
.fab-call::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: #4caf50; /* цвет волны, можно менять */
z-index: -1;
transform: scale(1);
opacity: 0;
animation: fab-pulse 2s ease-out infinite;
}

/* Анимация волны */
@keyframes fab-pulse {
0% {
transform: scale(1);
opacity: 0.6;
}
70% {
transform: scale(1.8);
opacity: 0;
}
100% {
transform: scale(1.8);
opacity: 0;
}
}