/* WhatCarTool — strefy forum (v0.46.2): producent = bursztyn, urządzenie = zieleń,
 * ogólne = domyślny niebieski wpForo. Klasy .wct-zone--* siedzą na <body> i #wpforo-wrap
 * (strony wpForo) albo na naszych wrapperach (osadzenia/indeksy). Kolory zmienia się
 * w jednym miejscu — zmienne poniżej. */

.wct-zone--manufacturer {
	--wct-zone: #f59e0b;
	--wct-zone-ink: #b45309;
	--wct-zone-tint: #fff8ec;
	--wct-zone-line: #fde2b3;
}

.wct-zone--general {
	--wct-zone: #557a9b;
	--wct-zone-ink: #3e5f7d;
	--wct-zone-tint: #f0f5fa;
	--wct-zone-line: #d3dfea;
}

.wct-zone--device {
	--wct-zone: #10a37f;
	--wct-zone-ink: #0b7a5f;
	--wct-zone-tint: #ebf8f3;
	--wct-zone-line: #b4e4d4;
}

/* ---- Pasek-nagłówek (prefiks #wpforo #wpforo-wrap: przebija reset wpForo „div/span {…}") ---- */
#wpforo #wpforo-wrap .wct-zone-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 18px;
	padding: 14px 18px;
	background: var(--wct-zone-tint, #f5f8fb);
	border: 1px solid var(--wct-zone-line, #dfe6ee);
	border-left: 5px solid var(--wct-zone, #557a9b);
	border-radius: 8px;
	flex-wrap: wrap;
}
#wpforo #wpforo-wrap .wct-zone-banner__media {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid var(--wct-zone-line, #dfe6ee);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
#wpforo #wpforo-wrap .wct-zone-banner__media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
#wpforo #wpforo-wrap .wct-zone-banner__media--initials {
	background: var(--wct-zone, #557a9b);
	border-color: transparent;
	color: #fff;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: .02em;
}
#wpforo #wpforo-wrap .wct-zone-banner__body {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
#wpforo #wpforo-wrap .wct-zone-banner__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wct-zone-ink, #3f7796);
}
#wpforo #wpforo-wrap .wct-zone-banner__title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	color: #1f2933;
}
#wpforo #wpforo-wrap .wct-zone-banner__meta {
	font-size: 13px;
	color: #5a6675;
}
#wpforo #wpforo-wrap .wct-zone-banner__meta a,
#wpforo #wpforo-wrap .wct-zone-banner__links a {
	color: var(--wct-zone-ink, #3f7796);
	font-weight: 600;
	text-decoration: none;
}
#wpforo #wpforo-wrap .wct-zone-banner__links {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 14px;
}
#wpforo #wpforo-wrap .wct-zone-banner__links a:hover,
	#wpforo #wpforo-wrap .wct-zone-banner__meta a:hover { text-decoration: underline; }
@media (max-width: 600px) {
	#wpforo #wpforo-wrap .wct-zone-banner { padding: 12px 14px; gap: 12px; }
	#wpforo #wpforo-wrap .wct-zone-banner__media { width: 44px; height: 44px; }
	#wpforo #wpforo-wrap .wct-zone-banner__title { font-size: 17px; }
}

/* ---- Akcenty wpForo (wyższa specyficzność niż dynamiczne kolory motywu) ---- */

.wct-zone--manufacturer #wpforo #wpforo-wrap,
.wct-zone--device #wpforo #wpforo-wrap,
#wpforo #wpforo-wrap.wct-zone--manufacturer,
#wpforo #wpforo-wrap.wct-zone--device {
	border-top: 4px solid var(--wct-zone) !important;
}

.wct-zone--manufacturer #wpforo #wpforo-wrap .wpforo-category,
.wct-zone--device #wpforo #wpforo-wrap .wpforo-category {
	background: var(--wct-zone-tint) !important;
	border-bottom-color: var(--wct-zone) !important;
}

.wct-zone--manufacturer #wpforo #wpforo-wrap li.wpforo-active,
.wct-zone--device #wpforo #wpforo-wrap li.wpforo-active {
	border-bottom-color: var(--wct-zone) !important;
}

.wct-zone--manufacturer #wpforo #wpforo-wrap .wpforo-forum-title a,
.wct-zone--device #wpforo #wpforo-wrap .wpforo-forum-title a,
.wct-zone--manufacturer #wpforo #wpforo-wrap .wpf-breadcrumb .active,
.wct-zone--device #wpforo #wpforo-wrap .wpf-breadcrumb .active,
.wct-zone--manufacturer #wpforo #wpforo-wrap .wpf-breadcrumb .active > *,
.wct-zone--device #wpforo #wpforo-wrap .wpf-breadcrumb .active > * {
	color: var(--wct-zone-ink) !important;
}

.wct-zone--manufacturer #wpforo #wpforo-wrap .wpf-button,
.wct-zone--device #wpforo #wpforo-wrap .wpf-button {
	background-color: var(--wct-zone) !important;
	border-color: var(--wct-zone-ink) !important;
}

/* ---- Indeksy/osadzenia forum na stronie urządzenia i profilu producenta ---- */

.wct-device-forum.wct-zone--manufacturer,
.wct-device-forum.wct-zone--device {
	--wct-accent: var(--wct-zone);
	border-top: 3px solid var(--wct-zone);
}

.wct-device-forum.wct-zone .wct-device-forum__head h3 {
	color: var(--wct-zone-ink, inherit);
}

.wct-device-forum.wct-zone .wct-device-forum__all,
.wct-device-forum.wct-zone .wct-device-forum__section > a {
	color: var(--wct-zone-ink, inherit);
}

.wct-device-forum.wct-zone .wct-device-forum__section {
	border-color: var(--wct-zone-line, #d6dae0);
}

/* Osadzenie: pasek koloru niesie już #wpforo-wrap — wrapper wraca do cienkiej linii. */
.wct-device-forum--embed.wct-zone {
	border-top: 1px solid var(--wct-border, #d6dae0);
}

/* ---- Listy forów (strona główna forum, forum producenta): kolor PER WIERSZ ----
 * v0.47.0: adresy forów to teraz nazwy (veepeak-obdcheck-ble), więc wiersze producentów
 * i urządzeń koloruje CSS generowany w PHP po ID wiersza (#wpf-forum-N) —
 * WCT_Forum_Zones::rows_css(), dołączany inline do tego arkusza. */

/* ---- Legenda kolorów na stronie głównej forum ---- */
#wpforo #wpforo-wrap .wct-zone-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: center;
	margin: 0 0 14px;
	font-size: 13px;
	color: #5a6675;
}

#wpforo #wpforo-wrap .wct-zone-legend__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

#wpforo #wpforo-wrap .wct-zone-legend__swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
}

/* ---- Fora ogólne: lekko niebieskie tło ----
 * Pasek kategorii na stronach strefy ogólnej + każdy wiersz forum, który NIE jest
 * forum producenta ani urządzenia (także na stronie głównej forum). */
.wct-zone--general #wpforo #wpforo-wrap .wpforo-category {
	background: #e8eff6 !important;
}

/* v0.47.0: tło ogólne dla KAŻDEGO wiersza; wiersze producentów/urządzeń nadpisuje
 * generowany CSS o wyższej specyficzności (#wpf-forum-N). */
#wpforo #wpforo-wrap .forum-wrap > .wpforo-forum {
	background: #f0f5fa !important;
	box-shadow: inset 4px 0 0 #557a9b;
}