/* ===============================
   SHARED: TEXT TRUNCATION
   =============================== */

/* Stack name on top, city below (same style) */
.bluubanana-visitor-card .visitor-meta{
  display:flex;
  flex-direction:column;
  gap:0;
  min-width:0; /* keeps ellipsis working */
}

.bluubanana-visitor-card .visitor-name,
.bluubanana-visitor-card .visitor-city{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:inherit;
  color:inherit;
}

/* ===============================
   PROFILE VISITORS TAB / PAGE
   =============================== */

.bluubanana-visitors-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Let pagination span full row inside the grid (only the new-style pager) */
.bluubanana-visitors-grid .visitors-pagination.new-style{
  flex:0 0 100%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  margin-top:28px;
}

.bluubanana-user-visitors .item-body-inner{
  border:1px solid var(--bb-content-border-color);
  border-radius:var(--bb-block-radius);
  background:var(--bb-content-background-color);
  padding:20px;
  margin-top:10px;
}

.bluubanana-user-visitors #subnav{margin-bottom:40px}

/* Two-per-row cards inside the grid */
.bluubanana-visitors-grid .bluubanana-visitor-card{
  width:calc(50% - 4px);
  box-sizing:border-box;
  display:flex;
  align-items:center;
  padding:12px;
  border:.8px solid #cccccc91;
  border-radius:8px;
  background:#fff;
  position:relative;
}

@media (max-width:768px){
  .bluubanana-visitors-grid .bluubanana-visitor-card{width:100%}
}

.visitor-avatar{
  flex:0 0 auto;
  margin-right:12px;
  display:flex;
  align-items:center;
}

.bluubanana-visitor-card .visitor-avatar img,
.bluubanana-recent-avatar{
  width:60px;
  height:60px;
  border-radius:8px;
  object-fit:cover;
  background-size:cover;
  background-position:center;
  user-select:none;
  pointer-events:none;
  display:block;
}

