/* NeroLink final controls.
   Buttons: old NeroVPN style.
   OS selector: old NeroVPN style.
   Panel square around connect-card blocks: removed.
   No JS, no backend changes.
*/

/* ===== BUTTONS LIKE OLD NEROVPN ===== */

html body .btn,
html body button.btn,
html body a.btn {
  min-height: 48px !important;
  box-sizing: border-box !important;

  position: relative !important;
  overflow: hidden !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 44px 0 22px !important;

  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.13) !important;

  color: rgba(255,255,255,.94) !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  text-align: center !important;
  text-decoration: none !important;
  line-height: 1.1 !important;

  text-shadow: none !important;
  transform: none !important;
  filter: none !important;

  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .14s ease,
    color .18s ease,
    filter .18s ease !important;
}

html body .btn.full {
  width: 100% !important;
}

html body .btn::before,
html body button.btn::before,
html body a.btn::before {
  content: none !important;
  display: none !important;
}

html body .btn::after,
html body button.btn::after,
html body a.btn::after {
  content: "›" !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-52%) !important;

  color: rgba(255,255,255,.68) !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  pointer-events: none !important;
}

/* secondary gray old-style buttons */
html body .btn:not(.primary),
html body button.btn:not(.primary),
html body a.btn:not(.primary) {
  background:
    linear-gradient(180deg, rgba(74,78,101,.72) 0%, rgba(47,51,72,.74) 50%, rgba(35,38,58,.80) 100%) !important;

  border-color: rgba(255,255,255,.13) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 8px 18px rgba(0,0,0,.18) !important;
}

/* primary old-style gradient buttons */
html body .btn.primary,
html body button.btn.primary,
html body a.btn.primary {
  color: #ffffff !important;

  background:
    linear-gradient(90deg, #3d83ff 0%, #4f68ff 44%, #8a48ff 76%, #9d43ff 100%) !important;

  border-color: rgba(160,150,255,.38) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 10px 24px rgba(70,105,255,.20),
    0 0 20px rgba(120,75,255,.12) !important;
}

@media (hover: hover) and (pointer: fine) {
  html body .btn:not(.primary):hover,
  html body button.btn:not(.primary):hover,
  html body a.btn:not(.primary):hover {
    color: #ffffff !important;

    background:
      linear-gradient(90deg, #3d83ff 0%, #4f68ff 44%, #8a48ff 76%, #9d43ff 100%) !important;

    border-color: rgba(160,150,255,.44) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.14),
      0 8px 18px rgba(0,0,0,.18),
      0 0 18px rgba(95,110,255,.18) !important;

    transform: translateY(-1px) !important;
  }

  html body .btn.primary:hover,
  html body button.btn.primary:hover,
  html body a.btn.primary:hover {
    filter: brightness(1.04) saturate(1.04) !important;
    transform: translateY(-1px) !important;
  }
}

@media (hover: none), (pointer: coarse) {
  html body .btn:not(.primary):hover,
  html body button.btn:not(.primary):hover,
  html body a.btn:not(.primary):hover {
    background:
      linear-gradient(180deg, rgba(74,78,101,.72) 0%, rgba(47,51,72,.74) 50%, rgba(35,38,58,.80) 100%) !important;

    border-color: rgba(255,255,255,.13) !important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 -1px 0 rgba(0,0,0,.28),
      0 8px 18px rgba(0,0,0,.18) !important;

    transform: none !important;
    filter: none !important;
  }

  html body .btn:active,
  html body button.btn:active,
  html body a.btn:active {
    transform: translateY(1px) !important;
  }
}

/* ===== OS SELECTOR LIKE OLD NEROVPN ===== */

html body #connect .tabs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;

  width: 100% !important;
  box-sizing: border-box !important;

  padding: 8px !important;
  margin: 0 0 18px 0 !important;

  border-radius: 22px !important;
  background: rgba(31,34,50,.86) !important;
  border: 1px solid rgba(255,255,255,.08) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.045),
    0 8px 18px rgba(0,0,0,.18) !important;

  overflow: hidden !important;
}

html body #connect .tabs > .tab {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 10px !important;

  border-radius: 14px !important;
  border: 1px solid transparent !important;

  background: transparent !important;
  box-shadow: none !important;

  color: rgba(232,236,255,.56) !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: none !important;

  transform: none !important;
  filter: none !important;

  transition:
    background .16s ease,
    color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    transform .14s ease !important;
}

html body #connect .tabs > .tab::before,
html body #connect .tabs > .tab::after {
  content: none !important;
  display: none !important;
}

html body #connect .tabs > .tab.active {
  color: #ffffff !important;

  background: rgba(92,95,111,.78) !important;
  border-color: rgba(255,255,255,.10) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 6px 14px rgba(0,0,0,.14) !important;
}

