/**
 * Lišta souhlasu s cookies.
 *
 * Psáno mobile-first. Lišta je `position: fixed`, takže neposouvá obsah
 * stránky a nezhoršuje CLS — to je u prvku, který naskočí až po načtení,
 * zásadní. Barvy vycházejí ze stávající lišty webu (lososové pozadí).
 */

.owc-consent {
	position: fixed;
	z-index: 99999;
	right: 0;
	bottom: 0;
	left: 0;
	/* Barvy jdou měnit v administraci, proto proměnné s záložní hodnotou. */
	background: var( --owc-consent-pozadi, #f3b7a4 );
	box-shadow: 0 -2px 12px rgba( 0, 0, 0, 0.15 );
	color: var( --owc-consent-text, #2b2b2b );
	font-size: 14px;
	line-height: 1.5;
}

.owc-consent[hidden] {
	display: none;
}

.owc-consent__panel {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1200px;
	padding: 12px 14px;
}

/*
 * S rozbaleným nastavením už úvodní text nepotřebujeme — návštěvník ho právě
 * četl a na telefonu by kvůli němu lišta zabrala půl displeje. Řešíme to
 * skrytím, ne posuvníkem: rolovat uvnitř lišty je na mobilu nepříjemné.
 */

.owc-consent__text p {
	margin: 0 0 8px;
}

.owc-consent__odkaz {
	color: var( --owc-consent-text, #2b2b2b );
	text-decoration: underline;
}

/* --- Kategorie --- */

.owc-consent__volby {
	margin: 8px 0;
	border-top: 1px solid rgba( 0, 0, 0, 0.15 );
	padding-top: 8px;
}

.owc-consent__volby[hidden] {
	display: none;
}

.owc-consent__kategorie-radek {
	display: flex;
	align-items: center;
	gap: 10px;
	/* Dotykový cíl aspoň 44 px i na mobilu, ale bez zbytečné výšky navíc. */
	padding: 6px 0;
	min-height: 44px;
	cursor: pointer;
}

.owc-consent__kategorie-radek input {
	flex: 0 0 auto;
	margin-top: 2px;
	width: 20px;
	height: 20px;
}

.owc-consent__kategorie-radek strong {
	display: block;
}

.owc-consent__kategorie-radek em {
	display: block;
	font-size: 12px;
	font-style: normal;
	line-height: 1.35;
	opacity: 0.8;
}

.owc-consent__tlacitka {
	gap: 6px;
}

.owc-consent__kategorie-radek--vzdy {
	cursor: default;
	opacity: 0.75;
}

/* --- Tlačítka --- */

.owc-consent__tlacitka {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
}

.owc-consent__btn {
	appearance: none;
	/*
	 * Souhlas i odmítnutí musí mít stejnou vizuální váhu — zvýrazněné
	 * „Přijmout" a potlačené „Odmítnout" je nucení k souhlasu.
	 */
	border: 1px solid var( --owc-consent-text, #212121 );
	border-radius: 2px;
	background: var( --owc-consent-tlacitko, #ffffff );
	color: var( --owc-consent-text, #212121 );
	cursor: pointer;
	font: inherit;
	/* Plná šířka a 44 px výšky na mobilu. */
	padding: 12px 18px;
	min-height: 44px;
	width: 100%;
	text-align: center;
}

.owc-consent__btn:hover,
.owc-consent__btn:focus-visible {
	background: rgba( 0, 0, 0, 0.06 );
}

.owc-consent__btn:focus-visible {
	outline: 2px solid var( --owc-consent-text, #2b2b2b );
	outline-offset: 2px;
}

/*
 * Třída zůstává kvůli šabloně, ale záměrně nemění vzhled — souhlas ani
 * odmítnutí nesmí být zvýrazněné proti druhému, a to ani tučností písma.
 */

.owc-consent__btn--odkaz {
	border-color: transparent;
	text-decoration: underline;
}

.owc-consent__btn[hidden] {
	display: none;
}

/* --- Od tabletu výš: text vlevo, tlačítka vpravo vedle sebe --- */

@media ( min-width: 782px ) {
	.owc-consent__panel {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 20px;
		padding: 18px 24px;
	}

	.owc-consent__volby {
		grid-column: 1 / -1;
		order: 3;
		margin: 0;
	}

	.owc-consent__kategorie {
		display: grid;
		grid-template-columns: repeat( 3, 1fr );
		gap: 4px 24px;
	}

	.owc-consent__tlacitka {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-end;
		margin-top: 0;
	}

	.owc-consent__btn {
		width: auto;
		min-width: 130px;
	}
}

/*
 * --- Mobil ---
 *
 * Záměrně až na konci souboru: přebíjí základní pravidla výše, která jsou
 * psaná mobile-first, ale definují `display: flex` pro tlačítka.
 */
@media ( max-width: 781px ) {
	/* Po rozbalení nastavení už úvodní text není potřeba — návštěvník ho četl. */
	.owc-consent--rozbaleno .owc-consent__text {
		display: none;
	}

	/*
	 * Tři tlačítka pod sebou zabírala zbytečnou výšku. Dvě hlavní vedle sebe,
	 * „Nastavení" pod ně jako odkaz.
	 */
	.owc-consent__tlacitka {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 6px;
	}

	.owc-consent__btn--odkaz {
		grid-column: 1 / -1;
		min-height: 36px;
		padding: 6px;
	}

	.owc-consent__btn[data-owc-akce="ulozit"] {
		grid-column: 1 / -1;
	}

	.owc-consent__text p {
		font-size: 13px;
	}
}

/* Uživatelé, kteří si nepřejí animace. */
@media ( prefers-reduced-motion: reduce ) {
	.owc-consent {
		transition: none;
	}
}