form[class*="wpuf-form-layout"] .custom-multiselect {
position: relative;
width: 100%;
}
form[class*="wpuf-form-layout"] .multiselect-input {
cursor: pointer;
display: flex;
justify-content: space-between;
transition: all 0.2s ease;
}
form[class*="wpuf-form-layout"] .multiselect-input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
form[class*="wpuf-form-layout"] .selected-items {
display: none;
}
form[class*="wpuf-form-layout"] .selected-items:not(:empty) {
display: flex;
flex-wrap: wrap;
gap: 4px;
flex: 1;
}
form[class*="wpuf-form-layout"] .selected-item {
display: flex;
align-items: flex-end;
gap: 4px;
font-size: 14px;
}
form[class*="wpuf-form-layout"] .remove-item {
background: none;
border: none;
cursor: pointer;
font-size: 16px;
line-height: 1;
padding: 0;
margin-left: 4px;
}
form[class*="wpuf-form-layout"] .multiselect-placeholder {
font-size: 16px;
font-weight: 400;
flex: 1;
pointer-events: none;
}
form[class*="wpuf-form-layout"] .dropdown-arrow {
font-size: 14px;
transition: transform 0.2s ease;
pointer-events: none;
margin-left: 8px;
}
form[class*="wpuf-form-layout"] .multiselect-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
z-index: 1000;
display: none;
max-height: 200px;
overflow-y: auto;
margin-top: 10px; background: #fff;
border: 1px solid #E5E7EB;
border-radius: 6px;
}
form[class*="wpuf-form-layout"] .multiselect-option {
display: flex;
align-items: center;
padding: 12px 16px;
cursor: pointer;
transition: background-color 0.2s ease;
}
form[class*="wpuf-form-layout"] .multiselect-option:last-child {
border-bottom: none;
}
form[class*="wpuf-form-layout"] .multiselect-option input[type="checkbox"] { display: none !important;
}
form[class*="wpuf-form-layout"] .multiselect-option label {
cursor: pointer;
flex: 1;
font-size: 16px;
font-weight: 400;
display: flex;
align-items: center;
position: relative;
padding-left: 32px;
}
form[class*="wpuf-form-layout"] .multiselect-option label::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border: 1px solid #E5E7EB;
border-radius: 50%;
transition: all 0.2s ease;
}
form[class*="wpuf-form-layout"] .multiselect-option input[type="checkbox"]:checked + label::after {
content: '';
position: absolute;
left: 7px;
top: 50%;
transform: translateY(-50%);
width: 9px;
height: 7px;
background-image: url("data:image/svg+xml,%3Csvg width='9' height='7' viewBox='0 0 9 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.06186 0.278861C8.23568 0.45747 8.33333 0.699683 8.33333 0.952236C8.33333 1.20479 8.23568 1.447 8.06186 1.62561L3.42579 6.3878C3.25191 6.56636 3.01611 6.66667 2.77025 6.66667C2.52438 6.66667 2.28859 6.66636 2.11471 6.3878L0.26028 4.48293C0.0913804 4.3033 -0.00207753 4.06271 3.50511e-05 3.81298C0.00214763 3.56325 0.0996617 3.32437 0.271575 3.14778C0.443488 2.97119 0.676044 2.87102 0.919157 2.86885C1.16227 2.86668 1.39649 2.96268 1.57136 3.13618L2.77025 4.36768L6.75078 0.278861C6.92466 0.100307 7.16045 0 7.40632 0C7.65218 0 7.88798 0.100307 8.06186 0.278861Z' fill='white'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
} form[class*="wpuf-form-layout"] .multiselect-option input[type="checkbox"]:checked + label::before {
background: #3B82F6;
border-color: #3B82F6;
}