/**
 * Kreator CV — zadanie 3.6.
 *
 * Trzy warstwy:
 *  1. panel z krokami (lewa kolumna),
 *  2. dokument CV (prawa kolumna) — WYGLĄDA JAK KARTKA i jest tym samym
 *     elementem, który idzie na wydruk,
 *  3. `@media print` — chowa całą stronę poza dokumentem.
 *
 * ⚠️ Przy każdej zmianie podbij wersję w `wp_enqueue_style` w
 * `inc/jl-kreator-cv.php` — inaczej cache IONOS poda starą wersję.
 */

.jl-cv {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	align-items: start;
	margin: 0 0 40px;
}

.jl-cv__panel {
	background: #fff;
	border: 1px solid #DDE3EB;
	border-radius: 10px;
	padding: 22px 24px;
}

.jl-cv-info {
	background: #E8F3EC;
	border: 1px solid #BFDCC9;
	color: #1E5B33;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14.5px;
	margin: 12px 0 0;
}

/* --- Kroki --- */

.jl-cv__kroki {
	display: flex;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	gap: 6px;
	flex-wrap: wrap;
}

.jl-cv__kroki li {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 600;
	color: #7A8794;
	cursor: pointer;
	padding: 6px 10px;
	border-radius: 999px;
	transition: background .15s ease, color .15s ease;
}

.jl-cv__kroki li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #E6EBF1;
	color: #5A6672;
	font-size: 12.5px;
}

.jl-cv__kroki li.is-aktywny {
	background: #003366;
	color: #fff;
}

.jl-cv__kroki li.is-aktywny span {
	background: #fff;
	color: #003366;
}

.jl-cv__kroki li.is-zrobiony {
	color: #1E5B33;
}

.jl-cv__kroki li.is-zrobiony span {
	background: #CBE7D5;
	color: #1E5B33;
}

/* --- Formularz --- */

.jl-cv__krok {
	display: none;
}

.jl-cv__krok.is-aktywny {
	display: block;
}

.jl-cv__krok h2 {
	font-size: 18px;
	color: #003366;
	margin: 0 0 16px;
}

.jl-cv__grupa {
	margin: 0 0 16px;
}

.jl-cv__dwa {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.jl-cv__grupa label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #202124;
	margin: 0 0 6px;
}

.jl-cv__grupa input,
.jl-cv__grupa textarea {
	width: 100%;
	padding: 10px 12px;
	font-size: 15px;
	font-family: inherit;
	color: #202124;
	background: #fff;
	border: 1px solid #C9D2DC;
	border-radius: 6px;
}

.jl-cv__grupa input {
	height: 44px;
}

.jl-cv__grupa input:focus,
.jl-cv__grupa textarea:focus {
	outline: none;
	border-color: #007BFF;
	box-shadow: 0 0 0 3px rgba( 0, 123, 255, .25 );
}

.jl-cv__hint {
	display: block;
	font-size: 12.5px;
	line-height: 1.55;
	color: #5A6672;
	margin: 6px 0 0;
}

.jl-cv__hint--blok {
	margin: 0 0 16px;
}

/* --- Podpowiedzi --- */

.jl-cv__podpowiedzi {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin: 8px 0 0;
}

.jl-cv__podpowiedzi span {
	font-size: 12.5px;
	color: #5A6672;
}

.jl-cv__podpowiedzi button {
	appearance: none;
	border: 1px dashed #B9C4D0;
	background: #F7F9FB;
	color: #003366;
	font-size: 12.5px;
	padding: 5px 10px;
	border-radius: 999px;
	cursor: pointer;
}

.jl-cv__podpowiedzi button:hover {
	border-style: solid;
	border-color: #007BFF;
	background: #fff;
}

/* --- Doświadczenie --- */

.jl-cv__praca {
	border: 1px solid #E4EAF0;
	border-radius: 8px;
	padding: 14px 16px;
	margin: 0 0 14px;
	background: #FBFCFD;
}

