/* ==========================================================================
   CRDGAME — ТЕХПОДДЕРЖКА / GUESTBOOK
   Path: /file/support/support.css
   Version: 20260901_support_11

   Используются реальные цвета существующего comments.css:
   page      #090909
   surface   #0d0f10
   surface-2 #111315
   surface-3 #090b0c
   gold      #d1a257
   gold-2    #e2b86f
========================================================================== */

:root {
	--crd-support-shell: 1240px;

	--crd-support-page: var(--crd-cmt-page, #090909);
	--crd-support-surface: var(--crd-cmt-surface, #0d0f10);
	--crd-support-surface-2: var(--crd-cmt-surface-2, #111315);
	--crd-support-surface-3: var(--crd-cmt-surface-3, #090b0c);

	--crd-support-line: var(--crd-cmt-line, rgba(255,255,255,.075));
	--crd-support-line-soft: var(--crd-cmt-line-soft, rgba(255,255,255,.045));
	--crd-support-line-gold: var(--crd-cmt-line-gold, rgba(209,162,87,.26));

	--crd-support-gold: var(--crd-cmt-gold, #d1a257);
	--crd-support-gold-light: var(--crd-cmt-gold-light, #e2b86f);

	--crd-support-title: var(--crd-cmt-title, #f0f1f2);
	--crd-support-text: var(--crd-cmt-text, #c8cbce);
	--crd-support-muted: var(--crd-cmt-muted, #8d9398);
	--crd-support-muted-2: var(--crd-cmt-muted-2, #676d72);

	--crd-support-title-font: var(--crd-cmt-font-title, "Russo One", "Open Sans", Arial, sans-serif);
	--crd-support-text-font: var(--crd-cmt-font-text, "Open Sans", Arial, sans-serif);
}


/* ==========================================================================
   01. PAGE
========================================================================== */

html body.crd-support-body {
	overflow-x: hidden !important;

	color: var(--crd-support-text) !important;
	background: var(--crd-support-page) !important;

	font-family: var(--crd-support-text-font) !important;
}


html body.crd-support-body .wrapper.main_wrapper,
html body.crd-support-body #casing,
html body.crd-support-body #content,
html body.crd-support-body #content.wide-page,
html body.crd-support-body #content > section {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	float: none !important;

	color: var(--crd-support-text) !important;
	background: transparent !important;

	border: 0 !important;
	box-shadow: none !important;
}


html body.crd-support-body .crd-support-page {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	color: var(--crd-support-text) !important;
	background: var(--crd-support-page) !important;
}


html body.crd-support-body .crd-support-shell {
	box-sizing: border-box !important;

	width: min(var(--crd-support-shell), calc(100vw - 56px)) !important;
	max-width: none !important;
	min-width: 0 !important;

	margin-left: auto !important;
	margin-right: auto !important;
}


/* ==========================================================================
   02. GLOBAL HERO
   НИЧЕГО НЕ СКРЫВАЕМ.
   $GLOBAL_PROMO$ / .crd-module-hero--generic остаются как на остальном сайте.
========================================================================== */


/* ==========================================================================
   03. SUPPORT INTRO
========================================================================== */

html body.crd-support-body .crd-support-hero {
	width: 100% !important;

	margin: 0 !important;
	padding: 40px 0 29px !important;

	color: var(--crd-support-text) !important;
	background: var(--crd-support-page) !important;

	border: 0 !important;
	border-bottom: 1px solid var(--crd-support-line-soft) !important;

	box-shadow: none !important;
}


html body.crd-support-body .crd-support-hero > .crd-support-shell {
	display: grid !important;

	grid-template-columns: minmax(0, 1fr) auto !important;

	gap: 42px !important;

	align-items: end !important;
}


html body.crd-support-body .crd-support-hero__copy {
	min-width: 0 !important;
}


html body.crd-support-body .crd-support-hero__kicker,
html body.crd-support-body .crd-support-content__kicker,
html body.crd-support-body .crd-support-entry__eyebrow,
html body.crd-support-body .crd-comment-form__eyebrow,
html body.crd-support-body .crd-support-form__label {
	color: var(--crd-support-gold) !important;

	font-family: var(--crd-support-title-font) !important;
	font-weight: 400 !important;

	text-transform: uppercase !important;
}


html body.crd-support-body .crd-support-hero__kicker,
html body.crd-support-body .crd-support-content__kicker {
	display: inline-flex !important;
	align-items: center !important;

	gap: 9px !important;

	margin: 0 0 9px !important;

	font-size: 8px !important;
	line-height: 1 !important;
	letter-spacing: 1.18px !important;
}


html body.crd-support-body .crd-support-hero__kicker::before,
html body.crd-support-body .crd-support-content__kicker::before {
	content: "" !important;

	display: block !important;

	width: 23px !important;
	height: 1px !important;

	background: rgba(209,162,87,.66) !important;
}


html body.crd-support-body .crd-support-hero__title {
	max-width: 820px !important;

	margin: 0 !important;

	color: var(--crd-support-title) !important;

	font-family: var(--crd-support-title-font) !important;
	font-size: clamp(30px, 2.25vw, 40px) !important;
	font-weight: 400 !important;
	line-height: 1.08 !important;

	letter-spacing: .1px !important;
	text-transform: uppercase !important;
}


html body.crd-support-body .crd-support-hero__text {
	max-width: 760px !important;

	margin: 11px 0 0 !important;

	color: var(--crd-support-muted) !important;

	font-size: 13px !important;
	line-height: 1.65 !important;
}


html body.crd-support-body .crd-support-hero__actions {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;

	margin: 0 0 2px !important;
}


html body.crd-support-body .crd-support-btn,
html body.crd-support-body .crd-support-btn:link,
html body.crd-support-body .crd-support-btn:visited {
	box-sizing: border-box !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	min-width: 132px !important;
	min-height: 40px !important;

	padding: 10px 17px !important;

	color: #0b0c0d !important;
	background: var(--crd-support-gold) !important;

	border: 1px solid var(--crd-support-gold) !important;
	border-radius: 0 !important;

	box-shadow: none !important;

	font-family: var(--crd-support-title-font) !important;
	font-size: 9px !important;
	font-weight: 400 !important;
	line-height: 1 !important;

	letter-spacing: .62px !important;
	text-transform: uppercase !important;
	text-decoration: none !important;

	white-space: nowrap !important;

	transition:
		background-color .18s ease,
		border-color .18s ease !important;
}


html body.crd-support-body .crd-support-btn:hover {
	background: var(--crd-support-gold-light) !important;
	border-color: var(--crd-support-gold-light) !important;
}


/* ==========================================================================
   04. CONTENT
========================================================================== */

html body.crd-support-body .crd-support-content {
	width: 100% !important;

	padding: 29px 0 64px !important;

	background: var(--crd-support-page) !important;
}


html body.crd-support-body .crd-support-content__head {
	display: grid !important;

	grid-template-columns: minmax(0, 1fr) minmax(280px, 420px) !important;

	align-items: end !important;

	gap: 26px !important;

	margin: 0 0 17px !important;
	padding: 0 0 16px !important;

	border-bottom: 1px solid var(--crd-support-line-soft) !important;
}


html body.crd-support-body .crd-support-content__title {
	margin: 0 !important;

	color: var(--crd-support-title) !important;

	font-family: var(--crd-support-title-font) !important;
	font-size: clamp(23px, 1.85vw, 30px) !important;
	font-weight: 400 !important;
	line-height: 1.14 !important;
}


html body.crd-support-body .crd-support-content__intro {
	margin: 0 !important;

	color: var(--crd-support-muted) !important;

	font-size: 11.5px !important;
	line-height: 1.6 !important;
}


/* ==========================================================================
   05. FEED / UCOZ SERVICE ELEMENTS
========================================================================== */

html body.crd-support-body .crd-support-feed {
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;
}


html body.crd-support-body .crd-support-feed > br {
	display: none !important;
}


html body.crd-support-body .crd-support-feed .csTop {
	display: grid !important;

	grid-template-columns: minmax(0, 1fr) auto !important;

	align-items: center !important;

	gap: 16px !important;

	width: 100% !important;

	margin: 0 0 8px !important;
	padding: 0 0 11px !important;

	border-bottom: 1px solid var(--crd-support-line-soft) !important;
}


html body.crd-support-body .crd-support-feed #numEntries {
	grid-column: 1 !important;
	grid-row: 1 !important;

	color: var(--crd-support-muted) !important;

	font-size: 10.5px !important;
	line-height: 1.4 !important;
}


html body.crd-support-body .crd-support-feed #pagesBlock1 {
	position: static !important;
	float: none !important;

	grid-column: 2 !important;
	grid-row: 1 !important;

	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;

	gap: 6px !important;

	margin: 0 !important;

	color: var(--crd-support-muted-2) !important;

	font-size: 10px !important;
}


html body.crd-support-body .crd-support-feed .swchItemA,
html body.crd-support-body .crd-support-feed #pagesBlock1 a {
	box-sizing: border-box !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	min-width: 28px !important;
	height: 28px !important;

	padding: 0 7px !important;

	color: var(--crd-support-muted) !important;
	background: transparent !important;

	border: 1px solid var(--crd-support-line) !important;

	text-decoration: none !important;
}


html body.crd-support-body .crd-support-feed .swchItemA {
	color: var(--crd-support-gold-light) !important;
	background: rgba(209,162,87,.035) !important;
	border-color: var(--crd-support-line-gold) !important;
}


/* Нижний служебный дубль пагинации uCoz */
html body.crd-support-body .crd-support-feed #pagesBlock2 {
	display: none !important;
}


/* ==========================================================================
   06. SUPPORT ENTRY
========================================================================== */

html body.crd-support-body .crd-support-entry {
	position: relative !important;

	box-sizing: border-box !important;

	width: 100% !important;

	margin: 0 0 14px !important;
	padding: 0 !important;

	color: var(--crd-support-text) !important;
	background: transparent !important;

	border: 0 !important;
	border-bottom: 1px solid var(--crd-support-line) !important;

	box-shadow: none !important;
}


html body.crd-support-body .crd-support-entry .cmt-head {
	padding: 10px 0 6px !important;
}


html body.crd-support-body .crd-support-entry .cmt-main {
	display: grid !important;

	grid-template-columns: 52px minmax(0, 1fr) !important;

	gap: 12px !important;

	padding: 8px 0 12px !important;
}


html body.crd-support-body .crd-support-entry .cmt-avatar {
	width: 52px !important;
	min-width: 52px !important;
}


html body.crd-support-body .crd-support-entry .cmt-avatar__box,
html body.crd-support-body .crd-support-entry .cmt-avatar__img,
html body.crd-support-body .crd-support-entry .crd-comment-default-avatar {
	width: 46px !important;
	height: 46px !important;
	max-width: 46px !important;
	max-height: 46px !important;
}


html body.crd-support-body .crd-support-entry__eyebrow {
	display: inline-flex !important;
	align-items: center !important;

	gap: 8px !important;

	margin: 0 0 7px !important;

	font-size: 8px !important;
	line-height: 1 !important;
	letter-spacing: 1px !important;
}


html body.crd-support-body .crd-support-entry__eyebrow::before {
	content: "" !important;

	width: 18px !important;
	height: 1px !important;

	background: rgba(209,162,87,.55) !important;
}


html body.crd-support-body .crd-support-entry .commentText,
html body.crd-support-body .crd-support-entry__message {
	color: var(--crd-support-text) !important;

	font-size: 14px !important;
	line-height: 1.6 !important;
}


html body.crd-support-body .crd-support-answer {
	margin-top: 12px !important;
	padding: 10px 12px !important;

	color: var(--crd-support-text) !important;
	background: rgba(209,162,87,.035) !important;

	border: 0 !important;
	border-left: 2px solid rgba(209,162,87,.38) !important;
}


html body.crd-support-body .crd-support-answer .cmt-admin-answer__title {
	margin-bottom: 6px !important;

	color: var(--crd-support-gold) !important;

	font-size: 9px !important;
	letter-spacing: .55px !important;
}


html body.crd-support-body .crd-support-answer .cmt-admin-answer__text {
	color: #b9bdc0 !important;

	font-size: 13px !important;
	line-height: 1.58 !important;
}


/* ==========================================================================
   07. ANSWER BUTTON CREATED FROM REAL $MODER_PANEL$
========================================================================== */

html body.crd-support-body .crd-support-entry__reply-slot:empty {
	display: none !important;
}


html body.crd-support-body .crd-support-entry__reply-slot:not(:empty) {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;

	margin-top: 13px !important;
	padding-top: 11px !important;

	border-top: 1px solid var(--crd-support-line-soft) !important;
}


html body.crd-support-body .crd-support-entry__reply-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	min-width: 174px !important;
	min-height: 36px !important;

	padding: 9px 14px !important;

	color: #d2d5d7 !important;
	background: transparent !important;

	border: 1px solid var(--crd-support-line-gold) !important;
	border-radius: 0 !important;

	font-family: var(--crd-support-title-font) !important;
	font-size: 8.5px !important;
	font-weight: 400 !important;
	line-height: 1 !important;

	letter-spacing: .6px !important;
	text-transform: uppercase !important;

	cursor: pointer !important;

	transition:
		color .18s ease,
		background-color .18s ease,
		border-color .18s ease !important;
}


html body.crd-support-body .crd-support-entry__reply-btn:hover,
html body.crd-support-body .crd-support-entry__reply-btn:focus-visible {
	color: #0b0c0d !important;
	background: var(--crd-support-gold) !important;
	border-color: var(--crd-support-gold) !important;
}


/*
	Реальный $MODER_PANEL$ нужен JS только как источник разрешённой
	кнопки «Редактировать». Сам штатный интерфейс не показываем.
*/
html body.crd-support-body .crd-support-entry__moder-source {
	position: absolute !important;

	width: 1px !important;
	height: 1px !important;

	overflow: hidden !important;

	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;

	white-space: nowrap !important;

	opacity: 0 !important;
	pointer-events: none !important;
}


/* ==========================================================================
   08. PROFILE ACTION
========================================================================== */

html body.crd-support-body .crd-support-entry .cmt-actions {
	padding: 0 0 10px 64px !important;
}


/* ==========================================================================
   09. REAL UCOZ GUESTBOOK FORM
========================================================================== */

html body.crd-support-body .crd-support-feed form.gb-add,
html body.crd-support-body .crd-support-feed form[name="addform"],
html body.crd-support-body .crd-support-feed form[name="addForm"],
html body.crd-support-body .crd-support-feed form#acform,
html body.crd-support-body .crd-support-feed form[action="/gb/"] {
	box-sizing: border-box !important;

	display: block !important;

	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;

	margin: 28px 0 0 !important;
	padding: 0 !important;

	background: transparent !important;

	border: 0 !important;
	box-shadow: none !important;
}


html body.crd-support-body .crd-support-form {
	box-sizing: border-box !important;

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden !important;

	color: var(--crd-support-text) !important;
	background: var(--crd-support-surface) !important;

	border: 1px solid var(--crd-support-line-soft) !important;

	box-shadow: none !important;
}


html body.crd-support-body .crd-support-form .crd-comment-form__head {
	padding: 18px 20px 14px !important;

	background: var(--crd-support-surface) !important;

	border-bottom: 1px solid var(--crd-support-line-soft) !important;
}


html body.crd-support-body .crd-support-form .crd-comment-form__eyebrow {
	margin: 0 0 6px !important;

	font-size: 8px !important;
	line-height: 1 !important;
	letter-spacing: 1.1px !important;
}


html body.crd-support-body .crd-support-form .crd-comment-form__title {
	margin: 0 !important;

	color: var(--crd-support-title) !important;

	font-family: var(--crd-support-title-font) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
}


html body.crd-support-body .crd-support-form__intro {
	max-width: 820px !important;

	margin: 8px 0 0 !important;

	color: var(--crd-support-muted) !important;

	font-size: 11.5px !important;
	line-height: 1.6 !important;
}


html body.crd-support-body .crd-support-form .crd-comment-form__body {
	padding: 16px 20px 19px !important;
}


html body.crd-support-body .crd-support-form__guest-fields {
	display: grid !important;

	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

	gap: 14px !important;

	margin-bottom: 15px !important;
}


html body.crd-support-body .crd-support-form__field {
	min-width: 0 !important;
}


html body.crd-support-body .crd-support-form__label {
	display: block !important;

	margin: 0 0 7px !important;

	color: var(--crd-support-muted) !important;

	font-size: 8px !important;
	line-height: 1 !important;
	letter-spacing: .9px !important;
}


html body.crd-support-body .crd-support-form__hint {
	margin-top: 6px !important;

	color: var(--crd-support-muted-2) !important;

	font-size: 10px !important;
	line-height: 1.45 !important;
}


html body.crd-support-body .crd-support-form__control input,
html body.crd-support-body .crd-support-form__control select {
	box-sizing: border-box !important;

	width: 100% !important;
	min-height: 39px !important;

	padding: 8px 10px !important;

	color: var(--crd-support-text) !important;
	background: var(--crd-support-surface-3) !important;

	border: 1px solid var(--crd-support-line) !important;
	border-radius: 0 !important;

	outline: 0 !important;
	box-shadow: none !important;
}


/* ==========================================================================
   10. BB PANEL — ПОЛНОСТЬЮ СКРЫТА
========================================================================== */

/*
	В HTML формы $BBCODES$ вообще отсутствует.
	Но WYSIBB сам создаёт toolbar внутри $MESSAGE_FL$ — скрываем и его.
*/
html body.crd-support-body .crd-support-form .wysibb-toolbar,
html body.crd-support-body .crd-support-form .wysibb-toolbar-container,
html body.crd-support-body .crd-support-form__bbcodes,
html body.crd-support-body .crd-support-form .crd-comment-form__bb {
	display: none !important;
	visibility: hidden !important;

	width: 0 !important;
	height: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-height: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden !important;

	border: 0 !important;

	opacity: 0 !important;
	pointer-events: none !important;
}


/* ==========================================================================
   11. EDITOR — ТОЛЬКО ТЁМНОЕ ПОЛЕ
========================================================================== */

html body.crd-support-body .crd-support-form__textarea {
	overflow: hidden !important;

	background: var(--crd-support-surface-3) !important;

	border: 1px solid var(--crd-support-line) !important;
}


html body.crd-support-body .crd-support-form .wysibb,
html body.crd-support-body .crd-support-form .wysibb-wrapper {
	box-sizing: border-box !important;

	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	background: var(--crd-support-surface-3) !important;

	border: 0 !important;
	border-radius: 0 !important;

	box-shadow: none !important;

	color-scheme: dark !important;
}


html body.crd-support-body .crd-support-form .wysibb-text {
	display: block !important;

	width: 100% !important;
	height: 150px !important;
	min-height: 150px !important;

	margin: 0 !important;
	padding: 0 !important;

	overflow: hidden !important;

	background: var(--crd-support-surface-3) !important;

	border: 0 !important;
	border-radius: 0 !important;

	box-shadow: none !important;
}


html body.crd-support-body .crd-support-form iframe.wysibb-text-iframe {
	display: block !important;

	width: 100% !important;
	height: 150px !important;
	min-height: 150px !important;

	margin: 0 !important;
	padding: 0 !important;

	background: var(--crd-support-surface-3) !important;

	border: 0 !important;
	border-radius: 0 !important;

	outline: 0 !important;
	box-shadow: none !important;

	color-scheme: dark !important;
}


/* WYSIBB оставляет исходный textarea — он не должен появляться */
html body.crd-support-body .crd-support-form textarea.wysibb-texarea,
html body.crd-support-body .crd-support-form .wysibb textarea.wysibb-texarea {
	display: none !important;
	visibility: hidden !important;

	position: absolute !important;
	left: -99999px !important;

	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;

	opacity: 0 !important;
	pointer-events: none !important;
}


/* ==========================================================================
   12. CAPTCHA
========================================================================== */

html body.crd-support-body .crd-support-form__captcha {
	display: grid !important;

	grid-template-columns: minmax(0, 1fr) auto !important;

	align-items: center !important;

	gap: 8px 18px !important;

	margin-top: 14px !important;
	padding: 13px 14px !important;

	color: var(--crd-support-text) !important;
	background: var(--crd-support-surface-3) !important;

	border: 1px solid var(--crd-support-line-soft) !important;
}


html body.crd-support-body .crd-support-form__captcha .crd-support-form__label {
	grid-column: 1 / -1 !important;

	margin-bottom: 1px !important;
}


html body.crd-support-body .crd-support-form__captcha-control {
	min-width: 0 !important;
}


html body.crd-support-body .crd-support-form__captcha-control table,
html body.crd-support-body .crd-support-form__captcha-control tbody,
html body.crd-support-body .crd-support-form__captcha-control tr,
html body.crd-support-body .crd-support-form__captcha-control td {
	margin: 0 !important;
	padding: 0 !important;

	background: transparent !important;

	border: 0 !important;
}


html body.crd-support-body .crd-support-form__captcha-control input[type="text"] {
	box-sizing: border-box !important;

	width: min(240px, 100%) !important;
	min-height: 38px !important;

	padding: 8px 10px !important;

	color: var(--crd-support-text) !important;
	background: var(--crd-support-surface-3) !important;

	border: 1px solid var(--crd-support-line) !important;
	border-radius: 0 !important;

	outline: 0 !important;
	box-shadow: none !important;
}


html body.crd-support-body .crd-support-form__captcha-control img {
	width: auto !important;
	max-width: 100% !important;
	max-height: 44px !important;
}


/* ==========================================================================
   13. ERROR / SUCCESS
========================================================================== */

html body.crd-support-body .crd-support-form .myWinError,
html body.crd-support-body .crd-support-form .error,
html body.crd-support-body .crd-support-form .uError {
	display: block !important;

	margin: 0 0 12px !important;
	padding: 9px 11px !important;

	color: #e0a18f !important;
	background: rgba(205,103,78,.05) !important;

	border: 1px solid rgba(205,103,78,.16) !important;
	border-left: 2px solid rgba(205,103,78,.45) !important;

	font-size: 11px !important;
	line-height: 1.5 !important;
}


html body.crd-support-body form.gb-add #eMessage,
html body.crd-support-body form#acform #eMessage,
html body.crd-support-body form[name="addform"] #eMessage {
	box-sizing: border-box !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	color: var(--crd-support-muted) !important;
	background: transparent !important;

	border: 0 !important;

	font-size: 11px !important;
	line-height: 1.5 !important;

	text-align: left !important;
}


html body.crd-support-body form.gb-add #eMessage:not(:empty),
html body.crd-support-body form#acform #eMessage:not(:empty),
html body.crd-support-body form[name="addform"] #eMessage:not(:empty) {
	margin-bottom: 12px !important;
	padding: 9px 11px !important;

	color: #91c59c !important;
	background: rgba(120,201,151,.045) !important;

	border: 1px solid rgba(120,201,151,.16) !important;
	border-left: 2px solid rgba(120,201,151,.44) !important;
}


/* ==========================================================================
   14. FORM BOTTOM
========================================================================== */

html body.crd-support-body .crd-support-form__bottom {
	display: grid !important;

	grid-template-columns: minmax(0, 1fr) auto !important;

	align-items: center !important;

	gap: 22px !important;

	margin-top: 15px !important;
	padding-top: 13px !important;

	border-top: 1px solid var(--crd-support-line-soft) !important;
}


html body.crd-support-body .crd-support-form__notice {
	max-width: 800px !important;

	margin: 0 !important;

	color: var(--crd-support-muted-2) !important;

	font-size: 10.5px !important;
	line-height: 1.52 !important;
}


html body.crd-support-body .crd-support-form #gbsbm,
html body.crd-support-body .crd-support-form .commSbmFl,
html body.crd-support-body .crd-support-form .crd-comment-form__submit-input {
	box-sizing: border-box !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: auto !important;
	min-width: 148px !important;
	min-height: 39px !important;

	padding: 10px 16px !important;

	color: #0b0c0d !important;
	background: var(--crd-support-gold) !important;

	border: 1px solid var(--crd-support-gold) !important;
	border-radius: 0 !important;

	box-shadow: none !important;

	font-family: var(--crd-support-title-font) !important;
	font-size: 9px !important;
	font-weight: 400 !important;
	line-height: 1 !important;

	letter-spacing: .62px !important;
	text-transform: uppercase !important;

	cursor: pointer !important;

	transition:
		background-color .18s ease,
		border-color .18s ease !important;
}


html body.crd-support-body .crd-support-form #gbsbm:hover {
	background: var(--crd-support-gold-light) !important;
	border-color: var(--crd-support-gold-light) !important;
}


/* ==========================================================================
   15. LINKS
========================================================================== */

html body.crd-support-body .crd-support-page a:not(.crd-support-btn) {
	text-decoration: none !important;
}


html body.crd-support-body .crd-support-page
a:not(.crd-support-btn):not(.cmt-btn):not(.cmt-username) {
	color: #ae8954 !important;
}


html body.crd-support-body .crd-support-page
a:not(.crd-support-btn):not(.cmt-btn):not(.cmt-username):hover {
	color: var(--crd-support-gold-light) !important;
}


/* ==========================================================================
   16. TABLET
========================================================================== */

@media (max-width: 1050px) {

	html body.crd-support-body .crd-support-shell {
		width: calc(100vw - 36px) !important;
	}


	html body.crd-support-body .crd-support-hero > .crd-support-shell {
		gap: 26px !important;
	}


	html body.crd-support-body .crd-support-content__head {
		grid-template-columns: minmax(0, 1fr) minmax(240px, 340px) !important;
	}

}


/* ==========================================================================
   17. MOBILE
========================================================================== */

@media (max-width: 760px) {

	html body.crd-support-body .crd-support-shell {
		width: calc(100vw - 28px) !important;
	}


	html body.crd-support-body .crd-support-hero {
		padding: 28px 0 23px !important;
	}


	html body.crd-support-body .crd-support-hero > .crd-support-shell {
		display: block !important;
	}


	html body.crd-support-body .crd-support-hero__title {
		font-size: 28px !important;
	}


	html body.crd-support-body .crd-support-hero__text {
		font-size: 12.5px !important;
	}


	html body.crd-support-body .crd-support-hero__actions {
		justify-content: flex-start !important;

		margin-top: 17px !important;
	}


	html body.crd-support-body .crd-support-content {
		padding: 24px 0 48px !important;
	}


	html body.crd-support-body .crd-support-content__head {
		display: block !important;
	}


	html body.crd-support-body .crd-support-content__intro {
		margin-top: 8px !important;
	}


	html body.crd-support-body .crd-support-feed .csTop {
		grid-template-columns: 1fr !important;

		gap: 8px !important;
	}


	html body.crd-support-body .crd-support-feed #pagesBlock1 {
		grid-column: 1 !important;
		grid-row: 2 !important;

		justify-content: flex-start !important;
	}


	html body.crd-support-body .crd-support-entry .cmt-main {
		grid-template-columns: 44px minmax(0, 1fr) !important;

		gap: 10px !important;
	}


	html body.crd-support-body .crd-support-entry .cmt-avatar {
		width: 44px !important;
		min-width: 44px !important;
	}


	html body.crd-support-body .crd-support-entry .cmt-avatar__box,
	html body.crd-support-body .crd-support-entry .cmt-avatar__img,
	html body.crd-support-body .crd-support-entry .crd-comment-default-avatar {
		width: 38px !important;
		height: 38px !important;
		max-width: 38px !important;
		max-height: 38px !important;
	}


	html body.crd-support-body .crd-support-entry .cmt-actions {
		padding-left: 54px !important;
	}


	html body.crd-support-body .crd-support-entry__reply-btn {
		width: 100% !important;
		min-width: 0 !important;
	}


	html body.crd-support-body .crd-support-form .crd-comment-form__head {
		padding: 16px 14px 13px !important;
	}


	html body.crd-support-body .crd-support-form .crd-comment-form__body {
		padding: 14px !important;
	}


	html body.crd-support-body .crd-support-form__guest-fields {
		grid-template-columns: 1fr !important;
	}


	html body.crd-support-body .crd-support-form__bottom {
		grid-template-columns: 1fr !important;

		gap: 13px !important;
	}


	html body.crd-support-body .crd-support-form #gbsbm {
		width: 100% !important;
		min-width: 0 !important;
	}


	html body.crd-support-body .crd-support-form__captcha {
		grid-template-columns: 1fr !important;
	}


	html body.crd-support-body .crd-support-form .wysibb-text,
	html body.crd-support-body .crd-support-form iframe.wysibb-text-iframe {
		height: 138px !important;
		min-height: 138px !important;
	}

}


