.user-cover { background-position: center; height: 80px; margin-bottom: -70px; box-shadow: 0 0 0 1px rgb(var(--theme-sh), var(--theme-sh-op));}
.user-info { padding-right: 40px; padding-top: 65px; text-align: right; }
.user-data { padding-left: 40px; padding-top: 50px; }	
.user-info .info-1 { display: inline-block; margin-right: 20px; }
.user-info .info-2 { display: inline-block; }
.user-info .info-name { text-align: right; justify-content: right; }
.user-data .data { display: inline-block; }
.user-data .data-1, .user-data .data-4, .user-data .data-5  { margin-right: 20px; }

/*page gifts*/
.slide-btn 	  { margin: -40px 0 0 0; z-index: 2; right: -35px; transform: translateY(-40%) translateX(0%); transition: transform 0.4s ease-in-out; }
.slide-btn.fr { margin: -40px 0 0px -30px;  right: -35px; }	
.slide-btn.gift-like { transform: translateY(50%) translateX(0); }

.gift-bg { margin-top: -19px; position: relative;  width: 100px; height: 100px; overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; }
.gift-bg.bw { filter: grayscale(100%); opacity: 0.8; transition: transform 0.5s ease, filter 0.5s ease; }

.slide-btn-block {transition: box-shadow 0.2s ease; }
.slide-btn-block:hover { box-shadow: 0 0 8px #faa400; }
.slide-btn-block:hover .slide-btn { transform: translateY(50%) translateX(0); }
.slide-btn-block:hover .gift-bg.bw {filter: grayscale(0%); }

.gift-mark  { box-shadow: 0 0 5px #faa400; }
.gift-limit {margin: -20px 13px 4px 13px; background: linear-gradient(45deg, #ffc705, #ffe899, #a37a00); color: black; border-radius: 5px; padding: 2px 0px 2px 7px;  line-height: 1; text-shadow: none; font-weight: bold;}	
.gift-count { z-index: 2; position: absolute; bottom: 0px; background-color: rgba(0, 0, 0, 0.4); color: white; border-radius: 5px; padding: 2px 6px 5px 5px; right: -2px; line-height: 1; text-shadow: none; font-size: var(--fs--10); font-weight: bold; }
/*___end page gifts*/

@media (max-width: 768px) { /* Если меньше 768px */
	.user-info { padding-right: 0px; padding-top: 15px; }
	.user-info .info-1 { float: left; text-align: left; justify-content: left; }
	.user-info .info-name { text-align: center; justify-content: center; }
	.user-info .info-2 { text-align: right; }
	.user-data { padding-left: 0px; padding-top: 5px; }
	.user-data .data-2 { float: right; text-align: right; }
	.user-data .data-4 { width: 33%; margin:0;}
	.user-data .data-5 { width: 33%; text-align: center; margin:0; }
	.user-data .data-6 { width: 33%; text-align: right; margin:0; }
	.user-data .data-box { display: flex; justify-content: space-between; }
	.user-data .w-200 { width: 100% !important;}
}