.jl-cv__praca-glowa {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 0 12px;
	font-size: 13.5px;
	color: #5A6672;
}

.jl-cv__usun {
	appearance: none;
	border: none;
	background: none;
	color: #B32D2E;
	font-size: 13px;
	cursor: pointer;
	padding: 2px 4px;
}

.jl-cv__usun:hover {
	text-decoration: underline;
}

.jl-cv__dodaj {
	appearance: none;
	border: 1px dashed #007BFF;
	background: #F5FAFF;
	color: #003366;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 16px;
	border-radius: 8px;
	cursor: pointer;
	width: 100%;
}

.jl-cv__dodaj:hover {
	background: #E9F4FF;
}

/* --- Nawigacja --- */

.jl-cv__nawigacja {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid #EDF1F5;
}

.jl-cv__wstecz,
.jl-cv__dalej {
	appearance: none;
	border: 1px solid #003366;
	background: #fff;
	color: #003366;
	font-size: 14.5px;
	font-weight: 600;
	padding: 11px 22px;
	border-radius: 8px;
	cursor: pointer;
}

.jl-cv__dalej {
	background: #003366;
	color: #fff;
	margin-left: auto;
}

.jl-cv__dalej:hover {
	background: #002348;
}

/* --- Krok 4 --- */

.jl-cv__pobierz {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 16px;
	padding: 14px 20px;
	border: none;
	cursor: pointer;
}

.jl-cv__konto {
	margin: 26px 0 0;
	padding: 20px;
	background: #F7F9FB;
	border: 1px solid #E4EAF0;
	border-radius: 10px;
}

.jl-cv__konto h3 {
	font-size: 16px;
	color: #003366;
	margin: 0 0 10px;
}

.jl-cv__zgoda {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 13.5px;
	line-height: 1.55;
	color: #3A464F;
	margin: 0 0 12px;
	cursor: pointer;
}

.jl-cv__zgoda input {
	margin-top: 3px;
	flex: 0 0 auto;
}

.jl-cv__zapisz {
	appearance: none;
	border: none;
	background: #17A34A;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	padding: 12px 20px;
	border-radius: 8px;
	cursor: pointer;
	width: 100%;
}

.jl-cv__zapisz:hover {
	background: #128A3E;
}

.jl-cv__zapisz:disabled {
	background: #9AA7B2;
	cursor: default;
}

.jl-cv__komunikat {
	margin: 12px 0 0;
	padding: 11px 14px;
	border-radius: 6px;
	font-size: 13.5px;
	line-height: 1.55;
	background: #E8F3EC;
	border: 1px solid #BFDCC9;
	color: #1E5B33;
}

.jl-cv__komunikat.jest-blad {
	background: #FDECEC;
	border-color: #F3C2C2;
	color: #8A2B2B;
}

/* --- Podgląd: kartka --- */

.jl-cv__podglad-otoczka {
	position: sticky;
	top: 20px;
}

.jl-cv__podglad-etykieta {
	font-size: 13px;
	font-weight: 600;
	color: #5A6672;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0 0 10px;
}

.jl-cv-dokument {
	background: #fff;
	border: 1px solid #DDE3EB;
	border-radius: 6px;
	box-shadow: 0 6px 22px rgba( 16, 32, 51, .08 );
	padding: 34px 36px;
	font-size: 13.5px;
	line-height: 1.6;
	color: #23303B;
	min-height: 500px;
}

.jl-cv-dok__naglowek {
	border-bottom: 2px solid #003366;
	padding: 0 0 14px;
	margin: 0 0 18px;
}

.jl-cv-dok__imie {
	font-size: 25px;
	line-height: 1.2;
	color: #003366;
	margin: 0 0 4px;
}

.jl-cv-dok__stanowisko {
	font-size: 15px;
	font-weight: 600;
	color: #45525E;
	margin: 0 0 8px;
}

