/* ============================
   Device visibility utilities
   ============================ */
@media (max-width: 767.98px) {
  .widget_bluubanana_friends_widget.bluubanana-hide-mobile,
  .widget_bluubanana_members_widget.bluubanana-hide-mobile,
  .widget_bluubanana_followers_widget.bluubanana-hide-mobile,
  .widget_bluubanana_following_widget.bluubanana-hide-mobile,
  .widget_bluubanana_recent_visitors_widget.bluubanana-hide-mobile { display: none; }
}
@media (min-width: 768px) and (max-width: 1024.98px) {
  .widget_bluubanana_friends_widget.bluubanana-hide-tablet,
  .widget_bluubanana_members_widget.bluubanana-hide-tablet,
  .widget_bluubanana_followers_widget.bluubanana-hide-tablet,
  .widget_bluubanana_following_widget.bluubanana-hide-tablet,
  .widget_bluubanana_recent_visitors_widget.bluubanana-hide-tablet { display: none; }
}

/* ============================
   Title row + "See all" link
   ============================ */
.bluubanana-title-row { position: relative; margin-bottom: 8px; }
.bluubanana-title-row .widget-title { margin: 0; }
.bluubanana-see-all {
  position: absolute; right: 0; top: 26%; transform: translateY(-50%);
  font-size: 12px; color: #555; text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.bluubanana-arrow { font-size: 12px; line-height: 1; }

/* ============================
   Members widget specific bg
   ============================ */
.widget_bluubanana_members_widget { background-color: #ecfef3; }

/* ============================
   List widgets (Friends, Members, Followers, Following)
   ============================ */
.widget_bluubanana_friends_widget .item-list,
.widget_bluubanana_members_widget .item-list,
.widget_bluubanana_followers_widget .item-list,
.widget_bluubanana_following_widget .item-list { list-style: none; margin: 0; padding: 0; }

.widget_bluubanana_friends_widget  .friend-entry,
.widget_bluubanana_members_widget  .member-entry,
.widget_bluubanana_followers_widget .follower-entry,
.widget_bluubanana_following_widget .following-entry { display: flex; align-items: center; gap: 10px; }

.widget_bluubanana_following_widget .following-entry { margin-bottom: 10px; }

.bluubanana-friends-avatar-wrapper,
.bluubanana-members-avatar-wrapper,
.bluubanana-followers-avatar-wrapper,
.bluubanana-following-avatar-wrapper { position: relative; display: inline-block; flex: 0 0 auto; }

.bluubanana-friends-avatar,
.bluubanana-members-avatar,
.bluubanana-followers-avatar,
.bluubanana-following-avatar { width: 45px; height: 45px; border-radius: 12px; object-fit: cover; display: block; }

.widget_bluubanana_friends_widget  .item-name,
.widget_bluubanana_members_widget  .item-name,
.widget_bluubanana_followers_widget .item-name,
.widget_bluubanana_following_widget .item-name {
  font-size: 14px; color: #333; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.widget_bluubanana_friends_widget  .bluubanana-friends-presence .member-status,
.widget_bluubanana_members_widget  .bluubanana-members-presence .member-status,
.widget_bluubanana_followers_widget .bluubanana-followers-presence .member-status,
.widget_bluubanana_following_widget .bluubanana-following-presence .member-status {
  position: absolute; right: -3px; top: 36px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff;
}
.widget_bluubanana_friends_widget  .bluubanana-friends-presence .member-status.online,
.widget_bluubanana_members_widget  .bluubanana-members-presence .member-status.online,
.widget_bluubanana_followers_widget .bluubanana-followers-presence .member-status.online,
.widget_bluubanana_following_widget .bluubanana-following-presence .member-status.online { background-color: #28a745; }

/* ============================
   Utility
   ============================ */
.item { min-width: 0; }

/* ======================================================================
   RECENT VISITORS WIDGET (SIDEBAR): CUSTOM CAROUSEL (no Splide)
   - Avatars 45×45 on all devices
   - Items visible: 4 (mobile), 6 (tablet), 4 (desktop)
   - Single-row carousel (no wrap)
   ====================================================================== */

/* Static fallback (when < 4 visitors) */
.widget_bluubanana_recent_visitors_widget .bb-recent-visitors-static {
  display: flex; gap: 10px; justify-content: flex-start; align-items: center;
}

/* Avatar wrapper + avatar (fixed 45×45 like other widgets) */
.widget_bluubanana_recent_visitors_widget .bluubanana-widget-avatar-wrapper {
  position: relative; display: inline-block; width: 45px; height: 45px;
  border-radius: 12px; overflow: visible; background: #f6f7f9;
}
.widget_bluubanana_recent_visitors_widget .bluubanana-widget-avatar {
  width: 45px; height: 45px; background-size: cover; background-position: center; border-radius: 12px;
  margin: auto; display: block; user-select: none; pointer-events: none;
}

/* Presence dot (match Followers: 45px avatar -> top:36px) */
.widget_bluubanana_recent_visitors_widget .bluubanana-widget-presence .member-status.online {
  background-color: #28a745; border: 2px solid #fff; border-radius: 50%;
  width: 12px; height: 12px; position: absolute; top: 36px; right: -3px; display: block; z-index: 1;
}

/* Carousel structure */
.widget_bluubanana_recent_visitors_widget [id^="bluubanana-visitor-carousel-"] { position: relative; }
.widget_bluubanana_recent_visitors_widget [id^="bluubanana-visitor-carousel-"] .bluubanana-visitor-viewport { overflow: hidden; width: 100%; }
.widget_bluubanana_recent_visitors_widget [id^="bluubanana-visitor-carousel-"] .bluubanana-visitor-track {
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; align-items: stretch;
  will-change: transform; user-select: none; cursor: grab; touch-action: pan-y;
}
.widget_bluubanana_recent_visitors_widget [id^="bluubanana-visitor-carousel-"] .bluubanana-visitor-track.bluubanana-visitor-dragging { cursor: grabbing; }

.widget_bluubanana_recent_visitors_widget [id^="bluubanana-visitor-carousel-"] .bluubanana-visitor-slide {
  display: block; flex: 0 0 auto; -webkit-user-drag: none;
  /* width is set per breakpoint to control visible count */
}

/* Visible count per breakpoint (gap is 10px between slides) */
@media (max-width: 767.98px) { /* 4 visible on mobile: 3 gaps -> 30px */
  .widget_bluubanana_recent_visitors_widget [id^="bluubanana-visitor-carousel-"] .bluubanana-visitor-slide {
    width: calc((100% - 30px) / 4);
  }
}
@media (min-width: 768px) and (max-width: 1024.98px) { /* 6 visible on tablet: 5 gaps -> 50px */
  .widget_bluubanana_recent_visitors_widget [id^="bluubanana-visitor-carousel-"] .bluubanana-visitor-slide {
    width: calc((100% - 50px) / 6);
  }
}
@media (min-width: 1025px) { /* 4 visible on desktop: 3 gaps -> 30px */
  .widget_bluubanana_recent_visitors_widget [id^="bluubanana-visitor-carousel-"] .bluubanana-visitor-slide {
    width: calc((100% - 30px) / 4);
  }
}

/* Center the fixed 45px avatar box within the responsive slide width */
.widget_bluubanana_recent_visitors_widget [id^="bluubanana-visitor-carousel-"] .bluubanana-visitor-slide .bluubanana-widget-avatar-wrapper {
  margin-left: auto; margin-right: auto;
}

/* Touch/drag niceties */
.widget_bluubanana_recent_visitors_widget [id^="bluubanana-visitor-carousel-"] .bluubanana-visitor-slide,
.widget_bluubanana_recent_visitors_widget [id^="bluubanana-visitor-carousel-"] .bluubanana-visitor-slide * {
  -webkit-user-drag: none; user-select: none; -webkit-tap-highlight-color: transparent;
}