/* Friendoza — nav polish
   1) Hide broken 'label' icon in far top-left (fallback image)
   2) Reposition XP bubble into navbar flow between brand and Home
*/

/* 1) Hide broken image in the very left top corner (most often an <img> with missing src)
   We limit to navbar brand area to avoid breaking real images.
*/
.navbar .nav-brand img[alt=""],
.navbar .nav-brand img:not([src]),
.navbar .nav-brand img[src=""],
.navbar .nav-brand img[src="#"]{
  display: none !important;
}

/* If logo image fails (broken icon), just hide the img and keep text */
.navbar .nav-brand img.logo-image-nav{
  /* keep if it loads; if browser marks it as broken, it still takes space.
     We'll remove only if it's explicitly marked via class below (added by JS). */
}
.navbar .nav-brand img.fz-hide-broken{
  display:none !important;
}

/* 2) XP badge positioning: create a predictable slot */
.navbar{
  display:flex;
  align-items:center;
}

/* We'll inject #navXpSlot after .nav-brand and place xp element there */
#navXpSlot{
  display:flex;
  align-items:center;
  margin-left: 10px;
  margin-right: 10px;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}

#navXpSlot .fz-xp-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(59,130,246,.20);
  border: 1px solid rgba(39,224,193,.30);
  color: #dbeafe;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
#navXpSlot .fz-xp-pill .fz-xp-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #27e0c1, #3b82f6);
  box-shadow: 0 0 0 3px rgba(39,224,193,.18);
}

/* Ensure nav menu doesn't jump */
.navbar .nav-menu{ flex: 1 1 auto; min-width: 0; }

@media (max-width: 768px){
  #navXpSlot{ margin-left: 8px; margin-right: 8px; }
  #navXpSlot .fz-xp-pill{ padding: 5px 8px; font-size: 12px; }
}