.profile-head {
   border-radius: 15px;
   overflow: hidden;
   background: var(--yurba-main-color);
}

.profile-head__top {
   position: relative;
}

.profile-head__banner {
   object-fit: cover;
   height: 350px;
   width: 100%;
   border-radius: 15px 15px 0px 0px;
   display: block;
}

.profile-head__avatar-wrapper {
   left: 30px;
   bottom: 30px;
   z-index: 3;
   position: absolute;
   display: flex;
   align-items: center;
   justify-content: center;
}

.profile-head__avatar img {
   display: block;
   object-fit: cover;
   height: 150px;
   width: 150px;
   background-color: var(--yurba-main-color);
   border-radius: 100%;
   border: 2px solid var(--yurba-main-color);
}

/*
.cosmetic_avatar {
	background: none!important;
    border-radius: 100px;
    border: 4px solid var(--yurba-main-color);
    position: absolute;
    top: 0px;
	transition: .4s;
}*/

.profile-head .online-status {
   position: absolute;
   margin-left: 100px;
   bottom: 10px;
   z-index: 200;
}

.profile-head__name-wrapper {
   margin-bottom: 8px;
   display: flex;
   align-items: center;
   gap: 8px;
   line-height: 1;
}

.profile-head__name {
   font-weight: 800;
   font-size: 20px;
}

.profile-head__badges {
   display: flex;
   align-items: center;
   gap: 4px;
}

.profile-head__status {
   color: var(--yurba-text-color);
   font-weight: 400;
   font-size: 12px;
   opacity: .5;
}

.profile-head__bottom {
   display: flex;
   justify-content: space-between;
   z-index: 2;
   position: relative;
   padding: 25px;
}


.profile-head__controls {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: flex-end;
}

.profile-head__controls .btn {
   border-radius: 12px;
   padding: 4px 15px;
   font-size: 15px;
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 8px;
}

.profile-head__action {
   display: flex;
   align-items: center;
}

.profile-head__message {
   display: flex;
   align-items: center;
}

.profile-head__stats {
   display: flex;
   gap: 30px;
}

.profile-head__stats-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 3px;
}

.profile-head__stats-item .number {
   font-size: 18px;
   font-weight: 700;
}

.profile-head__stats-item .word {
   opacity: .5;
   font-weight: 500;
}


.profile-head__nav {
   border-top: 1px solid #f1f1f1;
   padding: 0 25px;
   display: flex;
   gap: 15px;
   align-items: center;
}

.profile-head__nav-wrapper::-webkit-scrollbar {
   display: none;
}

.profile-head__nav a {
   display: inline-block;
   color: #adb5bd;
   transition: all 200ms ease;
   font-weight: 700;
   font-size: 12px;
   letter-spacing: .4px;
   padding: 12px 8px;
}

.profile-head__nav a:hover {
   color: #d0d1d3;
}

.profile-head__nav a.active {
   color: var(--yurba-text-color)!important;
   position: relative;
}
.profile-head__nav a.active:after {
   content: '';
   position: absolute;
   width: 100%;
   height: 2px;
   bottom: 0px;
   background-color: currentColor;
   border-radius: 10px 10px 0px 0px;
   left: 0;
}

.profile-tab {
   display: none;
   margin-top: 16px;
}

.profile-tab.active {
   display: block;
}

@media (max-width: 1400px) {
   .profile-head__banner {
      height: auto;
      min-height: 90px;
   }

   .profile-head__avatar-wrapper {
      bottom: -100px;
      left: 0;
      width: 100%;
   }

   .profile-head__bottom {
      align-items: center;
      gap: 10px;
      text-align: center;
      flex-direction: column;
      padding-top: 120px;
   }


   .profile-head__controls {
      flex-direction: column-reverse;
      gap: 20px;
   }

   .profile-head__action {
      width: 100%;
      justify-content: center;
   }

   .profile-head__message {
      width: 100%;
      justify-content: center;
   }

   .profile-head__stats {
      display: flex;
      gap: 30px;
      width: 100%;
      justify-content: center;
   }

   .profile-head__nav-wrapper {
      overflow: auto;
   }

   .profile-head__nav {
      justify-content: center;
      overflow: hidden;
      width: max-content;
   }
}

/* About */

.profile-about {
   display: flex;
   gap: 16px;
}

.profile-about__card {
   border-radius: 15px;
   background: var(--yurba-main-color);
   padding: 25px;
}

