/*
 * components.css - elementy wielokrotnego uzytku.
 */

/* ==========================================================================
   Ikony
   ========================================================================== */

.bn-icon {
	display: inline-block;
	width: var(--bn-icon-size);
	height: var(--bn-icon-size);
	vertical-align: -0.15em;
	flex-shrink: 0;
}

.bn-icon--lg { --bn-icon-size: 2rem; }
.bn-icon--xl { --bn-icon-size: 2.75rem; }

/* ==========================================================================
   Przyciski
   ========================================================================== */

/*
 * Przycisk podstawowy odpowiada .val-btn z wersji 1.x: przezroczysty,
 * z biala krawedzia, po najechaniu wypelnia sie bielą.
 */
.bn-btn {
	display: inline-block;
	padding: 8px 30px;
	margin: var(--bn-space-2xs);
	border: 1px solid #fff;
	background: transparent;
	color: #fff;
	font-size: var(--bn-text-base);
	font-weight: 500;
	letter-spacing: var(--bn-tracking-wide);
	text-decoration: none;
	cursor: pointer;
	transition: background var(--bn-duration-slow), color var(--bn-duration-slow);
}

.bn-btn:hover,
.bn-btn:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--bn-ink);
}

/* Przycisk w kaflu oferty - ciemny, zaokraglony, jedno z czterech miejsc
   w calym motywie, gdzie oryginal uzywal promienia. */
.bn-btn--ghost {
	padding: 6px 30px;
	margin: 0;
	background: var(--bn-ink);
	border: 0;
	border-radius: var(--bn-radius-pill);
	color: #fff;
	font-size: var(--bn-text-sm);
	font-weight: 400;
	letter-spacing: normal;
	transition: none;
}

.bn-btn--ghost:hover,
.bn-btn--ghost:focus-visible {
	background: var(--bn-ink);
	color: var(--bn-accent);
}

.bn-btn--quiet {
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	color: var(--bn-accent);
	letter-spacing: normal;
	font-weight: 400;
	font-size: var(--bn-text-base);
}

.bn-btn--quiet:hover,
.bn-btn--quiet:focus-visible {
	background: none;
	color: var(--bn-accent-soft);
}

.bn-btn--quiet .bn-icon {
	transition: transform var(--bn-duration) var(--bn-ease);
}

.bn-btn--quiet:hover .bn-icon {
	transform: translateX(3px);
}

.bn-btn--block {
	width: 100%;
}

/* ==========================================================================
   Karty
   ========================================================================== */

/*
 * Kafel w kolorze akcentu z ciemnym tekstem - to znak rozpoznawczy tej
 * witryny. W wersji 1.x byl to "#services .box" i "#offer .box".
 */
/*
 * Kafel ma naturalna wysokosc, a nie rozciagnieta do najwyzszego w rzedzie.
 * W wersji 1.x byly to kolumny Bootstrapa z marginesem dolnym - krotszy
 * opis dawal nizszy kafel, zamiast zostawiac pustke pod tekstem.
 */
.bn-card {
	display: flex;
	flex-direction: column;
	padding: var(--bn-space-lg);
	margin-block-end: var(--bn-space-md);
	background: var(--bn-accent);
	color: var(--bn-on-accent);
	transition: background var(--bn-duration);
}

.bn-card:hover {
	background: var(--bn-accent-deep);
}

.bn-card h2,
.bn-card h3,
.bn-card h4,
.bn-card p,
.bn-card li,
.bn-card a {
	color: var(--bn-on-accent);
}

/*
 * Ikona stoi po lewej, a tekst jest wciety - uklad z oryginalu, gdzie
 * ikona mierzyla 70px i byla oplywana przez naglowek i akapit.
 */
.bn-card__icon {
	float: left;
	color: var(--bn-on-accent);
}

.bn-card__icon .bn-icon {
	--bn-icon-size: 70px;
}

.bn-card__title {
	margin: 0 0 var(--bn-space-xs);
	margin-left: 100px;
	font-size: 18px;
	font-weight: 700;
}

.bn-card__text {
	margin: 0;
	margin-left: 100px;
	font-size: var(--bn-text-sm);
	line-height: 24px;
}

.bn-card__icon:not(:empty) ~ * {
	/* Wciecie dotyczy tylko kafli, ktore ikone rzeczywiscie maja. */
	margin-left: 100px;
}

.bn-card:not(:has(.bn-card__icon)) .bn-card__title,
.bn-card:not(:has(.bn-card__icon)) .bn-card__text {
	margin-left: 0;
}

