/**
 * Z-AGENCY cookie consent v2.
 *
 * ── PROČ PIXELY, NE REM ─────────────────────────────────────────────────
 * `main.css` škáluje kořenový `font-size` od **5 px do 13 px** podle
 * breakpointu (5 / 5,5 / 6 / 7,5 / 8 / 9 / 10 / 11 / 13). `rem` tady tedy
 * neznamená „16 px", ale „pětina toho na malém mobilu". Živá lišta z téhož
 * důvodu jede celá v pixelech — a tenhle soubor taky. Jediná rem hodnota
 * v souboru není žádná; kdo ji sem přidá, rozbije lištu na mobilu.
 *
 * ── VZHLED 1:1 S ŽIVOU LIŠTOU ───────────────────────────────────────────
 * Změřeno ze zdrojáku `cookie-law-v2.1.css` + konfigurace GTM tagu 31:
 *   panel   bílý, fixed dole, přes celou šířku, `0 0 20px rgba(0,0,0,.2)`,
 *           bez zaoblení, obsah v `.pux-container` (max 153rem, padding 20px
 *           / 4,5rem od 768px — přepočteno na px, viz výše)
 *   text    `#1c2727`, 16px/24px, nadpis 700
 *   tlačítka  padding 15px 20px, 16px, bez zaoblení; „přijmout" nese
 *           značkovou červenou `#f5074c` (motivová `.btn-primary`),
 *           doplňkové akce tyrkysovou `#00b7cd` (motivová `.btn-default`)
 *   modal   overlay `rgba(43,45,51,.5)`, obsah bílý s paddingem 30px,
 *           nadpis 20px/32px 700, křížek vpravo nahoře, řádky kategorií
 *           oddělené `1px solid #d5d5d6`, čtvercový přepínač 20px vpravo
 *
 * ── VĚDOMÁ ODCHYLKA ─────────────────────────────────────────────────────
 * „Přijmout vše" a „Odmítnout vše" sdílejí třídu `za-cc__btn--primary`
 * a NESMÍ se od sebe odlišit velikostí, barvou ani kontrastem. Rovnocennost
 * voleb je právní požadavek (EDPB 05/2020), ne estetické rozhodnutí. Živá
 * lišta odmítnutí na první úrovni vůbec nemá (`hideMandatoryBtn: true`).
 *
 * Prefix `za-cc` je vlastní a nekoliduje ani s motivem, ani se zbytky tříd
 * `cookies-*` po staré liště.
 */

.za-cc,
.za-cc-modal {
	--za-cc-panel: #ffffff;
	--za-cc-fg: #1c2727;
	--za-cc-muted: #4a5555;
	--za-cc-accent: #f5074c;
	--za-cc-accent-fg: #ffffff;
	--za-cc-second: #00b7cd;
	--za-cc-line: #d5d5d6;
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	line-height: 24px;
	box-sizing: border-box;
}

.za-cc *,
.za-cc-modal * {
	box-sizing: inherit;
}

/**
 * Obrana proti globálním pravidlům motivu.
 *
 * `main.css` dává holému `h2` `font-size:5rem` a `margin:5rem 0 3rem`, což
 * je na širokém displeji (root 10 px) padesátipixelový nadpis s padesáti
 * pixely mezery — v modalu nepoužitelné. `label` má `display:inline-block`
 * a `margin-bottom:.5rem`. Vlastnosti, které si nenastavím sám, si motiv vezme.
 */
.za-cc label,
.za-cc-modal label {
	display: block;
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.za-cc-modal__title {
	font-family: inherit;
	margin: 0;
	letter-spacing: normal;
	text-transform: none;
}

/* ------------------------------------------------------------------ */
/* Lišta — první úroveň                                               */
/* ------------------------------------------------------------------ */

.za-cc {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9998;
	padding: 0 20px;
	background: var(--za-cc-panel);
	color: var(--za-cc-fg);
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
	transform: translateY(100%);
	transition: transform 0.25s ease-out;
}

.za-cc.is-open {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.za-cc,
	.za-cc-modal,
	.za-cc-modal__dialog {
		transition: none;
	}
}

/* Zrcadlí `.pux-container` motivu (max-width 153rem při rootu 10 px). */
.za-cc__inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 1530px;
	margin: 0 auto;
	padding: 24px 0;
}

.za-cc__title {
	margin: 0 0 5px;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var(--za-cc-fg);
}

.za-cc__body {
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--za-cc-muted);
}

.za-cc__body a,
.za-cc-modal__intro a {
	color: var(--za-cc-fg);
	text-decoration: underline;
}

