/**
 * Woodfold Product Configurator — Frontend Styles
 * Wave 1 (Phase 5 / 05-01): two-column grid + sticky sidebar + mobile breakpoint.
 * Greenfield rewrite ported from accordiondoor.com inline configurator-module styles.
 * Wave 2/3 add field-level styles for dimensions, finish swatches, stack diagrams, etc.
 */

/* ==========================================================================
   Layout — two-column grid
   ========================================================================== */

.woodfold-configurator-container {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 30px;
	margin: 24px 0;
	font-family: inherit;
	color: #333;
	box-sizing: border-box;
}

.woodfold-configurator-container *,
.woodfold-configurator-container *::before,
.woodfold-configurator-container *::after {
	box-sizing: border-box;
}

/* Gap G20 (Path C, defensive) — wpautop or builder filters can inject empty
   <p></p> as the first child of the grid container, claiming the 2fr track
   and pushing main into the 1fr column. Path B in inject_into_content strips
   these server-side; this rule kills any future regression layout impact.
   Also strip stray <br /> wpautop injects between block-level children. */
.woodfold-configurator-container > p:empty {
	display: none;
}
/* Our template emits zero <br /> tags; any <br> inside the configurator is a
   builder/wpautop artifact. Hide them all so they don't push fields onto
   visual line-breaks. Path B in inject_into_content also strips them server-side. */
.woodfold-configurator-container br {
	display: none;
}

/* Gap G20 (host-theme override) — when the configurator is rendered inside a
   Bricks block originally designed for a Gravity Forms quote request (class
   .product-add-to-cart), the host theme applies `input { background:transparent;
   border:1px solid #fff }` and `input[type=radio] { display:none }`, which made
   our number inputs invisible and our finish/stack swatches non-clickable.
   Re-establish visible, focusable, theme-agnostic input styling scoped to the
   configurator only. Specificity is higher than `.product-add-to-cart input`
   because we add the input type and the configurator container ancestor. */
