/*
 * BP | Kwalifikator - karta z pytaniami na stronie.
 *
 * Kolory, pismo i zaokraglenia bierzemy ze zmiennych motywu (--bp-...).
 * Wartosci po przecinku sa zapasem dla strony bez naszego motywu -
 * neutralne, zeby nic sie nie rozsypalo. Rozmiary i odstepy w rem, na
 * skali motywu (M8); piksele tylko dla wlosow ramek, cieni i ikon.
 * Zadnego koloru wpisanego wprost (M4) - akcent motywu robi tez za
 * kolor „aktywne / wybrane”.
 */

.bpkw {
	--bpkw-akcent: var(--bp-akcent, #2563eb);
	--bpkw-tekst: var(--bp-tekst, #0f172a);
	--bpkw-tekst-2: var(--bp-tekst-2, #475569);
	--bpkw-ramka: var(--bp-ramka, #e2e8f0);
	--bpkw-tlo: var(--bp-tlo-jasne, #f8fafc);
	--bpkw-biel: var(--bp-biel, #ffffff);
	--bpkw-promien: var(--bp-btn-promien, 12px);
	margin: 0 auto;
	max-width: 88rem;
	color: var(--bpkw-tekst);
	font-family: var(--bp-pismo, inherit);
}

.bpkw-karta {
	padding: 3.2rem;
	border: 1px solid var(--bpkw-ramka);
	border-radius: calc( var(--bpkw-promien) * 1.6 );
	background: var(--bpkw-biel);
	box-shadow: 0 1px 2px rgba( 15, 23, 42, .04 ), 0 12px 32px rgba( 15, 23, 42, .06 );
}

.bpkw-plakietka {
	display: flex;
	width: max-content;
	align-items: center;
	gap: .8rem;
	margin: 0 auto 1.4rem;
	padding: .5rem 1.2rem;
	border: 1px solid var(--bpkw-ramka);
	border-radius: 999px;
	color: var(--bpkw-tekst-2);
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.bpkw-kropka {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bpkw-akcent);
	box-shadow: 0 0 0 3px var(--bpkw-tlo);
}

.bpkw .bpkw-naglowek {
	margin: 0 0 .6rem;
	color: var(--bpkw-tekst);
	text-align: center;
}

.bpkw-podtytul {
	margin: 0 0 2.4rem;
	color: var(--bpkw-tekst-2);
	text-align: center;
}

/* Rozmowa */
.bpkw-rozmowa {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.bpkw-krok {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.bpkw .bpkw-dymek {
	align-self: flex-start;
	max-width: 85%;
	margin: 0;
	padding: 1rem 1.6rem;
	border-radius: .4rem 1.6rem 1.6rem 1.6rem;
	background: var(--bpkw-tlo);
	color: var(--bpkw-tekst);
	line-height: 1.5;
}

.bpkw-krok > .bpkw-dymek {
	font-weight: 600;
}

.bpkw .bpkw-podsumowanie {
	max-width: 100%;
	border: 1px solid var(--bpkw-ramka);
	background: var(--bpkw-biel);
}

.bpkw .bpkw-dziekujemy {
	border-left: 3px solid var(--bpkw-akcent);
}

/*
 * Wjazd nowych elementow: krotko i bez ruchu dla tych, ktorzy go nie chca.
 * Animacja CSS, nie przelaczanie klas w skrypcie - stan koncowy to zwykly
 * wyglad elementu, wiec nic nie zostanie w polowie przezroczyste, nawet gdy
 * przegladarka wstrzyma rysowanie karty w tle.
 */
.bpkw .is-nowy {
	animation: bpkw-wjazd .25s ease backwards;
}

@keyframes bpkw-wjazd {
	from {
		opacity: 0;
		transform: translateY( 6px );
	}
}

/* Kafle */
.bpkw-kafle {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: 1rem;
}

.bpkw .bpkw-kafel {
	position: relative;
	display: flex;
	min-height: 9.6rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 0;
	padding: 1.6rem 1.2rem;
	border: 1px solid var(--bpkw-ramka);
	border-radius: var(--bpkw-promien);
	background: var(--bpkw-biel);
	color: var(--bpkw-tekst);
	font: inherit;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease, opacity .15s ease;
}

.bpkw .bpkw-kafel.bez-ikony {
	min-height: 6.4rem;
}

.bpkw .bpkw-kafel:hover {
	border-color: var(--bpkw-akcent);
	transform: translateY( -1px );
}

.bpkw .bpkw-kafel:focus-visible {
	outline: 2px solid var(--bpkw-akcent);
	outline-offset: 2px;
}

.bpkw-ikona {
	display: inline-flex;
	width: 4rem;
	height: 4rem;
	align-items: center;
	justify-content: center;
	border-radius: 1rem;
	background: var(--bpkw-tlo);
	color: var(--bpkw-akcent);
}

.bpkw-ikona svg {
	width: 24px;
	height: 24px;
}

.bpkw .bpkw-kafel.is-wybrany {
	border-color: var(--bpkw-tekst);
	background: var(--bpkw-tekst);
	color: var(--bpkw-biel);
}

.bpkw .bpkw-kafel.is-wybrany .bpkw-ikona {
	background: color-mix( in srgb, var(--bpkw-biel) 14%, transparent );
	color: var(--bpkw-biel);
}

.bpkw .bpkw-kafel.is-wybrany::after {
	content: "";
	position: absolute;
	top: -7px;
	right: -7px;
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	border: 2px solid var(--bpkw-biel);
	border-radius: 50%;
	background: var(--bpkw-akcent);
}

/* Ptaszek rysowany ramka, nie obrazkiem - obrazek w arkuszu nie zna zmiennych motywu (M4). */
.bpkw .bpkw-kafel.is-wybrany::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: -2px;
	right: 1.5px;
	width: 5px;
	height: 9px;
	border: solid var(--bpkw-biel);
	border-width: 0 2.5px 2.5px 0;
	transform: rotate( 45deg );
}

/*
 * Odpowiedziany krok: wybrany kafel zostaje wyrazny, reszta cichnie - ale
 * dalej da sie ja kliknac i zmienic zdanie. Kolorem, nie przezroczystoscia:
 * przezroczystosc zbijala kontrast ponizej 4.5:1 (M21).
 */
.bpkw .is-odpowiedziany .bpkw-kafel:not( .is-wybrany ) {
	color: var(--bpkw-tekst-2);
}

.bpkw .is-odpowiedziany .bpkw-kafel:not( .is-wybrany ) .bpkw-ikona {
	color: var(--bpkw-tekst-2);
}

.bpkw .is-odpowiedziany .bpkw-kafel:not( .is-wybrany ):hover {
	color: var(--bpkw-tekst);
}

/* „Pisze...” */
.bpkw .bpkw-pisze {
	display: inline-flex;
	gap: .4rem;
	padding: 1.4rem 1.6rem;
}

.bpkw-pisze span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--bpkw-tekst-2);
	opacity: .4;
	animation: bpkw-kropki 1s infinite ease-in-out;
}

.bpkw-pisze span:nth-child( 2 ) {
	animation-delay: .15s;
}

.bpkw-pisze span:nth-child( 3 ) {
	animation-delay: .3s;
}

@keyframes bpkw-kropki {
	0%, 60%, 100% {
		opacity: .35;
		transform: none;
	}
	30% {
		opacity: .9;
		transform: translateY( -3px );
	}
}

/*
 * Formularz z telefonem. Biale tlo jak w formularzu kontaktowym - na
 * szarym tle drobny tekst zgody i „lub zadzwon” mial kontrast 4.34:1 (M21).
 */
.bpkw-formularz {
	margin-top: 1.6rem;
	padding: 2.4rem;
	border: 1px solid var(--bpkw-ramka);
	border-radius: var(--bpkw-promien);
	background: var(--bpkw-biel);
}

/* F2a/F5: naglowek boxu jak w formularzu kontaktowym. */
.bpkw .bp-formularz-naglowek {
	margin: 0 0 2.4rem;
	font-size: 2.4rem;
	line-height: 3rem;
}

.bpkw-brak {
	padding: 1rem 1.4rem;
	border-left: 3px solid var(--bpkw-akcent);
	background: var(--bpkw-tlo);
	color: var(--bpkw-tekst);
	font-size: 1.4rem;
}

/* Prog motywu (40em), nie wlasny. */
@media ( max-width: 39.99em ) {
	.bpkw-karta {
		padding: 2rem 1.6rem;
	}

	.bpkw-kafle {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.bpkw .bpkw-dymek {
		max-width: 100%;
	}

	.bpkw-formularz {
		padding: 1.6rem;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.bpkw .is-nowy {
		animation: none;
	}

	.bpkw .bpkw-kafel {
		transition: none;
	}

	.bpkw-pisze span {
		animation: none;
	}
}