/**
 * VisioCM Cookies Module — baner i panel zgód cookies.
 * Kolory i promienie jako zmienne --sc-*; nadpisuje je panel (Ustawienia → Kolory, Wygląd)
 * albo motyw (np. `.visiocm { --sc-primary: #… }`).
 */

.visiocm {
	--sc-primary: #1a3673;
	--sc-primary-dark: #152952;
	--sc-primary-light: #eef2f9;
	--sc-focus: #31529f;
	--sc-radius: .25rem;
	--sc-border: rgba(0, 0, 0, .09);
	--sc-text: var(--bs-body-color, #212529);
	--sc-muted: var(--bs-secondary-color, #5c636a);
	--sc-on-primary: #fff;
	--sc-bg: #fff;
	--sc-bg-opacity: 100%;
	--sc-radius-box: .5rem;
	--sc-accept: var(--sc-primary);
	--sc-accept-dark: var(--sc-primary-dark);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--sc-text);
}

.visiocm [hidden] {
	display: none !important;
}

/* Bez zapisanej zgody skrypt w <head> dodaje html.visiocm-pending — baner (i overlay) widać
   od pierwszego renderu, bez czekania na visiocm.js (defer). Inaczej tekst banera jest
   elementem LCP wyświetlanym na samym końcu ładowania. visiocm.js zdejmuje klasę po wyborze. */
html.visiocm-pending .visiocm__banner[hidden] {
	display: flex !important;
}

html.visiocm-pending .visiocm__overlay[hidden] {
	display: block !important;
}

/* ── Baner: warstwa na cały ekran (bez klikania), okienko ustawiane na siatce 3×3 ── */
.visiocm__banner {
	position: fixed;
	inset: 0;
	z-index: 1150;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: .75rem;
	pointer-events: none;
}

.visiocm[data-position^="top-"] .visiocm__banner { align-items: flex-start; }
.visiocm[data-position^="middle-"] .visiocm__banner { align-items: center; }
.visiocm[data-position$="-left"] .visiocm__banner { justify-content: flex-start; }
.visiocm[data-position$="-right"] .visiocm__banner { justify-content: flex-end; }

.visiocm__inner {
	width: min(100%, 25rem);
	padding: 1.25rem 1.25rem 1rem;
	background: var(--sc-bg);
	border: 1px solid var(--sc-border);
	border-top: 3px solid var(--sc-primary);
	border-radius: var(--sc-radius-box);
	box-shadow: 0 8px 32px rgba(15, 30, 61, .18);
	pointer-events: auto;
	max-height: calc(100dvh - 1.5rem);
	overflow-y: auto;
}

/* Pasek u góry / na dole (środkowa kolumna) i okienko na środku ekranu. */
.visiocm[data-position="top-center"] .visiocm__inner,
.visiocm[data-position="bottom-center"] .visiocm__inner {
	width: min(100%, 62rem);
}

.visiocm[data-position="middle-center"] .visiocm__inner {
	width: min(100%, 40rem);
}

/* Kompaktowe okienko w rogach i po bokach: przyciski jeden pod drugim. */
.visiocm[data-position$="-left"] .visiocm__banner .visiocm__btn,
.visiocm[data-position$="-right"] .visiocm__banner .visiocm__btn {
	flex-basis: 100%;
}

/* Przezroczystość tła tylko w przeglądarkach z color-mix(); starsze dostają pełne tło
   (var() z niewspieraną funkcją dałoby przezroczyste tło i nieczytelny tekst). */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
	.visiocm[style*="--sc-bg-opacity"] .visiocm__inner {
		background: color-mix(in srgb, var(--sc-bg) var(--sc-bg-opacity), transparent);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
}

/* Overlay: przyciemnia i blokuje stronę do czasu wyboru (consent.js ustawia inert). */
.visiocm__overlay {
	position: fixed;
	inset: 0;
	z-index: 1149;
	background: rgba(15, 30, 61, .55);
}

html.visiocm-locked {
	overflow: hidden;
}

.visiocm__brand {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-bottom: .5rem;
}

.visiocm__icon {
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
}

.visiocm__head .visiocm__brand {
	margin: 0;
}

.visiocm__head .visiocm__icon {
	width: 2rem;
	height: 2rem;
}

.visiocm__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sc-primary);
}

.visiocm__text {
	margin: 0 0 1rem;
	font-size: .9rem;
	color: var(--sc-text);
}

