/* BASIC LAYOUT
----------------------------------------------- */
.wrapper {min-width: 320px; position: relative; overflow: hidden; overflow: clip;}
.wrapper__container {max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 20;}
.wrapper__container--main {padding: 0 var(--indent);}
.header {padding-top: 30px; padding-bottom: 30px; gap: 15px 40px; box-shadow: var(--bsh);
	background-color: var(--bg-blackest); position: relative; z-index: 100;}
.content {min-height: 100vh; padding: 30px 0 80px 0;}
.content:has(.hero) {padding-top: 0;}
.footer {color: #fff; --tt: #fff; --tt-fade: #ccc;}
.footer__menu {background-color: var(--bg-blackest); padding-top: 25px; padding-bottom: 25px; text-transform: uppercase; gap: 15px 40px;}
.footer__main {background-color: var(--bg-black); padding-top: 30px; padding-bottom: 30px; gap: 30px 60px; font-size: 14px;}
.page-bg, .serv {max-width: 100%; width: 1000px; margin-left: auto; margin-right: auto;}


/* HEADER, TOPMENU, CAROU
----------------------------------------------- */
.logo {display: flex; align-items: center; font-family: "lct"; font-size: 28px;  
	position: relative; height: 50px; line-height: 1; top: -5px; --tt: #fff;}
.logo span {color: var(--accent);}
.logo:has(img) {background: none; min-width: 200px; top: 0;}
.logo img {display: block; position: absolute; left: 0; top: 50%; translate: 0 -50%; max-height: 100%;}
.header__logo-caption, .header__login-caption {font-size: 16px; color: #fff;}
.header__login-caption span {font-weight: 700; text-transform: uppercase;}
.header__btn {height: 50px; padding: 0 25px;}
.header__login-signin {border: 2px solid var(--accent); background: none; color: #fff;}

.search-block {position: relative; width: 400px; --tt: var(--accent)}
.search-block__input, .search-block__input:focus {padding: 0 60px 0 20px; border: 0; 
	height: 50px; line-height: 50px; box-shadow: none;}
.search-block__input:not(:focus)::placeholder {color: var(--tt-fade); opacity: 1;}
.search-block__btn {position: absolute; right: 0; top: 0; height: 50px; font-size: 18px; width: 60px;}


/* SECTION
----------------------------------------------- */
.sect:not(:last-child) {margin-bottom: 80px;}
.sect__header {margin-bottom: 30px;}
.sect__title {font-size: 28px; font-weight: 700; text-transform: uppercase; line-height: 1.2;}
.sect__link {height: 30px; text-transform: uppercase; font-size: 13px; border-radius: 6px; padding: 0 15px;}
.informer-btn {display: flex; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto;
	white-space: normal; height: auto; min-height: 86px; padding: 15px 120px; text-align: center; line-height: 1.2; 
	font-size: 34px; letter-spacing: 2px; font-weight: 700; text-shadow: 1px 1px 5px rgba(0,0,0,0.45);}
.sect__sort .sort {display: flex; align-items: center; flex-wrap: wrap; gap: 10px;}
.sect__sort a::after {content: "\f107"; margin-left: 8px;}
.sect__sort li.desc a::after {content:"\f106";}
.sect__sort li.asc a, .sect__sort li.desc a {color: var(--accent);}


/* HERO, PRESENTS, DESCR
----------------------------------------------- */
.hero {padding-bottom: 60px; padding-top: 80px; min-height: 500px; gap: 40px; position: relative; text-wrap: balance; 
	background: url(), url(/uploads/ch-dd.gif) center center / cover no-repeat;
	background-color: var(--bg-black); color: #fff; --tt: #fff; box-shadow: inset 0 1000px rgba(0,0,0,0.45);}
.hero::after {content: ''; position: absolute; inset: 0; --fill: calc((100vw - 100%)/2);
	background: linear-gradient(to right, var(--bg-blackest) var(--indent), transparent 100%);}
.hero > * {position: relative; z-index: 3;}
.hero__title {font-size: 64px; font-weight: 700; letter-spacing: 2px; line-height: 1.2; max-width: 600px;}
.hero__text {max-width: 800px; font-size: 24px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.3);}
.hero__btn {height: 60px; padding: 0 60px; font-size: 18px; gap: 15px;}
.hero::before {position: absolute; left: 50%; bottom: 0; width: 80px; height: 80px; border-radius: 50%; 
	background-color: var(--bg); font-size: 24px; translate: -50% 50%; color: var(--accent); z-index: 3;}

.presents {padding-top: 30px; padding-bottom: 30px; display: grid; gap: 30px; grid-template-columns: 300px minmax(0,1fr); 
	grid-template-rows: auto 1fr; grid-template-areas: "left title" "left right"; position: relative; 
	background-color: var(--bg-darker);}
.presents > * {position: relative; z-index: 3;}
.presents::before, .presents::after {content: ''; position: absolute; left: 0; bottom: 100%; width: 100%; height: 10px;
	background-image: linear-gradient(to bottom right, transparent 50.5%, var(--bg-darker) 50.5%),
	linear-gradient(to bottom left, transparent 50.5%, var(--bg-darker) 50.5%);
	background-repeat: repeat-x, repeat-x; background-position: 10px 0, 10px 0; background-size: 20px 20px, 20px 20px;}
.presents::after {bottom: auto; top: 100%; scale: 1 -1; transform-origin: center top; margin-top: 10px;}
.presents__left {grid-area: left; border: 2px solid var(--accent); border-radius: var(--bdrs); overflow: hidden;}
.presents__title {grid-area: title; font-weight: 400; font-size: 28px;}
.presents__title span {font-weight: 700; color: var(--accent); text-transform: uppercase;}
.presents__btn {border-radius: 0;}
.presents__right {grid-area: right;}
.presents__text {color: var(--tt-fade-0);}
.presents__thumbs li {width: calc((100% - 40px)/3); box-shadow: var(--bsh); 
	border-radius: var(--bdrs); overflow: hidden; border: 10px solid var(--bg);}

.descr {display: grid; gap: 30px 60px; grid-template-columns: repeat(auto-fit,minmax(min(80vw,500px),1fr));}
.descr__title {font-size: 28px; font-weight: 400; text-transform: uppercase; padding-left: 45px; position: relative;}
.descr__col2:nth-child(2) .descr__title {background-image: url(../images/question.svg);}
.descr__title span {font-weight: 700;}
.descr p {color: var(--tt-fade-0);}
.descr p b, .descr p strong {font-weight: 600;}
.descr a {color: var(--accent);}
.descr__title svg {position: absolute; left: 0; top: 3px; display: block; width: 30px; height: 30px;}
.descr__title svg .fill {fill: var(--accent);}
.descr__title svg .fill2 {fill: rgba(0,0,0,0.3);}


/* GRIDS FOR ITEMS
----------------------------------------------- */
.grid-items {display: grid; gap: 20px; grid-template-columns: repeat(4,minmax(0,1fr));}
.grid-items > *:not(.grid-items__item), #dle-content > *:not(.grid-items__item) {grid-column: 1 / -1;}
.grid-items > #dle-content {display: inherit; gap: inherit; grid-template-columns: inherit;}
.grid-items:has(.item-model) {gap: 30px 15px; grid-template-columns: repeat(6,minmax(0,1fr)); align-items: start;}


/* ITEM
----------------------------------------------- */
.item {background-color: var(--bg); box-shadow: var(--bsh); border-radius: var(--bdrs); overflow: hidden; position: relative;}
.item__time {position: absolute; right: 0; bottom: 0; z-index: 3; font-size: 12px; 
	background-color: rgba(0,0,0,0.5); color: #fff; padding: 5px 8px; backdrop-filter: blur(10px);}
.item__desc {line-height: 1.2; border: 1px solid var(--bdc); padding: 10px; gap: 8px; border-radius: 0 0 10px 10px;}
.item__title {color: var(--accent);}
.item__cast {font-size: 13px;}
.item__meta {font-size: 12px; color: var(--tt-fade); gap: 10px 10px;
	padding-top: 10px; margin-top: 2px; border-top: 1px dashed var(--bdc);}
.item__date::after {content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: var(--tt); opacity: 0.3;}
.item__label {padding: 3px 5px; font-size: 12px; border-radius: 3px; background-color: var(--grey); color: #fff;}
.item-model .item__desc {text-align: center; font-size: 16px;}

.loadmark::before {content: ''; width: 100px; height: 100px; border-radius: 50%; box-sizing: border-box; z-index: 10; 
	position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; animation: rotate 1s infinite linear;
	border: 20px solid rgba(255,255,255,0.3); border-left-color: rgba(255,255,255,0.8); 
}
@keyframes rotate {0% {rotate: 0deg} 100% {rotate: 360deg;}}
.item__img img.is-active {z-index: 5;}


/* GRID VIEW
----------------------------------------------- */
@media screen and (min-width: 1220px) {
	.tsize3 .grid-items:has(.item-short) {grid-template-columns: repeat(3,minmax(0,1fr));}
	.tsize5 .grid-items:has(.item-short) {grid-template-columns: repeat(5,minmax(0,1fr));}
	.msize4 .grid-items:has(.item-model) {grid-template-columns: repeat(4,minmax(0,1fr));}
	.msize5 .grid-items:has(.item-model) {grid-template-columns: repeat(5,minmax(0,1fr));}
}
@media screen and (min-width: 1220px) and (max-width: 1800px) {
	.tsize5:not(.thumb6) .item-short .item__label + .item__label {display: none;}
}


/* THUMB VIEW
----------------------------------------------- */
.thumb2 .item-short, .thumb4 .item-short, .thumb5 .item-short {box-shadow: none;}
.thumb2 .item-short .item__desc {background-color: var(--bg-darker);}
.thumb2 .item-short:not(:hover) .item__desc {--bdc: var(--bg-darker);}
.thumb3 .item-short .item__desc {position: absolute; left: 0; right: 0; bottom: 0; color: #fff; border: 0; 
	background: linear-gradient(to top, #000 10%, transparent 100%); min-height: 80%; --bdc: rgba(255,255,255,0.5); 
	display: flex; flex-direction: column; justify-content: flex-end; 
	--accent: #fff; --tt: #fff; --tt-fade: #ccc;}
.thumb3 .item-short .item__cast {color: #eee; --tt: #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.thumb3 .item-short .item__time {bottom: auto; top: 0; border-radius: 0 0 0 6px;}
.thumb3 .item-short:hover .item__desc {pointer-events: none; opacity: 0;}
.thumb4 .item-short .item__desc {padding-bottom: 0; border-width: 2px; border-top: 0;}
.thumb4 .item-short .item__meta {border: 0; padding: 10px; margin-top: 5px; margin-left: -10px; margin-right: -10px;
	border-radius: 0 0 var(--bdrs) var(--bdrs); background: var(--bg-darker);}
.thumb4 .item-short .item__title {color: var(--tt);}
.thumb4 .item-short .item__cast {color: var(--tt-fade-0); --tt: var(--tt-fade-0); 
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.thumb5 .item-short .item__desc {padding: 0; border: 0;}
.thumb5 .item-short .item__meta {order: -1; border: 0; background-color: var(--bg-black); padding: 10px; 
	border-radius: 0 0 var(--bdrs) var(--bdrs); color: #ccc; --tt-fade: #ccc; margin: 0;}
.thumb5 .item-short .item__title {color: var(--tt); margin-top: 5px;}
.thumb5 .item-short .item__cast {color: var(--tt-fade); --tt: var(--tt-fade);}
.thumb6 .grid-items:has(.item-short) {grid-template-columns: repeat(2,minmax(0,1fr));}
.thumb6 .item-short {display: flex;}
.thumb6 .item-short .item__img {width: 300px;}
.thumb6 .item-short .item__desc {flex: 1 1 0; max-width: 100%; min-width: 50px; gap: 10px;
	justify-content: flex-start; border-radius: 0 var(--bdrs) var(--bdrs) 0; padding: 20px; padding-bottom: 10px;}
.thumb6 .item-short .item__cast {margin-top: auto;}
.thumb6 .item-short .item__title {font-size: 18px; white-space: normal; line-height: 1.5; 
	display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}


/* MODEL VIEW
----------------------------------------------- */
.model2 .item-model {box-shadow: none;}
.model2 .item-model .item__desc {background-color: var(--bg-darker);}
.model2 .item-model:not(:hover) .item__desc {--bdc: var(--bg-darker);}
.model3 .item-model .item__desc, .model4 .item-model .item__desc, .model5 .item-model .item__desc {position: absolute; left: 0; right: 0; bottom: 0; color: #fff; border: 0; 
	background: linear-gradient(to top, #000 0%, transparent 100%); min-height: 50%; 
	display: flex; flex-direction: column; justify-content: flex-end;}
.model3 .item-model:hover .item__desc, .model4 .item-model:hover .item__desc, .model5 .item-model:hover .item__desc, 
.model6 .item-model:hover .item__desc {pointer-events: none; opacity: 0;}
.model4 .item-model .item__desc {height: auto; min-height: 0; padding: 20px; background: rgba(0,0,0,0.5);}
.model5 .item-model .item__desc {bottom: 10px; left: 10px; right: 10px; padding: 10px; min-height: 0; box-shadow: var(--bsh);
	background: rgba(255,255,255,0.6); backdrop-filter: blur(8px); color: #000; border-radius: var(--bdrs);}
.model6 .item-model .item__desc {position: absolute; left: 0; top: 10px; border-radius: 0 4px 4px 0;
	background: var(--accent); color: #fff; padding: 5px 8px; max-width: 100%; border: 0; font-size: 13px;}


/* FOOTER, PAGINATION
----------------------------------------------- */
.footer__text {color: var(--tt-fade); font-size: 13px;}
.footer__text a {color: var(--accent-2); text-decoration: underline;}
.footer__soc {margin-top: 25px;}
.footer__soc a {width: 40px; display: block; border-radius: var(--bdrs); background-color: #fff; overflow: hidden;}

.pagination {gap: 20px 10px; padding-top: 40px;}
.pagination__pages a, .pagination__pages span, .pagination > a, .pagination > span 
{display: grid; place-items: center; color: var(--tt-fade);
	height: 36px; min-width: 36px; padding: 0 10px; border-radius: 3px; 
	background-color: var(--bg-darker);}
.pagination__pages {gap: 10px; font-size: 14px;}
.pagination__pages span:not(.nav_ext) {color: #fff; background: var(--accent);}
.pagination__btns {height: 36px; border-radius: 4px; overflow: hidden; background-color: var(--bg); box-shadow: var(--bsh);}
.pagination__btns > * {width: 40px; display: grid; place-items: center; color: var(--accent); font-size: 18px;}
.pagination__btns > span {color: var(--tt-fade);}


/* INNER PAGE
----------------------------------------------- */
.page__main {display: grid; gap: 30px; grid-template-columns: minmax(0,1fr) 380px; grid-template-rows: auto auto 1fr; 
	grid-template-areas: "video title" "video right" "left right";}
.page__mtitle {grid-area: title; font-size: 18px; font-weight: 600; text-transform: uppercase;}
.page__main-left {grid-area: left;}
.page__main-right {grid-area: right;}
.page__main-video {grid-area: video;}

.page__mtitle a {font-size: 16px; margin-left: 10px;}
.page__tags a {display: block; background-color: var(--bg-darker); border-radius: var(--bdrs); 
	padding: 10px 20px; color: var(--tt-fade); font-size: 14px;}
.page__tags:empty {display: none;}

.page__cast {margin-top: 20px; margin-bottom: 5px; text-transform: uppercase;}
.page__cast a {text-decoration: underline; color: var(--accent);}
.page__meta {margin-bottom: 20px; color: var(--tt-fade); font-size: 14px;}
.page__btn-dl {height: 80px; background-color: var(--bg-darker); border: 1px solid var(--bdc); 
	text-transform: uppercase; font-size: 12px; flex-direction: column; color: var(--tt); font-weight: 400;}
.page__btn-dl::before {font-size: 34px; color: var(--tt);}
.page__btn-watch {height: 80px; font-size: 24px;}
.page__btns {margin-bottom: 20px;}
.page__btn-accent {position: sticky; left: 0; top: 30px; text-transform: uppercase; padding: 30px; border-radius: var(--bdrs);
	background: url(../images/grid.png), url(../images/bg-offer.jpg) left center / cover no-repeat; box-shadow: var(--bsh);
	background-color: var(--bg-black); color: #fff; font-size: 34px; line-height: 1.2; overflow: hidden;}
.page__btn-accent > * {position: relative; z-index: 5;}
.page__btn-accent::before {content: ''; position: absolute; inset: 0; background-color: var(--bg-black); opacity: 0.66;}
.page__btn-accent-descr span {color: var(--accent); letter-spacing: 4px; font-size: 1.6em; font-weight: 700; -webkit-text-stroke: 3px #fff;}
.page__btn-accent-descr div {font-size: 54px; margin-bottom: -15px; font-weight: 700;}
.page__btn-accent-btn {height: 60px; font-size: 18px;}
.page__btn-accent-caption {-webkit-text-stroke: 2px var(--yellow); color: transparent; font-weight: 700; 
	text-shadow: 0 0 20px #ffda4a; letter-spacing: 4px;}
.page__btn-accent img {width: 100px; height: 100px; display: block; margin: -30px 0;}

.page__rating > a {font-size: 34px; color: var(--green);}
.page__rating > a + a {scale: -1 1; color: var(--red);}
.page__rating-bar {position: relative; height: 26px; font-size: 12px; text-align: center; margin: 0 10px; max-width: 200px;}
.page__rating-bar::before, .page__rating-bar::after {content: ''; position: absolute; left: 0; width: 100%; bottom: 0; 
	height: 6px; border-radius: 3px; overflow: hidden; background-color: var(--bg-darker);}
.page__rating-bar::after {background-color: var(--green); width: var(--fill,50%);}
.page__rating-score > span:last-child {font-weight: 700;}
.page__fav a {display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; 
	border: 1px solid var(--bdc); font-size: 18px; color: var(--tt-fade);}
@media screen and (max-width: 1800px) {
	.page__rating:has(.page__fav) > a {font-size: 24px;}
}
.page__fav:has(.added) a:not(:hover) {color: var(--accent);}


/* TEXT BLOCK, TYPOGRAPHY, VIDEO BLOCK
----------------------------------------------- */
.page__title {margin-bottom: 30px; font-size: 24px;}
.full-text {line-height: 1.6; word-wrap: break-word; color: var(--tt-fade-0);}
.full-text a {text-decoration: underline; color: var(--ui-accent);}
.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(--accent); 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(--accent); color: #fff; 
	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(--accent); 
	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; background-color: #000;}
.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;}


/* LOGIN
----------------------------------------------- */
.lgn__top {width: 500px; font-size: 24px; padding: 0 60px;}
.lgn__content {width: 600px; background-color: var(--bg); box-shadow: var(--bsh-long); 
	border-radius: var(--bdrs); padding: 40px 60px; color: #000; text-align: center;}
.lgn__content-btn {height: 60px; margin-top: 20px;}
.lgn__content-title {font-size: 44px; font-weight: 700;}
.lgn__content-text {font-size: 18px;}
body:has(.lgn) .content {padding: 0; min-height: 80vh;}
.lgn {min-height: 80vh !important; padding-top: 60px; padding-bottom: 60px;}
.lgn__list {width: max-content; align-self: center; max-width: 100%;}
.lgn__list li {position: relative; padding-left: 30px; text-align: left;}
.lgn__list li::before {content:"\f058"; color: var(--green); position: absolute; left: 0; top: 0;}