/* WP KRS Cookie — banner styles. Colours come from CSS vars (inline). */

.wpkc-banner {
	position: fixed;
	z-index: 99999;
	box-sizing: border-box;
	background: var(--wpkc-bg, #1f1f1f);
	color: var(--wpkc-text, #fff);
	font-size: 13px;
	line-height: 1.5;
	box-shadow: 0 -2px 24px rgba(0, 0, 0, .25);
}

.wpkc-banner *,
.wpkc-floating,
.wpkc-link {
	box-sizing: border-box;
}

/* Positions */
.wpkc-pos-bottom { left: 0; right: 0; bottom: 0; padding: 16px 20px; }
.wpkc-pos-top    { left: 0; right: 0; top: 0; padding: 16px 20px; box-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.wpkc-pos-box {
	bottom: 20px;
	max-width: 420px;
	padding: 18px;
	border-radius: 14px;
}
.wpkc-pos-box.wpkc-corner-right { right: 20px; left: auto; }
.wpkc-pos-box.wpkc-corner-left  { left: 20px; right: auto; }

.wpkc-main {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto;
}
.wpkc-pos-box .wpkc-main { flex-direction: column; align-items: stretch; }

.wpkc-body { flex: 1 1 320px; min-width: 240px; }
/* W kolumnie flex-basis staje sie wysokoscia — bez tego body rozpycha sie na 320px. */
.wpkc-pos-box .wpkc-body { flex: 0 0 auto; min-width: 0; }
.wpkc-title { margin: 0 0 5px; font-size: 15px; font-weight: 600; color: var(--wpkc-text, #fff); }
.wpkc-message { margin: 0; }
#wpkc-banner .wpkc-privacy { color: var(--wpkc-accent, #c9a86a) !important; text-decoration: underline; }

.wpkc-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
}

/* Wysoka specyficzność (#wpkc-banner) + !important na kolorach, aby reguły motywu
   (np. Elementora: `[type="button"]{...}`) nie nadpisywały wyglądu przycisków. */
#wpkc-banner .wpkc-btn {
	cursor: pointer;
	border: 1px solid transparent !important;
	border-radius: 8px;
	/* Pionowy padding zostaje na 10px — cel dotykowy jest juz ponizej zalecanych 44px. */
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	transition: opacity .15s ease, background .15s ease;
}
#wpkc-banner .wpkc-btn:hover { opacity: .9; }
#wpkc-banner .wpkc-btn-primary {
	background: var(--wpkc-accent, #c9a86a) !important;
	color: var(--wpkc-btn-text, #1f1f1f) !important;
}
#wpkc-banner .wpkc-btn-ghost {
	background: transparent !important;
	color: var(--wpkc-text, #fff) !important;
	border-color: currentColor !important;
}

/* Settings panel */
.wpkc-settings {
	max-width: 1200px;
	margin: 12px auto 0;
	border-top: 1px solid rgba(255, 255, 255, .15);
	padding-top: 12px;
	display: grid;
	gap: 10px;
}
/* `display: grid` powyzej bije `display:none` z atrybutu [hidden] (UA stylesheet). */
.wpkc-settings[hidden] { display: none; }
.wpkc-cat { display: block; cursor: pointer; }
.wpkc-cat-head { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.wpkc-cat-name { color: var(--wpkc-text, #fff); }
/* Wciecie = szerokosc przelacznika (44px) + gap (10px). */
.wpkc-cat-desc { display: block; margin: 3px 0 0 54px; opacity: .8; font-weight: 400; }

/* Przelacznik: natywny checkbox przemalowany na "pill toggle".
   ID + !important — motywy (np. Elementor) resetuja inputy. */
#wpkc-banner .wpkc-cat input[type="checkbox"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	position: relative;
	flex: 0 0 auto;          /* w flexie tor nie moze sie skurczyc */
	width: 44px !important;
	min-width: 44px !important;
	height: 24px !important;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	cursor: pointer;
	/* Neutralna szarosc — czytelna na jasnym i ciemnym tle banera. */
	background: rgba(128, 128, 128, .45) !important;
	background: color-mix(in srgb, currentColor 30%, transparent) !important;
	transition: background .18s ease;
}
/* Suwak. */
#wpkc-banner .wpkc-cat input[type="checkbox"]::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	transition: transform .18s ease;
}
/* Ptaszek — rysowany borderem, wiec dziedziczy kolor akcentu z ustawien.
   `top` dostrojony wzrokowo: obrot o 45 stopni przesuwa znak wzgledem pudelka,
   a oko centruje "V" blizej wierzcholka niz srodka masy. 7px czytalo sie za
   nisko, 5px za wysoko. Nie licz tego wzorem — sprawdz w przegladarce.
   Pseudoelement ma content-box (`*` nie lapie ::after), wiec pudelko to 6x10px. */
#wpkc-banner .wpkc-cat input[type="checkbox"]::after {
	content: "";
	position: absolute;
	top: 6px;
	left: 9px;
	width: 4px;
	height: 8px;
	border: solid var(--wpkc-accent, #c9a86a);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
	transition: opacity .18s ease, transform .18s ease;
}
#wpkc-banner .wpkc-cat input[type="checkbox"]:checked {
	background: var(--wpkc-accent, #c9a86a) !important;
}
/* Translacja w ukladzie rodzica, dopiero potem obrot w miejscu. */
#wpkc-banner .wpkc-cat input[type="checkbox"]:checked::before { transform: translateX(20px); }
#wpkc-banner .wpkc-cat input[type="checkbox"]:checked::after {
	opacity: 1;
	transform: translateX(20px) rotate(45deg);
}
#wpkc-banner .wpkc-cat input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--wpkc-accent, #c9a86a);
	outline-offset: 2px;
}
/* Kategoria "Niezbedne" — zawsze wlaczona, nieklikalna. */
#wpkc-banner .wpkc-cat input[type="checkbox"]:disabled {
	opacity: .55;
	cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
	#wpkc-banner .wpkc-cat input[type="checkbox"],
	#wpkc-banner .wpkc-cat input[type="checkbox"]::before,
	#wpkc-banner .wpkc-cat input[type="checkbox"]::after {
		transition: none;
	}
}

/* Floating re-open button. ID + !important — odporne na reset przycisków motywu. */
#wpkc-floating {
	position: fixed;
	bottom: 16px;
	z-index: 99998;
	width: 44px;
	height: 44px;
	min-width: 0;       /* nie pozwól motywowi rozciagnac w owal */
	padding: 0;
	margin: 0;
	border: none !important;
	border-radius: 50%;
	cursor: pointer;
	background: var(--wpkc-accent, #c9a86a) !important;
	color: var(--wpkc-btn-text, #1f1f1f) !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}
#wpkc-floating.wpkc-corner-right { right: 16px; left: auto; }
#wpkc-floating.wpkc-corner-left  { left: 16px; right: auto; }
/* Jak wyzej: `display: inline-flex` unieważnia atrybut [hidden]. */
#wpkc-floating[hidden] { display: none; }
#wpkc-floating:hover { opacity: .9; }
/* Ikona zawsze widoczna i wyrazna, niezaleznie od stylow motywu. */
#wpkc-floating svg {
	width: 22px;
	height: 22px;
	display: block;
	fill: currentColor;
	pointer-events: none;
}

/* Inline text link from shortcode. `button.wpkc-link` (0,1,1) bije `[type="button"]`. */
button.wpkc-link {
	background: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 0;
	color: inherit !important;
	cursor: pointer;
	text-decoration: underline !important;
	font: inherit !important;
}

@media (max-width: 600px) {
	.wpkc-actions { width: 100%; }
	#wpkc-banner .wpkc-actions .wpkc-btn { flex: 1 1 auto; }
	/* Dwie klasy — musi pobic `.wpkc-pos-box.wpkc-corner-*` (0,2,0). */
	.wpkc-pos-box.wpkc-corner-left,
	.wpkc-pos-box.wpkc-corner-right { left: 12px; right: 12px; max-width: none; }
}