@media (max-width: 767px) {
	.bn-card__icon {
		float: none;
		display: block;
		text-align: center;
		padding-bottom: var(--bn-space-xs);
	}

	.bn-card__title,
	.bn-card__text,
	.bn-card__icon:not(:empty) ~ * {
		margin-left: 0;
		text-align: center;
	}
}

.bn-card__footer {
	margin-block-start: auto;
	padding-block-start: var(--bn-space-sm);
}

/* Kafel bez wypelnienia - uzywany tam, gdzie oryginal nie mial tla
   (technologie, etapy wspolpracy). */
.bn-card--plain {
	background: none;
	color: var(--bn-text);
	padding: var(--bn-space-lg);
	text-align: center;
}

.bn-card--plain:hover {
	background: none;
}

.bn-card--plain .bn-card__icon {
	float: none;
	color: var(--bn-accent);
}

.bn-card--plain .bn-card__title,
.bn-card--plain .bn-card__text,
.bn-card--plain .bn-card__icon:not(:empty) ~ * {
	margin-left: 0;
	color: var(--bn-text);
}

/*
 * Karta jako calosc klikalna. Odnosnik obejmuje tylko tytul, a pseudoelement
 * rozciaga jego obszar na cala karte - dzieki temu czytnik ekranu oglasza
 * sensowna etykiete, a nie caly blok tekstu.
 */
.bn-card--link {
	position: relative;
}

.bn-card--link .bn-card__link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.bn-card--link .bn-card__link {
	color: var(--bn-on-accent);
	text-decoration: none;
}

.bn-card--link:has(.bn-card__link:focus-visible) {
	outline: var(--bn-ring);
	outline-offset: var(--bn-ring-offset);
}

.bn-card--link .bn-card__link:focus-visible {
	outline: none;
}

/* Karta ze zdjeciem. */
.bn-card--media {
	padding: 0;
	overflow: hidden;
}

.bn-card--media .bn-card__body {
	padding: var(--bn-space-md);
}

.bn-media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bn-surface-sunken);
}

.bn-media__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--bn-duration-slow) var(--bn-ease-out);
}

.bn-card:hover .bn-media__img {
	transform: scale(1.04);
}

/* ==========================================================================
   Metadane i terminy
   ========================================================================== */

.bn-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bn-space-2xs);
	color: var(--bn-text-muted);
	font-size: var(--bn-text-sm);
}

.bn-meta__sep {
	color: var(--bn-accent);
}

.bn-terms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bn-space-2xs);
	margin-block-start: var(--bn-space-sm);
}

.bn-terms__label {
	color: var(--bn-text-muted);
	font-size: var(--bn-text-sm);
}

.bn-tag {
	padding: 0.25em 0.75em;
	background: var(--bn-accent-wash);
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius-full);
	color: var(--bn-accent);
	font-size: var(--bn-text-xs);
	text-decoration: none;
}

.bn-tag:hover,
.bn-tag:focus-visible {
	background: var(--bn-accent);
	color: var(--bn-ink);
}

/* ==========================================================================
   Naglowek witryny
   ========================================================================== */

/*
 * Naglowek jest przypiety i przezroczysty, a po odjechaniu od gory strony
 * kurczy sie z 92 do 72 px i dostaje tlo - dokladnie jak w wersji 1.x.
 */
.bn-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: var(--bn-z-header);
	background: transparent;
	transition: all var(--bn-duration-slow);
}

/* Klasa nadawana przez JS po odjechaniu od gory strony. */
.bn-header.is-stuck {
	background: var(--bn-surface);
}

.bn-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bn-space-md);
	/* Ze stalej, nie z pomiaru - patrz komentarz przy zmiennych w tokens.css. */
	min-height: var(--bn-header-min);
	transition: min-height var(--bn-duration-slow);
}

.bn-header.is-stuck .bn-header__inner {
	min-height: var(--bn-header-min-stuck);
}

/* Naglowek jest wyjety z ukladu, wiec tresc musi zaczac sie pod nim.
   Strona glowna ma ekran otwierajacy na cala wysokosc i tego nie potrzebuje. */
body:not(.bn-front) .bn-main {
	padding-block-start: var(--bn-header-min);
}

.bn-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--bn-space-2xs);
	color: #fff;
	font-size: var(--bn-text-4xl);
	font-weight: 300;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
}

.bn-brand:hover,
.bn-brand:focus-visible {
	color: var(--bn-accent);
}

.bn-brand__logo {
	max-height: 52px;
	width: auto;
}

@media (max-width: 768px) {
	.bn-brand {
		font-size: 28px;
	}

	.bn-brand__logo {
		max-height: 40px;
	}
}

