/**
 * QuickView Variations Dropdown CSS Fix
 * 
 * Fixes z-index, overflow, and visibility issues for dropdowns in Bootstrap modals
 */

/* Ensure modal body doesn't clip dropdowns */
.modal[id^="modalQuickview-"] .modal-body {
    overflow: visible !important;
}

.modal[id^="modalQuickview-"] .modal-content {
    overflow: visible !important;
}

.modal[id^="modalQuickview-"] .quickview-content {
    overflow: visible !important;
}

.modal[id^="modalQuickview-"] .qv-variations {
    overflow: visible !important;
}

.modal[id^="modalQuickview-"] .qv-variation-item {
    overflow: visible !important;
}

.modal[id^="modalQuickview-"] .qv-variation-value {
    overflow: visible !important;
    position: relative;
    z-index: 1;
}

/* Z-index activation when dropdown is open */
.modal[id^="modalQuickview-"] .qv-variation-value.is-active {
    z-index: 999 !important;
    position: relative;
}

/* Dropdown container - ensure it's positioned correctly */
.modal[id^="modalQuickview-"] .qv-custom-dropdown,
.modal[id^="modalQuickview-"] .custom-dropdown {
    position: relative;
    z-index: 1;
}

/* Dropdown list - high z-index to appear above modal content and backdrop */
.modal[id^="modalQuickview-"] .qv-custom-dropdown-list,
.modal[id^="modalQuickview-"] .dropdown-list {
    position: absolute !important;
    z-index: 10050 !important; /* Above Bootstrap modal (1050) and backdrop (1040) */
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 4px !important;
    background-color: #fff !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 5px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: all 0.3s ease !important;
    display: block !important;
}

/* Dropdown list when open */
.modal[id^="modalQuickview-"] .qv-custom-dropdown.open .qv-custom-dropdown-list,
.modal[id^="modalQuickview-"] .qv-custom-dropdown.open .dropdown-list,
.modal[id^="modalQuickview-"] .custom-dropdown.open .qv-custom-dropdown-list,
.modal[id^="modalQuickview-"] .custom-dropdown.open .dropdown-list {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    display: block !important;
    z-index: 10050 !important;
}

/* Additional fallback: ensure list is visible when parent has open class */
.modal[id^="modalQuickview-"] .qv-custom-dropdown.open > .qv-custom-dropdown-list,
.modal[id^="modalQuickview-"] .qv-custom-dropdown.open > .dropdown-list,
.modal[id^="modalQuickview-"] .custom-dropdown.open > .qv-custom-dropdown-list,
.modal[id^="modalQuickview-"] .custom-dropdown.open > .dropdown-list {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    pointer-events: auto !important;
}

/* Ensure dropdown selected area is clickable */
.modal[id^="modalQuickview-"] .qv-custom-dropdown-selected,
.modal[id^="modalQuickview-"] .dropdown-selected {
    position: relative;
    z-index: 1;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Dropdown options */
.modal[id^="modalQuickview-"] .qv-custom-dropdown-option,
.modal[id^="modalQuickview-"] .dropdown-option {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Nice-select compatibility */
.modal[id^="modalQuickview-"] .nice-select.qv-variation-select-hidden {
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.modal[id^="modalQuickview-"] .nice-select.qv-variation-select-hidden .list {
    z-index: 10050 !important;
}

/* Prevent backdrop from blocking dropdown clicks */
.modal-backdrop {
    pointer-events: none;
}

.modal-backdrop + .modal {
    pointer-events: auto;
}

.modal-backdrop + .modal .qv-custom-dropdown.open .qv-custom-dropdown-list,
.modal-backdrop + .modal .qv-custom-dropdown.open .dropdown-list,
.modal-backdrop + .modal .custom-dropdown.open .qv-custom-dropdown-list,
.modal-backdrop + .modal .custom-dropdown.open .dropdown-list {
    pointer-events: auto !important;
}

/* Mobile/touch support */
@media (max-width: 768px) {
    .modal[id^="modalQuickview-"] .qv-custom-dropdown-list,
    .modal[id^="modalQuickview-"] .dropdown-list {
        max-height: 200px !important;
    }
    
    .modal[id^="modalQuickview-"] .qv-custom-dropdown-option,
    .modal[id^="modalQuickview-"] .dropdown-option {
        padding: 15px 18px !important; /* Larger touch target */
        min-height: 44px !important; /* iOS recommended touch target */
    }
}

/* Ensure dropdown doesn't get cut off at bottom of modal */
.modal[id^="modalQuickview-"] .qv-variation-value {
    margin-bottom: 10px; /* Space for dropdown to expand */
}

/* Drop-down direction (default) */
.modal[id^="modalQuickview-"] .qv-custom-dropdown.open-down .qv-custom-dropdown-list,
.modal[id^="modalQuickview-"] .qv-custom-dropdown.open-down .dropdown-list,
.modal[id^="modalQuickview-"] .custom-dropdown.open-down .qv-custom-dropdown-list,
.modal[id^="modalQuickview-"] .custom-dropdown.open-down .dropdown-list {
    top: 100% !important;
    bottom: auto !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

/* Drop-up support (if dropdown is near bottom) - backward compatibility */
.modal[id^="modalQuickview-"] .qv-custom-dropdown.drop-up .qv-custom-dropdown-list,
.modal[id^="modalQuickview-"] .qv-custom-dropdown.drop-up .dropdown-list,
.modal[id^="modalQuickview-"] .custom-dropdown.drop-up .qv-custom-dropdown-list,
.modal[id^="modalQuickview-"] .custom-dropdown.drop-up .dropdown-list,
/* New open-up class */
.modal[id^="modalQuickview-"] .qv-custom-dropdown.open-up .qv-custom-dropdown-list,
.modal[id^="modalQuickview-"] .qv-custom-dropdown.open-up .dropdown-list,
.modal[id^="modalQuickview-"] .custom-dropdown.open-up .qv-custom-dropdown-list,
.modal[id^="modalQuickview-"] .custom-dropdown.open-up .dropdown-list {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    transform: translateY(10px) !important;
}

.modal[id^="modalQuickview-"] .qv-custom-dropdown.drop-up.open .qv-custom-dropdown-list,
.modal[id^="modalQuickview-"] .qv-custom-dropdown.drop-up.open .dropdown-list,
.modal[id^="modalQuickview-"] .custom-dropdown.drop-up.open .qv-custom-dropdown-list,
.modal[id^="modalQuickview-"] .custom-dropdown.drop-up.open .dropdown-list,
.modal[id^="modalQuickview-"] .qv-custom-dropdown.open-up.open .qv-custom-dropdown-list,
.modal[id^="modalQuickview-"] .qv-custom-dropdown.open-up.open .dropdown-list,
.modal[id^="modalQuickview-"] .custom-dropdown.open-up.open .qv-custom-dropdown-list,
.modal[id^="modalQuickview-"] .custom-dropdown.open-up.open .dropdown-list {
    transform: translateY(0) !important;
}