.mip-hover-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  z-index: 10; /* make sure wrapper is above surrounding content */
}

.mip-hover-card {
  display: none;
  position: absolute;
  top: 100%; /* place below trigger */
  left: 0;
  background: #fff;
  padding: 20px;
  width: 440px;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  z-index: 99999; /* higher than anything else on the page */
}

/* When shown */
.mip-hover-wrapper:hover .mip-hover-card {
  display: block;
}


.mip-hover-card.popup-top {
  bottom: calc(100% + 5px); /* 5px above avatar */
}

.mip-hover-card.popup-bottom {
  top: calc(100% + 5px); /* 5px below avatar */
}

.hover-name {
 border-bottom: 0px solid #e5e5e5 !important; 
 margin-bottom:0px !important;
 padding-bottom:0px !important;
}

.hover-inner {
    display: flex;
    gap: 15px;
}


.hover-right {
    flex: 1;
    font-size: 14px;
    text-align: left !important;
}

.hover-buttons {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

.hover-btn {
  display: inline-block;
  background: #0073aa;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  max-width: 100%;
}
.hover-btn:hover {
  background: #005d8c;
}

.profile-link-btn {
    background-color: #fff;
    color: #333;
    border: 1px solid #e5e5e5;
    padding: 20px 20px;
     letter-spacing: 0.1px !important;
    font-family: inherit; 
    font-weight: 700 !important;
    font-size:15px;
    border-radius: 6px;
    cursor: pointer;
    width:100%;
    transition: background-color 0.2s;
    margin-top: 15px;
    color: #333;
}
/* Hover/focus for default */
.profile-link-btn:hover,
.profile-link-btn:focus {
    background-color: #f5f5f5;
     border: 1px solid #e5e5e5;
     font-weight: bold !important;
    color: #222;
}


.follow-btn {
    background-color: #ffdd7e;
    color: #333;
    border: none;
    padding: 20px 20px;
     letter-spacing: 0.1px !important;
    font-family: inherit; 
    font-weight: 700 !important;
    font-size:15px;
    border-radius: 6px;
    cursor: pointer;
    width:100%;
    transition: background-color 0.2s;
    margin-top: 15px;
    color: #333;
}
/* Hover/focus for default */
.follow-btn:hover,
.follow-btn:focus {
    background-color: #fcd665;
     font-weight: bold !important;
    color: #222;
}

/* Following style */
.follow-btn.following {
    background-color: #e5e5e5; /* light green */
    letter-spacing: 1px;
    font-weight: bold !important;
    color: #000;
}

/* Hover/focus for following */
.follow-btn.following:hover,
.follow-btn.following:focus {
    background-color: #eeeeee; /* slightly darker green */
     font-weight: bold !important;
    color: #111;
}

.mip-hover-floating {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  padding: 20px;
}

.popup-top .arrow,
.popup-bottom .arrow {
  /* optional styling for arrow flipping */
}

.mip-hover-card.popup-top {
  bottom: auto;
}

.mip-hover-card.popup-bottom {
  top: auto;
}