.woodfold-configurator-container input[type="number"],
.woodfold-configurator-container input[type="text"] {
	background: #fff;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	color: #222;
	padding: 8px 12px;
	font-size: 1em;
	line-height: 1.4;
	width: 100%;
	max-width: 200px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.woodfold-configurator-container input[type="number"]:focus,
.woodfold-configurator-container input[type="text"]:focus {
	outline: 2px solid #FF6B35;
	outline-offset: 1px;
	border-color: #FF6B35;
}

/* Phase 5.1 — defensive <select> host-theme override (Risk R1 mitigation).
   Bricks .product-add-to-cart block targets `input` and `input[type=radio]`; <select>
   is unprotected. Pre-emptively give it the same theme-agnostic styling as the input
   rule so the Track Color and Hardware Color dropdowns render visibly even if the
   host theme applies hostile element-type styles via brxe-text wrapper rules. */
.woodfold-configurator-container select {
	background: #fff;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	color: #222;
	padding: 8px 12px;
	font-size: 1em;
	line-height: 1.4;
	width: 100%;
	max-width: 240px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.woodfold-configurator-container select:focus {
	outline: 2px solid #FF6B35;
	outline-offset: 1px;
	border-color: #FF6B35;
}

/* Phase 5.1 — finishing-configuration mode toggle styling (radio pair sits inline). */
.woodfold-finishing-mode {
	display: flex;
	gap: 18px;
	margin: 8px 0 14px;
	flex-wrap: wrap;
}
.woodfold-finishing-mode-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	padding: 8px 12px;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	background: #fff;
}
.woodfold-finishing-mode-option input[type="radio"] {
	/* Override the radio-hide rule below specifically for the mode toggle, where
	   the visible radio dot is the affordance (no swatch image, no label tile). */
	position: static !important;
	opacity: 1 !important;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	pointer-events: auto !important;
}
.woodfold-finishing-mode-option:has(input:checked) {
	border-color: #FF6B35;
	background: #fff8f5;
}
.woodfold-finishing-subfields {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #eee;
}
.woodfold-finishing-subfields[hidden] {
	display: none;
}

/* Radio inputs: theme has `input[type=radio] { display:none }` site-wide.
   Our markup is `<label><input type=radio>...</label>` (input contained, not
   sibling), so theme styling that uses `:checked + label` doesn't apply. We
   keep the radio visually hidden but make it clip-path-positioned and tab-
   focusable so keyboard navigation still works, and clicks on the surrounding
   label still toggle the radio. The label provides the visible affordance. */
.woodfold-configurator-container input[type="radio"] {
	display: inline-block; /* override theme's display:none */
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	clip: rect(1px, 1px, 1px, 1px);
	pointer-events: none;
}
/* Visible, clickable label affordance for finish swatches, stack tiles, and
   option radios. Provides hover/checked state visual feedback. */
.woodfold-configurator-container .woodfold-finish-swatch,
.woodfold-configurator-container .woodfold-stack-option,
.woodfold-configurator-container .woodfold-option-radio,
.woodfold-configurator-container .woodfold-jamb-radio {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	border: 2px solid #e0e0e0;
	border-radius: 6px;
	padding: 8px;
	margin: 4px;
	background: #fff;
	transition: border-color 120ms ease-in-out, background 120ms ease-in-out;
	min-width: 88px;
}
.woodfold-configurator-container .woodfold-finish-swatch:hover,
.woodfold-configurator-container .woodfold-stack-option:hover,
.woodfold-configurator-container .woodfold-option-radio:hover,
.woodfold-configurator-container .woodfold-jamb-radio:hover {
	border-color: #FF6B35;
	background: #fff8f5;
}
.woodfold-configurator-container .woodfold-finish-swatch:has(input:checked),
.woodfold-configurator-container .woodfold-stack-option:has(input:checked),
.woodfold-configurator-container .woodfold-option-radio:has(input:checked),
.woodfold-configurator-container .woodfold-jamb-radio:has(input:checked) {
	border-color: #FF6B35;
	background: #fff3ec;
	box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.25);
}
.woodfold-configurator-container .woodfold-finish-swatch:has(input:focus),
.woodfold-configurator-container .woodfold-stack-option:has(input:focus),
.woodfold-configurator-container .woodfold-option-radio:has(input:focus),
.woodfold-configurator-container .woodfold-jamb-radio:has(input:focus) {
	outline: 2px solid #FF6B35;
	outline-offset: 2px;
}

.woodfold-configurator-main {
	min-width: 0; /* allow flex/grid children to shrink below content size */
}

.woodfold-configurator-title {
	font-size: 1.4em;
	margin: 0 0 16px;
	color: #2c3e50;
}

/* ==========================================================================
   Sticky pricing sidebar (FRONT-13)
   --woodfold-sticky-offset: distance from viewport top, themes can override
   to clear their site headers without modifying plugin CSS (Pitfall 6).
   ========================================================================== */

.woodfold-configurator-sidebar {
	position: sticky;
	top: var(--woodfold-sticky-offset, 100px);
	align-self: start;
}

/* ==========================================================================
   Sections — orange-accent palette ported from reference
   ========================================================================== */

.woodfold-section {
	background: #f8f9fa;
	padding: 20px;
	margin-bottom: 16px;
	border-radius: 6px;
	border: 1px solid #dee2e6;
}

.woodfold-section-title {
	font-size: 1.1em;
	font-weight: 600;
	margin: 0 0 12px;
	color: #2c3e50;
}

/* ==========================================================================
   Pricing card
   ========================================================================== */

