/* 
Datalife Engine template,
name: Kinogoshik — обновлён AndrewGray Lord, 2025
*/

:root {
	/* === НОВАЯ ЦВЕТОВАЯ ПАЛИТРА: ТЁМНАЯ + ИЗУМРУДНЫЙ АКЦЕНТ === */
	--bg: #0f1115;
	--bg-darker: #090a0d;
	--bg-lightest: #15181e;
	--bg-lighter: #1b1f26;
	--bg-black: #07080a;
	--tt: #e0e5ec;
	--tt-lighter: #ffffff;
	--tt-lighter-2: #ffffff;
	--tt-darker: #a0a8b8;
	--tt-darker-2: #7c8596;
	--bdc: #242933;
	--bdc-lighter: #2e3440;
	--bsh: 0 8px 16px rgba(0, 0, 0, 0.5);
	--bsh-2: 0 1px 3px rgba(0, 0, 0, 0.2);
	--gradient: linear-gradient(to bottom, #0a0e15, #0c101a);
	--gradient-accent: linear-gradient(135deg, #00ffc5, #00e6b8);
	--accent: #00e6b8;
	--accent-darker: #00b390;
	--accent-2: #00ffc5;
	--accent-3: #00b390;
	--ui-bg: #12151a;
	--ui-bg-darker: #0c0e11;
	--ui-bg-darkest: #07080a;
	--ui-bg-accent: #00e6b8;
	--ui-text-color-on-accent: #000;
	--ui-bdc: #242933;
	--indent-negative: -20px;
	--indent: 20px;
	--max-width: 1200px;
}

@media screen and (max-width: 1220px) {
	:root {
		--indent-negative: -20px;
		--indent: 20px;
	}
}

/* RESET, BASIC UI SETTINGS
----------------------------------------------- */
* { background: transparent; margin: 0; padding: 0; outline: none; border: 0; box-sizing: border-box; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
img, table, iframe, video, frame, embed, object { max-width: 100%; }
body {
	font: 14px 'Manrope', sans-serif;
	line-height: normal;
	padding: 0;
	margin: 0;
	color: var(--tt);
	background: var(--bg-black);
	min-height: 100%;
	width: 100%;
	font-weight: 400;
	overflow-x: hidden;
	letter-spacing: 0.02em;
}
a { color: var(--tt-lighter-2); text-decoration: none; }
a:hover, a:focus { color: var(--accent); text-decoration: none; }
h1, h2, h3, h4, h5 { font-weight: 700; font-size: 24px; }
::selection { background: var(--accent); color: #fff; }
b, strong, .bolder { font-weight: 700; }

button, select, textarea, input[type="text"], input[type="password"], input[type="button"], input[type="submit"] {
	appearance: none;
	-webkit-appearance: none;
	font-size: 16px;
	font-family: inherit;
}
button, .btn, input[type="button"], input[type="reset"], input[type="submit"], .form__btn,
.qq-upload-button, .pm__links a, .usp__btn a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-align: center;
	padding: 0 20px;
	height: 40px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	background-color: var(--accent);
	color: #000;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
button:hover, .btn:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover,
.form__btn:hover, .qq-upload-button:hover, .pm__links a:hover, .usp__btn a:hover {
	background-color: var(--accent-2);
	color: #000;
}
button:active, input[type="button"]:active, input[type="submit"]:active {
	box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.1);
}
input[type="text"], input[type="password"] {
	height: 40px;
	line-height: 40px;
	border-radius: 4px;
	padding: 0 15px;
}
select {
	height: 40px;
	padding: 0 15px;
	display: block;
}
select:not([multiple]) {
	background-image: url(../dleimages/chevron.svg);
	padding-right: 30px;
	background-repeat: no-repeat;
	background-position: right 15px top 50%;
	background-size: .6em auto;
}
select option { padding: 6px 10px; }
select[multiple] { padding: 0 5px; }
textarea {
	padding: 15px;
	overflow: auto;
	vertical-align: top;
	resize: vertical;
}
input[type="text"], input[type="password"], select, textarea {
	width: 100%;
	background-color: var(--ui-bg-darkest);
	color: var(--tt-lighter);
	box-shadow: inset 0 0 0 1px var(--bdc), inset 0 0 0 1px var(--bdc-lighter);
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
	box-shadow: inset 0 0 0 1px var(--accent);
}
input::placeholder, textarea::placeholder {
	color: var(--tt);
	opacity: 0.8;
	font-size: 13px;
}
input:focus::placeholder, textarea:focus::placeholder { color: transparent; }

/* SNIPPETS
----------------------------------------------- */
.img-box, .img-wide, .img-responsive, .img-fit-cover { overflow: hidden; position: relative; }
.img-responsive { padding-top: 60%; }
.img-responsive--portrait { padding-top: 150%; }
.img-box > img, .img-responsive > img { width: 100%; min-height: 100%; display: block; }
.img-responsive > img { position: absolute; left: 0; top: 0; }
.img-wide img, .img-wide > a { width: 100%; display: block; }
.img-fit-cover img { width: 100%; height: 100%; object-fit: cover; }
.clr { clear: both; }
.clearfix::after { content: ""; display: table; clear: both; }
.ws-nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.vw100 { margin:0 calc((100% - 100vw)/2); padding:0 calc((100vw - 100%)/2); }
.img-mask::before {
	content: '';
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 0;
	height: 60%;
	background: linear-gradient(to top, #000 0%, transparent 100%);
	opacity: 0.8;
}
.d-flex, .fx-row { display: flex; flex-wrap: wrap; flex-direction: row; }
.fd-column, .fx-col { flex-direction: column; flex-wrap: nowrap; }
.jc-space-between, .fx-row { justify-content: space-between; }
.jc-flex-start, .fx-start { justify-content: flex-start; }
.jc-center, .fx-center { justify-content: center; }
.jc-flex-end { justify-content: flex-end; }
.ai-flex-start { align-items: flex-start; }
.ai-center, .fx-middle { align-items: center; }
.ai-flex-end { align-items: flex-end; }
.order-first { order: -1; }
.order-last { order: 10; }
.flex-grow-1, .fx-1, .stretch-free-width { flex: 1 1 0; max-width: 100%; min-width: 50px; }
.btn-icon, .centered-content { display: inline-flex; justify-content: center; align-items: center; }
.icon-at-left [class*="fa-"], .icon-left .icon { margin-right: 0.5em; }
.icon-at-right [class*="fa-"], .icon-right .icon { margin-left: 0.5em; }
.hidden, #dofullsearch, .form__header .form__btn, .comment-item__main .quote + br, .d-none { display: none; }
.anim, button, .btn, a, a img, .btn-accent, .header__btn-search { transition: all .3s; }

.d-grid {
	display: grid;
	gap: 20px 20px;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

/* FONTS */
@font-face {
	font-family: 'Fredoka One';
	src: url('../webfonts/fredoka-one-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Manrope';
	src: url('../webfonts/manrope-400.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Manrope';
	src: url('../webfonts/manrope-600.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Manrope';
	src: url('../webfonts/manrope-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* LIGHT THEME VARIANT */
.lt-is-active {
	--bg: #ffffff;
	--bg-darker: #f5f7fa;
	--bg-lightest: #edf0f5;
	--bg-lighter: #e0e5ec;
	--bg-black: #ffffff;
	--tt: #333333;
	--tt-lighter: #000000;
	--tt-lighter-2: #000000;
	--tt-darker: #777777;
	--tt-darker-2: #999999;
	--bdc: #d1d8e0;
	--bdc-lighter: #e0e5ec;
	--bsh: 0 8px 16px rgba(0,0,0,0.1);
	--bsh-2: 0 1px 3px rgba(0,0,0,0.05);
	--gradient: linear-gradient(to bottom, #ffffff, #f8f9fa);
	--accent: #00b390;
	--accent-darker: #008a6f;
	--accent-2: #00e6b8;
	--accent-3: #00b390;
	--ui-bg: #ffffff;
	--ui-bg-darker: #f8f9fa;
	--ui-bg-darkest: #f0f2f5;
	--ui-bg-accent: #00e6b8;
	--ui-text-color-on-accent: #000;
	--ui-bdc: #d1d8e0;
}