@charset "UTF-8";
/* Этот документ проходит проверку по стандарту CSS3 + SVG ! */

:root {
  --border-radius: 8px;
  --white: #ffffff;
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }

  80%,
  100% {
    opacity: 0;
  }
}

* {
  -webkit-tap-highlight-color: transparent;
}

.chat-box {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  font-size: 17px;
}

.chat-box--left {
  right: initial;
  left: 0;
}

.chat-box__icon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4em;
  height: 4em;
  border-radius: 50%;
  cursor: pointer;
  overflow: clip;
}

@media (max-width: 500px) {
  .chat-box__icon {
    transform: scale(0.9);
  }
}

.chat-box__wrap {
  position: relative;
}

.chat-box__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 200%;
  height: 200%;
  margin-left: -100%;
  margin-top: -100%;
  border-radius: 50%;
  opacity: 0.5;
  animation: pulse-ring 2.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.chat-box__pulse.is-hidden {
  opacity: 0;
  transition: opacity 0.5s;
}

@media (max-width: 500px) {
  .chat-box__pulse.is-hidden-mob {
    display: none;
  }
}

.chat-box__chat {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.8em;
  height: 1.8em;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: transform 0.5s, opacity 0.4s;
}

.chat-box__close {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, 200%);
  transition: transform 0.5s, opacity 0.5s;
}

.chat-box__close {
  width: 1.4em;
  height: 1.4em;
  fill: none;
  stroke: currentColor;
}

.chat-box.is-active .chat-box__close {
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: transform 0.6s, opacity 0.6s;
}

.chat-box.is-active .chat-box__chat {
  opacity: 0;
  transform: translate(-50%, -200%);
  transition: transform 0.4s, opacity 0.4s;
}

.chat-box__list {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  height: 3.7em;
  margin: 0;
  padding: 0;
  border-radius: 3em;
  opacity: 0;
  visibility: hidden;
  list-style: none;
  transform: translate(50px, 0);
  box-shadow: -1px 5px 15px -3px rgb(28 26 42 / 29%);
  overflow: clip;
  transition: opacity 0.5s, transform 0.5s
}

/* пк активно */
.chat-box.is-active .chat-box__list {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
  transition: opacity 0.5s, transform 0.5s
}

/* моб */
@media (max-width: 900px) {
  .chat-box__list {
    flex-direction: column;
    width: 8.6em;
    height: min-content;
    border-radius: 10px;
    transform: translate(-70px, -90%);
  }

  /* моб активно */
  .chat-box.is-active .chat-box__list {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-70px, -102%);
  }

  /* моб только иконки */
  .chat-box__list.icons_only {
    width: 5em;
    transform: translate(-15px, -90%);
  }

  /* моб активно только иконки */
  .chat-box.is-active .chat-box__list.icons_only {
    transform: translate(-10px, -102%);
  }
}

/* по левому краю ПК */
.chat-box--left .chat-box__list {
  width: max-content;
  transform: translate(0, 0);
}

/* по левому краю ПК активно */
.chat-box--left.is-active .chat-box__list {
  position: absolute;
  transform: translate(70px, 0);
}

@media (max-width: 900px) {

  /* моб по левом краю */
  .chat-box--left .chat-box__list {
    width: 8.6em;
    transform: translate(-5px, -90%);
  }

  /* моб по левому краю активно */
  .chat-box--left.is-active .chat-box__list {
    transform: translate(-5px, -102%);
  }

  /* моб по левом краю только иконки */
  .chat-box--left .chat-box__list.icons_only {
    width: 5em;
    transform: translate(0, -90%);
  }

  /* моб по левом краю только иконки активно */
  .chat-box--left.chat-box.is-active .chat-box__list.icons_only {
    transform: translate(0, -102%);
  }
}

@media (max-width: 500px) {

  /* телефоны  */
  .chat-box__list {
    width: 7em;
    transform: translate(-40px, -90%);
  }

  /* телефоны  активно */
  .chat-box.is-active .chat-box__list {
    transform: translate(-40px, -102%);
  }

  /* телефоныпо левом краю */
  .chat-box--left .chat-box__list {
    width: 7em;
    transform: translate(-5px, -90%);
  }

  /* телефоны по левому краю активно */
  .chat-box--left.is-active .chat-box__list {
    transform: translate(-5px, -102%);
  }
}

.chat-box__item {
  margin: 0;
  padding: 0;
  display: block;
  font-size: 1em;
}

@media (max-width: 900px) {
  .chat-box__item {
    width: 100%;
    font-size: 15px;
  }
}

@media (max-width: 500px) {
  .chat-box__item {
    font-size: 13px;
  }
}

.chat-box__link {
  position: relative;
  display: block;
  padding-block: 1.2em;
  padding-inline:1.35em;
  text-decoration: none;
}

@media (max-width: 900px) {
  .chat-box__link {
    padding-inline: 0.5em;
  }

  .chat-box__list:not(.icons_and_text) .chat-box__link {
    padding-block: 1.5em;
  }
}

