/*
 * "Anh/chị đến với AVIDE để làm gì?" (issue #87): the avide_interests
 * field on UM forms 78 and 80.
 *
 * Selector: [data-key="avide_interests"] is set by Ultimate Member itself
 * on the field's wrapper (Fields::get_atts()) and is stable across the
 * register and profile render contexts.
 *
 * Progressive enhancement. Without JavaScript the six boxes render as a
 * plain single column with bold group headers (::before) and the help
 * line (::after on the label), all legible. interests-field.js then adds
 * the class avide-chips, inserts real header, divider and help elements,
 * and only then do the boxes become pills. The exclusivity rule is JS
 * for convenience and server-side for real (avide_interests_validate()).
 */

/* One column at every width, and UM's absolutely positioned tick icon
 * becomes an ordinary flex item so it never escapes the row. */
[data-key="avide_interests"] .um-field-area {
	display: block;
}

/* display and the option margin need !important: UM's own sheet and the
 * theme's form rules set both with higher specificity. */
[data-key="avide_interests"] label.um-field-checkbox {
	position: relative;
	display: flex !important;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	float: none;
	min-height: 44px;
	margin: 0.25em 0;
	padding: 0.4em 0;
}

[data-key="avide_interests"] .um-field-checkbox .um-field-checkbox-state {
	position: static;
	flex: 0 0 24px;
	margin-right: 0.6em;
}

[data-key="avide_interests"] .um-field-checkbox .um-field-checkbox-option {
	flex: 1 1 auto;
	margin: 0 !important;
	padding: 0;
	line-height: 1.35;
}

/* The help line is always visible, read from a custom property set by the
 * snippet, so the reader never has to find a tooltip icon. */
[data-key="avide_interests"] .um-tip {
	display: none;
}

[data-key="avide_interests"] .um-field-label::after {
	content: var(--avide-ig-help);
	display: block;
	clear: both;
	margin: 0.3em 0 0.6em;
	font-size: 0.92em;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.62);
}

/* No-JS fallback: headers as ::before on the first box of each group. */
[data-key="avide_interests"]:not(.avide-chips) .um-field-checkbox:nth-of-type(1)::before,
[data-key="avide_interests"]:not(.avide-chips) .um-field-checkbox:nth-of-type(4)::before {
	display: block;
	width: 100%;
	font-weight: 700;
	margin: 0.9em 0 0.35em;
}

[data-key="avide_interests"]:not(.avide-chips) .um-field-checkbox:nth-of-type(1)::before {
	content: var(--avide-ig1);
	margin-top: 0;
}

[data-key="avide_interests"]:not(.avide-chips) .um-field-checkbox:nth-of-type(4)::before {
	content: var(--avide-ig2);
}

[data-key="avide_interests"]:not(.avide-chips) .um-field-checkbox {
	flex-wrap: wrap;
}

/* Enhanced: real headers and divider, and the boxes become pills. */
[data-key="avide_interests"].avide-chips .avide-ig-head {
	margin: 0.9em 0 0.35em;
	font-weight: 700;
}

[data-key="avide_interests"].avide-chips .avide-ig-head:first-child {
	margin-top: 0;
}

[data-key="avide_interests"].avide-chips .avide-ig-sep {
	height: 0;
	margin: 0.9em 0 0.6em;
	border: 0;
	border-top: 1px dashed rgba(0, 0, 0, 0.25);
}

[data-key="avide_interests"].avide-chips .um-field-checkbox {
	padding: 0.55em 1em;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 999px;
	cursor: pointer;
}

[data-key="avide_interests"].avide-chips .um-field-checkbox.active,
[data-key="avide_interests"].avide-chips .um-field-checkbox:has(input:checked) {
	border-width: 2px;
	border-color: currentColor;
	font-weight: 600;
}