/**
 * Custom styles for Select2 with Bootstrap 5 theme
 *
 * This file contains custom CSS fixes for Select2 location fields
 * to ensure consistent styling with form-select-lg fields and
 * proper positioning of the clear button (×).
 *
 * Applied to: Company and Branch forms with location fields
 * (Country, Department/Region, Province/Subregion, City/District)
 */

/* Fix Select2 height to match form-select-lg */
.select2-container--bootstrap5 .select2-selection,
.select2-container--bootstrap5 .select2-selection--single {
    height: 45.87px !important;
    min-height: 45.87px !important;
    padding: 10.725px 39px 10.725px 19.5px !important;
    font-size: 14.95px !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered {
    line-height: 24px !important;
    padding-left: 0 !important;
    padding-right: 50px !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.select2-container--bootstrap5 .select2-selection--single .select2-selection__arrow {
    height: 45.87px !important;
    right: 10px !important;
}

/* Fix styling for selected values (choice pills) */
.select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered .select2-selection__choice {
    margin: 0 !important;
    padding: 4px 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
}

.select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered .select2-selection__choice__remove {
    margin-right: 5px !important;
}

/* Fix clear button (X) positioning - place it inside the select on the right */
.select2-container--bootstrap5 .select2-selection__clear {
    position: absolute !important;
    right: 35px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    color: #6c757d !important;
    cursor: pointer !important;
    z-index: 1 !important;
    padding: 0 5px !important;
    margin: 0 !important;
}

.select2-container--bootstrap5 .select2-selection__clear:hover {
    color: #dc3545 !important;
}