@media (hover: hover) and (pointer: fine) {
  html body #connect .tabs > .tab:not(.active):hover {
    color: rgba(255,255,255,.88) !important;
    background: rgba(73,76,95,.48) !important;
    border-color: rgba(255,255,255,.08) !important;
    transform: translateY(-1px) !important;
  }
}

/* ===== REMOVE SHARP SQUARE AROUND TWO CONNECT BLOCKS ===== */

/* .panel is only the wrapper around two .connect-card blocks.
   Remove its sharp visible frame, keep display switching intact. */
html body #connect .panel,
html body #connect .panel.active {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* keep real rounded blocks */
html body #connect .connect-card {
  border-radius: 26px !important;
  overflow: hidden !important;
}

/* mobile */
@media (max-width: 560px) {
  html body #connect .tabs {
    gap: 7px !important;
    padding: 7px !important;
    border-radius: 21px !important;
  }

  html body #connect .tabs > .tab {
    min-height: 42px !important;
    padding: 0 8px !important;
    border-radius: 14px !important;
    font-size: 14px !important;
  }

  html body .btn,
  html body button.btn,
  html body a.btn {
    min-height: 48px !important;
    border-radius: 16px !important;
  }
}

/* === FIX OLD NEROVPN BUTTON LAYOUT V2 START === */

/* Левая карточка: раскладка кнопок как в старом NeroVPN/NeroLink */
html body .btns:has(#testBtn) {
  display: grid !important;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.55fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
}

/* Сбрасываем растягивание, которое раньше сломало раскладку */
html body .btns:has(#testBtn) > .btn,
html body .btns:has(#testBtn) > button.btn,
html body .btns:has(#testBtn) > a.btn {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

/* 1 ряд */
html body .btns:has(#testBtn) > :nth-child(1) {
  grid-column: 1 !important;
}

html body .btns:has(#testBtn) > :nth-child(2) {
  grid-column: 2 !important;
}

/* 2 ряд — покупка на всю ширину */
html body .btns:has(#testBtn) > :nth-child(3) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* 3 ряд */
html body .btns:has(#testBtn) > :nth-child(4) {
  grid-column: 1 !important;
}

html body .btns:has(#testBtn) > :nth-child(5) {
  grid-column: 2 !important;
}

/* Внутри install-карточек кнопки не должны насильно становиться в общий старый layout */
html body #connect .connect-card .btns {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

html body #connect .connect-card .btns > .btn {
  width: auto !important;
  flex: 1 1 160px !important;
}

html body #connect .connect-card .btn.full {
  width: 100% !important;
  flex: 1 1 100% !important;
}

/* Убираем именно острый квадрат вокруг двух блоков установки */
html body #connect .panel,
html body #connect .panel.active,
html body #connect .panel#android,
html body #connect .panel#ios,
html body #connect .panel#windows {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

html body #connect .panel::before,
html body #connect .panel::after,
html body #connect .panel.active::before,
html body #connect .panel.active::after {
  content: none !important;
  display: none !important;
}

/* Но сами округлые connect-card оставляем */
html body #connect .connect-card {
  border-radius: 26px !important;
  overflow: hidden !important;
}

