/**
 * Acuo Travel Agent - Select2 Integration Styles
 *
 * This file contains CSS rules for styling Select2 dropdown elements
 * within the Acuo Travel Agent plugin. It ensures proper integration
 * and consistent appearance with the plugin's design.
 *
 * @package Acuo_Travel_Agent
 * @version 1.0.0
 */

/**
 * Multiple Selection Container
 *
 * Styles for the Select2 multiple selection container within the filter form.
 */
.acuo-travel-filter .select2-container--default .select2-selection--multiple {
   border-radius: 4px !important;
    cursor: text !important;
    padding: 5px 8px !important;
    box-sizing: border-box !important;
    background-color: #ffffff !important;

}

/**
 * Selection Choice Items
 *
 * Styles for individual selected items in a multiple selection dropdown.
 */
.acuo-travel-filter .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4 !important;
    border: 1px solid #aaa !important;
    border-radius: 4px !important;
    cursor: default !important;
    float: left !important;
    margin-right: 5px !important;
    margin-top: 5px !important;
   /* padding: 0 5px !important;*/
   padding:0 20px !important;
}

/**
 * Select2 Container
 *
 * Base styles for the Select2 container element.
 */
.acuo-travel-filter .select2-container {
    box-sizing: border-box !important;
    display: inline-block !important;
    margin: 0 !important;
    position: relative !important;
    vertical-align: middle !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear{
display:none !important;
  
}



/**
 * Form Labels
 *
 * Styles for form labels within the filter form.
 */
.acuo-travel-filter label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
}

/**
 * Selection Rendered Content
 *
 * Styles for the rendered content area of multiple selections.
 */
.acuo-travel-filter .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: block !important;
    padding-left: 25px !important;
  /*  padding-right: 20px !important;*/
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/**
 * Placeholder Text
 *
 * Styles for the placeholder text in multiple selection dropdowns.
 */
.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: #999 !important;
}

/**
 * Search Field Placeholder
 *
 * Styles for the placeholder text in the search input field.
 */
.select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

.select2-container--default .select2-search--inline .select2-search__field{
   /* margin-left: 18px !important;*/
   /*  margin-left: 25px !important; */
    margin-bottom: 5px !important;
}

.acuo-travel-filter .acuo-filter-form select, .acuo-travel-filter .acuo-filter-form .acuo-select, .acuo-travel-filter .acuo-filter-form .select2-container {
    margin-bottom: 0px !important;
}

body .select2-container {
    z-index: 0 !important;
}
.select2-results{
text: black;
}

/**
 * Filter Column
 *
 * Styles for filter columns that contain Select2 elements.
 */
.acuo-travel-filter .acuo-filter-column {
    padding: 0 10px !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
}

/**
 * Filter Row Alignment Variants
 *
 * Classes to control the horizontal alignment of filter form elements.
 */
.acuo-travel-filter .acuo-filter-row.align-left {
    justify-content: flex-start !important;
}
.acuo-travel-filter .acuo-filter-row.align-center {
    justify-content: center !important;
}
.acuo-travel-filter .acuo-filter-row.align-right {
    justify-content: flex-end !important;
}
.acuo-travel-filter .acuo-filter-row.align-space-between {
    justify-content: space-between !important;
}
.select2-selection__clear:hover {
    color: #333 !important;
    opacity: 1 !important;
    visibility: visible !important;
}