/* ==========================================================================
   Imagic Directory — Tom Select Theme Overrides
   Applies to all Tom Select instances across the plugin.
   ========================================================================== */

/* ── CSS Custom Property overrides ─────────────────────────────────────── */
.ts-wrapper {
    --ts-font-family:               inherit;
    --ts-font-size:                 var(--imd-field-font, 15px);
    --ts-line-height:               1.5;
    --ts-color-text:                var(--imd-text, #1a1a2e);
    --ts-color-border:              var(--imd-border, #e0e4ee);
    --ts-color-dropdown-background: #ffffff;
    --ts-border-radius:             var(--imd-field-radius, 10px);
    --ts-highlight-color:           var(--imd-primary-ring, rgba(104,56,38,0.15));
    --ts-pr-caret:                  2rem;
}

/* ── Control (the visible "input" box) ──────────────────────────────────── */
.ts-wrapper.single .ts-control {
    background:    var(--imd-bg, #fff);
    border:        var(--imd-field-border-w, 2px) solid var(--imd-border, #e0e4ee);
    border-radius: var(--ts-border-radius);
    padding:       9px 36px 9px 12px;
    font-size:     var(--ts-font-size);
    color:         var(--ts-color-text);
    box-shadow:    none;
    cursor:        pointer;
    transition:    border-color 0.15s, box-shadow 0.15s;
    min-height:    unset;
    line-height:   1.5;
}

.ts-wrapper.single.focus .ts-control,
.ts-wrapper.single .ts-control:focus-within {
    border-color: var(--imd-primary, #683826);
    box-shadow:   0 0 0 3px var(--imd-primary-ring, rgba(104,56,38,0.15));
    outline:      none;
}

/* ── Caret arrow ────────────────────────────────────────────────────────── */
.ts-wrapper.single .ts-control::after {
    border-color: #888 transparent transparent transparent;
}

.ts-wrapper.single.dropdown-active .ts-control::after {
    border-color: var(--imd-primary, #683826) transparent transparent transparent;
}

/* ── Control input (search field inside the box) ────────────────────────── */
.ts-control input {
    font-size:  var(--ts-font-size);
    color:      var(--ts-color-text);
    line-height: 1.5;
}

/* ── Dropdown ────────────────────────────────────────────────────────────── */
.ts-dropdown {
    border:        1px solid var(--imd-border, #e0e4ee);
    border-radius: var(--ts-border-radius);
    box-shadow:    0 6px 20px rgba(0, 0, 0, 0.10);
    overflow:      hidden;
    font-size:     var(--ts-font-size);
    margin-top:    4px;
}

.ts-dropdown .ts-dropdown-content {
    padding: 4px 0;
}

/* ── Dropdown options ───────────────────────────────────────────────────── */
.ts-dropdown .option {
    padding:    10px 14px;
    color:      var(--ts-color-text);
    transition: background 0.1s;
    cursor:     pointer;
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background: var(--imd-primary-bg, #f7f1ed);
    color:      var(--imd-primary, #683826);
}

.ts-dropdown .option.selected {
    background: var(--imd-primary-ring, rgba(104,56,38,0.10));
    color:      var(--imd-primary, #683826);
    font-weight: 600;
}

.ts-dropdown .option.selected.active {
    background: var(--imd-primary-bg, #f7f1ed);
}

/* ── No results ─────────────────────────────────────────────────────────── */
.ts-dropdown .no-results {
    padding: 12px 14px;
    color:   #999;
    font-size: 13px;
}

/* ── Multi-select (for languages etc.) ─────────────────────────────────── */
.ts-wrapper.multi .ts-control {
    background:    var(--imd-bg, #fff);
    border:        var(--imd-field-border-w, 2px) solid var(--imd-border, #e0e4ee);
    border-radius: var(--ts-border-radius);
    padding:       6px 36px 6px 8px;
    gap:           4px;
    min-height:    42px;
    cursor:        text;
    transition:    border-color 0.15s, box-shadow 0.15s;
    box-shadow:    none;
}

.ts-wrapper.multi.focus .ts-control {
    border-color: var(--imd-primary, #683826);
    box-shadow:   0 0 0 3px var(--imd-primary-ring, rgba(104,56,38,0.15));
    outline:      none;
}

.ts-wrapper.multi .ts-control .item {
    background:    var(--imd-primary, #683826);
    color:         #fff;
    border-radius: 20px;
    padding:       2px 10px;
    font-size:     13px;
    font-weight:   500;
    border:        none;
    line-height:   1.6;
}

/* Remove button on multi items */
.ts-wrapper.multi .ts-control .item .remove {
    color:       rgba(255,255,255,0.8);
    border-left: 1px solid rgba(255,255,255,0.4);
    margin-left: 6px;
    padding-left: 6px;
}

.ts-wrapper.multi .ts-control .item .remove:hover {
    color:       #fff;
    background:  transparent;
}

/* ── Placeholder ────────────────────────────────────────────────────────── */
.ts-wrapper .ts-control .placeholder,
.ts-wrapper .ts-control input::placeholder {
    color: #aaa;
}

/* ── Loading ────────────────────────────────────────────────────────────── */
.ts-wrapper .spinner {
    border-top-color: var(--imd-primary, #683826);
}

/* ── Disabled state ─────────────────────────────────────────────────────── */
.ts-wrapper.disabled .ts-control {
    background: #f5f5f5;
    color:      #aaa;
    cursor:     not-allowed;
}