/**
 * Select2 Bootstrap 4.6 Custom Styling
 * Version: 2.1.0
 * Uses theme.css variables - No duplicate variable definitions
 * Matches the telemedicine admin template design
 */

/* ========================================
   SELECT2 CONTAINER & BASE STYLING
======================================== */
.select2-container {
    width: 100% !important;
    font-family: var(--font-primary);
}

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    border: 1px solid #E4ECF2;
    border-radius: var(--radius-sm);
    min-height: calc(1.5em + 1.25rem + 2px);
    transition: all var(--transition-speed);
    background-color: #ffffff;
}

/* ========================================
   SINGLE SELECT STYLING
======================================== */

.select2-container--default .select2-selection--single {
    height: auto;
    padding: 0.625rem var(--spacing-sm);
    display: flex;
    align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
    line-height: 1.5;
    padding-left: 0;
    padding-right: 0;
    font-size: var(--font-size-base);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--gray-500);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    position: absolute;
    top: 45%;
    right: var(--spacing-sm);
    width: 20px;
    transform: translateY(-50%);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    position: absolute;
    top: 50%;
    border-bottom: 2px solid #212d3d;
    border-right: 2px solid #212d3d;
    transform: translateY(-50%) rotate(45deg);
    transition: all var(--transition-speed);
    height: 9px;
    width: 9px;
    border-top:unset !important;
    border-left: unset!important;
    margin: 0 !important;
    left: unset !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
     transform: translateY(0%) rotate(222deg);
      border-top:unset !important;
    border-left: unset!important;
    border-color: unset !important;
    border-width: 2px !important;
}

/* ========================================
   MULTIPLE SELECT STYLING
======================================== */

.select2-container--default .select2-selection--multiple {
    padding: 0.5rem 0.75rem !important;
    min-height: 42px !important;
    display: flex;
    align-items: center;

}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    width: auto;
    margin: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #5c79ff;
    border: none;
    border-radius: var(--radius-sm);
    color: #ffffff;
    padding: var(--spacing-xs) 1.25rem var(--spacing-xs) var(--spacing-sm);
    margin: 0;
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-base);
    line-height: 1;
    transition: all var(--transition-speed);
    font-weight: 500;
    position: relative;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
    background-color: #5c79ff;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #ffffff;
    font-size: var(--font-size-base);
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--transition-speed);
    border: none;
    background: none;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 5px;
    top: 50%;
    left: unset;
    transform: translateY(-50%);
    background: #adbcff !important;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    text-align: center;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    opacity: 1;
    color: #ffffff;
    background: none;
}

.select2-container--default .select2-search--inline {
    display: inline-flex;
    align-items: center;
    padding-left: 2px;
}

.select2-container--default .select2-search--inline .select2-search__field {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    font-size: var(--font-size-base);
    color: var(--text-primary);
    background: transparent;
    min-width: 150px;
}

.select2-container--default .select2-search--inline .select2-search__field::placeholder {
    color: var(--gray-500);
}

/* ========================================
   FOCUS STATES
======================================== */

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    /* border-color: #5c79ff;
    box-shadow: var(--focus-shadow-primary); */
    outline: none;
}

/* ========================================
   DROPDOWN STYLING
======================================== */

.select2-dropdown {
    border: 1px solid #E4ECF2;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    margin-top: var(--spacing-sm);
    background-color: #ffffff;
    z-index: var(--z-popover);
}

.select2-container--open .select2-dropdown--below {
    border-top: 1px solid #E4ECF2;
}

.select2-container--open .select2-dropdown--above {
    border-bottom: 1px solid #E4ECF2;
}

/* ========================================
   SEARCH BOX STYLING
======================================== */

.select2-search--dropdown {
    padding: var(--spacing-sm);
    background-color: #ffffff;
    border-bottom: 1px solid #E4ECF2;
}

