/* Primerno za — barve iz teme (Bootstrap --bs-*), z nevtralnimi rezervami. Gibanje: raven 1.
   Tema ima html { font-size: 10px }, zato px namesto rem. */
.pz,
.pz__stanje {
	--pz-bg: var(--bs-body-bg, #fff);
	--pz-ink: var(--bs-body-color, #212529);
	--pz-muted: color-mix(in srgb, var(--pz-ink) 66%, var(--pz-bg));
	--pz-line: color-mix(in srgb, var(--pz-ink) 14%, var(--pz-bg));
	--pz-surface: color-mix(in srgb, var(--pz-ink) 4%, var(--pz-bg));
	--pz-ok: #17603a;
	--pz-ok-bg: #e5f1e9;
	--pz-warn: #7a4f00;
	--pz-warn-bg: #faf0d9;
	--pz-bad: #9e2419;
	--pz-bad-bg: #fbe8e5;
	--pz-r: var(--bs-border-radius, 6px);
}

.pz {
	margin-block: 32px;
	color: var(--pz-ink);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	letter-spacing: normal;
}

.pz__glava {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 16px;
}
.pz__naslov { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.pz__obseg,
.pz__izid { margin: 0; color: var(--pz-muted); font-size: 14px; }

/* stanje izbranega vozila — znak + besedilo, barva ni edini nosilec */
.pz__stanje {
	margin-block: 8px 16px;
	padding: 10px 14px;
	border: 1px solid var(--pz-line);
	border-radius: var(--pz-r);
	background: var(--pz-surface);
	font-size: 15px;
	line-height: 1.45;
	letter-spacing: normal;
}
.pz__stanje--cena { margin-block: 12px; min-height: calc(2 * 1.45em + 22px); box-sizing: border-box; } /* prostor za dve vrstici: brez premika ob ceni */
.pz__stanje--da { background: var(--pz-ok-bg); border-color: color-mix(in srgb, var(--pz-ok) 30%, transparent); color: var(--pz-ok); }
.pz__stanje--delno { background: var(--pz-warn-bg); border-color: color-mix(in srgb, var(--pz-warn) 30%, transparent); color: var(--pz-warn); }
.pz__stanje--ne { background: var(--pz-bad-bg); border-color: color-mix(in srgb, var(--pz-bad) 30%, transparent); color: var(--pz-bad); }
.pz__stanje a { color: inherit; font-weight: 600; }
.pz__znak { font-weight: 700; margin-right: 2px; }
/* vozila izdelka pod opozorilom »ni primerno«: barva besedila, manjše — ponudba, ne opozorilo */
.pz__stanje--ne .pz__za {
	display: block;
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid color-mix(in srgb, var(--pz-bad) 18%, transparent);
	color: var(--pz-ink);
	font-size: 14px;
}
.pz__za a { font-weight: 400; text-underline-offset: 2px; }
.pz__za a:hover { text-decoration-thickness: 2px; }
.pz__stanje a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }
.pz__stanje--cena:has(.pz__za),
.pz-brez-avta .pz__stanje--cena { min-height: 0; } /* min-height je za dve vrstici, z vozili izdelka so tri */

/* iskanje */
.pz__iskanje { display: none; margin-bottom: 16px; }
.pz-js .pz__iskanje { display: block; }
.pz__oznaka { display: block; margin-bottom: 6px; font-weight: 600; font-size: 15px; }
.pz__polje {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 10px 14px;
	border: 1px solid color-mix(in srgb, var(--pz-ink) 40%, var(--pz-bg));
	border-radius: var(--pz-r);
	background: var(--pz-bg);
	color: var(--pz-ink);
	font: inherit;
	font-size: 16px;
	line-height: 1.4;
}
.pz__polje:focus-visible,
.pz__znamka button:focus-visible,
.pz a:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--pz-ink) 70%, transparent);
	outline-offset: 2px;
}
.pz__izid { margin-top: 6px; min-height: 1.3em; }

/* tabela */
.pz-tabela {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed; /* širine iz <colgroup>, ki ga izračuna strežnik */
	font-size: 15px;
}
.pz-tabela th,
.pz-tabela td {
	padding: 9px 10px;
	overflow-wrap: anywhere;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--pz-line);
	background: none;
}
.pz-tabela thead th { color: var(--pz-muted); font-weight: 600; font-size: 13px; }
.pz-tabela tbody[hidden],
.pz-tabela tr[hidden],
.pz-js .pz-tabela tbody.pz--zaprto tr:not(.pz__znamka) { display: none; }
html:not(.pz-js) .pz__znamka button { cursor: default; }
html:not(.pz-js) .pz__znamka-ime::before { display: none; }

/* glava znamke (doda skript) */
.pz__znamka th { padding: 0; border-bottom: 1px solid var(--pz-line); }
.pz__znamka button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: 48px;
	padding: 0 6px;
	border: 0;
	background: var(--pz-surface);
	color: var(--pz-ink);
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}
.pz__znamka button:hover { background: color-mix(in srgb, var(--pz-ink) 8%, var(--pz-bg)); }
.pz__znamka-ime::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin: 0 12px 0 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-4px) rotate(45deg);
	transition: transform 150ms ease-out;
}
.pz-js .pz--zaprto .pz__znamka-ime::before { transform: translateY(-1px) rotate(-45deg); }
.pz__znamka-st { font-weight: 400; font-size: 14px; color: var(--pz-muted); }

.pz__vozilo--vase td { background: var(--pz-ok-bg); color: var(--pz-ok); font-weight: 600; }
.pz__vozilo--vase td:first-child::before { content: "✓ "; }
.pz__vozilo--delno td { background: var(--pz-warn-bg); }
.pz__prazno { margin: 16px 0 0; color: var(--pz-muted); }

/* telefon: vrstica kot kartica z oznakami stolpcev; iskanje ostane na vrhu samo znotraj razdelka
   (sticky je omejen na .pz, zato se pod tabelo sprosti sam) */
@media (max-width: 640px) {
	.pz-js .pz__iskanje {
		position: sticky;
		top: var(--pz-vrh, var(--wp-admin--admin-bar--height, 0px)); /* --pz-vrh = spodnji rob glave teme (skript) */
		z-index: 5;
		margin-inline: -12px;
		padding: 8px 12px 4px;
		background: var(--pz-ozadje, var(--bs-body-bg, #fff));
		border-bottom: 1px solid var(--pz-line);
	}
	.pz__oznaka { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.pz__izid { margin-top: 4px; font-size: 13px; }
	.pz-tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.pz-tabela,
	.pz-tabela tbody { display: block; }
	.pz-tabela colgroup { display: none; }
	.pz-tabela tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--pz-line); }
	.pz-tabela tr.pz__znamka { padding: 0; }
	.pz-tabela tr.pz__znamka th { display: block; }
	.pz-tabela td { display: block; padding: 2px 8px; border: 0; }
	.pz-tabela td:first-child { font-weight: 600; }
	.pz-tabela td + td[data-label]::before { content: attr(data-label) ": "; color: var(--pz-muted); font-size: 13px; }
	.pz-tabela td:empty { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pz__znamka-ime::before { transition: none; }
}