/**
 * Konfigurátor príslušenstva (/konfigurator/) v zaobleniach najlepsiemobily – dopĺňa assets/css/konfigurator.css
 * (inc/konfigurator.php). Karty a boxy 10 px, ovládacie prvky a štítky ako pilulky, zaškrtnutie okrúhle,
 * karty pri výmene kusu ako na homepage (assets/js/pages/nm-konfigurator.js).
 */

.konf-app {
	--k-r: var(--nd-radius, 10px);
	--k-r-s: var(--nd-radius, 10px);
}

/* Čipy „Iný telefón“: fotka v bielom kruhu, aby nevytŕčala z pilulky. */
.konf-qm {
	padding-left: 3px;
}
.konf-qm--more {
	padding-left: 12px;
}
.konf-qm__ph {
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	padding: 2px;
	border: 1px solid var(--k-line);
	border-radius: 50%;
	background: #fff;
	object-fit: contain;
}
.konf-pc__ph {
	border-radius: var(--nd-radius-m, 8px);
}

/* Pilulky: vyhľadávanie modelu, „Za balík ušetríte až“, štítok „na iPhone…“, ukazovateľ zľavy. */
.konf-search,
.konf-pc__save,
.konf-tag,
.konf-phone__save,
.konf-meter__track,
.konf-meter__fill {
	border-radius: 999px;
}
.konf-pc__save {
	padding-inline: 16px;
}
.konf-tag {
	padding-inline: 8px;
}

/* Zaškrtnutie riadku: okrúhle ako na karte telefónu. */
.konf-box {
	border-radius: 50%;
}

/* Fotky: zaoblený rámik v páse balíka aj v riadkoch. */
.konf-drow__img,
.konf-d__ci,
.konf-d__ci img {
	border-radius: var(--nd-radius, 10px);
}
.konf-drow__img {
	overflow: hidden;
}

/* ---------------------------------------------------------------- Karty pri výmene kusu */
/* Pás kariet ako pri telefóne (.nm-acc__rail v components/nm-accessories.css), bez medzier a okrajov .konf-drow__alts. */
.konf-drow__alts.nm-acc__rail {
	grid-auto-columns: 168px;
	gap: 0;
	padding: 1px 0 10px 1px;
}

/* ---------------------------------------------------------------- Šablóna (page-konfigurator.php) */
/* Skryté časti, ktoré prepína assets/js/pages/nm-konfigurator.js – aj keď im konfigurator.css dáva display. */
.nm-konf [hidden] {
	display: none !important;
}
/* Modely sú odkazy (?model=), nie tlačidlá. */
.nm-konf a.konf-tile,
.nm-konf a.konf-qm,
.nm-konf a.konf-hit {
	color: inherit;
	text-decoration: none;
}

/* Počítadlo namiesto rebríčka (20 stupňov): template-parts/konfigurator/counter.php, tenký pás v head.php, pás s čiarkami v summary.php. */
.konf-count {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 8px;
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.3;
}
.konf-count b {
	color: var(--k-ok);
	font-size: 20px;
	font-weight: 800;
}
.konf-count.is-zero b {
	color: var(--k-muted);
}
.konf-count span {
	font-weight: 600;
}
.konf-count em {
	flex-basis: 100%;
	color: var(--k-muted);
	font-size: 12px;
	font-style: normal;
}
.konf-hl__seg {
	min-width: 0;
}
.konf-hl__seg .konf-count {
	justify-content: flex-end;
}
.konf-hl__seg .konf-count em {
	flex-basis: auto;
}
@container konfmain (max-width: 780px) {
	.konf-hl__seg .konf-count {
		justify-content: flex-start;
	}
}
.konf-seg--thin {
	gap: 2px;
	min-width: min(400px, 100%);
}
.konf-seg--thin li {
	min-width: 0;
	min-height: 15px;
	padding: 0 0 2px;
	border-bottom-width: 6px;
	background: none;
}
.konf-seg--thin li:first-child,
.konf-seg--thin li:last-child {
	border-radius: 0;
}
.konf-seg--thin .is-on {
	background: none;
}
.konf-seg--thin b,
.konf-seg--thin .is-on b,
.konf-seg--thin .is-next b {
	color: var(--k-muted);
	font-size: 12px;
	font-weight: 600;
}
.konf-meter--ticks {
	padding-right: 12px;
}
.konf-meter__tick {
	position: absolute;
	top: 50%;
	width: 2px;
	height: 14px;
	margin: -7px 0 0 -1px;
	border-radius: 1px;
	background: var(--k-line);
}
.konf-meter__tick.is-on {
	background: #fff;
}
.konf-meter__tick b {
	position: absolute;
	top: 16px;
	left: 50%;
	color: var(--k-muted);
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	transform: translateX(-50%);
}