/* ==========================================================================
   Gniazdo w Felicjanowie - zgody na cookies
   1. Baner  2. Ikona i komunikat  3. Panel ustawien  4. Mniej ruchu, druk
   Kolory, fonty i odstepy wylacznie z tokenow :root (main.css).
   ========================================================================== */

/* 1. BANER ---------------------------------------------------------------- */
.zgody-baner {
	--zgody-zab: var(--s-3);
	position: fixed;
	left: var(--s-3);
	right: var(--s-3);
	bottom: max(var(--s-3), env(safe-area-inset-bottom));
	z-index: 60;
	display: grid;
	/* telefon: baner niski (ok. 200 px), zeby nie zaslanial przyciskow w hero; od 40em wraca pelny uklad */
	gap: var(--s-2);
	padding: var(--s-3) var(--s-4) var(--s-2);
	border-radius: 0 0 var(--r-m) var(--r-m);
	background: var(--c-papier);
	color: var(--c-tekst);
	/* cien przez filter, zeby objal tez zabki z wycinanki */
	filter: drop-shadow(0 0.5rem 1.25rem var(--c-cien)) drop-shadow(0 0 1px var(--c-linia));
	animation: zgody-wjazd 0.5s var(--ease-out) both;
}

/* gorna krawedz wycieta w zabki, jak obrys trojkata w logo */
.zgody-baner::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% - 1px);
	height: var(--zgody-zab);
	background: var(--c-papier);
	-webkit-mask: conic-gradient(from 135deg at 50% 0, black 90deg, transparent 0) 50% 0 / calc(var(--zgody-zab) * 2) 100% repeat-x;
	mask: conic-gradient(from 135deg at 50% 0, black 90deg, transparent 0) 50% 0 / calc(var(--zgody-zab) * 2) 100% repeat-x;
}

@keyframes zgody-wjazd {
	from { opacity: 0; transform: translateY(1.5rem); }
	to { opacity: 1; transform: none; }
}

.zgody-baner__trop {
	position: absolute;
	top: var(--s-3);
	right: var(--s-4);
	display: flex;
	gap: var(--s-1);
	color: var(--c-lapka);
	opacity: 0.55;
	pointer-events: none;
}

.zgody-lapka {
	width: 0.875rem;
	height: 0.875rem;
	transform: rotate(90deg);
}

.zgody-lapka:nth-child(even) {
	translate: 0 0.45rem;
}

/* Tytuly banera i panelu to <p> (nie wchodza w konspekt strony), ale wygladaja jak naglowki. */
.zgody-baner__tytul,
.zgody-panel__tytul {
	font-family: var(--f-naglowki);
	font-weight: 400;
	line-height: 1.08;
	color: var(--c-zielen);
	text-wrap: balance;
}

.zgody-baner__tytul {
	padding-right: var(--s-8);
	font-size: 1.4rem;
}

.zgody-baner__tekst,
.zgody-panel__tekst,
.zgody-kat__opis {
	font-size: var(--fs-maly);
	line-height: 1.55;
	color: var(--c-tekst-2);
}

.zgody-baner__tekst {
	font-size: var(--fs-drobny);
	line-height: 1.45;
}

/* telefon: krotki tekst; od 40em pelny tekst z linkiem do polityki w zdaniu */
.zgody-baner__dlugi {
	display: none;
}

.zgody-link {
	color: var(--c-zielen);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	white-space: nowrap;
}

.zgody-baner__akcje {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-1) var(--s-2);
}

/* telefon: link do polityki i "Ustawienia" w jednym wierszu nad przyciskami (cele po 44 px) */
.zgody-baner__linki {
	grid-column: 1 / -1;
	order: -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
}

.zgody-baner__linki .zgody-link {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-size: var(--fs-drobny);
}

.zgody-btn {
	padding-inline: var(--s-3);
	font-size: var(--fs-maly);
	cursor: pointer;
}

/* telefon: etykiety przyciskow w jednym wierszu, oba przyciski rowne (44 px wysokosci) */
.zgody-baner__akcje > .zgody-btn {
	padding-inline: var(--s-2);
	font-size: var(--fs-drobny);
	white-space: nowrap;
}

/* najwezsze telefony: etykieta moze sie zlamac, przyciski zostaja rowne */
@media (max-width: 23.49em) {
	.zgody-baner__akcje > .zgody-btn {
		white-space: normal;
	}
}

.zgody-btn--ustawienia {
	margin-left: auto;
	padding-inline: 0;
	border: 0;
	font-size: var(--fs-drobny);
	text-underline-offset: 0.2em;
}

/* Otwarte menu mobilne: ostatnie pozycje i przyciski nie chowaja sie pod banerem. */
.zgody-baner-widoczny .menu-mobilne {
	padding-bottom: calc(var(--zgody-h, 0px) + var(--s-3) + var(--s-6));
}