.woodfold-pricing-card {
	background: #fff;
	border: 2px solid #FF6B35;
	border-radius: 8px;
	padding: 24px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.woodfold-pricing-card-title {
	margin: 0 0 12px;
	font-size: 1.1em;
	color: #2c3e50;
}

.woodfold-pricing-breakdown {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}

.woodfold-pricing-breakdown li {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px solid #f3f3f3;
	font-size: 0.95em;
}

.woodfold-pricing-breakdown li:last-child {
	border-bottom: none;
}

.woodfold-pricing-breakdown .label {
	color: #555;
}

.woodfold-pricing-breakdown .value {
	font-weight: 600;
	color: #2c3e50;
}

.woodfold-pricing-card .woodfold-pricing-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-top: 2px solid #FF6B35;
	margin-top: 8px;
	font-size: 1.5em;
	font-weight: bold;
	color: #FF6B35;
}

.woodfold-pricing-card #woodfold-add-to-cart {
	width: 100%;
	margin-top: 16px;
	padding: 12px 20px;
	font-size: 1em;
	font-weight: 600;
}

.woodfold-pricing-card #woodfold-add-to-cart[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ==========================================================================
   Field error state
   ========================================================================== */

.woodfold-field-error {
	color: #c0392b;
	font-size: 0.9em;
	margin-top: 4px;
}

.woodfold-input--invalid {
	border-color: #c0392b;
}

/* Gap G14 — fallback error banner. REQUIRED — banner must be visible by default
   (red border + red text + padding). Inline JS-injected element addressed by id. */
.woodfold-error-banner {
	background: #fee;
	border: 1px solid #c33;
	color: #900;
	padding: 12px 16px;
	margin: 0 0 16px 0;
	border-radius: 4px;
}
.woodfold-error-banner ul {
	margin: 4px 0 0 16px;
	padding: 0;
}
.woodfold-error-banner li {
	margin-bottom: 2px;
}

/* ==========================================================================
   Mobile breakpoint (FRONT-13) — single column, pricing card on top.
   No JS resize handler; layout is purely CSS-driven.
   ========================================================================== */

