/*
 * Boks „Porozmawiajmy” w prawym dolnym rogu i wysuwany panel z formularzem (agencja/parts/panel-kontakt.php,
 * agencja/panel-kontakt.js; 02.10.2026). Styl iOS na prośbę użytkownika („zaokrąglenia, glass effect, jak iOS”):
 * zdjęcie w cienkim szklanym pierścieniu (rozmyte tło, delikatny cień), panel biały z prostymi rogami przy prawej
 * krawędzi (tło strony rozmyte i przyciemnione), pola jak na wzorze od użytkownika: podpis nad polem, linia pod polem,
 * wybór w zaokrąglonych „pigułkach”.
 */

.g2p-launcher,
.g2p-panel {
	--g2p-ink: #111;
	--g2p-muted: #6e6e73;
	--g2p-line: #dcdce0;
	--g2p-fill: #f2f2f4;
}

/* --- Zdjęcie w szklanym pierścieniu, przypięte w rogu --- */
.g2p-launcher,
.g2p-launcher:visited {
	position: fixed;
	z-index: 9000; /* pod menu mobilnym (100000000); panel jest w warstwie górnej (<dialog>) */
	right: 24px;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	display: block;
	border-radius: 50%;
	color: var(--g2p-ink);
	text-decoration: none;
	animation: g2p-in 0.6s cubic-bezier(0.32, 0.72, 0, 1) 0.8s backwards; /* bez „both” — po wejściu działa płynne chowanie */
	transition: opacity 0.35s ease, visibility 0.35s, transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.g2p-launcher:hover,
.g2p-launcher:focus {
	color: var(--g2p-ink);
	text-decoration: none;
}

.g2p-launcher:focus-visible {
	outline: 0;
}

/* ukryte przy otwartym panelu, gdy na ekranie jest moduł kontaktowy z formularzem (#kontakt) i na telefonie
   na górze strony (is-top, agencja/panel-kontakt.js) */
.g2p-launcher.is-hidden,
.g2p-launcher.is-near-form,
.g2p-launcher.is-top {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translateY(16px) scale(0.92);
}

@keyframes g2p-in {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.92);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Szkło: jeden równy pas 2 px półprzezroczystej bieli z rozmytym tłem i miękki cień — bez osobnej krawędzi
   i połysku od środka (na ciemnym tle wyglądały jak druga obwódka; użytkownik: „w środku też jakiś stroke”). */
.g2p-launcher__ring {
	box-sizing: border-box;
	display: block;
	width: 64px;
	height: 64px;
	padding: 2px;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.5);
	-webkit-backdrop-filter: blur(16px) saturate(180%);
	backdrop-filter: blur(16px) saturate(180%);
	box-shadow: 0 6px 18px rgb(0 0 0 / 0.12), 0 1px 3px rgb(0 0 0 / 0.06);
	transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.45s ease;
}

.g2p-launcher:hover .g2p-launcher__ring,
.g2p-launcher:focus-visible .g2p-launcher__ring {
	box-shadow: 0 10px 24px rgb(0 0 0 / 0.14), 0 1px 3px rgb(0 0 0 / 0.06);
	transform: scale(1.05);
}

.g2p-launcher:focus-visible .g2p-launcher__ring {
	outline: 2px solid var(--g2p-ink);
	outline-offset: 3px;
}

