/* BASIC LAYOUT
----------------------------------------------- */
.wrapper {min-width: 320px; position: relative; padding-top: 20px;}
.wrapper__container {max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 20;}
.wrapper__main {background-color: var(--bg); box-shadow: var(--bsh);}
.header {
    padding: 20px var(--indent);
    background-color: #0d1b2a; /* тёмно-синий подложка */
    background-image: url('../images/pattern.png');
    background-repeat: repeat;
    background-size: 150px auto; /* подгони под нужную плотность */
    background-position: center;
    position: relative;
    z-index: 100;
    gap: 10px 20px;
}
.nav {padding: 0 var(--indent); background-color: var(--bg-darker); border-top: 5px solid var(--accent);}
.content {min-height: 80vh;}
.cols {display: grid; grid-template-columns: 360px minmax(0,1fr); grid-template-areas: "side main";}
.cols__side {grid-area: side; padding-bottom: 40px;}
.cols__main {grid-area: main; padding: 40px var(--indent);}
.footer__main {padding: 20px var(--indent); background-color: var(--bg-darker); gap: 20px;}
.footer__bottom {padding: 20px var(--indent); background-color: var(--bg-black); gap: 20px;}
.header, .footer__bottom {color: var(--tt-bg-black); --tt: var(--tt-bg-black); 
	--tt-fade: var(--tt-bg-black-fade); --bdc: var(--bdc-bg-black);}

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


/* HEADER
----------------------------------------------- */
.logo {
    display: flex;
    align-items: center;
    height: 40px;
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
    padding-left: 50px;
    background: url(../images/logo1.png) 0 center / 40px no-repeat;
    position: relative;
    gap: 5px;
}

