/*
 * OBS Filter Search Frontend Styles
 */

/* Override the clear button ('x') styling for Select2 */
.select2-container--default .select2-selection--single .select2-selection__clear {
    /* Reset background and border to make it transparent */
    background-color: transparent !important;
    border: none !important;

    /* Positioning to the right */
    float: right;
    margin-right: 10px; /* Some space from the edge */
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    width: auto;

    /* Text style for the 'x' */
    color: #f25900 !important; /* Orange color for the 'x' */
    font-size: 1.5em; /* Make the 'x' a bit bigger */
    font-weight: bold;
    line-height: 1;
}

/* When hovering over the clear button */
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #cc4a00 !important; /* Darker orange on hover */
    background-color: transparent !important;
}

/* Make sure the selected text is visible and doesn't overlap with the 'x' */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 25px !important; 
}

/* Change highlight color for selected items in the dropdown list */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #f25900 !important; /* Orange highlight */
    color: white !important;
}

/* Change color of the border when the dropdown is focused */
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #f25900 !important;
    box-shadow: 0 0 5px rgba(242, 89, 0, 0.5); /* Optional: add a glow */
}

/* For multi-select boxes, change the selected item's style */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #f25900 !important; /* Orange background */
    border-color: #e65400 !important;
    color: white !important;
}

/* Change the remove button ('x') color on multi-select items */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: white !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #fde6d8 !important; /* Lighter orange for hover */
}