/* ==========================================================================
   18. VERY SMALL
========================================================================== */

@media (max-width: 440px) {

	html body.crd-support-body .crd-support-shell {
		width: calc(100vw - 20px) !important;
	}


	html body.crd-support-body .crd-support-hero__title {
		font-size: 25px !important;
	}


	html body.crd-support-body .crd-support-btn {
		width: 100% !important;
	}

}

/* ==========================================================================
   19. SUPPORT V10 — PLAIN TEXTAREA FALLBACK
   Если WYSIBB не инициализировался, $MESSAGE_FL$ остаётся обычным textarea.
   Он тоже обязан быть тёмным.
========================================================================== */

html body.crd-support-body .crd-support-form__textarea > textarea,
html body.crd-support-body .crd-support-form textarea[name="message"],
html body.crd-support-body .crd-support-form textarea[name="mess"],
html body.crd-support-body .crd-support-form textarea.commFl,
html body.crd-support-body .crd-support-form textarea {
	box-sizing: border-box !important;

	display: block !important;

	width: 100% !important;
	max-width: 100% !important;
	min-height: 150px !important;

	margin: 0 !important;
	padding: 14px 15px !important;

	resize: vertical !important;

	color: #c8cbce !important;
	background: #090b0c !important;
	background-color: #090b0c !important;

	border: 0 !important;
	border-radius: 0 !important;

	outline: 0 !important;
	box-shadow: none !important;

	font-family: "Open Sans", Arial, sans-serif !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;

	caret-color: #e2b86f !important;

	color-scheme: dark !important;
	-webkit-text-fill-color: #c8cbce !important;
}