.visiocm__text a,
.visiocm__tool a {
	color: var(--sc-primary);
	text-decoration: underline;
}

/* ── Przyciski: wyróżniony tylko „Akceptuj”; „Odrzuć” i „Ustawienia” obramowane,
   ale tej samej wielkości, na tej samej warstwie i z czytelnym kontrastem. ── */
.visiocm__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: flex-end;
}

.visiocm__btn {
	flex: 1 1 12rem;
	min-height: 2.75rem;
	padding: .55rem 1rem;
	font: inherit;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.2;
	border: 2px solid var(--sc-primary);
	border-radius: var(--sc-radius);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.visiocm__btn--primary {
	background: var(--sc-accept);
	border-color: var(--sc-accept);
	color: var(--sc-on-primary);
}

.visiocm__btn--primary:hover {
	background: var(--sc-accept-dark);
	border-color: var(--sc-accept-dark);
}

.visiocm__btn--outline {
	background: var(--sc-bg);
	color: var(--sc-primary);
}

.visiocm__btn--outline:hover {
	background: var(--sc-primary-light);
}

.visiocm button:focus-visible,
.visiocm a:focus-visible,
.visiocm summary:focus-visible,
.visiocm input:focus-visible + .visiocm__slider,
.visiocm-link:focus-visible {
	outline: 3px solid var(--sc-focus);
	outline-offset: 2px;
}

/* ── Panel ustawień (dialog) ───────────────────────────────────────────── */
.visiocm__dialog {
	width: min(40rem, calc(100vw - 1.5rem));
	max-height: calc(100dvh - 1.5rem);
	padding: 0;
	border: 0;
	border-radius: var(--sc-radius-box);
	box-shadow: 0 12px 48px rgba(15, 30, 61, .3);
	color: var(--sc-text);
	background: var(--sc-bg);
}

.visiocm__dialog::backdrop {
	background: rgba(15, 30, 61, .55);
}

.visiocm__panel {
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 1.5rem);
}

.visiocm__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--sc-border);
}

.visiocm__close {
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	font-size: 1.75rem;
	line-height: 1;
	color: var(--sc-muted);
	background: transparent;
	border: 0;
	border-radius: var(--sc-radius);
	cursor: pointer;
}

.visiocm__close:hover {
	color: var(--sc-primary);
	background: var(--sc-primary-light);
}

.visiocm__body {
	padding: 1rem 1.25rem;
	overflow-y: auto;
}

.visiocm__cat {
	padding: .9rem 0;
	border-top: 1px solid var(--sc-border);
}

.visiocm__cat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.visiocm__cat-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
}

.visiocm__cat-desc {
	margin: .35rem 0 .5rem;
	font-size: .875rem;
	color: var(--sc-muted);
}

/* Przełącznik (checkbox role=switch). */
.visiocm__switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	flex-shrink: 0;
	cursor: pointer;
}

.visiocm__switch input {
	position: absolute;
	right: 0;
	width: 3rem;
	height: 1.6rem;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.visiocm__slider {
	position: relative;
	display: inline-block;
	width: 3rem;
	height: 1.6rem;
	background: #9aa3b5;
	border-radius: 1rem;
	transition: background-color .15s ease;
}

.visiocm__slider::after {
	content: "";
	position: absolute;
	top: .2rem;
	left: .2rem;
	width: 1.2rem;
	height: 1.2rem;
	background: #fff;
	border-radius: 50%;
	transition: transform .15s ease;
}

.visiocm__switch input:checked + .visiocm__slider {
	background: var(--sc-primary);
}

.visiocm__switch input:checked + .visiocm__slider::after {
	transform: translateX(1.4rem);
}

.visiocm__switch input:disabled,
.visiocm__switch input:disabled + .visiocm__slider {
	cursor: not-allowed;
	opacity: .6;
}

.visiocm__always {
	order: -1;
	font-size: .8rem;
	font-weight: 600;
	color: var(--sc-muted);
}

.visiocm__details summary {
	font-size: .875rem;
	font-weight: 600;
	color: var(--sc-primary);
	cursor: pointer;
}

.visiocm__details ul {
	margin: .5rem 0 0;
	padding: 0;
	list-style: none;
}

.visiocm__tool {
	padding: .6rem .75rem;
	margin-bottom: .4rem;
	font-size: .85rem;
	background: var(--sc-primary-light);
	border-radius: var(--sc-radius);
}

.visiocm__tool p {
	margin: .25rem 0 0;
}

.visiocm__provider,
.visiocm__retention,
.visiocm__empty,
.visiocm__meta {
	color: var(--sc-muted);
}

.visiocm__empty,
.visiocm__meta {
	margin: .25rem 0 0;
	font-size: .8rem;
}

.visiocm__meta {
	padding-top: .75rem;
	border-top: 1px solid var(--sc-border);
	word-break: break-all;
}

.visiocm__actions--panel {
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--sc-border);
}

