/* ============================================================================
   RPRO.BY — фирменная палитра и общие UI-правила
   ----------------------------------------------------------------------------
   ЭТО ЕДИНАЯ ТОЧКА ПРАВКИ ЦВЕТОВ САЙТА (п.6 ТЗ «Централизация стилей»).
   Меняются только переменные в :root ниже — остальные правила их используют.

   Палитра — из Брендбука ООО «РесайклПро» (RPRO BRANDBOOK.pdf, стр. 5):
     фирменный зелёный: C:70 M:5 Y:100 K:20  /  R:70 G:160 B:15  → #46A00F
     фирменный тёмный:  C:0 M:0 Y:0 K:75      /  R:89 G:89 B:89   → #595959

   Для больших плашек (хедер, футер, целевые кнопки) используется тот же
   фирменный тон, но темнее — чтобы белый текст проходил по контрасту
   WCAG AA (>= 4.5:1), как требует п.6 ТЗ «Проверка читаемости»:
     --rpro-green-dark  (#3A7F0C) + белый = 4.97:1
     --rpro-green-darker(#2E6609) + белый = 6.95:1
     --rpro-green-dark  (#3A7F0C) на белом = 4.97:1 (ссылки/hover)
   ========================================================================== */

:root {
	/* --- фирменные цвета из Брендбука ------------------------------------- */
	--rpro-green: #46a00f;          /* фирменный зелёный (R70 G160 B15) */
	--rpro-green-dark: #3a7f0c;     /* он же темнее: хедер, целевые кнопки */
	--rpro-green-darker: #2e6609;   /* самый тёмный: футер, hover кнопок */
	--rpro-green-soft: #e9f4e2;     /* мягкий акцентный фон (карточки, бейджи) */
	--rpro-green-bright: #55c410;   /* ярче фирменного — hover зелёных плашек-ссылок */
	--rpro-green-pale: #b8e986;     /* светло-зелёный — hover текста в меню на зелёной полосе */
	--rpro-green-contrast: #ffffff; /* текст на фирменном фоне */
	--rpro-dark: #595959;           /* фирменный тёмный (K:75) */
	/* кнопка «Наверх» — в фирменном зелёном (п.5 ТЗ);
	   чтобы совпадала с виджетом чата, цвет виджета в Bitrix24 ставится #46A00F */
	--rpro-chat-green: #46a00f;

	/* --- карта пунктов приёма (/punkty-priema) ----------------------------- */
	--rpro-map-marker: #00a64c;   /* цвет меток — как в прежней карте-конструкторе */
	--rpro-map-pulse: #00d966;    /* более яркий зелёный для мигающей обводки */

	/* --- переопределение тем оформления (Bootstrap / green.css) ------------ */
	--bs-primary: var(--rpro-green-dark);
	--bs-success: var(--rpro-green-dark);
	--bs-green: var(--rpro-green-dark);
	--bs-leaf: var(--rpro-green);
	--bs-primary-rgb: 58, 127, 12;
	--bs-success-rgb: 58, 127, 12;
	--bs-green-rgb: 58, 127, 12;
	--bs-link-color: var(--rpro-green-dark);
	--bs-link-hover-color: var(--rpro-green-darker);
}

/* --- хедер и футер -------------------------------------------------------- */
.bgreen {
	background-color: var(--rpro-green-dark) !important;
}

/* --- меню в зелёной шапке -------------------------------------------------
   При наведении меняется ТОЛЬКО цвет текста, без подложки.
   На тёмно-зелёной полосе тёмно-зелёный текст не читается (контраст 1:1),
   поэтому здесь текст становится светло-зелёным фирменного тона,
   а в белом выпадающем списке — тёмно-зелёным. */
.bgreen .navbar-nav .nav-link.whitemenu:hover,
.bgreen .navbar-nav .nav-link.whitemenu:focus,
.bgreen .navbar-nav .nav-link.whitemenu.active {
	color: var(--rpro-green-pale) !important;
	background-color: transparent;
}

.bgreen .navbar-nav .dropdown-item:hover,
.bgreen .navbar-nav .dropdown-item:focus {
	color: var(--rpro-green-dark) !important;
	background-color: transparent;
}

/* Стрелка подменю («Юридическим лицам»): небольшая, белая, видна по умолчанию.
   При раскрытии списка не исчезает из потока (иначе соседний текст прыгает),
   а плавно уходит в раскрытый список: поворот + затухание, место сохраняется.
   (Штатная стрелка темы была того же цвета, что и фон, и размером 5px.) */