html body.crd-support-body .crd-support-form__textarea > textarea:focus,
html body.crd-support-body .crd-support-form textarea.commFl:focus {
	color: #d4d7da !important;
	background: #090b0c !important;
	background-color: #090b0c !important;

	outline: none !important;
	box-shadow: none !important;

	-webkit-text-fill-color: #d4d7da !important;
}


/*
	После инициализации WYSIBB его исходный textarea скрывается.
	Этот селектор должен быть ПОСЛЕ fallback-правил.
*/
html body.crd-support-body .crd-support-form textarea.wysibb-texarea,
html body.crd-support-body .crd-support-form .wysibb textarea.wysibb-texarea,
html body.crd-support-body .crd-support-form textarea.wysibb-texarea.commFl {
	display: none !important;
	visibility: hidden !important;

	position: absolute !important;
	left: -99999px !important;

	width: 1px !important;
	height: 1px !important;
	min-height: 0 !important;
	max-height: 1px !important;

	margin: 0 !important;
	padding: 0 !important;

	opacity: 0 !important;
	pointer-events: none !important;
}


/*
	Сам контейнер поля не даёт браузеру просветить белый фон между
	textarea / iframe и рамкой.
*/
html body.crd-support-body .crd-support-form__textarea {
	background: #090b0c !important;
	background-color: #090b0c !important;
	border: 1px solid var(--crd-support-line) !important;
	color-scheme: dark !important;
}