/* ==========================================================================
   Nawigacja glowna
   ========================================================================== */

.bn-nav__list,
.bn-nav__sub {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bn-nav__list {
	align-items: center;
	gap: var(--bn-space-2xs);
}

.bn-nav__list a {
	display: block;
	padding: 0 8px 10px;
	color: #fff;
	font-size: var(--bn-text-base);
	font-weight: 400;
	text-decoration: none;
	transition: color var(--bn-duration-fast);
}

.bn-nav__list a:hover,
.bn-nav__list a:focus-visible,
.bn-nav__list .current-menu-item > a,
.bn-nav__list .current-menu-ancestor > a {
	color: var(--bn-accent);
}

/* --- Podmenu --- */

.bn-nav__list li {
	position: relative;
}

/* Podmenu w oryginale jest biale z ciemnym tekstem. */
.bn-nav__sub {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	z-index: var(--bn-z-nav);
	flex-direction: column;
	min-width: 180px;
	margin-block-start: 4px;
	padding: var(--bn-space-2xs);
	background: #fff;
	box-shadow: var(--bn-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--bn-duration-fast),
		visibility var(--bn-duration-fast);
}

/*
 * Podmenu otwiera sie zarowno kursorem, jak i klawiatura. :focus-within
 * zalatwia obsluge klawiatury bez ani jednej linii JavaScriptu - poprzedni
 * motyw uzywal do tego wtyczki superfish.
 */
.bn-nav__list li:hover > .bn-nav__sub,
.bn-nav__list li:focus-within > .bn-nav__sub {
	opacity: 1;
	visibility: visible;
}

.bn-nav__sub a {
	width: 100%;
	padding: var(--bn-space-2xs);
	color: #333;
	font-size: 13px;
	font-weight: 400;
}

.bn-nav__sub a:hover,
.bn-nav__sub a:focus-visible {
	color: var(--bn-accent);
}

.bn-nav__sub .bn-nav__sub {
	top: 0;
	inset-inline-start: 100%;
}

/* --- Przelacznik menu na malych ekranach --- */

.bn-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	transition: color var(--bn-duration);
}

.bn-nav-toggle:hover {
	color: var(--bn-accent);
}

.bn-nav-toggle .bn-icon {
	--bn-icon-size: 24px;
}

.bn-nav-toggle__close { display: none; }

.bn-nav-toggle[aria-expanded='true'] .bn-nav-toggle__open  { display: none; }
.bn-nav-toggle[aria-expanded='true'] .bn-nav-toggle__close { display: block; }

@media (max-width: 768px) {
	.bn-nav-toggle {
		display: inline-flex;
	}

	/*
	 * Menu mobilne to ten sam element DOM, tylko inaczej ulozony. Poprzedni
	 * motyw klonowal cala nawigacje JavaScriptem, przez co kazdy identyfikator
	 * w niej istnial na stronie dwukrotnie.
	 */
	/*
	 * Panel wysuwa sie z lewej strony i ma 260 px szerokosci - tak jak
	 * w wersji 1.x. To ten sam element DOM co menu na duzym ekranie,
	 * a nie jego kopia doklejona JavaScriptem.
	 */
	.bn-nav {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: var(--bn-z-nav);
		width: 260px;
		padding-block-start: 18px;
		overflow-y: auto;
		background: rgb(14 22 39 / 95%);
		transform: translateX(-100%);
		transition: transform var(--bn-duration);
	}

	.bn-nav[data-open='true'] {
		transform: translateX(0);
	}

	.bn-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.bn-nav__list a {
		padding: var(--bn-space-2xs) 22px var(--bn-space-2xs) var(--bn-space-xs);
		font-size: var(--bn-text-lg);
	}

	/* Podmenu rozwija sie w miejscu, nie nad trescia. */
	.bn-nav__sub {
		position: static;
		min-width: 0;
		margin: 0;
		padding: 0 0 var(--bn-space-2xs) var(--bn-space-md);
		background: none;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		display: none;
	}

	.bn-nav__sub a {
		color: #fff;
		font-size: var(--bn-text-base);
	}

	.bn-nav__item--open > .bn-nav__sub {
		display: flex;
	}
}

