/* Feestpakket: hergebruikt Klik & Mix' .fcg-klikmix__* bouwstenen (preview,
   block, veld, status) voor hetzelfde uiterlijk. Hier alleen wat specifiek is
   voor dit pakket: de aantal-stepper en de kaart per kind. Prefix fcg-. */

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

/* Bakjes-stap: "+ Pakket toevoegen" / "Zelfde bakje", en × per kaart. */
.fcg-feestpakket__addpakket {
	margin: 0 0 0.5rem;
}

.fcg-feestpakket__bakjekind {
	position: relative;
}

.fcg-feestpakket__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-feestpakket__step:hover {
	background: var(--wp--preset--color--base-2);
}

.fcg-feestpakket__kinderen {
	border: 0;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.75rem;
	min-width: 0;
}

/* Eén kolom, volle breedte: naam bovenaan, daaronder letterkleur, daaronder
   bakjekleur — nooit meer zij-aan-zij met de kleurenrijen (dat zette het
   naamveld eerder onderaan, uitgelijnd op de laatste swatch). */
.fcg-feestpakket__kind {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--large);
	padding: 0.5rem 0.85rem 0.65rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.fcg-feestpakket__kind[hidden] {
	display: none;
}

/* De wizard is de gedeelde Klik & Mix-component (fcg-wizard__*); hier alleen
   wat echt uniek is aan dit pakket: het aantal stappen (2 zonder kinderstap,
   anders 3 — de mobiele breakpoint in klikmix.css blijft ongemoeid), de
   letter-/bakjekleur-rasters die in een kindkaart moeten passen, de knop
   "Zelfde kleuren" en het lege bakje voor een kind zonder naam. */

.fcg-feestpakket .fcg-wizard__steps {
	grid-template-columns: repeat(var(--fcg-steps, 3), 1fr);
}

/* Zelfde mobiele indeling als Klik & Mix (2 kolommen), ongeacht het aantal
   stappen: een eigen regel omdat onze hogere specificiteit anders ook hier
   zou winnen van klikmix.css' eigen mobiele regel. */
