/**
 * PW Motion — sekcja najczestszych pytan.
 *
 * Uklad robia kontenery Elementora: naglowek i karta kontaktowa po jednej
 * stronie, lista pytan po drugiej. Ten arkusz dodaje tylko to, czego panel nie
 * potrafi: delikatna poswiate rozjasniajaca sekcje, kafelki pod ikonami oraz
 * przekrzywiony pytajnik plywajacy w rogu karty.
 *
 * Poswiaty leza pod trescia dzieki isolation i ujemnemu z-index, a nie dzieki
 * podnoszeniu wszystkich dzieci. Dzieki temu karta pozostaje jedynym punktem
 * odniesienia dla elementu ustawionego bezwzglednie, a zaokraglone naroza nie
 * wymagaja przycinania overflow — to ono zostawialo widoczne zadziory w rogach.
 */

.pw-faq{
	position:relative;
	isolation:isolate;
}

.pw-faq::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	pointer-events:none;
	background:
		radial-gradient(72% 90% at 16% 0%,rgba(94,200,255,.11),rgba(94,200,255,0) 62%),
		radial-gradient(58% 80% at 94% 100%,rgba(94,200,255,.07),rgba(94,200,255,0) 60%);
}

.pw-faq-card{
	position:relative;
	isolation:isolate;
}

.pw-faq-card::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	border-radius:inherit;
	pointer-events:none;
	background:radial-gradient(78% 66% at 88% 4%,rgba(94,200,255,.16),rgba(94,200,255,0) 62%);
}
/* Kafelek pod ikona dymka: kwadrat z zaokraglonymi rogami i cienka ramka. */
.pw-faq-tile .elementor-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:64px;
	height:64px;
	border-radius:16px;
	border:1px solid rgba(120,200,255,.20);
	background:linear-gradient(155deg,rgba(94,200,255,.18),rgba(94,200,255,.04));
}

/* Rzad ikon nie moze byc punktem odniesienia — kontenery Elementora maja
   z zalozenia position:relative, wiec pytajnik trzymalby sie jego rogu, a nie
   rogu karty. */
.pw-faq-icons{
	position:static;
}

/* Pytajnik stoi w prawym gornym rogu karty, lekko przekrzywiony, i powoli
   unosi sie oraz opada. */
.pw-faq-mark{
	position:absolute;
	top:16px;
	right:16px;
	z-index:1;
	width:auto;
	max-width:none;
}

.pw-faq-mark .elementor-icon{
	width:86px;
	height:86px;
	border-radius:22px;
	border-color:rgba(120,200,255,.12);
	background:linear-gradient(155deg,rgba(94,200,255,.10),rgba(94,200,255,.02));
	animation:pw-faq-plyw 5s ease-in-out infinite;
	will-change:transform;
}

@keyframes pw-faq-plyw{
	0%,100%{transform:translateY(-6px) rotate(-9deg)}
	50%{transform:translateY(7px) rotate(-4deg)}
}

/* Odznaki pod przyciskiem: male pigulki z ptaszkiem. */
.pw-faq-badges .elementor-icon-list-item{
	padding:7px 14px;
	border:1px solid rgba(120,200,255,.16);
	border-radius:999px;
	background:rgba(94,200,255,.05);
}

/* Pozycja listy pytan jako karta: naglowek i tresc zostaja przezroczyste
   w Elementorze, wiec otwarte pytanie razem z odpowiedzia lezy w jednej ramce. */
.pw-faq .e-n-accordion-item{
	border:1px solid rgba(120,200,255,.14);
	border-radius:12px;
	background:#0B1926;
	transition:background-color .25s ease,border-color .25s ease;
}

.pw-faq .e-n-accordion-item:hover{
	border-color:rgba(120,200,255,.30);
	background:#0E2233;
}

.pw-faq .e-n-accordion-item[open]{
	border-color:rgba(120,200,255,.34);
	background:#0E2134;
}

@media (max-width:1024px){
	.pw-faq-mark{
		top:12px;
		right:12px;
	}

	.pw-faq-mark .elementor-icon{
		width:70px;
		height:70px;
		border-radius:18px;
	}
}

@media (max-width:479px){
	.pw-faq-mark .elementor-icon{
		width:58px;
		height:58px;
		border-radius:15px;
	}
}

@media (prefers-reduced-motion:reduce){
	.pw-faq-mark .elementor-icon{
		animation:none;
		transform:rotate(-9deg);
	}
}