/* Przycisk rozwijajacy podmenu - widoczny tylko na malych ekranach. */
.bn-nav__expand {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

@media (max-width: 768px) {
	.bn-nav__has-children > a {
		display: inline-flex;
		width: calc(100% - 2rem);
	}

	.bn-nav__expand {
		display: inline-flex;
		position: absolute;
		top: 4px;
		inset-inline-end: 0;
		padding: var(--bn-space-xs);
	}

	.bn-nav__item--open > .bn-nav__expand .bn-icon {
		transform: rotate(180deg);
		color: var(--bn-accent);
	}
}

/* Przycienienie tresci przy otwartym menu. */
.bn-nav-overlay {
	position: fixed;
	inset: 0;
	z-index: calc(var(--bn-z-nav) - 1);
	background: rgb(20 32 56 / 80%);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--bn-duration) var(--bn-ease), visibility var(--bn-duration);
}

body.bn-nav-open .bn-nav-overlay {
	opacity: 1;
	visibility: visible;
}

body.bn-nav-open {
	overflow: hidden;
}

/* ==========================================================================
   Zakladki
   ========================================================================== */

/*
 * Wlasna implementacja zamiast tabow Bootstrapa. Poprzedni motyw mial na
 * jednej stronie skladnie Bootstrapa 4, a na innej Bootstrapa 5 - jedna
 * z nich nie dzialala.
 */

.bn-tabs {
	display: grid;
	gap: var(--bn-space-md);
}

.bn-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bn-space-3xs);
	margin: 0;
	padding: var(--bn-space-3xs);
	list-style: none;
	background: var(--bn-surface-raised);
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius-full);
}

.bn-tabs__tab {
	flex: 1 1 auto;
	padding: 0.7em 1.4em;
	background: none;
	border: 0;
	border-radius: var(--bn-radius-full);
	color: var(--bn-text-muted);
	font-size: var(--bn-text-sm);
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--bn-duration) var(--bn-ease),
		color var(--bn-duration) var(--bn-ease);
}

.bn-tabs__tab:hover {
	color: var(--bn-text-strong);
}

.bn-tabs__tab[aria-selected='true'] {
	background: var(--bn-accent);
	color: var(--bn-ink);
}

.bn-tabs__panel[hidden] {
	display: none;
}

/* Uklad pionowy - lista zakladek z boku. */
@media (width >= 56rem) {
	.bn-tabs--side {
		grid-template-columns: 16rem minmax(0, 1fr);
		gap: var(--bn-space-lg);
		align-items: start;
	}

	.bn-tabs--side .bn-tabs__list {
		flex-direction: column;
		border-radius: var(--bn-radius-lg);
	}

	.bn-tabs--side .bn-tabs__tab {
		flex: 0 0 auto;
		text-align: start;
		white-space: normal;
		border-radius: var(--bn-radius);
	}
}

/* ==========================================================================
   Okno modalne
   ========================================================================== */

/*
 * Natywny element dialog zastepuje magnific-popup (20 KB JS + 8 KB CSS).
 * Przegladarka sama obsluguje blokade fokusu, klawisz Escape i warstwe tla.
 */

.bn-dialog {
	width: min(42rem, calc(100vw - 2rem));
	padding: 0;
	background: var(--bn-surface-raised);
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius-lg);
	color: var(--bn-text);
	box-shadow: var(--bn-shadow-lg);
}

.bn-dialog::backdrop {
	background: rgb(4 8 16 / 78%);
	backdrop-filter: blur(4px);
}

.bn-dialog__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--bn-space-sm);
	padding: var(--bn-space-md) var(--bn-space-md) 0;
}

.bn-dialog__body {
	padding: var(--bn-space-md);
}

.bn-dialog__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background: none;
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius);
	color: var(--bn-text-muted);
	cursor: pointer;
}

.bn-dialog__close:hover {
	border-color: var(--bn-accent);
	color: var(--bn-accent);
}

/* ==========================================================================
   Powrot na gore
   ========================================================================== */

/*
 * Przycisk powrotu na gore. Ksztalt i kolor jak w wersji 1.x, ale zamiast
 * tekstu ukrytego kolorem przezroczystym jest ikona z etykieta dla czytnikow
 * ekranu - inaczej byl to pusty prostokat, ktory czytnik oglaszal jako link.
 */
.bn-to-top {
	position: fixed;
	inset-inline-end: 1%;
	inset-block-end: 1.25%;
	z-index: var(--bn-z-overlay);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--bn-accent);
	border: 0;
	color: var(--bn-ink);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--bn-duration-fast),
		visibility var(--bn-duration-fast),
		background-color var(--bn-duration-fast);
}

.bn-to-top .bn-icon {
	--bn-icon-size: 20px;
}

.bn-to-top.is-visible {
	opacity: 1;
	visibility: visible;
}

.bn-to-top:hover,
.bn-to-top:focus-visible {
	background: #1f97bf;
}

@media (max-width: 768px) {
	.bn-to-top {
		inset-inline-end: 4%;
	}
}

