.searchable-select-wrap{position:relative;display:inline-block;width:100%;}

/* Make the searchable input visually match the site's modal/form inputs */
.searchable-select-input{
	width:100%;
	box-sizing:border-box;
	/* Use the site's form variables so it matches exactly */
	height: var(--height-lg, 40px);
	padding: 0 var(--spacing-md, 12px);
	border: 1px solid var(--color-border, #d1d5db);
	border-radius: var(--radius-md, 8px);
	font-family: var(--font-family-secondary, Arial, Helvetica, sans-serif);
	font-size: var(--font-size-sm, 14px);
	color: var(--color-secondary, #111827);
	background: var(--color-background, #ffffff);
	transition: border-color var(--transition-normal, 150ms), box-shadow var(--transition-normal, 150ms);
	/* reserve space for a larger, bolder arrow */
	padding-right: 40px;
	/* larger bold arrow on the right (SVG) */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.2' d='M7 10l5 5 5-5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
}
.searchable-select-input::placeholder { color: var(--color-text-secondary, #9ca3af); }

.searchable-select-list{
	/* Place the list inside the dropdown so it visually connects with the search input
	   (avoid absolute positioning which can make items appear detached) */
	background: transparent;
	margin: 0;
	padding: 0;
	list-style: none;
}
.searchable-select-item{padding:8px 10px;cursor:pointer}
.searchable-select-item:hover{background:#f3f4f6}
.searchable-select-item.selected{background:#e6f4ea}
.searchable-select-item.disabled{color:#9ca3af;cursor:not-allowed}
.searchable-select-noresults{padding:8px 10px;color:#9ca3af}

/* Ensure the dropdown appears visually connected to the input */
.searchable-select-list { box-shadow: 0 4px 10px rgba(16,24,40,0.06); }

/* When the input is focused, highlight border like other inputs */
.searchable-select-input:focus { 
    outline: none; 
    border-color: var(--color-border-focus, #3b82f6); 
    /* box-shadow: 0 0 0 3px var(--color-primary-light, rgba(59,130,246,0.08));  */
}

/* Dropdown container */
.searchable-select-dropdown{
	position:absolute;
	left:0;
	right:0;
	top:calc(100% + 8px);
	background: var(--color-background, #fff);
	border: 1px solid var(--color-border, #e5e7eb);
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(16,24,40,0.08);
	z-index: 1000;
	display:none;
	padding: 8px;
}

/* Special handling for dropdowns in modals */
.searchable-select--adv-modal .searchable-select-dropdown {
	position: fixed;
	z-index: 1200;
	/* Position will be calculated by JavaScript */
}

/* Internal search input placed inside dropdown */
.searchable-select-search{
	width:100%;
	box-sizing:border-box;
	height:40px;
	padding: 8px 12px;
	border: 1px solid var(--color-border, #d1d5db);
	border-radius: 6px;
	font-size: 14px;
	color: var(--color-secondary, #111827);
	background: var(--color-background, #fff);
	/* reduce the gap so the items feel connected to the search field */
	margin-bottom:6px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.searchable-select-search:focus{
	outline:none;
	border-color: var(--color-border-focus, #3b82f6);
	box-shadow: 0 0 0 3px rgba(59,130,246,0.06);
}

/* List styles inside dropdown */
.searchable-select-list{
	list-style:none;
	margin:0;
	padding:0;
	max-height: var(--searchable-list-max-height, 240px);
	overflow:auto;
}

.searchable-select-item{
	/* make items feel larger and full-width */
	display:block;
	width:100%;
	box-sizing:border-box;
	padding:12px 14px;
	cursor:pointer;
	font-size:14px;
	color:var(--color-secondary, #111827);
}

.searchable-select-item:hover{background:var(--color-background-hover, #f3f4f6);}
.searchable-select-item.selected{background:var(--color-primary-light, #e6f4ea);}
.searchable-select-noresults{padding:12px;color:var(--color-text-secondary,#9ca3af);}

/* stronger visible highlight for the selected item */
.searchable-select-item.selected,
.searchable-select-item.highlighted{
	background: var(--color-primary-light, #10b981);
}

/* show a subtle focus ring for keyboard navigation */
.searchable-select-item:focus{
	outline: none;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.06), 0 0 0 3px rgba(16,185,129,0.12);
}

/* Make sure dropdown respects mobile spacing */
@media (max-width:480px){
	.searchable-select-dropdown{top:calc(100% + 6px);padding:6px;border-radius:6px}
	.searchable-select-search{height:36px;padding:6px 10px}
	.searchable-select-item{padding:8px 10px}
}