.bgreen .navbar-nav:not(.sm-collapsible) .nav-link.has-submenu .sub-arrow {
	color: #fff !important;
	font-size: 0.4rem;
	line-height: 1;
	display: inline-block;
	vertical-align: 0.12rem;
	transform-origin: 50% 45%;
	transition: transform 0.28s ease, opacity 0.22s ease, color 0.2s ease;
}

.bgreen .navbar-nav .nav-link.has-submenu[aria-expanded="true"] .sub-arrow,
.bgreen .navbar-nav .nav-item.show > .nav-link .sub-arrow {
	opacity: 0;
	transform: rotate(-180deg) scale(0.9);
}

footer.bg-dark,
.footer.bg-dark {
	background-color: var(--rpro-green-darker) !important;
}

/* белый текст в футере остаётся читаемым на новом фоне */
footer.bg-dark a:not(.btn),
footer.bg-dark .widget-title,
footer.bg-dark .h4like {
	color: #fff !important;
}

footer.bg-dark a:not(.btn):hover {
	color: var(--rpro-green-soft) !important;
}

/* --- целевые кнопки ------------------------------------------------------- */
.btn-primary,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--rpro-green-dark);
	border-color: var(--rpro-green-dark);
	color: var(--rpro-green-contrast);
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled).active {
	background-color: var(--rpro-green-darker);
	border-color: var(--rpro-green-darker);
	color: var(--rpro-green-contrast);
}

.btn-outline-primary {
	color: var(--rpro-green-dark);
	border-color: var(--rpro-green-dark);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
	background-color: var(--rpro-green-dark);
	border-color: var(--rpro-green-dark);
	color: var(--rpro-green-contrast);
}

.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn:focus-visible {
	box-shadow: 0 0 0 0.25rem rgba(70, 160, 15, 0.35);
}

/* --- ссылки и hover ------------------------------------------------------- */
/* ссылки: hover фирменным тёмно-зелёным; зелёные плашки-ссылки (.underline-2/.underline)
   сюда не попадают — у них свой hover */
a:not(.btn):not(.nav-link):not(.underline-2):not(.underline):hover {
	color: var(--rpro-green-dark);
}

/* «Зелёная плашка» со ссылками («Смотреть все новости», «подробнее про маршруты»).
   Класс .underline-2 в теме не определён, поэтому фон задаёт наша плашка.
   Обычное состояние: фирменный зелёный фон на всю высоту текста (как было),
   текст белый, подчёркивание белое.
   Наведение: фон ярче, текст и подчёркивание чуть темнее белого. */
.underline-2.green,
.underline.green {
	color: var(--rpro-green-contrast);
	background-image: linear-gradient(120deg, var(--rpro-green) 0%, var(--rpro-green) 100%);
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 100% 100%;       /* плашка на всю высоту текста */
	text-decoration: underline;
	text-decoration-color: var(--rpro-green-contrast);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: color 0.2s ease, background-image 0.2s ease, text-decoration-color 0.2s ease;
}

.underline-2.green:hover,
.underline.green:hover {
	color: #e6e6e6;                   /* чуть темнее белого */
	background-image: linear-gradient(120deg, var(--rpro-green-bright) 0%, var(--rpro-green-bright) 100%);
	text-decoration-color: #e6e6e6;
}

.post-header a:hover p,
.card_mainpage a:hover {
	color: var(--rpro-green-dark);
}

/* мягкие акцентные фоны и обводки */
.bg-soft-primary {
	background-color: var(--rpro-green-soft) !important;
}

.border-primary,
.card-border-start.border-primary {
	border-color: var(--rpro-green-dark) !important;
}

/* ============================================================================
   Адаптивная вёрстка: шапка, мобильные разрешения, горизонтальный скролл
   ========================================================================== */

/* Никакого горизонтального скролла: широкие блоки ограничиваем вьюпортом */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

img,
iframe,
video,
svg,
canvas {
	max-width: 100%;
}

/* Карты и интерактивные iframe всегда по ширине контейнера */
.map,
.map-full,
.map iframe,
.map-full iframe,
.map > div {
	width: 100% !important;
	max-width: 100% !important;
}

.map iframe,
.map-full iframe {
	height: 380px !important;
	display: block;
}

@media (max-width: 767.98px) {
	.map iframe,
	.map-full iframe {
		height: 280px !important;
	}
}

/* Конструктор Яндекс.Карт вставляет <iframe width="500"> — на мобильных
   он растягивал страницу и давал горизонтальный скролл (п.8 ТЗ) */