.profile-about__card:first-child {
   flex: 1;
}

.profile-about__card-title {
   font-weight: 700;
   font-size: 18px;
   margin-bottom: 16px;
}

.profile-about__items {
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.profile-about__item {
   display: flex;
   gap: 4px;
   align-items: center;
}

.profile-about__item-title {
   display: flex;
   gap: 8px;
   align-items: center;
}

.profile-about__item-title span.material-symbols-outlined {
   font-size: 22px;
}

.profile-about__item-name {
   font-weight: 600;
}

.profile-about__item.about {
   gap: 8px;
}

.profile-about__item.about .profile-about__item-value {
   white-space: pre-wrap;
   word-break: break-all;
   background: var(--yurba-body-color);
   width: -webkit-fill-available;
   border-radius: 10px;
   padding: 10px;
   font-size: 15px;
   font-weight: 500;
}

@media (max-width: 1440px){
   .profile-about {
      flex-direction: column;
   }
}

/* Friends */
.profile-friends {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   margin-top: 16px;
}

.profile-friends__after {
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 50%;
   margin: 30px 0;
}

.profile-friends__after:empty {
   display: none;
}

/* Wall */

.profile-wall {
   display: flex;
   gap: 16px;
}

.profile-wall__posts-wrapper {
   flex: 1;
}

.profile-wall__sticky {
   position: sticky;
   top: calc(var(--yurba-header-height));
   padding-top: 0;
   overflow-y: auto;
   height: calc(100vh - var(--yurba-header-height));
   transition: 0.15s all ease;
   width: 330px;
   flex-shrink: 0;
}

.profile-wall__sticky::-webkit-scrollbar {
   display: none;
}

.profile-wall__sticky.stuck {
   padding: var(--yurba-content-padding) 0;
}

.profile-wall__sticky-card {
   background: var(--yurba-main-color);
   border-radius: 15px;
}

.profile-wall__sticky-card:not(:last-child) {
   margin-bottom: 15px;
}

.profile-wall__sticky-title {
   padding: 10px 18px;
   padding-top: 15px;
   border-bottom: 1px solid var(--yurba-body-color);
   font-weight: 700;
   font-size: 15px;
}

.profile-wall__sticky-inner {
   padding: 25px;
   padding-top: 15px;
}

.profile-wall__sticky-more {
   margin-top: 8px;
   display: block;
   font-weight: 500;
}

.profile-wall__friends {
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   flex-wrap: wrap;
   gap: 8px;
}

.profile-wall__friend {
   border-radius: 8px;
   padding: 10px 15px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   transition: .4s;
   text-align: center;
   color: black;
   width: calc(33.3% - 8px);
}
.profile-wall__friend:hover {
   background-color: var(--yurba-body-color);
}
.profile-wall__friend .avatar {
   border-radius: 100%;
   width: 50px;
   height: 50px;
   background: var(--yurba-body-color);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--yurba-second-text-color);
}
.profile-wall__friend .avatar img {
   object-fit: cover;
   border-radius: 100%;
}
.profile-wall__friend .avatar img .cosmetic_av {
   position: absolute;
   width: 50px;
   height: 50px;
}
.profile-wall__friend .name {
   font-size: 13px;
   color: var(--yurba-text-color);
   white-space: pre;
}
.profile-wall__friend-more {
   position: absolute;
   background: #000000d6;
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 100%;
   font-weight: 500;
}
.profile-wall__friend .avatar-ico {
   position: absolute;
   margin-top: 35px;
   margin-left: 32px;
   background: var(--yurba-main-color);
   padding: 4px;
   border-radius: 100%;
   display: flex;
   align-items: center;
}
.profile-wall__friend .avatar-ico img {
   width: 15px;
}

/*
.profile-wall__friend .cosmetic_av {
   width: 50px;
   height: 50px;
   position: absolute;
}

.profile-wall__friend .cosmetic_av[src=""] {
   display: none;
}*/

.profile-wall__friend .surname {
   font-size: 12px;
   color: var(--yurba-text-color);
}

.profile-wall__gifts {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   flex-wrap: wrap;
   gap: 20px;
   row-gap: 15px;
   padding-bottom: 10px;
}

.profile-wall__gift {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 10px;
   width: calc(33.3% - 16px);
}

.profile-wall__gift:has(.animated-item) {
   padding: 0;
}

.profile-wall__gifts .animated-item {
   width: 80px;
}