/* На мобильных plain textarea также компактнее. */
@media (max-width: 760px) {
	html body.crd-support-body .crd-support-form__textarea > textarea,
	html body.crd-support-body .crd-support-form textarea.commFl {
		min-height: 138px !important;
	}
}

/* ==========================================================================
   20. SUPPORT V11 — GUEST CONSENT / PRIVACY
========================================================================== */

html body.crd-support-body .crd-support-form__privacy-note {
	margin-top: 13px !important;
	padding-top: 12px !important;

	color: var(--crd-support-muted-2) !important;

	border-top: 1px solid var(--crd-support-line-soft) !important;

	font-size: 10.5px !important;
	line-height: 1.5 !important;
}


html body.crd-support-body .crd-support-consent {
	display: grid !important;

	grid-template-columns: 18px minmax(0, 1fr) !important;

	align-items: start !important;

	gap: 9px !important;

	min-width: 0 !important;

	margin: 0 !important;

	color: var(--crd-support-muted) !important;

	font-size: 10.5px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;

	cursor: pointer !important;
}


html body.crd-support-body .crd-support-consent__input {
	position: absolute !important;

	width: 1px !important;
	height: 1px !important;

	overflow: hidden !important;

	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;

	white-space: nowrap !important;

	opacity: 0 !important;
}