.rpro-map-embed {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.rpro-map-embed iframe {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	display: block;
}

@media (max-width: 991.98px) {
	.rpro-map-embed iframe {
		aspect-ratio: 4 / 3;
	}
}

/* Таблицы и длинные строки не растягивают страницу */
table {
	max-width: 100%;
}

.table-responsive {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

body {
	overflow-wrap: break-word;
}

/* --- шапка: логотип --------------------------------------------------------
   В шапке один логотип (logo-sm.png: знак + RPRO.BY + подпись). Тема по
   умолчанию скрывает .logo-md на десктопе и .logo-lg на мобильном — оставляем
   один файл на всех разрешениях, поэтому возвращаем ему видимость. */
.topbar .navbar-brand {
	display: flex;
	align-items: center;
	min-width: 0;
	padding-block: 0;
}

.topbar .logoimg {
	display: block !important;
	max-width: 190px;
	height: auto;
}

/* тема скрывает .logo-md на десктопе — возвращаем видимость */
.topbar .logoimg.logo-md {
	display: block !important;
}

/* логотип в тёмном мобильном меню */
.offcanvas-header .logoimg {
	max-width: 168px;
	height: auto;
	margin-inline-start: 0.5rem;
}

/* --- шапка: мобильные разрешения (320-430px и планшеты) -------------------
   На мобильном шапка зелёная, а логотип нарисован для светлого фона: тёмный
   «PRO.BY» на зелёном не виден. Один и тот же файл делаем белым фильтром —
   в разметке остаётся одно изображение логотипа.
   Размеры подобраны так, чтобы логотип + ЛК + телефон + кнопка меню
   гарантированно помещались в строку без переполнения по горизонтали. */
@media (max-width: 991.98px) {
	.topbar {
		padding-block: 0.55rem;
	}

	.topbar .logoimg,
	.offcanvas-header .logoimg {
		filter: brightness(0) invert(1);
	}

	.topbar .logoimg {
		max-width: 154px;
	}

	/* кнопка меню: визуально компактная, зона нажатия ~44x44 */
	.topbar .hamburger {
		box-sizing: content-box;
		padding: 0.65rem 0.6rem;
		margin: 0;
	}
}

@media (max-width: 575.98px) {
	.topbar {
		flex-wrap: nowrap;
		gap: 0.15rem;
		padding-block: 0.5rem;
	}

	.topbar .navbar-brand {
		flex: 0 0 auto;
		min-width: 0;
		margin-right: 0;
	}

	.topbar .navbar-other {
		min-width: 0;
	}

	.topbar .navbar-nav {
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.15rem;
	}

	.topbar .logoimg {
		max-width: 112px;
	}

	/* «Личный кабинет» -> «ЛК» */
	.topbar .pvw-title {
		padding: 0.55rem 0.3rem !important;
		font-size: 0.78rem;
		white-space: nowrap;
	}

	/* блок «телефон + кнопка меню»: без лишнего отступа темы (иначе строка
	   шире контейнера и появляется горизонтальная прокрутка) */
	.topbar .navbar-nav > li.d-lg-none {
		margin-left: 0 !important;
	}

	/* телефон приёмной: одна строка, без переноса цифр и наложений */
	.topbar .navbar-hamburger {
		gap: 0.15rem;
	}

	.topbar .navbar-hamburger > a[href^="tel:"] {
		white-space: nowrap !important;
		font-size: 0.7rem !important;
		font-weight: 700 !important;
		padding: 0.55rem 0.15rem !important;
		line-height: 1.1;
	}

	/* иконку трубки убираем — место нужнее номеру и логотипу */
	.topbar .navbar-hamburger > a[href^="tel:"] i {
		display: none;
	}

	.topbar .hamburger {
		flex: 0 0 auto;
	}
}

/* 361-380px (iPhone SE/mini): чуть меньше логотип и номер, чтобы строка влезла */
@media (max-width: 380px) {
	.topbar .logoimg {
		max-width: 102px;
	}

	.topbar .navbar-hamburger > a[href^="tel:"] {
		font-size: 0.66rem !important;
	}
}

/* очень узкие экраны (320-360px): номер оставляем только иконкой,
   иначе строка не помещается и появляется горизонтальная прокрутка */
@media (max-width: 360px) {
	.topbar .logoimg {
		max-width: 104px;
	}

	.topbar .navbar-hamburger > a[href^="tel:"] {
		font-size: 0 !important;
	}

	.topbar .navbar-hamburger > a[href^="tel:"] i {
		display: inline-block;
		font-size: 1.05rem;
	}
}

@media (max-width: 340px) {
	.topbar .logoimg {
		max-width: 96px;
	}

	.topbar .pvw-title {
		font-size: 0.72rem;
	}
}

/* Пагинация: при большом числе страниц переносится, а не вылезает за экран */
.pagination {
	flex-wrap: wrap;
	justify-content: center;
	max-width: 100%;
}

/* --- мобильная типографика и размеры элементов ---------------------------
   На телефонах поднимаем слишком мелкий текст до читаемого и доводим
   зоны нажатия до 44px (палец, а не курсор). */
@media (max-width: 991.98px) {
	/* пункты мобильного меню: высота 39px -> 44px */
	.offcanvas-nav .navbar-nav > .nav-item > .nav-link {
		display: flex;
		align-items: center;
		min-height: 2.2rem;
	}
}

@media (max-width: 575.98px) {
	/* пагинация: на телефоне кнопки удобного размера для пальца */
	.pagination {
		gap: 0.25rem;
		margin-inline: 0;
	}

	.pagination .page-link {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 2.2rem;
		height: 2.2rem;
		padding: 0 0.4rem;
	}

	/* текст карточек выездов/катализаторов: 12px -> 14px */
	.card_mainpage_text {
		font-size: 0.7rem !important;   /* тема фиксирует 12px с !important */
		line-height: 1.45;
	}

	/* «ЛК» в шапке: зона нажатия 44px (тема обнуляет вертикальные паддинги) */
	.topbar .navbar-other .nav-link.pvw-title {
		padding: 0.7rem 0.3rem !important;
	}

	/* телефон в шапке: зона нажатия 44px по высоте */
	.topbar .navbar-hamburger > a[href^="tel:"] {
		padding-block: 0.75rem !important;
		display: inline-flex;
		align-items: center;
	}
}

/* ============================================================================
   Единая ось контейнера.
   Все объекты страниц выравниваются относительно .container (та же ось, что
   у шапки — «container flex-lg-column»). Строки, которые заполнены не
   целиком (меньше 12 колонок), центрируются по оси контейнера: для полностью
   заполненных строк правило не даёт эффекта.
   ========================================================================== */
.container .row:not([class*="justify-content"]) {
	justify-content: center;
}

/* одиночный блок (колонка), не занимающий всю ширину, — по центру оси */
.container > .row > [class*="col-"]:only-child[class*="col-"]:not([class*="col-12"]):not([class*="offset-"]) {
	margin-left: auto;
	margin-right: auto;
}

/* Карточки, блоки и медиа внутри колонки не «липнут» к левому краю,
   если они уже самой колонки (например, изображение с max-width) */
.container figure.mx-auto,
.container .rpro-center {
	margin-left: auto;
	margin-right: auto;
}

/* ============================================================================
   Декоративные блоки (например «Услуги для юридических лиц» на главной).
   Фон таких блоков рисуется по боксу bootstrap-колонки, который из-за
   отрицательного отступа строки шире контейнера — блок «вылезал» влево.
   Переносим фон на псевдоэлемент и выравниваем его строго по оси контейнера.
   ========================================================================== */
.decorated-yellow {
	background-color: transparent !important;
	position: relative;
	clip-path: none;
}

.decorated-yellow::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: #fff8ee;
	border-radius: inherit;
	clip-path: polygon(89% 0, 0 0, 0 100%, 90% 100%, 100% 51%);
	z-index: 0;
}

.decorated-yellow > * {
	position: relative;
	z-index: 1;
}

/* компенсация гаттера колонки: фон начинается по той же оси, что навбар
   и остальные блоки (инсет 15px от края контейнера) */
.decorated-yellow::before {
	left: 15px;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
	.decorated-yellow::before {
		left: 20px;
	}
}

@media (min-width: 1200px) {
	.decorated-yellow::before {
		left: 35px;
	}
}

/* ============================================================================
   Интерактивная карта пунктов приёма (/punkty-priema)
   ========================================================================== */
.rpro-points-map {
	width: 100%;
	max-width: 100%;
	height: 560px;
	border-radius: 12px;
	overflow: hidden;
	background-color: #eef1ee;
}

@media (max-width: 991.98px) {
	.rpro-points-map {
		height: 420px;
		margin-top: 24px;
	}
}

/* мигающая фирменная обводка вокруг метки пункта (карта /punkty-priema) */
.rpro-map-pulse {
	width: 68px;
	height: 68px;
	margin: -34px 0 0 -34px;
	box-sizing: border-box;
	border: 4px solid var(--rpro-map-pulse);
	border-radius: 50%;
	background: rgba(0, 166, 76, 0.28);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
	animation: rpro-map-pulse 1s ease-out infinite;
	pointer-events: none;
}

/* кластер карты — в том же цвете, что и метки */
.rpro-map-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	box-sizing: border-box;
	border: 3px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	background-color: var(--rpro-map-marker);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	line-height: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

@keyframes rpro-map-pulse {
	0% {
		transform: scale(0.55);
		opacity: 1;
	}
	70% {
		transform: scale(1.15);
		opacity: 0.45;
	}
	100% {
		transform: scale(1.35);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rpro-map-pulse {
		animation: none;
		opacity: 1;
	}
}

/* если API недоступен — внутрь вставляется прежний конструктор Яндекс.Карт */
.rpro-points-map.rpro-map-embed iframe {
	width: 100% !important;
	height: 100% !important;
	display: block;
}

/* ============================================================================
   Калькулятор на главной: вертикальный отступ от блока «Выезды» такой же,
   как давала нижняя паддинг-зона контейнера до переноса калькулятора внутрь
   (иначе он «прилипал» к карточкам).
   ========================================================================== */
.rpro-home-calc {
	margin-top: 50px;
}

@media (max-width: 767.98px) {
	.rpro-home-calc {
		margin-top: 90px;
	}
}

/* ============================================================================
   Равная высота карточек (блоки «Выезды» и «Новости»)
   ========================================================================== */
.rpro-equal-cards > [class*="col-"],
.rpro-equal-cards > article,
.rpro-equal-cards > .item {
	display: flex;
}

.rpro-equal-cards > [class*="col-"] > *,
.rpro-equal-cards > article > *,
.rpro-equal-cards > .item > * {
	width: 100%;
}

.rpro-equal-cards .card {
	height: 100%;
	width: 100%;
}

.rpro-equal-cards .card .card-body {
	display: flex;
	flex-direction: column;
}

/* ============================================================================
   Кнопка «Наверх» (Scroll-to-Top)
   Стилистика совпадает с виджетом чата: круг того же диаметра и радиуса.
   ========================================================================== */
.rpro-scroll-top {
	position: fixed;
	/* Геометрия берётся у кнопки чата: JS (rpro-ui.js) выставляет
	   --rpro-chat-size / --rpro-chat-right / --rpro-chat-bottom по факту.
	   Значения в var() — фолбэк, если виджет чата ещё не загрузился. */
	--rpro-scroll-size: var(--rpro-chat-size, 56px);
	right: var(--rpro-chat-right, 55px);
	bottom: calc(var(--rpro-chat-bottom, 55px) + var(--rpro-scroll-size) + 12px);
	width: var(--rpro-scroll-size);
	height: var(--rpro-scroll-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--rpro-chat-green, #00a64c);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease,
		background-color 0.2s ease;
	z-index: 1040;
}

.rpro-scroll-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.rpro-scroll-top:hover,
.rpro-scroll-top:focus-visible {
	filter: brightness(0.9);
	color: #fff;
	outline: none;
}

/* при открытом окне чата кнопка скрывается, чтобы не перекрывать диалог */
body.rpro-chat-open .rpro-scroll-top {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none;
}

/* Пульсация вокруг кнопки чата — декоративный элемент: не должна
   перехватывать клики по кнопке «Наверх» (п.5 ТЗ, «без фантомных кликов») */
.b24-widget-button-pulse,
[data-b24-crm-button-pulse] {
	pointer-events: none !important;
}

@media (max-width: 575.98px) {
	/* размер и позиция такие же, как у кнопки чата (она тоже 56×56) —
	   задаются через переменные --rpro-chat-*, здесь только размер иконки */
	.rpro-scroll-top {
		font-size: 1.35rem;
	}
}

/* ============================================================================
   Карточки выездов (используются на региональных страницах катализаторов,
   стилистика совпадает со страницей «Выездная заготовка»)
   ========================================================================== */
.trip-card-wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.trip-card-wrapper .card-body {
	display: flex;
	flex-direction: column;
	padding: 1.25rem;
}

.trip-date {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1;
	color: var(--rpro-green-dark);
}

.trip-type-badge {
	font-size: 0.75rem;
	font-weight: 600;
}

.trip-description-text {
	font-size: 0.95rem;
	line-height: 1.5;
}

.trip-contact {
	margin-top: auto;
}

.trip-phone a {
	color: var(--rpro-green-dark);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.trip-phone a:hover {
	color: var(--rpro-green-darker);
}

@media (max-width: 575.98px) {
	.trip-date {
		position: static;
		margin-bottom: 0.5rem;
	}
}