@media (max-width: 500px) {
  .chat-box__list:not(.icons_and_text) .chat-box__link {
    padding-block: 1.75em;
  }
}

.chat-box__link:not(.chat-box__link--max) {
  transition: background-color 0.3s ease-in-out;
}

.chat-box__link:hover {
  background-color: var(--gp-hover) !important;
  text-decoration: underline;
}

.chat-box__link:not(.chat-box__link--max):hover {
  transition: background-color 0.3s ease-in-out;
}

.chat-box__link:not(.chat-box__link--max)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 102%;
  height: 125%;
  background-color: inherit;
  transform: skewX(-32deg) translate(-2%, -5%);
  transition: background-color 0.3s;
}

@media (max-width: 900px) {
  .chat-box__link:not(.chat-box__link--max)::before {
    width: 150%;
    transform: skewX(0) translate(-14%, -2%) rotate(-9deg);
  }
}

.chat-box__link--max {
  padding-inline: 1.7em 1.3em;
  transition: background-image 0.2s;
}

@media (max-width: 900px) {
  .chat-box__link--max {
    padding-inline: 0.5em;
  }
}

.chat-box__link--max:hover {
    background-image: inherit;
    transition: background-image 0.2s;
}

.chat-box__link--max::before,
 .chat-box__link--max::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 102%;
  height: 125%;
  transform: skewX(-32deg) translate(-2%, -5%);
  transition: opacity 0.2s;
}  

@media (max-width: 900px) {
  .chat-box__link--max::before,
  .chat-box__link--max::after {
    z-index: 1 !important;
    width: 150%;
    transform: skewX(0) translate(-14%, -2%) rotate(-9deg);
  }
}

.chat-box__item:has(.chat-box__link--max):first-child > .chat-box__link--max::before, 
.chat-box__item:has(.chat-box__link--max):first-child > .chat-box__link--max::after {
  width: 110%;
  transform: skewX(-32deg) translate(-10%, -5%);
}

@media (max-width: 900px) {
.chat-box__item:has(.chat-box__link--max):first-child > .chat-box__link--max::before, 
.chat-box__item:has(.chat-box__link--max):first-child > .chat-box__link--max::after {
  width: 150%;
  height: 132%;
  transform: skewX(0) translate(-14%, -9%) rotate(-9deg);
}
}

 .chat-box__link--max::before {
  z-index: 2;
  background-image: linear-gradient(45deg, var(--gp-hover), var(--gp-hover));
  opacity: 0;
}

.chat-box__link--max:hover::before {
  opacity: 1;
  transition: opacity 0.2s;
}

.chat-box__link--max::after {
  z-index: 1;
  background-image: inherit;
  opacity: 1;
}

 .chat-box__link--max:hover::after {
  opacity: 0;
  transition: opacity 0.2s;
}

.chat-button__label {
  position: relative;
  z-index: 3;
}

.chat-box__tooltip {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  width: 150px;
  padding: 0.75em 0;
  font-size: 0.94em;
  line-height: 130%;
  text-align: center;
  border-radius: var(--border-radius);
  visibility: hidden;
  opacity: 0;
  transform: translate(0, -125%);
  transition: opacity 0.3s;
}

@media (max-width: 900px) {
  .chat-box__tooltip {
    display: none;
  }
}

.chat-box--left>.chat-box__tooltip {
  right: initial;
  left: 0;
  transform: translate(0, -125%);
}

.chat-box__tooltip.is-hidden {
  display: none;
}

.chat-box__tooltip::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  border-width: 10px;
  border-style: solid;
  transform: translate(-1.5em, 1em);
  border-color: transparent;
  border-top-color: inherit;
}

.chat-box--left>.chat-box__tooltip::after {
  right: initial;
  left: 0;
  transform: translate(1.5em, 1em);
}

.chat-box:hover .chat-box__tooltip {
  visibility: visible;
  opacity: 0.9;
  transition: opacity 0.3s;
}

.chat-box__tooltip--close {
  cursor: pointer;
  transform: translate(0, -125%);
}

.chat-button__icon {
  position: relative;
  z-index: 2;
  width: 1.6em;
  height: 1.6em;
  fill: currentColor;
}

.chat-button__icon--max {
  width: 1.25em;
  height: 1.25em;
}

.chat-button__icon--telegram {
  width: 1.45em;
  height: 1.45em;
}

.chat-button__icon-wrapper {
  flex-shrink: 0;
}

.chat-button__content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

@media (max-width: 900px) {
  .chat-button__content {
    flex-direction: column;
      gap: 6px;
  }
}

.chat-button--text-only .chat-button__icon {
  display: none;
}

.chat-button--icons-only .chat-button__label {
  display: none;
}

.chat-button--icons-and-text .chat-button__icon-wrapper {
  margin-right: 0.5em;
}