:root {
    /* Colors */
    --multiselect-pill-bg: white;
    --multiselect-pill-hover-bg: white;
    --multiselect-pill-border: white;
    --multiselect-checkbox-color: rgb(50, 122, 30);
    --multiselect-overlay-second-element-color: #767676;
    --multiselect-dropdown-hover-bg: #e6f5fe;
    --multiselect-dropdown-highlight-bg: #dbedff;
    --multiselect-dropdown-highlight-hover-bg: #d3e9ff;
    --multiselect-dropdown-border-color: #ebebeb;
    --multiselect-dropdown-row-border-color: rgb(235, 235, 235);
    --multiselect-status-text-color: rgb(153, 153, 153);
    --multiselect-pill-remove-color: #1849C8;
    --multiselect-pill-remove-hover-bg: rgba(0, 0, 0, 0.1);
    --multiselect-pill-remove-hover-color: #333;
    --multiselect-pill-text-color: #333;

    /* Input field styling */
    --multiselect-input-padding: 10px 30px 10px 16px;
    --multiselect-input-border-bottom: 1px solid rgb(50, 122, 30);
    --multiselect-input-border-left: 0;
    --multiselect-input-border-right: 0;
    --multiselect-input-border-top: 0;
    --multiselect-input-border-radius: 0;

    /* Validation (applied on validation-failure) */
    --multiselect-error-border-color: darkred;
    --multiselect-input-error-border-left: 1px solid var(--multiselect-error-border-color);
    --multiselect-input-error-border-right: 1px solid var(--multiselect-error-border-color);
    --multiselect-input-error-border-top: 1px solid var(--multiselect-error-border-color);
    --multiselect-input-error-border-bottom: var(--multiselect-input-border-bottom);

    /* Open/Close Dropdown Chevron Icons */
    --multiselect-chevron-down-icon: url(../../themes/standard-theme/assets/chevron_down.svg);
    --multiselect-chevron-up-icon: url(../../themes/standard-theme/assets/chevron_up.svg);
    --multiselect-chevron-position-x: calc(100% - 0.5rem);
    --multiselect-chevron-position-y: 50%;
    --multiselect-chevron-size: auto 1rem;

    /* Layout / spacing */
    --multiselect-pills-gap: 6px;
    --multiselect-pills-margin-top: 8px;
    --multiselect-pill-radius: 16px;
    --multiselect-pill-padding: 0px 3px 0px 6px;
    --multiselect-pill-title-max-width: 200px;

    /* Remove button */
    --multiselect-pill-remove-size: 18px;
    --multiselect-pill-remove-font-size: 16px;
    --multiselect-pill-remove-font-weight: bold;
    --multiselect-pill-remove-focus-outline: 2px solid black;
    --multiselect-pill-remove-focus-outline-offset: 1px;

    /* Dropdown */
    --multiselect-dropdown-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    --multiselect-dropdown-max-height: 250px;
    --multiselect-dropdown-zindex: 1000;
    --multiselect-dropdown-item-padding: 8px 16px;
    --multiselect-dropdown-item-line-height: 22px;
    --multiselect-dropdown-border-radius: 0;

    /* Checkbox */
    --multiselect-checkbox-size: 18px;
    --multiselect-checkbox-margin-right: 10px;
    --multiselect-checkbox-margin-top: 2px;

    /* Status / SR text */
    --multiselect-status-padding: 10px 10px 10px 16px;

    /* Component background surfaces */
    --multiselect-surface-bg: white;
}

/* Options authored on the component; read by the widget JS, never displayed */
.ajila-forms-tg-multiselect-local-options {
    display: none;
}

/* Main wrapper */
.ajila-forms-tg-multiselect-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Input wrapper with toggle icon */
.ajila-forms-tg-multiselect-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--multiselect-surface-bg) !important;
    background: var(--multiselect-chevron-down-icon) var(--multiselect-chevron-position-x) var(--multiselect-chevron-position-y) / var(--multiselect-chevron-size) no-repeat;
    border-radius: var(--multiselect-input-border-radius);
}

.ajila-forms-tg-multiselect-input-wrapper.dropdown-open {
    background-image: var(--multiselect-chevron-up-icon);
}

.ajila-forms-tg-multiselect-input-wrapper input {
    flex: 1;
    /* needs to be transparent to show the chevron icon */
    background-color: transparent !important;

    border: none;
    border-bottom: var(--multiselect-input-border-bottom);
    border-left: var(--multiselect-input-border-left);
    border-right: var(--multiselect-input-border-right);
    border-top: var(--multiselect-input-border-top);

    outline: none;
    padding: var(--multiselect-input-padding);
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--multiselect-input-border-radius);
}

