/* Cooper — усиление главного действия кабинета «Подключить устройство».
 *
 * Кнопку рисуют ДВА разных чанка: index-*.js (там есть data-onboarding)
 * и Subscription-*.js (там его нет — именно она видна на главном экране).
 * Поэтому цепляемся за оба варианта. Класс-комбинация ниже встречается
 * во всей сборке ровно 2 раза — это те самые две версии одной кнопки.
 *
 * Файл подмешивается nginx-ом кабинета (sub_filter), образ не пересобирается.
 * Откат: убрать монтирование custom/ из docker-compose.yml кабинета.
 */

/* Классы Tailwind вида rounded-[14px] и p-3.5 неудобно экранировать,
   поэтому сопоставляем подстроками атрибута class. */
:is(
  [data-onboarding='connect-devices'],
  button[class*='gap-3.5'][class*='rounded-[14px]'][class*='p-3.5'][class*='text-left']
) {
  position: relative !important;
  overflow: hidden !important; /* прячет углы вращающегося квадрата ::before */
  isolation: isolate;
  border: none !important;
  background: transparent !important;
  padding: 1rem 1.15rem !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 28px -10px rgba(47, 107, 255, 0.75) !important;
  animation: cooper-cta-pulse 2.4s ease-in-out infinite, cooper-cta-glow 2.8s ease-in-out infinite;
}

/* Вращающийся ореол по контуру: большой квадрат с коническим градиентом,
   который крутится под кнопкой; наружу видна только кромка. */
:is(
  [data-onboarding='connect-devices'],
  button[class*='gap-3.5'][class*='rounded-[14px]'][class*='p-3.5'][class*='text-left']
)::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220%;
  aspect-ratio: 1;
  margin-left: -110%;
  margin-top: -110%;
  background: conic-gradient(#2f6bff, #7b3ff2, #22d3ee, #f472b6, #2f6bff);
  animation: cooper-cta-spin 3.6s linear infinite;
  z-index: 0;
}

/* Внутренняя заливка поверх ореола — оставляет от него только рамку в 2px. */
:is(
  [data-onboarding='connect-devices'],
  button[class*='gap-3.5'][class*='rounded-[14px]'][class*='p-3.5'][class*='text-left']
)::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 14px;
  background-image: linear-gradient(135deg, #2f6bff 0%, #7b3ff2 100%);
  z-index: 1;
}

/* Содержимое кнопки — поверх обоих псевдоэлементов. */
:is(
  [data-onboarding='connect-devices'],
  button[class*='gap-3.5'][class*='rounded-[14px]'][class*='p-3.5'][class*='text-left']
) > * {
  position: relative;
  z-index: 2;
}

/* Плашка с иконкой: у неё инлайновый фон из акцента темы — перебиваем. */
:is(
  [data-onboarding='connect-devices'],
  button[class*='gap-3.5'][class*='rounded-[14px]'][class*='p-3.5'][class*='text-left']
) > div:first-child {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

:is(
  [data-onboarding='connect-devices'],
  button[class*='gap-3.5'][class*='rounded-[14px]'][class*='p-3.5'][class*='text-left']
) svg {
  color: #fff !important;
  stroke: #fff !important;
}

/* Весь текст внутри — белый: цвета темы на градиенте нечитаемы. */
:is(
  [data-onboarding='connect-devices'],
  button[class*='gap-3.5'][class*='rounded-[14px]'][class*='p-3.5'][class*='text-left']
) div {
  color: #fff !important;
}

/* Заголовок — крупнее и жирнее, он должен читаться как призыв. */
:is(
  [data-onboarding='connect-devices'],
  button[class*='gap-3.5'][class*='rounded-[14px]'][class*='p-3.5'][class*='text-left']
) .min-w-0 > div:first-child {
  font-size: 1.0625rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* Подпись «0 из 5 подключено» — приглушаем, чтобы не спорила с заголовком. */
:is(
  [data-onboarding='connect-devices'],
  button[class*='gap-3.5'][class*='rounded-[14px]'][class*='p-3.5'][class*='text-left']
) .min-w-0 > div:last-child {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 12px !important;
}

/* Точки-индикаторы устройств справа. */
:is(
  [data-onboarding='connect-devices'],
  button[class*='gap-3.5'][class*='rounded-[14px]'][class*='p-3.5'][class*='text-left']
) [class*='rounded-full'] {
  background-color: rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
}

@keyframes cooper-cta-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes cooper-cta-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025);
  }
}

@keyframes cooper-cta-glow {
  0%,
  100% {
    box-shadow: 0 12px 28px -10px rgba(47, 107, 255, 0.75);
  }
  50% {
    box-shadow: 0 16px 38px -8px rgba(123, 63, 242, 0.95);
  }
}

/* Уважаем системную настройку «уменьшить движение». */
@media (prefers-reduced-motion: reduce) {
  :is(
    [data-onboarding='connect-devices'],
    button[class*='gap-3.5'][class*='rounded-[14px]'][class*='p-3.5'][class*='text-left']
  ),
  :is(
    [data-onboarding='connect-devices'],
    button[class*='gap-3.5'][class*='rounded-[14px]'][class*='p-3.5'][class*='text-left']
  )::before {
    animation: none;
  }
}

/* --- Кнопка «Скопировать ссылку» на экране QR-кода (ставится скриптом custom.js) --- */

.cooper-copy-btn {
  margin-top: 0.75rem;
  display: block;
  width: 100%;
  max-width: 20rem;
  padding: 0.7rem 1rem;
  border: none;
  border-radius: 12px;
  background-image: linear-gradient(135deg, #2f6bff 0%, #7b3ff2 100%);
  color: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(47, 107, 255, 0.8);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.cooper-copy-btn:active {
  transform: scale(0.98);
  filter: brightness(0.95);
}

.cooper-copy-btn.is-done {
  background-image: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
}

.cooper-copy-btn.is-fail {
  background-image: linear-gradient(135deg, #dc2626 0%, #f97316 100%);
}