/* Avatar wrapper + presence dot */
.bluubanana-profiletab-avatar-wrapper{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bluubanana-profiletab-presence .member-status.online{
  background:#28a745;
  border:2px solid #fff;
  border-radius:50%;
  width:12px;
  height:12px;
  position:absolute;
  top:52px;
  right:-3px;
}

/* ===============================
   CARD ACTIONS + POPOVER
   =============================== */

.visitor-actions{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-left:auto;
}

/* Ellipsis trigger */
.visitor-ellipsis{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  cursor:pointer;
  background:transparent;
}
.visitor-ellipsis-icon{
  width:18px;
  height:18px;
  fill:#444;
  pointer-events:none;
}

/* Popover sits to the LEFT of ellipsis; switch to left: calc(100% + 8px) to place on right */
.visitor-popover{
  display:none;
  position:absolute;
  top:50%;
  right:calc(100% + 8px);
  transform:translateY(-50%);
  background:#fff;
  border:1px solid #ddd;
  border-radius:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  z-index:2000;
  min-width:180px;
  max-height:50vh; /* scroll inside if tall */
  overflow:auto;
  padding:8px 12px;              /* moved from removed .visitor-popover-inner */
}

/* Action link with icon */
.visitor-action-link{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  text-decoration:none;
  font-size:14px;
  color:#333;
  border-radius:6px;
}
.visitor-action-link:hover{
  background:#f5f5f5;
  color:#333;
}
.visitor-action-icon{
  width:16px;
  height:16px;
  fill:#666;
  flex-shrink:0;
}

/* ===============================
   NEW STYLE PAGINATION (Visitors Tab)
   =============================== */

.bluubanana-user-visitors .visitors-pagination.new-style{
  display:grid;
  grid-template-columns:48px auto 48px; /* left | counter | right */
  align-items:center;
  justify-items:center;
  gap:16px;
  padding:20px 0;
}

/* Fixed column placement so the counter stays centered */
.bluubanana-user-visitors .visitors-pagination.new-style .arrow-left{  grid-column:1; }
.bluubanana-user-visitors .visitors-pagination.new-style .page-counter{ grid-column:2; }
.bluubanana-user-visitors .visitors-pagination.new-style .arrow-right{ grid-column:3; }

/* Arrows (always <a>) */
.bluubanana-user-visitors .visitors-pagination.new-style .page-btn{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  background:#f9f9fb; border-radius:12%;
  text-decoration:none; transition:transform .08s ease;
}
.bluubanana-user-visitors .visitors-pagination.new-style .page-btn svg{width:26px;height:26px}
.bluubanana-user-visitors .visitors-pagination.new-style .page-btn:active svg{transform:scale(.7)}
.bluubanana-user-visitors .visitors-pagination.new-style .page-btn svg path{
  stroke:#663399; stroke-width:2.2; fill:none; stroke-linecap:round;
}

/* Spacer state: invisible, still occupies space (prevents reflow/jank) */
.bluubanana-user-visitors .visitors-pagination.new-style .page-btn.is-spacer{
  visibility:hidden; pointer-events:none; cursor:default;
}

/* Counter */
.bluubanana-user-visitors .visitors-pagination.new-style .page-counter{
  font-weight:500; color:#999; font-size:14px;
}
.bluubanana-user-visitors .visitors-pagination.new-style .page-counter strong{
  color:#663399; font-weight:600; font-size:15px;
}
.bluubanana-user-visitors .visitors-pagination.new-style .page-counter .divider{
  display:inline-block; transform:scaleY(1.8); margin:0 4px;
  font-size:14px; line-height:0; position:relative; top:-2px;
}

/* Optional: visual lock while request is in flight (JS adds .disabled) */
.bluubanana-user-visitors .visitors-pagination.new-style .page-btn.disabled{
  opacity:.4; pointer-events:none; cursor:default;
}























/* === Shimmer base (lightweight) === */
:root{
  --bluubanana-sk-base: #f2f3f5;
  --bluubanana-sk-sheen: #ffffff;
}
@keyframes bluubananaShimmer{
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.bluubanana-sk {
  background-image: linear-gradient(100deg, var(--bluubanana-sk-base) 20%, var(--bluubanana-sk-sheen) 40%, var(--bluubanana-sk-base) 60%);
  background-repeat: no-repeat;
  background-size: 200px 100%;
  animation: bluubananaShimmer 1.25s linear infinite;
}

/* === Swap real content to skeletons while the wrapper is loading === */
.bluubanana-visitors.is-loading .bluubanana-visitor-card { position: relative; }

/* Avatar: keep the exact 60x60 box, hide image, paint shimmer on wrapper */
.bluubanana-visitors.is-loading .bluubanana-visitor-card .visitor-avatar{
  border-radius: 8px;
  background-color: var(--bluubanana-sk-base);
  background-clip: padding-box;
  background-image: linear-gradient(100deg, var(--bluubanana-sk-base) 20%, var(--bluubanana-sk-sheen) 40%, var(--bluubanana-sk-base) 60%);
  background-size: 200px 100%;
  animation: bluubananaShimmer 1.25s linear infinite;
}
.bluubanana-visitors.is-loading .bluubanana-visitor-card .visitor-avatar img { opacity: 0; }

/* Presence dot off during load */
.bluubanana-visitors.is-loading .bluubanana-profiletab-presence { display: none; }

/* Name + City: keep same single-line boxes; paint shimmer on the boxes */
.bluubanana-visitors.is-loading .bluubanana-visitor-card .visitor-name,
.bluubanana-visitors.is-loading .bluubanana-visitor-card .visitor-city{
  color: transparent;          /* preserves layout width/height without reflow */
  border-radius: 4px;
  background-image: linear-gradient(100deg, var(--bluubanana-sk-base) 20%, var(--bluubanana-sk-sheen) 40%, var(--bluubanana-sk-base) 60%);
  background-size: 200px 100%;
  animation: bluubananaShimmer 1.25s linear infinite;
}

/* Tweak heights so bars look like text lines but preserve card height */
.bluubanana-visitors.is-loading .bluubanana-visitor-card .visitor-name{ height: 1em; }
.bluubanana-visitors.is-loading .bluubanana-visitor-card .visitor-city{ height: .95em; max-width: 70%; }

/* Ellipsis button: hide icon; show centered flat 18×10 pill inside 28×28 slot */
.bluubanana-visitors.is-loading .bluubanana-visitor-card .visitor-ellipsis-icon { opacity: 0; }
.bluubanana-visitors.is-loading .bluubanana-visitor-card .visitor-ellipsis{
  position: relative;
  background: none;          /* no big circular shimmer */
  pointer-events: none;      /* non-interactive while loading */
}
.bluubanana-visitors.is-loading .bluubanana-visitor-card .visitor-ellipsis::before{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 18px; height: 10px;
  border-radius: 8px;
  background-image: linear-gradient(100deg, var(--bluubanana-sk-base) 20%, var(--bluubanana-sk-sheen) 40%, var(--bluubanana-sk-base) 60%);
  background-size: 200px 100%;
  animation: bluubananaShimmer 1.25s linear infinite;
}

/* Don’t allow the actions popover while loading */
.bluubanana-visitors.is-loading .visitor-popover{ display: none !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bluubanana-sk,
  .bluubanana-visitors.is-loading .visitor-avatar,
  .bluubanana-visitors.is-loading .visitor-name,
  .bluubanana-visitors.is-loading .visitor-city,
  .bluubanana-visitors.is-loading .visitor-ellipsis{
    animation: none;
  }
}























/* ===============================
   PRIVACY SETTINGS — Toggle Switch
   =============================== */

.bluubanana-switch-wrap{
  display:inline-flex;
  align-items:flex-start;       /* top-align with first label line */
  gap:10px;
}

/* Visually hide checkbox but keep it accessible */
.bluubanana-switch-input{
  position:absolute;
  opacity:0;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  overflow:hidden; white-space:nowrap;
}

/* Track: 44x22 (compact) */
.bluubanana-switch{
  position:relative;
  display:inline-block;
  width:44px; height:22px;
  cursor:pointer; user-select:none; outline:0;
  background:#f0f0f0; border-radius:22px; padding:2px;
  transition:all .4s ease;
  margin-top:1px;               /* micro-nudge to align with line 1 */
}

/* Knob: 18x18 */
.bluubanana-switch::after{
  content:"";
  position:absolute; top:2px; left:2px;
  width:18px; height:18px; border-radius:50%;
  background:#fff; transition:transform .2s ease;
}

/* Checked state (move knob 22px) */
.bluubanana-switch-input:checked + .bluubanana-switch{ background:#474bff; }
.bluubanana-switch-input:checked + .bluubanana-switch::after{ transform:translateX(22px); }

/* Keyboard focus */
.bluubanana-switch-input:focus-visible + .bluubanana-switch{
  box-shadow:0 0 0 3px rgba(71,75,255,.35);
}

/* Two-line label (BuddyBoss-like spacing) */
.bluubanana-switch-label{
  display:flex;
  flex-direction:column;
  line-height:1.5;              /* similar to .bp-feedback p */
  margin:0;
  cursor:pointer;
}
.bluubanana-line1{ display:block; }
.bluubanana-line2{ display:block; margin-top:4px; } /* adjust 2–6px to taste */






/* ===============================
   Header Section
   =============================== */
   
.bluubanana-hv, .bluubanana-hv * { box-sizing: border-box; }

  .bluubanana-hv {
    --gap:12px; --railPad:16px; --tiles:7; --fitFix:3px; --btn:50px;
    --tileAspectW:116; --tileAspectH:174;
    margin-top:10px;
  }
  @media (max-width:640px){ .bluubanana-hv { --tiles:3; } }

  .bluubanana-hv h6 { margin:0 0 6px; font-weight:600; }
  .bluubanana-hv .bluubanana-hv-wrap { position:relative; overflow:visible; }

  .bluubanana-hv .bluubanana-header-visitors-row{
    display:flex; gap:var(--gap);
    overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x proximity;
    padding:0 8px; -ms-overflow-style:none; scrollbar-width:none;
    scrollbar-gutter:stable both-edges; overflow-anchor:none;
  }
  .bluubanana-hv .bluubanana-header-visitors-row::-webkit-scrollbar{ display:none; }

  .bluubanana-hv .bluubanana-header-visitor{
    flex:0 0 calc((100% - var(--railPad) - (var(--gap)*(var(--tiles) - 1)))/var(--tiles) - var(--fitFix));
    width:calc((100% - var(--railPad) - (var(--gap)*(var(--tiles) - 1)))/var(--tiles) - var(--fitFix));
    aspect-ratio: var(--tileAspectW)/var(--tileAspectH);
    position:relative; overflow:hidden; border-radius:14px;
    background:#f6f7f8; box-shadow:0 1px 8px rgba(0,0,0,.08);
    scroll-snap-align:start;
  }
  .bluubanana-hv .bluubanana-header-visitor img{
    width:100%; height:100%; object-fit:cover; object-position:center; display:block;
    border-radius:inherit; user-select:none; -webkit-user-drag:none;
  }

  .bluubanana-hv .bluubanana-hv-btn{
    appearance:none; position:absolute; top:50%; transform:translateY(-50%); z-index:5;
    width:var(--btn); height:var(--btn); border-radius:50%;
    background:#fff!important; border:none!important; padding:0!important; margin:0!important; line-height:0;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    box-shadow:0 2px 10px rgba(0,0,0,.15); transition:box-shadow .15s ease, opacity .12s ease;
  }
  .bluubanana-hv .bluubanana-hv-prev{ left:-15px; }
  .bluubanana-hv .bluubanana-hv-next{ right:-15px; }
  .bluubanana-hv .bluubanana-hv-btn:hover{ box-shadow:0 4px 16px rgba(0,0,0,.22); }
  .bluubanana-hv .bluubanana-hv-btn:disabled{ opacity:.35; cursor:default; }
  .bluubanana-hv .bluubanana-hv-btn svg{ width:32px; height:32px; display:block; fill:currentColor; color:#111; }

  /* Hide both arrows entirely when not needed */
  .bluubanana-hv .bluubanana-hv-wrap[data-hv-arrows="hidden"] .bluubanana-hv-btn{ display:none; }

  /* Hide the LEFT arrow while we're at the start; show only after right scroll */
  .bluubanana-hv .bluubanana-hv-wrap[data-hv-atstart="1"] .bluubanana-hv-prev { display:none !important; }

  /* Dim/lock the RIGHT arrow at the end */
  .bluubanana-hv .bluubanana-hv-wrap[data-hv-atend="1"] .bluubanana-hv-next { opacity:.35; pointer-events:none; }