html body.crd-support-body .crd-support-consent__box {
	position: relative !important;

	box-sizing: border-box !important;

	display: block !important;

	width: 17px !important;
	height: 17px !important;

	margin-top: 1px !important;

	background: #090b0c !important;

	border: 1px solid rgba(255,255,255,.16) !important;

	transition:
		background-color .16s ease,
		border-color .16s ease !important;
}


html body.crd-support-body .crd-support-consent__box::after {
	content: "" !important;

	position: absolute !important;

	left: 4px !important;
	top: 1px !important;

	width: 5px !important;
	height: 9px !important;

	border-right: 2px solid #0b0c0d !important;
	border-bottom: 2px solid #0b0c0d !important;

	transform: rotate(45deg) scale(0) !important;
	transform-origin: center !important;

	transition: transform .12s ease !important;
}


html body.crd-support-body
.crd-support-consent__input:checked + .crd-support-consent__box {
	background: var(--crd-support-gold) !important;
	border-color: var(--crd-support-gold) !important;
}


html body.crd-support-body
.crd-support-consent__input:checked + .crd-support-consent__box::after {
	transform: rotate(45deg) scale(1) !important;
}


html body.crd-support-body
.crd-support-consent__input:focus-visible + .crd-support-consent__box {
	outline: 1px solid var(--crd-support-gold-light) !important;
	outline-offset: 2px !important;
}