.g2p-launcher__avatar {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

/* Etykieta obok zdjęcia — tylko przy najechaniu myszą albo fokusie z klawiatury. */
.g2p-launcher__label {
	position: absolute;
	top: 50%;
	right: calc(100% + 12px);
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 18px;
	border: 1px solid rgb(255 255 255 / 0.75);
	border-radius: 18px;
	background: linear-gradient(150deg, rgb(255 255 255 / 0.88), rgb(255 255 255 / 0.66));
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	backdrop-filter: blur(20px) saturate(180%);
	box-shadow: 0 6px 18px rgb(0 0 0 / 0.1), inset 0 1px 1px rgb(255 255 255 / 0.95);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translate(10px, -50%) scale(0.96);
	transform-origin: right center;
	transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}

.g2p-launcher:hover .g2p-launcher__label,
.g2p-launcher:focus-visible .g2p-launcher__label {
	opacity: 1;
	transform: translate(0, -50%);
}

.g2p-launcher__title {
	font-size: 17px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.01em;
}

.g2p-launcher__sub {
	color: var(--g2p-muted);
	font-size: 13px;
	line-height: 1;
}

@supports (text-box: trim-both cap alphabetic) {
	.g2p-launcher__title,
	.g2p-launcher__sub {
		text-box: trim-both cap alphabetic;
	}

	.g2p-launcher__label {
		gap: 9px;
		padding: 16px 18px;
	}
}

/* --- Panel: biały, przy prawej krawędzi na pełną wysokość, proste rogi (użytkownik); tło strony rozmyte --- */
.g2p-panel {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(680px, 100%);
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: #fff;
	color: var(--g2p-ink);
	transform: translateX(100%);
	transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}

.g2p-panel.is-open {
	transform: none;
}

.g2p-panel::backdrop {
	background-color: rgb(0 0 0 / 0);
	-webkit-backdrop-filter: blur(0);
	backdrop-filter: blur(0);
	transition: background-color 0.45s ease, backdrop-filter 0.45s ease, -webkit-backdrop-filter 0.45s ease;
}

.g2p-panel.is-open::backdrop {
	background-color: rgb(0 0 0 / 0.28);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.g2p-panel__inner {
	box-sizing: border-box;
	height: 100%;
	padding: 44px 48px 40px;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.g2p-panel__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}

.g2p-panel .g2p-panel__title {
	margin: 0;
	color: var(--g2p-ink);
	font-size: clamp(28px, 2.5vw, 36px); /* „Przedstaw nam swoje potrzeby” w jednym wierszu na komputerze */
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.03em;
}

.g2p-panel .g2p-panel__title:focus {
	outline: 0;
}

.g2p-panel__close {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--g2p-fill);
	color: var(--g2p-ink);
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.g2p-panel__close:hover {
	background: #e5e5ea;
}

.g2p-panel__close:focus-visible {
	outline: 2px solid var(--g2p-ink);
	outline-offset: 3px;
}

/* --- Formularz (jak wzór od użytkownika) --- */
.g2p-form {
	margin-top: 36px;
}

.g2p-form__fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 40px;
}

.g2p-panel .g2p-field--wide {
	grid-column: 1 / -1;
}

.g2p-panel .g2p-field {
	display: block;
	max-width: none;
	margin: 0;
	font-weight: 400;
}

.g2p-field__label,
.g2p-panel .g2p-options__legend {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--g2p-ink);
	font-size: 19px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.g2p-panel .g2p-input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 12px 0 10px;
	border: 0;
	border-bottom: 1px solid var(--g2p-line);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #000;
	font: inherit;
	font-size: 17px;
	line-height: 1.4;
	transition: border-color 0.2s ease;
}

.g2p-panel .g2p-input:focus {
	border-bottom-color: var(--g2p-ink);
	outline: 0;
}

.g2p-panel .g2p-field--area {
	margin-top: 40px;
}

.g2p-panel .g2p-input--area {
	min-height: 64px;
	resize: vertical;
}

.g2p-options {
	min-width: 0;
	margin: 40px 0 0;
	padding: 0;
	border: 0;
}

.g2p-panel .g2p-options__legend {
	margin-bottom: 16px;
}

.g2p-options__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Pigułka: zaznaczona = czarna z białym napisem. Pole wyboru niewidoczne, ale klikalne (komunikat przeglądarki). */
.g2p-panel .g2p-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 10px 22px 12px; /* bez text-box: tekst o ~1 px wyżej (sofia-pro siedzi nisko) */
	border: 1px solid var(--g2p-line);
	border-radius: 999px;
	background: #fff;
	color: #333;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.g2p-chip input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.g2p-panel .g2p-chip:hover {
	border-color: var(--g2p-ink);
}

.g2p-panel .g2p-chip:has(input:checked) {
	border-color: var(--g2p-ink);
	background: var(--g2p-ink);
	color: #fff;
}

.g2p-chip:has(input:focus-visible) {
	outline: 0;
	box-shadow: 0 0 0 4px rgb(17 17 17 / 0.14);
}

/* Tekst w pigułkach i przycisku dokładnie w osi Y: pole tekstu przycięte do wysokości wersalików (Chrome 133+,
   Safari 18.2+), równe odstępy góra/dół. Pomiar: bez tego wersaliki siedzą ~1,2 px poniżej środka. */
