/*
 * tom-select-custom.css
 * Enqueue this AFTER tom-select.min.css.
 * Place in /wp-content/themes/hello-elementor-child/css/
 *
 * Covers: ts-wrapper, ts-control, ts-dropdown, options,
 *         label row, count badge, search icon, divider.
 */

/* ─────────────────────────────────────────
   ts-wrapper
───────────────────────────────────────── */
.light-mode-enabled .ts-wrapper {
    /*width: 100%;*/
    --color: #080B16;
    --selected-color: #080B16;
    --dropdown-bg: #fff;
    --label-border: rgba(08, 11, 22, 0.1);
    --backdrop: blur(0px);
    --scrollbar-color: #080B16;
    --border-color: var(--label-border);
    --ts-control-color: #080B16;
}

.ts-wrapper {
    --color: #86878D;
    --selected-color: #fff;
    --dropdown-bg: rgba(255, 255, 255, 0.02);
    --label-border: rgba(255, 255, 255, 0.1);
    --backdrop: blur(35px);
    --scrollbar-color: rgba(0, 255, 224, 0.55);
    --border-color: var(--label-border);
    --ts-control-color: #fff;
}

/* ─────────────────────────────────────────
   ts-control  (the visible trigger/button)
───────────────────────────────────────── */
.ts-wrapper .ts-control {
    background: none !important;
    border: none !important;
    /*border: 1.5px solid #e2e8f0 !important;*/
    border-radius: 10px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    /*box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;*/
    transition: border-color 0.15s !important;
    gap: 0 !important;
    outline: none !important;
}

.ts-wrapper .ts-control > div {
    background: none !important;
}
.ts-wrapper.plugin-checkbox_options .option .tomselect-checkbox {
    display: none !important;
}

/* Open state */
/*.ts-wrapper.plugin-dropdown_input.focus.dropdown-active .ts-control,
.ts-wrapper.focus.dropdown-active .ts-control {
    border-color: #94a3b8 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-color: #f0f2f5 !important;
    box-shadow: none !important;
}*/

/* Hide auto-generated .item tags — we use our own label row */
.ts-wrapper .ts-control .item {
    display: none !important;
}

/* Hide built-in caret/input — search lives in the dropdown */
.ts-wrapper .ts-control > input {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
}

/* ── Static label row (injected by JS into ts-control) ── */
.ts-label-row {
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
    width: 100%;
    justify-content: start;
    pointer-events: none;
    user-select: none;
    gap: 8px;
}

.ts-label-text {
    font-size: 14px;
    color: var(--ts-control-color);
}

.dropdown-active .ts-label-text {
    font-weight: 700;
}

.ts-count-badge {
    background: #8b5cf6;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    min-width: 22px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s;
}
.ts-count-badge.visible {
    opacity: 1;
}

/* ── Caret ── */
.ts-caret {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    transition: transform 0.2s ease;
}
.ts-wrapper.dropdown-active .ts-caret {
    transform: rotate(180deg);
}

/* ─────────────────────────────────────────
   ts-dropdown  (the popup panel)
───────────────────────────────────────── */
.ts-wrapper .ts-dropdown {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 18px;
    gap: 24px;
    background: var(--dropdown-bg);
    border: 1px solid var(--border-color);
    box-shadow: -20px 10px 44px rgba(0, 0, 0, 0.1) !important;
    border-radius: 8px !important;
    width: 320px;
    overflow: hidden !important;
    backdrop-filter: var(--backdrop);
}

.filter-container .ts-wrapper:last-of-type .ts-dropdown {
    right: 0;
    left: unset;
}

