/* BASIC LAYOUT - DARK SITE ON LIGHT BACKGROUND
----------------------------------------------- */
.wrapper {min-width: 320px; position: relative; padding: 30px 20px; background: var(--page-bg);}
.wrapper-container {max-width: var(--max-width); margin: 0 auto; position: relative; z-index: 20;}
.wrapper-main {min-height: 100vh; background-color: var(--bg); box-shadow: var(--bsh); border-radius: 16px; overflow: hidden;}
.header {position: relative; z-index: 10; height: 70px; padding: 0 30px; background: var(--bg-2); 
	border-bottom: 1px solid var(--bdc);}
.footer {background-color: var(--bg-3); color: var(--tt-2); padding: 25px 30px;}
.col-main {padding: 30px; padding-bottom: 50px; background: var(--bg);}
.col-side {background: var(--sidebar-bg); color: #fff; padding: 30px 20px; position: relative;}
	
#scrolltop {position: fixed; width: 50px; height: 50px; line-height: 50px; right: 20px; bottom: 20px;
	z-index: 990; display: none; background-color: var(--accent); color: #fff; 
	cursor: pointer; font-size: 20px; border-radius: 50%; text-align: center; box-shadow: var(--bsh);}


/* HEADER, NAV
----------------------------------------------- */
.logo {display: inline-flex; flex-direction: column; justify-content: center; height: 50px; text-align: left;
	margin-right: 30px;}
.logo__title {color: #fff; font-size: 20px; letter-spacing: 2px; 
	font-weight: 700; line-height: 1; font-family: 'Fredoka One', sans-serif;}
.logo__caption {font-size: 10px; font-weight: 500; color: var(--tt-2); 
	text-transform: uppercase; letter-spacing: 2px; margin-top: 3px;}

.header__menu > li {margin-right: 25px; position: relative;}
.header__menu > li > a {height: 70px; display: flex; align-items: center; font-weight: 500; color: var(--tt);}
.header__menu > li:hover > a {color: var(--accent);}

.header__search {position: relative; flex: 1; max-width: 400px; margin: 0 20px;}
.header__search-box {position: relative;}
.header__search input {padding: 0 45px 0 15px; border-radius: 25px; height: 42px; 
	background: var(--bg-3); border: 1px solid var(--bdc);}