/* ==========================================================================
   Stronicowanie
   ========================================================================== */

.bn-pagination {
	margin-block-start: var(--bn-space-xl);
}

.bn-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--bn-space-3xs);
}

.bn-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--bn-space-2xs);
	background: var(--bn-surface-raised);
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius);
	color: var(--bn-text);
	text-decoration: none;
}

.bn-pagination .page-numbers:hover {
	border-color: var(--bn-accent);
	color: var(--bn-accent);
}

.bn-pagination .page-numbers.current {
	background: var(--bn-accent);
	border-color: var(--bn-accent);
	color: var(--bn-ink);
	font-weight: 700;
}

.bn-pagination .page-numbers.dots {
	background: none;
	border-color: transparent;
}

/* ==========================================================================
   Formularze
   ========================================================================== */

.bn-field {
	display: grid;
	gap: var(--bn-space-3xs);
}

.bn-label {
	color: var(--bn-text-muted);
	font-size: var(--bn-text-sm);
	font-weight: 700;
}

.bn-input,
.bn-textarea,
.bn-select,
input[type='text'],
input[type='email'],
input[type='url'],
input[type='tel'],
input[type='search'],
input[type='password'],
input[type='number'],
textarea,
select {
	width: 100%;
	padding: 0.7em 0.9em;
	background: var(--bn-surface-sunken);
	border: 1px solid var(--bn-border-strong);
	border-radius: var(--bn-radius);
	color: var(--bn-text);
	transition: border-color var(--bn-duration) var(--bn-ease);
}

.bn-input:focus,
textarea:focus,
select:focus,
input:focus {
	border-color: var(--bn-accent);
	outline: none;
}

.bn-input::placeholder,
textarea::placeholder {
	color: var(--bn-text-muted);
	opacity: 0.7;
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

.bn-search-form {
	display: flex;
	gap: var(--bn-space-2xs);
}

/* ==========================================================================
   Okruszki
   ========================================================================== */

.bn-breadcrumbs {
	color: var(--bn-text-muted);
	font-size: var(--bn-text-sm);
}

.bn-breadcrumbs a {
	color: var(--bn-text-muted);
	text-decoration: none;
}

.bn-breadcrumbs a:hover {
	color: var(--bn-accent);
}

.bn-breadcrumbs .breadcrumb_last {
	color: var(--bn-text);
}

/* ==========================================================================
   Widgety
   ========================================================================== */

.bn-widget + .bn-widget {
	margin-block-start: var(--bn-space-lg);
}

.bn-widget__title {
	margin-block-end: var(--bn-space-xs);
	font-size: var(--bn-text-lg);
}

.bn-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bn-widget li + li {
	margin-block-start: var(--bn-space-3xs);
	padding-block-start: var(--bn-space-3xs);
	border-block-start: 1px solid var(--bn-border);
}

.bn-widget a {
	text-decoration: none;
}

/* ==========================================================================
   Komentarze
   ========================================================================== */

.bn-comments {
	margin-block-start: var(--bn-space-xl);
	padding-block-start: var(--bn-space-md);
	border-block-start: 1px solid var(--bn-border);
}

.bn-comments__title {
	margin-block-end: var(--bn-space-md);
	font-size: var(--bn-text-lg);
}

.bn-comments__list {
	margin: 0 0 var(--bn-space-lg);
	padding: 0;
	list-style: none;
}

.bn-comments__list .children {
	margin: var(--bn-space-sm) 0 0 var(--bn-space-md);
	padding: 0;
	list-style: none;
}

.bn-comments__list .comment-body {
	padding: var(--bn-space-sm);
	background: var(--bn-surface-raised);
	border: 1px solid var(--bn-border);
	border-radius: var(--bn-radius);
}

.bn-comments__list li + li {
	margin-block-start: var(--bn-space-sm);
}

.bn-comments__list .comment-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bn-space-2xs);
	margin-block-end: var(--bn-space-2xs);
	color: var(--bn-text-muted);
	font-size: var(--bn-text-sm);
}

.bn-comments__list .avatar {
	border-radius: 50%;
}

.bn-comment-form label {
	display: block;
	margin-block-end: var(--bn-space-3xs);
	color: var(--bn-text-muted);
	font-size: var(--bn-text-sm);
	font-weight: 700;
}

.bn-comment-form .comment-notes,
.bn-comment-form .comment-form-cookies-consent {
	color: var(--bn-text-muted);
	font-size: var(--bn-text-sm);
}

.bn-comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: var(--bn-space-2xs);
}

.bn-comment-form .comment-form-cookies-consent input {
	width: auto;
}