.widget_ajila-forms-tg-multiselect.validation-failure .ajila-forms-tg-multiselect-input-wrapper input {
    border-left: var(--multiselect-input-error-border-left) !important;
    border-top: var(--multiselect-input-error-border-top) !important;
    border-right: var(--multiselect-input-error-border-right) !important;
    border-bottom: var(--multiselect-input-error-border-bottom) !important;
    border-color: var(--multiselect-error-border-color) !important;
}

/* Pills container */
.ajila-forms-tg-multiselect-pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--multiselect-pills-gap);
    margin-top: var(--multiselect-pills-margin-top);
    min-height: 0;
}

.ajila-forms-tg-multiselect-pills-container:empty {
    margin-bottom: 0;
}

/* Individual pill */
.ajila-forms-tg-multiselect-pill {
    display: inline-flex;
    align-items: center;
    background-color: var(--multiselect-pill-bg);
    border: 1px solid var(--multiselect-pill-border);
    border-radius: var(--multiselect-pill-radius);
    padding: var(--multiselect-pill-padding);
    color: var(--multiselect-pill-text-color);
    max-width: 100%;
    box-sizing: border-box;
}

.ajila-forms-tg-multiselect-pill:hover {
    background-color: var(--multiselect-pill-hover-bg);
}

.ajila-forms-tg-multiselect-pill-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: var(--multiselect-pill-title-max-width);
}

.ajila-forms-tg-multiselect-pill-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    width: var(--multiselect-pill-remove-size);
    height: var(--multiselect-pill-remove-size);
    border-radius: 50%;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--multiselect-pill-remove-font-size);
    font-weight: var(--multiselect-pill-remove-font-weight);
    color: var(--multiselect-pill-remove-color);
    line-height: 1;
    padding: 0;
    transition: background-color 0.15s;
}

.ajila-forms-tg-multiselect-pill-remove:hover {
    background-color: var(--multiselect-pill-remove-hover-bg);
    color: var(--multiselect-pill-remove-hover-color);
}

.ajila-forms-tg-multiselect-pill-remove:focus {
    outline: var(--multiselect-pill-remove-focus-outline);
    outline-offset: var(--multiselect-pill-remove-focus-outline-offset);
}

/* Dropdown */
#ajila-forms-tg-multiselect-dropdown {
    position: absolute;
    background-color: var(--multiselect-surface-bg);
    border: 1px solid var(--multiselect-dropdown-border-color);
    border-radius: var(--multiselect-dropdown-border-radius);
    box-shadow: var(--multiselect-dropdown-shadow);
    z-index: var(--multiselect-dropdown-zindex);
    width: 100%;
    max-height: var(--multiselect-dropdown-max-height);
    overflow-y: auto;
    display: none;
}

#ajila-forms-tg-multiselect-dropdown ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#ajila-forms-tg-multiselect-dropdown ul li {
    padding: var(--multiselect-dropdown-item-padding);
    cursor: pointer;
    line-height: var(--multiselect-dropdown-item-line-height);
    border-bottom: 1px solid var(--multiselect-dropdown-row-border-color);
    display: flex;
    align-items: flex-start;
}

#ajila-forms-tg-multiselect-dropdown li:hover {
    background-color: var(--multiselect-dropdown-hover-bg);
}

#ajila-forms-tg-multiselect-dropdown li.ajila-tg-multiselect-searchresult-highlighted {
    background-color: var(--multiselect-dropdown-highlight-bg);
}

#ajila-forms-tg-multiselect-dropdown li.ajila-tg-multiselect-searchresult-highlighted:hover {
    background-color: var(--multiselect-dropdown-highlight-hover-bg);
}

/* Checkbox styling (purely visual: clicks are handled by the list entry) */
.ajila-forms-tg-multiselect-checkbox {
    flex-shrink: 0;
    width: var(--multiselect-checkbox-size);
    height: var(--multiselect-checkbox-size);
    margin-right: var(--multiselect-checkbox-margin-right);
    margin-top: var(--multiselect-checkbox-margin-top);
    pointer-events: none;
    accent-color: var(--multiselect-checkbox-color);
}

.ajila-tg-multiselect-searchresult-content {
    flex: 1;
    min-width: 0;
}

.ajila-tg-multiselect-searchresult-title {
    font-weight: 500;
    word-break: break-word;
}

.ajila-tg-multiselect-searchresult-value {
    margin-top: 2px;
    color: var(--multiselect-overlay-second-element-color);
    font-weight: 400;
    word-break: break-word;
}

/* Status messages */
.ajila-tg-multiselect-searchresult-throbber,
.ajila-tg-multiselect-searchresult-texttooshort,
.ajila-tg-multiselect-searchresult-nomatches {
    color: var(--multiselect-status-text-color);
    padding: var(--multiselect-status-padding);
}

/* Selection count indicator */
.ajila-forms-tg-multiselect-selection-count {
    color: var(--multiselect-overlay-second-element-color);
    margin-top: 4px;
}

/* Visually hidden for screen readers */
.ajila-forms-tg-multiselect-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}