/* ==========================================================================
   LUNA · GLASS BUTTONS
   Стиль «стекло» в духе iOS: тонкая светлая обводка, прозрачное тело,
   размытие фона за кнопкой, блик сверху, мягкая тень снизу.
   Подключается ПОСЛЕ остальных CSS — перекрывает старые стили кнопок.
   Движение при наведении — по эталону NEXUS.html: translateY(-2px),
   ease-out cubic-bezier(.16,1,.3,1).
   ========================================================================== */

:root{
  --glass-blur: 26px;
  --glass-sat: 165%;
  --glass-border: rgba(255,255,255,.20);
  --glass-border-strong: rgba(255,255,255,.38);
  --glass-body-top: rgba(255,255,255,.13);
  --glass-body-bottom: rgba(255,255,255,.035);
  --glass-body-top-hover: rgba(255,255,255,.22);
  --glass-body-bottom-hover: rgba(255,255,255,.08);
  --glass-inner-top: inset 0 1px 0 rgba(255,255,255,.28);
  --glass-inner-bottom: inset 0 -1px 0 rgba(0,0,0,.34);
  --glass-drop: 0 16px 38px -22px rgba(0,0,0,.9);
  --glass-ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- 1. Общая основа: и главная, и профиль, и документы ---------- */

.button,
.btn,
.legal-button{
  position: relative !important;
  isolation: isolate;
  border-radius: 999px !important;               /* капсула, как в iOS */
  border: 1px solid var(--glass-border) !important;
  color: #f4f7ff !important;
  cursor: pointer;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) !important;
  box-shadow: var(--glass-inner-top), var(--glass-inner-bottom), var(--glass-drop) !important;
  transition:
    transform .5s var(--glass-ease),
    border-color .45s var(--glass-ease),
    background-color .45s var(--glass-ease),
    box-shadow .45s var(--glass-ease),
    color .3s !important;
  will-change: transform;
}

/* Перебиваем точечные правила вроде .button.hero-big (у них выше специфичность) */
.button.hero-big,
.button.primary,
.button.secondary,
.btn,
.legal-button{
  border-radius: 999px !important;
}

/* блик: верхняя кромка светлее, к середине стекло «растворяется» */
.button,
.btn,
.legal-button{
  background-color: rgba(255,255,255,.055) !important;
  background-image: linear-gradient(
    180deg,
    var(--glass-body-top) 0%,
    var(--glass-body-bottom) 46%,
    rgba(255,255,255,0) 62%
  ) !important;
}

/* ---------- 2. Главная кнопка (синяя) — стекло с акцентом ---------- */

.button.primary,
.button.primary.hero-big,
.btn.primary{
  color: #ffffff !important;
  border-color: rgba(255,255,255,.32) !important;
  background-color: rgba(var(--rgb),.55) !important;
  background-image: linear-gradient(
    180deg,
    rgba(255,255,255,.26) 0%,
    rgba(255,255,255,.06) 52%,
    rgba(255,255,255,0) 70%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 18px 44px -18px rgba(var(--rgb),.78) !important;
}

/* ---------- 3. Вторичная кнопка — чистое прозрачное стекло ---------- */

.button.secondary,
.button.secondary.hero-big,
.btn.outline,
.btn.secondary,
.legal-button{
  color: #eaeef8 !important;
  border-color: var(--glass-border) !important;
  background-color: rgba(255,255,255,.045) !important;
}

/* legal-button — базовая геометрия (в документах это ссылка) */
.legal-button{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 24px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .06em;
  text-decoration: none !important;
  font-family: inherit;
}

/* Профиль: у .profile-page .btn радиус 14px с !important — перебиваем по специфичности */
.profile-page .btn,
.profile-page .btn.btn,
.profile-page .button,
.profile-page .button.button,
#partner-content .btn{
  border-radius: 999px !important;
}

/* ---------- 4. Наведение: светлее, обводка ярче, подъём 2px (как в NEXUS) ---------- */

.button:hover:not(:disabled),
.btn:hover:not(:disabled),
.legal-button:hover{
  transform: translateY(-2px) !important;
  border-color: var(--glass-border-strong) !important;
  background-color: rgba(255,255,255,.10) !important;
  background-image: linear-gradient(
    180deg,
    var(--glass-body-top-hover) 0%,
    var(--glass-body-bottom-hover) 48%,
    rgba(255,255,255,0) 66%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(0,0,0,.30),
    0 22px 46px -22px rgba(0,0,0,.95) !important;
}

.button.primary:hover:not(:disabled),
.btn.primary:hover:not(:disabled){
  background-color: rgba(var(--rgb),.70) !important;
  border-color: rgba(255,255,255,.46) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 24px 54px -18px rgba(var(--rgb),.9) !important;
}

/* ---------- 5. Нажатие ---------- */

.button:active:not(:disabled),
.btn:active:not(:disabled),
.legal-button:active{
  transform: translateY(0) scale(.985) !important;
  transition-duration: .12s !important;
}

/* ---------- 6. Клавиатура: видимая рамка фокуса ---------- */

.button:focus-visible,
.btn:focus-visible,
.legal-button:focus-visible{
  outline: 2px solid rgba(var(--rgb),.9) !important;
  outline-offset: 3px !important;
}

/* ---------- 7. Недоступная кнопка ---------- */

.button:disabled,
.btn:disabled{
  opacity: .42 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ---------- 8. Иконки внутри стекла — чуть прозрачнее ---------- */

.button svg,
.btn svg{
  opacity: .92;
  transition: opacity .3s var(--glass-ease);
}

.button:hover:not(:disabled) svg,
.btn:hover:not(:disabled) svg{
  opacity: 1;
}

/* ---------- 9. Уважаем настройку «меньше движения» ---------- */

@media (prefers-reduced-motion: reduce){
  .button, .btn, .legal-button{
    transition: border-color .2s, background-color .2s, box-shadow .2s !important;
  }
  .button:hover:not(:disabled), .btn:hover:not(:disabled), .legal-button:hover{
    transform: none !important;
  }
}