/* ========================================
   CUSTOM MULTI-SELECT DROPDOWN
   Extracted from reg-template-base.css so it loads wherever
   custom-multiselect.js runs — post forms AND registration forms
   (see Form_Field_MultiDropdown in the free plugin).
   ======================================== */

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;
    /* Opaque fallback so underlying fields never bleed through — the
       registration templates and dark post-form layouts override it. */
    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"] {
    /* !important: layout skins (e.g. layout4) set display on generic
       .wpuf-fields input rules with higher specificity — the widget's native
       input must stay hidden under every template. */
    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;
}


/* Checked-option fallback — the check SVG is white, so the circle needs an
   opaque accent. Templates/layouts override with their own accent color. */
form[class*="wpuf-form-layout"] .multiselect-option input[type="checkbox"]:checked + label::before {
    background: #3B82F6;
    border-color: #3B82F6;
}