@media (max-width: 968px) {
	.woodfold-configurator-container {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.woodfold-configurator-sidebar {
		position: static;
		order: -1;
	}

	.woodfold-pricing-card {
		padding: 16px;
	}
}

/* Finish grid: 3-column layout for finish swatches (FRONT-04). */
.woodfold-finish-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.woodfold-finish-grid .woodfold-finish-swatch {
	margin: 0;
	min-width: 0;
	width: 100%;
}
.woodfold-finish-grid .woodfold-finish-img {
	width: 100%;
	height: auto;
	max-width: 150px;
	border-radius: 4px;
}

/* Finish price under the label */
.woodfold-finish-price {
	font-size: 0.85em;
	font-weight: 600;
	color: #FF6B35;
	margin-top: 2px;
}

/* Stack price under the label */
.woodfold-stack-price {
	font-size: 0.85em;
	font-weight: 600;
	color: #FF6B35;
	margin-top: 2px;
}

/* Fix 3 — Option group h4 labels */
.woodfold-option-group h4 {
	font-size: 0.95em;
	font-weight: 600;
	margin: 0 0 6px;
	color: #2c3e50;
}

/* 2026-09-05 — ⓘ Information tooltip toggle, ported from the accordiondoor
   configurator's .dcfg-info-tip pattern (client asked for parity). Field
   heading wraps in a flex row so the tip button sits inline next to the
   label instead of on its own line. */
.woodfold-field-head-row {
	display: flex;
	flex-direction: column;
	align-items: start !important;
	gap: 0 !important;
	flex-wrap: wrap;
	padding-bottom: 10px;
}
.woodfold-info-tip {
	position: relative;
	display: inline-flex;
}
.woodfold-info-tip button {
	background: none;
	border: none;
	color: #FF6B35;
	cursor: pointer;
	padding: 2px 0;
	font-size: 12px;
	text-decoration: underline;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
#woodfold-sliding-jamb-container {
	padding-bottom: 15px;
}
/* "View Illustration" accordion (2026-09-05, ported from accordiondoor-configurator
   for parity) -- shown under any field with an admin-set illustration URL. */
.woodfold-illustration-accordion { margin-top: 10px; }
.woodfold-illustration-toggle {
	width: 100%; padding: 10px 15px; background: #f0f7ff; border: 1px solid #cce5ff;
	border-radius: 6px; cursor: pointer; display: flex; align-items: center;
	justify-content: space-between; font-size: 13px; color: #FF6B35;
	font-weight: 600; transition: all 0.2s;
}
.woodfold-illustration-toggle svg { transition: transform 0.2s; }
.woodfold-illustration-content {
	margin-top: 10px; padding: 15px; background: #fff;
	border: 1px solid #cce5ff; border-radius: 6px; overflow: hidden;
}
.woodfold-illustration-content img { max-width: 100%; display: block; margin: 0 auto; }
.woodfold-info-tip-content {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	margin-top: 6px;
	padding: 12px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	width: 300px;
	font-size: 12px;
	color: #2c3e50;
	line-height: 1.5;
	font-weight: 400;
}

/* Fix 4 — Dimension inputs */
.woodfold-dim-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}
.woodfold-dim-label {
	font-size: 0.9em;
	font-weight: 600;
	color: #2c3e50;
	min-width: 80px;
}
.woodfold-dim-inputs {
	display: flex;
	align-items: center;
	gap: 6px;
}
.woodfold-dim-inputs input[type="number"] {
	padding: 10px 12px;
	font-size: 1.05em;
	border: 2px solid #d0d0d0;
	border-radius: 6px;
	background: #fff;
	transition: border-color 150ms ease, box-shadow 150ms ease;
	width: 100px;
	font-family: "Courier New", Courier, monospace;
	letter-spacing: 0.5px;
	-moz-appearance: textfield;
}
.woodfold-dim-inputs input[type="number"]::-webkit-inner-spin-button,
.woodfold-dim-inputs input[type="number"]::-webkit-outer-spin-button {
	opacity: 1;
}
.woodfold-dim-inputs input[type="number"]:focus {
	border-color: #FF6B35;
	box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
	outline: none;
}
.woodfold-dim-inputs select {
	padding: 10px 8px;
	font-size: 1em;
	border: 2px solid #d0d0d0;
	border-radius: 6px;
	background: #fff;
	transition: border-color 150ms ease, box-shadow 150ms ease;
	color: #2c3e50;
	cursor: pointer;
}
.woodfold-dim-inputs select:focus {
	border-color: #FF6B35;
	box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
	outline: none;
}
.woodfold-dim-range {
	font-size: 0.82em;
	color: #888;
	white-space: nowrap;
	margin-left: 2px;
}
.woodfold-section-help {
	font-size: 0.85em;
	color: #777;
	margin: 0 0 14px;
	line-height: 1.5;
}

/* Fix 5+12 — Finish grid cards with selection */
.woodfold-finish-grid .woodfold-finish-swatch {
	position: relative;
	border-radius: 10px;
	padding: 12px 10px 10px;
	border: 2px solid #e8e8e8;
	background: #fafafa;
	transition: all 180ms ease;
	overflow: hidden;
}
.woodfold-finish-grid .woodfold-finish-swatch:hover {
	border-color: #FF9A6B;
	background: #fff8f5;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 107, 53, 0.12);
}
.woodfold-finish-grid .woodfold-finish-swatch:has(input:checked) {
	border-color: #FF6B35;
	background: #fff3ec;
	box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2), 0 4px 12px rgba(255, 107, 53, 0.15);
	transform: translateY(-2px);
}
.woodfold-finish-grid .woodfold-finish-swatch:has(input:checked)::after {
	content: "\2713";
	position: absolute;
	top: -2px;
	right: -2px;
	width: 24px;
	height: 24px;
	background: #FF6B35;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	z-index: 1;
}
.woodfold-finish-grid .woodfold-finish-img {
	max-width: 140px;
	width: 100%;
	height: auto;
	border-radius: 6px;
	margin-bottom: 4px;
	border: 1px solid #f0f0f0;
}
.woodfold-finish-grid .woodfold-finish-label {
	font-size: 0.9em;
	font-weight: 600;
	color: #333;
	margin-top: 4px;
}

