/* Tilda t898-like messengers FAB */
.messengers {
  position: relative;
  z-index: 9998;
}
.messengers__btn {
  position: fixed;
  right: 65px;
  bottom: 50px;
  width: 60px;
  height: 60px;
  z-index: 9998;
}
.messengers__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.messengers__label {
  position: absolute;
  inset: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #cd9b3b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 5;
}
.messengers__label:hover {
  background: #b8892f;
}
.messengers__icon {
  position: absolute;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.messengers__icon--write {
  opacity: 1;
  transform: scale(1);
}
.messengers__icon--close {
  opacity: 0;
  transform: scale(0.6) rotate(-90deg);
  fill: #fff;
}
.messengers__input:checked + .messengers__label .messengers__icon--write {
  opacity: 0;
  transform: scale(0.6) rotate(90deg);
}
.messengers__input:checked + .messengers__label .messengers__icon--close {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.messengers__link {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 50px;
  height: 50px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0) scale(0.5);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0.3s;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.messengers__input:checked ~ .messengers__link {
  opacity: 1;
  visibility: visible;
}
.messengers__input:checked ~ .messengers__link--1 {
  transform: translateY(-70px) scale(1);
  transition-delay: 0.02s;
}
.messengers__input:checked ~ .messengers__link--2 {
  transform: translateY(-130px) scale(1);
  transition-delay: 0.06s;
}
.messengers__input:checked ~ .messengers__link--3 {
  transform: translateY(-190px) scale(1);
  transition-delay: 0.1s;
}
.messengers__input:checked ~ .messengers__link--4 {
  transform: translateY(-250px) scale(1);
  transition-delay: 0.14s;
}

.messengers__svg {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.messengers__svg img,
.messengers__svg svg {
  width: 45px;
  height: 45px;
  display: block;
}
.messengers__text {
  font-size: 13px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.72);
  padding: 7px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.messengers__link:hover .messengers__text {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 768px) {
  .messengers__btn {
    right: 16px;
    bottom: 16px;
  }
  .messengers__input:checked ~ .messengers__link--1 {
    transform: translateY(-66px) scale(1);
  }
  .messengers__input:checked ~ .messengers__link--2 {
    transform: translateY(-122px) scale(1);
  }
  .messengers__input:checked ~ .messengers__link--3 {
    transform: translateY(-178px) scale(1);
  }
  .messengers__input:checked ~ .messengers__link--4 {
    transform: translateY(-234px) scale(1);
  }
}