.select2-search--dropdown .select2-search__field {
    border: 1px solid #E4ECF2;
    border-radius: var(--radius-md);
    padding: 0.625rem var(--spacing-sm);
    font-size: var(--font-size-base);
    outline: none;
    width: 100%;
    transition: all var(--transition-speed);
    color: var(--text-primary);
    background-color: #ffffff;
}

.select2-search--dropdown .select2-search__field::placeholder {
    color: var(--gray-500);
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: #5c79ff;
    box-shadow: var(--focus-shadow-primary);
}

/* ========================================
   RESULTS / OPTIONS STYLING
======================================== */

.select2-results {
    max-height: 300px;
    overflow-y: auto;
}

.select2-results__options {
    list-style: none;
    margin: 0;
    padding: var(--spacing-xs) 0;
}

.select2-results__option {
    padding: 0.625rem var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color var(--transition-speed);
    line-height: 1.5;
}

.select2-results__option:hover {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

.select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

.select2-results__option[aria-selected="true"] {
    background-color: var(--primary-color);
    color: #ffffff;
    font-weight: 500;
}

.select2-results__option[aria-selected="true"]:hover {
    background-color: #5c79ff;
    color: #ffffff;
}

/* Ensure selected option in single select is always visible with primary color */
.select2-container--default.select2-container--open .select2-results__option[aria-selected="true"] {
    background-color: var(--primary-color);
    color: #212D3D;
}
.select2-container--default .select2-results__option--selected {
    background-color: #f3f4f9;
}
.select2-results__option--disabled {
    color: var(--text-disabled);
    cursor: not-allowed;
}

.select2-results__option--disabled:hover {
    background-color: transparent;
}

/* ========================================
   MESSAGE STATES
======================================== */

.select2-results__message {
    padding: 0.75rem var(--spacing-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

/* Loading state */
.select2-results__option--loading {
    color: var(--text-secondary);
    padding: 0.75rem var(--spacing-sm);
}

/* No results */
.select2-results__option--noResults {
    padding: 0.75rem var(--spacing-sm);
    color: var(--text-secondary);
}

/* ========================================
   DISABLED STATE
======================================== */

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #f8f9fa;
    cursor: not-allowed;
    border-color: #E4ECF2;
}

.select2-container--default.select2-container--disabled .select2-selection__choice {
    opacity: 0.6;
}

.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
    display: none;
}

/* ========================================
   CLEAR BUTTON
======================================== */

.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--gray-600);
    cursor: pointer;
    float: right;
    font-size: 1.25rem;
    font-weight: 700;
    margin-right: 1.5rem;
    padding: 0;
    line-height: 1;
    transition: color var(--transition-speed);
    height: 20px !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--danger);
}

/* ========================================
   OPTGROUP STYLING
======================================== */

.select2-results__group {
    color: var(--text-secondary);
    display: block;
    padding: var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: default;
}

/* ========================================
   SCROLLBAR CUSTOMIZATION
======================================== */

.select2-results::-webkit-scrollbar {
    width: 8px;
}

.select2-results::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: var(--radius-md);
}

.select2-results::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: var(--radius-md);
}

.select2-results::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* ========================================
   RTL SUPPORT
======================================== */

.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 0;
    padding-left: 20px;
}

.select2-container[dir="rtl"] .select2-selection--single .select2-selection__arrow {
    left: var(--spacing-sm);
    right: auto;
}

.select2-container[dir="rtl"] .select2-selection--multiple .select2-selection__choice,
.select2-container[dir="rtl"] .select2-selection--multiple .select2-search--inline {
    float: right;
}

.select2-container[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
    margin-left: var(--spacing-xs);
    margin-right: 0;
}

.select2-container[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
    margin-left: var(--spacing-xs);
    margin-right: 0;
}

/* ========================================
   VALIDATION STATES (Bootstrap Integration)
======================================== */

/* Valid state */
.was-validated .select2-container .select2-selection--single:valid,
.was-validated .select2-container .select2-selection--multiple:valid,
.select2-container .is-valid+.select2-selection--single,
.select2-container .is-valid+.select2-selection--multiple {
    border-color: var(--success);
}

