/* ==========================================================================
   Sütisáv (Complianz) a webshop megjelenésében – inc/cookie-banner.php tölti be.
   Gépen: széles, lebegő sáv az oldal alján (szöveg balra, gombok jobbra).
   Mobilon: alulról felcsúszó panel. A „Beállítások” kinyitásakor a kategóriák a szöveg alatt jelennek meg.
   Az ID-s szelektorok miatt a Complianz saját (Megjelenés / Színek) beállításait felülírja.
   ========================================================================== */

#cmplz-cookiebanner-container,
#cmplz-manage-consent {
	--cmplz_banner_background_color: #fff;
	--cmplz_text_color: var(--body-text, #4E5664);
	--cmplz_hyperlink_color: var(--purple-700, #5B4BD6);
	--cmplz_text_font_size: 15px;
	--cmplz_link_font_size: 14px;
	--cmplz_category_body_font_size: 14px;
	--cmplz_category_header_title_font_size: 15px;
	--cmplz_category_header_active_font_size: 13px;
	--cmplz_category_header_always_active_color: #16794A;
	--cmplz_slider_active_color: var(--purple-500, #7367F0);
	--cmplz_slider_inactive_color: #B8BDC7;
	--cmplz_slider_bullet_color: #fff;
}

/* --- a sáv ----------------------------------------------------------------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner {
	top: auto !important;
	bottom: 20px !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%) !important;
	width: min(1180px, calc(100% - 40px));
	min-width: 0;
	max-width: none;
	max-height: calc(100vh - 40px);
	margin: 0;
	padding: 26px 30px 22px;
	border: 1px solid var(--border, #D0D5DD);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 28px 60px -24px rgba(31, 36, 48, .45), 0 6px 18px -10px rgba(58, 45, 140, .25);
	font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
	overflow: hidden auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"header buttons"
		"body   buttons"
		"docs   buttons";
	grid-template-rows: auto auto auto;
	align-content: center;
	column-gap: 40px;
	row-gap: 8px;
	align-items: start;
	padding-right: 64px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:hover {
	box-shadow: 0 28px 60px -24px rgba(31, 36, 48, .45), 0 6px 18px -10px rgba(58, 45, 140, .25);
}
/* színes csík a tetején – mint a fejléc alatt */
#cmplz-cookiebanner-container .cmplz-cookiebanner::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: var(--grad-hero, linear-gradient(90deg, #3D7BE8, #7367F0, #AD41E8, #E515CF, #C41262));
}

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-logo,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links.cmplz-information {
	display: none !important;
}

/* fejléc: cím balra, bezárás gomb a jobb felső sarokban */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
	grid-area: header;
	grid-column: auto;
	display: flex !important;
	justify-content: flex-start;
	align-items: center;
	padding: 0;
	margin: 0;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
	display: block !important;
	margin: 0;
	font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
	font-size: 1.2rem;
	font-weight: 800;
	line-height: 1.3;
	color: var(--heading-purple, #3A2D8C);
	text-align: left;
	justify-self: start;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--muted-text, #5F6878);
	line-height: 1;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:hover { background: var(--ghost-bg, rgba(115, 103, 240, .08)); color: var(--ink, #1F2430); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close svg { width: 14px; height: 14px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close:focus-visible { outline: 3px solid var(--purple-500, #7367F0); outline-offset: 2px; }

/* szöveg */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body {
	grid-area: body;
	grid-column: auto;
	min-width: 0;
	max-height: none;
	overflow: visible;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
	width: auto;
	max-width: 760px;
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--body-text, #4E5664);
}

/* dokumentumok (Cookie-szabályzat, Adatkezelés) */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links.cmplz-documents {
	grid-area: docs;
	grid-column: auto;
	justify-content: flex-start;
	gap: 18px;
	margin: 2px 0 0;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links ul { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; list-style: none; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link {
	font-size: 14px;
	font-weight: 600;
	color: var(--purple-700, #5B4BD6);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* gombok: egyforma méret, az Elfogadom a webshop lila gombja, a másik kettő keretes */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
	grid-area: buttons;
	grid-column: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-self: center;
	width: 220px;
	margin: 0;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	width: 100%;
	min-height: 46px;
	height: auto;
	margin: 0;
	padding: 10px 18px;
	border-radius: var(--radius-btn, 10px);
	font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
	background: linear-gradient(135deg, var(--purple-500, #7367F0), var(--purple-700, #5B4BD6));
	border: 0;
	color: #fff;
	box-shadow: 0 10px 22px -12px rgba(58, 45, 140, .7);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover { background: linear-gradient(135deg, var(--purple-700, #5B4BD6), #4A3BC4); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
	background: #fff;
	border: 1.5px solid var(--purple-500, #7367F0);
	color: var(--purple-700, #5B4BD6);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover {
	background: var(--ghost-bg, rgba(115, 103, 240, .08));
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus-visible {
	outline: 3px solid var(--purple-500, #7367F0);
	outline-offset: 3px;
}

/* --- „Beállítások”: kategóriák a szöveg alatt, a gombok alul egy sorban ---------------- */
#cmplz-cookiebanner-container .cmplz-cookiebanner:has(.cmplz-categories.cmplz-fade-in) {
	width: min(760px, calc(100% - 40px));
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "header" "body" "docs" "buttons";
	row-gap: 12px;
	padding-right: 30px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner:has(.cmplz-categories.cmplz-fade-in) .cmplz-header { padding-right: 36px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner:has(.cmplz-categories.cmplz-fade-in) .cmplz-body {
	max-height: min(52vh, 460px);
	overflow-y: auto;
	padding-right: 4px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner:has(.cmplz-categories.cmplz-fade-in) .cmplz-buttons {
	width: auto;
	flex-direction: row;
	flex-wrap: wrap;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner:has(.cmplz-categories.cmplz-fade-in) .cmplz-buttons .cmplz-btn { flex: 1 1 180px; width: auto; }

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories { width: auto; margin-top: 14px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category {
	background: #F7F6FD;
	border: 1px solid #E6E3F7;
	border-radius: 14px;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category:not(:last-child) { margin-bottom: 8px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header { padding: 12px 14px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-title {
	font-weight: 700;
	color: var(--ink, #1F2430);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-always-active { font-weight: 600; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-description {
	padding: 0 14px 14px;
	line-height: 1.5;
	color: var(--body-text, #4E5664);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle {
	background: none;
	border: 0;
	padding: 4px;
	margin: 0 0 0 6px;
	cursor: pointer;
	color: var(--muted-text, #5F6878);
	border-radius: 8px;
	display: flex;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle:focus-visible { outline: 3px solid var(--purple-500, #7367F0); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle svg { width: 16px; height: 16px; fill: currentColor; }
/* kapcsolók: nagyobbak, jobban láthatók */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:before { width: 38px; height: 22px; top: -11px; border-radius: 22px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label:after { width: 16px; height: 16px; top: -8px; left: 3px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:checked + .cmplz-label:after { left: 19px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox { width: 38px; height: 22px; top: -11px; margin: 0; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus-visible + .cmplz-label:before { box-shadow: 0 0 0 3px rgba(115, 103, 240, .55); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox .cmplz-label { padding-left: 40px; }

/* --- lebegő „Sütibeállítások” fül (gépen) -------------------------------------------- */
#cmplz-manage-consent .cmplz-manage-consent {
	right: 24px;
	padding: 12px 18px;
	border: 1px solid var(--border, #D0D5DD);
	border-bottom: 0;
	border-radius: 14px 14px 0 0;
	background: #fff;
	color: var(--purple-700, #5B4BD6);
	font-family: var(--font-head, 'Plus Jakarta Sans', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 700;
	box-shadow: 0 -8px 24px -14px rgba(31, 36, 48, .4);
}

/* --- a láblécbeli „Sütibeállítások” gomb csak akkor kell, ha van Complianz (inc/template-tags.php) --- */

/* --- tablet ---------------------------------------------------------------------------- */
@media (max-width: 900px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "header" "body" "docs" "buttons";
		row-gap: 10px;
		padding-right: 30px;
	}
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header { padding-right: 36px; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
		width: auto;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 6px;
	}
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { flex: 1 1 160px; width: auto; }
}

/* --- mobil: alulról felcsúszó panel ------------------------------------------------------ */
@media (max-width: 600px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner,
	#cmplz-cookiebanner-container .cmplz-cookiebanner:has(.cmplz-categories.cmplz-fade-in) {
		bottom: 0 !important;
		width: 100%;
		max-height: 88vh;
		padding: 22px 18px calc(16px + env(safe-area-inset-bottom, 0px));
		border-radius: 20px 20px 0 0;
		border-bottom: 0;
		padding-right: 18px;
	}
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title { display: block !important; font-size: 1.1rem; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message { font-size: 14.5px; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons,
	#cmplz-cookiebanner-container .cmplz-cookiebanner:has(.cmplz-categories.cmplz-fade-in) .cmplz-buttons {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { min-height: 46px; padding: 10px 8px; font-size: 14.5px; white-space: normal; }
	/* Elfogadom és Elutasítom egymás mellett, egyforma méretben; a Beállítások alattuk teljes szélességben */
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences,
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-save-preferences { grid-column: 1 / -1; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner:has(.cmplz-categories.cmplz-fade-in) .cmplz-body { max-height: 50vh; }
}

@media (prefers-reduced-motion: reduce) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories.cmplz-fade-in { animation: none; }
}

/* lenyitó nyíl: csak az SVG (a Complianz háttérképes nyilát kikapcsoljuk), nyitva megfordul */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-icon.cmplz-open {
	background: none !important;
	width: 18px;
	height: 18px;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle[aria-expanded="true"] .cmplz-icon.cmplz-open { transform: rotate(180deg); }

/* széles képernyőn a gombok egy sorban → laposabb, hosszúkás sáv */
@media (min-width: 1200px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner:not(:has(.cmplz-categories.cmplz-fade-in)) .cmplz-buttons {
		flex-direction: row;
		width: auto;
	}
	#cmplz-cookiebanner-container .cmplz-cookiebanner:not(:has(.cmplz-categories.cmplz-fade-in)) .cmplz-buttons .cmplz-btn {
		width: 150px;
	}
	#cmplz-cookiebanner-container .cmplz-cookiebanner:not(:has(.cmplz-categories.cmplz-fade-in)) {
		padding-top: 22px;
		padding-bottom: 20px;
	}
}

/* a kategória sora mobilon is egy sorban maradjon (a Complianz 425px alatt egymás alá tenné) */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header {
	grid-template-columns: 1fr auto auto !important;
	gap: 8px;
}
/* a kapcsolók felirata a képernyőolvasónak (a Complianz teljesen elrejtené) */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-banner-checkbox label > span.screen-reader-text {
	display: block !important;
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-links .cmplz-link:empty { display: none; }

/* elrejtett / lezárt állapot: a fenti display:grid ne írja felül */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-hidden,
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-dismissed {
	display: none !important;
}

/* --- késleltetett beúszás: előbb lássa a látogató az oldalt, utána jön a sáv ----------------------
   Oldalbetöltéskor gépen 1,5 mp, mobilon 2,5 mp múlva csúszik be alulról. Ha a látogató maga nyitja meg
   (Sütibeállítások gomb), azonnal megjelenik (fc-cb-now osztály, inc/cookie-banner.php).
   A „translate” külön tulajdonság, így nem ütközik a vízszintes középre igazító transformmal. */
@keyframes fcCbIn {
	from { opacity: 0; translate: 0 48px; visibility: hidden; }
	to   { opacity: 1; translate: 0 0;    visibility: visible; }
}
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show {
	animation: fcCbIn .55s cubic-bezier(.2, .8, .2, 1) 1.5s both;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show.fc-cb-now {
	animation: fcCbIn .3s ease-out 0s both;
}
@media (max-width: 600px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show { animation-delay: 2.5s; }
	#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show.fc-cb-now { animation-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
	@keyframes fcCbFade { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
	#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show { animation-name: fcCbFade; animation-duration: .01s; }
}