/* ==========================================================================
   Avuerra, plywajacy przycisk kontaktu
   ========================================================================== */

/* Rozmiary w zmiennych, zeby dalo sie je podkrecic w jednym miejscu.
   64 px to gorna granica typowego przycisku akcji, ponizej 44 px zaczyna
   sie robic za maly cel dotyku na telefonie. */
:root{
	--av-fab-glowny: 56px;
	--av-fab-osoba:  48px;
}

.av-fab{
	position: fixed;
	bottom: 26px;
	z-index: 95;                 /* nad paskiem zapisu na stronie kursu (90) */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--av-font-body);

	/* Klikniecia lapia wylacznie przyciski, nie caly kontener.
	   Awatary kontaktow sa ukryte przezroczystoscia, ale ich pudelka nadal
	   zajmuja miejsce, tak samo jak podpisy obok nich. Kontener jest przez to
	   wysoki na blisko dwiescie pikseli i szeroki na dlugosc najdluzszego
	   imienia, wiec caly ten niewidoczny prostokat przechwytywal klikniecia
	   w rogu ekranu, takze przy zamknietym przycisku. */
	pointer-events: none;
}

.av-fab--lewo{ left: 26px; align-items: flex-start; }
.av-fab--prawo{ right: 26px; align-items: flex-end; }

/* Na stronie kursu pasek zapisu zajmuje dol ekranu, wiec przycisk
   podnosi sie nad niego zamiast go zaslaniac. */
body.av-ma-pasek .av-fab{ bottom: 96px; }