@supports (text-box: trim-both cap alphabetic) {
	.g2p-panel .g2p-chip {
		padding: 17px 22px;
	}

	.g2p-chip span {
		line-height: 1;
		text-box: trim-both cap alphabetic;
	}
}

.g2p-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.g2p-form__send {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-top: 28px;
}

/* Przyciski jak w całym motywie (.g2c-btn): czarny prostokąt, wersaliki, rozstrzelenie (użytkownik: „buttony zawsze
   takie”); jasny wariant z ramką. */
.g2p-panel .g2p-submit {
	flex: none;
	height: auto;
	margin: 0;
	padding: 16px 32px;
	border: 1px solid #000;
	border-radius: 0;
	background: #000;
	box-shadow: none;
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: all 0.5s ease;
}

.g2p-panel .g2p-submit:hover,
.g2p-panel .g2p-submit:focus {
	background: #fff;
	color: #000;
}

.g2p-panel .g2p-submit:focus-visible {
	outline: 2px solid #000;
	outline-offset: 3px;
}

.g2p-panel .g2p-submit:disabled {
	background: #000;
	color: #fff;
	opacity: 0.6;
	cursor: wait;
}

.g2p-panel .g2p-submit--light {
	background: #fff;
	color: #000;
}

.g2p-panel .g2p-submit--light:hover,
.g2p-panel .g2p-submit--light:focus {
	background: #000;
	color: #fff;
}

/* Wersaliki w przycisku dokładnie w osi Y (jak w pigułkach), wysokość jak .g2c-btn. */
@supports (text-box: trim-both cap alphabetic) {
	.g2p-panel .g2p-submit {
		padding: 20px 32px;
		line-height: 1;
		text-box: trim-both cap alphabetic;
	}
}

/* Zgoda (RODO): kwadratowe pole jak przyciski, zaznaczone = czarne z białym ✓. */
.g2p-panel .g2p-consent {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: none;
	margin: 36px 0 0;
	color: #555;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
}

.g2p-consent input {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1px solid #9a9a9a;
	border-radius: 0;
	background: #fff no-repeat center / 12px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.g2p-consent input:hover {
	border-color: #000;
}

.g2p-consent input:checked {
	border-color: #000;
	background-color: #000;
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6.2 4.8 9 10 3' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E");
}

.g2p-consent input:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

