@charset "UTF-8";
/*
* Стили для виджета контактов и соцсетей.
* Copyright 2024 Oleg Ritum.
*/

 
#messenger-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
}
  
/* Основная кнопка */
#toggle-button {
    width: 60px;
    height: 60px;
    background-color: #dc3545;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s ease;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
    animation: pulse 2s infinite; /* Пульсирующая анимация */
  }
  
#toggle-button:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
}
  
#toggle-button.open {
    background-color: #f8f9fa;
    color: #333;
    animation: none; /* Отключаем пульсацию при открытии */
    transform: rotate(90deg); /* Плавное вращение */
}
  
#toggle-icon {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}
  
#toggle-button.open #toggle-icon {
    transform: rotate(180deg);
}
  
/* Анимация пульсации */
@keyframes pulse {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7);
    }
    50% {
      transform: scale(1.1);
      box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}
  
/* #toggle-button.open #toggle-icon {
    transform: rotate(180deg);
}
   */
  
/* Кнопки мессенджеров */
#widget-buttons {
    display: none;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}
  
#widget-buttons.visible {
    display: flex;
}
  
.social-link {
    width: 50px;
    height: 50px;
    color: #fff;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 10px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}
  
.social-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}
  
/* WhatsApp */
.social-link.whatsapp {
    background-color: var(--whatsapp-light-green);
}
  
.social-link.telegram {
    background-color: var(--telegram-blue);
}

.social-link.instagram {
    background-color: var(--instagram-purple-red);
}

.social-link.phone {
    background-color: var(--pulkovo-orange);
}

/* Кнопка обратного звонка */
.social-link.callback {
    background-color: red /* Красный цвет */
}

/* Форма обратного звонка */



.callback-form {
    position: fixed;
    right: 90px; /* Слева от кнопок с отступом */
    top: 65%; /* Центрируем по вертикали */
    transform: translateY(-50%);
    background-color: #fff;
    border: 2px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 5px 0px;
    z-index: 1000;
    animation: fadeIn 0.3s forwards; /* Анимация появления */
    width: 280px; /* Уменьшаем ширину */
    height: auto; /* Высота по содержимому */

}

.callback-form.hidden {
    display: none; /* Скрытие формы */
}

.callback-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.callback-form input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.callback-form button {
    width: 100%;
    padding: 10px;
    background-color: #f39c12;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.callback-form button:hover {
    background-color: #e67e22;
}

.hidden {
    display: none;
}
  
  /* Добавляем анимации для плавного появления и затухания */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Выпадающее меню WhatsApp */
.dropdown-menu {
    position: absolute;
    right: 70px;
    top: -10px;
    background-color: var(--whatsapp-light-green);
    border: 2px solid #128C7E;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    padding: 0;
    display: none;
    animation: fadeIn 0.3s forwards; /* Анимация появления */
}
  
.dropdown-menu.open {
    display: block;
}

.dropdown-menu.fade-out {
    animation: fadeOut 0.3s forwards; /* Анимация затухания */
}
  
.dropdown-item {
    color: #fff;
    text-decoration: none;
    padding: 15px 20px;
    display: block;
    border-bottom: 1px solid #128C7E;
    text-align: center;
}
  
.dropdown-item:last-child {
    border-bottom: none;
}
  
.dropdown-item:hover {
    background-color: #128C7E;
}
  
/* Стили для выпадающего меню WhatsApp */
#whatsappMenu {
    background-color: var(--whatsapp-light-green); /* Фирменный зелёный цвет WhatsApp */
    border: 2px solid #128C7E; /* Тёмно-зелёная окантовка */
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Тень для объема */
    width: 160px; /* Уменьшенная ширина */
    position: absolute;
    top: 35%; /* Позиционируем по вертикали центра кнопки */
    right: 100%; /* Позиция справа от кнопки */
    margin-right: 10px;
    transform: translateY(-50%); /* Центрирование по вертикали */
    z-index: 1000; /* Поверх других элементов */
}

#whatsappMenu .dropdown-item {
    color: #fff; /* Белый текст */
    font-weight: 500;
    padding: 6px 15px; /* Меньшие отступы для компактности */
    text-align: center;
    transition: background-color 0.3s, transform 0.2s ease;
    position: relative;
}

#whatsappMenu .dropdown-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0; /* Начало черты с отступом */
    width: 100%; /* Длина черты */
    height: 1px;
    background-color: rgba(255, 255, 255, 0.3); /* Полупрозрачная черта */
}

#whatsappMenu .dropdown-item:last-child::after {
    display: none; /* Убираем черту у последнего элемента */
}

#whatsappMenu .dropdown-item:hover {
    background-color: #128C7E; /* Тёмно-зелёный цвет при наведении */
    transform: translateY(-3px); /* Плавное приподнимание */
    color: #ffffff;
}

#whatsappMenu .dropdown-item:hover::after {
    background-color: transparent; /* Убираем черту при наведении */
    height: 0; /* Убираем высоту черты при наведении */
}