/* BASIC LAYOUT
----------------------------------------------- */
.wrapper {min-width: 320px; position: relative; padding-bottom: 70px; width: 100%;
	background: var(--bg) url(../images/bg-light.jpg) right top no-repeat; background-size: calc(100% - 250px) auto;}
.wrapper__container {margin: 0 auto; position: relative; z-index: 20; max-width: 100% !important;}
.wrapper__main {display: grid; grid-template-columns: 270px minmax(0,1fr); 
	grid-template-areas: "sidebar header" "sidebar content" "sidebar footer"; padding-top: 20px;}
.header {grid-area: header; transition: padding 0.2s, background-color 0.2s, backdrop-filter 0.2s, box-shadow 0.2s;
	margin-bottom: 50px; gap: 20px; position: sticky; left: 0; top: 0; z-index: 50; padding: 10px var(--indent);}
.header.is-sticky {box-shadow: var(--bsh-long); background-color: rgba(255,255,255,0.8); backdrop-filter: blur(20px); z-index: 200;}
.content {grid-area: content; padding: 0 var(--indent); padding-bottom: 100px; min-height: 100vh;}
.sidebar {grid-area: sidebar; background-color: var(--bg-darker); border-right: 3px solid var(--bdc-lighter); 
	position: relative; z-index: 201; margin-top: -20px;}
.sidebar__sticky {position: sticky; left: 0; top: 0;}
.footer {grid-area: footer; padding: 55px var(--indent); padding-bottom: 115px; border-top: 1px solid var(--bdc-darker); 
	gap: 26px 36px; display: grid; background-color: var(--bg-darker-1); color: var(--tt-fade);
	grid-template-columns: max-content 1fr 280px; font-size: 13px; --tt: var(--tt-fade);}

.scrolltop {position: fixed; width: 50px; height: 50px; right: -60px; bottom: 90px;
	z-index: 980; border-radius: 50%; font-size: 20px; opacity: 0; transition: right 0.2s, opacity 0.2s;}
.scrolltop.is-active {right: 10px; opacity: 1;}


/* HEADER
----------------------------------------------- */
.logo {height: 50px; padding-left: 70px; position: relative; font-weight: 300; font-size: 24px; line-height: 1;}
.logo span {color: var(--accent);}
.logo__subtitle {font-size: 13px; font-weight: 400; color: var(--tt-fade); margin-top: 3px;}
.logo.logo-icon::before {position: absolute; left: 0; top: 50%; transform: translateY(-50%) scale(-1,1);}
.logo-icon::before {width: 50px; aspect-ratio: 1 / 1; border-radius: 15px; content: '';
	background: var(--accent) url(../images/logo.svg) center bottom -4px / 38px no-repeat;}
.header__btn-pro--guest {background-color: var(--bg-colored); color: var(--tt-on-colored);}
.header__btn-pro::before {font-size: 24px;}
.header__btn-pro--guest::before {color: var(--accent);}
.header__btn-login::before {font-size: 19px;}
.header__btn-pro + .header__btn-theme {margin-left: 20px;}
.header__btn-theme, .header__btn-notification, .header__btn-comments, .header__btn-search {font-size: 24px; color: var(--tt-fade);}
.header__btn-notification {margin-right: 30px;}
.dt .header__btn-theme::before {content: "\f2a8";}
	
.search-block form {position: relative; width: 420px; max-width: 100%;}
.search-block__input, .search-block__input:focus {border-radius: 20px; padding: 0 56px;}
.search-block__input:not(:focus)::placeholder {opacity: 1; font-size: 14px;}
.search-block__btn, .search-block__btn-clear {position: absolute; left: 0; top: 0; width: 56px; height: 50px;
	border-radius: 0px; font-size: 20px; color: var(--ui-tt-fade); padding-left: 4px;}
.search-block__btn-clear {left: auto; right: 0; padding: 0; opacity: 0; pointer-events: none;}
.is-active .search-block__btn-clear {opacity: 1; pointer-events: auto;}


/* SECTION
----------------------------------------------- */
.sect {position: relative;}
.sect:not(:last-child) {margin-bottom: 80px;}
.sect__header {margin-bottom: 35px; gap: 15px 30px; line-height: 1;}
.sect__title {font-size: 24px; font-weight: 400;}
.sect__link {height: 30px; border-radius: 6px; text-transform: uppercase; gap: 6px; 
	background-color: var(--bg-darkest); font-size: 13px; font-weight: 500; padding: 0 15px;}
.sect__link--accent {background-color: var(--accent);}
.sect__link::before {font-size: 17px;}
.sect__tabs {gap: 15px;}
.sect__btn {display: flex; margin: 0 auto; margin-top: 40px; width: 260px; background-color: transparent; 
	border: 1px solid var(--accent); color: var(--tt); font-size: 13px; font-weight: 400; height: 55px; padding: 0;}
.sect__btn::before {color: var(--accent); font-size: 24px;}
.sect:not(.sect--mybnrs) > .mybnr {height: 170px;}
.sect__menu, .sect__tabs, .sect > .mybnr, .sect > .mybnr-tlg, .sect > .mybnr-stream {margin-bottom: 30px;}
.sect__menu, .sect__tabs {gap: 5px;}
.sect__menu a, .sect__tabs li {padding: 10px 20px; display: block; border-radius: 6px; background-color: var(--bg-darker); cursor: pointer;}
.sect__menu a.is-active, .sect__tabs li.is-active {background-color: var(--accent); color: #fff;}
.sect__menu[style] {mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);}
.show-text {cursor: pointer; text-decoration: underline; color: var(--accent); margin-top: -30px; margin-bottom: 30px;}
.genres-list {gap: 15px; display: grid; grid-template-columns: repeat(auto-fill,minmax(min(40vw,220px),1fr));}
.sect-tabs {gap: 15px;}
.sect-tabs li {min-width: max-content;}
.sect-tabs a {display: flex; align-items: center; justify-content: center; padding: 0 20px; height: 50px; 
	border-radius: 10px; border: 3px solid var(--bdc-lighter); background-color: var(--bg-darker); gap: 20px;}
.sect-tabs a::before {font-size: 23px; opacity: 0.5;}


/* CATEGORIES GRID
----------------------------------------------- */
.grid-items:has(.trc) {display: block;}
.grid-items:has(.album-item) {grid-template-columns: repeat(6,minmax(0,1fr)); gap: 30px;}
.grid-items:has(.album2-item) {grid-template-columns: repeat(6,minmax(0,1fr)); gap: 30px;}
.grid-items:has(.radio-item) {grid-template-columns: repeat(9,minmax(0,1fr)); gap: 20px;}
.grid-items:has(.artist-item) {grid-template-columns: repeat(6,minmax(0,1fr)); gap: 30px;}
.grid-items:has(.video-item), .content:has(> .playlist-item) {grid-template-columns: repeat(4,minmax(0,1fr)); gap: 30px;}
.grid-items > .mybnr, .grid-items > .mybnr-tlg, .grid-items > .mybnr-stream {margin-bottom: 0px;}