.g2p-panel .g2p-consent a {
	color: var(--g2p-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.g2p-panel .g2p-form__note {
	margin: 0;
	color: var(--g2p-muted);
	font-size: 14px;
	line-height: 1.6;
}

.g2p-panel .g2p-form__note a,
.g2p-panel .g2p-thanks a {
	color: var(--g2p-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.g2p-form .g2fs-msg {
	margin: 24px 0 0;
	padding: 14px 18px;
	border-radius: 14px;
	background: var(--g2p-fill);
	color: var(--g2p-ink);
	font-size: 15px;
	line-height: 1.5;
}

.g2p-form .g2fs-msg--error {
	background: #fdecea;
	color: #b3261e;
}

.g2p-form .g2fs-msg:not([data-fs-active]) {
	display: none;
}

/* Po wysłaniu (zdarzenie wpcf7mailsent z js/formspree-init.js) zamiast formularza podziękowanie. */
.g2p-thanks {
	display: none;
	margin-top: 40px;
	outline: 0;
}

.g2p-panel.is-sent .g2p-form {
	display: none;
}

.g2p-panel.is-sent .g2p-thanks {
	display: block;
}

.g2p-panel .g2p-thanks__title {
	margin: 0;
	color: var(--g2p-ink);
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.g2p-panel .g2p-thanks__text {
	margin: 12px 0 28px;
	color: #555;
	font-size: 17px;
	line-height: 1.6;
}

/* --- Wizytówka na dole panelu --- */
/* Biała z linią 1 px jak reszta strony (szare tło było obce — użytkownik), na całą szerokość pól nad nią. */
.g2p-card {
	display: flex;
	flex-wrap: wrap; /* drugi rząd: adresy biur */
	align-items: center;
	gap: 16px;
	margin-top: 44px;
	padding: 16px 20px 16px 16px;
	border: 1px solid var(--g2p-line);
	background: #fff;
}

.g2p-card__avatar {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.g2p-card__text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.g2p-card__name {
	color: var(--g2p-ink);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.3;
}

.g2p-card__role {
	margin-top: 2px;
	color: var(--g2p-muted);
	font-size: 13px;
	line-height: 1.4;
}

.g2p-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
	margin-top: 6px;
}

.g2p-panel .g2p-card__links a,
.g2p-panel .g2p-card__links a:visited {
	color: var(--g2p-ink);
	font-size: 15px;
	line-height: 1.5;
	text-decoration: underline;
	text-decoration-color: rgb(17 17 17 / 0.3);
	text-underline-offset: 3px;
}

.g2p-panel .g2p-card__links a:hover {
	text-decoration-color: currentColor;
}

.g2p-panel .g2p-card__call {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--g2p-ink);
	color: #fff;
	transition: background-color 0.25s ease;
}

.g2p-panel .g2p-card__call:hover,
.g2p-panel .g2p-card__call:focus {
	background: #2c2c2e;
	color: #fff;
}

/* Adresy biur — pod linią 1 px, dwie kolumny blisko siebie (prośba użytkownika: „trochę zbliżyć”; wcześniej każda zajmowała
   połowę wizytówki), na wąskim telefonie jedna pod drugą. */
.g2p-card__offices {
	display: grid;
	flex: 1 0 100%;
	grid-template-columns: repeat(2, max-content);
	gap: 10px 48px;
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var(--g2p-line);
	color: var(--g2p-muted);
	font-size: 14px;
	font-style: normal;
	line-height: 1.5;
}

.g2p-card__city {
	display: block;
	color: var(--g2p-ink);
	font-size: 14px;
	font-weight: 500;
}

@media (max-width: 359px) {
	.g2p-card__offices {
		grid-template-columns: 1fr;
	}
}

/* --- Telefon: kapsuła bez podpisu i strzałki, panel jako arkusz od dołu --- */
@media (max-width: 767px) {
	.g2p-launcher,
	.g2p-launcher:visited {
		right: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	}

	.g2p-launcher__ring {
		width: 58px;
		height: 58px;
	}

	.g2p-launcher__label {
		display: none;
	}

	.g2p-panel__inner {
		padding: 24px 20px calc(32px + env(safe-area-inset-bottom, 0px));
	}

	.g2p-panel .g2p-panel__title {
		font-size: 21px; /* jeden wiersz obok X przy 360–414 px (przy 28 px łamał się na dwa) */
		line-height: 1.25;
	}

	.g2p-panel__close {
		width: 36px;
		height: 36px;
	}

	.g2p-form {
		margin-top: 20px;
	}

	.g2p-form__fields {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.g2p-field__label,
	.g2p-panel .g2p-options__legend {
		font-size: 17px;
	}

	/* Telefon (03.10.2026, druga wersja): wygląd jak dotąd (podpisy nad polami, pola pod sobą), mniejsze tylko pigułki
	   usług i budżetu oraz odstępy między sekcjami — „Wyślij zapytanie” kończy się mniej więcej z pierwszym ekranem
	   (wizytówka może być niżej). Pierwsza wersja (wszystko ściśnięte, podpowiedzi zamiast podpisów) — użytkownik:
	   „miszmasz”. */
	.g2p-options,
	.g2p-panel .g2p-field--area {
		margin-top: 26px;
	}

	.g2p-panel .g2p-options__legend {
		margin-bottom: 12px;
	}

	.g2p-options__list {
		gap: 8px;
	}

	.g2p-panel .g2p-chip {
		padding: 7px 13px 9px;
		font-size: 14px;
	}

	@supports (text-box: trim-both cap alphabetic) {
		.g2p-panel .g2p-chip {
			padding: 12px 13px;
		}
	}

	.g2p-form__send {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		margin-top: 22px;
	}

	.g2p-panel .g2p-consent {
		margin-top: 22px;
	}

	.g2p-panel .g2p-submit {
		width: 100%;
	}

	.g2p-card {
		margin-top: 36px;
	}

	.g2p-card__avatar {
		width: 52px;
		height: 52px;
	}

	.g2p-panel .g2p-card__call {
		width: 44px;
		height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.g2p-launcher,
	.g2p-launcher__ring,
	.g2p-launcher__label,
	.g2p-panel,
	.g2p-panel::backdrop {
		animation: none;
		transition: none;
	}
}