/* The chrome every page shares: the page frame, both headers, the sidebar
   and its slide-out panels, the main column frame, the footer. Below 769px
   the sidebar becomes a panel and the header goes mobile. */

/*-------------------------------
		Page frame
-------------------------------*/

/*-------------------------------
		Main template layout
-------------------------------*/
/* The page frame: a dark red ridge glows along both edges of the content column
   (only the 89px side strips are visible — the middle sits behind #content),
   and the ridge fades into black towards the very top and bottom of the page.
   Three background layers on one element. */
/* The desktop grid needs ~980px for a usable gallery next to the fixed-width
   details column and sidebar; below that the page scrolls sideways, as the
   original theme did (it demanded the full 1201). The mobile block overrides
   this floor with its own 490px one. */
#page {max-width: 1201px; min-width: 980px; margin: 0 auto; min-height: 726px; background:
	linear-gradient(to bottom, rgba(0,0,0,.85) 0, rgba(0,0,0,.6) 30px, rgba(0,0,0,.5) 90px, rgba(0,0,0,.3) 120px, rgba(0,0,0,.2) 200px, rgba(0,0,0,0) 260px),
	linear-gradient(to top, rgba(0,0,0,.92) 0, rgba(0,0,0,.85) 60px, rgba(0,0,0,.65) 100px, rgba(0,0,0,.5) 130px, rgba(0,0,0,.4) 160px, rgba(0,0,0,.3) 200px, rgba(0,0,0,.2) 250px, rgba(0,0,0,0) 376px),
	linear-gradient(to right, #050303 0, #090504 15px, #120706 30px, #1a0a0b 45px, #2c1010 60px, #3a1c1f 75px, #070707 89px, var(--ink) 120px, var(--ink) calc(100% - 120px), #070707 calc(100% - 89px), #3a1c1f calc(100% - 75px), #2c1010 calc(100% - 60px), #1a0a0b calc(100% - 45px), #120706 calc(100% - 30px), #090504 calc(100% - 15px), #050303 100%);}

#content {max-width: 1023px; margin: 0 auto; background:
	linear-gradient(to bottom, rgba(5,3,4,0) 0%, rgba(5,3,4,.05) 25%, rgba(5,3,4,.1) 33%, rgba(5,3,4,.32) 50%, rgba(5,3,4,.5) 58%, rgba(5,3,4,.73) 67%, rgba(5,3,4,.98) 75%, #050304 83%) no-repeat 0 100% / 100% 120px,
	url("../img/content_bgr.5cc6d8590e61.webp") #080808;}

@media only screen and (max-width: 768px) {
	#page {margin: 0 auto; min-height: 800px; padding: 0 4px; background: linear-gradient(to right,
			#080808 0, #090909 4px, var(--ink) 8px, var(--ink) calc(100% - 8px), #090909 calc(100% - 4px), #080808 100%);}
	/* Below 490 the two card columns cannot both hold their content; the page
		   scrolls sideways instead, exactly as the original theme behaved. */
	#page {min-width: 490px;}
	/* The tariff crowns overhang the frame by ~5px; on wide screens that sinks
		   into the side margins, here it would become sideways scroll. */
	#page {overflow-x: clip;}
	#content {padding-top: 31px;}
}

@media only screen and (max-width: 620px) {
	/* 718 - 570 = 148 */
	/* 148 / 2 = 74 */
	/* 570 - 490 = 80 */
	#page {background: linear-gradient(to right,
			#080808 0, #070707 3px, var(--ink) 8px, var(--ink) calc(100% - 8px), #070707 calc(100% - 3px), #080808 100%);}
}

/*-------------------------------
		Columns
-------------------------------*/

#sidebar {float: left; width: 250px; margin: 7px 20px 0;}

/* 709px at the 1023px anchor; grows no further (the content column is capped)
   and shrinks fluidly on narrower desktops. 314 = sidebar 250 + its margins
   40 + 24px of slack the theme always kept to the right of the column.
   border-box: the column is the decorated panel itself (see below), and its
   padding must count inside this width. */
main {float: left; width: calc(100% - 314px); box-sizing: border-box;}

@media only screen and (max-width: 768px) {
	/* One centred column, never wider than the desktop frame — otherwise the
		   card's two fixed-purpose columns would drift apart with a void between. */
	main {float: none; width: auto; max-width: 709px; margin: 0 auto;}
}

@media only screen and (max-width: 620px) {
	main {min-height: 800px;}
}

/*-------------------------------
		Desktop header
-------------------------------*/

/* One element: the bar gradient, rounded ends, and the side margins that the
   two removed wrappers used to contribute between them. */
#top-panel {margin: 0 35px 2px 26px; height: 31px; border-radius: 4px;
	display: flex; align-items: flex-start;
	background: linear-gradient(to bottom, var(--ink) 0%, var(--ink) 13%, #010101 30%, #030303 43%, #070707 57%, #0b0b0b 70%, #131313 87%, rgba(0,0,0,.5) 100%);}

/* The auto margin pushes the city tabs to the right; on narrower desktops the
   tabs give way down to their labels instead of wrapping to a second row. */
#top-panel a.logo {margin: 5px auto 0 50px; font-size: 14px; font-weight: bold; text-decoration: none;}

.logo span {color: var(--text-strong);}

.logo span + span {color: red;}

#top-panel a.citytab {font-family: Arial; font-size: 13px; font-weight: bolder; text-align: center; 
	color: var(--text-strong); text-decoration: none; text-shadow: 1px 2px var(--ink);
	flex: 0 1 111px; min-width: 60px; height: 24px; padding-top: 7px;
	box-shadow: inset 1px 0 0 #060606, inset -1px 0 0 #060606;
	background:
		radial-gradient(64px 20px at 50% 112%, #3a3a3b 0%, rgba(58,58,59,0) 100%),
		linear-gradient(to bottom, var(--ink) 0%, var(--ink) 42%, #060606 62%, #0f0f0f 84%, rgba(0,0,0,.5) 100%);}

/* The highlight is elliptical, centred on the top edge — hence a radial layer
   over the base gradient rather than one linear pass. */
#top-panel a.citytab:hover {box-shadow: inset 1px 0 0 #040404, inset -1px 0 0 #040404;
	background:
		radial-gradient(58px 21px at 50% -6%, #c60000 0%, rgba(198,0,0,0) 100%),
		linear-gradient(to bottom, #750000 0%, #750000 42%, #670000 60%, #460000 82%, rgba(0,0,0,.75) 100%);}

#top-panel a.citytab.showall {font-size:11px; padding-top:8px; height:23px;}

#top-panel a.citytab:active,
#top-panel a.citytab[aria-current] {box-shadow: inset 1px 0 0 #040404, inset -1px 0 0 #040404;
	background:
		radial-gradient(58px 21px at 50% -6%, #c40000 0%, rgba(196,0,0,0) 100%),
		linear-gradient(to bottom, #5a0000 0%, #5a0000 42%, #510000 60%, #3c0000 82%, rgba(0,0,0,.5) 100%);}

@media only screen and (max-width: 768px) {
	#top-panel {display: none;}
}

@media only screen and (max-width: 620px) {
	#top-panel {display: none;}
}

/*-------------------------------
		Mobile header
-------------------------------*/

/*-------------------------------
		Top panel
-------------------------------*/
#top-panel-mobile {display: none;}

@media only screen and (max-width: 768px) {
	/* One header for every width under 851px. The two size sets the theme had
		   were driven by two sprite sheets; with gradients there is nothing left to
		   differ. Only the bar width follows the page grid (687px here, 473px under
		   621px). Fixed to the viewport and never wider than it, so the bar cannot
		   drift off the page when the page itself scrolls sideways. */
	#top-panel-mobile {width: min(687px, 100% - 16px); position: fixed; top: 0; left: 50%;
			translate: -50%; margin: 0; z-index: 8; height: 46px; border-radius: 4px;
			display: flex; justify-content: space-between; align-items: flex-start;
			background: linear-gradient(to bottom, var(--ink) 0%, var(--ink) 13%, #010101 30%, #030303 43%,
				#070707 57%, #0b0b0b 70%, #131313 87%, rgba(0,0,0,.5) 100%);}
	#top-panel-mobile a.logo {margin: 11px 0 0; font-size: 15px; font-weight: bold; text-decoration: none;}
	#top-panel-mobile a.menu {font-family: Arial; font-size: 14px; font-weight: bolder; text-align: center; color: var(--text-strong); text-decoration: none; text-shadow: 1px 2px var(--ink);
			width: 155px; max-width: 36%; height: 46px; padding-top: 11px; box-sizing: border-box;
			box-shadow: inset 1px 0 0 #040404, inset -1px 0 0 #040404;
			background:
				radial-gradient(86px 21px at 50% -6%, #c40000 0%, rgba(196,0,0,0) 100%),
				linear-gradient(to bottom, #5a0000 0%, #5a0000 42%, #510000 60%, #3c0000 82%, rgba(0,0,0,.5) 100%);}
	#top-panel-mobile a.menu:hover {
			background:
				radial-gradient(86px 21px at 50% -6%, #c60000 0%, rgba(198,0,0,0) 100%),
				linear-gradient(to bottom, #750000 0%, #750000 42%, #670000 60%, #460000 82%, rgba(0,0,0,.75) 100%);}
}

/*-------------------------------
		Sidebar & its panel form
-------------------------------*/

/*-------------------------------
		Side column layout
-------------------------------*/
#sidebar .menu, #sidebar .info-for-users > div {background: rgba(0, 0, 0, .5);
	padding: 10px; margin-bottom: 15px; border: 1px solid var(--panel-raised);}

#sidebar .menu {text-align: center;}

.menu a {font-size: 16px; text-decoration: none;}

.menu a:hover {text-decoration: underline;}

.menu a[aria-current] {text-decoration: underline; font-style: normal;}

/* The slide-out panels scroll, but there is no reason to show a scrollbar:
   this is an overlay, not the document. overflow-x is spelled out — with
   overflow-y:auto the browser computes the other axis as auto too, and a second
   bar appears along the bottom. */
#sidebar .container, #cities-panel .container {overflow-x: hidden; scrollbar-width: none;}

#sidebar .container::-webkit-scrollbar, #cities-panel .container::-webkit-scrollbar {display: none;}

@media only screen and (max-width: 768px) {
	#sidebar {background: rgba(0,0,0,0.95); border-right: 1px solid var(--accent-border); position: fixed; top: 0; left: -500px; float: none; margin: 0px; display: block; height: 100%; z-index: 10; transition: 0.5s;}
	#sidebar .container {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;}
	#sidebar .menu, #sidebar .info-for-users > div {background: rgba(0, 0, 0, .5);
			padding: 10px; margin-bottom: 15px; border: 1px solid var(--panel-raised);}
	#menu-close {position: absolute; top: 13px; right: 20px; width: 15px; height: 15px; cursor: pointer; z-index: 1; 
			background:
				linear-gradient(45deg, transparent calc(50% - 1px), #fc0101 calc(50% - 1px)
					calc(50% + 1px), transparent calc(50% + 1px)),
				linear-gradient(-45deg, transparent calc(50% - 1px), #fc0101 calc(50% - 1px)
					calc(50% + 1px), transparent calc(50% + 1px));}
}

@media only screen and (max-width: 620px) {
	#sidebar {background: rgba(0,0,0,0.95); width: 280px; border-right: 1px solid var(--accent-border); position: fixed; top: 0; left: -500px; float: none; margin: 0px; display: block; height: 100%; z-index: 10; transition: 0.5s;}
	#sidebar .container {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;}
	#sidebar .menu, #sidebar .info-for-users > div {background: rgba(0, 0, 0, .5);
			padding: 10px; margin-bottom: 15px; border: 1px solid var(--panel-raised); font-size: 13px;}
	#menu-close {position: absolute; top: 13px; right: 20px; width: 15px; height: 15px; cursor: pointer; z-index: 1; 
			background:
				linear-gradient(45deg, transparent calc(50% - 1px), #fc0101 calc(50% - 1px)
					calc(50% + 1px), transparent calc(50% + 1px)),
				linear-gradient(-45deg, transparent calc(50% - 1px), #fc0101 calc(50% - 1px)
					calc(50% + 1px), transparent calc(50% + 1px));}
}

/*-------------------------------
		Sidebar widgets
-------------------------------*/

#sidebar .box {background: rgba(0, 0, 0, .5); padding: 10px; margin-bottom: 15px; border: 1px solid var(--panel-raised);}

#sidebar .box h3 {margin: 0 5px 5px;}

@media only screen and (max-width: 620px) {
	#sidebar .box {font-size: 13px;}
}

/*
	Login box
*/
.login-box .welcome {color: var(--text-strong); font-weight: bold; text-align: center; text-indent: 0; padding: 2px 0;}

.login-box form {display: grid; grid-template-columns: max-content auto; align-items: center; padding-top: 8px;}

.login-box label {text-align: right; padding: 2px 4px;}

.login-box label[for="login-phone"] {font-weight: bold; color: var(--accent-border);}

.login-box input {width: 120px; font-weight: bold;}

.login-box .actions, .login-box .alternatives {grid-column: 1 / -1; text-align: center;}

.login-box .actions {margin-top: 8px;}

.login-box .alternatives a {display: block; margin: 5px;}

.login-box .alternatives a:last-child {margin: 10px;}

/*
	Profile thumbnails: recommended and next
*/
.profile-thumbs > div {display: inline-block; width: 112px; vertical-align: top; text-align: center;}

.profile-thumbs .name {display: block; margin: 3px 0 0; font-size: 13px; color: var(--gold);
	font-family: Georgia, "Times New Roman", Times, serif;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.profile-thumbs > div:hover .name {text-decoration: underline;}

/* The original cropped every photo to 100×130 on the server; the same crop is
   now background-size: cover on a plain div. The 4.5px below stands in for the
   baseline gap the inline <img> used to leave — the grid keeps its rhythm. */
.profile-thumbs .photo {width: 100px; height: 130px; margin: 2px auto 4.5px; border: 1px solid #444;
	background-size: cover; background-position: center;}

/* The theme kept this gap between the recommended and the next profiles. */
.next-profiles {margin-top: 150px;}

/*
	The signed-in user's box
*/
.user-box p {text-indent: 0; padding: 0;}

.user-box .status {color: #A49270;}

.user-box .actions {text-align: center;}

.user-box form {display: inline;}

/*-------------------------------
		Cities panel
-------------------------------*/

/*-------------------------------
		Side panel (all widths)
-------------------------------*/
/* One slide-out panel carries the list of cities at every screen width. */
#menu-overlay {height: 100%; width: 0; position: fixed; z-index: 9; top: 0; left: 0; background-color: rgba(0,0,0,.7); overflow-y: auto; overflow-x: hidden; text-align: center; opacity: 0; transition: opacity 1s;}

#cities-panel {background: rgba(0,0,0,0.95); width: min(420px, 100vw); border-left: 1px solid var(--accent-border); position: fixed; top: 0; right: -500px; margin: 0px; display: block; height: 100%; z-index: 10; transition: 0.5s;}

#cities-panel .container {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;}

#cities-panel .container > div {padding: 10px; margin: 0 10px 15px;}

#cities-panel h4 {margin:0; padding: 10px 0; color:var(--text-muted); text-align: center; font-size:19px; font-family:"Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;}

#cities-panel ul {list-style-type: disc; padding: 5px 0;}

#cities-panel li {float: left; height: 31px; line-height: 31px; width: 176px; padding-left: 24px;}

#cities-panel li a {color: var(--text-strong); text-decoration: none; font-size: 15px;}

#cities-panel li a:hover {text-decoration: underline;}

#cities-panel li span {color: #666; font-size: 13px;}

#cities-close {position: absolute; top: 13px; left: 22px; width: 15px; height: 15px; cursor: pointer; z-index: 1;
	background:
		linear-gradient(45deg, transparent calc(50% - 1px), #fc0101 calc(50% - 1px)
			calc(50% + 1px), transparent calc(50% + 1px)),
		linear-gradient(-45deg, transparent calc(50% - 1px), #fc0101 calc(50% - 1px)
			calc(50% + 1px), transparent calc(50% + 1px));}

@media only screen and (max-width: 620px) {
	#menu-overlay {height: 100%; width: 0; position: fixed; z-index: 9; top: 0; left: 0; background-color: rgba(0,0,0,.7); overflow-y: auto; overflow-x: hidden; text-align: center; opacity: 0; transition: opacity 1s;}
	#cities-panel {background: rgba(0,0,0,0.95); width: min(368px, 100vw); border-left: 1px solid var(--accent-border); position: fixed; top: 0; right: -500px; margin: 0px; display: block; height: 100%; z-index: 10; transition: 0.5s;}
	#cities-panel .container {position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;}
	#cities-panel .container > div {padding: 10px; margin: 0 10px 15px;}
	#cities-panel h4 {margin:0; padding: 10px 0; color:var(--text-muted); text-align: center; font-size:19px; font-family:"Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;}
	#cities-panel li {height: 31px; line-height: 31px; width: 165px; padding-left: 9px;}
	#cities-panel li a {font-size: 14px;}
	#cities-panel li span {font-size: 12px;}
	#cities-close {position: absolute; top: 13px; left: 22px; width: 15px; height: 15px; cursor: pointer; z-index: 1; 
			background:
				linear-gradient(45deg, transparent calc(50% - 1px), #fc0101 calc(50% - 1px)
					calc(50% + 1px), transparent calc(50% + 1px)),
				linear-gradient(-45deg, transparent calc(50% - 1px), #fc0101 calc(50% - 1px)
					calc(50% + 1px), transparent calc(50% + 1px));}
}

/*-------------------------------
		Main column panel
-------------------------------*/

/*-------------------------------
		Main column layout
-------------------------------*/
main {overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all;  word-break: break-word; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;}

/* The main column draws its own panel: rounded caps at both ends and a 60%
   black fill whose side edges are not lines but a 24px feather — a soft ramp
   carrying two hairlines (#202020 at 8px, #101010 at 12px) before settling
   into the fill. The profile is sampled from the original sprite pixel by
   pixel. */
main {border-radius: 7px; padding: 20px 31px 19px;
	box-shadow: inset 0 1px 0 rgba(0,0,0,.44);
	background:
	linear-gradient(to bottom, rgba(0,0,0,.02) 0%, rgba(0,0,0,.31) 27%, #0c0c0c 40%, #050405 60%, #050405 88%, #0c0c0c 100%) no-repeat 0 0 / 100% 15px,
	linear-gradient(to bottom, #0c0c0c 0%, #060505 22%, #040404 45%, rgba(0,0,0,.44) 60%, rgba(0,0,0,.06) 100%) no-repeat 0 100% / 100% 14px,
	linear-gradient(to top, rgba(0,0,0,.44) 0, rgba(0,0,0,0) 8px) no-repeat 0 calc(100% - 14px) / 100% 8px,
	linear-gradient(to right,
		rgba(0,0,0,.02) 0, rgba(0,0,0,.31) 4px, var(--border) 8px, #101010 12px,
		rgba(0,0,0,.73) 16px, rgba(0,0,0,.61) 20px, rgba(0,0,0,.6) 24px,
		rgba(0,0,0,.6) calc(100% - 24px), rgba(0,0,0,.61) calc(100% - 20px),
		rgba(0,0,0,.73) calc(100% - 16px), #101010 calc(100% - 12px),
		var(--border) calc(100% - 8px), rgba(0,0,0,.31) calc(100% - 4px), rgba(0,0,0,.02) 100%);}

/* The site banner is the column's last child in the markup; the column lays
   out as a flex column and lifts it back to the top. Flex items do not collapse
   margins, so the banner's bottom margin is dropped — the next block's own top
   margin already sets the visual gap, exactly as the collapsed margins did. */
main {display: flex; flex-direction: column;}

main > .static-message {order: -1; margin-bottom: 0;}

@media only screen and (max-width: 620px) {
	/* The panel is described once above; only the padding differs here. */
	main {padding: 20px 15px 19px;}
}

/*-------------------------------
		Footer & scroll-top
-------------------------------*/

#footer {height: 180px; clear: both;}

#footer nav {padding: 45px 0 5px; line-height: 140%; text-align: center;}

#footer li {display: inline;}

#footer li + li::before {content: " | ";}

@media only screen and (max-width: 620px) {
	/*-------------------------------
			Footer
		-------------------------------*/
	#footer {font-size: 15px;}
}

#scroll-top {display: none; z-index: 1000; position: fixed; left: 10px; top: 40px;}

#scroll-top .button {font-size: 18px; padding: 2px 10px; border-color: rgb(73, 25, 25); color: rgb(153, 153, 153);}

@media only screen and (max-width: 768px) {
	#scroll-top {display: none !important;}
}

@media only screen and (max-width: 620px) {
	#scroll-top {display: none !important;}
}

/*---------------------------------------------------------------
  Продакшн-состояния и починки
---------------------------------------------------------------*/


.notice.warn-note,
.notice.error,
.notice.warning {
  border-color: #843232;
  background: #280f0f;
  color: #ffb0b0;
}

/* Успех живёт рядом с остальными состояниями полосы: base.css красит `.notice`
   зелёным по умолчанию, а метку `success` messages ставит на любой странице. */
.notice.success {
  border-color: #36743b;
  background: #10240f;
  color: #bfe8c2;
}

@media only screen and (max-width: 620px) {
  /* Визуальный референс держит исторический минимум 490px, а принятый
     продакшн-флоу телефона — одна текучая колонка. Поэтому минимум снимается
     здесь: иначе каждая страница на 390px получает горизонтальную прокрутку
     всего документа. */
  #page {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    /* Без боковых 4px chrome.css: на телефоне каждый пиксель
       ширины на счету, а декоративная рамка страницы того не стоит. */
    padding: 0;
  }

  #content {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
  }
}

.menu .unavailable {
  color: var(--gold);
  font-size: 16px;
  text-decoration: none;
}

.login-box .alternatives .unavailable {
  display: block;
  color: var(--gold);
  margin: 5px;
}

.login-box .alternatives .unavailable:last-child {
  margin: 10px;
}

#footer .unavailable {
  color: var(--gold);
  text-decoration: underline;
}

.unavailable[aria-disabled="true"] {
  cursor: not-allowed;
}

.button.unavailable {
  color: var(--text-strong);
  text-decoration: none;
}

.static-message .adowner-msg .unavailable,
.static-message .not-adowner-msg .unavailable {
  display: block;
  color: var(--gold);
  text-decoration: underline;
}