.was-validated .select2-container .select2-selection--single:valid:focus,
.was-validated .select2-container .select2-selection--multiple:valid:focus,
.select2-container .is-valid+.select2-selection--single:focus,
.select2-container .is-valid+.select2-selection--multiple:focus {
    border-color: var(--success);
    box-shadow: var(--focus-shadow-success);
}

/* Invalid state */
.was-validated .select2-container .select2-selection--single:invalid,
.was-validated .select2-container .select2-selection--multiple:invalid,
.select2-container .is-invalid+.select2-selection--single,
.select2-container .is-invalid+.select2-selection--multiple {
    border-color: var(--danger);
}

.was-validated .select2-container .select2-selection--single:invalid:focus,
.was-validated .select2-container .select2-selection--multiple:invalid:focus,
.select2-container .is-invalid+.select2-selection--single:focus,
.select2-container .is-invalid+.select2-selection--multiple:focus {
    border-color: var(--danger);
    box-shadow: var(--focus-shadow-danger);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
======================================== */

@media (max-width: 768px) {
    .select2-dropdown {
        font-size: var(--font-size-sm);
    }

    .select2-container--default .select2-selection--single {
        padding: var(--spacing-sm) 0.75rem;
    }

    .select2-container--default .select2-selection--multiple {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .select2-results__option {
        padding: var(--spacing-sm) 0.75rem;
    }
}

/* ========================================
   SIZE VARIATIONS (Bootstrap compatible)
======================================== */

/* Small size */
.select2-container--small .select2-selection--single,
.select2-container--small .select2-selection--multiple {
    padding: 0.375rem var(--spacing-sm);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
}

.select2-container--small .select2-selection--single {
    min-height: calc(1.5em + 0.75rem + 2px);
}

.select2-container--small .select2-selection--multiple {
    min-height: calc(1.5em + 0.75rem + 2px);
}

/* Large size */
.select2-container--large .select2-selection--single,
.select2-container--large .select2-selection--multiple {
    padding: 0.75rem var(--spacing-md);
    font-size: var(--font-size-lg);
    border-radius: var(--radius-lg);
}

.select2-container--large .select2-selection--single {
    min-height: calc(1.5em + 1.5rem + 2px);
}

.select2-container--large .select2-selection--multiple {
    min-height: calc(1.5em + 1.5rem + 2px);
}

/* ========================================
   ANIMATION CLASSES
======================================== */

@keyframes select2FadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.select2-dropdown {
    animation: select2FadeIn 0.2s ease-out;
}

/* ========================================
   UTILITY CLASSES
======================================== */

/* Full width select */
.select2-full-width {
    width: 100% !important;
}

/* Custom primary color variant */
.select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #212d3d;
}

.select2-primary .select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
    background-color: #5c79ff;
}

.select2-primary .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #212d3d;
}

.select2-primary .select2-container--default .select2-results__option[aria-selected="true"]:hover {
    background-color: #5c79ff;
}

/* Success color variant */
.select2-success .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--success);
}

.select2-success .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--success);
}

/* Info color variant */
.select2-info .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--info);
}

.select2-info .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--info);
}

/* Warning color variant */
.select2-warning .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--warning);
    color: var(--text-primary);
}

.select2-warning .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--warning);
    color: var(--text-primary);
}

/* Danger color variant */
.select2-danger .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--danger);
}

.select2-danger .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--danger);
}

/* Dark variant (using primary-dark color) */
.select2-dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--primary-dark);
}

.select2-dark .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--primary-dark);
}

/* Light variant (using primary-light color) */
.select2-light .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

.select2-light .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--primary-light);
    color: var(--primary-dark);
}

/* Hover variant (using primary-hover color) */
.select2-hover .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #5c79ff;
}

.select2-hover .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #5c79ff;
}
#select2-product_category-result-drqt-create_new_category.select2-container--default.select2-container--open {
    border-top: 1px solid #E4ECF2 !important;
}