/* Salačová – cookie lišta */
@font-face {
	font-family: 'Salacova Brush';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/caveat-brush-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Salacova Brush';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/caveat-brush-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.slc-cc {
	--slc-ink: #06101B;
	--slc-paper: #FFFFF9;
	--slc-mustard: #DFA622;
	--slc-muted: #5B6470;
	--slc-blue: #247BA5;
	--slc-line: #ECE6D3;
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 100000;
	box-sizing: border-box;
	width: min(576px, calc(100vw - 48px));
	padding: 50px 42px 34px;
	border: 1px solid var(--slc-line);
	border-radius: 26px;
	background: var(--slc-paper);
	box-shadow: 0 24px 60px rgba(6, 16, 27, 0.16), 0 2px 6px rgba(6, 16, 27, 0.06);
	font-family: Montserrat, Arial, sans-serif;
	color: var(--slc-ink);
	text-align: left;
	animation: slc-cc-in 0.35s ease-out both;
}
.slc-cc[hidden],
.slc-cc [hidden] { display: none !important; }
.slc-cc *,
.slc-cc *::before,
.slc-cc *::after { box-sizing: border-box; }

@keyframes slc-cc-in {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

.slc-cc-string {
	position: absolute;
	left: 18px;
	top: -22px;
	width: 108px;
	height: 108px;
	overflow: visible;
	pointer-events: none;
}
.slc-cc-string path { fill: none; stroke: var(--slc-ink); stroke-width: 1.8; stroke-linecap: round; }
.slc-cc-string circle { fill: var(--slc-mustard); }

.slc-cc-kicker {
	margin: 0 0 20px 72px;
	font-family: 'Salacova Brush', 'Caveat Brush', cursive;
	font-size: 21px;
	line-height: 1.1;
	color: var(--slc-ink);
	transform: rotate(-2deg);
	transform-origin: left center;
}
.slc-cc-h {
	margin: 0 0 14px;
	padding: 0;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--slc-ink);
}
.slc-cc-dot { color: var(--slc-mustard); }
.slc-cc-p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--slc-muted);
}
.slc-cc-hand {
	margin: 0 0 26px;
	font-family: 'Salacova Brush', 'Caveat Brush', cursive;
	font-size: 22px;
	line-height: 1.1;
	color: var(--slc-blue);
}

.slc-cc-prefs {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 4px 0 24px;
}
.slc-cc-opt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--slc-line);
	border-radius: 16px;
	background: #FAF8EF;
	cursor: pointer;
}
.slc-cc-opt-t { display: flex; flex-direction: column; gap: 3px; }
.slc-cc-opt-t strong { font-size: 15px; font-weight: 700; color: var(--slc-ink); }
.slc-cc-opt-t small { font-size: 13px; line-height: 1.5; color: var(--slc-muted); }

.slc-cc-switch {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	flex-shrink: 0;
	width: 46px;
	height: 26px;
	margin: 0;
	border-radius: 999px;
	background: #CBD6DB;
	cursor: pointer;
	transition: background 0.2s;
}
.slc-cc-switch::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(6, 16, 27, 0.25);
	transition: transform 0.2s;
}
.slc-cc-switch:checked { background: var(--slc-mustard); }
.slc-cc-switch:checked::after { transform: translateX(20px); }
.slc-cc-switch:disabled { cursor: default; opacity: 0.6; }

.slc-cc-btns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.slc-cc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 55px;
	margin: 0;
	padding: 12px 18px;
	border: 2px solid var(--slc-ink);
	border-radius: 999px;
	background: transparent;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--slc-ink);
	text-align: center;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.slc-cc-btn--yes { border-color: var(--slc-mustard); background: var(--slc-mustard); }
.slc-cc-btn--yes:hover { border-color: #C99418; background: #C99418; }
.slc-cc-btn--no:hover { background: var(--slc-ink); color: var(--slc-paper); }

.slc-cc-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px 16px;
	margin-top: 26px;
}
.slc-cc-link {
	margin: 0;
	padding: 0 0 2px;
	border: 0;
	border-bottom: 2px solid var(--slc-ink);
	border-radius: 0;
	background: none;
	font-family: Montserrat, Arial, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--slc-ink);
	cursor: pointer;
}
.slc-cc-foot .slc-cc-policy {
	margin-left: auto;
	font-size: 15px;
	color: var(--slc-muted);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.slc-cc-link:hover,
.slc-cc-foot .slc-cc-policy:hover { color: var(--slc-blue); border-color: var(--slc-blue); }
.slc-cc button:focus-visible,
.slc-cc a:focus-visible,
.slc-cc-switch:focus-visible { outline: 3px solid var(--slc-blue); outline-offset: 3px; }

@media (max-width: 600px) {
	.slc-cc {
		left: 12px;
		right: 12px;
		bottom: 12px;
		width: auto;
		padding: 44px 22px 24px;
		border-radius: 22px;
	}
	.slc-cc-string { left: 6px; top: -20px; width: 96px; height: 96px; }
	.slc-cc-kicker { margin: 0 0 18px 64px; font-size: 19px; }
	.slc-cc-h { font-size: 25px; }
	.slc-cc-p { font-size: 15px; line-height: 1.65; }
	.slc-cc-hand { margin-bottom: 20px; font-size: 20px; }
	.slc-cc-btns { gap: 10px; }
	.slc-cc-btn { min-height: 50px; padding: 10px 12px; font-size: 15px; }
	.slc-cc-foot { margin-top: 20px; }
	.slc-cc-link { font-size: 15px; }
	.slc-cc-foot .slc-cc-policy { font-size: 14px; }
}

/* Na nízkých obrazovkách se karta posouvá; provázek nad okrajem se pak ořízne. */
@media (max-height: 720px) {
	.slc-cc { max-height: calc(100vh - 24px); overflow-y: auto; }
	.slc-cc-string { top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
	.slc-cc { animation: none; }
	.slc-cc-switch,
	.slc-cc-switch::after,
	.slc-cc-btn { transition: none; }
}