.za-cc__body a:hover,
.za-cc__body a:focus,
.za-cc-modal__intro a:hover,
.za-cc-modal__intro a:focus {
	color: var(--za-cc-fg);
	text-decoration: none;
}

.za-cc__error {
	margin: 10px 0 0;
	padding: 10px 12px;
	background: var(--za-cc-accent);
	color: #ffffff;
	font-size: 15px;
	line-height: 22px;
}

.za-cc__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

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

.za-cc__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 20px;
	border: 2px solid transparent;
	border-radius: 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease-out;
}

.za-cc__btn:hover {
	opacity: 0.88;
}

.za-cc__btn:focus-visible {
	outline: 3px solid var(--za-cc-second);
	outline-offset: 2px;
}

.za-cc__btn[disabled] {
	cursor: default;
	opacity: 0.6;
}

/* Přijmout i Odmítnout. Shodná plocha, barva i váha písma — ZÁMĚRNĚ. */
.za-cc__btn--primary {
	background: var(--za-cc-accent);
	color: var(--za-cc-accent-fg);
}

.za-cc__btn--link {
	background: transparent;
	color: var(--za-cc-second);
	text-decoration: underline;
	padding-left: 12px;
	padding-right: 12px;
}

.za-cc__btn--ghost {
	background: var(--za-cc-second);
	color: #ffffff;
}

@media (min-width: 992px) {
	.za-cc__inner {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 32px;
		padding: 32px 0;
	}

	.za-cc__actions {
		flex-shrink: 0;
		flex-wrap: nowrap;
	}
}

@media (min-width: 768px) {
	.za-cc {
		padding: 0 45px;
	}
}

@media (max-width: 560px) {
	.za-cc__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.za-cc__btn {
		width: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* Modal — podrobné nastavení                                         */
/* ------------------------------------------------------------------ */

.za-cc-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(43, 45, 51, 0.5);
	opacity: 0;
	transition: opacity 0.2s ease-out;
}

.za-cc-modal.is-open {
	opacity: 1;
}

body.za-cc-locked {
	overflow: hidden;
}

.za-cc-modal__dialog {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 620px;
	max-height: 90vh;
	background: var(--za-cc-panel);
	color: var(--za-cc-fg);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
	transform: translateY(12px);
	transition: transform 0.2s ease-out;
	/* Dialog je cíl počátečního focusu (viz openModal) — obrys UA prohlížeče
	   kolem celého okna by vypadal jako chyba, focus přitom nikam neuteče:
	   drží ho trapFocus(). */
	outline: none;
}

.za-cc-modal.is-open .za-cc-modal__dialog {
	transform: translateY(0);
}

.za-cc-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 30px 30px 16px;
}

.za-cc-modal__title {
	font-size: 20px;
	line-height: 32px;
	font-weight: 700;
	color: var(--za-cc-fg);
}

.za-cc-modal__close {
	position: relative;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.za-cc-modal__close::before,
.za-cc-modal__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 2px;
	background: var(--za-cc-fg);
}

.za-cc-modal__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.za-cc-modal__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.za-cc-modal__close:focus-visible {
	outline: 3px solid var(--za-cc-second);
	outline-offset: 2px;
}

.za-cc-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 0 30px 8px;
}

.za-cc-modal__intro {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 24px;
	color: var(--za-cc-muted);
}

.za-cc-opt {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 0;
	border-top: 1px solid var(--za-cc-line);
}

.za-cc-opt__input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 3px 0 0;
	accent-color: var(--za-cc-second);
	cursor: pointer;
}

.za-cc-opt__input:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.za-cc-opt__label {
	cursor: pointer;
}

.za-cc-opt__input:disabled + .za-cc-opt__label {
	cursor: default;
}

.za-cc-opt__title {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	color: var(--za-cc-fg);
}

.za-cc-opt__desc {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	font-weight: 300;
	line-height: 24px;
	color: var(--za-cc-muted);
}

.za-cc-modal__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 16px 30px 30px;
	border-top: 1px solid var(--za-cc-line);
}

.za-cc-modal__foot .za-cc__btn {
	flex: 1 1 auto;
}

@media (max-width: 560px) {
	.za-cc-modal__foot {
		flex-direction: column;
	}

	.za-cc-modal__foot .za-cc__btn {
		width: 100%;
	}
}

/**
 * Nouzová varianta odkazu na nastavení, když se v patičce nenajde položka
 * menu s odkazem na zpracování osobních údajů (modul si odkaz doplňuje sám,
 * protože patička jede z nativních menu WordPressu).
 */
.za-cc-trigger {
	display: inline-block;
	margin: 12px 20px;
	color: inherit;
	font-size: 14px;
	text-decoration: underline;
}