@import 'mobile/index.css';

/* CRITICAL: Force hide mobile modals on desktop by default */
.mobile-settings-modal,
#mobile-settings-modal,
.mobile-menu-modal,
#mobile-menu-modal {
    display: none !important;
    visibility: hidden !important;
}

@media (max-width: 768px) {

    /* On mobile, allow them to be shown when active */
    .mobile-settings-modal,
    #mobile-settings-modal,
    .mobile-menu-modal,
    #mobile-menu-modal {
        visibility: visible !important;
        /* Restore visibility availability */
        /* display: none is the default unless .active class is added */
    }

    /* When active, show them */
    .mobile-settings-modal.active,
    #mobile-settings-modal.active,
    .mobile-menu-modal.active,
    #mobile-menu-modal.active {
        display: flex !important;
    }
}