/* Losse klikkers: reuses Klik & Mix's .fcg-klikmix__* building blocks
   (preview, block, row, field, extra, status) for the same look and feel.
   Only what's specific to this generator lives here: the row list container
   (deliberately NOT .fcg-klikmix__matrix, which Klik & Mix's own CSS hides
   once JS is ready — here the row list is the UI, with or without JS), the
   quantity stepper, the quantity badge on a preview block, and hiding Woo's
   own quantity field (the rows determine quantities here). Prefix fcg-. */

.fcg-losseklikkers {
	margin: 0 0 1.25rem;
	display: grid;
	gap: 1rem;
	min-width: 0;
}

.fcg-losseklikkers__matrix {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--large);
	padding: 0.75rem 1rem 1rem;
	margin: 0;
	min-width: 0;
}

.fcg-losseklikkers__extras {
	display: flex;
	gap: 0.35rem;
	align-items: center;
}

.fcg-losseklikkers__field--aantal {
	max-width: 8rem;
}

.fcg-losseklikkers__stepper {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.fcg-losseklikkers__stepper input {
	width: 4.2rem;
	text-align: center;
}

.fcg-losseklikkers__step {
	width: 1.9rem;
	height: 1.9rem;
	line-height: 1;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	cursor: pointer;
	font-weight: 700;
}

.fcg-losseklikkers__step:hover {
	background: var(--wp--preset--color--base-2);
}

/* Quantity badge on a preview block (".fcg-klikmix__block" from klikmix.css),
   shown only when the row's own aantal is more than one. */
.fcg-losseklikkers__block {
	position: relative;
}

.fcg-losseklikkers__block[data-fcg-qty]::after {
	content: '\00d7' attr(data-fcg-qty);
	position: absolute;
	right: -0.35rem;
	bottom: -0.35rem;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-size: 0.62rem;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.05rem 0.35rem;
	line-height: 1.3;
}

/* Woo's own quantity input is redundant: the rows determine the amounts.
   The theme's add-to-cart template renders it as .fc-qty (not Woo's default
   .quantity div) INSIDE .fc-qtyrow, which also holds the buy button —
   hiding the whole .fc-qtyrow would take the button with it. Same pattern
   as losse-bakjes.css. Two selectors: the sibling one covers the no-JS
   fallback (.fc-qtyrow stays where WooCommerce renders it); the class one
   covers the wizard, which moves .fc-qtyrow into the navrow of step 4 —
   after that move it is no longer a sibling of .fcg--losse-klikkers. */
.fcg--losse-klikkers ~ .fc-qtyrow .fc-qty,
.fcg-losseklikkers__buyrow .fc-qty {
	display: none;
}

/* Wizard-overzicht (stap 4): het voorbeeldblokje naast de tekst, niet erdoorheen. */
.fcg-losseklikkers__wizard .fcg-wizard__linetext strong {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.fcg-losseklikkers__wizard .fcg-wizard__linetext .fcg-losseklikkers__block {
	flex: none;
	width: 2rem;
	height: 2rem;
	font-size: 0.9rem;
}

/* Stap 2: het gekozen kleurdoel ("Allemaal" of één klikker) markeren. */
.fcg-losseklikkers__dots {
	align-items: end;
}

.fcg-losseklikkers__dots .fcg-wizard__letter {
	padding: 0.45rem 0.55rem;
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--large);
	background: none;
	cursor: pointer;
}

.fcg-losseklikkers__dots .fcg-wizard__letter.is-selected {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
}