/* Gdy baner jest na ekranie, stale przyciski z prawego dolnego rogu podnosza sie nad niego. */
.zgody-baner-widoczny .zadzwon {
	bottom: calc(var(--zgody-h, 0px) + var(--s-3) + var(--s-4));
}

.zgody-baner-widoczny .do-gory {
	bottom: calc(var(--zgody-h, 0px) + var(--s-3) + var(--s-4) + 3.25rem + var(--s-3));
}

@media (hover: hover) and (pointer: fine) {
	.zgody-link:hover { color: var(--c-bordo); }
}

@media (min-width: 40em) {
	.zgody-baner {
		left: var(--s-5);
		right: auto;
		bottom: var(--s-5);
		width: 29rem;
		padding: var(--s-5) var(--s-6) var(--s-4);
		gap: var(--s-4);
	}

	.zgody-baner__trop {
		top: var(--s-5);
		right: var(--s-5);
	}

	.zgody-baner__tytul {
		font-size: 1.7rem;
	}

	.zgody-baner__tekst {
		font-size: var(--fs-maly);
		line-height: 1.55;
	}

	.zgody-baner__dlugi {
		display: inline;
	}

	.zgody-baner__krotki,
	.zgody-baner__linki .zgody-baner__krotki {
		display: none;
	}

	.zgody-baner__akcje {
		gap: var(--s-2);
	}

	.zgody-baner__akcje > .zgody-btn {
		padding-inline: var(--s-4);
		font-size: 0.9375rem;
		white-space: normal;
	}

	.zgody-baner__linki {
		order: 0;
		justify-content: center;
	}

	.zgody-btn--ustawienia {
		margin-left: 0;
		padding-inline: var(--s-4);
	}

	/* baner stoi w lewym rogu, wiec przyciski z prawej zostaja na swoim miejscu */
	.zgody-baner-widoczny .zadzwon {
		bottom: var(--s-4);
	}

	.zgody-baner-widoczny .do-gory {
		bottom: calc(var(--s-4) + 3.25rem + var(--s-3));
	}
}

@media (min-width: 62em) {
	.zgody-baner-widoczny .do-gory {
		bottom: var(--s-5);
	}
}

/* 2. IKONA I KOMUNIKAT ---------------------------------------------------- */
.zgody-ikona {
	position: fixed;
	left: var(--s-4);
	bottom: max(var(--s-4), env(safe-area-inset-bottom));
	z-index: 44;
	display: none;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 2px solid var(--c-krem);
	border-radius: 50%;
	background: var(--c-zielen);
	color: var(--c-krem);
	box-shadow: var(--cien-m);
	cursor: pointer;
	transition: transform 0.2s var(--ease-out), background-color 0.2s ease;
}

.ma-zgody .zgody-ikona {
	display: grid;
}

.zgody-ikona svg {
	transition: transform 0.35s var(--ease-out);
}

.zgody-ikona:focus-visible {
	outline-offset: 2px;
	border-radius: 50%;
	box-shadow: 0 0 0 7px var(--c-krem);
}

.zgody-ikona:active {
	transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
	.zgody-ikona:hover { background: var(--c-zielen-jasna); }
	.zgody-ikona:hover svg { transform: rotate(-20deg); }
}

/* Telefon i tablet: ikona tylko na samej gorze strony i przy stopce (html.zgody-ikona-pokaz z zgody.js),
   zeby w srodku strony nie zaslaniala tekstu ani pol formularza. Staly link jest w stopce. */
@media (max-width: 61.99em) {
	.zgody-ikona {
		opacity: 0;
		visibility: hidden;
		transform: translateY(0.75rem);
		transition: opacity 0.25s ease, transform 0.35s var(--ease-out), background-color 0.2s ease, visibility 0s 0.35s;
	}

	.zgody-ikona-pokaz .zgody-ikona {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.zgody-ikona-pokaz .zgody-ikona:active {
		transform: scale(0.94);
	}
}

/* Cel kotwicy #ustawienia-cookies. Z JS link otwiera panel, wiec ta informacja jest tylko dla przegladarek bez JS. */
.zgody-bez-js {
	display: none;
}

.zgody-bez-js:target {
	position: fixed;
	left: var(--s-3);
	right: var(--s-3);
	bottom: max(var(--s-3), env(safe-area-inset-bottom));
	z-index: 60;
	display: block;
	max-width: 34rem;
	padding: var(--s-4) var(--s-5);
	border-radius: var(--r-m);
	background: var(--c-papier);
	color: var(--c-tekst);
	font-size: var(--fs-maly);
	box-shadow: var(--cien-m);
}

.js .zgody-bez-js:target {
	display: none;
}

.zgody-info {
	position: fixed;
	/* na telefonie nad ikona, zeby nie wchodzic pod przycisk "Zadzwon" */
	left: var(--s-4);
	bottom: calc(max(var(--s-4), env(safe-area-inset-bottom)) + 3rem + var(--s-3));
	z-index: 44;
	max-width: calc(100vw - 2 * var(--s-4) - 3rem - var(--s-3));
	padding: var(--s-2) var(--s-4);
	border-radius: var(--r-pelny);
	background: var(--c-zielen-ciemna);
	color: var(--c-krem);
	font-size: var(--fs-maly);
	font-weight: 600;
	box-shadow: var(--cien-s);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity 0.25s ease, transform 0.35s var(--ease-out), visibility 0s 0.35s;
	pointer-events: none;
}

.zgody-info.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

@media (min-width: 62em) {
	.zgody-ikona {
		left: var(--s-5);
		bottom: var(--s-5);
	}

	.zgody-info {
		left: calc(var(--s-5) + 3rem + var(--s-3));
		bottom: calc(var(--s-5) + 0.375rem);
	}
}

/* 3. PANEL USTAWIEN ------------------------------------------------------- */
.zgody-panel {
	width: min(34rem, calc(100vw - 2 * var(--s-3)));
	max-width: none;
	max-height: calc(100dvh - 2 * var(--s-4));
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--r-l);
	background: var(--c-papier);
	color: var(--c-tekst);
	box-shadow: var(--cien-m);
	overscroll-behavior: contain;
}

