/* Tom Select Dark Theme for Viblow */

.ts-wrapper.single .ts-control, 
.ts-wrapper.multi .ts-control {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #ffffff !important;
    padding: 0.75rem !important;
    border-radius: 0.75rem !important;
    min-height: 48px;
}

.ts-dropdown {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3) !important;
    z-index: 9999 !important;
}

.ts-dropdown .option {
    color: #ffffff !important;
    padding: 0.75rem !important;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background-color: #374151 !important;
    color: #ffffff !important;
}

.ts-dropdown .option.selected {
    background-color: #8b5cf6 !important;
    color: #ffffff !important;
}

/* .item.item.item.item beats .ts-wrapper.plugin-remove_button:not(.rtl) .item (specificity 4)
   from the vendor theme, which otherwise wins its padding-right:0 fight against our shorthand */
.ts-control .item.item.item.item {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    background: linear-gradient(to right, #ec4899, #8b5cf6) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 0.5rem !important;
    margin: 0.125rem !important;
    font-size: 0.875rem !important;
}

.ts-wrapper.multi .ts-control > div {
    background: linear-gradient(to right, #ec4899, #8b5cf6) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: 0.5rem !important;
    margin: 0.125rem !important;
}

.ts-control .remove.remove.remove.remove.remove {
    display: inline-flex !important;
    align-items: center !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 1.25rem !important;
    padding: 0 0.25rem !important;
    margin-left: 0.25rem !important;
}

.ts-control .remove.remove.remove.remove.remove:hover {
    background: transparent !important;
    color: #fca5a5 !important;
}

.ts-dropdown .create {
    color: #60a5fa !important;
    padding: 0.75rem !important;
    font-weight: 600 !important;
}

.ts-dropdown .create:hover {
    background-color: #374151 !important;
}

.ts-control input {
    color: #ffffff !important;
}

.ts-control input::placeholder {
    color: #9ca3af !important;
}