/* ── Pływający przycisk ponownego otwarcia ─────────────────────────────── */
.visiocm__fab {
	position: fixed;
	left: 1rem;
	bottom: 1rem;
	z-index: 1000;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: var(--sc-on-primary);
	background: var(--sc-primary);
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
	cursor: pointer;
}

.visiocm__fab:hover {
	background: var(--sc-primary-dark);
}

/* Ikona ciastka (wersja line) jako maska — przyjmuje kolor tekstu (currentColor / --sc-on-primary). */
.visiocm__fab-icon,
.visiocm-link::before {
	display: inline-block;
	background-color: currentColor;
	-webkit-mask: url("../img/cookie-line.png") center / contain no-repeat;
	mask: url("../img/cookie-line.png") center / contain no-repeat;
}

.visiocm__fab-icon {
	width: 1.5rem;
	height: 1.5rem;
}


/* Link w stopce ([visiocm_cookie_settings]) wygląda jak zwykły link, z ikoną ciastka. */
.visiocm-link::before {
	content: "";
	width: 1em;
	height: 1em;
	margin-right: .35em;
	vertical-align: -.15em;
}

.visiocm-link {
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	background: none;
	border: 0;
	cursor: pointer;
}

.visiocm__status {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
}

@media (max-width: 575.98px) {
	.visiocm__banner {
		padding: .5rem;
	}

	.visiocm[data-position] .visiocm__inner {
		width: 100%;
		padding: 1rem;
	}

	.visiocm__btn {
		flex-basis: 100%;
	}
}

/* Tabela cookies w polityce prywatności ([visiocm_cookie_table]) — dziedziczy typografię motywu. */
.visiocm-table__category {
	margin: 1.5em 0;
}

.visiocm-table__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.visiocm-table table {
	width: 100%;
	min-width: 32rem;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: .9375em;
}

.visiocm-table thead th:nth-child(1) {
	width: 24%;
}

.visiocm-table thead th:nth-child(2) {
	width: 32%;
}

.visiocm-table thead th:nth-child(4) {
	width: 18%;
}

.visiocm-table caption {
	text-align: left;
	font-weight: 600;
	padding: 0 0 .5em;
}

.visiocm-table th,
.visiocm-table td {
	padding: .5em .75em;
	border: 1px solid rgba(128, 128, 128, 0.32);
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	text-align: left;
	vertical-align: top;
}

.visiocm-table thead th {
	background: rgba(128, 128, 128, 0.10);
	background: color-mix(in srgb, currentColor 6%, transparent);
}

.visiocm-table tbody th {
	font-weight: 600;
}

.visiocm-table code {
	overflow-wrap: anywhere;
	font-size: .875em;
}

.visiocm-table th,
.visiocm-table td {
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Telefon: wiersz narzędzia jako karta, nagłówki kolumn z data-label. */
@media (max-width: 40rem) {
	.visiocm-table table,
	.visiocm-table caption,
	.visiocm-table tbody,
	.visiocm-table tr,
	.visiocm-table th,
	.visiocm-table td {
		display: block;
		width: auto;
		min-width: 0;
	}

	.visiocm-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.visiocm-table tr {
		margin: 0 0 .75em;
		border: 1px solid rgba(128, 128, 128, 0.32);
		border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	}

	.visiocm-table th,
	.visiocm-table td {
		border: 0;
		border-top: 1px solid rgba(128, 128, 128, 0.16);
		border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
	}

	.visiocm-table tbody th {
		border-top: 0;
		background: rgba(128, 128, 128, 0.10);
		background: color-mix(in srgb, currentColor 6%, transparent);
	}

	.visiocm-table td::before {
		content: attr(data-label);
		display: block;
		font-size: .8125em;
		font-weight: 600;
		opacity: .75;
	}

	.visiocm-table td:empty {
		display: none;
	}
}

.visiocm-table__updated {
	font-size: .875em;
	opacity: .8;
}


@media (prefers-reduced-motion: reduce) {
	.visiocm *,
	.visiocm *::after {
		transition: none !important;
	}
}