/* SLIDERS GRID
----------------------------------------------- */
.has-slider:not(.owl-carousel) {display: flex; gap: 20px; overflow: hidden;}
.album-slider:not(.owl-carousel), .album2-slider:not(.owl-carousel) {gap: 43px;}
.artist-slider:not(.owl-carousel) {gap: 80px;}
.genres-slider:not(.owl-carousel) {gap: 15px;}
.has-slider:not(.owl-carousel) > * {flex-shrink: 0;}
.has-slider:not(.owl-carousel) > .album-item {width: calc((100% - 172px)/5);}
.has-slider:not(.owl-carousel) > .album2-item {width: calc((100% - 215px)/6);}
.has-slider:not(.owl-carousel) > .radio-item {width: calc((100% - 160px)/9);}
.has-slider:not(.owl-carousel) > .artist-item {width: calc((100% - 400px)/6);}
.genres.has-slider:not(.owl-carousel) > li {width: calc((100% - 75px)/6);}
.has-slider .mybnr {width: 800px;}
.has-slider:not(.owl-carousel) > .video-item {flex-shrink: 0; width: calc((100% - 60px)/4);}
.has-slider-popular:not(.owl-carousel) {display: grid; gap: 30px; grid-template-rows: repeat(2,1fr);
	grid-template-columns: repeat(7,minmax(0,1fr)); grid-auto-flow: column;}
.has-slider-popular:not(.owl-carousel) > .album2-item:nth-child(14) ~ .album2-item {display: none;}
.popular-group {gap: 30px;}


/* TRACK ITEM
----------------------------------------------- */
.trc {gap: 30px; grid-column: 1 / -1; border-bottom: 1px solid var(--bdc); padding: 15px 0; position: relative; isolation: isolate;}
.trc:first-child {margin-top: -15px;}
.trc::before {content: ''; position: absolute; inset: 0 -15px; z-index: -1; background-color: var(--bg); 
	border-radius: 20px; box-shadow: var(--bsh-track); pointer-events: none; opacity: 0;}
.trc__img {width: 50px; border-radius: 10px; margin-right: -15px;}
.trc__desc::before {left: 65px; right: 160px;}
.trc__play {position: absolute; inset: 0; width: inherit; height: inherit; border-radius: inherit; 
	opacity: 0; transform: scale(0.3,0.3); font-size: 22px;}
.trc__title {font-size: 15px; font-weight: 600;}
.trc__subtitle {font-size: 14px; color: var(--tt-fade);}
.trc__info, .trc__info2 {font-size: 12px; color: var(--tt-icon); width: 300px;}
.trc__info2 {width: 200px;}
.trc__dl {font-size: 19px; color: var(--tt-icon); margin-right: 5px;}
.trc__rating a {padding-left: 28px; color: var(--tt-icon); font-weight: 500; display: block; min-width: 35px;}
.trc__rating::before {position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--tt-icon);}
.trc__fav a {font-size: 20px; color: var(--tt-icon); position: relative; top: 2px;}
.trc__time {color: var(--tt-fade); font-weight: 500;}
.trc__ctrl-btn {font-size: 24px; height: 50px;}
.trc__ctrl {position: absolute; right: 0; top: 15px; opacity: 0; z-index: 50;}
@media screen and (min-width: 1220px) {
	.trc.ctrl-is-active .trc__time {opacity: 0; pointer-events: none;}
	.trc.ctrl-is-active .trc__ctrl {opacity: 1;}
}
.trc__desc-inner {display: inline-block; max-width: 100%;}
.trc__desc-inner.expl {padding-right: 30px; position: relative;}
.trc__desc-inner.expl::after {content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); 
    background: url(../images/explicit.svg) 0 0 / contain no-repeat; width: 15px; height: 15px;}
.dt .trc__desc-inner.expl::after {filter: invert(1);}


/* CONTROL MENU 
----------------------------------------------- */
.ctrl__list {position: absolute; background-color: var(--bg); width: 285px;
	box-shadow: var(--bsh-long); border-radius: 10px; padding: 15px 0; z-index: 50; display: none;}
.ctop > .ctrl__list {bottom: 100%;}
.cbottom > .ctrl__list {top: 100%;}
.cleft > .ctrl__list {right: 0;}
.cright > .ctrl__list {left: 100%;}
.ctrl__list .ctrl__list {right: 100%; bottom: 50%; transform: translateY(50%);}
.cright .ctrl__list .ctrl__list {right: auto; left: 100%;}
.ctrl__list a, .ctrl__list li > span {cursor: pointer; position: relative; display: flex; align-items: center; 
	height: 40px; padding: 0 20px; padding-left: 65px; font-size: 13px; gap: 10px;}
.ctrl__list li::before {position: absolute; left: 0; top: 0; width: 65px; height: 100%; z-index: 3;
	display: grid; place-items: center; font-size: 21px; color: var(--tt-icon); pointer-events: none;}
.ctrl__list li {position: relative;}
.ctrl__list li::after {content: ''; width: 3px; height: 100%; position: absolute; top: 0; left: 0; 
	background-color: var(--accent); box-shadow: 5px 0 7px rgba(56,193,111,0.32); opacity: 0; transform: scale(1,0);}
.ctrl.ctrl-is-active > .ctrl__list {display: block;}
.ctrl.ctrl-is-active .trc__ctrl-btn {color: var(--accent);}
.trc.ctrl-is-active, .video-item:has(.ctrl-is-active), .owl-item:has(.ctrl-is-active) {z-index: 100;}
.trc.ctrl-is-active::before {opacity: 1;}

.js-trc--is-playing .trc__play::before, .js-trc--is-playing .popular-item__img::before, 
.js-trc--is-playing .page__play::before {content:"\e905";}
.js-trc--is-playing .trc__play {opacity: 1; transform: scale(1,1); background-color: rgba(0,0,0,0.6);}
.js-trc--is-playing.trc::before {opacity: 1;}
.js-trc--is-playing .popular-item__img::before {opacity: 1; transform: scale(1,1) translate(-50%,-50%);}
.js-trc--is-playing .popular-item__img {box-shadow: 0 0 27px var(--accent);}


/* ALBUM ITEM, POPULAR ITEM, RADIO ITEM, ARTIST ITEM
----------------------------------------------- */
.album-item, .radio-item, .artist-item, .video-item, .album2-item {display: block; position: relative;}

.album-item {background-color: var(--bg); box-shadow: var(--bsh-album); border-radius: 10px; padding: 20px 35px 16px 35px;}
.album-item__img {border-radius: 10px; margin: 0 auto; margin-bottom: 14px; width: 140px;}
.album-item__title, .album2-item__title {font-size: 16px; font-weight: 500; margin-bottom: 2px;}
.album-item__meta {border-top: 1px solid var(--bdc); padding-top: 16px; margin-top: 16px; color: var(--tt-fade-1);}
.album-item__meta span {color: var(--tt);}
.album2-item__img {border-radius: 10px; box-shadow: var(--bsh-album); margin-bottom: 14px; cursor: pointer;}
.album2-item__subtitle {color: var(--tt-fade); padding-top: 2px;}
.popular-item .album2-item__title {font-size: 14px;}
.popular-item .album2-item__subtitle {font-size: 13px;}