@media (max-width: 600px) {
	.fcg-feestpakket .fcg-wizard__steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Naamveld en lettergroep-veld: .fcg-wizard__input(--lg|--compact) uit
   klikmix.css, rechtstreeks op het element in de PHP-markup. */

/* Kleurkeuze: compacte rondjes i.p.v. Klik & Mix' tekst-pillen (.fcg-wizard__swatch)
   — bij 12+ kleuren per kind zou een pil per kleur de kaart torenhoog maken.
   Eén bijschrift boven de rij doet dienst als label én toont de huidige keuze. */
.fcg-feestpakket__dotcaption {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.82rem;
	color: var(--wp--preset--color--contrast-2);
}

.fcg-feestpakket__colorfield .fcg-wizard__dots {
	margin-top: 0.15rem;
	gap: 0.2rem;
}

/* Aanraakdoel 44px met een zichtbaar rondje van 32px erin (de echte
   .fcg-wizard__dot, ongewijzigd) — een eigen span in plaats van de kleur op
   de knop zelf, want een gradient (regenboog/gemengd/eigen) geclipt op een
   gepadde knop toont maar een uitgesneden stukje van het verloop. */
.fcg-feestpakket__dot {
	width: 2.75rem;
	height: 2.75rem;
	display: inline-grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
}

.fcg-feestpakket__dot .fcg-wizard__dot {
	width: 2rem;
	height: 2rem;
	transition: transform var(--wp--custom--transition--fast) ease;
}

.fcg-feestpakket__dot:hover .fcg-wizard__dot {
	transform: scale(1.1);
}

.fcg-feestpakket__dot.is-selected {
	box-shadow: 0 0 0 2px var(--wp--preset--color--base), 0 0 0 4px var(--wp--preset--color--primary);
}

.fcg-feestpakket__samekleuren,
.fcg-feestpakket__samebakje {
	margin: 0 0 0.75rem;
	border: 2px dashed var(--wp--preset--color--border);
}

/* Stap Bakjes: zelfde kaartopbouw als .fcg-feestpakket__kind hierboven, één
   kaart per kind met een maatkeuze en de bakjekleur. */
.fcg-feestpakket__bakjes {
	border: 0;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.75rem;
	min-width: 0;
}

.fcg-feestpakket__bakjekind {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--large);
	padding: 0.5rem 0.85rem 0.65rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.fcg-feestpakket__bakjekind[hidden] {
	display: none;
}

.fcg-feestpakket__maatfield {
	display: grid;
	gap: 0.15rem;
}

/* Maatkaarten: negen compacte .fcg-wizard__card-knoppen met een groot cijfer
   (geen mini-bakje meer: op deze schaal — negen knoppen in een smalle
   kindkaart, drie kindkaarten naast elkaar — was dat bakje onleesbaar klein;
   het cijfer draagt het gewicht). `repeat(auto-fill, minmax(...))` in plaats
   van een vaste kolomtelling: het raster vult zelf zoveel kolommen als er
   passen, op elke breedte, zonder een aparte mobiele regel nodig te hebben —
   bij weinig ruimte (mobiel, of een smalle kindkaart naast twee andere) komen
   er vanzelf minder kolommen en een extra rij, in plaats van dat knop 5 of 9
   over de rand van de kaart valt. Dubbele klasse (`.fcg-feestpakket
   .fcg-feestpakket__maatgrid`) wint altijd van klikmix.css' eigen
   `.fcg-wizard__cards`-regels (ook zijn mobiele), ongeacht de laadvolgorde
   van de stylesheets. */
.fcg-feestpakket .fcg-feestpakket__maatgrid {
	grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
	gap: 0.35rem;
	margin-bottom: 0;
}

.fcg-feestpakket .fcg-feestpakket__maatgrid .fcg-feestpakket__maatcard {
	padding: 0.4rem 0.15rem;
	gap: 0.1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Het cijfer draagt nu het hele gewicht van de knop (geen "vakjes" meer
   erbinnen), dus mag groter dan voorheen. */
.fcg-feestpakket__maatnum {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
}

/* Vakjes-aantal en prijs onder het hele raster, links uitgelijnd. */
.fcg-feestpakket__maatinfo {
	margin: 0.15rem 0 0;
	font-size: 0.78rem;
	text-align: left;
	color: var(--wp--preset--color--contrast-2);
}

/* Inhoud-stap: de vier combineerbare onderdelen als pilknoppen (huisstijl:
   fc-btn is al een pil), boven de kaart met wat er al is toegevoegd. */
.fcg-feestpakket__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.15rem 0 0.15rem;
}

/* Naam is, net als Alfabet/Cijfers/Iconen, een toevoegbaar onderdeel: begint
   dicht, met een eigen ×-knop zodra hij open staat. */
.fcg-feestpakket__component {
	position: relative;
	display: grid;
	gap: 0.35rem;
	padding-right: 2rem;
}

.fcg-feestpakket__component[hidden] {
	display: none;
}

.fcg-feestpakket__component .fcg-feestpakket__groupremove {
	top: 0;
	right: 0;
}

/* Iconen-onderdeel: icoon + aantal in plaats van het vrije tekstveld, zodra
   de lettergroep precies één extra herhaald bevat (iconRepeatOf() in JS). */
.fcg-feestpakket__iconstepper {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.fcg-feestpakket__iconface {
	display: inline-grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	color: var(--wp--preset--color--primary);
}

.fcg-feestpakket__iconface svg {
	width: 1.2rem;
	height: 1.2rem;
}

.fcg-feestpakket__iconcount {
	min-width: 1.8rem;
	text-align: center;
	font-weight: 700;
}

/* Het Iconen-paneel: één rij per geconfigureerde extra (hart, ster), met een
   stepper en een eigen "Toevoegen" — zelfde plek/look als fcg-feestpakket__alfapanel. */
.fcg-feestpakket__iconpanel {
	flex-basis: 100%;
	display: grid;
	gap: 0.5rem;
	padding: 0.5rem;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--custom--surface--warm);
}

.fcg-feestpakket__iconrow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.fcg-feestpakket__iconrow .fcg-feestpakket__iconadd {
	margin-left: auto;
}

/* Overige letters: een lijst lettergroepen per kind, elk met een eigen tekst
   en kleur. Zelfde kaartlook als de rest van de kindkaart, compacter. */
.fcg-feestpakket__overig {
	display: grid;
	gap: 0.5rem;
	margin-top: 0.25rem;
	padding-top: 0.4rem;
	border-top: 1px dashed var(--wp--preset--color--border);
}

/* Standaardmodus ("Naam + extra letters"): compact invoerveld + eigen
   kleurstippen, zelfde kaartscheiding als .fcg-feestpakket__overig hierboven. */
.fcg-feestpakket__extra {
	display: grid;
	gap: 0.35rem;
	margin-top: 0.25rem;
	padding-top: 0.4rem;
	border-top: 1px dashed var(--wp--preset--color--border);
}

.fcg-feestpakket__group {
	position: relative;
	display: grid;
	gap: 0.3rem;
	padding: 0.4rem 2rem 0.4rem 0.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
}

.fcg-feestpakket__group[hidden] {
	display: none;
}

.fcg-feestpakket__groupremove {
	position: absolute;
	top: 0.2rem;
	right: 0.2rem;
	width: 1.6rem;
	height: 1.6rem;
	line-height: 1;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--base-2);
	color: var(--wp--preset--color--contrast-2);
	cursor: pointer;
}

