:root {
	--ava-brand-teal: #008B98;
	--ava-form-bronze: #8C7853;
	--ava-form-bronze-light: #A89874;
	--ava-form-bg: #0a0a0a;
	--ava-form-surface: #111111;
	--ava-form-surface-raised: #161616;
	--ava-form-text: #f5f5f5;
	--ava-form-text-muted: #a8a8a8;
	--ava-form-border: #2a2a2a;
	--ava-form-border-focus: #8C7853;
	--ava-form-error: #ff6b6b;
	--ava-form-radius: 4px;
}

/**
 * AVA-branded checkbox styling for frontend platform forms.
 *
 * Scope covers Frontend Admin / Frontend Admin Pro, legacy ACF Frontend
 * wrappers, plain ACF forms, and an opt-in .ava-form wrapper.
 */

/* Checkbox input itself */
.ava-form input[type="checkbox"],
.frontend-form input[type="checkbox"],
.acff-form input[type="checkbox"],
.acfef-form input[type="checkbox"],
.acf-form input[type="checkbox"],
.acf-field-checkbox input[type="checkbox"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	flex-shrink: 0 !important;
	background: var(--ava-form-surface-raised) !important;
	border: 1px solid var(--ava-form-border) !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
	position: relative !important;
	box-shadow: none !important;
}

.ava-form input[type="checkbox"]:checked,
.frontend-form input[type="checkbox"]:checked,
.acff-form input[type="checkbox"]:checked,
.acfef-form input[type="checkbox"]:checked,
.acf-form input[type="checkbox"]:checked,
.acf-field-checkbox input[type="checkbox"]:checked {
	background: var(--ava-form-bronze) !important;
	border-color: var(--ava-form-bronze) !important;
}

.ava-form input[type="checkbox"]:checked::after,
.frontend-form input[type="checkbox"]:checked::after,
.acff-form input[type="checkbox"]:checked::after,
.acfef-form input[type="checkbox"]:checked::after,
.acf-form input[type="checkbox"]:checked::after,
.acf-field-checkbox input[type="checkbox"]:checked::after {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 5px !important;
	height: 9px !important;
	border: solid #fff !important;
	border-width: 0 2px 2px 0 !important;
	transform: translate(-50%, -65%) rotate(45deg) !important;
}

.ava-form input[type="checkbox"]:focus-visible,
.frontend-form input[type="checkbox"]:focus-visible,
.acff-form input[type="checkbox"]:focus-visible,
.acfef-form input[type="checkbox"]:focus-visible,
.acf-form input[type="checkbox"]:focus-visible,
.acf-field-checkbox input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ava-form-border-focus) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 1px var(--ava-form-bg) !important;
}

.ava-form input[type="checkbox"]:disabled,
.frontend-form input[type="checkbox"]:disabled,
.acff-form input[type="checkbox"]:disabled,
.acfef-form input[type="checkbox"]:disabled,
.acf-form input[type="checkbox"]:disabled,
.acf-field-checkbox input[type="checkbox"]:disabled {
	opacity: 0.4 !important;
	cursor: not-allowed !important;
}

/* Checkbox-list container: remove list defaults and lay out as a flex row. */
.ava-form .acf-checkbox-list,
.frontend-form .acf-checkbox-list,
.acff-form .acf-checkbox-list,
.acfef-form .acf-checkbox-list,
.acf-form .acf-checkbox-list,
.acf-field-checkbox .acf-checkbox-list,
.ava-form .ava-form-checkbox-list,
.ava-form .acf-checkbox-list.acf-hl,
.frontend-form .acf-checkbox-list.acf-hl,
.acff-form .acf-checkbox-list.acf-hl,
.acfef-form .acf-checkbox-list.acf-hl,
.acf-form .acf-checkbox-list.acf-hl,
.acf-field-checkbox .acf-checkbox-list.acf-hl,
.ava-form .acf-checkbox-list.acf-bl,
.frontend-form .acf-checkbox-list.acf-bl,
.acff-form .acf-checkbox-list.acf-bl,
.acfef-form .acf-checkbox-list.acf-bl,
.acf-form .acf-checkbox-list.acf-bl,
.acf-field-checkbox .acf-checkbox-list.acf-bl {
	list-style: none !important;
	padding: 0 !important;
	padding-left: 0 !important;
	margin: 0 !important;
	margin-left: 0 !important;
	text-align: left !important;
	text-indent: 0 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px 18px !important;
	box-sizing: border-box !important;
}

.ava-form .acf-checkbox-list > li,
.frontend-form .acf-checkbox-list > li,
.acff-form .acf-checkbox-list > li,
.acfef-form .acf-checkbox-list > li,
.acf-form .acf-checkbox-list > li,
.acf-field-checkbox .acf-checkbox-list > li,
.ava-form .ava-form-checkbox-list > li,
.ava-form .acf-checkbox-list.acf-hl > li,
.frontend-form .acf-checkbox-list.acf-hl > li,
.acff-form .acf-checkbox-list.acf-hl > li,
.acfef-form .acf-checkbox-list.acf-hl > li,
.acf-form .acf-checkbox-list.acf-hl > li,
.acf-field-checkbox .acf-checkbox-list.acf-hl > li,
.ava-form .acf-checkbox-list.acf-bl > li,
.frontend-form .acf-checkbox-list.acf-bl > li,
.acff-form .acf-checkbox-list.acf-bl > li,
.acfef-form .acf-checkbox-list.acf-bl > li,
.acf-form .acf-checkbox-list.acf-bl > li,
.acf-field-checkbox .acf-checkbox-list.acf-bl > li,
.ava-form .acf-checkbox-list > li:first-child,
.frontend-form .acf-checkbox-list > li:first-child,
.acff-form .acf-checkbox-list > li:first-child,
.acfef-form .acf-checkbox-list > li:first-child,
.acf-form .acf-checkbox-list > li:first-child,
.acf-field-checkbox .acf-checkbox-list > li:first-child {
	display: flex !important;
	align-items: center !important;
	margin: 0 !important;
	margin-left: 0 !important;
	padding: 0 !important;
	padding-left: 0 !important;
	list-style: none !important;
	text-align: left !important;
	text-indent: 0 !important;
	box-sizing: border-box !important;
}

