/*
 * File: /wp-content/plugins/contact-us-button/assets/css/contact-us-button-styles.css
 * Purpose: Стили фронтенда плавающих кнопок (исходные + пресеты анимаций).
 */

/* ====== БАЗА ====== */
.cubp-displaygrid{ display: flex !important; }
.cubp-social-buttons .cubp-social-button{ text-decoration: none; }

.cubp-contact-widget{
  align-items: center;
  display: flex;
  height: max-content;
  isolation: isolate;
  position: fixed !important;
  width: max-content;
  z-index: 999999999999;
}

.cubp-social-buttons{
  align-items: center;
  bottom: calc(100% + 12px) !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  left: 50% !important;
  position: absolute !important;
  right: auto !important;
  transform: translateX(-50%);
  width: max-content;
  z-index: 2;
}

/* ====== КНОПКИ: идеальное центрирование контента ====== */
.cubp-first-social-button,
.cubp-social-button{
  box-sizing: border-box;
  padding: 0 !important;
  line-height: 1 !important;

  /* центрирование всех типов иконок */
  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;
  overflow: hidden;
  opacity: .99;

  border-radius: 28%;
  -webkit-transition: all 0.3s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.3s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}

.cubp-first-social-button{
  appearance: none;
  border: 0;
  inset: auto !important;
  position: relative !important;
  z-index: 3;
  cursor: pointer;

  width: 50px;
  height: 50px;

  font-size: 28px;
  color: #fff;

  margin: 0 !important;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
}

/* Соц кнопки: скрыты по умолчанию, показываются через .cubp-displaygrid */
.cubp-social-button{
  text-decoration: none;
  display: none;

  background-color: #fff;
  width: 50px;
  height: 50px;

  flex: 0 0 50px;
  margin: 0 !important;
  position: relative;

  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
}

/* Когда список открыт — каждая кнопка становится flex */
.cubp-social-buttons.cubp-displaygrid .cubp-social-button{
  display: flex !important;
}

.cubp-panel-trigger i,
.cubp-panel-trigger svg {
  color: inherit !important;
  fill: currentColor;
}

.cubp-first-social-button i,
.cubp-first-social-button svg {
  color: inherit !important;
  fill: currentColor !important;
}

/* ====== Hover-плашка (фон) ====== */
.cubp-social-button:before{
  content: '';
  background-color: #000;
  width: 120%;
  height: 120%;
  position: absolute;
  top: 90%;
  left: -110%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all 0.3s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.3s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  z-index: 0;
}

.cubp-social-button:focus:before,
.cubp-social-button:hover:before{
  top: -10%;
  left: -10%;
}

/* ====== ИКОНКИ: общий слой поверх :before ====== */
.cubp-social-button i,
.cubp-social-button svg,
.cubp-social-button img,
.cubp-first-social-button i,
.cubp-first-social-button svg,
.cubp-first-social-button img{
  position: relative;
  z-index: 1;
}

/* ====== FA (i) ====== */
.cubp-social-button i{
  font-size: 28px;
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transition: all 0.3s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.3s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}

.cubp-social-button:focus i,
.cubp-social-button:hover i{
  color: #fff !important;
  -webkit-transform: scale(1);
  transform: scale(1);
}

/* ====== SVG (можно красить через currentColor, если нужно) ====== */
.cubp-social-button svg,
.cubp-first-social-button svg{
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
}

/* ====== IMG (MAX и любые PNG) — НЕ перекрашиваем и строго центрируем ====== */
.cubp-social-button img,
.cubp-first-social-button img{
  width: 28px;
  height: 28px;

  /* чтобы одинаково смотрелось в кружке */
  /*max-width: 70%;*/
  max-height: 70%;

  display: block !important;
  margin: 0 !important;

  object-fit: contain !important;
  object-position: center center !important;

  /* никаких фильтров/инверсий */
  filter: none !important;

  /* плавный scale как у FA */
  transform: scale(.8);
  transform-origin: 50% 50% !important;
  transition: transform 0.3s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}

.cubp-social-button:hover img,
.cubp-social-button:focus img{
  transform: scale(1);
  filter: none !important;
}

/* ====== АДАПТИВ ====== */
@media (max-width: 767px){
  .cubp-contact-widget{
    max-height: calc(100vh - 24px);
  }

  .cubp-social-buttons{
    gap: 8px;
  }
}

/* ====== Пресеты анимаций ====== */

