/**
 * jl-pakiety.css — karty cennika (jl-pakiety.php, skrót [jl_cennik])
 *
 * Kolory pochodzą z ustawień motywu, nie są wymyślone:
 *   #003366  main_color            — granat portalu
 *   #007bff  main_hover_color      — błękit, przyciski i akcenty
 *   #d6e4ff  job_featured_bg       — tło „Polecana oferta"
 *   #fdff8e  job_urgent_bg         — tło „Pilna oferta pracy"
 * Kolory samych tagów przychodzą z bazy (term meta bg_color) w atrybucie style —
 * dlatego NIE ma ich w tym pliku i nie wolno ich tu nadpisywać.
 *
 * ⚠️ Wersja pliku jest w JL_PAKIETY_WERSJA w jl-pakiety.php.
 * Po każdej zmianie tego CSS PODBIJ ją — inaczej cache IONOS poda starą wersję.
 *
 * @since 2026-08-27
 */

.jl-cennik {
	--jl-navy: #003366;
	--jl-blue: #007bff;
	--jl-featured: #d6e4ff;
	--jl-urgent: #fdff8e;
	--jl-ink: #14203a;
	--jl-ink-2: #4d5a72;
	--jl-ink-3: #7f8ba0;
	--jl-line: #d3dae6;
	--jl-line-soft: #e6eaf2;
	--jl-surface: #fff;
	--jl-surface-2: #f5f7fb;
	--jl-lock: #97a1b3;
	--jl-lock-soft: #e9ecf2;
	--jl-good: #1a7f45;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: start;
	margin: 32px 0;
}

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

/* ---------- karta ---------- */

.jl-pakiet {
	background: var(--jl-surface);
	border: 1px solid var(--jl-line);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: var(--jl-ink);
}

.jl-pakiet--hero {
	border-color: var(--jl-blue);
	box-shadow: 0 0 0 2px var(--jl-blue), 0 12px 32px -20px var(--jl-navy);
}

.jl-pakiet__top {
	padding: 22px 22px 18px;
	border-bottom: 1px solid var(--jl-line-soft);
}

.jl-pakiet__flaga {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--jl-blue);
	min-height: 1.2em;
	margin: 0 0 6px;
	line-height: 1.2;
}

.jl-pakiet__nazwa {
	font-size: 17px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 0 0 14px;
	line-height: 1.2;
	color: var(--jl-ink);
}

.jl-pakiet__cena {
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	color: var(--jl-navy);
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.jl-pakiet__cena small {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--jl-ink-3);
}

.jl-pakiet__podtytul {
	font-size: 14px;
	color: var(--jl-ink-2);
	margin: 12px 0 0;
	line-height: 1.45;
}

.jl-pakiet__ilosc {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px dashed var(--jl-line);
	display: flex;
	align-items: baseline;
	gap: 9px;
}

.jl-pakiet__ilosc b {
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.jl-pakiet__ilosc span {
	font-size: 15px;
	color: var(--jl-ink-2);
	line-height: 1.3;
}

/* ---------- pas tagów: bohater karty ---------- */

.jl-pakiet__tagi {
	padding: 18px 22px;
	background: var(--jl-surface-2);
	border-bottom: 1px solid var(--jl-line-soft);
}

.jl-pakiet__etykieta {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--jl-ink-3);
	margin: 0 0 11px;
	line-height: 1.3;
}

.jl-pakiet__etykieta--on { color: var(--jl-good); }
.jl-pakiet__etykieta--brak { margin-top: 16px; }

.jl-tagi {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.jl-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 3px;
	white-space: nowrap;
	line-height: 1.35;
}

/* Brak jest informacją — pokazujemy, co pracodawca odblokuje. */
.jl-tag--zablokowany {
	background: var(--jl-lock-soft);
	color: var(--jl-lock);
	border: 1px dashed var(--jl-lock);
	padding: 3px 9px;
}

/* ---------- treść ---------- */

.jl-pakiet__body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 18px;
}

.jl-pakiet__fundament {
	font-size: 13px;
	color: var(--jl-ink-2);
	background: #e2edff;
	border-radius: 5px;
	padding: 12px 14px;
	line-height: 1.5;
}

.jl-pakiet__fundament b {
	display: block;
	font-size: 14px;
	margin-bottom: 3px;
	color: var(--jl-ink);
}

.jl-pakiet__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}

.jl-pakiet__lista li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	line-height: 1.42;
	margin: 0;
}

.jl-pakiet__lista li::before { content: none; }

.jl-mk {
	flex: none;
	width: 16px;
	font-weight: 700;
	color: var(--jl-good);
}

.jl-pakiet__lista li.jl-off { color: var(--jl-ink-3); }
.jl-pakiet__lista li.jl-off .jl-mk { color: var(--jl-lock); font-weight: 500; }

