/*
 * Structural/layout CSS only — no CSS-custom-property styling system, no
 * admin styling screen. Every element here carries its own cfs-* class as
 * a stable hook: write plain custom CSS against these classes (e.g. in
 * Appearance > Customize > Additional CSS) and it will win over anything
 * in this file, since that panel's output loads after this stylesheet
 * regardless of selector specificity.
 *
 * The "Want a more precise fit?" Yes/No toggle is deliberately marked up to
 * match Blocksy's own WooCommerce variation-swatch DOM exactly
 * (.ct-variation-swatches > button.ct-swatch-container > .ct-swatch >
 * .ct-swatch-content, selected state via aria-pressed="true") — see
 * class-cfs-field-renderer.php. Its actual appearance (color, shape,
 * spacing, selected state) is meant to come entirely from Blocksy's own
 * theme CSS, which already targets those classes site-wide; nothing here
 * re-declares that look, only the .cfs-choice-buttons flex layout as a
 * harmless fallback in case that CSS doesn't reach this context.
 */

.cfs-fields {
	margin-bottom: 1.5em;
}

.cfs-field {
	margin-bottom: 1em;
}

.cfs-field-label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 500;
}

.cfs-required {
	margin-left: 0.15em;
	color: #d63638;
}

.cfs-choice-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.cfs-choice-button {
	cursor: pointer;
}

.cfs-input-with-unit {
	display: flex;
	align-items: center;
	gap: 0.5em;
	max-width: 220px;
}

.cfs-field-input {
	width: 100%;
	max-width: 220px;
}

.cfs-field-select {
	width: 100%;
	max-width: 220px;
}

.cfs-unit-suffix {
	color: #888;
	white-space: nowrap;
}

.cfs-how-to-measure-link {
	display: inline-block;
	margin-bottom: 1em;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.cfs-field[hidden],
.cfs-measurements-group[hidden] {
	display: none;
}

.cfs-field-invalid .cfs-field-input {
	border-color: #d63638;
}

.cfs-field-invalid .cfs-error {
	display: block !important;
	color: #d63638;
	font-size: 0.85em;
	margin: 0.25em 0 0;
}

/* Shown in the reuse link's place when the cart has nothing to reuse. */

.cfs-hint {
	margin: 0 0 1em;
	font-size: 0.9em;
}

/* Reuse link: collapsed by default so the form layout is unchanged. */

.cfs-reuse {
	width: 100%;
	margin-bottom: 1em;
}

.cfs-reuse-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: 0.9em;
	text-decoration: underline;
	cursor: pointer;
}

/* The close icon only shows while the list is open. */
.cfs-reuse-close-icon,
.cfs-reuse-close-label {
	display: none;
}

.cfs-reuse-toggle[aria-expanded="true"] .cfs-reuse-close-icon {
	display: block;
	flex: none;
}

.cfs-reuse-toggle[aria-expanded="true"] .cfs-reuse-close-label {
	display: inline;
}

/* One source per row, even inside Blocksy's flex add-to-cart wrapper. */
.cfs-reuse-list {
	display: flex;
	flex-direction: column;
	margin-top: 0.5em;
}

.cfs-reuse-list[hidden] {
	display: none;
}

.cfs-reuse-source {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 0.35em 0;
	font-size: 0.9em;
}

.cfs-reuse-use {
	flex: none;
	padding: 0;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	background: none;
	color: inherit;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
}