.checkbox-dropdown-container {
	position: relative;
	display: inline-block;
	width: 200px; /* Adjust as needed */
	border-radius: 4px;
	font-family: sans-serif;
	max-width: 400px;
	margin-bottom: 1rem; /* Mimic Bootstrap form control margin */
	font-size: 1rem; /* Bootstrap default */
	line-height: 1.5; /* Bootstrap default */
}

.checkbox-dropdown-header {
	padding: 8px 12px;
	cursor: pointer;
	background-color: #f9f9f9;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #ced4da; /* Matches Bootstrap form-control border color */
	border-radius: 0.375rem;
	color: #495057;
}

.checkbox-dropdown-header:hover {
	border-color: #80bdff; /* Hover effect like form-control */
}

.checkbox-dropdown-header:focus-within { /* For keyboard navigation */
	box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Focus ring */
	border-color: #80bdff; /* Focus border color */
}

.checkbox-dropdown-options {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000;
	max-height: 200px;
	overflow-y: auto;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: 0.375rem;
	margin-top: 0.25rem; /* Small gap below header */
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Light shadow */
	padding: 0.5rem 0; /* Padding inside the dropdown options */
}

.checkbox-dropdown-header.open .checkbox-dropdown-arrow {
	transform: rotate(180deg); /* Rotate arrow when open */
}

.checkbox-dropdown-selected-text {
	flex-grow: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 0.5rem; /* Space between text and arrow */
}

.checkbox-dropdown-options label {
	display: block;
	padding: 8px 12px;
	cursor: pointer;
}

.checkbox-dropdown-options label:hover {
	background-color: #e9ecef;
}

.checkbox-dropdown-options input[type="checkbox"] {
	margin-right: 8px;
}

.checkbox-dropdown-options .form-check-label {
	cursor: pointer; /* Ensure label is clickable */
}

.checkbox-dropdown-options .form-check {
	padding: 0.1rem 2rem; /* Padding for each checkbox item */
	margin-bottom: 0; /* Remove default form-check margin */
	cursor: pointer;
}

.checkbox-dropdown-arrow {
	margin-left: 10px;
	transition: transform 0.2s;
}

.checkbox-dropdown-options[style*="display: block"] + .checkbox-dropdown-header .checkbox-dropdown-arrow {
	transform: rotate(180deg); /* Rotate arrow when open */
}

.checkbox-dropdown-options .form-check-label {
	cursor: pointer; /* Ensure label is clickable */
}

.checkbox-dropdown-options .form-check:hover {
	background-color: #e9ecef; /* Hover background for options */
}

/* Optional: Style when the dropdown is disabled */
.checkbox-dropdown-container.disabled .checkbox-dropdown-header {
	background-color: #e9ecef; /* Lighter background for disabled */
	opacity: 0.65; /* Reduce opacity */
	cursor: not-allowed;
}