/* Fix for Select2 conflicts in public reservation forms */

/* Fix z-index issues - ensure modals work properly */
.modal-backdrop {
    z-index: 1040 !important;
}

#bookingModal {
    z-index: 1050 !important;
}

#termsModal {
    z-index: 1060 !important;
}

/* Remove any duplicate backdrops */
.modal-backdrop.show ~ .modal-backdrop {
    display: none !important;
}

/* Hide the searching text that appears during conflicts */
.select2-results__message {
    display: none !important;
}

/* Hide "Searching..." text specifically */
.select2-container .select2-results__option[role="status"] {
    display: none !important;
}

/* Ensure proper z-index for public form modals */
.modal .select2-container {
    z-index: 9999 !important;
}

/* Prevent double-click issues by ensuring proper pointer events */
.select2-container .select2-selection {
    pointer-events: auto !important;
}

/* Style improvements for public forms */
.skip-global-select2.select2-hidden-accessible + .select2-container {
    border: 2px solid #28a745 !important; /* Green border to indicate proper initialization */
}

/* Hide any duplicate Select2 containers that might appear */
.select2-container:not(:first-of-type) {
    display: none !important;
}

/* Ensure Select2 dropdowns appear above modals */
.select2-dropdown {
    z-index: 99999 !important;
}

/* Fix for dropdowns in Bootstrap modals */
.modal .select2-container--bootstrap-5 .select2-dropdown {
    z-index: 99999 !important;
}


/* Mobile-constrained dropdown class - centered */
.mobile-constrained {
    /* Let JavaScript control the width and position */
    /* width and left are set dynamically by JS */
}

.mobile-constrained .select2-results {
    /* Inherit width from parent */
}

/* Fix Select2 on mobile - but let JS control dropdown width */
@media (max-width: 768px) {
    .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Don't force dropdown width - let JS handle it */
    .select2-dropdown.mobile-constrained {
        /* Width set by JavaScript based on modal width */
        /* Don't override with !important */
    }
    
    /* Ensure search field doesn't overflow */
    .select2-search--dropdown {
        padding: 4px !important;
    }
    
    .select2-search__field {
        width: calc(100% - 8px) !important;
    }
    
    /* Prevent text overflow in results */
    .select2-results__option {
        white-space: normal !important;
        word-wrap: break-word !important;
        padding: 8px !important;
    }
}