html body.crd-support-body .crd-support-consent__text {
	min-width: 0 !important;

	color: var(--crd-support-muted) !important;
}


html body.crd-support-body .crd-support-consent__text a,
html body.crd-support-body .crd-support-consent__text a:link,
html body.crd-support-body .crd-support-consent__text a:visited {
	color: #b9945d !important;

	text-decoration: underline !important;
	text-decoration-color: rgba(185,148,93,.42) !important;
	text-underline-offset: 2px !important;
}


html body.crd-support-body .crd-support-consent__text a:hover {
	color: var(--crd-support-gold-light) !important;
	text-decoration-color: currentColor !important;
}


html body.crd-support-body .crd-support-form__member-note {
	color: var(--crd-support-muted-2) !important;

	font-size: 10.5px !important;
	line-height: 1.5 !important;
}


/* Заблокированная кнопка гостя до согласия */
html body.crd-support-body .crd-support-form #gbsbm:disabled,
html body.crd-support-body .crd-support-form #gbsbm[disabled] {
	color: #666b6f !important;
	background: #111315 !important;

	border-color: rgba(255,255,255,.08) !important;

	cursor: not-allowed !important;

	opacity: 1 !important;
}


html body.crd-support-body .crd-support-form #gbsbm:disabled:hover,
html body.crd-support-body .crd-support-form #gbsbm[disabled]:hover {
	color: #666b6f !important;
	background: #111315 !important;
	border-color: rgba(255,255,255,.08) !important;
}


/* Мобильная форма: согласие и кнопка друг под другом */
@media (max-width: 760px) {

	html body.crd-support-body .crd-support-consent {
		font-size: 10px !important;
		line-height: 1.5 !important;
	}

}