.radio-item {background-color: var(--bg-darker-1); border-radius: 10px; overflow: hidden;}
.radio-item img {object-fit: contain; position: absolute; inset: 20%; width: 60%; height: 60%;}
.radio-item__desc, .artist-item__overlay {position: absolute; inset: 0; opacity: 0; transform: scale(0.8,0.8);
	background-color: rgba(0,0,0,0.76); color: #fff; line-height: 1.3;}
.radio-item__desc::before, .artist-item__overlay::before, .video-item__img.has-icon2::before, .playlist-item__desc::before, 
.popular-item__img::before {display: grid; place-items: center; width: 60px; aspect-ratio: 1 / 1; border-radius: 50%; 
		margin-bottom: 5px; font-size: 22px; color: #fff; background: var(--accent);}
.radio-item__title div {font-weight: 600;}
.radio-item__desc::before {transform: scale(0.8,0.8) translateY(-30px); opacity: 0;}

.artist-item__img {border-radius: 50%; margin-bottom: 15px; overflow: hidden;}
.artist-item__title {font-size: 16px; font-weight: 600; color: var(--tt);}
.artist-item__subtitle {color: var(--tt-fade); margin-top: 2px;}
.artist-item__overlay {background-color: rgba(0,0,0,0.42);}
.artist-item__overlay::before {width: 70px; font-size: 24px; margin-bottom: 0px;
	transform: scale(0.8,0.8) translateY(-30px); opacity: 0;}
.artist-item__overlay span, .radio-item__title {opacity: 0; transform: translateY(30px);}


/* GENRE ITEM, VIDEO ITEM, PLAYLIST ITEM
----------------------------------------------- */
.genres li {aspect-ratio: 1 / 1; position: relative; overflow: hidden; border-radius: 15px; 
	background: var(--accent) url(../images/play.svg) left 35px bottom 65px / 23px no-repeat;}
.genres li::before, .genres li::after {content: ''; pointer-events: none; width: 105px; aspect-ratio: 1 / 1; 
	border-radius: 20px; position: absolute; right: -24px; bottom: -24px; z-index: 3; background-color: rgba(255, 255, 255,0.22);}
.genres li::before {transform: translate(-50%,-50%) scale(1,1);}
.genres li a {position: absolute; inset: 0; display: flex; flex-direction: column; padding: 30px 35px; color: #fff; 
	font-weight: 700; font-size: 24px; line-height: 1.2;}
.genres li a::after {content: attr(data-text); font-size: 14px; font-weight: 500; display: block; margin-top: 3px;}
.genres li:nth-child(6n+2), .genres .owl-item:nth-child(6n+2) li {background-color: #37b8d8;}
.genres li:nth-child(6n+3), .genres .owl-item:nth-child(6n+3) li {background-color: #b642ec;}
.genres li:nth-child(6n+4), .genres .owl-item:nth-child(6n+4) li {background-color: #ff8f3c;}
.genres li:nth-child(6n+5), .genres .owl-item:nth-child(6n+5) li {background-color: #d65092;}
.genres li:nth-child(6n+6), .genres .owl-item:nth-child(6n+6) li {background-color: #3675c2;}

.video-item__img {margin-bottom: 12px; border-radius: 10px; cursor: pointer;}
.video-item__subtitle {margin-top: 4px;}
.video-item__label, .video-item__btn {background-color: var(--accent); color: #fff; height: 28px; padding: 0 12px;  
	position: absolute; left: 14px; top: 14px; z-index: 10; border-radius: 6px;}
.video-item__ctrl {position: absolute; right: 14px; top: 14px; z-index: 15;}
.video-item__btn {position: static; padding: 0; width: 41px; background-color: rgba(0,0,0,0.77); font-size: 24px;}
.video-item__img.has-icon2::before, .playlist-item__desc::before, .popular-item__img::before {width: 70px; margin: 0; font-size: 24px; opacity: 0;
	position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0.5,0.5); z-index: 10;}
.has-slider .video-item__list {bottom: auto !important; top: 0% !important;}
.has-slider .video-item .cleft > .ctrl__list {right: 100%;}
.has-slider .video-item .ctrl__list .ctrl__list {bottom: 50%; transform: translateY(80px);}
/*.has-slider .video-item__list .icon2-viber, .has-slider .video-item__list .icon2-whatsapp, 
.has-slider .video-item__list .icon2-skype, .has-slider .video-item__list .icon2-x {display: none;}*/
.video-item__ctrl.ctrl-is-active .ctrl__btn {background-color: var(--accent); color: #fff;}

.playlist-item__desc {position: absolute; inset: 0; z-index: 10; border-radius: 10px; color: #fff; padding: 30px; padding-left: 40%;}
.playlist-item__count {height: 32px; border-radius: 6px; padding: 0 10px; 
	background-color: var(--accent); color: #fff; font-weight: 600; align-self: flex-start;}
.playlist-item__count::before {font-size: 17px;}
.playlist-item__title {font-size: 15px; font-weight: 700; text-transform: uppercase;}
.playlist-item {overflow: hidden; border-radius: 10px;}
.playlist-item__img {margin: 0; overflow: hidden;}


/* BANNERS
----------------------------------------------- */
.mybnr, .mybnr-stream, .mybnr-tlg, .mybnr2 {border-radius: 20px; padding: 30px 25px; height: 250px; 
	position: relative; overflow: hidden; transition: filter 0.3s, box-shadow 0.3s;}
.mybnr.sect {height: 170px;}
.mybnr--pro {background: #f4f7f9 url(../images/bg-pro.png) right bottom no-repeat;}
.mybnr--radio {background: #edeae3 url(../images/bg-radio.png) right bottom no-repeat;}
.mybnr--youtube {background-color: #e32526;}
.mybnr__desc {gap: 25px;}
.mybnr__label {height: 75px; width: 113px; border-radius: 6px; text-transform: uppercase; margin-right: -8px;
	background-color: #ff7e00; color: #fff; font-weight: 800; font-size: 32px; margin-left: 25px;}
.mybnr__desc {position: relative; z-index: 5;}
.mybnr__title {font-size: 18px; font-weight: 700;}
.mybnr__subtitle {font-size: 13px; margin-top: 2px; color: #464343;}
.mybnr__icon {position: absolute; bottom: -24px; right: 14px; width: 150px; height: 150px;}
.mybnr--radio .mybnr__desc::before {font-size: 20px; width: 50px; height: 50px; border-radius: 50%; 
	background-color: #fff; display: grid; place-items: center;}
.mybnr--youtube .mybnr__desc::before {font-size: 44px; margin-left: 15px; margin-right: 8px;}
.mybnr--youtube * {color: #fff;}
.mybnr--youtube::before {content: ''; background-color: #faecec; transform: skew(-10deg);
	position: absolute; right: -20px; top: 0; height: 100%; width: 50%;}
.mybnr--youtube .mybnr__icon {width: 141px; height: 58px; right: 46px; bottom: 50%; transform: translateY(50%);}

.mybnr-stream {background: #e6eff5 url(../images/bg-stream.png) left bottom no-repeat; color: #232323; 
	padding-left: 360px; padding-right: 120px; font-weight: 700; height: 170px;}
.mybnr-stream__title {font-size: 34px;}
.mybnr-stream__subtitle {font-size: 20px;}
.mybnr-stream__title:first-child::before {content: ''; width: 15px; height: 15px; border-radius: 50%; 
	background-color: #ff63ab; margin-right: 13px; animation: live 1.2s linear infinite;}
.mybnr-stream__title.logo-icon::before {width: 60px; background-size: 51px; background-position: center bottom -7px; margin-right: 20px;}

.mybnr-tlg {background: #40bef6 url(../images/bg-tlg.png) center bottom no-repeat; color: #fff !important; height: 170px;}
.mybnr-tlg__desc::before {font-size: 63px;}
.mybnr-tlg__desc {gap: 24px;}
.mybnr-tlg__title {font-size: 24px; font-weight: 700;}
.mybnr-tlg__subtitle {font-size: 15px; font-weight: 500;}

.mybnr-some {background: #96e321 url(../images/bg-heart_music.jpg) center center / cover no-repeat; color: #fff !important; height: 170px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Добавляет тень на текст */}
.mybnr-some2 {background: #96e321 url(../images/bg-reg_us.jpg) center center / cover no-repeat; color: #fff !important; height: 170px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); /* Добавляет тень на текст */}

.mybnr--telegram {background: #40bef6 url(../images/bg-telegram2.jpg) center center no-repeat;}
.mybnr--radio2 {background: #59819b url(../images/bg-trans_radio.png) center center no-repeat;}
.mybnr--radio3 {background: #59819b url(../images/bg-rwb_radio.jpg) center center no-repeat;}
.mybnr--telegram *, .mybnr--radio2 * .mybnr--radio3 * {color: #fff;}
.mybnr--telegram .mybnr__desc::before, .mybnr--radio2 .mybnr__desc::before, .mybnr--radio3 .mybnr__desc::before {margin: 0; font-size: 44px;}

.mybnr2 {height: 170px; font-size: 15px; font-weight: 500; --tt: #fff;
	position: relative; isolation: isolate; padding: 0 var(--indent); background-color: var(--accent);}
.mybnr2__title {font-size: 20px; font-weight: 700;}
.mybnr2__icon, .mybnr2::before {position: absolute; right: var(--indent); top: 50%; transform: translateY(-50%); 
	height: 120px; width: 120px; background-color: #fff; border-radius: 50%; padding: 15px; z-index: -1; display: grid; place-items: center; 
	box-shadow: 0 0 0 100px rgba(255,255,255,0.2), 0 0 0 150px rgba(255,255,255,0.1), 0 0 0 200px rgba(255,255,255,0.1);}
.mybnr2::before {color: #40bef6; font-size: 60px; padding: 0;}
.mybnr2--tlg {background: linear-gradient(135deg, #6b9899, #332a90);}
.mybnr2--kiss {background: linear-gradient(135deg, #da00be, #fbd301);}
.mybnr2--registr {background: linear-gradient(135deg, #38c16f, #38c16f);}
.mybnr2--pro1 {background: linear-gradient(135deg, #da00be, #fbd301);}
.mybnr2--lux {background: linear-gradient(135deg, #a697df, #f14b4b);}
.mybnr2--trance {background: linear-gradient(135deg, #4facfe, #aab406);}
.mybnr2--tunemo {background: linear-gradient(135deg, #3e9c92, #bdd956);}


/* SIDEBAR
----------------------------------------------- */
.sb__header {gap: 20px; padding-top: 30px; margin-bottom: 60px;}
.sb__btn-toggle {font-size: 24px; position: relative; left: 10px;}

.sb__menu {gap: 5px;}
.sb__menu a {display: flex; align-items: center; height: 40px; color: var(--tt-fade-0); 
	padding-left: 30px; gap: 20px; position: relative;}
.sb__menu a::before {width: 26px; font-size: 23px; color: var(--tt-icon);}
.sb__menu a::after {content: ''; width: 3px; height: 100%; position: absolute; top: 0; right: -3px; 
	background-color: var(--accent); box-shadow: -5px 0 7px rgba(56,193,111,0.32); opacity: 0; transform: scale(1,0);}
.sb__menu a.is-active {color: var(--tt);}
.sb__menu a.is-active::before {color: var(--accent);}
.sb__menu a.is-active::after {opacity: 1; transform: none;}
.sb__menu span {display: flex; align-items: center; gap: 15px; flex-grow: 1;}
.sb__online span::after {content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #ff63ab; animation: live 1.2s linear infinite;}
.sb__menu-years {padding: 25px 20px; padding-right: 0; margin-right: 20px; margin-top: 30px; 
	gap: 15px; border-top: 1px solid var(--bdc-darker);}
.sb__menu-years li {flex: 1 0 0; min-width: 26%;}
.sb__menu-years a, .sb__menu-years button {display: flex; align-items: center; justify-content: center; height: 35px; border-radius: 10px; 
	background-color: var(--bg-darker-2); color: var(--tt-fade-1); font-size: 13px; font-weight: 500; padding: 0; width: 100%;}
.sb__menu-years button {font-size: 24px;}

@media screen and (min-width: 1220px) {
	.col2 .wrapper {background-size: calc(100% - 80px) auto;}
	.col2 .wrapper__main {grid-template-columns: 95px minmax(0,1fr);}
	.col2 .sb__logo, .col2 .sb__menu-years {display: none;}
	.col2 .sb__menu a {padding: 0; justify-content: center;}
	.col2 .sb__menu span {position: absolute; height: 44px; border-radius: 10px; background-color: var(--accent); color: #fff; 
		padding: 0 15px; font-size: 14px; white-space: nowrap; box-shadow: 0 0 27px rgba(56,193,111,0.57); 
		left: 90%; top: 50%; margin-top: -22px; opacity: 0; visibility: hidden; transform: translateX(30px);}
	.sb__menu {gap: 10px;}
	.col2 .header__logo {display: flex;}
	.col2 .sb__btn-toggle {width: 100%; left: 0;}
	.col2 {--indent-negative: -115px; --indent: 115px;}
}
@media screen and (min-width: 1600px) {
	.col2 {--indent-negative: -150px; --indent: 150px;}
	.col2 .wrapper__main {grid-template-columns: 95px minmax(0,1fr);}
}


/* FOOTER, PAGINATION
----------------------------------------------- */
.footer__apps {gap: 15px; grid-column: 1 / 2; align-self: center;}
.footer__apps a {display: grid; place-items: center; width: 60px; aspect-ratio: 1 / 1; border-radius: 20px; 
	background: #9fa4ae; color: #fff; font-size: 30px;}
.footer__qr {grid-row: 1 / 3; grid-column: 3 / 4; aspect-ratio: 1 / 1; position: relative; margin-left: 60px;}
.footer__qr img {width: 100%; height: 100%; position: absolute; left: 0%; top: 0%;}
.footer__qr-caption {font-size: 11px; text-align: center; position: absolute; left: 0; right: 0; top: 100%; margin-top: 10px;}
.footer__menu {grid-column: 1 / 3; border-top: 1px solid var(--bdc-darker-1); padding-top: 26px;  
	display: grid; gap: 15px; grid-template-columns: repeat(3,1fr) max-content; align-self: start;}
.footer__text {align-self: center;}

.pagination {gap: 20px 60px; padding-top: 20px;}
.pagination a, .pagination span {display: grid; place-items: center; 
	height: 40px; min-width: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--bdc);}
.pagination__pages {gap: 10px 10px; font-size: 16px;}
.pagination__pages span:not(.nav_ext) {background-color: var(--accent); color: #fff; border-color: var(--accent);}
.sect:has(.trc) .pagination {padding-top: 40px;}


/* INNER PAGE
----------------------------------------------- */
.page {position: relative;}
.page__bg {position: absolute; left: var(--indent-negative); right: var(--indent-negative); top: -140px; z-index: -1; aspect-ratio: 3 / 1.5;}
.page__bg::before {content: ''; z-index: 1; position: absolute; inset: 0; 
	background-color: rgba(255,255,255,0.8); backdrop-filter: blur(20px);}
.page__bg::after {content: ''; position: absolute; inset: 0; z-index: 2; 
	background: linear-gradient(to top, var(--bg) 0%, transparent 50%);}

.page__main {display: grid; gap: 24px 55px; grid-template-columns: 350px 1fr;}
.page__main-img {border-radius: 10px; grid-column: 1 / 2; grid-row: 1 / 3;}
.page__main-img a {position: absolute; left: 10px; top: 10px; border-radius: 10px; width: 40px; height: 40px;
	display: grid; place-items: center; background-color: rgba(0,0,0,0.6); color: #fff; font-size: 18px;}
.page__main-header {align-self: end;}
.page__caption {font-weight: 500; color: var(--tt-icon); margin-bottom: 11px;}
.page__main-header h1 {font-size: 16px; color: var(--tt-fade);}
.page__main-header span {display: block; font-size: 30px; font-weight: 700; color: var(--tt);}
.page__main-header.expl h1 span::after {content: ''; display: inline-block; vertical-align: middle; margin-left: 10px;
    background: url(../images/explicit.svg) 0 0 / contain no-repeat; width: 15px; height: 15px;}
.dt .page__main-header.expl h1 span::after {filter: invert(1);}

.page__play {border-radius: 15px; font-size: 15px; font-weight: 400; gap: 20px; padding: 0 35px 0 25px; margin-right: 10px;}
.page__play::before {font-size: 18px;}
.page__ctrl-btn, .page__actions > a, .page__fav, .page__dl {display: flex; align-items: center; justify-content: center; 
	height: 50px; width: 50px; background-color: var(--bg); color: var(--tt-fade); font-size: 24px; 
	border: 1px solid var(--bdc-darker-1); border-radius: 15px; padding: 0; cursor: pointer;}
.page__meta {color: var(--tt-fade); --tt: var(--tt-fade); margin-top: 15px;}
.page__meta a {text-decoration: underline;}
.page__genres {--tt: var(--accent); margin-top: 30px;}
.page__ctrl.ctrl-is-active {z-index: 150;}
.page__ctrl.ctrl-is-active .page__ctrl-btn {background-color: var(--bg-btn-hover); color: var(--tt-btn); border-color: var(--bg-btn-hover);}
.favin, .page__fav::before {position: relative; top: 1px;}
.page__actions--btns {margin-bottom: 25px;}
.page__actions--btns > a {width: 40px; height: 40px; font-size: 18px; border-radius: 10px;}

.page__pl {padding: 0; border: 0; margin: -7px;}
.page__pl a {display: inline-flex; align-items: center; margin: 7px; padding: 0 20px; border-radius: 10px;
	background-color: var(--bg-darker-2); color: var(--tt-fade-1); height: 40px;}
.page__text, .page__info {max-height: 66vh; overflow-x: hidden; overflow-y: auto;}
.page__video {background-color: #000;}
.page__info li + li {margin-top: 15px;}
.page__info li > div:first-child {font-weight: 600; color: var(--tt-fade-1);}
.page__info li a {text-decoration: underline; color: var(--accent);}

.page-video .page__actions--btns {margin-right: 330px;}
.page-video__cols {display: grid; gap: 30px; grid-template-columns: minmax(0,1fr) 300px; margin-bottom: 20px;}
.page-video__like a {display: flex; align-items: center; height: 40px; border-radius: 10px; padding: 0 20px; 
	background-color: var(--bg-darker-2); color: var(--tt-fade-1); gap: 5px;}
.page-video__like a .has-icon {font-size: 22px; margin-right: 15px;}
.page-video .ctrl__btn {width: 40px; height: 40px; border-radius: 10px; font-size: 18px; padding: 0;}
.page__views {position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 10px 20px; white-space: nowrap;
	font-size: 12px; background-color: rgba(0,0,0,0.2); color: #fff; backdrop-filter: blur(10px); border-radius: 20px;}
.page-radio .page__main-img img {width: 80%; height: 80%; object-fit: contain;}
.page-radio .page__main-img {background-color: var(--bg); display: grid; place-items: center;}
.page-playlist .page__main {grid-template-columns: 420px 1fr;}
.page-playlist .page__main-img {aspect-ratio: 3 / 1.9;}
.page-tv__cols {display: grid; gap: 30px; grid-template-columns: minmax(0,1fr) 30%; margin-bottom: 30px;}
.page-tv__chat, .page-tv__video {background-color: #000; position: relative;}
.nMeet_area {position: absolute; inset: 0;}
.nMeet_area {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.nMeet_area .nMeet_chat_list_area {height: calc(100% - 45px);}
.nMeet_modal_smiles {overflow: auto;}
.tooltip {position: absolute; top: 45px; right: 10px; background-color: #f3ebebd6; color: #000000; padding: 20px;
    border: 1px solid #ccc; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: none;
    z-index: 100; width: calc(100% - 20px); word-wrap: break-word; overflow: auto; font-size: 12px;}
.tooltip-close {position: absolute; top: 5px; right: 5px; cursor: pointer; font-size: 18px;}
.tooltip-title {font-weight: 600; font-size: 15px; margin-bottom: 10px;}
.tooltip-list {list-style: disc; padding-left: 10px;}


/* TEXT BLOCK, TYPOGRAPHY, VIDEO BLOCK
----------------------------------------------- */
.page__title {margin-bottom: 30px; font-size: 24px;}
.full-text {line-height: 1.5; font-size: 15px; word-wrap: break-word;}
.full-text a {text-decoration: underline; color: var(--accent);}
.video-responsive {padding-top: 60%; position: relative; background-color: #000;}
.video-responsive > iframe, .video-responsive > video {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}


/* LOGIN
----------------------------------------------- */
.lp {position: fixed; z-index: 990; left: 0; top: 0; width: 100%; height: 100%; background-color: #eef1f8;}
.lp > img {position: fixed; left: 0; top: 0;}
.lp-panel {background-color: var(--bg); width: 1200px; position: relative; border-radius: 10px; padding: 68px 760px 52px 95px;}
.lp-panel > img {position: absolute; inset: 20px; left: auto; height: calc(100% - 40px); 
	width: 606px; object-fit: cover; display: block;}
.lp-panel__close {position: absolute; right: -36px; top: -36px; font-size: 24px;}
.lp-panel__logo {margin-bottom: 60px; padding-left: 84px;}
.lp-panel__logo.logo-icon::before {width: 64px; background-size: 54px; background-position: center bottom -8px;}
.lp-panel__logo .logo__subtitle {font-size: 15px; margin-top: 5px;}
.lp-panel__title {font-size: 24px; margin-bottom: 15px;}
.lp-panel__subtitle {color: var(--tt-fade); font-size: 13px; margin-bottom: 30px; line-height: 1.6;}
.lp-panel__subtitle a {text-decoration: underline; color: var(--accent);}
.lp-panel__form {gap: 20px;}
.lp-panel__input::before {position: absolute; right: 0; top: 50%; transform: translateY(-50%); 
	font-size: 19px; color: var(--ui-tt-fade); width: 60px; pointer-events: none;}
.lp-panel__input::after {content: attr(data-text); color: var(--ui-tt-fade); background-color: var(--bg);
	transition: padding 0.2s, font-size 0.2s, transform 0.2s, top 0.2s; pointer-events: none;
	position: absolute; left: 18px; top: 50%; transform: translateY(-50%);}
.lp-panel__input.is-active::after {top: 0; font-size: 13px; padding: 0 10px;}
.lp-panel__input.is-active::before {color: var(--accent);}
.lp-panel__btns {gap: 20px; padding-top: 6px; margin-bottom: 25px;}
.lp-panel__btns > * {border-radius: 6px;}
.lp-panel__link {background-color: var(--bg-darker-1); color: var(--tt);}
.lp-panel__social-caption {width: 100%; gap: 10px; color: var(--ui-tt-fade); margin-bottom: 25px;}
.lp-panel__social-caption::before, .lp-panel__social-caption::after {flex-grow: 1; background: var(--bdc); height: 1px; content: '';}
.lp-panel__social a {width: 50px; height: 50px; background-color: var(--bg-darker-1); 
	border-radius: 50%; margin: 0 6px; color: var(--tt-fade); font-size: 20px;}
.lp-panel__close {z-index: 10;}
.lp--appear {animation: appear 1s 1 ease-in-out; animation-fill-mode: forwards; display: flex;}
.lp--appear .lp-panel {animation: appear2 0.3s 1 ease-in-out; animation-fill-mode: forwards; 
	opacity: 0; transform: scale(0.9,0.9); animation-delay: 0.6s;}
.lp--hiding {animation: hiding 1s 1 ease-in-out; animation-fill-mode: forwards;}
.lp--hiding .lp-panel {animation: hiding2 0.3s 1 ease-in-out; animation-fill-mode: forwards;}
@keyframes appear {0% {clip-path: circle(0% at 0% 0%)} 100% {clip-path: circle(150vmax at 0% 0%)}}
@keyframes appear2 {0% {opacity: 0; transform: scale(0.9,0.9);} 100% {opacity: 1; transform: scale(1,1);}}
@keyframes hiding {0% {clip-path: circle(150vmax at 0% 0%)} 100% {clip-path: circle(0% at 0% 0%)}}
@keyframes hiding2 {0% {opacity: 1; transform: scale(1,1);} 100% {opacity: 0; transform: scale(0.9,0.9);}}
body.login-is-active {padding-right: var(--scrWidth,15px); overflow: hidden;}

.header__btn-notification.unread::after {
    content: attr(data-unread);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #ff63ab;
    position: absolute;
    right: 0px;
    top: 5px;
    color: #fff;
    font-size: 12px;
}
.header__login-short::before {font-size: 24px; color: var(--tt-icon); margin-right: -3px;}
.header__login-img {width: 50px; height: 50px; border-radius: 50%;}
.header__login-name {font-weight: 500;}
.header__login-img .header__login-status {border-radius: 8px; height: 16px; font-size: 10px;
	position: absolute; left: 130%; top: 0px; transform: translate(-50%,-50%); padding: 0 6px;}
.header__login-status, .header__lp-status-label div:first-child {height: 23px; padding: 0 10px; border-radius: 4px; 
	font-size: 12px; font-weight: 500; text-transform: uppercase; background-color: var(--bg-colored); color: var(--tt-on-colored); 
	transition: top 0.2s linear;}
.header__lp-status-label div:first-child {font-size: 14px; display: inline-flex;}
.header__login-status--pro, .header__lp-status-label div.pro  {background-color: #ff7e00; color: #fff;}

.header__lp, .header__notification-list {position: absolute; right: 0; top: 100%; background-color: var(--bg); 
	box-shadow: var(--bsh-long); border-radius: 15px; width: 360px; z-index: 100; 
	opacity: 0; visibility: hidden; transform: translateY(30px);}
.is-active .header__lp, .is-active .header__notification-list {opacity: 1; visibility: visible; transform: translateY(0px);}
.header__lp-header {padding: 30px; padding-bottom: 20px; font-size: 18px;}
.header__lp-avatar {width: 90px; height: 90px; border-radius: 50%; margin-bottom: 8px;}
.header__lp-group, .header__lp-group * {color: var(--tt-fade-1) !important; font-size: 13px; font-weight: 400;}
.header__lp-header > a, .header__lp-header > button {position: absolute; top: 15px; left: 15px; font-size: 24px;}
.header__lp-header > button {left: auto; right: 15px;}
.header__lp-status {background-color: var(--bg-darker); padding: 20px 30px; color: var(--tt-fade-1); font-size: 13px;}
.header__lp-btn {width: 160px; height: 34px; border-radius: 17px; font-size: 13px;}
.header__lp-menu {padding: 20px 0;}
.header__lp-menu a {display: flex; align-items: center; height: 44px; gap: 15px; padding: 0 30px;}
.header__lp-menu a span, .header__lp-menu a div {margin-left: auto; font-size: 12px; pointer-events: none;}
.header__lp-menu a::before {width: 24px; font-size: 24px; color: var(--tt-icon);}

.header__notification-list {width: 390px; padding: 15px;}
.header__notification-list-inner {max-height: 360px; overflow-y: auto; padding: 15px; padding-right: 25px;}
.header__notification-item {padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dashed var(--tt-icon);}
.header__notification-item-title {font-size: 15px; font-weight: 500;}
.header__notification-item-text {color: var(--tt-fade); font-size: 13px; margin-top: 10px;}
.header__notification-item-meta {color: var(--tt-icon); font-size: 13px; gap: 10px 20px; margin-top: 10px;}
.header__notification-item-meta a {text-decoration: underline; color: var(--accent);}
.header__notification-item-status {font-size: 12px;}
.header__notification-item-status::before {font-size: 19px;}
.header__notification-item-status.icon-check::before {color: var(--accent);}


/* GET REGISTRATION, VIDEO POPUP, REGISTER PAGE, RKL PROMOCODE POPUP, PROMOCODE PAGE
----------------------------------------------- */
.getreg, .pp {background-color: var(--bg); border-radius: 20px; padding: 160px 80px 90px 80px; width: 630px; position: fixed; 
	z-index: 999; left: 50%; top: 50%; transform: translate(-50%,-50%); box-shadow: var(--bsh-long); max-width: calc(100vw - 40px);}
.getreg::before {width: 220px; position: absolute; left: 50%; top: 0%; transform: translate(-50%,-39%); 
	background-position: center bottom -30px; background-size: 185px; border-radius: 60px;}
.getreg__title {font-weight: 800; font-size: 30px;}
.getreg__subtitle {color: var(--tt-fade); margin-bottom: 30px;}
.getreg__text {color: var(--tt-fade); margin-bottom: 40px;}
.getreg__btn {padding: 0 45px; background-color: #151515; border-radius: 10px; font-size: 16px; font-weight: 600;}
.getreg__close {position: absolute; right: 5px; top: 5px; font-size: 24px;}
.getreg__later {font-size: 12px; text-transform: uppercase; height: auto; margin-top: 15px; width: 100%; 
	text-transform: none; font-weight: 400; color: var(--tt-fade);}

.pp {padding: 30px; padding-top: 20px;}
.pp__header {margin-bottom: 20px; font-size: 24px; font-weight: 500; cursor: pointer;}
.pp__content .d-none {display: block;}
.pp__content .page__subtitle, .pp:has(.video-responsive) .pp__header .flex-grow-1 {display: none;}
.pp:has(.video-responsive) {padding: 0 !important; background: none; box-shadow: none;}
.pp:has(.video-responsive) .pp__header {position: absolute; color: #fff;
	right: 0px; bottom: 100%; font-size: 28px; padding: 0; margin: 0;}
.pp:has(.video-responsive) .pp__header::before {display: grid; place-items: center; width: 40px; height: 40px;}
@media screen and (min-width: 1220px) {
	.pp:has(.video-responsive) {width: calc(100vw - 200px) !important;}
	.pp:has(.video-responsive) .pp__header {right: auto; bottom: auto; right: -70px; top: -30px;}
	.pp .video-responsive {height: calc(100vh  - 100px); padding: 0;}
	.pp:has(.video-responsive) .pp__header::before {border-radius: 50%; background-color: rgba(255,255,255,0.15);}
}

.wrapper--register {background: url(../images/bg-login.jpg) center top / 100% auto fixed no-repeat !important; 
	padding: 60px 0; min-height: 100vh;}
.wrapper--register .wrapper__main, .wrapper--register .player {display: none;}
.wrapper--register .lp-panel {margin: 0 auto; max-width: 1200px;}

.rkla {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
}

.rkla__close {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 24px;
    color: #fff;
    z-index: 100;
}

.rkla__inner {
    background: rgba(255, 255, 255, 0.9); /* прозрачный светлый фон */
    backdrop-filter: blur(10px); /* размывает фон за окном */
    -webkit-backdrop-filter: blur(10px); /* для Safari */
    border-radius: 20px;
    
    color: var(--tt);
    width: 800px;
    max-width: 100%;
    overflow: hidden;
}

.rkla__img {
    aspect-ratio: 3 / 1;
    padding: 20px;
    background: #3f4347; /* светло-серый */
}

.rkla__desc {
    background-color: #273644; /* темно-серый */
    padding: 30px;
    display: flex;
    align-items: center;
}

.rkla__desc-left { flex-grow: 1; }
.rkla__desc-right { width: 300px; margin-left: 20px; }

.rkla__desc-right {
    display: flex;
    justify-content: flex-end; /* по умолчанию справа на десктопе */
    width: 100%;
    max-width: 300px;
    margin-left: 20px;
}

/* Медиазапрос для мобильных экранов (например, до 768px) */
@media (max-width: 768px) {
    .rkla__desc-right {
        justify-content: center; /* на мобильном по центру */
        margin-left: 0;          /* убираем отступ слева */
        margin-top: 15px;        /* можно добавить отступ сверху */
    }
}


.rkla__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    font-size: 18px;
    font-weight: 600;
    color: white;
    background: linear-gradient(90deg, #38c16f, #38c16f);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: box-shadow 0.25s ease, background 0.25s ease; /* убрали transform */
    
}

.rkla__btn:hover {
    /* убрали transform, чтобы не дергалась */
    box-shadow: 0 8px 25px rgba(74 199 117 / 50%);
    background: linear-gradient(90deg, #38c16f, #38c16f);
}



/* ПРОГРЕСС БАР */
.rkla__progress-container {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.15);
    border-radius: 15px;
    overflow: hidden;
}

.rkla__progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #38c16f, #38c16f);
}

.prcode__header {max-width: 600px; gap: 15px;}
.prcode__header input {border-radius: 15px;}
.prcode__benefits {gap: 20px; padding-top: 60px;}
.prcode__ben {border-radius: 10px; padding: 20px; font-size: 18px; flex: 1 0 280px; min-width: 280px; 
	background-color: var(--bg-darker); min-height: 160px; border: 3px solid var(--bdc-lighter); gap: 20px;}
.prcode__ben::before {font-size: 34px; color: var(--accent); align-self: flex-start;}


/* PLAYER 
----------------------------------------------- */
.player {position: fixed; z-index: 990; left: 0; bottom: 0; background-color: var(--bg); height: 70px;
	box-shadow: 0 0 35px rgba(0,0,0,0.21); width: 100%; gap: 15px; padding-right: var(--indent); --tt-icon: #585c66;}
.player__btns {gap: 15px; align-self: stretch; box-shadow: 20px 0 35px rgba(0,0,0,0.08); 
	width: 267px; margin-right: calc(var(--indent) - 15px);}
.player__btn {width: 40px; height: auto; aspect-ratio: 1 / 1; background: none; padding: 0; color: var(--tt-icon); font-size: 28px;} 
.player__btn-prev, .player__btn-next {font-size: 28px; --tt-icon: #b7b7b7;}
.player__btn-repeat, .player__btn-shuffle, .player__btn-playlist, .player__btn-menu {font-size: 22px; color: var(--tt-icon);}
.player__btn-playlist {font-size: 28px;}
.player__btn-menu {font-size: 24px;}
.player .ctrl__list .ctrl__list {transform: translateY(80px);}

.player__img {width: 40px; aspect-ratio: 1 / 1; margin-right: 15px; border-radius: 5px;}
.player__title {font-weight: 600; font-size: 15px;}
.player__subtitle {font-size: 13px; color: var(--tt-fade); margin-top: 3px;}
.player__time {display: flex; align-items: center; justify-content: center; height: 30px; min-width: 100px; border-radius: 6px; 
	padding: 0 10px; font-size: 13px; position: absolute; left: var(--time-progress,0%); bottom: 100%; pointer-events: none;
	gap: 5px; color: #fff; background: var(--accent);}
.player__time::after {content: ''; border: 8px solid transparent; border-top-color: var(--accent); 
	position: absolute; top: 100%; left: 50%; transform: translateX(-50%);}
.player__pl-count {font-size: 13px; color: var(--tt-fade); gap: 3px;}
.player__pl-count span:first-child {color: var(--tt); font-weight: 600;}
.player__info-text {max-width: calc(100% - 125px); margin-right: 30px; position: relative;}
.player__info-text.expl {padding-right: 30px;}
.player__info-text.expl:after {content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); 
	background: url(../images/explicit.svg) 0 0 / contain no-repeat; width: 15px; height: 15px;}

.player__volume {margin-left: calc(var(--indent) - 15px);}
.player__volume .player__range {width: 150px;}
.player audio {display: none;}
.player__range {--bdc: #e2e4e5;}
.player__bar {position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: -10px; --bdc: #b5c0cb;}

.player__range input[type="range"] {-webkit-appearance: none; appearance: none; justify-content: center;
	background: none; height: 20px; padding: 0; width: 100%; cursor: pointer; display: flex; flex-direction: column;}
.player__range input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; cursor: pointer;
	width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--accent);}
.player__range input[type="range"]::-webkit-slider-runnable-track {width: 100%; height: 2px; cursor: pointer;
	background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--range-progress), 
	var(--bdc) var(--range-progress), var(--bdc) 100%); border-radius: 2px;}
.player__range input[type="range"]::-moz-range-thumb {-webkit-appearance: none; appearance: none; cursor: pointer;
	width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background-color: var(--accent);}
.player__range input[type="range"]::-moz-range-track {width: 100%; height: 2px; cursor: pointer;
	background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--range-progress), 
	var(--bdc) var(--range-progress), var(--bdc) 100%); border-radius: 2px;}

.player--is-playing .player__btn-play::before {content:"\e905";}
.player--is-repeated .player__btn-repeat:not(:hover), .player--is-shuffled .player__btn-shuffle:not(:hover), 
.player__ctrl.ctrl-is-active .player__btn-menu, .player__btn-playlist.is-active {color: var(--accent);}

.player__playlist {width: 100%; position: absolute; right: 0; bottom: 100%;
	box-shadow: var(--bsh); background-color: var(--bg); z-index: -1; display: none; 
	height: calc(100vh - 70px); height: calc(100dvh - 70px);}
.player__playlist.is-active {display: block;}
.player__playlist-title {max-width: calc(100% - (var(--indent)*2)); margin: 0 auto; 
	font-size: 18px; font-weight: 600; height: 80px; cursor: pointer;}
.player__playlist-title::before {font-size: 24px;}
.player__playlist-list {overflow-x: hidden; overflow-y: auto; width: 100%; 
	height: calc(100vh - 200px); height: calc(100dvh - 200px);}
@media screen and (min-width: 1220px) {
	.player__volume {margin-right: var(--scrWidth);}
}

body.pl-opened {padding-right: var(--scrWidth,15px); overflow: hidden;}
.pl-item {gap: 15px; position: relative; cursor: pointer; padding: 15px var(--indent); border-bottom: 1px solid var(--bdc);}
.pl-item__img {width: 50px; border-radius: 10px;}
.pl-item__title {font-size: 15px; font-weight: 600; color: var(--tt);}
.pl-item__subtitle {font-size: 14px; color: var(--tt-fade);}
.pl-item__time {color: var(--tt-fade); font-weight: 500; width: 120px; height: 50px;}
.pl-item__img::before {position: absolute; inset: 0; border-radius: inherit; z-index: 5; 
	display: grid; place-items: center; color: #fff; background-color: var(--accent); font-size: 24px; 
	content:"\e904"; font-family:'ft-custom'; opacity: 0; transition: opacity 0.2s linear;}
.pl-item.is-playing {cursor: default; pointer-events: none; background-color: var(--bg-darker);}
.pl-item.is-playing::before {content: ''; width: 10px; height: 100%; position: absolute; top: 0; left: 0; 
	background-color: var(--accent); box-shadow: 5px 0 7px rgba(56,193,111,0.32);}
.pl-item.is-playing .pl-item__img::before {background-color: rgba(0,0,0,0.6); content:"\e905"; opacity: 1;}
.pl-item:hover .pl-item__img::before {opacity: 1;}
.pl-item:hover {background-color: var(--bg-darker);}
.pl-item.is-playing .pl-item__time {background: url(../images/waves.svg) left center / 40px no-repeat;}

.player--not-loaded button:not(.player__btn-play), .player--not-loaded .player__dl, 
.player--not-loaded .player__bar {pointer-events: none;}

.player__bar {transition: margin-bottom 0.2s linear;}
.player__time {opacity: 0; transform: scale(0.6,0.6) translate(-50%,-10px); transform-origin: center center; transition: opacity 0.2s, transform 0.2s;}
.player__bar input[type="range"]::-webkit-slider-thumb {transition: opacity 0.2s linear;}
.player:not(.player--not-loaded):hover .player__bar input[type="range"]::-webkit-slider-runnable-track {transition: height 0.2s linear;}
.player:not(.player--not-loaded):hover .player__bar input[type="range"]::-moz-range-thumb {transition: opacity 0.2s linear;}
.player:not(.player--not-loaded):hover .player__bar input[type="range"]::-moz-range-track {transition: height 0.2s linear;}
.player:not(.player--not-loaded):hover .player__time {opacity: 1; transform: scale(1,1) translate(-50%,-10px);}
.player:not(.player--not-loaded):hover .player__bar {margin-bottom: 0;}
.player:not(.player--not-loaded):hover .player__bar input[type="range"]::-webkit-slider-thumb {opacity: 0;}
.player:not(.player--not-loaded):hover .player__bar input[type="range"]::-webkit-slider-runnable-track {height: 20px;}
.player:not(.player--not-loaded):hover .player__bar input[type="range"]::-moz-range-thumb {opacity: 0;}
.player:not(.player--not-loaded):hover .player__bar input[type="range"]::-moz-range-track {height: 20px;}
	

/**
 * Owl Carousel v2.3.4
 * Copyright 2013-2018 David Deutsch
 * Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
 */
.owl-carousel {width: 100%; position: relative; z-index: 1;}
.owl-stage {position: relative; display:flex; justify-content:flex-start;}
.owl-stage-outer {position: relative; transform: translate3d(0px, 0px, 0px);}
.owl-item {position: relative; min-height: 10px;}
.owl-nav.disabled,.owl-dots.disabled, .owl-carousel.owl-refresh .owl-item {display: none;}
.owl-carousel.owl-drag .owl-item {user-select: none;}
.owl-carousel.owl-grab {cursor: move; cursor: grab;}
.owl-nav {position: absolute; left: 0; right: 0; top: 50%; margin-top: -30px;}
.owl-prev, .owl-next {cursor: pointer; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; 
	position: absolute; top: 0; background-color: var(--bg); color: var(--tt-icon); font-size: 24px; box-shadow: 0 5px 10px rgba(0,0,0,0.066);}
.owl-prev {left: -30px;}
.owl-next {right: -30px;}
.owl-prev:hover, .owl-next:hover {background-color: var(--bg-btn-hover); color: var(--tt-btn);}
.video-slider .owl-nav button {margin-top: -25px;}
.artist-slider .owl-nav button {margin-top: -25px;}
.album2-slider .owl-nav button {margin-top: -30px;}
#owl-popular .owl-nav {left: auto; top: 0; margin-top: -82px; display: flex; gap: 10px;}
#owl-popular .owl-nav button {position: static; margin: 0;}

.sect:has(.has-slider-popular) .sect__header {padding-right: 140px;}
.sect:has(.has-slider-popular) {padding-top: 15px; margin-top: -15px;}
.sect:has(.has-slider), .sect:has(.has-slider-popular) {margin-left: var(--indent-negative); margin-right: var(--indent-negative); 
	padding-left: var(--indent); padding-right: var(--indent); overflow: hidden; padding-bottom: 80px; margin-bottom: 0 !important;}
.sect--last, .sect--last-full:has(.owl-nav.disabled) {padding-bottom: 0 !important;}
.has-slider:has(.owl-nav.disabled) + .owl-carousel-progress-bar {display: none;}

.has-slider:not(.mybnr-slider) .owl-item, .has-slider-popular .owl-item {opacity: 0; pointer-events: none; transform: scale(0.6,0.6); transition: opacity 0.3s, transform 0.3s;}
.has-slider:not(.mybnr-slider) .owl-item.active, .has-slider-popular .owl-item.active {opacity: 1; pointer-events: auto; transform: scale(1,1);}
.owl-carousel-progress-bar {position: absolute !important; margin-bottom: 45px !important;
	left: var(--indent); right: var(--indent); bottom: 0; border-radius: 3px;}
.owl-carousel-progress-bar-scroller {border-radius: 3px;}
.mybnr-slider .owl-stage-outer {overflow: hidden;}
.mybnr-slider.owl-carousel {margin-left: var(--indent-negative); margin-right: var(--indent-negative); width: calc(100% + (var(--indent)*2));}
.mybnr-slider .owl-prev {left: var(--indent);}
.mybnr-slider .owl-next {right: var(--indent);}
.mybnr-slider .owl-nav.disabled {display: block;}

.trfs {gap: 30px;}
.trf {flex: 1 1 240px; min-width: 240px; max-width: 100%; gap: 25px;
  background-color: var(--bg); padding: 30px; border-radius: 10px; box-shadow: var(--bsh-album)}
.trf-title, .trf-price-cur {font-weight: 800; font-size: 24px; text-transform: uppercase;}
.trf-list {gap: 5px; display: flex; flex-direction: column;}
.trf-list li {position: relative; padding-left: 28px;}
.trf-list li::before {position: absolute; left: 0; top: 2px; color: #38c16f;}
.trf-list li sup {color: red;}
.trf-price {margin-top: auto; padding-top: 20px; gap: 5px 10px;}
.trf-price-old, .trf-price-label {color: var(--tt-fade-1); font-weight: 700; position: relative;}
.trf-price-label {font-size: 18px;}
.trf-price-old::before {content: ''; height: 1px; background-color: red; width: 100%; 
  rotate: -45deg; position: absolute; left: 50%; top: 50%; translate: -50% -50%;}
.trf-btn {font-size: 16px; border-radius: 6px;}
.trf-btn-orange {background-color: #db8f02;}
.trf-btn-red {background-color: #da0202;}
.trf-popular {border: 3px solid #02db5c; overflow: hidden; position: relative;}
.trf-popular::before {content: attr(data-text); width: 200px; padding: 10px; text-align: center; 
  text-transform: uppercase; font-size: 12px; font-weight: 700; background-color: #02db5c; color: #ffff; 
  position: absolute; right: -76px; top: 16px; rotate: 45deg; z-index: 5; pointer-events: none;}
.trf-dark {--bg: #273644; color: #fff; --tt-fade-1: #ccc;}
.dt .trf-dark {border: 3px solid var(--bdc);}
@media screen and (max-width: 1220px) {
  .trfs {gap: 20px;}
}
@media screen and (min-width: 2000px) {
  :root {--indent: 200px; --indent-negative: -200px;}
  .col2 {--indent-negative: -200px; --indent: 200px;}
}
.dle-bug label {
    display: block;
    margin: 5px 0px;
}

.playlist {
    display: flex;
    align-items: center;
    gap: 15px;
}

.playlist-cover {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 50%;
}

.playlist-info {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.playlist-type {
    font-size: 14px;
    opacity: 0.8;
}

.playlist-title {
    font-size: 28px;
    font-weight: bold;
}

.playlist-edit {
    font-size: 14px;
    opacity: 0.7;
}