/* Motoport iskalnik – barve v slogu motoport.si (črna, rdeča). */
.mpi {
	--mpi-red: #d71920;
	--mpi-black: #111;
	--mpi-grey: #f4f4f4;
	--mpi-line: #ddd;
	--mpi-ok: #1b7f3b;
	--mpi-warn: #b26a00;
	--mpi-muted: #777;
	font-size: 15px;
	line-height: 1.4;
	color: var(--mpi-black);
	margin: 0 auto 24px;
	max-width: 1170px;
	box-sizing: border-box;
}
.mpi *, .mpi *::before, .mpi *::after { box-sizing: border-box; }

/* vrstica zavihkov */
.mpi-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	background: var(--mpi-black);
	border-bottom: 3px solid var(--mpi-red);
	overflow-x: auto;
}
.mpi-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 20px;
	color: #fff;
	background: transparent;
	border: 0;
	font: inherit;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .4px;
	white-space: nowrap;
	cursor: pointer;
}
.mpi-tab + .mpi-tab::before {
	content: "/";
	position: absolute;
	left: -4px;
	color: #555;
	font-weight: 400;
}
button.mpi-tab:hover, button.mpi-tab:focus-visible { background: #222; outline: none; }
button.mpi-tab[aria-expanded="true"] { background: var(--mpi-red); }
.mpi-soon { color: #888; cursor: default; }
.mpi-soon small { font-size: 10px; text-transform: none; color: #aaa; border: 1px solid #555; border-radius: 8px; padding: 0 5px; }

/* panel */
.mpi-panel, .mpi-standalone .mpi-kit {
	position: relative;
	background: var(--mpi-grey);
	padding: 20px;
	border: 1px solid var(--mpi-line);
	border-top: 0;
}
.mpi-panel[hidden] { display: none; }
.mpi-close {
	position: absolute; top: 6px; right: 10px;
	background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer; color: #666;
}
.mpi-title { margin: 0 0 4px; font-size: 20px; text-transform: uppercase; }
.mpi-lead { margin: 0 0 14px; color: var(--mpi-muted); font-size: 14px; }

.mpi-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.mpi-field span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.mpi-field select {
	width: 100%; height: 42px; padding: 0 10px; font: inherit;
	border: 1px solid var(--mpi-line); border-radius: 4px; background: #fff;
}
.mpi-field select:disabled { background: #eee; color: #999; }
.mpi-chk { display: inline-flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 14px; }

.mpi-out { margin-top: 16px; }
.mpi-empty { color: var(--mpi-muted); margin: 8px 0; }
.mpi-spec {
	background: #fff; border-left: 4px solid var(--mpi-red); padding: 12px 14px; margin-bottom: 14px;
	display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: baseline;
}
.mpi-spec span b { color: var(--mpi-red); }

.mpi-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.mpi-col { background: #fff; padding: 14px; border-radius: 4px; }
.mpi-col h4 { margin: 0 0 10px; font-size: 15px; text-transform: uppercase; border-left: 4px solid var(--mpi-red); padding-left: 8px; }

.mpi-item {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	padding: 8px; margin-bottom: 6px; border: 1px solid var(--mpi-line); border-radius: 4px;
	cursor: pointer; background: #fff;
}
.mpi-item:hover { border-color: #999; }
.mpi-item:focus-visible { outline: 2px solid var(--mpi-red); outline-offset: 1px; }
.mpi-item.is-sel { border-color: var(--mpi-red); background: #fff4f4; box-shadow: inset 3px 0 0 var(--mpi-red); }
.mpi-d { flex: 1 1 150px; font-size: 14px; }
.mpi-d small { display: block; color: var(--mpi-muted); font-size: 12px; }
.mpi-price { font-weight: 700; white-space: nowrap; margin-left: auto; }

.mpi-tag { font-size: 11px; padding: 2px 7px; border-radius: 10px; color: #fff; white-space: nowrap; }
.mpi-ok { background: var(--mpi-ok); }
.mpi-low { background: var(--mpi-warn); }
.mpi-no { background: #999; }
.mpi-std { background: var(--mpi-red); }

.mpi-more { width: 100%; padding: 8px; border: 1px dashed #bbb; background: #fafafa; cursor: pointer; font: inherit; font-size: 13px; }

.mpi-total {
	display: flex; justify-content: space-between; align-items: center; gap: 10px;
	background: var(--mpi-black); color: #fff; padding: 14px 16px; margin-top: 14px; font-size: 16px;
}
.mpi-total small { color: #aaa; font-size: 12px; }
.mpi-total b { font-size: 24px; color: #fff; }
.mpi-note { font-size: 12px; color: var(--mpi-muted); margin: 6px 0 0; }

.mpi-buy { margin-top: 12px; }
.mpi-btn {
	background: var(--mpi-red); color: #fff; border: 0; padding: 12px 22px; font: inherit; font-weight: 700;
	text-transform: uppercase; letter-spacing: .4px; cursor: pointer; border-radius: 3px;
}
.mpi-btn:disabled { opacity: .6; cursor: wait; }
.mpi-form { background: #fff; padding: 14px; border-radius: 4px; }
.mpi-form p { margin: 0 0 10px; }
.mpi-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.mpi-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.mpi-form input, .mpi-form textarea {
	display: block; width: 100%; margin-top: 4px; padding: 9px; font: inherit; font-weight: 400;
	border: 1px solid var(--mpi-line); border-radius: 4px;
}
.mpi-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; }
.mpi-err { color: var(--mpi-red); margin-left: 12px; font-size: 14px; }
.mpi-done { background: #eef8f1; border-left: 4px solid var(--mpi-ok); padding: 12px 14px; margin: 0; }

@media (max-width: 600px) {
	.mpi-bar { flex-wrap: nowrap; }
	.mpi-tab { padding: 11px 14px; font-size: 13px; }
	.mpi-panel, .mpi-standalone .mpi-kit { padding: 14px; }
	.mpi-total b { font-size: 20px; }
}

.mpi-private { margin: 0 0 6px; padding: 6px 10px; background: #fff8e1; border-left: 4px solid #b26a00; font-size: 13px; }
.mpi-img { flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; background: #fff; border: 1px solid var(--mpi-line); border-radius: 3px; }
.mpi-noimg { display: inline-block; background: #f4f4f4; }
.mpi-nf { margin: 14px 0 0; font-size: 14px; }
.mpi-nf a { text-decoration: underline; }
.mpi-cats { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.mpi-cats li { margin: 0; }
.mpi-cat { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 8px; background: #fff; border: 1px solid var(--mpi-line); border-radius: 4px; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.mpi-cat:hover, .mpi-cat:focus-visible { border-color: var(--mpi-red); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.mpi-cat img { width: 100%; height: auto; aspect-ratio: 300 / 424; object-fit: cover; display: block; }
.mpi-cat-t { font-weight: 600; font-size: 14px; }
.mpi-cat .mpi-btn { margin-top: auto; text-align: center; }
.mpi-code-form h4 { margin: 0 0 10px; }
.mpi-cat .mpi-btn { padding: 8px 10px; font-size: 13px; }