/* ================================================================
   Slider Bot Protection — оформление под дизайн-систему сайта.
   Имена классов и состояний менять нельзя: на них завязан JS
   (.success / .error / .dragging / .hidden / .visible / .active).
================================================================ */

.sbp-wrap{
  background:var(--white,#fff);
  border:1px solid var(--line,#e2dcd0);
  border-radius:var(--r,20px);
  padding:26px 24px 22px;
  width:100%;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  box-sizing:border-box;
}
.sbp-title{
  font-family:var(--font-display,sans-serif);
  font-size:18px;font-weight:800;color:var(--ink,#17120c);
  text-align:center;margin:0 0 4px;line-height:1.3;
}
.sbp-subtitle{
  font-size:14px;color:var(--muted,#6e6558);
  text-align:center;margin:0 0 18px;
}

/* --- Слайдер --- */
.sbp-slider-container{
  position:relative;
  height:var(--sbp-slider-height,64px);
  background:var(--cream,#f2efe7);
  border-radius:999px;
  overflow:hidden;
  user-select:none;
  touch-action:none;
  border:2px solid var(--line,#e2dcd0);
  transition:border-color .3s,background .3s;
  cursor:pointer;
}
.sbp-slider-container.success{border-color:#8fcfa9;background:#f1f9f4}
.sbp-slider-container.error{border-color:#e0736b;animation:sbp-shake .42s ease}
@keyframes sbp-shake{
  0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)}
  40%{transform:translateX(7px)}   60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}
}
.sbp-fill{
  position:absolute;left:0;top:0;bottom:0;
  border-radius:999px;pointer-events:none;transition:background .3s;
  background:linear-gradient(90deg,rgba(var(--amber-rgb,245,165,11),.42),rgba(var(--amber-rgb,245,165,11),.18));
}
.sbp-slider-container.success .sbp-fill{background:linear-gradient(90deg,#c7e9d4,#a5dcb9)}

/* Подсказка (цвет задаётся JS из SLIDER_STYLE.hintColor) */
.sbp-hint{
  position:absolute;left:0;right:0;top:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  gap:8px;font-family:var(--font-display,sans-serif);
  font-size:15px;font-weight:700;
  pointer-events:none;transition:opacity .25s;
}
.sbp-hint.hidden{opacity:0}
.sbp-hint-arrows{display:flex;gap:1px;align-items:center}
.sbp-hint-arrows span{
  font-size:17px;opacity:.5;
  animation:sbp-pulse 1.5s ease-in-out infinite;
}
.sbp-hint-arrows span:nth-child(2){animation-delay:.18s}
.sbp-hint-arrows span:nth-child(3){animation-delay:.36s}
@keyframes sbp-pulse{
  0%,100%{opacity:.25;transform:translateX(0)} 50%{opacity:.9;transform:translateX(3px)}
}

.sbp-hint-success{
  position:absolute;left:0;right:0;top:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  gap:7px;font-family:var(--font-display,sans-serif);
  font-size:15px;font-weight:800;color:var(--green,#2e7d4f);
  pointer-events:none;opacity:0;transition:opacity .35s;
}
.sbp-hint-success.visible{opacity:1}

/* Ручка слайдера */
.sbp-handle{
  position:absolute;left:3px;top:50%;transform:translateY(-50%);
  width:calc(var(--sbp-slider-height,64px) - 12px);
  height:calc(var(--sbp-slider-height,64px) - 12px);
  background:var(--sbp-handle-color,var(--amber,#f5a50b));
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:grab;z-index:2;will-change:left;
  box-shadow:0 4px 16px rgba(var(--amber-rgb,245,165,11),.45);
  transition:box-shadow .2s,background .3s;
}
.sbp-handle:active{cursor:grabbing}
.sbp-handle.dragging{box-shadow:0 6px 24px rgba(var(--amber-rgb,245,165,11),.6)}
.sbp-handle svg{transition:opacity .3s;pointer-events:none}
.sbp-handle .icon-arrow{opacity:1}
.sbp-handle .icon-check{position:absolute;opacity:0}
.sbp-slider-container.success .sbp-handle{
  background:var(--green,#2e7d4f);cursor:default;
  box-shadow:0 4px 16px rgba(46,125,79,.4);
}
.sbp-slider-container.success .sbp-handle svg{stroke:#fff}
.sbp-slider-container.success .sbp-handle .icon-arrow{opacity:0}
.sbp-slider-container.success .sbp-handle .icon-check{opacity:1}

/* --- Кнопки мессенджеров --- */
.sbp-buttons{display:flex;flex-direction:column;gap:12px;margin-top:18px}

.sbp-btn{
  display:flex;align-items:center;border-radius:999px;
  overflow:hidden;text-decoration:none;min-height:60px;
  box-shadow:0 4px 14px rgba(35,28,18,.14);
  position:relative;
  filter:saturate(.22) brightness(.94);
  opacity:.62;
  pointer-events:none;
  transition:filter .55s ease,opacity .55s ease,
             transform .15s ease,box-shadow .15s ease;
}
.sbp-btn::after{
  content:'';position:absolute;inset:0;
  background:rgba(255,255,255,.18);border-radius:999px;
  pointer-events:none;transition:opacity .55s ease;
}
.sbp-btn.active{
  filter:saturate(1) brightness(1);
  opacity:1;pointer-events:auto;
  animation:sbp-pop .45s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.sbp-btn.active::after{opacity:0}
.sbp-btn.active:nth-child(1){animation-delay:0s}
.sbp-btn.active:nth-child(2){animation-delay:.08s}
.sbp-btn.active:nth-child(3){animation-delay:.16s}
@keyframes sbp-pop{
  0%{transform:scale(.97)} 60%{transform:scale(1.02)} 100%{transform:scale(1)}
}
.sbp-btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(35,28,18,.2)}
.sbp-btn:active{transform:translateY(0)}

/* Кнопка — ссылка, и типографика страницы может подчёркивать все <a>
   внутри контента (например, правило `.article a`). Специфичность здесь
   выше, чем у такого правила, поэтому подчёркивание не пролезает
   независимо от порядка подключения файлов. */
.sbp-wrap a.sbp-btn,
.sbp-wrap a.sbp-btn:hover,
.sbp-wrap a.sbp-btn:focus,
.sbp-wrap a.sbp-btn:visited{text-decoration:none}

.sbp-btn-icon{
  flex-shrink:0;width:66px;
  display:flex;align-items:center;justify-content:center;
  align-self:stretch;background:var(--btn-dark);
}
.sbp-btn-icon img{width:28px;height:28px;object-fit:contain;display:block}
.sbp-btn-label{
  flex:1;display:flex;align-items:center;
  padding:0 22px;background:var(--btn-light);
  align-self:stretch;
  font-family:var(--font-display,sans-serif);
  font-size:16px;font-weight:700;
  color:#fff;letter-spacing:-.01em;
}

.sbp-lock-hint{
  display:flex;align-items:center;justify-content:center;
  gap:6px;margin-top:12px;font-size:12.5px;color:var(--muted,#6e6558);
  transition:opacity .4s ease;
}
.sbp-lock-hint.hidden{opacity:0;pointer-events:none}

.sbp-security-note{
  display:flex;align-items:center;justify-content:center;
  gap:5px;margin-top:16px;font-size:11px;color:var(--off,#b8b0a2);
}

@media(max-width:480px){
  .sbp-wrap{padding:20px 14px 16px;border-radius:var(--r-sm,14px)}
  .sbp-btn-label{font-size:15px;padding:0 16px}
  .sbp-btn-icon{width:56px}
  .sbp-btn-icon img{width:25px;height:25px}
}