/* Fix 10 — Finish price in brand orange */
.woodfold-finish-price {
	font-size: 0.82em;
	font-weight: 700;
	color: #FF6B35;
	margin-top: 2px;
}

/* Fix 12 — Stack option cards */
.woodfold-stack-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 12px;
}
.woodfold-stack-grid .woodfold-stack-option {
	position: relative;
	border-radius: 10px;
	padding: 12px 10px 10px;
	border: 2px solid #e8e8e8;
	background: #fafafa;
	transition: all 180ms ease;
	margin: 0;
	min-width: 0;
}
.woodfold-stack-grid .woodfold-stack-option:hover {
	border-color: #FF9A6B;
	background: #fff8f5;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 107, 53, 0.12);
}
.woodfold-stack-grid .woodfold-stack-option:has(input:checked) {
	border-color: #FF6B35;
	background: #fff3ec;
	box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2), 0 4px 12px rgba(255, 107, 53, 0.15);
	transform: translateY(-2px);
}
.woodfold-stack-grid .woodfold-stack-option:has(input:checked)::after {
	content: "\2713";
	position: absolute;
	top: -2px;
	right: -2px;
	width: 24px;
	height: 24px;
	background: #FF6B35;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	z-index: 1;
}
.woodfold-stack-img {
	max-width: 100px;
	width: 100%;
	height: auto;
	border-radius: 4px;
}
.woodfold-stack-label {
	font-size: 0.9em;
	font-weight: 600;
	color: #333;
	margin-top: 4px;
}

/* Fix 9 — Loading spinner */
.woodfold-loading-overlay {
	display: none;
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.7);
	border-radius: 6px;
	z-index: 10;
	align-items: center;
	justify-content: center;
}
.woodfold-loading-overlay.woodfold-loading-active {
	display: flex;
}
.woodfold-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #e8e8e8;
	border-top: 3px solid #FF6B35;
	border-radius: 50%;
	animation: woodfold-spin 0.7s linear infinite;
}
@keyframes woodfold-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.woodfold-pricing-loading {
	display: none;
	font-size: 0.82em;
	color: #FF6B35;
	font-weight: 600;
	margin-left: 6px;
	animation: woodfold-pulse 1s ease-in-out infinite;
}
.woodfold-pricing-loading.woodfold-loading-active {
	display: inline;
}
@keyframes woodfold-pulse {
	0%, 100% { opacity: 0.5; }
	50% { opacity: 1; }
}

/* ==========================================================================
   Suppress default WooCommerce add-to-cart form on configurator products.
   The configurator ships its own button; the WC quantity + button are unused.
   ========================================================================== */
.woodfold-configurator-container ~ form.cart,
.woodfold-configurator-container ~ .cart {
	display: none !important;
}
/* Theme-specific: Bricks and other builders may wrap the WC form differently. */
.woodfold-configurator-container + .woocommerce-variation-add-to-cart,
.woodfold-configurator-container + .quantity,
.woodfold-configurator-container + .single_add_to_cart_button {
	display: none !important;
}
/* ==========================================================================
   Jamb section — diagram + select side by side
   ========================================================================== */
.woodfold-section-jamb .woodfold-section-content {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
}

.woodfold-section-jamb .woodfold-jamb-options {
	flex: 0 0 auto;
	min-width: 200px;
}

/* Select dropdown inside jamb */
.woodfold-section-jamb .woodfold-jamb-options select {
	width: 100%;
	margin: 0;
}

/* Jamb diagram image */
.woodfold-jamb-illustration {
	max-width: 240px;
	width: 100%;
	height: auto;
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.06);
	cursor: pointer;
	transition: opacity 150ms ease, box-shadow 150ms ease;
	display: block;
}

