.dropdown-selected {
  padding: 3px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  background: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: border-color 0.2s;
  gap: 14px;
}

.filter-window .dropdown-selected {
  padding: 10px 10px;
  border: 2px solid #bdbdbd;
}

.dropdown-selected:hover {
  border-color: #999;
}

.dropdown-selected.open {
  border-color: #007bff;
}

/* Arrow indicator */
.dropdown-selected::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #666;
  transition: transform 0.2s;
}

.dropdown-selected.open::after {
  transform: rotate(180deg);
}

.custom-dropdown {
	position: relative;
}

.custom-dropdown .dropdown-label {
	position: absolute;
    background: white;
    top: -9px;
    left: 12px;
    color: #828282;
    font-size: 14px;
	padding: 0px 5px;
    
    display: block;
    font-weight: 400;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #fff;
    position: absolute;
    top: -9px;
    left: 12px;
    color: #828282;
    font-size: 14px;
    padding: 0px 5px;
    z-index: 1;
}

.dropdown-options {
	width: max-content;
    max-width: fit-content;
  	padding: 4px;
	position: absolute;
	top: 100%;
	/*left: 18px;*/
	right: 0px;
	/*border: 1px solid #e0e0e0;*/
	border-radius: 8px;
	background: white;
	max-height: 200px;
	overflow-y: auto;
	display: none;
	z-index: 1000;
	box-shadow: 
		0px 9px 46px 8px rgba(0, 0, 0, 0.12),
		0px 24px 38px 3px rgba(0, 0, 0, 0.14),
		0px 11px 15px -7px rgba(0, 0, 0, 0.20);
}

.dropdown-options.open {
  display: block;
}

.option {
  padding: 6px 13px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin: 4px 0px;
  border-radius: 6px;
}

.option:last-child {
  border-bottom: none;
}

.option:hover {
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}

.option.selected {
  background-color: rgba(0, 0, 0, 0.08);
  color: #000000;
}

/* Disabled state */
.custom-dropdown.disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* CSS for CustomDropdown with checkbox functionality */

/* Container for options with checkboxes */
.custom-dropdown.with-checkboxes .option {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.custom-dropdown.with-checkboxes .option:hover {
    background-color: #f8f9fa;
}

/* Checkbox styling */
.custom-dropdown .option-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 3px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    background-color: #fff;
    transition: all 0.2s ease;
    flex-shrink: 0; /* Prevent checkbox from shrinking */
}

/* Checked state */
.custom-dropdown .option-checkbox.checked {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

/* Hover state for checkbox */
.custom-dropdown .option:hover .option-checkbox {
    border-color: #007bff;
}

/* Option text */
.custom-dropdown .option-text {
    flex: 1;
    line-height: 1.4;
}

/* Selected option styling (for additional visual feedback) */
.custom-dropdown.with-checkboxes .option.selected {
    background-color: rgba(0, 123, 255, 0.1);
}

/* Alternative checkbox styles - more modern */
.custom-dropdown .option-checkbox {
    position: relative;
}

.custom-dropdown .option-checkbox.checked::before {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Remove the text content when using the CSS checkmark */
.custom-dropdown .option-checkbox.checked {
    color: transparent; /* Hide the ✓ text */
}

/* Ensure proper spacing in dropdown options */
.custom-dropdown.with-checkboxes .dropdown-options {
    padding: 4px 0;
}

/* Adjust option padding for better visual balance */
.custom-dropdown.with-checkboxes .option {
    padding: 10px 12px;
    min-height: 40px;
    box-sizing: border-box;
}

/* Focus state for accessibility */
.custom-dropdown.with-checkboxes .option:focus,
.custom-dropdown.with-checkboxes .option.focused {
    outline: 2px solid #007bff;
    outline-offset: -2px;
    background-color: rgba(0, 123, 255, 0.05);
}

/* Different color schemes - you can choose one */

/* Green checkboxes */
.custom-dropdown.checkbox-green .option-checkbox.checked {
    background-color: #28a745;
    border-color: #28a745;
}

.custom-dropdown.checkbox-green .option:hover .option-checkbox {
    border-color: #28a745;
}

/* Custom styling for disabled options */
.custom-dropdown .option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.custom-dropdown .option.disabled .option-checkbox {
    background-color: #f8f9fa;
    border-color: #e9ecef;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .custom-dropdown.with-checkboxes .option {
        padding: 12px;
        min-height: 44px; /* Larger touch targets on mobile */
    }
    
    .custom-dropdown .option-checkbox {
        width: 20px;
        height: 20px;
        margin-right: 12px;
    }
}

/* Animation for checkbox state changes */
.custom-dropdown .option-checkbox {
    transition: all 0.15s ease-in-out;
}

.custom-dropdown .option-checkbox.checked {
    transform: scale(1.05);
    animation: checkboxPop 0.2s ease-in-out;
}

@keyframes checkboxPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1.05); }
}

