/* Shared checkbox component. Native inputs remain the interactive controls.
 * Existing WooCommerce, catalog, account and product labels are adapters to
 * this component; the check lives inside the input instead of a floating SVG.
 * Defaults also work inside the embedded contact form, without site tokens. */
body:not(.wp-admin) {
	--gt-checkbox-size: var(--space-5, 20px);
	--gt-checkbox-gap: var(--space-3, 12px);
	--gt-checkbox-color: var(--accent-alt, #f7841c);
	--gt-checkbox-border: var(--color-bluegray-400, #94a3b8);
}

body:not(.wp-admin) input[type="checkbox"] {
	appearance: none !important;
	box-sizing: border-box;
	position: static !important;
	flex: 0 0 var(--gt-checkbox-size, 20px) !important;
	width: var(--gt-checkbox-size, 20px) !important;
	min-width: var(--gt-checkbox-size, 20px) !important;
	height: var(--gt-checkbox-size, 20px) !important;
	min-height: var(--gt-checkbox-size, 20px) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--gt-checkbox-border, #94a3b8) !important;
	border-radius: var(--radius-1, 4px) !important;
	background: var(--color-white, #fff) !important;
	transform: none !important;
	vertical-align: middle;
	cursor: pointer;
	transition: border-color var(--duration-fast, 160ms) var(--ease-standard, ease), box-shadow var(--duration-fast, 160ms) var(--ease-standard, ease);
}

body:not(.wp-admin) input[type="checkbox"]:checked {
	border-color: var(--gt-checkbox-color, #f7841c) !important;
	background: var(--gt-checkbox-color, #f7841c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 10 3.5 3.5L15 7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
}

body:not(.wp-admin) input[type="checkbox"]:indeterminate {
	border-color: var(--gt-checkbox-color, #f7841c) !important;
	background: var(--gt-checkbox-color, #f7841c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat !important;
}

body:not(.wp-admin) input[type="checkbox"]:hover:not(:disabled) {
	border-color: var(--gt-checkbox-color, #f7841c) !important;
}

body:not(.wp-admin) input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--accent-4, #012e46) !important;
	outline-offset: 3px;
	box-shadow: none !important;
}

body:not(.wp-admin) input[type="checkbox"][aria-invalid="true"] {
	border-color: var(--danger, #b42318) !important;
}

body:not(.wp-admin) input[type="checkbox"]:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* Two columns keep wrapping text and validation clear of the control. */
body:not(.wp-admin) label:has(> input[type="checkbox"]) {
	display: inline-grid !important;
	grid-template-columns: var(--gt-checkbox-size, 20px) minmax(0, 1fr);
	align-items: center;
	gap: var(--gt-checkbox-gap, 12px);
	max-width: 100%;
	cursor: pointer;
}

body:not(.wp-admin) label:has(> input[type="checkbox"]) > input {
	grid-column: 1;
	grid-row: 1;
}

body:not(.wp-admin) label:has(> input[type="checkbox"]) > .wc-block-components-validation-error {
	grid-column: 1 / -1;
}

body:not(.wp-admin) .wc-block-components-checkbox__mark {
	display: none !important;
}

body:not(.wp-admin) .wc-block-components-checkbox__label {
	min-width: 0;
	color: var(--text-primary, #012e46);
	font-family: var(--font-body, Montserrat, Arial, sans-serif);
	font-size: var(--text-sm, 14px);
	font-weight: var(--font-regular, 400);
	line-height: var(--leading-body, 1.5);
}

.shop-filter-group, .filters-panel {
	--gt-checkbox-size: var(--space-4, 16px);
	--gt-checkbox-gap: var(--space-2, 8px);
}

@media (prefers-reduced-motion: reduce) {
	body:not(.wp-admin) input[type="checkbox"] { transition: none; }
}

@media (forced-colors: active) {
	body:not(.wp-admin) input[type="checkbox"],
	body:not(.wp-admin) input[type="checkbox"]:checked,
	body:not(.wp-admin) input[type="checkbox"]:indeterminate {
		appearance: auto !important;
		background: revert !important;
		border-color: ButtonText !important;
	}
}