.cnteres-vaza-configurator {
	margin-bottom: 1.5em;
}

.cnteres-vaza-configurator .cnteres-field {
	margin-bottom: 1em;
}

/* Sits above the "Color" and "Recommended color combinations" boxes, outside
   both of them - an umbrella heading for the pair, since picking one vs. the
   other is really one choice (they're mutually exclusive - see the JS). */
.cnteres-vaza-configurator .cnteres-config-group-title {
	font-size: 1em;
	font-weight: 700;
	margin: 0 0 0.75em;
}

/* Each of the 3 top-level sections (Color / Recommended color combinations /
   the Pot-or-Vase type-size-color group) gets its own bordered box, so the
   customer sees them as 3 distinct steps rather than one long list of fields. */
.cnteres-vaza-configurator .cnteres-config-box {
	background: #fafafa;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 1.25em;
}

.cnteres-vaza-configurator .cnteres-config-box .cnteres-field:last-child {
	margin-bottom: 0;
}

/* "Color" and "Recommended color combinations" are mutually exclusive (see the
   frontend JS) - whichever one isn't the active choice fades out, so it's
   visually clear only one of the two applies at a time. Still clickable (not
   pointer-events:none) since picking something in it is exactly how the
   customer switches back to it. */
.cnteres-vaza-configurator .cnteres-config-box--faded {
	opacity: 0.4;
}

/* Overrides the theme's (often much larger) default h3 size - this is a field
   group heading inside the form, not a page-level heading. */
.cnteres-vaza-configurator .cnteres-config-box-title {
	font-size: 1em;
	font-weight: 600;
	margin: 0 0 0.75em;
}

.cnteres-vaza-configurator .cnteres-field-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35em;
}

.cnteres-vaza-configurator .cnteres-selected-names {
	font-weight: 400;
	color: #555;
}

.cnteres-vaza-configurator select {
	max-width: 320px;
	width: 100%;
}

.cnteres-vaza-configurator .cnteres-szinek {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* The standalone "Color" swatches (hex-based spans, not the pot color photos)
   get their own grid so exactly 6 fit per row regardless of container width. */
.cnteres-vaza-configurator #cnteres-altalanos-szinek {
	display: grid;
	grid-template-columns: repeat(6, 50px);
	gap: 12px;
}

.cnteres-color-dot {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.cnteres-color-dot input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

/* !important is needed here because the theme's own WooCommerce image styles
   (e.g. product gallery/thumbnail rules) otherwise override the rounding with
   equal or higher CSS specificity, turning the dots back into squares.
   box-sizing: border-box keeps the border INSIDE the 40x40 box instead of adding
   to it - without it the circle actually renders at 44x44, which can visually
   overlap the next dot and look like a color wedge is "leaking" past its edge. */
.cnteres-color-dot img {
	box-sizing: border-box !important;
	display: block !important;
	width: 50px !important;
	height: 50px !important;
	border-radius: 50% !important;
	object-fit: cover !important;
	border: 2px solid transparent !important;
}

.cnteres-color-dot input:checked + img {
	border-color: #000 !important;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}

/* A white photo swatch otherwise has no visible edge against a white page
   background - give it a faint gray outline so it doesn't disappear. The
   ":checked" rule above is more specific (input:checked+img beats .dot--white
   img), so a selected white swatch still gets the black/white ring, not this. */
.cnteres-color-dot--white img {
	border-color: #ccc !important;
}

/* Houses a picker next to its large preview - reused both for the vase-type
   photo dot-grid (small-arrangement "vase" subtype - see
   #cnteres-small-tipus-large-preview) and the color-combination <select> below
   (#cnteres-szin-kombinacio-preview). */
.cnteres-vaza-configurator .cnteres-color-picker-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
}

.cnteres-color-large-preview {
	width: 240px;
	height: 240px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid #ddd;
}

/* Large preview of the currently-picked combination's name + hues (built in
   buildCombinationSelect(), frontend JS) - same idea as .cnteres-color-large-preview
   above, just rendered from a label/hex codes instead of an uploaded image. */
.cnteres-combination-preview {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border-radius: 10px;
	border: 1px solid #ddd;
	background: #fafafa;
	max-width: 320px;
}

.cnteres-combination-preview-name {
	font-weight: 600;
	font-size: 0.85em;
}

/* Fixed at 2 columns (not flex-wrap, which would only wrap once it ran out of
   container width) so a 3+ hue combination always breaks after every 2nd circle
   regardless of how wide the preview panel happens to be. */
.cnteres-combination-preview-hues {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 10px;
}

.cnteres-combination-preview-hue {
	box-sizing: border-box;
	display: block;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 1px solid rgba(0, 0, 0, 0.08);
}

.cnteres-color-dot .cnteres-color-swatch {
	box-sizing: border-box;
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;

}

.cnteres-color-dot input:checked + .cnteres-color-swatch {
	border-color: #000;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}

/* Uploaded image (e.g. SVG icon) swatch - takes over from .cnteres-color-swatch
   above when the admin set one for that color (see buildGeneralColorDots() in the
   frontend JS). Sized the same, border reserved upfront (unlike the hex swatch)
   so picking a color doesn't shift its size when the border-color appears. */
.cnteres-color-dot .cnteres-color-image-swatch {
	box-sizing: border-box;
	display: block;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid transparent;
}

.cnteres-color-dot input:checked + .cnteres-color-image-swatch {
	border-color: #000;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}