.logo span:first-child,
.logo span:last-child {
    background: linear-gradient(90deg, #e53935, #ffffff, #1e88e5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.logo__caption {
    font-size: 12px;
    color: var(--tt-fade);
    padding-left: 20px;
    border-left: 1px solid var(--bdc);
    align-self: flex-end;
    line-height: 1;
}
.theme-toggle {background-color: var(--bg-black-lighter); border-radius: 20px; gap: 5px; padding: 5px; color: var(--tt-colored);}
.theme-toggle::before, .theme-toggle span {display: grid; place-items: center; width: 30px; height: 30px; 
	border-radius: 50%; font-size: 14px;}
body:not(.dt-is-active) .theme-toggle::before, .dt-is-active .theme-toggle .icon {background-color: var(--blue); color: #fff;}
.header__link {color: var(--tt-colored);}

.search-block {width: 100%; position: relative; margin: 0 20px;}
.search-block__input, .search-block__input:focus {border-radius: 0; padding: 0 50px 0 20px; 
	border: 0; box-shadow: none; background-color: var(--bg-black-lighter); color: var(--tt);}
.search-block__input:not(:focus)::placeholder {color: var(--tt-fade); opacity: 1; font-size: 14px;}
.search-block__btn {position: absolute; right: 0; top: 0; width: 50px; border-radius: 0px; 
	font-size: 16px; background-color: var(--accent); color: #fff;}


/* NAV
----------------------------------------------- */
.nav__menu {gap: 0 30px; font-size: 15px;}
.nav__menu a {display: flex; align-items: center; height: 70px; position: relative;}
.nav__menu a span {font-size: 12px; background-color: var(--orange); color: #fff; display: inline-block; 
	position: absolute; top: 5px; right: 0; padding: 2px 8px; border-radius: 10px; transform: translateX(50%);}


/* SECTION
----------------------------------------------- */
.sect:not(:last-child) {margin-bottom: 40px;}
.sect__header {margin-bottom: 30px;}
.sect__title {font-size: 24px; font-weight: 700; line-height: 1.2;}
.sect__title::after {content: ''; height: 1px; background-color: var(--bdc); flex-grow: 1;}
.sect__subtitle {font-size: 16px; font-weight: 600;}
.sect__title::first-letter {color: var(--orange);}
.sect--carousel {padding: 20px var(--indent); background-color: var(--bg-black); margin: 0 !important; 
	--tt: var(--tt-bg-black); --bdc: var(--bdc-bg-black); color: #fff;}
.sect--carousel .sect__header {margin-bottom: 20px;}
.sect--carousel:not(.sect--nocarousel) .sect__header {padding-right: 90px;}
.sect__tabs {gap: 5px; margin-right: 10px;}
.sect__tabs button {background-color: var(--bg-black-lighter); color: var(--tt-bg-black-fade); height: 30px; padding: 0 10px;}
.sect__tabs button.is-active {background-color: var(--blue); color: #fff;}
.sect__loader {font-size: 100px; display: grid !important; place-items: center; 
	grid-column: 1 / -1; width: 100%; opacity: 0.5; min-height: 180px;}
.speedbar + .sect > .sect__header {margin-bottom: 20px;}
.speedbar {color: var(--tt-fade); font-size: 12px; border-bottom: 1px solid var(--bdc);
	padding: 15px var(--indent); margin: -40px var(--indent-negative); margin-bottom: 20px;}
.speedbar::before {color: var(--accent); margin-right: 5px;}
.descr {display: grid; grid-gap: 20px; line-height: 1.6; padding: 40px var(--indent); 
	border-top: 1px solid var(--bdc); margin-top: 40px; color: var(--tt-fade-0);}
.sect__descr {margin: 0; padding: 0; border: 0; gap: 10px; margin-bottom: 30px;}
.sect--descr .sect__header {margin-bottom: 15px;}
.descr :is(h1, h2, h3) {font-size: 16px; color: var(--tt); line-height: 1.3; font-weight: 600;}
.descr :is(h1, h2, h3)::first-letter {color: var(--orange);}
.descr a {text-decoration: underline; color: var(--accent);}
.descr b, .descr strong {font-weight: 400;}
.descr ul li {position: relative; padding-left: 25px; margin-left: 25px;}
.descr ul li::before {content:"\e915"; font-weight: 300; font-family:'fa-custom'; 
	color: var(--accent); position: absolute; left: 0; top: 0;}
.sect__tabs2 {margin-bottom: 30px; margin-top: -10px; gap: 10px;}
.sect__tabs2 button {flex: 1 0 max-content; max-width: 100%; min-width: max-content; 
	background-color: var(--bg-darker); color: var(--tt);}
.sect__tabs2 button.is-active, .sect__tabs2 button:hover {background-color: var(--blue); color: #fff;}


/* POSTER SHORT STORY
----------------------------------------------- */
.poster-item__img {border: 8px solid var(--bg); box-shadow: 0 0 0 1px var(--bdc); padding-top: 140%; margin-bottom: 10px;}
.poster-item__label, .poster-item__rating {position: absolute; padding: 5px 10px; font-size: 12px; color: #fff;}
.poster-item__label--series {right: 0; top: 36px; background-color: var(--blue);}
.poster-item__label--status {right: 0; top: 5px; color: var(--bg-black); background-color: var(--tt-colored);}
.poster-item__rating {left: 0; top: 5px; gap: 5px; color: var(--bg-black); background-color: var(--tt-colored);}
.poster-item__title {font-size: 16px; font-weight: 600; padding-left: 8px;}
.poster-item__category {color: var(--tt-fade); font-size: 13px; margin-top: 3px; gap: 4px; padding-left: 8px;}
.poster-item__meta {font-size: 12px; color: var(--tt-colored); gap: 0 10px; 
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; padding: 10px;}
.poster-item__meta-item {display: flex; align-items: center; gap: 5px; line-height: 1;}
.poster-item__meta-item::before {font-size: 11px;}
.has-overlay-on-img__trg::before {position: absolute; inset: 0; display: grid; place-items: center; 
	background-color: rgba(0,0,0,0.5); color: #fff; font-size: 34px; z-index: 10; opacity: 0;}
.poster-item__fav {position: absolute; left: 17px; top: 0px; z-index: 15;}
.poster-item__fav .icon {width: 30px; height: 30px; position: relative; padding-top: 5px;
	background-color: #f6f5f7; color: var(--tt-fade); font-size: 14px; box-sizing: border-box}
.poster-item__fav .icon::after {content: ''; position: absolute; left: 0; top: 100%; transform-origin: center top;
	border: 15px solid transparent; border-top-color: #f6f5f7; transform: scale(1,0.5); margin-top: -0px;}
.poster-item__fav .icon.poster-item__fav-added {background-color: var(--orange); color: #fff;}
.poster-item__fav .icon.poster-item__fav-added::after {border-top-color: var(--orange);}
.poster-item__fav a {transition: none;}


/* UPDATE ITEM
----------------------------------------------- */
.upd-item {background-color: var(--bg-darker-2); --bg-upd: var(--orange);}
.upd-item + .upd-item {margin-top: 5px;}
.upd-item:nth-child(2n+1) {background-color: var(--bg-darker); --bg-upd: var(--accent);}
.upd-item__link {padding: 10px; gap: 10px;}
.upd-item__link::before {width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; 
	background-color: var(--bg-upd); color: #fff; font-size: 8px; box-sizing: border-box; padding-left: 2px;}
.upd-item__series {height: 24px; font-size: 12px; border-radius: 12px; padding: 0 15px; background-color: var(--bg);}


/* COLLECTION TILE
----------------------------------------------- */
.collection-tile {display: block; border: 8px solid var(--bg); box-shadow: 0 0 0 1px var(--bdc);}
.collection-tile__img {height: 160px;}
.collection-tile__img::after {opacity: 0.66; height: 100%;}
.collection-tile__desc {position: absolute; inset: 0; z-index: 10; padding: 15px; color: #fff; gap: 10px;}
.collection-tile__title {font-weight: 600; font-size: 16px;}
.collection-tile__meta {font-size: 12px; color: var(--tt-bg-black-fade); gap: 10px;}
.collection-tile__meta-item::before {color: var(--orange); margin-right: 5px;}
.collection-tile__label {color: var(--bg-black); background-color: var(--tt-colored); 
	position: static; left: 0; top: 10px; padding: 5px 10px; font-size: 12px; align-self: flex-start;}
.collection-tile__meta-item:last-child::before {font-size: 4px; color: var(--tt-bg-black-fade); margin: 0; opacity: 0.5;}


/* TOP ITEM
----------------------------------------------- */
.top-item__img {padding-top: 140%;}
.top-item__title {position: absolute; left: 0; bottom: 0; right: 0; padding: 10px 15px; 
	color: #fff; background-color: rgba(0,0,0,0.66); z-index: 9;}


/* SIDEBAR
----------------------------------------------- */
.side-menu {position: relative; isolation: isolate; overflow: hidden; padding: 40px var(--indent);}
.side-menu--dark {background-color: var(--accent); color: #fff; --tt: #fff;}
.side-menu--light {background-color: var(--bg-darker);}
.side-menu::before {font-size: 200px; opacity: 0.1; transform: translate(40%,-40%);
	position: absolute; right: 0; top: 0; z-index: -1;}
.side-menu--light::before, .side-menu--light .side-menu__caption {color: var(--accent);}
.side-menu__caption {font-size: 24px; font-weight: 700; margin-bottom: 20px; text-transform: uppercase;}
.side-menu__list {display: grid; grid-template-columns: repeat(2,1fr); gap: 0 20px;}
.side-menu__list li {position: relative;}
.side-menu__list a {display: block; padding: 5px 0;}
.side-menu__list li span {font-size: 12px; pointer-events: none; opacity: 0.66;
	position: absolute; right: 0; top: 50%; transform: translateY(-50%);}

.sb {padding: 40px var(--indent); padding-bottom: 0;}
.sb--sticky {position: sticky; left: 0; top: 0;}
.sb__title {font-weight: 700; font-size: 18px; margin-bottom: 30px; text-transform: uppercase; color: var(--accent); line-height: 1;}
.sb__items {display: grid; gap: 10px; grid-template-columns: repeat(auto-fill,minmax(280px,1fr));}
.sb__items--collection {gap: 15px;}
.sb__title::before {display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; 
	font-size: 14px; background-color: var(--blue); color: #fff;}
.sb__btn {grid-column: 1 / -1; background-color: var(--bg-darker); color: var(--tt-fade);}

.collection-item {gap: 15px;}
.collection-item__img {width: 66px; height: 66px; border: 5px solid var(--bg); box-shadow: 0 0 0 1px var(--bdc);}
.collection-item__title {font-weight: 600;}
.collection-item__meta {font-size: 12px; color: var(--tt-fade); margin-top: 6px; gap: 10px;}
.collection-item__meta-item::before, .poster-item__rating::before {color: var(--orange); margin-right: 5px;}
.collection-item__label {color: var(--accent); font-size: 12px; margin-top: 5px;}
.collection-item__meta-item:last-child::before {font-size: 4px; color: var(--tt-fade); margin: 0; opacity: 0.5;}
	
.lcomm {background-color: var(--bg-darker-2); padding: 15px;}
.lcomm:nth-child(2n) {background-color: var(--bg-darker);}
.lcomm__header {margin-bottom: 15px; gap: 10px;}
.lcomm__img {width: 40px; height: 40px; border-radius: 50%;}
.lcomm__author {font-weight: 600; color: var(--accent);}
.lcomm__date {font-size: 12px; color: var(--tt-fade); margin-top: 3px;}
.lcomm__rating {color: var(--tt-fade); align-self: flex-start; gap: 3px;}
.lcomm__rating span {font-weight: 700; color: var(--green);}
.lcomm__rating span:last-child {color: var(--red);}
.lcomm__link {font-weight: 600; padding-top: 10px; border-top: 2px dotted var(--bdc); color: var(--accent);}
.lcomm__text {margin: 10px 0; -webkit-line-clamp: 3; color: var(--tt);}


/* FOOTER, PAGINATION
----------------------------------------------- */
.footer__menu {gap: 10px 30px;}
.footer__btn {height: 30px; padding: 0 15px;}

.pagination {gap: 20px 40px;}
.pagination a, .pagination span {display: grid; place-items: center; 
	height: 36px; min-width: 36px; padding: 0 10px; border: 1px solid var(--bdc);}
.pagination__btn-loader {width: 100%;}
.pagination__btn-loader a, .pagination__btn-loader span {height: 40px; 
	background-color: var(--bg-darker); border: 0; color: var(--tt-fade); width: 370px;}
.pagination__pages {gap: 10px 10px; font-size: 15px;}
.pagination__pages span:not(.nav_ext) {background-color: var(--accent); color: #fff; border-color: var(--accent);}
.pagination > a, .pagination > span {border-radius: 20px;}


/* INNER PAGE
----------------------------------------------- */
.page__header {display: grid; gap: 20px 20px; grid-template-columns: 200px minmax(0,1fr); align-items: start;
	grid-template-rows: auto 1fr auto; grid-template-areas: "pheader pheader" "pimg plist" "pctrl pctrl";}
.page__header-header {grid-area: pheader;}
.page__header-img {grid-area: pimg;}
.page__header-list {grid-area: plist;}
.page__header-ctrl {grid-area: pctrl;}

.page__header h1 {font-size: 24px; text-transform: uppercase; font-weight: 700; line-height: 1.1;}
.page__header h1::first-letter, .page__subtitle::first-letter {color: var(--orange);}
.page__header h1 a {margin-left: 10px; font-size: 16px;}
.page__original {color: var(--tt-fade-0); margin-top: 8px; font-size: 15px; margin-bottom: 25px;}
.page__meta {color: var(--tt-fade); font-size: 12px; gap: 5px 20px; border: 1px solid var(--bdc);
	border-left: 0; border-right: 0; padding: 10px var(--indent); margin: 0 var(--indent-negative);}
.page__meta-item.d-flex span {display: grid; place-items: center; width: 26px; height: 26px; 
	font-weight: 600; background-color: #fe7500; color: #fff; border-radius: 50%;}
.page__meta-item--imdb.d-flex span {background-color: #f1c42d; color: #000;}
.page__meta-item--dorama.d-flex span {background-color: var(--accent);}
.page__poster {width: 200px; height: 300px; border: 8px solid var(--bg); box-shadow: 0 0 0 1px var(--bdc);}

.page__list {font-size: 13px;}
.page__list li + li {margin-top: 10px;}
.page__list a {color: var(--blue); text-decoration: underline;}
.page__list li > span:first-child {font-weight: 600; margin-right: 5px;}
.page__btn-watch {max-width: 40%; position: relative; align-items: flex-start; color: var(--tt-bg-black-fade);
	flex-direction: column; height: 60px; padding: 0 20px 0 80px; line-height: 1;}
.page__btn-watch span {display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 
	text-transform: none; font-size: 14px; padding-bottom: 2px; margin-top: -4px; color: #fff;}
.page__btn-watch::before {position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.15); 
	display: grid; place-items: center; width: 60px; height: 100%; font-size: 16px; color: var(--tt-colored);}
.page__btn-lists {background-color: var(--bg-darker); color: var(--tt-fade);}
.page__fav a {display: flex; align-items: center; height: 40px; position: relative; 
	padding-left: 50px; font-size: 12px; color: var(--tt-fade); margin-right: 10px;}
.page__fav a .icon::before, .page__fav a .icon::before, .page__fav a::before {display: grid; place-items: center; 
	width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bdc); color: var(--tt-fade); 
	font-size: 16px; position: absolute; left: 0; top: 0;}

.page__text {margin-top: -5px;}
.page__age, .page__caption {background-color: var(--bg-darker-2); padding: 18px; margin-bottom: 20px; 
	border: 1px solid var(--orange); position: relative; padding-left: 60px;}
.page__age::before, .page__caption::before {display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; 
	background-color: var(--orange); color: #fff; position: absolute; left: 15px; top: 50%; margin-top: -15px;}
.page__subtitle {margin-bottom: 20px; font-size: 16px; font-weight: 600; text-align: center;}
.page__caption {background-color: var(--bg-darker); border-color: var(--accent); border: 0; margin-bottom: 30px;}
.page__caption::before {background-color: var(--accent);}

.page__player {position: relative; background-color: var(--bg-black); margin-bottom: 5px;}
.tabs-block__select button {background-color: var(--bg-black-lighter); color: var(--tt-bg-black-fade);}
.tabs-block__select button.is-active, .tabs-block__select button:hover {background: var(--accent); color: #fff;}
.page__complaint-stars {position: absolute; right: 0px; top: 0; gap: 10px;  
	color: var(--tt-colored); --tt: var(--tt-colored); height: 40px; padding: 0 20px;}
.not-loaded .tabs-block__select + .d-none {display: block;}
.page__tabs-mylists, .page__player-btns {gap: 5px; padding: 5px;}
.page__tabs-mylists li, .page__player-btns .btn, .page__date {background-color: var(--bg-black-lighter); color: var(--tt-bg-black-fade);}
.page__tabs-mylists li.is-active, .page__player-btns .btn:hover {background-color: var(--blue); color: #fff;}
.page__date {font-size: 12px; padding: 5px 10px;}

.page__series {background-color: rgba(0,0,0,0.2); position: relative; padding: 5px; padding-bottom: 0; gap: 5px;} 
.page__series-list {padding-bottom: 5px; gap: 5px; display: flex;}
.scroller__content {overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;}
.scroller__content {scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg-black-lighter);}
.scroller__content::-webkit-scrollbar {width: 12px; height: 8px; display: none;}
.scroller__content::-webkit-scrollbar-thumb {border-radius: 0; background-color:var(--red); border: 0;}
.scroller__content::-webkit-scrollbar-track {background-color: var(--bg-black-lighter);}
.scroller__btn {padding: 0; height: 36px; width: 36px; background: none; 
	color: #fff; border: 3px solid var(--bdc-bg-black); border-radius: 18px;}
.page__series-list a {flex-shrink: 0; scroll-snap-align: start; display: flex; align-items: center; padding: 0 18px;
	background-color: var(--bg-black-lighter); color: var(--tt-bg-black-fade); border-radius: 18px; height: 36px;}
.page__series-list a.is-active, .page__series-list a:hover {background: var(--accent); color: #fff;}

.page__stars-rating {margin: 15px 0 !important; position: relative; gap: 5px 15px;}
.page__stars-rating-score {height: 40px; width: 40px; border-radius: 50%; 
	background-color: var(--green); color: #fff; font-weight: 500; font-size: 18px;}
.page__stars-rating-votes {font-size: 12px;}

.page__collections-list {margin-bottom: 30px !important;}
.page__collections-list a, .page__collections-list span {background-color: var(--bg-darker); --bg-coll: var(--accent); 
	padding: 10px; gap: 10px; display: flex; align-items: center;}
.page__collections-list a + a, .page__collections-list a + span {margin-top: 5px;}
.page__collections-list a:nth-child(2n+1), .page__collections-list span:nth-child(2n+1) {background-color: var(--bg-darker-2); --bg-coll: var(--orange);}
.page__collections-list a::before, .page__collections-list span::before {content:"\e92a"; font-family:'fa-custom'; color: var(--bg-coll);}
.page__franchise .sect__header {margin-bottom: 15px;}
.page__collections-list span {box-shadow: inset 0 0 0 1px var(--blue);}
.page__collections-list span::before {content:"\e908";}

.carousel__content:not(.owl-carousel) {display: flex; overflow: hidden; gap: 15px;}
.carousel__content:not(.owl-carousel) > .related-item {flex-shrink: 0; width: calc((100% - 60px)/5);}
.carousel__content:not(.owl-carousel) > .popular-item {flex-shrink: 0; width: calc((100% - 15px)/2);}
.carousel__content:not(.owl-carousel) > .top-item {flex-shrink: 0; width: calc((100% - 105px)/8);}
.carousel__content .poster-item {padding: 1px;}
.carousel__content .poster-item__img {border-width: 6px;}
.carousel__content .poster-item__title {padding-left: 6px; font-size: 15px;}

.page--serie .page__original {margin-bottom: 0;}
.page--serie .page__header {margin-bottom: 20px; display: block;}
.dt-is-active .page__stars-rating-votes, .dt-is-active .page--serie .page__caption {color: var(--tt-fade);}
.ui-dialog-content a {color: var(--ui-accent); text-decoration: underline;}


/* TEXT BLOCK, TYPOGRAPHY, VIDEO BLOCK
----------------------------------------------- */
.page__title {margin-bottom: 30px; font-size: 24px;}
.full-text {line-height: 1.6; font-size: 14px; word-wrap: break-word;}
.full-text a {text-decoration: underline; color: var(--blue);}
.full-text img:not(.emoji), .full-text p, .full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5, 
.full-text > ul, .full-text > ol, .full-text table {margin-bottom: 25px;}
.full-text > img[style*="left"], .full-text > .highslide img[style*="left"] {margin:0 10px 10px 0;}
.full-text > img[style*="right"], .full-text > .highslide img[style*="right"] {margin:0 0 10px 10px;}
.full-text > ul li, .full-text > ol li {padding-left: 60px; position: relative;}
.full-text > ul li:before {content: ''; width: 8px; height: 8px; border-radius: 50%; 
	border: 3px solid var(--orange); position: absolute; top: 6px; left: 34px;}
.full-text > ol {counter-reset: num;}
.full-text > ol li:before {content: counter(num); counter-increment: num; background-color: var(--orange); color: #000; 
	position: absolute; top: -3px; left: 17px; width: 24px; height: 30px; font-size: 14px; font-weight: 600;
	display: flex; justify-content: flex-end; align-items: center; padding-right: 6px; box-sizing: border-box;}
.full-text > ol li:after {content: ''; border: 10px solid transparent; border-left-color: var(--orange); 
	position: absolute; left: 41px; top: -3px; transform: scale(0.66,1.5); transform-origin: 0 0;}
.full-text > ul li + li, .full-text > ol li + li {margin-top: 10px;}
.full-text table, .video-inside > * {width:100%;}
.full-text > *:last-child {margin-bottom: 0;}
.video-responsive {padding-top: 60%; position: relative;}
.video-responsive > iframe, .video-responsive > video {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size: 21px; margin-bottom: 20px;}


/* COMMENTS
----------------------------------------------- */
.page__comments {margin-top: 0px;}
.ac-form, .page__comments .sect__header {margin-bottom: 20px; position: relative;}
.ac-form__header, .ac-form__editor, .ac-form .message-info {gap: 10px; margin-bottom: 10px;}
.ac-form__bottom {gap: 10px;}
.ac-form .comments_subscribe {margin-top: 0px;}
.ac-form input[type="text"], .ac-form textarea, .ac-form .bb-pane {border-radius: 0 !important; box-shadow: none;}
.ac-form__editor .bb-editor textarea {height: 140px; line-height: 1.4;}
.comments_subscribe + br, .ac-form .bb-editor + br {display: none;}
.mass_comments_action {display: flex; align-items: center; flex-wrap: wrap; gap: 10px;}
.mass_comments_action select {flex: 1 1 0; margin: 0 -28px 0 0; border-radius: 0; box-shadow: none; min-width: 60%;}
.mass_comments_action .bbcodes {border-radius: 0; padding: 0 10px;}
.comm__title {font-size: 18px; margin-bottom: -10px; font-weight: 600; width: 100%;}

.comm {margin-bottom: 20px; position: relative; gap: 20px;}
.comm__img {width: 40px; height: 40px; border-radius: 50%;}
.comm__author, .comm__author a {color: var(--accent); font-weight: 600;}
.comm__date {color: var(--tt-fade); font-size: 12px;}
.comm__main {margin: 6px 0; padding: 12px 15px; background-color: var(--bg-darker); position: relative;}
.comm__main::before {content: ''; border: 6px solid var(--bg-darker); border-bottom-color: transparent; 
	border-left-color: transparent; position: absolute; right: 100%; top: 0;}
.comm__action {gap: 20px; font-size: 12px;}
.comm__action li, .comm__action li a {color: var(--tt-fade); cursor: pointer; gap: 8px; display: flex; align-items: center;}
.comm__ctrl, .comm__ctrl a {font-size: 15px; gap: 10px 15px; color: var(--tt-fade);}
.comm__ctrl li.has-checkbox {transform: scale(0.8,0.8); margin: 0 -10px 0 -5px;}
.comm__ctrl li.has-checkbox input {border-color: var(--tt-fade);}
.comm__rating {gap: 5px; font-size: 12px; padding-top: 26px; min-height: 48px; margin-left: -10px;}
.comm__rating > * {display: flex; gap: 8px; align-items: center; color: var(--green);}
.comm__rating > * + * {color: var(--red);}
.comm__rating > * .icon {color: var(--green); font-size: 16px;}
.comm__rating > * + * .icon  {color: var(--red); transform: scale(-1,1);}


/* LOGIN
----------------------------------------------- */
.login {position: fixed; z-index: 999; left: 50%; top: 50%; transform: translate(-50%,-50%);
	background-color: var(--bg); width: 380px; 
	box-shadow: 0 15px 45px rgba(0,0,0,1); overflow-y: auto;
	 max-width: calc(100vw - 40px); max-height: calc(100vh - 40px);}
.login__header {background-color: var(--bg-darker); gap: 20px; padding-right: 20px; font-weight: 600; font-size: 18px;}
.login__title {background-color: var(--bg); padding: 0 40px; height: 60px;}
.login__caption {font-weight: 400; margin-left: 20px;}
.login__close {font-size: 24px; width: 40px; height: 40px;}
.login__content {display: grid; gap: 20px; padding: 40px; padding-top: 20px;}
.login__row, .login__row.icon, .login__row.icon {position: relative; display: grid; gap: 10px; justify-content: stretch;}
.login__row::before {position: absolute; left: 2px; bottom: 0; width: 40px; height: 50px; 
	display: grid; place-items: center; opacity: 0.4; font-size: 14px;}
.login__input input {padding-left: 40px; border-radius: 0; box-shadow: none; height: 50px; line-height: 50px;}
.login__row button {width: 100%; height: 50px;}

.header__login-img {width: 40px; height: 40px; border-radius: 50%; cursor: pointer;}
.header__favlink {font-size: 24px; display: block; position: relative; margin-left: 20px;}
.header__favlink span {border-radius: 3px; background-color: var(--orange); color: #fff; 
	font-size: 11px; position: absolute; right: -10px; top: -1px; min-width: 20px; text-align: center;}
.header__login-panel {position: absolute; right: var(--indent-negative); top: 100%; width: 240px; padding-bottom: 10px;
	background-color: var(--bg-black); box-shadow: var(--bsh); margin-top: 20px; --bg-darker: rgba(0,0,0,0.15);}
.header__login-header {padding: 20px; color: var(--tt); font-weight: 600; gap: 20px; border-bottom: 1px solid var(--bdc);
	background-color: var(--bg-darker); margin-bottom: 10px;}
.header__login-avatar {width: 40px; height: 40px; border-radius: 50%;}
.header__login-group span {font-size: 12px; font-weight: 400; margin-top: 2px; 
	display: block; color: var(--tt-fade) !important;}
.header__login-menu a {display: flex; align-items: center; min-height: 30px; padding: 0 20px 0 0;}
.header__login-menu a::before {width: 40px; text-align: center; color: var(--tt-colored);}
.header__login-menu-border {border-top: 1px solid var(--bdc); margin-top: 10px; padding-top: 10px;}
.header__login-menu a span {font-size: 12px; margin-left: auto; color: var(--tt-fade);}


/* ADAPTIVE, MOBILE MENU
----------------------------------------------- */
.overlay {position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%; 
	opacity: 0.6; background-color: #000; cursor: pointer; display: none;}
.mobile-menu {width: 320px; height: 100%; overflow-x: hidden; overflow-y: auto;
	z-index: 999; position: fixed; left: -360px; top: 0; transition: left 0.4s; background-color: var(--bg);}
.mobile-menu.is-active {left: 0;}
body.mobile-menu-is-opened {overflow: hidden; width: 100%; height: 100%;}
.mobile-menu__header {padding: 15px 20px; gap: 10px; background-color: var(--bg-black); color: var(--tt-bg-black); 
	--tt: var(--tt-bg-black); --tt-fade: var(--tt-bg-black-fade); --bdc: var(--bdc-bg-black);}
.mobile-menu__btn-close {font-size: 24px; width: 40px; height: 40px; margin-right: -10px;}
.mobile-menu__header .logo {font-size: 18px; padding-left: 40px; background-size: 30px;}
.mobile-menu__content .nav__menu {padding: 5px; background-color: var(--bg-darker); gap: 5px;}
.mobile-menu__content .nav__menu a {height: 40px; padding: 0 10px; font-size: 14px;}
.mobile-menu__content .nav__menu li span {position: static; transform: none; margin-left: 5px;}
.mobile-menu__content .nav__menu li {flex-grow: 1; background-color: var(--bg-darker);}

@media screen and (max-width: 1220px) {
	:root {--indent-negative: -20px; --indent: 20px;}
	body {background-image: none;}
	.wrapper {padding: 0; background-image: none; overflow: hidden;}
	.wrapper__container {max-width:1000px;}
	.header {padding-top: 10px; padding-bottom: 10px;}
	.header__btn-login {background-color: var(--bg-black-lighter); color: var(--tt-fade);}
	.header__btn-menu {display: flex; padding: 0; width: 40px; font-size: 18px;}
	.header__search {min-width: 100%; order: 10; margin: 0;}
	.search-block__btn {width: 40px;}
	.header__logo-caption {flex-grow: 1;}
	.sb--sticky {position: static;}
	.nav .nav__menu {flex-wrap: nowrap; gap: 0 20px; overflow-y: hidden; overflow-x: auto;}
	.nav .nav__menu li {flex-shrink: 0;}
	.nav .nav__menu a {height: 50px; font-size: 14px;}
	.nav .nav__menu li span {position: static; transform: none; margin-left: 5px;}
	.cols {display: block;}
	.cols__side .js-this-in-mobile-menu {display: none;}
	.cols__side .side-menu + .sb {padding-top: 0;}
	.sb {padding-top: 30px;}
	.descr:not(.sect__descr) {margin-top: 0; padding-top: 30px;}
	.carousel__content:not(.owl-carousel) > .related-item {width: calc((100% - 60px)/5);}
	.carousel__content:not(.owl-carousel) > .popular-item {width: calc((100% - 60px)/5);}
	.carousel__content:not(.owl-carousel) > .top-item {width: calc((100% - 75px)/6);}
	.header__favlink {margin-left: 0;}
	.header__login-panel {margin-top: 10px;}
	.sb--popular .carousel__content:not(#popular-carousel), .page__related .carousel__content:not(#related-carousel), 
	.sect--carousel .carousel__content:not(#top-carousel)  
	{overflow-x: auto; scroll-snap-type: x mandatory; margin-right: var(--indent-negative);}
	.sb--popular .carousel__content:not(#popular-carousel) > .poster-item, 
	.page__related .carousel__content:not(#related-carousel) > .poster-item, 
	.sect--carousel .carousel__content:not(#top-carousel) > .top-item {scroll-snap-align: start; width: 160px;}
}

@media screen and (max-width: 950px) {
	.wrapper__container {max-width:768px;}
	.pagination {gap: 10px;}
	.pagination__btn-loader a, .pagination__btn-loader span {width: 100%;}
	.pagination > a, .pagination > span {flex-grow: 1; order: 10;}
	.pagination__pages {width: 100%;}
	.pagination__pages a, .pagination__pages span {flex-grow: 1;}
	.header {gap: 10px;}
	.header__logo {flex-grow: 1;}
	.header__link, .header__logo-caption {display: none;}
	.header__favlink {margin: 0 10px;}
	.carousel__content:not(.owl-carousel) > .top-item {width: calc((100% - 60px)/5);}

	.page__player-btns .btn {flex: 1 0 max-content;}
}

@media screen and (max-width: 760px) {
	.wrapper__container {max-width:640px;}

	.header__logo {font-size: 18px; padding-left: 40px; background-size: 30px;}
	.footer__menu {justify-content: center; min-width: 100%; gap: 20px;}
	.footer__logo-caption {padding: 0; border: 0; min-width: 100%; text-align: center;}
	.theme-toggle {order: 10;}
	.header__search {min-width: calc(100% - 90px);}
	.header__btn-login {padding: 0; width: 40px; font-size: 18px;}
	.header__btn-login span, .sect__title::after {display: none;}
	.carousel__content:not(.owl-carousel) > .related-item {width: calc((100% - 30px)/3);}
	.carousel__content:not(.owl-carousel) > .popular-item {width: calc((100% - 30px)/3);}
	.carousel__content:not(.owl-carousel) > .top-item {width: calc((100% - 30px)/3);}

	.speedbar, .page__header-header h1, .page__original {text-align: center;}
	.page__meta-item.flex-grow-1 {flex: 0 0 max-content;}
	.page__player, .page__caption {margin-left: var(--indent-negative); margin-right: var(--indent-negative);}
	.page__complaint-stars {position: static; padding: 0 var(--indent); margin-top: -5px;}
	.page__complaint-stars a {margin-left: auto;}
	.tabs-block__select button {flex-grow: 1;}
	.page__header-img {justify-self: center;}
	.page__header {grid-template-columns: minmax(0,1fr); align-items: start;
		grid-template-rows: auto auto auto auto; grid-template-areas: "pheader" "pimg" "plist" "pctrl";}
	.page__btn-watch {max-width: 100%; width: 100%;}
	.page__fav {justify-content: flex-start;}
	.page__tabs-mylists li {flex: 1 0 max-content;}
	.page__stars-rating-votes, .page__stars-rating-caption {min-width: 100%;}

	.page__title {font-size: 24px;}
	.page__intro, .page__text .quote {margin-left: var(--indent-negative); margin-right: var(--indent-negative); padding-right: var(--indent);}
	.full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size: 18px;}
}

@media screen and (max-width: 590px) {
	.wrapper__container {max-width:480px;}
	.login__title {padding: 0 20px;}
	.login__caption {margin-left: 0px;}
	.login__content {padding: 20px;}
}

@media screen and (max-width: 470px) {
	.wrapper__container123 {max-width:360px;}
	.pagination {padding: 0;}
	.cols__main {padding-top: 30px;}
	.sect--descr .sect__title {font-size: 14px; margin-bottom: 5px;}
	.sect__descr {font-size: 12px;}
	.sect__tabs {order: 10; width: 100%; margin: 0;}
	.sect__tabs button {flex-grow: 1; padding: 0;}
	.grid-items {gap: 20px 10px; grid-template-columns: repeat(2,minmax(100px,1fr));}
	.poster-item__title {font-size: 15px;}
	.poster-item__category {font-size: 12px;}
	.carousel__content:not(.owl-carousel) > .related-item {width: calc((100% - 15px)/2);}
	.carousel__content:not(.owl-carousel) > .popular-item {width: calc((100% - 15px)/2);}
	.carousel__content:not(.owl-carousel) > .top-item {width: calc((100% - 20px)/3);}
	.sect--carousel .carousel__content:not(.owl-carousel) {gap: 10px;}
	.speedbar {margin-top: -30px;}
	.header__login-panel {right: -50px; margin-right: var(--indent-negative);}
	.sb--popular .carousel__content:not(#popular-carousel), .page__related .carousel__content:not(#related-carousel) {gap: 10px;}
	.sb--popular .carousel__content:not(#popular-carousel) > .poster-item, 
	.page__related .carousel__content:not(#related-carousel) > .poster-item {width: calc((100vw - 100px)/2);}
	.sect--carousel .carousel__content:not(#top-carousel) > .top-item {width: calc((100vw - 100px)/2);}
	.top-item__title {padding: 8px 10px;}
	
	.comm__meta {display: block; padding-right: 80px;}
	.comm__rating .icon {font-size: 14px !important; margin-right: -3px;}
	.comm__rating {margin: 0; flex-direction: row; position: absolute; right: 0; top: 5px; padding: 0; min-height: 0; gap: 8px;}
	.comments-tree-list .comments-tree-list .comm__img {width: 30px; height: 30px;}
	.comments-tree-list .comments-tree-list .comm {gap: 10px;}
	.comments-tree-list .comments-tree-list .comm__main::before, .page__btn-lists::before, .header__favlink {display: none !important;}
	.ac-form__subscribe {font-size: 12px; line-height: 1.3; margin-left: 10px;}
	.full-text iframe {width: calc(100% + 40px); max-width: calc(100% + 40px); height: 260px; margin-left: -20px; margin-right: -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; overflow: hidden; 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; right: 0; top: -56px; display: flex;}
 .owl-prev, .owl-next {cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; 
	 font-size: 18px; border-radius: 0%; background: none; color: var(--tt); border: 1px solid var(--bdc);}
.owl-next {border-left: 0;}
.owl-prev:hover, .owl-next:hover {background-color: var(--accent); color: #fff; border-color: var(--accent);}
#popular-carousel {padding-bottom: 50px;}
#popular-carousel .owl-nav {top: auto; bottom: 0; left: 0;}
#related-carousel .owl-nav {top: -64px;}
#popular-carousel .owl-prev,  #popular-carousel .owl-next {flex-grow: 1;}
 
.filter-block {background-color: var(--bg-darker); padding: 15px var(--indent); margin: 0 var(--indent-negative);}
.filter-block .sect__header {margin-bottom: 15px;}
.filter-block .sect__title::after {display: none;}
.filter {gap: 10px 10px;}
.filter__col {flex: 1 0 200px; max-width: 100%; min-width: 200px; display: flex; flex-direction: column; gap: 10px;}
.filter__col:last-child {flex: 0 0 120px; min-width: 120px;}
.filter__cell [type="button"] {width: 100%;}
[data-dlefilter="reset"] {background-color: var(--bg-darker); color: var(--tt-fade);}
.filter__cell select, .filter__cell [type="text"] {border-radius: 0; box-shadow: none;}
@media screen and (max-width: 950px) {
	.filter__col, .filter__col:last-child {flex: 1 0 240px; min-width: 240px;}
	
}


.tail-select, .tail-select * {outline: none; user-select: none;}
.tail-select {position: relative;}
.tail-select-container {border: 1px solid var(--bdc); background-color: var(--bg); padding: 5px 5px; min-height: 40px; 
	display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding-right: 40px; position: relative; cursor: pointer;}
.tail-select .label-inner {margin-left: 15px;}
.tail-select-container .select-handle {display: flex; align-items: center; height: 28px; padding: 0 10px; 
	background-color: var(--bg-btn); color: #fff; cursor: pointer; font-size: 12px;}
.tail-select .select-label::before, .tail-select .select-label::after {position: absolute; top: 50%; right: 10px;
	content:"\e900"; font-family:'fa-custom'; font-weight: var(--ui-fw-fa); color: var(--tt-fade); margin-top: -15px;}
.tail-select .select-label::after {margin-top: -5px; transform: rotate(180deg);}
.tail-select .select-dropdown {top: 100%; left: 0; width: 100%; z-index: 100; display: none; position: absolute;
    background-color: var(--bg); border: 1px solid var(--bdc); box-shadow: var(--bsh);}
.tail-select .select-dropdown .dropdown-inner {padding: 1px 0; overflow-x: hidden; overflow-y: auto;}
.tail-select .dropdown-optgroup {padding: 15px;}
.tail-select .select-dropdown .dropdown-empty {padding: 20px; font-size: 12px; text-align: center;}
.tail-select .select-dropdown ul li + li {margin-top: 10px;}
.tail-select .select-dropdown ul li {display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 12px;}
.tail-select .select-dropdown ul li.dropdown-option::before {content: ""; background-color: var(--bg-darker);
    width: 18px; height: 18px; border-radius: 1px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2); 
	display: grid; place-items: center; font-size: 14px; color: #fff; flex-shrink: 0;}
.tail-select .select-dropdown ul li.dropdown-option.selected {color: var(--orange);}
.tail-select .select-dropdown ul li.dropdown-option.selected::before {background-color: var(--orange);
    content:"\e915"; font-family:'fa-custom'; font-weight: var(--ui-fw-fa);}
.tail-select .select-dropdown ul li:hover {color: var(--orange);}
.tail-select-container:hover {border-color: var(--orange);}
.tail-select-container .select-handle:hover {background-color: var(--bg-btn-hover);}

.irs {position: relative; display: block; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;
	-moz-user-select: none; -ms-user-select: none; user-select: none;}
.irs-line {position: relative; display: block; overflow: hidden; outline: none !important;}
.irs-line-left, .irs-line-mid, .irs-line-right {position: absolute; display: block; top: 0;}
.irs-line-left {left: 0; width: 11%;}
.irs-line-mid {left: 9%; width: 82%;}
.irs-line-right {right: 0; width: 11%;}
.irs-bar {position: absolute; display: block; left: 0; width: 0;}
.irs-bar-edge {position: absolute; display: block; top: 0; left: 0;}
.irs-shadow {position: absolute; display: none; left: 0; width: 0;}
.irs-handle {position: absolute; display: block; cursor: default; z-index: 1;}
.irs-handle.type_last {z-index: 2;}
.irs-min {position: absolute; display: block; left: 0; cursor: default;}
.irs-max {position: absolute; display: block; right: 0; cursor: default;}
.irs-from, .irs-to, .irs-single {position: absolute; display: block; top: 0; left: 0; cursor: default; white-space: nowrap;}
.irs-grid {position: absolute; display: none; bottom: 0; left: 0; width: 100%; height: 20px;}
.irs-with-grid .irs-grid {display: block;}
.irs-grid-pol {position: absolute; top: 0; left: 0; width: 1px; height: 8px; background: #ec2828;}
.irs-grid-pol.small {height: 4px;}
.irs-grid-text {position: absolute; bottom: 0; left: 0; white-space: nowrap; text-align: center;
font-size: 9px; line-height: 9px; padding: 0 3px; color: #ec2828;}
.irs-disable-mask {position: absolute; display: block; top: 0; left: -1%; width: 102%; height: 100%;
cursor: default; background: rgba(0,0,0,0.0); z-index: 2;}
.irs-disabled {opacity: 0.4;}
.lt-ie9 .irs-disabled {filter: alpha(opacity=40);}
.irs-hidden-input {position: absolute !important; display: block !important; top: 0 !important; left: 0 !important;
width: 0 !important; height: 0 !important; font-size: 0 !important; line-height: 0 !important; padding: 0 !important;
margin: 0 !important; outline: none !important; z-index: -9999 !important; background: none !important;
border-style: solid !important; border-color: transparent !important;}

.irs {height: 40px;}
.irs-line {height: 6px; top: 25px; background-color: var(--bg-darker); border-radius: 3px; 
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);}
.irs-bar {height: 6px; top: 25px; background-color:var(--orange); border-radius:3px;}
.irs-bar-edge {top: 25px; height: 8px; width: 11px; background-color:var(--bg-darker);}
.irs-handle {width: 20px; height: 20px; top: 18px; background-color:var(--bg); border-radius:50%; 
	border: 3px solid var(--orange); box-shadow: 0 1px 3px rgba(0,0,0,0.3); cursor: pointer;}
.irs-from, .irs-to, .irs-single {font-size: 10px; margin-top: -5px;
	padding: 3px 5px; background: var(--bg-darker); color: var(--tt); border-radius: 3px;}

.dt-is-active .tail-select .select-dropdown ul li.dropdown-option:not(.selected)::before, 
.dt-is-active .irs-line {background-color: rgba(0,0,0,0.2);}
.dt-is-active .irs-bar {background-color: #be780f;}
.dt-is-active .irs-handle, .dt-is-active .tail-select-container:hover {border-color: #be780f;}