.jl-cv-dok__kontakt {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 13px;
	color: #5A6672;
	margin: 0;
}

.jl-cv-dok__kontakt span:empty {
	display: none;
}

.jl-cv-dok__sekcja {
	margin: 0 0 18px;
}

.jl-cv-dok__sekcja h3 {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #003366;
	margin: 0 0 8px;
	padding: 0 0 4px;
	border-bottom: 1px solid #E4EAF0;
}

.jl-cv-dok__sekcja p {
	margin: 0 0 6px;
}

.jl-cv-dok__praca {
	margin: 0 0 12px;
}

.jl-cv-dok__praca-glowa {
	font-weight: 600;
	color: #23303B;
	margin: 0;
}

.jl-cv-dok__praca-okres {
	font-size: 12.5px;
	color: #7A8794;
	margin: 0 0 3px;
}

.jl-cv-dok__dwie {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
	gap: 14px;
}

.jl-cv-dok__zgoda {
	margin: 22px 0 0;
	padding: 10px 0 0;
	border-top: 1px solid #EDF1F5;
	font-size: 10.5px;
	line-height: 1.5;
	color: #8792A0;
}

/* --- Telefon --- */

@media ( max-width: 900px ) {
	.jl-cv {
		grid-template-columns: 1fr;
	}

	.jl-cv__podglad-otoczka {
		position: static;
	}

	.jl-cv__dwa {
		grid-template-columns: 1fr;
	}

	.jl-cv-dokument {
		padding: 24px 22px;
	}
}

/* -------------------------------------------------------------------------
 * WYDRUK — na kartkę idzie wyłącznie dokument CV.
 *
 * Chowamy wszystko, a potem wyciągamy sam podgląd na całą stronę. Dzięki temu
 * plik PDF wygląda dokładnie tak, jak podgląd na ekranie — bez nagłówka strony,
 * menu, stopki i przycisków.
 * ---------------------------------------------------------------------- */

@media print {
	@page {
		size: A4;
		margin: 14mm;
	}

	/* 🔴 NIE używamy `visibility: hidden` na całej stronie.
	 *
	 * Pierwsza wersja chowała wszystko przez `body * { visibility: hidden }`
	 * i pokazywała sam dokument. Problem: **elementy ukryte tak nadal zajmują
	 * miejsce w układzie** — wydruk wychodził na TRZECH stronach, z czego dwie
	 * były puste (zgłoszone przez właściciela 2026-08-18).
	 *
	 * Teraz JS klonuje dokument do `#jl-cv-druk` bezpośrednio w `<body>`
	 * i stempluje `<html>` klasą `jl-drukuje`. Wszystko poza klonem znika
	 * przez `display: none`, więc nie zostawia po sobie pustej przestrzeni. */
	html.jl-drukuje body > *:not( #jl-cv-druk ) {
		display: none !important;
	}

	html.jl-drukuje #jl-cv-druk {
		display: block !important;
		position: static;
		width: 100%;
		margin: 0;
		padding: 0;
		border: none;
		box-shadow: none;
		border-radius: 0;
		min-height: 0;
		font-size: 11.5pt;
		background: #fff;
	}

	html.jl-drukuje #jl-cv-druk .jl-cv-dok__sekcja,
	html.jl-drukuje #jl-cv-druk .jl-cv-dok__praca {
		break-inside: avoid;
	}

	/* Zapas na wypadek druku bez udziału naszego skryptu (Ctrl+P). */
	.jl-cv-bez-druku,
	.jl-cv__panel,
	.jl-cv__podglad-etykieta {
		display: none !important;
	}
}