.fcg-feestpakket__groupremove:hover {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.fcg-feestpakket__overigbtns {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	position: relative;
}

.fcg-feestpakket__overigbtns .fc-btn {
	border: 2px dashed var(--wp--preset--color--border);
}

.fcg-feestpakket__alfapanel {
	flex-basis: 100%;
	padding: 0.5rem;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--custom--surface--warm);
}

/* Preview per kind: het lege bakje, en daaronder — los van het bakje — alle
   letters (naam + elke lettergroep) als losse klikkers in een afbrekende
   rij. min-width:0 zodat een lange rij binnen de (overflow:hidden) stagekaart
   kan breken in plaats van hem breder te duwen. */
.fcg-feestpakket__previtem {
	display: grid;
	justify-items: center;
	gap: 0.4rem;
	min-width: 0;
	max-width: 100%;
}

.fcg-feestpakket__letters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem;
	max-width: 100%;
	min-width: 0;
}

.fcg-feestpakket__letterblock {
	width: 1.7rem;
	height: 1.7rem;
	font-size: 0.9rem;
	border-radius: 0.4rem;
	animation: none;
}

/* Overzicht: pakket- en bakjesregel boven het totaal, zelfde stijl als de
   kindregels erboven. */
.fcg-feestpakket__totals {
	display: grid;
	gap: 0.15rem;
	margin: 0.5rem 0 0;
}

.fcg-feestpakket__subtotal {
	margin: 0;
	font-size: 0.92rem;
	color: var(--wp--preset--color--contrast-2);
}

/* "+ N letters" onder een pakket waarvan de preview is afgekapt op 3 rijen
   klikkers (capLetterRows() in feestpakket.js). */
.fcg-feestpakket__more {
	margin: 0;
	font-size: 0.72rem;
	color: var(--wp--preset--color--contrast-2);
}

/* Opruimen: de wizard toont al een prijs en een aantal-stap, dus Woo's eigen
   variatieprijs en aantalveld in de koopstap zijn een dubbeling. Het aantal
   is hier `.fc-qty` (dit theme's eigen aantalkiezer uit
   woocommerce/global/quantity-input.php), niet Woo's standaard `.quantity`.
   De koopknop zelf (in dezelfde .fc-qtyrow) blijft gewoon staan. Klasse i.p.v.
   een `~`-sibling-selector: feestpakket.js verhuist .single_variation_wrap
   naar de navrow van het overzicht, dus de sibling-relatie met .fcg--feestpakket
   bestaat daarna niet meer (zelfde patroon als .fcg-klikmix__buyrow). */
.fcg-feestpakket__buyrow .woocommerce-variation-price,
.fcg-feestpakket__buyrow .fc-qty {
	display: none;
}

/* Hele alfabet CTA: groep voor primaire knop + helptext. */
.fcg-feestpakket__alfabetcta {
	margin-top: 0.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

/* Primaire alfabetknop, mobiel full-width. */
.fcg-feestpakket__alfabetbtn {
	align-self: flex-start;
}

@media (max-width: 480px) {
	.fcg-feestpakket__alfabetbtn {
		width: 100%;
		align-self: stretch;
	}
}