/* Mobile Modal Override - Ensures modals are always visible when shown */

/* Force mobile modals to be visible when they have the show class */
.mobile-filter-modal.show,
.mobile-trending-modal.show {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: flex-end !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

/* Force modal content to be visible and positioned correctly */
.mobile-filter-modal.show .mobile-filter-content,
.mobile-trending-modal.show .mobile-trending-content {
    transform: translateY(0) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 100% !important;
    background: var(--card-bg) !important;
    border-radius: 24px 24px 0 0 !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-shadow: 0 -8px 32px var(--shadow-color) !important;
}

/* Ensure the modal content is not hidden off-screen */
@media (max-width: 992px) {
    .mobile-filter-modal.show,
    .mobile-trending-modal.show {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 999999 !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }
    
    .mobile-filter-modal.show .mobile-filter-content,
    .mobile-trending-modal.show .mobile-trending-content {
        transform: translateY(0) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }
}

/* Debug styles - add a visible border when debugging */
.mobile-modal-debug .mobile-filter-modal.show,
.mobile-modal-debug .mobile-trending-modal.show {
    border: 3px solid red !important;
}

.mobile-modal-debug .mobile-filter-modal.show .mobile-filter-content,
.mobile-modal-debug .mobile-trending-modal.show .mobile-trending-content {
    border: 3px solid blue !important;
}