/* Ensure text doesn't wrap awkwardly */
.custom-dropdown .option-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Optional: Add icons instead of checkmarks */
.custom-dropdown.with-icons .option-checkbox.checked::before {
    content: '✓';
    position: static;
    transform: none;
    border: none;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* Search functionality styles */
.custom-dropdown.searchable {
    position: relative;
}

/* Search wrapper to contain input and icons */
.custom-dropdown .dropdown-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.custom-dropdown .dropdown-search-input {
    width: 100%;
    padding: 3px 50px 3px 40px; /* Match dropdown-selected padding with space for icons */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    background-color: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
    outline: none;
    gap: 14px;
}

.custom-dropdown .dropdown-search-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.custom-dropdown .dropdown-search-input::placeholder {
    color: #999;
    font-weight: 400;
}

/* Search icon positioned inside input on the left */
.custom-dropdown .dropdown-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 16px;
    pointer-events: none;
    z-index: 10;
}

/* Dropdown arrow positioned inside input on the right */
.custom-dropdown .dropdown-search-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.custom-dropdown .dropdown-search-arrow:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Create the dropdown arrow using CSS */
.custom-dropdown .dropdown-search-arrow::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #666;
    display: block;
}

/* No results message */
.custom-dropdown .no-results-message {
    padding: 12px 16px;
    color: #666;
    font-style: italic;
    text-align: center;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

/* Options separator line between checked and unchecked options */
.custom-dropdown .options-separator {
    height: 1px;
    background-color: #e0e0e0;
    margin: 4px 0;
    border: none;
    display: block;
}

/* Ensure separator doesn't inherit option styling */
.custom-dropdown .options-separator:hover {
    background-color: #e0e0e0; /* Don't change on hover */
}

/* Filter window specific search input styling */
.filter-window .custom-dropdown .dropdown-search-input {
    padding: 10px 50px 10px 40px;
    border: 2px solid #bdbdbd;
}

/* Ensure search input matches the selected element styling */
.modal-filterresults .entry .custom-dropdown .dropdown-search-input,
.rightmodal .entry .custom-dropdown .dropdown-search-input {
    width: 100%;
    padding: 12px 50px 12px 40px; /* Match the icon padding */
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    background-color: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.modal-filterresults .entry .custom-dropdown .dropdown-search-input:focus,
.rightmodal .entry .custom-dropdown .dropdown-search-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
    outline: none;
}

/* Hide options that don't match search */
.custom-dropdown .option[style*="display: none"] {
    display: none !important;
}

/* Smooth transitions for search filtering */
.custom-dropdown .option {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Highlight search matches (optional enhancement) */
.custom-dropdown .option-text mark {
    background-color: yellow;
    padding: 0;
    font-weight: bold;
}

/* Mobile responsive adjustments for search */
@media (max-width: 768px) {
    .custom-dropdown .dropdown-search-input {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 14px 50px 14px 40px; /* Maintain icon spacing on mobile */
    }
    
    .custom-dropdown .no-results-message {
        padding: 16px;
        font-size: 14px;
    }
    
    /* Slightly larger icons on mobile for better touch targets */
    .custom-dropdown .dropdown-search-icon {
        font-size: 18px;
    }
    
    .custom-dropdown .dropdown-search-arrow {
        padding: 6px;
    }
}

/* Enhanced focus indicators for accessibility */
.custom-dropdown.searchable:focus-within {
    outline: none;
    outline-offset: 2px;
}

/* Search icon SVG styling */
span.dropdown-search-icon::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml;utf8,<svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M16.6 18L10.3 11.7C9.8 12.1 9.225 12.4167 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.4167 9.225 12.1 9.8 11.7 10.3L18 16.6L16.6 18ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z' fill='%2349454f'/></svg>") no-repeat center;
}
/* NEW: Individual items display styling */
.custom-dropdown.individual-items .dropdown-selected {
    position: relative;
}

.custom-dropdown.individual-items .selected-items-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    margin-right: 8px;
}

.custom-dropdown.individual-items .selected-items-count {
    background-color: #007bff;
    color: white;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    margin-right: 8px;
    flex-shrink: 0;
    min-width: 20px;
    text-align: center;
}

.custom-dropdown.individual-items .dropdown-arrow {
    flex-shrink: 0;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #666;
    transition: transform 0.2s;
}

.custom-dropdown.individual-items .dropdown-selected.open .dropdown-arrow {
    transform: rotate(180deg);
}

/* Alternative count styling options */
.custom-dropdown.individual-items.count-style-subtle .selected-items-count {
    background-color: #f8f9fa;
    color: #666;
    border: 1px solid #dee2e6;
}

.custom-dropdown.individual-items.count-style-success .selected-items-count {
    background-color: #28a745;
    color: white;
}

.custom-dropdown.individual-items.count-style-warning .selected-items-count {
    background-color: #ffc107;
    color: #212529;
}

/* Responsive adjustments for individual items display */
@media (max-width: 768px) {
    .custom-dropdown.individual-items .selected-items-count {
        font-size: 11px;
        padding: 1px 5px;
        margin-right: 6px;
    }
    
    .custom-dropdown.individual-items .selected-items-text {
        margin-right: 6px;
    }
}