/* =========================================================================
 * WARSTWA NADPISUJĄCA MOTYW (wersja 1.5.0, uwagi właściciela 2026-08-18)
 *
 * 🔴 Motyw Superio ma własne, mocne style dla `select` i `button` — pola
 * wychodziły z niemal czarnym tłem i zaniżoną szerokością. Dlatego ta sekcja
 * używa prefiksu `.jl-cv-strona` (wyższa specyficzność) i `!important` tam,
 * gdzie motyw wygrywa mimo tego. To nie jest lenistwo — to jedyny sposób,
 * żeby nie edytować motywu rodzica, którego nie wolno ruszać.
 * ====================================================================== */

.jl-cv-strona select,
.jl-cv-strona .jl-cv__grupa select {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 100% !important;
	height: 46px !important;
	padding: 0 40px 0 14px !important;
	font-size: 15px !important;
	font-family: inherit !important;
	line-height: 1.4 !important;
	color: #202124 !important;
	background-color: #fff !important;
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%235A6672' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E" ) !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 13px 9px !important;
	border: 1px solid #C9D2DC !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	cursor: pointer;
}

.jl-cv-strona select:focus {
	border-color: #007BFF !important;
	box-shadow: 0 0 0 3px rgba( 0, 123, 255, .22 ) !important;
	outline: none !important;
}