.zgody-panel[open] {
	animation: zgody-wjazd 0.35s var(--ease-out) both;
}

.zgody-panel::backdrop {
	background: var(--c-zaslona);
}

.zgody-panel__srodek {
	display: grid;
	gap: var(--s-4);
	padding: var(--s-5);
}

.zgody-panel__glowa {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-4);
}

.zgody-panel__tytul {
	font-size: var(--fs-h3);
}

.zgody-panel__zamknij {
	display: grid;
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	margin: calc(-1 * var(--s-2)) calc(-1 * var(--s-2)) 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--c-piasek);
	color: var(--c-zielen);
	cursor: pointer;
	transition: transform 0.16s var(--ease-out), background-color 0.2s ease, color 0.2s ease;
}

.zgody-panel__zamknij:focus-visible {
	border-radius: 50%;
}

.zgody-panel__zamknij:active {
	transform: scale(0.94);
}

.zgody-panel__x {
	transform: rotate(45deg);
}

.zgody-panel__lista {
	display: grid;
	border-top: 1px solid var(--c-linia);
}

.zgody-kat {
	padding-block: var(--s-3) var(--s-4);
	border-bottom: 1px solid var(--c-linia);
}

.zgody-kat__glowa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	min-height: 2.75rem;
	cursor: pointer;
}

.zgody-kat--stala .zgody-kat__glowa {
	cursor: default;
}

.zgody-kat__nazwa {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s-1) var(--s-3);
	font-weight: 700;
	color: var(--c-zielen);
}

.zgody-kat__stala {
	font-size: var(--fs-drobny);
	font-weight: 600;
	color: var(--c-tekst-2);
}

.zgody-kat__opis {
	max-width: 58ch;
	padding-right: var(--s-7);
}

/* przelacznik */
.zgody-przelacznik {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	flex: none;
	width: 3.25rem;
	height: 1.875rem;
	margin: 0;
	border: 2px solid var(--c-tekst-2);
	border-radius: var(--r-pelny);
	background: var(--c-papier);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.zgody-przelacznik::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.1875rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--c-tekst-2);
	transform: translateY(-50%);
	transition: transform 0.25s var(--ease-out), background-color 0.2s ease;
}

.zgody-przelacznik:checked {
	border-color: var(--c-zielen);
	background: var(--c-zielen);
}

.zgody-przelacznik:checked::before {
	background: var(--c-krem);
	transform: translate(1.375rem, -50%);
}

.zgody-przelacznik:disabled {
	border-color: var(--c-lapka);
	background: var(--c-lapka);
	cursor: not-allowed;
}

.zgody-przelacznik:focus-visible {
	border-radius: var(--r-pelny);
}

.zgody-panel__akcje {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-2);
}

.zgody-btn--zapisz {
	grid-column: 1 / -1;
}

@media (hover: hover) and (pointer: fine) {
	.zgody-panel__zamknij:hover {
		background: var(--c-zielen);
		color: var(--c-krem);
	}

	.zgody-przelacznik:not(:disabled):not(:checked):hover {
		border-color: var(--c-zielen);
	}
}

@media (min-width: 40em) {
	.zgody-panel__srodek {
		gap: var(--s-5);
		padding: var(--s-6);
	}

	.zgody-btn {
		padding-inline: var(--s-4);
		font-size: 0.9375rem;
	}
}

/* 4. MNIEJ RUCHU, DRUK ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.zgody-baner,
	.zgody-panel[open] {
		animation: none;
	}

	.zgody-info {
		transform: none;
	}

	.zgody-ikona:hover svg {
		transform: none;
	}
}

@media print {
	.zgody-baner,
	.zgody-ikona,
	.zgody-info,
	.zgody-bez-js,
	.zgody-panel {
		display: none !important;
	}
}