:root {
  --cb-dur: .3s;
  --cb-ease: cubic-bezier(.22,.61,.36,1);
}

/* Обертка кнопки - фиксируем снизу справа */
#widget-callback {
  position: fixed;
  bottom: 24px;
  right: 100px;
  z-index: 9999;
  width: 180px;   /* ширина под картинку */
  height: 65px;   /* высота под картинку */
}

/* Контейнер для анимации */
#widget-callback .btn-callback_show {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

/* Слои кнопки */
#widget-callback .btn-callback_show span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateX(100%);
  transition:
    transform var(--cb-dur) var(--cb-ease),
    opacity var(--cb-dur) var(--cb-ease);
  will-change: transform, opacity;
}

/* Видимый элемент */
#widget-callback .btn-callback_show span.choise {
  opacity: 1;
  transform: translateX(0);
}

/* Неактивный уезжает влево */
#widget-callback .btn-callback_show .show-inactive:not(.choise) {
  transform: translateX(-100%);
  opacity: 0;
}
/* Активный уезжает вправо */
#widget-callback .btn-callback_show .show-active:not(.choise) {
  transform: translateX(100%);
  opacity: 0;
}

#widget-callback .btn-callback_show img {
  display: block;
  width: 100%;
  height: 100%;
}

/* === Панель === */
.panel-btn{
  --radius: 30px;
  --border-w: 1px;
  --grad: linear-gradient(135deg,#FFC546,#FF5D07);

  position: fixed;
  bottom: 115px;
  right: 100px;
  width: 300px;
  height: 90px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  padding: 12px 16px;

  border-radius: var(--radius);
  background: #007bff2b;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  isolation: isolate;

  /* изначально прячем */
  opacity: 0;
  pointer-events: none;
  transform: scale(0.95); /* уменьшаем чуть, вместо выезда */
  transition:
    transform var(--cb-dur) var(--cb-ease),
    opacity var(--cb-dur) var(--cb-ease);
  z-index:99999999;
}

/* Градиентная рамка */
.panel-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--grad);
  padding: var(--border-w);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* === Внутренние элементы === */
.panel-btn .item{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  text-decoration: none;;
}

/* Иконки задаём через ::before */
.panel-btn .item::before{
  content: "";
  width: 50px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: background-image .2s ease;
}

/* Сами подписи */
.panel-btn .label{
  color: #2e3136;
  font-size: 8px;
  font-weight: 600;
  text-align: center;
  transition: color .2s ease;
  text-decoration: none;;
}

/* Иконки для каждого элемента (обычное состояние) */
.panel-btn .tg::before   { background-image: url('../images/tg.svg'); }
.panel-btn .mail::before { background-image: url('../images/mail.svg'); }
.panel-btn .call::before { background-image: url('../images/phone.svg'); }
.panel-btn .recall::before { background-image: url('../images/phone.svg'); }

/* Иконки при наведении (hover) */
.panel-btn .tg:hover::before   { background-image: url('../images/tg-hover.svg'); }
.panel-btn .mail:hover::before { background-image: url('../images/mail-hover.svg'); }
.panel-btn .call:hover::before { background-image: url('../images/phone-hover.svg'); }
.panel-btn .recall:hover::before { background-image: url('../images/recall-hover.svg'); }

/* Подсветка текста на hover */
.panel-btn .item.tg:hover .label{
  color: #3EBEFD;
}
.panel-btn .item.call:hover .label{
  color: #18EE1F;
}
.panel-btn .item.mail:hover .label{
  color: #F90E0E;
}

.panel-btn .item.recall:hover .label{
  color: #6D01B3;
}

/* Когда панель активна */
.panel-btn.open {
  opacity: 1;
  transform: scale(1); /* показываем с увеличением */
  pointer-events: auto;
}

/* Обертка формы */
.callback-form {
  position: fixed;
  bottom: 250px; /* чуть выше panel-btn */
  right: 100px;
  width: 290px;
  background: linear-gradient(135deg,#fff,#fff);
  border-radius: 20px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  z-index: 10000;
  display: none;
  font-family: sans-serif;
}

.callback-form .form-title {
    font-weight: bolder;
    margin-bottom: 0px;
    font-size: 12px;
    margin-top: 0px;
    padding: 15px 20px;
    width: 70%;
    color: white;
}

.callback-form input[type="text"],
.callback-form input[type="tel"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 12px;
  box-sizing: border-box;
}

.callback-form .policy {
  font-size: 8px;
  margin: 10px 0;
  display: flex;
  color: #c4c4c4;
}

.callback-form .submit-btn {
  width: 100%;
  background: linear-gradient(135deg,#FFC546,#FF5D07);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
}

/* Кнопка закрытия */
.callback-form .close-form {
  position: absolute;
  top: 10px;
  right: 8px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #aaa;
}

.header-form_widget{
  background: linear-gradient(135deg, #0070ff, #99a5ff);
  height: 56px;
  border-radius: 20px 20px 0px 0px;
}

.callback-form form{
  padding: 10px 15px;
}

.callback-form form label{
  font-size: 12px;
  color: #cbcbcb;
  padding-left: 15px;
}

.callback form input[name="name"],
.callback form input[name="phone"]{
  border-radius: 1000px;
  border: 1px solid #cbcbcb;
}

input[name="name"]::placeholder,
input[name="phone"]::placeholder{
    font-size: 12px;
    color: #C4C4C4;
}

.red{
  color:red;
}

/* Чекбокс */
.custom-checkbox {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #bbb;
  user-select: none;
}

.custom-checkbox input {
  display: none;
}

.custom-checkbox .checkmark {
    width: 20px;
    height: 15px;
    border: 2px solid orange;
    border-radius: 50%;
    margin-right: 10px;
    position: relative;
    cursor: pointer;
}

.custom-checkbox input:checked + .checkmark::after {
    content: "✔";
    font-size: 12px;
    color: orange;
    position: absolute;
    top: -2px;
    left: 2px;
}

/* Кнопка */
.pulse-button {
position: relative;
    display: block;
    padding: 15px 60px;
    font-size: 15px;
    color: white;
    background: linear-gradient(135deg, #0070ff, #99a5ff);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    margin: 20px auto 0px auto;
}

.pulse-button span {
  position: relative;
  z-index: 2;
}

/* Контейнер пульсации */
.pulse-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 60%);
  transform: translate(-50%, -50%) scale(0.5);
  border-radius: 50%;
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

/* Анимация запускается при наведении */
.pulse-button:hover::before {
  animation: radial-pulse 1.2s infinite ease-out;
}

/* Ключевые кадры волны */
@keyframes radial-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.3;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}


#callbackForm > div.form-content > form > label.custom-checkbox{
  font-size: 8px;;
}

body > div.panel-btn.open > a.item.call{
    display:none;
}

@media (max-width:568px){
    body > div.panel-btn.open > a.item.call{
        display:inline-flex;
    }
}