.jl-cv-strona .jl-cv__grupa input[type="text"],
.jl-cv-strona .jl-cv__grupa input[type="tel"],
.jl-cv-strona .jl-cv__grupa input[type="email"],
.jl-cv-strona .jl-cv__grupa input[type="number"],
.jl-cv-strona .jl-cv__mail input,
.jl-cv-strona .jl-cv__grupa textarea {
	width: 100% !important;
	font-size: 15px !important;
	font-family: inherit !important;
	color: #202124 !important;
	background-color: #fff !important;
	border: 1px solid #C9D2DC !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}

.jl-cv-strona .jl-cv__grupa input,
.jl-cv-strona .jl-cv__mail input {
	height: 46px !important;
	padding: 0 14px !important;
}

.jl-cv-strona .jl-cv__grupa textarea {
	padding: 11px 14px !important;
	line-height: 1.6 !important;
}

/* --- Tagi: jeden wygląd dla podpowiedzi, prawa jazdy i języków ---------
 * Właściciel wskazał podpowiedzi z „Uprawnienia i kursy" jako wzór. */

.jl-cv-strona .jl-cv__podpowiedzi button,
.jl-cv-strona .jl-cv__wybierak,
.jl-cv-strona .jl-cv__tag {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	appearance: none !important;
	border: 1px solid #C9D6E2 !important;
	background: #F4F8FC !important;
	color: #23303B !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	padding: 8px 15px !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
	text-transform: none !important;
	letter-spacing: 0 !important;
	height: auto !important;
}

.jl-cv-strona .jl-cv__podpowiedzi button:hover,
.jl-cv-strona .jl-cv__wybierak:hover {
	background: #E7F1FB !important;
	border-color: #007BFF !important;
	color: #00306B !important;
}

.jl-cv-strona .jl-cv__wybierak.jest-wybrany {
	background: #E8F5EC !important;
	border-color: #4CAF6D !important;
	color: #14603A !important;
	font-weight: 600 !important;
}

.jl-cv-strona .jl-cv__wybierak.jest-wybrany::before {
	content: "✓";
	font-size: 12px;
	color: #2E9E5B;
}

/* Wybrany język — ten sam wygląd co tag, z krzyżykiem jako częścią pigułki. */
.jl-cv-strona .jl-cv__tag {
	background: #E8F5EC !important;
	border-color: #4CAF6D !important;
	color: #14603A !important;
	cursor: default;
	padding-right: 8px !important;
}

.jl-cv-strona .jl-cv__tag button {
	appearance: none !important;
	border: none !important;
	background: rgba( 20, 96, 58, .1 ) !important;
	color: #14603A !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px;
	padding: 0 !important;
	border-radius: 50% !important;
	font-size: 14px !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.jl-cv-strona .jl-cv__tag button:hover {
	background: #B32D2E !important;
	color: #fff !important;
}

/* --- Przyciski akcji --------------------------------------------------- */

.jl-cv-strona .jl-cv__dodaj-maly,
.jl-cv-strona .jl-cv__pobierz,
.jl-cv-strona .jl-cv__zapisz,
.jl-cv-strona .jl-cv__dalej,
.jl-cv-strona .jl-cv__wstecz {
	appearance: none !important;
	font-family: inherit !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
	transition: background .15s ease, box-shadow .15s ease;
}

.jl-cv-strona .jl-cv__pobierz {
	background: linear-gradient( 180deg, #0A7CFF 0%, #0463D8 100% ) !important;
	border: none !important;
	color: #fff !important;
	font-size: 16px !important;
	padding: 15px 22px !important;
	width: 100%;
	box-shadow: 0 4px 14px rgba( 4, 99, 216, .28 ) !important;
}

.jl-cv-strona .jl-cv__pobierz:hover {
	background: linear-gradient( 180deg, #0F87FF 0%, #0A6FE6 100% ) !important;
	box-shadow: 0 6px 18px rgba( 4, 99, 216, .34 ) !important;
}

.jl-cv-strona .jl-cv__dodaj-maly {
	background: #003366 !important;
	border: none !important;
	color: #fff !important;
	font-size: 14.5px !important;
	height: 46px !important;
	padding: 0 22px !important;
}

.jl-cv-strona .jl-cv__dodaj-maly:hover {
	background: #00274F !important;
}

.jl-cv-strona .jl-cv__zapisz {
	background: #17A34A !important;
	border: none !important;
	color: #fff !important;
	font-size: 15px !important;
	padding: 13px 20px !important;
}

.jl-cv-strona .jl-cv__zapisz:hover {
	background: #128A3E !important;
}

.jl-cv-strona .jl-cv__dalej {
	background: #003366 !important;
	border: 1px solid #003366 !important;
	color: #fff !important;
	padding: 12px 24px !important;
}

.jl-cv-strona .jl-cv__wstecz {
	background: #fff !important;
	border: 1px solid #C9D2DC !important;
	color: #3A464F !important;
	padding: 12px 24px !important;
}

.jl-cv-strona .jl-cv__dodaj {
	appearance: none !important;
	border: 1px dashed #7FB2F0 !important;
	background: #F5FAFF !important;
	color: #00306B !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: 10px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* --- Sekcja wysyłki mailem --------------------------------------------- */

.jl-cv-strona .jl-cv__mail {
	background: #fff !important;
	border: 1px solid #DDE6EF !important;
	border-radius: 10px;
}

/* --- Tagi wewnątrz dokumentu CV (wersja 1.5.0) ------------------------
 * Wyliczenia w CV czyta się skanując wzrokiem, więc pigułki są czytelniejsze
 * niż zdanie z przecinkami. Kolory stonowane — to dokument, nie interfejs,
 * i musi wyglądać dobrze także po wydrukowaniu w czerni i bieli. */

.jl-cv-dok__tagi {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.jl-cv-dok__tag {
	display: inline-block;
	background: #F1F5F9;
	border: 1px solid #DCE4EC;
	color: #23303B;
	font-size: 12.5px;
	line-height: 1.4;
	padding: 4px 11px;
	border-radius: 4px;
}

.jl-cv-dok__pary {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
	gap: 8px 20px;
	margin: 0;
}

.jl-cv-dok__pary > div {
	display: flex;
	gap: 8px;
	align-items: baseline;
}

.jl-cv-dok__pary dt {
	color: #7A8794;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 0;
	flex: 0 0 auto;
}

.jl-cv-dok__pary dd {
	margin: 0;
	font-weight: 600;
	color: #23303B;
}

@media print {
	.jl-cv-dok__tag {
		background: #fff !important;
		border-color: #B8C4D0 !important;
	}
}

/* Pole z przyciskiem obok (język + Dodaj, e-mail + Wyślij).
 * ⚠️ Reguła `width: 100% !important` na selektach wypychała przycisk pod spód —
 * wewnątrz `.jl-cv__para` select musi oddać szerokość. */
.jl-cv-strona .jl-cv__para {
	display: flex !important;
	gap: 10px;
	align-items: stretch;
}

.jl-cv-strona .jl-cv__para select,
.jl-cv-strona .jl-cv__para input {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0 !important;
}

.jl-cv-strona .jl-cv__para .jl-cv__dodaj-maly {
	flex: 0 0 auto !important;
	white-space: nowrap;
}

@media ( max-width: 560px ) {
	.jl-cv-strona .jl-cv__para {
		flex-wrap: wrap;
	}

	.jl-cv-strona .jl-cv__para .jl-cv__dodaj-maly {
		width: 100%;
	}
}

/* Pobieranie CV w innym jezyku (wersja 1.7.0). */
.jl-cv__jezyki-cv {
	margin: 16px 0 0;
	padding: 16px 18px;
	background: #F7F9FB;
	border: 1px solid #E4EAF0;
	border-radius: 10px;
}

.jl-cv-strona .jl-cv__jezyk-btn {
	font-size: 14px !important;
	padding: 10px 18px !important;
}

/* Blok pobierania CV w panelu kandydata (wersja 1.8.0). */
.jl-cv-panel-box {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient( 135deg, #F4F9FF 0%, #EEF5FB 100% );
	border: 1px solid #D6E4F2;
	border-radius: 12px;
	padding: 20px 24px;
	margin: 0 0 26px;
}

.jl-cv-panel-box__tresc {
	flex: 1 1 280px;
}

.jl-cv-panel-box h3 {
	margin: 0 0 6px;
	font-size: 17px;
	color: #003366;
}

.jl-cv-panel-box p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: #4A5561;
	max-width: 62ch;
}

.jl-cv-panel-box__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	flex: 0 1 auto;
}

.jl-cv-panel-btn {
	display: inline-block;
	background: #fff;
	border: 1px solid #C9D6E2;
	color: #23303B !important;
	font-size: 13.5px;
	font-weight: 600;
	padding: 10px 16px;
	border-radius: 999px;
	text-decoration: none !important;
	transition: border-color .15s ease, background .15s ease;
}

.jl-cv-panel-btn:hover {
	border-color: #007BFF;
	background: #F5FAFF;
}

.jl-cv-panel-btn--glowny {
	background: linear-gradient( 180deg, #0A7CFF 0%, #0463D8 100% );
	border-color: transparent;
	color: #fff !important;
	box-shadow: 0 3px 10px rgba( 4, 99, 216, .25 );
}

.jl-cv-panel-btn--glowny:hover {
	background: linear-gradient( 180deg, #0F87FF 0%, #0A6FE6 100% );
}

.jl-cv-panel-btn--pusty {
	border-style: dashed;
}

@media ( max-width: 720px ) {
	.jl-cv-panel-box__akcje {
		width: 100%;
	}

	.jl-cv-panel-btn {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* Nota o automatycznie dobranej branzy (wersja 2.4.0). */
.jl-cv__auto {
	margin: 8px 0 0;
	padding: 9px 12px;
	background: #EAF4EC;
	border: 1px solid #BFDCC9;
	border-radius: 6px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #1E5B33;
}

.jl-cv__auto strong {
	color: #14603A;
}

/* Ostrzezenie o zapisie w zakladce "Moje CV" (wersja 2.5.0). */
.jl-cv-uwaga {
	background: #FFF6E0;
	border: 1px solid #F0D9A0;
	border-left: 4px solid #E8A317;
	border-radius: 8px;
	padding: 13px 16px;
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.6;
	color: #6B5416;
}

.jl-cv-uwaga strong {
	color: #5A4512;
}

/* ---------------------------------------------------------------
   Kwalifikacje zawodowe (etap 2)

   ⚠️ Tagi celowo wyglądają jak podpowiedzi z „Uprawnienia i kursy" —
   właściciel wskazał tamten wygląd jako wzór 2026-08-18. Nie wprowadzaj
   tu trzeciego stylu tagów.
   --------------------------------------------------------------- */

.jl-cv-strona .jl-cv-kwal__sekcja {
	margin: 0 0 16px;
}

.jl-cv-strona .jl-cv-kwal__sekcja h4 {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	color: #4A5A6A;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.jl-cv-strona .jl-cv-kwal__tagi {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.jl-cv-strona .jl-cv-kwal__tag {
	appearance: none;
	border: 1px solid #C7D4E2;
	border-radius: 999px;
	background: #fff !important;
	color: #34495E !important;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.3;
	padding: 7px 13px;
	cursor: pointer;
	transition: background .12s, border-color .12s, color .12s;
	text-align: left;
	width: auto !important;
}

.jl-cv-strona .jl-cv-kwal__tag:hover {
	background: #F2F6FA !important;
	border-color: #9FB6CC;
}

.jl-cv-strona .jl-cv-kwal__tag.jest-wybrany {
	background: #E7F6EC !important;
	border-color: #34A853;
	color: #1E7A38 !important;
	font-weight: 600;
}

.jl-cv-strona .jl-cv-kwal__tag.jest-wybrany::before {
	content: "✓ ";
	font-weight: 700;
}

.jl-cv-strona .jl-cv-kwal__szukaj-kosz {
	margin: 0 0 14px;
}

.jl-cv-strona .jl-cv-kwal__szukaj {
	width: 100%;
	max-width: 420px;
}

.jl-cv-strona .jl-cv-kwal__licznik {
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 600;
	color: #1E7A38;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Z-20 — duzy wybierak z listy ogolnej (umiejetnosci, uprawnienia)
 *
 * Lista ma ~90 pozycji, wiec siedzi w <details> zamknietym domyslnie.
 * Rozwinieta od razu przykrylaby kwalifikacje zawodowe, ktore sa wazniejsze.
 * ═══════════════════════════════════════════════════════════════════════ */

.jl-cv__podp-duze {
	margin: 10px 0 0;
	border: 1px solid #DCE4EC;
	border-radius: 10px;
	background: #FBFCFE;
}

.jl-cv__podp-duze > summary {
	cursor: pointer;
	padding: 10px 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: #0A5BB5;
	list-style: none;
}

.jl-cv__podp-duze > summary::-webkit-details-marker {
	display: none;
}

.jl-cv__podp-duze > summary::before {
	content: "\25B8\00A0";
	display: inline-block;
}

.jl-cv__podp-duze[open] > summary::before {
	content: "\25BE\00A0";
}

.jl-cv__podp-duze[open] > summary {
	border-bottom: 1px solid #DCE4EC;
}

.jl-cv__podp-siatka {
	display: block;
	max-height: 340px;
	overflow-y: auto;
	padding: 12px 14px 14px;
	margin: 0;
}

.jl-cv__podp-szukaj {
	width: 100%;
	margin: 0 0 12px;
	padding: 9px 13px;
	border: 1px solid #C9D6E2;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	background: #fff;
	color: #23303B;
}

.jl-cv__podp-sekcja {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin: 0 0 12px;
}

.jl-cv__podp-sekcja:last-child {
	margin-bottom: 0;
}

.jl-cv__podp-tytul {
	display: block;
	width: 100%;
	font-size: 11.5px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #7A8794 !important;
	margin: 0 0 2px;
}

/* Zaznaczona pigulka - ten sam zielony, co przy prawie jazdy. */
.jl-cv-strona .jl-cv__podpowiedzi button.jest-wybrany {
	background: #E8F5EC !important;
	border-color: #4CAF6D !important;
	color: #14603A !important;
	font-weight: 600 !important;
}

.jl-cv__podpowiedzi button.jest-wybrany::after {
	content: "\00A0\2713";
}

/* Nota o ogolnym (branzowym) charakterze list kwalifikacji — 2026-08-29.
   Tekst pochodzi z `jl_kwal_nota()`; tutaj tylko wyglad: cicho, pod lista. */
.jl-kwal-nota{margin:14px 0 0;font-size:12px;line-height:1.55;color:#7a8794}

/* --- CV-1 (2026-10-10, wersja 2.14.0): kwalifikacje w podglądzie i wydruku pogrupowane branżą ----------
 * Ten sam układ i paleta co PDF profilu (`jl_cv_dokument_html`, 'pdf'): nagłówek branży z kolorowym paskiem
 * i liczbą, podtytuł sekcji, pigułki w kolorze branży. Kolor tylko rozdziela branże (nie koduje poziomu).
 * 🔴 Druk: `print-color-adjust: exact` — bez tego przeglądarka zdejmuje tła i pigułki robią się białe
 * (ogólna reguła `@media print` niżej w pliku bieli `.jl-cv-dok__tag` — kwalifikacje są z niej wyjęte). */

#jl-cv-podglad-kwalifikacje,
#jl-cv-druk #jl-cv-podglad-kwalifikacje {
	--jl-kw-tlo: #EAF2FB;
	--jl-kw-tekst: #1B4F82;
}

.jl-cv-dok__kgrupa { margin: 0 0 10px; }
.jl-cv-dok__kgrupa--k0 { --jl-kw-tlo: #EAF2FB; --jl-kw-tekst: #1B4F82; }
.jl-cv-dok__kgrupa--k1 { --jl-kw-tlo: #EAF6EE; --jl-kw-tekst: #1E6B3A; }
.jl-cv-dok__kgrupa--k2 { --jl-kw-tlo: #FDF1E7; --jl-kw-tekst: #8A4B12; }
.jl-cv-dok__kgrupa--k3 { --jl-kw-tlo: #F3EEFA; --jl-kw-tekst: #4B3183; }
.jl-cv-dok__kgrupa--k4 { --jl-kw-tlo: #FCEEF1; --jl-kw-tekst: #8A2540; }
.jl-cv-dok__kgrupa--k5 { --jl-kw-tlo: #EDF5F6; --jl-kw-tekst: #155E63; }

.jl-cv-dok__sekcja .jl-cv-dok__kgrupa-tytul {
	margin: 0 0 5px;
	padding: 1px 0 1px 8px;
	border-left: 4px solid var(--jl-kw-tekst);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--jl-kw-tekst);
}

.jl-cv-dok__kgrupa-ile {
	color: #8A96A3;
	font-weight: 400;
}

.jl-cv-dok__sekcja .jl-cv-dok__ksekcja {
	margin: 6px 0 4px;
	font-size: 10px;
	line-height: 1.3;
	color: #8A96A3;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.jl-cv-dok__kgrupa .jl-cv-dok__tagi { margin: 0 0 4px; }

.jl-cv-dok__tag--kwal {
	background: var(--jl-kw-tlo);
	border-color: transparent;
	color: var(--jl-kw-tekst);
	border-radius: 9px;
	font-size: 12px;
	padding: 3px 10px;
}

@media print {
	.jl-cv-dok__tag.jl-cv-dok__tag--kwal {
		background: var(--jl-kw-tlo) !important;
		border-color: transparent !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.jl-cv-dok__kgrupa-tytul {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	.jl-cv-dok__kgrupa {
		break-inside: avoid;
	}
}

/* CV-2: blok „Pobierz w Wordzie” — ten sam wygląd co blok języków, odstęp między nimi. */
.jl-cv__word {
	margin-top: 12px;
}