.header__search input:focus {border-color: var(--accent);}
.header__search button {position: absolute; right: 5px; top: 50%; transform: translateY(-50%); 
	padding: 0; width: 34px; height: 34px; border-radius: 50%;
	background: var(--accent); color: #fff; font-size: 14px;}

/* Telegram Button */
.header-tg-btn {display: inline-flex; align-items: center; height: 42px; padding: 0 18px; 
	background: #0088cc; color: #fff; border-radius: 21px; 
	font-size: 13px; font-weight: 500; margin-right: 15px; white-space: nowrap; gap: 8px;}
.header-tg-btn .tg-icon {width: 20px; height: 20px;}
.header-tg-btn:hover {background: #0099dd; color: #fff;}
@media screen and (max-width: 900px) {
	.header-tg-btn .tg-btn-text {display: none;}
	.header-tg-btn {width: 42px; padding: 0; justify-content: center;}
}


/* TOP ITEM / CAROUSEL
----------------------------------------------- */
.carou {padding: 25px; margin: 0 -30px; margin-top: -30px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); position: relative; padding-bottom: 50px;}
.carou__content:not(.owl-carousel) {display: flex; overflow: hidden; gap: 15px;}
.carou__content > .top {width: calc((100% - 75px)/6); flex-shrink: 0;}
.top {background-color: rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden;}
.top__desc {position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; padding: 15px; color: #fff;}


/* SECTION
----------------------------------------------- */
.sect:not(:last-child) {margin-bottom: 40px;}
.sect__header {margin-bottom: 25px;}
.sect__title {font-size: 22px; font-weight: 700; color: var(--tt);}
.sect__subtitle {font-size: 18px;}
.speedbar {font-size: 13px; color: var(--tt-2); background-color: var(--bg-2);
	margin: 0 -30px; margin-bottom: 25px; padding: 15px 30px; border-radius: 0;}

.speedbar a:hover {color: var(--accent);}


/* POSTER ITEM
----------------------------------------------- */
.poster {background: var(--bg-2); border-radius: 12px; overflow: hidden; box-shadow: var(--bsh-2);}
.poster__img {margin-bottom: 0; border-radius: 12px 12px 0 0; overflow: hidden;}
.poster__desc {position: relative; padding: 12px;}
.poster__rating {height: 17px; width: 85px; position: absolute; right: 8px; top: 8px; pointer-events: none;
	background: url(../dleimages/rating.svg); transform: scale(0.75); transform-origin: right top;}
.poster__rating-fill {position: absolute; left: 0; top: 0; height: 100%; z-index: 1; 
	background: url(../dleimages/rating.svg) 0 -34px repeat-x;}
.poster__title {font-size: 14px; font-weight: 600; padding-right: 70px; color: var(--tt);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.poster__subtitle li {display: inline-block; font-size: 12px; margin-top: 5px; color: var(--tt-2); margin-right: 4px;}
.poster__subtitle li a {color: var(--tt-2);}
.poster__subtitle li:not(:last-child)::after {margin-left: 6px; content: '/'; opacity: 0.5;}
.poster__label {position: absolute; left: 10px; top: 10px; z-index: 10; padding: 4px 10px; 
	background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; border-radius: 6px;}


/* SIDEBAR
----------------------------------------------- */
.side-block {margin-bottom: 25px;}
.side-block__title {font-weight: 700; font-size: 14px; margin-bottom: 15px; color: rgba(255,255,255,0.9);
	text-transform: uppercase; letter-spacing: 1px;}
.side-block__title--arrow {cursor: pointer; display: flex; align-items: center; justify-content: space-between;}
.side-block__title--arrow .fal {font-size: 12px; transition: transform 0.3s;}
.side-block--collapsed .side-block__title--arrow .fal {transform: rotate(-90deg);}
.side-block--collapsed .side-block__content {display: none;}

/* Menu Grid - 2 columns */
.side-block__grid {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.side-block__grid a {display: block; padding: 8px 10px; background: rgba(255,255,255,0.1); 
	border-radius: 6px; color: #fff; font-size: 13px; transition: all 0.2s;}
.side-block__grid a:hover {background: rgba(255,255,255,0.2);}

/* Category Cards - квадратные карточки с иконкой сверху */
.side-block__categories {display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.cat-card {display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 15px 10px; background: rgba(255,255,255,0.1); border-radius: 12px;
	text-align: center; transition: all 0.2s; aspect-ratio: 1;}
.cat-card:hover {background: rgba(255,255,255,0.2);}
.cat-card__icon {font-size: 32px; display: block; margin-bottom: 8px;}
.cat-card__text {font-size: 12px; font-weight: 600; color: #fff; line-height: 1.2;}

/* Small cards for genres, countries, years - 3 columns */
.side-block__categories--small {grid-template-columns: repeat(3, 1fr); gap: 8px;}
.cat-card--small {padding: 10px 6px; border-radius: 10px; aspect-ratio: auto; min-height: 70px;}
.cat-card--small .cat-card__icon {font-size: 22px; margin-bottom: 5px;}
.cat-card--small .cat-card__text {font-size: 10px; line-height: 1.1;}

/* Years - 4 columns */
.side-block__categories--years {grid-template-columns: repeat(4, 1fr);}
.cat-card--year {min-height: 60px;}
.cat-card--year .cat-card__icon {font-size: 18px; margin-bottom: 4px;}
.cat-card--year .cat-card__text {font-size: 11px; font-weight: 700;}

.popular + .popular {margin-top: 15px;}
.popular {display: flex; align-items: center; padding: 10px; background: rgba(255,255,255,0.1); border-radius: 8px;}
.popular__img {width: 50px; height: 50px; margin-right: 12px; border-radius: 6px; overflow: hidden;}
.popular__title {line-height: 1.4; -webkit-line-clamp: 2; color: #fff; font-size: 13px;}
.popular .poster__subtitle li {color: rgba(255,255,255,0.7);}
.popular:hover {background: rgba(255,255,255,0.15);}

/* Social Icons */
.soc-channels {margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.2);}
.soc-channels__item {display: flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,0.15); border-radius: 50%; width: 44px; height: 44px; margin: 0 5px;}
.soc-channels__item:hover {background: rgba(255,255,255,0.25);}
.soc-channels__item svg {width: 22px; height: 22px; fill: #fff;}


/* FOOTER, PAGINATION
----------------------------------------------- */
.footer {display: flex; align-items: center; flex-wrap: wrap; gap: 20px;}
.footer__btn {height: 36px; border-radius: 18px; padding: 0 20px; text-transform: none; font-size: 13px;}
.footer__text {font-size: 13px; line-height: 1.6; flex: 1;}

.bottom-nav {margin-top: 30px;}
.pagination {text-align: center; padding-top: 15px;}
.pagination__pages > a, .pagination__pages > span, .pagination__pages-btn > a, 
.pagination__pages-btn > span {display: inline-block; margin: 8px 4px 0 4px; line-height: 36px; 
	padding: 0 12px; min-width: 36px; font-size: 14px; border: 1px solid var(--bdc); border-radius: 18px;
	background: var(--bg-2); color: var(--tt);}
.pagination__pages > span:not(.nav_ext), .pagination__pages a:hover,  
.pagination__pages-btn > a {background: var(--accent); color: #fff; border-color: var(--accent);}


/* INNER PAGE / FULLSTORY
----------------------------------------------- */
.page__subcols {padding: 30px; margin: 0 -30px; 
	background: var(--bg-2); position: relative; margin-bottom: 30px;}
.page__subcol-side {width: 220px; margin-right: 30px;}
.page__subcol-side2 {width: 320px; margin-left: 30px;}
.pmovie__poster {width: 220px; height: 330px; box-shadow: var(--bsh); border-radius: 12px; overflow: hidden;}
.pmovie__poster .poster__label {border-radius: 0 0 8px 0;}
.pmovie__original-title {color: var(--tt-2); text-transform: uppercase; font-size: 11px; 
	margin-top: 5px; font-weight: 500; letter-spacing: 1px;}
.page__subcol-main h1 {font-size: 24px; font-weight: 700; color: var(--tt);}
.pmovie__year {margin-top: 12px; color: var(--tt-2);}
.pmovie__genres {margin: 12px 0 20px 0; font-size: 13px; color: var(--tt-3);}
.pmovie__header-list {line-height: 1.6; font-size: 13px; color: var(--tt-2);}
.pmovie__header-list li + li {margin-top: 10px;}
.pmovie__header-list li > div:first-child, .pmovie__header-list li > span:first-child {color: var(--tt); font-weight: 600; margin-bottom: 3px;}
.pmovie__header-list li a {color: var(--accent);}
.pmovie__header-list li a:hover {text-decoration: underline;}
.pmovie__ratings {margin-top: 20px;}
.pmovie__rating {display: inline-flex; align-items: center; margin-right: 20px;}
.pmovie__rating-content {font-size: 28px; font-weight: 700; color: var(--accent);}
.pmovie__rating-caption {margin-left: 10px; font-size: 12px; color: var(--tt-2);}
.pmovie__subinfo {margin-top: 25px; display: flex; gap: 15px;}
.pmovie__btn {background: var(--gradient); text-transform: none; font-size: 14px; padding: 0 30px;}
.pmovie__fav a {display: flex; align-items: center; justify-content: center; 
	height: 40px; border-radius: 20px; padding: 0 20px; 
	font-size: 14px; border: 2px solid var(--bdc); color: var(--tt-2);}
.pmovie__fav a:hover {border-color: var(--accent); color: var(--accent);}

.page__subtitle {font-size: 18px; font-weight: 700; margin-bottom: 20px; color: var(--tt);}
.page__text {margin-bottom: 25px; line-height: 1.7; color: var(--tt-2);}


/* PLAYER SECTION
----------------------------------------------- */
.pmovie__player {position: relative; margin-bottom: 30px; background: #000; border-radius: 12px; overflow: hidden;}
.pmovie__player-controls {background: var(--bg-3); padding: 15px 20px;}
.pmovie__complaint {position: absolute; right: 15px; top: 50%; transform: translateY(-50%);}
.pmovie__complaint a {background-color: #e74c3c; color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 12px;}
.tabs-block__select {display: flex; gap: 10px;}
.tabs-block__select span {cursor: pointer; display: inline-flex; align-items: center; 
	height: 36px; padding: 0 18px; background: var(--bg-2); color: var(--tt-2); 
	font-weight: 500; font-size: 13px; border-radius: 18px; border: 1px solid var(--bdc);}
.tabs-block__select span.is-active, .tabs-block__select span:hover {background: var(--accent); color: #fff; border-color: var(--accent);}
.video-responsive {padding-top: 56.25%; position: relative; background: #000;}
.video-responsive > iframe, .video-responsive > video {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

/* Player Loader */
.player-loader {position: relative; min-height: 400px; background: #111;}
.player-loading {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); 
	text-align: center; color: #fff; z-index: 5;}
.player-loading span {display: block; width: 50px; height: 50px; margin: 0 auto 15px;
	border: 4px solid rgba(255,255,255,0.2); border-top-color: var(--accent); 
	border-radius: 50%; animation: spin 1s linear infinite;}
@keyframes spin {to {transform: rotate(360deg);}}

/* Rating Likes */
.pmovie__rating-likes {display: flex; gap: 10px; margin-top: 15px; padding: 15px 20px; background: var(--bg-3);}
.pmovie__rating-likes > * {display: flex; align-items: center; height: 36px; border-radius: 18px; 
	background: #27ae60; color: #fff; padding: 0 15px; font-weight: 500; cursor: pointer;}
.pmovie__rating-likes > * .fal {font-size: 16px; margin-right: 8px;}
.pmovie__rating-likes > * + * {background: #e74c3c;}


/* TEXT BLOCK, TYPOGRAPHY
----------------------------------------------- */
.full-text {line-height: 1.8; font-size: 15px; word-wrap: break-word; color: var(--tt-2);}
.full-text a {color: var(--accent);}
.full-text a:hover {text-decoration: underline;}
.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: 18px;}
.full-text h1, .full-text h2, .full-text h3, .full-text h4, .full-text h5 {font-size: 18px; color: var(--tt);}
.full-text > *:last-child {margin-bottom: 0;}


/* DESCRIPTION TOGGLE
----------------------------------------------- */
.page__text-wrapper {position: relative; margin-bottom: 30px;}
.page__text--collapsed {max-height: 150px; overflow: hidden; position: relative;}
.page__text--collapsed::after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; 
	background: linear-gradient(to top, var(--bg), transparent); pointer-events: none;}
.btn-toggle-desc {display: flex; align-items: center; justify-content: center; margin-top: 15px; 
	background: var(--bg-2); color: var(--tt); border: 1px solid var(--bdc); height: 40px; 
	padding: 0 25px; font-size: 13px; cursor: pointer; border-radius: 20px;}
.btn-toggle-desc:hover {background: var(--accent); color: #fff; border-color: var(--accent);}
.btn-toggle-desc .hide-text {display: none;}
.btn-toggle-desc.is-expanded .show-text {display: none;}
.btn-toggle-desc.is-expanded .hide-text {display: inline;}


/* COMMENTS
----------------------------------------------- */
.page__comments {margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--bdc);}
.page__comments-title {font-size: 20px; font-weight: 700; margin-bottom: 20px; color: var(--tt);}
.page__comments-info {font-size: 13px; margin-bottom: 15px; color: var(--tt-3); line-height: 1.5;}
.page__comments-info .fal {color: #e74c3c; margin-right: 6px;}
.page__comments-list {padding: 0;}

.comment-item {margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--bdc);}
.comment-item__img {width: 45px; height: 45px; border-radius: 50%; margin-right: 12px; overflow: hidden;
	display: flex; align-items: center; justify-content: center; background: var(--bg-3);}
.comment-item__img img {width: 100%; height: 100%; object-fit: cover;}
.guest-avatar-emoji {font-size: 28px; line-height: 1;}
.guest-avatar-placeholder {font-size: 24px; color: var(--tt-2);}
.comment-item__author {font-weight: 600; font-size: 14px; color: var(--tt);}
.comment-item__date {color: var(--tt-3); margin-top: 3px; font-size: 12px;}
.comment-item__main {margin: 10px 0; font-size: 14px; line-height: 1.6; color: var(--tt-2);}
.comment-item__rating {font-size: 13px;}
.comment-item__rating a {margin-left: 8px; color: var(--tt-2);}
.comment-item__rating a:hover {color: var(--accent);}
.comment-item__reply a {font-size: 12px; margin-right: 15px; color: var(--tt-3);}
.comment-item__reply a:hover {color: var(--accent);}


/* ADD COMMENTS FORM
----------------------------------------------- */
.add-comms {background: var(--bg-2); padding: 25px; border-radius: 12px; margin-bottom: 25px; border: 1px solid var(--bdc);}
.ac-inputs {display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; align-items: flex-end;}
.ac-name-wrapper {display: flex; position: relative; flex: 1; min-width: 200px;}
.ac-name-wrapper input {flex: 1; padding-right: 50px;}
.btn-random-name {position: absolute; right: 5px; top: 50%; transform: translateY(-50%); 
	background: var(--accent); border: none; width: 36px; height: 36px; border-radius: 50%; 
	cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center;}
.ac-avatar-selector {display: flex; flex-direction: column; align-items: center;}
.avatar-selector-label {font-size: 11px; color: var(--tt-2); margin-bottom: 5px;}
.btn-select-avatar {width: 50px; height: 50px; border-radius: 50%; background: var(--bg-3); 
	border: 2px solid var(--bdc); cursor: pointer; font-size: 24px; display: flex; 
	align-items: center; justify-content: center;}
.btn-select-avatar:hover {border-color: var(--accent);}
.stickers-panel-fixed {background: var(--bg-3); padding: 15px; border-radius: 8px; margin-bottom: 15px;}
.stickers-label {font-size: 12px; color: var(--tt-2); margin-bottom: 10px;}
.stickers-grid {display: flex; flex-wrap: wrap; gap: 8px;}
.sticker {font-size: 22px; cursor: pointer; padding: 5px; border-radius: 6px; transition: all 0.2s;}
.sticker:hover {background: var(--bg-2); transform: scale(1.15);}
.ac-submit button {width: 100%;}

/* Avatar Modal */
.modal-overlay {position: fixed; left: 0; top: 0; width: 100%; height: 100%; 
	background: rgba(0,0,0,0.7); z-index: 9999; display: flex; align-items: center; justify-content: center;}
.modal-content {background: var(--bg); border-radius: 16px; width: 90%; max-width: 400px; 
	max-height: 80vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.5);}
.modal-header {display: flex; align-items: center; justify-content: space-between; 
	padding: 20px; background: var(--bg-2); border-bottom: 1px solid var(--bdc);}
.modal-header h3 {margin: 0; font-size: 18px; color: var(--tt);}
.modal-close {background: none; border: none; font-size: 28px; color: var(--tt-2); cursor: pointer;}
.modal-body {padding: 20px; max-height: 50vh; overflow-y: auto;}
.avatars-grid {display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px;}
.avatar-item {display: flex; align-items: center; justify-content: center; aspect-ratio: 1; 
	background: var(--bg-2); border-radius: 10px; cursor: pointer; transition: all 0.2s;}
.avatar-item:hover {background: var(--accent); transform: scale(1.1);}
.avatar-emoji {font-size: 32px;}


/* DLE PUSH NOTIFICATIONS
----------------------------------------------- */
.DLEPush {position: fixed; z-index: 9999;}
.DLEPush.top-right {top: 20px; right: 20px;}
.DLEPush-notification {background: var(--bg); border-radius: 12px; box-shadow: var(--bsh); 
	padding: 15px 20px; margin-bottom: 10px; max-width: 350px; min-width: 280px; position: relative; 
	border-left: 4px solid var(--accent);}
.DLEPush-notification.push-error {border-left-color: #e74c3c;}
.DLEPush-notification.push-success {border-left-color: #27ae60;}
.DLEPush-close {position: absolute; top: 10px; right: 10px; background: none; font-size: 18px; color: var(--tt-2); cursor: pointer;}
.DLEPush-message {color: var(--tt); font-size: 14px;}


/* SEO BLOCK
----------------------------------------------- */
.seo-block {margin-top: 30px; padding: 30px; background: var(--bg-2); border-radius: 12px; 
	line-height: 1.7; color: var(--tt-2); font-size: 14px; border: 1px solid var(--bdc);}
.seo-block h2, .seo-block h3 {font-size: 18px; color: var(--tt); margin-bottom: 15px;}


/* RELATED NEWS
----------------------------------------------- */
.pmovie__related .sect__content {display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px;}


/* POSTER RATING BADGE
----------------------------------------------- */
.poster__rating-badge {position: absolute; right: 10px; top: -25px; background: #27ae60; color: #fff; 
	font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.3);}

.top__rating {position: absolute; right: 10px; top: 10px; background: rgba(0,0,0,0.7); color: #fff; 
	font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 6px;}


/* PLAYER CONTAINER
----------------------------------------------- */
.player-container {position: relative; background: #000; min-height: 400px;}
.player-loader .player-loading {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); 
	text-align: center; color: #fff; z-index: 5;}
.player-loader .player-loading p {margin-top: 15px; font-size: 14px;}


/* MESSAGE INFO
----------------------------------------------- */
.message-info {padding: 20px; background: var(--bg-2); border: 1px solid var(--bdc); border-radius: 8px; 
	color: var(--tt-2); text-align: center;}


/* GRID ITEM
----------------------------------------------- */
.grid-item {display: flex; flex-direction: column;}
#dle-content .grid-item {grid-column: span 1;}
.sect__content#dle-content {display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-gap: 25px;}


/* ADAPTIVE
----------------------------------------------- */
@media screen and (max-width: 1220px) {
	.wrapper {padding: 0;}
	.wrapper-main {border-radius: 0;}
	.header__menu, .pagination__pages-btn {display: none;}
	.header__btn-menu {cursor: pointer; width: 42px; height: 42px; border-radius: 50%; line-height: 42px; 
		text-align: center; background: var(--accent); color: #fff; display: flex; align-items: center; 
		justify-content: center; font-size: 18px;}
	.header__search {flex: 1; margin: 0 15px;}
	.header {padding: 0 20px;}
	.col-main {padding: 20px;}
	.col-side {width: 100%; order: 10; padding: 20px;}
	.side-block__grid {grid-template-columns: repeat(3, 1fr);}
	#dle-content, .d-grid {grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-gap: 15px;}
}

@media screen and (max-width: 768px) {
	.page__subcols {display: block; padding: 20px;}
	.page__subcol-side {width: 140px; float: left; margin-right: 15px; margin-bottom: 15px;}
	.pmovie__poster {width: 140px; height: 210px;}
	.page__subcol-side2 {width: 100%; margin: 0; margin-top: 20px; clear: both;}
	.page__subcol-main h1 {font-size: 18px;}
	.side-block__grid {grid-template-columns: repeat(2, 1fr);}
	#dle-content, .d-grid {grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));}
}

@media screen and (max-width: 480px) {
	.header-tg-btn {display: none;}
	.header__search {margin: 0 10px;}
	.page__subcol-side {width: 100%; float: none; margin: 0 0 20px 0;}
	.pmovie__poster {width: 100%; height: auto; aspect-ratio: 2/3;}
	.ac-inputs {flex-direction: column;}
	.ac-name-wrapper {min-width: 100%;}
	.avatars-grid {grid-template-columns: repeat(4, 1fr);}
}


/* MOBILE MENU
----------------------------------------------- */
.overlay {position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%; 
	background: rgba(0,0,0,0.5); cursor: pointer; display: none;}
.mobile-menu {width: 280px; height: 100%; overflow-x: hidden; overflow-y: auto;
	padding: 20px; z-index: 999; position: fixed; left: -300px; top: 0; transition: left .3s; 
	background: var(--sidebar-bg); color: #fff;}
.mobile-menu.is-active {left: 0;}
.mobile-menu-close {cursor: pointer; position: fixed; left: 280px; top: 0; z-index: 999;
	width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 20px; opacity: 0;
	background: #e74c3c; color: #fff; transition: opacity .3s;}
.mobile-menu-close.is-active {opacity: 1;}
body.mobile-menu-is-opened {overflow: hidden;}


/* OWL CAROUSEL
----------------------------------------------- */
.owl-carousel {width: 100%; position: relative; z-index: 1;}
.owl-carousel .owl-stage {position: relative; display: flex;}
.owl-carousel .owl-stage-outer {position: relative; overflow: hidden;}
.owl-carousel .owl-item {position: relative; min-height: 10px;}
.owl-nav {position: absolute; left: -15px; right: -15px; top: 50%;}
.owl-prev, .owl-next {position: absolute; top: 0; margin-top: -20px; width: 40px; height: 40px; 
	background: var(--bg-2); color: var(--tt); border-radius: 50%; display: flex; 
	align-items: center; justify-content: center; font-size: 18px; box-shadow: var(--bsh);}
.owl-prev {left: 0;}
.owl-next {right: 0;}
.owl-prev:hover, .owl-next:hover {background: var(--accent); color: #fff;}
.owl-dots {text-align: center; margin-top: 20px;}
.owl-dot {display: inline-block; width: 10px; height: 10px; border-radius: 50%; 
	cursor: pointer; background: rgba(255,255,255,0.4); margin: 0 4px;}
.owl-dot.active, .owl-dot:hover {background: #fff;}