/* ========================================= */
/* TOMSELECT BOOTSTRAP OVERRIDES             */
/* ========================================= */

/* 1. Strip the default styling from the outer wrapper */
.ts-wrapper.form-control {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    height: auto !important;
}

/* 2. Style the inner control box to perfectly match standard text inputs */
.ts-control {
    min-height: 38px; /* Standard Bootstrap input height */
    padding: 0.375rem 0.75rem !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    font-size: 1rem;
    color: #495057;
}

/* 3. Match the standard blue glow when clicking/focusing */
.ts-wrapper.focus .ts-control {
    border-color: #38f47a !important;
    box-shadow: 0 0 10px rgba(27, 121, 63, 0.5)!important;
    outline: none!important;
    background-color: #fff9f6!important;
}

/* 4. Ensure the selected text aligns properly and doesn't push the height down */
.ts-control .item {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

/* 5. Custom Placeholder Styling (Your existing code) */
.ts-wrapper .ts-control input::placeholder {
    color: #a0a0a0 !important;
    font-weight: 400;
}

.ts-wrapper.placeholder .ts-control {
    color: #a0a0a0 !important;
    font-weight: 300;
}