/* Extracted + adapted from vlogg1527/rophim template.css
   Scoped to .navbar-user-scope so it won't affect whole site. */

.navbar-user-scope{ position: relative; }

.navbar-user-scope .line-center{ display: inline-flex; align-items: center; gap: .5rem; }
.navbar-user-scope .gap-2{ gap: .5rem !important; }
.navbar-user-scope .gap-3{ gap: 1rem !important; }
.navbar-user-scope .ms-1{ margin-left: .25rem !important; }
.navbar-user-scope .ps-3{ padding-left: .75rem !important; }
.navbar-user-scope .pb-1{ padding-bottom: .25rem !important; }
.navbar-user-scope .mt-2{ margin-top: .5rem !important; }
.navbar-user-scope .my-2{ margin-top: .5rem !important; margin-bottom: .5rem !important; }
.navbar-user-scope .small{ font-size: 12px; line-height: 1.4; opacity: .85; }
.navbar-user-scope .d-flex{ display: flex !important; }
.navbar-user-scope .flex-column{ flex-direction: column !important; }
.navbar-user-scope .w-100{ width: 100% !important; }

/* FontAwesome fix: project sets font-family on *::before */
.navbar-user-scope .fa,
.navbar-user-scope .fa-solid,
.navbar-user-scope .fa-regular,
.navbar-user-scope .fa-brands{
  font-family: "Font Awesome 6 Free" !important;
  font-style: normal !important;
  line-height: 1 !important;
  display: inline-block !important;
}
.navbar-user-scope .fa-solid{ font-weight: 900 !important; }
.navbar-user-scope .fa-regular{ font-weight: 400 !important; }
.navbar-user-scope .fa::before,
.navbar-user-scope .fa-solid::before,
.navbar-user-scope .fa-regular::before,
.navbar-user-scope .fa-brands::before{
  font-family: inherit !important;
}

/* Guest button */
.navbar-user-scope .button-user{
  font-size: 14px;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.5);
  color: #fff;
  opacity: .92;
  font-weight: 600;
  white-space: nowrap;
  min-width: 120px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: transparent;
}

@media (max-width: 480px){
  .navbar-user-scope .button-user{
    min-width: 0;
    padding: .45rem .7rem;
    font-size: 12px;
  }
  .navbar-user-scope .line-center{
    gap: .35rem;
  }
}
.navbar-user-scope .button-user:hover{ opacity: 1; }
.navbar-user-scope .button-user.button-login{
  background-color: #fff;
  color: #191B24;
  border-color: #fff;
}

/* Logged toggle */
.navbar-user-scope .header-user{
  padding: .3rem .6rem;
  color: #fff;
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.navbar-user-scope .user-avatar{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}
.navbar-user-scope .user-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dropdown menu (no react-bootstrap) */
.navbar-user-scope .v-dropdown-menu.user-dropdown{
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  max-width: 320px;
  min-width: 240px;
  padding: 12px;
  border-radius: .6rem;
  border: 1px solid rgba(255,255,255,.12);
  background-color: #272c43;
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
  z-index: 50;
}
.navbar-user-scope .v-dropdown-menu.user-dropdown hr{
  border: 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
.navbar-user-scope .dropdown-item{
  display: flex;
  align-items: center;
  padding: .65rem .8rem;
  border-radius: .5rem;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
.navbar-user-scope .dropdown-item:hover{ background: rgba(255,255,255,.06); }
.navbar-user-scope .dropdown-item i{ width: 18px; text-align:center; opacity: .9; }
.navbar-user-scope .dropdown-item span{ flex: 1 1 auto; }

.navbar-user-scope .btn{
  font-size: 12px;
  font-weight: 600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.35rem .7rem;
  border-radius:.45rem;
  min-height: 30px;
  border: 1px solid transparent;
  user-select:none;
  text-decoration:none;
}
.navbar-user-scope .btn-primary{
  background: #FFD875;
  color: #191B24;
  border-color: #FFD875;
}
.navbar-user-scope .btn-light{
  background: #fff;
  color: #000;
  border-color: #fff;
}
.navbar-user-scope .btn-rounded{ border-radius: 999px; }

.navbar-user-scope .dropdown-wallet .wallet-display{
  padding: 4px 0;
}
.navbar-user-scope .dropdown-wallet .amount{
  font-weight: 800;
}
.navbar-user-scope .ro-coin{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #FFD875;
  display: inline-block;
}