/* FIT100 Running — bloqueio final do perfil público. */

/* Seguidores / Seguindo no mesmo padrão nas duas telas: dois blocos com os mesmos riscos verticais. */
html body #root main[data-athlete-profile-approved]
.fit-profile-hero div:has(> button[aria-label="Ver seguidores"]) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 220px !important;
  max-width: 220px !important;
  min-height: 48px !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

html body #root main[data-athlete-profile-approved]
.fit-profile-hero div:has(> button[aria-label="Ver seguidores"]) > button {
  display: flex !important;
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 2px 12px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Dois riscos: um antes de Seguidores e outro entre Seguidores / Seguindo. */
html body #root main[data-athlete-profile-approved]
.fit-profile-hero button[aria-label="Ver seguidores"],
html body #root main[data-athlete-profile-approved]
.fit-profile-hero button[aria-label="Ver quem este atleta segue"] {
  border-left: 1px solid #dce6f0 !important;
}

/* Perfil próprio — seguidores/seguindo clonados do perfil do atleta.
   Mantém somente estrutura visual: posição, tamanho, tipografia e os mesmos riscos. */
html body #root [data-fit100-premium-app]
section:has([class*="h-[118px]"][class*="w-[118px]"])
.grid.grid-cols-3.border-y {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 220px !important;
  max-width: 220px !important;
  min-height: 48px !important;
  margin: 14px auto 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

html body #root [data-fit100-premium-app]
section:has([class*="h-[118px]"][class*="w-[118px]"])
.grid.grid-cols-3.border-y > div:first-child {
  display: none !important;
}

html body #root [data-fit100-premium-app]
section:has([class*="h-[118px]"][class*="w-[118px]"])
.grid.grid-cols-3.border-y > div:nth-child(2),
html body #root [data-fit100-premium-app]
section:has([class*="h-[118px]"][class*="w-[118px]"])
.grid.grid-cols-3.border-y > div:nth-child(3) {
  display: flex !important;
  width: 100% !important;
  height: 48px !important;
  margin: 0 !important;
  padding: 2px 12px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  border: 0 !important;
  background: transparent !important;
  border-left: 1px solid #dce6f0 !important;
}

html body #root [data-fit100-premium-app]
section:has([class*="h-[118px]"][class*="w-[118px]"])
.grid.grid-cols-3.border-y > div:nth-child(2) strong,
html body #root [data-fit100-premium-app]
section:has([class*="h-[118px]"][class*="w-[118px]"])
.grid.grid-cols-3.border-y > div:nth-child(3) strong {
  display: block !important;
  color: #071426 !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
}

html body #root [data-fit100-premium-app]
section:has([class*="h-[118px]"][class*="w-[118px]"])
.grid.grid-cols-3.border-y > div:nth-child(2) span,
html body #root [data-fit100-premium-app]
section:has([class*="h-[118px]"][class*="w-[118px]"])
.grid.grid-cols-3.border-y > div:nth-child(3) span {
  display: block !important;
  color: #718096 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

/* Seguir + Compartilhar perfil sempre lado a lado para quem visita outro atleta. */
html body #root main[data-athlete-profile-approved]
.fit-profile-hero > .mt-5:has(> button + button) {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

html body #root main[data-athlete-profile-approved]
.fit-profile-hero > .mt-5:has(> button + button) > button {
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  margin: 0 !important;
  border-radius: 15px !important;
  transform: none !important;
  white-space: nowrap !important;
}

/* País do atleta — compacto, premium e sem linhas laterais. */
html body #root main[data-athlete-profile-approved] .fit-public-country-row {
  display: flex !important;
  align-items: center !important;
  width: fit-content !important;
  min-height: 22px !important;
  margin-top: 6px !important;
  gap: 7px !important;
  color: #52657b !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}

html body #root main[data-athlete-profile-approved] .fit-public-country-flag {
  display: inline-flex !important;
  width: 23px !important;
  height: 17px !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-radius: 3px !important;
  background: #fff !important;
  box-shadow: 0 0 0 1px rgba(7,20,38,.08), 0 2px 5px rgba(7,20,38,.06) !important;
  font-size: 18px !important;
  line-height: 17px !important;
}

@media (max-width: 390px) {
  html body #root main[data-athlete-profile-approved]
  .fit-profile-hero > .mt-5:has(> button + button) {
    gap: 8px !important;
  }

  html body #root main[data-athlete-profile-approved]
  .fit-profile-hero > .mt-5:has(> button + button) > button {
    height: 44px !important;
    font-size: 11px !important;
  }
}

/* =========================================================
   APROVADO — Seguidores / Seguindo com UM único divisor.
   Remove qualquer borda antiga e desenha somente a linha central,
   alta o suficiente para separar número + legenda.
   ========================================================= */

/* Perfil público / tela Atleta */
html body #root main[data-athlete-profile-approved]
.fit-profile-hero div:has(> button[aria-label="Ver seguidores"]) {
  position: relative !important;
}

html body #root main[data-athlete-profile-approved]
.fit-profile-hero div:has(> button[aria-label="Ver seguidores"]) > button {
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

html body #root main[data-athlete-profile-approved]
.fit-profile-hero div:has(> button[aria-label="Ver seguidores"]) > button::before,
html body #root main[data-athlete-profile-approved]
.fit-profile-hero div:has(> button[aria-label="Ver seguidores"]) > button::after {
  content: none !important;
  display: none !important;
}

html body #root main[data-athlete-profile-approved]
.fit-profile-hero div:has(> button[aria-label="Ver seguidores"])::before {
  content: none !important;
  display: none !important;
}

html body #root main[data-athlete-profile-approved]
.fit-profile-hero div:has(> button[aria-label="Ver seguidores"])::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  height: auto !important;
  background: #dce6f0 !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}

/* Perfil próprio / tela Corredor */
html body #root [data-fit100-premium-app]
section:has([class*="h-[118px]"][class*="w-[118px]"])
.grid.grid-cols-3.border-y {
  position: relative !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

html body #root [data-fit100-premium-app]
section:has([class*="h-[118px]"][class*="w-[118px]"])
.grid.grid-cols-3.border-y > div:nth-child(2),
html body #root [data-fit100-premium-app]
section:has([class*="h-[118px]"][class*="w-[118px]"])
.grid.grid-cols-3.border-y > div:nth-child(3) {
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

html body #root [data-fit100-premium-app]
section:has([class*="h-[118px]"][class*="w-[118px]"])
.grid.grid-cols-3.border-y > div::before,
html body #root [data-fit100-premium-app]
section:has([class*="h-[118px]"][class*="w-[118px]"])
.grid.grid-cols-3.border-y > div::after {
  content: none !important;
  display: none !important;
}

html body #root [data-fit100-premium-app]
section:has([class*="h-[118px]"][class*="w-[118px]"])
.grid.grid-cols-3.border-y::before {
  content: none !important;
  display: none !important;
}

html body #root [data-fit100-premium-app]
section:has([class*="h-[118px]"][class*="w-[118px]"])
.grid.grid-cols-3.border-y::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  height: auto !important;
  background: #dce6f0 !important;
  transform: translateX(-50%) !important;
  pointer-events: none !important;
}