.av-fab__sr{
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Przycisk glowny
   -------------------------------------------------------------------------- */

.av-fab__glowny{
	order: 2;
	pointer-events: auto;
	width: var(--av-fab-glowny, 56px);
	height: var(--av-fab-glowny, 56px);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background .2s ease, transform .2s ease;
}

/* Kadence koloruje przyciski wlasna paleta i wygrywa na stanach :focus
   oraz :active. Po kliknieciu przycisk zostaje z fokusem, przez co robil
   sie niebieski. Wszystkie stany ustawiamy wiec wprost, razem z selektorem
   rodzica, zeby specyficznosc byla wyzsza niz regul motywu nadrzednego. */
.av-fab .av-fab__glowny,
.av-fab .av-fab__glowny:focus,
.av-fab .av-fab__glowny:active,
.av-fab .av-fab__glowny:focus-visible{
	background: var(--av-red);
	color: #fff;
	border: 0;
	box-shadow: 0 4px 20px -4px rgba(211, 0, 0, .45);
}

.av-fab .av-fab__glowny:hover{ background: var(--av-red-hover); transform: scale(1.06); }

.av-fab .av-fab__glowny:focus-visible{ outline: 2px solid var(--av-ink); outline-offset: 3px; }

.av-fab__glowny-ikona{ width: 25px; height: 25px; display: block; }

/* Zamiana telefonu na krzyzyk bez podmiany kodu w JS. */
.av-fab__ksztalt-krzyzyk{ opacity: 0; }
.av-fab.av-fab--otwarty .av-fab__ksztalt-telefon{ opacity: 0; }
.av-fab.av-fab--otwarty .av-fab__ksztalt-krzyzyk{ opacity: 1; }
.av-fab__ksztalt-telefon,
.av-fab__ksztalt-krzyzyk{ transition: opacity .18s ease; }

/* Delikatny pulsujacy pierscien. Swiadomie bez skakania przyciskiem
   w nieskonczonosc, bo przy tej marce wygladaloby to tanio. */
/* Pierscien pulsujacy rozrasta sie poza przycisk, wiec bez wylaczenia
   zdarzen powiekszalby jego pole klikniecia niemal dwukrotnie. */
.av-fab__glowny::after{
	content: "";
	pointer-events: none;
	position: absolute;
	width: var(--av-fab-glowny, 56px);
	height: var(--av-fab-glowny, 56px);
	border-radius: 50%;
	border: 2px solid var(--av-red);
	opacity: 0;
	pointer-events: none;
	animation: av-fab-puls 3.4s ease-out 1.2s infinite;
}

.av-fab--otwarty .av-fab__glowny::after{ animation: none; }

@keyframes av-fab-puls{
	0%   { transform: scale(1);   opacity: .45; }
	70%  { transform: scale(1.9); opacity: 0; }
	100% { transform: scale(1.9); opacity: 0; }
}

/* --------------------------------------------------------------------------
   Lista kontaktow
   -------------------------------------------------------------------------- */

.av-fab__lista{
	order: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: inherit;
}

.av-fab__poz{ position: relative; display: flex; align-items: center; }

.av-fab--prawo .av-fab__poz{ flex-direction: row-reverse; }

.av-fab__osoba{
	width: var(--av-fab-osoba, 48px);
	height: var(--av-fab-osoba, 48px);
	flex: none;
	border-radius: 50%;
	border: 2px solid var(--av-red);
	background: #fff;
	color: var(--av-red);
	cursor: pointer;
	padding: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 14px -2px rgba(211, 0, 0, .3);

	opacity: 0;
	transform: scale(.4) translateY(14px);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s cubic-bezier(.34, 1.4, .64, 1);
}

.av-fab--otwarty .av-fab__osoba{
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* To samo co przy przycisku glownym: awatary sa przyciskami, wiec Kadence
   probuje im nadac swoj kolor tla po klikniecu. */
.av-fab .av-fab__osoba,
.av-fab .av-fab__osoba:focus,
.av-fab .av-fab__osoba:active,
.av-fab .av-fab__osoba:focus-visible{
	background: #fff;
	color: var(--av-red);
	border: 2px solid var(--av-red);
}

.av-fab .av-fab__osoba:hover{ transform: scale(1.08); }
.av-fab .av-fab__osoba:focus-visible{ outline: 2px solid var(--av-ink); outline-offset: 3px; }

.av-fab__foto{ width: 100%; height: 100%; object-fit: cover; display: block; }
.av-fab__ikona{ width: 22px; height: 22px; display: block; }

/* Podpis obok awatara, widoczny po najechaniu. */
.av-fab__podpis{
	margin-inline: 10px;
	background: #fff;
	color: var(--av-ink);
	font-size: 12.5px;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: 4px;
	white-space: nowrap;
	border: 1px solid var(--av-linia-lekka);
	box-shadow: 0 2px 10px -2px rgba(46, 33, 26, .18);
	opacity: 0;
	transform: translateX(-6px);
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

.av-fab--prawo .av-fab__podpis{ transform: translateX(6px); }

.av-fab--otwarty .av-fab__poz:hover .av-fab__podpis,
.av-fab--otwarty .av-fab__osoba:focus-visible ~ .av-fab__podpis{
	opacity: 1;
	transform: none;
}

/* Podpis znika, gdy otwarty jest kafelek, zeby sie nie dublowaly. */
.av-fab__poz.av-fab__poz--otwarta .av-fab__podpis{ opacity: 0; }

/* --------------------------------------------------------------------------
   Kafelek z danymi
   -------------------------------------------------------------------------- */

.av-fab__karta{
	position: absolute;
	pointer-events: auto;
	bottom: 0;
	width: 268px;
	background: #fff;
	border: 1px solid var(--av-linia-lekka);
	border-radius: 4px;
	padding: 16px 18px;
	box-shadow: 0 8px 34px -12px rgba(46, 33, 26, .35);
}

.av-fab--lewo  .av-fab__karta{ left: 60px; }
.av-fab--prawo .av-fab__karta{ right: 60px; }

.av-fab__karta[hidden]{ display: none; }

.av-fab__karta-head{
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 12px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--av-linia-lekka);
}

.av-fab__karta-foto{
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.av-fab__karta-imie{
	font-family: var(--av-font-head);
	font-size: 19px;
	font-weight: 600;
	color: var(--av-ink);
	margin: 0;
	line-height: 1.2;
}

.av-fab__karta-rola{
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--av-red);
	margin: 3px 0 0;
}

.av-fab__dana{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	color: var(--av-ink-soft);
	font-size: 14px;
	text-decoration: none;
	word-break: break-word;
	transition: color .18s ease;
}

.av-fab__dana:hover,
.av-fab__dana:focus-visible{ color: var(--av-red); }

.av-fab__dana svg{ width: 17px; height: 17px; flex: none; color: var(--av-red); }

/* --------------------------------------------------------------------------
   Dymek zachety
   -------------------------------------------------------------------------- */

.av-fab__dymek{
	position: absolute;
	bottom: 15px;
	background: #fff;
	color: var(--av-ink);
	font-size: 13px;
	font-weight: 500;
	padding: 8px 16px;
	border-radius: 20px;
	white-space: nowrap;
	border: 1px solid var(--av-linia-lekka);
	box-shadow: 0 2px 14px -3px rgba(46, 33, 26, .22);
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease, transform .35s ease;
}

.av-fab--lewo  .av-fab__dymek{ left: 68px;  transform: translateX(-8px); }
.av-fab--prawo .av-fab__dymek{ right: 68px; transform: translateX(8px); }

.av-fab--dymek-widoczny .av-fab__dymek{ opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Telefon
   -------------------------------------------------------------------------- */

@media (max-width: 600px){
	.av-fab{ bottom: 18px; }
	.av-fab--lewo{ left: 16px; }
	.av-fab--prawo{ right: 16px; }
	body.av-ma-pasek .av-fab{ bottom: 88px; }

	/* Kafelek obok awatara nie miesci sie na waskim ekranie, wiec staje sie
	   panelem na calej szerokosci, nad przyciskiem. */
	.av-fab__karta{
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: 88px;
		width: auto;
	}

	body.av-ma-pasek .av-fab__karta{ bottom: 158px; }

	.av-fab__dymek{ font-size: 12.5px; padding: 7px 13px; }
}

@media (prefers-reduced-motion: reduce){
	.av-fab__glowny::after{ animation: none; }
	.av-fab__osoba,
	.av-fab__podpis,
	.av-fab__dymek,
	.av-fab__glowny{ transition: none; }
}