/* =====================================================
   Custom Dropdown — dynamic behavior only
   (Static styling lives on Tailwind utility classes.)
===================================================== */

/* Hover */
.dropdown-option-f4c9n2:hover {
	background: #F7F9EE;
}

/* Hide non-selected when closed */
.dropdown-option-f4c9n2:not(.is-selected) {
	display: none;
}

.custom-dropdown-f4c9n2.is-open .dropdown-option-f4c9n2 {
	display: flex;
}

/* Selected option pinned to the top visually */
.dropdown-option-f4c9n2.is-selected {
	order: -1;
}

/* Divider between options when dropdown is open */
.custom-dropdown-f4c9n2.is-open .dropdown-option-f4c9n2:not(.is-selected) {
	border-top: 1px solid #F0F0F0;
}

/* Circle indicator (radio-style) */
.option-circle-f4c9n2 {
	position: relative;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid #CCCCCC;
	background: #FFFFFF;
	transition: border-color 0.2s ease;
}

.option-circle-f4c9n2::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #CCCCCC;
	transform: translate(-50%, -50%);
	transition: background 0.2s ease;
}

.is-selected .option-circle-f4c9n2 {
	border-color: #B4D23A;
}

.is-selected .option-circle-f4c9n2::after {
	background: #B4D23A;
}

/* Text styles per state */
.option-text-f4c9n2 {
	color: #213C35;
}

.is-selected .option-text-f4c9n2 {
	font-weight: 500;
}

/* Chevron — only on selected */
.option-chevron-f4c9n2 {
	display: none;
	transition: transform 0.3s ease;
}

.is-selected .option-chevron-f4c9n2 {
	display: inline-flex;
}

.custom-dropdown-f4c9n2.is-open .is-selected .option-chevron-f4c9n2 {
	transform: rotate(180deg);
}