.jl-stan {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 3px;
	color: #14203a;
}

.jl-stan--polecana { background: var(--jl-featured); }
.jl-stan--pilna { background: var(--jl-urgent); }

.jl-pakiet__cta {
	margin-top: auto;
	display: block;
	text-align: center;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 13px;
	border-radius: 5px;
	text-decoration: none;
	border: 2px solid var(--jl-blue);
	color: var(--jl-blue);
	background: transparent;
	transition: background .15s ease, color .15s ease;
}

.jl-pakiet__cta:hover,
.jl-pakiet__cta:focus {
	background: var(--jl-blue);
	color: #fff;
	text-decoration: none;
}

.jl-pakiet--hero .jl-pakiet__cta {
	background: var(--jl-blue);
	color: #fff;
}

.jl-pakiet--hero .jl-pakiet__cta:hover,
.jl-pakiet--hero .jl-pakiet__cta:focus {
	background: var(--jl-navy);
	border-color: var(--jl-navy);
}

.jl-pakiet__cta:focus-visible {
	outline: 3px solid var(--jl-navy);
	outline-offset: 2px;
}

/* ---------- wersja skrócona: formularz dodawania oferty ---------- */

.jl-cennik--skrocony .jl-pakiet__cena { font-size: 34px; }
.jl-cennik--skrocony .jl-pakiet__top { padding: 18px 18px 14px; }
.jl-cennik--skrocony .jl-pakiet__tagi { padding: 14px 18px; }
.jl-cennik--skrocony .jl-pakiet__body { padding: 16px 18px 20px; gap: 14px; }

@media (prefers-reduced-motion: reduce) {
	.jl-pakiet__cta { transition: none; }
}

/* =============================================================================
 * Krok „Wybierz pakiet" w formularzu dodawania oferty
 * (nadpisany szablon wp-job-board-pro-wc-paid-listings/packages.php)
 *
 * ⚠️ Karta w tym kontekscie konczy sie <button type="submit">, a nie <a>.
 * Przegladarki nadaja przyciskom wlasny font i szerokosc — stad reset nizej.
 * Bez niego przycisk w formularzu wyglada inaczej niz na stronie cennika.
 * ========================================================================== */

.jl-widget-packages .jl-packages-lead {
	font-size: 15px;
	line-height: 1.6;
	color: #4d5a72;
	margin: 0 0 20px;
	max-width: 62ch;
}

button.jl-pakiet__cta {
	width: 100%;
	font-family: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
}

/* =============================================================================
 * Sekcja zamykajaca na /pricing/ — „dlaczego tak tanio" + porownanie z rynkiem
 *
 * ⚠️ Kolejnosc sekcji na stronie jest tu tak samo wazna jak liczby: karty
 * pokazuja NAJPIERW, co portal potrafi, a ta sekcja dopiero POTEM tlumaczy cene.
 * Odwrocenie tej kolejnosci sprawia, ze cena 0,75 € za ogloszenie czyta sie
 * jako „nic niewarte", zamiast jako przewaga.
 * ========================================================================== */

.jl-cennik-stopka {
	max-width: 780px;
	margin: 48px auto 0;
	color: #14203a;
}

.jl-cennik-stopka h3 {
	font-size: 22px;
	font-weight: 800;
	color: #003366;
	margin: 36px 0 10px;
	line-height: 1.2;
}

.jl-cennik-stopka h3:first-child { margin-top: 0; }

.jl-cennik-stopka p {
	font-size: 16px;
	line-height: 1.65;
	color: #4d5a72;
	margin: 0 0 16px;
}

.jl-cennik-stopka strong { color: #14203a; }

.jl-porownanie {
	background: #f5f7fb;
	border: 1px solid #d3dae6;
	border-radius: 8px;
	padding: 20px 22px;
	margin: 24px 0 8px;
	overflow-x: auto;
}

.jl-porownanie__nag {
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #7f8ba0 !important;
	margin: 0 0 12px !important;
}

.jl-porownanie table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 15px;
}

.jl-porownanie td {
	padding: 9px 4px;
	border-bottom: 1px solid #e6eaf2;
	vertical-align: top;
	line-height: 1.4;
}

.jl-porownanie td:last-child {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.jl-porownanie td span {
	display: block;
	font-size: 13px;
	color: #7f8ba0;
}

.jl-porownanie tr:last-child td { border-bottom: none; }

.jl-porownanie tr.jl-my td {
	background: #e2edff;
	border-bottom: none;
	padding-top: 14px;
	padding-bottom: 14px;
}

.jl-porownanie tr.jl-my td:first-child { border-radius: 5px 0 0 5px; padding-left: 12px; }
.jl-porownanie tr.jl-my td:last-child { border-radius: 0 5px 5px 0; padding-right: 12px; color: #003366; }