/* STACK */
.cubp-social-buttons.cubp-anim-stack .cubp-social-button{
  will-change: transform, opacity;
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  transition: transform .42s cubic-bezier(.22,.85,.36,1.2), opacity .28s ease;
}
.cubp-social-buttons.cubp-anim-stack.cubp-stack-anim-open .cubp-social-button{
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cubp-social-buttons.cubp-anim-stack.cubp-stack-anim-open .cubp-social-button:nth-of-type(1){transition-delay:.00s}
.cubp-social-buttons.cubp-anim-stack.cubp-stack-anim-open .cubp-social-button:nth-of-type(2){transition-delay:.04s}
.cubp-social-buttons.cubp-anim-stack.cubp-stack-anim-open .cubp-social-button:nth-of-type(3){transition-delay:.08s}
.cubp-social-buttons.cubp-anim-stack.cubp-stack-anim-open .cubp-social-button:nth-of-type(4){transition-delay:.12s}
.cubp-social-buttons.cubp-anim-stack.cubp-stack-anim-open .cubp-social-button:nth-of-type(5){transition-delay:.16s}
.cubp-social-buttons.cubp-anim-stack.cubp-stack-anim-open .cubp-social-button:nth-of-type(6){transition-delay:.20s}
.cubp-social-buttons.cubp-anim-stack.cubp-stack-anim-open .cubp-social-button:nth-of-type(7){transition-delay:.24s}
.cubp-social-buttons.cubp-anim-stack.cubp-stack-anim-open .cubp-social-button:nth-of-type(8){transition-delay:.28s}
.cubp-social-buttons.cubp-anim-stack:not(.cubp-stack-anim-open) .cubp-social-button{transition-delay:0s!important}

/* FADE */
.cubp-social-buttons.cubp-anim-fade .cubp-social-button{
  opacity:0;
  filter: blur(4px);
  transform: translateY(2px);
  transition: opacity .26s ease, filter .28s ease;
}
.cubp-social-buttons.cubp-anim-fade.cubp-stack-anim-open .cubp-social-button{
  opacity:1;
  filter: blur(0);
}
.cubp-social-buttons.cubp-anim-fade.cubp-stack-anim-open .cubp-social-button:nth-of-type(1){transition-delay:.00s}
.cubp-social-buttons.cubp-anim-fade.cubp-stack-anim-open .cubp-social-button:nth-of-type(2){transition-delay:.03s}
.cubp-social-buttons.cubp-anim-fade.cubp-stack-anim-open .cubp-social-button:nth-of-type(3){transition-delay:.06s}
.cubp-social-buttons.cubp-anim-fade.cubp-stack-anim-open .cubp-social-button:nth-of-type(4){transition-delay:.09s}
.cubp-social-buttons.cubp-anim-fade:not(.cubp-stack-anim-open) .cubp-social-button{transition-delay:0s!important}

/* POP */
.cubp-social-buttons.cubp-anim-pop .cubp-social-button{
  opacity:0;
  transform: scale(.82);
  transition: transform .30s cubic-bezier(.2,.9,.22,1.25), opacity .18s ease;
}
.cubp-social-buttons.cubp-anim-pop.cubp-stack-anim-open .cubp-social-button{
  opacity:1;
  transform: scale(1);
}
.cubp-social-buttons.cubp-anim-pop.cubp-stack-anim-open .cubp-social-button:nth-of-type(1){transition-delay:.00s}
.cubp-social-buttons.cubp-anim-pop.cubp-stack-anim-open .cubp-social-button:nth-of-type(2){transition-delay:.035s}
.cubp-social-buttons.cubp-anim-pop.cubp-stack-anim-open .cubp-social-button:nth-of-type(3){transition-delay:.07s}
.cubp-social-buttons.cubp-anim-pop.cubp-stack-anim-open .cubp-social-button:nth-of-type(4){transition-delay:.105s}
.cubp-social-buttons.cubp-anim-pop:not(.cubp-stack-anim-open) .cubp-social-button{transition-delay:0s!important}

/* FAN */
.cubp-social-buttons.cubp-anim-fan{ --fan-dir: 1; }
.cubp-social-buttons.cubp-anim-fan[data-side="right"]{ --fan-dir: -1; }
.cubp-social-buttons.cubp-anim-fan[data-side="left"]{  --fan-dir: 1;  }

.cubp-social-buttons.cubp-anim-fan .cubp-social-button{
  opacity:0;
  transform: translateY(14px) rotate(calc(var(--fan-rot, 0deg) * .6)) scale(.94);
  transform-origin: 50% 60%;
  transition: transform .36s cubic-bezier(.22,.85,.36,1), opacity .24s ease;
}

.cubp-social-buttons.cubp-anim-fan .cubp-social-button:nth-of-type(1){  --fan-rot:-14deg; --fan-spread:14px; --fan-rise:-8px; }
.cubp-social-buttons.cubp-anim-fan .cubp-social-button:nth-of-type(2){  --fan-rot:-10deg; --fan-spread:11px; --fan-rise:-6px; }
.cubp-social-buttons.cubp-anim-fan .cubp-social-button:nth-of-type(3){  --fan-rot: -7deg; --fan-spread: 9px; --fan-rise:-3px; }
.cubp-social-buttons.cubp-anim-fan .cubp-social-button:nth-of-type(4){  --fan-rot: -3deg; --fan-spread: 6px; --fan-rise:-1px; }
.cubp-social-buttons.cubp-anim-fan .cubp-social-button:nth-of-type(5){  --fan-rot:  3deg; --fan-spread: 6px; --fan-rise: 1px; }
.cubp-social-buttons.cubp-anim-fan .cubp-social-button:nth-of-type(6){  --fan-rot:  7deg; --fan-spread: 9px; --fan-rise: 3px; }
.cubp-social-buttons.cubp-anim-fan .cubp-social-button:nth-of-type(7){  --fan-rot: 10deg; --fan-spread:11px; --fan-rise: 6px; }
.cubp-social-buttons.cubp-anim-fan .cubp-social-button:nth-of-type(8){  --fan-rot: 14deg; --fan-spread:14px; --fan-rise: 8px; }

.cubp-social-buttons.cubp-anim-fan.cubp-stack-anim-open .cubp-social-button{
  opacity:1;
  transform:
    translateX(calc(var(--fan-dir) * var(--fan-spread, 0)))
    translateY(var(--fan-rise, 0))
    rotate(var(--fan-rot, 0deg))
    scale(1);
}

.cubp-social-buttons.cubp-anim-fan.cubp-stack-anim-open .cubp-social-button:nth-of-type(1){transition-delay:.00s}
.cubp-social-buttons.cubp-anim-fan.cubp-stack-anim-open .cubp-social-button:nth-of-type(2){transition-delay:.04s}
.cubp-social-buttons.cubp-anim-fan.cubp-stack-anim-open .cubp-social-button:nth-of-type(3){transition-delay:.08s}
.cubp-social-buttons.cubp-anim-fan.cubp-stack-anim-open .cubp-social-button:nth-of-type(4){transition-delay:.12s}
.cubp-social-buttons.cubp-anim-fan.cubp-stack-anim-open .cubp-social-button:nth-of-type(5){transition-delay:.16s}
.cubp-social-buttons.cubp-anim-fan.cubp-stack-anim-open .cubp-social-button:nth-of-type(6){transition-delay:.20s}
.cubp-social-buttons.cubp-anim-fan.cubp-stack-anim-open .cubp-social-button:nth-of-type(7){transition-delay:.24s}
.cubp-social-buttons.cubp-anim-fan.cubp-stack-anim-open .cubp-social-button:nth-of-type(8){transition-delay:.28s}
.cubp-social-buttons.cubp-anim-fan:not(.cubp-stack-anim-open) .cubp-social-button{transition-delay:0s!important}

/* SLIDE */
.cubp-social-buttons.cubp-anim-slide .cubp-social-button{
  opacity:0;
  transform: translateX(var(--cubp-slide-start, 8px));
  transition: transform .30s ease, opacity .24s ease;
}
.cubp-social-buttons.cubp-anim-slide.cubp-stack-anim-open .cubp-social-button{
  opacity:1;
  transform: translateX(0);
}
.cubp-social-buttons.cubp-anim-slide.cubp-stack-anim-open .cubp-social-button:nth-of-type(1){transition-delay:.00s}
.cubp-social-buttons.cubp-anim-slide.cubp-stack-anim-open .cubp-social-button:nth-of-type(2){transition-delay:.03s}
.cubp-social-buttons.cubp-anim-slide.cubp-stack-anim-open .cubp-social-button:nth-of-type(3){transition-delay:.06s}
.cubp-social-buttons.cubp-anim-slide:not(.cubp-stack-anim-open) .cubp-social-button{transition-delay:0s!important}

.cubp-social-buttons.cubp-anim-slide{ --cubp-slide-start: -8px; }
.cubp-social-buttons.cubp-anim-slide[data-side="right"]{ --cubp-slide-start: 8px; }