:root{ --ucb-ease: cubic-bezier(.25,.8,.25,1); --ucb-dur: 380ms; }

/* Слайд виджета из-за края — только при первом наведении (is-open) */
#contact-badge{
  position: fixed;
  top: 40%;
  right: 20px;
  z-index: 9999;
  transform: translate(var(--ucb-slide-x, 0), -50%);
  transition: transform var(--ucb-dur) var(--ucb-ease);
}
#contact-badge.ucb-left{ left:20px; right:auto; }
#contact-badge:not(.is-open){ --ucb-slide-x: calc(100% - 30px); }
#contact-badge.ucb-left:not(.is-open){ --ucb-slide-x: calc(-100% + 46px); }

/* Label — не двигается при раскрытии номера */
#contact-badge .contact-label{
  position:relative; display:inline-flex; align-items:center;
  background:var(--ucb-label-bg,#000); color:var(--ucb-label-text,#fff);
  padding:15px 15px 15px 60px; border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,.18);
  font:inherit; font-weight:700; font-size:15px;
}
#contact-badge .contact-us-icon{
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border-radius:50%; background:#fff;
  display:flex; align-items:center; justify-content:center;
}
#contact-badge .contact-us-icon i{
  font-size:18px; line-height:1; color:#000; display:block;
}

/* Ряд иконок — двигаем ТОЛЬКО его (label на месте) */
#contact-badge .contact-social{
  --icons-shift: 0px;
  margin-top:10px; display:flex; gap:10px; align-items:center;
  pointer-events:none; opacity:0;
  transform: translateX(var(--icons-shift)) translateY(6px);
  transition:
  opacity var(--ucb-dur) var(--ucb-ease),
  transform var(--ucb-dur) var(--ucb-ease);
}
#contact-badge.is-open .contact-social{
  pointer-events:auto; opacity:1; transform: translateX(var(--icons-shift)) translateY(0);
}

/* Кружки */
#contact-badge .contact-social a,
#contact-badge .contact-social .phone-desktop > .phone{
  display:inline-flex; width:44px; height:44px; border-radius:50%;
  background: var(--ucb-btn-bg,#fff); color: var(--ucb-icons,#000);
  align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
  transform:translateY(4px) scale(.92); opacity:0;
  transition: transform var(--ucb-dur) var(--ucb-ease), opacity var(--ucb-dur) var(--ucb-ease), box-shadow var(--ucb-dur) var(--ucb-ease);
}
#contact-badge.is-open .contact-social a,
#contact-badge.is-open .contact-social .phone-desktop > .phone{
  transform:translateY(0) scale(1); opacity:1;
}

/* FA-иконки: не «сплющивать» */
#contact-badge .contact-social i{
  font-size:20px; line-height:1; display:block;
}

/* Плашка номера: видна ТОЛЬКО при .phone-open (клик) */
#contact-badge .phone-desktop {position:relative; display:none; }
#contact-badge .phone-desktop .phone{ position:relative; cursor:pointer; }
#contact-badge .phone-desktop .phone .contact-phone{
  position:absolute; top:50%; left:52px; z-index:1;
  transform: translate(-10px,-50%) scale(.98);
  display:inline-flex; align-items:center; gap:10px;
  background: var(--ucb-phone-pill-bg,#fff); color: var(--ucb-phone-pill-text,#000);
  padding:10px 16px; border-radius:20px; white-space:nowrap; box-shadow:0 8px 24px rgba(0,0,0,.18);
  opacity:0; pointer-events:auto;
  transition: opacity var(--ucb-dur) var(--ucb-ease), transform var(--ucb-dur) var(--ucb-ease);
  font:inherit; font-weight:700; font-size:15px;
}
#contact-badge.phone-open .phone-desktop .phone .contact-phone{
  opacity:1; transform: translate(0,-50%) scale(1);
}

/* Только 3 кнопки */
#contact-badge .phone-mobile{ display:none !important; }

@media (min-width: 992px){
  #contact-badge .phone-desktop{ display:inline-flex; }
}

/* УДАЛИ/ПЕРЕЗАПИШИ правило, где раньше скрывали phone-mobile */
#contact-badge .phone-mobile{ display:inline-flex; }

/* Десктоп как было: показываем .phone-desktop, скрываем .phone-mobile */
@media (min-width: 992px){
  #contact-badge .phone-desktop{ display:inline-flex; }
  #contact-badge .phone-mobile{ display:none !important; }
}

/* Мобилка: показываем ТОЛЬКО круглую кнопку телефона.
   Никаких hover-открытий, номер не показываем. */
@media (max-width: 991px){
  /* Лейбл «Консультация» можно убрать, чтобы осталась одна кнопка */
  #contact-badge .contact-label{ display:none !important; }

  /* Ряд контактов всегда видим и кликабелен */
  #contact-badge .contact-social{
    opacity:1 !important;
    pointer-events:auto !important;
    transform:none !important;
  }

  /* Прячем TG и WA на мобильном */
  #contact-badge .contact-social a.telegram,
  #contact-badge .contact-social a.whatsapp{ display:none !important; }

  /* Прячем десктопную трубку с номером */
  #contact-badge .phone-desktop{ display:none !important; }

  /* Показываем мобильную трубку (tel:) */
  #contact-badge .phone-mobile{
    display:inline-flex !important;
    width:52px; height:52px;            /* можно чуть больше, чтобы палец попадал */
    border-radius:50%;
    align-items:center; justify-content:center;
    background: var(--ucb-btn-bg,#fff);
    color: var(--ucb-icons,#000);
    box-shadow:0 8px 22px rgba(0,0,0,.16);
  }

  /* Иконка FA, чтобы не «сплющивалась» */
  #contact-badge .phone-mobile i{
    font-size:22px; line-height:1; display:block;
  }
}