/* ── Search input (dropdown_input plugin) ── */
.ts-wrapper .ts-dropdown .dropdown-input-wrap {
    padding: 0 14px !important;
    border-bottom: 1px solid var(--border-color) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.ts-wrapper .ts-dropdown .dropdown-input {
    background: transparent !important;
    border: none !important;
    color: var(--color) !important;
    font-family: inherit !important;
    font-size: 14px !important;
    padding: 15px 0 !important;
    outline: none !important;
    width: 100% !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.ts-wrapper .ts-dropdown .dropdown-input::placeholder {
    color: var(--color) !important;
}

/* Search icon (injected by JS) */
.ts-search-icon {
    color: #94a3b8;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    pointer-events: none;
}

/* ── Options scroll container ── */
.ts-wrapper .ts-dropdown-content {
    max-height: 300px !important;
    overflow-y: auto !important;
    padding: 6px !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--scrollbar-color) transparent !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    row-gap: 8px;
}

/* Each option takes full row */
.ts-wrapper .ts-dropdown-content .option {
    width: 100%;
}

/* ── Selected-to-top sorting — opt-in via class="ts-sort" on <select> ──
 * Tom Select copies classes from <select> to .ts-wrapper automatically,
 * so .ts-sort on the wrapper targets only opted-in dropdowns.
 * order:0 = selected (top), order:1 = ::after divider, order:2 = unselected
 * ────────────────────────────────────────────────────────────────────── */
.ts-sort .ts-dropdown-content .option.selected    { order: 0; }
.ts-sort .ts-dropdown-content .option:not(.selected) { order: 2; }

/* Divider line between selected and unselected groups — only when sorting is active */
.ts-sort .ts-dropdown-content:has(.option.selected)::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: var(--label-border);
    margin: 2px 0;
    order: 1;
    flex-shrink: 0;
}

/* Divider between selected and unselected — opt-in via class="ts-divider" on <select> */
.opt-separator {
    display: flex;
    align-items: center;
    position: relative;
}

.opt-separator::before {
    content: '';
    width: 1px;
    height: 50%;
    max-height: 10px;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
}

/* ── Individual option ── */
.ts-wrapper .ts-dropdown-content .option {
    padding: 0 !important;
    border-radius: 66px;
    margin-bottom: 2px !important;
    cursor: pointer !important;
    background: transparent !important;
    color: inherit !important;
    border: 1px solid var(--label-border);
}
/*.ts-wrapper .ts-dropdown-content .option.active,
.ts-wrapper .ts-dropdown-content .option:hover {
    background: #f8fafc !important;
}*/

/* Inner layout of each option */
.opt-inner,
.ts-wrapper .ts-dropdown .option{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    border: 1px solid var(--label-border);
    border-radius: 30px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    width: 100%;
}

select[data-ts-icons="true"] + .ts-wrapper.has-items .option,
.ts-wrapper .ts-dropdown .option:has( .opt-inner ) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.ts-wrapper .ts-dropdown .option:has( .opt-inner ) {
    border: none;
    padding: 0 !important;
}

/* ── Option toggle dot — ⚙️ CUSTOMISE: change this to checkmark, plus, or any indicator ── */
.opt-toggle {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-image: url('../img/default-radio-icon.svg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
}
/* ⚙️ CUSTOMISE: selected state of the indicator */
.ts-wrapper .ts-dropdown-content .option.selected .opt-toggle {
    background-image: url('../img/selected-radio-icon.svg');
}

select[data-ts-icons="true"] + .ts-wrapper .ts-dropdown-content .option .opt-toggle {
    background-image: url('../img/plus-sign.svg');
    border: none;
}

select[data-ts-icons="true"] + .ts-wrapper .ts-dropdown-content .option.selected .opt-toggle {
    background-image: url('../img/dropdown-checked.svg');
}
/* ⚙️ CUSTOMISE: inner dot when selected — remove ::after to use a plain filled circle */
/*.ts-wrapper .ts-dropdown-content .option.selected .opt-toggle::after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
}*/

/* ── Optgroup header ── */
.ts-wrapper .ts-dropdown-content .ts-optgroup-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 10px 4px;
    pointer-events: none;
}
.ts-wrapper .ts-dropdown-content .ts-optgroup-header .ts-optgroup-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Tom Select native optgroup label — hide it since we use custom render ── */
.ts-wrapper .ts-dropdown-content .optgroup-header {
    display: none !important;
}

/* ── Icon chip — ⚙️ CUSTOMISE: size, border-radius, padding ── */
.opt-chip {
    width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    background: transparent !important;
}

.opt-chip::before {
    content: '';
    width: 1px;
    height: 50%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: -10px;
}
.opt-chip img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.ts-wrapper .ts-dropdown-content .option .opt-title {
    font-size: 14px;
    color: var(--color);
    transition: color 0.15s, font-weight 0.15s;
}

/* Selected option styles */
.ts-wrapper .ts-dropdown-content .option.selected .opt-title {
    color: var(--selected-color);
    font-weight: 600;
}

/* ── Divider between selected / unselected groups (existing DOM divider) ── */
.ts-wrapper .ts-dropdown-content .opt-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 6px;
    pointer-events: none;
    order: 0;
}

/* ── No results ── */
.ts-wrapper .ts-dropdown-content .no-results {
    padding: 14px 12px;
    font-size: 13px;
    color: var(--color);
    text-align: center;
}