.woodfold-jamb-illustration:hover {
	opacity: 0.92;
	box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

/* Zoom icon hint — hides when img is hidden */
.woodfold-jamb-illustration-wrapper {
	position: relative;
	display: inline-block;
}
.woodfold-jamb-illustration-wrapper:empty,
.woodfold-jamb-illustration-wrapper:has(img[hidden]) {
	display: none;
}

.woodfold-jamb-illustration-wrapper::after {
	content: "\26F6";
	position: absolute;
	bottom: 6px;
	right: 6px;
	font-size: 16px;
	color: #fff;
	background: rgba(0,0,0,0.45);
	border-radius: 4px;
	padding: 2px 6px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 150ms ease;
}

.woodfold-jamb-illustration-wrapper:hover::after {
	opacity: 1;
}

/* ==========================================================================
   Lightbox overlay — reusable for all diagrams
   ========================================================================== */
.woodfold-lightbox-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(0, 0, 0, 0.8);
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 40px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.woodfold-lightbox-overlay.woodfold-lightbox-active {
	display: flex;
}

.woodfold-lightbox-img {
	max-width: 90vw;
	max-height: 90vh;
	width: auto;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
	cursor: default;
	object-fit: contain;
}

/* Close hint */
.woodfold-lightbox-overlay::before {
	content: "Click anywhere or press Esc to close";
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255,255,255,0.5);
	font-size: 0.85em;
	font-family: sans-serif;
	pointer-events: none;
}

/* Confirmation checkbox — review gate before Add to Cart */
.woodfold-confirm-label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 16px;
	padding: 12px 14px;
	background: #fff8f0;
	border: 1px solid #FF6B35;
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.95em;
	line-height: 1.4;
	color: #333;
}

.woodfold-confirm-label input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 2px;
	width: 18px;
	height: 18px;
	accent-color: #FF6B35;
	cursor: pointer;
}

/* Floor clearance notice in summary section */
.woodfold-clearance-notice {
	margin: 14px 0 0;
	padding: 10px 12px;
	background: #f0f4ff;
	border-left: 3px solid #6b8cff;
	border-radius: 0 4px 4px 0;
	font-size: 0.88em;
	color: #444;
	line-height: 1.5;
}

/* Dimension notice cards — shared base */
.woodfold-dim-notice {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-top: 10px;
	border-radius: 5px;
	line-height: 1.45;
}

.woodfold-dim-notice svg {
	flex-shrink: 0;
	margin-top: 1px;
}

/* Rounding card — soft blue, multi-line, appears when a fraction is selected */
.woodfold-dim-notice--rounding {
	flex-direction: column;
	gap: 5px;
	padding: 11px 14px;
	font-size: 0.88em;
	color: #1a3a6b;
	background: #eef4ff;
	border: 1px solid #b8d0f9;
	border-left: 4px solid #4a80e8;
}

.woodfold-dim-notice--rounding svg {
	color: #4a80e8;
}

.woodfold-dim-notice__head {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 1em;
	color: #1a3a6b;
}

.woodfold-dim-notice__body {
	margin: 0;
	font-size: 0.97em;
}

.woodfold-dim-notice__sub {
	margin: 0;
	font-size: 0.88em;
	color: #3a5a9a;
	opacity: 0.9;
}

/* Track length soft warning — amber, appears when ordered track < opening width */
.woodfold-track-warning {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin-top: 14px;
	padding: 12px 14px;
	background: #fffbeb;
	border: 1px solid #ffe082;
	border-left: 4px solid #f59e0b;
	border-radius: 5px;
	color: #78350f;
	font-size: 0.88em;
	line-height: 1.5;
}
.woodfold-track-warning svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: #d97706;
}
.woodfold-track-warning strong {
	display: block;
	font-size: 0.95em;
	margin-bottom: 3px;
}
.woodfold-track-warning p {
	margin: 0;
}

/* Data-driven helper note under priced selects (Type B post guidance) */
.woodfold-field-note {
	margin: 8px 0 0;
	font-size: 0.85em;
	font-style: italic;
	color: #8a6d3b;
}