/* Стиль виджета Whatsapp */
#whatsapp_widget {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index:9999; 
    position: fixed; 
    right: 20px; 
    bottom:20px; 
    width: 55px; 
    height: 55px;  
    background-color: #FFF; 
    border-radius: 36px; 
    box-shadow: 0px 6px 25px rgb(0 0 0 / 25%) }

#whatsapp_widget svg {margin:2px 1px 0 0;transition: height 0.4s; height: 90%; fill: #27D246;}

#whatsapp_widget:hover svg {height: 95%;}

#whatsapp_widget>span{color: #454545; margin-right: 10px; font-size: 18.333333333333px;}

#whatsapp_widget{width: unset; padding: 0 0 0 15px;}

#whatsapp_widget {animation: 3s radial-pulse 10s infinite; }

@keyframes radial-pulse { 0% {box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.3);} 50% {box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);} 100% {box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);} }



/* Стиль иконок меню на первом блоке */
.button-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    cursor: pointer;
}

@media (min-width: 1200px) {
    .button-menu:hover {
    transform: scale(1.2);
    }

}

@media (max-width: 639px) {
    .shape-menu {
    width: 140px;
    height: 140px;
    }
    
    .name-menu {
    font-size: 12px;
    }
        
    .price-menu {
    font-size: 12px; 
    }
        
}

@media (min-width: 640px) {
    .shape-menu {
    width: 190px;
    height: 190px;
    }
    
    .name-menu {
    font-size: 15px;
    }
        
    .price-menu {
    font-size: 15px;
    }
}

.shape-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
}

.image-menu {
    max-width: 50%;
    height: auto;
}

.name-menu {
    font-family: 'Ubuntu', sans-serif;
    margin-top: 10px;
    color: #F4F4F4;
    text-align: center;
    font-weight: 600;
 }

.price-menu {
    font-family: Arial, sans-serif;
    margin-top: 5px;
    color: #F4F4F4;
    text-align: center;
}

.name-menu:link, 
.name-menu:visited, 
.name-menu:hover, 
.name-menu:active,
.price-menu:link, 
.price-menu:visited, 
.price-menu:hover, 
.price-menu:active {
    text-decoration: none;
}

/* Стиль иконок мессенджеров в менюшке десктопа */
.icon-messenger {
    transition: opacity 0.1s;
}

.icon-messenger:hover {
    opacity: 0.6;
}

/* Стиль плавающих кнопок перехода на мессенджеры, которые в правом нижнем углу десктопного экрана */
.floating-messengers {
    z-index: 1000;
    position: fixed;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.floating-messengers .button {
    width: 238px;
    height: 44px;
    border-radius: 20px;
    overflow: hidden;
    transform-origin: right center;
    transition: transform 0.4s;
    opacity: 0.95;
}

.floating-messengers .button:hover {
    transform: scale(1.2);
    opacity: 1;
}

.floating-messengers .button a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 12px;
    text-decoration: none;
}

.floating-messengers .image {
    max-width: 24px;
    height: auto;
    margin-left: 5px;
}

.floating-messengers .name {
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    color: #F4F4F4;
    margin-left: 14px;
    white-space: nowrap;
}


/* Стиль кнопок перехода на мессенджеры, которые в окне рядом с QR-кодом */
.button-transition-messenger {
  width: 430px;
  height: 48px;
  border-radius: 7px;
  display: flex;
  align-items: center; /* Вертикальное выравнивание */
  justify-content: center; /* Горизонтальное выравнивание */
  background-color: #5ed169;
}

.button-transition-messenger a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none; /* Убирает подчеркивание у ссылки */
}

.button-transition-messenger .image {
  width: 20px;
  margin-right: 10px; /* Добавляет отступ между картинкой и текстом */
}

.button-transition-messenger .name {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  color: #ffffff;
}

/* Стиль мобильных плавающих кнопок на Телеграм и Whatsapp*/
.mobile-floating-messenger {
  position: fixed;
  bottom: 20px; /* Расстояние от нижнего края */
  right: 20px; /* Расстояние от правого края */
  display: flex;
  flex-direction: column; /* Расположение в столбик */
  gap: 5px; /* Отступ между кнопками */
  z-index: 1000; /* Поверх остального контента */
}

.mobile-floating-messenger .button a .image {
  opacity: 0.95;
  width: 70px;
}