/* Each option as a clickable pill label. */
.ava-form .acf-checkbox-list > li > label,
.frontend-form .acf-checkbox-list > li > label,
.acff-form .acf-checkbox-list > li > label,
.acfef-form .acf-checkbox-list > li > label,
.acf-form .acf-checkbox-list > li > label,
.acf-field-checkbox .acf-checkbox-list > li > label,
.ava-form .ava-form-checkbox-list > li > label,
.ava-form .acf-checkbox-list label,
.frontend-form .acf-checkbox-list label,
.acff-form .acf-checkbox-list label,
.acfef-form .acf-checkbox-list label,
.acf-form .acf-checkbox-list label,
.acf-field-checkbox .acf-checkbox-list label {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 11px 16px !important;
	background: var(--ava-form-surface) !important;
	border: 1px solid var(--ava-form-border) !important;
	border-radius: var(--ava-form-radius) !important;
	font-size: 0.9rem !important;
	color: var(--ava-form-text-muted) !important;
	cursor: pointer !important;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease !important;
	user-select: none !important;
	line-height: 1 !important;
	min-height: 44px !important;
	margin: 0 !important;
	vertical-align: middle !important;
}

.ava-form .acf-checkbox-list > li > label:hover,
.frontend-form .acf-checkbox-list > li > label:hover,
.acff-form .acf-checkbox-list > li > label:hover,
.acfef-form .acf-checkbox-list > li > label:hover,
.acf-form .acf-checkbox-list > li > label:hover,
.acf-field-checkbox .acf-checkbox-list > li > label:hover,
.ava-form .ava-form-checkbox-list > li > label:hover,
.ava-form .acf-checkbox-list label:hover,
.frontend-form .acf-checkbox-list label:hover,
.acff-form .acf-checkbox-list label:hover,
.acfef-form .acf-checkbox-list label:hover,
.acf-form .acf-checkbox-list label:hover,
.acf-field-checkbox .acf-checkbox-list label:hover {
	border-color: var(--ava-form-bronze) !important;
	color: var(--ava-form-text) !important;
}

/* Checked pill state: use :has() where supported, fall back to ACF's .selected class. */
.ava-form .acf-checkbox-list > li > label:has(input:checked),
.frontend-form .acf-checkbox-list > li > label:has(input:checked),
.acff-form .acf-checkbox-list > li > label:has(input:checked),
.acfef-form .acf-checkbox-list > li > label:has(input:checked),
.acf-form .acf-checkbox-list > li > label:has(input:checked),
.acf-field-checkbox .acf-checkbox-list > li > label:has(input:checked),
.ava-form .ava-form-checkbox-list > li > label:has(input:checked),
.ava-form .acf-checkbox-list > li:first-child > label:has(input:checked),
.frontend-form .acf-checkbox-list > li:first-child > label:has(input:checked),
.ava-form .acf-checkbox-list > li.selected > label,
.frontend-form .acf-checkbox-list > li.selected > label,
.acff-form .acf-checkbox-list > li.selected > label,
.acfef-form .acf-checkbox-list > li.selected > label,
.acf-form .acf-checkbox-list > li.selected > label,
.acf-field-checkbox .acf-checkbox-list > li.selected > label,
.ava-form .ava-form-checkbox-list > li.selected > label {
	border-color: var(--ava-form-bronze) !important;
	color: var(--ava-form-text) !important;
	background: rgba(140, 120, 83, 0.08) !important;
}

/* Respect optgroups / nested lists: keep normal vertical spacing inside nested groups. */
.ava-form .acf-checkbox-list ul,
.frontend-form .acf-checkbox-list ul,
.acff-form .acf-checkbox-list ul,
.acfef-form .acf-checkbox-list ul,
.acf-form .acf-checkbox-list ul,
.acf-field-checkbox .acf-checkbox-list ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 6px 0 0 18px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

/* Mobile: stack pill choices vertically so they remain comfortably tappable. */
@media (max-width: 480px) {
	.ava-form .acf-checkbox-list,
	.frontend-form .acf-checkbox-list,
	.acff-form .acf-checkbox-list,
	.acfef-form .acf-checkbox-list,
	.acf-form .acf-checkbox-list,
	.acf-field-checkbox .acf-checkbox-list,
	.ava-form .ava-form-checkbox-list {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.ava-form .acf-checkbox-list > li > label,
	.frontend-form .acf-checkbox-list > li > label,
	.acff-form .acf-checkbox-list > li > label,
	.acfef-form .acf-checkbox-list > li > label,
	.acf-form .acf-checkbox-list > li > label,
	.acf-field-checkbox .acf-checkbox-list > li > label,
	.ava-form .ava-form-checkbox-list > li > label {
		width: 100% !important;
	}
}