.fab-container {
    position: fixed; bottom: 30px; right: 30px;
    display: flex; flex-direction: column; align-items: center;
    gap: 15px; z-index: 2000;
}

.fab-options { 
    display: flex; flex-direction: column; gap: 15px; 
    pointer-events: none; order: 1; 
}

.fab-main {
    width: 60px; height: 60px; background: #D4FC1E; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2; order: 2; position: relative;
    transition: all 0.4s ease;
    box-shadow: 0 4px 15px rgba(212, 252, 30, 0.3);
    user-select: none;
}

/* Общие стили иконок */
.fab-item i, .main-icon {
    color: #fff;
    font-size: 24px;
    display: flex; align-items: center; justify-content: center;
}

.main-icon { color: #000; font-size: 26px; transition: 0.3s; }

.close-icon { 
    position: absolute; display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; font-size: 32px;
    color: #fff; opacity: 0; transform: rotate(-90deg); transition: 0.3s;
}

.fab-item {
    width: 50px; height: 50px; border-radius: 50%; /* Чуть меньше основной кнопки */
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(20px) scale(0);
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Фирменные цвета (оптимизированы) */
.telegram  { background: #0088cc; }
.vkontakte { background: #0077ff; } /* Цвет VK */
.phone     { background: #ff9500; } /* Цвет Phone (более яркий оранжевый) */

/* Состояние Active */
.fab-container.active .fab-item { 
    opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; 
}
.fab-container.active .close-icon { opacity: 1; transform: rotate(0deg); }
.fab-container.active .main-icon { opacity: 0; transform: scale(0); }
.fab-container.active .fab-main { 
    background: #222; 
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Эффекты при наведении */
.fab-item:hover {
    filter: brightness(1.1);
    transform: scale(1.1);
}

.fab-main:hover {
    background: #e2ff3b;
    box-shadow: 0 0 20px rgba(212, 252, 30, 0.5);
}

/* Задержки (снизу вверх) */
.fab-container.active .fab-item:nth-child(3) { transition-delay: 0.05s; }
.fab-container.active .fab-item:nth-child(2) { transition-delay: 0.1s; }
.fab-container.active .fab-item:nth-child(1) { transition-delay: 0.15s; }



/* Основная кнопка (Лимонная) */
.fab-main:hover {
    background: #e2ff3b;
    /* Яркое лимонное свечение */
    box-shadow: 0 0 20px rgba(212, 252, 30, 0.6), 
                0 0 40px rgba(212, 252, 30, 0.3);
    transform: scale(1.05);
}

/* Telegram (Голубое свечение) */
.fab-item.telegram:hover {
    background: #0088cc;
    box-shadow: 0 0 20px rgba(0, 136, 204, 0.7), 
                0 0 40px rgba(0, 136, 204, 0.4);
}

/* ВКонтакте (Синее свечение) */
.fab-item.vkontakte:hover {
    background: #0077ff;
    box-shadow: 0 0 20px rgba(0, 119, 255, 0.7), 
                0 0 40px rgba(0, 119, 255, 0.4);
}

/* Телефон (Оранжевое свечение) */
.fab-item.phone:hover {
    background: #ff9500;
    box-shadow: 0 0 20px rgba(255, 149, 0, 0.7), 
                0 0 40px rgba(255, 149, 0, 0.4);
}

/* Общий стиль для всех иконок в опциях при наведении */
.fab-item:hover {
    filter: brightness(1.2); /* Делает цвет самой кнопки сочнее */
    transform: scale(1.1);   /* Слегка увеличиваем для интерактивности */
    transition: all 0.3s ease;
}