/* На узких экранах оставляем компактно, но без каши */
@media (max-width: 560px) {
  html body .btns:has(#testBtn) {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.28fr) !important;
    gap: 10px !important;
  }

  html body .btns:has(#testBtn) > .btn,
  html body .btns:has(#testBtn) > button.btn,
  html body .btns:has(#testBtn) > a.btn {
    min-height: 48px !important;
    padding-left: 14px !important;
    padding-right: 34px !important;
    font-size: 14px !important;
  }

  html body .btns:has(#testBtn) > :nth-child(4),
  html body .btns:has(#testBtn) > :nth-child(5) {
    font-size: 13px !important;
  }
}

/* === FIX OLD NEROVPN BUTTON LAYOUT V2 END === */

/* === FORCE ALL CABINET BUTTONS FULL WIDTH V3 START === */

/* Убиваем прошлые grid/row раскладки кнопок */
html body .btns,
html body .btns:has(#testBtn),
html body #connect .connect-card .btns {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  gap: 10px !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

/* Все обычные кнопки кабинета — строго на всю ширину своего блока */
html body .btn,
html body button.btn,
html body a.btn,
html body .btns > .btn,
html body .btns > button.btn,
html body .btns > a.btn,
html body #connect .connect-card .btns > .btn,
html body #connect .connect-card .btns > button.btn,
html body #connect .connect-card .btns > a.btn {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  grid-column: auto !important;
  margin: 0 !important;
}

/* Убираем конкретно прошлую раскладку 1/2/полная/1/2 */
html body .btns:has(#testBtn) > :nth-child(1),
html body .btns:has(#testBtn) > :nth-child(2),
html body .btns:has(#testBtn) > :nth-child(3),
html body .btns:has(#testBtn) > :nth-child(4),
html body .btns:has(#testBtn) > :nth-child(5) {
  grid-column: auto !important;
  width: 100% !important;
}

/* OS selector НЕ трогаем: это .tabs/.tab, не .btn */
html body #connect .tabs,
html body #connect .tabs > .tab {
  width: auto !important;
}

/* Острый квадрат вокруг двух install-блоков убираем, округлые карточки оставляем */
html body #connect .panel,
html body #connect .panel.active,
html body #connect .panel#android,
html body #connect .panel#ios,
html body #connect .panel#windows {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

html body #connect .panel::before,
html body #connect .panel::after {
  content: none !important;
  display: none !important;
}

/* === FORCE ALL CABINET BUTTONS FULL WIDTH V3 END === */

/* === FIX AUTO SETUP BUTTON GAP V1 START === */

/* В блоке "Автоматическая настройка" кнопки лежат напрямую в .connect-card,
   поэтому даём отступ между соседними .btn внутри connect-card. */
html body #connect .connect-card > .btn + .btn,
html body #connect .connect-card > button.btn + button.btn,
html body #connect .connect-card > a.btn + a.btn,
html body #connect .connect-card > .btn + button.btn,
html body #connect .connect-card > .btn + a.btn,
html body #connect .connect-card > button.btn + .btn,
html body #connect .connect-card > a.btn + .btn {
  margin-top: 12px !important;
}

/* Если где-то кнопки идут после текста без .btns — тоже держим нормальный воздух */
html body #connect .connect-card > p + .btn,
html body #connect .connect-card > p + button.btn,
html body #connect .connect-card > p + a.btn {
  margin-top: 16px !important;
}

/* Убираем возможные слипания от старых margin reset */
html body #connect .connect-card > .btn {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
}

/* === FIX AUTO SETUP BUTTON GAP V1 END === */

/* === TOP BADGE ACTIVE/INACTIVE COLOR V1 START === */

html body #topBadge {
  border-radius: 999px !important;
  font-weight: 800 !important;
  padding: 8px 14px !important;
  transition:
    color .18s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

html body #topBadge.top-badge-active {
  color: #67f0b1 !important;
  background: rgba(24, 96, 68, .28) !important;
  border: 1px solid rgba(103, 240, 177, .34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 18px rgba(103, 240, 177, .14) !important;
}

html body #topBadge.top-badge-inactive {
  color: #ff6f86 !important;
  background: rgba(120, 38, 54, .28) !important;
  border: 1px solid rgba(255, 111, 134, .36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 18px rgba(255, 111, 134, .14) !important;
}

/* fallback пока JS не успел поставить класс */
html body #topBadge:not(.top-badge-active):not(.top-badge-inactive) {
  color: rgba(255,255,255,.86) !important;
}

/* === TOP BADGE ACTIVE/INACTIVE COLOR V1 END === */

/* === OS SELECTOR STAT CARD BACKGROUND V1 START === */

/* Фон селектора ОС как у карточек статуса / дней / трафика */
html body #connect .tabs {
  background:
    linear-gradient(180deg, rgba(30, 35, 68, .78) 0%, rgba(22, 26, 54, .82) 52%, rgba(18, 22, 48, .86) 100%) !important;

  border: 1px solid rgba(120, 132, 178, .18) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 10px 22px rgba(0,0,0,.18) !important;
}

/* Активную вкладку оставляем как в старом NeroVPN, но чуть мягче на этом фоне */
html body #connect .tabs > .tab.active {
  background:
    linear-gradient(180deg, rgba(92, 96, 118, .78) 0%, rgba(70, 73, 94, .82) 100%) !important;

  border-color: rgba(255,255,255,.12) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 6px 14px rgba(0,0,0,.16) !important;
}

/* Неактивные вкладки приглушённые */
html body #connect .tabs > .tab:not(.active) {
  color: rgba(232,236,255,.50) !important;
  background: transparent !important;
}

/* === OS SELECTOR STAT CARD BACKGROUND V1 END === */

/* === BUTTON FONT WEIGHT FIX V1 START === */

/* Кнопки делаем менее жирными, но оставляем читаемыми */
html body .btn,
html body button.btn,
html body a.btn {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* Primary тоже не жирнее остальных */
html body .btn.primary,
html body button.btn.primary,
html body a.btn.primary {
  font-weight: 600 !important;
}

/* === BUTTON FONT WEIGHT FIX V1 END === */